/* Desktop and general */
html {
    text-align: center;
}

body {
    display: inline-block;
    width: 768px;
    background-color: #f2f2f4;
}

.container-fluid {
    text-align: left;
    padding: 25px 0;
}

h2 {
    margin: 0 0 12px 0;
}

a {
    color: #51b9c7;
}

a:hover, a:focus {
    color: #f7145c;
}

.btn, .btn:link, .btn:active, .btn:focus {
    background-color: #51b9c7;
    color: #fff;
    transition: background-color 0.3s ease-out 0s;
    -webkit-transition: background-color 0.3s ease-out 0s;
    -o-transition: background-color 0.3s ease-out 0s;
    -moz-transition: background-color 0.3s ease-out 0s;
    padding: 0 12px;
    line-height: 40px;
    height: 40px;
    font-size: 16px;
    margin: 14px -6px 0 0;
}

.btn:hover {
    background-color: #f7145c;
}

.row.navigation {
    padding: 0 25px 25px 25px;
}

.navigation a.logolink {
    display: none;
}

.row.navigation >div:nth-child(2) {
    display: block!important;
}

.row.navigation >div:first-child {
    display: block;
    width: 66.66666667%;
}

input.readonly {
    color: #51b9c7;
}

.logo {
    display: none;
}

.radiobutton.active {
    background-image: url(../../img/iframe/radiobutton-colored.png);
}

.navigation .hidden-md.hidden-lg {
    display: block;
}

.navigation .hidden-sm.hidden-xs.hidden-xs {
    display:none;
}

.navigation .col-md-2 {
    background-color: #f2f2f4;
    font-size: 1.5em;
    width: 33.33333%;
    border-left: 1px solid #fff;
}

.navigation a {
    padding: 4px 0 10px;
    color: #51b9c7;
    font-size: 14px;
}

.navigation a.mobile-helplink {
    margin: 0 -5px 0 0;
    font-size: 16px;
    text-align: right;
    line-height: 70px;
    display: block;
    padding: 0;
}

.navigation a.mobile-helplink:hover {
    color: #f7145c;
    transition: color 0.3s ease-out 0s;
    -webkit-transition: color 0.3s ease-out 0s;
    -o-transition: color 0.3s ease-out 0s;
    -moz-transition: color 0.3s ease-out 0s;
}

.navigation a .circle {
    display: block;
    width: 20px;
    height: 20px;
    margin: 10px auto 6px auto;
}

.navigation a[data-step="1"].active .circle { background-image: url("../../img/iframe/step1_80x80_active.png"); }
.navigation a[data-step="2"].active .circle { background-image: url("../../img/iframe/step2_80x80_active.png"); }
.navigation a[data-step="3"].active .circle { background-image: url("../../img/iframe/step3_80x80_active.png"); }

.navigation a[data-step="1"] .circle { background-image: url("../../img/iframe/step1_80x80_inactive.png"); }
.navigation a[data-step="2"] .circle { background-image: url("../../img/iframe/step2_80x80_inactive.png"); }
.navigation a[data-step="3"] .circle { background-image: url("../../img/iframe/step3_80x80_inactive.png"); }

.navigation a.active, .navigation a:hover .navigation a:focus .navigation a:active {
    background-color: #51b9c7;
    color: #fff;
}

.popupnavigation {
    background-color: #51b9c7;
    height: 70px;
}

.popupnavigation h3.schemaheader {
    text-align: left;
    font-size: 15px;
    line-height: 74px;
    padding: 0 0 0 20px;
    color: #fff;
}

.closebutton {
    background-size: 100%;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 28px 19px 0 0;
    cursor: pointer;
    background-image: url(../../img/iframe/close-phone.png);
}

form {
    margin-bottom: 0;
}

.contentPane[data-step="schema"] .auslegung .schema {
    margin: 0 0 0 -5px;
}

.contentPane[data-step="schema"] .umrechnung .schema {
    margin: 0 -5px 0 0;
    float: right;
}

.row .col-md-5.col-sm-5, .row .col-sm-6 {
    font-style: italic;
    opacity: 0.8;
}

.position-container {
    color: #51b9c7;
}

.tab-content .subheader {
    padding: 0 25px;
}

.row.white-row {
    padding: 7px 25px;
    border: none;
}

.row.white-row .xsfontsize {
    font-size: 13px;
}

.anleitung h2 {
    display: none;
}

.contentPane.anleitung {
    background-color: #fff;
}

.row.bottom-nav {
    margin: 0 3px;
}

.errorContent {
    background-image: url(../../img/iframe/popover_bg.png);
    background-repeat: no-repeat;
}

.errorHandler {
    background-image: url("../../img/iframe/error.png");
}

.hasError, .row.white-row.hasError {
    color: #f7145c!important;
}

.hasError input.textField, .row.white-row.hasError input[type=text] {
    border-color: #f7145c;
    background: #ffecf2;
}

a.backlink:hover {
    color: #f7145c;
}

/* Uncomment this when you have time to change assets to css */
/*.navigation .circle {
    display: inline;
}

.navigation .circle::before {
    border: 1px solid #d0cfcf;
    color: #d0cfcf;
    text-align: center;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    vertical-align: middle;
    line-height: 18px;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-top: -2px;
}

.navigation a[data-step="1"] .circle::before {
    content: '1';
}

.navigation a[data-step="2"] .circle::before {
    content: '2';
}

.navigation a[data-step="3"] .circle::before {
    content: '3';
}*/

/* Tablet */
@media (max-width: 992px) {
    /*.row.navigation {
        margin-top: 0!important;
    }*/
    .navigation a {
        color: #51b9c7;
    }
    /*.navigation a.active, .navigation a:hover .navigation a:focus .navigation a:active {
        background-color: #51b9c7;
        color: #fff;
    }*/
    /*.tab-content {
        padding: 0 25px;
    }*/
}

/* Phone */
@media (max-width: 767px) {
    body {
        width: 100%;
        background-color: #fff;
    }
}