.test {
    display: none
}

.rotate180 {
    transition: -webkit-transform .2s ease-out, transform .2s ease-out;
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

.rotate180.active {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    50% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes bounce {
    0% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    50% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration: .25s;
    animation-duration: .25s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

.no-animate,
[feature-toggles*=toggleCssAnimationsDisabled] * {
    transition: none!important
}

.shadow-rounded-light:after {
    z-index: -1;
    position: absolute;
    width: 46px;
    top: 13px;
    left: 2px;
    content: '';
    height: 70px;
    border-top-left-radius: 35%;
    border-bottom-left-radius: 35%;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5)
}

.shadow-rounded-dark::after {
    position: absolute;
    width: 46px;
    top: 0;
    content: '';
    right: -46px;
    height: 100%;
    border-top-left-radius: 35%;
    border-bottom-left-radius: 35%;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5)
}

.shadow-bottom-rounded-light {
    position: relative
}

.shadow-bottom-rounded-light::after {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    content: '';
    height: 22px;
    z-index: -1;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, .75)
}

.shadow-top-rounded-light {
    position: relative
}

.shadow-top-rounded-light:after {
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    content: '';
    height: 22px;
    z-index: -1;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, .75)
}

.shadow-bottom-rounded-dark {
    position: relative
}

.shadow-bottom-rounded-dark:after {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    content: '';
    height: 22px;
    z-index: -1;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5)
}

.shadow-top-rounded-dark {
    position: relative
}

.shadow-top-rounded-dark::after {
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    content: '';
    height: 22px;
    z-index: -1;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5)
}

.shadow-rounded-dark,
.shadow-rounded-light {
    position: relative;
    overflow: hidden
}

.header-shadow-light {
    box-shadow: 0 5px 7px 0 rgba(0, 0, 0, .25)
}

.header-shadow-light-inset {
    box-shadow: inset 0 11px 7px -7px rgba(0, 0, 0, .25)
}

.header-shadow-light_bottom {
    box-shadow: 0 11px 7px -7px rgba(0, 0, 0, .25)
}

.header-shadow-dark {
    box-shadow: 0 5px 7px 0 rgba(0, 0, 0, .5)
}

.footer-shadow-light {
    box-shadow: 0 4px 13px 4px rgba(0, 0, 0, .75)
}

.footer-shadow-dark {
    box-shadow: 0 4px 13px 4px #000
}

.header-round-shadow-dark-inset-top {
    position: relative;
    overflow: hidden
}

.header-round-shadow-dark-inset-top:after {
    width: 100%;
    height: 23px;
    content: "";
    z-index: 10;
    position: absolute;
    left: 0;
    top: -26px;
    border-radius: 50%;
    box-shadow: 1px 1px 17px rgba(0, 0, 0, .5)
}

.header-round-shadow-light-inset-top {
    position: relative;
    overflow: hidden
}

.header-round-shadow-light-inset-top:after {
    width: 100%;
    height: 23px;
    content: "";
    position: absolute;
    left: 0;
    top: -26px;
    border-radius: 50%;
    box-shadow: 1px 1px 17px rgba(0, 0, 0, .25)
}

.header-round-shadow-light-inset-bottom {
    position: relative
}

.header-round-shadow-light-inset-bottom:after {
    width: 100%;
    height: 23px;
    content: "";
    position: absolute;
    left: 0;
    bottom: -23px;
    border-radius: 50%;
    box-shadow: 1px 1px 17px rgba(0, 0, 0, .5)
}

.header-round-shadow-light {
    position: relative
}

.header-round-shadow-light.hide-shadow:after {
    opacity: 0
}

.header-round-shadow-light:after {
    transition: opacity 1s ease-in;
    width: 100%;
    height: 85%;
    content: "";
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 25%;
    box-shadow: 1px 1px 17px rgba(0, 0, 0, .5)
}

@media (min-width: 870px) {
    .header-round-shadow-light:after {
        opacity: .7
    }
}

.absoluteFill {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.pageBreakBeforeAlways {
    page-break-before: always
}

.pageBreakAfterAlways {
    page-break-after: always
}

.displayNone {
    display: none
}

.inlineBlock {
    display: inline-block
}

.displayBlock {
    display: block
}

.widthHeight100 {
    height: 100%;
    width: 100%
}

.width100 {
    width: 100%
}

.flex {
    display: flex
}

.relative {
    position: relative
}

.textCenter {
    text-align: center
}

.textRight {
    text-align: right
}

.overflowHidden {
    overflow: hidden
}

.floatRight {
    float: right
}

.floatLeft {
    float: left
}

.clearfix:after,
.clearfix:before {
    display: table;
    content: " "
}

.clearfix:after {
    clear: both
}

.cursorPointer {
    cursor: pointer
}

.centered {
    left: 50vw;
    top: 50vh;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.absolute-centered {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.verticalMiddle {
    vertical-align: middle
}

.text-overflow-ellipsis {
    text-overflow: ellipsis
}

.currentColor {
    fill: currentColor
}

.no-button {
    background: 0 0;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit
}

.no-dimension {
    width: 0;
    height: 0
}

.visibleOnlyForScreenReader {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.focusBackground:focus,
.focusBackground:hover {
    background-color: #d7d7d7
}

.focusBackgroundDark:focus,
.focusBackgroundDark:hover {
    background-color: #afafaf
}

.focusLink:focus,
.focusLink:hover {
    color: #5b7e32;
    fill: #5b7e32
}

.focusLinkDark:focus,
.focusLinkDark:hover {
    color: #d5ff2f;
    fill: #d5ff2f
}

.focusLinkImportant:focus,
.focusLinkImportant:hover {
    color: #5b7e32!important;
    fill: #5b7e32!important
}

.focusLinkDarkImportant:focus,
.focusLinkDarkImportant:hover {
    color: #d5ff2f!important;
    fill: #d5ff2f!important
}

.checkboxArea {
    margin: 1px;
    box-sizing: border-box
}

.checkboxArea input[type=checkbox] {
    position: absolute;
    width: 0;
    height: 0;
    top: -99999px;
    left: -999999px
}

.checkboxArea .div-label,
.checkboxArea label {
    font-size: 16px;
    box-sizing: inherit;
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: #fff;
    width: 35px;
    height: 39px;
    line-height: 35px;
    text-align: center;
    vertical-align: center;
    text-transform: uppercase;
    font-weight: 400;
    color: #868686;
    border-bottom: 5px solid #d7d7d7;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.checkboxArea input[type=checkbox]:checked+label {
    color: #222;
    border-bottom: 5px solid #508546
}

.checkboxArea input[type=checkbox]:checked+label.weekend {
    color: #e2002a
}

.form input[type=search],
.form input[type=text],
.form input[type=password],
.form input[type=number],
.form input[type=time],
.form select,
.form textarea {
    font-size: 16px;
    border-color: #afafaf;
    border-style: none none solid;
    border-width: medium medium 1px;
    outline: 0;
    padding-bottom: 6px
}

.form input[type=search]::-webkit-input-placeholder,
.form input[type=text]::-webkit-input-placeholder,
.form input[type=password]::-webkit-input-placeholder,
.form input[type=number]::-webkit-input-placeholder,
.form input[type=time]::-webkit-input-placeholder,
.form select::-webkit-input-placeholder,
.form textarea::-webkit-input-placeholder {
    color: #afafaf!important
}

.form input[type=search]:-moz-placeholder,
.form input[type=text]:-moz-placeholder,
.form input[type=password]:-moz-placeholder,
.form input[type=number]:-moz-placeholder,
.form input[type=time]:-moz-placeholder,
.form select:-moz-placeholder,
.form textarea:-moz-placeholder {
    color: #afafaf!important
}

.form input[type=search]::-moz-placeholder,
.form input[type=text]::-moz-placeholder,
.form input[type=password]::-moz-placeholder,
.form input[type=number]::-moz-placeholder,
.form input[type=time]::-moz-placeholder,
.form select::-moz-placeholder,
.form textarea::-moz-placeholder {
    color: #afafaf!important
}

.form input[type=search]:-ms-input-placeholder,
.form input[type=text]:-ms-input-placeholder,
.form input[type=password]:-ms-input-placeholder,
.form input[type=number]:-ms-input-placeholder,
.form input[type=time]:-ms-input-placeholder,
.form select:-ms-input-placeholder,
.form textarea:-ms-input-placeholder {
    color: #afafaf!important
}

.form input[type=search][disabled]::-webkit-input-placeholder,
.form input[type=text][disabled]::-webkit-input-placeholder,
.form input[type=password][disabled]::-webkit-input-placeholder,
.form input[type=number][disabled]::-webkit-input-placeholder,
.form input[type=time][disabled]::-webkit-input-placeholder,
.form select[disabled]::-webkit-input-placeholder,
.form textarea[disabled]::-webkit-input-placeholder {
    color: #e6e6e6!important
}

.form input[type=search][disabled]:-moz-placeholder,
.form input[type=text][disabled]:-moz-placeholder,
.form input[type=password][disabled]:-moz-placeholder,
.form input[type=number][disabled]:-moz-placeholder,
.form input[type=time][disabled]:-moz-placeholder,
.form select[disabled]:-moz-placeholder,
.form textarea[disabled]:-moz-placeholder {
    color: #e6e6e6!important
}

.form input[type=search][disabled]::-moz-placeholder,
.form input[type=text][disabled]::-moz-placeholder,
.form input[type=password][disabled]::-moz-placeholder,
.form input[type=number][disabled]::-moz-placeholder,
.form input[type=time][disabled]::-moz-placeholder,
.form select[disabled]::-moz-placeholder,
.form textarea[disabled]::-moz-placeholder {
    color: #e6e6e6!important
}

.form input[type=search][disabled]:-ms-input-placeholder,
.form input[type=text][disabled]:-ms-input-placeholder,
.form input[type=password][disabled]:-ms-input-placeholder,
.form input[type=number][disabled]:-ms-input-placeholder,
.form input[type=time][disabled]:-ms-input-placeholder,
.form select[disabled]:-ms-input-placeholder,
.form textarea[disabled]:-ms-input-placeholder {
    color: #e6e6e6!important
}

.form input[type=search]::-ms-clear,
.form input[type=search]::-ms-reveal,
.form input[type=text]::-ms-clear,
.form input[type=text]::-ms-reveal,
.form input[type=password]::-ms-clear,
.form input[type=password]::-ms-reveal,
.form input[type=number]::-ms-clear,
.form input[type=number]::-ms-reveal,
.form input[type=time]::-ms-clear,
.form input[type=time]::-ms-reveal,
.form select::-ms-clear,
.form select::-ms-reveal,
.form textarea::-ms-clear,
.form textarea::-ms-reveal {
    display: none
}

.form input[type=button] {
    border: none;
    background: 0 0
}

.form select {
    height: 28px
}

.form select:focus,
.form select:hover {
    border-bottom-color: #6fb86f;
    border-bottom-width: 2px
}

.form.ng-submitted .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation),
.form.ng-submitted input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation),
.form.ng-submitted input.ng-invalid.showOnPristine:not(.ng-hide-validation),
.form.ng-submitted select.ng-invalid.showOnPristine:not(.ng-hide-validation),
.form.ng-submitted.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation),
.form.ng-submitted.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation),
.form.ng-submitted.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation),
.form.ng-submitted.ng-submitted input.ng-invalid:not(.ng-hide-validation) {
    color: #cc3432!important;
    box-shadow: none;
    border-bottom-color: #e2002a!important
}

.form.ng-submitted .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted input.ng-invalid.showOnPristine:not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted select.ng-invalid.showOnPristine:not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted.ng-submitted input.ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder {
    color: #cc3432!important
}

.form.ng-submitted .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted input.ng-invalid.showOnPristine:not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted select.ng-invalid.showOnPristine:not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted.ng-submitted input.ng-invalid:not(.ng-hide-validation):-moz-placeholder {
    color: #cc3432!important
}

.form.ng-submitted .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted input.ng-invalid.showOnPristine:not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted select.ng-invalid.showOnPristine:not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted.ng-submitted input.ng-invalid:not(.ng-hide-validation)::-moz-placeholder {
    color: #cc3432!important
}

.form.ng-submitted .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted input.ng-invalid.showOnPristine:not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted select.ng-invalid.showOnPristine:not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted.ng-submitted input.ng-invalid:not(.ng-hide-validation):-ms-input-placeholder {
    color: #cc3432!important
}

.form.ng-submitted .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label,
.form.ng-submitted input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label,
.form.ng-submitted input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label,
.form.ng-submitted select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label,
.form.ng-submitted.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label,
.form.ng-submitted.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label,
.form.ng-submitted.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label,
.form.ng-submitted.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label {
    color: #cc3432!important;
    box-shadow: none;
    border-bottom-color: #e2002a!important
}

.form.ng-submitted .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder {
    color: #cc3432!important
}

.form.ng-submitted .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder {
    color: #cc3432!important
}

.form.ng-submitted .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder {
    color: #cc3432!important
}

.form.ng-submitted .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder {
    color: #cc3432!important
}

.form.ng-submitted div.input-error,
.form.ng-submitted div.inputError {
    font-size: 12px;
    color: #cc3432;
    margin-top: 5px
}

.form.ng-submitted div.note-error {
    color: #cc3432!important
}

.form.ng-submitted.onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation),
.form.ng-submitted.onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation),
.form.ng-submitted.onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation),
.form.ng-submitted.onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation),
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation),
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation),
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation),
.form.ng-submitted.onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation) {
    color: #ff7b8f!important;
    box-shadow: none;
    border-bottom-color: #ff7b8f!important
}

.form.ng-submitted.onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder {
    color: #ff7b8f!important
}

.form.ng-submitted.onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted.onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation):-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation):-moz-placeholder {
    color: #ff7b8f!important
}

.form.ng-submitted.onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted.onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)::-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)::-moz-placeholder {
    color: #ff7b8f!important
}

.form.ng-submitted.onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted.onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation):-ms-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation):-ms-input-placeholder {
    color: #ff7b8f!important
}

.form.ng-submitted.onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label,
.form.ng-submitted.onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label,
.form.ng-submitted.onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label,
.form.ng-submitted.onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label,
.form.ng-submitted.onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label {
    color: #ff7b8f!important;
    box-shadow: none;
    border-bottom-color: #ff7b8f!important
}

.form.ng-submitted.onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder {
    color: #ff7b8f!important
}

.form.ng-submitted.onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted.onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label:-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder {
    color: #ff7b8f!important
}

.form.ng-submitted.onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted.onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label::-moz-placeholder,
.form.ng-submitted.onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder {
    color: #ff7b8f!important
}

.form.ng-submitted.onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted.onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted.onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label:-ms-input-placeholder,
.form.ng-submitted.onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder {
    color: #ff7b8f!important
}

.form.ng-submitted.onDarkBackground div.input-error,
.form.ng-submitted.onDarkBackground div.inputError {
    font-size: 12px;
    color: #ff7b8f;
    margin-top: 5px
}

.form.ng-submitted.onDarkBackground div.note-error {
    color: #ff7b8f!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.showOnPristine:not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) select.ng-invalid.showOnPristine:not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-submitted input.ng-invalid:not(.ng-hide-validation) {
    color: #cc3432!important;
    box-shadow: none;
    border-bottom-color: #e2002a!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.showOnPristine:not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) select.ng-invalid.showOnPristine:not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-submitted input.ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder {
    color: #cc3432!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.showOnPristine:not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) select.ng-invalid.showOnPristine:not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-submitted input.ng-invalid:not(.ng-hide-validation):-moz-placeholder {
    color: #cc3432!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.showOnPristine:not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) select.ng-invalid.showOnPristine:not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-submitted input.ng-invalid:not(.ng-hide-validation)::-moz-placeholder {
    color: #cc3432!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.showOnPristine:not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) select.ng-invalid.showOnPristine:not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-submitted input.ng-invalid:not(.ng-hide-validation):-ms-input-placeholder {
    color: #cc3432!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-submitted input.ng-invalid:not(.ng-hide-validation)~label {
    color: #cc3432!important;
    box-shadow: none;
    border-bottom-color: #e2002a!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-submitted input.ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder {
    color: #cc3432!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-submitted input.ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder {
    color: #cc3432!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-submitted input.ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder {
    color: #cc3432!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).ng-submitted input.ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder {
    color: #cc3432!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) div.input-error,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) div.inputError {
    font-size: 12px;
    color: #cc3432;
    margin-top: 5px
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) div.note-error {
    color: #cc3432!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation),
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation) {
    color: #ff7b8f!important;
    box-shadow: none;
    border-bottom-color: #ff7b8f!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder {
    color: #ff7b8f!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation):-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation):-moz-placeholder {
    color: #ff7b8f!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)::-moz-placeholder {
    color: #ff7b8f!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation):-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation):-ms-input-placeholder {
    color: #ff7b8f!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label {
    color: #ff7b8f!important;
    box-shadow: none;
    border-bottom-color: #ff7b8f!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label::-webkit-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder {
    color: #ff7b8f!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label:-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder {
    color: #ff7b8f!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label::-moz-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder {
    color: #ff7b8f!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label:-ms-input-placeholder,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder {
    color: #ff7b8f!important
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground div.input-error,
.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground div.inputError {
    font-size: 12px;
    color: #ff7b8f;
    margin-top: 5px
}

.form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground div.note-error {
    color: #ff7b8f!important
}

.setDefaultValidationError .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation),
.setDefaultValidationError input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation),
.setDefaultValidationError input.ng-invalid.showOnPristine:not(.ng-hide-validation),
.setDefaultValidationError select.ng-invalid.showOnPristine:not(.ng-hide-validation),
.setDefaultValidationError.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation),
.setDefaultValidationError.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation),
.setDefaultValidationError.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation),
.setDefaultValidationError.ng-submitted input.ng-invalid:not(.ng-hide-validation) {
    color: #cc3432!important;
    box-shadow: none;
    border-bottom-color: #e2002a!important
}

.setDefaultValidationError .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)::-webkit-input-placeholder,
.setDefaultValidationError input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)::-webkit-input-placeholder,
.setDefaultValidationError input.ng-invalid.showOnPristine:not(.ng-hide-validation)::-webkit-input-placeholder,
.setDefaultValidationError select.ng-invalid.showOnPristine:not(.ng-hide-validation)::-webkit-input-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)::-webkit-input-placeholder,
.setDefaultValidationError.ng-submitted input.ng-invalid:not(.ng-hide-validation)::-webkit-input-placeholder {
    color: #cc3432!important
}

.setDefaultValidationError .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation):-moz-placeholder,
.setDefaultValidationError input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation):-moz-placeholder,
.setDefaultValidationError input.ng-invalid.showOnPristine:not(.ng-hide-validation):-moz-placeholder,
.setDefaultValidationError select.ng-invalid.showOnPristine:not(.ng-hide-validation):-moz-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation):-moz-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation):-moz-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation):-moz-placeholder,
.setDefaultValidationError.ng-submitted input.ng-invalid:not(.ng-hide-validation):-moz-placeholder {
    color: #cc3432!important
}

.setDefaultValidationError .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)::-moz-placeholder,
.setDefaultValidationError input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)::-moz-placeholder,
.setDefaultValidationError input.ng-invalid.showOnPristine:not(.ng-hide-validation)::-moz-placeholder,
.setDefaultValidationError select.ng-invalid.showOnPristine:not(.ng-hide-validation)::-moz-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)::-moz-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)::-moz-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)::-moz-placeholder,
.setDefaultValidationError.ng-submitted input.ng-invalid:not(.ng-hide-validation)::-moz-placeholder {
    color: #cc3432!important
}

.setDefaultValidationError .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation):-ms-input-placeholder,
.setDefaultValidationError input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation):-ms-input-placeholder,
.setDefaultValidationError input.ng-invalid.showOnPristine:not(.ng-hide-validation):-ms-input-placeholder,
.setDefaultValidationError select.ng-invalid.showOnPristine:not(.ng-hide-validation):-ms-input-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation):-ms-input-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation):-ms-input-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation):-ms-input-placeholder,
.setDefaultValidationError.ng-submitted input.ng-invalid:not(.ng-hide-validation):-ms-input-placeholder {
    color: #cc3432!important
}

.setDefaultValidationError .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label,
.setDefaultValidationError input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label,
.setDefaultValidationError input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label,
.setDefaultValidationError select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label,
.setDefaultValidationError.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label,
.setDefaultValidationError.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label,
.setDefaultValidationError.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label,
.setDefaultValidationError.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label {
    color: #cc3432!important;
    box-shadow: none;
    border-bottom-color: #e2002a!important
}

.setDefaultValidationError .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.setDefaultValidationError input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label::-webkit-input-placeholder,
.setDefaultValidationError input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.setDefaultValidationError select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label::-webkit-input-placeholder,
.setDefaultValidationError.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label::-webkit-input-placeholder {
    color: #cc3432!important
}

.setDefaultValidationError .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label:-moz-placeholder,
.setDefaultValidationError input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label:-moz-placeholder,
.setDefaultValidationError input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-moz-placeholder,
.setDefaultValidationError select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-moz-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label:-moz-placeholder,
.setDefaultValidationError.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label:-moz-placeholder {
    color: #cc3432!important
}

.setDefaultValidationError .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label::-moz-placeholder,
.setDefaultValidationError input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label::-moz-placeholder,
.setDefaultValidationError input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-moz-placeholder,
.setDefaultValidationError select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label::-moz-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label::-moz-placeholder,
.setDefaultValidationError.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label::-moz-placeholder {
    color: #cc3432!important
}

.setDefaultValidationError .validationWrapper.ng-invalid.ng-touched input:not(.ng-hide-validation)~label:-ms-input-placeholder,
.setDefaultValidationError input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label:-ms-input-placeholder,
.setDefaultValidationError input.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-ms-input-placeholder,
.setDefaultValidationError select.ng-invalid.showOnPristine:not(.ng-hide-validation)~label:-ms-input-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted .ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted div.input.ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder,
.setDefaultValidationError.ng-invalid.ng-submitted input.ng-invalid:not([type=password]):not(.ng-hide-validation)~label:-ms-input-placeholder,
.setDefaultValidationError.ng-submitted input.ng-invalid:not(.ng-hide-validation)~label:-ms-input-placeholder {
    color: #cc3432!important
}

.setDefaultValidationError div.input-error,
.setDefaultValidationError div.inputError {
    font-size: 12px;
    color: #cc3432;
    margin-top: 5px
}

.setDefaultValidationError div.note-error {
    color: #cc3432!important
}

.setDefaultValidationErrorColor {
    color: #cc3432!important;
    box-shadow: none;
    border-bottom-color: #e2002a!important
}

.setDefaultValidationErrorColor::-webkit-input-placeholder {
    color: #cc3432!important
}

.setDefaultValidationErrorColor:-moz-placeholder {
    color: #cc3432!important
}

.setDefaultValidationErrorColor::-moz-placeholder {
    color: #cc3432!important
}

.setDefaultValidationErrorColor:-ms-input-placeholder {
    color: #cc3432!important
}

input:-ms-input-placeholder {
    color: #afafaf
}

select.placeholderOnBrightBackground option:disabled,
select.placeholderOnBrightBackground.notSelected {
    color: #afafaf!important
}

select.placeholderOnBrightBackground option {
    color: #222
}

.textAreaAutoHeight {
    box-sizing: border-box;
    resize: none
}

.inputGroup {
    position: relative
}

.inputGroup select,
.inputGroup>input {
    height: 29px
}

.inputGroup select.hasValue~label,
.inputGroup select.ng-not-empty~label,
.inputGroup select:focus~label,
.inputGroup>input.hasValue~label,
.inputGroup>input.ng-not-empty~label,
.inputGroup>input:focus~label {
    bottom: 28px;
    font-size: 12px;
    color: #6fb86f
}

.inputGroup select:focus,
.inputGroup>input:focus {
    outline: 0;
    border-bottom: 2px solid #6fb86f
}

.inputGroup .input-error-email {
    border-color: #ab0020!important
}

.inputGroup>label {
    font-size: 16px;
    color: #868686;
    position: absolute;
    pointer-events: none;
    left: 0;
    bottom: 8px;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

.inputGroup.right>label {
    right: 0;
    left: auto
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

.matForm .inputWrapper mat-form-field {
    display: block
}

.matForm .inputWrapper mat-form-field .mat-form-field-infix {
    width: 100%;
    font-size: 16px
}

.matForm .inputWrapper input[type=text],
.matForm .inputWrapper input[type=number] {
    border: none!important
}

.matForm mat-error {
    font-size: 12px;
    margin-top: -16px;
    margin-bottom: 5px;
    line-height: 14px
}

.matForm mat-error.additional-error {
    margin-top: 10px
}

.matForm .marginTop {
    margin-top: 5px
}

body[state="root.ticket.person"] .mat-select-panel {
    max-width: 800px
}

@media (max-width:319px) {
    .hidden-xxs {
        display: none!important
    }
}

@media (min-width:320px) and (max-width:379px) {
    .hidden-xs {
        display: none!important
    }
}

@media (min-width:380px) and (max-width:479px) {
    .hidden-xs-sm {
        display: none!important
    }
}

@media (min-width:480px) and (max-width:719px) {
    .hidden-sm {
        display: none!important
    }
}

@media (min-width: 870px) and (max-width:) {
    .hidden-md {
        display: none!important
    }
}

@media (min-width: 870px) and (max-width:869px) {
    .hidden-md-lg {
        display: none!important
    }
}

@media (min-width: 870px) and (max-width:1279px) {
    .hidden-lg {
        display: none!important
    }
}

@media (min-width:1280px) {
    .hidden-lg-xl {
        display: none!important
    }
}

.grad {
    background-color: #558264
}

.grad.grad_diagonal {
    background-image: linear-gradient(left top, #558264 0, #858c00 25%, #64942c 50%, #779100 75%, #508546 100%)
}

.grad.grad_radial {
    background-image: radial-gradient(center, ellipse cover, #558264 0, #858c00 25%, #64942c 50%, #779100 75%, #508546 100%)
}

.grad.grad_vertical {
    background-image: linear-gradient(top, #558264 0, #858c00 25%, #64942c 50%, #779100 75%, #508546 100%)
}

.grad.grad_horizontal {
    background-image: linear-gradient(left, #558264 0, #858c00 25%, #64942c 50%, #779100 75%, #508546 100%)
}

.white,
[iconclass=white] {
    color: #fff;
    fill: #fff
}

.white-stroke,
[iconclass=white-stroke] {
    stroke: #fff;
    fill: #fff
}

.green-stroke,
[iconclass=green-stroke] {
    stroke: #64942c;
    fill: #64942c
}

.ticketshop-lightfont-c3,
[iconclass=ticketshop-lightfont-c3] {
    color: #868686;
    fill: #868686;
}

.ticketshop-darkfont,
[iconclass=ticketshop-darkfont] {
    fill: #222;
    color: #222;
}

.ticketshop-missinginfo,
[iconclass=ticketshop-missinginfo] {
    fill: #f1a72a
}

.ticketshop-personen-3,
[iconclass=ticketshop-personen-3] {
    fill: #e37500
}

.ticketshop-personen-3-darker,
[iconclass=ticketshop-personen-3-darker] {
    fill: #c05600
}

.ticketshop-personen-3-lighter,
[iconclass=ticketshop-personen-3-lighter] {
    fill: #f0aa41
}

.ticketshop-travel-action-5,
[iconclass=ticketshop-travel-action-5] {
    fill: #cb8f00
}

.ticketshop-verspaetung-c3,
[iconclass=ticketshop-verspaetung-c3] {
    fill: #ed6f00
}

.ticketshop-verspaetung-c45,
[iconclass=ticketshop-verspaetung-c45] {
    fill: #d63d00
}

.ticketshop-abgemeldet,
[iconclass=ticketshop-abgemeldet] {
    fill: #e68319
}

.oebb-grey-1,
[iconclass=oebb-grey-1] {
    fill: #afafaf;
    color: #afafaf
}

.ticketshop-green-1,
[iconclass=ticketshop-green-1] {
    fill: #558264
}

.ticketshop-green-2,
[iconclass=ticketshop-green-2] {
    fill: #508546
}

.ticketshop-green-3,
[iconclass=ticketshop-green-3] {
    fill: #51a351;
    stroke: #51a351
}

[iconclass=ticketshop-green-3-stroke] {
    stroke: #51a351!important
}

.ticketshop-green-4,
[iconclass=ticketshop-green-4] {
    fill: #779100
}

.ticketshop-green-5,
[iconclass=ticketshop-green-5] {
    fill: #858c00
}

.ticketshop-personen-4,
[iconclass=ticketshop-personen-4] {
    fill: #758f00
}

.ticketshop-personen-4-darker,
[iconclass=ticketshop-personen-4-darker] {
    fill: #4b5a00
}

.ticketshop-personen-4-lighter,
[iconclass=ticketshop-personen-4-lighter] {
    fill: #a0c800
}

.ticketshop-travel-action-3,
[iconclass=ticketshop-travel-action-3] {
    fill: #70a629;
    color: #70a629
}

.ticketshop-personen-1,
[iconclass=ticketshop-personen-1] {
    fill: #8782be
}

.ticketshop-personen-1-darker,
[iconclass=ticketshop-personen-1-darker] {
    fill: #67648c
}

.ticketshop-personen-1-lighter,
[iconclass=ticketshop-personen-1-lighter] {
    fill: #9182be
}

.ticketshop-personen-2,
[iconclass=ticketshop-personen-2] {
    fill: #9b00e1
}

.ticketshop-personen-2-darker,
[iconclass=ticketshop-personen-2-darker] {
    fill: #640087
}

.ticketshop-personen-2-lighter,
[iconclass=ticketshop-personen-2-lighter] {
    fill: #b955eb
}

.ticketshop-personen-5,
[iconclass=ticketshop-personen-5] {
    fill: #ff006e
}

.ticketshop-personen-5-darker,
[iconclass=ticketshop-personen-5-darker] {
    fill: #c80069
}

.ticketshop-personen-5-lighter,
[iconclass=ticketshop-personen-5-lighter] {
    fill: #ff4b82
}

.ticketshop-personen-7,
[iconclass=ticketshop-personen-7] {
    fill: #be3c73
}

.ticketshop-personen-7-darker,
[iconclass=ticketshop-personen-7-darker] {
    fill: #8c1450
}

.ticketshop-personen-7-lighter,
[iconclass=ticketshop-personen-7-lighter] {
    fill: #fa69a0
}

.ticketshop-personen-8,
[iconclass=ticketshop-personen-8] {
    fill: #9b1473
}

.ticketshop-personen-8-darker,
[iconclass=ticketshop-personen-8-darker] {
    fill: #6e0050
}

.ticketshop-personen-8-lighter,
[iconclass=ticketshop-personen-8-lighter] {
    fill: #eb50b4
}

.ticketshop-travel-action-6,
[iconclass=ticketshop-travel-action-6] {
    fill: #76467d
}

.ticketshop-lightfont-c3,
[iconclass=ticketshop-lightfont-c3] {
    fill: #868686;
    color: #868686
}

.ticketshop-lightfont-c3-stroke,
[iconclass=ticketshop-lightfont-c3-stroke] {
    stroke: #868686;
    color: #868686
}

.ticketshop-lightfont-c45,
[iconclass=ticketshop-lightfont-c45] {
    fill: #6a6a6a;
    color: #6a6a6a
}

.oebb-red-c3,
[iconclass=oebb-red-c3] {
    fill: #e2002a;
    color: #e2002a
}

.oebb-red-c45,
[iconclass=oebb-red-c45] {
    fill: #d40027;
    color: #d40027
}

.oebb-red-2,
[iconclass=oebb-red-2] {
    fill: #ab0020;
    color: #ab0020
}

.oebb-grey-2,
[iconclass=oebb-grey-2] {
    fill: #878787;
    color: #878787
}

.forceDisabled,
[iconclass=forceDisabled] {
    color: #afafaf!important;
    fill: #afafaf!important
}

.disabled,
[disabled=disabled],
[iconclass=disabled] {
    color: #afafaf;
    fill: #afafaf
}

[disabled] svg {
    color: #afafaf;
    fill: #afafaf
}

[disabled] svg[iconstroke] {
    stroke: #afafaf
}

.info,
[iconclass=info] {
    color: #51a351;
    fill: #51a351
}

.warning,
[iconclass=warning] {
    color: #ed6f00;
    fill: #ed6f00
}

.error,
[iconclass=error] {
    color: #d63d00;
    fill: #d63d00
}

.pdf,
[iconclass=pdf] {
    color: #ee2738;
    fill: #ee2738
}

.dep_code,
[iconclass=dep_code] {
    color: #6f7fbe;
    fill: #6f7fbe
}

.mobile,
[iconclass=mobile] {
    color: #73aa1e;
    fill: #73aa1e
}

@font-face {
    src: url(https://tickets.oebb.at/static/fonts//8ec73b09-4744-4d42-a626-4222743a8e34.eot?#iefix);
    src: url(https://tickets.oebb.at/static/fonts//8ec73b09-4744-4d42-a626-4222743a8e34.eot?#iefix) format("eot"), url(https://tickets.oebb.at/static/fonts//b22804b8-f2f7-4a1e-b0f2-8a8e325a22b5.woff2) format("woff2"), url(https://tickets.oebb.at/static/fonts//f90b67e0-ac70-41c5-9f16-d837fa32d424.woff) format("woff"), url(https://tickets.oebb.at/static/fonts//f64b89e7-5e51-4f42-8c0a-c2098aeb155a.ttf) format("truetype"), url(https://tickets.oebb.at/static/fonts//9f244bd5-a306-44d4-a295-4e5b617ae0ab.svg#9f244bd5-a306-44d4-a295-4e5b617ae0ab) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    src: url(https://tickets.oebb.at/static/fonts//7900e15a-fffb-41c1-8dca-5281b0aa1678.eot?#iefix);
    src: url(https://tickets.oebb.at/static/fonts//7900e15a-fffb-41c1-8dca-5281b0aa1678.eot?#iefix) format("eot"), url(https://tickets.oebb.at/static/fonts//b93169e1-e567-4375-a41b-c8b2add5667a.woff2) format("woff2"), url(https://tickets.oebb.at/static/fonts//0bff5a93-ce9b-4468-9a94-431fb03301d0.woff) format("woff"), url(https://tickets.oebb.at/static/fonts//5637b6b1-c92e-46f9-872a-6efc4af0a955.ttf) format("truetype"), url(https://tickets.oebb.at/static/fonts//814fa816-7759-4a09-bc74-029021571be0.svg#814fa816-7759-4a09-bc74-029021571be0) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    src: url(https://tickets.oebb.at/static/fonts//22845090-4466-442c-9c2a-0326052fe241.eot?#iefix);
    src: url(https://tickets.oebb.at/static/fonts//22845090-4466-442c-9c2a-0326052fe241.eot?#iefix) format("eot"), url(https://tickets.oebb.at/static/fonts//fe7c5445-acc7-4501-bf71-b476db35c291.woff2) format("woff2"), url(https://tickets.oebb.at/static/fonts//5beb2de5-f02e-4d93-95f9-8dae06b289d8.woff) format("woff"), url(https://tickets.oebb.at/static/fonts//566ceea8-45dc-4291-8304-03f6be79b86a.ttf) format("truetype"), url(https://tickets.oebb.at/static/fonts//28d2ffe3-7c4f-4beb-ad26-0b5374c438e6.svg#28d2ffe3-7c4f-4beb-ad26-0b5374c438e6) format("svg");
    font-weight: 700;
    font-style: normal
}

body {
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased
}

button,
html,
input,
select,
textarea {
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased
}

a {
    text-decoration: none;
    color: inherit
}

b,
strong {
    font-weight: 700
}

.bold {
    font-weight: 700
}

.light {
    font-weight: 400
}

.regular {
    font-weight: 400
}

.underline {
    text-decoration: underline
}

.strike {
    text-decoration: line-through
}

.underline-none {
    text-decoration: none
}

.uppercase {
    text-transform: uppercase
}

.capitalize {
    text-transform: capitalize
}

.f10 {
    font-size: 10px
}

.f12 {
    font-size: 12px
}

.f13 {
    font-size: 12px
}

.f14 {
    font-size: 12px
}

.f16 {
    font-size: 14px
}

.f18 {
    font-size: 16px
}

.f19 {
    font-size: 16px
}

.f20 {
    font-size: 18px
}

.f21 {
    font-size: 18px
}

.f22 {
    font-size: 18px
}

.f24 {
    font-size: 20px
}

.f26 {
    font-size: 20px
}

.f27 {
    font-size: 20px
}

.f28 {
    font-size: 24px
}

.f32 {
    font-size: 32px
}

.f34 {
    font-size: 30px
}

.f36 {
    font-size: 36px
}

.font_a {
    font-weight: 400;
    font-size: 20px;
    color: #222
}

@media (min-width: 870px) {
    .font_a {
        font-size: 30px;
        color: #878787
    }
}

@font-face {
    font-family: OebbTicketshopIcons;
    src: url(https://tickets.oebb.at/static/fonts//OebbTicketshopIcons.otf) format("opentype")
}

.icon-font {
    font-family: OebbTicketshopIcons
}

.icon-plus {
    font-family: OebbTicketshopIcons
}

.icon-plus:before {
    content: "\E023"
}

.icon-person {
    font-family: OebbTicketshopIcons
}

.icon-person:before {
    content: "\E032"
}

.icon-card {
    font-family: OebbTicketshopIcons
}

.icon-card:before {
    content: "\E025"
}

.icon-home {
    font-family: OebbTicketshopIcons
}

.icon-home:before {
    content: "\E049"
}

.icon-settings {
    font-family: OebbTicketshopIcons
}

.icon-settings:before {
    content: "\E050"
}

.icon-ticket {
    font-family: OebbTicketshopIcons
}

.icon-ticket:before {
    content: "\E057"
}

.icon-tickets {
    font-family: OebbTicketshopIcons
}

.icon-tickets:before {
    content: "\E058"
}

.cashier-icon polygon,
.start-icon line {
    stroke: #9182be
}

@-webkit-keyframes spinning {
    0% {
        -webkit-transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spinning {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.loading-icon {
    -webkit-animation: spinning 2s linear infinite;
    animation: spinning 2s linear infinite
}

@media screen {
    .showPrint,
    .showPrint * {
        display: none!important
    }
}

@media print {
    body,
    html {
        position: initial!important
    }
    .hiddenPrint,
    .hiddenPrint * {
        display: none!important
    }
}

.noMargin {
    margin: 0
}

.lh125 {
    line-height: 1.25em
}

.lh130 {
    line-height: 1.3em
}

.zIndex1 {
    z-index: 1
}

.conditionalHide,
.hasAccessHide {
    display: none!important
}

.margin_10 {
    margin: 10px
}

.margin_T_0 {
    margin-top: 0!important
}

.margin_T_10 {
    margin-top: 10px
}

.margin_T_15 {
    margin-top: 15px
}

.margin_T_18 {
    margin-top: 18px
}

.margin_T_20 {
    margin-top: 20px
}

.margin_T_30 {
    margin-top: 30px
}

.margin_T_40 {
    margin-top: 40px
}

.margin_R_6 {
    margin-right: 6px
}

.margin_R_10 {
    margin-right: 10px
}

.margin_R_20 {
    margin-right: 20px
}

.margin_R_30 {
    margin-right: 30px
}

.margin_B_10 {
    margin-bottom: 10px
}

.margin_B_15 {
    margin-bottom: 15px
}

.margin_B_18 {
    margin-bottom: 18px
}

.margin_B_20 {
    margin-bottom: 20px
}

.margin_B_30 {
    margin-bottom: 30px
}

.margin_L_5 {
    margin-left: 5px
}

.margin_L_8 {
    margin-left: 8px
}

.margin_L_12 {
    margin-left: 12px
}

.margin_L_20 {
    margin-left: 20px
}

.margin_L_33 {
    margin-left: 33px
}

.margin_TB_28 {
    margin-top: 28px;
    margin-bottom: 28px
}

.child_margin_B_16>* {
    margin-bottom: 16px
}

.padding_LR_0_important {
    padding-left: 0!important;
    padding-right: 0!important
}

.padding_LR_0 {
    padding-left: 0;
    padding-right: 0
}

.padding_L_29 {
    padding-left: 29px
}

.padding_R_32 {
    padding-right: 32px
}

.padding_LR_20 {
    padding-left: 20px;
    padding-right: 20px
}

.padding_T_5 {
    padding-top: 5px
}

.padding_T_8 {
    padding-top: 8px
}

.padding_T_15 {
    padding-top: 15px
}

.padding_TB_15 {
    padding-top: 15px;
    padding-bottom: 15px
}

.padding_TB_18 {
    padding-top: 18px;
    padding-bottom: 18px
}

.padding_TB_20 {
    padding-top: 20px;
    padding-bottom: 20px
}

.padding_20 {
    padding: 20px
}

.margin_T_30 {
    margin-top: 30px
}

.padding_TB_32 {
    padding-top: 32px;
    padding-bottom: 32px
}

.padding_L_33 {
    padding-left: 33px
}

.padding_10 {
    padding-right: 10px
}

.padding_R_20 {
    padding-right: 20px
}

.padding_15_20 {
    padding: 15px 20px
}

.noMargin_B_imp {
    margin-bottom: 0!important
}

.noMargin_B {
    margin-bottom: 0
}

.noPadding_T {
    padding-top: 0
}

.oneRowEllipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.hideOutside {
    position: fixed;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    overflow: hidden
}

.loading-wrapper,
.loadingWrapper,
.successIconWrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    z-index: 150;
    align-items: center;
    justify-content: center;
    background: #7d7d7d
}

[ts-click][disabled] .successIconWrapper svg {
    fill: #51a351;
    stroke: #51a351
}

.loadingWrapper {
    display: none;
    opacity: .7;
    background-color: #fff
}

.ng-submitting .loadingWrapper,
.showLoadingWrapper.loadingWrapper {
    display: flex
}

.flexRow {
    display: flex
}

.flexDirColumn {
    flex-direction: column
}

.flexJustifyContentSpaceBetween {
    justify-content: space-between
}

.flexJustifyContentCenter {
    justify-content: center
}

.flexCol.fill {
    flex: 1 1 auto
}

.flexCol.col50 {
    flex: 0 0 50%
}

.mirrored-image {
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1)
}

.middle {
    align-items: center;
    display: flex;
    justify-content: center
}

.no-padding {
    padding: 0!important
}

.relative {
    position: relative
}

body,
html {
    height: 100%;
    width: 100%;
    font-size: 14px;
    box-sizing: border-box
}

*,
 :after,
 :before {
    box-sizing: inherit
}

#main-wrapper {
    overflow: hidden;
    height: 100%;
    width: 100%;
    background-color: #f0f0f0;
    display: flex
}

div {
    box-sizing: border-box
}

[ng-click].notClickable,
[ts-click].notClickable {
    cursor: no-drop
}

.pointerCursor,
[data-ng-click]:not([type=text]):not(.noPointer),
[ng-click]:not([type=text]):not(.noPointer):not([disabled]),
[ng-mousedown]:not([type=text]):not(.noPointer):not([disabled]),
[ng-mouseup]:not([type=text]):not(.noPointer):not([disabled]),
[ts-click]:not([type=text]):not(.noPointer):not([disabled]),
[ts-external-link]:not([type=text]):not(.noPointer):not([disabled]),
[ui-sref] {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[ts-click].loading {
    position: relative
}

button {
    border: 0;
    padding: 0;
    background-color: transparent;
    text-align: left
}

html.no-flexbox.no-flexboxlegacy body {
    white-space: nowrap
}

html.no-flexbox.no-flexboxlegacy #main-wrapper {
    white-space: nowrap
}

div.picker__holder {
    z-index: 1
}

div.picker__frame {
    overflow-y: auto
}

hr {
    border: 0;
    background-color: #222;
    height: 1px
}

li {
    padding: 0 0 16px 20px
}

select {
    border: none;
    border-bottom: solid 1px #878787;
    padding-left: 0;
    padding-right: 1.1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent url(https://tickets.oebb.at/static/images/icons/dropDownMenuIcon.svg) no-repeat right 3px center;
    text-indent: .01px;
    text-overflow: ""
}

select::-ms-expand {
    display: none
}

#start-animation {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center
}

.infoBubble[name=tutorialBubble].TB0011 {
    margin-bottom: 10px
}

.infoBubble[name=tutorialBubble].TB0022 {
    margin-left: 35px;
    max-width: 334px
}

.infoBubble[name=tutorialBubble].TB0012 {
    max-width: 678px;
    margin-right: 23px;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0)
}

@media (max-width:869px) {
    .infoBubble[name=tutorialBubble].TB0012 {
        margin: 0 0 16px 0;
        max-width: none;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

body #rightColumn>.timetable .infoBubble[name=tutorialBubble].TB0012 {
    margin-top: 0
}

.infoBubble[name=tutorialBubble].TB0015 {
    max-width: 678px;
    margin-right: 23px;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0)
}

@media (max-width:869px) {
    .infoBubble[name=tutorialBubble].TB0015 {
        margin: 0 0 16px 0;
        max-width: none;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

body #rightColumn>.offers .infoBubble[name=tutorialBubble].TB0015 {
    margin-top: 0
}

.infoBubble[name=tutorialBubble].TB0020 {
    max-width: 678px;
    margin-right: 23px;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0)
}

@media (max-width:869px) {
    .infoBubble[name=tutorialBubble].TB0020 {
        margin: 0 0 16px 0;
        max-width: none;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

body #rightColumn>.offers .infoBubble[name=tutorialBubble].TB0020 {
    margin-top: 0
}

.infoBubble[name=tutorialBubble].TB0007 {
    max-width: 678px;
    margin-right: 23px;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0)
}

@media (max-width:869px) {
    .infoBubble[name=tutorialBubble].TB0007 {
        margin: 0 0 16px 0;
        max-width: none;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

body #rightColumn>.offers .infoBubble[name=tutorialBubble].TB0007 {
    margin-top: 0
}

.infoBubble[name=tutorialBubble].TB0023 {
    max-width: 678px;
    width: 678px;
    margin-right: 23px
}

@media (max-width:869px) {
    .infoBubble[name=tutorialBubble].TB0023 {
        margin: 0 0 16px 0;
        max-width: 100vw;
        width: 100vw
    }
}

.infoBubble[name=tutorialBubble].TB0025 {
    max-width: 334px
}

.print-logo {
    content: url(https://tickets.oebb.at/static/images/components/header/oebb-logo-30-80.svg);
    visibility: hidden;
    width: 0;
    height: 0
}

@media print {
    .print-logo {
        visibility: visible;
        width: 90px;
        height: 35px
    }
}

.mat-elevation-z0 {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z1 {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z2 {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z3 {
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z4 {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z5 {
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 5px 8px 0 rgba(0, 0, 0, .14), 0 1px 14px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z6 {
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12)
}

.mat-elevation-z7 {
    box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12)
}

.mat-elevation-z8 {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12)
}

.mat-elevation-z9 {
    box-shadow: 0 5px 6px -3px rgba(0, 0, 0, .2), 0 9px 12px 1px rgba(0, 0, 0, .14), 0 3px 16px 2px rgba(0, 0, 0, .12)
}

.mat-elevation-z10 {
    box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .2), 0 10px 14px 1px rgba(0, 0, 0, .14), 0 4px 18px 3px rgba(0, 0, 0, .12)
}

.mat-elevation-z11 {
    box-shadow: 0 6px 7px -4px rgba(0, 0, 0, .2), 0 11px 15px 1px rgba(0, 0, 0, .14), 0 4px 20px 3px rgba(0, 0, 0, .12)
}

.mat-elevation-z12 {
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12)
}

.mat-elevation-z13 {
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12)
}

.mat-elevation-z14 {
    box-shadow: 0 7px 9px -4px rgba(0, 0, 0, .2), 0 14px 21px 2px rgba(0, 0, 0, .14), 0 5px 26px 4px rgba(0, 0, 0, .12)
}

.mat-elevation-z15 {
    box-shadow: 0 8px 9px -5px rgba(0, 0, 0, .2), 0 15px 22px 2px rgba(0, 0, 0, .14), 0 6px 28px 5px rgba(0, 0, 0, .12)
}

.mat-elevation-z16 {
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12)
}

.mat-elevation-z17 {
    box-shadow: 0 8px 11px -5px rgba(0, 0, 0, .2), 0 17px 26px 2px rgba(0, 0, 0, .14), 0 6px 32px 5px rgba(0, 0, 0, .12)
}

.mat-elevation-z18 {
    box-shadow: 0 9px 11px -5px rgba(0, 0, 0, .2), 0 18px 28px 2px rgba(0, 0, 0, .14), 0 7px 34px 6px rgba(0, 0, 0, .12)
}

.mat-elevation-z19 {
    box-shadow: 0 9px 12px -6px rgba(0, 0, 0, .2), 0 19px 29px 2px rgba(0, 0, 0, .14), 0 7px 36px 6px rgba(0, 0, 0, .12)
}

.mat-elevation-z20 {
    box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 20px 31px 3px rgba(0, 0, 0, .14), 0 8px 38px 7px rgba(0, 0, 0, .12)
}

.mat-elevation-z21 {
    box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 21px 33px 3px rgba(0, 0, 0, .14), 0 8px 40px 7px rgba(0, 0, 0, .12)
}

.mat-elevation-z22 {
    box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .2), 0 22px 35px 3px rgba(0, 0, 0, .14), 0 8px 42px 7px rgba(0, 0, 0, .12)
}

.mat-elevation-z23 {
    box-shadow: 0 11px 14px -7px rgba(0, 0, 0, .2), 0 23px 36px 3px rgba(0, 0, 0, .14), 0 9px 44px 8px rgba(0, 0, 0, .12)
}

.mat-elevation-z24 {
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12)
}

.mat-badge-content {
    font-weight: 700;
    font-size: 12px
}

.mat-badge-small .mat-badge-content {
    font-size: 6px
}

.mat-badge-large .mat-badge-content {
    font-size: 20px
}

.mat-h1,
.mat-headline,
.mat-typography h1 {
    font: 400 24px/32px "Frutiger Next";
    margin: 0 0 16px
}

.mat-h2,
.mat-title,
.mat-typography h2 {
    font: 700 20px/32px "Frutiger Next";
    margin: 0 0 16px
}

.mat-h3,
.mat-subheading-2,
.mat-typography h3 {
    font: 400 16px/28px "Frutiger Next";
    margin: 0 0 16px
}

.mat-h4,
.mat-subheading-1,
.mat-typography h4 {
    font: 400 15px/24px "Frutiger Next";
    margin: 0 0 16px
}

.mat-h5,
.mat-typography h5 {
    font: 400 11.62px/20px "Frutiger Next";
    margin: 0 0 12px
}

.mat-h6,
.mat-typography h6 {
    font: 400 9.38px/20px "Frutiger Next";
    margin: 0 0 12px
}

.mat-body-2,
.mat-body-strong {
    font: 700 14px/24px "Frutiger Next"
}

.mat-body,
.mat-body-1,
.mat-typography {
    font: 400 14px/20px "Frutiger Next"
}

.mat-body p,
.mat-body-1 p,
.mat-typography p {
    margin: 0 0 12px
}

.mat-caption,
.mat-small {
    font: 400 12px/20px "Frutiger Next"
}

.mat-display-4,
.mat-typography .mat-display-4 {
    font: 300 112px/112px "Frutiger Next";
    margin: 0 0 56px;
    letter-spacing: -.05em
}

.mat-display-3,
.mat-typography .mat-display-3 {
    font: 400 56px/56px "Frutiger Next";
    margin: 0 0 64px;
    letter-spacing: -.02em
}

.mat-display-2,
.mat-typography .mat-display-2 {
    font: 400 45px/48px "Frutiger Next";
    margin: 0 0 64px;
    letter-spacing: -.005em
}

.mat-display-1,
.mat-typography .mat-display-1 {
    font: 400 34px/40px "Frutiger Next";
    margin: 0 0 64px
}

.mat-bottom-sheet-container {
    font-size: 14px;
    font-weight: 400
}

.mat-button,
.mat-fab,
.mat-flat-button,
.mat-icon-button,
.mat-mini-fab,
.mat-raised-button,
.mat-stroked-button {
    font-size: 12px;
    font-weight: 400
}

@media (min-width:380px) {
    .mat-button,
    .mat-fab,
    .mat-flat-button,
    .mat-icon-button,
    .mat-mini-fab,
    .mat-raised-button,
    .mat-stroked-button {
        font-size: 14px;
        font-weight: 700
    }
}

.mat-button:hover .mat-button-focus-overlay {
    opacity: 1!important
}

.mat-card-title {
    font-size: 20px;
    font-weight: 400
}

.mat-card-content,
.mat-card-header .mat-card-title,
.mat-card-subtitle {
    font-size: 12px
}

.mat-checkbox-layout .mat-checkbox-label {
    line-height: 24px
}

.mat-chip {
    font-size: 12px;
    line-height: 18px
}

.mat-chip .mat-chip-remove.mat-icon,
.mat-chip .mat-chip-trailing-icon.mat-icon {
    font-size: 16px
}

.mat-header-cell {
    font-size: 12px;
    font-weight: 700
}

.mat-cell,
.mat-footer-cell {
    font-size: 12px
}

.mat-calendar-body {
    font-size: 12px
}

.mat-calendar-body-label,
.mat-calendar-period-button {
    font-size: 12px;
    font-weight: 700
}

.mat-calendar-table-header th {
    font-size: 10px;
    font-weight: 400
}

.mat-dialog-title {
    font: 700 24px/28px "Frutiger Next"
}

.mat-expansion-panel-header {
    font-size: 12px;
    font-weight: 400
}

.mat-expansion-panel-content {
    font: 400 14px/20px "Frutiger Next"
}

.mat-form-field {
    font-size: inherit;
    font-weight: 400;
    line-height: 1.125
}

.mat-form-field-wrapper {
    padding-bottom: 1.34375em
}

.mat-form-field-prefix .mat-icon,
.mat-form-field-suffix .mat-icon {
    font-size: 150%;
    line-height: 1.125
}

.mat-form-field-prefix .mat-icon-button,
.mat-form-field-suffix .mat-icon-button {
    height: 1.5em;
    width: 1.5em
}

.mat-form-field-prefix .mat-icon-button .mat-icon,
.mat-form-field-suffix .mat-icon-button .mat-icon {
    height: 1.125em;
    line-height: 1.125
}

.mat-form-field-infix {
    padding: .5em 0;
    border-top: .84375em solid transparent
}

.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label,
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    -webkit-transform: translateY(-1.34375em) scale(.75);
    transform: translateY(-1.34375em) scale(.75);
    width: 133.33333%
}

.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
    -webkit-transform: translateY(-1.34374em) scale(.75);
    transform: translateY(-1.34374em) scale(.75);
    width: 133.33334%
}

.mat-form-field-label-wrapper {
    top: -.84375em;
    padding-top: .84375em
}

.mat-form-field-label {
    top: 1.34375em
}

.mat-form-field-underline {
    bottom: 1.34375em
}

.mat-form-field-subscript-wrapper {
    font-size: 12px;
    margin-top: .66667em;
    top: calc(100% - 1.79167em)
}

.mat-form-field-appearance-legacy .mat-form-field-wrapper {
    padding-bottom: 1.25em
}

.mat-form-field-appearance-legacy .mat-form-field-infix {
    padding: .4375em 0
}

.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label,
.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    -webkit-transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(0);
    transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(0);
    -ms-transform: translateY(-1.28125em) scale(.75);
    width: 133.33333%
}

.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label {
    -webkit-transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(0);
    transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(0);
    -ms-transform: translateY(-1.28124em) scale(.75);
    width: 133.33334%
}

.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
    -webkit-transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(0);
    transform: translateY(-1.28125em) scale(.75) perspective(100px) translateZ(0);
    -ms-transform: translateY(-1.28123em) scale(.75);
    width: 133.33335%
}

.mat-form-field-appearance-legacy .mat-form-field-label {
    top: 1.28125em
}

.mat-form-field-appearance-legacy .mat-form-field-underline {
    bottom: 1.25em
}

.mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper {
    margin-top: .54167em;
    top: calc(100% - 1.66667em)
}

.mat-form-field-appearance-fill .mat-form-field-infix {
    padding: .25em 0 .75em 0
}

.mat-form-field-appearance-fill .mat-form-field-label {
    top: 1.09375em;
    margin-top: -.5em
}

.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label,
.mat-form-field-appearance-fill.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    -webkit-transform: translateY(-.59375em) scale(.75);
    transform: translateY(-.59375em) scale(.75);
    width: 133.33333%
}

.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
    -webkit-transform: translateY(-.59374em) scale(.75);
    transform: translateY(-.59374em) scale(.75);
    width: 133.33334%
}

.mat-form-field-appearance-outline .mat-form-field-infix {
    padding: 1em 0 1em 0
}

.mat-form-field-appearance-outline .mat-form-field-outline {
    bottom: 1.34375em
}

.mat-form-field-appearance-outline .mat-form-field-label {
    top: 1.84375em;
    margin-top: -.25em
}

.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label,
.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    -webkit-transform: translateY(-1.59375em) scale(.75);
    transform: translateY(-1.59375em) scale(.75);
    width: 133.33333%
}

.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label {
    -webkit-transform: translateY(-1.59374em) scale(.75);
    transform: translateY(-1.59374em) scale(.75);
    width: 133.33334%
}

.mat-grid-tile-footer,
.mat-grid-tile-header {
    font-size: 12px
}

.mat-grid-tile-footer .mat-line,
.mat-grid-tile-header .mat-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box
}

.mat-grid-tile-footer .mat-line:nth-child(n+2),
.mat-grid-tile-header .mat-line:nth-child(n+2) {
    font-size: 12px
}

input.mat-input-element {
    margin-top: -.0625em
}

.mat-menu-item {
    font-size: 14px;
    font-weight: 400
}

.mat-paginator,
.mat-paginator-page-size .mat-select-trigger {
    font-size: 12px
}

.mat-select-trigger {
    height: 1.125em
}

.mat-slide-toggle-content {
    font: 400 14px/20px "Frutiger Next"
}

.mat-slider-thumb-label-text {
    font-size: 12px;
    font-weight: 700
}

.mat-step-label {
    font-size: 12px;
    font-weight: 400
}

.mat-step-label-selected {
    font-size: 12px;
    font-weight: 700
}

.mat-tab-label,
.mat-tab-link {
    font-size: 12px;
    font-weight: 700
}

.mat-toolbar,
.mat-toolbar h1,
.mat-toolbar h2,
.mat-toolbar h3,
.mat-toolbar h4,
.mat-toolbar h5,
.mat-toolbar h6 {
    font: 700 20px/32px "Frutiger Next";
    margin: 0
}

.mat-tooltip {
    font-size: 10px;
    padding-top: 6px;
    padding-bottom: 6px
}

.mat-tooltip-handset {
    font-size: 12px;
    padding-top: 9px;
    padding-bottom: 9px
}

.mat-list .mat-list-item,
.mat-nav-list .mat-list-item,
.mat-selection-list .mat-list-item {
    font-size: 14px
}

.mat-list .mat-list-item .mat-line,
.mat-nav-list .mat-list-item .mat-line,
.mat-selection-list .mat-list-item .mat-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box
}

.mat-list .mat-list-item .mat-line:nth-child(n+2),
.mat-nav-list .mat-list-item .mat-line:nth-child(n+2),
.mat-selection-list .mat-list-item .mat-line:nth-child(n+2) {
    font-size: 12px
}

.mat-list .mat-list-option,
.mat-nav-list .mat-list-option,
.mat-selection-list .mat-list-option {
    font-size: 14px
}

.mat-list .mat-list-option .mat-line,
.mat-nav-list .mat-list-option .mat-line,
.mat-selection-list .mat-list-option .mat-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box
}

.mat-list .mat-list-option .mat-line:nth-child(n+2),
.mat-nav-list .mat-list-option .mat-line:nth-child(n+2),
.mat-selection-list .mat-list-option .mat-line:nth-child(n+2) {
    font-size: 12px
}

.mat-list .mat-subheader,
.mat-nav-list .mat-subheader,
.mat-selection-list .mat-subheader {
    font-size: 12px;
    font-weight: 700
}

.mat-list[dense] .mat-list-item,
.mat-nav-list[dense] .mat-list-item,
.mat-selection-list[dense] .mat-list-item {
    font-size: 12px
}

.mat-list[dense] .mat-list-item .mat-line,
.mat-nav-list[dense] .mat-list-item .mat-line,
.mat-selection-list[dense] .mat-list-item .mat-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box
}

.mat-list[dense] .mat-list-item .mat-line:nth-child(n+2),
.mat-nav-list[dense] .mat-list-item .mat-line:nth-child(n+2),
.mat-selection-list[dense] .mat-list-item .mat-line:nth-child(n+2) {
    font-size: 12px
}

.mat-list[dense] .mat-list-option,
.mat-nav-list[dense] .mat-list-option,
.mat-selection-list[dense] .mat-list-option {
    font-size: 12px
}

.mat-list[dense] .mat-list-option .mat-line,
.mat-nav-list[dense] .mat-list-option .mat-line,
.mat-selection-list[dense] .mat-list-option .mat-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    box-sizing: border-box
}

.mat-list[dense] .mat-list-option .mat-line:nth-child(n+2),
.mat-nav-list[dense] .mat-list-option .mat-line:nth-child(n+2),
.mat-selection-list[dense] .mat-list-option .mat-line:nth-child(n+2) {
    font-size: 12px
}

.mat-list[dense] .mat-subheader,
.mat-nav-list[dense] .mat-subheader,
.mat-selection-list[dense] .mat-subheader {
    font-size: 12px;
    font-weight: 700
}

.mat-option {
    font-size: 14px
}

.mat-optgroup-label {
    font: 700 14px/24px "Frutiger Next"
}

.mat-simple-snackbar {
    font-size: 14px
}

.mat-simple-snackbar-action {
    line-height: 1;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700
}

.mat-tree-node {
    font-weight: 400;
    font-size: 12px
}

.mat-ripple {
    overflow: hidden
}

@media screen and (-ms-high-contrast:active) {
    .mat-ripple {
        display: none
    }
}

.mat-ripple.mat-ripple-unbounded {
    overflow: visible
}

.mat-ripple-element {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity, -webkit-transform 0s cubic-bezier(0, 0, .2, 1);
    transition: opacity, transform 0s cubic-bezier(0, 0, .2, 1);
    transition: opacity, transform 0s cubic-bezier(0, 0, .2, 1), -webkit-transform 0s cubic-bezier(0, 0, .2, 1);
    -webkit-transform: scale(0);
    transform: scale(0)
}

.cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none
}

.cdk-global-overlay-wrapper,
.cdk-overlay-container {
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: auto
}

.cdk-overlay-container {
    position: fixed;
    z-index: 1000
}

.cdk-overlay-container:empty {
    display: none
}

.cdk-global-overlay-wrapper {
    display: flex;
    position: absolute;
    z-index: 1000
}

.cdk-overlay-pane {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    max-width: 100%;
    max-height: 100%
}

.cdk-overlay-backdrop {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
    opacity: 0
}

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: 1
}

@media screen and (-ms-high-contrast:active) {
    .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
        opacity: .6
    }
}

.cdk-overlay-dark-backdrop {
    background: rgba(0, 0, 0, .8)
}

.cdk-overlay-transparent-backdrop,
.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
    opacity: 0
}

.cdk-overlay-connected-position-bounding-box {
    position: absolute;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-width: 1px;
    min-height: 1px
}

.cdk-global-scrollblock {
    position: fixed;
    width: 100%;
    overflow-y: scroll
}

.cdk-text-field-autofill-monitored:-webkit-autofill {
    -webkit-animation-name: cdk-text-field-autofill-start;
    animation-name: cdk-text-field-autofill-start
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
    -webkit-animation-name: cdk-text-field-autofill-end;
    animation-name: cdk-text-field-autofill-end
}

textarea.cdk-textarea-autosize {
    resize: none
}

textarea.cdk-textarea-autosize-measuring {
    height: auto!important;
    overflow: hidden!important;
    padding: 2px 0!important;
    box-sizing: content-box!important
}

.mat-ripple-element {
    background-color: rgba(0, 0, 0, .1)
}

.mat-option {
    color: rgba(0, 0, 0, .87)
}

.mat-option:focus:not(.mat-option-disabled),
.mat-option:hover:not(.mat-option-disabled) {
    background: rgba(0, 0, 0, .04)
}

.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
    background: rgba(0, 0, 0, .04)
}

.mat-option.mat-active {
    background: rgba(0, 0, 0, .04);
    color: rgba(0, 0, 0, .87)
}

.mat-option.mat-option-disabled {
    color: rgba(0, 0, 0, .38)
}

.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
    color: #51a351
}

.mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {
    color: #51a351
}

.mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {
    color: #cc3432
}

.mat-optgroup-label {
    color: rgba(0, 0, 0, .54)
}

.mat-optgroup-disabled .mat-optgroup-label {
    color: rgba(0, 0, 0, .38)
}

.mat-pseudo-checkbox {
    color: rgba(0, 0, 0, .54)
}

.mat-pseudo-checkbox::after {
    color: #fafafa
}

.mat-accent .mat-pseudo-checkbox-checked,
.mat-accent .mat-pseudo-checkbox-indeterminate,
.mat-pseudo-checkbox-checked,
.mat-pseudo-checkbox-indeterminate {
    background: #51a351
}

.mat-primary .mat-pseudo-checkbox-checked,
.mat-primary .mat-pseudo-checkbox-indeterminate {
    background: #51a351
}

.mat-warn .mat-pseudo-checkbox-checked,
.mat-warn .mat-pseudo-checkbox-indeterminate {
    background: #cc3432
}

.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled,
.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled {
    background: #b0b0b0
}

.mat-app-background {
    background-color: #fafafa;
    color: rgba(0, 0, 0, .87)
}

.mat-theme-loaded-marker {
    display: none
}

.mat-autocomplete-panel {
    background: #fff;
    color: rgba(0, 0, 0, .87)
}

.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {
    background: #fff
}

.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled) {
    color: rgba(0, 0, 0, .87)
}

.mat-badge-content {
    color: #fff;
    background: #51a351
}

.mat-badge-accent .mat-badge-content {
    background: #51a351;
    color: rgba(0, 0, 0, .87)
}

.mat-badge-warn .mat-badge-content {
    color: #fff;
    background: #cc3432
}

.mat-badge {
    position: relative
}

.mat-badge-hidden .mat-badge-content {
    display: none
}

.mat-badge-content {
    position: absolute;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
    -webkit-transform: scale(.6);
    transform: scale(.6);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none
}

.mat-badge-content.mat-badge-active {
    -webkit-transform: none;
    transform: none
}

.mat-badge-small .mat-badge-content {
    width: 16px;
    height: 16px;
    line-height: 16px
}

@media screen and (-ms-high-contrast:active) {
    .mat-badge-small .mat-badge-content {
        outline: solid 1px;
        border-radius: 0
    }
}

.mat-badge-small.mat-badge-above .mat-badge-content {
    top: -8px
}

.mat-badge-small.mat-badge-below .mat-badge-content {
    bottom: -8px
}

.mat-badge-small.mat-badge-before {
    margin-left: 16px
}

.mat-badge-small.mat-badge-before .mat-badge-content {
    left: -16px
}

[dir=rtl] .mat-badge-small.mat-badge-before {
    margin-left: 0;
    margin-right: 16px
}

[dir=rtl] .mat-badge-small.mat-badge-before .mat-badge-content {
    left: auto;
    right: -16px
}

.mat-badge-small.mat-badge-after {
    margin-right: 16px
}

.mat-badge-small.mat-badge-after .mat-badge-content {
    right: -16px
}

[dir=rtl] .mat-badge-small.mat-badge-after {
    margin-right: 0;
    margin-left: 16px
}

[dir=rtl] .mat-badge-small.mat-badge-after .mat-badge-content {
    right: auto;
    left: -16px
}

.mat-badge-small.mat-badge-overlap.mat-badge-before {
    margin-left: 8px
}

.mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: -8px
}

[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-before {
    margin-left: 0;
    margin-right: 8px
}

[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: auto;
    right: -8px
}

.mat-badge-small.mat-badge-overlap.mat-badge-after {
    margin-right: 8px
}

.mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: -8px
}

[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-after {
    margin-right: 0;
    margin-left: 16px
}

[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: auto;
    left: -8px
}

.mat-badge-medium .mat-badge-content {
    width: 22px;
    height: 22px;
    line-height: 22px
}

@media screen and (-ms-high-contrast:active) {
    .mat-badge-medium .mat-badge-content {
        outline: solid 1px;
        border-radius: 0
    }
}

.mat-badge-medium.mat-badge-above .mat-badge-content {
    top: -11px
}

.mat-badge-medium.mat-badge-below .mat-badge-content {
    bottom: -11px
}

.mat-badge-medium.mat-badge-before {
    margin-left: 22px
}

.mat-badge-medium.mat-badge-before .mat-badge-content {
    left: -22px
}

[dir=rtl] .mat-badge-medium.mat-badge-before {
    margin-left: 0;
    margin-right: 22px
}

[dir=rtl] .mat-badge-medium.mat-badge-before .mat-badge-content {
    left: auto;
    right: -22px
}

.mat-badge-medium.mat-badge-after {
    margin-right: 22px
}

.mat-badge-medium.mat-badge-after .mat-badge-content {
    right: -22px
}

[dir=rtl] .mat-badge-medium.mat-badge-after {
    margin-right: 0;
    margin-left: 22px
}

[dir=rtl] .mat-badge-medium.mat-badge-after .mat-badge-content {
    right: auto;
    left: -22px
}

.mat-badge-medium.mat-badge-overlap.mat-badge-before {
    margin-left: 11px
}

.mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: -11px
}

[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-before {
    margin-left: 0;
    margin-right: 11px
}

[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: auto;
    right: -11px
}

.mat-badge-medium.mat-badge-overlap.mat-badge-after {
    margin-right: 11px
}

.mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: -11px
}

[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-after {
    margin-right: 0;
    margin-left: 22px
}

[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: auto;
    left: -11px
}

.mat-badge-large .mat-badge-content {
    width: 28px;
    height: 28px;
    line-height: 28px
}

@media screen and (-ms-high-contrast:active) {
    .mat-badge-large .mat-badge-content {
        outline: solid 1px;
        border-radius: 0
    }
}

.mat-badge-large.mat-badge-above .mat-badge-content {
    top: -14px
}

.mat-badge-large.mat-badge-below .mat-badge-content {
    bottom: -14px
}

.mat-badge-large.mat-badge-before {
    margin-left: 28px
}

.mat-badge-large.mat-badge-before .mat-badge-content {
    left: -28px
}

[dir=rtl] .mat-badge-large.mat-badge-before {
    margin-left: 0;
    margin-right: 28px
}

[dir=rtl] .mat-badge-large.mat-badge-before .mat-badge-content {
    left: auto;
    right: -28px
}

.mat-badge-large.mat-badge-after {
    margin-right: 28px
}

.mat-badge-large.mat-badge-after .mat-badge-content {
    right: -28px
}

[dir=rtl] .mat-badge-large.mat-badge-after {
    margin-right: 0;
    margin-left: 28px
}

[dir=rtl] .mat-badge-large.mat-badge-after .mat-badge-content {
    right: auto;
    left: -28px
}

.mat-badge-large.mat-badge-overlap.mat-badge-before {
    margin-left: 14px
}

.mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: -14px
}

[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-before {
    margin-left: 0;
    margin-right: 14px
}

[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: auto;
    right: -14px
}

.mat-badge-large.mat-badge-overlap.mat-badge-after {
    margin-right: 14px
}

.mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: -14px
}

[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-after {
    margin-right: 0;
    margin-left: 28px
}

[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: auto;
    left: -14px
}

.mat-bottom-sheet-container {
    background: #fff;
    color: rgba(0, 0, 0, .87)
}

.mat-button,
.mat-icon-button,
.mat-stroked-button {
    color: inherit;
    background: 0 0
}

.mat-button.mat-primary,
.mat-icon-button.mat-primary,
.mat-stroked-button.mat-primary {
    color: #51a351
}

.mat-button.mat-accent,
.mat-icon-button.mat-accent,
.mat-stroked-button.mat-accent {
    color: #51a351
}

.mat-button.mat-warn,
.mat-icon-button.mat-warn,
.mat-stroked-button.mat-warn {
    color: #cc3432
}

.mat-button.mat-accent[disabled],
.mat-button.mat-primary[disabled],
.mat-button.mat-warn[disabled],
.mat-button[disabled][disabled],
.mat-icon-button.mat-accent[disabled],
.mat-icon-button.mat-primary[disabled],
.mat-icon-button.mat-warn[disabled],
.mat-icon-button[disabled][disabled],
.mat-stroked-button.mat-accent[disabled],
.mat-stroked-button.mat-primary[disabled],
.mat-stroked-button.mat-warn[disabled],
.mat-stroked-button[disabled][disabled] {
    color: rgba(0, 0, 0, .26)
}

.mat-button.mat-primary .mat-button-focus-overlay,
.mat-icon-button.mat-primary .mat-button-focus-overlay,
.mat-stroked-button.mat-primary .mat-button-focus-overlay {
    background-color: rgba(103, 58, 183, .12)
}

.mat-button.mat-accent .mat-button-focus-overlay,
.mat-icon-button.mat-accent .mat-button-focus-overlay,
.mat-stroked-button.mat-accent .mat-button-focus-overlay {
    background-color: rgba(255, 215, 64, .12)
}

.mat-button.mat-warn .mat-button-focus-overlay,
.mat-icon-button.mat-warn .mat-button-focus-overlay,
.mat-stroked-button.mat-warn .mat-button-focus-overlay {
    background-color: rgba(244, 67, 54, .12)
}

.mat-button[disabled] .mat-button-focus-overlay,
.mat-icon-button[disabled] .mat-button-focus-overlay,
.mat-stroked-button[disabled] .mat-button-focus-overlay {
    background-color: transparent
}

.mat-button.mat-primary .mat-ripple-element,
.mat-icon-button.mat-primary .mat-ripple-element,
.mat-stroked-button.mat-primary .mat-ripple-element {
    background-color: rgba(103, 58, 183, .1)
}

.mat-button.mat-accent .mat-ripple-element,
.mat-icon-button.mat-accent .mat-ripple-element,
.mat-stroked-button.mat-accent .mat-ripple-element {
    background-color: rgba(255, 215, 64, .1)
}

.mat-button.mat-warn .mat-ripple-element,
.mat-icon-button.mat-warn .mat-ripple-element,
.mat-stroked-button.mat-warn .mat-ripple-element {
    background-color: rgba(244, 67, 54, .1)
}

.mat-fab,
.mat-flat-button,
.mat-mini-fab,
.mat-raised-button {
    color: rgba(0, 0, 0, .87);
    background-color: #fff
}

.mat-fab.mat-primary,
.mat-flat-button.mat-primary,
.mat-mini-fab.mat-primary,
.mat-raised-button.mat-primary {
    color: #fff
}

.mat-fab.mat-accent,
.mat-flat-button.mat-accent,
.mat-mini-fab.mat-accent,
.mat-raised-button.mat-accent {
    color: rgba(0, 0, 0, .87)
}

.mat-fab.mat-warn,
.mat-flat-button.mat-warn,
.mat-mini-fab.mat-warn,
.mat-raised-button.mat-warn {
    color: #fff
}

.mat-fab.mat-accent[disabled],
.mat-fab.mat-primary[disabled],
.mat-fab.mat-warn[disabled],
.mat-fab[disabled][disabled],
.mat-flat-button.mat-accent[disabled],
.mat-flat-button.mat-primary[disabled],
.mat-flat-button.mat-warn[disabled],
.mat-flat-button[disabled][disabled],
.mat-mini-fab.mat-accent[disabled],
.mat-mini-fab.mat-primary[disabled],
.mat-mini-fab.mat-warn[disabled],
.mat-mini-fab[disabled][disabled],
.mat-raised-button.mat-accent[disabled],
.mat-raised-button.mat-primary[disabled],
.mat-raised-button.mat-warn[disabled],
.mat-raised-button[disabled][disabled] {
    color: rgba(0, 0, 0, .26)
}

.mat-fab.mat-primary,
.mat-flat-button.mat-primary,
.mat-mini-fab.mat-primary,
.mat-raised-button.mat-primary {
    background-color: #51a351
}

.mat-fab.mat-accent,
.mat-flat-button.mat-accent,
.mat-mini-fab.mat-accent,
.mat-raised-button.mat-accent {
    background-color: #51a351
}

.mat-fab.mat-warn,
.mat-flat-button.mat-warn,
.mat-mini-fab.mat-warn,
.mat-raised-button.mat-warn {
    background-color: #cc3432
}

.mat-fab.mat-accent[disabled],
.mat-fab.mat-primary[disabled],
.mat-fab.mat-warn[disabled],
.mat-fab[disabled][disabled],
.mat-flat-button.mat-accent[disabled],
.mat-flat-button.mat-primary[disabled],
.mat-flat-button.mat-warn[disabled],
.mat-flat-button[disabled][disabled],
.mat-mini-fab.mat-accent[disabled],
.mat-mini-fab.mat-primary[disabled],
.mat-mini-fab.mat-warn[disabled],
.mat-mini-fab[disabled][disabled],
.mat-raised-button.mat-accent[disabled],
.mat-raised-button.mat-primary[disabled],
.mat-raised-button.mat-warn[disabled],
.mat-raised-button[disabled][disabled] {
    background-color: rgba(0, 0, 0, .12)
}

.mat-fab.mat-primary .mat-ripple-element,
.mat-flat-button.mat-primary .mat-ripple-element,
.mat-mini-fab.mat-primary .mat-ripple-element,
.mat-raised-button.mat-primary .mat-ripple-element {
    background-color: rgba(255, 255, 255, .1)
}

.mat-fab.mat-accent .mat-ripple-element,
.mat-flat-button.mat-accent .mat-ripple-element,
.mat-mini-fab.mat-accent .mat-ripple-element,
.mat-raised-button.mat-accent .mat-ripple-element {
    background-color: rgba(0, 0, 0, .1)
}

.mat-fab.mat-warn .mat-ripple-element,
.mat-flat-button.mat-warn .mat-ripple-element,
.mat-mini-fab.mat-warn .mat-ripple-element,
.mat-raised-button.mat-warn .mat-ripple-element {
    background-color: rgba(255, 255, 255, .1)
}

.mat-icon-button.mat-primary .mat-ripple-element {
    background-color: rgba(103, 58, 183, .2)
}

.mat-icon-button.mat-accent .mat-ripple-element {
    background-color: rgba(255, 215, 64, .2)
}

.mat-icon-button.mat-warn .mat-ripple-element {
    background-color: rgba(244, 67, 54, .2)
}

.mat-button-toggle {
    color: rgba(0, 0, 0, .38)
}

.mat-button-toggle .mat-button-toggle-focus-overlay {
    background-color: rgba(0, 0, 0, .12)
}

.mat-button-toggle-checked {
    background-color: #e0e0e0;
    color: rgba(0, 0, 0, .54)
}

.mat-button-toggle-disabled {
    background-color: #eee;
    color: rgba(0, 0, 0, .26)
}

.mat-button-toggle-disabled.mat-button-toggle-checked {
    background-color: #bdbdbd
}

.mat-card {
    background: #fff;
    color: rgba(0, 0, 0, .87)
}

.mat-card-subtitle {
    color: rgba(0, 0, 0, .54)
}

.mat-checkbox-frame {
    border-color: #b0b0b0
}

.mat-checkbox-checkmark {
    fill: #fafafa
}

.mat-checkbox-checkmark-path {
    stroke: #fafafa!important
}

.mat-checkbox-mixedmark {
    background-color: #fafafa
}

.mat-checkbox-checked.mat-primary .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background {
    background-color: #51a351
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #51a351
}

.mat-checkbox-checked.mat-warn .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-warn .mat-checkbox-background {
    background-color: #cc3432
}

.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background,
.mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
    background-color: #b0b0b0
}

.mat-checkbox-disabled:not(.mat-checkbox-checked) .mat-checkbox-frame {
    border-color: #b0b0b0
}

.mat-checkbox-disabled .mat-checkbox-label {
    color: #b0b0b0
}

.mat-checkbox:not(.mat-checkbox-disabled).mat-primary .mat-checkbox-ripple .mat-ripple-element {
    background-color: rgba(103, 58, 183, .26)
}

.mat-checkbox:not(.mat-checkbox-disabled).mat-accent .mat-checkbox-ripple .mat-ripple-element {
    background-color: rgba(81, 163, 81, .1)
}

.mat-checkbox:not(.mat-checkbox-disabled).mat-warn .mat-checkbox-ripple .mat-ripple-element {
    background-color: rgba(244, 67, 54, .26)
}

.mat-chip.mat-standard-chip {
    background-color: #e0e0e0;
    color: rgba(0, 0, 0, .87)
}

.mat-chip.mat-standard-chip .mat-chip-remove {
    color: rgba(0, 0, 0, .87);
    opacity: .4
}

.mat-chip.mat-standard-chip .mat-chip-remove:hover {
    opacity: .54
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
    background-color: #51a351;
    color: #fff
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove {
    color: #fff;
    opacity: .4
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove:hover {
    opacity: .54
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn {
    background-color: #cc3432;
    color: #fff
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove {
    color: #fff;
    opacity: .4
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove:hover {
    opacity: .54
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent {
    background-color: #51a351;
    color: rgba(0, 0, 0, .87)
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove {
    color: rgba(0, 0, 0, .87);
    opacity: .4
}

.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove:hover {
    opacity: .54
}

.mat-table {
    background: #fff
}

mat-footer-row,
mat-header-row,
mat-row,
td.mat-cell,
td.mat-footer-cell,
th.mat-header-cell {
    border-bottom-color: rgba(0, 0, 0, .12)
}

.mat-header-cell {
    color: rgba(0, 0, 0, .54)
}

.mat-cell,
.mat-footer-cell {
    color: rgba(0, 0, 0, .87)
}

.mat-calendar-arrow {
    border-top-color: rgba(0, 0, 0, .54)
}

.mat-datepicker-popup .mat-calendar-next-button,
.mat-datepicker-popup .mat-calendar-previous-button,
.mat-datepicker-toggle {
    color: rgba(0, 0, 0, .54)
}

.mat-calendar-table-header {
    color: rgba(0, 0, 0, .38)
}

.mat-calendar-table-header-divider::after {
    background: rgba(0, 0, 0, .12)
}

.mat-calendar-body-label {
    color: rgba(0, 0, 0, .54)
}

.mat-calendar-body-cell-content {
    color: rgba(0, 0, 0, .87);
    border-color: transparent
}

.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
    color: rgba(0, 0, 0, .38)
}

.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
    background-color: rgba(0, 0, 0, .04)
}

.mat-calendar-body-today:not(.mat-calendar-body-selected) {
    border-color: rgba(0, 0, 0, .38)
}

.mat-calendar-body-disabled>.mat-calendar-body-today:not(.mat-calendar-body-selected) {
    border-color: rgba(0, 0, 0, .18)
}

.mat-calendar-body-selected {
    background-color: #51a351;
    color: #fff
}

.mat-calendar-body-today.mat-calendar-body-selected {
    box-shadow: inset 0 0 0 1px #fff
}

.mat-datepicker-content {
    background-color: #fff;
    color: rgba(0, 0, 0, .87);
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-selected {
    background-color: #51a351;
    color: rgba(0, 0, 0, .87)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-disabled>.mat-calendar-body-selected {
    background-color: rgba(255, 215, 64, .4)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .87)
}

.mat-datepicker-content.mat-warn .mat-calendar-body-selected {
    background-color: #cc3432;
    color: #fff
}

.mat-datepicker-content.mat-warn .mat-calendar-body-disabled>.mat-calendar-body-selected {
    background-color: rgba(244, 67, 54, .4)
}

.mat-datepicker-content.mat-warn .mat-calendar-body-today.mat-calendar-body-selected {
    box-shadow: inset 0 0 0 1px #fff
}

.mat-datepicker-toggle-active {
    color: #51a351
}

.mat-datepicker-toggle-active.mat-accent {
    color: #51a351
}

.mat-datepicker-toggle-active.mat-warn {
    color: #cc3432
}

.mat-dialog-container {
    background: #f0f0f0;
    color: rgba(0, 0, 0, .87)
}

.mat-divider {
    border-top-color: rgba(0, 0, 0, .12)
}

.mat-divider-vertical {
    border-right-color: rgba(0, 0, 0, .12)
}

.mat-expansion-panel {
    background: #fff;
    color: rgba(0, 0, 0, .87)
}

.mat-action-row {
    border-top-color: rgba(0, 0, 0, .12)
}

.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]).cdk-keyboard-focused,
.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]).cdk-program-focused,
.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover {
    background: rgba(0, 0, 0, .04)
}

.mat-expansion-panel-header-title {
    color: rgba(0, 0, 0, .87)
}

.mat-expansion-indicator::after,
.mat-expansion-panel-header-description {
    color: rgba(0, 0, 0, .54)
}

.mat-expansion-panel-header[aria-disabled=true] {
    color: rgba(0, 0, 0, .26)
}

.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-description,
.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title {
    color: inherit
}

.mat-form-field-label {
    color: rgba(0, 0, 0, .6)
}

.mat-hint {
    color: rgba(0, 0, 0, .6)
}

.mat-form-field.mat-focused .mat-form-field-label {
    color: #51a351
}

.mat-form-field.mat-focused .mat-form-field-label.mat-accent {
    color: #51a351
}

.mat-form-field.mat-focused .mat-form-field-label.mat-warn {
    color: #cc3432
}

.mat-focused .mat-form-field-required-marker {
    color: #51a351
}

.mat-form-field-ripple {
    background-color: rgba(0, 0, 0, .87)
}

.mat-form-field.mat-focused .mat-form-field-ripple {
    background-color: #51a351
}

.mat-form-field.mat-focused .mat-form-field-ripple.mat-accent {
    background-color: #51a351
}

.mat-form-field.mat-focused .mat-form-field-ripple.mat-warn {
    background-color: #cc3432
}

.mat-form-field.mat-form-field-invalid .mat-form-field-label {
    color: #cc3432
}

.mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker,
.mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent {
    color: #cc3432
}

.mat-form-field.mat-form-field-invalid .mat-form-field-ripple {
    background-color: #cc3432
}

.mat-error {
    color: #cc3432
}

.mat-form-field-appearance-legacy .mat-form-field-label {
    color: rgba(0, 0, 0, .54)
}

.mat-form-field-appearance-legacy .mat-hint {
    color: rgba(0, 0, 0, .54)
}

.mat-form-field-appearance-legacy .mat-form-field-underline {
    background-color: rgba(0, 0, 0, .42)
}

.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, .42) 33%, transparent 0);
    background-size: 4px 100%;
    background-repeat: repeat-x
}

.mat-form-field-appearance-standard .mat-form-field-underline {
    background-color: rgba(0, 0, 0, .42)
}

.mat-form-field-appearance-standard.mat-form-field-disabled .mat-form-field-underline {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, .42) 33%, transparent 0);
    background-size: 4px 100%;
    background-repeat: repeat-x
}

.mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: rgba(0, 0, 0, .04)
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
    background-color: rgba(0, 0, 0, .02)
}

.mat-form-field-appearance-fill .mat-form-field-underline::before {
    background-color: rgba(0, 0, 0, .42)
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-label {
    color: rgba(0, 0, 0, .38)
}

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-underline::before {
    background-color: transparent
}

.mat-form-field-appearance-outline .mat-form-field-outline {
    color: rgba(0, 0, 0, .12)
}

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: rgba(0, 0, 0, .87)
}

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: #51a351
}

.mat-form-field-appearance-outline.mat-focused.mat-accent .mat-form-field-outline-thick {
    color: #51a351
}

.mat-form-field-appearance-outline.mat-focused.mat-warn .mat-form-field-outline-thick {
    color: #cc3432
}

.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
    color: #cc3432
}

.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-label {
    color: rgba(0, 0, 0, .38)
}

.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline {
    color: rgba(0, 0, 0, .06)
}

.mat-icon.mat-primary {
    color: #51a351
}

.mat-icon.mat-accent {
    color: #51a351
}

.mat-icon.mat-warn {
    color: #cc3432
}

.mat-input-element:disabled {
    color: rgba(0, 0, 0, .38)
}

.mat-input-element {
    caret-color: #51a351
}

.mat-input-element::-webkit-input-placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-input-element::-moz-placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-input-element::-ms-input-placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-input-element::placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-input-element::-moz-placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-input-element::-webkit-input-placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-input-element:-ms-input-placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-accent .mat-input-element {
    caret-color: #51a351
}

.mat-form-field-invalid .mat-input-element,
.mat-warn .mat-input-element {
    caret-color: #cc3432
}

.mat-list .mat-list-item,
.mat-nav-list .mat-list-item,
.mat-selection-list .mat-list-item {
    color: rgba(0, 0, 0, .87)
}

.mat-list .mat-list-option,
.mat-nav-list .mat-list-option,
.mat-selection-list .mat-list-option {
    color: rgba(0, 0, 0, .87)
}

.mat-list .mat-subheader,
.mat-nav-list .mat-subheader,
.mat-selection-list .mat-subheader {
    color: rgba(0, 0, 0, .54)
}

.mat-list-item-disabled {
    background-color: #eee
}

.mat-list-option.mat-list-item-focus,
.mat-list-option:hover,
.mat-nav-list .mat-list-item.mat-list-item-focus,
.mat-nav-list .mat-list-item:hover {
    background: rgba(0, 0, 0, .04)
}

.mat-menu-panel {
    background: #fff
}

.mat-menu-item {
    background: 0 0;
    color: rgba(0, 0, 0, .87)
}

.mat-menu-item[disabled],
.mat-menu-item[disabled]::after {
    color: rgba(0, 0, 0, .38)
}

.mat-menu-item .mat-icon:not([color]),
.mat-menu-item-submenu-trigger::after {
    color: rgba(0, 0, 0, .54)
}

.mat-menu-item-highlighted:not([disabled]),
.mat-menu-item.cdk-keyboard-focused:not([disabled]),
.mat-menu-item.cdk-program-focused:not([disabled]),
.mat-menu-item:hover:not([disabled]) {
    background: rgba(0, 0, 0, .04)
}

.mat-paginator {
    background: #fff
}

.mat-paginator,
.mat-paginator-page-size .mat-select-trigger {
    color: rgba(0, 0, 0, .54)
}

.mat-paginator-decrement,
.mat-paginator-increment {
    border-top: 2px solid rgba(0, 0, 0, .54);
    border-right: 2px solid rgba(0, 0, 0, .54)
}

.mat-paginator-first,
.mat-paginator-last {
    border-top: 2px solid rgba(0, 0, 0, .54)
}

.mat-icon-button[disabled] .mat-paginator-decrement,
.mat-icon-button[disabled] .mat-paginator-first,
.mat-icon-button[disabled] .mat-paginator-increment,
.mat-icon-button[disabled] .mat-paginator-last {
    border-color: rgba(0, 0, 0, .38)
}

.mat-progress-bar-background {
    fill: #dddcdb
}

.mat-progress-bar-buffer {
    background-color: #dddcdb
}

.mat-progress-bar-fill::after {
    background-color: #51a351
}

.mat-progress-bar.mat-accent .mat-progress-bar-background {
    fill: #ffe57f
}

.mat-progress-bar.mat-accent .mat-progress-bar-buffer {
    background-color: #ffe57f
}

.mat-progress-bar.mat-accent .mat-progress-bar-fill::after {
    background-color: #51a351
}

.mat-progress-bar.mat-warn .mat-progress-bar-background {
    fill: #ffcdd2
}

.mat-progress-bar.mat-warn .mat-progress-bar-buffer {
    background-color: #ffcdd2
}

.mat-progress-bar.mat-warn .mat-progress-bar-fill::after {
    background-color: #cc3432
}

.mat-progress-spinner circle,
.mat-spinner circle {
    stroke: #51a351
}

.mat-progress-spinner.mat-accent circle,
.mat-spinner.mat-accent circle {
    stroke: #51a351
}

.mat-progress-spinner.mat-warn circle,
.mat-spinner.mat-warn circle {
    stroke: #cc3432
}

.mat-radio-outer-circle {
    border-color: rgba(0, 0, 0, .54)
}

.mat-radio-disabled .mat-radio-outer-circle {
    border-color: rgba(0, 0, 0, .38)
}

.mat-radio-disabled .mat-radio-inner-circle,
.mat-radio-disabled .mat-radio-ripple .mat-ripple-element {
    background-color: rgba(0, 0, 0, .38)
}

.mat-radio-disabled .mat-radio-label-content {
    color: rgba(0, 0, 0, .38)
}

.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle {
    border-color: #51a351
}

.mat-radio-button.mat-primary .mat-radio-inner-circle {
    background-color: #51a351
}

.mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element {
    background-color: rgba(103, 58, 183, .26)
}

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
    border-color: #51a351
}

.mat-radio-button.mat-accent .mat-radio-inner-circle {
    background-color: #51a351
}

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color: rgba(255, 215, 64, .26)
}

.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-outer-circle {
    border-color: #cc3432
}

.mat-radio-button.mat-warn .mat-radio-inner-circle {
    background-color: #cc3432
}

.mat-radio-button.mat-warn .mat-radio-ripple .mat-ripple-element {
    background-color: rgba(244, 67, 54, .26)
}

.mat-select-panel,
.mat-select-panel-done-animating {
    background: #fff;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12)
}

.mat-select-value {
    color: rgba(0, 0, 0, .87)
}

.mat-select-placeholder {
    color: rgba(0, 0, 0, .42)
}

.mat-select-disabled .mat-select-value {
    color: rgba(0, 0, 0, .38)
}

.mat-select-arrow {
    color: rgba(0, 0, 0, .54)
}

.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
    background: rgba(0, 0, 0, .12)
}

.mat-form-field.mat-focused.mat-primary .mat-select-arrow {
    color: #51a351
}

.mat-form-field.mat-focused.mat-accent .mat-select-arrow {
    color: #51a351
}

.mat-form-field.mat-focused.mat-warn .mat-select-arrow {
    color: #cc3432
}

.mat-form-field .mat-select.mat-select-invalid .mat-select-arrow {
    color: #cc3432
}

.mat-form-field .mat-select.mat-select-disabled .mat-select-arrow {
    color: rgba(0, 0, 0, .38)
}

.mat-drawer-container {
    background-color: #fafafa;
    color: rgba(0, 0, 0, .87)
}

.mat-drawer {
    background-color: #fff;
    color: rgba(0, 0, 0, .87)
}

.mat-drawer.mat-drawer-push {
    background-color: #fff
}

.mat-drawer-backdrop.mat-drawer-shown {
    background-color: rgba(0, 0, 0, .6)
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #ffc107
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: rgba(255, 193, 7, .5)
}

.mat-slide-toggle:not(.mat-checked) .mat-ripple-element {
    background-color: rgba(0, 0, 0, .06)
}

.mat-slide-toggle .mat-ripple-element {
    background-color: rgba(255, 193, 7, .12)
}

.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #51a351
}

.mat-slide-toggle.mat-primary.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: rgba(103, 58, 183, .5)
}

.mat-slide-toggle.mat-primary:not(.mat-checked) .mat-ripple-element {
    background-color: rgba(0, 0, 0, .06)
}

.mat-slide-toggle.mat-primary .mat-ripple-element {
    background-color: rgba(103, 58, 183, .12)
}

.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #cc3432
}

.mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: rgba(244, 67, 54, .5)
}

.mat-slide-toggle.mat-warn:not(.mat-checked) .mat-ripple-element {
    background-color: rgba(0, 0, 0, .06)
}

.mat-slide-toggle.mat-warn .mat-ripple-element {
    background-color: rgba(244, 67, 54, .12)
}

.mat-disabled .mat-slide-toggle-thumb {
    background-color: #bdbdbd
}

.mat-disabled .mat-slide-toggle-bar {
    background-color: rgba(0, 0, 0, .1)
}

.mat-slide-toggle-thumb {
    background-color: #fafafa
}

.mat-slide-toggle-bar {
    background-color: rgba(0, 0, 0, .38)
}

.mat-slider-track-background {
    background-color: rgba(0, 0, 0, .26)
}

.mat-primary .mat-slider-thumb,
.mat-primary .mat-slider-thumb-label,
.mat-primary .mat-slider-track-fill {
    background-color: #51a351
}

.mat-primary .mat-slider-thumb-label-text {
    color: #fff
}

.mat-accent .mat-slider-thumb,
.mat-accent .mat-slider-thumb-label,
.mat-accent .mat-slider-track-fill {
    background-color: #51a351
}

.mat-accent .mat-slider-thumb-label-text {
    color: rgba(0, 0, 0, .87)
}

.mat-warn .mat-slider-thumb,
.mat-warn .mat-slider-thumb-label,
.mat-warn .mat-slider-track-fill {
    background-color: #cc3432
}

.mat-warn .mat-slider-thumb-label-text {
    color: #fff
}

.mat-slider-focus-ring {
    background-color: rgba(255, 215, 64, .2)
}

.cdk-focused .mat-slider-track-background,
.mat-slider:hover .mat-slider-track-background {
    background-color: rgba(0, 0, 0, .38)
}

.mat-slider-disabled .mat-slider-thumb,
.mat-slider-disabled .mat-slider-track-background,
.mat-slider-disabled .mat-slider-track-fill {
    background-color: rgba(0, 0, 0, .26)
}

.mat-slider-disabled:hover .mat-slider-track-background {
    background-color: rgba(0, 0, 0, .26)
}

.mat-slider-min-value .mat-slider-focus-ring {
    background-color: rgba(0, 0, 0, .12)
}

.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,
.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
    background-color: rgba(0, 0, 0, .87)
}

.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,
.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
    background-color: rgba(0, 0, 0, .26)
}

.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
    border-color: rgba(0, 0, 0, .26);
    background-color: transparent
}

.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb,
.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb {
    border-color: rgba(0, 0, 0, .38)
}

.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb,
.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb {
    border-color: rgba(0, 0, 0, .26)
}

.mat-slider-has-ticks .mat-slider-wrapper::after {
    border-color: rgba(0, 0, 0, .7)
}

.mat-slider-horizontal .mat-slider-ticks {
    background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent);
    background-image: -moz-repeating-linear-gradient(.0001deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent)
}

.mat-slider-vertical .mat-slider-ticks {
    background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7) 2px, transparent 0, transparent)
}

.mat-step-header.cdk-keyboard-focused,
.mat-step-header.cdk-program-focused,
.mat-step-header:hover {
    background-color: rgba(0, 0, 0, .04)
}

.mat-step-header .mat-step-label,
.mat-step-header .mat-step-optional {
    color: rgba(0, 0, 0, .38)
}

.mat-step-header .mat-step-icon {
    background-color: #51a351;
    color: #fff
}

.mat-step-header .mat-step-icon-not-touched {
    background-color: rgba(0, 0, 0, .38);
    color: #fff
}

.mat-step-header .mat-step-label.mat-step-label-active {
    color: rgba(0, 0, 0, .87)
}

.mat-stepper-horizontal,
.mat-stepper-vertical {
    background-color: #fff
}

.mat-stepper-vertical-line::before {
    border-left-color: rgba(0, 0, 0, .12)
}

.mat-stepper-horizontal-line {
    border-top-color: rgba(0, 0, 0, .12)
}

.mat-tab-header,
.mat-tab-nav-bar {
    border-bottom: 1px solid rgba(0, 0, 0, .12)
}

.mat-tab-group-inverted-header .mat-tab-header,
.mat-tab-group-inverted-header .mat-tab-nav-bar {
    border-top: 1px solid rgba(0, 0, 0, .12);
    border-bottom: none
}

.mat-tab-label,
.mat-tab-link {
    color: rgba(0, 0, 0, .87)
}

.mat-tab-label.mat-tab-disabled,
.mat-tab-link.mat-tab-disabled {
    color: rgba(0, 0, 0, .38)
}

.mat-tab-header-pagination-chevron {
    border-color: rgba(0, 0, 0, .87)
}

.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
    border-color: rgba(0, 0, 0, .38)
}

.mat-tab-group[class*=mat-background-] .mat-tab-header,
.mat-tab-nav-bar[class*=mat-background-] {
    border-bottom: none;
    border-top: none
}

.mat-tab-group.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-group.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus,
.mat-tab-nav-bar.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-nav-bar.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus {
    background-color: rgba(209, 196, 233, .3)
}

.mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: #51a351
}

.mat-tab-group.mat-primary.mat-background-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary.mat-background-primary .mat-ink-bar {
    background-color: #fff
}

.mat-tab-group.mat-accent .mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-group.mat-accent .mat-tab-link:not(.mat-tab-disabled):focus,
.mat-tab-nav-bar.mat-accent .mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-nav-bar.mat-accent .mat-tab-link:not(.mat-tab-disabled):focus {
    background-color: rgba(255, 229, 127, .3)
}

.mat-tab-group.mat-accent .mat-ink-bar,
.mat-tab-nav-bar.mat-accent .mat-ink-bar {
    background-color: #51a351
}

.mat-tab-group.mat-accent.mat-background-accent .mat-ink-bar,
.mat-tab-nav-bar.mat-accent.mat-background-accent .mat-ink-bar {
    background-color: rgba(0, 0, 0, .87)
}

.mat-tab-group.mat-warn .mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-group.mat-warn .mat-tab-link:not(.mat-tab-disabled):focus,
.mat-tab-nav-bar.mat-warn .mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-nav-bar.mat-warn .mat-tab-link:not(.mat-tab-disabled):focus {
    background-color: rgba(255, 205, 210, .3)
}

.mat-tab-group.mat-warn .mat-ink-bar,
.mat-tab-nav-bar.mat-warn .mat-ink-bar {
    background-color: #cc3432
}

.mat-tab-group.mat-warn.mat-background-warn .mat-ink-bar,
.mat-tab-nav-bar.mat-warn.mat-background-warn .mat-ink-bar {
    background-color: #fff
}

.mat-tab-group.mat-background-primary .mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-group.mat-background-primary .mat-tab-link:not(.mat-tab-disabled):focus,
.mat-tab-nav-bar.mat-background-primary .mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-nav-bar.mat-background-primary .mat-tab-link:not(.mat-tab-disabled):focus {
    background-color: rgba(209, 196, 233, .3)
}

.mat-tab-group.mat-background-primary .mat-tab-header,
.mat-tab-group.mat-background-primary .mat-tab-links,
.mat-tab-nav-bar.mat-background-primary .mat-tab-header,
.mat-tab-nav-bar.mat-background-primary .mat-tab-links {
    background-color: #51a351
}

.mat-tab-group.mat-background-primary .mat-tab-label,
.mat-tab-group.mat-background-primary .mat-tab-link,
.mat-tab-nav-bar.mat-background-primary .mat-tab-label,
.mat-tab-nav-bar.mat-background-primary .mat-tab-link {
    color: #fff
}

.mat-tab-group.mat-background-primary .mat-tab-label.mat-tab-disabled,
.mat-tab-group.mat-background-primary .mat-tab-link.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-primary .mat-tab-label.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-primary .mat-tab-link.mat-tab-disabled {
    color: rgba(255, 255, 255, .4)
}

.mat-tab-group.mat-background-primary .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-chevron {
    border-color: #fff
}

.mat-tab-group.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-primary .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
    border-color: rgba(255, 255, 255, .4)
}

.mat-tab-group.mat-background-primary .mat-ripple-element,
.mat-tab-nav-bar.mat-background-primary .mat-ripple-element {
    background-color: rgba(255, 255, 255, .12)
}

.mat-tab-group.mat-background-accent .mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-group.mat-background-accent .mat-tab-link:not(.mat-tab-disabled):focus,
.mat-tab-nav-bar.mat-background-accent .mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-nav-bar.mat-background-accent .mat-tab-link:not(.mat-tab-disabled):focus {
    background-color: rgba(255, 229, 127, .3)
}

.mat-tab-group.mat-background-accent .mat-tab-header,
.mat-tab-group.mat-background-accent .mat-tab-links,
.mat-tab-nav-bar.mat-background-accent .mat-tab-header,
.mat-tab-nav-bar.mat-background-accent .mat-tab-links {
    background-color: #51a351
}

.mat-tab-group.mat-background-accent .mat-tab-label,
.mat-tab-group.mat-background-accent .mat-tab-link,
.mat-tab-nav-bar.mat-background-accent .mat-tab-label,
.mat-tab-nav-bar.mat-background-accent .mat-tab-link {
    color: rgba(0, 0, 0, .87)
}

.mat-tab-group.mat-background-accent .mat-tab-label.mat-tab-disabled,
.mat-tab-group.mat-background-accent .mat-tab-link.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-accent .mat-tab-label.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-accent .mat-tab-link.mat-tab-disabled {
    color: rgba(0, 0, 0, .4)
}

.mat-tab-group.mat-background-accent .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-chevron {
    border-color: rgba(0, 0, 0, .87)
}

.mat-tab-group.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-accent .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
    border-color: rgba(0, 0, 0, .4)
}

.mat-tab-group.mat-background-accent .mat-ripple-element,
.mat-tab-nav-bar.mat-background-accent .mat-ripple-element {
    background-color: rgba(0, 0, 0, .12)
}

.mat-tab-group.mat-background-warn .mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-group.mat-background-warn .mat-tab-link:not(.mat-tab-disabled):focus,
.mat-tab-nav-bar.mat-background-warn .mat-tab-label:not(.mat-tab-disabled):focus,
.mat-tab-nav-bar.mat-background-warn .mat-tab-link:not(.mat-tab-disabled):focus {
    background-color: rgba(255, 205, 210, .3)
}

.mat-tab-group.mat-background-warn .mat-tab-header,
.mat-tab-group.mat-background-warn .mat-tab-links,
.mat-tab-nav-bar.mat-background-warn .mat-tab-header,
.mat-tab-nav-bar.mat-background-warn .mat-tab-links {
    background-color: #cc3432
}

.mat-tab-group.mat-background-warn .mat-tab-label,
.mat-tab-group.mat-background-warn .mat-tab-link,
.mat-tab-nav-bar.mat-background-warn .mat-tab-label,
.mat-tab-nav-bar.mat-background-warn .mat-tab-link {
    color: #fff
}

.mat-tab-group.mat-background-warn .mat-tab-label.mat-tab-disabled,
.mat-tab-group.mat-background-warn .mat-tab-link.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-warn .mat-tab-label.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-warn .mat-tab-link.mat-tab-disabled {
    color: rgba(255, 255, 255, .4)
}

.mat-tab-group.mat-background-warn .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-chevron {
    border-color: #fff
}

.mat-tab-group.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-warn .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
    border-color: rgba(255, 255, 255, .4)
}

.mat-tab-group.mat-background-warn .mat-ripple-element,
.mat-tab-nav-bar.mat-background-warn .mat-ripple-element {
    background-color: rgba(255, 255, 255, .12)
}

.mat-toolbar {
    background: #f5f5f5;
    color: rgba(0, 0, 0, .87)
}

.mat-toolbar.mat-primary {
    background: #51a351;
    color: #fff
}

.mat-toolbar.mat-accent {
    background: #51a351;
    color: rgba(0, 0, 0, .87)
}

.mat-toolbar.mat-warn {
    background: #cc3432;
    color: #fff
}

.mat-toolbar .mat-focused .mat-form-field-ripple,
.mat-toolbar .mat-form-field-ripple,
.mat-toolbar .mat-form-field-underline {
    background-color: currentColor
}

.mat-toolbar .mat-focused .mat-form-field-label,
.mat-toolbar .mat-form-field-label,
.mat-toolbar .mat-form-field.mat-focused .mat-select-arrow,
.mat-toolbar .mat-select-arrow,
.mat-toolbar .mat-select-value {
    color: inherit
}

.mat-toolbar .mat-input-element {
    caret-color: currentColor
}

.mat-tooltip {
    background: rgba(97, 97, 97, .9)
}

.mat-tree {
    background: #fff
}

.mat-tree-node {
    color: rgba(0, 0, 0, .87)
}

.mat-snack-bar-container {
    background: #323232;
    color: #fff
}

.mat-simple-snackbar-action {
    color: #51a351
}

.mat-dialog-actions {
    padding: 0;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0
}

.mat-calendar-body-label {
    visibility: hidden
}

.mat-calendar-body-label[colspan="7"] {
    display: none
}

.mat-calendar-body-selected {
    background-color: #e2002a
}

.mat-calendar-body-disabled>.mat-calendar-body-selected {
    background-color: rgba(226, 0, 42, .4)
}

.mat-calendar-body-cell:nth-of-type(7n) .mat-calendar-body-cell-content,
.mat-calendar-body-label[colspan]~.mat-calendar-body-cell:last-of-type .mat-calendar-body-cell-content {
    color: #e2002a
}

.mat-calendar-body-cell:nth-of-type(7n) .mat-calendar-body-cell-content.mat-calendar-body-selected,
.mat-calendar-body-label[colspan]~.mat-calendar-body-cell:last-of-type .mat-calendar-body-cell-content.mat-calendar-body-selected {
    color: #fff
}

.mat-calendar-body-cell:nth-of-type(7n).mat-calendar-body-disabled .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
.mat-calendar-body-label[colspan]~.mat-calendar-body-cell:last-of-type.mat-calendar-body-disabled .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
    color: rgba(226, 0, 42, .4)
}

.mat-active-look-on-disabled-fields .mat-input-element:disabled {
    color: #000!important;
    opacity: 1
}

.mat-active-look-on-disabled-fields.mat-form-field-disabled .mat-form-field-underline {
    background-color: rgba(0, 0, 0, .42)!important;
    background-image: none
}

calendar-sheet {
    display: block;
    height: 55px;
    width: 55px
}

calendar-sheet.disabled,
calendar-sheet.disabled .calendar-sheet {
    pointer-events: none
}

calendar-sheet .calendar-sheet:hover .calendar-sheet-header,
calendar-sheet.selected .calendar-sheet-header {
    background-color: #e2002a
}

calendar-sheet .calendar-sheet:hover .day,
calendar-sheet.selected .day {
    font-weight: 700
}

calendar-sheet.selected .calendar-sheet[disabled] .day,
calendar-sheet.selected .calendar-sheet[disabled] .month {
    color: #222
}

calendar-sheet .calendar-sheet {
    display: block;
    width: 100%;
    height: 100%
}

calendar-sheet .calendar-sheet[disabled] .day,
calendar-sheet .calendar-sheet[disabled] .month {
    color: #d7d7d7
}

calendar-sheet .calendar-sheet-header {
    background-color: #868686;
    color: #fff;
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    line-height: 18px
}

calendar-sheet .calendar-sheet-body {
    border: 1px solid #afafaf;
    border-top: none;
    background-color: #fff
}

calendar-sheet .day {
    color: #222;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    padding-top: 2px
}

calendar-sheet .month {
    color: #222;
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    padding-bottom: 2px
}

calendar-sheet .icon {
    padding-top: 10px
}

calendar-sheet .price,
calendar-sheet .priceLabel {
    color: #508546;
    font-size: 12px
}

calendar-sheet .priceLabel {
    padding-top: 2px
}

calendar-sheet .price {
    padding-bottom: 2px
}

shared-checkbox-button>.wrapper {
    cursor: pointer;
    color: #222
}

shared-checkbox-button>.wrapper>.col1 {
    float: left;
    width: 32px;
    padding-top: 18px
}

shared-checkbox-button>.wrapper>.col2 {
    overflow: hidden;
    padding: 18px 0 18px 0
}

shared-checkbox-button>.wrapper>.col2 label {
    cursor: pointer;
    line-height: 1.1em;
    font-size: 16px;
    font-weight: 400
}

shared-checkbox-button>.wrapper>.col2 .transcluded {
    margin-top: 18px
}

shared-checkbox-button>.wrapper:focus,
shared-checkbox-button>.wrapper:hover {
    background: #e6e6e6
}

shared-checkbox-button>.wrapper:focus svg,
shared-checkbox-button>.wrapper:hover svg {
    background: #e6e6e6
}

shared-checkbox-button>.wrapper:active svg {
    background: #ccc
}

shared-checkbox-button>.wrapper.disabled>.col2 {
    color: #6a6a6a
}

shared-checkbox-button>.wrapper.disabled>.col2 label {
    color: #6a6a6a
}

shared-mat-checkbox .row {
    display: flex;
    align-items: baseline
}

shared-mat-checkbox .row .col2 {
    margin-left: 10px
}

shared-checkbox {
    display: inline-block
}

shared-checkbox svg {
    fill: #51a351
}

shared-checkbox .disabled svg {
    color: #afafaf!important;
    fill: #afafaf!important
}

shared-clock {
    position: relative;
    width: 58px;
    height: 58px;
    display: block;
    margin: 0 auto
}

shared-clock .tick {
    fill: #fff
}

shared-clock .minutes-hours-hand {
    fill: #fff
}

shared-clock .seconds-hand {
    fill: #d40027
}

shared-clock .dark .tick {
    fill: #222
}

shared-clock .dark .minutes-hours-hand {
    fill: #222
}

.form .collapsibleBoxHeader,
form .collapsibleBoxHeader,
shared-collapsible-box .form,
shared-collapsible-box form {
    font-size: 14px
}

.form .collapsibleBoxHeader select,
form .collapsibleBoxHeader select,
shared-collapsible-box .form select,
shared-collapsible-box form select {
    font-size: 14px
}

.form .collapsibleBoxHeader table,
form .collapsibleBoxHeader table,
shared-collapsible-box .form table,
shared-collapsible-box form table {
    width: 100%;
    margin-bottom: 40px
}

.form .collapsibleBoxHeader table tr td,
form .collapsibleBoxHeader table tr td,
shared-collapsible-box .form table tr td,
shared-collapsible-box form table tr td {
    width: 50%;
    padding: 15px 35px 0 0
}

.form .collapsibleBoxHeader table tr td:first-child,
form .collapsibleBoxHeader table tr td:first-child,
shared-collapsible-box .form table tr td:first-child,
shared-collapsible-box form table tr td:first-child {
    padding-left: 51px
}

.form .collapsibleBoxHeader table tr td:last-child,
form .collapsibleBoxHeader table tr td:last-child,
shared-collapsible-box .form table tr td:last-child,
shared-collapsible-box form table tr td:last-child {
    padding-right: 51px
}

.form .collapsibleBoxHeader table tr td.doubleEqualColumn>div,
form .collapsibleBoxHeader table tr td.doubleEqualColumn>div,
shared-collapsible-box .form table tr td.doubleEqualColumn>div,
shared-collapsible-box form table tr td.doubleEqualColumn>div {
    width: 50%;
    float: left
}

.form .collapsibleBoxHeader table tr td.thirdEqualColumn>div,
form .collapsibleBoxHeader table tr td.thirdEqualColumn>div,
shared-collapsible-box .form table tr td.thirdEqualColumn>div,
shared-collapsible-box form table tr td.thirdEqualColumn>div {
    width: 33%;
    float: left
}

.form .collapsibleBoxHeader section.flexRow .flexRow,
form .collapsibleBoxHeader section.flexRow .flexRow,
shared-collapsible-box .form section.flexRow .flexRow,
shared-collapsible-box form section.flexRow .flexRow {
    margin-bottom: 15px;
    margin-right: 35px
}

.form .collapsibleBoxHeader [ts-click].loading .loading-wrapper,
form .collapsibleBoxHeader [ts-click].loading .loading-wrapper,
shared-collapsible-box .form [ts-click].loading .loading-wrapper,
shared-collapsible-box form [ts-click].loading .loading-wrapper {
    background: #fff
}

.form .collapsibleBoxHeader button[disabled],
form .collapsibleBoxHeader button[disabled],
shared-collapsible-box .form button[disabled],
shared-collapsible-box form button[disabled] {
    color: #878787
}

.form .collapsibleBoxHeader input[type=search],
.form .collapsibleBoxHeader input[type=text],
form .collapsibleBoxHeader input[type=search],
form .collapsibleBoxHeader input[type=text],
shared-collapsible-box .form input[type=search],
shared-collapsible-box .form input[type=text],
shared-collapsible-box form input[type=search],
shared-collapsible-box form input[type=text] {
    font-size: 14px;
    background-color: #fff;
    border-color: #afafaf;
    border-style: none none solid;
    border-width: medium medium 1px;
    outline: 0;
    width: 100%;
    color: #222;
    padding: 4px 0
}

shared-collapsible-box {
    display: block
}

shared-collapsible-box[white] {
    background-color: #fff
}

shared-collapsible-box[white]>.collapsibleBoxContent,
shared-collapsible-box[white]>.collapsibleBoxHeader {
    background-color: #fff
}

shared-collapsible-box:not(.collapsed)>.collapsibleBoxHeader ts-vogerl {
    display: none
}

shared-collapsible-box:not(.collapsed)>.collapsibleBoxHeader .collapsible-header-arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

shared-collapsible-box.collapsed>.collapsibleBoxContent {
    max-height: 0
}

shared-collapsible-box ts-vogerl {
    cursor: pointer
}

shared-collapsible-box>.collapsibleBoxHeader {
    cursor: pointer
}

shared-collapsible-box>.collapsibleBoxHeader>div {
    padding: 16px
}

shared-collapsible-box>.collapsibleBoxHeader>div:first-child {
    max-width: 35px;
    width: 35px;
    padding-right: 0
}

shared-collapsible-box>.collapsibleBoxHeader>div:last-child {
    padding-left: 0;
    margin-right: 35px
}

shared-collapsible-box>.collapsibleBoxContent {
    display: block;
    max-height: 99999px;
    overflow: hidden
}

shared-collapsible-box>.collapsibleBoxContent>section>div:first-child {
    padding-left: 35px;
    margin-left: 16px
}

shared-collapsible-box>.collapsibleBoxContent>section>div:last-child {
    margin-right: 16px;
    padding-right: 35px
}

shared-collapsible-box>.collapsibleBoxContent>footer {
    flex: 1 0 auto;
    min-height: 16px
}

shared-collapsible-box>.collapsibleBoxContent>footer>div {
    padding: 0 16px 16px 16px
}

shared-collapsible-box>.collapsibleBoxContent>footer>div:first-child {
    padding-left: 51px;
    padding-right: 0
}

shared-collapsible-box>.collapsibleBoxContent>footer>div:last-child {
    padding-left: 0;
    padding-right: 51px
}

#delivery-address .mat-form-field {
    display: block
}

#delivery-address .mat-form-field-infix {
    width: 100%
}

#delivery-address .mat-form-field-subscript-wrapper {
    top: 70%
}

shared-infocard-multiplier .infocard .maxHeight {
    padding-bottom: 50px
}

shared-infocard-multiplier .infocard .multiplierRow {
    margin-top: 10px;
    padding-bottom: 15px
}

shared-infocard-multiplier .infocard .multiplierRow p {
    line-height: 1.6
}

shared-infocard-multiplier .infocard .multiplierRow .active {
    color: #2b65c3
}

shared-infocard-multiplier .infocard .multiplierRow .unused {
    color: #739ee2
}

shared-infocard-multiplier .infocard .multiplierRow .unused.archive {
    color: #878787!important
}

shared-infocard-multiplier .infocard .detailsRow {
    padding-right: 16px;
    margin-left: 114px
}

shared-infocard-multiplier .infocard .detailsRow>button {
    width: 100%;
    height: 48px;
    line-height: 48px;
    border-top: 1px solid #afafaf
}

shared-mat-calendar-header {
    display: flex;
    padding: 12px
}

shared-mat-calendar-header>button ts-icon svg {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

shared-mat-calendar-header>button ts-icon[name=arrowRight] svg {
    margin-left: 1px
}

shared-mat-calendar-header>button ts-icon[name=arrowLeft] svg {
    margin-left: -1px
}

shared-mat-calendar-header>.current {
    flex: 1;
    text-align: center;
    font-weight: 700;
    padding-top: .3em;
    margin: .5em
}

shared-multiplier-stripes .activeTicket,
shared-multiplier-stripes .unusedTicket,
shared-multiplier-stripes .usedTicket {
    font-size: 14px;
    display: flex;
    width: 200px;
    text-align: left;
    padding-left: 15px;
    height: 50px;
    border-top: 1px solid #7d7d7d;
    border-left: 1px solid #7d7d7d;
    border-right: 1px solid #7d7d7d
}

shared-multiplier-stripes .border {
    border-bottom: 1px solid #7d7d7d
}

shared-multiplier-stripes .archive-tickets .unusedTicket,
shared-multiplier-stripes .archive-tickets .usedTicket {
    background: #ccc
}

shared-multiplier-stripes .active,
shared-multiplier-stripes .unused,
shared-multiplier-stripes .used {
    display: flex;
    flex-flow: row
}

shared-multiplier-stripes .active .activeDescription,
shared-multiplier-stripes .active .unusedDescription,
shared-multiplier-stripes .active .usedDescription,
shared-multiplier-stripes .unused .activeDescription,
shared-multiplier-stripes .unused .unusedDescription,
shared-multiplier-stripes .unused .usedDescription,
shared-multiplier-stripes .used .activeDescription,
shared-multiplier-stripes .used .unusedDescription,
shared-multiplier-stripes .used .usedDescription {
    margin-right: 15px;
    margin-top: 2px;
    width: 75px;
    text-align: right;
    font-size: 14px
}

shared-multiplier-stripes .active .usedDescription,
shared-multiplier-stripes .unused .usedDescription,
shared-multiplier-stripes .used .usedDescription {
    color: #afafaf
}

shared-multiplier-stripes .active .activeDescription,
shared-multiplier-stripes .unused .activeDescription,
shared-multiplier-stripes .used .activeDescription {
    color: #2b65c3
}

shared-multiplier-stripes .active .unusedDescription,
shared-multiplier-stripes .unused .unusedDescription,
shared-multiplier-stripes .used .unusedDescription {
    color: #739ee2
}

shared-multiplier-stripes .usedTicket {
    background-color: #afafaf
}

shared-multiplier-stripes .usedTicket .firstLine {
    color: #6a6a6a;
    font-weight: 700;
    font-size: 12px
}

shared-multiplier-stripes .usedTicket .secondLine {
    color: #6a6a6a;
    font-size: 14px
}

shared-multiplier-stripes .usedTicket .secondLine .archive {
    color: #ab0020;
    display: block;
    font-size: 12px;
    line-height: 1.1
}

shared-multiplier-stripes .activeTicket {
    background-color: #2b65c3
}

shared-multiplier-stripes .activeTicket .firstLine {
    font-weight: 700;
    font-size: 12px
}

shared-multiplier-stripes .unusedTicket {
    background-color: #739ee2;
    padding-top: 12px!important;
    display: block
}

shared-multiplier-stripes .activeTicket .firstLine,
shared-multiplier-stripes .unusedTicket .firstLine {
    color: #fff
}

shared-multiplier-stripes .activeTicket .secondLine,
shared-multiplier-stripes .unusedTicket .secondLine {
    color: #fff
}

shared-multiplier-stripes .activeTicket .secondLine.archive,
shared-multiplier-stripes .unusedTicket .secondLine.archive {
    color: #ab0020;
    display: block;
    font-size: 12px;
    line-height: 1.1
}

conversion-button {
    flex: 0 0 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    width: 0;
    background-color: #ab0020;
    visibility: hidden;
    display: flex
}

conversion-button.hide {
    display: none!important
}

conversion-button .conversionButtonWrapper {
    display: flex;
    opacity: 0;
    flex: 0 0 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    width: 0;
    visibility: hidden;
    background-color: #ab0020
}

body[state="root.ticket.offer.journey"] conversion-button .conversionButtonWrapper,
body[state="root.ticket.baggageOffer"] conversion-button .conversionButtonWrapper,
body[state="root.ticket.offer"] conversion-button .conversionButtonWrapper {
    visibility: visible;
    flex: 0 0 145px
}

conversion-button .conversionButton {
    position: relative;
    text-align: center;
    color: #fff;
    width: 143px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center
}

conversion-button .conversionButton.disabled {
    background-color: #7d7d7d
}

conversion-button:active,
conversion-button:focus {
    background-color: #ccc
}

conversion-button .conversionButton {
    position: relative;
    text-align: center;
    color: #fff;
    width: 143px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center
}

conversion-button .conversionButton.disabled {
    background-color: #7d7d7d
}

conversion-button .conversionButton a,
conversion-button .conversionButton p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1em;
    margin: 0;
    padding: 0
}

conversion-button .conversionButton a {
    margin-top: 30px;
    display: inline-block;
    line-height: 1.3em
}

conversion-button .conversionButton p a {
    margin-top: 0
}

conversion-button .conversionButton .price {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    margin: 0 0 10px 0
}

conversion-button .conversionButton .show-ticket .icon {
    margin: 12px auto 5px
}

conversion-button .conversionButton .show-ticket a {
    margin-top: 0
}

conversion-button .conversionButton.deactivateConversionButton,
conversion-button .conversionButton.notSelected {
    background-color: #6a6a6a
}

body[state="root.ticket.offer.journey"] conversion-button,
body[state="root.ticket.baggageOffer"] conversion-button,
body[state="root.ticket.offer"] conversion-button {
    visibility: visible;
    flex: 0 0 145px;
    width: 145px;
    max-width: 145px
}

@media (max-width:480px) {
    body[state="root.ticket.offer.journey"] conversion-button,
    body[state="root.ticket.baggageOffer"] conversion-button,
    body[state="root.ticket.offer"] conversion-button {
        flex: 94px 0 0
    }
}

body[state="root.ticket.offer.journey"] conversion-button .conversionButton,
body[state="root.ticket.baggageOffer"] conversion-button .conversionButton,
body[state="root.ticket.offer"] conversion-button .conversionButton {
    flex: 0 1 145px
}

body[state="root.ticket.offer.journey"] conversion-button .perforation,
body[state="root.ticket.baggageOffer"] conversion-button .perforation,
body[state="root.ticket.offer"] conversion-button .perforation {
    flex: 0 0 2px;
    width: 2px;
    max-width: 2px;
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforation.svg) #c2c2c2
}

body[state="root.ticket.offer.journey"] conversion-button .perforation.disabled,
body[state="root.ticket.baggageOffer"] conversion-button .perforation.disabled,
body[state="root.ticket.offer"] conversion-button .perforation.disabled {
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforationDisabled.svg) #c2c2c2
}

body[state="root.ticket.offer.journey"] conversion-button .conversionButtonWrapper:focus,
body[state="root.ticket.offer.journey"] conversion-button .conversionButtonWrapper:hover,
body[state="root.ticket.baggageOffer"] conversion-button .conversionButtonWrapper:focus,
body[state="root.ticket.baggageOffer"] conversion-button .conversionButtonWrapper:hover,
body[state="root.ticket.offer"] conversion-button .conversionButtonWrapper:focus,
body[state="root.ticket.offer"] conversion-button .conversionButtonWrapper:hover {
    background-color: #b41a37
}

body[state="root.ticket.offer.journey"] conversion-button .conversionButtonWrapper:focus .perforation,
body[state="root.ticket.offer.journey"] conversion-button .conversionButtonWrapper:hover .perforation,
body[state="root.ticket.baggageOffer"] conversion-button .conversionButtonWrapper:focus .perforation,
body[state="root.ticket.baggageOffer"] conversion-button .conversionButtonWrapper:hover .perforation,
body[state="root.ticket.offer"] conversion-button .conversionButtonWrapper:focus .perforation,
body[state="root.ticket.offer"] conversion-button .conversionButtonWrapper:hover .perforation {
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforationHover.svg) #c2c2c2
}

body[state="root.ticket.offer.journey"] conversion-button .conversionButtonWrapper:focus .perforation.disabled,
body[state="root.ticket.offer.journey"] conversion-button .conversionButtonWrapper:hover .perforation.disabled,
body[state="root.ticket.baggageOffer"] conversion-button .conversionButtonWrapper:focus .perforation.disabled,
body[state="root.ticket.baggageOffer"] conversion-button .conversionButtonWrapper:hover .perforation.disabled,
body[state="root.ticket.offer"] conversion-button .conversionButtonWrapper:focus .perforation.disabled,
body[state="root.ticket.offer"] conversion-button .conversionButtonWrapper:hover .perforation.disabled {
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforationDisabled.svg) #c2c2c2
}

body[state="root.ticket.offer.journey"] conversion-button:active,
body[state="root.ticket.baggageOffer"] conversion-button:active,
body[state="root.ticket.offer"] conversion-button:active {
    background-color: #9a001d
}

body[state="root.ticket.offer.journey"] conversion-button:active .perforation,
body[state="root.ticket.baggageOffer"] conversion-button:active .perforation,
body[state="root.ticket.offer"] conversion-button:active .perforation {
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforationActive.svg) #c2c2c2
}

body[state="root.ticket.offer.journey"] conversion-button .perforation {
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforation.svg) #fff
}

body[state="root.ticket.offer.journey"] conversion-button .perforation.disabled {
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforationDisabled.svg) #fff
}

body[state="root.ticket.offer.journey"] conversion-button:focus .perforation,
body[state="root.ticket.offer.journey"] conversion-button:hover .perforation {
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforationHover.svg) #fff
}

body[state="root.ticket.offer.journey"] conversion-button:active .perforation {
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforationActive.svg) #fff
}

input-tan-modal .content-container {
    height: 285px!important;
    padding: 35px 35px 20px 35px
}

input-tan-modal mat-dialog-actions {
    justify-content: space-between!important
}

input-tan-modal .heading-with-icon {
    font-size: 20px;
    margin-bottom: 26px;
    width: 100%;
    display: flex
}

input-tan-modal .heading-with-icon .heading {
    font-weight: 700;
    padding-top: 2px
}

input-tan-modal .description {
    color: #868686;
    line-height: 24px
}

input-tan-modal .content {
    padding-left: 10px
}

input-tan-modal .content .input-row .input-field-tan {
    width: 100%;
    margin-right: 5px
}

input-tan-modal .buttons div {
    cursor: pointer
}

input-tan-modal .button-wrapper button {
    font-weight: 700
}

input-tan-modal .date-input-container {
    display: flex
}

input-tan-modal .date-input-container .dateInput {
    margin-right: 10px
}

input-tan-modal .date-input-label {
    font-size: 12px;
    color: #868686
}

offer-conversion-button {
    display: flex
}

offer-conversion-button .conversionButtonWrapper {
    display: flex;
    flex: 0 0 145px;
    width: 145px;
    max-width: 145px;
    background-color: #ab0020;
    visibility: visible
}

offer-conversion-button .conversionButtonWrapper:active,
offer-conversion-button .conversionButtonWrapper:focus {
    background-color: #ccc
}

offer-conversion-button:focus,
offer-conversion-button:hover {
    background-color: #b41a37
}

offer-conversion-button:focus .perforation,
offer-conversion-button:hover .perforation {
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforationHover.svg) #c2c2c2
}

offer-conversion-button:focus .perforation.disabled,
offer-conversion-button:hover .perforation.disabled {
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforationDisabled.svg) #c2c2c2
}

offer-conversion-button:active {
    background-color: #9a001d
}

offer-conversion-button:active .perforation {
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforationActive.svg) #c2c2c2
}

offer-conversion-button .conversionButton {
    position: relative;
    text-align: center;
    color: #fff;
    width: 143px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center
}

offer-conversion-button .conversionButton.deactivateConversionButton,
offer-conversion-button .conversionButton.notSelected {
    background-color: #6a6a6a
}

offer-conversion-button .conversionButton.disabled {
    background-color: #7d7d7d
}

offer-conversion-button .conversionButton.disabled p {
    margin-top: 30px
}

offer-conversion-button .conversionButton a,
offer-conversion-button .conversionButton p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1em;
    margin: 0;
    padding: 0
}

offer-conversion-button .conversionButton a {
    margin-top: 30px;
    display: inline-block;
    line-height: 1.3em
}

offer-conversion-button .conversionButton p a {
    margin-top: 0
}

offer-conversion-button .conversionButton .price {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    margin: 0 0 10px 0
}

offer-conversion-button .conversionButton .show-ticket .icon {
    width: 40px;
    height: 31px;
    margin: 12px auto 5px
}

offer-conversion-button .conversionButton .show-ticket svg {
    fill: #fff
}

offer-conversion-button .conversionButton .show-ticket a {
    margin-top: 0
}

offer-conversion-button .perforation {
    flex: 0 0 2px;
    width: 2px;
    max-width: 2px;
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforation.svg) #c2c2c2
}

offer-conversion-button .perforation.disabled {
    background: url(https://tickets-deva.oebb.at/static/images/background/offerHeaderPerforationDisabled.svg) #c2c2c2
}

shared-mapped-passengers {
    display: block;
    padding: 5px 0 5px 0
}

shared-mapped-passengers>.passengerBlock {
    display: flex;
    font-size: 12px;
    line-height: 1.1em;
    padding-left: 16px
}

shared-mapped-passengers>.passengerBlock>.left {
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    text-align: right
}

shared-mapped-passengers>.passengerBlock>.right {
    flex: 1 1;
    padding-left: 5px
}

shared-mapped-passengers>.passengerBlock .cards {
    color: #6a6a6a
}

passengers-summary .subheading {
    align-self: flex-start;
    position: absolute;
    left: 11px;
    top: 7px;
    font-size: 12px;
    text-transform: uppercase;
    color: #868686;
    display: inline-block;
    white-space: nowrap
}

passengers-summary .passenger-list {
    white-space: nowrap
}

shared-pie-chart * {
    box-sizing: border-box
}

shared-pie-chart figure {
    margin: 0 10px 16px 10px
}

shared-pie-chart .chart-text {
    fill: #739ee2;
    -webkit-transform: translateY(.25em);
    transform: translateY(.25em)
}

shared-pie-chart .chart-number {
    line-height: 1;
    text-anchor: middle;
    color: #739ee2
}

shared-pie-chart .chart-label {
    font-size: .2em;
    text-transform: uppercase;
    text-anchor: middle;
    -webkit-transform: translateY(.7em);
    transform: translateY(.7em)
}

shared-pie-chart figure {
    display: flex;
    justify-content: space-around;
    flex-direction: column
}

@media (min-width:768px) {
    shared-pie-chart figure {
        flex-direction: column
    }
}

shared-pie-chart .figure-content,
shared-pie-chart .figure-key {
    flex: 1;
    align-self: center
}

shared-pie-chart .figure-content svg {
    height: auto
}

shared-pie-chart .figure-key {
    min-width: calc(8 / 12)
}

shared-pie-chart .figure-key .valid-label {
    font-size: 14px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0;
    color: #2b65c3
}

shared-pie-chart .figure-key .unused-white {
    color: #fff
}

shared-pie-chart .figure-key .unused-blue {
    color: #2b65c3
}

shared-pie-chart .figure-key [class*=shape-] {
    margin-right: 6px
}

shared-installment-plan .installmentStripe {
    display: flex
}

shared-installment-plan .installmentStripe:last-child {
    border-bottom: none
}

shared-installment-plan .installmentStripe p {
    margin: 0;
    padding: 0
}

shared-installment-plan .installmentStripe>.left {
    flex: 1 1;
    background-color: #f0f0f0;
    background-clip: padding-box
}

shared-installment-plan .installmentStripe>.left>h2,
shared-installment-plan .installmentStripe>.left>p {
    padding-right: 16px
}

shared-installment-plan .installmentStripe>.right {
    background-color: #fff;
    flex: 0 0 110px;
    width: 110px;
    max-width: 110px;
    text-align: right;
    white-space: nowrap
}

shared-installment-plan .installmentStripe.installmentEntries.installmentItem:first-child>.left,
shared-installment-plan .installmentStripe.installmentEntries.installmentItem:first-child>.right {
    padding-top: 14px
}

shared-installment-plan .installmentStripe.installmentEntries.installmentDeposit>.left,
shared-installment-plan .installmentStripe.installmentEntries.installmentDeposit>.right {
    padding-top: 14px;
    padding-bottom: 14px
}

shared-installment-plan .installmentEntries .price {
    font-size: 12px;
    color: #6a6a6a
}

shared-installment-plan .installmentEntries h1,
shared-installment-plan .installmentEntries h2,
shared-installment-plan .installmentEntries h3,
shared-installment-plan .installmentEntries p,
shared-installment-plan .installmentEntries span {
    font-size: 12px;
    font-weight: 400
}

shared-installment-plan .installmentEntries h1.main,
shared-installment-plan .installmentEntries h2.main,
shared-installment-plan .installmentEntries h3.main,
shared-installment-plan .installmentEntries p.main,
shared-installment-plan .installmentEntries span.main {
    color: #222;
    font-weight: 700
}

shared-installment-plan .installmentEntries p {
    color: #6a6a6a
}

shared-installment-plan .installmentEntries.installmentStripe {
    margin-left: 16px
}

shared-installment-plan .installmentEntries.installmentStripe:first-child {
    border-top: 0
}

shared-installment-plan .installmentEntries.installmentStripe>.left {
    padding: 4px 20px 4px 16px
}

shared-installment-plan .installmentEntries.installmentStripe>.right {
    padding: 4px 20px 4px 6px
}

shared-installment-plan .installmentBlock {
    padding-left: 16px
}

shared-tariffs .tariffs {
    background-color: #f0f0f0;
    overflow: hidden
}

shared-tariffs .tariffs .tariffStripe {
    border-top: 0!important
}

shared-tariffs .tariffs .header {
    border-bottom: 1px solid #d7d7d7!important
}

shared-tariffs .tariffs .header .description {
    padding-top: 10px
}

shared-tariffs .tariffs .collapsible {
    position: relative;
    z-index: 20;
    max-height: 100000px
}

shared-tariffs .tariffs .collapsible.ng-hide-add,
shared-tariffs .tariffs .collapsible.ng-hide-remove {
    transition: max-height linear .5s
}

shared-tariffs .tariffs .collapsible.ng-hide {
    max-height: 0;
    overflow: hidden
}

shared-tariffs .tariffs .tariffStripe {
    display: flex;
    border-bottom: 1px solid #d7d7d7
}

shared-tariffs .tariffs .tariffStripe:last-child {
    border-bottom: none
}

shared-tariffs .tariffs .tariffStripe:first-child {
    border-top: 1px solid #d7d7d7
}

shared-tariffs .tariffs .tariffStripe h1,
shared-tariffs .tariffs .tariffStripe h2,
shared-tariffs .tariffs .tariffStripe h3,
shared-tariffs .tariffs .tariffStripe h4,
shared-tariffs .tariffs .tariffStripe p {
    margin: 0;
    padding: 0
}

shared-tariffs .tariffs .tariffStripe>.left {
    flex: 1 1;
    background-color: #f0f0f0;
    background-clip: padding-box
}

shared-tariffs .tariffs .tariffStripe>.left>h2,
shared-tariffs .tariffs .tariffStripe>.left>p {
    padding-right: 16px
}

shared-tariffs .tariffs .tariffStripe>.left .ticketInfo p {
    margin-top: 5px
}

shared-tariffs .tariffs .tariffStripe>.left .insuranceLink {
    font-size: 12px;
    text-decoration: underline
}

shared-tariffs .tariffs .tariffStripe>.right {
    background-color: #fff;
    flex: 0 0 110px;
    width: 110px;
    max-width: 110px;
    text-align: right;
    white-space: nowrap
}

shared-tariffs .tariffs .tariffStripe.trainScheduleWrapper .print:not(.collapsed) .arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

shared-tariffs .tariffs .footer h1,
shared-tariffs .tariffs .footer h2,
shared-tariffs .tariffs .footer h3,
shared-tariffs .tariffs .footer p,
shared-tariffs .tariffs .header h1,
shared-tariffs .tariffs .header h2,
shared-tariffs .tariffs .header h3,
shared-tariffs .tariffs .header p {
    font-weight: 400;
    line-height: 1.1em
}

shared-tariffs .tariffs .footer .price,
shared-tariffs .tariffs .header .price {
    font-size: 16px;
    color: #222
}

shared-tariffs .tariffs .footer.tariffStripe>.left,
shared-tariffs .tariffs .header.tariffStripe>.left {
    padding: 16px 20px 16px 16px
}

shared-tariffs .tariffs .footer.tariffStripe>.right,
shared-tariffs .tariffs .header.tariffStripe>.right {
    padding: 16px 20px 16px 16px
}

shared-tariffs .tariffs .header {
    position: relative;
    z-index: 30
}

shared-tariffs .tariffs .header p {
    font-size: 14px
}

shared-tariffs .tariffs .header p.returnAmount {
    font-size: 12px
}

shared-tariffs .tariffs .header.lastHeader {
    border-bottom: 0
}

shared-tariffs .tariffs .header .arrow {
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

shared-tariffs .tariffs .header .arrow.expand {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

shared-tariffs .tariffs .header ts-icon[name=connectionRelation] {
    margin: 0 4px
}

shared-tariffs .tariffs .footer {
    border-top: 0 solid #d7d7d7
}

shared-tariffs .tariffs .footer:first-child,
shared-tariffs .tariffs .footer:only-child {
    border-top: 1px solid #d7d7d7
}

shared-tariffs .tariffs .footer p {
    font-size: 16px;
    white-space: nowrap
}

shared-tariffs .tariffs .footer p.payed {
    font-size: 12px;
    color: #6a6a6a
}

shared-tariffs .tariffs .footer p.cancel {
    font-size: 14px;
    color: #222
}

shared-tariffs .tariffs .footer p.return {
    font-size: 16px;
    color: #51a351
}

shared-tariffs .tariffs .footer.footNote .left h3 {
    display: inline-block
}

shared-tariffs .tariffs .tariffTicket .price {
    font-size: 12px;
    color: #6a6a6a
}

shared-tariffs .tariffs .tariffTicket .taxableBaseValue,
shared-tariffs .tariffs .tariffTicket .vat {
    font-size: 12px;
    color: #6a6a6a
}

shared-tariffs .tariffs .tariffTicket .dark {
    color: #222
}

shared-tariffs .tariffs .tariffTicket .dark ts-icon[name=connectionRelation] {
    margin: 0 4px
}

shared-tariffs .tariffs .tariffTicket h1,
shared-tariffs .tariffs .tariffTicket h2,
shared-tariffs .tariffs .tariffTicket h3,
shared-tariffs .tariffs .tariffTicket p,
shared-tariffs .tariffs .tariffTicket span {
    font-size: 12px;
    font-weight: 400
}

shared-tariffs .tariffs .tariffTicket h1.main,
shared-tariffs .tariffs .tariffTicket h2.main,
shared-tariffs .tariffs .tariffTicket h3.main,
shared-tariffs .tariffs .tariffTicket p.main,
shared-tariffs .tariffs .tariffTicket span.main {
    color: #222;
    font-weight: 700
}

shared-tariffs .tariffs .tariffTicket p {
    color: #6a6a6a
}

shared-tariffs .tariffs .tariffTicket.tariffStripe {
    margin-left: 16px
}

shared-tariffs .tariffs .tariffTicket.tariffStripe:first-child {
    border-top: 0
}

shared-tariffs .tariffs .tariffTicket.tariffStripe>.left {
    padding: 12px 20px 12px 16px
}

shared-tariffs .tariffs .tariffTicket.tariffStripe>.right {
    padding: 12px 20px 12px 6px
}

shared-tariffs .tariffs .oebbLogoIe11 {
    display: none
}

shared-tariffs .tariffs .insured {
    line-height: 1.8em;
    color: #3E73A5
}

shared-tariffs .tariffs .ticket-node a {
    text-decoration: underline
}

@media print {
    body[state="root.ticket.tariffs"] #tariffs {
        padding: 0;
        margin: 0
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs {
        background-color: #fff;
        color: #222
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket p {
        color: #222
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe {
        margin-left: 0
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe collapsible-box.collapsed {
        display: none
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe .collapsibleBoxHeader>h2,
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe .collapsibleBoxHeader>p {
        display: inline-block;
        font-size: 20px
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe .collapsibleBoxHeader>h2 {
        margin: 18px 0;
        font-weight: 700;
        padding-left: 0
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe .collapsibleBoxHeader>p {
        font-weight: 100
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe .collapsibleBoxHeader .oebbLogo {
        padding: 0
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe .collapsibleBoxContent {
        margin-top: 28px;
        padding-left: 30px
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe .collapsibleBoxContent shared-train-schedule-section p {
        margin: 3px 0
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe .collapsibleBoxContent shared-train-schedule-section .sectionRow .col1 {
        font-size: 12px
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe .collapsibleBoxContent shared-train-schedule-section .sectionRow .col3 h1 {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 10px
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe .collapsibleBoxContent .summary {
        font-size: 12px;
        margin-top: 20px
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe .collapsibleBoxContent .printDisclaimer {
        font-size: 12px;
        margin-top: 40px
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe.trainScheduleWrapper .print.collapsed {
        display: block
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe.trainScheduleWrapper .print.collapsed>.collapsibleBoxContent {
        max-height: 99999px!important
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe:not(.trainScheduleWrapper) {
        display: none
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe .printDisclaimer {
        margin-top: 20px;
        font-size: 12px
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe>.left {
        background-color: #fff;
        padding: 0 0 12px 13px
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs .tariffTicket.tariffStripe>.right {
        display: none
    }
    body[state="root.ticket.tariffs"] #tariffs shared-tariffs .tariffs footer {
        display: none
    }
    body[state="root.ticket.tariffs"].isIe .oebbLogo {
        display: none
    }
    body[state="root.ticket.tariffs"].isIe .oebbLogoIe11 {
        display: block
    }
}

.time-datetime-fields-section {
    display: flex;
    flex-wrap: wrap
}

.time-datetime-fields-section .datetime-field {
    width: 100px
}

.time-datetime-fields-section .hour-field {
    width: 30px;
    text-align: right
}

.time-datetime-fields-section .hour-minute-separator {
    width: 4px
}

.time-datetime-fields-section .minute-field {
    width: 30px
}

connection-filter button {
    flex: 1;
    display: flex;
    align-items: center
}

connection-filter button span {
    flex: 1
}

connection-filter button ts-icon {
    min-height: 35px
}

@media (max-width:869px) {
    connection-filter button {
        flex-direction: column
    }
    connection-filter button .forLargeScreen {
        display: none
    }
}

@media (min-width: 870px) {
    connection-filter button .forSmallScreen {
        display: none
    }
}

connection-filter-icon {
    position: relative;
    flex: 0 0 35px
}

connection-filter-icon .filterIconActiveFiltersCount {
    position: absolute;
    bottom: 0;
    left: 13px;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    font-size: 12px;
    padding: 2px;
    color: #fff;
    background-color: #e2002a;
    border-radius: 50%;
    text-align: center
}

@media (min-width: 870px) {
    connection-filter-icon .filterIconActiveFiltersCount {
        bottom: 0;
        right: 5px
    }
}

date-chooser {
    display: flex;
    padding: 10px 0
}

date-chooser button {
    flex: 0 0 45px;
    text-align: center
}

date-chooser button.calendarButton {
    flex: 1;
    text-align: center
}

date-chooser button.calendarButton label {
    display: block
}

date-chooser calendar-sheet {
    margin: 0 4px
}

@media (max-width:869px) {
    date-chooser {
        display: none
    }
}

best-price-finder-loading-screen>section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    padding: 0;
    max-height: none!important;
    text-align: center
}

best-price-finder-loading-screen>section mat-progress-bar {
    height: 8px;
    flex: 0 0 8px
}

best-price-finder-loading-screen>section .imageWrapper {
    flex: 0 0 200px
}

best-price-finder-loading-screen>section .imageWrapper .image {
    display: block;
    width: 148px;
    height: 148px
}

best-price-finder-loading-screen>section .description {
    flex: 0 0 80px;
    font-size: 20px;
    line-height: 1.2em
}

best-price-finder-loading-screen>section .bestPrice {
    flex: 1;
    font-size: 30px;
    font-weight: 700;
    color: #51a351;
    line-height: 1.2em;
    min-height: 25px
}

best-price-finder-loading-screen>section .button {
    flex: 1 1 70px
}

best-price-finder-loading-screen>section .verticalCenter {
    display: flex;
    justify-content: center;
    align-items: center
}

best-price-finder {
    background-color: #f0f0f0;
    display: block;
    margin-bottom: 0;
    display: flex;
    flex-direction: column
}

@media (min-width: 870px) {
    best-price-finder {
        margin-bottom: 20px
    }
}

best-price-finder>.sortSelection {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 15px;
    min-height: 80px
}

best-price-finder>.sortSelection best-price-finder-sort-selection-form {
    flex: 1
}

@media (max-width:869px) {
    best-price-finder>.sortSelection best-price-finder-sort-selection-form {
        flex: 1 1 40%
    }
    best-price-finder>.sortSelection best-price-finder-sort-selection-form form mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix {
        width: 160px
    }
}

best-price-finder>.sortSelection label {
    flex: 0 0 110px
}

@media (max-width:869px) {
    best-price-finder>.sortSelection label {
        display: none
    }
}

best-price-finder>.sortSelection .rtfSaveButton,
best-price-finder>.sortSelection>connection-filter {
    flex: 1;
    display: flex;
    align-items: center
}

best-price-finder>.sortSelection .rtfSaveButton .filterIcon,
best-price-finder>.sortSelection>connection-filter .filterIcon {
    flex: 0 0 35px
}

best-price-finder>.sortSelection .rtfSaveButton .forSmallScreen,
best-price-finder>.sortSelection>connection-filter .forSmallScreen {
    font-size: 12px
}

best-price-finder>.sortSelection .rtfSaveButton span,
best-price-finder>.sortSelection>connection-filter span {
    flex: 1
}

best-price-finder>.sortSelection .rtfSaveButton ts-icon,
best-price-finder>.sortSelection>connection-filter ts-icon {
    min-height: 35px
}

@media (max-width:869px) {
    best-price-finder>.sortSelection .rtfSaveButton,
    best-price-finder>.sortSelection>connection-filter {
        flex-direction: column
    }
    best-price-finder>.sortSelection .rtfSaveButton .forLargeScreen,
    best-price-finder>.sortSelection>connection-filter .forLargeScreen {
        display: none
    }
}

@media (min-width: 870px) {
    best-price-finder>.sortSelection .rtfSaveButton .forSmallScreen,
    best-price-finder>.sortSelection>connection-filter .forSmallScreen {
        display: none
    }
}

best-price-finder>.sortSelection>.rtfSaveButton {
    font-size: 12px
}

@media (min-width: 870px) {
    best-price-finder>.sortSelection>.rtfSaveButton {
        display: none
    }
}

@media (min-width: 870px) {
    best-price-finder>.dateSelection {
        border-bottom: 1px solid #d7d7d7
    }
}

.connection .sections {
    display: flex;
    transition: width .5s ease;
    margin-bottom: 10px
}

.connection .sections .section {
    min-width: 30px;
    margin-right: 5px
}

.connection .sections .section:last-child {
    margin-right: 0
}

.connection .sections .section .journey {
    text-align: center;
    overflow: hidden;
    height: 23px
}

.connection .sections .section .disabled {
    border-bottom-color: #878787!important;
    color: #868686!important;
    background-color: transparent!important
}

.connection .connection-sections-details .oneRowEllipsis,
.connection .connection-sections-details span {
    font-size: 12px
}

.connection .connection-sections-details p {
    margin: 0;
    font-size: 12px;
    color: #000
}

.connection .connection-sections-details p:first-of-type {
    margin-top: 5px
}

.connection .connection-sections-details p span {
    font-size: 12px
}

.connection .sections-details-alignment {
    width: 150px
}

.filter-dialog {
    max-width: none!important
}

.filter-dialog mat-dialog-container {
    padding: 0
}

@media (max-width:869px) {
    .filter-dialog mat-dialog-container {
        height: 100vh
    }
}

.filter-dialog .mat-dialog-content {
    padding: 0;
    margin: 0;
    max-height: none
}

.filterIconWrapper {
    position: relative
}

.filterIconWrapper svg {
    height: 24px
}

.filterIconWrapper>.filterIconActiveFiltersCount {
    position: absolute;
    top: 17px;
    left: 10px;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    font-size: 12px;
    padding: 2px;
    color: #fff;
    background-color: #e2002a;
    border-radius: 50%;
    text-align: center
}

.filterIconWrapper:focus,
.filterIconWrapper:hover {
    outline: 0
}

.filterIconWrapper:focus svg,
.filterIconWrapper:hover svg {
    fill: #ccc
}

.infoBubble[name=routesFilter] {
    box-sizing: border-box
}

.infoBubble[name=routesFilter] .infoBubbleArrow {
    background-color: #e6e6e6
}

.infoBubble[name=routesFilter] .closeBtnWrapper svg {
    z-index: 2
}

.infoBubble[name=routesFilter] .closeBtnWrapper:focus svg[name=close],
.infoBubble[name=routesFilter] .closeBtnWrapper:hover svg[name=close] {
    background-color: #afafaf
}

.filterBubble.contentWrapper {
    background-color: #e6e6e6;
    width: 100%;
    padding: 12px 0 0 0
}

@media (max-width:869px) {
    body.is-safari .filter-dialog mat-dialog-container {
        height: calc(100vh - 150px);
        margin-top: 150px
    }
}

.filterBubbleOuter {
    position: relative;
    top: -5px
}

.filterBubble {
    position: relative
}

.filterBubble .filterCloseButton {
    position: absolute;
    right: 10px;
    top: 20px;
    font-size: 16px;
    font-weight: 400;
    color: #51a351
}

.filterBubble .filterCloseButton.focused,
.filterBubble .filterCloseButton:hover {
    color: #6fb86f
}

.filterBubble h2 {
    font-size: 24px;
    font-weight: 400;
    margin: 52px 32px 28px 32px
}

@media (min-width: 870px) {
    .filterBubble h2 {
        margin-top: 12px
    }
}

.filterBubble .overview {
    border-bottom: solid 1px #d7d7d7;
    padding: 0 32px 30px 32px
}

.filterBubble .overviewItem {
    float: left;
    width: 100%
}

@media (min-width: 870px) {
    .filterBubble .overviewItem {
        width: 50%
    }
}

.filterBubble .overviewItem>div {
    display: flex
}

.filterBubble .overviewItem>div.top {
    min-height: 3em
}

.filterBubble .overviewItem>div.action {
    margin-top: 26px
}

.filterBubble .overviewItem>div .left {
    width: 65px;
    flex: 0 0 65px
}

.filterBubble .overviewItem>div .right {
    flex: 1
}

.filterBubble .overviewItem-1 {
    padding-right: 32px
}

.filterBubble .overviewItem-2 {
    padding-left: 32px
}

@media (max-width:869px) {
    .filterBubble .overview {
        margin-left: -5px
    }
    .filterBubble .overviewItem-1 .left {
        width: 0!important;
        flex: 0!important
    }
    .filterBubble .overviewItem-1 .filterResetAll {
        margin-top: 0!important;
        margin-bottom: 20px!important
    }
    .filterBubble .overviewItem-1 .filterResetAll .left {
        width: 30px!important
    }
    .filterBubble .overviewItem-2 {
        padding-left: 0;
        margin-left: -5px
    }
}

.filterBubble .filterIconActiveFiltersCount {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    font-size: 12px;
    padding: 2px;
    color: #fff;
    background-color: #e2002a;
    border-radius: 50%;
    text-align: center;
    display: inline-block
}

.filterBubble .filterResetAll {
    color: #51a351;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase
}

.filterBubble .filterResetAll svg {
    float: right;
    margin-right: 33px;
    fill: #51a351
}

.filterBubble .filterDroppedConnectionsShow {
    color: #51a351;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase
}

.filterBubble .filterDroppedConnectionsShow:focus,
.filterBubble .filterDroppedConnectionsShow:hover,
.filterBubble .filterResetAll:focus,
.filterBubble .filterResetAll:hover {
    color: #6fb86f
}

.filterBubble .filterDroppedConnectionsShow:focus svg,
.filterBubble .filterDroppedConnectionsShow:hover svg,
.filterBubble .filterResetAll:focus svg,
.filterBubble .filterResetAll:hover svg {
    fill: #6fb86f
}

.filterBubble .filterDroppedConnectionsShow:active,
.filterBubble .filterResetAll:active {
    color: #91c991
}

.filterBubble .filterDroppedConnectionsShow:active svg,
.filterBubble .filterResetAll:active svg {
    fill: #91c991
}

.filterBubble .filter-column {
    float: left;
    width: 100%
}

@media (min-width: 870px) {
    .filterBubble .filter-column {
        width: 50%;
        min-width: 400px
    }
}

.filterBubble .filter-column-1 div.label-inner {
    margin: 0 32px 0 28px
}

.filterBubble .filter-column-2 div.label-inner {
    margin: 0 28px 0 32px
}

.filterBubble .header {
    font-size: 1.1em;
    margin-top: 8px
}

.filterBubble .icon-wrapper {
    width: 65px;
    flex: 0 0 65px
}

.filterBubble .icon {
    width: 43px;
    height: 43px;
    border-radius: 25px
}

.filterBubble .icon svg {
    fill: #222!important
}

.filterBubble .icon svg line {
    stroke: #222
}

.filterBubble .icon svg circle {
    stroke: #222
}

.filterBubble .icon svg .base {
    fill: #fff
}

.filterBubble .selected .icon svg {
    fill: #fff!important
}

.filterBubble .selected .icon svg line {
    stroke: #fff
}

.filterBubble .selected .icon svg circle {
    stroke: #fff
}

.filterBubble .selected .icon svg .base {
    fill: #e2002a
}

.filterBubble .selected .header {
    color: #e2002a
}

.filterBubble .filter {
    width: 100%
}

.filterBubble .filter label {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block
}

.filterBubble .filter label.focused {
    background: #afafaf
}

.filterBubble .filter label:hover {
    background: #afafaf
}

.filterBubble .filter div.label-inner {
    border-bottom: solid 1px #d7d7d7;
    padding: 13px 0;
    min-height: 6.5em;
    display: flex
}

.filterBubble .filter label:hover div.label-inner {
    border-bottom-color: #afafaf
}

.filterBubble .filter.last div.label-inner {
    padding-bottom: 30px
}

@media (min-width: 870px) {
    .filterBubble .filter.last div.label-inner {
        border-bottom: none
    }
}

.filterBubble .filter input {
    display: none
}

.filterBubble .filter .content {
    flex: 1
}

.filterBubble .filter .text {
    font-size: .9em
}

.filterBubble .filter .suboptions {
    margin-top: 0
}

.filterBubble .filter .suboptions select {
    border: none;
    border-bottom: solid 1px #878787;
    padding-left: 0;
    padding-right: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent url(https://tickets.oebb.at/static/images/icons/dropDownMenuIcon.svg) no-repeat right 3px center
}

.filterBubble .filter .suboptions select:focus,
.filterBubble .filter .suboptions select:hover {
    background-color: #afafaf
}

.filterBubble .filter .suboptions select::-ms-expand {
    display: none
}

.filterBubble .filter .suboptions select svg {
    fill: red
}

.filterBubble .filter .suboptions .text>p {
    margin-bottom: 0
}

.filterBubble .filter .suboption {
    padding: 0 3px;
    background-color: #fff;
    display: inline-block;
    font-size: .9em;
    border-right: 1px solid #f9f9f9
}

.filterBubble .filter .suboption.selected {
    color: #fff;
    background-color: #e2002a
}

shared-reduction-summary .reduction-summary {
    padding: 10px 0;
    font-size: 12px;
    white-space: normal;
    display: block
}

shared-train-schedule>.summary {
    margin-top: 20px
}

shared-train-schedule shared-train-schedule-section p {
    margin: 3px 0
}

shared-train-schedule shared-train-schedule-section h1 {
    margin-top: 0;
    font-size: 14px
}

shared-train-schedule shared-train-schedule-section .isLast h1 {
    margin-top: 6px
}

shared-train-schedule shared-train-schedule-section:first-child .sectionRow .col1 .departureDate {
    margin-top: 0
}

shared-train-schedule shared-train-schedule-section:last-child .sectionRow .col1 .arrivalDate {
    bottom: 0
}

shared-train-schedule shared-train-schedule-section .sectionRow {
    display: flex;
    min-height: 100px;
    overflow: visible!important
}

shared-train-schedule shared-train-schedule-section .sectionRow.isLast {
    min-height: 0
}

shared-train-schedule shared-train-schedule-section .sectionRow.isLast>div {
    min-height: 0
}

shared-train-schedule shared-train-schedule-section .sectionRow>div {
    min-height: 100px
}

shared-train-schedule shared-train-schedule-section .sectionRow .col1 {
    position: relative;
    overflow: visible!important;
    width: 50px
}

shared-train-schedule shared-train-schedule-section .sectionRow .col1 .departureDate {
    margin-top: 7px
}

shared-train-schedule shared-train-schedule-section .sectionRow .col1 .arrivalDate {
    position: absolute;
    bottom: -5px
}

shared-train-schedule shared-train-schedule-section .sectionRow .col2 {
    width: 50px;
    overflow: hidden;
    position: relative;
    margin-left: 9px;
    overflow: visible!important
}

shared-train-schedule shared-train-schedule-section .sectionRow .col2 .lastConnectionCircle {
    position: absolute;
    top: -7px;
    left: -8px;
    border-left: 4px solid;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    overflow: visible
}

shared-train-schedule shared-train-schedule-section .sectionRow .col2 .lastConnectionCircle svg {
    position: relative;
    right: 8px
}

shared-train-schedule shared-train-schedule-section .sectionRow .col2>ts-icon {
    margin-left: -8px
}

shared-train-schedule shared-train-schedule-section .sectionRow .col2.border {
    border-left: 4px solid
}

shared-train-schedule shared-train-schedule-section .sectionRow .col2:not(.border) {
    border-left: 4px solid transparent
}

shared-train-schedule shared-train-schedule-section .sectionRow .col2 .connectionStripe {
    width: 4px;
    left: 4px;
    top: 11px;
    position: absolute;
    height: 100%;
    display: inline-block
}

shared-train-schedule shared-train-schedule-section .sectionRow .col3 {
    flex: 1
}

@media print {
    html {
        width: auto;
        height: auto
    }
    body.printTrainSchedule #header,
    body.printTrainSchedule #journey,
    body.printTrainSchedule #leftColumn,
    body.printTrainSchedule #off-canvas,
    body.printTrainSchedule .compareCartItemHeader,
    body.printTrainSchedule .filterIconWrapper.share,
    body.printTrainSchedule .headline>h1,
    body.printTrainSchedule .infoBubble,
    body.printTrainSchedule .innerWrapper>header,
    body.printTrainSchedule .mirroredScrollbar,
    body.printTrainSchedule .modalBackground,
    body.printTrainSchedule .tariffs .header.tariffStripe,
    body.printTrainSchedule [iconname=printer],
    body.printTrainSchedule compare-cart-button>button {
        display: none!important
    }
    body.printTrainSchedule .print-logo-wrapper {
        padding-left: 0
    }
    body.printTrainSchedule #content,
    body.printTrainSchedule #content-wrapper,
    body.printTrainSchedule #main-wrapper,
    body.printTrainSchedule #rightColumn,
    body.printTrainSchedule #rightColumn .offers,
    body.printTrainSchedule .headline,
    body.printTrainSchedule .innerWrapper,
    body.printTrainSchedule .innerWrapper>section,
    body.printTrainSchedule compare-cart,
    body.printTrainSchedule compare-cart-button {
        box-shadow: none;
        display: block;
        overflow: visible;
        padding: 0;
        padding-left: 0!important;
        margin: 0;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        position: static
    }
    body.printTrainSchedule .headline {
        display: block!important
    }
    body.printTrainSchedule #content {
        margin: 0!important
    }
    body.printTrainSchedule #content {
        margin: 0
    }
    body.printTrainSchedule #tariffs {
        display: block
    }
}

validity-period-category {
    text-transform: uppercase
}

two-column-info-bubble {
    background-color: #fff;
    border: 1px solid #d7d7d7;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

two-column-info-bubble.top {
    margin-bottom: 15px
}

two-column-info-bubble.bottom {
    margin-top: 15px
}

two-column-info-bubble.warning .left-icon-wrapper ts-icon {
    fill: #d63d00
}

two-column-info-bubble.warning .content-wrapper .header {
    color: #d63d00
}

two-column-info-bubble .left-icon-wrapper {
    margin: 15px 10px 10px 0;
    flex: 0 0 70px
}

two-column-info-bubble .left-icon-wrapper ts-icon {
    z-index: 1;
    margin-left: 30px;
    fill: #51a351
}

two-column-info-bubble .content-wrapper {
    background-color: #fff;
    display: block;
    flex: 1 1;
    margin-right: 10px;
    margin-bottom: 20px
}

two-column-info-bubble .content-wrapper .header {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #51a351
}

two-column-info-bubble .content-wrapper .content {
    font-size: 12px;
    color: #868686;
    margin: 8px 0 23px 0
}

two-column-info-bubble .content-wrapper .buttons {
    color: #d63d00;
    padding-top: 16px;
    border-top: 1px solid #e6e6e6;
    width: 100%
}

two-column-info-bubble .content-wrapper .buttons input {
    background: 0 0;
    border: 0;
    font-size: 12px;
    margin-right: 10px
}

two-column-info-bubble>.info-bubble-arrow-wrapper {
    display: inline-block;
    background-color: inherit;
    position: relative
}

two-column-info-bubble>.info-bubble-arrow-wrapper>.info-bubble-arrow {
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: inherit;
    width: 24px;
    height: 24px;
    z-index: 1;
    left: 30px
}

two-column-info-bubble>.info-bubble-arrow-wrapper>.info-bubble-arrow.top {
    bottom: -13px;
    border-right: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7
}

two-column-info-bubble>.info-bubble-arrow-wrapper>.info-bubble-arrow.info-bubble-arrow.bottom {
    margin-top: -13px;
    border-left: 1px solid #d7d7d7;
    border-top: 1px solid #d7d7d7
}

tree-item .treemain {
    flex-grow: 1
}

tree-item .restricted {
    pointer-events: none!important
}

tree-item .restricted .folder {
    pointer-events: none!important
}

tree-item .restricted p {
    color: #afafaf!important
}

tree-item .restricted ts-icon {
    fill: #afafaf!important
}

tree-item .restricted .arrow {
    pointer-events: auto!important
}

tree-item .restricted .arrow:hover {
    fill: #51a351!important
}

tree-item .folder {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 20px;
    transition: .3s;
    width: 100%;
    cursor: pointer
}

tree-item .folder:hover {
    background: #fff
}

tree-item .folder:hover p {
    color: #51a351
}

tree-item .folder:hover .folderListIcon {
    fill: #51a351
}

tree-item .folder p {
    font-size: 16px;
    margin: 0;
    height: 18px;
    max-width: 300px;
    color: #e6e6e6;
    font-weight: 700;
    line-height: 22px
}

tree-item .folder.folderEntryNoChildren .drop-out {
    margin-top: -26px
}

tree-item .folder .treecontent {
    display: flex
}

tree-item .folder .treecontent .treemain {
    flex-grow: 1
}

tree-item .folder .treecontent .treemain .truncate {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 22px
}

tree-item .folder .treecontent .treenav {
    padding-right: 5px
}

tree-item .folder .treecontent .treenav .addBuIcon {
    fill: #51a351
}

tree-item .folder .treecontent .treenav .addBuIcon:hover {
    fill: #508546
}

tree-item .folder .folderListIcon {
    float: left;
    width: 25px!important;
    margin-top: 2px;
    fill: #e6e6e6;
    transition: .5s
}

tree-item .folder .folderListIcon.arrow.closed {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin-right: 4px;
    margin-left: -4px
}

tree-item .folder .folderListIcon.arrow.closed svg {
    margin-left: 7px
}

tree-item .folder .folderListIcon.arrow:hover {
    fill: #508546
}

tree-item .folder .folderListIcon.no-children {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    margin-right: 5px;
    margin-left: 18px
}

tree-item .selected {
    background: #fff
}

tree-item .selected p {
    color: #51a351
}

tree-item .selected .folderListIcon {
    fill: #51a351
}

.dropout-container {
    position: relative;
    display: inline-block
}

.dropout-container .drop-out {
    margin-left: 12px;
    margin-top: -25px;
    display: block;
    position: absolute;
    background-color: #222;
    width: 260px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    z-index: 9999
}

.dropout-container .drop-out::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 8px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 18px solid #222;
    border-bottom: 13px solid transparent
}

.dropout-container .drop-out .dropcontent {
    color: #fff
}

.dropout-container .drop-out .dropcontent .list {
    display: flex;
    flex-direction: column
}

.dropout-container .drop-out .dropcontent .list-item {
    padding: 12px 0 12px 20px;
    border-bottom: 1px solid #404040
}

.dropout-container .drop-out .dropcontent .list-item.last-item {
    border-bottom: none
}

.dropout-container .drop-out .dropcontent .list-item:hover {
    font-weight: 700
}

.dropout-container .drop-out ul {
    list-style-type: none
}

reductions .reductions .reduction {
    font-size: 14px;
    margin: 0;
    line-height: 1.25em
}

.smartbanner-visible {
    display: block
}

.smartbanner-android-container {
    height: 60px;
    background: #222;
    position: absolute;
    z-index: 9999;
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-between;
    justify-content: space-between;
    padding: 13px
}

.smartbanner-android-container .icon-description-section {
    display: flex;
    flex-flow: row;
    align-items: center
}

.smartbanner-android-container .icon-description-section .sb-icon {
    text-align: center;
    display: flex;
    height: 32px;
    width: 32px;
    background: linear-gradient(to bottom, #E00 0, #E00 38%, #EE0201 40%, #EE200C 64%, #EE3213 85%, #EE3815 100%)
}

.smartbanner-android-container .icon-description-section .description {
    flex: 0 1 250px;
    color: #fff;
    margin-left: 13px
}

.smartbanner-android-container .icon-description-section .description h3 {
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 3px 0
}

.smartbanner-android-container .icon-description-section .description p {
    font-size: 12px;
    font-weight: 400;
    margin: 0
}

.smartbanner-android-container .close-section {
    display: flex;
    width: 32px;
    justify-content: flex-end
}

.smartbanner-hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 750ms, opacity 750ms linear
}

weekdays-picker {
    display: block
}

weekdays-picker .checkboxArea {
    margin-right: 5px
}

weekdays-picker .checkboxArea .div-label {
    height: auto;
    display: block;
    border-bottom: 0
}

weekdays-picker calendar-sheet {
    height: auto;
    width: auto
}

weekdays-picker .check-icon {
    margin-top: 3px
}

weekdays-picker .close-icon {
    margin-bottom: 3px
}

weekdays-picker input+.div-label calendar-sheet .calendar-sheet-header {
    background: #868686
}

weekdays-picker input+.div-label .icon svg {
    fill: #ccc
}

weekdays-picker input:checked+.div-label calendar-sheet .calendar-sheet-header {
    background: #508546
}

weekdays-picker input:checked+.div-label .icon svg {
    fill: #508546
}

weekdays-picker input+.div-label:hover calendar-sheet .calendar-sheet-header {
    background: #508546
}

card-component .cardContainer {
    display: flex;
    margin-right: 0;
    border: solid #afafaf;
    border-width: 0 0 1px 0
}

card-component .cardContainer .cardNameContainer {
    width: 30%;
    height: auto;
    word-wrap: break-word
}

card-component .cardContainer .cardInfoContainer {
    width: 50%;
    height: auto;
    word-wrap: break-word
}

card-component .cardContainer .cardDeleteContainer {
    display: flex;
    justify-content: flex-end;
    width: 20%
}

card-component .cardContainer .cardDeleteContainer .plusElement .personSvg {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: -2px
}

payment-method .smallInfoText {
    height: 52px;
    border-bottom: 1px solid #e6e6e6;
    align-content: start;
    justify-content: space-between;
    display: flex
}

payment-method .smallInfoText p {
    color: #222;
    padding: 0;
    font-size: 16px;
    vertical-align: middle;
    margin-top: auto!important;
    margin-bottom: auto!important
}

payment-method .smallInfoText .title {
    height: 5.08%;
    font-size: 20px;
    line-height: 42px
}

payment-method .paymentMethodTitle {
    width: 40%;
    margin-top: auto!important;
    margin-bottom: auto!important
}

payment-method .paymentMethodTitle.button-column {
    display: flex;
    justify-content: flex-end
}

payment-method .paymentMethodTitleActive {
    cursor: pointer
}

payment-method .paymentMethodInfoContainer {
    width: 60%;
    margin-top: auto!important;
    margin-bottom: auto!important
}

payment-method .paymentMethodValidDate {
    font-size: 12px;
    color: #878787
}

payment-method .addPaymentMethodButton {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    color: #51a351;
    cursor: pointer
}

payment-method .addPaymentMethodButton .plusElement {
    background: #51a351;
    padding: 1.5px 1.5px;
    text-align: center;
    width: 18px;
    height: 18px
}

payment-method .addPaymentMethodButton .plusElement .personSvg {
    display: flex;
    align-items: center;
    justify-content: center;
    fill: #ebebeb
}

payment-method .addPaymentMethodButton .plusElement .personSvg .plusIcon {
    margin-left: 1.5px
}

payment-method .addPaymentMethodButton .buttonText {
    margin-left: 5px
}

payment-method .paymentMethodArrowIcon {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}

payment-method .paymentMethodArrowIcon svg {
    fill: #51a351
}

payment-method .clickable {
    cursor: pointer
}

payment-method .clickable:hover {
    background: rgba(0, 0, 0, .04)
}

payment-method-details {
    font-family: "Frutiger Next"
}

payment-method-details .topContent {
    justify-content: space-between!important
}

payment-method-details .topContent .heading {
    display: flex
}

payment-method-details .body-content {
    padding-top: 160px!important
}

payment-method-details .light-heading {
    display: flex;
    align-content: start;
    justify-content: space-between
}

payment-method-details .light-heading .title {
    height: 5.08%;
    font-size: 20px
}

payment-method-details .bottomContent {
    margin-top: 0!important
}

payment-method-details .smallInfoText {
    height: 52px;
    align-content: start;
    justify-content: flex-start;
    display: flex;
    margin-top: 15px
}

payment-method-details .smallInfoText p {
    color: #222;
    padding: 0;
    font-size: 16px;
    vertical-align: middle;
    margin-top: auto!important;
    margin-bottom: auto!important
}

payment-method-details .smallInfoText .title {
    height: 5.08%;
    font-size: 20px;
    line-height: 42px
}

payment-method-details .smallInfoText .col {
    flex: 1
}

payment-method-details .smallInfoText .col .label {
    color: #868686;
    font-size: 12px
}

payment-method-details .headingWithIcon {
    font-size: 20px;
    color: #51a351;
    margin-bottom: 26px;
    width: 100%;
    display: flex
}

payment-method-details .headingWithIcon .heading {
    margin-left: 5px
}

payment-method-details .deletePaymentMethodButton {
    display: flex;
    justify-content: space-around;
    margin-top: 50px
}

payment-method-details .editPaymentMethodButton {
    height: 40px
}

invoice-details .invoice-select-input {
    margin-top: 20px
}

invoice-details .description {
    font-size: 16px;
    color: #868686;
    line-height: 24px
}

invoice-details .description.lower {
    font-size: 12px
}

invoice-details .row {
    display: flex;
    justify-content: space-between
}

invoice-details .row .width50 {
    width: 49%
}

airplus-details .date-selectbox {
    width: 3.5rem;
    margin-right: 1rem
}

airplus-details .airplus-card-number-input {
    margin-top: 20px
}

business-unit-card-component .cardContainer {
    display: flex;
    margin-right: 0;
    justify-content: space-between;
    border: solid #afafaf;
    border-width: 0 0 1px 0
}

business-unit-card-component .cardContainer .cardNameContainer {
    width: 30%;
    height: auto;
    word-wrap: break-word
}

business-unit-card-component .cardContainer .unitHeading {
    font-size: .8rem;
    color: #878787
}

business-unit-card-component .cardContainer .cardInfoContainer {
    width: 50%;
    height: auto;
    word-wrap: break-word
}

business-unit-card-component .cardContainer .cardDeleteContainer {
    display: flex;
    justify-content: flex-end;
    width: 20%;
    padding: 12px 0 12px 0
}

business-unit-card-component .clickButton {
    cursor: pointer;
    color: #64942c
}

person-discount-selector-component .discountListingContainer {
    height: 85vh!important
}

.custom-modalbox mat-dialog-container {
    padding: 0
}

person-discount-selector-component .discountListingContainer {
    height: 85vh!important
}

.custom-modalbox mat-dialog-container {
    padding: 0
}

person-details-component .buttonSave {
    line-height: 20px!important
}

person-details-component .buttonSave .spinner {
    fill: #fff
}

person-details-component .buttonDelete .spinner {
    display: inline-block;
    padding-top: 10px;
    padding-right: 5px
}

person-details-component .savebuttonoffset {
    display: flex;
    justify-content: center
}

person-details-component .body-content {
    padding-top: 165px!important
}

person-details-component .middleContent {
    margin-top: 10px!important
}

person-details-component .helpIcon {
    fill: #51a351;
    vertical-align: sub
}

person-details-component .plusIcon {
    margin-right: 3px
}

person-details-component .card-component-person button {
    margin: 5px
}

person-details-component .missing-business-unit-label {
    margin-top: 10px;
    color: #cc3432
}

person-details-component .businessUnitListHeading {
    border: solid #afafaf;
    border-width: 0 1px 1px 0
}

person-details-component .businessUnitListHeading span {
    font-size: .9rem;
    color: #afafaf
}

person-details-component .onlineacctext {
    text-align: left
}

person-details-component .moreonineinfos {
    text-align: left;
    font-size: 10px
}

person-details-component .missingInputLabel {
    color: #cc3432;
    text-align: left;
    font-size: 12px!important;
    margin-top: 5px!important
}

person-details-component .form:not(ng-submitted):not(.showValidationErrorsAfterSubmit) input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation)~label {
    color: #afafaf!important
}

person-details-component .formSubmitted input.ng-invalid {
    border-color: #cc3432!important
}

person-details-component .formSubmitted select.ng-invalid {
    border-color: #cc3432!important
}

person-details-component .ng-invalid.formSubmitted {
    border-color: #cc3432!important
}

person-details-component .leftInnerContainer {
    flex: 1 1 0!important;
    margin-right: 15px
}

person-details-component .rightInnerContainer {
    flex: 1 1 0!important;
    margin: 0!important;
    margin-left: 15px!important
}

person-details-component .rightInnerContainer .inputContainer {
    margin-top: 20.5px!important
}

person-details-component .createPersonCustomerAccountTitle {
    text-align: left;
    margin-top: 15px;
    font-size: 12px
}

person-details-component .businessUnitSelect {
    margin-top: 25px
}

person-details-component .updatebuttonbar {
    width: 310px
}

person-details-component .materialFormCustomization {
    width: 100%
}

person-details-component .fullWidthInput {
    width: 100%
}

person-details-component .mat-form-field-subscript-wrapper {
    top: auto!important
}

person-details-component .inputRow {
    margin-bottom: 0!important
}

person-details-component .discountCardHeading {
    display: flex;
    justify-content: space-between!important
}

person-details-component .cardPlusButton {
    display: flex;
    margin-top: auto;
    margin-bottom: auto
}

.personListEntry {
    border-bottom: 1px solid #d7d7d7;
    padding-bottom: 15px;
    height: 42px;
    padding-top: 20px
}

.personListEntry p {
    color: #e6e6e6;
    justify-content: flex-start;
    flex-direction: row;
    display: flex;
    margin-bottom: 10px
}

.personListEntry h1 {
    font-weight: 100;
    font-size: large;
    margin-top: -10px;
    align-content: start;
    justify-content: flex-start;
    display: flex;
    margin-bottom: 0
}

.personListEntry:hover {
    background-color: #e6e6e6
}

.personListEntry h1 {
    cursor: pointer
}

search-bar {
    z-index: 1
}

search-bar .add-person-button {
    line-height: initial;
    margin-left: 270px;
    margin-bottom: 10px
}

search-bar>div.search {
    display: flex;
    flex-flow: column;
    background-color: rgba(20, 20, 20, .9)
}

search-bar>div.search .searchBar {
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
    display: flex
}

search-bar>div.search .searchBar ts-icon {
    margin-left: 15px;
    margin-right: 16px;
    cursor: pointer;
    margin-top: auto;
    margin-bottom: auto
}

search-bar>div.search .searchBar ts-icon svg.search {
    fill: #fff;
    margin-bottom: -4px
}

search-bar>div.search .searchBar mat-form-field {
    min-width: 645px
}

search-bar>div.search .searchBar mat-form-field .mat-form-field-label,
search-bar>div.search .searchBar mat-form-field input.mat-input-element {
    color: #fff!important
}

search-bar>div.search .searchBar mat-form-field .mat-form-field-underline {
    background-color: #fff!important
}

search-bar>div.search .searchBar .deleteButton {
    width: 36px;
    margin-left: 10px;
    display: flex;
    margin-top: auto;
    margin-bottom: auto
}

search-bar>div.search .searchBar .deleteButton .line {
    height: 50px;
    border-left: 1px solid #ccc
}

search-bar>div.search .overlay {
    position: absolute;
    background-color: rgba(20, 20, 20, .9);
    top: 86px;
    width: 100%;
    z-index: 2;
    color: #fff
}

search-bar>div.search .overlay .updatebtn {
    text-align: center;
    cursor: pointer;
    background: #51a351;
    color: #fff;
    font-weight: 700;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-left: 222px;
    width: 200px
}

search-bar>div.search .overlay .updatebtn p {
    margin: 0
}

search-bar>div.search .overlay .disabledButton {
    background: grey;
    cursor: default
}

search-bar>div.search .overlay .content {
    margin-left: 395px
}

search-bar>div.search .overlay .content .header {
    font-weight: 700
}

search-bar>div.search .overlay .content .business p.name {
    text-decoration: underline;
    margin-bottom: 0
}

search-bar>div.search .overlay .content .business p.descr {
    margin-top: 3px;
    color: #878787;
    font-size: 12px
}

search-bar>div.search .overlay .content .business p.name:hover {
    color: #51a351;
    cursor: pointer
}

search-bar>div.search .overlay .content .persons .personList {
    display: flex
}

search-bar>div.search .overlay .content .persons .personList svg.userIcon {
    fill: #fff
}

search-bar>div.search .overlay .content .persons .personList:hover p {
    color: #51a351;
    cursor: pointer
}

search-bar>div.search .overlay .content .persons .personList:hover svg.userIcon {
    fill: #51a351
}

search-bar>div.search .overlay .content .persons ts-icon {
    margin-top: 15px;
    margin-right: 18px
}

search-bar>div.search .overlay .content .noResults {
    margin: 0 auto;
    margin-top: 0;
    font-weight: 700
}

business-unit-importer .importer-container {
    display: flex;
    justify-content: flex-start;
    padding: 5px;
    align-content: flex-start;
    margin-top: 30px;
    height: 70px
}

business-unit-importer .importer-container .importer-button {
    width: .1px;
    height: .1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1
}

business-unit-importer .importer-container label {
    padding: 12px 40px;
    border: 1px solid #e6e6e6;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: .3s
}

business-unit-importer .importer-container .disabled {
    transition: .3s;
    background-color: #e6e6e6
}

business-unit-importer .importer-container .importer-button:hover {
    background-color: #e6e6e6;
    cursor: pointer
}

business-unit-importer .importer-container .importer-info-text {
    margin-left: 20px
}

selected-business-unit .wideContent {
    width: 100%;
    display: flex;
    flex-direction: column
}

selected-business-unit .wideContent .display-fields {
    margin-top: 15px;
    margin-bottom: 15px
}

selected-business-unit .email-field {
    margin-top: 18px
}

selected-business-unit .pageTitle {
    overflow-wrap: break-word;
    width: 24rem!important
}

selected-business-unit .buttonContainer {
    display: flex;
    flex-direction: row;
    justify-content: center
}

selected-business-unit .buttonContainer .buttonInColumn {
    cursor: pointer
}

selected-business-unit .updatebtn {
    padding-top: 10px
}

selected-business-unit .updatebtn .updatebtnText {
    width: 100px
}

selected-business-unit .mat-form-field-subscript-wrapper {
    top: auto!important
}

selected-business-unit .inputRow {
    margin-bottom: 0!important
}

selected-business-unit .statusContent {
    width: 50%
}

selected-business-unit .statusContent .inputGroup {
    margin-top: 5px
}

selected-business-unit .warning-text {
    color: #f1a72a;
    display: flex;
    margin-top: 15px
}

selected-business-unit .warning-text .warning-icon {
    margin-right: 8px
}

selected-business-unit .businessUnitAdministrationLabel {
    margin-bottom: 15px
}

selected-business-unit .customerNumberField {
    margin-top: 10px;
    color: #afafaf
}

selected-business-unit .customerNumberField.sap-debitor-field {
    margin-bottom: 15px
}

selected-business-unit .addressContainer .infoElement {
    margin-top: 8px!important;
    margin-bottom: 8px!important
}

selected-business-unit .address-three-fields {
    display: flex
}

selected-business-unit .address-three-fields .zip-code {
    min-width: 15%
}

selected-business-unit .address-three-fields .city {
    min-width: 50%;
    padding-right: 10px;
    padding-left: 10px
}

selected-business-unit .address-three-fields .country {
    min-width: 35%
}

selected-business-unit .button-container {
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 250px
}

selected-business-unit .button-container button {
    height: 50px;
    margin-bottom: 5px
}

selected-business-unit .button-container button .button-icon {
    fill: #fff
}

assign-person-to-tan-modal .contentContainer {
    height: 230px!important;
    padding: 15px 15px 0 15px
}

assign-person-to-tan-modal .headingWithIcon {
    font-size: 20px;
    margin-bottom: 26px;
    width: 100%;
    display: flex;
    color: #51a351
}

assign-person-to-tan-modal .headingWithIcon .heading {
    font-weight: 700;
    margin-left: 5px;
    padding-top: 2px
}

assign-person-to-tan-modal .description {
    font-size: 16px;
    color: #868686;
    line-height: 24px
}

assign-person-to-tan-modal .content {
    padding-left: 10px
}

assign-person-to-tan-modal .buttons div {
    cursor: pointer
}

assign-person-to-tan-modal .dateInputContainer {
    display: flex
}

assign-person-to-tan-modal .dateInputContainer .dateInput {
    margin-right: 10px
}

assign-person-to-tan-modal .dateInputLabel {
    font-size: 12px;
    color: #868686
}

assign-person-to-tan-modal .disabled-assing-button {
    color: #afafaf
}

assign-person-to-tan-modal .person-field {
    width: 50%
}

tan-list-component .businessUnitItem {
    border-bottom: solid
}

tan-list-component .table-container {
    width: 865px;
    overflow: auto
}

tan-list-component table {
    width: 1100px;
    margin-top: 40px
}

tan-list-component table .tableHead {
    border-bottom: solid;
    text-align: left
}

tan-list-component table .organisation-header {
    width: 30%
}

tan-list-component table .validity-header {
    width: 10%
}

tan-list-component table .tan-header {
    width: 10%
}

tan-list-component table td,
tan-list-component table th {
    border-bottom-style: none!important
}

tan-list-component table td .tan,
tan-list-component table th .tan {
    padding: 2px;
    background: #fff;
    color: #51a351;
    border: 2px solid #51a351;
    border-radius: 3px;
    margin-bottom: 1px;
    margin-top: 2px;
    margin-right: 15px
}

tan-list-component table td .tan .tanDeleteIcon,
tan-list-component table th .tan .tanDeleteIcon {
    vertical-align: middle;
    fill: #51a351;
    float: right;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    cursor: pointer
}

tan-list-component table td .tan .tanDeleteIcon:hover,
tan-list-component table th .tan .tanDeleteIcon:hover {
    fill: #508546
}

tan-list-component table td .tanAddButton,
tan-list-component table th .tanAddButton {
    margin-top: 5px;
    margin-bottom: 5px;
    min-width: 62px!important;
    line-height: 22px;
    padding: 0!important
}

tan-list-component table td .tanValidity,
tan-list-component table th .tanValidity {
    color: #bcbcbc;
    margin-left: 2px;
    margin-top: 6px;
    margin-bottom: 10px
}

tan-list-component table td .tanValidity .assignButton,
tan-list-component table th .tanValidity .assignButton {
    color: #51a351
}

tan-list-component table td .tanValidity .assignButton:hover,
tan-list-component table th .tanValidity .assignButton:hover {
    font-weight: 700
}

tan-list-component table td.mat-cell,
tan-list-component table th.mat-cell {
    vertical-align: top
}

tan-list-component table th.mat-header-cell {
    border-bottom-width: 4px!important;
    font-size: 14px;
    color: #000
}

tan-list-component table th.mat-header-cell:first-child {
    font-size: 20px!important
}

tan-list-component th.mat-header-cell:first-child {
    font-size: 20px!important
}

add-payment-method-invoice-modal .headingWithIcon {
    font-size: 20px;
    color: #51a351;
    margin-bottom: 26px;
    width: 100%;
    display: flex;
    fill: #51a351
}

add-payment-method-invoice-modal .headingWithIcon .heading {
    margin-left: 5px;
    padding-top: 2px
}

add-payment-method-invoice-modal .description {
    font-size: 16px;
    color: #868686;
    line-height: 24px
}

add-payment-method-invoice-modal .content {
    padding-left: 30px
}

add-payment-method-invoice-modal .dateInputContainer {
    display: flex
}

add-payment-method-invoice-modal .dateInputContainer .dateInput {
    margin-right: 10px
}

add-payment-method-invoice-modal .dateInputLabel {
    font-size: 12px;
    color: #868686
}

add-payment-method-invoice-modal .description.lower {
    font-size: 12px
}

add-payment-method-airplus-modal .headingWithIcon {
    font-size: 20px;
    color: #51a351;
    margin-bottom: 26px;
    width: 100%;
    display: flex;
    fill: #51a351
}

add-payment-method-airplus-modal .headingWithIcon .heading {
    margin-left: 5px;
    padding-top: 2px
}

add-payment-method-airplus-modal .description {
    font-size: 16px;
    color: #868686;
    line-height: 24px
}

add-payment-method-airplus-modal .content {
    padding-left: 30px
}

add-payment-method-airplus-modal .dateInputContainer {
    display: flex
}

add-payment-method-airplus-modal .dateInputContainer .dateInput {
    margin-right: 10px
}

add-payment-method-airplus-modal .dateInputLabel {
    font-size: 12px;
    color: #868686
}

body[state^="root.b2b.management"] div[ui-view=reporting] {
    background-color: #fff;
    flex: 1 0;
    position: relative;
    overflow: hidden;
    display: flex
}

body[state^="root.b2b.management"] reporting-landing-page {
    width: 100%
}

body[state^="root.b2b.management"] .bodyContainer {
    width: 100%;
    height: 100%;
    justify-content: space-around;
    display: flex
}

body[state^="root.b2b.management"] .delete-button-icon svg {
    fill: #cc3432
}

body[state^="root.b2b.management"] #management .managementContainer {
    width: 100%;
    background: rgba(35, 35, 35, .6);
    border: 1px solid rgba(235, 235, 235, .2)
}

body[state^="root.b2b.management"] #management .managementContainer p {
    margin: 0
}

body[state^="root.b2b.management"] #management .managementContainer hr {
    margin-top: 0;
    margin-bottom: 15px;
    background-color: #7d7d7d
}

body[state^="root.b2b.management"] #management .leftContainer {
    padding: 0;
    margin-top: -1px;
    width: 31.9%;
    height: 98%;
    background: rgba(35, 35, 35, .6);
    border: 1px solid rgba(235, 235, 235, .2);
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    overflow: hidden;
    overflow-y: auto
}

body[state^="root.b2b.management"] #management .leftContainer .managementContent {
    width: 100%
}

body[state^="root.b2b.management"] #management .rightContainer {
    background: #fff;
    border: 1px solid rgba(235, 235, 235, .2);
    height: 98%;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 5px;
    width: 61%;
    overflow: hidden;
    overflow-y: auto;
    -webkit-box-shadow: 0 0 13px 0 rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 0 113px 3px rgba(0, 0, 0, .75);
    padding: 40px;
    justify-content: flex-end
}

body[state^="root.b2b.management"] #management .rightContainer .body-content {
    padding-top: 135px
}

body[state^="root.b2b.management"] #management .rightContainer .wideContent {
    width: 100%;
    display: flex
}

body[state^="root.b2b.management"] #management .rightContainer .noMargin {
    margin-left: 0
}

body[state^="root.b2b.management"] #management .rightContainer .middleContent {
    display: flex
}

body[state^="root.b2b.management"] #management .rightContainer .middleContent .rightInnerContainer {
    flex: 1 1 auto;
    margin: 5px
}

body[state^="root.b2b.management"] #management .rightContainer .middleContent .leftInnerContainer {
    flex: 1 1 auto;
    text-align: center
}

body[state^="root.b2b.management"] #management .infoText {
    border-bottom: 4px solid #3B4650;
    align-content: start;
    justify-content: flex-start;
    display: flex
}

body[state^="root.b2b.management"] #management .infoText h1 {
    color: #3B4650;
    padding: 0;
    font-weight: 500;
    margin: 0 0 4px
}

body[state^="root.b2b.management"] #management .infoText .title {
    height: 5.08%;
    font-size: 20px
}

body[state^="root.b2b.management"] #management .infoElement {
    padding-bottom: 0;
    margin-top: 0;
    padding-top: 0;
    box-sizing: border-box;
    margin-bottom: 0
}

body[state^="root.b2b.management"] #management .infoElement p {
    color: #b4b4b4;
    justify-content: flex-start;
    flex-direction: row;
    display: flex;
    margin-bottom: 10px
}

body[state^="root.b2b.management"] #management .infoElement h1 {
    font-weight: 100;
    font-size: large;
    margin-top: -10px;
    align-content: start;
    justify-content: flex-start;
    display: flex;
    margin-bottom: 0
}

body[state^="root.b2b.management"] .mat-datepicker-toggle,
body[state^="root.b2b.management"] .mat-form-field-label {
    color: #868686
}

#businessunits {
    position: relative
}

#businessunits.searchbarContainer {
    display: block;
    width: 90%
}

#businessunits .searchbarItem {
    background: 0 0;
    padding: 0
}

#buSearchInput {
    border-top: none;
    border-right: none;
    border-bottom: 1px solid #fff;
    border-left: none;
    width: 100%;
    margin-bottom: 2px
}

#buSearchInput:focus {
    border-bottom: 3px solid #9ec514;
    margin-bottom: 0
}

#businessUnitSearch {
    position: absolute;
    width: 100%;
    background: rgba(58, 68, 77, .95);
    top: 60px;
    max-height: 400px;
    overflow-y: scroll
}

#businessUnitSearch .close {
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 8px;
    font-size: 30px;
    color: #fff;
    cursor: pointer
}

#businessUnitSearch .businessunit-item {
    padding: 4px;
    margin: 8px 16px;
    color: #fff;
    text-decoration: underline
}

#businessUnitSearch .businessunit-item span:hover {
    color: #9ec514;
    cursor: pointer
}

#businessUnitSearch .businessunit-item.selected {
    color: #9ec514;
    background: 0 0
}

#businessUnitSearch .businessunit-item.selected span:hover {
    cursor: initial
}

#selectedBusinessUnits {
    display: flex;
    flex-wrap: wrap;
    padding: 10px
}

#selectedBusinessUnits .selected-unit {
    width: calc(50% - 35px);
    margin: 0 0 20px 35px;
    padding: 5px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between
}

#selectedBusinessUnits .selected-unit:hover {
    background: rgba(255, 255, 255, .025)
}

#selectedBusinessUnits .selected-unit .close {
    color: #9ec514;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    padding: 4px
}

@media (max-width:479px) {
    #selectedBusinessUnits .selected-unit {
        width: 100%
    }
}

#selectedBusinessUnits .selected-unit-name {
    display: block
}

body[state="root.b2b.management.reporting"] #content,
reporting-landing-page {
    display: block
}

#reportingLandingPage {
    height: auto;
    z-index: 1;
    display: block;
    width: 100%
}

#reportingLandingPageWrapper {
    background: #1e2831;
    color: #fff;
    padding: 37px 42px;
    width: 100%
}

#reportingLandingPageWrapper #bottom-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700
}

#reportingLandingPageWrapper .button-wrapper.first {
    flex: 1
}

#reportingLandingPageWrapper .button-wrapper.last {
    margin-left: 10px
}

#reportingLandingPageWrapper .until {
    padding: 0 10px
}

#reportingLandingPageWrapper input {
    background: #1e2831
}

#reportingLandingPageWrapper .button#resetSearch {
    color: #9ec514
}

#reportingLandingPageWrapper .button#generateReport {
    background: #9ec514;
    color: #1e2831;
    padding: 20px 28px
}

#reportingLandingPageWrapper .button#generateReport:disabled {
    background: #7d7d7d
}

#reportingLandingPageWrapper .button#downloadReport {
    background: #9ec514;
    color: #1e2831;
    padding: 20px 28px
}

#reportingLandingPageWrapper .button#downloadReport:disabled {
    background: #7d7d7d
}

#reportingLandingPageWrapper h2 {
    margin-bottom: 8px
}

#reportingLandingPageWrapper hr {
    background: #fff;
    height: 3px;
    border-radius: 1px;
    margin-bottom: 30px
}

#bu-wrapper {
    min-height: 400px;
    flex: 1;
    margin-right: 21px
}

#reportingLandingPageMain {
    display: flex
}

#reportingSendModal .button-wrapper button {
    padding: 8px 12px;
    margin-left: 10px;
    color: #9ec514
}

#reportingSendModal .button-wrapper button[disabled] {
    color: #586168
}

b2b-mt-container .arz-wrapper {
    margin-top: 40px;
    margin-bottom: 40px;
    border-top: 1px solid #878787;
    border-bottom: 1px solid #878787;
    background-color: #f0f0f0;
    display: flex;
    flex: 1 1 100%;
    flex-flow: column;
    width: 768px;
    padding: 23px 29px 19px 32px
}

b2b-mt-container .arz-wrapper header {
    font-size: 20px;
    margin-bottom: 15px
}

b2b-mt-container .arz-wrapper mt-add-vehicle .content {
    padding: 0!important
}

b2b-mt-container .arz-wrapper mt-add-vehicle .content>section {
    margin: 0!important;
    font-size: 16px
}

b2b-mt-container .arz-wrapper mt-add-vehicle .content>section .custom-flex-row {
    display: none
}

b2b-mt-container .arz-wrapper mt-add-vehicle .content>section .inputWrapper.bordered {
    border-bottom: 1px solid #d7d7d7
}

b2b-mt-container .arz-wrapper mt-add-vehicle .content>section .inputWrapper.noPadding {
    padding-bottom: 0
}

b2b-mt-container .arz-wrapper mt-add-vehicle .content>section .inputWrapper input,
b2b-mt-container .arz-wrapper mt-add-vehicle .content>section .inputWrapper select {
    width: 100%
}

b2b-mt-container .arz-wrapper mt-add-vehicle .content>section .arz-flex-row {
    display: flex!important
}

b2b-mt-container .arz-wrapper mt-add-vehicle .content>section .arz-flex-row>div {
    flex: 1 1 33%
}

b2b-mt-container .arz-wrapper mt-add-vehicle .content>section .arz-flex-row>div:first-of-type {
    padding-right: 10px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content,
b2b-mt-container .arz-wrapper mt-add-trailer .content {
    flex: 1 1 100%
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-trailer .content .inputWrapper {
    width: 33%;
    padding-right: 20px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content .checkboxWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content .checkboxWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content .checkboxWrapper,
b2b-mt-container .arz-wrapper mt-add-trailer .content .checkboxWrapper {
    width: 100%!important;
    display: flex;
    margin-top: 10px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content .checkboxWrapper .one,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content .checkboxWrapper .one,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content .checkboxWrapper .one,
b2b-mt-container .arz-wrapper mt-add-trailer .content .checkboxWrapper .one {
    flex: 0 1 30px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content .checkboxWrapper .two,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content .checkboxWrapper .two,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content .checkboxWrapper .two,
b2b-mt-container .arz-wrapper mt-add-trailer .content .checkboxWrapper .two {
    flex: 1 1;
    font-size: 14px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content .mandatory,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content .mandatory,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content .mandatory,
b2b-mt-container .arz-wrapper mt-add-trailer .content .mandatory {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content .mandatory-error,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content .mandatory-error,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content .mandatory-error,
b2b-mt-container .arz-wrapper mt-add-trailer .content .mandatory-error {
    width: 100%!important;
    color: #cc3432
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content .custom-flex-row,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content .custom-flex-row,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content .custom-flex-row,
b2b-mt-container .arz-wrapper mt-add-trailer .content .custom-flex-row {
    display: flex;
    flex-flow: row;
    flex: 1 1 100%
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content .custom-flex-row .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content .custom-flex-row .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content .custom-flex-row .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-trailer .content .custom-flex-row .inputWrapper {
    flex: 0 0 33%;
    padding-right: 20px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content .custom-flex-row .inputWrapper input,
b2b-mt-container .arz-wrapper mt-add-or-edit-car .content .custom-flex-row .inputWrapper select,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content .custom-flex-row .inputWrapper input,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content .custom-flex-row .inputWrapper select,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content .custom-flex-row .inputWrapper input,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content .custom-flex-row .inputWrapper select,
b2b-mt-container .arz-wrapper mt-add-trailer .content .custom-flex-row .inputWrapper input,
b2b-mt-container .arz-wrapper mt-add-trailer .content .custom-flex-row .inputWrapper select {
    width: 100%
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content .custom-flex-row .arz-flex-row,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content .custom-flex-row .arz-flex-row,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content .custom-flex-row .arz-flex-row,
b2b-mt-container .arz-wrapper mt-add-trailer .content .custom-flex-row .arz-flex-row {
    display: flex;
    flex: 1 0 66%
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content .custom-flex-row .arz-flex-row .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content .custom-flex-row .arz-flex-row .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content .custom-flex-row .arz-flex-row .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-trailer .content .custom-flex-row .arz-flex-row .inputWrapper {
    flex: 1 0 33%
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content .limiting-profile-button,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content .limiting-profile-button,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content .limiting-profile-button,
b2b-mt-container .arz-wrapper mt-add-trailer .content .limiting-profile-button {
    font-size: 14px;
    text-transform: uppercase;
    color: #51a351;
    margin-top: 10px;
    margin-bottom: 10px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-input-by-brand section .arz-flex-row,
b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-input-by-dimension section .arz-flex-row,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-input-by-brand section .arz-flex-row,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-input-by-dimension section .arz-flex-row,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-input-by-brand section .arz-flex-row,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-input-by-dimension section .arz-flex-row,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-input-by-brand section .arz-flex-row,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-input-by-dimension section .arz-flex-row {
    display: flex;
    flex: 1 1 100%
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-input-by-brand section .arz-flex-row .max-size-label,
b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-input-by-dimension section .arz-flex-row .max-size-label,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-input-by-brand section .arz-flex-row .max-size-label,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-input-by-dimension section .arz-flex-row .max-size-label,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-input-by-brand section .arz-flex-row .max-size-label,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-input-by-dimension section .arz-flex-row .max-size-label,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-input-by-brand section .arz-flex-row .max-size-label,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-input-by-dimension section .arz-flex-row .max-size-label {
    margin-top: -10px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-input-by-brand section .two-entries-per-row .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-input-by-dimension section .two-entries-per-row .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-input-by-brand section .two-entries-per-row .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-input-by-dimension section .two-entries-per-row .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-input-by-brand section .two-entries-per-row .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-input-by-dimension section .two-entries-per-row .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-input-by-brand section .two-entries-per-row .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-input-by-dimension section .two-entries-per-row .inputWrapper {
    flex: 0 0 33%!important
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-input-by-brand section .infos,
b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-input-by-dimension section .infos,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-input-by-brand section .infos,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-input-by-dimension section .infos,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-input-by-brand section .infos,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-input-by-dimension section .infos,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-input-by-brand section .infos,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-input-by-dimension section .infos {
    color: #fff;
    padding: 15px 29px 15px 32px;
    margin: 20px -29px 20px -32px;
    background-color: #1A3A4A;
    font-size: 16px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-input-by-dimension .error-logs,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-input-by-dimension .error-logs,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-input-by-dimension .error-logs,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-input-by-dimension .error-logs {
    display: flex;
    flex: 1 1 100%
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-input-by-dimension .error-logs>mat-error,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-input-by-dimension .error-logs>mat-error,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-input-by-dimension .error-logs>mat-error,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-input-by-dimension .error-logs>mat-error {
    flex: 0 0 33%;
    margin-top: 0;
    padding-top: 5px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-racks-and-roof-selection,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-racks-and-roof-selection,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-racks-and-roof-selection,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-racks-and-roof-selection {
    margin: 20px 0
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-racks-and-roof-selection .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-racks-and-roof-selection .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-racks-and-roof-selection .inputWrapper,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-racks-and-roof-selection .inputWrapper {
    width: 100%;
    padding-right: 20px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-eurotax-properties .euro-tax-row,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-eurotax-properties .euro-tax-row,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-eurotax-properties .euro-tax-row,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-eurotax-properties .euro-tax-row {
    display: flex;
    flex-flow: column;
    background-color: #fff;
    margin: 10px -32px;
    padding: 20px 32px;
    font-size: 14px;
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-eurotax-properties .euro-tax-row span.title-line,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-eurotax-properties .euro-tax-row span.title-line,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-eurotax-properties .euro-tax-row span.title-line,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-eurotax-properties .euro-tax-row span.title-line {
    margin-bottom: 10px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-eurotax-properties .euro-tax-row>span,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-eurotax-properties .euro-tax-row>span,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-eurotax-properties .euro-tax-row>span,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-eurotax-properties .euro-tax-row>span {
    line-height: 1.4
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-input-by-national-code .custom-flex-row,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-input-by-national-code .custom-flex-row,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-input-by-national-code .custom-flex-row,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-input-by-national-code .custom-flex-row {
    display: flex;
    flex-flow: column;
    line-height: 1.4;
    padding-bottom: 10px;
    font-size: 14px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-car .content mt-car-input-by-national-code mat-error,
b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .content mt-car-input-by-national-code mat-error,
b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .content mt-car-input-by-national-code mat-error,
b2b-mt-container .arz-wrapper mt-add-trailer .content mt-car-input-by-national-code mat-error {
    font-size: 12px;
    margin-top: 2px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-motorbike .mandatory {
    margin-left: 0!important
}

b2b-mt-container .arz-wrapper mt-choose-input-type .content>section {
    margin: 0 -29px 10px -32px;
    background: #fff
}

b2b-mt-container .arz-wrapper mt-choose-input-type .content .input-type-entry {
    display: flex;
    flex: 1 1 100%;
    flex-flow: column;
    width: 100%;
    padding: 10px 29px 10px 32px;
    border-top: 1px solid #d7d7d7;
    font-size: 18px
}

b2b-mt-container .arz-wrapper mt-choose-input-type .content .input-type-entry ts-icon {
    display: none
}

b2b-mt-container .arz-wrapper mt-choose-input-type .content .input-type-entry:last-child {
    border-bottom: 1px solid #d7d7d7
}

b2b-mt-container .arz-wrapper mt-choose-input-type .content .input-type-entry:hover {
    background-color: #d7d7d7
}

b2b-mt-container .arz-wrapper mt-choose-input-type mt-add-car-by-national-code .help-text {
    font-family: "Frutiger Next"!important;
    font-size: 12px!important;
    margin-bottom: 10px
}

b2b-mt-container .arz-wrapper mt-choose-input-type mt-add-car-by-national-code mat-error {
    font-family: "Frutiger Next"!important;
    font-size: 12px!important;
    margin-bottom: 10px!important
}

b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .description {
    margin: 0 -29px 19px -32px;
    padding: 25px 32px 25px 32px;
    background-color: #fff;
    line-height: 1.4em;
    font-size: 14px
}

b2b-mt-container .arz-wrapper mt-add-or-edit-special-vehicle .marginTop {
    margin-top: 5px
}

b2b-mt-container .arz-wrapper mt-add-trailer .error-logs {
    margin-top: 15px;
    line-height: 1.8
}

b2b-mt-container .arz-wrapper mt-add-trailer .error-logs .mat-error {
    width: 33%;
    padding-right: 20px;
    display: inline-block
}

b2b-mt-container b2b-mt-help-info .content {
    background-color: #1A3A4A;
    color: #fff;
    margin-top: -40px;
    padding: 10px 32px
}

b2b-mt-container b2b-mt-help-info .content .header {
    font-size: 16px
}

b2b-mt-container b2b-mt-help-info .content .message {
    font-size: 14px;
    line-height: 1.4
}

b2b-mt-container footer {
    display: flex;
    justify-content: space-between
}

b2b-mt-container footer .left {
    display: flex;
    justify-content: space-between;
    flex: 1
}

b2b-mt-container footer .continue-button {
    font-size: 14px;
    color: #51a351;
    text-transform: uppercase
}

b2b-mt-container footer b2b-extended-buttons button {
    font-size: 14px;
    color: #51a351;
    text-transform: uppercase
}

b2b-mt-container footer b2b-extended-buttons button:first-child {
    margin-right: 15px
}

.infoBubble>.contentWrapper>core-mt-container {
    background-color: #f0f0f0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content {
    padding: 0!important
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content header,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content header,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content header,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content header,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content header {
    font-size: 18px;
    padding: 23px 29px 19px 32px;
    border-bottom: 1px solid #d7d7d7;
    font-weight: lighter
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section {
    margin: 0!important;
    padding: 23px 29px 29px 32px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section mt-car-input-by-brand>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section mt-car-input-by-brand>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section mt-car-input-by-brand>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section mt-car-input-by-brand>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section mt-car-input-by-brand>section {
    margin: 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section input {
    background: 0 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section select,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section select,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section select,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section select,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section select {
    color: #222
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section input:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section select:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section input:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section select:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section input:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section select:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section input:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section select:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section input:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section select:disabled {
    color: #868686
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper select,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper select,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper select,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper input,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper select,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper input,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper select {
    width: 100%
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.noPadding,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.noPadding,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.noPadding,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.noPadding,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.noPadding {
    padding: 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.bordered,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.bordered,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.bordered,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.bordered,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.bordered {
    padding-bottom: 0;
    border-bottom: 1px solid #d7d7d7
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper .year,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper .year,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper .year,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper .year,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper .year {
    padding-left: 28px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.checkboxWrapper {
    display: flex
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.checkboxWrapper .one,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.checkboxWrapper .one,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.checkboxWrapper .one,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.checkboxWrapper .one,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.checkboxWrapper .one {
    flex: 0 1 30px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.checkboxWrapper .two,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.checkboxWrapper .two,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.checkboxWrapper .two,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.checkboxWrapper .two,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.checkboxWrapper .two {
    flex: 1 1
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.checkboxWrapper .two .input-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.checkboxWrapper .two .input-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.checkboxWrapper .two .input-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.checkboxWrapper .two .input-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.checkboxWrapper .two .input-error {
    padding-left: 8px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.checkboxWrapper label,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.checkboxWrapper label,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.checkboxWrapper label,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.checkboxWrapper label,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.checkboxWrapper label {
    width: 100%;
    font-size: 12px;
    color: #222
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper .inputGroup .topLabel,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper .inputGroup .topLabel,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper .inputGroup .topLabel,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper .inputGroup .topLabel,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper .inputGroup .topLabel {
    color: #868686;
    position: absolute;
    pointer-events: none;
    left: 0;
    bottom: 28px;
    font-size: 12px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .checkboxButton>.col1 svg,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .checkboxButton>.col1 svg,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .checkboxButton>.col1 svg,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .checkboxButton>.col1 svg,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .checkboxButton>.col1 svg {
    fill: #51a351
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .checkboxButton>.col2 label,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .checkboxButton>.col2 label,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .checkboxButton>.col2 label,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .checkboxButton>.col2 label,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .checkboxButton>.col2 label {
    color: #222
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .checkboxWrapper {
    padding: 10px 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .mandatory,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .mandatory,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .mandatory,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .mandatory,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .mandatory {
    padding: 8px 0 0 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .mandatory-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .mandatory-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .mandatory-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .mandatory-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .mandatory-error {
    color: #cc3432
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .error-logs,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .error-logs,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .error-logs,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .error-logs,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .error-logs {
    margin-top: 10px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .error-logs mat-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .error-logs mat-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .error-logs mat-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .error-logs mat-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .error-logs mat-error {
    margin: 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .maxWidth,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .maxWidth,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .maxWidth,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .maxWidth,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .maxWidth {
    width: 100%
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .arz-flex-row,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .arz-flex-row,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .arz-flex-row,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .arz-flex-row,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .arz-flex-row {
    display: flex;
    justify-content: space-between
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .arz-flex-row>div:first-of-type,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .arz-flex-row>div:first-of-type,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .arz-flex-row>div:first-of-type,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .arz-flex-row>div:first-of-type,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .arz-flex-row>div:first-of-type {
    padding-right: 10px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .arz-flex-row>div,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .arz-flex-row>div,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .arz-flex-row>div,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .arz-flex-row>div,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .arz-flex-row>div {
    width: 100%
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .limiting-profile-button,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .limiting-profile-button,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .limiting-profile-button,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .limiting-profile-button,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .limiting-profile-button {
    font-size: 14px;
    text-transform: uppercase;
    color: #51a351;
    margin-top: 10px;
    margin-bottom: 10px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer {
    display: flex;
    flex: 1 1 auto;
    border-top: 1px solid #d7d7d7;
    padding: 14px 29px 14px 18px;
    margin-left: 14px;
    color: #51a351;
    font-size: 16px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer a,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer a,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer a,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer input,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer a,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer input,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer a,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer input {
    background: 0 0;
    border: none;
    padding: 0;
    margin-left: 20px;
    outline: 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer a:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer input:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer a:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer input:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer a:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer input:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer a:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer input:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer a:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer input:first-child {
    margin-left: 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer .help-icon-wrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer .help-icon-wrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer .help-icon-wrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer .help-icon-wrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer .help-icon-wrapper {
    width: 18px;
    height: 18px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer .left,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer .left,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer .left,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer .left,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer .left {
    display: flex!important;
    flex: 1 1 auto
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer .right,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer .right,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer .right,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer .right,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer .right {
    display: flex!important;
    flex: 0 0 20px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content {
    padding: 0!important
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content header,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content header,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content header,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content header,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content header {
    font-size: 18px;
    padding: 23px 29px 19px 32px;
    border-bottom: 1px solid #d7d7d7;
    font-weight: lighter
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section {
    margin: 0!important;
    padding: 23px 29px 29px 32px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section mt-car-input-by-brand>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section mt-car-input-by-brand>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section mt-car-input-by-brand>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section mt-car-input-by-brand>section,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section mt-car-input-by-brand>section {
    margin: 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section input {
    background: 0 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section select,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section select,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section select,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section select,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section input,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section select {
    color: #222
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section input:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section select:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section input:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section select:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section input:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section select:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section input:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section select:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section input:disabled,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section select:disabled {
    color: #868686
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper select,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper select,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper select,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper input,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper select,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper input,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper select {
    width: 100%
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.noPadding,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.noPadding,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.noPadding,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.noPadding,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.noPadding {
    padding: 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.bordered,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.bordered,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.bordered,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.bordered,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.bordered {
    padding-bottom: 0;
    border-bottom: 1px solid #d7d7d7
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper .year,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper .year,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper .year,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper .year,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper .year {
    padding-left: 28px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.checkboxWrapper {
    display: flex
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.checkboxWrapper .one,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.checkboxWrapper .one,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.checkboxWrapper .one,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.checkboxWrapper .one,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.checkboxWrapper .one {
    flex: 0 1 30px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.checkboxWrapper .two,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.checkboxWrapper .two,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.checkboxWrapper .two,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.checkboxWrapper .two,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.checkboxWrapper .two {
    flex: 1 1
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.checkboxWrapper .two .input-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.checkboxWrapper .two .input-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.checkboxWrapper .two .input-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.checkboxWrapper .two .input-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.checkboxWrapper .two .input-error {
    padding-left: 8px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper.checkboxWrapper label,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper.checkboxWrapper label,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper.checkboxWrapper label,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper.checkboxWrapper label,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper.checkboxWrapper label {
    width: 100%;
    font-size: 12px;
    color: #222
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .inputWrapper .inputGroup .topLabel,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .inputWrapper .inputGroup .topLabel,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .inputWrapper .inputGroup .topLabel,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .inputWrapper .inputGroup .topLabel,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .inputWrapper .inputGroup .topLabel {
    color: #868686;
    position: absolute;
    pointer-events: none;
    left: 0;
    bottom: 28px;
    font-size: 12px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .checkboxButton>.col1 svg,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .checkboxButton>.col1 svg,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .checkboxButton>.col1 svg,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .checkboxButton>.col1 svg,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .checkboxButton>.col1 svg {
    fill: #51a351
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .checkboxButton>.col2 label,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .checkboxButton>.col2 label,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .checkboxButton>.col2 label,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .checkboxButton>.col2 label,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .checkboxButton>.col2 label {
    color: #222
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .checkboxWrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .checkboxWrapper {
    padding: 10px 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .mandatory,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .mandatory,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .mandatory,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .mandatory,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .mandatory {
    padding: 8px 0 0 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .mandatory-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .mandatory-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .mandatory-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .mandatory-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .mandatory-error {
    color: #cc3432
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .error-logs,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .error-logs,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .error-logs,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .error-logs,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .error-logs {
    margin-top: 10px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .error-logs mat-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .error-logs mat-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .error-logs mat-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .error-logs mat-error,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .error-logs mat-error {
    margin: 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>section .maxWidth,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>section .maxWidth,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .maxWidth,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>section .maxWidth,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section .maxWidth {
    width: 100%
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer {
    display: flex;
    flex: 1 1 auto;
    border-top: 1px solid #d7d7d7;
    padding: 14px 29px 14px 18px;
    margin-left: 14px;
    color: #51a351;
    font-size: 16px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer a,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer a,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer input,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer a,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer input,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer a,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer input,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer a,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer input {
    background: 0 0;
    border: none;
    padding: 0;
    margin-left: 20px;
    outline: 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer a:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer input:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer a:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer input:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer a:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer input:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer a:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer input:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer a:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer input:first-child {
    margin-left: 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer .help-icon-wrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer .help-icon-wrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer .help-icon-wrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer .help-icon-wrapper,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer .help-icon-wrapper {
    width: 18px;
    height: 18px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer .left,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer .left,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer .left,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer .left,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer .left {
    display: flex!important;
    flex: 1 1 auto
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-car .content>footer .right,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-motorbike .content>footer .right,
.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>footer .right,
.infoBubble>.contentWrapper>core-mt-container mt-add-trailer .content>footer .right,
.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>footer .right {
    display: flex!important;
    flex: 0 0 20px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-car-by-national-code form {
    padding: 0 0 6px 29px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-car-by-national-code form input {
    width: 100%;
    background: 0 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-car-by-national-code form .help-text {
    padding: 14px 0 6px 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-car-by-national-code footer {
    display: flex;
    flex: 1 1 auto;
    border-top: 1px solid #d7d7d7;
    padding: 14px 29px 14px 18px;
    margin-left: 14px;
    color: #51a351;
    font-size: 16px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-car-by-national-code footer a,
.infoBubble>.contentWrapper>core-mt-container mt-add-car-by-national-code footer input {
    background: 0 0;
    border: none;
    padding: 0;
    margin-left: 20px;
    outline: 0
}

.infoBubble>.contentWrapper>core-mt-container mt-add-car-by-national-code footer a:first-child,
.infoBubble>.contentWrapper>core-mt-container mt-add-car-by-national-code footer input:first-child {
    margin-left: 0
}

.infoBubble>.contentWrapper>core-mt-container mt-car-input-by-dimension .max-size-label {
    font-size: 12px
}

.infoBubble>.contentWrapper>core-mt-container mt-car-input-by-dimension .infos {
    margin: 10px 0 25px 0
}

.infoBubble>.contentWrapper>core-mt-container mt-car-input-by-dimension .no-margin {
    margin: 0
}

.infoBubble>.contentWrapper>core-mt-container mt-car-input-by-national-code .custom-flex-row {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    color: #222
}

.infoBubble>.contentWrapper>core-mt-container mt-car-input-by-national-code mat-error {
    margin-top: 2px!important
}

.infoBubble>.contentWrapper>core-mt-container mt-car-eurotax-properties .euro-tax-row {
    display: flex;
    flex-flow: column;
    line-height: 1.4;
    color: #222;
    margin: 10px 0;
    background: #d7d7d7;
    margin-left: -32px;
    margin-right: -29px;
    padding: 15px 29px 15px 32px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section {
    padding: 0 29px 29px 32px!important
}

.infoBubble>.contentWrapper>core-mt-container mt-add-or-edit-special-vehicle .content>section .description {
    line-height: 1.4;
    display: flex;
    flex-flow: column;
    color: #222;
    margin: 0 0 10px 0;
    background: #d7d7d7;
    margin-left: -32px;
    margin-right: -29px;
    padding: 15px 29px 15px 32px
}

.infoBubble>.contentWrapper>core-mt-container mt-add-vehicle .content>section {
    padding: 5px 29px 5px 32px!important
}

.infoBubble>.contentWrapper>core-mt-container mt-choose-input-type .content header {
    font-size: 18px;
    padding: 23px 29px 19px 32px;
    border-bottom: 1px solid #d7d7d7;
    font-weight: lighter
}

.infoBubble>.contentWrapper>core-mt-container mt-choose-input-type .content>section {
    margin: 0 0 23px 0
}

.infoBubble>.contentWrapper>core-mt-container mt-choose-input-type .content .input-type-entry {
    background-color: #fff;
    padding: 14px 29px 14px 32px;
    line-height: 1.1em;
    border-bottom: 1px solid #d7d7d7;
    color: #000;
    width: 100%;
    font-size: 16px
}

.infoBubble>.contentWrapper>core-mt-container mt-choose-input-type .content .input-type-entry ts-icon {
    float: right
}

.infoBubble>.contentWrapper>core-mt-container mt-choose-input-type .content .input-type-entry:hover {
    background-color: #d7d7d7
}

.infoBubble>.contentWrapper>core-mt-container mt-go-back-button>div {
    margin-top: 20px;
    margin-left: 10px;
    margin-bottom: -10px
}

.infoBubble>.contentWrapper>core-mt-container mt-go-back-button>div span {
    font-size: 14px
}

.infoBubble.noBubble>.contentWrapper mt-container mt-add-car-by-national-code footer .left {
    display: flex!important
}

limiting-profile-modal {
    background-color: #fff
}

limiting-profile-modal .header {
    font-size: 24px
}

limiting-profile-modal .content .row {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center
}

limiting-profile-modal .content .row .image {
    margin-left: 10px;
    margin-right: 10px
}

limiting-profile-modal .content .button {
    margin-top: 20px;
    font-weight: 700;
    text-align: right;
    margin-right: 20px;
    font-size: 16px;
    cursor: pointer
}

user-account .user-account {
    border-bottom: 1px solid #484848
}

user-account .user-account .user-account-block {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 17px
}

@media (min-width:380px) {
    user-account .user-account .user-account-block {
        padding-top: 0
    }
}

user-account .user-account .user-account-block .icon-block {
    min-width: 55px;
    padding-top: 12px;
    display: flex;
    justify-content: center
}

user-account .user-account .user-account-block .icon-block .default-non-person {
    fill: #e37500
}

user-account .user-account .user-account-block .content-block {
    width: 250px;
    padding-right: 15px
}

user-account .user-account .user-account-block .content-block .greeting {
    color: #f0aa41;
    height: 14px
}

user-account .user-account .user-account-block .content-block .greeting.logged-in {
    color: #9182be
}

user-account .user-account .user-account-block .content-block .name {
    font-size: 20px;
    color: #e37500;
    text-overflow: ellipsis;
    overflow: hidden
}

user-account .user-account .user-account-block .content-block .name.logged-in {
    color: #9182be
}

user-account .user-account .user-account-block .content-block .description {
    color: #868686;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 10px
}

user-account .user-account .user-account-block .content-block .description.not-logged-in {
    width: 200px;
    white-space: normal;
    margin-bottom: 5px
}

user-account .user-account .user-account-block .content-block .account-link-side-by-side {
    display: flex;
    justify-content: space-between;
    width: 100%
}

user-account.avc-menu-item .user-account .user-account-block .icon-block {
    min-width: 65px
}

user-account.avc-menu-item .user-account .user-account-block .icon-block .default-non-person {
    fill: #9182be
}

user-account.avc-menu-item .user-account .user-account-block .content-block .name {
    color: #9182be
}

user-account.avc-menu-item .user-account .user-account-block .account-links .account-link .default-non-person {
    color: #9182be
}

user-account.avc-menu-item .user-account .user-account-block .account-links .account-link .account-link-inner .default-non-person {
    fill: #9182be
}

user-account.avc-menu-item .user-account .additional-info-section {
    background-color: #fff;
    padding: 16px;
    margin: 0 16px 16px 16px;
    color: #868686;
    line-height: 1.25em
}

user-account.avc-menu-item .user-account .additional-info-section .additional-info-title {
    margin-top: 0;
    color: #f89306;
    font-size: 14px;
    font-weight: 700
}

user-account.avc-menu-item .user-account .additional-info-section .additional-info-content {
    width: 100%;
    font-size: 12px
}

user-account.avc-menu-item .open-id-section {
    margin-left: 65px
}

user-account.avc-menu-item .open-id-section .realm-input-section {
    width: 225px
}

user-account.avc-menu-item .open-id-section .realm-input-section .mat-form-field-label,
user-account.avc-menu-item .open-id-section .realm-input-section input.mat-input-element {
    color: #fff!important
}

user-account.avc-menu-item .open-id-section .realm-input-section .mat-form-field-label.mat-empty.mat-form-field-empty {
    color: #868686!important
}

user-account.avc-menu-item .open-id-section .realm-input-section .mat-input-element {
    caret-color: #fff
}

user-account.avc-menu-item .open-id-section .realm-input-section .mat-form-field-label:not(.mat-form-field-empty) {
    color: #fff!important
}

user-account.avc-menu-item .open-id-section .realm-input-section .mat-form-field-ripple,
user-account.avc-menu-item .open-id-section .realm-input-section .mat-form-field-underline {
    background-color: #d7d7d7!important
}

user-account.avc-menu-item .open-id-section .realm-input-section .mat-form-field-appearance-legacy .mat-form-field-label {
    color: #868686
}

user-account.avc-menu-item .open-id-section .realm-input-section mat-error {
    margin-bottom: 15px
}

user-account.avc-menu-item .open-id-section .realm-input-section-error {
    width: 225px
}

user-account.avc-menu-item .open-id-section .realm-input-section-error .mat-form-field-label,
user-account.avc-menu-item .open-id-section .realm-input-section-error input.mat-input-element {
    color: #fff!important
}

user-account.avc-menu-item .open-id-section .realm-input-section-error .mat-form-field-label.mat-empty.mat-form-field-empty {
    color: #868686!important
}

user-account.avc-menu-item .open-id-section .realm-input-section-error .mat-input-element {
    caret-color: #cc3432
}

user-account.avc-menu-item .open-id-section .realm-input-section-error .mat-form-field-label:not(.mat-form-field-empty) {
    color: #cc3432!important
}

user-account.avc-menu-item .open-id-section .realm-input-section-error .mat-form-field-ripple,
user-account.avc-menu-item .open-id-section .realm-input-section-error .mat-form-field-underline {
    background-color: #d7d7d7!important
}

user-account.avc-menu-item .open-id-section .realm-input-section-error .mat-form-field-appearance-legacy .mat-form-field-label {
    color: #868686
}

user-account.avc-menu-item .open-id-section .realm-input-section-error mat-error {
    margin-bottom: 15px
}

user-account-action .account-link-inner {
    background-color: transparent;
    border: none;
    display: block;
    outline: 0;
    width: 100%;
    text-align: left;
    padding: 10px 0;
    color: #a0c800
}

user-account-action .account-link-inner:focus,
user-account-action .account-link-inner:hover {
    cursor: pointer
}

user-account-action .account-link-inner:focus .link-text,
user-account-action .account-link-inner:hover .link-text {
    color: #d5ff2f
}

user-account-action .account-link-inner:focus .link-text svg,
user-account-action .account-link-inner:hover .link-text svg {
    fill: #d5ff2f
}

user-account-action .account-link-inner:active .link-text {
    text-decoration: none
}

user-account-action .account-link-inner .link-text {
    padding-left: 4px;
    white-space: nowrap;
    display: inline-block
}

user-account-action .account-link-inner .user-account-action-item {
    color: #a0c800;
    fill: #a0c800
}

off-canvas-menu-item .menu-item {
    display: flex;
    padding: 10px 0 14px;
    border-bottom: 1px solid #484848
}

off-canvas-menu-item .menu-item .icon-block {
    width: 55px;
    min-width: 55px;
    display: flex;
    justify-content: center
}

off-canvas-menu-item .menu-item .icon-block .default-non-person {
    fill: #e37500
}

off-canvas-menu-item .menu-item .menu-item-content {
    width: 210px
}

off-canvas-menu-item .menu-item .menu-item-content .header {
    font-size: 16px
}

off-canvas-menu-item .menu-item .menu-item-content .description {
    margin: 0;
    margin-top: 5px;
    color: #868686;
    white-space: nowrap;
    overflow: hidden
}

off-canvas-menu-item .menu-item .menu-item-content .inner-menu-item-action {
    margin-bottom: 0;
    margin-left: 24px
}

@media (min-width:380px) {
    off-canvas-menu-item .menu-item .menu-item-content {
        width: 250px
    }
    off-canvas-menu-item .menu-item .menu-item-content .header {
        font-size: 18px
    }
}

off-canvas-menu-item:hover {
    background-color: #2a2a2a;
    outline: 0;
    cursor: pointer
}

off-canvas-menu-item.avc-menu-item .menu-item .icon-block {
    width: 65px;
    min-width: 65px
}

off-canvas-menu-item.avc-menu-item .menu-item .icon-block .default-non-person {
    fill: #9182be
}

off-canvas-menu-item.preset-fill-value .menu-item .icon-block .default-non-person {
    fill: #d40027
}

offer-baggage-address-container .address {
    background-color: #f0f0f0;
    padding: 24px 30px 15px 30px;
    border-bottom: 1px solid #d7d7d7
}

offer-baggage-address-container .address .country {
    margin-bottom: 15px
}

offer-baggage-address-container .address .streetZipCityRow .zipCode {
    width: 60px;
    margin: 0 20px
}

offer-baggage-address-container .address .streetZipCityRow .city {
    width: 180px
}

offer-baggage-address-container .dateTime .col1 .col1HeaderWrapper {
    display: flex;
    justify-content: space-between;
    padding-right: 30px
}

offer-baggage-address-container .dateTime .col1 .date {
    width: 110px
}

offer-baggage-address-container .dateTime .col1 .surcharge {
    width: 100%;
    margin: 0 20px
}

offer-baggage-address-container .dateTime .col1 .note {
    color: #868686;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.25;
    text-align: justify;
    padding-right: 25px
}

.cdk-overlay-pane .hhgb-surcharge-price {
    color: #868686
}

offer-baggage-contact {
    background-color: #f0f0f0;
    display: block;
    padding: 24px 30px 9px 30px
}

offer-baggage-contact .salutation {
    width: 100px
}

offer-baggage-contact .firstName {
    width: 250px;
    margin: 0 20px
}

offer-baggage-contact .lastName {
    width: 250px
}

#rightColumn offer-baggage-container {
    margin: 100px 31px 50px 0;
    max-width: 678px
}

offer-baggage-container {
    display: block
}

offer-baggage-container h1 {
    font-size: 30px;
    font-weight: lighter;
    padding: 0;
    color: #fff;
    background-color: transparent;
    border: none;
    margin-bottom: 20px
}

offer-baggage-container h2 {
    font-size: 18px;
    margin: 0 0 7px 0;
    font-weight: 400
}

offer-baggage-container p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    margin: 0
}

offer-baggage-container .price {
    font-size: 12px;
    font-weight: 400;
    color: #868686;
    margin-top: 3px;
    margin-bottom: 10px
}

offer-baggage-container .hasNoPrice {
    color: #868686
}

offer-baggage-container .perforation {
    flex: 0 0 4px;
    width: 4px;
    max-width: 4px;
    background-image: url(https://tickets-deva.oebb.at/static/images/background/connectionPerforation.svg)
}

offer-baggage-container offer-baggage-address-container .col1,
offer-baggage-container offer-baggage-object .col1 {
    flex: 1;
    padding: 24px 0 9px 30px;
    background-clip: padding-box;
    background-color: #f0f0f0
}

offer-baggage-container offer-baggage-address-container .col2,
offer-baggage-container offer-baggage-object .col2 {
    text-align: right;
    background-color: #fff;
    flex: 0 0 143px;
    width: 143px;
    max-width: 143px;
    padding: 23px 16px 15px 0
}

offer-baggage-container offer-baggage-address-container .col2 h2,
offer-baggage-container offer-baggage-object .col2 h2 {
    font-weight: 400
}

offer-baggage-container .mandatoryInfo {
    color: #fff;
    font-size: 18px;
    text-align: right;
    margin-top: 20px
}

offer-baggage-data .baggageMissingInfo {
    padding: 15px 30px;
    background: #f0f0f0;
    border-bottom: 1px solid #d7d7d7
}

offer-baggage-data .baggageMissingInfo p {
    color: #cc3432
}

offer-baggage-data .userConfirmationForBaggages {
    display: flex;
    padding: 15px 30px;
    background: #f0f0f0;
    border-top: 1px solid #d7d7d7
}

offer-baggage-data .userConfirmationForBaggages.error .col1 svg {
    fill: #cc3432
}

offer-baggage-data .userConfirmationForBaggages.error .col2 {
    color: #cc3432
}

offer-baggage-data .userConfirmationForBaggages .col2 {
    margin-left: 10px;
    color: #868686;
    font-size: 12px;
    line-height: 1.25;
    text-align: justify
}

offer-baggage-data .userConfirmationForBaggages .col2 a {
    text-decoration: underline
}

offer-baggage-object {
    display: flex;
    border-bottom: 1px solid #d7d7d7
}

offer-baggage-object>.col1 mat-form-field {
    width: 40px
}

offer-free-seat-button {
    margin-right: 15px
}

offer-free-seat-button>button[circle-count]:after {
    top: -10px;
    right: -10px
}

offer-free-seat-button img {
    vertical-align: bottom
}

offer-free-seat-button .dark {
    margin-left: 15px
}

offer-free-seat-button .dark svg * {
    fill: #222!important;
    color: #222!important
}

offer-free-seat-data {
    display: flex;
    justify-content: center;
    align-items: center
}

offer-free-seat-data>.innerWrapper {
    border: 1px solid #d7d7d7;
    background-color: #fff;
    height: 90vh;
    width: 93vw;
    overflow-y: auto
}

offer-free-seat-data>.innerWrapper>header {
    display: flex;
    padding: 13px 19px;
    position: relative
}

offer-free-seat-data>.innerWrapper>header>h1 {
    font-size: 16px;
    flex: 1 1 auto
}

offer-free-seat-data>.innerWrapper>header>.closeBtn {
    flex: 0 1 auto;
    padding: 12px
}

offer-free-seat-data>.innerWrapper>header>.expandBtn {
    flex: 0 1 auto;
    padding: 12px;
    vertical-align: middle;
    background-color: #70a629;
    color: #fff
}

offer-free-seat-data>.innerWrapper>section {
    margin: 0 19px;
    border: 1px solid #d7d7d7
}

offer-free-seat-data>.innerWrapper>section table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0
}

offer-free-seat-data>.innerWrapper>section table tbody.collapsed tr.collapsible {
    display: none
}

offer-free-seat-data>.innerWrapper>section table tbody.collapsed .flip {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

offer-free-seat-data>.innerWrapper>section table tbody .selected {
    background-color: #e6e6e6
}

offer-free-seat-data>.innerWrapper>section table tbody .pull-right {
    float: right
}

offer-free-seat-data>.innerWrapper>section table th {
    font-size: 12px;
    padding: 6px;
    border: 1px solid #d7d7d7;
    text-align: center;
    background: linear-gradient(white, #d7d7d7)
}

offer-free-seat-data>.innerWrapper>section table th:first-of-type {
    text-align: left
}

offer-free-seat-data>.innerWrapper>section table td {
    font-size: 12px;
    padding: 6px;
    text-align: center;
    border: 1px solid #d7d7d7
}

offer-free-seat-data>.innerWrapper>section table td:first-of-type {
    text-align: left
}

offer-free-seat-data>.innerWrapper>section table td.no-data {
    font-size: 16px;
    color: #e2002a;
    background-color: #f0f0f0
}

offer-free-seat-data>.innerWrapper>section table .short {
    width: 110px
}

jp-tourist-specials .carouse-container {
    position: relative;
    min-height: 5px;
    height: auto;
    max-width: 678px;
    margin: 0 0 0 286px
}

@media (max-width:1024px) {
    jp-tourist-specials .carouse-container {
        margin: 0 14px 0 286px
    }
}

@media (max-width:860px) {
    jp-tourist-specials .carouse-container {
        margin: 0 14px 0 174px
    }
}

@media (max-width:720px) {
    jp-tourist-specials .carouse-container {
        margin: 0;
        width: 100%
    }
}

@media (max-width:479px) {
    jp-tourist-specials .carouse-container {
        margin: 0;
        width: 100%
    }
}

jp-tourist-specials .carouse-container .current-item {
    background: linear-gradient(to top, #444 0, #222 100%);
    padding: 0 30px
}

jp-tourist-specials .carouse-container .previous-item {
    position: absolute;
    top: 0;
    z-index: 999;
    height: 100%;
    width: 30px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    left: 0
}

jp-tourist-specials .carouse-container .previous-item div {
    height: 30px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

jp-tourist-specials .carouse-container .previous-item:hover {
    opacity: .75
}

jp-tourist-specials .carouse-container .next-item {
    position: absolute;
    top: 0;
    z-index: 999;
    height: 100%;
    width: 30px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    right: 0
}

jp-tourist-specials .carouse-container .next-item div {
    height: 30px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg)
}

jp-tourist-specials .carouse-container .next-item:hover {
    opacity: .75
}

.extra-item-container-light {
    border-bottom: 1px solid #d7d7d7
}

.extra-item-container-light .link {
    color: #51a351;
    margin: 15px 0
}

.extra-item-container-light .content-section {
    height: 100%;
    min-height: 80px;
    color: #222;
    display: flex
}

.extra-item-container-light .content-section:hover {
    cursor: pointer
}

.extra-item-container-light .content-section:hover .check-box-section,
.extra-item-container-light .content-section:hover .info-section {
    background: #dedede
}

.extra-item-container-light .content-section:hover .price-section {
    background: #fff;
    opacity: .93
}

.extra-item-container-light .content-section .check-box-section {
    padding: 15px 0;
    width: 56px;
    min-width: 56px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    background: #f0f0f0
}

.extra-item-container-light .content-section .check-box-section .mat-checkbox-checked .mat-checkbox-background {
    background: #51a351
}

.extra-item-container-light .content-section.disabled .check-box-section .mat-checkbox-checked .mat-checkbox-background {
    background: #afafaf
}

.extra-item-container-light .content-section .info-section {
    padding: 15px 16px 15px 0;
    width: 100%;
    font-size: 14px;
    word-break: break-word;
    background: #f0f0f0
}

@media screen and (-ms-high-contrast:active),
(-ms-high-contrast:none) {
    .extra-item-container-light .content-section .info-section {
        padding: 16px 16px 16px 0
    }
}

.extra-item-container-light .content-section .info-section h3 {
    font-size: 18px;
    margin: 0 0 10px 0;
    font-weight: 400;
    line-height: 20px
}

.extra-item-container-light .content-section .info-section .note {
    margin: 0;
    font-weight: 400
}

.extra-item-container-light .content-section .info-section .further-info {
    margin: 16px 0!important;
    text-decoration: underline
}

.extra-item-container-light .content-section .info-section .price {
    margin: 8px 0 0 0!important;
    color: #878787;
    font-weight: lighter
}

@media (max-width:869px) {
    .extra-item-container-light .content-section .info-section {
        padding-right: 6px;
        font-size: 12px
    }
}

.extra-item-container-light .content-section .info-section .availability-dates p {
    margin: 16px 0!important
}

.extra-item-container-light .content-section .info-section .availability-dates .dates-container {
    display: flex;
    flex-wrap: wrap
}

.extra-item-container-light .content-section .info-section .availability-dates .dates-container .date {
    width: 55px;
    margin: 0 10px 10px 0
}

.extra-item-container-light .content-section .perforation {
    width: 4px;
    min-width: 4px;
    background-image: url(https://tickets-deva.oebb.at/static/images/background/connectionPerforation.svg)
}

.extra-item-container-light .content-section .price-section {
    padding: 15px 16px 15px 0;
    background: #fff;
    width: 143px;
    min-width: 143px
}

.extra-item-container-light .content-section .price-section h2 {
    font-weight: 400;
    text-align: right;
    font-size: 18px;
    margin: 0
}

@media (max-width:720px) {
    .extra-item-container-light .content-section .price-section h2 {
        font-size: 14px
    }
}

@media (max-width:869px) {
    .extra-item-container-light .content-section .check-box-section {
        width: 50px
    }
    .extra-item-container-light .content-section .info-section h3 {
        font-size: 14px
    }
    .extra-item-container-light .content-section .info-section .acquisition-hint,
    .extra-item-container-light .content-section .info-section .note {
        font-size: 12px
    }
    .extra-item-container-light .content-section .info-section .availability-dates .date {
        width: 45px
    }
    .extra-item-container-light .content-section .price-section {
        min-width: 93px;
        width: 93px
    }
}

.extra-item-container-light .validity-time-range-wrapper {
    margin-top: 10px;
    padding-top: 10px
}

.extra-item-container-light .validity.dates-container {
    margin: 20px 0 10px;
    display: flex
}

.extra-item-container-light .validity.dates-container calendar-sheet {
    margin-right: 10px
}

.extra-item-container-dark {
    border-bottom: 1px solid #d7d7d7
}

.extra-item-container-dark .link {
    color: #51a351;
    margin: 15px 0
}

.extra-item-container-dark .content-section {
    height: 100%;
    min-height: 80px;
    color: #fff;
    display: flex
}

.extra-item-container-dark .content-section:hover {
    cursor: pointer
}

.extra-item-container-dark .content-section:hover .check-box-section,
.extra-item-container-dark .content-section:hover .info-section {
    background: linear-gradient(to top, #444 0, #222 100%)
}

.extra-item-container-dark .content-section:hover .price-section {
    background: linear-gradient(to top, #444 0, #222 100%);
    opacity: .93
}

.extra-item-container-dark .content-section .check-box-section {
    padding: 15px 0;
    width: 56px;
    min-width: 56px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    background: linear-gradient(to top, #444 0, #222 100%)
}

.extra-item-container-dark .content-section .check-box-section .mat-checkbox-checked .mat-checkbox-background {
    background: #51a351
}

.extra-item-container-dark .content-section.disabled .check-box-section .mat-checkbox-checked .mat-checkbox-background {
    background: #afafaf
}

.extra-item-container-dark .content-section .info-section {
    padding: 15px 16px 15px 0;
    width: 100%;
    font-size: 14px;
    word-break: break-word;
    background: linear-gradient(to top, #444 0, #222 100%)
}

@media screen and (-ms-high-contrast:active),
(-ms-high-contrast:none) {
    .extra-item-container-dark .content-section .info-section {
        padding: 16px 16px 16px 0
    }
}

.extra-item-container-dark .content-section .info-section h3 {
    font-size: 18px;
    margin: 0 0 10px 0;
    font-weight: 400;
    line-height: 20px
}

.extra-item-container-dark .content-section .info-section .note {
    margin: 0;
    font-weight: 400
}

.extra-item-container-dark .content-section .info-section .further-info {
    margin: 16px 0!important;
    text-decoration: underline
}

.extra-item-container-dark .content-section .info-section .price {
    margin: 8px 0 0 0!important;
    color: #878787;
    font-weight: lighter
}

@media (max-width:869px) {
    .extra-item-container-dark .content-section .info-section {
        padding-right: 6px;
        font-size: 12px
    }
}

.extra-item-container-dark .content-section .info-section .availability-dates p {
    margin: 16px 0!important
}

.extra-item-container-dark .content-section .info-section .availability-dates .dates-container {
    display: flex;
    flex-wrap: wrap
}

.extra-item-container-dark .content-section .info-section .availability-dates .dates-container .date {
    width: 55px;
    margin: 0 10px 10px 0
}

.extra-item-container-dark .content-section .perforation {
    width: 4px;
    min-width: 4px;
    background-image: url(https://tickets-deva.oebb.at/static/images/background/touristicExtrasPerforation.svg)
}

.extra-item-container-dark .content-section .price-section {
    padding: 15px 16px 15px 0;
    background: linear-gradient(to top, #444 0, #222 100%);
    width: 143px;
    min-width: 143px
}

.extra-item-container-dark .content-section .price-section h2 {
    font-weight: 400;
    text-align: right;
    font-size: 18px;
    margin: 0
}

@media (max-width:720px) {
    .extra-item-container-dark .content-section .price-section h2 {
        font-size: 14px
    }
}

@media (max-width:869px) {
    .extra-item-container-dark .content-section .check-box-section {
        width: 50px
    }
    .extra-item-container-dark .content-section .info-section h3 {
        font-size: 14px
    }
    .extra-item-container-dark .content-section .info-section .acquisition-hint,
    .extra-item-container-dark .content-section .info-section .note {
        font-size: 12px
    }
    .extra-item-container-dark .content-section .info-section .availability-dates .date {
        width: 45px
    }
    .extra-item-container-dark .content-section .price-section {
        min-width: 93px;
        width: 93px
    }
}

.extra-item-container-dark .validity-time-range-wrapper {
    margin-top: 10px;
    padding-top: 10px
}

.extra-item-container-dark .validity.dates-container {
    margin: 20px 0 10px;
    display: flex
}

.extra-item-container-dark .validity.dates-container calendar-sheet {
    margin-right: 10px
}

tourist-specials .extra-items-container .item-block .item-image {
    width: 100%;
    padding: 12px 12px 8px 12px;
    background-color: #f0f0f0;
    position: relative
}

tourist-specials .extra-items-container .item-block .item-image img {
    width: 100%
}

tourist-specials .extra-items-container .item-block .item-image .details {
    position: absolute;
    bottom: 20px;
    right: 20px;
    tab-index: -1;
    color: #fff
}

tourist-specials .extra-items-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 22px 0;
    font-size: 18px;
    font-weight: 400;
    color: #fff
}

tourist-specials .extra-items-footer:hover {
    cursor: pointer
}

tourist-specials .extra-items-footer span {
    margin-right: 8px
}

tourist-specials .extra-items-footer .arrow-white {
    display: block
}

tourist-specials .extra-items-footer .arrow-dark {
    display: none
}

tourist-specials .extra-items-footer.expanded ts-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

@media (max-width:869px) {
    tourist-specials .extra-items-footer {
        color: #222;
        padding-right: 16px
    }
    tourist-specials .extra-items-footer .arrow-white {
        display: none
    }
    tourist-specials .extra-items-footer .arrow-dark {
        display: block
    }
}

tourist-specials .extra-items-header {
    color: #fff;
    font-size: 32px;
    font-weight: 400;
    margin: 38px 0 27px 0
}

@media (max-width:869px) {
    tourist-specials .extra-items-header {
        color: #222;
        margin-left: 16px
    }
}

.summary {
    background-color: #1A3A4A;
    color: #fff;
    padding: 15px 0 15px 24px;
    cursor: pointer
}

.removeFromOrAddToFavorites {
    background-color: #1A3A4A;
    color: #d5ff2f;
    padding: 15px 0 15px 28px;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    display: flex;
    justify-content: left;
    flex-direction: row
}

.removeFromOrAddToFavorites svg {
    margin-right: 15px;
    fill: #d5ff2f
}

.addToFavorites {
    color: #51a351;
    background-color: #fff
}

.addToFavorites svg {
    fill: #51a351
}

.wheelchair ts-icon {
    margin-left: -9px;
    margin-right: 11px!important
}

.centered-entry div {
    display: flex!important;
    align-items: center
}

passenger-list {
    width: 336px
}

passenger-list passenger-list-item>header {
    height: 64px;
    padding: 15px 15px 20px 22px;
    background: #fff;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #d7d7d7
}

passenger-list passenger-list-item>header:hover {
    background-color: #e6e6e6
}

passenger-list passenger-list-item>header .left {
    width: 100%;
    margin-right: 10px
}

passenger-list passenger-list-item>header .left:not(.noPointer) {
    cursor: pointer
}

passenger-list passenger-list-item>header .left .label {
    color: #222
}

passenger-list passenger-list-item>header .left .label .enumeration {
    width: 24px
}

passenger-list passenger-list-item>header .left .label .text {
    max-width: 230px
}

passenger-list passenger-list-item>header .left .subLabel {
    font-size: 12px;
    color: #6a6a6a;
    margin-left: 24px;
    overflow: hidden;
    text-overflow: ellipsis
}

passenger-list passenger-list-item>header .right {
    border-left: 1px solid #d7d7d7;
    width: 43px;
    cursor: pointer
}

passenger-list passenger-list-item>header .right svg {
    fill: #afafaf
}

passenger-list passenger-list-item>header .right ts-icon:hover {
    background-color: #d7d7d7;
    opacity: 1
}

passenger-list passenger-list-item>section {
    background-color: #fff;
    color: #51a351;
    padding-bottom: 20px;
    padding-left: 35px;
    font-size: 16px
}

passenger-list passenger-list-item>section .child {
    padding: 20px 0 0 45px
}

passenger-list passenger-list-item>section .list-row {
    display: flex;
    line-height: 1.4;
    padding: 5px 0;
    cursor: pointer
}

passenger-list passenger-list-item>section .list-row ts-icon {
    margin-right: 15px
}

passenger-list passenger-list-item>section .list-row svg {
    fill: #51a351
}

passenger-list .summary {
    background-color: #1A3A4A;
    color: #fff;
    padding: 15px 0 15px 24px
}

.disabled-card-container {
    width: 449px;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    padding-bottom: 1px
}

.disabled-card-container .header-row {
    display: flex
}

.disabled-card-container .header-row .discount-header {
    background-color: #1A3A4A
}

.disabled-card-container .header-row .discount-header .button-icon {
    padding-right: 20px;
    fill: #fff
}

.disabled-card-container .header-row .discount-header.wide-head {
    padding: 15px 15px 20px 22px;
    width: 80%
}

.disabled-card-container .header-row .discount-header.wide-head .title {
    font-size: 18px;
    color: #fff;
    padding: 0;
    margin: 0
}

.disabled-card-container .header-row .discount-header.wide-head .sub-title {
    font-size: 12px;
    color: #fff;
    padding: 0;
    margin: 0
}

.disabled-card-container .header-row .discount-header.small-head {
    width: 20%;
    background-color: #081C26;
    padding: 20px 4px 20px 22px
}

.disabled-card-container .header-row .discount-header.button {
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding-top: 25px
}

.disabled-card-container .form {
    background-color: #f0f0f0;
    padding-left: 20px
}

.disabled-card-container .form .row {
    margin-left: -20px;
    padding-left: 20px
}

.disabled-card-container .form .row:hover {
    background: #e6e6e6
}

.disabled-card-container .form .row .error-message {
    margin-right: 20px;
    padding-top: 18px;
    padding-bottom: 18px;
    text-align: center
}

.disabled-card-container .form shared-checkbox-button .note {
    margin: 5px 15px 0 2px
}

.closeButton {
    border-left: 1px solid #d7d7d7;
    padding: 4px 4px 4px 15px;
    cursor: pointer
}

.unlimitedHeight {
    height: auto
}

.loading-icon {
    fill: #868686
}

.redCardNumberInput {
    color: #cc3432!important
}

.discountHeaderContainer {
    width: 349px;
    height: 64px;
    overflow: hidden;
    display: flex;
    padding-bottom: 1px;
    flex-direction: row
}

.discountHeaderContainer .discountHeader {
    background-color: #1A3A4A
}

.discountHeaderContainer .discountHeader .buttonIcon {
    padding-right: 20px;
    margin-top: 7px;
    fill: #fff
}

.discountHeaderContainer .discountHeader.wideHead {
    padding: 15px 15px 20px 22px;
    width: 80%
}

.discountHeaderContainer .discountHeader.wideHead .title {
    font-size: 18px;
    color: #fff;
    padding: 0;
    margin: 0
}

.discountHeaderContainer .discountHeader.wideHead .subTitle {
    font-size: 12px;
    color: #fff;
    padding: 0;
    margin: 0
}

.discountHeaderContainer .discountHeader.smallHead {
    width: 20%;
    background-color: #081C26;
    padding: 20px 4px 20px 22px
}

.discountHeaderContainer .discountHeader.button {
    cursor: pointer;
    padding: 21px 25px 25px
}

.discountListingContainer {
    width: 349px;
    display: flex;
    flex-direction: row;
    justify-content: space-around
}

.discountListingContainer .inputContainer {
    width: 100%
}

.discountListingContainer .inputGroup select,
.discountListingContainer .inputGroup>input {
    height: 29px;
    background: rgba(0, 0, 9, 0);
    border: 0;
    border-bottom: 1px solid #afafaf;
    width: 90%;
    color: #000
}

.discountListingContainer .discountListingItem {
    padding: 10px;
    background-color: #f0f0f0
}

.discountListingContainer .discountListingItem.big {
    width: 100%;
    padding: 10px 0 0;
    margin-top: 0
}

.discountListingContainer .discountListingItem .search-icon {
    padding-right: 20px;
    margin-top: 7px;
    fill: rgba(35, 35, 35, .8)
}

.discountListingContainer .discountListingItem .discountEntryList {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto
}

.discountListingContainer .header {
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-top: 10px;
    margin: 15px
}

.discountListingContainer .header .content {
    margin-left: 32px;
    font-size: 14px;
    color: rgba(35, 35, 35, .8);
    padding-top: 10px;
    margin-top: 0
}

.discountListingContainer .header.discountListEntry {
    padding: 18px;
    display: flex;
    width: 100%;
    cursor: pointer;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid #e6e6e6
}

.discountListingContainer .header.discountListEntry:hover {
    background-color: #e6e6e6;
    opacity: .9
}

.discountListingContainer .header.discountListEntry .title {
    color: #afafaf;
    font-size: 14px;
    padding: 0;
    margin: 0
}

.discountListingContainer .header.discountListEntry .cardIcon {
    padding-right: 10px;
    margin-top: 2px;
    fill: #d7d7d7
}

.discountListingContainer .header.addedCard {
    padding: 13px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    width: 100%;
    cursor: pointer;
    margin: 0;
    background-color: #fff;
    border-bottom: 1px solid #bababa
}

.discountListingContainer .header.addedCard:hover {
    background-color: #fff
}

.discountListingContainer .header.addedCard .inputGroup select,
.discountListingContainer .header.addedCard .inputGroup>input {
    height: 29px;
    background: rgba(0, 0, 9, 0);
    border: 0;
    border-bottom: 1px solid #bababa;
    width: 90%;
    color: #bababa
}

.discountListingContainer .header.addedCard .container {
    display: flex
}

.discountListingContainer .header.addedCard .container .left {
    display: flex;
    width: 100%
}

.discountListingContainer .header.addedCard .container .left .title {
    color: #afafaf;
    font-size: 14px;
    padding: 0;
    margin: 0
}

.discountListingContainer .header.addedCard .container .left .cardIcon {
    padding-right: 10px;
    margin-top: 2px;
    fill: #ab0020
}

.discountListingContainer .header.addedCard .container .right {
    display: flex;
    border-left: 1px solid #d7d7d7;
    width: 43px;
    cursor: pointer
}

.discountListingContainer .header.addedCard .container .right svg {
    fill: #afafaf;
    cursor: pointer
}

.discountListingContainer .header.addedCard .container2 {
    margin-left: 30px;
    margin-top: 20px
}

.closeButton {
    border-left: 1px solid #d7d7d7;
    padding: 4px 4px 4px 15px;
    cursor: pointer
}

.unlimitedHeight {
    height: auto
}

.favoritePassengerContainer {
    width: 349px;
    overflow: hidden;
    display: flex;
    flex-direction: row
}

.favoritePassengerContainer .favoritePassenger {
    padding: 10px;
    margin-top: .5px;
    background-color: #1A3A4A
}

.favoritePassengerContainer .favoritePassenger.big {
    width: 349px;
    height: 64px;
    padding: 20px 10px 20px 20px
}

.favoritePassengerContainer .favoritePassenger.unlimitedHeight {
    height: auto
}

.favoritePassengerContainer .favoritePassenger.disabled {
    cursor: no-drop;
    background-color: rgba(35, 35, 35, .8)
}

.favoritePassengerContainer .favoritePassenger .favoritePassengerIcon {
    margin-top: 2px;
    fill: #d7d7d7
}

.favoritePassengerContainer .favoritePassenger .header {
    justify-content: flex-start;
    display: flex
}

.favoritePassengerContainer .favoritePassenger .header.favoriteEntry {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    margin: 0;
    padding-bottom: 0
}

.favoritePassengerContainer .favoritePassenger .header.favoriteEntry .icon {
    fill: #fff;
    cursor: pointer
}

.favoritePassengerContainer .favoritePassenger .header.favoriteEntry.disabled .title {
    color: #7d7d7d!important;
    padding-bottom: 0
}

.favoritePassengerContainer .favoritePassenger .header.favoriteEntry.disabled .plusIcon {
    stroke-width: .5px;
    fill: #7d7d7d!important
}

.favoritePassengerContainer .favoritePassenger .header.favoriteEntry.disabled b {
    color: #7d7d7d
}

.favoritePassengerContainer .favoritePassenger .header.favoriteEntry .left {
    display: flex
}

.favoritePassengerContainer .favoritePassenger .header.favoriteEntry .left .title {
    color: #fff;
    font-size: 16px;
    font-weight: 400
}

.favoritePassengerContainer .favoritePassenger .header.favoriteEntry .left .plusIcon {
    padding-right: 10px;
    margin-top: 2px;
    fill: #fff;
    stroke-width: 1px
}

.favoritePassengerContainer .favoritePassenger .title {
    color: #d7d7d7;
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 0 10px
}

.ageSetterHeaderContainer {
    width: 349px;
    height: 64px;
    overflow: hidden;
    display: flex;
    padding-bottom: 1px;
    flex-direction: row
}

.ageSetterHeaderContainer .setPassengerHeader {
    background-color: #1A3A4A
}

.ageSetterHeaderContainer .setPassengerHeader .buttonIcon {
    padding-right: 20px;
    margin-top: 7px;
    fill: #fff
}

.ageSetterHeaderContainer .setPassengerHeader .buttonIcon {
    padding-right: 20px;
    margin-top: 7px;
    fill: #d7d7d7
}

.ageSetterHeaderContainer .setPassengerHeader.wideHead {
    padding: 15px 15px 20px 22px;
    width: 80%
}

.ageSetterHeaderContainer .setPassengerHeader.wideHead .title {
    font-size: 18px;
    color: #fff;
    padding: 0;
    margin: 0
}

.ageSetterHeaderContainer .setPassengerHeader.wideHead .subTitle {
    font-size: 12px;
    color: #fff;
    padding: 0;
    margin: 0
}

.ageSetterHeaderContainer .setPassengerHeader.smallHead {
    width: 20%;
    background-color: #081C26;
    padding: 20px 4px 20px 22px
}

.ageSetterHeaderContainer .setPassengerHeader.button {
    cursor: pointer;
    padding: 21px 25px 25px
}

.ageSetterHeaderContainer .setPassengerHeader.button.left {
    border-right: 2px solid #1A3A4A;
    padding-top: 25px
}

.ageSetterContainer .setPassengerAge {
    padding: 10px;
    background: #fff
}

.ageSetterContainer .setPassengerAge.big {
    width: 349px;
    height: 64px;
    padding: 20px 10px 20px 20px
}

.ageSetterContainer .setPassengerAge.unlimitedHeight {
    height: auto
}

.ageSetterContainer .setPassengerAge .inputContent {
    display: flex
}

.ageSetterContainer .setPassengerAge.disabled {
    cursor: no-drop;
    background: rgba(95, 95, 95, .95)
}

.ageSetterContainer .setPassengerAge .favoritePassengerIcon {
    margin-top: 2px;
    fill: #d7d7d7
}

.ageSetterContainer .setPassengerAge .header {
    justify-content: flex-start;
    display: flex;
    padding-left: 10px;
    flex-direction: column
}

.ageSetterContainer .setPassengerAge .header .title {
    color: #51a351;
    font-weight: 400;
    margin: 0
}

.ageSetterContainer .setPassengerAge .header .rightLabel {
    display: flex;
    width: 100%;
    margin-top: 16px
}

.ageSetterContainer .setPassengerAge .header .rightLabel p {
    color: #000;
    margin: 5px 0 0 10px;
    width: 70%;
    font-size: 14px
}

.ageSetterContainer .setPassengerAge .header .inputContainer {
    margin-top: 14px;
    margin-left: 0
}

.ageSetterContainer .setPassengerAge .header .inputContainer .ageInput {
    border: 0;
    background: rgba(0, 0, 0, 0);
    border-bottom: 1px solid #d7d7d7;
    color: #000;
    width: 60px
}

.ageSetterContainer .setPassengerAge .header .inputContainer .redLabel {
    color: #cc3432
}

.ageSetterContainer .setPassengerAge .header .content {
    font-size: 14px;
    color: #000;
    margin: 10px 0 0 0;
    width: 70%
}

.ageSetterContainer .setPassengerAge .title {
    color: #d7d7d7;
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 0 10px
}

.passengerItem {
    padding: 10px;
    margin: .5px;
    background-color: #1A3A4A
}

.passengerItem.big {
    width: 349px;
    height: 64px;
    padding: 20px 10px 20px 20px
}

.passengerItem.unlimitedHeight {
    height: auto
}

.passengerItem.noHoverEffect:hover {
    background-color: rgba(35, 35, 35, .8)
}

.passengerItem:hover {
    background-color: rgba(35, 35, 35, .8)
}

.passengerItem.small {
    overflow: hidden;
    overflow-wrap: break-word;
    width: 116px;
    justify-content: space-around;
    height: 77px;
    flex-direction: column;
    cursor: pointer;
    padding: 18px
}

.passengerItem .label {
    padding: 0;
    margin: 0;
    color: #d7d7d7;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    text-align: center
}

.passengerItem .iconContainer {
    display: flex;
    justify-content: space-around
}

.passengerItem .passengerItemIcon {
    fill: #d7d7d7!important
}

.searchbarContainer {
    width: 349px;
    display: flex;
    flex-direction: row;
    justify-content: space-around
}

.searchbarContainer .searchbarItem {
    padding: 10px;
    margin: 1px;
    background-color: #1A3A4A
}

.searchbarContainer .searchbarItem.big {
    width: 100%;
    height: 64px;
    padding-top: 10px;
    margin: 0
}

.searchbarContainer .searchbarItem .search-icon {
    padding-right: 13px;
    margin-top: 7px;
    margin-left: 10px;
    fill: #d7d7d7
}

.searchbarContainer .searchbarItem .header {
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-top: 12px;
    padding-bottom: 15px
}

.searchbarContainer .searchbarItem .header.searchResultEntry {
    padding: 5px 5px 5px 9px;
    display: flex;
    width: 100%;
    cursor: pointer;
    margin: 0
}

.searchbarContainer .searchbarItem .header.searchResultEntry .title {
    color: #d7d7d7;
    padding: 0;
    margin: 4px 0 0
}

.searchbarContainer .searchbarItem .header.searchResultEntry .title.noPersonFound {
    margin: 4px 29px 0
}

.searchbarContainer .searchbarItem .header.searchResultEntry .userIcon {
    padding-right: 10px;
    margin-top: 2px;
    fill: #d7d7d7
}

.searchbarContainer .searchbarItem .header.searchResultEntry.column {
    flex-direction: column
}

.searchbarContainer .searchbarItem .header.disabled {
    color: #e6e6e6;
    opacity: .7;
    cursor: default
}

.searchbarContainer .searchbarItem .header.disabled .userIcon {
    padding-right: 10px;
    margin-top: 2px;
    fill: #e6e6e6;
    opacity: .7
}

.searchbarContainer .searchbarItem .header.favoriteEntry {
    padding-top: 10px;
    display: flex;
    width: 100%;
    cursor: pointer;
    margin: 0;
    padding-bottom: 0
}

.searchbarContainer .searchbarItem .header.favoriteEntry.disabled .title {
    color: #7d7d7d;
    padding-bottom: 0
}

.searchbarContainer .searchbarItem .header.favoriteEntry.disabled .plusIcon {
    stroke-width: .5px;
    fill: #7d7d7d
}

.searchbarContainer .searchbarItem .header.favoriteEntry .title {
    color: #51a351;
    font-size: 16px;
    font-weight: 400
}

.searchbarContainer .searchbarItem .header.favoriteEntry .plusIcon {
    padding-right: 10px;
    margin-top: 2px;
    fill: #51a351;
    stroke-width: 1px
}

.searchbarContainer .searchbarItem .header.favoriteEntry .externPassengerIcon {
    margin-top: 2px;
    fill: #d7d7d7
}

.searchbarContainer .searchbarItem .closeButton {
    border-left: 1px solid #d7d7d7;
    padding: 4px 4px 4px 15px;
    cursor: pointer
}

.searchbarContainer .searchbarItem .closeButton:hover {
    background: rgba(235, 235, 235, .5)
}

.searchbarContainer .searchbarItem.unlimitedHeight {
    height: auto
}

.searchbarContainer .inputContainer {
    width: 100%
}

.searchbarContainer .inputGroup select,
.searchbarContainer .inputGroup>input {
    height: 29px;
    background: rgba(0, 0, 9, 0);
    border: 0;
    border-bottom: 1px solid #d7d7d7;
    width: 90%;
    color: #d7d7d7
}

.searchbarContainer .spinnerContainer {
    text-align: center
}

.space-around {
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    height: 100%
}

.space-around .content-container {
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    height: 100%
}

.space-around .content-container .left-container {
    display: flex;
    height: auto;
    padding: 2px;
    padding-top: 100px;
    overflow-y: scroll;
    margin-bottom: 10px;
    scrollbar-color: transparent transparent
}

.space-around .content-container .left-container.b2b {
    overflow-y: scroll;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none
}

.space-around .content-container .left-container.b2b::-webkit-scrollbar {
    width: 0!important
}

.space-around .content-container .outer-right-container {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    flex-direction: column;
    height: auto;
    top: 0;
    padding: 0 2px;
    scrollbar-color: transparent transparent
}

.space-around .content-container .outer-right-container .right-container {
    flex-direction: column;
    height: auto;
    padding: 2px;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-right: 15px
}

.space-around .content-container .outer-right-container .right-container .top-scroll {
    width: 100%;
    height: 50px;
    background-color: rgba(34, 34, 34, .5);
    display: flex;
    justify-content: space-around
}

.space-around .content-container .outer-right-container .right-container .top-scroll p {
    color: #d7d7d7
}

.space-around .content-container .outer-right-container .right-container .bottom-scroll {
    width: 100%;
    height: 50px;
    background-color: rgba(34, 34, 34, .5);
    display: flex;
    justify-content: space-around
}

.space-around .content-container .outer-right-container .right-container .bottom-scroll p {
    color: #d7d7d7
}

.space-around .passengerItemContainer {
    width: 349px;
    overflow: hidden;
    display: flex;
    flex-direction: row
}

payment-post-address .post-address-card {
    margin-top: 18px;
    padding: 7px 30px;
    background-color: #f0f0f0
}

payment-post-address .post-address-card .collapsibleBoxHeader {
    display: flex;
    position: relative
}

payment-post-address .post-address-card .collapsibleBoxHeader h3 {
    margin-left: 10px
}

payment-post-address .post-address-card .collapsibleBoxHeader .collapsible-header-arrow {
    position: absolute;
    right: 10px;
    top: 18px
}

payment-post-address .post-address-card .business-vs-personal-container {
    margin-bottom: 12px
}

payment-post-address .post-address-card .business-vs-personal-container .private-address-type {
    margin-bottom: 7px
}

payment-post-address .post-address-card .twoColumns {
    display: flex;
    justify-content: space-between
}

payment-post-address .post-address-card .twoColumns .column {
    width: 48%
}

payment-post-address .post-address-card .zipCode {
    width: 80px;
    margin-right: 20px
}

payment-post-address .post-address-card .city {
    width: 167px
}

payment-post-address .post-address-card .buttons a,
payment-post-address .post-address-card .buttons span {
    font-size: 16px;
    font-weight: 400;
    color: #51a351;
    line-height: 1.1em;
    margin-right: 30px
}

@media (max-width:480px) {
    payment-post-address .post-address-card .buttons a,
    payment-post-address .post-address-card .buttons span {
        margin-right: 15px;
        display: block;
        margin-bottom: 2px;
        padding: 2px 0 2px 12px
    }
}

payment-post-address .post-address-card .buttons a:focus,
payment-post-address .post-address-card .buttons a:hover,
payment-post-address .post-address-card .buttons span:focus,
payment-post-address .post-address-card .buttons span:hover {
    color: #6fb86f
}

payment-post-address .post-address-card .buttons a:active,
payment-post-address .post-address-card .buttons span:active {
    color: #91c991
}

payment-post-address .post-address-card .buttons a[disabled],
payment-post-address .post-address-card .buttons span[disabled] {
    color: #222
}

payment-post-address .post-address-card .buttons a[disabled]>label,
payment-post-address .post-address-card .buttons span[disabled]>label {
    color: #222
}

avc-payment {
    width: 100%
}

avc-payment,
ts-payment {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    z-index: 10;
    position: relative
}

avc-payment>section,
ts-payment>section {
    flex: 1 1;
    overflow-x: hidden;
    margin: 0;
    display: flex;
    flex-direction: column
}

@media (min-width:719px) {
    avc-payment>section,
    ts-payment>section {
        padding: 0 32px 0 135px
    }
}

@media (min-width:859px) {
    avc-payment>section,
    ts-payment>section {
        padding: 0 32px 0 148px
    }
}

@media (min-width:1023px) {
    avc-payment>section,
    ts-payment>section {
        padding: 0 60px 0 286px
    }
}

@media (min-width:1279px) {
    avc-payment>section,
    ts-payment>section {
        padding: 0 152px 0 430px
    }
}

@media (min-width:1439px) {
    avc-payment>section,
    ts-payment>section {
        padding: 0 312px 0 430px
    }
}

@media (min-width:480px) {
    avc-payment>section .shoppingcart-item-wrapper:first-of-type,
    ts-payment>section .shoppingcart-item-wrapper:first-of-type {
        margin-top: 32px
    }
}

english-booking-confirmation {
    padding: 15px 50px;
    background-color: #f0f0f0;
    display: flex;
    cursor: pointer
}

english-booking-confirmation .col1 {
    width: 50px
}

english-booking-confirmation .col1 .mat-checkbox-frame {
    border-color: #51a351
}

english-booking-confirmation .col2 {
    font-size: 14px;
    color: #51a351
}

payment-mobility-text {
    display: block;
    position: relative;
    margin: 0;
    padding: 26px 32px 20px 32px;
    background-color: #f0f0f0
}

@media (min-width: 870px) {
    payment-mobility-text {
        margin: 72px 0
    }
}

payment-mobility-text h2 {
    font-size: 24px;
    font-weight: 400;
    color: #222;
    margin-top: 0;
    margin-bottom: 10px
}

payment-mobility-text p {
    font-size: 12px;
    font-weight: 400;
    color: #222;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.4em
}

payment-mobility-text p>svg {
    float: left
}

payment-mobility-text p.wheelchairInfo svg {
    fill: #51a351
}

payment-mobility-text p.wheelchairInfo a {
    color: #51a351
}

payment-mobility-text p span {
    display: block;
    padding: 6px 6px 6px 25px
}

tax-certificate {
    padding: 15px 50px;
    background-color: #f0f0f0;
    display: flex;
    cursor: pointer
}

tax-certificate .col1 {
    width: 50px
}

tax-certificate .col1 .mat-checkbox-frame {
    border-color: #51a351
}

tax-certificate .col2 {
    font-size: 14px;
    color: #51a351
}

tax-certificate .col2 .row1 {
    margin-bottom: 7px
}

tax-certificate .col2 .row2 {
    font-size: 12px
}

shoppingcart-summary .total {
    background-color: #fff;
    position: relative
}

shoppingcart-summary-buttons {
    padding: 13px 16px 13px 20px;
    background-color: #f0f0f0;
    background-clip: padding-box;
    line-height: 1.5;
    display: block
}

shoppingcart-summary-buttons>button {
    position: relative
}

shoppingcart-summary-buttons button,
shoppingcart-summary-buttons>span {
    font-size: 16px;
    font-weight: 400;
    color: #51a351;
    line-height: 1.1em;
    margin-right: 30px
}

@media (max-width:480px) {
    shoppingcart-summary-buttons button,
    shoppingcart-summary-buttons>span {
        margin-right: 15px;
        display: block;
        margin-bottom: 2px;
        padding: 2px 0 2px 12px
    }
}

shoppingcart-summary-buttons button:focus,
shoppingcart-summary-buttons button:hover,
shoppingcart-summary-buttons>span:focus,
shoppingcart-summary-buttons>span:hover {
    color: #6fb86f
}

shoppingcart-summary-buttons button:active,
shoppingcart-summary-buttons>span:active {
    color: #91c991
}

shoppingcart-summary-buttons button[disabled],
shoppingcart-summary-buttons>span[disabled] {
    color: #868686
}

shoppingcart-summary-buttons button[disabled]>label,
shoppingcart-summary-buttons>span[disabled]>label {
    color: #868686
}

shoppingcart-summary-buttons .loading-wrapper {
    background-color: #f0f0f0
}

shopping-cart-summary-price-row>.value {
    text-align: right;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    border-bottom: 1px solid #afafaf
}

@media (min-width:480px) {
    shopping-cart-summary-price-row>.value {
        font-size: 16px
    }
}

@media (min-width: 870px) {
    shopping-cart-summary-price-row>.value {
        font-size: 18px
    }
}

shopping-cart-summary-price-row>.value>.left {
    line-height: 1;
    text-align: left;
    flex: 1 1;
    padding: 9px 16px 10px 16px
}

@media (min-width:480px) {
    shopping-cart-summary-price-row>.value>.left {
        text-align: right
    }
}

shopping-cart-summary-price-row>.value>.left a {
    text-decoration: underline;
    font-size: 14px;
    font-weight: 400;
    color: #6a6a6a;
    line-height: 1.1em;
    cursor: pointer
}

shopping-cart-summary-price-row>.value>.left a:focus,
shopping-cart-summary-price-row>.value>.left a:hover {
    color: #9d9d9d
}

shopping-cart-summary-price-row>.value>.left a:active {
    color: #d0d0d0
}

shopping-cart-summary-price-row>.value>.perforation {
    width: 4px;
    background: url(https://tickets-deva.oebb.at/static/images/background/paymentPerforation.svg)
}

shopping-cart-summary-price-row>.value>.right {
    padding: 9px 16px 10px 0;
    box-sizing: content-box;
    flex: 0 1 100px;
    white-space: nowrap
}

@media (min-width:480px) {
    shopping-cart-summary-price-row>.value>.right {
        flex: 0 1 127px
    }
}

@media (max-width:479px) {
    shopping-cart-summary-price-row>.value>.right {
        padding: 9px 16px 10px 15px;
        flex: 0 1 69px
    }
}

@media (max-width:380px) {
    shopping-cart-summary-price-row>.value>.right {
        flex: 0 1 49px
    }
}

shopping-cart-add-coupon {
    display: flex;
    justify-content: space-between;
    background-color: #f0f0f0;
    background-clip: padding-box;
    border-bottom: 1px solid #afafaf
}

shopping-cart-add-coupon .removeCoupon {
    flex: 0 0 53px;
    width: 53px;
    padding: 15px 16px 15px 16px;
    font-size: 20px;
    color: #868686
}

shopping-cart-add-coupon .input-wrapper {
    padding-right: 150px;
    display: flex;
    align-items: flex-end;
    flex-flow: column
}

shopping-cart-add-coupon .input-wrapper mat-form-field {
    margin-top: 10px
}

shopping-cart-add-coupon .input-wrapper mat-error {
    margin-top: -10px;
    margin-bottom: 10px;
    font-size: 12px;
    padding-left: 20px
}

@media (max-width:479px) {
    shopping-cart-add-coupon {
        justify-content: flex-start
    }
    shopping-cart-add-coupon .removeCoupon {
        flex: 0 0 48px;
        width: 48px
    }
    shopping-cart-add-coupon .input-wrapper {
        padding-left: 20px;
        padding-right: 20px;
        align-items: flex-start
    }
    shopping-cart-add-coupon .input-wrapper mat-error {
        padding-left: 0
    }
}

shopping-cart-coupon-item {
    display: flex;
    background-color: #f0f0f0;
    background-clip: padding-box;
    border-bottom: 1px solid #afafaf
}

shopping-cart-coupon-item>.input {
    display: flex;
    padding: 0 16px 0 16px;
    font-size: 20px;
    color: #868686;
    align-items: center;
    flex: 0 0 53px
}

@media (max-width:479px) {
    shopping-cart-coupon-item>.input {
        flex: 0 0 48px
    }
}

shopping-cart-coupon-item>.input.remove {
    font-size: 24px
}

shopping-cart-coupon-item>.input.remove img,
shopping-cart-coupon-item>.input.remove svg {
    fill: #878787;
    width: 17px;
    height: 17px
}

shopping-cart-coupon-item>.input .loading {
    margin-left: -3px;
    margin-top: 3px
}

shopping-cart-coupon-item>.data {
    flex: 1 1;
    padding: 16px 16px 16px 20px;
    text-align: right
}

shopping-cart-coupon-item>.data>.code {
    font-weight: 400;
    color: #868686;
    font-size: 16px
}

shopping-cart-coupon-item>.data>.code.error {
    color: #e2002a
}

shopping-cart-coupon-item>.data .initialValue {
    color: #222;
    font-size: 12px
}

shopping-cart-coupon-item>.data .no-discount {
    color: #e2002a
}

shopping-cart-coupon-item>.data .redemptionDetails a {
    font-size: 12px;
    text-decoration: underline
}

shopping-cart-coupon-item>.data .value {
    color: #51a351;
    font-size: 12px
}

shopping-cart-coupon-item>.price {
    display: flex;
    flex: 0 0 144px;
    background-color: #fff;
    padding: 0 16px 0 0;
    font-size: 14px;
    align-items: center
}

shopping-cart-coupon-item>.price>.text {
    width: 100%;
    text-align: right
}

shopping-cart-coupon-item>.price>.text.green {
    color: #51a351
}

@media (min-width:480px) {
    shopping-cart-coupon-item>.price {
        font-size: 16px
    }
}

@media (min-width: 870px) {
    shopping-cart-coupon-item>.price {
        font-size: 18px
    }
}

@media (max-width:479px) {
    shopping-cart-coupon-item>.price {
        max-width: 100px
    }
}

@media (max-width:380px) {
    shopping-cart-coupon-item>.price {
        max-width: 80px;
        padding-right: 8px
    }
}

payment-box {
    position: relative;
    margin: 18px 0 0 0;
    padding: 26px 0 20px 32px;
    background-color: #f0f0f0;
    display: block
}

payment-box payment-business-unit,
payment-box payment-email,
payment-box payment-external-transaction-number {
    margin: 0 0 28px 0;
    display: block
}

@media (max-width:869px) {
    payment-box {
        margin-top: 0;
        margin-bottom: 0;
        border-top: 1px solid #afafaf
    }
}

payment-box h2 {
    font-size: 24px;
    font-weight: 400;
    color: #222;
    margin-top: 0;
    margin-bottom: 10px
}

payment-box p {
    font-size: 12px;
    font-weight: 400;
    color: #222;
    margin-top: 0;
    margin-bottom: 20px
}

payment-box p.subtext {
    margin-bottom: 8px
}

payment-box p b {
    font-weight: 700
}

payment-box hr {
    background-color: #afafaf
}

payment-box mat-error {
    font-size: 12px;
    margin-top: -15px;
    margin-bottom: 15px
}

payment-box mat-form-field {
    width: 250px
}

payment-box mat-form-field .mat-input-element {
    color: #868686;
    font-size: 16px
}

payment-box payment-create-contractual-offer {
    border-top: 1px solid #d7d7d7;
    padding-top: 20px;
    display: block
}

payment-box-footer .go-to-home-button {
    display: flex
}

@media (min-width: 870px) {
    payment-box-footer .go-to-home-button {
        display: none
    }
}

payment-box-footer .go-to-home-button>.col1 {
    width: 30px;
    padding: 25px 0 0 0
}

@media (min-width: 870px) {
    payment-box-footer .go-to-home-button>.col1 {
        width: 83px;
        padding: 25px 0 0 50px
    }
}

payment-box-footer .go-to-home-button>.col2 {
    padding: 29px 0 2px 0
}

payment-box-footer .go-to-home-button>.col2 a {
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25em;
    color: #508546
}

payment-box-footer .security-info {
    display: flex
}

payment-box-footer .security-info>.col1 {
    width: 23px;
    padding: 25px 0 0 0;
    margin-right: 10px
}

payment-box-footer .security-info>.col2 {
    padding: 29px 29px 20px 0
}

payment-box-footer .security-info>.col2 p {
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25em;
    color: #868686
}

payment-box-footer .security-info>.col2 p a {
    text-decoration: underline
}

payment-create-contractual-offer button {
    background-color: #f0f0f0;
    background-clip: padding-box;
    font-size: 16px;
    font-weight: 400;
    color: #51a351;
    line-height: 1.1em
}

payment-create-contractual-offer-dialog .text-input {
    width: 300px
}

payment-create-contractual-offer-dialog .valid-until-error-when-date-control-is-untouched {
    color: #4a4a4a
}

payment-email {
    display: block
}

payment-email mat-form-field {
    width: 360px;
    max-width: 100%
}

payment-email p {
    margin: 0
}

payment-email p.subtext {
    color: #6a6a6a
}

payment-email-b2b p {
    margin-right: 30px
}

more-payment-methods {
    color: #fff;
    display: block
}

more-payment-methods p {
    text-align: right;
    cursor: pointer
}

more-payment-methods p .arrow-wrapper {
    margin-left: 5px
}

one-click-method .credit-card-info {
    margin-top: 5px;
    margin-bottom: 10px
}

one-click-method .paying-with-favorite {
    display: flex;
    justify-content: space-between
}

one-click-method .paying-with-favorite .min-width-svg-20px svg {
    min-width: 20px;
    padding-right: 1em!important;
    max-width: 100px
}

one-click-method .one-click-payment-wrapper {
    position: relative;
    margin-bottom: 0
}

one-click-methods ul.one-click-methods {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #d7d7d7;
    border-top: 1px solid #d7d7d7
}

one-click-method .payment-method.selected,
payment-method-template .payment-method.selected {
    cursor: default;
    padding-bottom: 20px
}

one-click-method .payment-method.selected .undo,
payment-method-template .payment-method.selected .undo {
    display: block!important
}

one-click-method .payment-method.selected .undo:focus svg,
one-click-method .payment-method.selected .undo:hover svg,
payment-method-template .payment-method.selected .undo:focus svg,
payment-method-template .payment-method.selected .undo:hover svg {
    fill: #a1a1a1;
    color: #a1a1a1
}

one-click-method .payment-method.selected .undo:active svg,
payment-method-template .payment-method.selected .undo:active svg {
    fill: #bababa;
    color: #bababa
}

one-click-method .payment-method>.col1,
payment-method-template .payment-method>.col1 {
    float: left;
    width: 63px;
    padding: 24px 0 0 8px
}

@media (min-width:480px) {
    one-click-method .payment-method>.col1,
    payment-method-template .payment-method>.col1 {
        width: 63px;
        padding: 24px 0 0 8px
    }
}

one-click-method .payment-method>.col2,
payment-method-template .payment-method>.col2 {
    padding-top: 26px;
    overflow: visible;
    margin-left: 63px
}

one-click-method .payment-method>.col2 h2,
payment-method-template .payment-method>.col2 h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25em
}

one-click-method .payment-method>.col2 h2 svg,
payment-method-template .payment-method>.col2 h2 svg {
    float: right;
    padding-right: 32px
}

one-click-method .payment-method>.col2 .undo,
payment-method-template .payment-method>.col2 .undo {
    display: none;
    float: right;
    margin-right: 30px
}

one-click-method .payment-method>.col2 p,
payment-method-template .payment-method>.col2 p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25em;
    margin-right: 86px
}

payment-method-list one-click-methods,
payment-method-list ul.payment-methods {
    position: relative;
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #d7d7d7;
    border-top: 1px solid #d7d7d7
}

payment-method-list one-click-methods .loading-wrapper,
payment-method-list ul.payment-methods .loading-wrapper {
    background: #f0f0f0
}

payment-method-list one-click-methods.is-zero-price,
payment-method-list ul.payment-methods.is-zero-price {
    border-bottom: none
}

payment-method-list one-click-methods>li,
payment-method-list ul.payment-methods>li {
    min-height: 90px;
    overflow: visible;
    border-bottom: 1px solid #d7d7d7;
    padding: 0;
    cursor: pointer
}

payment-method-list one-click-methods>li:last-child,
payment-method-list ul.payment-methods>li:last-child {
    padding-bottom: 1px;
    border-bottom: none
}

payment-method-list one-click-methods>li:focus:not(.selected),
payment-method-list one-click-methods>li:hover:not(.selected),
payment-method-list ul.payment-methods>li:focus:not(.selected),
payment-method-list ul.payment-methods>li:hover:not(.selected) {
    background-color: #dedede
}

payment-credit-card-method iframe {
    width: 100%;
    max-height: 7em;
    height: 7em
}

@media (min-width: 870px) {
    payment-credit-card-method iframe {
        max-height: 6em;
        height: 6em
    }
}

payment-credit-card-method .loading {
    font-size: 12px;
    color: #6a6a6a
}

payment-credit-card-method>.col2>h2>.error-text {
    margin-bottom: 10px!important;
    margin-top: 0!important;
    color: #d63d00!important
}

payment-credit-card-moto-method iframe {
    width: 100%;
    max-height: 3em;
    height: 3em
}

payment-credit-card-moto-method .loading {
    font-size: 12px;
    color: #6a6a6a
}

payment-credit-card-moto-method>.col2>p.errorText {
    margin-bottom: 10px!important;
    margin-top: 0!important;
    color: #d63d00!important
}

payment-business-school-card-method form .card-hint-wrapper {
    min-height: 34px;
    padding: 0
}

payment-business-school-card-method form .card-hint-wrapper p {
    padding: 0;
    margin: 0
}

payment-business-school-card-method form .number-input {
    width: 252px
}

payment-business-school-card-method form .pin-input {
    width: 100px;
    margin-left: 10px
}

payment-business-school-card-method form .note-input {
    width: 363px
}

payment-cash-method {
    padding-bottom: 0
}

payment-cash-method .content {
    margin-top: 20px
}

payment-cash-method .content .cash-notes {
    width: 250px
}

payment-cash-method .content .cash-input {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px)
}

payment-cash-method .content .cash-input h2 {
    margin-top: 7px
}

payment-cash-method .content .cash-input mat-form-field {
    width: 80px;
    margin-top: -20px;
    margin-bottom: -15px
}

payment-cash-method .content .cash-input mat-form-field input {
    text-align: right
}

payment-cash-method .content .cash-input mat-error {
    text-align: right;
    margin-top: 0
}

payment-cash-method .content .cash-input .label {
    margin-right: 20px
}

payment-cash-method .content .cash-input .returned-cash {
    width: 100%;
    text-align: right
}

payment-cash-method .content button.cash-note {
    margin-right: 8px;
    width: 45px;
    background-color: #51a351;
    border: 1px solid #508546;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 2px;
    display: inline-block
}

payment-cash-method .lesser-than-price {
    font-size: 12px;
    margin-top: 10px
}

payment-save-favorite {
    display: flex
}

payment-save-favorite mat-checkbox {
    margin-left: 10px
}

payment-save-favorite mat-checkbox .mat-checkbox-frame {
    border-color: #51a351
}

payment-save-favorite>.text-wrapper {
    margin-left: 15px
}

payment-save-favorite>.text-wrapper>p {
    margin-bottom: 10px
}

payment-save-favorite>.text-wrapper>p.title {
    font-size: 14px;
    color: #51a351;
    margin-right: 60px
}

payment-save-favorite>.text-wrapper>p.text {
    font-size: 12px;
    color: #868686;
    margin-right: 60px
}

refund-box {
    display: block;
    position: relative;
    margin: 18px 0 0 0;
    padding: 26px 0 20px 32px;
    background-color: #f0f0f0
}

@media (max-width:869px) {
    refund-box {
        margin-top: 0;
        margin-bottom: 0;
        border-top: 1px solid #afafaf
    }
}

refund-box>div {
    padding-right: 32px
}

refund-box mat-error {
    font-size: 12px;
    margin-top: -15px;
    margin-bottom: 15px
}

refund-box mat-form-field {
    width: 250px
}

refund-box mat-form-field .mat-input-element {
    color: #868686;
    font-size: 16px
}

refund-box h2 {
    font-size: 24px;
    font-weight: 400;
    color: #222;
    margin-top: 0;
    margin-bottom: 10px
}

refund-box p {
    font-size: 12px;
    font-weight: 400;
    color: #222;
    margin-top: 0;
    margin-bottom: 20px
}

refund-box hr {
    background-color: #afafaf
}

refund-box .refund-methods {
    position: relative
}

refund-box .refund-methods .refund-method {
    display: block;
    border-bottom: 1px solid #d7d7d7;
    cursor: pointer
}

refund-box .refund-methods .refund-method:last-child {
    border: none
}

refund-box .refund-methods.isSelectedSomething .refund-method {
    cursor: initial
}

refund-box .loading-wrapper {
    background: #f0f0f0
}

refund-manual-component .manual-fields-wrapper {
    display: flex;
    margin-right: 50px
}

refund-manual-component .manual-fields-wrapper mat-form-field {
    width: 215px
}

refund-manual-component .manual-fields-wrapper .zip-code-input {
    width: 65px
}

refund-manual-component .manual-fields-wrapper .city-input {
    width: 150px
}

refund-method-template {
    display: flex;
    align-items: center
}

refund-method-template .icon {
    flex: 0 0 70px;
    margin-bottom: auto!important;
    margin-top: 15px!important
}

refund-method-template .content {
    flex: 1 1 auto
}

refund-method-template .content h3 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px
}

refund-method-template .action {
    flex: 0 0 20px
}

airplus-payment-form .airplus-info-text {
    margin-top: 2px;
    margin-left: .7rem
}

airplus-payment-form .airplus-card-input {
    width: 100%
}

airplus-payment-form .airplus-card-input .input-container {
    width: 45%
}

airplus-payment-form .airplus-card-input .row-2-columns {
    width: 100%;
    padding-right: 35px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

airplus-payment-form .airplus-hint-wrapper {
    display: flex;
    font-size: 12px;
    margin-right: 2rem;
    padding: .5rem;
    background: #fff;
    margin-bottom: 2rem;
    color: #64942c
}

payment-footer {
    display: block;
    background-color: #fff;
    box-shadow: 0 4px 13px 4px rgba(0, 0, 0, .75);
    position: relative
}

payment-footer .footer-wrapper {
    flex: 0 1 auto;
    display: flex;
    min-height: 70px;
    flex-direction: row
}

payment-footer .footer-wrapper payment-footer-price-negative,
payment-footer .footer-wrapper payment-footer-price-positive {
    align-self: center
}

payment-footer .footer-wrapper payment-footer-icon {
    min-height: 70px
}

@media (min-width:479px) {
    payment-footer .footer-wrapper {
        margin: 0
    }
}

@media (min-width:859px) {
    payment-footer .footer-wrapper {
        margin: 0 49px 0 148px
    }
}

@media (min-width:1023px) {
    payment-footer .footer-wrapper {
        margin: 0 76px 0 286px
    }
}

@media (min-width:1279px) {
    payment-footer .footer-wrapper {
        margin: 0 168px 0 430px
    }
}

@media (min-width:1439px) {
    payment-footer .footer-wrapper {
        margin: 0 328px 0 430px
    }
}

payment-footer .footer-wrapper .col1 {
    flex: 0 0 56px;
    text-align: right
}

payment-footer .footer-wrapper .col2 {
    flex: 1 1
}

payment-footer .footer-wrapper .col2 p {
    font-size: 12px;
    color: #6a6a6a;
    padding-right: 10px
}

@media (min-width:480px) {
    payment-footer .footer-wrapper .col2 p {
        font-size: 16px
    }
}

payment-footer .footer-wrapper h2 {
    font-size: 14px
}

payment-footer .footer-wrapper .col2 h2,
payment-footer .footer-wrapper h2.col2 {
    font-size: 14px;
    padding-right: 10px;
    color: #ed6f00;
    fill: #ed6f00;
    font-weight: 400
}

payment-footer .footer-wrapper .col2 h2.info,
payment-footer .footer-wrapper h2.col2.info {
    color: #51a351
}

@media (min-width:480px) {
    payment-footer .footer-wrapper .col2 h2,
    payment-footer .footer-wrapper h2.col2 {
        font-size: 18px
    }
}

payment-footer payment-footer-price-negative,
payment-footer payment-footer-price-positive {
    margin: 10px 0 10px 10px
}

payment-footer payment-footer-price-negative.pointer,
payment-footer payment-footer-price-positive.pointer {
    cursor: pointer
}

payment-footer payment-footer-price-negative h2,
payment-footer payment-footer-price-positive h2 {
    margin: 0
}

payment-footer payment-footer-price-negative p,
payment-footer payment-footer-price-positive p {
    margin: 0 0 8px 0
}

payment-footer payment-footer-price-negative a,
payment-footer payment-footer-price-positive a {
    text-decoration: underline;
    color: #222
}

payment-footer payment-footer-price-negative a:focus,
payment-footer payment-footer-price-negative a:hover,
payment-footer payment-footer-price-positive a:focus,
payment-footer payment-footer-price-positive a:hover {
    color: #afafaf
}

payment-footer-icon {
    display: flex;
    align-content: start
}

payment-footer-icon ts-icon {
    margin: auto;
    height: 25px;
    align-self: center;
    fill: #51a351
}

.payment-footer-button-flex-size {
    flex: 0 0 109px
}

@media (min-width:480px) {
    .payment-footer-button-flex-size {
        flex: 0 0 143px
    }
}

payment-footer-pay-button {
    display: flex;
    flex: 0 0 109px
}

@media (min-width:480px) {
    payment-footer-pay-button {
        flex: 0 0 143px
    }
}

payment-footer-pay-button button {
    color: #fff;
    text-align: center;
    background-color: #ab0020;
    padding: 10px;
    flex: 0 0 109px
}

@media (min-width:480px) {
    payment-footer-pay-button button {
        flex: 0 0 143px
    }
}

payment-footer-pay-button button .price {
    font-weight: 700;
    font-size: 14px
}

@media (min-width: 870px) {
    payment-footer-pay-button button .price {
        font-size: 18px
    }
}

payment-footer-pay-button button span {
    font-size: 12px
}

@media (min-width: 870px) {
    payment-footer-pay-button button span {
        font-size: 16px
    }
}

payment-footer-pay-button button[disabled] {
    background-color: #6a6a6a
}

payment-footer-pay-button button:not([disabled]):hover {
    background-color: #b41a37
}

payment-footer-pay-button button:not([disabled]):active {
    background-color: #9a001d
}

shopping-cart-item-single-ride {
    display: flex
}

shopping-cart-item-single-ride .contractual-button,
shopping-cart-item-single-ride .remove-button {
    display: flex;
    height: 90px;
    width: 53px
}

shopping-cart-item-single-ride .contractual-button:focus,
shopping-cart-item-single-ride .contractual-button:focus-within,
shopping-cart-item-single-ride .contractual-button:hover:not([disabled]),
shopping-cart-item-single-ride .remove-button:focus,
shopping-cart-item-single-ride .remove-button:focus-within,
shopping-cart-item-single-ride .remove-button:hover:not([disabled]) {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

shopping-cart-item-single-ride .contractual-button ts-icon,
shopping-cart-item-single-ride .remove-button ts-icon {
    margin: auto;
    fill: #878787
}

shopping-cart-item-single-ride .connection-wrapper {
    display: flex;
    flex: 1 1;
    position: relative
}

shopping-cart-item-single-ride .connection-wrapper:focus,
shopping-cart-item-single-ride .connection-wrapper:focus-within,
shopping-cart-item-single-ride .connection-wrapper:hover:not([disabled]) {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

shopping-cart-item-single-ride .connection-wrapper:disabled {
    color: #afafaf
}

shopping-cart-item-single-ride .connection-wrapper .time {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 0 0 54px;
    width: 54px;
    max-width: 70px;
    padding: 7px 15px 7px 15px
}

@media (min-width:380px) {
    shopping-cart-item-single-ride .connection-wrapper .time {
        flex: 0 0 70px
    }
}

shopping-cart-item-single-ride .connection-wrapper .time .input {
    white-space: nowrap;
    font-size: 18px;
    font-weight: 400
}

@media (max-width:379px) {
    shopping-cart-item-single-ride .connection-wrapper .time .input {
        font-size: 14px
    }
}

shopping-cart-item-single-ride .connection-wrapper .time .input.departure {
    padding-bottom: 2px;
    padding-top: 1px
}

@media (min-width:380px) {
    shopping-cart-item-single-ride .connection-wrapper .time .input.departure {
        padding-top: 0
    }
}

shopping-cart-item-single-ride .connection-wrapper .time .input.arrival {
    justify-content: flex-start;
    padding-top: 18px
}

@media (min-width:380px) {
    shopping-cart-item-single-ride .connection-wrapper .time .input.arrival {
        padding-top: 5px
    }
}

shopping-cart-item-single-ride .connection-wrapper .time .cart-heading {
    font-size: 12px;
    color: #868686;
    margin-bottom: -3px;
    padding-left: 2px;
    white-space: nowrap
}

shopping-cart-item-single-ride .connection-wrapper .connection {
    text-align: center;
    line-height: 90px;
    flex: 0 0 42px;
    width: 42px;
    max-width: 42px;
    margin-left: -5px
}

@media (max-width:479px) {
    shopping-cart-item-single-ride .connection-wrapper .connection {
        flex: 0 0 28px;
        width: 28px;
        max-width: 28px
    }
}

shopping-cart-item-single-ride .connection-wrapper .connection svg {
    vertical-align: middle
}

shopping-cart-item-single-ride .connection-wrapper .station {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1 1 30px;
    min-width: 30px;
    width: 30px;
    padding: 0 10px 0 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    height: 92px
}

@media (min-width: 870px) {
    shopping-cart-item-single-ride .connection-wrapper .station {
        flex: 1 1;
        max-width: none
    }
}

shopping-cart-item-single-ride .connection-wrapper .station .cancelledTitle {
    position: absolute;
    top: 6px;
    left: 10px;
    font-size: 12px;
    font-weight: 700
}

shopping-cart-item-single-ride .connection-wrapper .station .input {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: 14px;
    font-weight: 400;
    background-color: transparent;
    border: 0
}

@media (min-width:380px) {
    shopping-cart-item-single-ride .connection-wrapper .station .input {
        font-size: 18px
    }
}

shopping-cart-item-single-ride .connection-wrapper .station .input.from {
    justify-content: flex-end;
    padding-bottom: 18px;
    font-weight: 700
}

@media (min-width:380px) {
    shopping-cart-item-single-ride .connection-wrapper .station .input.from {
        padding-bottom: 8px
    }
}

shopping-cart-item-single-ride .connection-wrapper .station .input.to {
    justify-content: flex-start;
    font-weight: 700
}

body[state="root.ticket.relation"] shopping-cart-item-single-ride .connection-wrapper .station input {
    font-size: 18px
}

shopping-cart-item-single-ride .connection-wrapper .cart-subheading .reductionWarning {
    color: #e2002a;
    align-self: flex-end;
    margin-right: 5px
}

shopping-cart-item-single-ride .connection-wrapper .cancelled-hint,
shopping-cart-item-single-ride .connection-wrapper .cancelled-title {
    font-size: 12px;
    font-weight: 700;
    position: absolute
}

shopping-cart-item-single-ride .connection-wrapper .cancelled-title {
    top: 6px;
    left: 10px
}

shopping-cart-item-single-ride .connection-wrapper .cancelled-hint {
    top: 6px;
    left: 65px
}

shopping-cart-item-single-ride .connection {
    margin: auto;
    position: relative;
    top: -2px
}

ticket-cancellation-info .ticket-cancellation h2 {
    font-size: 14px;
    margin-bottom: 10px
}

ticket-cancellation-info .ticket-cancellation .booking-code {
    color: #afafaf;
    margin-bottom: 3px
}

ticket-cancellation-info .ticket-cancellation .arrival-departure {
    color: #878787;
    font-weight: 700
}

ticket-cancellation-info .ticket-cancellation ts-icon {
    padding-left: 5px;
    padding-right: 3px
}

.button-hover-offer:focus,
.button-hover-offer:focus-within,
.button-hover-offer:hover:not([disabled]) {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

shopping-cart-item shopping-cart-item-entry,
shopping-cart-item shopping-cart-item-route,
shopping-cart-item shopping-cart-item-single-ride {
    flex: 1 1;
    overflow: hidden
}

shopping-cart-item .item-wrapper {
    display: flex;
    color: #222;
    background-color: #e6e6e6;
    ;
    position: relative
}

shopping-cart-item .item-wrapper.is-cancelled {
    color: #868686
}

@media (min-width:480px) {
    shopping-cart-item .item-wrapper {
        margin-bottom: 10px
    }
}

shopping-cart-item .item-wrapper .contractual-button,
shopping-cart-item .item-wrapper .remove-button {
    display: flex;
    height: 90px;
    width: 48px;
    flex-shrink: 0
}

shopping-cart-item .item-wrapper .contractual-button:focus,
shopping-cart-item .item-wrapper .contractual-button:focus-within,
shopping-cart-item .item-wrapper .contractual-button:hover:not([disabled]),
shopping-cart-item .item-wrapper .remove-button:focus,
shopping-cart-item .item-wrapper .remove-button:focus-within,
shopping-cart-item .item-wrapper .remove-button:hover:not([disabled]) {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

shopping-cart-item .item-wrapper .contractual-button ts-icon,
shopping-cart-item .item-wrapper .remove-button ts-icon {
    margin: auto;
    height: 17px;
    fill: #878787
}

shopping-cart-item .item-wrapper .passengers {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    flex: 1 1;
    min-width: 35px;
    max-width: 143px;
    padding: 5px 11px
}

shopping-cart-item .item-wrapper .passengers:focus,
shopping-cart-item .item-wrapper .passengers:focus-within,
shopping-cart-item .item-wrapper .passengers:hover:not([disabled]) {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

shopping-cart-item .item-wrapper .passengers[disabled] {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    color: #afafaf;
    fill: #afafaf
}

@media (max-width:480px) {
    shopping-cart-item .item-wrapper .passengers {
        max-width: 65px
    }
}

shopping-cart-item .item-wrapper>.conversion {
    font-size: 14px;
    font-weight: 400;
    padding: 12px 16px 5px 11px;
    width: 100px;
    position: relative;
    flex-shrink: 0;
    text-align: right
}

shopping-cart-item .item-wrapper>.conversion:focus,
shopping-cart-item .item-wrapper>.conversion:focus-within,
shopping-cart-item .item-wrapper>.conversion:hover:not([disabled]) {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

shopping-cart-item .item-wrapper>.conversion[disabled] {
    color: #afafaf
}

@media (max-width:380px) {
    shopping-cart-item .item-wrapper>.conversion {
        width: 80px
    }
}

@media (min-width:480px) {
    shopping-cart-item .item-wrapper>.conversion {
        font-size: 16px;
        width: 143px
    }
}

@media (min-width: 870px) {
    shopping-cart-item .item-wrapper>.conversion {
        font-size: 18px
    }
}

shopping-cart-item .item-wrapper>.conversion .insuranceIcon {
    position: absolute;
    left: 7px;
    top: 7px
}

shopping-cart-item .item-wrapper>.conversion .cart-validity-heading {
    font-size: 12px;
    text-align: right;
    color: #868686;
    position: absolute;
    top: 7px;
    right: 15px
}

shopping-cart-item .item-wrapper>.conversion .pricing.is-cancelled {
    text-decoration: line-through
}

shopping-cart-item .item-wrapper>.conversion .pricing.lower {
    color: #508546
}

shopping-cart-item .item-wrapper>.conversion .returnAmount {
    color: #222;
    font-size: 16px
}

shopping-cart-item .item-wrapper>.conversion .old-pricing {
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
    color: #6a6a6a;
    margin: 0
}

shopping-cart-item .item-wrapper>.conversion.bigInfo .old-pricing {
    font-size: 12px
}

shopping-cart-item .item-wrapper>.conversion .temporaryBookedTill {
    margin-top: 2px
}

shopping-cart-item .item-wrapper>.conversion .service-voucher {
    display: inline-block;
    padding-right: 5px;
    fill: #508546
}

shopping-cart-item .item-wrapper>.conversion .loading-icon {
    -webkit-animation: spinning 2s linear infinite;
    animation: spinning 2s linear infinite
}

shopping-cart-item .item-wrapper .perforation {
    width: 2px;
    position: relative;
    background: linear-gradient(to bottom, #d8d8d8 0, #a3a3a3 50%, #d8d8d8 100%);
    flex-shrink: 0
}

shopping-cart-item .item-wrapper .perforation .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:url(@{path-img}background/paymentHeaderPerforation.svg)
}

shopping-cart-item .item-wrapper .cart-subheading {
    position: absolute;
    font-size: 12px;
    white-space: nowrap;
    display: flex;
    margin-top: 73px;
    margin-left: 15px
}

shopping-cart-item .item-wrapper .cart-subheading .clone-ticket {
    font-size: 12px;
    z-index: 1
}

shopping-cart-item .item-wrapper .cart-subheading .clone-ticket>ts-icon {
    position: relative;
    top: 4px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

shopping-cart-item .item-wrapper .cart-subheading .clone-ticket>span {
    margin-left: 5px
}

shopping-cart-item .item-wrapper .return-amount-wrapper {
    line-height: 14px
}

shopping-cart-item .item-wrapper .return-amount-wrapper .expected-return-amount {
    font-size: 16px;
    color: #000
}

shopping-cart-item .item-wrapper .return-amount-wrapper .return-amount-text {
    font-size: 12px;
    color: #51a351
}

shopping-cart-item two-column-info-bubble {
    margin: 17px 0
}

shopping-cart-item ts-icon[name=dataConfirm] svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

shopping-cart-item-entry {
    display: flex
}

shopping-cart-item-entry>.general {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    padding: 7px 15px 7px 15px
}

shopping-cart-item-entry>.general:focus,
shopping-cart-item-entry>.general:focus-within,
shopping-cart-item-entry>.general:hover:not([disabled]) {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

shopping-cart-item-entry>.general[disabled] {
    color: #afafaf
}

shopping-cart-item-entry>.general>.time {
    font-size: 12px;
    color: #868686;
    display: inline-block;
    justify-content: flex-start;
    padding-top: 18px;
    margin: 0
}

@media (min-width:380px) {
    shopping-cart-item-entry>.general>.time {
        padding-top: 5px
    }
}

shopping-cart-item-entry>.general>.time .cancelled-title {
    font-size: 12px;
    font-weight: 700
}

shopping-cart-item-entry>.general>.entrypoint {
    font-weight: 700;
    font-size: 14px;
    margin: 0;
    padding: 4px 0 0 0;
    white-space: nowrap
}

@media (min-width:380px) {
    shopping-cart-item-entry>.general>.entrypoint {
        font-size: 18px
    }
}

shopping-cart-item-entry>.general>.cart-subheading {
    bottom: 5px;
    margin-left: 0
}

shopping-cart-item-entry>.general>.cart-subheading .hhgbReturnTransport {
    font-size: 12px;
    cursor: pointer
}

shopping-cart-item-entry>.general>.cart-subheading .hhgbReturnTransport svg {
    position: relative;
    stroke: #51a351;
    fill: #51a351;
    top: 4px
}

shopping-cart-item-route {
    display: flex
}

shopping-cart-item-route>.general {
    display: flex;
    flex: 1 1;
    padding: 7px 15px 7px 15px
}

shopping-cart-item-route>.general:focus,
shopping-cart-item-route>.general:focus-within,
shopping-cart-item-route>.general:hover:not([disabled]) {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

shopping-cart-item-route>.general:disabled {
    color: #afafaf
}

shopping-cart-item-route>.general>.time {
    font-size: 12px;
    color: #868686;
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 15px;
    z-index: 1
}

shopping-cart-item-route>.general>.route {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

shopping-cart-item-route>.general>.route>.connection {
    width: 42px;
    text-align: center;
    color: #fff;
    line-height: 82px
}

@media (max-width:479px) {
    shopping-cart-item-route>.general>.route>.connection {
        width: 28px
    }
}

shopping-cart-item-route>.general>.route>.connection svg {
    vertical-align: middle
}

shopping-cart-item-route>.general>.route>.reduction-warning {
    position: absolute;
    bottom: 5px;
    left: 15px;
    color: #e2002a
}

shopping-cart-item-route>.general>.route>.station {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1 1 30px;
    padding: 0
}

@media (min-width: 870px) {
    shopping-cart-item-route>.general>.route>.station {
        flex: 1 1
    }
}

shopping-cart-item-route>.general>.route>.station .input {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap
}

shopping-cart-item-route>.general>.route>.station .input.from {
    justify-content: flex-end;
    padding-bottom: 18px
}

shopping-cart-item-route>.general>.route>.station .input.from span {
    font-weight: 700
}

@media (min-width:380px) {
    shopping-cart-item-route>.general>.route>.station .input.from {
        padding-bottom: 8px
    }
}

shopping-cart-item-route>.general>.route>.station .input.to {
    justify-content: flex-start
}

shopping-cart-item-route>.general>.route>.station .input.to span {
    font-weight: 700
}

shopping-cart-item-route>.general>.route>.station .input span {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400
}

@media (min-width:380px) {
    shopping-cart-item-route>.general>.route>.station .input span {
        font-size: 18px
    }
}

shopping-cart-item-route>.general .cancelled-title {
    font-size: 12px;
    font-weight: 700;
    color: #e2002a
}

shopping-cart-item-route>.general>.cart-subheading {
    margin: 66px 4px 0 0
}

shopping-cart-item-route>.general>.cart-subheading>.clone-ticket {
    position: absolute
}

reuse-data-button {
    position: relative;
    z-index: 10
}

reuse-data-button .take-data {
    font-size: 12px;
    z-index: 1;
    cursor: pointer
}

reuse-data-button .take-data>ts-icon {
    position: relative;
    top: 4px
}

reuse-data-button .take-data>span {
    margin-left: 5px
}

shopping-cart-item-voucher {
    display: flex;
    background: #67648c;
    color: #fff;
    padding: 0 20px 10px 20px;
    flex-direction: column;
    margin: -10px 0 10px 0
}

shopping-cart-item-voucher .serviceVoucherItem {
    margin-top: 10px;
    display: flex
}

shopping-cart-item-voucher svg {
    fill: #fff
}

shopping-cart-item-voucher .description {
    margin-left: 10px
}

payment-newsletter-box {
    display: block;
    margin: 25px 0 0 0;
    background-color: #f0f0f0;
    padding: 0
}

payment-newsletter-box .mat-checkbox-frame {
    border-color: #51a351
}

payment-newsletter-box .row {
    display: flex;
    align-items: baseline
}

payment-newsletter-box .row .col2 {
    margin-left: 10px
}

payment-newsletter-box .col1 {
    position: relative;
    top: -2px
}

payment-newsletter-box .mat-checkbox-inner-container {
    width: 18px;
    height: 18px
}

payment-newsletter-box .checkbox-heading {
    font-size: 18px
}

@media (max-width:479px) {
    payment-newsletter-box .checkbox-heading {
        font-size: 16px
    }
}

payment-newsletter-box .checkbox-heading,
payment-newsletter-box .subtitle {
    margin-left: 5px
}

payment-newsletter-box .subtitle {
    font-size: 14px
}

@media (max-width:479px) {
    payment-newsletter-box .subtitle {
        font-size: 12px
    }
}

payment-newsletter-box .persona-newsletter-checkbox {
    padding: 26px 32px 34px 32px
}

payment-newsletter-box .persona-newsletter-checkbox:hover {
    background-color: #e6e6e6
}

payment-newsletter-box .data-privacy-section {
    padding: 26px 32px 20px 32px;
    display: flex;
    font-size: 12px;
    line-height: 18px;
    color: #868686;
    border-top: 1px solid #afafaf
}

payment-newsletter-box .data-privacy-section .icon-section {
    width: 26.5px;
    margin-right: 16px;
    fill: #868686
}

payment-newsletter-box .data-privacy-section a {
    text-decoration: underline
}

shopping-cart-insurance {
    display: flex;
    font-size: 16px;
    line-height: 1em;
    background-image:url(@{path-img}components/header/bg.png);
    background-color: #f0f0f0;
    background-clip: padding-box;
    border-bottom: 1px solid #afafaf;
    margin-bottom: 10px
}

shopping-cart-insurance .input {
    display: flex;
    flex: 0 0 48px;
    width: 48px;
    justify-content: center
}

@media (min-width: 870px) {
    shopping-cart-insurance .input {
        flex: 0 0 53px;
        width: 53px
    }
}

shopping-cart-insurance .input .loading svg {
    -webkit-animation: spinning 2s linear infinite;
    animation: spinning 2s linear infinite
}

shopping-cart-insurance .input .loading,
shopping-cart-insurance .input .mat-checkbox {
    align-self: center
}

shopping-cart-insurance .input .mat-checkbox-inner-container {
    width: 18px;
    height: 18px
}

shopping-cart-insurance .input .mat-checkbox-frame {
    border-color: #51a351
}

shopping-cart-insurance>.data {
    flex: 1 1;
    padding: 10px 16px 10px 20px
}

@media (max-width:379px) {
    shopping-cart-insurance>.data {
        padding: 10px
    }
}

shopping-cart-insurance>.data .title {
    font-size: 18px;
    margin: 0 0 5px 0
}

@media (min-width: 870px) {
    shopping-cart-insurance>.data .title {
        font-size: 18px
    }
}

shopping-cart-insurance>.data .title .insurancePricePreview {
    color: #878787;
    font-size: 16px
}

shopping-cart-insurance>.data .hint {
    color: #3E73A5;
    font-size: 12px;
    line-height: 1.1em
}

shopping-cart-insurance>.data a {
    text-decoration: underline;
    display: flex;
    margin-top: 5px
}

@media (max-width:869px) {
    shopping-cart-insurance>.data a {
        font-size: 14px
    }
}

shopping-cart-insurance>.data .information {
    display: flex
}

@media (max-width:320px) {
    shopping-cart-insurance>.data .information {
        flex-direction: column
    }
}

shopping-cart-insurance>.data .information .iconColumn {
    flex: 0 0 20px
}

@media (min-width: 870px) {
    shopping-cart-insurance>.data .information .iconColumn {
        flex: 0 0 30px
    }
}

shopping-cart-insurance>.data .information .content {
    flex: 1;
    word-break: break-word
}

shopping-cart-insurance>.perforation {
    width: 2px;
    position: relative;
    background: linear-gradient(to bottom, #d8d8d8 0, #a3a3a3 50%, #d8d8d8 100%)
}

shopping-cart-insurance>.perforation .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:url(@{path-img}background/paymentHeaderPerforation.svg)
}

shopping-cart-insurance>.price {
    font-size: 18px;
    padding: 0 16px 0 0;
    margin: auto;
    width: 100px;
    text-align: right;
    align-self: center
}

@media (max-width:380px) {
    shopping-cart-insurance>.price {
        width: 80px
    }
}

@media (min-width:480px) {
    shopping-cart-insurance>.price {
        width: 143px
    }
}

autosuggest #autosuggest {
    overflow-y: auto;
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 100%;
    z-index: -10;
    opacity: 0;
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
    transition: opacity ease-in .1s, -webkit-transform ease-in .1s, transform ease-in .1s
}

autosuggest #autosuggest.visible {
    width: 100%;
    height: auto;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: opacity ease-out .3s, -webkit-transform ease-out .3s, transform ease-out .3s;
    transition-delay: .2s
}

@media (min-width: 870px) {
    autosuggest #autosuggest.visible {
        margin-left: 113px;
        width: 565px
    }
}

@media (min-width:1280px) {
    autosuggest #autosuggest.visible {
        width: 521px
    }
}

autosuggest #autosuggest .infoBubble {
    margin-top: 30px
}

autosuggest #autosuggest .infoBubble .content {
    width: 100%
}

autosuggest #autosuggest .entry {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 400;
    color: #222;
    position: relative;
    overflow: hidden;
    background-color: #fff
}

autosuggest #autosuggest .entry::after {
    position: absolute;
    left: 48px;
    bottom: 0;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #d7d7d7
}

autosuggest #autosuggest .entry.selected {
    background-color: #e6e6e6
}

autosuggest #autosuggest .entry.here {
    height: 67px
}

autosuggest #autosuggest .entry.here:after {
    left: 0
}

autosuggest #autosuggest .entry.here .wrapper .icon {
    fill: #51a351
}

autosuggest #autosuggest .entry.here .wrapper .icon svg {
    width: 19px;
    height: 19px
}

autosuggest #autosuggest .entry.here .wrapper .text {
    color: #51a351
}

autosuggest #autosuggest .entry.here .wrapper .text .sub {
    font-size: 12px;
    margin: 0;
    color: #6a6a6a
}

autosuggest #autosuggest .entry.here .wrapper .info {
    color: #6a6a6a
}

autosuggest #autosuggest .entry .wrapper .info {
    flex: 0 0 48px;
    width: 48px;
    text-align: center;
    position: relative;
    color: #d7d7d7;
    fill: #d7d7d7;
    border-left: solid 1px #d7d7d7;
    padding: 10px 0 10px 0
}

@media (min-width: 870px) {
    autosuggest #autosuggest .entry .wrapper .info {
        flex: 0 0 53px;
        width: 53px
    }
}

autosuggest #autosuggest .entry .wrapper .info svg {
    width: 18px;
    height: 18px
}

autosuggest #autosuggest .entry .wrapper {
    display: flex;
    align-items: baseline;
    flex: 1 0
}

autosuggest #autosuggest .entry .wrapper .icon {
    flex: 0 0 48px;
    width: 48px;
    fill: #afafaf;
    text-align: center;
    position: relative;
    top: 3px
}

@media (min-width: 870px) {
    autosuggest #autosuggest .entry .wrapper .icon {
        flex: 0 0 58px;
        width: 58px
    }
}

autosuggest #autosuggest .entry .wrapper .icon svg {
    width: 19px;
    height: 19px
}

autosuggest #autosuggest .entry .wrapper .text {
    flex: 1 0;
    overflow: hidden
}

autosuggest #autosuggest .entry:last-child:after {
    left: 0
}

datetime-picker {
    z-index: 999;
    position: relative;
    display: block;
    width: 320px
}

datetime-picker header {
    background-color: #f0f0f0;
    padding: 10px 10px 0 10px
}

datetime-picker header mat-form-field {
    margin: 5px
}

datetime-picker header mat-form-field input.mat-input-element {
    font-weight: 700
}

datetime-picker header mat-form-field input.mat-input-element::-moz-selection {
    background-color: #add7ad
}

datetime-picker header mat-form-field input.mat-input-element::selection {
    background-color: #add7ad
}

datetime-picker header form {
    display: flex;
    justify-content: space-between
}

datetime-picker header form .date-field {
    width: 11em
}

datetime-picker header form .date-field .mat-input-element {
    pointer-events: none
}

@media (max-width:720px) {
    datetime-picker header form .date-field .mat-form-field-suffix {
        display: none
    }
}

@supports (-moz-appearance:none) {
    datetime-picker header form .date-field .mat-form-field-suffix .mat-icon-button {
        bottom: 8px
    }
}

datetime-picker header form .date-field .mat-form-field-suffix .mat-icon-button {
    width: 16px;
    height: 18px
}

datetime-picker header form .date-field .mat-form-field-suffix .mat-icon-button ts-icon {
    display: block
}

datetime-picker header form .date-field .mat-form-field-suffix .mat-icon-button ts-icon[name=arrowRight] svg {
    left: 1px
}

datetime-picker header form .date-field .mat-form-field-suffix .mat-icon-button ts-icon[name=arrowLeft] svg {
    right: 1px
}

datetime-picker header form .date-field .mat-form-field-suffix .mat-icon-button ts-icon svg {
    position: relative;
    width: 8px;
    height: 10px
}

datetime-picker header form .from-to-field {
    width: 3.1em;
    font-weight: 700
}

datetime-picker header form .time-field {
    width: 2.75em
}

datetime-picker .right-buttons {
    display: flex;
    justify-content: space-between
}

datetime-picker footer {
    display: flex;
    justify-content: space-between;
    padding: 0 1em 1em 1em
}

datetime-picker footer button {
    color: #64942c;
    padding: .66em
}

datetime-picker footer button:hover {
    color: #6fb86f
}

datetime-picker .calendar-container {
    background-color: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .5)
}

datetime-picker .mat-button {
    font-weight: 700;
    color: #51a351;
    font-size: 14px;
    min-width: 0
}

datetime-picker .mat-button:hover {
    background-color: #E4F2E4
}

datetime-picker .mat-button .mat-button-focus-overlay {
    display: none
}

datetime-picker .mat-button .mat-ripple-element {
    background-color: #65B365;
    opacity: .25
}

datetime-picker .mat-flat-button.mat-primary {
    font-weight: 700;
    font-size: 14px;
    min-width: 0;
    margin-left: 10px
}

datetime-picker .mat-flat-button.mat-primary:hover {
    background-color: #65B365
}

datetime-picker .mat-calendar-body-cell {
    height: 44px
}

datetime-picker .mat-calendar-body-cell>.mat-calendar-body-cell-content {
    height: 39.6px
}

@media (max-height:600px) {
    datetime-picker {
        position: absolute;
        top: 0
    }
    datetime-picker header {
        padding: 5px 10px 0 10px;
        height: 60px
    }
    datetime-picker shared-mat-calendar-header {
        padding: 5px
    }
    datetime-picker footer button span {
        font-size: 12px
    }
}

.cdk-overlay-container .time-autocomplete {
    min-width: 69px;
    left: -10px
}

.cdk-overlay-container .time-autocomplete mat-option.mat-option {
    padding: 0 0 0 10px
}

.cdk-overlay-container .time-autocomplete mat-option.mat-option.selected {
    background-color: #efefef!important
}

relation-input #relationInput {
    z-index: -10;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

relation-input #relationInput:hover {
    will-change: transform
}

relation-input #relationInput:hover .button.cancel {
    will-change: transform
}

body[state="root.ticket.offer"] relation-input #relationInput .infoBubble[name=changedOfferInfo] {
    max-width: 650px
}

relation-input #relationInput.ng-hide-add,
relation-input #relationInput.ng-hide-remove {
    transition: 0s linear all
}

relation-input #relationInput.ng-hide-add>.content>.mainSection {
    opacity: 1
}

relation-input #relationInput.ng-hide-add-active {
    transition: opacity .5s cubic-bezier(.23, 1, .675, 1.12)
}

relation-input #relationInput.ng-hide-add-active>.content>.mainSection {
    transition: -webkit-transform .5s cubic-bezier(.23, 1, .675, 1.12), transform .5s cubic-bezier(.23, 1, .675, 1.12)
}

relation-input #relationInput.ng-hide {
    opacity: 0
}

relation-input #relationInput.ng-hide>.content>.mainSection {
    -webkit-transform: translate3d(-500px, 0, 0);
    transform: translate3d(-500px, 0, 0)
}

relation-input #relationInput.wrapper {}

body[state="root.ticket.relation"] relation-input #relationInput.wrapper {
    z-index: 20
}

body[state="root.ticket.payment"] relation-input #relationInput.wrapper {
    display: none
}

@media (max-width:869px) {
    relation-input #relationInput.wrapper {
        top: 0;
        margin-top: 0;
        z-index: 20;
        background-color: #e6e6e6;
    }
}

@media (min-width:480px) and (max-width:869px) {
    relation-input #relationInput.wrapper {
        justify-content: flex-end
    }
}

@media (min-width:480px) and (max-width:719px) {
    relation-input #relationInput.wrapper {
        margin-left: 0
    }
}

@media (min-width: 870px) {
    relation-input #relationInput.wrapper {
        height: 90px;
        z-index: 10;
        transition: -webkit-transform ease-out .2s;
        transition: transform ease-out .2s;
        transition: transform ease-out .2s, -webkit-transform ease-out .2s;
    }
    #header.narrow relation-input #relationInput.wrapper {
        max-width: 678px
    }
}

@media (min-width: 870px) and (max-width:869px) {
    body[state="root.ticket.quickstart"] relation-input #relationInput.wrapper {
        margin-right: 0
    }
}

@media (min-width: 870px) {
    relation-input #relationInput.wrapper {
        max-width: 678px
    }
}

@media (min-width:1280px) {
    body[state="root.ticket.quickstart"] relation-input #relationInput.wrapper,
    body[state="root.ticket.travel"] relation-input #relationInput.wrapper,
    body[state="root.ticket.relation"] relation-input #relationInput.wrapper {
        margin-left: 500px;
        margin-right: 0
    }
    body[state="root.ticket.quickstart"] relation-input #relationInput.wrapper {
        max-width: 634px
    }
}

relation-input #relationInput>.content {
    display: flex;
    flex-direction: column;
    box-shadow: 0 17px 98px -30px rgba(0, 0, 0, .75);
    position: relative;
    z-index: 0
}

body[state="root.ticket.quickstart"] relation-input #relationInput>.content {
    margin-left: 0
}

@media (min-width:480px) and (max-width:860px) {
    relation-input #relationInput>.content {
        flex: 0 0 410px;
        max-width: 410px
    }
}

@media (min-width:480px) and (max-width:719px) {
    relation-input #relationInput>.content {
        flex: 1 0;
        max-width: none
    }
}

@media (min-width: 870px) and (max-width:860px) {
    relation-input #relationInput>.content {
        flex: 0 1 492px;
        max-width: none
    }
}

@media (min-width: 870px) {
    relation-input #relationInput>.content {
        flex: 1 1;
        max-width: none
    }
}

relation-input #relationInput>.content hr {
    border: none;
    background-color: #d7d7d7;
    height: 1px;
    padding: 0;
    margin: 0 15px
}

relation-input #relationInput>.content .change {
    color: #51a351;
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 12px
}

relation-input #relationInput>.content>.mainSection {
    min-height: 90px;
    max-height: 120px;
    display: flex;
    position: relative
}

relation-input #relationInput>.content>.mainSection>.button {
    flex: 0 0 48px;
    width: 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background-color: #e6e6e6;
    display: none
}

@media (min-width: 870px) {
    relation-input #relationInput>.content>.mainSection>.button {
        position: absolute;
        height: 100%;
        transition: -webkit-transform .2s ease-out;
        transition: transform .2s ease-out;
        transition: transform .2s ease-out, -webkit-transform .2s ease-out;
        -webkit-transform: none;
        transform: none
    }
}

relation-input #relationInput>.content>.mainSection>.button.visible {
    display: flex
}

@media (min-width: 870px) {
    relation-input #relationInput>.content>.mainSection>.button.visible {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

relation-input #relationInput>.content>.mainSection>.button img,
relation-input #relationInput>.content>.mainSection>.button svg {
    fill: #878787;
    width: 25px;
    height: 25px
}

body.shoppingcartEditing relation-input #relationInput>.content>.mainSection>.button.home {
    cursor: default
}

body.shoppingcartEditing relation-input #relationInput>.content>.mainSection>.button.home>svg {
    fill: #afafaf
}

relation-input #relationInput>.content>.mainSection>.button.home:focus,
relation-input #relationInput>.content>.mainSection>.button.home:hover {
    background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

body.shoppingcartEditing relation-input #relationInput>.content>.mainSection>.button.home {
    background-color: #e6e6e6;
}

relation-input #relationInput>.content>.mainSection>.button.cancel img,
relation-input #relationInput>.content>.mainSection>.button.cancel svg {
    width: 17px;
    height: 17px
}

relation-input #relationInput>.content>.mainSection>.connection {
    opacity: 0;
    position: relative;
    left: 100%;
    flex: 0 0 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    width: 0;
    visibility: hidden;
    background-color: #e6e6e6;
    ;
    text-align: center;
    color: #fff;
    line-height: 90px
}

body[state="root.ticket.offer.journey"] relation-input #relationInput>.content>.mainSection>.connection,
body[state="root.ticket.baggageOffer"] relation-input #relationInput>.content>.mainSection>.connection,
body[state="root.ticket.offer"] relation-input #relationInput>.content>.mainSection>.connection {
    cursor: pointer!important;
    visibility: visible;
    flex: 0 0 42px;
    width: 42px;
    max-width: 42px
}

body[state="root.ticket.offer.journey"] relation-input #relationInput>.content>.mainSection>.connection.relationOfferGroup,
body[state="root.ticket.baggageOffer"] relation-input #relationInput>.content>.mainSection>.connection.relationOfferGroup,
body[state="root.ticket.offer"] relation-input #relationInput>.content>.mainSection>.connection.relationOfferGroup {
    background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

@media (max-width:480px) {
    body[state="root.ticket.offer.journey"] relation-input #relationInput>.content>.mainSection>.connection,
    body[state="root.ticket.baggageOffer"] relation-input #relationInput>.content>.mainSection>.connection,
    body[state="root.ticket.offer"] relation-input #relationInput>.content>.mainSection>.connection {
        flex: 0 0 29px;
        width: 29px;
        max-width: 29px
    }
}

relation-input #relationInput>.content>.mainSection>.connection svg {
    vertical-align: middle
}

relation-input #relationInput>.content>.mainSection>.connection .validityStartDate {
    font-size: 12px;
    color: #868686;
    position: absolute;
    text-align: left;
    padding-left: 2px;
    top: 4px;
    left: 10px;
    line-height: 1em;
    white-space: nowrap;
    z-index: 11
}

relation-input #relationInput>.content>.mainSection>.connection .validityStartDate span {
    display: block
}

html.no-flexbox.no-flexboxlegacy relation-input #relationInput>.content>.mainSection>.connection .validityStartDate {
    display: block
}

relation-input #relationInput>.content>.mainSection>.relationInvert,
relation-input #relationInput>.content>.mainSection>.viaSelection {
    opacity: 0;
    position: relative;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
    flex: 0;
    width: 0;
    max-width: 0;
    background-color: #e6e6e6;
}

relation-input #relationInput>.content>.mainSection>.relationInvert:focus,
relation-input #relationInput>.content>.mainSection>.relationInvert:hover,
relation-input #relationInput>.content>.mainSection>.viaSelection:focus,
relation-input #relationInput>.content>.mainSection>.viaSelection:hover {
    background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

relation-input #relationInput>.content>.mainSection>.relationInvert+.passengers.visible,
relation-input #relationInput>.content>.mainSection>.viaSelection+.passengers.visible {
    position: absolute;
    height: 100%;
    left: 100%!important
}

body[state="root.ticket.quickstart"] relation-input #relationInput>.content>.mainSection>.relationInvert,
body[state="root.ticket.quickstart"] relation-input #relationInput>.content>.mainSection>.viaSelection,
body[state="root.ticket.travel"] relation-input #relationInput>.content>.mainSection>.relationInvert,
body[state="root.ticket.travel"] relation-input #relationInput>.content>.mainSection>.viaSelection,
body[state="root.ticket.relation"] relation-input #relationInput>.content>.mainSection>.relationInvert,
body[state="root.ticket.relation"] relation-input #relationInput>.content>.mainSection>.viaSelection {
    visibility: visible;
    flex: 0 0 48px;
    width: 48px;
    max-width: 48px
}

@media (min-width: 870px) {
    body[state="root.ticket.quickstart"] relation-input #relationInput>.content>.mainSection>.relationInvert,
    body[state="root.ticket.quickstart"] relation-input #relationInput>.content>.mainSection>.viaSelection,
    body[state="root.ticket.travel"] relation-input #relationInput>.content>.mainSection>.relationInvert,
    body[state="root.ticket.travel"] relation-input #relationInput>.content>.mainSection>.viaSelection,
    body[state="root.ticket.relation"] relation-input #relationInput>.content>.mainSection>.relationInvert,
    body[state="root.ticket.relation"] relation-input #relationInput>.content>.mainSection>.viaSelection {
        flex: 0 0 53px;
        width: 53px;
        max-width: 53px
    }
}

@media (min-width:1280px) {
    body[state="root.ticket.quickstart"] relation-input #relationInput>.content>.mainSection>.relationInvert,
    body[state="root.ticket.quickstart"] relation-input #relationInput>.content>.mainSection>.viaSelection,
    body[state="root.ticket.travel"] relation-input #relationInput>.content>.mainSection>.relationInvert,
    body[state="root.ticket.travel"] relation-input #relationInput>.content>.mainSection>.viaSelection,
    body[state="root.ticket.relation"] relation-input #relationInput>.content>.mainSection>.relationInvert,
    body[state="root.ticket.relation"] relation-input #relationInput>.content>.mainSection>.viaSelection {
        position: absolute;
        height: 100%;
        left: auto;
        right: 0;
        z-index: 20
    }
}

relation-input #relationInput>.content>.mainSection>.relationInvert>.inner,
relation-input #relationInput>.content>.mainSection>.viaSelection>.inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 70px;
    border-left: 1px solid #d7d7d7
}

relation-input #relationInput>.content>.mainSection>.relationInvert>.inner svg,
relation-input #relationInput>.content>.mainSection>.viaSelection>.inner svg {
    fill: #878787
}

relation-input #relationInput>.content>.mainSection>.relationInvert .ts-pill,
relation-input #relationInput>.content>.mainSection>.viaSelection .ts-pill {
    content: attr(data-count);
    position: absolute;
    top: -13px;
    right: -13px;
    font-size: 12px;
    background-color: #e2002a;
    color: #fff;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 1px #e2002a
}

relation-input #relationInput>.content>.mainSection>.relationInvert {
    position: absolute;
    left: auto;
    right: 0;
    height: 100%;
    z-index: 3;
    opacity: 1
}

relation-input #relationInput>.content>.mainSection>.passengers {
    opacity: 0;
    position: relative;
    left: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    flex: 0 0 0;
    min-width: 0;
    margin: 0;
    width: 0;
    padding: 0;
    background-color: #e6e6e6;
    ;
    visibility: hidden;
    overflow: hidden
}

relation-input #relationInput>.content>.mainSection>.passengers:focus,
relation-input #relationInput>.content>.mainSection>.passengers:hover {
    background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

relation-input #relationInput>.content>.mainSection>.passengers.visible {
    visibility: visible;
    flex: 0 0 143px;
    width: 143px;
    max-width: 143px;
    padding: 5px 11px;
    cursor: pointer
}

relation-input #relationInput>.content>.mainSection>.passengers.visible.disabled {
    cursor: default;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%)
}

relation-input #relationInput>.content>.mainSection>.passengers.visible.disabled .change {
    display: none
}

@media (max-width:869px) {
    relation-input #relationInput>.content>.mainSection>.passengers.visible {
        flex: 0 0 93px;
        width: 93px;
        max-width: 93px
    }
}

@media (max-width:479px) {
    relation-input #relationInput>.content>.mainSection>.passengers.visible {
        flex: 0 0 102px;
        width: 102px;
        max-width: 102px
    }
}

@media (max-width:379px) {
    relation-input #relationInput>.content>.mainSection>.passengers.visible {
        flex: 0 0 78px;
        width: 78px;
        max-width: 78px
    }
}

@media (max-width:320px) {
    relation-input #relationInput>.content>.mainSection>.passengers.visible {
        flex: 0 0 62px;
        width: 62px;
        max-width: 62px
    }
}

relation-input #relationInput>.content>.mainSection>.passengers>div {
    white-space: nowrap
}

relation-input #relationInput>.content>.mainSection .conversionButtonWrapper {
    left: 100%;
    position: relative
}

@media (max-width:480px) {
    body[state="root.ticket.offer.journey"] relation-input #relationInput>.content>.mainSection .conversionButtonWrapper,
    body[state="root.ticket.baggageOffer"] relation-input #relationInput>.content>.mainSection .conversionButtonWrapper,
    body[state="root.ticket.offer"] relation-input #relationInput>.content>.mainSection .conversionButtonWrapper {
        flex: 0 0 90px;
        width: 90px;
        max-width: 90px
    }
}

relation-input #relationInput>.content>.infoSection {
    background-color: #f0f0f0;
    margin-left: -48px;
    box-shadow: inset 0 5px 10px -7px rgba(0, 0, 0, .5);
    font-size: 14px
}

relation-input #relationInput>.content>.infoSection>.viaRelation {
    display: flex;
    flex: 1;
    border-bottom: 1px solid #d7d7d7
}

relation-input #relationInput>.content>.infoSection>.viaRelation>button {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 10px 10px 20px;
    min-width: 0
}

relation-input #relationInput>.content>.infoSection>.viaRelation>button[disabled] {
    color: #222
}

relation-input #relationInput>.content>.infoSection>.viaRelation>button[disabled]>label {
    color: #222
}

relation-input #relationInput>.content>.infoSection>.viaRelation>button:hover {
    background-color: rgba(0, 0, 0, .08)
}

relation-input #relationInput>.content>.infoSection>.viaRelation>button>span {
    flex: 0 1 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

relation-input #relationInput>.content>.infoSection>.viaRelation>button>label {
    color: #558264;
    flex: 0 0 40px
}

relation-input #relationInput>.content .splitline {
    border-top: 1px solid #000;
    width: 60px;
    margin-left: 10px
}

relation-input #relationInput.visible .content .relationless {
    justify-content: center;
    padding-left: 20px;
    position: relative;
    left: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: #e6e6e6;
}

relation-input #relationInput.visible .content .relationless .entrypoint-title {
    margin: 5px 0;
    font-size: 18px;
    overflow: hidden;
    line-height: 1.25em
}

@media (max-width:319px) {
    relation-input #relationInput.visible .content .relationless {
        padding-left: 5px
    }
    relation-input #relationInput.visible .content .relationless .entrypoint-title {
        font-size: 18px
    }
}

relation-input #relationInput.visible .content .relationless.time {
    padding-left: 0
}

relation-input #relationInput.visible .content .relationless.station {
    flex: 1 1 auto
}

relation-input #relationInput.visible .content .relationless:focus,
relation-input #relationInput.visible .content .relationless:hover {
    background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

relation-input #relationInput.visible .content .connection,
relation-input #relationInput.visible .content .conversionButtonWrapper,
relation-input #relationInput.visible .content .passengers,
relation-input #relationInput.visible .content .station,
relation-input #relationInput.visible .content .time,
relation-input #relationInput.visible .content .viaSelection {
    opacity: 1;
    left: 0
}

relation-input #relationInput [hidden],
relation-input #relationInput template {
    display: none!important
}

relation-input #relationInput .material-info-bubble {
    left: 166px;
    position: absolute;
    width: calc(100% - 166px)
}

@media (min-width:882px) and (max-width:869px) {
    relation-input #relationInput .material-info-bubble {
        width: 512px
    }
}

relation-input #relationInput .material-info-bubble .info-bubble {
    right: 0;
    left: 0
}

relation-input #relationInput datetime-picker {
    transition: top .2s ease-out .25s, opacity .2s ease-out .25s, width .2s ease-out, flex .2s ease-out, padding .2s ease-out
}

relation-station {
    z-index: 2;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out;
    position: relative;
    left: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    background-color: #e6e6e6;
    outline: 0
}

body[state="root.ticket.offer.journey"] relation-station,
body[state="root.ticket.baggageOffer"] relation-station,
body[state="root.ticket.offer"] relation-station {
    cursor: pointer!important;
    padding-left: 0
}

body[state="root.ticket.offer.journey"] relation-station.relationOfferGroup,
body[state="root.ticket.baggageOffer"] relation-station.relationOfferGroup,
body[state="root.ticket.offer"] relation-station.relationOfferGroup {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

body[state="root.ticket.offer.journey"] relation-station.relationless,
body[state="root.ticket.baggageOffer"] relation-station.relationless,
body[state="root.ticket.offer"] relation-station.relationless {
    justify-content: center;
    padding-left: 20px
}

body[state="root.ticket.offer.journey"] relation-station.relationless:focus,
body[state="root.ticket.offer.journey"] relation-station.relationless:hover,
body[state="root.ticket.baggageOffer"] relation-station.relationless:focus,
body[state="root.ticket.baggageOffer"] relation-station.relationless:hover,
body[state="root.ticket.offer"] relation-station.relationless:focus,
body[state="root.ticket.offer"] relation-station.relationless:hover {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

body[state="root.ticket.offer.journey"] relation-station.hasValidityInfo>.input,
body[state="root.ticket.baggageOffer"] relation-station.hasValidityInfo>.input,
body[state="root.ticket.offer"] relation-station.hasValidityInfo>.input {
    padding-left: 0
}

body[state="root.ticket.offer.journey"] relation-station input,
body[state="root.ticket.offer.journey"] relation-station>div,
body[state="root.ticket.baggageOffer"] relation-station input,
body[state="root.ticket.baggageOffer"] relation-station>div,
body[state="root.ticket.offer"] relation-station input,
body[state="root.ticket.offer"] relation-station>div {
    cursor: pointer!important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@media (min-width: 870px) {
    relation-station.invert-visible {
        padding-right: 48px
    }
}

@media (min-width: 870px) {
    relation-station.isViaSelectionActive {
        flex: 0 0 512px;
        width: 512px;
        max-width: 512px
    }
}

relation-station .input {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    height: 47.5px;
    min-height: 34px
}

relation-station .input.from {
    justify-content: flex-start;
    align-items: flex-end
}

relation-station .input.from input {
    padding-top: 21.5px;
    padding-bottom: 6px
}

relation-station .input.to {
    justify-content: flex-start
}

relation-station .input.to input {
    padding-top: 6px;
    padding-bottom: 21.5px
}

relation-station .input input {
    font-size: 18px;
    height: 100%;
    font-weight: 400;
    color: #222;
    background-color: transparent;
    border: 0;
    flex-grow: 1;
    min-width: 0
}

relation-station .input input:focus {
    outline: 0
}

relation-station .input input::-ms-clear {
    display: none
}

relation-station .input input::-webkit-search-cancel-button {
    -webkit-appearance: none
}

relation-station .input input.hasInput {
    font-weight: 400
}

relation-station .input input.disabled {
    color: #868686!important
}

relation-station .input input::-webkit-input-placeholder {
    color: #6a6a6a!important
}

relation-station .input input:-moz-placeholder {
    color: #6a6a6a!important
}

relation-station .input input::-moz-placeholder {
    color: #6a6a6a!important
}

relation-station .input input:-ms-input-placeholder {
    color: #6a6a6a!important
}

@media (min-width:380px) {
    relation-station .input input {
        font-size: 18px
    }
}

@media (min-width:480px) {
    relation-station .input input {
        padding-left: 18px
    }
}

relation-station .input>.clearInput {
    width: 0;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    align-self: center
}

relation-station .input>.clearInput:focus,
relation-station .input>.clearInput:hover {
    opacity: 1;
    outline: 0
}

relation-station .input>.clearInput:focus img,
relation-station .input>.clearInput:focus svg,
relation-station .input>.clearInput:hover img,
relation-station .input>.clearInput:hover svg {
    fill: #878787
}

relation-station .input>.clearInput img,
relation-station .input>.clearInput svg {
    width: 15px;
    height: 15px;
    fill: #b3b3b3
}

body[state="root.ticket.relation"] relation-station .input>.clearInput {
    flex: 0 0 48px;
    width: 48px;
    opacity: 1
}

relation-station .input:focus,
relation-station .input:hover {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

@media (max-width:869px) {
    relation-station.expanded {
        -webkit-transform: translateX(-113px);
        transform: translateX(-113px);
        min-width: 100%;
        padding-right: 90px
    }
}

relation-time {
    z-index: 1;
    opacity: 0;
    transition: left .2s ease-out .30000000000000004s, opacity .2s ease-out .30000000000000004s, width .2s ease-out, flex .2s ease-out, padding .2s ease-out;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0 8px 0 0;
    left: 100%;
    background-color: #e6e6e6;
    flex: 0 0 94px;
    width: 94px;
    max-width: 94px
}

body[state="root.ticket.offer"] relation-time.route {
    flex: 0 0 94px;
    width: 94px;
    max-width: 94px
}

relation-time.route .input {
    height: 90px
}

body[state="root.ticket.offer.journey"] relation-time,
body[state="root.ticket.baggageOffer"] relation-time,
body[state="root.ticket.offer"] relation-time {
    cursor: pointer!important;
    flex: 0 0 71px;
    width: 71px;
    min-width: 71px;
    max-width: 71px
}

body[state="root.ticket.offer.journey"] relation-time.relationOfferGroup,
body[state="root.ticket.baggageOffer"] relation-time.relationOfferGroup,
body[state="root.ticket.offer"] relation-time.relationOfferGroup {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

@media (max-width:380px) {
    body[state="root.ticket.offer.journey"] relation-time,
    body[state="root.ticket.baggageOffer"] relation-time,
    body[state="root.ticket.offer"] relation-time {
        flex: 0 0 66px;
        width: 66px;
        max-width: 66px;
        min-width: 66px;
        padding: 0
    }
}

@media (max-width:320px) {
    body[state="root.ticket.offer.journey"] relation-time,
    body[state="root.ticket.baggageOffer"] relation-time,
    body[state="root.ticket.offer"] relation-time {
        flex: 0 0 46px;
        width: 46px;
        min-width: 46px;
        max-width: 46px;
        padding: 0
    }
}

@media (min-width:480px) and (max-width:719px) {
    relation-time {
        transition: left .2s ease-out .2s, opacity .2s ease-out .2s, width .2s ease-out, flex .2s ease-out, padding .2s ease-out
    }
}

relation-time .input {
    width: 100%;
    flex: 1 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: stretch;
    height: 47.5px;
    min-height: 34px;
    font-size: 18px;
    font-weight: 400
}

@media (min-width:480px) {
    relation-time .input {
        font-size: 18px
    }
}

html.no-flexbox.no-flexboxlegacy relation-time .input {
    height: 50%
}

relation-time .input .bold {
    color: #222
}

relation-time .input .no-data {
    color: #000
}

relation-time .input.arrival,
relation-time .input.departure {
    padding: 0 2px 4px 2px
}

@media (min-width:480px) {
    relation-time .input.arrival,
    relation-time .input.departure {
        padding: 0 10px 4px 10px
    }
}

relation-time .input.departure {
    justify-content: flex-end;
    color: #222;
    position: relative
}

relation-time .input.departure:focus,
relation-time .input.departure:hover {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

relation-time .input.departure .heute {
    font-size: 12px;
    color: #868686;
    padding-left: 2px
}

relation-time .input.arrival {
    justify-content: flex-start
}

relation-time .input.arrival:focus,
relation-time .input.arrival:hover {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

relation-time .input.validityStartDate {
    height: 90px;
    justify-content: center;
    color: #222;
    position: relative;
    text-align: left;
    padding-left: 10px
}

.route relation-time .input.validityStartDate {
    padding-left: 20px
}

relation-time .input.validityStartDate:focus,
relation-time .input.validityStartDate:hover {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

relation-time .input.validityStartDate .heute {
    position: absolute;
    top: 6px;
    text-align: left;
    padding-left: 2px;
    font-size: 12px;
    color: #868686
}

relation-time .input .time-wrapper {
    display: flex;
    justify-content: space-between
}

@media (min-width:480px) {
    relation-time .route .validityStartDate {
        padding-left: 20px
    }
}

@media (min-width: 870px) {
    relation-time .route {
        flex: 0 0 95px;
        width: 95px;
        max-width: 95px
    }
}

@media (min-width:480px) {
    relation-time {
        flex: 0 0 113px;
        width: 113px;
        max-width: 113px;
        padding: 0
    }
    relation-time.route {
        flex: 0 0 95px;
        width: 95px;
        max-width: 95px
    }
    relation-time.route .validityStartDate {
        padding-left: 20px
    }
}

@media (min-width: 870px) {
    relation-time {
        padding: 0
    }
}

body[state^="root.shop"] #content {
    flex-direction: column;
    overflow: hidden;
    height: 100%
}

body[state^="root.shop.start"] #rightColumn {
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0;
    margin: 0;
    flex: 1
}

body[state^="root.shop.start"] #content.onColumn {
    padding-left: 0
}

@media (max-width:720px) {
    body[state^="root.shop.start"] #header .subheader .backIconWrapper {
        background-color: #f0f0f0;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, .35)
    }
    body[state^="root.shop.start"] #header .subheader .backIconWrapper svg {
        fill: #000!important
    }
    body[state^="root.shop.start"] #header .subheader .backIconWrapper:hover {
        background-color: #d7d7d7
    }
}

body[state^="root.shop.start"] .subheader .greeting {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    margin-top: 10px
}

body[state^="root.shop.start"] .subheader .name {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1em;
    margin-top: 6px
}

@media (min-width: 870px) {
    body[state^="root.shop.start"][substate*="."] #header .subheader {
        opacity: 0;
        transition: opacity .15s ease-out
    }
}

body[state^="root.shop.start"] #header .text.wrapper {
    opacity: 1
}

body[state^="root.shop.start"] #header .content,
body[state^="root.shop.start"] #header .logo {
    display: none
}

@media (min-width: 870px) {
    body[state^="root.shop.start"] #header .logo {
        display: block
    }
}

body[state^="root.shop.start"] #header .content4 {
    margin-left: 65px
}

@media (min-width: 870px) {
    body[state^="root.shop.start"] #header .content4 {
        margin-left: 162px
    }
}

#shopContent {
    overflow: auto;
    z-index: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    flex: 1;
    display: flex;
    flex-flow: column
}

#shopContent shop-main .start-page {
    flex: 1;
    display: flex;
    flex-flow: column
}

#shopContent shop-folder,
#shopContent shop-main {
    flex: 1;
    display: flex;
    flex-flow: column
}

#shopContent shop-folder .favourites-header,
#shopContent shop-main .favourites-header {
    color: #fff;
    font-weight: 400
}

#shopContent shop-folder .backgroundGrey,
#shopContent shop-main .backgroundGrey {
    background-color: #f0f0f0;
    flex: 1 0 auto
}

#shopContent shop-folder .shop-block,
#shopContent shop-main .shop-block {
    position: relative
}

#shopContent shop-folder .shop-block .favourites-container,
#shopContent shop-main .shop-block .favourites-container {
    flex: 1 0 auto
}

#shopContent shop-folder .shop-block .backgroundGrey,
#shopContent shop-main .shop-block .backgroundGrey {
    flex: 1 0 auto
}

#shopContent shop-folder .shop-block .content,
#shopContent shop-main .shop-block .content {
    padding: 16px 0 16px 30px
}

#shopContent shop-folder .shop-block .content h1,
#shopContent shop-main .shop-block .content h1 {
    font-size: 30px;
    font-weight: 400
}

@media (min-width:479px) {
    #shopContent shop-folder .shop-block .content,
    #shopContent shop-main .shop-block .content {
        padding: 16px 32px 16px 80px
    }
}

@media (min-width:719px) {
    #shopContent shop-folder .shop-block .content,
    #shopContent shop-main .shop-block .content {
        padding: 16px 32px 16px 135px
    }
}

@media (min-width:859px) {
    #shopContent shop-folder .shop-block .content,
    #shopContent shop-main .shop-block .content {
        padding: 16px 32px 16px 148px
    }
}

@media (min-width:1023px) {
    #shopContent shop-folder .shop-block .content,
    #shopContent shop-main .shop-block .content {
        padding: 16px 60px 16px 286px
    }
}

@media (min-width:1279px) {
    #shopContent shop-folder .shop-block .content,
    #shopContent shop-main .shop-block .content {
        padding: 16px 152px 16px 430px
    }
}

@media (min-width:1439px) {
    #shopContent shop-folder .shop-block .content,
    #shopContent shop-main .shop-block .content {
        padding: 16px 312px 16px 430px
    }
}

.shop-folder .shop-folder-content {
    padding: 20px 0 10px 0;
    min-height: 48px;
    position: relative;
    border-bottom: 1px solid #d7d7d7;
    cursor: pointer
}

@media (min-width: 870px) {
    .shop-folder .shop-folder-content {
        max-width: 463px
    }
}

.shop-folder .shop-folder-content>.header-image {
    display: block;
    position: relative;
    min-height: 48px
}

.shop-folder .shop-folder-content>.header-image>img {
    width: 100%
}

@media (min-width:380px) {
    .shop-folder .shop-folder-content>.header-image {
        min-height: 53px
    }
}

.shop-folder .shop-folder-content>.row {
    display: flex;
    flex-wrap: nowrap
}

.shop-folder .shop-folder-content>.row>.icon {
    flex: 0 0 48px;
    width: 48px;
    min-height: 48px;
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: 100% auto;
    z-index: 2
}

@media (min-width:380px) {
    .shop-folder .shop-folder-content>.row>.icon {
        width: 53px;
        min-height: 53px;
        flex: 0 0 53px
    }
}

.shop-folder .shop-folder-content>.row>.text {
    flex: 1 1;
    padding: 8px 16px 16px 16px;
    color: #222
}

.shop-folder .shop-folder-content>.row>.text>.title {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3em;
    margin: 0
}

.shop-folder .shop-folder-content>.row>.text>.description {
    font-size: 12px;
    font-weight: 400;
    margin: 0
}

.shop-folder .shop-folder-content>.row>.next {
    flex: 0 0 32px;
    align-self: center
}

.shop-entry {
    margin-bottom: 10px
}

@media (min-width: 870px) {
    .shop-entry {
        max-width: 463px
    }
}

.shop-entry .shop-entry-content {
    display: flex;
    flex-wrap: nowrap;
    min-height: 48px;
    position: relative;
    background-color: #fff;
    cursor: pointer
}

.shop-entry .shop-entry-content>.icon {
    flex: 0 0 48px;
    width: 48px;
    min-height: 48px;
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: 100% auto;
    z-index: 2
}

@media (min-width:380px) {
    .shop-entry .shop-entry-content>.icon {
        width: 53px;
        min-height: 53px;
        flex: 0 0 53px
    }
}

.shop-entry .shop-entry-content>.text {
    flex: 1 1;
    background: #fff;
    padding: 5px 8px 5px 15px;
    color: #222
}

@media (min-width:380px) {
    .shop-entry .shop-entry-content>.text {
        padding: 6px 8px 6px 18px
    }
}

.shop-entry .shop-entry-content>.text>.title {
    font-size: 18px;
    font-weight: 700;
    margin: 0
}

.shop-entry .shop-entry-content>.text>.description {
    font-size: 12px;
    margin: 0
}

body[state^="root.shop.folder"] #header {
    display: none
}

@media (min-width:719px) {
    body[state^="root.shop.folder"] #header {
        display: block
    }
}

shop-folder .folder {
    font-weight: 600
}

shop-folder .shopEntries {
    background-color: #f0f0f0;
    flex: 1 1 auto
}

shop-folder .shopItemHeader {
    position: relative;
    background-color: #222;
    min-height: 195px;
    height: 195px;
    display: flex
}

@media (min-width:479px) {
    shop-folder .shopItemHeader {
        padding: 16px 32px 16px 10px
    }
}

@media (min-width:719px) {
    shop-folder .shopItemHeader {
        padding: 16px 32px 16px 70px
    }
}

@media (min-width:859px) {
    shop-folder .shopItemHeader {
        padding: 16px 32px 16px 80px
    }
}

@media (min-width:1023px) {
    shop-folder .shopItemHeader {
        padding: 16px 60px 16px 215px
    }
}

@media (min-width:1279px) {
    shop-folder .shopItemHeader {
        padding: 16px 152px 16px 360px
    }
}

@media (min-width:1439px) {
    shop-folder .shopItemHeader {
        padding: 16px 390px 16px 360px
    }
}

shop-folder .shopItemHeader>.shopItemHeaderImage {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background: #7d7d7d no-repeat center top;
    opacity: .7
}

shop-folder .shopItemHeader>.subheader {
    position: relative;
    z-index: 15;
    opacity: 1;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end
}

shop-folder .shopItemHeader>.subheader>.col1 {
    margin-bottom: 25px;
    flex: 0 0 65px;
    display: flex;
    justify-content: flex-start;
    color: #fff
}

@media (min-width: 870px) {
    shop-folder .shopItemHeader>.subheader>.col1 {
        color: #222
    }
}

@media (max-width:869px) {
    shop-folder .shopItemHeader>.subheader>.col1 {
        align-self: flex-end
    }
}

shop-folder .shopItemHeader>.subheader>.col1 .backIconWrapper {
    background-color: #f0f0f0;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .35);
    width: 48px;
    text-align: center;
    height: 48px;
    line-height: 48px;
    margin-right: 14px;
    cursor: pointer
}

shop-folder .shopItemHeader>.subheader>.col1 .backIconWrapper:hover {
    background-color: #d7d7d7
}

shop-folder .shopItemHeader>.subheader>.col1 .backIconWrapper svg {
    fill: #000!important;
    vertical-align: middle;
    margin-top: -5px
}

shop-folder .shopItemHeader>.subheader>.col2 {
    line-height: 1.1em;
    padding-left: 5px;
    flex: 1;
    color: #fff
}

shop-folder .shopItemHeader>.subheader>.col2 h1,
shop-folder .shopItemHeader>.subheader>.col2 h2 {
    line-height: 1.1em;
    margin: 4px 0;
    font-weight: 400
}

shop-folder .shopItemHeader>.subheader>.col2 h1 {
    font-size: 20px
}

shop-folder .shopItemHeader>.subheader>.col2 h2 {
    font-size: 16px
}

@media (min-width: 870px) {
    shop-folder .shopItemHeader>.subheader>.col2 h1 {
        font-size: 24px;
        margin-bottom: 8px
    }
    shop-folder .shopItemHeader>.subheader>.col2 h2 {
        font-size: 18px
    }
}

@media (min-width:1440px) {
    shop-folder .shopItemHeader>.subheader>.col2 {
        flex: 0 0 626px
    }
}

timetable-boarding-time-summary {
    padding-top: 10px;
    font-size: 12px;
    white-space: normal;
    display: block;
    color: #ab0020
}

connection-sections-overview-bubble table {
    margin-top: 10px;
    width: 100%
}

connection-sections-overview-bubble table tr:nth-child(odd) {
    background: #d7d7d7
}

connection-sections-overview-bubble table th {
    text-align: center;
    padding: 0 15px
}

connection-sections-overview-bubble table td {
    text-align: center;
    padding: 0 15px
}

connection-sections-overview-bubble table td:first-of-type {
    text-align: left
}

connection-sections-overview-bubble table .delayed-info span:first-of-type {
    text-decoration: line-through
}

connection-sections-overview-bubble table .delayed-info span:last-of-type {
    text-decoration: none;
    color: #d63d00;
    margin-left: 5px
}

timetable-connection.fading .connectionWrapper {
    zoom: 1;
    filter: alpha(opacity=60);
    -webkit-opacity: .6;
    -moz-opacity: .6;
    opacity: .6;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    transition: .5s -webkit-filter linear, .5s -moz-filter linear, .5s -o-filter linear, .5s filter linear
}

timetable-connection .connectionWrapper {
    position: relative
}

timetable-connection .connectionWrapper.isSuppressed {
    display: none
}

timetable-connection .connectionWrapper.isSuppressed .actions {
    display: none
}

timetable-connection .connectionWrapper .connection.widget {
    min-height: 105px;
    margin-bottom: 3px;
    white-space: nowrap;
    display: flex;
    width: 100%
}

timetable-connection .connectionWrapper .connection.widget:focus,
timetable-connection .connectionWrapper .connection.widget:hover {
    outline: 0
}

timetable-connection .connectionWrapper .connection.widget:focus .time,
timetable-connection .connectionWrapper .connection.widget:focus .travel,
timetable-connection .connectionWrapper .connection.widget:hover .time,
timetable-connection .connectionWrapper .connection.widget:hover .travel {
    background-color: #dedede
}

timetable-connection .connectionWrapper .connection.widget:focus .price,
timetable-connection .connectionWrapper .connection.widget:hover .price {
    background-color: #ededed
}

timetable-connection .connectionWrapper .connection.widget:focus~.actions .action,
timetable-connection .connectionWrapper .connection.widget:hover~.actions .action {
    opacity: 1;
    left: -39px;
    transition: opacity .3s ease-out, left .3s ease-out;
    outline: 0
}

timetable-connection .connectionWrapper .connection.widget .time {
    z-index: 2;
    min-height: 105px;
    text-align: center;
    padding: 19px 10px 0 0;
    text-align: right;
    font-weight: 400;
    font-size: 16px;
    color: #222;
    background-color: #f0f0f0;
    width: 52px;
    flex: 0 0 52px
}

timetable-connection .connectionWrapper .connection.widget .time .delayed {
    color: #d63d00
}

@media (min-width:380px) {
    timetable-connection .connectionWrapper .connection.widget .time {
        width: 70px;
        flex: 0 0 70px
    }
}

@media (min-width:480px) {
    timetable-connection .connectionWrapper .connection.widget .time {
        width: 75px;
        flex: 0 0 75px
    }
}

@media (min-width: 870px) {
    timetable-connection .connectionWrapper .connection.widget .time {
        width: 83px;
        font-size: 18px;
        flex: 0 0 83px
    }
}

@media (min-width: 870px) {
    timetable-connection .connectionWrapper .connection.widget .time {
        width: 88px;
        flex: 0 0 88px
    }
}

timetable-connection .connectionWrapper .connection.widget .time .hour {
    font-weight: 700
}

timetable-connection .connectionWrapper .connection.widget .time .changedTime {
    font-weight: 400;
    font-size: 18px;
    text-decoration: line-through;
    color: #6a6a6a;
    margin: 0
}

timetable-connection .connectionWrapper .connection.widget .time .date {
    font-size: 12px;
    text-align: center;
    color: #d40027
}

timetable-connection .connectionWrapper .connection.widget .travel {
    font-size: 12px;
    color: #6a6a6a;
    padding: 19px 10px 10px 10px;
    flex: 1 1;
    border-left: 1px solid #d7d7d7;
    border-right: 1px solid #d7d7d7;
    background-color: #f0f0f0;
    overflow-x: hidden
}

@media (min-width: 870px) {
    timetable-connection .connectionWrapper .connection.widget .travel {
        font-size: 12px
    }
}

timetable-connection .connectionWrapper .connection.widget .travel>p.station {
    margin: 0;
    font-size: 12px;
    color: #000
}

timetable-connection .connectionWrapper .connection.widget .travel>p.station:first-of-type {
    padding-top: 5px
}

timetable-connection .connectionWrapper .connection.widget .travel>p.currentJourney {
    color: #51a351
}

timetable-connection .connectionWrapper .connection.widget .travel .reduction-summary {
    padding: 10px 0 0 0
}

timetable-connection .connectionWrapper .connection.widget .perforation {
    width: 4px;
    background-image: url(https://tickets-deva.oebb.at/static/images/background/connectionPerforation.svg)
}

timetable-connection .connectionWrapper .connection.widget .price {
    font-size: 16px;
    font-weight: 400;
    background-color: #fff;
    color: #222;
    padding: 19px 16px 0 5px;
    text-align: right;
    max-width: 80px;
    width: 80px;
    flex: 0 0 80px
}

@media (min-width:380px) {
    timetable-connection .connectionWrapper .connection.widget .price {
        max-width: 90px;
        width: 90px;
        flex: 0 0 90px
    }
}

@media (min-width: 870px) {
    timetable-connection .connectionWrapper .connection.widget .price {
        max-width: 143px;
        width: 143px;
        font-size: 18px;
        flex: 0 0 143px
    }
}

timetable-connection .connectionWrapper .connection.widget .price .noOffers {
    font-size: 12px;
    white-space: normal;
    display: block;
    padding-top: 17px
}

@media (min-width: 870px) {
    timetable-connection .connectionWrapper .connection.widget .price .noOffers {
        font-size: 12px
    }
}

timetable-connection .connectionWrapper .connection.widget .price .error {
    font-size: 12px;
    margin: 0;
    padding: 0
}

@media (min-width: 870px) {
    timetable-connection .connectionWrapper .connection.widget .price .error {
        font-size: 12px
    }
}

timetable-connection .connectionWrapper .connection.widget .price .noCachedOffer {
    font-size: 12px;
    margin: 0;
    padding: 0;
    color: #d40027;
    white-space: normal
}

timetable-connection .connectionWrapper .connection.widget .price .reduction-warning {
    color: #d40027;
    font-size: 12px;
    margin: 0;
    padding-top: 9px
}

@media (min-width: 870px) {
    timetable-connection .connectionWrapper .connection.widget .price .reduction-warning {
        font-size: 12px
    }
}

timetable-connection .connectionWrapper .connection.widget .price .concession-info {
    color: #508546;
    font-size: 12px;
    margin: 0;
    padding: 0
}

@media (min-width: 870px) {
    timetable-connection .connectionWrapper .connection.widget .price .concession-info {
        font-size: 12px
    }
}

timetable-connection .connectionWrapper .actions {
    z-index: 1
}

timetable-connection .connectionWrapper .actions .action {
    padding: 7px;
    padding-bottom: 5px;
    line-height: 100%;
    position: absolute;
    left: 0;
    opacity: 0;
    top: 15px;
    width: 39px;
    transition: opacity .3s ease-in, left .3s ease-in
}

timetable-connection .connectionWrapper .actions .action:focus,
timetable-connection .connectionWrapper .actions .action:hover {
    opacity: 1;
    left: -39px;
    display: block;
    outline: 0;
    -webkit-filter: drop-shadow(1px 1px 10px #000);
    -moz-filter: drop-shadow(1px 1px 10px #000);
    -ms-filter: drop-shadow(1px 1px 10px #000);
    filter: drop-shadow(1px 1px 10px #000);
    transition: opacity .3s ease-out, left .3s ease-out
}

timetable-connection .connectionWrapper .actions svg {
    fill: #fff
}

@media (max-width:869px) {
    timetable-connection .connectionWrapper .actions {
        display: none
    }
}

@-webkit-keyframes scalefade2 {
    0% {
        -webkit-transform: scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(0);
        height: 0;
        margin: 0;
        visibility: hidden
    }
}

@keyframes scalefade2 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        height: 0;
        margin: 0;
        visibility: hidden
    }
}

timetable-header .navigationHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 21px
}

timetable-header .navigationHeader h1 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    flex: 1
}

timetable-header .navigationHeader .combiticket-info {
    color: #fff;
    margin-top: 0
}

@media (max-width:869px) {
    timetable-header .navigationHeader {
        background-color: #f0f0f0
    }
    timetable-header .navigationHeader .combiticket-info,
    timetable-header .navigationHeader h1 {
        color: #222;
        margin: 15px 0 0 15px
    }
    timetable-header .navigationHeader h1 {
        font-size: 32px;
    }
}

timetable-header .navigationHeader .header-actions {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-width: 225px
}

@media (max-width:869px) {
    timetable-header .navigationHeader .header-actions {
        display: none
    }
}

timetable-header .navigationHeader .header-actions .createConnectionMonitorWrapper {
    flex: 0 1 auto;
    color: #fff
}

timetable-header .navigationHeader .header-actions .createConnectionMonitorWrapper .createConnectionMonitorContainer {
    display: flex;
    flex-direction: column
}

timetable-header .navigationHeader .header-actions .createConnectionMonitorWrapper .createConnectionMonitorContainer>label {
    flex: 1 0 auto;
    align-self: flex-end;
    min-height: 20px
}

timetable-header .navigationHeader .header-actions .createConnectionMonitorWrapper .createConnectionMonitorContainer .createConnectionInfocardButtonWrapper {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: flex-end
}

timetable-header .navigationHeader .header-actions .createConnectionMonitorWrapper .createConnectionMonitorContainer .createConnectionInfocardButtonWrapper>.share {
    flex: 0 1 30px;
    min-width: 30px;
    text-align: center
}

timetable-header .navigationHeader .header-actions .createConnectionMonitorWrapper .createConnectionMonitorContainer .createConnectionInfocardButtonWrapper>.createConnectionInfocardButton {
    flex: 0 0 186px;
    min-width: 186px
}

timetable-header .navigationHeader .header-actions .createConnectionMonitorWrapper .createConnectionMonitorContainer svg {
    fill: #fff
}

timetable-header .navigationHeader .header-actions .createConnectionMonitorWrapper .createConnectionMonitorContainer:focus,
timetable-header .navigationHeader .header-actions .createConnectionMonitorWrapper .createConnectionMonitorContainer:hover {
    color: #ccc
}

timetable-header .navigationHeader .header-actions .createConnectionMonitorWrapper .createConnectionMonitorContainer:focus svg,
timetable-header .navigationHeader .header-actions .createConnectionMonitorWrapper .createConnectionMonitorContainer:hover svg {
    fill: #ccc
}

@media (max-width:869px) {
    timetable-header .navigationHeader .header-actions .createConnectionMonitorWrapper {
        display: none
    }
}

timetable-header .navigationHeader .header-actions.avc {
    min-height: 63px;
    font-size: 12px
}

timetable-header .navigationHeader .header-actions.avc .invertRelation {
    flex: 1;
    text-transform: uppercase;
    color: #fff
}

timetable-header .navigationHeader .header-actions.avc .invertRelation>.invert-relation-button-wrapper {
    color: #fff;
    text-shadow: 0 0 3px #222;
    padding: 4px 0;
    background-color: rgba(34, 34, 34, .6);
    min-width: 160px
}

timetable-header .navigationHeader .header-actions.avc .invertRelation>.invert-relation-button-wrapper svg g {
    fill: #fff
}

timetable-header .navigationHeader .header-actions.avc .invertRelation>.invert-relation-button-wrapper:focus,
timetable-header .navigationHeader .header-actions.avc .invertRelation>.invert-relation-button-wrapper:hover {
    color: #ccc
}

timetable-header .navigationHeader .header-actions.avc .invertRelation>.invert-relation-button-wrapper:focus svg g,
timetable-header .navigationHeader .header-actions.avc .invertRelation>.invert-relation-button-wrapper:hover svg g {
    fill: #ccc
}

timetable-header .navigationHeader .header-actions.avc .invertRelation>.invert-relation-button-wrapper .invert-relation-button {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

timetable-header .navigationHeader .header-actions.avc .invertRelation>.invert-relation-button-wrapper .invert-relation-button .invert-relation-icon {
    flex: 0 0 30px;
    text-align: center
}

timetable-header .navigationHeader .header-actions.avc .invertRelation>.invert-relation-button-wrapper .invert-relation-button .invert-relation-text {
    flex: 0 1 136px
}

timetable-header .navigationHeader .header-actions.avc .invertRelation>.invert-relation-button-wrapper.disabled:focus,
timetable-header .navigationHeader .header-actions.avc .invertRelation>.invert-relation-button-wrapper.disabled:hover {
    color: #b3b3b3
}

timetable-header .navigationHeader .header-actions.avc .invertRelation>.invert-relation-button-wrapper.disabled:focus svg g,
timetable-header .navigationHeader .header-actions.avc .invertRelation>.invert-relation-button-wrapper.disabled:hover svg g {
    fill: #b3b3b3
}

timetable-header .navigationHeader .header-actions.avc .createConnectionMonitorWrapper {
    color: #fff;
    text-shadow: 0 0 3px #222;
    padding: 4px 7px 4px 0;
    background-color: rgba(34, 34, 34, .6);
    min-width: 145px
}

timetable-header .navigationHeader .header-actions.avc .createConnectionMonitorWrapper label {
    display: none
}

timetable-header-bubbles .disclaimerNewTimetableWrapper material-info-bubble i {
    display: none
}

timetable-header-bubbles .disclaimerNewTimetableWrapper material-info-bubble .normal .info-bubble {
    background-color: #221d47;
    color: #fff
}

timetable-header-bubbles .disclaimerNewTimetableWrapper material-info-bubble .normal .info-bubble .info-bubble-left svg {
    color: #fff;
    fill: #fff
}

timetable-header-bubbles .disclaimerNewTimetableWrapper material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-title {
    font-weight: 700;
    color: #fff
}

timetable-header-bubbles .disclaimerNewTimetableWrapper material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-content {
    color: #fff
}

timetable-header-bubbles .disclaimerNewTimetableWrapper material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button {
    color: #fff;
    background-color: #221d47
}

timetable-header-bubbles .disclaimerNewTimetableWrapper material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button .mat-button-focus-overlay {
    background-color: rgba(34, 29, 71, .1)
}

timetable-header-bubbles .disclaimerNewTimetableWrapper material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button:hover {
    background-color: #221d47
}

timetable-container {
    display: block;
    margin-top: 0
}

@media (min-width: 870px) {
    timetable-container {
        margin-top: 95px;
        margin-left: 145px
    }
}

@media (min-width: 870px) {
    timetable-container {
        margin-left: 286px
    }
}

.timetable-container {
    max-width: 678px;
    opacity: 1;
    display: block;
    transition: opacity .3s ease-out .4s
}

@media (max-width:869px) {
    .timetable-container {
        margin: 0;
        max-width: none
    }
    .timetable-container .loading {
        padding: 20px
    }
}

.timetable-container.ng-hide {
    opacity: 0
}

@media (max-width:869px) {
    .timetable-container.header {
        margin: 0;
        background-color: #f0f0f0;
        padding: 39px 16px 21px 16px
    }
}

.timetable-container>header {
    color: #fff;
    font-size: 12px;
    display: flex;
    margin-bottom: 13px
}

.timetable-container>header>span {
    text-align: center
}

.timetable-container>header .departure {
    flex: 0 0 88px
}

.timetable-container>header .travel {
    flex: 1 1
}

.timetable-container>header .arrival {
    flex: 0 0 88px
}

.timetable-container>header .price {
    flex: 0 0 123px;
    text-align: right;
    padding-right: 16px
}

@media (max-width:869px) {
    .timetable-container>header {
        background-color: #f0f0f0;
        color: #222;
        margin: 0 0 8px 0;
        padding: 5px 0
    }
}

.timetable-container>.button {
    font-size: 12px;
    text-align: center;
    height: 39px;
    margin-bottom: 3px;
    line-height: 39px;
    width: 100%;
    color: #fff;
    text-shadow: 0 0 3px #222;
    background-color: rgba(34, 34, 34, .6)
}

.timetable-container>.button.disabled {
    cursor: no-drop;
    color: #e6e6e6
}

.timetable-container>.button:focus,
.timetable-container>.button:hover {
    color: #ccc
}

.timetable-container>.button.loading {
    padding-top: 7px
}

body[state="root.ticket.timetable"] .bestPriceFinderLoadingScreen {
    max-width: none!important
}

body[state="root.ticket.timetable"] .bestPriceFinderLoadingScreen mat-dialog-container {
    padding: 0;
    background: #f0f0f0
}

password-field .visibility-icon {
    display: flex;
    align-items: center;
    margin-left: -20px;
    z-index: 3
}

password-field .visibility-icon :hover {
    cursor: pointer
}

password-field .password-info {
    margin-top: -15px;
    font-size: 12px
}

password-field .mat-error.info {
    color: #51a351
}

password-field .mat-error.warning {
    color: #f89306
}

connection-debug-info,
shop-debug-info,
shopping-cart-debug-info,
start-debug-info {
    display: block;
    font-size: 12px;
    color: #000
}

connection-debug-info p,
shop-debug-info p,
shopping-cart-debug-info p,
start-debug-info p {
    margin: 0 0 15px 0
}

connection-debug-info hr,
shop-debug-info hr,
shopping-cart-debug-info hr,
start-debug-info hr {
    border: 1px solid #d7d7d7
}

connection-debug-info ul,
shop-debug-info ul,
shopping-cart-debug-info ul,
start-debug-info ul {
    margin: 10px 0 0 0;
    padding: 0;
    list-style-type: none
}

connection-debug-info ul li,
shop-debug-info ul li,
shopping-cart-debug-info ul li,
start-debug-info ul li {
    padding: 0 0 5px 16px
}

connection-debug-info .hafas-debug-info,
shop-debug-info .hafas-debug-info,
shopping-cart-debug-info .hafas-debug-info,
start-debug-info .hafas-debug-info {
    background: #FFF;
    font-family: monospace, monospace;
    font-size: .8em
}

connection-debug-info .hafas-debug-info span:first-child::after,
shop-debug-info .hafas-debug-info span:first-child::after,
shopping-cart-debug-info .hafas-debug-info span:first-child::after,
start-debug-info .hafas-debug-info span:first-child::after {
    content: " + "
}

debug-container .debug-container-content {
    max-height: 320px;
    flex: 0 0 320px;
    z-index: 9999;
    background-color: #fff;
    display: block;
    overflow-y: scroll
}

debug-container .debug-container-content .header {
    height: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

debug-container .debug-container-content .header>button {
    width: 14px;
    margin: 0 10px
}

debug-container .debug-container-content .debug-info-content {
    height: 100%;
    padding: 0 20px 60px 20px;
    min-height: 290px
}

@media (max-width:479px) {
    .mat-dialog-container {
        padding: 16px 24px!important
    }
}

.success-dialog {
    max-width: 512px;
    position: relative
}

@media (min-width:719px) {
    .success-dialog {
        width: 512px
    }
}

.success-dialog .spinner-section {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    background-color: rgba(240, 240, 240, .5)
}

.success-dialog .title-section {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #51a351
}

.success-dialog .body-section {
    padding-top: 24px;
    padding-bottom: 28px;
    font-size: 14px;
    line-height: 20px;
    max-height: 40vh;
    overflow: auto;
    color: #4a4a4a
}

@media (min-width: 870px) {
    .success-dialog .body-section {
        max-height: 75vh
    }
}

.success-dialog .body-section .matForm {
    margin-top: 8px
}

.success-dialog .body-section .matForm .inputWrapper {
    width: 60%
}

@media (max-width:479px) {
    .success-dialog .body-section .matForm .inputWrapper {
        width: 100%
    }
}

.success-dialog .body-section .matForm .inputWrapper mat-form-field {
    width: 100%
}

.success-dialog .body-section .check-box {
    height: 36px;
    display: flex;
    align-items: center;
    width: 60%
}

@media (max-width:479px) {
    .success-dialog .body-section .check-box {
        width: 100%
    }
}

.success-dialog .body-section .check-box .mat-checkbox-checked .mat-checkbox-background {
    background-color: #51a351
}

.success-dialog .body-section .action-item {
    font-weight: 700;
    font-size: 14px;
    width: 60%;
    min-height: 36px;
    height: auto;
    padding: 8px 0;
    display: flex;
    align-items: center;
    color: #51a351
}

@media (max-width:479px) {
    .success-dialog .body-section .action-item {
        width: 100%
    }
}

.success-dialog .body-section .action-item:hover {
    background-color: rgba(81, 163, 81, .1);
    cursor: pointer
}

.success-dialog .body-section .austria-id {
    background-image: url(https://tickets.oebb.at/static/images/austriaID.png);
    width: 229px;
    height: 38px
}

.success-dialog .body-section .austria-id:hover {
    cursor: pointer
}

.success-dialog .footer-section {
    height: auto;
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    flex-wrap: wrap;
    color: #51a351
}

@media (min-width:719px) {
    .success-dialog .footer-section {
        justify-content: space-between
    }
}

@media (max-width:479px) {
    .success-dialog .footer-section {
        margin: 0
    }
    .success-dialog .footer-section.shadow {
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, .5);
        padding: 16px 24px;
        position: relative;
        left: -24px;
        bottom: -16px;
        width: calc(100% + 48px)
    }
}

.success-dialog .footer-section .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.success-dialog .footer-section .mat-button .mat-button-focus-overlay {
    background-color: rgba(81, 163, 81, .1)
}

.success-dialog .footer-section .mat-button[disabled] {
    color: #b5b5b5
}

.success-dialog .footer-section .mat-button[disabled] .mat-button-focus-overlay {
    background-color: transparent
}

.success-dialog .footer-section .mat-button.mat-primary {
    color: #FFF;
    background-color: #51a351
}

.success-dialog .footer-section .mat-button.mat-primary .mat-button-focus-overlay {
    opacity: 0
}

.success-dialog .footer-section .mat-button.mat-primary:hover {
    background-color: #4e844e
}

.success-dialog .footer-section .mat-button.mat-primary[disabled] {
    color: #FFF;
    background-color: #b5b5b5
}

.warning-dialog {
    max-width: 512px;
    position: relative
}

@media (min-width:719px) {
    .warning-dialog {
        width: 512px
    }
}

.warning-dialog .spinner-section {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    background-color: rgba(240, 240, 240, .5)
}

.warning-dialog .title-section {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #f89306
}

.warning-dialog .body-section {
    padding-top: 24px;
    padding-bottom: 28px;
    font-size: 14px;
    line-height: 20px;
    max-height: 40vh;
    overflow: auto;
    color: #4a4a4a
}

@media (min-width: 870px) {
    .warning-dialog .body-section {
        max-height: 75vh
    }
}

.warning-dialog .body-section .matForm {
    margin-top: 8px
}

.warning-dialog .body-section .matForm .inputWrapper {
    width: 60%
}

@media (max-width:479px) {
    .warning-dialog .body-section .matForm .inputWrapper {
        width: 100%
    }
}

.warning-dialog .body-section .matForm .inputWrapper mat-form-field {
    width: 100%
}

.warning-dialog .body-section .check-box {
    height: 36px;
    display: flex;
    align-items: center;
    width: 60%
}

@media (max-width:479px) {
    .warning-dialog .body-section .check-box {
        width: 100%
    }
}

.warning-dialog .body-section .check-box .mat-checkbox-checked .mat-checkbox-background {
    background-color: #f89306
}

.warning-dialog .body-section .action-item {
    font-weight: 700;
    font-size: 14px;
    width: 60%;
    min-height: 36px;
    height: auto;
    padding: 8px 0;
    display: flex;
    align-items: center;
    color: #51a351
}

@media (max-width:479px) {
    .warning-dialog .body-section .action-item {
        width: 100%
    }
}

.warning-dialog .body-section .action-item:hover {
    background-color: rgba(81, 163, 81, .1);
    cursor: pointer
}

.warning-dialog .body-section .austria-id {
    background-image: url(https://tickets.oebb.at/static/images/austriaID.png);
    width: 229px;
    height: 38px
}

.warning-dialog .body-section .austria-id:hover {
    cursor: pointer
}

.warning-dialog .footer-section {
    height: auto;
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    flex-wrap: wrap;
    color: #f89306
}

@media (min-width:719px) {
    .warning-dialog .footer-section {
        justify-content: space-between
    }
}

@media (max-width:479px) {
    .warning-dialog .footer-section {
        margin: 0
    }
    .warning-dialog .footer-section.shadow {
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, .5);
        padding: 16px 24px;
        position: relative;
        left: -24px;
        bottom: -16px;
        width: calc(100% + 48px)
    }
}

.warning-dialog .footer-section .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.warning-dialog .footer-section .mat-button .mat-button-focus-overlay {
    background-color: rgba(248, 147, 6, .1)
}

.warning-dialog .footer-section .mat-button[disabled] {
    color: #b5b5b5
}

.warning-dialog .footer-section .mat-button[disabled] .mat-button-focus-overlay {
    background-color: transparent
}

.warning-dialog .footer-section .mat-button.mat-primary {
    color: #FFF;
    background-color: #f89306
}

.warning-dialog .footer-section .mat-button.mat-primary .mat-button-focus-overlay {
    opacity: 0
}

.warning-dialog .footer-section .mat-button.mat-primary:hover {
    background-color: #f89306
}

.warning-dialog .footer-section .mat-button.mat-primary[disabled] {
    color: #FFF;
    background-color: #b5b5b5
}

.error-dialog {
    max-width: 512px;
    position: relative
}

@media (min-width:719px) {
    .error-dialog {
        width: 512px
    }
}

.error-dialog .spinner-section {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    background-color: rgba(240, 240, 240, .5)
}

.error-dialog .title-section {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #bc332c
}

.error-dialog .body-section {
    padding-top: 24px;
    padding-bottom: 28px;
    font-size: 14px;
    line-height: 20px;
    max-height: 40vh;
    overflow: auto;
    color: #4a4a4a
}

@media (min-width: 870px) {
    .error-dialog .body-section {
        max-height: 75vh
    }
}

.error-dialog .body-section .matForm {
    margin-top: 8px
}

.error-dialog .body-section .matForm .inputWrapper {
    width: 60%
}

@media (max-width:479px) {
    .error-dialog .body-section .matForm .inputWrapper {
        width: 100%
    }
}

.error-dialog .body-section .matForm .inputWrapper mat-form-field {
    width: 100%
}

.error-dialog .body-section .check-box {
    height: 36px;
    display: flex;
    align-items: center;
    width: 60%
}

@media (max-width:479px) {
    .error-dialog .body-section .check-box {
        width: 100%
    }
}

.error-dialog .body-section .check-box .mat-checkbox-checked .mat-checkbox-background {
    background-color: #bc332c
}

.error-dialog .body-section .action-item {
    font-weight: 700;
    font-size: 14px;
    width: 60%;
    min-height: 36px;
    height: auto;
    padding: 8px 0;
    display: flex;
    align-items: center;
    color: #51a351
}

@media (max-width:479px) {
    .error-dialog .body-section .action-item {
        width: 100%
    }
}

.error-dialog .body-section .action-item:hover {
    background-color: rgba(81, 163, 81, .1);
    cursor: pointer
}

.error-dialog .body-section .austria-id {
    background-image: url(https://tickets.oebb.at/static/images/austriaID.png);
    width: 229px;
    height: 38px
}

.error-dialog .body-section .austria-id:hover {
    cursor: pointer
}

.error-dialog .footer-section {
    height: auto;
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    flex-wrap: wrap;
    color: #bc332c
}

@media (min-width:719px) {
    .error-dialog .footer-section {
        justify-content: space-between
    }
}

@media (max-width:479px) {
    .error-dialog .footer-section {
        margin: 0
    }
    .error-dialog .footer-section.shadow {
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, .5);
        padding: 16px 24px;
        position: relative;
        left: -24px;
        bottom: -16px;
        width: calc(100% + 48px)
    }
}

.error-dialog .footer-section .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.error-dialog .footer-section .mat-button .mat-button-focus-overlay {
    background-color: rgba(188, 51, 44, .1)
}

.error-dialog .footer-section .mat-button[disabled] {
    color: #b5b5b5
}

.error-dialog .footer-section .mat-button[disabled] .mat-button-focus-overlay {
    background-color: transparent
}

.error-dialog .footer-section .mat-button.mat-primary {
    color: #FFF;
    background-color: #bc332c
}

.error-dialog .footer-section .mat-button.mat-primary .mat-button-focus-overlay {
    opacity: 0
}

.error-dialog .footer-section .mat-button.mat-primary:hover {
    background-color: #bc332c
}

.error-dialog .footer-section .mat-button.mat-primary[disabled] {
    color: #FFF;
    background-color: #b5b5b5
}

shared-confirmations-dialog .mat-dialog-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 28px
}

shared-confirmations-dialog .mat-dialog-title.success {
    color: #51a351
}

shared-confirmations-dialog .mat-dialog-title.warning {
    color: #f89306
}

shared-confirmations-dialog .mat-dialog-title.error {
    color: #bc332c
}

shared-confirmations-dialog .mat-dialog-content {
    font-size: 14px;
    line-height: 20px;
    color: #4a4a4a;
    margin-bottom: 20px
}

shared-confirmations-dialog .mat-dialog-content ul {
    margin: 0;
    padding-left: 20px
}

shared-confirmations-dialog .mat-dialog-content ul li {
    padding-left: 0
}

shared-confirmations-dialog .mat-dialog-content p {
    margin: 0
}

shared-confirmations-dialog .mat-dialog-content .confirmation-cb {
    display: block;
    overflow: hidden;
    margin-top: 10px
}

shared-confirmations-dialog .mat-dialog-actions {
    padding: 0;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0
}

shared-confirmations-dialog .mat-dialog-actions.success {
    color: #51a351
}

shared-confirmations-dialog .mat-dialog-actions.success .mat-button-focus-overlay {
    background-color: rgba(81, 163, 81, .1)
}

shared-confirmations-dialog .mat-dialog-actions.warning {
    color: #f89306
}

shared-confirmations-dialog .mat-dialog-actions.warning .mat-button-focus-overlay {
    background-color: rgba(248, 147, 6, .1)
}

shared-confirmations-dialog .mat-dialog-actions.warning .mat-flat-button {
    background-color: #f89306
}

shared-confirmations-dialog .mat-dialog-actions.warning .mat-flat-button[disabled] {
    background-color: rgba(0, 0, 0, .12)
}

shared-confirmations-dialog .mat-dialog-actions.error {
    color: #bc332c
}

shared-confirmations-dialog .mat-dialog-actions.error .mat-button-focus-overlay {
    background-color: rgba(188, 51, 44, .1)
}

shared-confirmations-dialog .mat-dialog-actions.error .mat-flat-button {
    background-color: #bc332c
}

shared-confirmations-dialog .mat-dialog-actions.error .mat-flat-button[disabled] {
    background-color: rgba(0, 0, 0, .12)
}

global-error-dialog .error-support-id-section {
    margin-top: 16px;
    color: #afafaf
}

global-error-dialog .error-support-id-section .interactive-error-session-id span:hover {
    cursor: pointer;
    color: #c9c9c9
}

global-error-dialog .debug-info-section {
    margin-top: 16px;
    font-size: 12px;
    color: #bc332c;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden
}

.material-info-bubble {
    width: 425px
}

.material-info-bubble i {
    margin-top: 6px;
    display: inline-block;
    padding: 10px;
    margin-bottom: -15px;
    margin-left: 15px;
    background-color: #fff;
    position: absolute;
    z-index: 999;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}

.material-info-bubble .info .info-bubble {
    position: absolute;
    z-index: 998;
    margin-top: 16px;
    background: 80% #fff;
    padding: 24px 16px 24px 0;
    display: flex
}

.material-info-bubble .info .info-bubble .info-bubble-left {
    padding: 0 16px
}

.material-info-bubble .info .info-bubble .info-bubble-right {
    width: 100%
}

.material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-title {
    font-size: 14px;
    line-height: 1.25em;
    word-break: break-word;
    color: #51a351;
    padding-bottom: 24px
}

.material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-content {
    padding-bottom: 28px;
    color: #868686;
    font-size: 12px;
    word-break: break-word;
    line-height: 1.25em
}

.material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-footer {
    min-height: 36px;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 8px
}

.material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-footer .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button {
    color: #51a351
}

.material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button .mat-button-focus-overlay {
    background-color: rgba(81, 163, 81, .1)
}

.material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn {
    color: #fff;
    background-color: #51a351
}

.material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn:hover {
    background-color: #408140
}

@media (max-width:720px) {
    .material-info-bubble .info .info-bubble {
        padding: 16px 8px 16px 0
    }
    .material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-title {
        padding-bottom: 12px
    }
    .material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-content {
        padding-bottom: 12px
    }
}

.material-info-bubble .warning .info-bubble {
    position: absolute;
    z-index: 998;
    margin-top: 16px;
    background: 80% #fff;
    padding: 24px 16px 24px 0;
    display: flex
}

.material-info-bubble .warning .info-bubble .info-bubble-left {
    padding: 0 16px
}

.material-info-bubble .warning .info-bubble .info-bubble-right {
    width: 100%
}

.material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-title {
    font-size: 14px;
    line-height: 1.25em;
    word-break: break-word;
    color: #f89306;
    padding-bottom: 24px
}

.material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-content {
    padding-bottom: 28px;
    color: #868686;
    font-size: 12px;
    word-break: break-word;
    line-height: 1.25em
}

.material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-footer {
    min-height: 36px;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 8px
}

.material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-footer .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button {
    color: #f89306
}

.material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button .mat-button-focus-overlay {
    background-color: rgba(248, 147, 6, .1)
}

.material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn {
    color: #fff;
    background-color: #f89306
}

.material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn:hover {
    background-color: #c67505
}

@media (max-width:720px) {
    .material-info-bubble .warning .info-bubble {
        padding: 16px 8px 16px 0
    }
    .material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-title {
        padding-bottom: 12px
    }
    .material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-content {
        padding-bottom: 12px
    }
}

.material-info-bubble .error .info-bubble {
    position: absolute;
    z-index: 998;
    margin-top: 16px;
    background: 80% #fff;
    padding: 24px 16px 24px 0;
    display: flex
}

.material-info-bubble .error .info-bubble .info-bubble-left {
    padding: 0 16px
}

.material-info-bubble .error .info-bubble .info-bubble-right {
    width: 100%
}

.material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-title {
    font-size: 14px;
    line-height: 1.25em;
    word-break: break-word;
    color: #bc332c;
    padding-bottom: 24px
}

.material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-content {
    padding-bottom: 28px;
    color: #868686;
    font-size: 12px;
    word-break: break-word;
    line-height: 1.25em
}

.material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-footer {
    min-height: 36px;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 8px
}

.material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-footer .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button {
    color: #bc332c
}

.material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button .mat-button-focus-overlay {
    background-color: rgba(188, 51, 44, .1)
}

.material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn {
    color: #fff;
    background-color: #bc332c
}

.material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn:hover {
    background-color: #932822
}

@media (max-width:720px) {
    .material-info-bubble .error .info-bubble {
        padding: 16px 8px 16px 0
    }
    .material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-title {
        padding-bottom: 12px
    }
    .material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-content {
        padding-bottom: 12px
    }
}

.material-info-bubble .normal .info-bubble {
    position: absolute;
    z-index: 998;
    margin-top: 16px;
    background: 80% #fff;
    padding: 24px 16px 24px 0;
    display: flex
}

.material-info-bubble .normal .info-bubble .info-bubble-left {
    padding: 0 16px
}

.material-info-bubble .normal .info-bubble .info-bubble-right {
    width: 100%
}

.material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-title {
    font-size: 14px;
    line-height: 1.25em;
    word-break: break-word;
    color: #000;
    padding-bottom: 24px
}

.material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-content {
    padding-bottom: 28px;
    color: #868686;
    font-size: 12px;
    word-break: break-word;
    line-height: 1.25em
}

.material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer {
    min-height: 36px;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 8px
}

.material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button {
    color: #000
}

.material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button .mat-button-focus-overlay {
    background-color: #868686
}

.material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn {
    color: #fff;
    background-color: #000
}

.material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn:hover {
    background-color: #000
}

@media (max-width:720px) {
    .material-info-bubble .normal .info-bubble {
        padding: 16px 8px 16px 0
    }
    .material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-title {
        padding-bottom: 12px
    }
    .material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-content {
        padding-bottom: 12px
    }
}

.inline-material-info-bubble {
    width: 100%;
    margin-bottom: 16px
}

.inline-material-info-bubble i {
    margin-top: 6px;
    z-index: 999;
    display: inline-block;
    padding: 10px;
    margin-bottom: -30px;
    margin-left: 15px;
    background-color: #fff;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}

.inline-material-info-bubble .arrow-top {
    display: flex;
    width: 100%;
    height: 0;
    justify-content: flex-end
}

.inline-material-info-bubble .arrow-top .default {
    width: 100%;
    max-width: calc(680px - 286px)
}

.inline-material-info-bubble .arrow-top .default i {
    margin-bottom: 0
}

.inline-material-info-bubble .arrow-top .conversion-section,
.inline-material-info-bubble .arrow-top .passengers-section {
    width: 143px;
    min-width: 143px;
    display: flex;
    justify-content: center
}

.inline-material-info-bubble .arrow-top .conversion-section i,
.inline-material-info-bubble .arrow-top .passengers-section i {
    margin-left: 0;
    margin-bottom: 0;
    z-index: 10
}

.inline-material-info-bubble .arrow-bottom {
    display: flex;
    width: 100%;
    height: 0;
    justify-content: flex-end;
    margin-top: -16px;
    margin-bottom: 36px
}

.inline-material-info-bubble .arrow-bottom .default {
    width: 100%;
    max-width: calc(680px - 286px)
}

.inline-material-info-bubble .arrow-bottom .default i {
    margin-bottom: 0
}

.inline-material-info-bubble .arrow-bottom .conversion-section,
.inline-material-info-bubble .arrow-bottom .passengers-section {
    width: 143px;
    min-width: 143px;
    display: flex;
    justify-content: center
}

.inline-material-info-bubble .arrow-bottom .conversion-section i,
.inline-material-info-bubble .arrow-bottom .passengers-section i {
    margin-left: 0;
    margin-bottom: 0;
    z-index: 10
}

.inline-material-info-bubble .info .info-bubble {
    position: static;
    z-index: 998;
    margin-top: 16px;
    background: 80% #fff;
    padding: 24px 16px 24px 0;
    display: flex
}

.inline-material-info-bubble .info .info-bubble .info-bubble-left {
    padding: 0 16px
}

.inline-material-info-bubble .info .info-bubble .info-bubble-right {
    width: 100%
}

.inline-material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-title {
    font-size: 14px;
    line-height: 1.25em;
    word-break: break-word;
    color: #51a351;
    padding-bottom: 24px
}

.inline-material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-content {
    padding-bottom: 28px;
    color: #868686;
    font-size: 12px;
    word-break: break-word;
    line-height: 1.25em
}

.inline-material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-footer {
    min-height: 36px;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 8px
}

.inline-material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-footer .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.inline-material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button {
    color: #51a351
}

.inline-material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button .mat-button-focus-overlay {
    background-color: rgba(81, 163, 81, .1)
}

.inline-material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn {
    color: #fff;
    background-color: #51a351
}

.inline-material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn:hover {
    background-color: #408140
}

@media (max-width:720px) {
    .inline-material-info-bubble .info .info-bubble {
        padding: 16px 8px 16px 0
    }
    .inline-material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-title {
        padding-bottom: 12px
    }
    .inline-material-info-bubble .info .info-bubble .info-bubble-right .info-bubble-content {
        padding-bottom: 12px
    }
}

.inline-material-info-bubble .warning .info-bubble {
    position: static;
    z-index: 998;
    margin-top: 16px;
    background: 80% #fff;
    padding: 24px 16px 24px 0;
    display: flex
}

.inline-material-info-bubble .warning .info-bubble .info-bubble-left {
    padding: 0 16px
}

.inline-material-info-bubble .warning .info-bubble .info-bubble-right {
    width: 100%
}

.inline-material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-title {
    font-size: 14px;
    line-height: 1.25em;
    word-break: break-word;
    color: #f89306;
    padding-bottom: 24px
}

.inline-material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-content {
    padding-bottom: 28px;
    color: #868686;
    font-size: 12px;
    word-break: break-word;
    line-height: 1.25em
}

.inline-material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-footer {
    min-height: 36px;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 8px
}

.inline-material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-footer .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.inline-material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button {
    color: #f89306
}

.inline-material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button .mat-button-focus-overlay {
    background-color: rgba(248, 147, 6, .1)
}

.inline-material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn {
    color: #fff;
    background-color: #f89306
}

.inline-material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn:hover {
    background-color: #c67505
}

@media (max-width:720px) {
    .inline-material-info-bubble .warning .info-bubble {
        padding: 16px 8px 16px 0
    }
    .inline-material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-title {
        padding-bottom: 12px
    }
    .inline-material-info-bubble .warning .info-bubble .info-bubble-right .info-bubble-content {
        padding-bottom: 12px
    }
}

.inline-material-info-bubble .error .info-bubble {
    position: static;
    z-index: 998;
    margin-top: 16px;
    background: 80% #fff;
    padding: 24px 16px 24px 0;
    display: flex
}

.inline-material-info-bubble .error .info-bubble .info-bubble-left {
    padding: 0 16px
}

.inline-material-info-bubble .error .info-bubble .info-bubble-right {
    width: 100%
}

.inline-material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-title {
    font-size: 14px;
    line-height: 1.25em;
    word-break: break-word;
    color: #bc332c;
    padding-bottom: 24px
}

.inline-material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-content {
    padding-bottom: 28px;
    color: #868686;
    font-size: 12px;
    word-break: break-word;
    line-height: 1.25em
}

.inline-material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-footer {
    min-height: 36px;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 8px
}

.inline-material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-footer .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.inline-material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button {
    color: #bc332c
}

.inline-material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button .mat-button-focus-overlay {
    background-color: rgba(188, 51, 44, .1)
}

.inline-material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn {
    color: #fff;
    background-color: #bc332c
}

.inline-material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn:hover {
    background-color: #932822
}

@media (max-width:720px) {
    .inline-material-info-bubble .error .info-bubble {
        padding: 16px 8px 16px 0
    }
    .inline-material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-title {
        padding-bottom: 12px
    }
    .inline-material-info-bubble .error .info-bubble .info-bubble-right .info-bubble-content {
        padding-bottom: 12px
    }
}

.inline-material-info-bubble .normal .info-bubble {
    position: static;
    z-index: 998;
    margin-top: 16px;
    background: 80% #fff;
    padding: 24px 16px 24px 0;
    display: flex
}

.inline-material-info-bubble .normal .info-bubble .info-bubble-left {
    padding: 0 16px
}

.inline-material-info-bubble .normal .info-bubble .info-bubble-right {
    width: 100%
}

.inline-material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-title {
    font-size: 14px;
    line-height: 1.25em;
    word-break: break-word;
    color: #000;
    padding-bottom: 24px
}

.inline-material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-content {
    padding-bottom: 28px;
    color: #868686;
    font-size: 12px;
    word-break: break-word;
    line-height: 1.25em
}

.inline-material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer {
    min-height: 36px;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 8px
}

.inline-material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end
}

.inline-material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button {
    color: #000
}

.inline-material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer .right .mat-button .mat-button-focus-overlay {
    background-color: #868686
}

.inline-material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn {
    color: #fff;
    background-color: #000
}

.inline-material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-footer .right .ok-btn:hover {
    background-color: #000
}

@media (max-width:720px) {
    .inline-material-info-bubble .normal .info-bubble {
        padding: 16px 8px 16px 0
    }
    .inline-material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-title {
        padding-bottom: 12px
    }
    .inline-material-info-bubble .normal .info-bubble .info-bubble-right .info-bubble-content {
        padding-bottom: 12px
    }
}

material-info-bubble-with-component .material-info-bubble .error .info-bubble,
material-info-bubble-with-component .material-info-bubble .info .info-bubble,
material-info-bubble-with-component .material-info-bubble .normal .info-bubble,
material-info-bubble-with-component .material-info-bubble .warning .info-bubble {
    padding: 12px 12px 20px 20px;
    border-bottom: 1px solid #d7d7d7;
    box-shadow: 0 5px 15px 1px rgba(0, 0, 0, .6)
}

material-info-bubble-with-content .inline-material-info-bubble {
    position: relative
}

material-info-bubble-with-content .inline-material-info-bubble i {
    position: absolute;
    top: -10px;
    left: 30px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0
}

material-info-bubble-with-content .inline-material-info-bubble .error .info-bubble,
material-info-bubble-with-content .inline-material-info-bubble .info .info-bubble,
material-info-bubble-with-content .inline-material-info-bubble .normal .info-bubble,
material-info-bubble-with-content .inline-material-info-bubble .warning .info-bubble {
    padding: 1px 16px 11px 16px;
    border-bottom: 1px solid #d7d7d7;
    box-shadow: 0 5px 15px 1px rgba(0, 0, 0, .6);
    display: block
}

extras-wrapper .extras-header {
    color: #fff;
    font-size: 32px;
    font-weight: 400;
    margin: 38px 0 27px 0
}

@media (max-width:869px) {
    extras-wrapper .extras-header {
        color: #222;
        margin-left: 16px
    }
}

city-tickets .city-tickets-header {
    color: #fff;
    font-size: 32px;
    font-weight: 400;
    margin: 38px 0 27px 0
}

city-tickets .citytickets .extra-items-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 22px 0;
    font-size: 18px;
    font-weight: 400;
    color: #fff
}

city-tickets .citytickets .extra-items-footer:hover {
    cursor: pointer
}

city-tickets .citytickets .extra-items-footer span {
    margin-right: 8px
}

city-tickets .citytickets .extra-items-footer .arrow-white {
    display: block
}

city-tickets .citytickets .extra-items-footer .arrow-dark {
    display: none
}

city-tickets .citytickets .extra-items-footer.expanded ts-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

@media (max-width:869px) {
    city-tickets .citytickets .extra-items-footer {
        color: #222;
        padding-right: 16px
    }
    city-tickets .citytickets .extra-items-footer .arrow-white {
        display: none
    }
    city-tickets .citytickets .extra-items-footer .arrow-dark {
        display: block
    }
}

@media (max-width:869px) {
    city-tickets .city-tickets-header {
        color: #222;
        margin-left: 16px
    }
}

.journeyCitytickets .cityticketItem {
    display: flex
}

.cityticketItem p {
    margin-top: 0;
    padding-top: 0
}

.cityticketItem>.col1 {
    flex: 0 0 50px;
    width: 50px;
    max-width: 50px;
    padding: 15px 17px;
    background-clip: padding-box
}

.cityticketItem>.col1 .checkbox {
    padding-top: 3px
}

@media (min-width: 870px) {
    .cityticketItem>.col1 {
        flex: 0 0 56px;
        width: 56px;
        max-width: 56px;
        padding: 15px 16px 15px 16px
    }
}

.cityticketItem>.col2 {
    flex: 1;
    padding: 15px 0 15px 0;
    background-clip: padding-box
}

.cityticketItem>.col2 h3 {
    margin-top: 0
}

.cityticketItem>.col2 p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25em
}

@media (min-width: 870px) {
    .cityticketItem>.col2 p {
        font-size: 14px
    }
}

.cityticketItem>.col2 p.acquisitionWarning {
    padding: 12px 0
}

.cityticketItem>.col2 p.detailsLink {
    padding: 12px 0
}

.cityticketItem>.col2 p.detailsLink a {
    text-decoration: underline
}

.cityticketItem>.col2 .price {
    font-size: 12px;
    font-weight: 400;
    color: #878787
}

@media (min-width: 870px) {
    .cityticketItem>.col2 .price {
        font-size: 14px
    }
}

.cityticketItem>.col3 {
    flex: 0 0 80px;
    width: 80px;
    max-width: 80px;
    text-align: right;
    padding: 15px 16px 15px 0
}

@media (min-width:380px) {
    .cityticketItem>.col3 {
        flex: 0 0 93px;
        width: 93px;
        max-width: 93px
    }
}

@media (min-width: 870px) {
    .cityticketItem>.col3 {
        flex: 0 0 143px;
        width: 143px;
        max-width: 143px
    }
}

@media (min-width: 870px) {
    .cityticketItem>.col3 {
        padding: 15px 16px 15px 0
    }
}

.cityticketItem>.col3 h2 {
    font-weight: 400
}

.cityticketItem>.col3 p {
    font-size: 12px;
    color: #508546
}

amount-counter .amount-counter-section {
    display: flex;
    align-items: center
}

amount-counter .amount-counter-section p {
    margin: 0 15px 0 0
}

amount-counter .amount-counter-section .item-amount-button {
    height: 40px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center
}

amount-counter .amount-counter-section .item-amount-button.border-left {
    border-radius: 0 8px 8px 0;
    border: 2px solid #51a351
}

amount-counter .amount-counter-section .item-amount-button.border-left:hover {
    background-color: #c6cfba;
    border-radius: 0 8px 8px 0
}

amount-counter .amount-counter-section .item-amount-button.border-left.inactive {
    border-color: #afafaf;
    pointer-events: none
}

amount-counter .amount-counter-section .item-amount-button.border-left.inactive:hover {
    border-color: #afafaf;
    border-radius: 0 8px 8px 0
}

amount-counter .amount-counter-section .item-amount-button.border-right {
    border-radius: 8px 0 0 8px;
    border: 2px solid #51a351
}

amount-counter .amount-counter-section .item-amount-button.border-right:hover {
    background-color: #c6cfba;
    border-radius: 8px 0 0 8px
}

amount-counter .amount-counter-section .item-amount-button.border-right.inactive {
    border-color: #afafaf;
    pointer-events: none
}

amount-counter .amount-counter-section .item-amount-button.border-right.inactive:hover {
    border-color: #afafaf;
    border-radius: 8px 0 0 8px
}

@media (max-width:869px) {
    amount-counter .amount-counter-section p {
        font-size: 12px
    }
}

offer-block .offer-block {
    color: #222;
    height: 100%;
    min-height: 60px;
    display: flex;
    border-bottom: 1px solid #d7d7d7
}

offer-block .offer-block:hover {
    cursor: pointer
}

offer-block .offer-block:hover .check-section,
offer-block .offer-block:hover .content-section {
    background: #dedede
}

offer-block .offer-block:hover .price-section {
    background: #fff;
    opacity: .93
}

offer-block .offer-block .check-section {
    padding: 15px 0;
    width: 56px;
    min-width: 56px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    min-height: 60px;
    background: #f0f0f0
}

offer-block .offer-block .check-section .check {
    display: inline-block;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    height: 20px;
    width: 10px;
    border-bottom: 3px solid #51a351;
    border-right: 3px solid #51a351
}

offer-block .offer-block .content-section {
    padding: 15px 16px 15px 0;
    width: 100%;
    font-size: 14px;
    line-height: 1.25em;
    font-weight: 400;
    background: #f0f0f0
}

offer-block .offer-block .content-section h3 {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    margin: 0 0 10px 0;
    font-weight: 400;
    line-height: 26px
}

offer-block .offer-block .content-section h3 .price {
    color: #868686;
    min-width: 90px;
    text-align: right
}

offer-block .offer-block .content-section .note {
    margin: 0
}

offer-block .offer-block .content-section .note span a {
    text-decoration: underline
}

offer-block .offer-block .content-section .available-class-note {
    color: #fff;
    background: #3E3E3E;
    font-size: 12px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 4px;
    margin-top: 5px
}

offer-block .offer-block .content-section .item-amount-section {
    border-top: 1px solid #d7d7d7;
    margin-top: 5px;
    padding-top: 10px
}

offer-block .offer-block .perforation {
    width: 4px;
    min-width: 4px;
    background-image: url(https://tickets-deva.oebb.at/static/images/background/connectionPerforation.svg)
}

offer-block .offer-block .price-section {
    padding: 15px 16px 15px 0;
    background: #fff;
    width: 143px;
    min-width: 143px
}

offer-block .offer-block .price-section h2 {
    font-weight: 400;
    text-align: right
}

@media (max-width:869px) {
    offer-block .offer-block .content-section h3 {
        font-size: 14px
    }
    offer-block .offer-block .content-section h3 .price {
        min-width: 70px;
        width: 70px
    }
    offer-block .offer-block .content-section .note {
        font-size: 12px
    }
    offer-block .offer-block .price-section {
        min-width: 93px;
        width: 93px
    }
}

@media (max-width:379px) {
    offer-block .offer-block .content-section h3 span {
        max-width: 80px
    }
}

@media (max-width:320px) {
    offer-block .offer-block .content-section h3 {
        flex-wrap: wrap
    }
    offer-block .offer-block .content-section h3 span {
        max-width: 60px
    }
}

offers-container offers-headline .offers-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 27px
}

offers-container offers-headline .offers-headline>h2 {
    font-size: 32px;
    color: #fff;
    font-weight: 400;
    margin: 0
}

offers-container offers-headline .offers-headline .offer-headline-buttons-section {
    display: flex;
    align-items: center;
    flex-flow: row-reverse
}

offers-container offers-headline .offers-headline .offer-headline-buttons-section .offers-headline-action {
    color: #fff;
    fill: #fff
}

offers-container offers-headline .offers-headline .offer-headline-buttons-section .offers-headline-action:hover {
    opacity: .75;
    cursor: pointer
}

offers-container .offers-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 22px 0;
    font-size: 18px;
    font-weight: 400;
    color: #fff
}

offers-container .offers-footer:hover {
    cursor: pointer
}

offers-container .offers-footer span {
    margin-right: 8px
}

offers-container .offers-footer.expanded ts-icon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

offers-container .offers-footer .arrow-white {
    display: block
}

offers-container .offers-footer .arrow-dark {
    display: none
}

@media (max-width:869px) {
    offers-container .offers-footer {
        color: #222;
        padding-right: 16px
    }
    offers-container .offers-footer .arrow-dark {
        display: block
    }
    offers-container .offers-footer .arrow-white {
        display: none
    }
}

@media (max-width:869px) {
    offers-container offers-headline .offers-headline {
        margin-top: 38px
    }
    offers-container offers-headline .offers-headline>h2 {
        color: #222;
        margin-left: 16px;
        font-weight: 400
    }
    offers-container offers-headline .offers-headline .offer-headline-buttons-section {
        margin-right: 16px
    }
    offers-container offers-headline .offers-headline .offer-headline-buttons-section .offers-headline-action {
        color: #222;
        fill: #222
    }
}

offer-price .show-price h2 {
    margin: 0 0 5px 0;
    font-weight: 400;
    font-size: 18px;
    text-align: right
}

offer-price .extra-info p {
    margin: 0;
    font-size: 12px;
    text-align: right
}

offer-price .extra-info .error {
    color: #d40027
}

offer-price .inputWrapper {
    display: flex;
    justify-content: flex-end
}

offer-price .inputWrapper mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix {
    max-width: 120px!important
}

@media (max-width:869px) {
    offer-price span {
        font-size: 12px
    }
    offer-price .show-price h2 {
        font-size: 14px
    }
    offer-price .extra-info p {
        font-size: 12px
    }
    offer-price .inputWrapper {
        display: flex;
        justify-content: flex-end
    }
    offer-price .inputWrapper mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix {
        max-width: 75px!important
    }
}

journey-preview-footer .journey-preview-header-section {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0
}

journey-preview-footer .journey-preview-header-section.avc-section {
    left: 75px!important
}

journey-preview-footer .journey-preview-header-section.off-canvas-visible {
    left: 315px!important
}

journey-preview-footer .journey-preview-header-section .journey-preview-header {
    background-color: #f0f0f0;
    height: 51px
}

journey-preview-footer .journey-preview-header-section .journey-preview-header h1 {
    color: #222;
    font-size: 24px;
    font-weight: 400;
    line-height: 51px;
    margin: 0 0 0 12px;
    display: flex;
    align-items: center
}

journey-preview-footer .journey-preview-header-section .journey-preview-header h1:hover {
    cursor: pointer
}

journey-preview-footer .journey-preview-header-section .journey-preview-header h1 svg {
    vertical-align: middle;
    margin-left: 5px
}

@media (min-width: 870px) {
    journey-preview-footer .journey-preview-header-section .journey-preview-header h1 {
        margin-left: 140px
    }
}

@media (min-width: 870px) {
    journey-preview-footer .journey-preview-header-section .journey-preview-header h1 {
        margin-left: 151px
    }
}

@media (min-width: 870px) {
    journey-preview-footer .journey-preview-header-section .journey-preview-header h1 {
        margin-left: 286px
    }
}

@media (min-width:1440px) {
    journey-preview-footer .journey-preview-header-section {
        width: 1440px
    }
}

@media (min-width: 870px) {
    journey-preview-footer .journey-preview-header-section .journey-preview-header {
        background-color: #fff
    }
    journey-preview-footer .journey-preview-header-section .journey-preview-header h1 {
        font-size: 30px;
        padding-left: 0
    }
    journey-preview-footer .journey-preview-header-section #border-shadow {
        display: none
    }
}

offer-custom-attributes .custom-attributes-section {
    margin-top: 16px
}

offer-custom-attributes .custom-attributes-section .inputWrapper {
    max-width: 200px
}

.night-train-accommodation-group-section .check-section {
    padding: 15px 0;
    width: 56px;
    min-width: 56px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    min-height: 80px;
    background: #f0f0f0
}

.night-train-accommodation-group-section .check-section .check {
    display: inline-block;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    height: 20px;
    width: 10px;
    border-bottom: 3px solid #51a351;
    border-right: 3px solid #51a351
}

div[name=accountChangeEmail].infoBubble>.contentWrapper>.right {
    word-wrap: break-word
}

div[name=accountChangeEmail].infoBubble>.contentWrapper>.right .setVerificationCodeState {
    background: 0 0;
    padding: 0;
    border: none;
    color: #51a351
}

[name=accountChangePassword] div.password-hint {
    color: #6a6a6a
}

[name=accountChangePassword] div.input-error,
[name=accountChangePassword] div.password-error {
    color: #e2002a
}

[name=accountChangePassword] div.input-info {
    color: #6a6a6a
}

[name=accountChangePassword] div.password-warning {
    color: #ed6f00
}

[name=accountChangePassword] div.password-info {
    color: #70a629
}

[name=accountChangePassword] button.forgottenPassword {
    background: 0 0;
    padding: 0;
    border: none;
    color: #51a351
}

.infoBubble[name=requestResetPassword] {
    margin-top: -30px
}

.infoBubble[name=requestResetPassword].inline {
    margin-left: -48px;
    width: auto;
    top: 0!important;
    left: 0!important
}

.infoBubble[name=requestResetPassword].visible {
    margin-top: 0
}

.infoBubble[name=requestResetPassword] section a {
    display: inline!important;
    text-decoration: underline
}

.requestPasswordResetBubble {
    width: 315px
}

#off-canvas .requestPasswordResetBubble {
    font-weight: 400
}

.requestPasswordResetBubble .error .left * {
    color: #d63d00;
    fill: #d63d00
}

.requestPasswordResetBubble .error header span {
    color: #d63d00
}

.requestPasswordResetBubble .content {
    height: 100%;
    width: 100%
}

.requestPasswordResetBubble .content .right {
    padding-top: 5px
}

.requestPasswordResetBubble .content .right .offset {
    margin-left: 20px
}

.requestPasswordResetBubble .content .right button {
    background: 0 0;
    padding: 0;
    border: none;
    color: #51a351
}

.requestPasswordResetBubble .content .right section {
    padding-top: 5px;
    word-wrap: break-word
}

.requestPasswordResetBubble .content .right section input[type=button] {
    background: 0 0;
    padding: 0;
    border: none;
    color: #51a351
}

.requestPasswordResetBubble .content .right section input[type=text],
.requestPasswordResetBubble .content .right section input[type=password] {
    font-size: 16px;
    border-color: #afafaf;
    border-style: none none solid;
    border-width: medium medium 1px;
    margin: 10px 0;
    width: 100%;
    outline: 0;
    color: #222;
    padding: 4px 0
}

.requestPasswordResetBubble .content .right footer {
    padding-top: 17px
}

.requestPasswordResetBubble .content .right div.input.ng-invalid,
.requestPasswordResetBubble .content .right form.ng-invalid.ng-submitted div.input.ng-invalid,
.requestPasswordResetBubble .content .right form.ng-invalid.ng-submitted input.ng-invalid,
.requestPasswordResetBubble .content .right input.ng-invalid.ng-touched {
    color: #cc3432;
    border-bottom: 1px solid #e2002a
}

.requestPasswordResetBubble .content .right div.password-hint {
    font-size: 12px;
    color: #6a6a6a;
    margin-top: -5px
}

.requestPasswordResetBubble .content .right div.input-error,
.requestPasswordResetBubble .content .right div.password-error {
    font-size: 12px;
    color: #e2002a;
    margin-top: -5px;
    padding-bottom: 10px
}

.requestPasswordResetBubble .content .right div.input-info {
    font-size: 12px;
    color: #6a6a6a;
    margin-top: -5px
}

.requestPasswordResetBubble .content .right div.password-warning {
    font-size: 12px;
    color: #ed6f00;
    margin-top: -5px
}

.requestPasswordResetBubble .content .right div.password-info {
    font-size: 12px;
    color: #70a629;
    margin-top: -5px
}

.background {
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #BED1D8;
    background-position-y: center;
    transition: background-image 1s ease-in-out, -webkit-filter .4s ease-out, -moz-filter .4s ease-out, -o-filter .4s ease-out, filter .4s ease-out;
    transition: background-position 1s ease-in-out;
    max-height: calc(100% - 90px)
}

@media (max-width:869px) {
    body[state="root.ticket.baggageOffer"] .background,
    body[state="root.ticket.offer"] .background {
        background: #f0f0f0!important;
        opacity: 1
    }
}

.background .animated {
    -webkit-transform: translate3d(0, 0, 0)
}

.background.debug-container {
    max-height: calc(100% - 90px - 320px)
}

.background.background-portrait-320 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_P_320.jpg)
}

.background.background-portrait-320.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_P_320.jpg)
}

.background.background-portrait-480 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_P_480.jpg)
}

.background.background-portrait-480.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_P_480.jpg)
}

.background.background-portrait-780 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_P_780.jpg)
}

.background.background-portrait-780.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_P_780.jpg)
}

.background.background-portrait-1024 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_P_1024.jpg)
}

.background.background-portrait-1024.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_P_1024.jpg)
}

.background.background-landscape-320 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_L_320.jpg)
}

.background.background-landscape-320.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_L_320.jpg)
}

.background.background-landscape-480 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_L_480.jpg)
}

.background.background-landscape-480.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_L_480.jpg)
}

.background.background-landscape-780 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_L_780.jpg)
}

.background.background-landscape-780.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_L_780.jpg)
}

.background.background-landscape-1024 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_L_1024.jpg)
}

.background.background-landscape-1024.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_L_1024.jpg)
}

.background.background-landscape-1440 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_L_1440.jpg)
}

.background.background-landscape-1440.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/background_2019_11_20_L_1440.jpg)
}

.background.blau-portrait-320 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_P_320.jpg)
}

.background.blau-portrait-320.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_P_320.jpg)
}

.background.blau-portrait-480 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_P_480.jpg)
}

.background.blau-portrait-480.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_P_480.jpg)
}

.background.blau-portrait-780 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_P_780.jpg)
}

.background.blau-portrait-780.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_P_780.jpg)
}

.background.blau-portrait-1024 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_P_1024.jpg)
}

.background.blau-portrait-1024.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_P_1024.jpg)
}

.background.blau-landscape-320 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_L_320.jpg)
}

.background.blau-landscape-320.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_L_320.jpg)
}

.background.blau-landscape-480 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_L_480.jpg)
}

.background.blau-landscape-480.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_L_480.jpg)
}

.background.blau-landscape-780 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_L_780.jpg)
}

.background.blau-landscape-780.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_L_780.jpg)
}

.background.blau-landscape-1024 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_L_1024.jpg)
}

.background.blau-landscape-1024.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_L_1024.jpg)
}

.background.blau-landscape-1440 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_L_1440.jpg)
}

.background.blau-landscape-1440.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/blau_2019_01_L_1440.jpg)
}

.background.b2b-background-portrait-480 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_P_480.jpg)
}

.background.b2b-background-portrait-480.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_P_480.jpg)
}

.background.b2b-background-portrait-780 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_P_780.jpg)
}

.background.b2b-background-portrait-780.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_P_780.jpg)
}

.background.b2b-background-portrait-320 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_P_320.jpg)
}

.background.b2b-background-portrait-320.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_P_320.jpg)
}

.background.b2b-background-portrait-1024 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_P_1024.jpg)
}

.background.b2b-background-portrait-1024.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_P_1024.jpg)
}

.background.b2b-background-landscape-320 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_L_320.jpg)
}

.background.b2b-background-landscape-320.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_L_320.jpg)
}

.background.b2b-background-landscape-480 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_L_480.jpg)
}

.background.b2b-background-landscape-480.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_L_480.jpg)
}

.background.b2b-background-landscape-780 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_L_780.jpg)
}

.background.b2b-background-landscape-780.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_L_780.jpg)
}

.background.b2b-background-landscape-1024 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_L_1024.jpg)
}

.background.b2b-background-landscape-1024.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_L_1024.jpg)
}

.background.b2b-background-landscape-1440 {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_L_1440.jpg)
}

.background.b2b-background-landscape-1440.darken {
    background-image: linear-gradient(rgba(46, 46, 46, .3), rgba(46, 46, 46, .3)), url(https://tickets-deva.oebb.at/static/images/background/b2b/B2Bbackground_2019_01_L_1440.jpg)
}

.cancellationItem {
    display: flex;
    position: relative;
    margin-bottom: 10px;
    background-color: #fff;
    color: #222
}

.cancellationItem .takeData {
    position: absolute;
    z-index: 2;
    bottom: 9px;
    padding: 0!important;
    left: 70px;
    font-size: 12px
}

.cancellationItem .takeData>img {
    position: relative;
    top: 4px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.cancellationItem span.takeData {
    position: relative;
    z-index: auto;
    bottom: auto;
    left: auto
}

.cancellationItem.cancelled {
    color: #868686
}

.cancellationItem.cancelled ts-validity-period-category {
    display: none
}

.cancellationItem.cancelled>div.connection,
.cancellationItem.cancelled>div.station {
    padding-bottom: 10px
}

@media (max-width:869px) {
    .cancellationItem {
        margin-bottom: 0;
        border-bottom: 1px solid #afafaf
    }
}

.cancellationItem .cart-subheading {
    padding-left: 2px;
    font-size: 12px;
    color: #868686;
    margin-bottom: -2px;
    display: inline-block;
    white-space: nowrap
}

.cancellationItem>.button {
    flex: 0 0 48px;
    width: 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background-color: #e6e6e6;
}

@media (min-width: 870px) {
    .cancellationItem>.button {
        flex: 0 0 53px;
        width: 53px
    }
}

.cancellationItem>.button img,
.cancellationItem>.button svg {
    fill: #878787;
    width: 17px;
    height: 17px
}

.cancellationItem>.button.focused,
.cancellationItem>.button:hover:not([disabled]) {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

@supports (-ms-ime-align:auto) {
    .cancellationItem .connectionWrapper {
        min-width: 0
    }
    .cancellationItem .connectionWrapper>.station {
        min-width: 0
    }
}

.cancellationItem .connectionWrapper {
    display: flex;
    position: relative;
    flex: 1 1;
    background-color: #e6e6e6;
}

.cancellationItem .connectionWrapper.focused,
.cancellationItem .connectionWrapper:hover:not([disabled]) {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

.cancellationItem .connectionWrapper>.time {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 0 0 54px;
    width: 54px;
    max-width: 70px;
    padding: 7px 15px 7px 15px;
    z-index: 1
}

.cancellationItem .connectionWrapper>.time .buy-again-section {
    width: 100px;
    height: 20px;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 999
}

.cancellationItem .connectionWrapper>.time .buy-again-section span {
    position: relative;
    margin-left: 5px;
    color: #64942c;
    font-size: 12px
}

@media (min-width:380px) {
    .cancellationItem .connectionWrapper>.time {
        flex: 0 0 70px
    }
}

.cancellationItem .connectionWrapper>.time .input {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400
}

.cancellationItem .connectionWrapper>.time .input span {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@media (min-width:380px) {
    .cancellationItem .connectionWrapper>.time .input {
        font-size: 18px
    }
}

.cancellationItem .connectionWrapper>.time .input.departure {
    padding-bottom: 2px;
    padding-top: 1px
}

@media (min-width:380px) {
    .cancellationItem .connectionWrapper>.time .input.departure {
        padding-top: 0
    }
}

.cancellationItem .connectionWrapper>.time .input.arrival {
    justify-content: flex-start;
    padding-top: 18px
}

@media (min-width:380px) {
    .cancellationItem .connectionWrapper>.time .input.arrival {
        padding-top: 5px
    }
}

@media (min-width:480px) {
    .cancellationItem .connectionWrapper>.time {
        width: 65px;
        max-width: 65px;
        flex: 0 0 65px
    }
}

.cancellationItem .connectionWrapper>.time .reductionWarning {
    color: #e2002a
}

.cancellationItem .connectionWrapper>.connection {
    position: relative;
    text-align: center;
    color: #fff;
    line-height: 90px;
    flex: 0 0 42px;
    width: 42px;
    max-width: 42px
}

@media (max-width:479px) {
    .cancellationItem .connectionWrapper>.connection {
        flex: 0 0 28px;
        width: 28px;
        max-width: 28px
    }
}

.cancellationItem .connectionWrapper>.connection svg {
    vertical-align: middle
}

.cancellationItem .connectionWrapper>.station {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1 1 30px;
    min-width: 30px;
    width: 30px;
    padding: 0 10px 0 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@media (min-width: 870px) {
    .cancellationItem .connectionWrapper>.station {
        flex: 1 1;
        max-width: none
    }
}

.cancellationItem .connectionWrapper>.station .cancelledTitle {
    position: absolute;
    top: 6px;
    left: 10px;
    font-size: 12px;
    font-weight: 700
}

.cancellationItem .connectionWrapper>.station .input {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap
}

.cancellationItem .connectionWrapper>.station .input.from {
    justify-content: flex-end;
    padding-bottom: 18px
}

.cancellationItem .connectionWrapper>.station .input.from span {
    font-weight: 700
}

@media (min-width:380px) {
    .cancellationItem .connectionWrapper>.station .input.from {
        padding-bottom: 8px
    }
}

.cancellationItem .connectionWrapper>.station .input.to {
    justify-content: flex-start
}

.cancellationItem .connectionWrapper>.station .input.to span {
    font-weight: 700
}

.cancellationItem .connectionWrapper>.station .input span {
    white-space: nowrap;
    padding-top: 1px;
    font-size: 14px;
    padding: 0;
    font-weight: 400;
    background-color: transparent;
    border: 0
}

@media (min-width:380px) {
    .cancellationItem .connectionWrapper>.station .input span {
        font-size: 18px
    }
}

body[state="root.ticket.relation"] .cancellationItem .connectionWrapper>.station input {
    font-size: 18px
}

.cancellationItem>.passengers {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    background-color: #e6e6e6;
    ;
    width: 143px;
    flex: 1 1 35px;
    min-width: 35px;
    max-width: 143px;
    padding: 5px 11px
}

.cancellationItem>.passengers[disabled] {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

@media (max-width:480px) {
    .cancellationItem>.passengers {
        max-width: 65px
    }
}

.cancellationItem>.passengers span {
    white-space: nowrap
}

.cancellationItem>.passengers .cart-subheading {
    align-self: flex-start;
    position: absolute;
    left: 11px;
    top: 7px
}

.cancelled.cancellationItem>.passengers>.inner>.subheading {
    display: none
}

.cancellationItem>.passengers.focused,
.cancellationItem>.passengers:hover:not([disabled]) {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

.cancellationItem>.perforation {
    width: 2px;
    position: relative;
    background: linear-gradient(to bottom, #D8D8D8 0, #A3A3A3 50%, #D8D8D8 100%)
}

.cancellationItem>.perforation .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(https://tickets-deva.oebb.at/static/images/background/paymentHeaderPerforation.svg)
}

.cancellationItem>.conversion {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    background-color: #e6e6e6;
    ;
    flex: 0 0 100px;
    width: 100px;
    max-width: 100px;
    font-size: 14px;
    font-weight: 400;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 12px 16px 5px 11px
}

@media (max-width:380px) {
    .cancellationItem>.conversion {
        max-width: 80px
    }
}

@media (min-width:480px) {
    .cancellationItem>.conversion {
        flex: 0 0 143px;
        font-size: 16px;
        width: 143px;
        max-width: 143px
    }
}

@media (min-width: 870px) {
    .cancellationItem>.conversion {
        font-size: 18px
    }
}

.cancellationItem>.conversion svg[iconname=insuranceIcon] {
    position: absolute;
    left: 7px;
    top: 7px
}

.cancellationItem>.conversion .cart-subheading {
    position: absolute;
    top: 7px;
    right: 16px;
    text-align: right;
    color: #868686
}

.cancelled.cancellationItem>.conversion .pricing {
    text-decoration: line-through
}

.cancellationItem>.conversion .pricing.lower {
    color: #508546
}

.cancellationItem>.conversion .returnAmount {
    color: #222;
    font-size: 16px
}

.cancellationItem>.conversion .old-pricing {
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
    color: #6a6a6a
}

.cancellationItem>.conversion.bigInfo .old-pricing {
    font-size: 12px
}

.cancellationItem>.conversion .temporaryBookedTill {
    margin-top: 2px
}

.cancellationItem>.conversion.focused,
.cancellationItem>.conversion:hover:not([disabled]) {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

.cancellationItem>.conversion .service-voucher {
    width: 28px;
    display: INLINE-block;
    padding-right: 10px;
    fill: #508546
}

.cancellationRelationless {
    height: 90px;
    min-height: 90px
}

.cancellationItem>.general {
    display: flex;
    flex-direction: column;
    flex: 1 1 30px;
    padding: 7px 15px 7px 15px;
    background-color: #e6e6e6;
}

.cancellationItem>.general.focused,
.cancellationItem>.general:hover:not([disabled]) {
    background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
}

.cancellationItem>.general>.time {
    font-size: 12px;
    color: #868686;
    display: inline-block;
    justify-content: flex-start;
    padding-top: 18px;
    margin: 0
}

@media (min-width:380px) {
    .cancellationItem>.general>.time {
        padding-top: 5px
    }
}

.cancellationItem>.general>.time .cancelledTitle {
    font-size: 12px;
    font-weight: 700
}

.cancellationItem>.general>.entrypoint {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    margin: 0;
    font-size: 14px;
    padding: 4px 0 0 0;
    font-weight: 700;
    background-color: transparent;
    border: 0
}

@media (min-width:380px) {
    .cancellationItem>.general>.entrypoint {
        font-size: 18px
    }
}

.cancellationItem>.general>.buttonWrapper {
    position: absolute;
    bottom: 7px
}

.cancellationItem>.general>.buttonWrapper .hhgbReturnTransport {
    font-size: 12px;
    margin-left: 10px
}

.cancellationItem>.general>.buttonWrapper .hhgbReturnTransport svg {
    position: relative;
    stroke: #51a351;
    fill: #51a351;
    top: 4px
}

.cancellationItem>.general>.buttonWrapper .hhgbReturnTransport>span {
    margin-left: -3px
}

.cancellationItemRoute>.general>.time {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 15px;
    z-index: 1
}

.cancellationItemRoute>.general>.time .cancelledTitle {
    font-size: 12px;
    font-weight: 700
}

.cancellationItemRoute>.general>.route {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

.cancellationItemRoute>.general>.route>.connection {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    max-width: 42px;
    text-align: center;
    color: #fff;
    line-height: 90px
}

@media (max-width:479px) {
    .cancellationItemRoute>.general>.route>.connection {
        flex: 0 0 28px;
        width: 28px;
        max-width: 28px
    }
}

.cancellationItemRoute>.general>.route>.connection svg {
    vertical-align: middle
}

.cancellationItemRoute>.general>.route>.reductionWarning {
    position: absolute;
    bottom: 5px;
    left: 15px;
    color: #e2002a
}

.cancellationItemRoute>.general>.route>.station {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1 1 30px;
    min-width: 30px;
    width: 30px;
    padding: 0 10px 0 0
}

@media (min-width: 870px) {
    .cancellationItemRoute>.general>.route>.station {
        flex: 1 1;
        width: auto;
        max-width: none
    }
}

.cancellationItemRoute>.general>.route>.station .input {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap
}

.cancellationItemRoute>.general>.route>.station .input.from {
    justify-content: flex-end;
    padding-bottom: 18px
}

.cancellationItemRoute>.general>.route>.station .input.from span {
    font-weight: 700
}

@media (min-width:380px) {
    .cancellationItemRoute>.general>.route>.station .input.from {
        padding-bottom: 8px
    }
}

.cancellationItemRoute>.general>.route>.station .input.to {
    justify-content: flex-start
}

.cancellationItemRoute>.general>.route>.station .input.to span {
    font-weight: 700
}

.cancellationItemRoute>.general>.route>.station .input span {
    white-space: nowrap;
    padding-top: 1px;
    font-size: 14px;
    padding: 0;
    font-weight: 400;
    background-color: transparent;
    border: 0
}

@media (min-width:380px) {
    .cancellationItemRoute>.general>.route>.station .input span {
        font-size: 18px
    }
}

body[state="root.ticket.relation"] .cancellationItemRoute>.general>.route>.station input {
    font-size: 18px
}

.cancellationItemRoute>.general>.cart-subheading>.takeData {
    position: absolute;
    bottom: 7px
}

.checkbox {
    display: inline-block
}

.checkboxButton {
    cursor: pointer;
    color: #222
}

.checkboxButton>.col1 {
    float: left;
    width: 32px;
    padding-top: 18px
}

.checkboxButton>.col2 {
    overflow: hidden;
    padding: 18px 0 18px 0
}

.checkboxButton>.col2 label {
    cursor: pointer;
    line-height: 1.1em;
    font-size: 16px;
    font-weight: 400
}

.checkboxButton>.col2 .transcluded {
    margin-top: 18px
}

.checkboxButton:focus,
.checkboxButton:hover {
    background: #e6e6e6
}

.checkboxButton:focus svg,
.checkboxButton:hover svg {
    background: #e6e6e6
}

.checkboxButton:active svg {
    background: #ccc
}

.checkboxButton.disabled>.col2 {
    color: #6a6a6a
}

.checkboxButton.disabled>.col2 label {
    color: #6a6a6a
}

.checkboxGroup {
    display: flex
}

.checkboxGroup>.checkboxButton {
    flex: 1 0;
    display: flex;
    align-items: center
}

.co2savings {
    background-color: #6d972b;
    padding: 20px 15px 20px 10px;
    position: relative;
    color: #fff
}

.co2savings .col1 {
    padding-left: 3px;
    padding-right: 12px;
    max-width: 50px
}

.co2savings .col2 .value {
    font-size: 16px;
    margin-bottom: 10px
}

.co2savings .col2 .description {
    font-size: 12px;
    padding-right: 10px
}

.co2savings .arrowRight {
    position: absolute;
    right: 10px;
    bottom: 40%
}

#voucher .co2savings {
    padding: 15px 15px 15px 20px
}

#voucher .co2savings .value {
    margin-bottom: 5px
}

#voucher .co2savings .description {
    line-height: normal
}

#voucher .co2savings .arrowRight {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

collapsible-box {
    display: block
}

collapsible-box[white] {
    background-color: #fff
}

collapsible-box[white]>collapsible-box-content,
collapsible-box[white]>collapsible-box-header {
    background-color: #fff
}

collapsible-box:not(.collapsed)>collapsible-box-header svg {
    width: 20px
}

collapsible-box:not(.collapsed)>collapsible-box-header ts-vogerl {
    display: none
}

collapsible-box.collapsed>collapsible-box-content {
    max-height: 0
}

collapsible-box ts-vogerl {
    cursor: pointer
}

collapsible-box>collapsible-box-header {
    cursor: pointer
}

collapsible-box>collapsible-box-header>div {
    padding: 16px
}

collapsible-box>collapsible-box-header>div:first-child {
    max-width: 35px;
    width: 35px;
    padding-right: 0
}

collapsible-box>collapsible-box-header>div:last-child {
    padding-left: 0;
    margin-right: 35px
}

collapsible-box>collapsible-box-content {
    display: block;
    max-height: 99999px;
    overflow: hidden
}

collapsible-box>collapsible-box-content>section>div:first-child {
    padding-left: 35px;
    margin-left: 16px
}

collapsible-box>collapsible-box-content>section>div:last-child {
    margin-right: 16px;
    padding-right: 35px
}

collapsible-box>collapsible-box-content>footer {
    flex: 1 0 auto;
    min-height: 16px
}

collapsible-box>collapsible-box-content>footer>div {
    padding: 0 16px 16px 16px
}

collapsible-box>collapsible-box-content>footer>div:first-child {
    padding-left: 51px;
    padding-right: 0
}

collapsible-box>collapsible-box-content>footer>div:last-child {
    padding-left: 0;
    padding-right: 51px
}

.form collapsible-box-content,
collapsible-box .form,
collapsible-box form,
form collapsible-box-content {
    font-size: 14px
}

.form collapsible-box-content select,
collapsible-box .form select,
collapsible-box form select,
form collapsible-box-content select {
    font-size: 14px
}

.form collapsible-box-content table,
collapsible-box .form table,
collapsible-box form table,
form collapsible-box-content table {
    width: 100%;
    margin-bottom: 40px
}

.form collapsible-box-content table tr td,
collapsible-box .form table tr td,
collapsible-box form table tr td,
form collapsible-box-content table tr td {
    width: 50%;
    padding: 15px 35px 0 0
}

.form collapsible-box-content table tr td:first-child,
collapsible-box .form table tr td:first-child,
collapsible-box form table tr td:first-child,
form collapsible-box-content table tr td:first-child {
    padding-left: 51px
}

.form collapsible-box-content table tr td:last-child,
collapsible-box .form table tr td:last-child,
collapsible-box form table tr td:last-child,
form collapsible-box-content table tr td:last-child {
    padding-right: 51px
}

.form collapsible-box-content table tr td.doubleEqualColumn>div,
collapsible-box .form table tr td.doubleEqualColumn>div,
collapsible-box form table tr td.doubleEqualColumn>div,
form collapsible-box-content table tr td.doubleEqualColumn>div {
    width: 50%;
    float: left
}

.form collapsible-box-content table tr td.thirdEqualColumn>div,
collapsible-box .form table tr td.thirdEqualColumn>div,
collapsible-box form table tr td.thirdEqualColumn>div,
form collapsible-box-content table tr td.thirdEqualColumn>div {
    width: 33%;
    float: left
}

.form collapsible-box-content section.flexRow .flexRow,
collapsible-box .form section.flexRow .flexRow,
collapsible-box form section.flexRow .flexRow,
form collapsible-box-content section.flexRow .flexRow {
    margin-bottom: 15px;
    margin-right: 35px
}

.form collapsible-box-content [ts-click].loading .loading-wrapper,
collapsible-box .form [ts-click].loading .loading-wrapper,
collapsible-box form [ts-click].loading .loading-wrapper,
form collapsible-box-content [ts-click].loading .loading-wrapper {
    background: #fff
}

.form collapsible-box-content button[disabled],
collapsible-box .form button[disabled],
collapsible-box form button[disabled],
form collapsible-box-content button[disabled] {
    color: #878787
}

.form collapsible-box-content input[type=search],
.form collapsible-box-content input[type=text],
collapsible-box .form input[type=search],
collapsible-box .form input[type=text],
collapsible-box form input[type=search],
collapsible-box form input[type=text],
form collapsible-box-content input[type=search],
form collapsible-box-content input[type=text] {
    font-size: 14px;
    background-color: #fff;
    border-color: #afafaf;
    border-style: none none solid;
    border-width: medium medium 1px;
    outline: 0;
    width: 100%;
    color: #222;
    padding: 4px 0
}

.colorChooser {
    overflow-x: auto
}

.colorChooser>.checkboxArea {
    margin: 0;
    flex: 0 0 35px
}

.colorChooser>.checkboxArea label {
    border-right: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6
}

.colorChooser>.checkboxArea:focus label,
.colorChooser>.checkboxArea:hover label {
    border-right: 2px solid #7d7d7d;
    border-top: 2px solid #7d7d7d;
    border-left: 2px solid #7d7d7d
}

.colorChooser.dark .checkboxArea {
    margin: 1px 1px 1px 0
}

.colorChooser.dark .checkboxArea:first-child {
    margin-left: 1px
}

.colorChooser.dark .checkboxArea label {
    background-color: #383838;
    border-right: 1px solid #6a6a6a;
    border-top: 1px solid #6a6a6a
}

.colorChooser.dark .checkboxArea label:first-child {
    border-left: 1px solid #6a6a6a
}

.colorChooser.dark .checkboxArea:focus label,
.colorChooser.dark .checkboxArea:hover label {
    border-right-color: #fff;
    border-top-color: #fff;
    border-left-color: #fff
}

.threeColumnFooter {
    background-color: #fff;
    min-height: 130px;
    height: 130px;
    display: flex
}

.threeColumnFooter>div.nopointer {
    cursor: default
}

.threeColumnFooter>.col1 {
    flex: 0 0 74px;
    text-align: center
}

.threeColumnFooter>.col1 svg {
    margin-top: 19px
}

.threeColumnFooter>.col1 svg[iconname=tickets-icon] {
    margin-top: 12px;
    width: 32px;
    height: 24px
}

.threeColumnFooter>.col2 {
    flex: 1
}

.threeColumnFooter>.col2 h2 {
    color: #ed6f00;
    fill: #ed6f00;
    font-size: 18px;
    font-weight: 400;
    margin: 19px 0 23px 0
}

.threeColumnFooter>.col2 h2.info {
    color: #51a351;
    fill: #51a351
}

.threeColumnFooter>.col2 p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25em;
    color: #6a6a6a
}

.threeColumnFooter>.col2 p a {
    color: #222;
    text-decoration: underline
}

.threeColumnFooter>.col2 p a:focus,
.threeColumnFooter>.col2 p a:hover {
    color: #9d9d9d
}

.threeColumnFooter>.col2 p a:active {
    color: #d0d0d0
}

.threeColumnFooter>.col2.nopointer {
    cursor: default
}

.threeColumnFooter>.col3 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1em;
    flex: 0 0 109px;
    background-color: #ab0020;
    color: #fff;
    text-align: center
}

.threeColumnFooter>.col3.disabled {
    background-color: #6a6a6a
}

.threeColumnFooter>.col3.disabled span {
    display: none
}

.threeColumnFooter>.col3 .price {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25em
}

.threeColumnFooter>.col3:focus,
.threeColumnFooter>.col3:hover {
    background-color: #b41a37
}

.threeColumnFooter>.col3:focus.disabled,
.threeColumnFooter>.col3:hover.disabled {
    background-color: #9d9d9d
}

.threeColumnFooter>.col3:active {
    background-color: #9a001d
}

.threeColumnFooter>.col3:active.disabled {
    background-color: #d0d0d0
}

:focus {
    outline: 0
}

:focus.noOutline {
    outline: 0
}

.rotateElement180 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.rotateElement180 svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.locked-header {
    margin-right: 10px;
    padding: 5px 5px 5px 0;
    background-color: #6a6a6a;
    color: #fff;
    display: flex
}

.locked-header .icon {
    flex: 0 0 40px
}

.locked-header .locked-message {
    font-size: 14px
}

ts-coupons-pdf {
    display: block;
    padding: 28px 32px
}

ts-coupons-pdf .coupon-block-header {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25em;
    margin: 0!important
}

ts-coupons-pdf .couponLink {
    font-size: 14px;
    color: #51a351;
    padding-top: 16px
}

@media (max-width:869px) {
    ts-coupons-pdf {
        padding: 28px 12px 28px 12px
    }
}

.date-of-birth {
    padding: 0;
    border: 0
}

.date-of-birth .formWrapper {
    display: flex
}

.date-of-birth .formWrapper .inputGroup {
    margin: 0
}

.date-of-birth .formWrapper .inputGroup:first-of-type {
    flex: 1 0 50px;
    min-width: 50px
}

.date-of-birth .formWrapper .inputGroup:nth-child(2) {
    flex: 1 0 70px;
    min-width: 70px
}

.date-of-birth .formWrapper .inputGroup:nth-child(3) {
    flex: 1 0 70px;
    min-width: 70px
}

.date-of-birth .formWrapper .inputGroup:last-of-type {
    flex: 1 0 100px;
    min-width: 100px
}

.footerShadow {
    z-index: 10;
    position: absolute;
    left: 0;
    bottom: -1px;
    right: 0;
    height: 1px
}

.headerShadow {
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px
}

.overflowCheck {
    height: 0;
    visibility: hidden
}

.dropdownWrapper,
ts-dropdown-wrapper {
    position: relative;
    display: inline-block
}

ts-dropdown {
    position: absolute;
    top: 26px;
    left: 0;
    height: auto;
    z-index: 10;
    background-color: #f0f0f0
}

ts-dropdown>.entry {
    font-size: 16px;
    font-weight: 400;
    color: #222
}

ts-dropdown>.entry.hover {
    background-color: #afafaf
}

ts-dropdown>.entry>.wrapper {
    padding: 10px;
    border-bottom: 1px solid #878787
}

ts-dropdown>.entry>.wrapper>.text {
    font-size: 16px;
    color: #222
}

.selectBox .item-wrapper {
    display: inline-block
}

.selectBox .item {
    padding: 5px;
    margin: 0 4px 5px 0
}

.selectBox .arrow {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    position: relative;
    left: 10px;
    top: -10px
}

.infoBubble[name=generalInfoBubble] {
    max-width: 380px;
    margin-bottom: 20px;
    background-color: #221d47;
    color: #fff
}

.infoBubble[name=generalInfoBubble]>.info {
    color: #fff;
    fill: #fff
}

.infoBubble[name=generalInfoBubble]>.contentWrapper {
    padding-right: 0;
    padding-bottom: 16px
}

.infoBubble[name=generalInfoBubble]>.contentWrapper header {
    padding-top: 3px;
    padding-left: 10px;
    font-weight: 700
}

.infoBubble[name=generalInfoBubble]>.contentWrapper section {
    padding-left: 10px;
    margin-bottom: 16px;
    color: #fff
}

.infoBubble[name=generalInfoBubble]>.contentWrapper section>h1 {
    line-height: 1em
}

.infoBubble[name=generalInfoBubble]>.contentWrapper footer {
    padding-left: 10px;
    padding-top: 13px
}

.infoBubble[name=generalInfoBubble]>.contentWrapper footer>.closeGeneralInfoBubble {
    float: right;
    margin-right: 29px
}

.globalDialogBubble {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99999;
    text-align: center
}

.globalDialogBubble .dialogbuttons {
    float: right
}

.globalDialogBubble .infoBubble.border>.contentWrapper {
    border-bottom: 1px solid #d7d7d7!important
}

.globalDialogBubble .contenttext li::before {
    color: #ab0020
}

.globalDialogBubble>.infoBubble.visible {
    text-align: left;
    margin-top: 35vh;
    width: 400px;
    margin: 1px solid #afafaf;
    box-shadow: 3px 6px 20px #afafaf
}

.globalDialogBubble>.infoBubble.visible>.content {
    min-width: 400px
}

.globalDialogBubble>.infoBubble.visible .right>header {
    white-space: nowrap;
    margin-right: 25px
}

.globalDialogBubble>.infoBubble.visible .right>section {
    color: #868686
}

.globalDialogBubble>.infoBubble.visible .right>section .codes {
    color: #afafaf;
    margin: 0;
    padding: 0
}

.globalDialogBubble>.infoBubble.visible .right>section .codes span {
    margin-right: 15px
}

.globalDialogBubble>.infoBubble.visible .right>section .codes a:focus,
.globalDialogBubble>.infoBubble.visible .right>section .codes a:hover {
    color: #c9c9c9
}

.globalDialogBubble>.infoBubble.visible .right>section .error {
    max-width: 310px
}

.globalDialogBubble>.infoBubble.visible .right>footer input {
    background: 0 0;
    border: none
}

.globalErrorBubble {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .9);
    z-index: 99999;
    text-align: center
}

.globalErrorBubble>.infoBubble.visible {
    text-align: left;
    margin-top: 35vh;
    width: 400px;
    margin: 1px solid #afafaf;
    box-shadow: 3px 6px 20px #afafaf
}

.globalErrorBubble>.infoBubble.visible>.content {
    min-width: 400px
}

.globalErrorBubble>.infoBubble.visible .right>header {
    white-space: nowrap;
    margin-right: 25px
}

.globalErrorBubble>.infoBubble.visible .right>section {
    color: #868686
}

.globalErrorBubble>.infoBubble.visible .right>section .codes {
    color: #afafaf;
    margin: 0;
    padding: 0
}

.globalErrorBubble>.infoBubble.visible .right>section .codes span {
    margin-right: 15px
}

.globalErrorBubble>.infoBubble.visible .right>section .codes a:focus,
.globalErrorBubble>.infoBubble.visible .right>section .codes a:hover {
    color: #c9c9c9
}

.globalErrorBubble>.infoBubble.visible .right>section .error {
    max-width: 310px
}

#header {
    position: relative;
    background-color: #fff;
    height: 90px;
    min-height: 90px;
    max-height: 90px;
    flex: 0 0 90px;
    display: flex;
    z-index: 11;
    transition: height ease-out 50ms, flex ease-out 50ms, max-height ease-out 50ms, min-height ease-out 50ms
}

#header>ng-include {
    display: flex;
    flex: 1
}

#header>ng-include .shoppingcartEditOpen {
    margin-top: 55px
}

body.shoppingcartEditing #header {
    margin-top: 55px
}

@media (max-width:379px) {
    body.shoppingcartEditing #header {
        margin-top: 76px
    }
}

@media (max-width:869px) {
    body[state="root.ticket.datetime"] #header,
    body[state="root.ticket.person"] #header {
        margin-top: 0
    }
}

@media (max-width:869px) {
    body[state="root.ticket.datetime"] #header {
        flex: 0 0 auto;
        height: auto;
        min-height: auto
    }
}

body[state="root.ticket.offer.journey"] #header {
    box-shadow: none
}

@media (max-width:860px) {
    body[state="root.ticket.offer.journey"] #header .text>.content4 {
        margin-left: 123px
    }
}

@media (max-width:869px) {
    body[state="root.ticket.offer.journey"] #header {
        box-shadow: none
    }
    body[state="root.ticket.offer.journey"] #header .text>.content4 {
        border: none!important;
        margin-left: 74px
    }
    body[state="root.ticket.offer.journey"] #header .text>.content4 .text {
        display: none
    }
    body[state="root.ticket.offer.journey"] #header .text .content,
    body[state="root.ticket.offer.journey"] #header .text .content3 {
        display: none
    }
    body[state="root.ticket.offer.journey"] #header .journeyPreviewHeader .header {
        padding: 19px 10px 27px 65px;
        border: none
    }
}

@media (max-width:479px) {
    body[state="root.ticket.offer.journey"] #header .text.wrapper {
        opacity: 1!important
    }
}

body[state="root.ticket.relation"] #header {
    z-index: 20
}

#header.auto {
    flex: none!important;
    min-height: auto!important;
    max-height: none!important;
    height: auto!important
}

@media (min-width: 870px) {
    #header {
        height: 140px;
        min-height: 140px;
        max-height: 140px;
        flex: 0 0 140px
    }
    #header.narrow {
        height: 90px;
        min-height: 90px;
        max-height: 90px;
        flex: 0 0 90px
    }
    body[state="root.ticket.quickstart"] #header.narrow,
    body[state="root.ticket.travel"] #header.narrow,
    body[state="root.ticket.start"] #header.narrow,
    body[state="root.ticket.relation"] #header.narrow {
        height: 140px;
        min-height: 140px;
        max-height: 140px;
        flex: 0 0 140px
    }
}

#header .shoppingcart-wrapper {
    display: block;
    width: 60px;
    flex: 0 0 60px
}

@media (min-width: 870px) {
    #header .shoppingcart-wrapper {
        width: 88px;
        flex: 0 0 88px
    }
}

@media (min-width: 870px) {
    #header .shoppingcart-wrapper {
        margin-right: 36px
    }
}

#header .shoppingcart-wrapper:focus,
#header .shoppingcart-wrapper:hover {
    background-color: #f0f0f0
}

#header .shoppingcart-wrapper .shoppingcart-icon {
    position: relative;
    width: 20px;
    margin: 43px auto 0
}

#header .shoppingcart-wrapper .shoppingcart-icon .count {
    background-color: #e2002a;
    color: #fff;
    border-radius: 25px;
    width: 18px;
    height: 18px;
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    right: -9px;
    top: -9px;
    vertical-align: middle
}

#header .logo-menu-wrapper {
    opacity: 1;
    z-index: 1;
    white-space: nowrap;
    position: relative;
    height: 100%;
    overflow: hidden;
    width: 90px;
    flex: 0 0 90px
}

@media (min-width: 870px) {
    #header .logo-menu-wrapper {
        width: 145px;
        flex: 0 0 145px;
        display: flex
    }
}

@media (min-width:480px) and (max-width:720px) {
    body[state="root.ticket.start"] #header .logo-menu-wrapper {
        transition: opacity .1s ease-in .1s, z-index 0s linear .4s, left .2s ease-in .2s;
        z-index: 100
    }
}

#header .logo-menu-wrapper.ng-hide~div>.subheader>.col1 {
    display: none
}

#header .logo-menu-wrapper>.click-area {
    overflow: hidden;
    height: 100%;
    width: 90px;
    color: #e2002a
}

@media (min-width: 870px) {
    #header .logo-menu-wrapper>.click-area {
        width: 48px
    }
    #header .logo-menu-wrapper>.click-area:focus,
    #header .logo-menu-wrapper>.click-area:hover {
        background-color: #f0f0f0
    }
}

#header .logo-menu-wrapper>.click-area>div {
    height: 100%;
    width: 100%;
    display: flex
}

@media (min-width: 870px) {
    #header .logo-menu-wrapper>.click-area>div {
        display: block
    }
}

#header .logo-menu-wrapper>.click-area .menu-wrapper {
    height: 100%;
    width: 30px
}

#header .logo-menu-wrapper>.click-area .flag {
    display: block;
    margin: 42px auto 5px;
    width: 14px;
    height: 13px;
    fill: currentColor
}

@media (min-width: 870px) {
    #header .logo-menu-wrapper>.click-area .flag {
        margin-top: 40px;
        width: 21px;
        height: 20px
    }
}

#header .logo-menu-wrapper>.click-area .menu {
    font-size: 10px;
    color: #e2002a;
    text-align: center;
    visibility: hidden
}

@media (min-width: 870px) {
    #header .logo-menu-wrapper>.click-area .menu {
        visibility: visible
    }
}

#header .logo-menu-wrapper>.header-logo {
    display: block;
    height: 100%;
    width: 66px
}

@media (min-width: 870px) {
    #header .logo-menu-wrapper>.header-logo {
        width: 88px
    }
    #header .logo-menu-wrapper>.header-logo:focus,
    #header .logo-menu-wrapper>.header-logo:hover {
        background-color: #f0f0f0
    }
    #header .logo-menu-wrapper>.header-logo>img {
        width: 88px;
        height: 140px
    }
}

#header div[ui-view=subheader] {
    flex: 1 1;
    display: flex;
    position: relative
}

#header .text.wrapper {
    opacity: 1;
    transition: opacity .1s ease-in .1s, z-index linear 0s;
    flex: 1 1;
    display: flex
}

@-webkit-keyframes journeyBackButtonAnimation {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes journeyBackButtonAnimation {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

#header .text>.content4 {
    display: none;
    position: relative;
    margin-left: 162px;
    height: 54px;
    line-height: 54px;
    margin-top: 18px
}

#header .text>.content4.visible {
    border-left: 1px solid #d7d7d7;
    display: block;
    flex: 1
}

body[state="root.ticket.offer.journey"] #header .text>.content4 {
    -webkit-animation: journeyBackButtonAnimation 3s ease;
    animation: journeyBackButtonAnimation 3s ease
}

#header .text>.content4 .text {
    white-space: nowrap;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.25em;
    color: #222;
    margin: 0 0 0 21px;
    vertical-align: middle
}

#header .text>.content4 .backIconWrapper {
    position: absolute;
    left: -72px;
    width: 48px;
    text-align: center;
    height: 48px;
    background-color: #616161;
    top: 2px
}

#header .text>.content4 .backIconWrapper svg {
    margin-top: 10px
}

#header .text>.content3 {
    display: none;
    margin: 17px 60px 17px 162px;
    padding-top: 8px
}

body[state="root.ticket.payment"] #header .text>.content3 {
    border-left: 1px solid #d7d7d7
}

#header .text>.content3.visible,
body[state="root.ticket.voucher"] #header .text>.content3,
body[state="root.ticket.infocard"] #header .text>.content3,
body[state="root.ticket.cancellation"] #header .text>.content3,
body[state="root.ticket.postcheckout"] #header .text>.content3,
body[state="root.ticket.payment"] #header .text>.content3 {
    display: block;
    flex: 1
}

#header .text>.content3>h1 {
    font-size: 30px;
    font-weight: 400;
    color: #222;
    margin: 0 0 0 20px;
    padding: 0
}

body[state="root.ticket.postcheckout"] #header .text>.content3>h1 span {
    display: none
}

#header .text>.content3>h1 a {
    font-size: 16px;
    font-weight: 400;
    color: #51a351;
    float: right;
    margin-top: 14px
}

#header .text>h1.header-title {
    font-size: 30px;
    font-weight: 400;
    color: #878787;
    display: none;
    padding-top: 33px;
    margin: 0;
    line-height: 1;
    transition: opacity ease-out .1s
}

@media (min-width: 870px) {
    #header .text>h1.header-title {
        display: block
    }
}

body[state="root.ticket.voucher"] #header .text>h1.header-title,
body[state="root.ticket.cancellation"] #header .text>h1.header-title,
body[state="root.ticket.postcheckout"] #header .text>h1.header-title,
body[state="root.ticket.payment"] #header .text>h1.header-title {
    display: none
}

#header .text>.content {
    height: 90px;
    padding-left: 18px;
    display: flex;
    align-items: center
}

@media (min-width:480px) {
    #header .text>.content {
        background-color: #e6e6e6;
        ;
        padding-right: 28px
    }
}

@media (min-width:380px) {
    #header .text>.content {
        padding-left: 19px
    }
}

@media (min-width: 870px) {
    #header .text>.content {
        display: none
    }
}

#header .text>.content>.col1 {
    flex: 0 0 33px;
    width: 33px;
    margin-top: -27px
}

#header .text>.content>.col1>.plus {
    background-repeat: no-repeat;
    background-image: url(https://tickets.oebb.at/static/images/components/header/plus-icon-circle.svg);
    opacity: .8;
    width: 19px;
    height: 19px;
    text-align: center
}

#header .text>.content>.col1>.plus img {
    width: 11px;
    height: 11px
}

#header .text>.content>.col2 {
    white-space: nowrap;
    font-size: 18px;
    color: #222;
    font-weight: 400
}

@media (min-width: 870px) {
    #header .text>.content>.col2 {
        margin-top: 43px
    }
}

@media (min-width:380px) {
    #header .text>.content>.col2 {
        font-size: 20px
    }
}

@media (max-width:869px) {
    body[state="root.ticket.start"] #header .click-area,
    body[state="root.ticket.start"] #header .shoppingcart-wrapper,
    body[state="root.ticket.start"] #header .text.wrapper>.content {
        background: url(https://tickets.oebb.at/static/images/components/header/bg.png) #e6e6e6
    }
    body[state="root.ticket.start"] #header .click-area:focus,
    body[state="root.ticket.start"] #header .click-area:hover,
    body[state="root.ticket.start"] #header .shoppingcart-wrapper:focus,
    body[state="root.ticket.start"] #header .shoppingcart-wrapper:hover,
    body[state="root.ticket.start"] #header .text.wrapper>.content:focus,
    body[state="root.ticket.start"] #header .text.wrapper>.content:hover {
        background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
    }
    body[state="root.ticket.start"] #header .text.wrapper>.content {
        width: 100%
    }
}

@media (max-width:869px) {
    body[state="root.ticket.start"] #header .logo-menu-wrapper {
        display: block
    }
}

@media (max-width:869px) {
    body[state="root.shop.start"] #header .text.wrapper,
    body[state="root.shop.folder"] #header .text.wrapper {
        opacity: 1
    }
}

@media (min-width:480px) and (max-width:719px) {
    body[state="root.shop.start"] #header,
    body[state="root.shop.folder"] #header {
        transition: height 50ms ease-out .2s, flex 50ms ease-out .2s, box-flex 50ms ease-out .2s
    }
    body[state="root.shop.start"] #header .logo-menu-wrapper,
    body[state="root.shop.folder"] #header .logo-menu-wrapper {
        left: 0
    }
}

#header .conversion-singleton {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    max-width: 964px;
    width: 100%;
    top: 40px;
    left: 0
}

@media (max-width:869px) {
    #header .conversion-singleton {
        max-width: none;
        padding-right: 32px
    }
}

@media (max-width:869px) {
    #header .conversion-singleton {
        top: 0;
        padding: 0
    }
}

#header .conversion-singleton .conversionButtonWrapper {
    height: 90px
}

body[state="root.ticket.offer.journey"] #header .conversion-singleton .conversionButtonWrapper {
    opacity: 1
}

@media (max-width:480px) {
    body[state="root.ticket.offer.journey"] #header .conversion-singleton .conversionButtonWrapper {
        flex: 0 0 90px
    }
}

#header .conversion-singleton .conversionButtonWrapper .conversionButton {
    z-index: 12
}

#header .journeyPreviewHeader {
    position: absolute;
    left: 0;
    right: 0;
    top: -90px;
    margin: 0;
    padding: 0 43px 0 286px;
    color: #222;
    font-size: 30px;
    font-weight: 400;
    line-height: 51px;
    z-index: -1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 0
}

body[state="root.ticket.offer.journey"] #header .journeyPreviewHeader {
    -webkit-transform: translate3d(0, 180px, 0);
    transform: translate3d(0, 180px, 0);
    opacity: 1
}

@media (max-width:869px) {
    body[state="root.ticket.offer.journey"] #header .journeyPreviewHeader {
        -webkit-transform: translate3d(0, 90px, 0);
        transform: translate3d(0, 90px, 0)
    }
}

@media (max-width:1024px) {
    #header .journeyPreviewHeader {
        padding: 0 31px 0 286px
    }
}

@media (max-width:860px) {
    #header .journeyPreviewHeader {
        padding: 0 31px 0 174px
    }
}

@media (max-width:720px) {
    #header .journeyPreviewHeader {
        padding: 0;
        margin: 0
    }
}

#header .journeyPreviewHeader .header {
    background-color: #f0f0f0;
    margin: 0;
    border-top: 10px solid #fff;
    padding: 10px 0 10px 21px;
    box-sizing: border-box;
    max-width: 678px;
    position: relative
}

#header .journeyPreviewHeader .header:after {
    transition: .2s all ease
}

@media (max-width:869px) {
    #header .journeyPreviewHeader .header {
        padding-bottom: 16px;
        font-size: 24px;
        font-weight: 400
    }
}

#header .layoutCancelOk {
    flex: 1;
    align-items: center;
    display: flex;
    height: 48px;
    background-color: #878787;
    color: #fff;
    font-size: 16px
}

#header .layoutCancelOk>.col1 {
    flex: 1;
    text-align: center
}

#header .layoutCancelOk>.line {
    width: 1px;
    background-color: #afafaf;
    height: 25px
}

#header .layoutCancelOk>.col2 {
    flex: 1;
    text-align: center
}

#header .subheader {
    opacity: 1;
    flex: 1 1;
    display: flex;
    align-items: center
}

#header .subheader.black {
    background-color: #222
}

@media (min-width: 870px) {
    #header .subheader.black {
        background-color: #fff
    }
}

#header .subheader.black>.col2 {
    color: #fff
}

@media (min-width: 870px) {
    #header .subheader.black>.col2 {
        color: #222
    }
}

@media (min-width: 870px) and (max-width:869px) {
    #header .subheader.backButtonVisible>.col1 {
        flex: 0 0 65px
    }
}

#header .subheader>.col1 {
    flex: 0 0 65px;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

@media (max-width:869px) {
    #header .subheader>.col1 {
        align-self: center
    }
}

#header .subheader>.col1 .rightBorder {
    display: none;
    background-color: #d7d7d7;
    height: 54px;
    width: 1px;
    float: right
}

@media (min-width: 870px) {
    #header .subheader>.col1 {
        flex: 0 0 14px
    }
    #header .subheader>.col1 .rightBorder {
        display: inline-block
    }
}

@media (min-width: 870px) {
    #header .subheader>.col1 {
        flex: 0 0 4px
    }
    body[state="root.ticket.offer.journey"] #header .subheader>.col1 {
        flex: 0 0 160px
    }
}

@media (min-width: 870px) {
    #header .subheader>.col1 {
        flex: 0 0 140px
    }
    body[state="root.ticket.offer.journey"] #header .subheader>.col1 {
        flex: 0 0 160px
    }
}

@media (min-width:1440px) {
    #header .subheader>.col1 {
        flex: 0 0 306px
    }
    body[state="root.ticket.offer.journey"] #header .subheader>.col1 {
        flex: 0 0 160px
    }
}

#header .subheader>.col1 .backIconWrapper {
    background-color: #383838;
    width: 48px;
    text-align: center;
    height: 48px;
    line-height: 48px;
    margin-right: 17px
}

#header .subheader>.col1 .backIconWrapper svg {
    vertical-align: middle;
    margin-top: -5px
}

#header .subheader>.col1 .backIconWrapper:focus,
#header .subheader>.col1 .backIconWrapper:hover {
    background-color: #525252
}

#header .subheader>.col2 {
    font-size: 20px;
    line-height: 1;
    /* padding-left: 21px; */
    flex: 1;
    padding-top: 12px;
}

#header .subheader>.col2>h1 {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25em
}

@media (min-width: 870px) {
    #header .subheader>.col2 h1 {
        font-size: 30px;
        color: #222;
        font-weight: 300;
    }
}

#header .subheader>.col3 {
    height: 42px;
    padding: 14px 60px 0 0
}

#header .subheader>.col3 a {
    font-size: 16px;
    font-weight: 400;
    color: #51a351
}

#header .subheader>.col3.focused svg,
#header .subheader>.col3:hover svg {
    fill: #6fb86f
}

#header .subheader>.col3.focused a,
#header .subheader>.col3:hover a {
    color: #6fb86f
}

.globalInfobubbleContent {
    min-width: 500px
}

.globalInfobubbleContent .errorHeader {
    color: #ab0020!important
}

.globalInfobubbleContent .warningHeader {
    color: #ed6f00!important
}

.globalInfobubbleContent .infobubble-left {
    padding-top: 20px;
    width: 55px;
    display: inline-block;
    float: left;
    text-align: center
}

.globalInfobubbleContent .infobubble-right {
    overflow: hidden;
    padding: 22px 0 19px 0
}

ts-info-bubble {
    visibility: hidden!important;
    width: 0!important;
    height: 0!important;
    overflow: hidden!important
}

.infoBubble {
    opacity: 0;
    transition: left .2s ease-out, top .2s ease-out, height .2s ease-out, width .2s ease-out, opacity .25s ease-out, margin-top .25s ease-out;
    background-color: #fff;
    background-clip: content-box;
    cursor: default;
    position: relative;
    outline: 0
}

.infoBubble svg:not(:root) {
    overflow: visible
}

.infoBubble.plain>.contentWrapper {
    padding: 0
}

.infoBubble.plain>.contentWrapper>section {
    margin: 0;
    padding: 0
}

.infoBubble.plain>.contentWrapper>footer:before {
    display: none
}

.infoBubble.noBubble {
    background-color: inherit!important
}

.infoBubble.noBubble .infoBubbleArrow {
    display: none!important
}

.infoBubble.noBubble .contentWrapper {
    background-color: inherit!important;
    padding: 0!important
}

.infoBubble.noBubble .contentWrapper .left {
    display: none!important
}

.infoBubble.inlineWidth {
    display: inline-block
}

.infoBubble.visible {
    opacity: 1;
    width: auto;
    height: auto
}

.infoBubble.arrow>.infoBubbleArrow {
    display: inline-block
}

.infoBubble.overlay {
    position: fixed;
    z-index: 101
}

.infoBubble.border,
.infoBubble.overlay {
    border-bottom: 1px solid #d7d7d7;
    box-shadow: 0 5px 15px 1px rgba(0, 0, 0, .6)
}

.infoBubble.border>.infoBubbleArrow,
.infoBubble.overlay>.infoBubbleArrow {
    z-index: 1;
    border-left: 1px solid #d7d7d7;
    border-top: 1px solid #d7d7d7
}

.infoBubble.border>.contentWrapper,
.infoBubble.overlay>.contentWrapper {
    border: 1px solid #d7d7d7;
    border-bottom: none
}

.infoBubble.border {
    box-shadow: none
}

.infoBubble .info .left>.contentWrapper footer a:focus,
.infoBubble .info .left>.contentWrapper footer a:hover,
.infoBubble .info .left>.contentWrapper footer>input:focus,
.infoBubble .info .left>.contentWrapper footer>input:hover,
.infoBubble .info footer>.contentWrapper footer a:focus,
.infoBubble .info footer>.contentWrapper footer a:hover,
.infoBubble .info footer>.contentWrapper footer>input:focus,
.infoBubble .info footer>.contentWrapper footer>input:hover,
.infoBubble .info header>.contentWrapper footer a:focus,
.infoBubble .info header>.contentWrapper footer a:hover,
.infoBubble .info header>.contentWrapper footer>input:focus,
.infoBubble .info header>.contentWrapper footer>input:hover,
.infoBubble.info .content .left>.contentWrapper footer a:focus,
.infoBubble.info .content .left>.contentWrapper footer a:hover,
.infoBubble.info .content .left>.contentWrapper footer>input:focus,
.infoBubble.info .content .left>.contentWrapper footer>input:hover,
.infoBubble.info .content footer>.contentWrapper footer a:focus,
.infoBubble.info .content footer>.contentWrapper footer a:hover,
.infoBubble.info .content footer>.contentWrapper footer>input:focus,
.infoBubble.info .content footer>.contentWrapper footer>input:hover,
.infoBubble.info .content header>.contentWrapper footer a:focus,
.infoBubble.info .content header>.contentWrapper footer a:hover,
.infoBubble.info .content header>.contentWrapper footer>input:focus,
.infoBubble.info .content header>.contentWrapper footer>input:hover {
    color: #6fb86f
}

.infoBubble .info .left>.contentWrapper footer a:active,
.infoBubble .info .left>.contentWrapper footer>input:active,
.infoBubble .info footer>.contentWrapper footer a:active,
.infoBubble .info footer>.contentWrapper footer>input:active,
.infoBubble .info header>.contentWrapper footer a:active,
.infoBubble .info header>.contentWrapper footer>input:active,
.infoBubble.info .content .left>.contentWrapper footer a:active,
.infoBubble.info .content .left>.contentWrapper footer>input:active,
.infoBubble.info .content footer>.contentWrapper footer a:active,
.infoBubble.info .content footer>.contentWrapper footer>input:active,
.infoBubble.info .content header>.contentWrapper footer a:active,
.infoBubble.info .content header>.contentWrapper footer>input:active {
    color: #91c991
}

.infoBubble .warning .left footer a:focus,
.infoBubble .warning .left footer a:hover,
.infoBubble .warning .left footer>input:focus,
.infoBubble .warning .left footer>input:hover,
.infoBubble .warning footer footer a:focus,
.infoBubble .warning footer footer a:hover,
.infoBubble .warning footer footer>input:focus,
.infoBubble .warning footer footer>input:hover,
.infoBubble .warning header footer a:focus,
.infoBubble .warning header footer a:hover,
.infoBubble .warning header footer>input:focus,
.infoBubble .warning header footer>input:hover,
.infoBubble.warning .content .left footer a:focus,
.infoBubble.warning .content .left footer a:hover,
.infoBubble.warning .content .left footer>input:focus,
.infoBubble.warning .content .left footer>input:hover,
.infoBubble.warning .content footer footer a:focus,
.infoBubble.warning .content footer footer a:hover,
.infoBubble.warning .content footer footer>input:focus,
.infoBubble.warning .content footer footer>input:hover,
.infoBubble.warning .content header footer a:focus,
.infoBubble.warning .content header footer a:hover,
.infoBubble.warning .content header footer>input:focus,
.infoBubble.warning .content header footer>input:hover {
    color: #ff500a
}

.infoBubble .warning .left footer a:active,
.infoBubble .warning .left footer>input:active,
.infoBubble .warning footer footer a:active,
.infoBubble .warning footer footer>input:active,
.infoBubble .warning header footer a:active,
.infoBubble .warning header footer>input:active,
.infoBubble.warning .content .left footer a:active,
.infoBubble.warning .content .left footer>input:active,
.infoBubble.warning .content footer footer a:active,
.infoBubble.warning .content footer footer>input:active,
.infoBubble.warning .content header footer a:active,
.infoBubble.warning .content header footer>input:active {
    color: #ff743d
}

.infoBubble .error .left footer a:focus,
.infoBubble .error .left footer a:hover,
.infoBubble .error .left footer>input:focus,
.infoBubble .error .left footer>input:hover,
.infoBubble .error footer footer a:focus,
.infoBubble .error footer footer a:hover,
.infoBubble .error footer footer>input:focus,
.infoBubble .error footer footer>input:hover,
.infoBubble .error header footer a:focus,
.infoBubble .error header footer a:hover,
.infoBubble .error header footer>input:focus,
.infoBubble .error header footer>input:hover,
.infoBubble.error .content .left footer a:focus,
.infoBubble.error .content .left footer a:hover,
.infoBubble.error .content .left footer>input:focus,
.infoBubble.error .content .left footer>input:hover,
.infoBubble.error .content footer footer a:focus,
.infoBubble.error .content footer footer a:hover,
.infoBubble.error .content footer footer>input:focus,
.infoBubble.error .content footer footer>input:hover,
.infoBubble.error .content header footer a:focus,
.infoBubble.error .content header footer a:hover,
.infoBubble.error .content header footer>input:focus,
.infoBubble.error .content header footer>input:hover {
    color: #ff500a
}

.infoBubble .error .left footer a:active,
.infoBubble .error .left footer>input:active,
.infoBubble .error footer footer a:active,
.infoBubble .error footer footer>input:active,
.infoBubble .error header footer a:active,
.infoBubble .error header footer>input:active,
.infoBubble.error .content .left footer a:active,
.infoBubble.error .content .left footer>input:active,
.infoBubble.error .content footer footer a:active,
.infoBubble.error .content footer footer>input:active,
.infoBubble.error .content header footer a:active,
.infoBubble.error .content header footer>input:active {
    color: #ff743d
}

.infoBubble .content.twoColumn {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

.infoBubble .content.twoColumn .left {
    flex: 0 0 40px
}

.infoBubble .content.twoColumn2 .left {
    float: left;
    width: 40px
}

.infoBubble .content.twoColumn2 .right {
    overflow: hidden
}

.infoBubble .content.twoColumn2.inlineWidth {
    display: inline-block
}

.infoBubble>.contentWrapper {
    background-color: inherit;
    padding: 12px 12px 20px 20px
}

.info.infoBubble>.contentWrapper {
    padding: 0
}

.info.infoBubble>.contentWrapper>.left {
    padding-top: 17px;
    width: 55px;
    display: inline-block;
    float: left;
    text-align: center
}

.info.infoBubble>.contentWrapper>.right {
    overflow: hidden;
    padding: 23px 0 19px 0
}

.infoBubble>.contentWrapper header {
    font-size: 14px;
    line-height: 1.25em;
    padding: 0 29px 0 0;
    box-sizing: border-box;
    font-weight: 400;
    margin: 0
}

.infoBubble>.contentWrapper header>h2 {
    font-size: 14px;
    line-height: 1.25em;
    padding: 0 29px 0 0;
    box-sizing: border-box;
    font-weight: 400;
    margin: 0
}

.infoBubble>.contentWrapper section {
    font-size: 12px;
    color: #868686;
    line-height: 1.25em;
    margin: 8px 29px 23px 0
}

.infoBubble>.contentWrapper footer {
    font-size: 12px;
    line-height: 1.25em;
    border-top: 1px solid #e6e6e6;
    position: relative;
    padding-top: 16px
}

.infoBubble>.contentWrapper footer:before {
    content: " ";
    position: absolute;
    width: 15px;
    height: 1px;
    background-color: #e6e6e6;
    left: -15px;
    top: -1px
}

.infoBubble>.contentWrapper footer a,
.infoBubble>.contentWrapper footer>input {
    background: 0 0;
    border: none;
    padding: 0;
    outline: 0
}

@media (min-width:379px) {
    .infoBubble>.contentWrapper footer a,
    .infoBubble>.contentWrapper footer>input {
        margin-left: 20px
    }
}

.infoBubble>.contentWrapper footer a:first-child,
.infoBubble>.contentWrapper footer>input:first-child {
    margin-left: 0
}

.infoBubble [name=close] {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 16px;
    height: 16px;
    fill: #878787;
    opacity: 0;
    transition: opacity .3s
}

.infoBubble .closeBtnWrapper:focus [name=close],
.infoBubble:focus [name=close],
.infoBubble:hover [name=close] {
    display: inline-block;
    fill: #878787;
    opacity: 1
}

.infoBubble>.infoBubbleArrow {
    background-color: inherit;
    display: none;
    z-index: -1;
    width: 24px;
    position: absolute;
    height: 24px
}

.infoBubble.bottom.inline {
    margin-top: 17.14px;
    margin-bottom: 18px
}

.infoBubble.bottom>.infoBubbleArrow {
    display: inline-block;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -12px;
    left: 5.14px
}

.infoBubble.top.inline {
    margin-bottom: 17.14px
}

.infoBubble.top>.infoBubbleArrow {
    display: inline-block;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    bottom: -12px;
    left: 5.14px
}

.infoBubble.right.inline {
    margin-left: 17.14px
}

.infoBubble.right>.infoBubbleArrow {
    display: inline-block;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 5.14px;
    left: -12px
}

.infoBubble.left.inline {
    margin-right: 17.14px
}

.infoBubble.left>.infoBubbleArrow {
    display: inline-block;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    top: 5.14px;
    right: -12px
}

.infoBubble.centered {
    text-align: left;
    margin: 1px solid #afafaf;
    box-shadow: 3px 6px 20px #afafaf;
    left: 50%;
    top: 50%;
    position: absolute
}

.infoBubble.hasTopBar {
    top: calc(50% - 26px)
}

.infoBubble:focus {
    background-color: #f2f2f2
}

.infoBubble.info>.contentWrapper footer a:focus,
.infoBubble.info>.contentWrapper footer a:hover,
.infoBubble.info>.contentWrapper footer>input:focus,
.infoBubble.info>.contentWrapper footer>input:hover {
    color: #6fb86f
}

.infoBubble.info>.contentWrapper footer a:active,
.infoBubble.info>.contentWrapper footer>input:active {
    color: #91c991
}

.infoBubble.error footer a:focus,
.infoBubble.error footer a:hover,
.infoBubble.error footer>input:focus,
.infoBubble.error footer>input:hover,
.infoBubble.warning footer a:focus,
.infoBubble.warning footer a:hover,
.infoBubble.warning footer>input:focus,
.infoBubble.warning footer>input:hover,
.infoBubble[name=globalErrorBubble] footer a:focus,
.infoBubble[name=globalErrorBubble] footer a:hover,
.infoBubble[name=globalErrorBubble] footer>input:focus,
.infoBubble[name=globalErrorBubble] footer>input:hover {
    color: #ff500a
}

.infoBubble.error footer a:active,
.infoBubble.error footer>input:active,
.infoBubble.warning footer a:active,
.infoBubble.warning footer>input:active,
.infoBubble[name=globalErrorBubble] footer a:active,
.infoBubble[name=globalErrorBubble] footer>input:active {
    color: #ff743d
}

.infoBubble.infoInfo {
    margin-bottom: 20px;
    background-color: #221d47;
    color: #fff
}

.infoBubble.infoInfo svg {
    color: #fff;
    fill: #fff
}

.infoBubble.infoInfo>.contentWrapper {
    padding-right: 0;
    padding-bottom: 16px
}

.infoBubble.infoInfo>.contentWrapper header {
    padding-top: 3px;
    padding-left: 10px;
    font-weight: 700
}

.infoBubble.infoInfo>.contentWrapper section {
    padding-left: 10px;
    margin-bottom: 16px;
    color: #fff
}

.infoBubble.infoInfo>.contentWrapper footer {
    padding-left: 10px;
    padding-top: 13px
}

.infoBubble.infoInfo>.contentWrapper footer>.closeGeneralInfoBubble {
    float: right;
    margin-right: 29px
}

.infoBubble.blocking .blockingLayer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    opacity: .5;
    z-index: 10
}

.infoBubble.blocking>.contentWrapper {
    z-index: 15;
    position: relative
}

.infocard {
    margin-bottom: 20px;
    max-width: 380px;
    color: #222;
    background-image: url(https://tickets-deva.oebb.at/static/images/background/infocardBackground.svg);
    background-position: right top
}

@media (min-width: 870px) and (max-width:860px) {
    .infocard {
        max-width: 320px
    }
}

.infocard.focus,
.infocard.focusOnChild,
.infocard:focus,
.infocard:hover {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/infocardBackgroundHoverFocused.svg)
}

.infocard.ng-enter {
    opacity: 0;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    transition: -webkit-transform .4s ease-out, transform .4s ease-out, opacity .4s ease-out;
    transition-delay: .2s, .2s
}

.infocard.ng-enter.ng-enter-active {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.infocard.ng-leave {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: -webkit-transform .4s ease-out, transform .4s ease-out, opacity .4s ease-out;
    transition-delay: .2s, .2s
}

.infocard.ng-leave.ng-leave-active {
    opacity: 0;
    -webkit-transform: scale(.5);
    transform: scale(.5)
}

.infocard.Archiv {
    color: #6a6a6a
}

.infocard.Archiv .calendar .dayOfTheWeek {
    background-color: #878787
}

.infocard.Archiv .calendar .day,
.infocard.Archiv .calendar .month {
    color: #6a6a6a
}

.infocard.Archiv .row2 .col2 .connection .time {
    color: #6a6a6a
}

.infocard.Archiv .connection>.sections>.section>div {
    border-bottom-color: #878787!important;
    color: #868686!important
}

.infocard h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1em;
    margin: 0;
    padding: 0
}

.infocard p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    margin: 0;
    padding: 0
}

.infocard .col1 {
    float: left;
    min-width: 114px;
    min-height: 1px;
    text-align: center
}

.infocard .col1 svg.clock {
    width: 58px;
    height: 58px;
    overflow: visible
}

.infocard .col2 {
    overflow: hidden
}

.infocard .col2 h1 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1em;
    margin: 0;
    padding: 0
}

.infocard .row1 .insured {
    right: 15px;
    top: 20px
}

.infocard .row1 .col1 {
    padding-top: 19px
}

.infocard .row1 .col2 {
    padding: 18px 16px 0 0
}

.infocard .row1 .col2 .infocard-from-to-section {
    display: flex;
    justify-content: space-between
}

.infocard .row1 .col2 .infocard-from-to-section .insured {
    padding-top: 2px
}

.infocard .row1 .col2 .passengers,
.infocard .row1 .col2 .vias {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.1em
}

.infocard .row1 .col2 .vias {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.infocard .row2 {
    padding: 16px 16px 0 0
}

.infocard .row2 p.realTime {
    color: #51a351
}

.infocard .row2 p.delayed {
    color: #d63d00
}

.infocard .row2 .col2 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    color: #6a6a6a
}

.infocard .row3 {
    padding: 4px 6px 0 0
}

.infocard .row3 .col1 {
    min-width: 104px;
    min-height: 1px
}

.infocard .row-buy-again {
    height: auto;
    min-height: 30px;
    width: 100%;
    display: flex;
    align-items: center
}

.infocard .row-buy-again .buy-again-section {
    width: 70px;
    height: 30px;
    display: flex;
    justify-content: flex-end;
    align-content: flex-end
}

.infocard .row-buy-again>.col2 {
    width: 100%
}

.infocard .row-buy-again>.col2 .connections-section {
    padding: 18px 16px 20px 0
}

.infocard .row-buy-again>.col2 .validity-section {
    padding: 0 16px 5px 0
}

.infocard .row4 {
    padding: 18px 16px 20px 0
}

.infocard .row5 {
    padding: 0 16px 5px 112px;
    display: flex;
    justify-content: space-between
}

.infocard .row6 {
    padding-right: 16px
}

.infocard .row6 .col2 {
    border-top: 1px solid #afafaf;
    height: 48px;
    line-height: 48px
}

.infocard .row6 .col2 a {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1em;
    margin-right: 36px
}

.infocard .row6 .col2 a:focus,
.infocard .row6 .col2 a:hover {
    color: #555
}

.infocard .validity-section {
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    width: 100%
}

.infocard .validity-section .validityPeriodCategory .category {
    font-weight: 700;
    white-space: nowrap
}

.infocard .validity-section .validityPeriodDuration {
    text-align: right
}

.infocard .connections-section {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    color: #6a6a6a
}

.infocard .connections-section .iconWrapper {
    text-align: center
}

.infocard .connections-section .connection .delayedRed {
    color: #d63d00!important
}

.infocard .connections-section .connection .delayed {
    text-decoration: line-through;
    font-size: 12px
}

.infocard .connections-section .connection .sections {
    width: 100%;
    margin-bottom: 0
}

.infocard .connections-section .connection .sections .train {
    height: 24px;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    margin-bottom: 2px
}

.infocard .connections-section .connection>.floatRight .arrivalNotOnSameDay {
    text-align: right;
    font-size: 12px;
    color: #d63d00
}

.infocardsContainer {
    position: relative;
    flex: 1;
    opacity: 1;
    overflow: hidden;
    transition: opacity .4s ease-out, -webkit-transform .4s ease-out, transform .4s ease-out
}

.infocardsContainer.b2b {
    overflow-y: scroll;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-color: transparent transparent
}

.infocardsContainer.b2b::-webkit-scrollbar {
    width: 0!important
}

@media (max-width:720px) {
    .infocardsContainer {
        margin-top: 40px
    }
}

body[state="root.ticket.quickstart"] .infocardsContainer,
body[state="root.ticket.start"] .infocardsContainer {
    opacity: 1
}

.infocardsContainer .infocards {
    transition: opacity .5s ease-in .25s, -webkit-transform .3s ease-in, transform .3s ease-in;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.infocardsContainer .infocards.Archiv.ng-hide {
    -webkit-transform: translate3d(0, -100vh, 0);
    transform: translate3d(0, -100vh, 0)
}

.infocardsContainer .infocards.Ticket.ng-hide {
    -webkit-transform: translate3d(0, 100vh, 0);
    transform: translate3d(0, 100vh, 0)
}

.infocardsContainer .infocards.ng-hide:not(.ng-animate) {
    display: block!important
}

.infocardsContainer .infocards.ng-hide-add,
.infocardsContainer .infocards.ng-hide-remove {
    display: block!important
}

.infocardsContainer .infocards.ng-hide-add {
    opacity: 1
}

.infocardsContainer .infocards.ng-hide-add.ng-hide-add-active {
    opacity: 0
}

.infocardsContainer .infocards.ng-hide-remove {
    opacity: 0
}

.infocardsContainer .infocards.ng-hide-remove.ng-hide-remove-active {
    opacity: 1
}

.infocardsContainer .infocards .infoBubble[name^=reducedOfferInfo],
.infocardsContainer .infocards .infoBubble[name^=connectionWarning],
.infocardsContainer .infocards .infoBubble[name^=delayWarning],
.infocardsContainer .infocards .infoBubble[name^=boardingTime] {
    max-width: 380px;
    margin-bottom: 20px
}

@media (min-width: 870px) and (max-width:860px) {
    .infocardsContainer .infocards .infoBubble[name^=reducedOfferInfo],
    .infocardsContainer .infocards .infoBubble[name^=connectionWarning],
    .infocardsContainer .infocards .infoBubble[name^=delayWarning],
    .infocardsContainer .infocards .infoBubble[name^=boardingTime] {
        max-width: 320px
    }
}

@media (min-width:480px) {
    .infocardsContainer .infocards {
        margin-right: 30px;
        padding-top: 46px
    }
}

@media (min-width:480px) and (max-width:720px) {
    .infocardsContainer .infocards {
        float: right;
        width: 380px
    }
}

@media (min-width: 870px) {
    .infocardsContainer .infocards {
        margin-right: 18px;
        margin-left: 65px
    }
}

@media (min-width: 870px) {
    .infocardsContainer .infocards {
        margin-left: 32px
    }
}

@media (min-width: 870px) {
    .infocardsContainer .infocards {
        margin-left: 64px;
        margin-right: 0;
        padding-top: 90px
    }
}

@media (min-width:1280px) {
    .infocardsContainer .infocards {
        margin-left: 124px
    }
}

@media (min-width:480px) {
    .infocardsContainer .infocards>.innerScrollContainer {
        padding-top: 46px
    }
}

@media (min-width: 870px) {
    .infocardsContainer .infocards>.innerScrollContainer {
        padding-top: 90px
    }
}

.infocard.rfinfocard {
    position: relative;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGOUY5RjkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0U2RTZFNiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: linear-gradient(to bottom, #F9F9F9 0, #E6E6E6 100%)
}

.infocard.rfinfocard:hover .delete {
    display: block
}

.infocard.rfinfocard .delete {
    padding: 14px 14px 3px 3px;
    display: none;
    position: absolute;
    right: 0;
    top: 0
}

.rtaInfocardWrapper .infocard.rtainfocard {
    position: relative;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGOUY5RjkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0U2RTZFNiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: linear-gradient(to bottom, #F9F9F9 0, #E6E6E6 100%)
}

.rtaInfocardWrapper .infocard.rtainfocard:focus,
.rtaInfocardWrapper .infocard.rtainfocard:hover {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlY2VjZWMiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: linear-gradient(to bottom, #ececec 0, #d9d9d9 100%)
}

.rtaInfocardWrapper .infocard.rtainfocard:focus .delete,
.rtaInfocardWrapper .infocard.rtainfocard:hover .delete {
    display: block;
    outline: 0
}

.rtaInfocardWrapper .infocard.rtainfocard:focus .row3 .col2 .settings,
.rtaInfocardWrapper .infocard.rtainfocard:hover .row3 .col2 .settings {
    opacity: 1
}

.rtaInfocardWrapper .infocard.rtainfocard .delete {
    padding: 14px 14px 3px 3px;
    display: none;
    position: absolute;
    right: 0;
    top: 0
}

.rtaInfocardWrapper .infocard.rtainfocard .delete:focus,
.rtaInfocardWrapper .infocard.rtainfocard .delete:hover {
    display: block;
    outline: 0
}

.rtaInfocardWrapper .infocard.rtainfocard .delete:focus svg,
.rtaInfocardWrapper .infocard.rtainfocard .delete:hover svg {
    fill: #4a4a4a!important
}

.rtaInfocardWrapper .infocard.rtainfocard h1 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1em;
    margin: 0;
    padding: 0
}

.rtaInfocardWrapper .infocard.rtainfocard p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    margin: 0;
    padding: 0
}

.rtaInfocardWrapper .infocard.rtainfocard .col1 {
    float: left;
    min-width: 114px;
    min-height: 1px;
    text-align: center
}

.rtaInfocardWrapper .infocard.rtainfocard .col1 svg.clock {
    width: 58px;
    height: 58px;
    overflow: visible
}

.rtaInfocardWrapper .infocard.rtainfocard .col2 {
    overflow: hidden
}

.rtaInfocardWrapper .infocard.rtainfocard .row1 .col1 {
    padding-top: 19px
}

.rtaInfocardWrapper .infocard.rtainfocard .row1 .col2 {
    padding: 18px 16px 0 0
}

.rtaInfocardWrapper .infocard.rtainfocard .row1 .col2 .passengers {
    position: relative;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.1em
}

.rtaInfocardWrapper .infocard.rtainfocard .row1 .col2 .passengers svg[iconname=info] {
    display: none;
    position: absolute;
    right: 0;
    top: 0
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 {
    padding: 16px 16px 20px 0;
    overflow: hidden
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 p {
    color: #51a351
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection {
    white-space: nowrap;
    display: flex;
    width: 100%;
    position: relative
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .time {
    color: #000
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .time.gradient {
    color: #508546
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection.disabled .time {
    color: #868686
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection.disabled .journey {
    border-bottom-color: #878787!important;
    color: #868686!important;
    background-color: transparent!important
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection.disabled .journey svg {
    fill: #868686!important;
    vertical-align: bottom
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .anotherDay {
    color: #d40027
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .realtime {
    display: block;
    text-decoration: line-through;
    font-size: 12px;
    text-align: left
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .realtime.right {
    text-align: right
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .time {
    text-align: right;
    padding-top: 22px;
    font-size: 12px;
    color: #222;
    width: 104px;
    flex: 0 0 104px
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .time .delayed {
    color: #d63d00
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .time.arrival {
    width: 65px;
    flex: 0 0 65px;
    text-align: right
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .time .hour {
    font-weight: 700
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .time .changedTime {
    font-weight: 400;
    font-size: 12px;
    text-decoration: line-through;
    color: #6a6a6a;
    margin: 0
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .time .duration {
    font-weight: 400;
    color: #6a6a6a
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .time .date {
    font-size: 12px;
    text-align: center;
    color: #d40027
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .travel {
    font-size: 12px;
    color: #6a6a6a;
    padding: 19px 0 0 10px;
    flex: 1 1;
    overflow-x: hidden
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .travel>p.station {
    margin: 0;
    font-size: 12px;
    color: #000
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .sections {
    width: 100%;
    margin-bottom: 0
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .connection .sections .train {
    height: 24px;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    margin-bottom: 2px
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .col2 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    color: #6a6a6a
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .col2 .iconWrapper {
    text-align: center
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .col2 .arrowWrapper {
    height: 6px;
    margin-top: 10px;
    position: relative
}

.rtaInfocardWrapper .infocard.rtainfocard .row2 .col2 .arrowWrapper .gradient {
    height: 1px;
    background: linear-gradient(to right, #2e8063, #3faa33, #58841f, #869611, #b4940d);
    margin-left: 17px
}

.rtaInfocardWrapper .infocard.rtainfocard .row3 {
    padding-right: 16px
}

.rtaInfocardWrapper .infocard.rtainfocard .row3 .col2 {
    border-top: 1px solid #afafaf;
    height: 48px;
    line-height: 48px;
    display: flex;
    align-items: center
}

.rtaInfocardWrapper .infocard.rtainfocard .row3 .col2 a {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1em;
    margin-right: 16px;
    padding: 15px 10px;
    flex: 1 1;
    text-align: right
}

.rtaInfocardWrapper .infocard.rtainfocard .row3 .col2 a.disabled {
    color: #878787;
    cursor: default
}

.rtaInfocardWrapper .infocard.rtainfocard .row3 .col2 a:last-child {
    margin-right: -5px;
    padding-right: 5px
}

.rtaInfocardWrapper .infocard.rtainfocard .row3 .col2 a.settings {
    opacity: 0;
    text-align: right
}

.rtaInfocardWrapper .infocard.rtainfocard .row3 .col2 a.settings:focus,
.rtaInfocardWrapper .infocard.rtainfocard .row3 .col2 a.settings:hover {
    display: block;
    opacity: 1;
    outline: 0
}

.rtaInfocardWrapper .infocard.rtainfocard .row3 .col2 a.settings:focus svg,
.rtaInfocardWrapper .infocard.rtainfocard .row3 .col2 a.settings:hover svg {
    fill: #4a4a4a!important
}

.rtaInfocardWrapper .infocard.rtainfocard .row3 .col2 a:focus {
    text-decoration: underline;
    outline: 0
}

.rtaInfocardWrapper .infocard.rtainfocard .connection {
    transition: .3s linear all;
    overflow: visible
}

.rtaInfocardWrapper .infocard.rtainfocard .connection>.travel {
    overflow: hidden
}

.rtaInfocardWrapper .infocard.rtainfocard .infocardAnimationIn {
    opacity: 1;
    height: 40px
}

.rtaInfocardWrapper .infocard.rtainfocard .infocardAnimationOut {
    opacity: 0;
    height: 0
}

.rtaInfocardWrapper .infocard.rtainfocard.next .connection.ng-leave {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    height: 40px
}

.rtaInfocardWrapper .infocard.rtainfocard.next .connection.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
    opacity: 0;
    height: 0
}

.rtaInfocardWrapper .infocard.rtainfocard.next .connection.ng-enter {
    opacity: 0;
    height: 0
}

.rtaInfocardWrapper .infocard.rtainfocard.next .connection.ng-enter.ng-enter-active {
    opacity: 1;
    height: 40px
}

.rtaInfocardWrapper .infocard.rtainfocard.next.last-item .connection.ng-leave {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.rtaInfocardWrapper .infocard.rtainfocard.next.last-item .connection.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(0, -60px, 0);
    transform: translate3d(0, -60px, 0);
    opacity: 0;
    height: 0
}

.rtaInfocardWrapper .infocard.rtainfocard.next.last-item .connection.ng-enter {
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
    opacity: 0;
    height: 0
}

.rtaInfocardWrapper .infocard.rtainfocard.next.last-item .connection.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    height: 40px
}

.rtaInfocardWrapper .infocard.rtainfocard.previous .connection.ng-enter {
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
    opacity: 0;
    height: 0
}

.rtaInfocardWrapper .infocard.rtainfocard.previous .connection.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    height: 40px
}

.rtaInfocardWrapper .infocard.rtainfocard.previous .connection.ng-leave {
    opacity: 1;
    height: 40px
}

.rtaInfocardWrapper .infocard.rtainfocard.previous .connection.ng-leave.ng-leave-active {
    opacity: 0;
    height: 0
}

.rtaInfocardWrapper .infocard.rtainfocard .infoBubble .deviationInfo {
    white-space: pre-wrap
}

.rtaInfocardWrapper .infoBubble {
    max-width: 380px
}

.rtaInfocardWrapper>div.infoBubble:last-of-type {
    margin-bottom: 20px
}

.infoBubble[name=rtaInfocardFormBubble] {
    margin: 0;
    background-color: #f0f0f0
}

@media (max-width:720px) {
    .infoBubble[name=rtaInfocardFormBubble].border>.contentWrapper {
        border: none
    }
}

.infoBubble[name=rtaInfocardFormBubble]>.content {
    padding: 0
}

.infoBubble[name=rtaInfocardFormBubble]>.content>header {
    padding: 23px 0 29px 0
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] {
    padding: 10px
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] select {
    font-size: 16px;
    font-weight: 400;
    color: #222
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] input {
    color: #222;
    background-color: #f0f0f0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    border: none;
    border-bottom: 1px solid #868686;
    margin-bottom: 10px
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] input::-webkit-input-placeholder {
    color: #6a6a6a!important
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] input:-moz-placeholder {
    color: #6a6a6a!important
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] input::-moz-placeholder {
    color: #6a6a6a!important
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] input:-ms-input-placeholder {
    color: #6a6a6a!important
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] input:focus {
    outline: 0
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] h1 {
    font-size: 18px;
    font-weight: 400;
    color: #222;
    margin-bottom: 20px
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] h1 span.coupon {
    font-size: 16px;
    font-weight: 400;
    color: #51a351;
    float: right;
    display: none
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] p {
    font-size: 12px;
    font-weight: 400;
    color: #222;
    padding: 15px
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] p b {
    font-weight: 700
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] hr {
    background-color: #afafaf
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm]>.emailWrapper {
    margin: 21px 0 32px 0
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm]>.emailWrapper input {
    width: 255px
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm]>.emailWrapper p {
    margin: 0
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm]>.emailWrapper p.subtext {
    color: #6a6a6a
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm]>.emailWrapper input.ng-invalid.ng-touched {
    background-color: #ee5f5b
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm]>.emailWrapper .error {
    font-size: 14px;
    font-weight: 400;
    color: #d63d00;
    fill: #d63d00
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] ul.settings {
    list-style-type: none;
    padding: 0;
    margin: 0 0 30px 0;
    border-bottom: 1px solid #afafaf;
    border-top: 1px solid #afafaf
}

@media (max-width:720px) {
    .infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] ul.settings {
        border-top: none
    }
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting {
    display: flex;
    overflow: hidden;
    border-bottom: 1px solid #afafaf;
    padding-bottom: 0
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting.selected {
    height: auto
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting:not(.ng-hide):last-child {
    border-bottom: none
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting.weekdays {
    display: inline-block;
    height: auto
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting>.col1 {
    padding: 18px 0 18px 0;
    flex: 0 0 55px;
    width: 55px;
    display: flex;
    align-items: flex-start
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting>.col2 {
    padding: 18px 0 18px 0;
    line-height: 1.1em;
    font-size: 16px;
    font-weight: 400;
    color: #222
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25em
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    margin: 0;
    padding: 5px 0
}

.infoBubble[name=rtaInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting p.subtext {
    font-size: 12px;
    color: #6a6a6a
}

.infoBubble[name=rtaInfocardFormBubble]>.content>.total {
    background-color: #fff
}

.infoBubble[name=rtaInfocardFormBubble]>.content>.total>.value {
    text-align: right;
    display: flex;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25em
}

.infoBubble[name=rtaInfocardFormBubble]>.content>.total>.value>.left {
    color: #222;
    flex: 1 0 auto;
    padding: 16px 16px 10px 16px
}

.infoBubble[name=rtaInfocardFormBubble]>.content>.total>.value>.left a {
    text-decoration: underline;
    font-size: 14px;
    font-weight: 400;
    color: #6a6a6a;
    line-height: 1.1em
}

.infoBubble[name=rtaInfocardFormBubble]>.content>.total>.value>.perforation {
    width: 4px;
    background: url(https://tickets-deva.oebb.at/static/images/background/paymentPerforation.svg)
}

.infoBubble[name=rtaInfocardFormBubble]>.content>.total>.value>.right {
    padding: 16px 16px 10px 0;
    box-sizing: content-box;
    flex: 0 1 127px
}

.infoBubble[name=rtaInfocardFormBubble]>.content>.total>.buttons {
    padding: 18px 16px 18px 20px;
    background-color: #f0f0f0;
    background-clip: padding-box;
    border-top: 1px solid #afafaf
}

.infoBubble[name=rtaInfocardFormBubble]>.content>.total>.buttons a,
.infoBubble[name=rtaInfocardFormBubble]>.content>.total>.buttons>span {
    font-size: 16px;
    font-weight: 400;
    color: #51a351;
    line-height: 1.1em;
    margin-right: 43px
}

.infoBubble[name=rtaInfocardFormBubble]>footer {
    background-color: #fff;
    box-shadow: 0 4px 13px 4px rgba(0, 0, 0, .75)
}

.infoBubble[name=rtaInfocardFormBubble]>footer>div {
    margin: 0 60px 0 286px
}

.infocard.rtfinfocard {
    position: relative;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGOUY5RjkiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0U2RTZFNiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: linear-gradient(to bottom, #F9F9F9 0, #E6E6E6 100%)
}

.infocard.rtfinfocard:focus,
.infocard.rtfinfocard:hover {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlY2VjZWMiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: linear-gradient(to bottom, #ececec 0, #d9d9d9 100%)
}

.infocard.rtfinfocard:focus .delete,
.infocard.rtfinfocard:hover .delete {
    display: block;
    outline: 0
}

.infocard.rtfinfocard:focus .row3 .col2 .settings,
.infocard.rtfinfocard:hover .row3 .col2 .settings {
    opacity: 1
}

.infocard.rtfinfocard .delete {
    padding: 14px 14px 3px 3px;
    display: none;
    position: absolute;
    right: 0;
    top: 0
}

.infocard.rtfinfocard .delete:focus,
.infocard.rtfinfocard .delete:hover {
    display: block;
    outline: 0
}

.infocard.rtfinfocard .delete:focus svg,
.infocard.rtfinfocard .delete:hover svg {
    fill: #4a4a4a!important
}

.infocard.rtfinfocard h1 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1em;
    margin: 0;
    padding: 0
}

.infocard.rtfinfocard p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    margin: 0;
    padding: 0
}

.infocard.rtfinfocard .col1 {
    float: left;
    min-width: 114px;
    min-height: 1px;
    text-align: center
}

.infocard.rtfinfocard .col1 svg.clock {
    width: 58px;
    height: 58px;
    overflow: visible
}

.infocard.rtfinfocard .col2 {
    overflow: hidden
}

.infocard.rtfinfocard .row1 .col1 {
    padding-top: 19px
}

.infocard.rtfinfocard .row1 .col2 {
    padding: 18px 16px 0 0
}

.infocard.rtfinfocard .row1 .col2 .passengers {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.1em
}

.infocard.rtfinfocard .row2 {
    padding: 16px 16px 20px 0;
    overflow: hidden
}

.infocard.rtfinfocard .row2 p {
    color: #51a351
}

.infocard.rtfinfocard .row2 .connection {
    white-space: nowrap;
    display: flex;
    width: 100%;
    position: relative
}

.infocard.rtfinfocard .row2 .connection .time {
    color: #000
}

.infocard.rtfinfocard .row2 .connection .time.gradient {
    color: #508546
}

.infocard.rtfinfocard .row2 .connection.disabled .time {
    color: #868686
}

.infocard.rtfinfocard .row2 .connection.disabled .journey {
    border-bottom-color: #878787!important;
    color: #868686!important;
    background-color: transparent!important
}

.infocard.rtfinfocard .row2 .connection.disabled .journey svg {
    fill: #868686!important;
    vertical-align: bottom
}

.infocard.rtfinfocard .row2 .connection .anotherDay {
    color: #d40027
}

.infocard.rtfinfocard .row2 .connection .realtime {
    display: block;
    text-decoration: line-through;
    font-size: 12px;
    text-align: left
}

.infocard.rtfinfocard .row2 .connection .realtime.right {
    text-align: right
}

.infocard.rtfinfocard .row2 .connection .time {
    text-align: right;
    padding-top: 22px;
    font-size: 12px;
    color: #222;
    width: 104px;
    flex: 0 0 104px
}

.infocard.rtfinfocard .row2 .connection .time .delayed {
    color: #d63d00
}

.infocard.rtfinfocard .row2 .connection .time.arrival {
    width: 65px;
    flex: 0 0 65px;
    text-align: right
}

.infocard.rtfinfocard .row2 .connection .time .hour {
    font-weight: 700
}

.infocard.rtfinfocard .row2 .connection .time .changedTime {
    font-weight: 400;
    font-size: 12px;
    text-decoration: line-through;
    color: #6a6a6a;
    margin: 0
}

.infocard.rtfinfocard .row2 .connection .time .duration {
    font-weight: 400;
    color: #6a6a6a
}

.infocard.rtfinfocard .row2 .connection .time .date {
    font-size: 12px;
    text-align: center;
    color: #d40027
}

.infocard.rtfinfocard .row2 .connection .travel {
    font-size: 12px;
    color: #6a6a6a;
    padding: 19px 0 0 10px;
    flex: 1 1;
    overflow-x: hidden
}

.infocard.rtfinfocard .row2 .connection .travel>p.station {
    margin: 0;
    font-size: 12px;
    color: #000
}

.infocard.rtfinfocard .row2 .connection .sections {
    width: 100%;
    margin-bottom: 0
}

.infocard.rtfinfocard .row2 .connection .sections .train {
    height: 24px;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    margin-bottom: 2px
}

.infocard.rtfinfocard .row2 .col2 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    color: #6a6a6a
}

.infocard.rtfinfocard .row2 .col2 .iconWrapper {
    text-align: center
}

.infocard.rtfinfocard .row2 .col2 .arrowWrapper {
    height: 6px;
    margin-top: 10px;
    position: relative
}

.infocard.rtfinfocard .row2 .col2 .arrowWrapper .gradient {
    height: 1px;
    background: linear-gradient(to right, #2e8063, #3faa33, #58841f, #869611, #b4940d);
    margin-left: 17px
}

.infocard.rtfinfocard .row3 {
    padding-right: 16px
}

.infocard.rtfinfocard .row3 .col2 {
    border-top: 1px solid #afafaf;
    height: 48px;
    line-height: 48px;
    display: flex;
    align-items: center
}

.infocard.rtfinfocard .row3 .col2 a {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1em;
    margin-right: 16px;
    padding: 15px 10px;
    flex: 1 1;
    text-align: right
}

.infocard.rtfinfocard .row3 .col2 a.disabled {
    color: #878787;
    cursor: default
}

.infocard.rtfinfocard .row3 .col2 a:last-child {
    margin-right: -5px;
    padding-right: 5px
}

.infocard.rtfinfocard .row3 .col2 a.settings {
    opacity: 0;
    text-align: right
}

.infocard.rtfinfocard .row3 .col2 a.settings:focus,
.infocard.rtfinfocard .row3 .col2 a.settings:hover {
    display: block;
    opacity: 1;
    outline: 0
}

.infocard.rtfinfocard .row3 .col2 a.settings:focus svg,
.infocard.rtfinfocard .row3 .col2 a.settings:hover svg {
    fill: #4a4a4a!important
}

.infocard.rtfinfocard .row3 .col2 a:focus {
    text-decoration: underline;
    outline: 0
}

.infocard.rtfinfocard .connection {
    transition: .3s linear all;
    overflow: visible
}

.infocard.rtfinfocard .connection>.travel {
    overflow: hidden
}

.infocard.rtfinfocard .infocardAnimationIn {
    opacity: 1;
    height: 40px
}

.infocard.rtfinfocard .infocardAnimationOut {
    opacity: 0;
    height: 0
}

.infocard.rtfinfocard.next .connection.ng-leave {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    height: 40px
}

.infocard.rtfinfocard.next .connection.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
    opacity: 0;
    height: 0
}

.infocard.rtfinfocard.next .connection.ng-enter {
    opacity: 0;
    height: 0
}

.infocard.rtfinfocard.next .connection.ng-enter.ng-enter-active {
    opacity: 1;
    height: 40px
}

.infocard.rtfinfocard.next.last-item .connection.ng-leave {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.infocard.rtfinfocard.next.last-item .connection.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(0, -60px, 0);
    transform: translate3d(0, -60px, 0);
    opacity: 0;
    height: 0
}

.infocard.rtfinfocard.next.last-item .connection.ng-enter {
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
    opacity: 0;
    height: 0
}

.infocard.rtfinfocard.next.last-item .connection.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    height: 40px
}

.infocard.rtfinfocard.previous .connection.ng-enter {
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
    opacity: 0;
    height: 0
}

.infocard.rtfinfocard.previous .connection.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    height: 40px
}

.infocard.rtfinfocard.previous .connection.ng-leave {
    opacity: 1;
    height: 40px
}

.infocard.rtfinfocard.previous .connection.ng-leave.ng-leave-active {
    opacity: 0;
    height: 0
}

.infoBubble[name=rtfInfocardFormBubble] {
    margin: 0;
    background-color: #f0f0f0
}

@media (max-width:720px) {
    .infoBubble[name=rtfInfocardFormBubble].border>.contentWrapper {
        border: none
    }
}

.infoBubble[name=rtfInfocardFormBubble]>.content {
    padding: 0
}

.infoBubble[name=rtfInfocardFormBubble]>.content>header {
    padding: 23px 0 29px 0
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] {
    padding: 10px
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] select {
    font-size: 16px;
    font-weight: 400;
    color: #222
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] input {
    color: #222;
    background-color: #f0f0f0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    border: none;
    border-bottom: 1px solid #868686;
    margin-bottom: 10px
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] input::-webkit-input-placeholder {
    color: #6a6a6a!important
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] input:-moz-placeholder {
    color: #6a6a6a!important
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] input::-moz-placeholder {
    color: #6a6a6a!important
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] input:-ms-input-placeholder {
    color: #6a6a6a!important
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] input:focus {
    outline: 0
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] h1 {
    font-size: 18px;
    font-weight: 400;
    color: #222;
    margin-bottom: 20px
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] h1 span.coupon {
    font-size: 16px;
    font-weight: 400;
    color: #51a351;
    float: right;
    display: none
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] p {
    font-size: 12px;
    font-weight: 400;
    color: #222;
    padding: 15px
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] p b {
    font-weight: 700
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] hr {
    background-color: #afafaf
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm]>.emailWrapper {
    margin: 21px 0 32px 0
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm]>.emailWrapper input {
    width: 255px
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm]>.emailWrapper p {
    margin: 0
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm]>.emailWrapper p.subtext {
    color: #6a6a6a
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm]>.emailWrapper input.ng-invalid.ng-touched {
    background-color: #ee5f5b
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm]>.emailWrapper .error {
    font-size: 14px;
    font-weight: 400;
    color: #d63d00;
    fill: #d63d00
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] ul.settings {
    list-style-type: none;
    padding: 0;
    margin: 0 0 30px 0;
    border-bottom: 1px solid #afafaf;
    border-top: 1px solid #afafaf
}

@media (max-width:720px) {
    .infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] ul.settings {
        border-top: none
    }
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting {
    display: flex;
    overflow: hidden;
    border-bottom: 1px solid #afafaf
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting.selected {
    height: auto
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting:not(.ng-hide):last-child {
    border-bottom: none
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting.weekdays {
    display: inline-block;
    height: auto
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting>.col1 {
    padding: 18px 0 18px 0;
    flex: 0 0 55px;
    width: 55px;
    display: flex;
    align-items: flex-start
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting>.col2 {
    padding: 18px 0 18px 0;
    line-height: 1.1em;
    font-size: 16px;
    font-weight: 400;
    color: #222
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25em
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em;
    margin: 0;
    padding: 5px 0
}

.infoBubble[name=rtfInfocardFormBubble]>.content>form[name=infocardForm] ul.settings>li.setting p.subtext {
    font-size: 12px;
    color: #6a6a6a
}

.infoBubble[name=rtfInfocardFormBubble]>.content>.total {
    background-color: #fff
}

.infoBubble[name=rtfInfocardFormBubble]>.content>.total>.value {
    text-align: right;
    display: flex;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25em
}

.infoBubble[name=rtfInfocardFormBubble]>.content>.total>.value>.left {
    color: #222;
    flex: 1 0 auto;
    padding: 16px 16px 10px 16px
}

.infoBubble[name=rtfInfocardFormBubble]>.content>.total>.value>.left a {
    text-decoration: underline;
    font-size: 14px;
    font-weight: 400;
    color: #6a6a6a;
    line-height: 1.1em
}

.infoBubble[name=rtfInfocardFormBubble]>.content>.total>.value>.perforation {
    width: 4px;
    background: url(https://tickets-deva.oebb.at/static/images/background/paymentPerforation.svg)
}

.infoBubble[name=rtfInfocardFormBubble]>.content>.total>.value>.right {
    padding: 16px 16px 10px 0;
    box-sizing: content-box;
    flex: 0 1 127px
}

.infoBubble[name=rtfInfocardFormBubble]>.content>.total>.buttons {
    padding: 18px 16px 18px 20px;
    background-color: #f0f0f0;
    background-clip: padding-box;
    border-top: 1px solid #afafaf
}

.infoBubble[name=rtfInfocardFormBubble]>.content>.total>.buttons a,
.infoBubble[name=rtfInfocardFormBubble]>.content>.total>.buttons>span {
    font-size: 16px;
    font-weight: 400;
    color: #51a351;
    line-height: 1.1em;
    margin-right: 43px
}

.infoBubble[name=rtfInfocardFormBubble]>footer {
    background-color: #fff;
    box-shadow: 0 4px 13px 4px rgba(0, 0, 0, .75)
}

.infoBubble[name=rtfInfocardFormBubble]>footer>div {
    margin: 0 60px 0 286px
}

.arrowWrapper {
    height: 6px;
    margin-top: 10px;
    position: relative
}

.arrowWrapper .gradientBefore {
    height: 1px;
    background: linear-gradient(to right, #2e8063, #3faa33, #58841f, #869611, #b4940d)
}

.arrowWrapper .arrow {
    border-bottom: 1px solid #2e8063;
    border-right: 1px solid #2e8063;
    width: 11px;
    height: 11px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -5px;
    position: absolute
}

.arrowWrapper .gradientAfter {
    top: 0;
    position: absolute;
    height: 1px;
    background: linear-gradient(to right, #2e8063, #3faa33, #58841f, #869611, #b4940d)
}

.orderBlockItem.insuranceItem .right .insuranceConfirmation .acquisition h2 {
    margin-top: 0
}

.orderBlockItem.insuranceItem .right .insuranceConfirmation .acquisition a {
    color: #51a351
}

.scrollOverOverflowYAuto {
    overflow-y: auto!important
}

.scrollOverOverflowYHidden {
    overflow-y: hidden!important
}

.section:last-child .dest {
    background-color: #fff
}

.section:last-child .dest .inner {
    background-color: #404040;
    color: #fff
}

.section .dest .inner {
    background-color: #221d47;
    color: #fff;
    padding-left: 268px
}

.section .dest .inner .delayed-color {
    color: #d63d00
}

@media (max-width:869px) {
    .section .dest .inner {
        padding-left: 131px
    }
}

.section .dest .inner p {
    font-size: 16px;
    padding-right: 20px
}

@media (max-width:480px) {
    .section .dest .inner p {
        font-size: 12px;
        padding-right: 12px
    }
}

.section .dest .inner h3 {
    margin: 8px 20px 18px 0;
    font-size: 24px
}

@media (max-width:480px) {
    .section .dest .inner h3 {
        font-size: 20px
    }
}

.section .inner {
    background-color: #f0f0f0;
    margin: 0 0 0 286px;
    max-width: 678px;
    padding: 25px 0 25px 0
}

@media (max-width:1024px) {
    .section .inner {
        margin: 0 14px 0 286px
    }
}

@media (max-width:860px) {
    .section .inner {
        margin: 0 14px 0 174px
    }
}

@media (max-width:720px) {
    .section .inner {
        margin: 0
    }
    .section .inner .col1 {
        flex: 1 0 110px
    }
    .section .inner .col3 {
        flex: 0 1 100%
    }
}

@media (max-width:479px) {
    .section .inner .col1 {
        flex: 0 0 80px
    }
}

.section .inner hr {
    margin: 15px 0 15px 0;
    background-color: #fff
}

.section .inner>.spacer {
    max-height: 25px
}

.section .inner>.type hr {
    background-color: #d7d7d7;
    color: #d7d7d7;
    border: none;
    height: 1px
}

.section .inner>.type .icon {
    float: left;
    margin-left: 12px
}

.section .inner>.type .icon svg {
    width: 16px!important
}

.section .inner>.type .details {
    font-size: 12px;
    font-weight: 400;
    color: #6a6a6a;
    line-height: 1.1em;
    margin: 15px 29px 0 38px
}

.section .inner>.type .detailsArrow {
    float: right;
    margin: 17px 28px 0 5px
}

@media (max-width:869px) {
    .section .inner>.type .detailsArrow {
        margin-right: 12px
    }
}

.section .inner>.type .detailsArrow svg {
    margin: 0!important
}

.section .inner>.type .detailsArrow .arrow {
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

.section .inner>.type .detailsArrow .arrow.expand {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.section .inner>.type .col3 {
    padding: 13px 0 10px 0
}

.section .inner>.type .col3 p {
    font-size: 16px
}

.section .inner>.type .col3 svg {
    margin-right: 12px
}

.section .inner>.type .col3 .toggle-icon svg {
    margin: 0
}

.section .inner>.type .col3 .toggle-icon .arrow {
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

.section .inner>.type .col3 .toggle-icon .arrow.expand {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.section .inner>.type .col3 .purchased-extra {
    z-index: 1;
    position: relative
}

.section .inner>.type .col3 .purchased-extra .content-section {
    padding: 15px;
    margin: 24px 0 10px;
    background-color: #f0f0f0;
    color: #6a6a6a
}

.section .inner>.type .col3 .purchased-extra .content-section h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0
}

.section .inner>.type .col3 .purchased-extra .content-section .details {
    padding: 0;
    margin: 10px 0;
    list-style: none
}

.section .inner>.type .col3 .purchased-extra .content-section .details li {
    padding: 0
}

.section .inner>.type .col3 .purchased-extra .content-section .details p.item {
    font-size: 12px;
    color: #6a6a6a;
    padding-bottom: 5px
}

.section .inner>.type .col3 .purchased-extra:after,
.section .inner>.type .col3 .purchased-extra:before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 3px;
    right: 20px;
    height: 50%;
    background-color: #929292;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5)
}

.section .inner>.type .col3 .purchased-extra:before {
    top: 3px;
    border-top-right-radius: 50%
}

.section .inner>.type .col3 .purchased-extra:after {
    bottom: 3px;
    border-bottom-right-radius: 50%
}

.section .inner>.type.small .col3 {
    padding: 0
}

.section .inner .passlist .journeyPreviewStation p {
    color: #6a6a6a;
    font-weight: 400;
    font-size: 14px
}

@media (max-width:480px) {
    .section .inner .passlist .journeyPreviewStation p {
        font-family: "Frutiger Next"!important;
        font-size: 12px!important
    }
}

.section .inner .passlist .journeyPreviewStation b {
    font-weight: 400
}

.section .inner .passlist .journeyPreviewStation .col1,
.section .inner .passlist .journeyPreviewStation .col3 {
    margin: 0 0 30px 0
}

.section .inner .passlist .journeyPreviewStation:first-child .col1,
.section .inner .passlist .journeyPreviewStation:first-child .col3 {
    margin-top: 30px
}

.section .inner .passlist .journeyPreviewStation:first-child .col2 .connStripe>.journeyConnectionMiddle {
    top: 35px
}

.section .nighttrain-wrapper {
    z-index: 1;
    margin-left: 21px
}

@media (max-width:869px) {
    .section .nighttrain-wrapper {
        margin-left: 0
    }
}

.section .nighttrain-wrapper>.header {
    height: 170px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative
}

.section .nighttrain-wrapper>.header a.link-to-details {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, .6);
    padding: 5px 15px
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs header {
    -webkit-transform: none;
    transform: none
}

@media (max-width:869px) {
    .section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs header {
        font-size: 14px
    }
    .section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs header button span {
        padding: 0 15px
    }
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs header button {
    box-sizing: content-box
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs header button.warning {
    color: #d40027
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs header button.selected {
    border-width: 4px 0 0 0;
    border-style: solid;
    background: #fff;
    color: #51a351;
    box-shadow: 0 0 15px #afafaf;
    z-index: 1
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs header button.selected.warning {
    border-color: #d40027;
    color: #d40027
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs header button.selected span {
    line-height: 18px
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs header button.selected.warning {
    border-color: #d40027
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs header button span {
    border: none;
    height: auto;
    min-width: 25px
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab {
    overflow: hidden;
    padding-top: 10px;
    margin-top: -10px
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup {
    padding: 15px 0
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney {
    background: #fff;
    box-shadow: 0 0 15px #afafaf
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney>.row {
    padding: 5px 15px
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney>.row .col1,
.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney>.row .col2 {
    background: 0 0;
    border: none;
    padding: 7px 0
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney>.row .col1 .notes,
.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney>.row .col2 .notes {
    margin-bottom: 10px
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney>.row .col1 .preferenceTitle,
.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney>.row .col2 .preferenceTitle {
    padding: 5px 0;
    font-weight: 700
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney>.row .col1 .preferences,
.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney>.row .col2 .preferences {
    margin: 15px 0 15px 40px
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney>.row .col3 p {
    color: #000;
    font-size: 14px
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .accomodation-type li .col1 .radioWrapper .checkbox[data-selected=true] svg {
    fill: #51a351!important
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .accomodation-type li .col1 .radioWrapper .checkbox[data-selected=false] svg {
    fill: transparent!important
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .accomodation-type li .col2 .note span {
    display: block;
    margin-top: 5px;
    color: #ed6f00
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .editable-pref.required {
    background: #eeccd2
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .editable-pref.required .preferenceTitle {
    color: #e2002a
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .editable-pref .preferences li {
    padding: 0;
    align-items: center
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .editable-pref .preferences li .colLeft,
.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .editable-pref .preferences li .colRight {
    padding: 5px 0;
    border: none
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .editable-pref .preferences li .colLeft .radioWrapper .checkbox[data-selected=true] svg,
.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .editable-pref .preferences li .colRight .radioWrapper .checkbox[data-selected=true] svg {
    fill: #51a351!important
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .editable-pref .preferences li .colLeft .radioWrapper .checkbox[data-selected=false] svg,
.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .editable-pref .preferences li .colRight .radioWrapper .checkbox[data-selected=false] svg {
    fill: transparent!important
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .editable-pref .preferences li .colLeft {
    flex: 0 0 42px;
    width: 42px;
    max-width: 42px
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .tab .nighttrainGroup.nighttrainGroupJourney .editable-pref .preferences li .colLeft .checkbox {
    padding: 3px 0 0 10px
}

.section .nighttrain-wrapper .nighttrain-accommodation-journey-tabs .borderline {
    height: 0
}

.journeyPreviewStation {
    display: flex
}

.journeyPreviewStation.disabled .col2 .connStripe {
    border-left: 4px solid #d7d7d7!important
}

.journeyPreviewStation.disabled .col2 svg {
    fill: #d7d7d7!important
}

.journeyPreviewStation.walk .col2 .connStripe {
    background-color: #fff!important
}

.journeyPreviewStation.expanded>.col1 {
    transition: max-width .23s ease-in-out .23s, min-width .23s ease-in-out .23s;
    flex: 0 0 0px;
    width: 0;
    max-width: 0;
    min-width: 0
}

.journeyPreviewStation.expanded>.col2 {
    transition: max-width .23s ease-in-out .1s, min-width .23s ease-in-out .1s, opacity .1s ease-in;
    flex: 0 0 0px;
    width: 0;
    max-width: 0;
    min-width: 0;
    opacity: 0
}

.journeyPreviewStation p {
    font-size: 18px;
    font-weight: 400;
    color: #222;
    line-height: 1.1em
}

@media (max-width:480px) {
    .journeyPreviewStation p {
        font-family: "Frutiger Next"!important;
        font-size: 14px!important
    }
}

.journeyPreviewStation .changedTime {
    font-weight: 400;
    text-decoration: line-through;
    color: #6a6a6a;
    margin: 0
}

.journeyPreviewStation .toFromDisplay.delayed * {
    color: #d63d00
}

.journeyPreviewStation.disabledDelayedRed .toFromDisplay.delayed * {
    color: #6a6a6a
}

.journeyPreviewStation>.col1 {
    transition: max-width .23s ease-in-out, min-width .23s ease-in-out;
    flex: 0 0 212px;
    text-align: right
}

.journeyPreviewStation>.col1 .date {
    font-size: 12px;
    font-weight: 400
}

.journeyPreviewStation>.col2 {
    transition: max-width .23s ease-in-out, min-width .23s ease-in-out, opacity .23s ease-in .23s;
    flex: 0 0 52px;
    opacity: 1;
    width: 52px;
    max-width: 52px;
    min-width: 52px;
    display: flex;
    justify-content: center;
    align-items: flex-start
}

.journeyPreviewStation>.col2 svg {
    vertical-align: bottom
}

.journeyPreviewStation>.col2 .connStripe {
    background-color: #fff;
    width: 15px;
    align-self: stretch;
    position: relative
}

.journeyPreviewStation>.col2 .connStripe.first {
    margin-top: 6px
}

.journeyPreviewStation>.col2 .connStripe.first svg {
    position: relative;
    left: -9px;
    top: -6px
}

.journeyPreviewStation>.col2 .connStripe.last {
    margin-bottom: 6px
}

.journeyPreviewStation>.col2 .connStripe.last svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    position: absolute;
    left: -9px;
    bottom: -6px
}

.journeyPreviewStation>.col2 .connStripe .journeyConnectionMiddle {
    width: 15px;
    height: 2px;
    background-color: #d7d7d7;
    display: inline-block;
    top: 6px;
    position: absolute
}

.journeyPreviewStation.last .col3>.platform {
    height: 39px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

@media (max-width:480px) {
    .journeyPreviewStation.last .col3>.platform {
        font-size: 14px
    }
}

.journeyPreviewStation.last .col1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.journeyPreviewStation .col3 {
    flex: 1;
    min-width: 0
}

.journeyPreviewStation .col3 .toggle-area {
    border-bottom: 1px solid #d7d7d7;
    padding: 15px 0
}

.journeyPreviewStation .col3 .toggle-area.passlist {
    display: flex;
    font-size: 16px
}

.journeyPreviewStation .col3 .toggle-area.passlist .text {
    flex: 1;
    margin-left: 37px
}

.journeyPreviewStation .col3 .toggle-area.passlist .toggle-icon {
    margin: 0 28px 0 5px
}

@media (max-width:869px) {
    .journeyPreviewStation .col3 .toggle-area.passlist .toggle-icon {
        margin-right: 12px
    }
}

@media (max-width:480px) {
    .journeyPreviewStation .col3 .toggle-area.passlist {
        font-family: "Frutiger Next"!important;
        font-size: 14px!important
    }
}

.journeyPreviewStation .col3 .toggle-area.passlist:focus p,
.journeyPreviewStation .col3 .toggle-area.passlist:focus span,
.journeyPreviewStation .col3 .toggle-area:focus p,
.journeyPreviewStation .col3 .toggle-area:focus span {
    text-decoration: underline
}

.journeyPreviewStation .col3 .toggle-area.passlist:hover p,
.journeyPreviewStation .col3 .toggle-area.passlist:hover span,
.journeyPreviewStation .col3 .toggle-area:hover p,
.journeyPreviewStation .col3 .toggle-area:hover span {
    color: #383838
}

.journeyPreviewStation .col3 .platform {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.1em
}

.journeyPreviewStation .col3 .sub-platform {
    font-size: 16px
}

@media (max-width:480px) {
    .journeyPreviewStation .col3 .sub-platform {
        font-family: "Frutiger Next"!important;
        font-size: 14px!important
    }
}

.section .inner.predeparture {
    padding: 0;
    margin: 0;
    background-color: #f0f0f0
}

.travelAssistanceBubble,
.travelAssistanceTransitBubble {
    transition: .5s ease-in-out -webkit-transform, .5s ease-in-out -moz-transform, .5s ease-in-out -o-transform, .5s ease-in-out transform
}

.travelAssistanceBubble.ng-hide-remove,
.travelAssistanceTransitBubble.ng-hide-remove {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
}

.travelAssistanceBubble.ng-hide-add,
.travelAssistanceTransitBubble.ng-hide-add {
    -webkit-transform: scaleY(0);
    transform: scaleY(0)
}

.travelAssistanceBubble.ng-hide-add.ng-hide-add-active,
.travelAssistanceTransitBubble.ng-hide-add.ng-hide-add-active {
    display: none
}

.travelAssistanceBubble.first .description:after,
.travelAssistanceBubble.first .description:before {
    left: -37px
}

.travelAssistanceBubble .col1 {
    display: flex
}

.travelAssistanceBubble .col2 {
    z-index: 2;
    position: relative
}

.travelAssistanceBubble .col2:before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 25px;
    background-color: #fff
}

.travelAssistanceBubble .col1,
.travelAssistanceBubble .col3 {
    z-index: 1;
    position: relative
}

.travelAssistanceBubble .arrow-down {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent
}

.travelAssistanceBubble .arrow-down {
    border-top: 15px solid #fff;
    bottom: 10px
}

.travelAssistanceBubble .description,
.travelAssistanceBubble .time {
    min-height: 125px;
    margin: 0 0 25px 0
}

.travelAssistanceBubble .time {
    flex: 1;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjEwMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyNTUsIDI1NSwgMjU1KSIgc3RvcC1vcGFjaXR5PSIwIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: linear-gradient(to left, #fff 80%, rgba(255, 255, 255, 0) 100%);
    position: relative
}

.travelAssistanceBubble .time .clock-wrapper {
    padding: 28px 6px 0 0
}

.travelAssistanceBubble .time .clock-wrapper shared-clock {
    width: 82px;
    height: 82px;
    overflow: visible
}

.travelAssistanceBubble .description {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9InJnYigyNTUsIDI1NSwgMjU1KSIgc3RvcC1vcGFjaXR5PSIwIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: linear-gradient(to right, #fff 80%, rgba(255, 255, 255, 0) 100%);
    position: relative
}

.travelAssistanceBubble .description .assistance-content {
    padding: 20px 120px 0 0
}

.travelAssistanceBubble .description .assistance-content.realtime {
    color: #51a351
}

.travelAssistanceBubble .description .assistance-content.delayed {
    color: #d63d00
}

.travelAssistanceBubble .description .assistance-content .greyTxt {
    color: #6a6a6a
}

.travelAssistanceBubble .description .assistance-content h2 {
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    padding-bottom: 23px
}

.travelAssistanceBubble .description .assistance-content p {
    font-size: 12px;
    padding-bottom: 25px;
    color: #779100
}

.travelAssistanceBubble .description:after,
.travelAssistanceBubble .description:before,
.travelAssistanceBubble .time:after,
.travelAssistanceBubble .time:before {
    position: absolute;
    z-index: -1;
    content: '';
    height: 22px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3)
}

.travelAssistanceBubble .time:after,
.travelAssistanceBubble .time:before {
    left: 50px;
    right: -15px
}

.travelAssistanceBubble .time:before {
    border-top-left-radius: 50%
}

.travelAssistanceBubble .time:after {
    border-bottom-left-radius: 50%
}

.travelAssistanceBubble .description:after,
.travelAssistanceBubble .description:before {
    left: -15px;
    right: 150px
}

.travelAssistanceBubble .description:before,
.travelAssistanceBubble .time:before {
    top: 0
}

.travelAssistanceBubble .description:after,
.travelAssistanceBubble .time:after {
    bottom: 0
}

.travelAssistanceBubble .description:before {
    border-top-right-radius: 50%
}

.travelAssistanceBubble .description:after {
    border-bottom-right-radius: 50%
}

.travelAssistanceTransitBubble {
    padding: 0!important;
    position: relative;
    display: flex
}

.travelAssistanceTransitBubble .time {
    flex: 0 1 230px
}

@media (max-width:869px) {
    .travelAssistanceTransitBubble .time {
        flex: 0 1 127px
    }
}

.travelAssistanceTransitBubble .time .clock-holder {
    margin: 28px 25px;
    width: 88px;
    height: 88px
}

.travelAssistanceTransitBubble .time .clock-holder svg {
    overflow: visible
}

.travelAssistanceTransitBubble .description {
    flex: 1;
    padding: 20px 0 25px 32px
}

.travelAssistanceTransitBubble .description .subheading {
    padding: 0 15px 8px 0
}

.travelAssistanceTransitBubble .description .welcome {
    display: none;
    font-weight: 400
}

.travelAssistanceTransitBubble .description h2 {
    margin-top: 0!important;
    margin-bottom: 12px;
    border-bottom: 1px solid #fff;
    padding-bottom: 9px;
    font-weight: 400;
    font-size: 20px
}

.travelAssistanceTransitBubble .description h3 {
    margin: 0 35px 15px 0!important;
    font-weight: 400
}

.travelAssistanceTransitBubble .description .note {
    border-top: 1px solid #fff;
    padding: 15px 0
}

.travelAssistanceTransitBubble .description .note h4 {
    margin: 0 0 15px 0;
    font-size: 20px;
    font-weight: 400
}

.travelAssistanceTransitBubble .description .note p {
    font-size: 12px
}

.travelAssistanceTransitBubble .description .earlier-later {
    border-top: 1px solid #fff;
    padding: 15px 0 5px 0
}

.travelAssistanceTransitBubble .arrow-down {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 15px solid #221d47;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    bottom: -15px;
    left: 150px
}

@media (max-width:869px) {
    .travelAssistanceTransitBubble .arrow-down {
        left: 50px
    }
}

.section:last-child .travelAssistanceTransitBubble .welcome {
    display: block
}

.section:last-child .travelAssistanceTransitBubble .arrow-down {
    display: none
}

.section:last-child .travelAssistanceTransitBubble .clock-holder {
    display: none
}

.modalBackground {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    transition: opacity 2.25s ease-out
}

.modalBackground>.loadingSpinnerWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 1px solid #afafaf
}

.modalBackground.white {
    background-color: rgba(255, 255, 255, .9)
}

.modalBackground.black {
    background-color: rgba(34, 34, 34, .4)
}

.accommodation {
    border-top: 1px solid #d7d7d7;
    background-color: #fff
}

.accommodation>.wrapper {
    overflow: hidden;
    position: relative
}

.accommodation .header {
    display: flex;
    list-style: none;
    position: relative;
    text-align: left;
    padding: 0;
    margin: 0;
    overflow-x: scroll
}

.accommodation .header>li {
    flex: 1 0 auto;
    position: relative;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #d7d7d7;
    border-left: 1px solid #d7d7d7
}

.accommodation .header>li>.link {
    display: block;
    padding: 12px 30px 12px 42px
}

.accommodation .header>li.active {
    border-bottom: 4px solid #51a351
}

.accommodation .header>li.active>.link {
    padding-bottom: 15px;
    padding-left: 42px
}

.accommodation .header li:first-child {
    border-left: 0 solid #d7d7d7
}

.accommodation button.scrollLeft {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 25px;
    background: #fff;
    border-bottom: 1px solid #d7d7d7;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5)
}

.accommodation button.scrollLeft svg {
    position: relative;
    right: -5px
}

.accommodation button.scrollRight {
    display: none;
    top: 0;
    position: absolute;
    right: 0;
    height: 100%;
    width: 25px;
    background: #fff;
    border-bottom: 1px solid #d7d7d7;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5)
}

.accommodation button.scrollRight svg {
    position: relative;
    right: -5px
}

.citytickets>.wrapper>.more {
    padding: 12px 32px;
    text-align: right;
    background-color: #f0f0f0
}

.citytickets>.wrapper>.cityticketItem .arrow svg {
    fill: #222
}

.citytickets>.wrapper>.cityticketItem>.perforation {
    width: 4px;
    background-image: url(https://tickets-deva.oebb.at/static/images/background/connectionPerforation.svg)
}

.citytickets>.wrapper>.cityticketItem>.col1 {
    background-color: #f0f0f0
}

.citytickets>.wrapper>.cityticketItem>.col2 {
    background-color: #f0f0f0
}

.citytickets>.wrapper>.cityticketItem>.col3 {
    background-color: #fff
}

.citytickets>.wrapper>.cityticketItem:first-child {
    border-top: 1px solid #d7d7d7
}

.citytickets>.wrapper>.cityticketItem.focused>.col1,
.citytickets>.wrapper>.cityticketItem.focused>.col2,
.citytickets>.wrapper>.cityticketItem:hover>.col1,
.citytickets>.wrapper>.cityticketItem:hover>.col2 {
    background-color: #dedede
}

.citytickets>.wrapper>.cityticketItem.focused>.col3,
.citytickets>.wrapper>.cityticketItem:hover>.col3 {
    background-color: #ededed
}

.citytickets>.wrapper>.cityticketItem.focused>.perforation,
.citytickets>.wrapper>.cityticketItem:hover>.perforation {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/connectionPerforationHoverFocused.svg)
}

.journeyCitytickets {
    background-color: #404040;
    max-width: 678px;
    margin: 0 0 0 286px
}

@media (max-width:1024px) {
    .journeyCitytickets {
        margin: 0 14px 0 286px
    }
}

@media (max-width:860px) {
    .journeyCitytickets {
        margin: 0 14px 0 174px
    }
}

@media (max-width:720px) {
    .journeyCitytickets {
        margin: 0
    }
    .journeyCitytickets .col1 {
        flex: 1 0 110px
    }
    .journeyCitytickets .col3 {
        flex: 0 1 100%
    }
}

@media (max-width:479px) {
    .journeyCitytickets .col1 {
        flex: 0 0 80px
    }
}

.journeyCitytickets .cityticketItem {
    color: #fff;
    border: 0;
    border-bottom: 1px solid #fff
}

.journeyCitytickets .cityticketItem .validity .arrow {
    display: none
}

.journeyCitytickets .cityticketItem.isSelected {
    margin-left: 40px
}

.journeyCitytickets .cityticketItem.isSelected>.perforation {
    width: 4px;
    background-image: url(https://tickets-deva.oebb.at/static/images/background/touristicExtrasPerforation.svg);
    background-repeat: no-repeat;
    background-position: top
}

.journeyCitytickets .cityticketItem:not(.isSelected) {
    margin-left: 268px
}

.journeyCitytickets .cityticketItem:not(.isSelected) .col2 {
    padding-right: 10px
}

.journeyCitytickets .cityticketItem:not(.isSelected) .col3 {
    display: none
}

@media (max-width:720px) {
    .journeyCitytickets .cityticketItem.isSelected {
        margin-left: 34px
    }
    .journeyCitytickets .cityticketItem:not(.isSelected) {
        margin-left: 34px
    }
}

.journeyCitytickets .more {
    margin: 5px 20px 0 0;
    padding-bottom: 20px;
    text-align: right;
    color: #fff
}

.cityticketItem {
    color: #222;
    border-bottom: 1px solid #d7d7d7
}

.cityticketItem.disabled>.col1 .checkbox {
    cursor: default
}

.cityticketItem.disabled>.col1 .checkbox svg {
    fill: #878787
}

.epatestbooking a {
    color: #51a351!important
}

.epatestbooking a[disabled] {
    color: #afafaf!important
}

.epatestbooking a[disabled]>label {
    color: #afafaf!important
}

.fancy-reservation-section {
    margin: 15px 0
}

.fancy-reservation-section .info-message {
    margin-top: 15px!important;
    font-size: 12px!important
}

.fancy-reservation-section .particular-place-section {
    height: 40px;
    display: flex;
    align-content: space-between;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
    padding: 0 10px
}

.fancy-reservation-section .particular-place-section .passenger-data {
    font-size: 12px!important;
    width: 150px;
    min-width: 150px
}

.fancy-reservation-section .particular-place-section .wagon-seat-section {
    display: flex;
    align-items: flex-end
}

.fancy-reservation-section .particular-place-section .wagon-seat-section .inputGroup input {
    width: 115px
}

.fancy-reservation-section .particular-place-section .wagon-seat-section .inputGroup select {
    margin-left: 15px
}

.buttonSubtitle {
    color: #6a6a6a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

ts-reference-place-input>form input {
    width: 60px
}

ts-reference-place-input>form input:first-child {
    margin-right: 22px
}

ul.accomodation-type {
    list-style: none;
    padding: 0;
    margin: 0
}

ul.accomodation-type .disabled.link {
    color: #6a6a6a
}

ul.accomodation-type .surcharge {
    color: #878787
}

ul.accomodation-type .link {
    display: inline-block;
    padding: 0;
    border: none
}

ul.accomodation-type>li {
    padding: 0
}

ul.accomodation-type>li .radioWrapper .checkbox svg {
    fill: #f0f0f0!important
}

ul.accomodation-type>li .radioWrapper .checkbox[data-selected=true] svg {
    fill: #f0f0f0!important
}

ul.accomodation-type>li .radioWrapper .checkbox[data-selected=true] svg polyline {
    stroke: #51a351!important
}

ul.accomodation-type>li .col2 {
    border-top: 1px solid #d7d7d7
}

.nighttrainGroup {
    margin-left: 0;
    z-index: 1;
    border-bottom: 1px solid #d7d7d7
}

@media (max-width:869px) {
    .nighttrainGroup {
        margin-left: 0
    }
}

.nighttrainGroup.nighttrainGroupJourney {
    background-color: #f0f0f0
}

.nighttrainGroup.disabled>.row>.col1 .checkbox {
    cursor: default
}

.nighttrainGroup.disabled>.row>.col1 .checkbox svg {
    fill: #878787
}

.nighttrainGroup .link {
    display: block;
    padding: 15px 0 0 0;
    margin: 5px 0 0 0;
    border-top: 1px solid #d7d7d7;
    font-size: 12px
}

.nighttrainGroup .link.green {
    color: #51a351
}

.nighttrainGroup .link.red {
    color: #e2002a
}

@media (min-width: 870px) {
    .nighttrainGroup .link {
        font-size: 14px
    }
}

.nighttrainGroup .strikethrough {
    text-decoration: line-through;
    font-size: 16px;
    color: #6a6a6a;
    padding-top: 0!important
}

.nighttrainGroup h2,
.nighttrainGroup h3,
.nighttrainGroup p {
    margin: 0;
    padding: 0
}

.nighttrainGroup h2,
.nighttrainGroup h3 {
    font-size: 14px;
    color: #222;
    margin-bottom: 10px;
    font-weight: 400
}

@media (min-width: 870px) {
    .nighttrainGroup h2,
    .nighttrainGroup h3 {
        font-size: 18px;
        line-height: 20px
    }
}

.nighttrainGroup .collapsible {
    display: block;
    position: relative;
    max-height: 2000px;
    overflow: hidden;
    transition: max-height ease-in-out .2s
}

.nighttrainGroup .collapsible.collapsed {
    max-height: 0
}

.nighttrainGroup .row {
    position: relative
}

.nighttrainGroup .row.bottom {
    background-color: #fff
}

.nighttrainGroup .row.flex {
    display: flex
}

.nighttrainGroup .row.editable-cat-pref {
    margin-left: 43px
}

.nighttrainGroup .row.editable-cat-pref>.col2 {
    padding: 0
}

.nighttrainGroup .row.editable-cat>.col2 {
    padding: 0
}

.nighttrainGroup .row.editable-pref>.col2 {
    padding: 0
}

.nighttrainGroup .row.editable-pref .preferences .preferenceList>li {
    padding: 6px 0
}

.nighttrainGroup .row.editable-pref .preferences .preferenceList>li .colLeft {
    padding-left: 14px;
    flex: 0 0 38px
}

.nighttrainGroup .row>.col1 {
    flex: 0 0 56px;
    width: 56px;
    max-width: 56px;
    padding: 15px 5px;
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: #f0f0f0;
    background-clip: padding-box
}

.nighttrainGroup .row>.col2 {
    flex: 1;
    flex-direction: column;
    background-color: #f0f0f0;
    padding: 15px 16px 15px 0;
    background-clip: padding-box
}

.nighttrainGroup .row>.col2 p {
    font-size: 12px;
    font-weight: 400;
    color: #222;
    line-height: 1.25em
}

@media (min-width: 870px) {
    .nighttrainGroup .row>.col2 p {
        font-size: 14px
    }
}

.nighttrainGroup .row>.col2 .price {
    color: #878787;
    margin-top: 6px
}

.nighttrainGroup .row>.col2>.accommodationText {
    margin: 12px 30px 0 0;
    padding-top: 12px;
    display: flex
}

.nighttrainGroup .row>.col2>.accommodationText .reservationDetails {
    flex: 1
}

.nighttrainGroup .row>.col2>.accommodationText .toggle-icon {
    flex: 0 0 25px
}

.nighttrainGroup .row>.perforation {
    width: 4px;
    flex: 0 0 4px;
    background-image: url(https://tickets-deva.oebb.at/static/images/background/sectionExtraPerforation.svg)
}

.nighttrainGroup .row>.col3 {
    flex: 0 0 93px;
    width: 93px;
    max-width: 93px;
    background-color: #fff;
    text-align: right;
    padding: 15px 16px 15px 0
}

@media (min-width:380px) {
    .nighttrainGroup .row>.col3 p {
        font-size: 12px;
        color: #508546
    }
    .nighttrainGroup .row>.col3 span {
        font-size: 12px
    }
    .nighttrainGroup .row>.col3 .error {
        color: #d40027
    }
    .nighttrainGroup .row>.col3 .noCachedOffer {
        font-size: 12px;
        color: #d40027
    }
}

@media (min-width: 870px) {
    .nighttrainGroup .row>.col3 {
        flex: 0 0 143px;
        width: 143px;
        max-width: 143px;
        padding: 15px 16px 15px 0
    }
    .nighttrainGroup .row>.col3 p {
        font-size: 12px;
        color: #508546
    }
    .nighttrainGroup .row>.col3 span {
        font-size: 12px
    }
    .nighttrainGroup .row>.col3 .error {
        color: #d40027
    }
    .nighttrainGroup .row>.col3 .noCachedOffer {
        font-size: 12px;
        color: #d40027
    }
}

.nighttrainGroup .row>.col3 h2 {
    margin-bottom: 6px
}

body[state="root.ticket.offer"] .nighttrainGroup.focused .col1,
body[state="root.ticket.offer"] .nighttrainGroup.focused .col2,
body[state="root.ticket.offer"] .nighttrainGroup:hover .col1,
body[state="root.ticket.offer"] .nighttrainGroup:hover .col2 {
    background-color: #dedede
}

body[state="root.ticket.offer"] .nighttrainGroup.focused .col3,
body[state="root.ticket.offer"] .nighttrainGroup:hover .col3 {
    background-color: #ededed
}

body[state="root.ticket.offer"] .nighttrainGroup.focused .perforation,
body[state="root.ticket.offer"] .nighttrainGroup:hover .perforation {
    background-image: url(https://tickets-deva.oebb.at/static/images/background/connectionPerforationHoverFocused.svg)
}

.testbooking-button {
    text-transform: uppercase
}

.preferences {
    border-bottom: 1px solid #d7d7d7
}

.preferences:last-child {
    border-bottom: none
}

.preferences .preferenceList {
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0
}

.preferences .preferenceList>li {
    display: flex;
    padding: 6px;
    margin: 0
}

.preferences .preferenceList>li.disabled {
    color: #afafaf
}

.preferences .preferenceList>li.disabled svg {
    color: #afafaf;
    fill: #afafaf
}

.preferences .preferenceList>li>.colLeft {
    flex: 0 0 30px;
    width: 30px;
    max-width: 30px;
    padding: 5px 0 5px 5px;
    background-clip: padding-box
}

.preferences .preferenceList>li>.colLeft .checkbox {
    padding-top: 0
}

.preferences .preferenceList>li>.colLeft .radioWrapper .checkbox svg {
    fill: #fff!important
}

.preferences .preferenceList>li>.colLeft .radioWrapper .checkbox[data-selected=true] svg {
    fill: #fff!important
}

.preferences .preferenceList>li>.colLeft .radioWrapper .checkbox[data-selected=true] svg polyline {
    stroke: #51a351!important
}

.preferences .preferenceList>li>.colRight {
    flex: 1 1 100%;
    text-align: left;
    padding: 5px;
    background-clip: padding-box;
    border-bottom: 1px solid #d7d7d7
}

.preferences .preferenceList>li:last-child>.colRight {
    border-bottom: 1px solid transparent
}

.reductions {
    margin-top: 10px
}

.reductions .reduction {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.reductions>span {
    text-decoration: underline
}

offer-reductions .reduction {
    margin-top: 2px;
    margin-bottom: 0
}

.sectionExtra {
    background-color: #fff;
    margin-left: 21px;
    z-index: 1
}

.sectionExtra.border-bottom {
    border-bottom: 1px solid #d7d7d7
}

.sectionExtra.first-class {
    z-index: inherit;
    border-bottom: 1px solid #d7d7d7
}

@media (max-width:869px) {
    .sectionExtra {
        margin-left: 0
    }
}

.sectionExtra.disabled>.row>.col1 .checkbox,
.sectionExtra>.row.disabled .checkbox {
    cursor: default
}

.sectionExtra.disabled>.row>.col1 .checkbox svg,
.sectionExtra>.row.disabled .checkbox svg {
    fill: #878787
}

.sectionExtra.disabled>.row>.col1.reservation-only,
.sectionExtra>.row.disabled.reservation-only {
    color: #222
}

.sectionExtra .strikethrough {
    text-decoration: line-through;
    font-size: 16px;
    color: #6a6a6a;
    padding-top: 0!important
}

.sectionExtra h2,
.sectionExtra p {
    margin: 0;
    padding: 0
}

.sectionExtra h2 {
    font-size: 18px;
    color: #222;
    margin-bottom: 4px;
    font-weight: 400
}

@media (min-width: 870px) {
    .sectionExtra h2 {
        font-size: 18px;
        margin-bottom: 7px
    }
}

.sectionExtra .collapsible {
    display: block;
    position: relative;
    max-height: 2000px;
    overflow: hidden;
    transition: max-height ease-in-out .2s
}

.sectionExtra .collapsible.collapsed {
    max-height: 0
}

.sectionExtra .row {
    position: relative;
    background-color: #d7d7d7
}

.sectionExtra .row.reservation-link {
    background-color: #fff;
    padding: 15px;
    border-top: 1px solid #d7d7d7
}

.sectionExtra .row.reservation-link a {
    color: #51a351
}

.sectionExtra .row.reservation-link a[disabled] {
    color: #afafaf!important
}

.sectionExtra .row.flex {
    display: flex
}

.sectionExtra .row>.col1 {
    flex: 0 0 42px;
    width: 42px;
    max-width: 42px;
    padding: 15px 5px;
    background-color: #fff;
    background-clip: padding-box
}

.sectionExtra .row>.col1 .checkbox {
    padding: 3px 0 0 10px
}

.sectionExtra .row>.col2 {
    flex: 1;
    flex-direction: column;
    background-color: #fff;
    padding: 15px 0 15px 0;
    background-clip: padding-box
}

.sectionExtra .row>.col2 p {
    font-size: 12px;
    font-weight: 400;
    color: #222;
    line-height: 1.25em
}

@media (min-width: 870px) {
    .sectionExtra .row>.col2 p {
        font-size: 14px
    }
}

.sectionExtra .row>.col2 .price {
    font-size: 12px;
    font-weight: 400;
    color: #878787
}

@media (min-width: 870px) {
    .sectionExtra .row>.col2 .price {
        font-size: 14px
    }
}

.sectionExtra .row>.col2>.accommodationText {
    border-top: 1px solid #d7d7d7;
    margin: 12px 0 0 0;
    padding-top: 12px;
    padding-right: 15px;
    display: flex
}

.sectionExtra .row>.col2>.accommodationText .reservationDetails {
    flex: 1
}

.sectionExtra .row>.col2>.accommodationText .toggle-icon {
    flex: 0 0 25px
}

.sectionExtra .row>.perforation {
    width: 4px;
    flex: 0 0 4px;
    background-image: url(https://tickets-deva.oebb.at/static/images/background/sectionExtraPerforation.svg)
}

.sectionExtra .row>.col3 {
    flex: 0 0 80px;
    width: 80px;
    max-width: 80px;
    background-color: #fff;
    text-align: right;
    padding: 15px 16px 15px 0
}

@media (min-width:380px) {
    .sectionExtra .row>.col3 {
        flex: 0 0 93px;
        width: 93px;
        max-width: 93px
    }
}

@media (min-width: 870px) {
    .sectionExtra .row>.col3 {
        flex: 0 0 143px;
        width: 143px;
        max-width: 143px
    }
}

@media (min-width: 870px) {
    .sectionExtra .row>.col3 {
        padding: 15px 16px 15px 0
    }
}

.sectionExtra .row>.col3 h2 {
    font-weight: 400;
    padding: 10px 15px 0 0
}

.sectionExtra .row>.col3 h2.noCachedOffer {
    font-size: 12px;
    color: #d40027
}

.sectionExtra .row>.col3 p {
    font-size: 12px;
    color: #508546
}

.infoBubble[name=personGroup] input[type=text] {
    width: 30px;
    text-align: center;
    margin-right: 15px
}

.infoBubble[name=personGroup] .flexRow {
    height: 40px;
    align-items: baseline
}

.infoBubble[name=personGroup] .flexRow .flexCol span {
    color: #000
}

.infoBubble[name=personGroup] .flexRow .flexCol.fill {
    align-self: center
}

.infoBubble[name=personGroupBirthdayAge] .infoBubbleArrow {
    background-color: #f0f0f0
}

.infoBubble[name=personGroupBirthdayAge] .birthdateForm {
    max-height: 300px;
    overflow-y: auto
}

.infoBubble[name=personGroupBirthdayAge] birthdategroup {
    display: block;
    padding: 20px 0
}

.infoBubble[name=personGroupBirthdayAge] birthdategroup .header {
    font-size: 16px;
    line-height: 40px;
    color: #222
}

.infoBubble[name=personGroupBirthdayAge] birthdategroup .col1 {
    width: 30px;
    flex: 0 0 30px
}

.infoBubble[name=personGroupBirthdayAge] birthdategroup .fill {
    line-height: 1em
}

.infoBubble[name=personGroupBirthdayAge] agegroup {
    line-height: 60px;
    min-height: 60px;
    font-size: 16px;
    border-top: 1px solid #e6e6e6;
    position: relative
}

.infoBubble[name=personGroupBirthdayAge] agegroup:not(:hover) .close {
    display: none
}

.infoBubble[name=personGroupBirthdayAge] agegroup .close {
    position: absolute;
    right: 5px;
    top: 5px
}

.infoBubble[name=personGroupBirthdayAge] agegroup .close svg[name=close] {
    right: 0;
    top: 0
}

.infoBubble[name=personGroupBirthdayAge] agegroup:first-of-type {
    border: none
}

.infoBubble[name=personGroupBirthdayAge] agegroup:first-of-type .close {
    display: none!important
}

.infoBubble[name=personGroupBirthdayAge] agegroup .fill {
    line-height: 1em
}

.infoBubble[name=personGroupBirthdayAge] agegroup .flexRow {
    height: 40px
}

.infoBubble[name=personGroupBirthdayAge] agegroup input[type=text] {
    text-align: center
}

.infoBubble[name=personGroupBirthdayAge] agegroup input[type=text]:first-child {
    width: 30px;
    margin-right: 15px
}

.infoBubble[name=personGroupBirthdayAge] agegroup input[type=text].sAge {
    width: 45px;
    text-align: left
}

.infoBubble[name=personGroupBirthdayAge] header {
    background-color: #f0f0f0;
    padding: 17px 29px 29px 32px
}

.infoBubble[name=personGroupBirthdayAge] header p {
    margin: 0
}

.infoBubble[name=personGroupBirthdayAge] header:first-child {
    padding-bottom: 0!important
}

.infoBubble[name=personGroupBirthdayAge] header:last-of-type {
    border-bottom: 1px solid #e6e6e6;
    color: #878787
}

.infoBubble[name=personGroupBirthdayAge] [role=button] {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1em;
    display: flex
}

.infoBubble[name=personGroupBirthdayAge] [role=button] .buttonPad {
    padding: 10px
}

.infoBubble[name=personGroupBirthdayAge] footer {
    background-color: #f0f0f0
}

.infoBubble[name=personGroupBirthdayAge] footer:first-child {
    border-top: 1px solid #e6e6e6
}

.infoBubble[name=personGroupBirthdayAge] footer.error p {
    font-size: 14px;
    margin: 0
}

.infoBubble[name=personGroupBirthdayAge] .flexRow {
    align-items: baseline
}

.infoBubble[name=personGroupBirthdayAge] .flexRow .flexCol span {
    color: #000
}

.infoBubble[name=personGroupBirthdayAge] .flexRow .flexCol.fill {
    align-self: center
}

.infoBubble[name=newMotorailTrainWrapper] {
    background-color: #f0f0f0
}

.infoBubble[name=newMotorailTrainWrapper]>.contentWrapper {
    padding: 0
}

.infoBubble[name=rememberOrEditPassenger] section {
    padding: 0!important
}

.infoBubble[name=rememberOrEditPassenger] section input {
    background: 0 0
}

.infoBubble[name=rememberOrEditPassenger] section .salutationWrapper select[name=salutation] {
    width: 100%;
    margin-top: 6px
}

.infoBubble[name=rememberOrEditPassenger] section .nameWrapper {
    display: flex
}

.infoBubble[name=rememberOrEditPassenger] section .nameWrapper .firstName {
    flex: 0 1 45%
}

.infoBubble[name=rememberOrEditPassenger] section .nameWrapper .lastName {
    flex: 0 1 55%
}

.infoBubble[name=rememberOrEditPassenger] section .nameWrapper .lastName input,
.infoBubble[name=rememberOrEditPassenger] section .nameWrapper .lastName label {
    padding-left: 8px
}

.infoBubble[name=rememberOrEditPassenger] section .nameWrapper .lastName .input-error {
    padding-left: 8px
}

.infoBubble[name=rememberOrEditPassenger] section .nameWrapper input[name=firstname],
.infoBubble[name=rememberOrEditPassenger] section .nameWrapper input[name=lastname] {
    width: 100%
}

.infoBubble[name=rememberOrEditPassenger] section .subtext {
    margin: 7px 0 26px 0!important
}

.infoBubble[name=rememberOrEditPassenger] section .date-of-birth {
    margin-top: 33px
}

.infoBubble[name=rememberOrEditPassenger] section .colorChooser .checkboxArea {
    flex: 0 0 44px
}

.infoBubble[name=rememberOrEditPassenger] section .colorChooser .checkboxArea label {
    width: 44px
}

.infoBubble[name=rememberOrEditPassenger] section .notes {
    margin-top: 20px
}

.infoBubble[name=rememberOrEditPassenger] section .notes .note {
    margin-bottom: 10px
}

.infoBubble[name=rememberPassengers] section .subtext {
    margin: 22px 0 26px 0
}

.infoBubble[name=rememberPassengers] section .date-of-birth {
    margin-top: 33px
}

.infoBubble[name=rememberPassengers] section .toggleChecked {
    float: left;
    margin: 3px 10px 0 0
}

.infoBubble[name=rememberPassengers] section select {
    color: #868686
}

.infoBubble[name=rememberPassengers] section .salutationWrapper {
    padding: 0 0 10px 29px
}

.infoBubble[name=rememberPassengers] section [ng-form][name=salutationFieldForm].salutationWrapper {
    border: none
}

#person .infoBubble[name=addCar],
#person .infoBubble[name=addMotorbike],
#person .infoBubble[name=chooseVehicle] {
    background-color: #f0f0f0
}

#person .infoBubble[name=addCar]>.contentWrapper,
#person .infoBubble[name=addMotorbike]>.contentWrapper,
#person .infoBubble[name=chooseVehicle]>.contentWrapper {
    padding: 0!important
}

#person .infoBubble[name=addCar]>.contentWrapper>header,
#person .infoBubble[name=addMotorbike]>.contentWrapper>header,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>header {
    font-size: 18px;
    padding: 23px 29px 19px 32px;
    border-bottom: 1px solid #d7d7d7
}

#person .infoBubble[name=addCar]>.contentWrapper>section,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section {
    margin: 0;
    padding: 23px 29px 29px 32px
}

#person .infoBubble[name=addCar]>.contentWrapper>section input,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section input,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section input {
    background: 0 0
}

#person .infoBubble[name=addCar]>.contentWrapper>section input,
#person .infoBubble[name=addCar]>.contentWrapper>section select,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section input,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section select,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section input,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section select {
    color: #222
}

#person .infoBubble[name=addCar]>.contentWrapper>section input:disabled,
#person .infoBubble[name=addCar]>.contentWrapper>section select:disabled,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section input:disabled,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section select:disabled,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section input:disabled,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section select:disabled {
    color: #868686
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper {
    padding: 14px 0 6px 0
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper input,
#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper select,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper input,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper select,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper input,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper select {
    width: 100%
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper.noPadding,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper.noPadding,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper.noPadding {
    padding: 0
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper.bordered,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper.bordered,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper.bordered {
    padding-bottom: 0;
    border-bottom: 1px solid #d7d7d7
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper .year,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper .year,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper .year {
    padding-left: 28px
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper.flexWrapper,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper.flexWrapper,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper.flexWrapper {
    display: flex
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper.flexWrapper .one,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper.flexWrapper .one,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper.flexWrapper .one {
    flex: 0 1 55%
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper.flexWrapper .two,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper.flexWrapper .two,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper.flexWrapper .two {
    flex: 0 1 45%
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper.flexWrapper .two .input-error,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper.flexWrapper .two .input-error,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper.flexWrapper .two .input-error {
    padding-left: 8px
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper.flexWrapper input,
#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper.flexWrapper select,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper.flexWrapper input,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper.flexWrapper select,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper.flexWrapper input,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper.flexWrapper select {
    width: 100%
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper.checkboxWrapper,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper.checkboxWrapper,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper.checkboxWrapper {
    display: flex
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper.checkboxWrapper .one,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper.checkboxWrapper .one,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper.checkboxWrapper .one {
    flex: 0 1 30px
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper.checkboxWrapper .two,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper.checkboxWrapper .two,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper.checkboxWrapper .two {
    flex: 1 1
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper.checkboxWrapper .two .input-error,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper.checkboxWrapper .two .input-error,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper.checkboxWrapper .two .input-error {
    padding-left: 8px
}

#person .infoBubble[name=addCar]>.contentWrapper>section .inputWrapper.checkboxWrapper label,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .inputWrapper.checkboxWrapper label,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .inputWrapper.checkboxWrapper label {
    width: 100%;
    font-size: 12px;
    color: #222
}

#person .infoBubble[name=addCar]>.contentWrapper>section .subtext,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .subtext,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .subtext {
    margin: 7px 0 26px 0!important
}

#person .infoBubble[name=addCar]>.contentWrapper>section .notes,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .notes,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .notes {
    margin-top: 20px
}

#person .infoBubble[name=addCar]>.contentWrapper>section .notes .note,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .notes .note,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .notes .note {
    margin-bottom: 10px
}

#person .infoBubble[name=addCar]>.contentWrapper>section .checkboxButton>.col1 svg,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .checkboxButton>.col1 svg,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .checkboxButton>.col1 svg {
    fill: #51a351
}

#person .infoBubble[name=addCar]>.contentWrapper>section .checkboxButton>.col2 label,
#person .infoBubble[name=addMotorbike]>.contentWrapper>section .checkboxButton>.col2 label,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>section .checkboxButton>.col2 label {
    color: #222
}

#person .infoBubble[name=addCar]>.contentWrapper>footer,
#person .infoBubble[name=addMotorbike]>.contentWrapper>footer,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>footer {
    display: flex;
    flex: 1 1 auto;
    border-top: 1px solid #d7d7d7;
    padding: 14px 29px 14px 18px;
    margin-left: 14px;
    color: #51a351;
    font-size: 16px
}

#person .infoBubble[name=addCar]>.contentWrapper>footer a,
#person .infoBubble[name=addCar]>.contentWrapper>footer input,
#person .infoBubble[name=addMotorbike]>.contentWrapper>footer a,
#person .infoBubble[name=addMotorbike]>.contentWrapper>footer input,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>footer a,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>footer input {
    background: 0 0;
    border: none;
    padding: 0;
    margin-left: 20px;
    outline: 0
}

#person .infoBubble[name=addCar]>.contentWrapper>footer a:first-child,
#person .infoBubble[name=addCar]>.contentWrapper>footer input:first-child,
#person .infoBubble[name=addMotorbike]>.contentWrapper>footer a:first-child,
#person .infoBubble[name=addMotorbike]>.contentWrapper>footer input:first-child,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>footer a:first-child,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>footer input:first-child {
    margin-left: 0
}

#person .infoBubble[name=addCar]>.contentWrapper>footer .help-icon-wrapper,
#person .infoBubble[name=addMotorbike]>.contentWrapper>footer .help-icon-wrapper,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>footer .help-icon-wrapper {
    width: 18px;
    height: 18px
}

#person .infoBubble[name=addCar]>.contentWrapper>footer .left,
#person .infoBubble[name=addMotorbike]>.contentWrapper>footer .left,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>footer .left {
    display: flex;
    flex: 1 1 auto
}

#person .infoBubble[name=addCar]>.contentWrapper>footer .right,
#person .infoBubble[name=addMotorbike]>.contentWrapper>footer .right,
#person .infoBubble[name=chooseVehicle]>.contentWrapper>footer .right {
    display: flex;
    flex: 0 0 20px
}

#person .infoBubble[name=chooseVehicle]>.contentWrapper>section {
    padding-top: 5px;
    padding-bottom: 5px
}

#person .infoBubble[name=vehicleTypeError],
#person .infoBubble[name=carInputSelectionError] {
    margin-top: 25px!important
}

.customAttributeItem,
.passengerAge,
.passengerBirthdate,
.passengerMissingName {
    padding: 24px 25px 20px 0
}

.customAttributeItem .subtext,
.passengerAge .subtext,
.passengerBirthdate .subtext,
.passengerMissingName .subtext {
    padding-top: 12px
}

.customAttributeItem span,
.passengerAge span,
.passengerBirthdate span,
.passengerMissingName span {
    font-weight: lighter
}

.passengerAge input,
.passengerMissingName input {
    width: 55px;
    padding-right: 0;
    margin-right: 0
}

.passengerAge input[type=number],
.passengerMissingName input[type=number] {
    -moz-appearance: textfield
}

.passengerMissingName {
    margin-left: 64px
}

.passengerMissingName .name-wrapper {
    width: 100%
}

.passengerMissingName .name-wrapper .inputGroup {
    width: 50%
}

.passengerMissingName input {
    min-width: 100px;
    width: 100%
}

.passengerMissingName input:last-of-type {
    padding-right: 0
}

.passengerMissingName .dropdownWrapper,
.passengerMissingName ts-dropdown-wrapper {
    position: relative;
    display: block
}

.passengerMissingName .driver {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 8px
}

.customAttributeItem .custom-attributes-section {
    display: flex;
    flex-flow: column;
    max-width: 100%
}

.customAttributeItem .custom-attributes-section input,
.customAttributeItem .custom-attributes-section select {
    width: 80%
}

.customAttributeItem .custom-attributes-section .input-custom-attribute {
    max-width: 100%;
    min-width: 200px
}

.passengerAge .submit-age {
    display: block;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #d7d7d7;
    font-size: 14px;
    color: #51a351
}

#person .passenger {
    background-color: #fff;
    border-bottom: 1px solid #d7d7d7;
    position: relative;
    color: #222
}

#person .passenger>.close {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 16px;
    height: 16px;
    fill: #878787;
    opacity: 0;
    transition: opacity .3s
}

#person .passenger>.close svg {
    fill: #afafaf
}

#person .passenger .subAction {
    padding-left: 10px!important
}

#person .passenger .subAction:focus,
#person .passenger .subAction:hover {
    background-color: #e6e6e6
}

#person .passenger .addDiscount>.buttonSubtitle>p {
    margin: 8px 0 0 0;
    white-space: pre-wrap
}

#person .passenger .close:focus,
#person .passenger .close:hover {
    display: inline-block;
    opacity: 1;
    background-color: #e6e6e6
}

#person .passenger>header {
    font-size: 18px;
    font-weight: 400;
    height: 72px;
    display: flex;
    align-items: center
}

#person .passenger>header:focus,
#person .passenger>header:hover {
    background-color: #e6e6e6
}

#person .passenger>header:focus+.close,
#person .passenger>header:hover+.close {
    opacity: 1
}

#person .passenger>header .sublabel-section {
    width: 100%
}

#person .passenger>header .buttonSubtitle {
    margin: 0!important;
    max-width: 360px
}

#person .passenger>header .rowWrapper {
    flex: 1;
    min-width: 0
}

#person .passenger>header .row>.col1 {
    width: 32px;
    display: inline-block;
    float: left
}

#person .passenger>header .row>.col2 {
    display: block;
    overflow: hidden
}

#person .passenger>header .row>.col2 .passenger-header-label {
    max-width: 400px
}

#person .passenger>header .row:last-child>.col1 {
    height: 10px
}

#person .passenger>section {
    border-top: 1px solid #d7d7d7
}

#person .passenger>section input[type=number]::-webkit-inner-spin-button,
#person .passenger>section input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

#person .passenger>section input[type=number] {
    width: 37px!important;
    display: inline-block;
    margin-right: 5px
}

#person .passenger>section div[role=button] {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1em;
    color: #51a351;
    border-bottom: none
}

#person .passenger>section hr {
    margin: 0;
    background-color: #d7d7d7
}

.password-wrapper {
    position: relative
}

.password-wrapper>.input {
    width: 100%
}

.password-wrapper>.input>input {
    width: 100%;
    padding-right: 35px!important
}

.password-wrapper>.input>input::-ms-clear,
.password-wrapper>.input>input::-ms-reveal {
    display: none
}

.password-wrapper>.toggle {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -12px;
    line-height: 0
}

.password-wrapper>.toggle>a {
    padding: 0;
    display: block
}

.password-wrapper>.toggle>a>svg {
    top: -3px!important
}

div.password-wrapper.ng-pristine.ng-untouched.ng-scope.ng-invalid.ng-invalid-required,
div.password-wrapper.ng-untouched.ng-scope.ng-invalid.ng-dirty.ng-valid-parse.ng-invalid-min-length.ng-valid-max-length.ng-valid-required {
    border-bottom: 0
}

.cardinput {
    z-index: 0;
    position: relative
}

.cardinput:focus {
    outline: 0
}

.cardinput>.placeholder {
    z-index: 0;
    position: absolute;
    font-size: 16px;
    line-height: 1.25em;
    font-weight: 400;
    color: #6a6a6a;
    cursor: text
}

.cardinput input {
    background-color: transparent;
    border: none
}

.cardinput input:focus {
    outline: 0
}

.paymentFavorite {
    display: flex;
    padding: 17px 0 22px 0;
    background-color: #222;
    margin-bottom: 1px solid #383838
}

.paymentFavorite>.col1 {
    display: flex;
    flex: 0 0 80px;
    justify-content: center
}

.paymentFavorite>.col1>.icon {
    width: 43px;
    height: 43px;
    background-color: #fff;
    -webkit-border-radius: 25px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 25px;
    -moz-background-clip: padding;
    border-radius: 25px;
    background-clip: padding-box;
    display: flex;
    align-items: center;
    justify-content: center
}

.paymentFavorite>.col1>.icon img {
    width: 26px;
    height: 26px
}

.paymentFavorite>.col2 {
    padding-right: 40px;
    position: relative
}

.paymentFavorite>.col2 h2 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3em;
    color: #fff;
    margin: 0
}

.paymentFavorite>.col2 .check {
    position: absolute;
    right: 20px;
    top: 0
}

.paymentFavorite>.col2 .title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3em;
    color: #fff
}

.paymentFavorite>.col2 .info {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1em;
    color: #afafaf
}

.paymentFavorite>.col2 .expired {
    font-size: 12px;
    margin: 0;
    padding: 0;
    color: #cc3432
}

.paymentFavorite>.col2 .actions {
    margin-top: 1px solid #383838;
    padding: 18px 0 22px 0
}

.paymentFavorite>.col2 .actions button {
    word-break: break-all
}

.paying-with-favorite {
    display: flex;
    justify-content: space-between
}

.paying-with-favorite .min-width-svg-20px svg {
    min-width: 20px;
    padding-right: 1em!important;
    max-width: 100px
}

.acquisition {
    font-size: 12px;
    line-height: 1.3em
}

.acquisition .infoBubble.right.inline {
    margin-left: 0
}

.acquisition .infoBubble.bottom.inline {
    margin-top: 0
}

@media (max-width:720px) {
    .acquisition .infoBubble.bottom.inline {
        margin-bottom: 10px
    }
}

.acquisition ul {
    padding: 0;
    margin: 0
}

.acquisition ul li {
    list-style-type: none;
    padding: 0
}

.acquisition ul li:last-child {
    border-bottom: none
}

.acquisition ul li:last-of-type .acquisitionMethod>.col1,
.acquisition ul li:last-of-type .acquisitionMethod>.col2 {
    border-bottom: none
}

.acquisition button.acquisitionMethodButton {
    width: 100%
}

.acquisition button.acquisitionMethodButton:focus,
.acquisition button.acquisitionMethodButton:hover {
    outline: 0;
    background-color: #dedede
}

.acquisition h2 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25em
}

.acquisition .acquisitionTypeNone h2 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25em;
    margin: .67em 0
}

@media (min-width: 870px) {
    .acquisition .acquisitionTypeNone h2 {
        display: block!important;
        margin: 0!important
    }
}

.acquisition ol {
    font-size: 12px;
    line-height: 1.25em;
    margin-left: -21px;
    margin-top: 0;
    margin-bottom: 0
}

.acquisition ol li {
    padding: 0 0 16px 3px
}

.acquisition h3 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2em;
    padding-bottom: 2px
}

.acquisition .threeColumnFooter>.col2 div.info {
    margin: 16px 0 6px 0;
    font-size: 14px
}

.acquisition .threeColumnFooter>.col3 {
    font-size: 12px;
    line-height: 1.3em;
    flex: 0 0 90px;
    padding: 0
}

.acquisition .threeColumnFooter>.col3>button {
    width: 100%;
    height: 100%;
    text-align: center
}

.acquisition .threeColumnFooter>.col3>button:focus,
.acquisition .threeColumnFooter>.col3>button:hover {
    background-color: #b41a37
}

.acquisition .threeColumnFooter>.col3>button:focus.disabled,
.acquisition .threeColumnFooter>.col3>button:hover.disabled {
    background-color: #9d9d9d
}

.acquisition .threeColumnFooter>.col3 b {
    font-weight: 700
}

.acquisition footer hr {
    margin-left: 25px;
    margin-right: 25px;
    background-color: #d7d7d7
}

.acquisition footer input {
    font-size: 12px;
    color: #51a351;
    fill: #51a351;
    background: #f0f0f0;
    border: 0;
    margin-left: 25px;
    margin-top: 15px;
    margin-bottom: 20px
}

.acquisition footer input a:focus,
.acquisition footer input input:focus,
.acquisition footer input:hover {
    color: #6fb86f
}

.acquisition footer input:active {
    color: #91c991
}

.acquisition .infoBubble footer {
    color: #51a351;
    fill: #51a351
}

.acquisition .infoBubble footer input {
    font-size: 12px;
    color: #51a351;
    fill: #51a351;
    border: 0;
    margin-left: 25px;
    margin-top: 10px;
    margin-bottom: 10px
}

.acquisition label#acquisitionMethodsListDescription {
    display: none
}

.acquisition .selectedAcquisitionMethod {
    position: relative
}

.acquisition .selectedAcquisitionMethod hr {
    background-color: #d7d7d7;
    margin: 21px 0 20px 0
}

.acquisition .selectedAcquisitionMethod .undo {
    position: absolute;
    right: 16px;
    top: 21px
}

.acquisition .selectedAcquisitionMethod .undo:focus svg,
.acquisition .selectedAcquisitionMethod .undo:hover svg {
    fill: #a1a1a1;
    color: #a1a1a1
}

.acquisition .selectedAcquisitionMethod .undo:active svg {
    fill: #bababa;
    color: #bababa
}

.acquisition .selectedAcquisitionMethod.PDF .acquisitionMethod {
    border: 0
}

.acquisition .selectedAcquisitionMethod.SECURITY_PAPER .acquisitionMethod {
    border: 0;
    margin-bottom: 15px
}

.acquisition .selectedAcquisitionMethod.SECURITY_PAPER div.checkboxButton {
    margin-left: 90px
}

.acquisition .selectedAcquisitionMethod.SPECIAL_FORMAT .threeColumnFooter .col2 p {
    padding-bottom: 16px
}

.acquisition .selectedAcquisitionMethod .acquire {
    background-color: #fff;
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7
}

@media (max-width:380px) {
    .acquisition .selectedAcquisitionMethod .acquire {
        height: auto
    }
}

.acquisition .selectedAcquisitionMethod .acquire .col1 {
    flex: 0 0 60px
}

.acquisition .selectedAcquisitionMethod .acquire .col2 {
    padding-right: 5px
}

.acquisition .selectedAcquisitionMethod .acquire.threeColumnFooter {
    min-height: 116px;
    height: auto
}

.acquisition .selectedAcquisitionMethod .acquire .col3 {
    min-height: 116px
}

.acquisitionMethod {
    list-style-type: none;
    display: flex
}

.acquisitionMethod.inner {
    padding-right: 0!important
}

.acquisitionMethod>.col1 {
    padding-top: 18px;
    flex: 0 0 64px
}

ul .acquisitionMethod>.col1 {
    border-bottom: 1px solid #d7d7d7
}

.acquisitionMethod>.col1>div {
    background-color: #fff;
    border-radius: 30px;
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center
}

.acquisitionMethod>.col2 {
    flex: 1;
    padding: 27px 29px 14px 0
}

ul .acquisitionMethod>.col2 {
    border-bottom: 1px solid #d7d7d7
}

.acquisitionMethod>.col2 h3,
.acquisitionMethod>.col2 p {
    margin: 0
}

.orderitem.stripe {
    color: #fff;
    padding: 17px 24px 16px 17px;
    margin-bottom: 10px;
    background-position: right top;
    position: relative
}

@media (min-width: 870px) {
    .orderitem.stripe {
        max-width: 334px
    }
}

.orderitem.stripe .passenger-list span {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5em
}

@media (min-width:320px) {
    .orderitem.stripe {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung380x95.svg)
    }
    button:focus .orderitem.stripe,
    button:hover .orderitem.stripe {
        background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung380x95.svg)
    }
    button:active .orderitem.stripe {
        background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung380x95.svg)
    }
}

@media (min-width:380px) {
    .orderitem.stripe {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung480x95.svg)
    }
    button:focus .orderitem.stripe,
    button:hover .orderitem.stripe {
        background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung480x95.svg)
    }
    button:active .orderitem.stripe {
        background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung480x95.svg)
    }
}

@media (min-width:480px) {
    .orderitem.stripe {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung768x95.svg)
    }
    button:focus .orderitem.stripe,
    button:hover .orderitem.stripe {
        background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung768x95.svg)
    }
    button:active .orderitem.stripe {
        background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung768x95.svg)
    }
}

@media (min-width: 870px) {
    .orderitem.stripe {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung320x95.svg)
    }
    button:focus .orderitem.stripe,
    button:hover .orderitem.stripe {
        background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung320x95.svg)
    }
    button:active .orderitem.stripe {
        background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung320x95.svg)
    }
}

@media (min-width: 870px) {
    .orderitem.stripe {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung334x95.svg)
    }
    button:focus .orderitem.stripe,
    button:hover .orderitem.stripe {
        background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung334x95.svg)
    }
    button:active .orderitem.stripe {
        background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundBuchung334x95.svg)
    }
}

.orderitem.stripe.acquired {
    color: #222
}

@media (min-width:320px) {
    .orderitem.stripe.acquired {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket380x95.svg)
    }
    button:focus .orderitem.stripe.acquired,
    button:hover .orderitem.stripe.acquired {
        background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket380x95.svg)
    }
    button:active .orderitem.stripe.acquired {
        background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket380x95.svg)
    }
}

@media (min-width:380px) {
    .orderitem.stripe.acquired {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket480x95.svg)
    }
    button:focus .orderitem.stripe.acquired,
    button:hover .orderitem.stripe.acquired {
        background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket480x95.svg)
    }
    button:active .orderitem.stripe.acquired {
        background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket480x95.svg)
    }
}

@media (min-width:480px) {
    .orderitem.stripe.acquired {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket768x95.svg)
    }
    button:focus .orderitem.stripe.acquired,
    button:hover .orderitem.stripe.acquired {
        background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket768x95.svg)
    }
    button:active .orderitem.stripe.acquired {
        background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket768x95.svg)
    }
}

@media (min-width: 870px) {
    .orderitem.stripe.acquired {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket320x95.svg)
    }
    button:focus .orderitem.stripe.acquired,
    button:hover .orderitem.stripe.acquired {
        background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket320x95.svg)
    }
    button:active .orderitem.stripe.acquired {
        background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket320x95.svg)
    }
}

@media (min-width: 870px) {
    .orderitem.stripe.acquired {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket334x95.svg)
    }
    button:focus .orderitem.stripe.acquired,
    button:hover .orderitem.stripe.acquired {
        background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket334x95.svg)
    }
    button:active .orderitem.stripe.acquired {
        background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket334x95.svg)
    }
}

.orderitem.stripe.disabled {
    color: #868686
}

@media (min-width:320px) {
    .orderitem.stripe.disabled {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket380x95.svg)
    }
}

@media (min-width:380px) {
    .orderitem.stripe.disabled {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket480x95.svg)
    }
}

@media (min-width:480px) {
    .orderitem.stripe.disabled {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket768x95.svg)
    }
}

@media (min-width: 870px) {
    .orderitem.stripe.disabled {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket320x95.svg)
    }
}

@media (min-width: 870px) {
    .orderitem.stripe.disabled {
        background-image: url(https://tickets.oebb.at/static/images/components/postcheckout/background/backgroundTicket334x95.svg)
    }
}

.orderitem.stripe.locked {
    color: #868686
}

.orderitem.stripe.locked svg {
    color: #868686;
    fill: #868686
}

.orderitem.stripe span {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25em;
    margin: 0 0 17px 0
}

.orderitem.stripe p {
    margin-bottom: 16px
}

.orderitem.stripe>.col1 {
    float: left;
    width: 34px
}

.orderitem.stripe .multiplier {
    margin-right: 20px
}

.orderitem.stripe>.col2 {
    overflow: hidden
}

.orderitem.stripe>.col2 .routeDescription {
    font-size: 14px
}

.orderitem.stripe .validity {
    font-size: 12px
}

.orderitem.stripe .validityInfo {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.orderitem.stripe .validityInfo .validityPeriodCategory .category {
    font-weight: 700;
    white-space: nowrap
}

.orderitem.stripe .validityInfo .validityPeriodDuration {
    text-align: right
}

.orderitem.stripe svg[iconname=insuranceIcon] {
    position: absolute;
    top: 10px;
    right: 10px
}

.orderitem.stripe .arrowRight {
    position: absolute;
    right: 10px;
    bottom: 40%;
    fill: #fff
}

.orderitem.stripe.acquired .arrowRight {
    fill: #878787
}

.orderitem.stripe.insurance svg[iconname=insuranceIcon] {
    position: relative;
    top: auto;
    right: auto
}

.stripe.railanddrive {
    background-color: #f0f0f0;
    color: #222;
    padding: .75em;
    background-position: right top;
    display: flex;
    margin-bottom: 8px
}

.stripe.railanddrive>.col1 {
    flex: 0 0 64px;
    display: flex;
    align-content: center
}

.stripe.railanddrive>.col2 {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    justify-content: center
}

.stripe.railanddrive>.col2>h3 {
    font-weight: 400;
    margin: 0
}

.stripe.railanddrive>.col2 a,
.stripe.railanddrive>.col2>p {
    font-size: 12px
}

.stripe.railanddrive>.col3 {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center
}

.sms input {
    background-color: inherit
}

.ticketDeliveryPost {
    padding: 0 29px 0 32px
}

.ticketDeliveryPost>.header {
    font-size: 24px;
    font-weight: lighter;
    line-height: 1.25em
}

.ticketDeliveryPost>.message {
    border-bottom: 1px solid #d7d7d7;
    padding-bottom: 23px
}

.infoBubble[name=register] {
    margin-top: -30px;
    width: 320px
}

@media (min-width:380px) {
    .infoBubble[name=register] {
        width: 355px
    }
}

.infoBubble[name=register].visible {
    margin-top: 0
}

#off-canvas .registerBubble.inline {
    margin-left: -48px;
    width: auto;
    top: 0!important;
    left: 0!important
}

.registerBubble #registrationCardsDirective input::-ms-clear,
.registerBubble #registrationCardsDirective input::-ms-reveal {
    display: none
}

#postcheckout .registerBubble {
    z-index: 1
}

.registerBubble .error .left * {
    color: #d63d00;
    fill: #d63d00
}

.registerBubble .error header span {
    color: #d63d00
}

.registerBubble .content {
    height: 100%;
    width: 100%
}

.registerBubble .content .right {
    padding-top: 5px
}

.registerBubble .content .right section input[type=button] {
    background: 0 0;
    padding: 0;
    border: none;
    color: #51a351
}

.registerBubble .content .right section select {
    font-size: 16px
}

.registerBubble .content .right section input[type=text],
.registerBubble .content .right section input[type=password] {
    width: 100%;
    padding: 4px 0
}

.registerBubble .content .right section .inputGroup {
    margin-top: 18px;
    margin-bottom: 10px
}

.registerBubble .content .right section .checkboxButton>.col2 label {
    font-size: 14px
}

.registerBubble .content .right section>.salutation-wrapper>div {
    vertical-align: top;
    padding: 0;
    margin: 0
}

.registerBubble .content .right section>.salutation-wrapper>div.salutation select {
    width: 100%;
    color: #222;
    padding: 3px 0
}

.registerBubble .content .right section>.salutation-wrapper>div.salutation>.input-error {
    margin-top: 5px
}

.registerBubble .content .right section>.name-wrapper {
    display: flex
}

.registerBubble .content .right section>.name-wrapper>div {
    vertical-align: top;
    padding: 0;
    margin: 0
}

.registerBubble .content .right section>.name-wrapper>div.firstname {
    flex: 0 1 45%
}

.registerBubble .content .right section>.name-wrapper>div.firstname input {
    height: 30px
}

.registerBubble .content .right section>.name-wrapper>div.lastname {
    flex: 0 1 55%
}

.registerBubble .content .right section>.name-wrapper>div.lastname input {
    height: 30px;
    padding-left: 8px
}

.registerBubble .content .right section>.name-wrapper>div.lastname .input-error {
    padding-left: 8px
}

.registerBubble .content .right section>.name-wrapper>divinput {
    border-bottom: none;
    margin-bottom: 10px
}

.registerBubble .content .right section>.disclaimer {
    padding: 10px 0
}

.registerBubble .content .right section>.disclaimer>span>a {
    padding: 0!important;
    margin: 0!important;
    display: inline!important;
    text-decoration: underline;
    color: #51a351
}

.registerBubble .content .right section>.disclaimer>span>a:focus,
.registerBubble .content .right section>.disclaimer>span>a:hover {
    color: #515151!important
}

.registerBubble .content .right section>.disclaimer>span>a:active {
    color: #848484!important
}

.registerBubble .content .right form input.ng-invalid.ng-touched:not([type=password]):not(.ng-pristine):not(.ng-hide-validation),
.registerBubble .content .right form.ng-invalid.ng-submitted div.input.ng-invalid,
.registerBubble .content .right form.ng-invalid.ng-submitted input.ng-invalid {
    color: #cc3432;
    border-bottom-color: #e2002a
}

.registerBubble .content .right div.password-hint {
    font-size: 12px;
    color: #6a6a6a;
    margin-top: -5px
}

.registerBubble .content .right div.input-error,
.registerBubble .content .right div.password-error {
    font-size: 12px;
    color: #e2002a;
    margin-top: -5px
}

.registerBubble .content .right div.input-info {
    font-size: 12px;
    color: #6a6a6a;
    margin-top: -5px
}

.registerBubble .content .right div.card-input-hint {
    color: #6a6a6a;
    margin-top: 5px
}

.registerBubble .content .right div.password-warning {
    font-size: 12px;
    color: #ed6f00;
    margin-top: -5px
}

.registerBubble .content .right div.password-info {
    font-size: 12px;
    color: #70a629;
    margin-top: -5px
}

.registerBubble .content.registering .right section {
    padding-top: 0;
    padding-bottom: 10px
}

.registerBubble .content.registered .right header {
    font-weight: 400
}

.registerBubble .content.ng-enter {
    opacity: 0;
    transition: opacity ease-out .2s
}

.registerBubble .content.ng-enter.ng-enter-active {
    opacity: 1
}

.routeWrapper {
    position: relative
}

.routeWrapper.isSuppressed {
    display: none
}

.routeWrapper.isSuppressed .actions {
    display: none
}

.routeWrapper .route.widget {
    min-height: 105px;
    margin-bottom: 10px;
    white-space: nowrap;
    display: flex;
    width: 100%
}

.routeWrapper .route.widget:focus,
.routeWrapper .route.widget:hover {
    outline: 0
}

.routeWrapper .route.widget:focus .scope,
.routeWrapper .route.widget:focus .travel,
.routeWrapper .route.widget:hover .scope,
.routeWrapper .route.widget:hover .travel {
    background-color: #dedede
}

.routeWrapper .route.widget:focus .choose,
.routeWrapper .route.widget:hover .choose {
    background-color: #780016
}

.routeWrapper .route.widget:focus~.actions .action,
.routeWrapper .route.widget:hover~.actions .action {
    opacity: 1;
    left: -39px;
    transition: opacity .3s ease-out, left .3s ease-out;
    outline: 0
}

.routeWrapper .route.widget.ng-enter {
    opacity: 0;
    margin-left: 60px;
    transition: opacity .3s ease-out, margin-left .3s ease-out
}

.routeWrapper .route.widget.ng-enter.ng-enter-active {
    opacity: 1;
    margin-left: 0
}

.routeWrapper .route.widget.ng-leave {
    opacity: 1;
    margin-left: 0;
    transition: opacity .2s ease-in, margin-left .2s ease-in
}

.routeWrapper .route.widget.ng-leave.ng-leave-active {
    opacity: 0;
    margin-left: -60px
}

.routeWrapper .route.widget.ng-move {
    transition: all .2s ease-out .2s
}

.routeWrapper .route.widget .scope {
    z-index: 2;
    min-height: 105px;
    text-align: right;
    font-weight: 400;
    font-size: 14px;
    color: #222;
    background-color: #f0f0f0;
    width: 110px;
    flex: 0 0 110px;
    padding: 19px 10px 0 10px;
    text-align: center
}

@media (min-width:380px) {
    .routeWrapper .route.widget .scope {
        width: 0;
        flex: 0 0 0
    }
}

@media (min-width:480px) {
    .routeWrapper .route.widget .scope {
        border-left: 1px solid #d7d7d7;
        font-size: 12px
    }
}

@media (min-width: 870px) {
    .routeWrapper .route.widget .scope {
        width: 85px;
        flex: 0 0 85px
    }
}

.routeWrapper .route.widget .scope>.label {
    font-size: 12px;
    background-color: #81c200;
    padding: 2px;
    color: #fff
}

.routeWrapper .route.widget .scope>.label.color-0 {
    background-color: #558164
}

.routeWrapper .route.widget .scope>.label.color-1 {
    background-color: #508546
}

.routeWrapper .route.widget .scope>.label.color-2 {
    background-color: #64942c
}

.routeWrapper .route.widget .scope>.label.color-3 {
    background-color: #779100
}

.routeWrapper .route.widget .scope>.label.color-4 {
    background-color: #8eb504
}

.routeWrapper .route.widget .scope>.label.color-5 {
    background-color: #81c200
}

.routeWrapper .route.widget .travel {
    font-size: 12px;
    color: #6a6a6a;
    padding: 10px;
    flex: 1 1;
    background-color: #f0f0f0;
    overflow-x: hidden;
    white-space: normal
}

@media (min-width: 870px) {
    .routeWrapper .route.widget .travel {
        border-left: 1px solid #d7d7d7;
        font-size: 12px
    }
}

.routeWrapper .route.widget .travel>.routeDescription {
    margin-bottom: 0;
    color: #222
}

.routeWrapper .route.widget .travel>.routeDescription>div {
    margin-bottom: 5px
}

.routeWrapper .route.widget .travel>.routeDescription>.ticketNote {
    font-size: 12px;
    color: #6a6a6a
}

.routeWrapper .route.widget .travel>.routeDescription>.currentJourney {
    color: #51a351
}

.routeWrapper .route.widget .travel>.routeDescription>.availableClassNote {
    color: #fff;
    background: #3E3E3E;
    display: inline-block;
    padding: 1px 4px
}

.routeWrapper .route.widget .choose {
    font-size: 16px;
    font-weight: 400;
    background-color: #ab0020;
    color: #fff;
    width: 80px;
    max-width: 80px;
    flex: 0 0 80px;
    align-items: center;
    justify-content: center;
    display: flex;
    text-align: center
}

@media (min-width:380px) {
    .routeWrapper .route.widget .choose {
        max-width: 55px;
        width: 55px;
        flex: 0 0 55px
    }
}

@media (min-width: 870px) {
    .routeWrapper .route.widget .choose {
        font-size: 18px
    }
}

.routeWrapper .route.widget .choose .noOffers {
    font-size: 12px;
    white-space: normal;
    display: block;
    padding-top: 17px
}

@media (min-width: 870px) {
    .routeWrapper .route.widget .choose .noOffers {
        font-size: 12px
    }
}

.routeWrapper .route.widget .choose .error {
    font-size: 12px;
    margin: 0;
    padding: 0
}

@media (min-width: 870px) {
    .routeWrapper .route.widget .choose .error {
        font-size: 12px
    }
}

.routeWrapper .route.widget .choose .reduction-warning {
    color: #d40027;
    font-size: 12px;
    margin: 0;
    padding-top: 9px
}

@media (min-width: 870px) {
    .routeWrapper .route.widget .choose .reduction-warning {
        font-size: 12px
    }
}

.routeWrapper .route.widget .choose .concession-info {
    color: #7d7d7d;
    font-size: 12px;
    margin: 5px 0 0 0;
    padding: 0
}

@media (min-width: 870px) {
    .routeWrapper .route.widget .choose .concession-info {
        font-size: 12px
    }
}

.routeWrapper .actions {
    z-index: 1
}

.routeWrapper .actions .action {
    padding: 7px;
    padding-bottom: 5px;
    line-height: 100%;
    position: absolute;
    left: 0;
    opacity: 0;
    top: 15px;
    width: 39px;
    transition: opacity .3s ease-in, left .3s ease-in
}

.routeWrapper .actions .action:focus,
.routeWrapper .actions .action:hover {
    opacity: 1;
    left: -39px;
    display: block;
    outline: 0;
    -webkit-filter: drop-shadow(1px 1px 10px #000);
    -moz-filter: drop-shadow(1px 1px 10px #000);
    -ms-filter: drop-shadow(1px 1px 10px #000);
    filter: drop-shadow(1px 1px 10px #000);
    transition: opacity .3s ease-out, left .3s ease-out
}

.routeWrapper .actions svg {
    fill: #fff
}

@media (max-width:869px) {
    .routeWrapper .actions {
        display: none
    }
}

@-webkit-keyframes scalefade2 {
    0% {
        -webkit-transform: scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(0);
        height: 0;
        margin: 0;
        visibility: hidden
    }
}

@keyframes scalefade2 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        height: 0;
        margin: 0;
        visibility: hidden
    }
}

.outerScrollContainer {
    position: relative;
    overflow: hidden
}

.outerScrollContainer>.innerScrollContainer {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll
}

.outerScrollContainer>.innerScrollContainer>.contentScrollContainer {
    display: inline-block
}

.mirroredScrollbar {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden
}

.mirroredScrollbar.hidden {
    display: none
}

.scrollable {
    overflow: hidden;
    position: relative
}

.fullwindow .scrollable-content {
    -webkit-transform: none!important;
    transform: none!important
}

.scrollable .scrollable-content,
.scrollable .scrollable-slider {
    transition: background-color .2s linear, opacity .2s linear, -webkit-transform .2s ease-out;
    transition: background-color .2s linear, opacity .2s linear, transform .2s ease-out;
    transition: background-color .2s linear, opacity .2s linear, transform .2s ease-out, -webkit-transform .2s ease-out
}

.scrollable.active .scrollable-content,
.scrollable.active .scrollable-slider {
    transition: none
}

.scrollable .scrollable-bar {
    position: absolute;
    box-sizing: border-box;
    border-radius: 2px;
    opacity: 0;
    background-color: #f0f0f0;
    background-color: rgba(255, 255, 255, .8);
    border: 2px solid transparent
}

.scrollable:hover .scrollable-bar {
    opacity: .6
}

.scrollable .scrollable-bar:hover {
    opacity: 1
}

.scrollable.active .scrollable-bar {
    opacity: 1
}

.scrollable .scrollable-slider {
    border-radius: 2px;
    background-color: #ccc;
    background-image: linear-gradient(to right, #ccc, #ddd);
    border: 1px solid #333;
    border: 1px solid rgba(0, 0, 0, .5)
}

.scrollable .scrollable-bar-x .scrollable-slider {
    height: 8px
}

.scrollable .scrollable-bar-y .scrollable-slider {
    width: 8px
}

.scroll-viewport {
    overflow: hidden;
    position: relative
}

.scroll-overview {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0
}

.scroll-bar {
    background-color: #d3d3d3;
    border-radius: 5px;
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    transition: .6s ease-in-out opacity;
    height: 100%
}

.scroll-bar.disable {
    display: none
}

.scroll-bar.visible {
    opacity: 1!important
}

.scroll-bar:hover {
    opacity: 1!important
}

.scroll-thumb {
    background-color: gray;
    border-radius: 5px;
    height: 20px;
    width: 13px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 1px
}

body.scroll-no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

ts-shoppingcart-edit-header {
    display: flex;
    align-items: flex-start;
    position: absolute;
    top: -55px;
    left: 0;
    right: 0;
    background-color: #2e2e2e;
    min-height: 55px;
    color: #fff;
    align-items: center
}

@media (max-width:379px) {
    ts-shoppingcart-edit-header {
        top: -76px;
        height: 76px
    }
}

ts-shoppingcart-edit-header>.col1 {
    flex: 0 0;
    padding: 0 25px 7px 35px
}

ts-shoppingcart-edit-header>.col2 {
    flex: 1 1;
    padding: 13px 15px 7px 0
}

ts-shoppingcart-edit-header .cancel {
    color: #fff;
    font-size: 16px
}

ts-shoppingcart-edit-header .times {
    color: #fff;
    font-size: 32px
}

.wrap {
    position: relative;
    overflow: hidden
}

.wrap .slider {
    display: flex;
    left: -85%;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-transform: translateX(85%);
    transform: translateX(85%)
}

.wrap .slider.is-reversing {
    -webkit-transform: translateX(-85%);
    transform: translateX(-85%)
}

.wrap .slider.is-set {
    -webkit-transform: none;
    transform: none;
    transition: -webkit-transform .5s cubic-bezier(.23, 1, .32, 1);
    transition: transform .5s cubic-bezier(.23, 1, .32, 1);
    transition: transform .5s cubic-bezier(.23, 1, .32, 1), -webkit-transform .5s cubic-bezier(.23, 1, .32, 1)
}

.wrap .slider>.slider-item {
    display: flex;
    flex: 0 0 90%;
    order: 2;
    padding: 0;
    margin: 0
}

.wrap .slider>.slider-item.is-ref {
    order: 1
}

.wrap .slider.non-revolving {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    left: 5%
}

.wrap .slider.non-revolving>.slider-item {
    order: 1
}

.wrap .slider.non-revolving>.slider-item.is-ref {
    order: 1
}

.wrap .slider.non-revolving.is-set {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.wrap .control {
    position: absolute;
    display: block;
    color: #222;
    top: 0;
    bottom: 0;
    width: 5%;
    padding: 8px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0NDQ0NDQiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
    background-image: linear-gradient(to top, #444 0, #222 100%)
}

.wrap .control.left {
    left: 0;
    text-align: left
}

.wrap .control.right {
    right: 0;
    text-align: right
}

.wrap .control.right svg {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.wrap .control.disabled {
    display: none
}

tab {
    display: block
}

tabs {
    display: block
}

tabs.fullWidth>header>button {
    flex: 1
}

tabs .borderline {
    background-color: #afafaf;
    height: 1px
}

tabs>header {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    font-size: 16px;
    font-weight: 400;
    -webkit-transform: translateY(2px);
    transform: translateY(2px)
}

tabs>header>button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-bottom: 4px solid transparent
}

tabs>header>button.selected {
    border-bottom: 4px solid
}

tabs>header>button span {
    width: 100%;
    line-height: 25px;
    height: 25px;
    text-align: center;
    padding: 0 25px;
    margin: 10px 0;
    border-right: 1px solid #afafaf
}

tabs>header>button:first-child>span {
    border-left: none
}

tabs>header>button:last-child>span {
    border-right: none
}

.toast {
    position: fixed;
    left: 15px;
    bottom: 15px;
    z-index: 99999;
    padding: 20px;
    height: auto;
    width: auto;
    display: block;
    background-color: #222;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    opacity: 0;
    transition: -webkit-transform 1s ease-in-out, transform 1s ease-in-out, opacity .5s ease-in .8s;
    -webkit-transform: translate3d(0, 100vh, 0);
    transform: translate3d(0, 100vh, 0);
    clear: both
}

.toast.default>.left {
    min-width: 200px
}

.toast.toast-open {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.toast .left {
    float: left;
    padding-right: 16px
}

.toast .right {
    float: left
}

.toast .action {
    color: #779100
}

@media (max-width:320px) {
    .toast {
        left: 5px;
        right: 5px
    }
}

.toaster {
    position: absolute;
    left: 15px;
    bottom: 15px;
    z-index: 99999
}

@media (max-width:360px) {
    .toaster {
        left: 0!important;
        right: 0;
        width: 100%
    }
    .toaster .toast {
        min-width: 100%
    }
    .toaster .toast.toast-opened {
        border-radius: 0;
        margin-bottom: 0
    }
}

label.top {
    display: flex;
    flex-wrap: wrap
}

label.top>span:first-child {
    flex: 0 0 100%;
    font-size: 12px;
    color: #afafaf
}

ts-vogerl {
    cursor: pointer
}

.vogerlWrapper:not(.collapsed) ts-vogerl svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

[circle-count] {
    position: relative
}

[circle-count][circle-count="0"]:after,
[circle-count][circle-count=""]:after {
    display: none
}

[circle-count][circle-count-outside]:after {
    right: -20px
}

[circle-count]:after {
    position: absolute;
    top: -5px;
    right: -1px;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    font-size: 12px;
    padding: 2px;
    color: #fff;
    background-color: #e2002a;
    border-radius: 50%;
    text-align: center;
    content: attr(circle-count)
}

body[state^="root.ticket.feedbackSupport"] #rightColumn {
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0;
    margin: 0;
    flex: 1
}

body[state^="root.ticket.feedbackSupport"] #content.onColumn {
    padding-left: 0
}

body[state^="root.ticket.feedbackSupport"] .subheader .greeting {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    margin-top: 10px
}

body[state^="root.ticket.feedbackSupport"] .subheader .name {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1em;
    margin-top: 6px
}

@media (min-width: 870px) {
    body[state^="root.ticket.feedbackSupport"] #header .subheader[substate-id=""] .backIconWrapper {
        display: none
    }
    body[state^="root.ticket.feedbackSupport"][substate*="."] #header .subheader {
        opacity: 0;
        transition: opacity .15s ease-out
    }
}

body[state^="root.ticket.feedbackSupport"] #header .text.wrapper {
    opacity: 1
}

body[state^="root.ticket.feedbackSupport"] #header .content,
body[state^="root.ticket.feedbackSupport"] #header .logo {
    display: none
}

@media (min-width: 870px) {
    body[state^="root.ticket.feedbackSupport"] #header .logo {
        display: block
    }
}

body[state^="root.ticket.feedbackSupport"] #header .content4 {
    margin-left: 65px
}

@media (min-width: 870px) {
    body[state^="root.ticket.feedbackSupport"] #header .content4 {
        margin-left: 162px
    }
}

feedback-support #feedbackSupport {
    overflow-y: auto;
    font-size: 12px;
    width: 100%
}

@media (min-width: 870px) {
    feedback-support #feedbackSupport {
        flex: 0 0 200vw
    }
}

feedback-support #feedbackSupport.ng-enter {
    transition: opacity .3s cubic-bezier(.23, 1, .675, 1.12), -webkit-transform .3s cubic-bezier(.23, 1, .675, 1.12);
    transition: transform .3s cubic-bezier(.23, 1, .675, 1.12), opacity .3s cubic-bezier(.23, 1, .675, 1.12);
    transition: transform .3s cubic-bezier(.23, 1, .675, 1.12), opacity .3s cubic-bezier(.23, 1, .675, 1.12), -webkit-transform .3s cubic-bezier(.23, 1, .675, 1.12);
    transition-delay: .3s;
    -webkit-transform: translate3d(500px, 0, 0);
    transform: translate3d(500px, 0, 0);
    opacity: 0
}

feedback-support #feedbackSupport.ng-enter.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
}

feedback-support #feedbackSupport>.leftContainer {
    display: flex;
    flex-direction: column;
    background-color: #222;
    position: relative;
    color: #afafaf;
    transition: opacity .3s cubic-bezier(.23, 1, .675, 1.12), -webkit-transform .3s cubic-bezier(.23, 1, .675, 1.12);
    transition: opacity .3s cubic-bezier(.23, 1, .675, 1.12), transform .3s cubic-bezier(.23, 1, .675, 1.12);
    transition: opacity .3s cubic-bezier(.23, 1, .675, 1.12), transform .3s cubic-bezier(.23, 1, .675, 1.12), -webkit-transform .3s cubic-bezier(.23, 1, .675, 1.12)
}

@media (min-width: 870px) {
    feedback-support #feedbackSupport>.leftContainer {
        min-height: 284px;
        float: left;
        width: 334px;
        margin: 32px 0 32px 83px
    }
}

@media (min-width: 870px) {
    feedback-support #feedbackSupport>.leftContainer {
        width: 334px;
        margin-left: 128px
    }
}

@media (min-width: 870px) {
    feedback-support #feedbackSupport>.leftContainer {
        margin-left: 264px
    }
}

@media (min-width:1440px) {
    feedback-support #feedbackSupport>.leftContainer {
        margin-left: 430px
    }
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper {
    padding: 15px 20px 20px 32px
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper h2 {
    color: #fff
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper select {
    height: 29px
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper select option {
    background-color: #222
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper input,
feedback-support #feedbackSupport>.leftContainer .contentWrapper textarea {
    background-color: #222
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper input[type=button] {
    border: 0
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper hr {
    background-color: #383838
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper h2 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper .question {
    background-color: #ed6f00
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper .problem {
    background-color: #e2002a
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper .idea {
    background-color: #6f7fbe
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper .praise {
    background-color: #327175
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper .selectBox .item {
    color: #fff;
    border-width: 2px;
    border-color: transparent;
    border-style: solid;
    position: relative;
    z-index: 20;
    padding: 3px
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper .selectBox .item.selected::before {
    content: '';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 12px;
    height: 12px;
    display: block;
    position: absolute;
    left: 6px;
    bottom: -9px;
    background-color: inherit;
    border-bottom: solid 2px transparent;
    border-right: solid 2px transparent;
    z-index: 10
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper .selectBox .item:focus,
feedback-support #feedbackSupport>.leftContainer .contentWrapper .selectBox .item:hover {
    border-color: #fff
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper .selectBox .item:focus.selected::before,
feedback-support #feedbackSupport>.leftContainer .contentWrapper .selectBox .item:hover.selected::before {
    border-bottom: solid 2px #fff;
    border-right: solid 2px #fff
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper .selectBox .arrow {
    z-index: 20
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper div[name=feedbackSuccess] {
    position: relative;
    top: 20px
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper div[name=feedbackSuccess] input[type=button] {
    background-color: #fff;
    margin-top: 0
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper input[name=firstname] {
    padding-right: 10px;
    padding-left: 10px
}

feedback-support #feedbackSupport>.leftContainer .contentWrapper input[name=firstname]~label {
    padding-left: 10px
}

.side-by-side-form-fields {
    display: flex;
    justify-content: space-between
}

.side-by-side-form-fields.two-fields>div {
    width: 47.5%
}

.side-by-side-form-fields .mat-form-field-wrapper {
    width: 100%
}

.new-account-disclaimer {
    padding: 0;
    margin-top: 10px
}

.new-account-disclaimer a {
    color: #51a351;
    text-decoration: underline
}

.b2b-form .two-inputs-row {
    display: flex
}

.b2b-form .two-inputs-row .zip-code-input {
    width: 30%!important;
    margin-right: 8px
}

.b2b-form .two-inputs-row .city-code-input {
    width: 70%!important
}

.b2b-form .identification-number-inputs {
    padding-top: 8px;
    padding-bottom: 8px
}

body[state^="root.ticket.mycards"] mat-datepicker-toggle {
    font-size: 20px
}

body[state^="root.ticket.mycards"] #mycards mycard-add mat-form-field input.mat-input-element {
    padding: 0
}

body[state^="root.ticket.mycards"] input[type=button][disabled] {
    opacity: .5
}

body[state^="root.ticket.mycards.detail"] #header {
    display: none
}

@media (min-width:719px) {
    body[state^="root.ticket.mycards.detail"] #header {
        display: flex
    }
}

body[state^="root.ticket.mycards.detail"] .subheader {
    background-color: #fff!important
}

body[state^="root.ticket.mycards.detail"] #detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow-y: auto;
    overflow-x: hidden
}

body[state^="root.ticket.mycards.detail"] #detail shared-clock .seconds-hand {
    fill: #222
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail {
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column
}

@media (min-width:479px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail {
        margin: 0
    }
}

@media (min-width:719px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail {
        margin: 0
    }
}

@media (min-width:859px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail {
        margin: 0 55px 0 190px
    }
}

@media (min-width:1023px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail {
        margin: 0 60px 0 262px
    }
}

@media (min-width:1279px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail {
        margin: 0 55px 0 263px
    }
}

@media (min-width:1439px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail {
        margin: 0 255px 0 430px
    }
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .row {
    clear: both;
    overflow: hidden
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .row>.cardDetails {
    margin-top: 20px
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .row>.cardDetails>.col2 {
    background-position: right 20px bottom;
    background-repeat: no-repeat
}

@media (min-width:719px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .row>.cardDetails>.col2 {
        float: left;
        background: 0 0
    }
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .row>.railPlusLogo {
    float: right;
    margin-right: 21px;
    margin-bottom: 30px;
    display: none
}

@media (min-width:719px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .row>.railPlusLogo {
        display: block
    }
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .row>.aztecCode {
    float: right;
    width: 100%;
    text-align: center
}

@media (min-width:719px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .row>.aztecCode {
        width: 203px;
        text-align: left;
        margin: 0 21px 10px 0
    }
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .row>.aztecCode>.imgWrapper {
    width: 100%;
    background-color: #fff;
    margin-top: 30px;
    padding: 10px
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .row>.aztecCode>.imgWrapper>img {
    width: 70%;
    padding: 10px
}

@media (min-width:719px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .row>.aztecCode>.imgWrapper>img {
        width: 100%;
        padding: 0
    }
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .col1 {
    width: 140px;
    float: left;
    text-align: right;
    margin-right: 30px
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .col1 .itemGroup {
    margin-bottom: 15px
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .col1 .itemGroup>div {
    font-size: 12px;
    font-weight: 400;
    line-height: 2.3em;
    height: 20px
}

@media (min-width:719px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .col1 .itemGroup>div {
        font-size: 14px;
        font-weight: 400;
        height: 30px
    }
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .col2 {
    margin-left: 170px
}

@media (min-width:719px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .col2 {
        margin-left: 0
    }
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .col2 .itemGroup {
    margin-bottom: 15px
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .col2 .itemGroup>div {
    font-size: 14px;
    font-weight: 400;
    line-height: 2em;
    height: 20px
}

@media (min-width:719px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail .col2 .itemGroup>div {
        font-size: 18px;
        font-weight: 400;
        height: 30px;
        line-height: 1.5em
    }
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card {
    margin-top: 32px;
    padding-top: 29px;
    color: #fff;
    position: relative;
    overflow: hidden
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #ab0020;
    background-image: url(https://tickets.oebb.at/static/images/views/root/ticket/mycards/detail/backgroundVorteilscard380x95.svg);
    background-position: 0 0;
    background-repeat: repeat-y;
    -webkit-transform: scale(-1);
    transform: scale(-1)
}

@media (max-width:869px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card {
        margin-top: 0;
        border-top: 1px solid #afafaf
    }
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card h1 {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 20px
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card p {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 20px
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card p b {
    font-weight: 700
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card>header {
    font-size: 18px;
    padding-bottom: 20px;
    overflow: hidden;
    border-bottom: 1px solid #e2002a
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card>header .backButton {
    margin-right: 20px
}

@media (min-width:719px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card>header .backButton {
        display: none
    }
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card section {
    padding-top: 20px
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(https://tickets.oebb.at/static/images/views/root/ticket/voucher/background/security.svg);
    background-position: right top;
    background-repeat: no-repeat;
    z-index: -1
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card section .col1 shared-clock {
    width: 80px;
    height: 80px
}

@media (min-width:719px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card section .col1 shared-clock {
        width: 100px;
        height: 100px
    }
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card section .col2 .personTitlePrefix,
body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card section .col2 .personTitleSuffix {
    font-size: 14px
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card section .col2 .personName {
    font-size: 30px;
    font-weight: 400
}

body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card section .col2 .personName .firstName,
body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card section .col2 .personName .lastName {
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    margin-right: 10px
}

@media (min-width:719px) {
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card section .col2 .personName .firstName,
    body[state^="root.ticket.mycards.detail"] #detail section.mycard-detail>.card section .col2 .personName .lastName {
        display: inline;
        overflow: visible
    }
}

mycard-input .validating {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

mycard-input .validating>svg {
    flex: 0 0 15px;
    margin-right: 10px
}

mycard-input .validating>span {
    flex: 1
}

mycard-input [hidden],
mycard-input template {
    display: none!important
}

div.infoBubble[name=addDiscount] section,
mycard-list section {
    color: #afafaf;
    padding: 0
}

div.infoBubble[name=addDiscount] section .subHeader,
mycard-list section .subHeader {
    padding: 0 29px 10px 32px;
    border-bottom: 1px solid #383838
}

div.infoBubble[name=addDiscount] section .subHeader .question,
mycard-list section .subHeader .question {
    padding: 15px 0 21px 0
}

div.infoBubble[name=addDiscount] section .subHeader .search svg,
mycard-list section .subHeader .search svg {
    position: relative;
    top: 3px;
    margin-right: 10px
}

div.infoBubble[name=addDiscount] section .subHeader .search input,
mycard-list section .subHeader .search input {
    background-color: #222
}

div.infoBubble[name=addDiscount] section .subHeader .search input::-ms-clear,
mycard-list section .subHeader .search input::-ms-clear {
    display: none
}

div.infoBubble[name=addDiscount] section .passengerCards,
div.infoBubble[name=addDiscount] section .searchResult,
div.infoBubble[name=addDiscount] section .topTen,
mycard-list section .passengerCards,
mycard-list section .searchResult,
mycard-list section .topTen {
    max-height: 240px;
    overflow-y: auto
}

div.infoBubble[name=addDiscount] section .topTen,
mycard-list section .topTen {
    overflow: hidden
}

div.infoBubble[name=addDiscount] section .topTen>.discountCard,
mycard-list section .topTen>.discountCard {
    background: #2e2e2e
}

div.infoBubble[name=addDiscount] section .topTen .showAllCards div,
mycard-list section .topTen .showAllCards div {
    color: #51a351
}

div.infoBubble[name=addDiscount] section .topTen .listingContainer,
mycard-list section .topTen .listingContainer {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden
}

div.infoBubble[name=addDiscount] section .searchResult,
mycard-list section .searchResult {
    overflow: hidden
}

div.infoBubble[name=addDiscount] section .searchResult .listingContainer,
mycard-list section .searchResult .listingContainer {
    max-height: 240px;
    overflow-y: auto
}

div.infoBubble[name=addDiscount] section .passengerCards,
mycard-list section .passengerCards {
    border-bottom: 1px solid #383838;
    border-top: 1px solid #383838;
    overflow-x: hidden
}

div.infoBubble[name=addDiscount] section .discountCard,
div.infoBubble[name=addDiscount] section .passengerCard,
mycard-list section .discountCard,
mycard-list section .passengerCard {
    position: relative;
    border-bottom: 1px solid #383838;
    padding-right: 29px;
    padding-left: 32px;
    background: #2e2e2e;
    width: 100%
}

div.infoBubble[name=addDiscount] section .discountCard .detailsArrowRight,
div.infoBubble[name=addDiscount] section .discountCard svg[iconname=detailsArrowRight],
div.infoBubble[name=addDiscount] section .passengerCard .detailsArrowRight,
div.infoBubble[name=addDiscount] section .passengerCard svg[iconname=detailsArrowRight],
mycard-list section .discountCard .detailsArrowRight,
mycard-list section .discountCard svg[iconname=detailsArrowRight],
mycard-list section .passengerCard .detailsArrowRight,
mycard-list section .passengerCard svg[iconname=detailsArrowRight] {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px
}

div.infoBubble[name=addDiscount] section .discountCard:last-child,
div.infoBubble[name=addDiscount] section .passengerCard:last-child,
mycard-list section .discountCard:last-child,
mycard-list section .passengerCard:last-child {
    border-bottom: none
}

div.infoBubble[name=addDiscount] section .discountCard>.row,
div.infoBubble[name=addDiscount] section .passengerCard>.row,
mycard-list section .discountCard>.row,
mycard-list section .passengerCard>.row {
    display: flex
}

div.infoBubble[name=addDiscount] section .discountCard>.row.row1,
div.infoBubble[name=addDiscount] section .passengerCard>.row.row1,
mycard-list section .discountCard>.row.row1,
mycard-list section .passengerCard>.row.row1 {
    width: 250px;
    min-height: 48px
}

div.infoBubble[name=addDiscount] section .discountCard>.row>.col1,
div.infoBubble[name=addDiscount] section .passengerCard>.row>.col1,
mycard-list section .discountCard>.row>.col1,
mycard-list section .passengerCard>.row>.col1 {
    display: flex;
    flex: 0 0 29px;
    width: 29px;
    align-items: center;
    min-height: 48px
}

div.infoBubble[name=addDiscount] section .discountCard>.row>.col2,
div.infoBubble[name=addDiscount] section .passengerCard>.row>.col2,
mycard-list section .discountCard>.row>.col2,
mycard-list section .passengerCard>.row>.col2 {
    display: flex;
    flex: 1 1 auto;
    color: #fff;
    align-items: center;
    min-height: 48px
}

div.infoBubble[name=addDiscount] section .discountCard>.row>.col2.form,
div.infoBubble[name=addDiscount] section .passengerCard>.row>.col2.form,
mycard-list section .discountCard>.row>.col2.form,
mycard-list section .passengerCard>.row>.col2.form {
    display: block
}

div.infoBubble[name=addDiscount] section .discountCard>.row>.column-layout,
div.infoBubble[name=addDiscount] section .passengerCard>.row>.column-layout,
mycard-list section .discountCard>.row>.column-layout,
mycard-list section .passengerCard>.row>.column-layout {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start
}

div.infoBubble[name=addDiscount] section .discountCard>.row.row2 input,
div.infoBubble[name=addDiscount] section .passengerCard>.row.row2 input,
mycard-list section .discountCard>.row.row2 input,
mycard-list section .passengerCard>.row.row2 input {
    width: 100%;
    background-color: #2e2e2e
}

div.infoBubble[name=addDiscount] section .discountCard>.row.row2>.col2 .label,
div.infoBubble[name=addDiscount] section .passengerCard>.row.row2>.col2 .label,
mycard-list section .discountCard>.row.row2>.col2 .label,
mycard-list section .passengerCard>.row.row2>.col2 .label {
    margin: 11px 0 17px 0
}

div.infoBubble[name=addDiscount] section .passengerCard .close,
mycard-list section .passengerCard .close {
    opacity: 0;
    transition: opacity .3s ease-in, left .3s ease-in;
    position: absolute;
    right: 7px;
    top: 7px
}

body[state="root.ticket.mycards"] div.infoBubble[name=addDiscount] section .passengerCard .close,
body[state="root.ticket.mycards"] mycard-list section .passengerCard .close {
    fill: #fff
}

div.infoBubble[name=addDiscount] section .passengerCard .close:focus,
mycard-list section .passengerCard .close:focus {
    opacity: 1;
    background-color: #e6e6e6
}

div.infoBubble[name=addDiscount] section .passengerCard>.row.row1 .cardNumber,
div.infoBubble[name=addDiscount] section .passengerCard>.row.row1 .validTo,
mycard-list section .passengerCard>.row.row1 .cardNumber,
mycard-list section .passengerCard>.row.row1 .validTo {
    display: block;
    color: #afafaf;
    font-weight: 400;
    line-height: 1.3em
}

div.infoBubble[name=addDiscount] section .passengerCard.kkmsCard>.row.row1,
mycard-list section .passengerCard.kkmsCard>.row.row1 {
    height: 85px
}

div.infoBubble[name=addDiscount] section .passengerCard.kkmsCard ts-icon>div,
mycard-list section .passengerCard.kkmsCard ts-icon>div {
    display: inherit!important
}

div.infoBubble[name=addDiscount] section .passengerCard:hover .close,
mycard-list section .passengerCard:hover .close {
    opacity: 1
}

div.infoBubble[name=addDiscount] section .passengerCard:focus .close,
mycard-list section .passengerCard:focus .close {
    opacity: 1
}

div.infoBubble[name=addDiscount] .infoBubbleArrow {
    z-index: -1000
}

div.infoBubble[name=addDiscount] .discountListing>section .subHeader .question {
    color: #222
}

body[state^="root.ticket.mycards"] #rightColumn {
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    flex: 1
}

body[state^="root.ticket.mycards"] #content.onColumn {
    padding-left: 0
}

body[state^="root.ticket.mycards"] .subheader {
    background-color: #222
}

body[state^="root.ticket.mycards"] .subheader .greeting {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    margin-top: 10px
}

body[state^="root.ticket.mycards"] .subheader .name {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1em;
    margin-top: 6px
}

body[state^="root.ticket.mycards"] .subheader .name .overflowCheck {
    height: 0;
    visibility: hidden
}

@media (min-width: 870px) {
    body[state^="root.ticket.mycards"] #header .subheader[substate-id=""] .backIconWrapper {
        display: none
    }
    body[state^="root.ticket.mycards"][substate*="."] #header .subheader {
        opacity: 0;
        transition: opacity .15s ease-out
    }
    body[state^="root.ticket.mycards"][substate^="settings."] #header .subheader[substate-id=settings],
    body[state^="root.ticket.mycards"][substate^="personal."] #header .subheader[substate-id=personal],
    body[state^="root.ticket.mycards"][substate^="payment."] #header .subheader[substate-id=payment] {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-delay: .15s
    }
}

body[state^="root.ticket.mycards"] #header .text.wrapper {
    opacity: 1
}

body[state^="root.ticket.mycards"] #header .content,
body[state^="root.ticket.mycards"] #header .logo {
    display: none
}

@media (min-width: 870px) {
    body[state^="root.ticket.mycards"] #header .logo {
        display: block
    }
}

body[state^="root.ticket.mycards"] #header .content4 {
    margin-left: 65px
}

@media (min-width: 870px) {
    body[state^="root.ticket.mycards"] #header .content4 {
        margin-left: 162px
    }
}

#mycards {
    overflow-y: auto;
    font-size: 12px;
    width: 100%
}

#mycards.ng-enter {
    transition: -webkit-transform .3s cubic-bezier(.23, 1, .675, 1.12), transform .3s cubic-bezier(.23, 1, .675, 1.12), opacity .3s cubic-bezier(.23, 1, .675, 1.12);
    transition-delay: .3s;
    -webkit-transform: translate3d(500px, 0, 0);
    transform: translate3d(500px, 0, 0);
    opacity: 0
}

#mycards.ng-enter.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
}

#mycards .leftContainer {
    display: flex;
    flex-direction: column;
    background-color: #222;
    position: relative;
    transition: opacity .3s cubic-bezier(.23, 1, .675, 1.12), -webkit-transform .3s cubic-bezier(.23, 1, .675, 1.12), transform .3s cubic-bezier(.23, 1, .675, 1.12)
}

#mycards .leftContainer .passengerCard .row.row1 {
    padding-top: 10px;
    min-height: 48px
}

#mycards .leftContainer .passengerCard .row.row1 .cardNumber,
#mycards .leftContainer .passengerCard .row.row1 .validTo {
    display: block;
    color: #afafaf;
    font-weight: 400;
    line-height: 1.3em
}

#mycards .leftContainer .passengerCard.kkmsCard>.row.row1 {
    height: 85px
}

@media (min-width: 870px) {
    #mycards .leftContainer {
        min-height: 566px;
        float: left;
        width: 290px;
        margin: 32px 0 32px 83px
    }
}

@media (min-width: 870px) {
    #mycards .leftContainer {
        width: 334px;
        margin-left: 128px
    }
}

@media (min-width: 870px) {
    #mycards .leftContainer {
        margin-left: 264px
    }
}

@media (min-width:1440px) {
    #mycards .leftContainer {
        margin-left: 430px
    }
}

#mycards .leftContainer .overlay {
    z-index: 1
}

#mycards .leftContainer .innerPadLarge {
    padding-left: 64px
}

#mycards .leftContainer .innerPadLargeInverse {
    margin-left: -64px
}

#mycards .leftContainer .innerPadLeft {
    padding-left: 32px
}

#mycards .leftContainer .outerPadLeft {
    margin-left: 32px
}

#mycards .leftContainer .innerPadRight {
    padding-right: 29px
}

#mycards .leftContainer .outerPadRight {
    margin-right: 29px
}

#mycards .rightContainer {
    display: none;
    position: relative
}

@media (min-width: 870px) {
    #mycards .rightContainer {
        display: block;
        float: left;
        width: 290px;
        margin: 32px 0 32px 32px
    }
}

@media (min-width: 870px) {
    #mycards .rightContainer {
        width: 334px
    }
}

#mycards .rightContainer .infoBubble {
    -webkit-transform: scale(.3);
    transform: scale(.3);
    transition-delay: .1s;
    transition: opacity .2s cubic-bezier(.23, 1, .675, 1.12), -webkit-transform .2s cubic-bezier(.23, 1, .675, 1.12), transform .2s cubic-bezier(.23, 1, .675, 1.12)
}

#mycards .rightContainer .infoBubble.visible {
    -webkit-transform: scale(1);
    transform: scale(1)
}

#mycards mycard-add {
    position: absolute
}

#mycards mycard-add.right .infoBubbleArrow {
    margin-top: 2em
}

#mycards mycard-add.bottom .infoBubbleArrow {
    margin-left: 2em
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] {
    width: 100%;
    background-color: #f0f0f0;
    margin-left: 0;
    z-index: 100
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper {
    padding: 0
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper section {
    margin: 0;
    padding: 0 32px 0 32px;
    color: #000
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper section .checkboxButton {
    border-bottom: 1px solid #e6e6e6
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper section .checkboxButton:last-child {
    border-bottom: none
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper section .checkboxButton .col2 {
    padding-right: 29px
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper section .checkboxButton .col2 label {
    white-space: nowrap
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper section .codes {
    color: #afafaf;
    margin: 0;
    padding: 0
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper section .codes span {
    margin-right: 5px
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper section .codes a:focus,
#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper section .codes a:hover {
    color: #c9c9c9
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper header.big {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.1em;
    color: #222;
    padding: 23px 29px 10px 32px
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper header.big #mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper header.big .error {
    color: #ab0020
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper footer {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1em;
    margin-top: 20px;
    padding: 14px 29px 14px 32px
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper footer:before {
    display: none
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .contentWrapper input[type=text] {
    font-size: 16px;
    border: medium none #afafaf;
    border-bottom: 1px solid;
    outline: 0;
    padding-bottom: 6px;
    background: 0 0;
    margin-top: 0;
    caret-color: #000
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .error header.big {
    color: #ab0020
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .ng-invalid.ng-submitted div.input.ng-invalid,
#mycards .infoBubble[name=mergeCardIntoCustomerAccount] .ng-invalid.ng-submitted input.ng-invalid {
    color: #cc3432;
    border-bottom: 1px solid #e2002a
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] div.input-error {
    color: #e2002a;
    margin-bottom: 1em;
    font-size: 12px
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] div.input-info {
    color: #e2002a;
    margin-bottom: 1em
}

#mycards .infoBubble[name=mergeCardIntoCustomerAccount] div.card-input-hint {
    color: #6a6a6a;
    margin-top: 5px
}

#mycards span[hidden] {
    display: none!important
}

#mycards mat-form-field input.mat-input-element {
    margin-top: 5px;
    padding-bottom: 6px
}

#mycards mat-form-field .mat-form-field-label,
#mycards mat-form-field input.mat-input-element {
    font-size: 16px
}

#mycards mat-form-field .mat-form-field-label.mat-empty.mat-form-field-empty {
    color: #868686!important
}

#mycards mat-form-field .mat-form-field-flex .mat-form-field-infix {
    padding: .4375em 0 0 0!important
}

#mycards mat-form-field .mat-input-element {
    caret-color: #fff
}

#mycards mat-form-field .mat-form-field-label:not(.mat-form-field-empty) {
    color: #7fbb38!important
}

#mycards mat-form-field .mat-form-field-underline {
    background-color: #d7d7d7!important
}

#mycards mat-form-field .mat-form-field-ripple {
    background-color: #7fbb38!important
}

#mycards mat-form-field .mat-form-field-appearance-legacy .mat-form-field-label {
    color: #868686
}

#mycards mat-form-field span.mat-form-field-label-wrapper {
    top: -1.2em
}

#mycards mat-form-field.dob span.mat-form-field-label-wrapper {
    top: -1em;
    line-height: 1.225;
    padding-top: 1.04375em
}

#mycards mat-form-field .mat-form-field-wrapper {
    padding-bottom: 1.25em;
    width: 100%
}

#mycards mat-form-field [name=close] {
    right: 6px!important;
    top: 8px!important
}

#mycards .form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground .mat-form-field-invalid .mat-form-field-ripple {
    background-color: #ff7b8f!important
}

#mycards .form:not(ng-submitted):not(.showValidationErrorsAfterSubmit).onDarkBackground .mat-form-field-invalid .mat-form-field-label:not(.mat-form-field-empty) {
    color: #ff7b8f!important
}

.infoBubble[name=myCouponsDetail] {
    width: 100%;
    background-color: #2e2e2e;
    position: relative;
    margin-left: 0;
    z-index: 100
}

.infoBubble[name=myCouponsDetail].border {
    border: none
}

.infoBubble[name=myCouponsDetail].border>.contentWrapper,
.infoBubble[name=myCouponsDetail].border>.infoBubbleArrow {
    border: none
}

.infoBubble[name=myCouponsDetail]:focus {
    background-color: #2e2e2e
}

@media (min-width: 870px) {
    .infoBubble[name=myCouponsDetail]:focus {
        background-color: #222
    }
}

@media (min-width: 870px) {
    .infoBubble[name=myCouponsDetail] {
        background-color: #222
    }
}

.infoBubble[name=myCouponsDetail] .contentWrapper {
    padding: 20px;
    border-color: #222!important
}

.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper {
    padding: 5px;
    background: url(https://tickets.oebb.at/static/images/components/coupon/voucherBg.svg) right top repeat-y;
    background-size: 100%
}

.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper header {
    font-size: 20px;
    font-weight: 400;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    color: #fff;
    margin: 20px;
    padding: 0 0 10px;
    border-bottom: 1px solid #878787
}

.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper header .voucherIcon {
    flex: 0 1 35px;
    text-align: left
}

.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper header .logoIcon {
    flex: 0 1;
    text-align: left;
    min-width: 46px;
    min-height: 18px;
    background-image: url(https://tickets.oebb.at/static/images/components/header/oebb-logo-30-80.svg);
    background-repeat: no-repeat;
    background-size: 100% auto
}

.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper header .title {
    flex: 1;
    align-self: flex-end;
    font-size: 18px;
    text-align: right;
    min-width: 1px
}

.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper section {
    color: #000;
    margin: 20px
}

.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper section .couponDates,
.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper section .couponValues {
    border-bottom: 1px solid #878787;
    margin-bottom: 20px;
    padding-bottom: 20px
}

.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper section .couponDates div,
.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper section .couponValues div {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.5em
}

.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper section .couponDates div label,
.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper section .couponValues div label {
    flex: 0 1;
    color: #afafaf;
    white-space: nowrap
}

.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper section .couponDates div span,
.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper section .couponValues div span {
    flex: 1 0;
    text-align: right;
    color: #fff
}

.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper section .couponDates div span .amount,
.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper section .couponValues div span .amount {
    color: #508546
}

.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper section .couponFooter {
    text-align: left;
    color: #afafaf
}

.infoBubble[name=myCouponsDetail] .contentWrapper .couponWrapper section .couponFooter a {
    text-decoration: underline;
    word-wrap: break-word
}

.infoBubble[name=myCouponsDetail] .contentWrapper footer {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1em;
    border: none;
    text-transform: uppercase
}

.infoBubble[name=myCouponsDetail] .contentWrapper footer:before {
    display: none
}

mycoupons .myCouponInputWrapper .inputSection {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d7d7d7;
    margin-bottom: 10px
}

mycoupons .myCouponInputWrapper .inputSection>.couponInput {
    background-color: transparent;
    border: none;
    color: #fff;
    line-height: 1.2em;
    min-width: 200px;
    margin-bottom: 3px;
    padding-right: 10px;
    font-size: 16px;
    flex: 1 1 auto
}

mycoupons .myCouponInputWrapper .inputSection .clearInput {
    fill: #878787;
    flex: 0 0 15px
}

mycoupons .myCouponInputWrapper .errorSection .error {
    font-size: 12px;
    color: #d40027
}

mycoupons .infoBubble[name=myCouponsAdd] {
    width: 100%;
    background-color: #2e2e2e;
    position: relative;
    margin-left: 0;
    z-index: 100
}

mycoupons .infoBubble[name=myCouponsAdd].border {
    border: none
}

mycoupons .infoBubble[name=myCouponsAdd].border>.contentWrapper,
mycoupons .infoBubble[name=myCouponsAdd].border>.infoBubbleArrow {
    border: none
}

mycoupons .infoBubble[name=myCouponsAdd]:focus {
    background-color: #2e2e2e
}

@media (min-width: 870px) {
    mycoupons .infoBubble[name=myCouponsAdd]:focus {
        background-color: #222
    }
}

@media (min-width: 870px) {
    mycoupons .infoBubble[name=myCouponsAdd] {
        background-color: #222
    }
}

mycoupons .infoBubble[name=myCouponsAdd] .contentWrapper {
    padding: 15px;
    border-color: #222!important
}

mycoupons .infoBubble[name=myCouponsAdd] .contentWrapper .couponInput {
    width: 100%;
    padding-bottom: 1px
}

mycoupons .infoBubble[name=myCouponsAdd] .contentWrapper header {
    padding: 0
}

mycoupons .infoBubble[name=myCouponsAdd] .contentWrapper header .title {
    color: #8782be;
    font-size: 18px
}

mycoupons .infoBubble[name=myCouponsAdd] .contentWrapper header .description {
    font-size: 12px;
    color: #fff;
    line-height: 1em
}

mycoupons .infoBubble[name=myCouponsAdd] .contentWrapper section {
    margin: 30px 0 23px 0
}

mycoupons .infoBubble[name=myCouponsAdd] .contentWrapper footer {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1em;
    border: none;
    text-transform: uppercase
}

mycoupons .infoBubble[name=myCouponsAdd] .contentWrapper footer:before {
    display: none
}

mycoupons .myCouponInputWrapper .inputSection {
    border: none
}

mycoupons mat-form-field .mat-form-field-label,
mycoupons mat-form-field input.mat-input-element {
    color: #fff!important;
    font-size: 16px
}

mycoupons mat-form-field .mat-form-field-label.mat-empty.mat-form-field-empty {
    color: #868686!important
}

mycoupons mat-form-field .mat-input-element {
    caret-color: #fff
}

mycoupons mat-form-field .mat-form-field-label:not(.mat-form-field-empty) {
    color: #7fbb38!important
}

mycoupons mat-form-field .mat-form-field-ripple,
mycoupons mat-form-field .mat-form-field-underline {
    background-color: #d7d7d7!important
}

mycoupons mat-form-field .mat-form-field-appearance-legacy .mat-form-field-label {
    color: #868686
}

mycoupons mat-form-field span.mat-form-field-label-wrapper {
    top: -1.25em;
    line-height: 1.225
}

mycoupons mat-form-field .mat-form-field-wrapper {
    padding-bottom: 1.25em;
    width: 100%
}

mycoupons mat-form-field [name=close] {
    right: 6px!important;
    top: 8px!important
}

.myCoupon {
    background: url(https://tickets.oebb.at/static/images/components/coupon/voucherBg.svg) right top repeat-y;
    background-size: 99%;
    margin-bottom: 15px;
    padding: 15px
}

.myCoupon .couponHeader {
    display: flex;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px
}

.myCoupon .couponHeader .title {
    flex: 1 0;
    color: #fff
}

.myCoupon .couponHeader .amount {
    flex: 0 0 80px;
    text-align: right;
    color: #508546
}

.myCoupon .couponInfo {
    color: #8782be;
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.myCoupon .couponInfo p {
    margin: 0
}

.myCoupon .couponInfo .icon {
    flex: 0 0 30px;
    fill: #8782be
}

.myCoupon .couponInfo .description {
    flex: 1 0
}

.myCoupon .couponContent {
    display: flex;
    align-items: center
}

.myCoupon .couponContent .left {
    flex: 1 1
}

.myCoupon .couponContent .left label {
    color: #afafaf
}

.myCoupon .couponContent .left span {
    color: #fff
}

.myCoupon .couponContent .right {
    text-align: right;
    flex: 0 0 50px
}

.myCoupon.locked .couponHeader .amount,
.myCoupon.locked .couponHeader .title {
    color: #afafaf
}

.myCoupon.locked .couponInfo .icon {
    fill: #d40027
}

.myCoupon.locked .couponInfo .description {
    color: #d40027
}

.myCoupon.locked .couponContent .left span {
    color: #afafaf
}

body[state^="root.ticket.mycoupons"] #rightColumn {
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    flex: 1
}

body[state^="root.ticket.mycoupons"] #content.onColumn {
    padding-left: 0
}

@media (min-width: 870px) {
    body[state^="root.ticket.mycoupons"] #header .subheader[substate-id=""] .backIconWrapper {
        display: none
    }
}

body[state^="root.ticket.mycoupons"] #header .text.wrapper {
    opacity: 1
}

body[state^="root.ticket.mycoupons"] #header .content,
body[state^="root.ticket.mycoupons"] #header .logo {
    display: none
}

@media (min-width: 870px) {
    body[state^="root.ticket.mycoupons"] #header .logo {
        display: block
    }
}

body[state^="root.ticket.mycoupons"] #header .content4 {
    margin-left: 65px
}

@media (min-width: 870px) {
    body[state^="root.ticket.mycoupons"] #header .content4 {
        margin-left: 162px
    }
}

#mycoupons {
    overflow-y: auto;
    font-size: 12px;
    width: 100%
}

@media (min-width: 870px) {
    #mycoupons {
        flex: 0 0 200vw
    }
}

#mycoupons.ng-enter {
    transition: -webkit-transform .3s cubic-bezier(.23, 1, .675, 1.12), transform .3s cubic-bezier(.23, 1, .675, 1.12), opacity .3s cubic-bezier(.23, 1, .675, 1.12);
    transition-delay: .3s;
    -webkit-transform: translate3d(500px, 0, 0);
    transform: translate3d(500px, 0, 0);
    opacity: 0
}

#mycoupons.ng-enter.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
}

#mycoupons .leftContainer {
    display: flex;
    flex-direction: column;
    background-color: #222;
    position: relative;
    transition: opacity .3s cubic-bezier(.23, 1, .675, 1.12), -webkit-transform .3s cubic-bezier(.23, 1, .675, 1.12), transform .3s cubic-bezier(.23, 1, .675, 1.12)
}

@media (min-width: 870px) {
    #mycoupons .leftContainer {
        min-height: 566px;
        float: left;
        width: 290px;
        margin: 32px 0 32px 0
    }
}

@media (min-width: 870px) {
    #mycoupons .leftContainer {
        width: 334px
    }
}

#mycoupons .leftContainer .overlay {
    z-index: 1
}

#mycoupons .leftContainer .innerPadLarge {
    padding-left: 64px
}

#mycoupons .leftContainer .innerPadLargeInverse .couponAdd,
#mycoupons .leftContainer .innerPadLargeInverse .couponDetail {
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: 20px
}

#mycoupons .leftContainer .innerPadLeft {
    padding-left: 32px
}

#mycoupons .leftContainer .outerPadLeft {
    margin-left: 32px
}

#mycoupons .leftContainer .innerPadRight {
    padding-right: 29px
}

#mycoupons .leftContainer .outerPadRight {
    margin-right: 29px
}

#mycoupons .leftContainer>.myCouponsContainer {
    padding: 20px 25px 25px 25px;
    min-height: calc(100% - 90px)
}

#mycoupons .leftContainer>.myCouponsContainer>.myCouponsHeader {
    display: flex;
    align-items: flex-start
}

#mycoupons .leftContainer>.myCouponsContainer>.myCouponsHeader>.myCouponsIcon {
    fill: #8782be;
    flex: 0 0 45px
}

#mycoupons .leftContainer>.myCouponsContainer>.myCouponsHeader>.myCouponsDescription {
    margin-top: 5px;
    flex: 1 0
}

#mycoupons .leftContainer>.myCouponsContainer>.myCouponsHeader>.myCouponsDescription h3 {
    color: #8782be;
    margin: 0 0 5px 0;
    font-weight: 400;
    font-size: 18px
}

#mycoupons .leftContainer>.myCouponsContainer>.myCouponsHeader>.myCouponsDescription p {
    color: #fff;
    margin-top: 0
}

#mycoupons .leftContainer>.myCouponsContainer .myCouponsActions .myCouponsAdd {
    display: flex;
    align-items: center
}

#mycoupons .leftContainer>.myCouponsContainer .myCouponsActions .myCouponsAdd .addCouponIcon {
    flex: 0 0 55px;
    text-align: right
}

#mycoupons .leftContainer>.myCouponsContainer .myCouponsActions .myCouponsAdd .addCouponIcon svg {
    fill: #508546
}

#mycoupons .leftContainer>.myCouponsContainer .myCouponsActions .myCouponsAdd button {
    flex: 1 0;
    font-size: 16px;
    color: #508546;
    padding-left: 10px;
    text-transform: uppercase
}

#mycoupons .leftContainer>.myCouponsContainer .myCouponsListing {
    padding: 15px
}

#mycoupons .leftContainer>.myCouponsContainer .myCouponsListing .noCoupons {
    color: #fff;
    font-size: 14px
}

#mycoupons .leftContainer>.myCouponsContainer hr {
    margin-top: 0;
    margin-bottom: 15px;
    background-color: #7d7d7d
}

#mycoupons .rightContainer {
    display: none
}

@media (min-width: 870px) {
    #mycoupons .rightContainer {
        display: block;
        float: left;
        width: 290px;
        margin: 32px 0 32px 32px
    }
}

@media (min-width: 870px) {
    #mycoupons .rightContainer {
        width: 334px
    }
}

#mycoupons .rightContainer .infoBubble {
    -webkit-transform: scale(.3);
    transform: scale(.3);
    transition-delay: .1s;
    transition: opacity .2s cubic-bezier(.23, 1, .675, 1.12), -webkit-transform .2s cubic-bezier(.23, 1, .675, 1.12), transform .2s cubic-bezier(.23, 1, .675, 1.12)
}

#mycoupons .rightContainer .infoBubble.visible {
    -webkit-transform: scale(1);
    transform: scale(1)
}

mycoupons mycoupon .couponContent .left span {
    margin: 5px
}

mycoupons .myCoupon {
    cursor: pointer
}

@media (max-width:869px) {
    mycoupons mycoupon coupon-detail {
        display: inherit
    }
}

@media (min-width:719px) {
    mycoupons mycoupon coupon-detail {
        display: none
    }
}

mycoupons mycoupon coupon-detail footer input {
    margin-right: 1em
}

@media (min-width:719px) {
    mycoupons .myCouponsActions coupon-popover {
        display: none
    }
}

mycoupons coupon-detail {
    transition: all .3s;
    display: block;
    margin: 0
}

mycoupons coupon-detail.right .infoBubbleArrow {
    margin-left: 0;
    margin-top: 3em
}

mycoupons coupon-detail.bottom .infoBubbleArrow {
    margin-left: 2.3em;
    margin-top: 2px
}

mycoupons coupon-popover {
    display: block;
    margin: 0
}

mycoupons coupon-popover.right .infoBubbleArrow {
    margin-left: 1px;
    margin-top: 2em
}

mycoupons coupon-popover.bottom .infoBubbleArrow {
    margin-left: 2.3em;
    margin-top: 0
}

@-webkit-keyframes RevealAnimation {
    0% {
        padding-left: 100px;
        opacity: 0
    }
    100% {
        padding-left: 0;
        opacity: 1
    }
}

@keyframes RevealAnimation {
    0% {
        padding-left: 100px;
        opacity: 0
    }
    100% {
        padding-left: 0;
        opacity: 1
    }
}

mycoupons .reveal-animation {
    -webkit-animation: RevealAnimation 1s;
    animation: RevealAnimation 1s
}

.couponInputWrapper .couponInput {
    background-color: transparent;
    min-width: 200px;
    text-align: right
}

.couponInputWrapper>.error {
    font-size: 12px;
    color: #d40027;
    margin-top: 5px
}

.lang-chooser {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    border-bottom: 1px solid #484848
}

.lang-chooser .lang-elem {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    cursor: pointer;
    color: #fff;
    padding: 16px 10px 16px 10px
}

.lang-chooser .lang-elem .lang-icon {
    min-width: 30px;
    padding-left: 5px;
    display: flex;
    align-items: center
}

.lang-chooser .lang-elem .lang-name {
    font-size: 18px;
    padding-left: 15px
}

.lang-chooser .lang-elem:focus,
.lang-chooser .lang-elem:hover {
    background-color: #2a2a2a;
    outline: 0
}

.lang-chooser .lang-elem.ng-enter,
.lang-chooser .lang-elem.ng-leave {
    transition: all ease-in-out .2s
}

.lang-chooser .lang-elem.ng-enter,
.lang-chooser .lang-elem.ng-leave.ng-leave-active {
    height: 0;
    padding-bottom: 0;
    opacity: 0
}

.lang-chooser .lang-elem.ng-enter.ng-enter-active,
.lang-chooser .lang-elem.ng-leave {
    height: 31px;
    padding-bottom: 11px;
    opacity: 1
}

#off-canvas {
    overflow-y: auto;
    overflow-x: hidden;
    background: #222;
    height: 100vh;
    padding-bottom: 100px;
    width: 272px;
    flex: 0 0 272px
}

@media (min-width:380px) {
    #off-canvas {
        flex: 0 0 315px;
        width: 315px;
        padding-bottom: 0
    }
}

#off-canvas .off-canvas-container {
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap
}

#off-canvas .off-canvas-container .close {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    padding-right: 10px
}

#off-canvas .off-canvas-container .close svg {
    fill: #fff
}

#off-canvas .off-canvas-container .close:focus svg,
#off-canvas .off-canvas-container .close:hover svg {
    fill: #939393;
    cursor: pointer
}

#off-canvas .off-canvas-container .close:active svg {
    fill: #797979
}

#off-canvas .off-canvas-container .off-canvas-footer {
    min-height: 210px
}

#off-canvas .off-canvas-container .off-canvas-footer .footer-link {
    font-size: 16px;
    padding: 9px 0 9px 55px
}

#off-canvas .off-canvas-container .off-canvas-footer .footer-link:hover {
    cursor: pointer
}

@media (min-width:380px) {
    #off-canvas .off-canvas-container .off-canvas-footer .footer-link {
        font-size: 18px
    }
}

pending-payment-dialog .animationContainer {
    background: url(https://tickets.oebb.at/static/images/loadingIcon/loadingAnimation.gif) no-repeat center center;
    width: 100%;
    height: 150px;
    margin-bottom: 20px
}

.pendingPaymentScreen mat-dialog-container {
    background: #f0f0f0
}

.travelActions {
    flex: 1 0;
    margin-left: 48px;
    margin-top: 26px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: opacity .3s ease-in .1s, left .3s ease-in .1s
}

.travelActions.ng-hide {
    left: -60px;
    opacity: 0
}

.travelActions>.invertRelation {
    color: #fff;
    text-align: right;
    padding: 0 0 20px 20px;
    font-size: 12px
}

.travelActions>.invertRelation>button {
    color: #fff;
    text-shadow: 0 0 3px #222;
    padding: 8px;
    background-color: rgba(34, 34, 34, .6)
}

.travelActions>.invertRelation>button:focus,
.travelActions>.invertRelation>button:hover {
    color: #e6e6e6
}

.travelActions>.invertRelation>button:active {
    color: #ccc
}

@media (min-width: 870px) {
    .travelActions>.invertRelation {
        max-width: 463px;
        padding-right: 0
    }
    body[state="root.ticket.travel"] .travelActions>.invertRelation,
    body[state="root.ticket.timetable"] .travelActions>.invertRelation {
        max-width: 512px
    }
}

@media (min-width: 870px) {
    .travelActions {
        margin-left: 20px;
        margin-top: 43px
    }
}

@media (min-width: 870px) and (max-width:869px) {
    body[state="root.ticket.travel"] .travelActions,
    body[state="root.ticket.timetable"] .travelActions {
        flex: 0 0 326px;
        margin-right: 32px
    }
}

@media (min-width: 870px) {
    .travelActions {
        margin-left: 37px;
        margin-right: 32px
    }
}

@media (min-width: 870px) {
    .travelActions {
        margin-right: 45px;
        margin-left: 57px
    }
    body[state="root.ticket.travel"] .travelActions,
    body[state="root.ticket.timetable"] .travelActions {
        margin-left: 8px
    }
}

@media (min-width:1280px) {
    .travelActions {
        margin-left: 118px
    }
    body[state="root.ticket.travel"] .travelActions,
    body[state="root.ticket.timetable"] .travelActions {
        margin-left: 113px
    }
}

@media (min-width:1440px) {
    .travelActions {
        margin-left: 118px;
        margin-right: 0
    }
}

.travelActions .travelAction {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: nowrap;
    min-height: 48px;
    position: relative
}

@media (min-width: 870px) {
    .travelActions .travelAction {
        max-width: 463px
    }
    body[state="root.ticket.travel"] .travelActions .travelAction,
    body[state="root.ticket.timetable"] .travelActions .travelAction {
        max-width: 512px
    }
}

.travelActions .travelAction>.icon {
    flex: 0 0 48px;
    width: 48px;
    min-height: 48px;
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: 100% auto;
    z-index: 2
}

@media (min-width:380px) {
    .travelActions .travelAction>.icon {
        width: 53px;
        min-height: 53px;
        flex: 0 0 53px
    }
}

.travelActions .travelAction>.delete {
    position: absolute;
    width: 48px;
    min-height: 48px;
    left: 0;
    top: 16px;
    opacity: 0;
    z-index: 1;
    transition: left ease-out .3s, opacity ease-out .3s
}

@media (min-width:380px) {
    .travelActions .travelAction>.delete {
        width: 53px;
        min-height: 53px;
        left: 0;
        top: 18px
    }
}

.travelActions .travelAction>.delete.active {
    left: -30px;
    opacity: 1;
    transition: left ease-out .3s, opacity ease-out .3s
}

@media (min-width:380px) {
    .travelActions .travelAction>.delete.active {
        left: -35px
    }
}

.travelActions .travelAction>.text {
    flex: 1 1;
    background: #fff;
    padding: 5px 8px 2px 15px;
    min-width: 0;
    color: #222
}

@media (min-width:380px) {
    .travelActions .travelAction>.text {
        padding: 6px 8px 3px 18px
    }
}

.travelActions .travelAction>.text>.title {
    font-size: 18px;
    font-weight: 700;
    margin: 0
}

.travelActions .travelAction>.text>.via {
    margin: 0 0 5px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.travelActions .travelAction>.text>.description {
    font-size: 12px;
    margin: 0
}

.travelActions .travelAction.ng-enter {
    opacity: 0;
    -webkit-transform: translate3d(50vw, 0, 0);
    transform: translate3d(50vw, 0, 0);
    transition: all ease-out .3s, opacity ease-out .3s
}

.travelActions .travelAction.ng-enter.ng-enter-active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.travelActions .travelAction.ng-leave {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: all ease-out .4s, opacity ease-out .4s
}

.travelActions .travelAction.ng-leave.ng-leave-active {
    opacity: 0;
    -webkit-transform: translate3d(0, 50vh, 0);
    transform: translate3d(0, 50vh, 0)
}

.travelActions .travelAction.ng-enter-stagger {
    transition-delay: .3s
}

.travelActions>.icon-wrapper {
    height: 29px
}

.travelActions>.loading {
    max-width: 463px
}

body[state="root.ticket.travel"] .travelActions>.loading,
body[state="root.ticket.timetable"] .travelActions>.loading {
    max-width: 512px
}

body[state^="root.ticket.quickstart"] #rightColumn {
    overflow-y: auto
}

.travelActionWrapper button {
    width: 100%
}

@media (min-width: 870px) {
    .travelActionWrapper button {
        max-width: 463px
    }
    body[state="root.ticket.travel"] .travelActionWrapper button,
    body[state="root.ticket.timetable"] .travelActionWrapper button {
        max-width: 512px
    }
}

.travelActionWrapper ts-icon {
    padding: 0 3px
}

.travelActionWrapper .via .label {
    padding-right: 5px
}

body[state^="root.vc.personal"] #personal {
    overflow-y: auto;
    width: 100%;
    z-index: 1
}

vc-personal-check {
    padding-left: 64px;
    padding-right: 64px;
    background-color: #fff;
    color: #222;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100vw
}

@media (min-width: 870px) {
    vc-personal-check {
        min-height: 566px;
        width: 434px;
        margin: 32px 0 32px 83px;
        float: left
    }
}

@media (min-width: 870px) {
    vc-personal-check {
        margin-left: 128px;
        width: 434px
    }
}

@media (min-width: 870px) {
    vc-personal-check {
        margin-left: 264px;
        width: 434px
    }
}

@media (min-width:1440px) {
    vc-personal-check {
        width: 434px;
        margin-left: 430px
    }
}

vc-personal-check h1 {
    margin: 17px 0 15px 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25em
}

vc-personal-check h2 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

vc-personal-check .subtitle {
    margin: 15px 0 26px 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em
}

vc-personal-check .note {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    margin: 10px 0 34px 0
}

@media (min-width: 870px) {
    vc-personal-check .note {
        font-weight: 400
    }
}

vc-personal-check .subtext {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    margin-top: 2px
}

vc-personal-check .disclaimer-details-link-section {
    padding-left: 32px
}

vc-personal-check .mat-form-field {
    font-size: 16px
}

vc-personal-check .saluation-select,
vc-personal-check .zip-code-input-field {
    width: 80px;
    margin-right: 10px
}

vc-personal-check vc-personal-newsletter {
    display: block;
    margin-top: 10px
}

vc-personal-check a {
    color: #51a351
}

vc-personal-check .mat-form-field-infix {
    width: auto
}

vc-personal-check .finish-button-wrapper {
    flex: 0 1 auto;
    display: flex;
    margin: 30px auto;
    fill: #fff;
    background-color: #51a351
}

vc-personal-check .finish-button-wrapper:hover {
    background-color: #4e844e
}

vc-personal-check .finish-button-wrapper:disabled {
    background-color: #afafaf
}

vc-personal-check .finish-button-wrapper .finish-text {
    color: #fff;
    font-size: 14px
}

ticket-archive-b2b-hotlinks {
    background-color: #2E3A44
}

ticket-archive-b2b-hotlinks button {
    margin-left: 20px;
    text-decoration: underline;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #fff
}

.ticket-archive-body-container {
    width: 100%
}

.ticket-archive-body-container .ticket-archive-body {
    width: 100%
}

.ticket-archive-body-container .ticket-archive-hotlinks {
    width: 100%;
    background-color: #2E3A44
}

.ticket-archive-header {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row
}

.ticket-archive-header .ticket-archive-header-item {
    background-color: rgba(35, 35, 35, .8);
    overflow: hidden;
    overflow-wrap: break-word;
    width: 100%;
    justify-content: space-around;
    height: 60px;
    padding: 10px 10px 10px 5px;
    flex-direction: column;
    cursor: pointer
}

.ticket-archive-header .ticket-archive-header-item .ticket-archive-header-item-data-container {
    display: flex;
    justify-content: space-around;
    flex-direction: column
}

.ticket-archive-header .ticket-archive-header-item .ticket-archive-header-item-data-container .ticket-archive-header-item-image {
    fill: #afafaf;
    opacity: .8;
    display: flex;
    margin: 0 auto;
    width: 25px;
    height: 25px
}

.ticket-archive-header .ticket-archive-header-item .ticket-archive-header-item-data-container .ticket-archive-header-item-text {
    padding: 0;
    margin: 0;
    color: #afafaf;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-size: 12px
}

.ticket-archive-header .ticket-archive-header-item.selected {
    background-color: rgba(35, 35, 35, .8);
    border-bottom: 4px solid #fff
}

.ticket-archive-header .ticket-archive-header-item.selected .ticket-archive-header-item-data-container .ticket-archive-header-item-image {
    fill: #fff;
    opacity: 1;
    margin: 0 auto;
    width: 25px;
    height: 25px
}

.ticket-archive-header .ticket-archive-header-item.selected .ticket-archive-header-item-data-container .ticket-archive-header-item-text {
    color: #fff
}

.ticket-archive-header .ticket-archive-header-item:hover {
    background-color: rgba(35, 35, 35, .8);
    border-bottom: 4px solid #fff
}

.ticket-archive-header .ticket-archive-header-item:hover .ticket-archive-header-item-data-container .ticket-archive-header-item-image {
    opacity: 1
}

.ticket-archive-header .ticket-archive-header-item:hover .ticket-archive-header-item-data-container .ticket-archive-header-item-text {
    color: #fff
}

.ticket-archive-header .ticket-archive-header-item:hover .ticket-archive-header-item-data-container p {
    font-size: 12px
}

.extendedContainer {
    background: #fff;
    display: flex;
    justify-content: space-around;
    flex-direction: column
}

.extendedContainer .loading-icon {
    fill: #868686
}

.extendedContainer.grey {
    background: #e6e6e6
}

.extendedContainer .closeExtendedCard {
    cursor: pointer;
    background: #fff;
    height: 40px;
    padding: 10px;
    width: 55px!important;
    padding-bottom: 0;
    margin-top: 10px;
    border-left: 1px solid #d7d7d7;
    display: flex;
    justify-content: space-around
}

.extendedContainer .closeExtendedCard .closeicon {
    fill: #7d7d7d
}

.extendedContainer .closeExtendedCard .closeicon svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.extendedContainer .closeExtendedCard.grey {
    background: #e6e6e6
}

.extendedContainer .infoCardWrapper {
    display: flex;
    justify-content: space-around
}

.extendedContainer .infoCardWrapper.grey {
    background: #e6e6e6
}

.extendedContainer .infoCardWrapper .cardWrapper100 {
    width: 100%;
    margin: 0
}

.extendedContainer .infoCardWrapper .cardWrapper100 .infocard {
    background: unset;
    background-image: unset;
    background-color: unset
}

.extendedContainer .infoCardWrapper .cardWrapper100 .infocard:focus,
.extendedContainer .infoCardWrapper .cardWrapper100 .infocard:hover {
    background: unset;
    background-image: unset;
    background-color: unset
}

.extendedContainer .infoCardWrapper .cardWrapper100 .infocard.rtfinfocard {
    background: unset;
    background-image: unset;
    background-color: unset
}

.extendedContainer .infoCardWrapper .cardWrapper100 .infocard.rtfinfocard:focus,
.extendedContainer .infoCardWrapper .cardWrapper100 .infocard.rtfinfocard:hover {
    background: unset;
    background-image: unset;
    background-color: unset
}

.extendedContainer .infoCardWrapper .cardWrapper100 .infocard.rfinfocard {
    background: unset;
    background-image: unset;
    background-color: unset
}

.extendedContainer .infoCardWrapper .cardWrapper100 .infocard.rfinfocard:focus,
.extendedContainer .infoCardWrapper .cardWrapper100 .infocard.rfinfocard:hover {
    background: unset;
    background-image: unset;
    background-color: unset
}

.extendedContainer .infoCardWrapper .cardWrapper100 .infocard.rtainfocard {
    background: unset;
    background-image: unset;
    background-color: unset
}

.extendedContainer .infoCardWrapper .cardWrapper100 .infocard.rtainfocard:focus,
.extendedContainer .infoCardWrapper .cardWrapper100 .infocard.rtainfocard:hover {
    background: unset;
    background-image: unset;
    background-color: unset
}

.infoCard-item {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 75px;
    max-height: 75px;
    background: #fff;
    flex-direction: column;
    padding: 3px
}

.infoCard-item.grey {
    background: #e6e6e6
}

.infoCard-item.extended {
    height: auto
}

.infoCard-item .row {
    display: flex;
    justify-content: space-around;
    flex-direction: row
}

.infoCard-item .row .item {
    display: flex;
    justify-content: flex-start;
    flex-direction: column
}

.infoCard-item .row .item p {
    margin: 0;
    color: #000;
    font-weight: 700
}

.infoCard-item .row .item p.sub {
    font-size: 12px;
    color: #000;
    opacity: .7;
    font-weight: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px
}

.infoCard-item .row .item.withMargin {
    margin-left: 15px;
    margin-bottom: 5px;
    width: 100%;
    justify-content: flex-end
}

.infoCard-item .row .item.withMargin .from-to {
    display: flex;
    min-width: 0
}

.infoCard-item .row .item.withMargin .from-to p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95px
}

.infoCard-item .row .item.withMargin .from-to .from-to-icon {
    fill: #7d7d7d;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}

.infoCard-item .row .item.end {
    border-left: 1px solid #d7d7d7;
    cursor: pointer;
    justify-content: flex-end;
    flex-direction: row;
    padding: 15px;
    margin-left: 10px
}

.infoCard-item .row .item.end .ticket-archive-item-image {
    fill: #7d7d7d;
    display: flex;
    justify-content: space-around
}

.month-bar {
    width: 100%;
    background: rgba(35, 35, 35, .9);
    color: #fff;
    padding: 5px;
    cursor: pointer;
    display: flex
}

.month-bar p {
    margin: 0
}

.load-more-item {
    width: 100%;
    background: rgba(35, 35, 35, .9);
    color: #fff;
    padding: 5px;
    cursor: pointer;
    justify-content: center;
    display: flex
}

.load-more-item p {
    margin: 0
}

.infoCard-container {
    max-height: 62vh;
    overflow-y: auto;
    -ms-overflow-style: scrollbar;
    overflow: -moz-scrollbars-vertical
}

.infoCard-container .no-content-container {
    background: #000;
    opacity: .6;
    padding: 21px
}

.infoCard-container .no-content-container p {
    color: #fff;
    margin: 0
}

ticket-archive-search .ticket-archive-search-item {
    display: flex;
    justify-content: space-between;
    background-color: rgba(35, 35, 35, .8);
    opacity: .85;
    color: #d7d7d7;
    padding-left: 10px;
    padding-right: 10px;
    widtH: 100%;
    height: auto
}

ticket-archive-search .ticket-archive-search-item .mat-form-field-label {
    color: #d7d7d7
}

ticket-archive-search .ticket-archive-search-item .mat-form-field-underline {
    background-color: #d7d7d7
}

ticket-archive-search .ticket-archive-search-item .ticket-archive-search-bar {
    margin-left: 8px
}

ticket-archive-search .ticket-archive-search-item .ticket-archive-search-bar input {
    color: #d7d7d7
}

ticket-archive-search .ticket-archive-search-item .ticket-archive-search-more {
    display: flex;
    justify-content: space-around;
    padding-top: 20px;
    cursor: pointer
}

ticket-archive-search .ticket-archive-search-item .ticket-archive-search-more .ticket-archive-search-more-icon.extended svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    fill: #d7d7d7
}

ticket-archive-search .ticket-archive-search-item .ticket-archive-search-more .ticket-archive-search-more-icon svg {
    fill: #d7d7d7
}

ticket-archive-search .ticket-archive-search-item .ticket-archive-search-more .ticket-archive-search-more-text {
    margin: 0;
    padding-left: 10px
}

ticket-archive-search .datePickerContainer {
    display: flex;
    justify-content: space-around;
    background-color: rgba(35, 35, 35, .8);
    opacity: .85;
    color: #d7d7d7;
    padding-left: 10px;
    padding-right: 10px
}

ticket-archive-search .datePickerContainer .mat-form-field-label {
    color: #d7d7d7
}

ticket-archive-search .datePickerContainer .mat-form-field-underline {
    border-bottom: 1px solid #d7d7d7!important
}

ticket-archive-search .datePickerContainer .mat-input-element {
    color: #d7d7d7
}

ticket-archive-search .datePickerContainer .mat-datepicker-toggle-default-icon {
    color: #d7d7d7
}

ticket-archive-search mat-input-container label {
    color: #d7d7d7!important
}

ticket-archive-search mat-input-container.md-input-focused label {
    color: #d7d7d7!important
}

ticket-archive-search .mat-input-underline {
    border-bottom: 1px solid #d7d7d7!important
}

.infoBubble[name=cancelHafasPushServiceCancellation] {
    width: 390px
}

#via {
    margin: 3em;
    padding: 0 0 32px 0
}

@media (min-width: 870px) {
    #via {
        margin: 0 50px 0 0;
        padding: 12px 0 0 0
    }
}

@media (min-width:1440px) {
    #via {
        margin: 0 315px 0 170px
    }
}

#via h1 {
    margin: 20px auto 0 30px;
    font-size: 20px;
    font-weight: 400
}

@media (min-width: 870px) {
    #via h1 {
        display: none
    }
}

#via .via {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-flow: column;
    background-color: #f0f0f0
}

#via .via .title {
    flex: 1 1 auto;
    font-size: 18px;
    font-weight: 700;
    margin: 20px 30px
}

#via .via .viaInput {
    flex: 1 1 auto;
    margin: 25px 30px
}

#via .via .viaInput input {
    font-size: 18px;
    font-weight: 400;
    background: 0 0;
    border-width: 0 0 1px 0;
    border-color: #d7d7d7;
    border-bottom-style: solid;
    width: 90%
}

#via .via .viaInput input.hasInput {
    font-weight: 700
}

#via .via .viaInput>.clearInput {
    transition: flex .2s ease-out, width .2s ease-out, opacity .3s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    align-self: center;
    width: 0;
    opacity: 0
}

#via .via .viaInput>.clearInput:focus,
#via .via .viaInput>.clearInput:hover {
    opacity: 1;
    outline: 0;
    transition: opacity .9s ease-out
}

#via .via .viaInput>.clearInput:focus img,
#via .via .viaInput>.clearInput:focus svg,
#via .via .viaInput>.clearInput:hover img,
#via .via .viaInput>.clearInput:hover svg {
    fill: #878787
}

#via .via .viaInput>.clearInput img,
#via .via .viaInput>.clearInput svg {
    width: 15px;
    height: 15px;
    transition: -webkit-transform .2s ease-out, transform .2s ease-out;
    fill: #b3b3b3
}

#via .via .viaStationListing {
    margin-bottom: 30px;
    flex: 1 1 auto
}

#via .via .viaStationListing .action-label {
    color: #64942c;
    font-size: 14px;
    padding: 2px 2px 0 0
}

#via .via .viaStationListing .action-label button {
    text-transform: uppercase
}

#via .via .mat-form-field-appearance-legacy>.mat-form-field-wrapper {
    padding-bottom: 0
}

#via .via .mat-form-field-underline {
    display: none
}

#via .via .mat-form-field-infix {
    width: 28px;
    margin: 0;
    padding: 0;
    border: none;
    text-align: right
}

#via .via .viaSelection {
    flex: 1 1 auto;
    position: relative
}

#via .via .viaSelection ts-dropdown {
    flex: 1 1 auto;
    width: 100%;
    top: 0
}

#via .via .viaSelection ts-dropdown .wrapper {
    border: none
}

#via .via .viaSelection .entry {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 400;
    color: #222;
    position: relative;
    overflow: hidden
}

#via .via .viaSelection .entry:after {
    position: absolute;
    left: 60px;
    bottom: 0;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #d7d7d7
}

#via .via .viaSelection .entry.selected {
    background-color: #e6e6e6
}

#via .via .viaSelection .entry.here {
    height: 67px
}

#via .via .viaSelection .entry.here:after {
    left: 0
}

#via .via .viaSelection .entry.here .wrapper .icon {
    fill: #51a351
}

#via .via .viaSelection .entry.here .wrapper .icon svg {
    width: 19px;
    height: 19px
}

#via .via .viaSelection .entry.here .wrapper .text {
    color: #51a351
}

#via .via .viaSelection .entry.here .wrapper .text .sub {
    font-size: 12px;
    margin: 0;
    color: #6a6a6a
}

#via .via .viaSelection .entry.here .wrapper .info {
    color: #6a6a6a
}

#via .via .viaSelection .entry .wrapper .info {
    flex: 0 0 48px;
    width: 48px;
    text-align: center;
    position: relative;
    color: #d7d7d7;
    fill: #d7d7d7;
    padding: 10px 0 10px 0
}

@media (min-width: 870px) {
    #via .via .viaSelection .entry .wrapper .info {
        flex: 0 0 53px;
        width: 53px
    }
}

#via .via .viaSelection .entry .wrapper .info svg {
    width: 18px;
    height: 18px
}

#via .via .viaSelection .entry .wrapper {
    display: flex;
    align-items: baseline;
    flex: 1 0
}

#via .via .viaSelection .entry .wrapper .icon {
    flex: 0 0 48px;
    width: 48px;
    fill: #afafaf;
    text-align: center;
    position: relative;
    top: 3px
}

@media (min-width: 870px) {
    #via .via .viaSelection .entry .wrapper .icon {
        flex: 0 0 58px;
        width: 58px
    }
}

#via .via .viaSelection .entry .wrapper .icon svg {
    width: 19px;
    height: 19px
}

#via .via .viaSelection .entry .wrapper .text {
    flex: 1 0;
    overflow: hidden
}

#via .via .viaSelection .entry:last-child:after {
    left: 0
}

.viaStation {
    background: #fff
}

.viaStation.entry {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    font-weight: 400;
    color: #222;
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #d7d7d7;
    margin-bottom: 15px
}

.viaStation.entry:after {
    position: absolute;
    left: 60px;
    bottom: 0;
    content: " ";
    width: 100%;
    height: 1px
}

.viaStation.entry.selected {
    background-color: #e6e6e6
}

.viaStation.entry.here {
    height: 67px
}

.viaStation.entry.here:after {
    left: 0
}

.viaStation.entry.here .wrapper .icon {
    fill: #51a351
}

.viaStation.entry.here .wrapper .icon svg {
    width: 19px;
    height: 19px
}

.viaStation.entry.here .wrapper .text {
    font-size: 16px;
    color: #51a351
}

.viaStation.entry.here .wrapper .text .sub {
    font-size: 12px;
    margin: 0;
    color: #6a6a6a
}

.viaStation.entry.here .wrapper .info {
    color: #6a6a6a
}

.viaStation.entry .wrapper {
    display: flex;
    flex: 1 0;
    min-height: 40px;
    padding: 10px
}

.viaStation.entry .wrapper .icon {
    flex: 0 0 48px;
    width: 48px;
    fill: #afafaf;
    text-align: center;
    position: relative;
    top: 3px
}

@media (min-width: 870px) {
    .viaStation.entry .wrapper .icon {
        flex: 0 0 58px;
        width: 58px
    }
}

.viaStation.entry .wrapper .icon svg {
    width: 19px;
    height: 19px
}

.viaStation.entry .wrapper .info {
    flex: 0 0 48px;
    width: 48px;
    text-align: center;
    position: relative;
    color: #d7d7d7;
    fill: #d7d7d7;
    padding: 10px 0 10px 0
}

@media (min-width: 870px) {
    .viaStation.entry .wrapper .info {
        flex: 0 0 53px;
        width: 53px
    }
}

.viaStation.entry .wrapper .info svg {
    width: 18px;
    height: 18px
}

.viaStation.entry .wrapper .text {
    font-size: 16px;
    flex: 1 0
}

.viaStation.entry .wrapper>.action {
    flex: 0 0 48px;
    width: 48px
}

.viaStation.entry .wrapper>.action button {
    width: 0;
    opacity: 0;
    display: flex;
    flex: 0 0 48px;
    width: 48px;
    opacity: 1
}

.viaStation.entry .wrapper>.action button:focus,
.viaStation.entry .wrapper>.action button:hover {
    opacity: 1;
    outline: 0;
    transition: opacity .9s ease-out
}

.viaStation.entry .wrapper>.action button:focus img,
.viaStation.entry .wrapper>.action button:focus svg,
.viaStation.entry .wrapper>.action button:hover img,
.viaStation.entry .wrapper>.action button:hover svg {
    fill: #878787
}

.viaStation.entry .wrapper>.action button img,
.viaStation.entry .wrapper>.action button svg {
    width: 15px;
    height: 15px;
    transition: -webkit-transform .2s ease-out, transform .2s ease-out;
    fill: #b3b3b3
}

@media (min-width: 870px) {
    .viaStation.entry .wrapper>.action button {
        width: 53px
    }
}

.viaStation.entry .wrapper>.action button svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.viaStation.entry:last-child:after {
    left: 0
}

.viaStation.entry .viaStationMinStay {
    display: flex;
    padding: 10px;
    margin-left: 58px;
    min-height: 40px;
    flex-direction: column;
    border-top: 1px solid #d7d7d7;
    flex: 1 0 auto
}

.viaStation.entry .viaStationMinStay.collapsed {
    min-height: 120px
}

.viaStation.entry .viaStationMinStay .showMinStay {
    flex: 1 1 auto
}

.viaStation.entry .viaStationMinStay .showMinStay>button {
    font-size: 14px;
    color: #51a351
}

.viaStation.entry .viaStationMinStay .minStay {
    flex: 1 1 auto
}

.viaStation.entry .viaStationMinStay .minStay .label {
    font-size: 12px
}

.viaStation.entry .viaStationMinStay .minStay .smartDuration {
    margin-top: 10px;
    width: 100%
}

.viaStation.entry .viaStationMinStay .minStay .smartDuration mat-form-field {
    border-bottom: 1px solid #d7d7d7
}

.viaStation.entry .viaStationMinStay .minStay .minStayHint {
    font-size: 12px;
    color: #222
}

.viaStation.entry .viaStationMinStay .minStay .minStayError {
    font-size: 12px
}

.viaStation.entry .viaStationMinStay .minStay .action {
    flex: 0 0 15px;
    width: 48px
}

.viaStation.entry .viaStationMinStay .minStay .action>button {
    float: right;
    flex: 0 0 15px;
    opacity: 1
}

.viaStation.entry .viaStationMinStay .minStay .action>button:focus,
.viaStation.entry .viaStationMinStay .minStay .action>button:hover {
    opacity: 1;
    outline: 0;
    transition: opacity .9s ease-out
}

.viaStation.entry .viaStationMinStay .minStay .action>button:focus img,
.viaStation.entry .viaStationMinStay .minStay .action>button:focus svg,
.viaStation.entry .viaStationMinStay .minStay .action>button:hover img,
.viaStation.entry .viaStationMinStay .minStay .action>button:hover svg {
    fill: #878787
}

.viaStation.entry .viaStationMinStay .minStay .action>button img,
.viaStation.entry .viaStationMinStay .minStay .action>button svg {
    width: 15px;
    height: 15px;
    transition: -webkit-transform .2s ease-out, transform .2s ease-out;
    fill: #b3b3b3
}

.viaStation.entry .viaStationMinStay .minStay .action>button svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.ts-badge {
    position: relative
}

.ts-badge[data-count]:after {
    content: attr(data-count);
    position: absolute;
    top: -13px;
    right: -13px;
    font-size: 12px;
    background: #e2002a;
    color: #fff;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 1px #e2002a
}

body[state="root.ticket.via"] .station-label {
    margin-left: 1em
}

body[state="root.ticket.via"] .icon {
    display: inline-grid;
    width: 20px;
    padding: 4px
}

body[state="root.ticket.via"] .icon ts-icon {
    position: relative;
    top: 4px
}

smart-duration {
    display: flex;
    align-items: baseline
}

smart-duration .label {
    flex: 0 0 25px;
    width: 25px;
    font-size: 14px;
    font-weight: 400;
    margin-right: 10px
}

smart-duration.focused>input.hours {
    font-weight: 400
}

smart-duration.isZeroDuration>input {
    color: #afafaf
}

smart-duration.isZeroDuration>input.hours {
    font-weight: 400
}

smart-duration .smartDuration>.action {
    flex: 1;
    opacity: 1;
    text-align: right
}

smart-duration .action-label {
    color: #64942c;
    font-size: 14px;
    padding: 2px 2px 0 0;
    text-transform: uppercase
}

smart-duration .smartDuration button:focus,
smart-duration .smartDuration button:hover {
    opacity: 1;
    outline: 0;
    transition: opacity .9s ease-out
}

smart-duration .smartDuration button:focus img,
smart-duration .smartDuration button:focus svg,
smart-duration .smartDuration button:hover img,
smart-duration .smartDuration button:hover svg {
    fill: #878787
}

smart-duration .smartDuration button img,
smart-duration .smartDuration button svg {
    width: 15px;
    height: 15px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    transition: -webkit-transform .2s ease-out, transform .2s ease-out;
    fill: #b3b3b3
}

smart-duration .smartDuration .modify-btn {
    fill: #b3b3b3
}

smart-duration .smartDuration .modify-btn:focus,
smart-duration .smartDuration .modify-btn:hover {
    fill: #878787
}

smart-duration input {
    display: flex;
    flex: 0 0 28px;
    font-size: 18px;
    line-height: 1.25em;
    width: 28px;
    min-width: 28px;
    border: none;
    padding-left: 0;
    padding-right: 0
}

smart-duration input::-webkit-clear-button,
smart-duration input::-webkit-inner-spin-button,
smart-duration input::-webkit-outer-spin-button {
    display: none
}

smart-duration input.hours {
    font-weight: 700
}

@media (min-width:1439px) {
    newsletter-disclaimer .success-dialog {
        width: 90vw;
        max-width: 90vw
    }
}

@media (min-width:1023px) {
    newsletter-disclaimer .success-dialog {
        width: 90vw;
        max-width: 90vw
    }
}

@media (min-width:719px) {
    newsletter-disclaimer .success-dialog {
        width: 60vw;
        max-width: 60vw
    }
}

newsletter-disclaimer .success-dialog .body-section {
    max-height: 40vh;
    overflow: auto
}

@media (min-width:719px) {
    newsletter-disclaimer .success-dialog .body-section {
        max-height: 80vh
    }
}

newsletter-disclaimer .success-dialog .body-section a {
    text-decoration: underline
}

off-canvas-logo .off-canvas-logo-section {
    padding: 15px 15px 15px 55px
}

off-canvas-logo .off-canvas-logo-section .logo {
    width: 210px;
    height: auto;
    min-height: 35px;
    background-image: url(https://tickets.oebb.at/static/images/logo_inverted.svg);
    background-size: cover
}

off-canvas-logo .off-canvas-logo-section .greeting {
    color: #f0aa41;
    font-size: 20px;
    margin-top: 12px
}

body[state=error] #content-wrapper {
    background-color: #fff
}

body[state=error] #content-wrapper .error-header {
    display: flex
}

body[state=error] #content-wrapper .error-header .click-area {
    padding-bottom: 30px
}

body[state=error] #content-wrapper .error-header .click-area .flag {
    margin-top: 40px;
    background-image: url(https://tickets.oebb.at/static/images/components/header/flag-14-24.svg);
    display: inline-block;
    width: 18px;
    height: 30px;
    float: left
}

body[state=error] #content-wrapper .error-header .click-area .text {
    margin-top: 40px;
    background-image: url(https://tickets.oebb.at/static/images/components/header/oebb-logo-30-80.svg);
    display: inline-block;
    width: 80px;
    height: 30px;
    margin-left: 18px;
    transition: margin-top ease-out .1s
}

body[state=error] #content-wrapper .error-header>.wrapper {
    flex: 0 0 135px
}

body[state=error] #content-wrapper .error-header>.header {
    flex: 1 1
}

body[state=error] #content-wrapper .error-header>.header h1 {
    font-weight: 400;
    font-size: 30px;
    margin-top: 36px;
    color: #868686
}

body[state=error] #content-wrapper .error-content {
    padding: 50px 100px;
    background-color: #f0f0f0
}

body[state=error] #content-wrapper .error-content h1 {
    font-weight: lighter
}

@media (max-width:319px) {
    body[state=error] #content-wrapper .error-content {
        padding: 50px 20px
    }
}

@media (max-width:869px) {
    body[state=error] #content-wrapper .error-content {
        padding: 50px 50px
    }
}

body[state=error] #content-wrapper .error-content header h1 {
    color: #ab0020
}

body[state=error] #content-wrapper .error-content section a {
    text-decoration: underline
}

body[state=error] #content-wrapper .error-content section ul li {
    padding: 0
}

body[state=info] #main-wrapper {
    display: block;
    overflow-y: auto
}

body[state=info] #main-wrapper div {
    border: 1px solid #000;
    padding: 5px;
    margin: 5px;
    display: inline-block
}

body[state=info] #main-wrapper svg {
    max-width: 50px;
    max-height: 50px
}

.managementContainer {
    z-index: 0;
    width: 100%;
    height: 81.25vh
}

body[state^="root.b2b.administration"] .delete-button-icon {
    margin-right: 3px
}

body[state^="root.b2b.administration"] .delete-button-icon svg {
    fill: #cc3432
}

body[state^="root.b2b.administration"] .management-delete-button {
    min-width: 0!important;
    height: 30px!important;
    padding: 0 3px 0 5px!important
}

body[state^="root.b2b.administration"] .add-button-icon {
    margin-right: 3px
}

body[state^="root.b2b.administration"] .add-button-icon svg {
    fill: #51a351
}

body[state^="root.b2b.administration"] #b2b {
    width: 100%
}

body[state^="root.b2b.administration"] #view-administration {
    flex: 1 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-flow: column
}

body[state^="root.b2b.administration"] .spinner-element {
    position: absolute;
    z-index: 2;
    height: 100%;
    width: 82%;
    display: flex;
    align-items: center;
    justify-content: center
}

body[state^="root.b2b.administration"] .spinner-element mat-spinner {
    -webkit-animation: mat-progress-spinner-linear-rotate 2s linear infinite;
    animation: mat-progress-spinner-linear-rotate 2s linear infinite
}

body[state^="root.b2b.administration"] .spinner-element mat-spinner circle {
    transition-property: stroke!important;
    -webkit-animation-duration: 4s!important;
    animation-duration: 4s!important;
    -webkit-animation-timing-function: cubic-bezier(.35, 0, .25, 1)!important;
    animation-timing-function: cubic-bezier(.35, 0, .25, 1)!important;
    -webkit-animation-iteration-count: infinite!important;
    animation-iteration-count: infinite!important
}

body[state^="root.b2b.administration"] .disabled-for-spinner {
    opacity: .5;
    pointer-events: none
}

body[state^="root.b2b.administration"] .removeMargin {
    margin: unset
}

body[state^="root.b2b.administration"] .topMargin {
    margin-top: 50px
}

body[state^="root.b2b.administration"] .width100 {
    width: 100%
}

body[state^="root.b2b.administration"] #rightColumn {
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    flex: 1
}

body[state^="root.b2b.administration"] .bodyContainer {
    width: 100%;
    height: 100%;
    display: flex
}

body[state^="root.b2b.administration"] .clickButton {
    cursor: pointer
}

body[state^="root.b2b.administration"] .personCardIcon {
    margin-top: 7px;
    fill: #3B4650
}

body[state^="root.b2b.administration"] .inputContainer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between
}

body[state^="root.b2b.administration"] .subLabel {
    font-size: 10px;
    justify-self: flex-start;
    display: flex
}

body[state^="root.b2b.administration"] .inputRow {
    display: -ms-flexbox;
    flex-direction: column;
    display: flex;
    margin-bottom: 20px;
    width: 100%
}

body[state^="root.b2b.administration"] .inputRow .sex {
    color: #afafaf
}

body[state^="root.b2b.administration"] .inputRow.address .inputGroup {
    margin-right: 0
}

@media (min-width:480px) {
    body[state^="root.b2b.administration"] .inputRow.streetNumber {
        flex: 1 1 100px;
        max-width: 100px
    }
}

@media (min-width:480px) {
    body[state^="root.b2b.administration"] .inputRow.zipCode {
        flex: 1 1 100px;
        max-width: 100px
    }
    body[state^="root.b2b.administration"] .inputRow.zipCode .inputGroup {
        margin-right: 0
    }
}

body[state^="root.b2b.administration"] .inputRow .inputGroup {
    margin-right: 10px
}

body[state^="root.b2b.administration"] .inputRow .inputGroup input[disabled=disabled] {
    background-color: transparent;
    color: #afafaf
}

body[state^="root.b2b.administration"] .inputRow .inputGroup input {
    width: 100%
}

body[state^="root.b2b.administration"] .inputRow .inputGroup .requiredElementMark {
    color: red
}

body[state^="root.b2b.administration"] #management .mat-button.mat-primary:hover {
    background-color: #e4ffe4!important
}

body[state^="root.b2b.administration"] #management .mat-flat-button.mat-primary {
    background-color: #51a351
}

body[state^="root.b2b.administration"] #management .mat-flat-button.mat-primary:hover {
    background-color: #508546
}

body[state^="root.b2b.administration"] #management .mat-flat-button.mat-primary[disabled] {
    background-color: #afafaf!important
}

body[state^="root.b2b.administration"] #management .managementContainer {
    width: 100%;
    background: rgba(35, 35, 35, .6);
    border: 1px solid rgba(235, 235, 235, .2)
}

body[state^="root.b2b.administration"] #management .managementContainer p {
    margin: 0
}

body[state^="root.b2b.administration"] #management .managementContainer hr {
    margin-top: 0;
    margin-bottom: 15px;
    background-color: #7d7d7d
}

body[state^="root.b2b.administration"] #management .leftContainer {
    margin-left: -17px;
    position: absolute;
    background: rgba(35, 35, 35, .6);
    direction: rtl;
    width: 60%;
    min-width: 800px;
    height: 82vh;
    margin-right: 20px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    overflow: hidden;
    overflow-y: scroll
}

body[state^="root.b2b.administration"] #management .leftContainer .managementContent {
    direction: ltr;
    background: 0 0;
    width: 100%
}

body[state^="root.b2b.administration"] #management .rightContainer {
    position: absolute;
    margin-left: 476px!important;
    background: #fff;
    border: 1px solid rgba(235, 235, 235, .2);
    height: 81.8vh;
    width: 67%;
    overflow: hidden;
    overflow-y: auto;
    padding: 0 85px 40px 85px;
    justify-content: flex-end
}

body[state^="root.b2b.administration"] #management .rightContainer .noMargin {
    margin-left: 0
}

body[state^="root.b2b.administration"] #management .rightContainer .spaceBetween {
    justify-content: space-between;
    display: flex
}

body[state^="root.b2b.administration"] #management .rightContainer .withCloseButton {
    justify-content: unset;
    display: flex
}

body[state^="root.b2b.administration"] #management .rightContainer .body-content {
    padding-top: 155px
}

body[state^="root.b2b.administration"] #management .rightContainer .topContent {
    position: fixed;
    background: #fff;
    z-index: 1;
    width: 56vw;
    max-width: 835px;
    height: 170px;
    display: flex;
    padding-bottom: 20px;
    padding-top: 40px;
    border-bottom: 3px solid #3B4650
}

body[state^="root.b2b.administration"] #management .rightContainer .topContent .closeButton {
    background: #64942c;
    padding-left: 20px;
    padding-right: 20px;
    color: #fff;
    cursor: pointer
}

body[state^="root.b2b.administration"] #management .rightContainer .topContent .title {
    margin-left: 20px;
    height: auto;
    color: #3B4650;
    font-size: 30px;
    line-height: 42px
}

body[state^="root.b2b.administration"] #management .rightContainer .topContent .folder {
    fill: #64942c
}

body[state^="root.b2b.administration"] #management .rightContainer .topContent h1 {
    margin: 0;
    height: 42px;
    width: 558px;
    color: #64942c;
    font-size: 30px;
    line-height: 42px
}

body[state^="root.b2b.administration"] #management .rightContainer .topContent .updatebuttonbar button {
    height: 50px
}

body[state^="root.b2b.administration"] #management .rightContainer .bottomContent {
    margin-top: 30px
}

body[state^="root.b2b.administration"] #management .rightContainer .middleContent {
    display: flex
}

body[state^="root.b2b.administration"] #management .rightContainer .middleContent .rightInnerContainer {
    flex: 1 1 auto;
    margin: 5px
}

body[state^="root.b2b.administration"] #management .rightContainer .middleContent .leftInnerContainer {
    flex: 1 1 auto;
    text-align: center
}

body[state^="root.b2b.administration"] #management .rightContainer .middleContent .selectRole {
    width: 100%
}

body[state^="root.b2b.administration"] #management .rightContainer .middleContent .role {
    margin-top: 19px
}

body[state^="root.b2b.administration"] #management .rightContainer .middleContent .roleHasValue {
    bottom: 28px;
    font-size: 12px;
    color: #6fb86f
}

body[state^="root.b2b.administration"] #management .rightContainer .middleContent .helpwrappericon {
    display: inline
}

body[state^="root.b2b.administration"] #management .infoText {
    border-bottom: 2px solid #3B4650;
    align-content: start;
    justify-content: flex-start;
    display: flex;
    margin-bottom: 15px
}

body[state^="root.b2b.administration"] #management .infoText h1 {
    color: #3B4650;
    padding: 0;
    font-weight: 500;
    margin: 0 0 4px
}

body[state^="root.b2b.administration"] #management .infoText .title {
    height: 5.08%;
    font-size: 20px
}

body[state^="root.b2b.administration"] #management .infoElement {
    padding-bottom: 0;
    margin-top: 0;
    padding-top: 0;
    box-sizing: border-box;
    margin-bottom: 0
}

body[state^="root.b2b.administration"] #management .infoElement p {
    color: #b4b4b4;
    justify-content: flex-start;
    flex-direction: row;
    display: flex;
    margin-bottom: 10px
}

body[state^="root.b2b.administration"] #management .infoElement h1 {
    font-weight: 100;
    font-size: large;
    margin-top: -10px;
    align-content: start;
    justify-content: flex-start;
    display: flex;
    margin-bottom: 0
}

body[state^="root.b2b.administration"] .fixedWidthTreeEntry {
    pointer-events: auto;
    width: 476px!important;
    height: 46px
}

body[state="root.debugRender"] #main-wrapper {
    overflow: scroll;
    display: block
}

body[state="root.debugRender"] #main-wrapper #off-canvas {
    display: none
}

body[state="root.debugRender"] #main-wrapper #content-wrapper {
    width: 100%;
    min-width: 100%;
    display: block;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0
}

body[state="root.debugRender"] #main-wrapper #content {
    display: block
}

body[state="root.debugRender"] #main-wrapper #content>div {
    padding: 10px 20px
}

body[state="root.debugRender"] #main-wrapper #content>div a {
    color: #51a351;
    text-decoration: underline
}

body[state="root.debugRender"] #main-wrapper #content>div a:hover {
    text-decoration: none
}

body[state="root.debugRender"] #main-wrapper #content pre {
    margin-left: 20px
}

body[state="root.debugRender"] #header {
    display: none
}

#content-wrapper {
    max-width: 1440px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .6);
    height: 100%;
    width: 100%;
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap
}

.root-content {
    flex: 1 0;
    display: flex;
    height: 100%;
    overflow-y: auto
}

.root-content #personal {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.root-content router-outlet-wrapper {
    flex: 1 0;
    width: 100%
}

.snow {
    background: 0 0;
    font-family: Androgyne;
    background-image: url(https://tickets.oebb.at/static/images/snow/s1.png), url(https://tickets.oebb.at/static/images/snow/s2.png), url(https://tickets.oebb.at/static/images/snow/s3.png);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite
}

@keyframes snow {
    0% {
        background-position: 0 0, 0 0, 0 0
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px
    }
    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px
    }
}

@-webkit-keyframes snow {
    0% {
        background-position: 0 0, 0 0, 0 0
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px
    }
    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px
    }
}

@media (min-width: 870px) {
    body[substate^="settings."] #account,
    body[substate^="payment."] #account {
        flex: 0 0 200vw
    }
}

body[state^="root.ticket.account"] #rightColumn {
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    flex: 1
}

body[state^="root.ticket.account"] #content.onColumn {
    padding-left: 0
}

body[state^="root.ticket.account"] .subheader .greeting {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    margin-top: 10px
}

body[state^="root.ticket.account"] .subheader .name {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1em;
    margin-top: 6px;
    word-break: break-word;
    padding-right: 10px
}

@media (min-width: 870px) {
    body[state^="root.ticket.account"] #header .subheader[substate-id=""] .backIconWrapper {
        display: none
    }
    body[state^="root.ticket.account"][substate*="."] #header .subheader {
        opacity: 0;
        transition: opacity .15s ease-out
    }
    body[state^="root.ticket.account"][substate^="settings."] #header .subheader[substate-id=settings],
    body[state^="root.ticket.account"][substate^="personal."] #header .subheader[substate-id=personal],
    body[state^="root.ticket.account"][substate^="payment."] #header .subheader[substate-id=payment] {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        transition-delay: .15s
    }
}

body[state^="root.ticket.account"] #header .text.wrapper {
    opacity: 1
}

body[state^="root.ticket.account"] #header .content,
body[state^="root.ticket.account"] #header .logo {
    display: none
}

@media (min-width: 870px) {
    body[state^="root.ticket.account"] #header .logo {
        display: block
    }
}

body[state^="root.ticket.account"] #header .content4 {
    margin-left: 65px
}

@media (min-width: 870px) {
    body[state^="root.ticket.account"] #header .content4 {
        margin-left: 162px
    }
}

#header div[name=settingsHeader].subheader,
#header div[name=personalHeader].subheader,
#header div[name=paymentHeader].subheader,
#header div[name=newsletterHeader].subheader {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    align-items: center;
    -webkit-transform: translate3d(100vw, 0, 0);
    transform: translate3d(100vw, 0, 0)
}

@media (max-width:869px) {
    #header div[name=settingsHeader].subheader,
    #header div[name=personalHeader].subheader,
    #header div[name=paymentHeader].subheader,
    #header div[name=newsletterHeader].subheader {
        transition: -webkit-transform .3s ease-out, transform .3s ease-out
    }
}

#header div[name=settingsHeader].subheader>.col1,
#header div[name=personalHeader].subheader>.col1,
#header div[name=paymentHeader].subheader>.col1,
#header div[name=newsletterHeader].subheader>.col1 {
    align-self: center
}

@media (max-width:869px) {
    body[substate^=settings] #header div[name=settingsHeader].subheader {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    body[substate^=personal] #header div[name=personalHeader].subheader {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    body[substate^=newsletter] #header div[name=newsletterHeader].subheader {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    body[substate^=payment] #header div[name=paymentHeader].subheader {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

#account {
    overflow-y: auto;
    font-size: 12px;
    width: 100%
}

@media (max-width:869px) {
    #account {
        overflow-x: hidden
    }
}

#account.ng-enter {
    transition: -webkit-transform .3s cubic-bezier(.23, 1, .675, 1.12), transform .3s cubic-bezier(.23, 1, .675, 1.12), opacity .3s cubic-bezier(.23, 1, .675, 1.12);
    transition-delay: .3s;
    -webkit-transform: translate3d(500px, 0, 0);
    transform: translate3d(500px, 0, 0);
    opacity: 0
}

#account.ng-enter.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
}

@media (min-width: 870px) {
    body[substate*="."] #account>.leftContainer {
        -webkit-transform: translate3d(-500px, 0, 0);
        transform: translate3d(-500px, 0, 0);
        opacity: 0
    }
    body[substate*="."] #account>.rightContainer {
        -webkit-transform: translate3d(-383px, 0, 0);
        transform: translate3d(-383px, 0, 0)
    }
    body[substate*="."] #account>.rightContainer .infoBubbleArrow {
        opacity: 0
    }
    body[substate*="."] #account>.thirdColumn {
        -webkit-transform: translate3d(-383px, 0, 0);
        transform: translate3d(-383px, 0, 0)
    }
}

#account .infoBubble[name=accountPayment] {
    min-height: 400px
}

#account .infoBubble[name=accountChangeEmail] .buttonWrapper,
#account .infoBubble[name=accountChangePassword] .buttonWrapper,
#account .infoBubble[name=accountDeletePaymentFavorite] .buttonWrapper,
#account .infoBubble[name=deleteAccount] .buttonWrapper {
    margin: 25px 0 5px 0
}

#account .infoBubble[name=accountChangeEmail] .password-wrapper,
#account .infoBubble[name=deleteAccount] .password-wrapper {
    margin-top: 18px
}

#account .infoBubble[name=accountChangeEmail] input[name=mail] {
    width: 100%
}

#account .infoBubble[name=accountPersonal] .colorChooser>.checkboxArea {
    flex: 0 0 43px
}

#account .infoBubble[name=accountPersonal] .colorChooser>.checkboxArea label {
    width: 41px
}

#account .infoBubble[name=settings]>.contentWrapper section,
#account .infoBubble[name=personal]>.contentWrapper section,
#account .infoBubble[name=accountPersonal]>.contentWrapper section,
#account .infoBubble[name=accountSettings]>.contentWrapper section {
    color: #fff
}

#account .infoBubble[name=settings]>.contentWrapper section select,
#account .infoBubble[name=personal]>.contentWrapper section select,
#account .infoBubble[name=accountPersonal]>.contentWrapper section select,
#account .infoBubble[name=accountSettings]>.contentWrapper section select {
    margin-top: 30px;
    height: 29px
}

#account .infoBubble[name=settings]>.contentWrapper section select option,
#account .infoBubble[name=personal]>.contentWrapper section select option,
#account .infoBubble[name=accountPersonal]>.contentWrapper section select option,
#account .infoBubble[name=accountSettings]>.contentWrapper section select option {
    background-color: #222
}

#account .infoBubble[name=settings]>.contentWrapper section input,
#account .infoBubble[name=personal]>.contentWrapper section input,
#account .infoBubble[name=accountPersonal]>.contentWrapper section input,
#account .infoBubble[name=accountSettings]>.contentWrapper section input {
    background-color: #222;
    margin-top: 30px
}

#account .infoBubble[name=settings]>.contentWrapper section hr,
#account .infoBubble[name=personal]>.contentWrapper section hr,
#account .infoBubble[name=accountPersonal]>.contentWrapper section hr,
#account .infoBubble[name=accountSettings]>.contentWrapper section hr {
    background-color: #383838;
    margin-left: -32px;
    margin-right: -20px;
    margin-top: 20px
}

#account .infoBubble[name=settings]>.contentWrapper section h2,
#account .infoBubble[name=personal]>.contentWrapper section h2,
#account .infoBubble[name=accountPersonal]>.contentWrapper section h2,
#account .infoBubble[name=accountSettings]>.contentWrapper section h2 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    padding-top: 20px
}

#account .infoBubble[name=settings]>.contentWrapper section h3,
#account .infoBubble[name=personal]>.contentWrapper section h3,
#account .infoBubble[name=accountPersonal]>.contentWrapper section h3,
#account .infoBubble[name=accountSettings]>.contentWrapper section h3 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1em
}

#account .infoBubble[name=settings]>.contentWrapper section .checkboxButton,
#account .infoBubble[name=personal]>.contentWrapper section .checkboxButton,
#account .infoBubble[name=accountPersonal]>.contentWrapper section .checkboxButton,
#account .infoBubble[name=accountSettings]>.contentWrapper section .checkboxButton {
    color: #fff
}

#account .infoBubble[name=settings]>.contentWrapper section .checkboxButton:hover,
#account .infoBubble[name=personal]>.contentWrapper section .checkboxButton:hover,
#account .infoBubble[name=accountPersonal]>.contentWrapper section .checkboxButton:hover,
#account .infoBubble[name=accountSettings]>.contentWrapper section .checkboxButton:hover {
    background-color: #2a2a2a
}

#account .infoBubble[name=settings]>.contentWrapper section .checkboxButton:hover svg,
#account .infoBubble[name=personal]>.contentWrapper section .checkboxButton:hover svg,
#account .infoBubble[name=accountPersonal]>.contentWrapper section .checkboxButton:hover svg,
#account .infoBubble[name=accountSettings]>.contentWrapper section .checkboxButton:hover svg {
    background-color: #2a2a2a
}

#account .infoBubble[name=settings]>.contentWrapper section .note,
#account .infoBubble[name=settings]>.contentWrapper section .subtext,
#account .infoBubble[name=personal]>.contentWrapper section .note,
#account .infoBubble[name=personal]>.contentWrapper section .subtext,
#account .infoBubble[name=accountPersonal]>.contentWrapper section .note,
#account .infoBubble[name=accountPersonal]>.contentWrapper section .subtext,
#account .infoBubble[name=accountSettings]>.contentWrapper section .note,
#account .infoBubble[name=accountSettings]>.contentWrapper section .subtext {
    margin: 10px 0 34px 0;
    color: #afafaf
}

#account .infoBubble[name=accountPersonal] .cityCodeStreetWrapper {
    display: flex
}

#account .infoBubble[name=accountPersonal] .cityCodeStreetWrapper input {
    width: 100%
}

#account .infoBubble[name=accountPersonal] .cityCodeStreetWrapper .cityCode {
    flex: 0 1 30%
}

#account .infoBubble[name=accountPersonal] .cityCodeStreetWrapper .city {
    flex: 0 1 70%
}

#account .infoBubble[name=accountPersonal] .cityCodeStreetWrapper .city .input-error,
#account .infoBubble[name=accountPersonal] .cityCodeStreetWrapper .city input {
    padding-left: 8px
}

#account .infoBubble[name=settings]>.contentWrapper section {
    color: #afafaf
}

#account .infoBubble[name=settings]>.contentWrapper section input {
    background-color: #fff
}

#account .infoBubble[name=accountNewsletter] {
    min-height: 400px
}

#account .infoBubble[name=accountNewsletter] footer>input {
    margin-left: 0
}

#account .note {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    color: #6a6a6a
}

@media (min-width: 870px) {
    #account .note {
        font-weight: 400
    }
}

#account .infoBubble.noBubble>header {
    display: none
}

#account .infoBubble {
    -webkit-transform: scale(.3);
    transform: scale(.3);
    transition-delay: .15s;
    transition: opacity .15s ease-out, -webkit-transform .15s ease-out, transform .15s ease-out
}

#account .infoBubble.visible {
    -webkit-transform: scale(1);
    transform: scale(1)
}

#account .infoBubble.border {
    border: none
}

#account .infoBubble.border>.contentWrapper,
#account .infoBubble.border>.infoBubbleArrow {
    border: none
}

#account .infoBubble>.contentWrapper footer {
    font-size: 14px;
    border-top: 1px solid #383838
}

#account .infoBubble[name=accountChangeEmail]>.contentWrapper footer,
#account .infoBubble[name=accountChangePassword]>.contentWrapper footer,
#account .infoBubble[name=deleteAccount]>.contentWrapper footer {
    border-top: 1px solid #afafaf
}

#account header.big {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1em;
    padding: 23px 29px 29px 32px
}

#account .buttonSubtitle,
#account .subtext {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    margin-top: 2px
}

#account .buttonSubtitle {
    color: #6a6a6a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

#account .infoBubble>section {
    color: #fff
}

#account .accountContentWrapper {
    color: #fff;
    background-color: #222
}

#account .accountContentWrapper .firstTitle {
    display: none
}

#account .accountContentWrapper h1 {
    margin: 17px 0 15px 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25em;
    color: #fff
}

#account .accountContentWrapper .buttonWrapper {
    padding: 12px 0 12px 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em
}

#account .accountContentWrapper .checkboxWrapper {
    display: flex;
    padding: 17px 0 17px 0
}

#account .accountContentWrapper .checkboxWrapper>.col1 {
    flex: 0 0 64px;
    padding-left: 17px
}

#account .accountContentWrapper .checkboxWrapper>.col2>div,
#account .accountContentWrapper .subtitleFont {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    color: #afafaf
}

#account .accountContentWrapper .checkboxWrapper>.col2>label {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3em
}

#account .accountContentWrapper .subtitle {
    margin: 15px 0 26px 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    color: #afafaf
}

#account .accountContentWrapper .buttonPad {
    padding: 20px 0 20px 0
}

#account .accountContentWrapper>header.button {
    display: none;
    padding: 0
}

@media (min-width: 870px) {
    #account .accountContentWrapper>header.button {
        display: block;
        margin-top: 17px
    }
}

#account .accountContentWrapper .button {
    padding-top: 15px
}

#account .accountContentWrapper .button.logout {
    margin-top: 10px;
    margin-bottom: 25px
}

#account .accountContentWrapper .button>.row {
    display: flex;
    align-items: baseline
}

#account .accountContentWrapper .button>.row>.col1 {
    flex: 0 0 65px;
    text-align: center;
    display: inline-block
}

#account .accountContentWrapper .button>.row>.col2 {
    flex: 1;
    overflow: hidden
}

#account .accountContentWrapper .button>.row .h1 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1em
}

#account .accountContentWrapper .button>.row .h2 {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    color: #afafaf
}

#account .accountContentWrapper .button hr {
    background-color: #383838;
    height: 1px;
    margin: 15px 0 0 16px
}

#account .accountContentWrapper .button:last-child hr {
    display: none
}

#account .accountContentWrapper .contentWrapper section {
    word-wrap: break-word
}

#account>.leftContainer {
    display: flex;
    flex-direction: column;
    background-color: #222;
    position: relative;
    transition: opacity .3s cubic-bezier(.23, 1, .675, 1.12), -webkit-transform .3s cubic-bezier(.23, 1, .675, 1.12), transform .3s cubic-bezier(.23, 1, .675, 1.12)
}

@media (max-width:479px) {
    #account>.leftContainer {
        min-height: calc(100% - 1px)
    }
}

@media (min-width: 870px) {
    #account>.leftContainer {
        min-height: 566px;
        float: left;
        width: 290px;
        margin: 32px 0 32px 83px
    }
}

@media (min-width: 870px) {
    #account>.leftContainer {
        width: 334px;
        margin-left: 128px
    }
}

@media (min-width: 870px) {
    #account>.leftContainer {
        margin-left: 264px
    }
}

@media (min-width:1440px) {
    #account>.leftContainer {
        margin-left: 430px
    }
}

@media (max-width:869px) {
    #account>.leftContainer div.accountContentWrapper {
        height: calc(100% - 90px);
        overflow-x: hidden;
        overflow-y: auto
    }
}

#account>.leftContainer div.accountContentWrapper[name=settings],
#account>.leftContainer div.accountContentWrapper[name=personal],
#account>.leftContainer div.accountContentWrapper[name=payment],
#account>.leftContainer div.accountContentWrapper[name=newsletter] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    transition: -webkit-transform .3s ease-out, transform .3s ease-out
}

@media (max-width:869px) {
    body[substate^=settings] #account>.leftContainer div.accountContentWrapper[name=settings][name=settings],
    body[substate^=settings] #account>.leftContainer div.accountContentWrapper[name=personal][name=settings],
    body[substate^=settings] #account>.leftContainer div.accountContentWrapper[name=payment][name=settings],
    body[substate^=settings] #account>.leftContainer div.accountContentWrapper[name=newsletter][name=settings],
    body[substate^=personal] #account>.leftContainer div.accountContentWrapper[name=settings][name=personal],
    body[substate^=personal] #account>.leftContainer div.accountContentWrapper[name=personal][name=personal],
    body[substate^=personal] #account>.leftContainer div.accountContentWrapper[name=payment][name=personal],
    body[substate^=personal] #account>.leftContainer div.accountContentWrapper[name=newsletter][name=personal],
    body[substate^=payment] #account>.leftContainer div.accountContentWrapper[name=settings][name=payment],
    body[substate^=payment] #account>.leftContainer div.accountContentWrapper[name=personal][name=payment],
    body[substate^=payment] #account>.leftContainer div.accountContentWrapper[name=payment][name=payment],
    body[substate^=payment] #account>.leftContainer div.accountContentWrapper[name=newsletter][name=payment],
    body[substate^=newsletter] #account>.leftContainer div.accountContentWrapper[name=settings][name=newsletter],
    body[substate^=newsletter] #account>.leftContainer div.accountContentWrapper[name=personal][name=newsletter],
    body[substate^=newsletter] #account>.leftContainer div.accountContentWrapper[name=payment][name=newsletter],
    body[substate^=newsletter] #account>.leftContainer div.accountContentWrapper[name=newsletter][name=newsletter] {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@media (max-width:869px) {
    #account>.leftContainer div.accountContentWrapper[name=settings] {
        height: auto
    }
}

#account>.leftContainer>.overlay {
    z-index: 1
}

#account>.leftContainer .innerPadLarge {
    padding-left: 64px
}

#account>.leftContainer .innerPadLargeInverse {
    margin-left: -64px
}

#account>.leftContainer .innerPadLeft {
    padding-left: 32px
}

#account>.leftContainer .outerPadLeft {
    margin-left: 32px
}

#account>.leftContainer .innerPadRight {
    padding-right: 29px
}

#account>.leftContainer .outerPadRight {
    margin-right: 29px
}

#account>.rightContainer {
    transition: opacity .3s cubic-bezier(.23, 1, .675, 1.12), -webkit-transform .3s cubic-bezier(.23, 1, .675, 1.12), transform .3s cubic-bezier(.23, 1, .675, 1.12)
}

#account>.rightContainer,
#account>.thirdColumn {
    display: none
}

@media (min-width: 870px) {
    #account>.rightContainer,
    #account>.thirdColumn {
        display: block;
        float: left;
        width: 290px;
        margin: 32px 0 32px 32px
    }
}

@media (min-width: 870px) {
    #account>.rightContainer,
    #account>.thirdColumn {
        width: 334px
    }
}

#account>.rightContainer .innerPadLarge,
#account>.thirdColumn .innerPadLarge {
    padding: 28px 20px 11px 32px
}

#account>.rightContainer .accountContentWrapper .firstTitle,
#account>.thirdColumn .accountContentWrapper .firstTitle {
    display: block;
    margin: 0
}

#account .personal-newsletter-checkbox {
    margin-bottom: 15px;
    color: #fff
}

#account .personal-newsletter-checkbox .col2 {
    padding: 0;
    margin: 0;
    color: #fff
}

#account .personal-newsletter-checkbox .checkboxButton {
    color: #fff
}

#account .personal-newsletter-checkbox .checkboxButton:hover {
    background-color: #2a2a2a
}

#account .personal-newsletter-checkbox .checkboxButton:hover svg {
    background-color: #2a2a2a
}

#account .no-direct-marketing-contact-section {
    color: #868686
}

#account .no-direct-marketing-title {
    font-size: 20px;
    line-height: 26px
}

@media (max-width:869px) {
    body[substate=personal] #account div[name=personal] {
        min-height: calc(100% - 1px);
        height: auto
    }
}

@media (max-width:869px) {
    body[substate=newsletter] #account div[name=newsletter] {
        min-height: calc(100% - 1px);
        height: auto
    }
}

@media (max-width:869px) {
    body[substate=settings] #account div[name=settings] {
        min-height: calc(100% - 1px);
        height: auto
    }
}

@media (max-width:869px) {
    body[substate=payment] #account div[name=payment] {
        min-height: calc(100% - 1px);
        height: auto
    }
}

body[state^="root.ticket.archive"] #rightColumn {
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0;
    margin: 0;
    flex: 1;
    background-color: #222
}

body[state^="root.ticket.archive"] #content.onColumn {
    padding-left: 0
}

body[state^="root.ticket.archive"] .subheader .greeting {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    margin-top: 10px
}

body[state^="root.ticket.archive"] .subheader .name {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1em;
    margin-top: 6px
}

@media (min-width: 870px) {
    body[state^="root.ticket.archive"] {
        background-color: inherit
    }
    body[state^="root.ticket.archive"] #header .subheader[substate-id=""] .backIconWrapper {
        display: none
    }
    body[state^="root.ticket.archive"] #rightColumn {
        background: 0 0
    }
    body[state^="root.ticket.archive"][substate*="."] #header .subheader {
        opacity: 0;
        transition: opacity .15s ease-out
    }
}

body[state^="root.ticket.archive"] #header .text.wrapper {
    opacity: 1
}

body[state^="root.ticket.archive"] #header .content,
body[state^="root.ticket.archive"] #header .logo {
    display: none
}

@media (min-width: 870px) {
    body[state^="root.ticket.archive"] #header .logo {
        display: block
    }
}

body[state^="root.ticket.archive"] #header .content4 {
    margin-left: 65px
}

@media (min-width: 870px) {
    body[state^="root.ticket.archive"] #header .content4 {
        margin-left: 162px
    }
}

#archive {
    overflow-y: auto;
    font-size: 12px;
    width: 100%
}

@media (min-width: 870px) {
    #archive {
        flex: 0 0 200vw
    }
}

#archive.ng-enter {
    transition: -webkit-transform .3s cubic-bezier(.23, 1, .675, 1.12), transform .3s cubic-bezier(.23, 1, .675, 1.12), opacity .3s cubic-bezier(.23, 1, .675, 1.12);
    transition-delay: .3s;
    -webkit-transform: translate3d(500px, 0, 0);
    transform: translate3d(500px, 0, 0);
    opacity: 0
}

#archive.ng-enter.ng-enter.ng-enter-active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
}

#archive>.leftContainer {
    display: flex;
    flex-direction: column;
    position: relative;
    color: #afafaf;
    transition: opacity .3s cubic-bezier(.23, 1, .675, 1.12), -webkit-transform .3s cubic-bezier(.23, 1, .675, 1.12), transform .3s cubic-bezier(.23, 1, .675, 1.12)
}

#archive>.leftContainer .infocard .row4 .col2 {
    font-size: 12px
}

@media (min-width: 870px) {
    #archive>.leftContainer {
        min-height: 566px;
        float: left;
        width: 390px;
        margin: 32px 0 32px 83px
    }
}

@media (min-width: 870px) {
    #archive>.leftContainer {
        width: 390px;
        margin-left: 190px
    }
}

@media (min-width: 870px) {
    #archive>.leftContainer {
        margin-left: 264px
    }
}

@media (min-width:1440px) {
    #archive>.leftContainer {
        margin-left: 430px
    }
}

#cancellation {
    flex: 1;
    display: flex;
    flex-direction: column;
    z-index: 0;
    position: relative
}

#cancellation .disabled {
    color: #6a6a6a
}

#cancellation>section {
    margin: 25px 264px 0 430px;
    overflow-y: auto;
    flex: 1
}

@media (max-width:1439px) {
    #cancellation>section {
        margin: 25px 60px 0 263px
    }
}

@media (max-width:869px) {
    #cancellation>section {
        margin-left: 124px
    }
}

@media (max-width:869px) {
    #cancellation>section {
        margin: 0
    }
}

#cancellation>section>.infoBubble {
    margin-bottom: 18px
}

#cancellation>section>.nextPayments {
    padding-right: 15px;
    text-align: right
}

#cancellation>section>.nextPayments>p {
    color: #fff
}

#cancellation>section>.payback {
    padding: 25px
}

#cancellation>section>.total {
    background-color: #fff;
    margin-bottom: 20px
}

#cancellation>section>.total>.value {
    text-align: right;
    display: flex;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25em;
    border-bottom: 1px solid #e6e6e6
}

#cancellation>section>.total>.value:last-item {
    border-bottom: none
}

#cancellation>section>.total>.value.payed {
    font-size: 16px;
    color: #6a6a6a
}

#cancellation>section>.total>.value.cancel {
    font-size: 16px;
    color: #222
}

#cancellation>section>.total>.value.return {
    color: #51a351
}

#cancellation>section>.total>.value>.left {
    flex: 1 0 auto;
    padding: 16px 16px 10px 16px
}

#cancellation>section>.total>.value>.left a {
    text-decoration: underline;
    font-size: 14px;
    font-weight: 400;
    color: #6a6a6a;
    line-height: 1.1em
}

#cancellation>section>.total>.value>.perforation {
    width: 4px;
    background: url(https://tickets-deva.oebb.at/static/images/background/paymentPerforation.svg)
}

#cancellation>section>.total>.value>.right {
    padding: 16px 16px 10px 0;
    box-sizing: content-box;
    flex: 0 1 127px
}

#cancellation>section>.total>.buttons {
    padding: 18px 16px 18px 20px;
    background-color: #f0f0f0;
    background-clip: padding-box;
    border-top: 1px solid #afafaf
}

#cancellation>section>.total>.buttons a,
#cancellation>section>.total>.buttons>span {
    font-size: 16px;
    font-weight: 400;
    color: #51a351;
    line-height: 1.1em;
    margin-right: 43px
}

#cancellation>footer {
    background-color: #fff;
    box-shadow: 0 4px 13px 4px rgba(0, 0, 0, .75)
}

#cancellation>footer>div {
    margin: 0 264px 0 430px
}

@media (max-width:1439px) {
    #cancellation>footer>div {
        margin: 0 60px 0 263px
    }
}

@media (max-width:869px) {
    #cancellation>footer>div {
        margin-left: 124px
    }
}

@media (max-width:869px) {
    #cancellation>footer>div {
        margin: 0
    }
}

@media (max-width:479px) {
    #cancellation>footer>div {
        margin: 0;
        height: auto
    }
    #cancellation>footer>div .col2 p {
        font-size: 12px;
        margin: 0 5px 15px 0
    }
}

@media (min-width:479px) {
    #cancellation>footer>#cancellationButton {
        margin: 0
    }
}

@media (min-width:859px) {
    #cancellation>footer>#cancellationButton {
        margin: 0 62px 0 136px
    }
}

@media (min-width:1023px) {
    #cancellation>footer>#cancellationButton {
        margin: 0 67px 0 197px
    }
}

@media (min-width:1279px) {
    #cancellation>footer>#cancellationButton {
        margin: 0 60px 0 286px
    }
}

@media (min-width:1439px) {
    #cancellation>footer>#cancellationButton {
        margin: 0 262px 0 430px
    }
}

#cancellation>footer>#cancellationButton>.col3 {
    padding: 25px;
    max-width: 143px;
    min-width: 143px;
    display: flex;
    align-items: center
}

body[state="root.ticket.infocard"] #rightColumn {
    padding-left: 428px
}

@media (max-width:1439px) {
    body[state="root.ticket.infocard"] #rightColumn {
        padding-left: 262px
    }
}

@media (max-width:869px) {
    body[state="root.ticket.infocard"] #rightColumn {
        padding-left: 128px
    }
}

@media (max-width:869px) {
    body[state="root.ticket.infocard"] #rightColumn {
        padding-left: 83px
    }
}

@media (max-width:869px) {
    body[state="root.ticket.infocard"] #rightColumn {
        padding-left: 0;
        margin: 0
    }
}

#infocard {
    flex: 1;
    font-size: 12px;
    display: flex;
    margin-left: 0;
    opacity: 1;
    transition: margin-left .25s cubic-bezier(.23, 1, .675, 1.12), opacity .25s cubic-bezier(.23, 1, .675, 1.12);
    transition-delay: .2s
}

@media (max-width:869px) {
    #infocard {
        display: block;
        margin: 0
    }
    body[state="root.ticket.infocard"] #infocard .infocard {
        max-width: none;
        margin-bottom: 0
    }
    body[state="root.ticket.infocard"] #infocard .infoBubble[name=rtfInfocardFormBubble] {
        margin-left: 0;
        border-top: 1px solid #afafaf
    }
}

#infocard.ng-hide {
    margin-left: 500px;
    opacity: 0
}

#infocard>.leftContainer {
    display: flex;
    flex-direction: column
}

@media (min-width: 870px) {
    #infocard>.leftContainer {
        flex: 0 0 334px;
        width: 334px;
        margin: 32px 0 32px 0
    }
}

@media (min-width: 870px) {
    #infocard>.rightContainer {
        width: 334px;
        margin: 32px 0 32px 32px
    }
}

@media (max-width:869px) {
    #infocard>.rightContainer .dialog[name=rtfInfocardFormBubble] .checkboxButton>.col1 {
        width: 53px
    }
}

#infocard header {
    background-color: #f0f0f0;
    padding: 22px 32px;
    font-size: 18px;
    font-weight: 400
}

#infocard .subheader {
    background-color: #f0f0f0;
    padding: 22px 32px;
    margin: 0;
    color: #222
}

#journey {
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 10;
    overflow-y: auto;
    overflow-x: hidden
}

#journey .journey-preview-section {
    background-color: #fff
}

#journey .journey-preview-section .sections .printWrapper {
    padding-top: 75px;
    padding-bottom: 0;
    display: flex;
    justify-content: flex-end
}

@media print {
    #journey .journey-preview-section .sections .printWrapper {
        display: none
    }
}

#journey .journey-preview-section .sections .printWrapper .journey-print-button {
    color: #51a351;
    padding: 15px
}

@media (max-width:869px) {
    #journey .journey-preview-section .sections .printWrapper {
        padding-top: 0
    }
}

#journey .journey-preview-section .sections p {
    margin: 0
}

@media print {
    html {
        width: auto;
        height: auto
    }
    body[state="root.ticket.offer.journey"].printJourneyPreview * {
        overflow: visible
    }
    body[state="root.ticket.offer.journey"].printJourneyPreview #header,
    body[state="root.ticket.offer.journey"].printJourneyPreview #leftColumn,
    body[state="root.ticket.offer.journey"].printJourneyPreview #off-canvas,
    body[state="root.ticket.offer.journey"].printJourneyPreview .compareCartItemHeader,
    body[state="root.ticket.offer.journey"].printJourneyPreview .headline>h1,
    body[state="root.ticket.offer.journey"].printJourneyPreview .infoBubble,
    body[state="root.ticket.offer.journey"].printJourneyPreview .innerWrapper>header,
    body[state="root.ticket.offer.journey"].printJourneyPreview .mirroredScrollbar,
    body[state="root.ticket.offer.journey"].printJourneyPreview .printWrapper,
    body[state="root.ticket.offer.journey"].printJourneyPreview [iconname=printer],
    body[state="root.ticket.offer.journey"].printJourneyPreview compare-cart-button>button {
        display: none!important
    }
    body[state="root.ticket.offer.journey"].printJourneyPreview #rightColumn {
        width: 100%
    }
    body[state="root.ticket.offer.journey"].printJourneyPreview #content,
    body[state="root.ticket.offer.journey"].printJourneyPreview #content-wrapper,
    body[state="root.ticket.offer.journey"].printJourneyPreview #journey,
    body[state="root.ticket.offer.journey"].printJourneyPreview #main-wrapper,
    body[state="root.ticket.offer.journey"].printJourneyPreview .headline,
    body[state="root.ticket.offer.journey"].printJourneyPreview .innerWrapper,
    body[state="root.ticket.offer.journey"].printJourneyPreview .innerWrapper>section {
        box-shadow: none;
        display: block;
        overflow: visible;
        padding: 0;
        padding-left: 0!important;
        margin: 0;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        position: static
    }
    body[state="root.ticket.offer.journey"].printJourneyPreview #journey {
        -webkit-transform: none;
        transform: none
    }
    body[state="root.ticket.offer.journey"].printJourneyPreview #content {
        margin: 0!important
    }
    body[state="root.ticket.offer.journey"].printJourneyPreview .printDisclaimer {
        margin-top: 15px
    }
    body[state="root.ticket.offer.journey"].printJourneyPreview .trainSchedule {
        padding: 0 0 0 30px;
        border: none;
        page-break-before: auto
    }
    body[state="root.ticket.offer.journey"].printJourneyPreview .trainSchedule .trainScheduleHeader {
        padding-left: 0;
        margin-bottom: 28px
    }
    body[state="root.ticket.offer.journey"].printJourneyPreview .trainSchedule .trainScheduleHeader>h2,
    body[state="root.ticket.offer.journey"].printJourneyPreview .trainSchedule .trainScheduleHeader>p {
        margin: 18px 0;
        display: inline-block;
        font-size: 18px
    }
    body[state="root.ticket.offer.journey"].printJourneyPreview .trainSchedule .trainScheduleContent {
        font-size: 12px;
        height: auto!important;
        max-height: none!important
    }
}

#rightColumn #offers {
    opacity: 1
}

#rightColumn #offers.ng-hide-add-active,
#rightColumn #offers.ng-hide-remove-active {
    transition: opacity .3s ease-out
}

#rightColumn #offers.ng-hide {
    opacity: 0
}

#rightColumn .offers {
    max-width: 678px;
    margin: 95px 32px 0 0;
    padding-bottom: 40px
}

@media (max-width:869px) {
    #rightColumn .offers {
        margin: 26px 0 0 0;
        max-width: none
    }
}

#rightColumn .offers>.offersContainer .night-train-block-headline {
    font-size: 32px;
    color: #fff;
    font-weight: 400;
    margin: 38px 0 27px 0
}

@media (max-width:869px) {
    #rightColumn .offers>.offersContainer .night-train-block-headline {
        color: #222;
        margin-left: 16px;
        font-weight: 400
    }
}

body[state="root.ticket.offerinfocard"] #rightColumn {
    padding-left: 428px
}

@media (max-width:1439px) {
    body[state="root.ticket.offerinfocard"] #rightColumn {
        padding-left: 262px
    }
}

@media (max-width:869px) {
    body[state="root.ticket.offerinfocard"] #rightColumn {
        padding-left: 128px
    }
}

@media (max-width:869px) {
    body[state="root.ticket.offerinfocard"] #rightColumn {
        padding-left: 83px
    }
}

@media (max-width:869px) {
    body[state="root.ticket.offerinfocard"] #rightColumn {
        padding-left: 0;
        margin: 0
    }
}

#offerinfocard {
    flex: 1;
    font-size: 12px;
    display: flex;
    margin-left: 0;
    opacity: 1;
    transition: margin-left .25s cubic-bezier(.23, 1, .675, 1.12), opacity .25s cubic-bezier(.23, 1, .675, 1.12);
    transition-delay: .2s
}

@media (max-width:869px) {
    #offerinfocard {
        display: block;
        margin: 0
    }
    body[state="root.ticket.offerinfocard"] #offerinfocard .infocard {
        max-width: none;
        margin-bottom: 0
    }
    body[state="root.ticket.offerinfocard"] #offerinfocard .infoBubble[name=rtaInfocardFormBubble] {
        margin-left: 0;
        border-top: 1px solid #afafaf
    }
}

#offerinfocard.ng-hide {
    margin-left: 500px;
    opacity: 0
}

#offerinfocard>.leftContainer {
    display: flex;
    flex-direction: column
}

@media (min-width: 870px) {
    #offerinfocard>.leftContainer {
        flex: 0 0 334px;
        width: 334px;
        margin: 32px 0 32px 0
    }
}

@media (min-width: 870px) {
    #offerinfocard>.rightContainer {
        width: 334px;
        margin: 32px 0 32px 32px
    }
}

@media (max-width:869px) {
    #offerinfocard>.rightContainer .dialog[name=rtaInfocardFormBubble] .checkboxButton>.col1 {
        width: 53px
    }
}

#offerinfocard header {
    background-color: #f0f0f0;
    padding: 22px 32px;
    font-size: 18px;
    font-weight: 400
}

#offerinfocard .subheader {
    background-color: #f0f0f0;
    padding: 22px 32px;
    margin: 0;
    color: #222
}

body[state="root.ticket.person"] #header .text.wrapper {
    opacity: 1
}

body[state="root.ticket.person"] #header .content,
body[state="root.ticket.person"] #header .logo {
    display: none
}

@media (min-width: 870px) {
    body[state="root.ticket.person"] #header .logo {
        display: block
    }
}

body[state="root.ticket.person"] #header .content4 {
    margin-left: 65px
}

@media (min-width: 870px) {
    body[state="root.ticket.person"] #header .content4 {
        margin-left: 162px
    }
}

body[state="root.ticket.person"] #rightColumn {
    padding: 0;
    margin: 0;
    flex: 1
}

#person {
    font-size: 12px;
    margin-left: 0;
    opacity: 1;
    transition: margin-left .25s cubic-bezier(.23, 1, .675, 1.12), opacity .25s cubic-bezier(.23, 1, .675, 1.12);
    transition-delay: .2s;
    width: 100%
}

#person.ng-hide {
    margin-left: 500px;
    opacity: 0
}

#person .addPersonButton {
    margin-left: -42px
}

#person .addPersonButton>.buttonPad {
    margin-left: 42px
}

#person .addPersonButton:focus,
#person .addPersonButton:hover {
    background-color: #d7d7d7
}

#person .addNonPersonButton {
    background: 0 0;
    padding: 10px 0 10px 5px;
    border: none;
    color: #51a351!important
}

#person .addNonPersonButton:focus,
#person .addNonPersonButton:hover {
    color: #6fb86f!important
}

#person .addNonPersonButton:active {
    color: #91c991!important
}

#person .note {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    color: #6a6a6a
}

@media (min-width: 870px) {
    #person .note {
        font-weight: 400
    }
}

#person .infoBubble.noBubble>header {
    display: none
}

#person .infoBubble {
    -webkit-transform: scale(.3);
    transform: scale(.3);
    transition-delay: .1s;
    transition: opacity .2s cubic-bezier(.23, 1, .675, 1.12), -webkit-transform .2s cubic-bezier(.23, 1, .675, 1.12), transform .2s cubic-bezier(.23, 1, .675, 1.12)
}

#person .infoBubble.visible {
    -webkit-transform: scale(1);
    transform: scale(1)
}

#person .infoBubble.personLayout {
    margin-left: 0
}

#person .infoBubble.personLayout>.contentWrapper {
    padding: 0
}

#person .infoBubble.personLayout>.contentWrapper>section {
    margin: 0;
    padding: 0 0 0 32px
}

#person .infoBubble.personLayout>.contentWrapper>section .checkboxButton {
    border-bottom: 1px solid #e6e6e6
}

#person .infoBubble.personLayout>.contentWrapper>section .checkboxButton:last-child {
    border-bottom: none
}

#person .infoBubble.personLayout>.contentWrapper>section .checkboxButton>.col2 {
    padding-right: 29px
}

#person .infoBubble.personLayout>.contentWrapper>section .checkboxButton>.col2 label {
    white-space: nowrap
}

#person .infoBubble.personLayout>.contentWrapper>footer {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1em;
    padding: 14px 29px 14px 32px
}

#person .infoBubble.personLayout>.contentWrapper>footer:before {
    display: none
}

#person header.big {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1em;
    padding: 23px 29px 29px 32px
}

#person .infoBubble[name=personParents] {
    background-color: #f0f0f0
}

#person .infoBubble[name=personParents]>.contentWrapper>section {
    padding: 0
}

#person .infoBubble[name=personParents]>.contentWrapper>section .titleInfo {
    border-bottom: 1px solid #d7d7d7;
    padding-bottom: 15px
}

#person .infoBubble[name=personParents]>.contentWrapper>section>div {
    padding: 0 29px 0 32px
}

#person .infoBubble[name=personParents]>.contentWrapper>section .passenger {
    background-color: inherit
}

#person .infoBubble[name=personParents]>.contentWrapper>section .passenger:first-child {
    border-top: 1px solid #d7d7d7
}

#person .infoBubble[name=personChildren] {
    background-color: #f0f0f0
}

#person .infoBubble[name=personChildren]>.contentWrapper>section {
    padding: 0
}

#person .infoBubble[name=personChildren]>.contentWrapper>section .titleInfo {
    border-bottom: 1px solid #d7d7d7;
    padding-bottom: 15px
}

#person .infoBubble[name=personChildren]>.contentWrapper>section>div {
    padding: 0 29px 0 32px
}

#person .infoBubble[name=personChildren]>.contentWrapper>section .passenger {
    background-color: inherit
}

#person .infoBubble[name=personChildren]>.contentWrapper>section .passenger:first-child {
    border-top: 1px solid #d7d7d7
}

#person .infoBubble[name=addDiscount] {
    background-color: #f0f0f0
}

#person .infoBubble[name=addDiscount]>.contentWrapper>header {
    color: #222
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section {
    padding: 0
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .subHeader {
    padding: 0 29px 10px 32px;
    border-bottom: 1px solid #e6e6e6
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .subHeader .search svg {
    position: relative;
    top: 3px;
    margin-right: 10px
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .subHeader .search input {
    background-color: rgba(0, 0, 0, 0)
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .subHeader .search input::-ms-clear {
    display: none
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .subHeader .question {
    color: #222;
    padding: 15px 0 21px 0
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCards,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .searchResult,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .topTen {
    background-color: #fff;
    max-height: 240px;
    overflow-y: auto
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .searchResult,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .topTen {
    overflow: hidden
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .searchResult .listingContainer,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .topTen .listingContainer {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCards {
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard {
    position: relative;
    border-bottom: 1px solid #e6e6e6;
    background: 0 0;
    padding-right: 29px;
    padding-left: 32px;
    width: 100%
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard .detailsArrowRight,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard svg[iconname=detailsArrowRight],
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard .detailsArrowRight,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard svg[iconname=detailsArrowRight] {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard .btn:focus,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard:focus,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard:hover,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard .btn:focus,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard:focus,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard:hover {
    background-color: #e6e6e6
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard .btn:focus,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard .btn:focus {
    margin-right: -29px;
    margin-left: -32px;
    padding-right: 29px;
    padding-left: 32px
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard>.row,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard>.row {
    display: flex
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard>.row.row1,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard>.row.row1 {
    width: 250px;
    min-height: 48px
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard>.row>.col1,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard>.row>.col1 {
    display: flex;
    flex: 0 0 29px;
    width: 29px;
    align-items: center;
    min-height: 48px
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard>.row>.col2,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard>.row>.col2 {
    display: flex;
    flex: 1 1 auto;
    color: #222;
    font-size: 12px;
    align-items: center;
    min-height: 48px
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard>.row>.col2.form,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard>.row>.col2.form {
    display: block
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard>.row.row2 input,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard>.row.row2 input {
    background: 0 0
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .discountCard>.row>.column-layout,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard>.row>.column-layout {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard .close {
    opacity: 0;
    transition: opacity .3s ease-in, left .3s ease-in;
    position: absolute;
    right: 7px;
    top: 7px
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard .close:focus {
    opacity: 1;
    background-color: #e6e6e6
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard>.row.row1 .cardNumber,
#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard>.row.row1 .validTo {
    display: block;
    color: #6a6a6a;
    font-weight: 400;
    line-height: 1.3em
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard.kkmsCard>.row.row1 {
    height: 85px
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard.kkmsCard ts-icon>div {
    display: inherit!important
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard:hover .close {
    opacity: 1
}

#person .infoBubble[name=addDiscount]>.contentWrapper>section .passengerCard:focus .close {
    opacity: 1
}

#person .infoBubble[name=addDiscount] .infoBubbleArrow {
    z-index: -1000
}

#person .infoBubble[name=rememberOrEditPassenger] {
    margin: 0;
    background-color: #f0f0f0
}

#person .infoBubble[name=rememberOrEditPassenger]>.contentWrapper>header {
    padding: 23px 29px 19px 32px;
    border-bottom: 1px solid #d7d7d7
}

#person .infoBubble[name=rememberOrEditPassenger]>.contentWrapper>section {
    padding: 23px 29px 29px 32px!important
}

#person .infoBubble[name=rememberOrEditPassenger]>.contentWrapper>footer {
    border-top: 1px solid #d7d7d7;
    padding: 14px 29px 14px 32px!important;
    display: flex!important
}

#person .infoBubble[name=rememberOrEditPassenger]>.contentWrapper>footer input {
    margin: 0 12px 0 0
}

#person .infoBubble[name=personChallenged] {
    margin-left: 0;
    background-color: #f0f0f0
}

#person .infoBubble[name=personChallenged].noBubble {
    margin-right: 20px
}

#person .infoBubble[name=personChallenged]>.contentWrapper {
    padding: 0
}

#person .infoBubble[name=personChallenged]>.contentWrapper>header {
    color: #222;
    border-bottom: 1px solid #e6e6e6
}

#person .infoBubble[name=personChallenged]>.contentWrapper>section {
    margin: 0;
    padding: 0 0 0 32px
}

#person .infoBubble[name=personChallenged]>.contentWrapper>section>div>.error-txt {
    padding-right: 10px
}

#person .infoBubble[name=personChallenged]>.contentWrapper>section .checkboxButton {
    border-bottom: 1px solid #e6e6e6
}

#person .infoBubble[name=personChallenged]>.contentWrapper>section .checkboxButton .col1[data-selected=false] svg {
    fill: #7d7d7d
}

#person .infoBubble[name=personChallenged]>.contentWrapper>section .checkboxButton:last-child {
    border-bottom: none
}

#person .infoBubble[name=personChallenged]>.contentWrapper>section .checkboxButton>.col2 {
    padding-right: 29px
}

#person .infoBubble[name=personChallenged]>.contentWrapper>section .checkboxButton>.col2 label {
    white-space: normal
}

#person .infoBubble[name=personChallenged]>.contentWrapper>footer {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1em;
    padding: 14px 29px 14px 32px
}

#person .infoBubble[name=personChallenged]>.contentWrapper>footer:before {
    display: none
}

#person .buttonSubtitle,
#person .subtext {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3em;
    margin-top: 2px;
    color: #222
}

#person .buttonSubtitle {
    color: #6a6a6a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

#person>.leftContainer {
    display: flex;
    flex-direction: column;
    min-height: 566px;
    position: relative
}

@media (min-width: 870px) {
    #person>.leftContainer {
        float: left;
        width: 290px;
        margin: 32px 0 32px 83px
    }
}

@media (min-width: 870px) {
    #person>.leftContainer {
        width: 334px;
        margin-left: 128px
    }
}

@media (min-width: 870px) {
    #person>.leftContainer {
        margin-left: 264px
    }
}

@media (min-width:1440px) {
    #person>.leftContainer {
        margin-left: 430px
    }
}

@media (min-width: 870px) {
    #person>.leftContainer.hasCustomAttributes {
        min-width: 290px;
        width: auto
    }
}

@media (min-width: 870px) {
    #person>.leftContainer.hasCustomAttributes {
        min-width: 334px;
        width: auto
    }
}

#person>.leftContainer [name=missingNamesSummary] {
    background-color: #f0f0f0
}

#person>.leftContainer .innerPadLeft {
    padding-left: 42px
}

#person>.leftContainer .outerPadLeft {
    margin-left: 64px
}

#person>.leftContainer .innerPadRight {
    padding-right: 29px
}

#person>.leftContainer .buttonPad {
    padding: 14px 29px 14px 0;
    border-bottom: 1px solid #d7d7d7
}

#person>.leftContainer>.actions {
    flex: 1 0 240px;
    flex-direction: column;
    display: flex;
    padding-top: 12px;
    background-color: #f0f0f0
}

#person>.leftContainer>.actions>div {
    padding-bottom: 12px
}

#person>.leftContainer>.actions>div.error-txt {
    padding-right: 10px
}

#person>.leftContainer>.actions.remembered {
    flex: none;
    display: block
}

#person>.leftContainer>.actions.remembered>section {
    flex: none
}

#person>.leftContainer>.actions button {
    display: block
}

#person>.leftContainer>.actions [role=button] {
    color: #51a351;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25em
}

#person>.leftContainer>.actions [role=button] span {
    padding-left: 8px
}

@media (min-width:380px) {
    #person>.leftContainer>.actions [role=button] {
        font-size: 14px
    }
}

@media (min-width: 870px) {
    #person>.leftContainer>.actions [role=button] {
        line-height: 1.1em
    }
}

#person>.leftContainer>.actions>section {
    flex: 1;
    min-height: 75px
}

#person>.leftContainer>.actions>section .wrapper {
    position: relative
}

#person>.leftContainer>.actions>section .wrapper:hover>.delete {
    opacity: 1;
    -webkit-transform: translate3d(-55px, -22px, 0);
    transform: translate3d(-55px, -22px, 0)
}

#person>.leftContainer>.actions>section .wrapper>.delete {
    position: absolute;
    width: 1px;
    min-height: 1px;
    left: 0;
    top: 16px;
    opacity: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease-in-out .3s 1s
}

@media (min-width:380px) {
    #person>.leftContainer>.actions>section .wrapper>.delete {
        width: 55px;
        min-height: 55px;
        top: 18px
    }
}

#person>.leftContainer>.actions>section .wrapper>.delete.active,
#person>.leftContainer>.actions>section .wrapper>.delete:hover {
    opacity: 1;
    -webkit-transform: translate3d(-55px, -22px, 0);
    transform: translate3d(-55px, -22px, 0)
}

#person>.leftContainer>.actions>section [role=button] {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1em;
    position: relative
}

#person>.leftContainer>.actions>section [role=button]>div:first-of-type {
    width: 32px;
    float: left;
    border-bottom: none
}

#person>.leftContainer>.actions>section [role=button]>div:last-of-type {
    overflow: hidden
}

#person>.leftContainer>.actions>section [role=button].swipe-left.ng-leave {
    transition: .5s cubic-bezier(.42, 0, 1, 1) all;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

#person>.leftContainer>.actions>section [role=button].swipe-left.ng-leave.ng-leave-active {
    -webkit-transform: translate3d(-100vw, 0, 0);
    transform: translate3d(-100vw, 0, 0)
}

#person>.leftContainer>.actions>section [role=button].ng-animate {
    transition: .5s cubic-bezier(.42, 0, 1, 1) all;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

#person>.leftContainer>.actions>section [role=button].ng-animate.ng-hide {
    -webkit-transform: translate3d(-100vw, 0, 0);
    transform: translate3d(-100vw, 0, 0)
}

#person>.leftContainer>.actions>section [role=button].ng-animate.ng-hide .buttonPad {
    border-bottom: none
}

#person>.leftContainer>.actions>footer {
    height: 40px;
    margin-top: 55px;
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    align-content: center;
    justify-content: center
}

#person>.leftContainer>.actions>footer [role=button] {
    display: flex;
    flex: 0 0 auto;
    margin-right: 5px
}

#person>.leftContainer>.actions>footer.withAddVehicleButton .addNonPersonButton,
#person>.leftContainer>.actions>footer.withAddVehicleButton .addPersonButton {
    margin-right: 20px
}

#person>.leftContainer>.actions>footer.withAddVehicleButton .addNonPersonButton:last-child,
#person>.leftContainer>.actions>footer.withAddVehicleButton .addPersonButton:last-child {
    margin-right: 5px
}

#person>.rightContainer {
    display: none
}

@media (min-width: 870px) {
    #person>.rightContainer {
        display: block;
        float: left;
        width: 290px;
        margin: 32px 0 32px 32px
    }
}

@media (min-width: 870px) {
    #person>.rightContainer {
        width: 334px
    }
}

#person .form div.input-error {
    margin-top: 11px;
    max-width: 320px
}

#person .leftContainer.canAddGroup .actions {
    order: -1;
    margin-bottom: 10px;
    flex: inherit
}

#person .leftContainer.canAddGroup .actions.remembered {
    order: -2;
    margin-bottom: 0
}

#person .overview-wrapper {
    max-width: 360px
}

body[state^="root.ticket.person"] .leftContainer .new-passenger {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 4px;
    background: #fff;
    cursor: pointer
}

body[state^="root.ticket.person"] .leftContainer .new-passenger:hover {
    background-color: #e6e6e6
}

.infoBubble[name=vehicleHelp] .helpMessage a {
    text-decoration: underline
}

body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup {
    min-height: 0
}

body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup .passenger section .row1 {
    font-size: 12px;
    margin-top: 10px
}

body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup .passenger section .row2 {
    font-size: 16px;
    margin-top: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d7d7d7
}

body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup .passenger section .row3 {
    margin: 10px 0
}

@media (min-width:719px) {
    body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup .passenger section .row2 {
        border-bottom: none
    }
    body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup .passenger section .row3 {
        display: none
    }
}

body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup .actions {
    flex: 1 0 auto
}

body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup .actions header {
    font-size: 18px;
    margin: 16px 0 10px 0
}

body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup .actions form input {
    background: 0 0
}

body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup .actions form select[name=salutation] {
    height: 30px;
    padding-right: 12px
}

body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup .actions form input[name=firstname] {
    padding: 0 8px 7px 12px;
    width: 80px!important
}

body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup .actions form input[name=lastname] {
    padding: 0 8px 7px 12px;
    width: 92px!important
}

body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup .actions .me {
    font-size: 16px;
    border-bottom: 1px solid #d7d7d7
}

body[state="root.ticket.person"] #person .leftContainer.schoolcardGroup .actions footer {
    margin-top: 10px
}

body[state="root.ticket.person"] #person .infoBubble[name=selectSchoolcardGroup] {
    background-color: #f0f0f0
}

body[state="root.ticket.person"] #person .infoBubble[name=selectSchoolcardGroup] header {
    padding-bottom: 10px
}

body[state="root.ticket.person"] #person .infoBubble[name=selectSchoolcardGroup] .description {
    font-size: 12px
}

body[state="root.ticket.person"] #person .infoBubble[name=selectSchoolcardGroup] .schoolcardGroupList {
    font-size: 16px;
    margin-top: 10px;
    padding: 0
}

body[state="root.ticket.person"] #person .infoBubble[name=selectSchoolcardGroup] .schoolcardGroupList .schoolcardGroupItem {
    padding: 10px 0;
    border-bottom: 1px solid #d7d7d7;
    display: flex
}

body[state="root.ticket.person"] #person .infoBubble[name=selectSchoolcardGroup] .schoolcardGroupList .schoolcardGroupItem.selected {
    background-color: #fff
}

body[state="root.ticket.person"] #person .infoBubble[name=selectSchoolcardGroup] .schoolcardGroupList .schoolcardGroupItem .col1 {
    margin-left: 32px;
    flex-basis: 20px
}

body[state="root.ticket.person"] #person .infoBubble[name=selectSchoolcardGroup] .schoolcardGroupList .schoolcardGroupItem .col2 {
    margin-left: 10px
}

@media (max-width:869px) {
    body[state="root.ticket.postcheckout"] #header {
        display: none
    }
}

@media (max-width:869px) {
    body[state="root.ticket.postcheckout"] #content>.background {
        display: none
    }
}

#postcheckout {
    z-index: 0;
    overflow-y: auto;
    position: relative;
    width: 100%
}

@media (min-width: 870px) {
    #postcheckout {
        padding: 0 0 0 92px
    }
}

@media (min-width: 870px) {
    #postcheckout {
        padding: 0 0 0 264px
    }
}

#postcheckout>.scrollContainer .go-to-start-section {
    width: 100%;
    height: auto;
    min-height: 45px;
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f0f0f0
}

#postcheckout>.scrollContainer .go-to-start-section p {
    margin: 0 0 0 10px
}

@media (min-width:719px) {
    #postcheckout>.scrollContainer .go-to-start-section {
        display: none
    }
}

@media (min-width: 870px) {
    #postcheckout>.scrollContainer .orderBlock {
        margin-top: 64px
    }
    #postcheckout>.scrollContainer .orderBlock:first-child {
        margin-top: 32px
    }
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem {
    display: flex
}

@media (max-width:869px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem {
        flex-wrap: wrap
    }
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem p {
    font-size: 14px;
    line-height: 1.3em;
    margin: 0
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem h3 {
    font-size: 18px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left {
    float: left;
    margin-right: 18px;
    flex: 0 0 290px;
    width: 290px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left .acquired .col1 {
    padding-right: 5px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left .acquired .col1.acquisitionTypeSF_AND_MOBILE {
    padding-right: 12px
}

@media (max-width:869px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left {
        flex: 0 0 100%;
        order: 2;
        background: #f0f0f0
    }
}

@media (min-width: 870px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left {
        margin-right: 32px;
        flex: 0 0 334px;
        width: 334px
    }
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left .inner {
    padding: 0 12px 0 12px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left>hr {
    background-color: #d7d7d7
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left .form input[type=button] {
    font-size: 14px;
    line-height: 1.25em
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left>h1 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2em;
    color: #222;
    margin: 28px 12px 28px 12px
}

@media (max-width:869px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left>h1 {
        display: none
    }
}

@media (min-width: 870px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left>h1 {
        margin-left: 0;
        font-size: 30px;
        color: #fff
    }
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left>label#orderItemsListDescription,
#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left>label#undoneOrderItemsListDescription {
    display: none
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left>ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left>ul li {
    padding: 0
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left .optainMethod {
    text-align: right;
    margin-top: 15px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left .orderitems button {
    width: 100%;
    outline: 0
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left .acquire-section {
    padding: 16px 0;
    border-bottom: 1px solid #e6e6e6
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left .rail-drive-section h1 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2em;
    color: #222;
    margin: 28px 12px 28px 12px
}

@media (max-width:869px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left .rail-drive-section h1 {
        display: none
    }
}

@media (min-width: 870px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left .rail-drive-section h1 {
        margin-left: 0;
        font-size: 30px;
        color: #fff
    }
}

@media (max-width:869px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left .rail-drive-section h1 {
        display: block
    }
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left .rail-drive-section .col2 h3 {
    font-size: 18px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.left .rail-drive-section .col2 p {
    font-size: 14px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right {
    padding-left: 17.14px;
    background-clip: content-box;
    overflow: hidden;
    color: #222;
    flex: 0 0 100%
}

@media (min-width: 870px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right {
        flex: 0 0 290px;
        order: 1;
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
        background-clip: border-box
    }
}

@media (min-width: 870px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right {
        flex: 0 0 334px
    }
}

@media (max-width:869px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right {
        background: #f0f0f0;
        padding: 0
    }
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right .inner>h1,
#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>h1 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2em;
    color: #222;
    margin: 28px 12px 28px 12px
}

@media (min-width: 870px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right .inner>h1,
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>h1 {
        display: none
    }
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right .inner {
    padding: 20px 12px 0 12px
}

@media (min-width: 870px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right .inner {
        padding: 0 29px 0 32px
    }
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right .inner h1 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25em
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right .inner.borderBottom {
    border-bottom: 1px solid #d7d7d7;
    padding-top: 32px;
    padding-bottom: 32px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right .inner.borderTop {
    border-top: 1px solid #d7d7d7;
    padding-top: 32px;
    padding-bottom: 32px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container {
    background-color: #f0f0f0
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container.undone {
    margin: 85px 0 0 0;
    display: inline-block;
    width: 100%
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container.undone p {
    margin: 0;
    padding: 0
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container.undone p:last-child {
    margin-bottom: 25px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container.cancelled {
    display: inline-block;
    width: 100%
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container.cancelled p {
    margin: 0;
    padding: 0
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container.cancelled p.tariffs {
    margin-top: 16px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container.cancelled p.tariffs a {
    padding: 16px 0;
    font-size: 16px;
    color: #51a351
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container.cancelled p.insured {
    color: #3E73A5;
    padding-bottom: 10px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container.cancelled p:last-child {
    margin-bottom: 25px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container .undoableAriaLiveInformation {
    display: none
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container>.acquisition .decisionText {
    display: none
}

@media (max-width:869px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container>.acquisition {
        display: none
    }
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container>.acquisition .infoBubble[name=acquisitionDepCode2] {
    margin-top: 0
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container>.acquisition .infoBubble .contentWrapper .header,
#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container>.acquisition .infoBubble .contentWrapper footer,
#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container>.acquisition .infoBubble .contentWrapper section {
    font-size: 14px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container .infoBubble[name=revertPayment],
#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container .infoBubble[name=postCheckoutUndoError],
#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container .infoBubble[name=postCheckoutUndoAquiredError],
#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container .infoBubble[name=postCheckoutCancellation] {
    margin-left: 0
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container .inner {
    font-size: 14px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container .inner.optain {
    padding-top: 28px;
    padding-bottom: 28px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container .inner.optainLater {
    padding-top: 27px;
    padding-bottom: 26px
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container .inner .booking {
    margin: 0 0 8px 0;
    display: inline-block;
    width: 100%
}

@media (min-width: 870px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container .inner .booking {
        margin: 27px 0 26px 0
    }
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container .inner .booking p {
    margin: 0;
    padding: 0
}

#postcheckout>.scrollContainer .orderBlock>.orderBlockItem>.right>.container h1 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2em;
    color: #222;
    margin: 28px 12px 28px 12px
}

@media (min-width:719px) {
    #postcheckout>.scrollContainer .orderBlock>.orderBlockItem:last-child {
        margin-bottom: 32px
    }
}

#postcheckout .infoBubble>.contentWrapper .header,
#postcheckout footer,
#postcheckout section {
    font-size: 14px
}

#postcheckout .orderitem-default-cursor {
    cursor: default
}

#postcheckout .specialFormatFooter svg>g>g {
    fill: #64942c
}

#postcheckout .locked-item-text {
    padding-bottom: 16px
}

body[state="root.ticket.offer.journey.reservation"] #journey,
body[state="root.ticket.offer.journey.reservation"] #offers {
    display: none
}

body[state="root.ticket.offer.journey.reservation"] #rightColumn {
    background-color: #fff;
    margin-top: 0;
    overflow-y: auto
}

body[state="root.ticket.offer.journey.reservation"] #rightColumn iframe {
    margin-left: 430px
}

@media (max-width:1439px) {
    body[state="root.ticket.offer.journey.reservation"] #rightColumn iframe {
        margin-left: 262px
    }
}

@media (max-width:869px) {
    body[state="root.ticket.offer.journey.reservation"] #rightColumn iframe {
        margin-left: 185px
    }
}

@media (max-width:869px) {
    body[state="root.ticket.offer.journey.reservation"] #rightColumn iframe {
        margin-left: 0
    }
}

body[state="root.ticket.offer.journey.reservation"] #reservationIframe {
    border-color: #fff;
    border-width: 0
}

#rightColumn>#routes {
    max-width: 678px;
    margin: 95px 32px 0 0;
    opacity: 1
}

@media (max-width:869px) {
    #rightColumn>#routes {
        margin: 0;
        max-width: none
    }
    #rightColumn>#routes .loading {
        padding: 20px
    }
}

#rightColumn>#routes.ng-hide-add,
#rightColumn>#routes.ng-hide-remove {
    transition: 0s linear all;
    overflow: visible
}

#rightColumn>#routes.ng-hide-add-active {
    transition: margin-left .5s cubic-bezier(.23, 1, .675, 1.12), opacity .5s cubic-bezier(.23, 1, .675, 1.12)
}

#rightColumn>#routes.ng-hide {
    opacity: 0;
    margin-left: -500px
}

#rightColumn>#routes>.routes>.wrapper {
    opacity: 1;
    transition: opacity .3s ease-out .4s
}

#rightColumn>#routes>.routes>.wrapper.header {
    padding-bottom: 21px
}

@media (max-width:869px) {
    #rightColumn>#routes>.routes>.wrapper.header {
        margin: 0;
        background-color: #f0f0f0;
        padding: 39px 16px 21px 16px
    }
}

#rightColumn>#routes>.routes>.wrapper.ng-hide {
    opacity: 0
}

#rightColumn>#routes>.routes>.wrapper>h1 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 400
}

@media (max-width:869px) {
    #rightColumn>#routes>.routes>.wrapper>h1 {
        color: #222
    }
}

#rightColumn>#routes>.routes>.wrapper>.floatRight {
    margin-top: 8px
}

@media (min-width: 870px) {
    #rightColumn>#routes>.routes>.wrapper>.floatRight {
        margin-right: 16px
    }
}

#rightColumn>#routes>.routes>.wrapper .filterIconWrapper svg {
    fill: #fff
}

@media (max-width:869px) {
    #rightColumn>#routes>.routes>.wrapper .filterIconWrapper svg {
        fill: #878787
    }
}

#rightColumn>#routes>.routes>.wrapper .filterIconWrapper:focus,
#rightColumn>#routes>.routes>.wrapper .filterIconWrapper:hover {
    outline: 0
}

#rightColumn>#routes>.routes>.wrapper .filterIconWrapper:focus svg,
#rightColumn>#routes>.routes>.wrapper .filterIconWrapper:hover svg {
    fill: #ccc
}

#rightColumn>#routes>.routes>.wrapper>header {
    color: #fff;
    font-size: 12px;
    display: flex;
    margin-bottom: 13px
}

#rightColumn>#routes>.routes>.wrapper>header>span {
    text-align: center
}

#rightColumn>#routes>.routes>.wrapper>header .departure {
    flex: 0 0 88px
}

#rightColumn>#routes>.routes>.wrapper>header .travel {
    flex: 1 1
}

#rightColumn>#routes>.routes>.wrapper>header .arrival {
    flex: 0 0 88px
}

#rightColumn>#routes>.routes>.wrapper>header .price {
    flex: 0 0 123px;
    text-align: right;
    padding-right: 16px
}

@media (max-width:869px) {
    #rightColumn>#routes>.routes>.wrapper>header {
        background-color: #f0f0f0;
        color: #222;
        margin: 0 0 8px 0;
        padding: 5px 0
    }
}

#rightColumn>#routes>.routes>.wrapper>.button {
    font-size: 12px;
    color: #222;
    text-align: center;
    background-color: #fff;
    height: 39px;
    margin-bottom: 13px;
    line-height: 39px
}

#rightColumn>#routes>.routes>.wrapper>.button.disabled {
    cursor: no-drop;
    color: #e6e6e6
}

#rightColumn>#routes>.routes>.wrapper>.button.loading {
    cursor: wait
}

#rightColumn>#routes>.routes>.wrapper>.button:focus,
#rightColumn>#routes>.routes>.wrapper>.button:hover {
    background-color: #ccc
}

#rightColumn>#routes>.routes>.wrapper .filterIconActiveFiltersCount {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    font-size: 12px;
    padding: 2px;
    color: #fff;
    background-color: #e2002a;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    top: 0
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter {
    position: relative;
    top: -5px
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper {
    background-color: #e6e6e6;
    width: 100%;
    padding: 12px 0 0 0;
    overflow-y: auto
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper h2 {
    font-size: 24px;
    font-weight: 400;
    margin: 12px 32px 28px 32px
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .overview {
    border-bottom: solid 1px #d7d7d7;
    padding: 0 32px 30px 32px
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .overviewItem {
    float: left;
    width: 100%
}

@media (min-width: 870px) {
    #rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .overviewItem {
        width: 50%
    }
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .overviewItem>div {
    display: flex
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .overviewItem>div.top {
    min-height: 3em
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .overviewItem>div.action {
    margin-top: 26px
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .overviewItem>div .left {
    width: 65px;
    flex: 0 0 65px
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .overviewItem>div .right {
    flex: 1
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .overviewItem-1 {
    padding-right: 32px
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .overviewItem-2 {
    padding-left: 32px
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterResetAll {
    color: #51a351;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterResetAll svg {
    float: right;
    margin-right: 33px;
    fill: #51a351
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterDroppedConnectionsShow {
    color: #51a351;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterDroppedConnectionsShow:focus,
#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterDroppedConnectionsShow:hover,
#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterResetAll:focus,
#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterResetAll:hover {
    color: #6fb86f
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterDroppedConnectionsShow:focus svg,
#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterDroppedConnectionsShow:hover svg,
#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterResetAll:focus svg,
#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterResetAll:hover svg {
    fill: #6fb86f
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterDroppedConnectionsShow:active,
#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterResetAll:active {
    color: #91c991
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterDroppedConnectionsShow:active svg,
#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filterResetAll:active svg {
    fill: #91c991
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter-column {
    float: left;
    width: 100%
}

@media (min-width: 870px) {
    #rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter-column {
        width: 50%
    }
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter-column-1 div.label-inner {
    margin: 0 32px 0 28px
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter-column-2 div.label-inner {
    margin: 0 28px 0 32px
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .header {
    font-size: 1.1em;
    margin-top: 8px
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .icon-wrapper {
    width: 65px;
    flex: 0 0 65px
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .icon {
    width: 43px;
    height: 43px;
    border-radius: 25px
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .icon svg {
    fill: #222
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .icon svg line {
    stroke: #222
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .icon svg circle {
    stroke: #222
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .icon svg .base {
    fill: #fff
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .selected .icon svg {
    fill: #fff
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .selected .icon svg line {
    stroke: #fff
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .selected .icon svg circle {
    stroke: #fff
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .selected .icon svg .base {
    fill: #e2002a
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .selected .header {
    color: #e2002a
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter {
    width: 100%
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter label {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter label.focused {
    background: #afafaf
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter label:hover {
    background: #afafaf
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter div.label-inner {
    border-bottom: solid 1px #d7d7d7;
    padding: 13px 0;
    min-height: 6em;
    display: flex
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter label:hover div.label-inner {
    border-bottom-color: #afafaf
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter.last div.label-inner {
    padding-bottom: 30px
}

@media (min-width: 870px) {
    #rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter.last div.label-inner {
        border-bottom: none
    }
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter input {
    display: none
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter .content {
    flex: 1
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter .text {
    font-size: .9em
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter .suboptions {
    margin-top: 0
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter .suboptions select {
    border: none;
    border-bottom: solid 1px #878787;
    padding-left: 0;
    padding-right: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent url(https://tickets.oebb.at/static/images/icons/dropDownMenuIcon.svg) no-repeat right 3px center
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter .suboptions select:focus,
#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter .suboptions select:hover {
    background-color: #afafaf
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter .suboptions select::-ms-expand {
    display: none
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter .suboptions select svg {
    fill: red
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter .suboption {
    padding: 0 3px;
    background-color: #fff;
    display: inline-block;
    font-size: .9em;
    border-right: 1px solid #f9f9f9
}

#rightColumn>#routes>.routes>.wrapper .filterBubbleOuter .filterBubble.contentWrapper .filter .suboption.selected {
    color: #fff;
    background-color: #e2002a
}

#delivery-address,
#sepa {
    height: 100%;
    margin: 0;
    padding: 0 0 32px 0
}

@media (min-width:480px) {
    #delivery-address,
    #sepa {
        margin: 0 50px 0 0;
        padding: 12px 0 0 0
    }
}

@media (min-width:1440px) {
    #delivery-address,
    #sepa {
        margin: 0 315px 0 170px
    }
}

#delivery-address .form,
#sepa .form {
    height: 100%;
    max-height: calc(100% - 90px);
    overflow-y: auto;
    margin-bottom: 15px;
    background-color: #fff
}

#delivery-address .form .personalInfo,
#delivery-address .form .sepaMandate,
#sepa .form .personalInfo,
#sepa .form .sepaMandate {
    padding: 10px 40px
}

#delivery-address .form .personalInfo .authorizeSepaCheckbox,
#delivery-address .form .sepaMandate .authorizeSepaCheckbox,
#sepa .form .personalInfo .authorizeSepaCheckbox,
#sepa .form .sepaMandate .authorizeSepaCheckbox {
    fill: #51a351
}

#delivery-address .form .personalInfo .authorizeSepaCheckbox label,
#delivery-address .form .sepaMandate .authorizeSepaCheckbox label,
#sepa .form .personalInfo .authorizeSepaCheckbox label,
#sepa .form .sepaMandate .authorizeSepaCheckbox label {
    font-weight: 700
}

#delivery-address .form h2,
#sepa .form h2 {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3em;
    margin-bottom: 20px
}

#delivery-address .form hr,
#sepa .form hr {
    border: 0;
    background: #afafaf;
    height: 1px
}

#delivery-address .form .inputColumn,
#sepa .form .inputColumn {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

@media (min-width:480px) {
    #delivery-address .form .inputColumn,
    #sepa .form .inputColumn {
        flex-direction: row
    }
}

#delivery-address .form .inputRow,
#sepa .form .inputRow {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-bottom: 20px;
    width: 100%
}

@media (min-width:480px) {
    #delivery-address .form .inputRow,
    #sepa .form .inputRow {
        width: auto
    }
}

#delivery-address .form .inputRow .sex,
#sepa .form .inputRow .sex {
    color: #afafaf
}

@media (min-width:480px) {
    #delivery-address .form .inputRow.zipCode,
    #sepa .form .inputRow.zipCode {
        flex: 1 1 100px;
        max-width: 100px
    }
}

#delivery-address .form .inputRow .inputGroup,
#sepa .form .inputRow .inputGroup {
    margin-right: 10px
}

#delivery-address .form .inputRow .inputGroup input[disabled=disabled],
#sepa .form .inputRow .inputGroup input[disabled=disabled] {
    background-color: transparent;
    color: #afafaf
}

#delivery-address .form .inputRow .inputGroup input,
#sepa .form .inputRow .inputGroup input {
    width: 100%
}

.infoBubble[name=sepaAuthorization] {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 50px;
    top: 30vh
}

.infoBubble[name=sepaAuthorization].overlay {
    position: absolute;
    z-index: 101!important
}

.sepaAuthorizationBubble {
    width: 380px
}

@media (min-width:380px) {
    .sepaAuthorizationBubble {
        width: 380px
    }
}

.sepaAuthorizationBubble .content {
    height: 100%
}

.sepaAuthorizationBubble .content section input[type=button] {
    background: 0 0;
    padding: 10px 0;
    border: none;
    color: #51a351
}

.sepaAuthorizationBubble .content section input[type=button]:focus,
.sepaAuthorizationBubble .content section input[type=button]:hover {
    color: #6fb86f
}

.sepaAuthorizationBubble .content section input[type=button]:active {
    color: #91c991
}

.sepaAuthorizationBubble .content .right {
    padding-top: 5px
}

.sepaAuthorizationBubble .content .right section {
    padding-top: 5px
}

.sepaAuthorizationBubble .content .right footer {
    padding-top: 17px
}

.sepaAuthorizationBubble .content .right footer input[type=button]:focus,
.sepaAuthorizationBubble .content .right footer input[type=button]:hover {
    color: #6fb86f
}

.sepaAuthorizationBubble .content .right footer input[type=button]:active {
    color: #91c991
}

.sepaAuthorizationBubble .content.ng-enter {
    opacity: 0;
    transition: opacity ease-out .2s
}

.sepaAuthorizationBubble .content.ng-enter.ng-enter-active {
    opacity: 1
}

body[state="root.ticket.tariffs"] .oneColumn #rightColumn {
    margin-top: 0
}

#tariffs {
    margin: 0;
    padding: 0 0 32px 0;
    overflow-y: auto
}

@media (min-width:480px) {
    #tariffs {
        margin: 0 50px 0 0;
        padding: 12px 0 32px 0
    }
}

#leftColumn {
    z-index: 10;
    flex: 1 0 320px;
    width: 320px;
    display: flex;
    justify-content: center;
    position: relative;
    transition: opacity .4s ease-out, -webkit-transform .4s ease-out, transform .4s ease-out
}

.oneColumn #leftColumn {
    width: 0;
    flex: 0 0 0;
    margin: 0;
    padding: 0;
    display: none
}

#leftColumn .main-clock {
    max-width: 100%;
    max-height: 100%;
    display: none;
    width: 298px;
    height: 298px;
    opacity: 0
}

@media (min-width: 870px) {
    #leftColumn .main-clock {
        display: block
    }
    body[state="root.ticket.quickstart"] #leftColumn .main-clock,
    body[state="root.ticket.start"] #leftColumn .main-clock {
        opacity: 1
    }
}

body[state="root.ticket.relation"] #leftColumn {
    pointer-events: none
}

body[state="root.ticket.timetable"] #leftColumn,
body[state="root.ticket.via"] #leftColumn,
body[state="root.ticket.routes"] #leftColumn,
body[state="root.ticket.sepa"] #leftColumn,
body[state="root.ticket.deliveryAddress"] #leftColumn,
body[state="root.ticket.offer.journey"] #leftColumn,
body[state="root.ticket.baggageOffer"] #leftColumn,
body[state="root.ticket.offer"] #leftColumn {
    width: 286px;
    flex: 0 0 286px
}

body[state="root.ticket.voucher"] #leftColumn,
body[state="root.ticket.cancellation"] #leftColumn,
body[state="root.ticket.postcheckout"] #leftColumn,
body[state="root.ticket.p4ymentNew"] #leftColumn,
body[state="root.ticket.payment"] #leftColumn {
    width: 0;
    flex: 0 0 0;
    margin: 0;
    padding: 0;
    display: none
}

@media (min-width:380px) {
    #leftColumn {
        flex: 1 0 380px
    }
}

@media (min-width:480px) {
    #leftColumn {
        justify-content: flex-end
    }
}

@media (min-width: 870px) {
    #leftColumn {
        flex: 0 0 394px;
        justify-content: flex-start
    }
}

@media (min-width: 870px) and (max-width:860px) {
    body[state="root.ticket.travel"] #leftColumn {
        flex: 0 0 321px
    }
}

@media (min-width: 870px) {
    #leftColumn {
        flex: 0 0 412px
    }
}

@media (min-width: 870px) {
    #leftColumn {
        flex: 0 0 444px
    }
}

@media (min-width:1280px) {
    #leftColumn {
        flex: 0 0 552px
    }
}

@media (min-width:1440px) {
    #leftColumn {
        flex: 0 0 552px
    }
}

@media (max-width:869px) {
    body[state="root.ticket.quickstart"] #leftColumn,
    body[state="root.ticket.travel"] #leftColumn,
    body[state="root.ticket.relation"] #leftColumn {
        -webkit-transform: translate3d(0, 100vh, 0);
        transform: translate3d(0, 100vh, 0);
        opacity: 0;
        flex: 0 1 0px;
        width: 0;
        display: none
    }
    body[state="root.ticket.start"] #leftColumn {
        transition-delay: .4s
    }
}

#leftColumn .infocardSwitch {
    position: absolute;
    left: 32px;
    top: 10px;
    z-index: 1
}

#leftColumn .infocardSwitch:focus svg {
    fill: grey!important;
    outline: 0
}

@media (min-width: 870px) {
    #leftColumn .infocardSwitch {
        top: 46px
    }
}

#rightColumn {
    margin-top: 20px;
    flex: 1 0 307px;
    width: 307px;
    transition: flex 0 linear .4s, width 0 linear .4s;
    position: relative;
    overflow: hidden
}

#rightColumn.offers-footer {
    margin-bottom: 51px
}

@media (min-width:1440px) {
    #rightColumn {
        flex: 1 0 576px
    }
}

@media (max-width:869px) {
    body[state^="root.ticket.mycards"] #rightColumn,
    body[state^="root.ticket.mycoupons"] #rightColumn,
    body[state^="root.ticket.account"] #rightColumn {
        background-color: #222
    }
}

body[state="root.ticket.person"] #rightColumn,
body[state^="root.ticket.mycards"] #rightColumn,
body[state^="root.ticket.mycoupons"] #rightColumn,
body[state^="root.ticket.account"] #rightColumn {
    display: flex
}

.oneColumn #rightColumn {
    padding-left: 286px;
}

body[state="root.ticket.timetable"] .oneColumn #rightColumn,
body[state="root.ticket.mycoupons"] .oneColumn #rightColumn,
body[state="root.ticket.via"] .oneColumn #rightColumn,
body[state="root.ticket.routes"] .oneColumn #rightColumn,
body[state="root.ticket.sepa"] .oneColumn #rightColumn,
body[state="root.ticket.deliveryAddress"] .oneColumn #rightColumn {
    overflow-x: hidden
}

body[state="root.ticket.timetable"] .oneColumn #rightColumn,
body[state="root.ticket.mycoupons"] .oneColumn #rightColumn,
body[state="root.ticket.via"] .oneColumn #rightColumn,
body[state="root.ticket.routes"] .oneColumn #rightColumn,
body[state="root.ticket.sepa"] .oneColumn #rightColumn,
body[state="root.ticket.deliveryAddress"] .oneColumn #rightColumn,
body[state="root.ticket.offer.journey"] .oneColumn #rightColumn,
body[state="root.ticket.baggageOffer"] .oneColumn #rightColumn,
body[state="root.ticket.offer"] .oneColumn #rightColumn,
body[state="root.ticket.tariffs"] .oneColumn #rightColumn {
    padding-left: 0;
    margin-top: 0
}

@media (min-width: 870px) {
    body[state="root.ticket.timetable"] .oneColumn #rightColumn,
    body[state="root.ticket.mycoupons"] .oneColumn #rightColumn,
    body[state="root.ticket.via"] .oneColumn #rightColumn,
    body[state="root.ticket.routes"] .oneColumn #rightColumn,
    body[state="root.ticket.sepa"] .oneColumn #rightColumn,
    body[state="root.ticket.deliveryAddress"] .oneColumn #rightColumn,
    body[state="root.ticket.offer.journey"] .oneColumn #rightColumn,
    body[state="root.ticket.baggageOffer"] .oneColumn #rightColumn,
    body[state="root.ticket.offer"] .oneColumn #rightColumn,
    body[state="root.ticket.tariffs"] .oneColumn #rightColumn {
        padding-left: 145px
    }
}

@media (min-width: 870px) {
    body[state="root.ticket.timetable"] .oneColumn #rightColumn,
    body[state="root.ticket.mycoupons"] .oneColumn #rightColumn,
    body[state="root.ticket.via"] .oneColumn #rightColumn,
    body[state="root.ticket.routes"] .oneColumn #rightColumn,
    body[state="root.ticket.sepa"] .oneColumn #rightColumn,
    body[state="root.ticket.deliveryAddress"] .oneColumn #rightColumn,
    body[state="root.ticket.offer.journey"] .oneColumn #rightColumn,
    body[state="root.ticket.baggageOffer"] .oneColumn #rightColumn,
    body[state="root.ticket.offer"] .oneColumn #rightColumn,
    body[state="root.ticket.tariffs"] .oneColumn #rightColumn {
        padding-left: 286px
    }
}

body[state="root.ticket.timetable"] #rightColumn,
body[state="root.ticket.infocard"] #rightColumn,
body[state="root.ticket.person"] #rightColumn,
body[state="root.ticket.mycoupons"] #rightColumn,
body[state="root.ticket.via"] #rightColumn,
body[state="root.ticket.routes"] #rightColumn,
body[state="root.ticket.sepa"] #rightColumn,
body[state="root.ticket.deliveryAddress"] #rightColumn,
body[state="root.ticket.offer.journey"] #rightColumn,
body[state="root.ticket.baggageOffer"] #rightColumn,
body[state="root.ticket.offer"] #rightColumn,
body[state="root.ticket.tariffs"] #rightColumn {
    overflow: visible
}

body[state="root.ticket.timetable"] #rightColumn,
body[state="root.ticket.infocard"] #rightColumn,
body[state="root.ticket.cancellation"] #rightColumn,
body[state="root.ticket.person"] #rightColumn,
body[state="root.ticket.mycoupons"] #rightColumn,
body[state="root.ticket.via"] #rightColumn,
body[state="root.ticket.routes"] #rightColumn,
body[state="root.ticket.sepa"] #rightColumn,
body[state="root.ticket.deliveryAddress"] #rightColumn,
body[state="root.ticket.offer.journey"] #rightColumn,
body[state="root.ticket.baggageOffer"] #rightColumn,
body[state="root.ticket.offer"] #rightColumn,
body[state="root.ticket.tariffs"] #rightColumn,
body[state="root.ticket.payment"] #rightColumn {
    overflow-y: auto
}

body[state="root.ticket.voucher"] #rightColumn,
body[state="root.ticket.cancellation"] #rightColumn,
body[state="root.ticket.postcheckout"] #rightColumn,
body[state="root.ticket.p4ymentNew"] #rightColumn,
body[state="root.ticket.payment"] #rightColumn {
    width: 0;
    flex: 0 0 0;
    margin: 0;
    padding: 0;
    display: none
}

@media (min-width: 870px) and (max-width:869px) {
    body[state="root.ticket.travel"] #rightColumn {
        justify-content: flex-end
    }
}

@media (max-width:869px) {
    body[state="root.ticket.start"] #rightColumn {
        flex: 0 1 0px;
        width: 0;
        padding-left: 0;
        padding-top: 0;
        transition-delay: .2s
    }
    body[state="root.ticket.quickstart"] #rightColumn,
    body[state="root.ticket.travel"] #rightColumn,
    body[state="root.ticket.relation"] #rightColumn {
        transition-delay: .2s
    }
}

@media (max-width:869px) {
    body[state="root.ticket.voucher"] #header {
        background: url(https://tickets.oebb.at/static/images/views/root/ticket/voucher/background/backgroundBuchung768x95.svg) right top repeat-y #fff;
        box-shadow: none;
        border-bottom: 1px solid #6a6a6a
    }
    body[state="root.ticket.voucher"] #header .logo.wrapper {
        display: none
    }
    body[state="root.ticket.voucher"] #header .subheader>.col1 {
        align-self: auto;
        justify-content: auto
    }
    body[state="root.ticket.voucher"] #header .subheader>.col2 {
        color: #fff;
        font-size: 20px
    }
}

#voucher {
    z-index: 1;
    flex: 1;
    overflow-y: auto;
    position: relative
}

#voucher .locked-header {
    margin-right: 0
}

#voucher .info-bubble-section {
    width: auto;
    max-width: 678px;
    margin-top: 32px;
    margin-left: 430px
}

@media (max-width:1439px) {
    #voucher .info-bubble-section {
        margin-left: 263px
    }
}

@media (max-width:869px) {
    #voucher .info-bubble-section {
        margin-left: 124px
    }
}

@media (max-width:869px) {
    #voucher .info-bubble-section {
        margin: 0
    }
}

#voucher .orderItem.full {
    position: relative;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2em;
    margin: 32px 0 20px 430px;
    max-width: 678px;
    background: url(https://tickets.oebb.at/static/images/views/root/ticket/voucher/background/backgroundBuchung768x95.svg) right top repeat-y
}

#voucher .orderItem.full .orderItemWrapper {
    padding: 43px 59px 36px 0
}

@media (max-width:1439px) {
    #voucher .orderItem.full {
        margin-left: 263px
    }
}

@media (max-width:869px) {
    #voucher .orderItem.full {
        margin-left: 124px;
        font-size: 14px
    }
    #voucher .orderItem.full h2 svg {
        width: 20px;
        height: 16px!important
    }
    #voucher .orderItem.full .block svg {
        width: 18px;
        height: 14px!important;
        margin-top: 2px
    }
}

@media (max-width:869px) {
    #voucher .orderItem.full {
        margin: 0;
        max-width: 100%
    }
    #voucher .orderItem.full .orderItemWrapper {
        padding: 30px 32px 30px 0
    }
}

@media (max-width:480px) {
    #voucher .orderItem.full h2 {
        font-family: "Frutiger Next"!important;
        font-size: 20px!important
    }
}

@media (max-width:320px) {
    #voucher .orderItem.full .orderItemWrapper {
        padding-right: 15px
    }
}

#voucher .orderItem.full.acquired {
    background-position: right top, right top;
    background-repeat: no-repeat, repeat-y;
    color: #222;
    background-image: url(https://tickets.oebb.at/static/images/views/root/ticket/voucher/background/security.svg), url(https://tickets.oebb.at/static/images/views/root/ticket/voucher/background/backgroundTicket768x96.png)
}

#voucher .orderItem.full.acquired .block .col2 {
    border-bottom: none;
    border-top: 1px solid #6a6a6a
}

#voucher .orderItem.full.acquired .block.full .col2 {
    border-bottom: 1px solid #6a6a6a
}

#voucher .orderItem.full.acquired .block.full .col2 svg {
    float: right;
    color: #868686;
    fill: #868686
}

#voucher .orderItem.full.acquired .card .col2 {
    border-top: none;
    border-bottom: 1px solid #afafaf
}

#voucher .orderItem.full .connectionRelationIconWrapper:after {
    content: "\A";
    white-space: pre
}

#voucher .orderItem.full svg {
    width: 22px
}

#voucher .orderItem.full svg.donut {
    width: 50px
}

#voucher .orderItem.full h2 {
    font-size: 32px;
    line-height: 1.1em;
    margin: 0
}

#voucher .orderItem.full h2:last-of-type {
    margin-bottom: 26px
}

#voucher .orderItem.full a {
    margin: 0
}

#voucher .orderItem.full .col1 {
    width: 154px;
    float: left;
    text-align: right;
    padding-right: 32px
}

#voucher .orderItem.full .col1 .AcquisitionTypeMOBILE svg {
    padding-bottom: 46px
}

@media (max-width:869px) {
    #voucher .orderItem.full .col1 {
        width: 130px
    }
}

@media (max-width:479px) {
    #voucher .orderItem.full .col1 {
        width: 100px
    }
}

@media (max-width:320px) {
    #voucher .orderItem.full .col1 {
        width: 82px;
        padding-right: 15px
    }
}

#voucher .orderItem.full .col1 .depCode svg {
    width: 50px
}

#voucher .orderItem.full .col1 .pieChart {
    padding-left: 25px
}

#voucher .orderItem.full .col2 {
    overflow: hidden
}

#voucher .orderItem.full .col2 p {
    margin: 0
}

#voucher .orderItem.full .block .col1 {
    font-size: 14px
}

@media (max-width:479px) {
    #voucher .orderItem.full .block .col1 {
        font-size: 12px
    }
}

#voucher .orderItem.full .block .col1,
#voucher .orderItem.full .block .col2 {
    padding-top: 16px;
    padding-bottom: 16px
}

#voucher .orderItem.full .block .col2 {
    border-bottom: none;
    border-top: 1px solid #6a6a6a
}

#voucher .orderItem.full .block .col2 .passengerListItem {
    display: flex;
    flex-wrap: wrap
}

#voucher .orderItem.full .block .col2 svg {
    float: right
}

#voucher .orderItem.full .block .col2 svg[iconname=connectionRelation] {
    float: none
}

#voucher .orderItem.full .block .col2 p svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

#voucher .orderItem.full .block.full .col2 {
    border-bottom: 1px solid #6a6a6a
}

#voucher .orderItem.full .block.half {
    display: flex
}

#voucher .orderItem.full .block.half .col1,
#voucher .orderItem.full .block.half .col2 {
    padding-top: 0
}

#voucher .orderItem.full .block.half .col2 {
    border: none
}

#voucher .orderItem.full .block.via .col2 {
    font-size: 16px
}

#voucher .orderItem.full .validityInfoWrapper .block .col1,
#voucher .orderItem.full .validityInfoWrapper .block .col2 {
    border: none;
    padding-top: 5px;
    padding-bottom: 5px
}

#voucher .orderItem.full .validityInfoWrapper .category .col2 {
    border-top: 1px solid #6a6a6a;
    padding-top: 16px
}

#voucher .orderItem.full .validityInfoWrapper .last .col2 {
    padding-bottom: 16px
}

#voucher .orderItem.full .insuranceData svg {
    margin-top: 10px
}

#voucher .orderItem.full .insuranceData a {
    text-decoration: underline;
    font-size: 14px
}

#voucher .orderItem.full .insuranceData .col1 {
    padding-top: 15px
}

#voucher .orderItem.full .insuranceData .col2 {
    padding: 15px 0;
    border-top: 1px solid #6a6a6a
}

#voucher .orderItem.full .insuranceData .insuranceDetails {
    font-size: 14px
}

#voucher .orderItem.full .insuranceData .hint {
    line-height: 2em
}

#voucher .orderItem.full .bookingcode {
    text-align: right;
    font-size: 14px;
    line-height: 1.25em;
    margin: 22px 0 0 0
}

#voucher .orderItem.full .purchasedOn {
    text-align: right;
    font-size: 14px;
    line-height: 1.25em
}

#voucher .orderItem.full .details .col2 a {
    text-decoration: underline
}

#voucher .orderItem.full .details .col2 a:focus,
#voucher .orderItem.full .details .col2 a:hover {
    color: #d9d9d9
}

#voucher .orderItem.full .details .price {
    float: right;
    margin-right: 6px
}

#voucher .orderItem.full .card .col2 {
    border-top: none;
    border-bottom: 1px solid #6a6a6a
}

#voucher .orderItem.full .locked-header {
    background: #868686;
    font-size: 14px
}

#voucher .orderItem.full .locked-header svg {
    margin-top: 5px
}

#voucher .output {
    position: relative;
    background-color: #f0f0f0;
    color: #222;
    min-height: 30vh;
    padding: 0 60px 15px 430px
}

@media (max-width:1439px) {
    #voucher .output {
        padding-left: 263px
    }
}

@media (max-width:869px) {
    #voucher .output {
        padding-left: 124px
    }
}

@media (max-width:869px) {
    #voucher .output {
        padding: 1px 12px 10px
    }
}

#voucher .output .borderBottom {
    border-bottom: 1px solid #d7d7d7
}

#voucher .output .lock-info {
    padding-top: 10px
}

#voucher .output .lock-info h2 {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 0
}

#voucher .output .optain {
    padding: 28px 29px 13px 0
}

@media (max-width:869px) {
    #voucher .output .optain {
        padding: 22px 0 0 0!important
    }
}

#voucher .output .borderTop {
    border-top: 1px solid #d7d7d7;
    font-size: 14px
}

#voucher .output>h1 {
    border-bottom: 1px solid #d7d7d7;
    padding: 32px 32px 25px 32px;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.1em;
    margin: 0
}

#voucher .output h3 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3em;
    margin: 0
}

#voucher .output a,
#voucher .output p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3em
}

#voucher .output a {
    margin: 0
}

#voucher .output .acquisition,
#voucher .output>div {
    max-width: 678px
}

@media (max-width:869px) {
    #voucher .output .acquisitionMethod .col2 {
        padding-top: 14px
    }
}

@media (max-width:869px) {
    #voucher .output .acquisitionMethod.inner {
        padding-left: 0
    }
}

#voucher .output .acquisition {
    padding-top: 1px
}

#voucher .output .acquisition h2 {
    margin: 0
}

#voucher .output .addToCalendar {
    border-top: 1px solid #d7d7d7;
    padding: 10px 29px 13px 0
}

#voucher .output .addToCalendar>a {
    color: #51a351
}

#voucher .output .addToCalendar>a>svg {
    display: block;
    float: left;
    padding-right: 10px;
    fill: #51a351;
    width: 30px;
    height: 19px
}

#voucher .output .abo>a {
    color: #51a351
}

#voucher .output .abo h2 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25em
}

#voucher .output .channel {
    padding: 0 32px 0 11px;
    margin-left: 21px;
    display: flex;
    border-bottom: 1px solid #d7d7d7
}

#voucher .output .channel .col1 {
    flex: 0 0 116px;
    display: flex;
    align-items: center
}

#voucher .output .channel .col2 {
    padding: 25px 0 25px 0
}

#voucher .output .undo {
    padding: 0
}

#voucher .output .undo h2 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1em;
    margin: 30px 0 21px 0
}

#voucher .output .undo a {
    margin-top: 30px;
    color: #51a351
}

#voucher .output .addToCalendar a:focus,
#voucher .output .addToCalendar a:hover,
#voucher .output .undo a:focus,
#voucher .output .undo a:hover {
    color: #6fb86f
}

#voucher .output .addToCalendar a:active,
#voucher .output .undo a:active {
    color: #91c991
}

#voucher .output .infoBubble.border {
    border: none
}

#voucher .output .infoBubble.border>.contentWrapper {
    font-size: 14px;
    border: none;
    padding: 0!important
}

#voucher .output .infoBubble.border>.contentWrapper header {
    display: none
}

#voucher .output .infoBubble.border>.contentWrapper section {
    color: #222;
    margin: 0;
    font-size: 14px
}

#voucher .output .infoBubble.border>.contentWrapper footer {
    padding: 34px 0 26px;
    border-top: none;
    font-size: 14px
}

#voucher .output .infoBubble.border>.contentWrapper footer .output a {
    font-size: 16px
}

#voucher .output .acquisition ol {
    padding-top: 23px;
    font-size: 14px
}

#voucher .output .acquisition footer hr,
#voucher .output .acquisition footer input {
    margin-left: 0;
    padding-left: 0;
    font-size: 14px
}

#voucher .output .acquisition footer input {
    margin-right: 16px
}

@media (min-width:380px) {
    #voucher .timecards {
        display: flex;
        align-items: center;
        justify-content: space-between
    }
    #voucher .timecards .dates {
        flex: 1
    }
}

@media (max-width:380px) {
    #voucher .renew {
        text-align: center;
        margin-bottom: 25px
    }
}

#voucher #renewTicket {
    background-color: #64942c;
    padding: 8px 12px
}

#voucher #renewTicket:hover {
    background-color: #508546
}

#voucher #renewTicket:active {
    background-color: #558164
}

body[state="root.vc.shop"] #content>#shop {
    flex: 1
}

body[state="root.vc.shop"] #content>#shop>div.container {
    width: 100%;
    height: 100%;
    text-align: center
}

body[state="root.vc.shop"] #content>#shop>div.container>.kkmsIframeContainer {
    width: 100%;
    height: 100%
}

body[state="root.vc.shop"] #content>#shop>div.container>.kkmsIframeContainer.old-ios {
    height: calc(100vh - 120px)
}

@media (max-width:320px) {
    body[state="root.vc.shop"] #content>#shop>div.container>.kkmsIframeContainer.old-ios {
        height: calc(100vh - 170px)
    }
}

body[state="root.vc.shop"] #content>#shop>div.container>.kkmsIframeContainer.mobile {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

body[state="root.vc.shop"] #content>#shop>div.container>.kkmsIframeContainer>iframe {
    position: relative;
    display: block;
    margin: 0 auto;
    height: 100%;
    z-index: 100
}

body[state="root.vc.shop"] #content>#shop>div.container>.kkmsIframeContainer .fix-width {
    width: 706px
}

body[state="root.vc.shop"] #content>#shop>div.container>div.noIframe {
    display: none
}

body[state="root.vc.shop"] #content>#shop>div.container>div.noIframe>.infoBubble {
    margin-left: 20px;
    margin-right: 20px
}

body[state="root.vc.shop"] #content>#shop>div.container>div.noIframe>.infoBubble footer {
    display: none
}

@media (max-width:720px) {
    body[state="root.vc.shop"] #content>#shop>div.container>div.noIframe {
        display: block
    }
}

#header .layout-personal-header-mobile {
    width: 100%
}

#header .layout-personal-header-mobile .grey-box {
    height: 48px;
    background-color: #878787
}

#header .layout-personal-header-mobile .heading {
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px
}

#lessvars .screen_xs {
    width: 320px
}

#lessvars .screen_xs_sm {
    width: 380px
}

#lessvars .screen_sm {
    width: 480px
}

#lessvars .screen_md {
    width: 720px
}

#lessvars .screen_md_lg {
    width: 860px
}

#lessvars .screen_lg {
    width: 1024px
}

#lessvars .screen_lg_xl {
    width: 1280px
}

#lessvars .screen_xl {
    width: 1440px
}

#lessvars .maxScreenWidth {
    width: 1440px
}

#lessvars .infoBubbleArrowSide {
    width: 24px
}

#lessvars .infoBubbleArrowHeight {
    width: 34.29px
}