/*Basis: ?*/
/*Rot: #e40615
  Grau: #575757
*/
body {
    background-image: none;
    background-color: #E7E7E7; /*use if background is white*/
    color: #575757;
}
body > header {
    background-color: #ffffff; /*use if background is white*/
}

h1, h2, h3 {
    color: #e40615;
}
hr {
    border-color: #e40615;
}

/*LInks*/
a, .faq li a, .faq {
    color:#e40615;
}

.logo {
    margin: 16px; 
}

.logo img {
    width: 45%;
}

/*Farbe Hintergrund*/
.pagecontent {
    background-image: none;
    background-color: #ffffff;
    color: #000000;
}

/*Farbe Klappfunktion unter "So geht's"*/
.foldingTitle {
    border: 1px solid #575757;
    background:#575757;
}
.foldingTitle .csc-header > *:first-child {  
    /* font-size: 16px; */
    color: #fff;
    display: inline-flex;
}

/*Pfeil nach unten*/
.foldingTitle .csc-header > *:first-child::before {
    content: "\25BE";
    padding-right: 12px;
}

/*Qr-code*/
.qrcode--booking {
    margin: 10px auto 10px -8px;
}


/* Während den Schritten im Buchungsprozess sollten die „erledigten“ Schritte (Piktogramme) statt blau in dem grün (wie Buttons) sein. */

.cbp_tmtimeline > li.active .hi-icon,
.cbp_tmtimeline > li.completed .hi-icon {
    box-shadow: 0 0 0 1px rgba(101, 101, 101, 0.5);
}

.hi-icon:before {
    background: #575757;
}
.hi-icon::after {
    box-shadow: 0 0 0 1px #575757;
}
.hi-icon {
    box-shadow: 0 0 0 1px #575757;
}

/*Farbe Icons für bei den Schritten 1-5*/
.cbp_tmtimeline_small li.completed .hi-icon-suchen span {
    background: url('/../../typo3conf/ext/sq_bikebox/Resources/Public/images/icon-suchen-small-gray.png') 20px center no-repeat;
}
.cbp_tmtimeline_small li.completed .hi-icon-buchen span {
    background: url('/../../typo3conf/ext/sq_bikebox/Resources/Public/images/icon-buchen-small-gray.png') 20px center no-repeat;
}
.cbp_tmtimeline_small li.completed .hi-icon-bezahlen span {
    background: url('/../../typo3conf/ext/sq_bikebox/Resources/Public/images/icon-bezahlen-small-gray.png') center center no-repeat;
}
.cbp_tmtimeline_small li.completed .hi-icon-erhalten span {
    background: url('/../../typo3conf/ext/sq_bikebox/Resources/Public/images/icon-erhalten-small-gray.png') center center no-repeat;
}

.cbp_tmtimeline::before {
    background: #e6e6e6;
}

.cbp_tmtimeline > li.active .hi-icon::before {
    background: #e40615;
}

.cbp_tmtimeline > li.active .cbp_tmicon {
    background: #e40615;
}

.cbp_tmtimeline_large .hi-icon:hover {
    box-shadow: 0 0 0 1px #e40615;
}

.cbp_tmtimeline_large .hi-icon:hover::before {
    background: #e40615;
}

.cbp_tmtimeline > li .cbp_tmlabel {
    border-bottom: 1px solid #e40615;
    color: #e40615;
}

.cbp_tmtimeline > li .cbp_tmicon {
    background: none repeat scroll 0 0 #575757;
    box-shadow: 0 0 0 3px #e6e6e6;
}

.cbp_tmtimeline > li.completed .cbp_tmicon {
    color: #575757;
}


/*Farbe Menüpunkte*/
.mainnavigation a {
    color: #e40615;
}
.mainnavigation a:hover, .mainnavigation a:focus, .mainnavigation .active a {
    color: #e40615;
    background: transparent;
}

.mainnavigation a::before, .mainnavigation a::after {
    background: #e40615 none repeat scroll 0 0;
}

.mainnavigation {
    margin: 35px 0 25px;
}

.mainnavigation button .menu-icon:before{
    color: #e40615;
}

.mainnavigation ul {
    border-bottom: 12px solid #e40615;
    background: none repeat scroll 0 0 #fff;
    margin-top: 6px;
}

.mainnavigation li {
    border-top: 1px solid #909090;
}

/*Farbe Footerpunkte*/
.footernavigation {
    background-size: auto 80px; 
    margin-top: 10px; 
    height: 80px; 
}
.footernavigation a {
    border-left: 1px solid#e40615;
    color: #e40615;
}


/*Farbe Buttons*/
.form-group .btn-submit, .sqbikebox-submit-btn, .powermail_submit {
    background-color:#e40615;
}
.form-group .btn-submit:hover, .sqbikebox-submit-btn:hover, .powermail_submit:hover {
    background-color: #575757;
}

.femanager_fieldset input.form-control, .femanager_fieldset select, .femanager_fieldset textarea, .frame-type-felogin_login #user, .frame-type-felogin_login #pass, .frame-type-felogin_login #tx_felogin_login-forgot-email, .frame-type-felogin_login #tx_felogin_login-newpassword1, .frame-type-felogin_login #tx_felogin_login-newpassword2 {
    background: #eee none repeat scroll 0 0;
    color:#e40615 !important;
}

.loadspinner{
    border: solid 4px#e40615;
}



/* Farbe Buttons */
.btn-blue {
    cursor: pointer;
    background-color:#e40615;
}

.btn-blue:hover {
    background: none repeat scroll 0 0 #575757;
}

.femanager_fieldset input.form-control, .femanager_fieldset select, .femanager_fieldset textarea,
.frame-type-felogin_login #user, .frame-type-felogin_login #pass, .frame-type-felogin_login #tx_felogin_login-forgot-email,
.frame-type-felogin_login #tx_felogin_login-newpassword1, .frame-type-felogin_login #tx_felogin_login-newpassword2 {
    background: #fff none repeat scroll 0 0;
    color:#e40615 !important;
    border: 1px solid #D2D2D2; /*use if background is white*/
}

/* Anrede Buttons circle border visible*/
.circle-radio + label::after {
    box-shadow: 0px 0px 1px #000; /*use if background is white*/
}

/* Farbe Buttons der Mietdauern */
.toggle-radio + label{
    cursor: pointer;
    background-color: #575757;
    color: #ffffff !important;
}

.toggle-radio + label.selectedPrice {
    background-color: #e40615;
    color: #ffffff;
}

.unit-selection, .box-selection{
    border-bottom: 2px solid #909090;
}

.box-selection {
    border-bottom: 2px solid #575757;
}
.box-selection ul li ul li {
    border-color: #575757;
    color: #bababa;
}

.box-selection ul li ul li.box.active {
    background: none repeat scroll 0 0 #e40615  ;
    color: #fff;
}

.box-selection ul li ul li.occupied, .box-selection ul li ul li.occupied:hover {
    background: #e40615;
}

.box-selection ul li ul li.box.occupied:hover::before {
    content: "belegt";
}
 
.box-selection ul li ul li.active, .box-selection ul li ul .box:hover {
    background: #e40615;
    color: #ffffff;
}
 
.content-suchen h2, .content-buchen h2, .content-completion h2 {
     color: #e40615;
 }
 .sidebar label, .sidebar h2, .content-suchen h2, .content-buchen h2, 
 .content-completion h2, .tx-femanager h2, .tx-felogin-pi1 h3,
 dl dt, .tx-femanager .required, .required label:after {
     color: #e40615;
 }
 
 .cd-dropdown, .cd-select, .form-group-duration {
     border-color: rgba(101, 101, 101, 0.5);
 }

.content-suchen-detail .span8 {
    border-left: 1px solid #909090;
}

.frame-type-felogin_login h3 {
    color: #e40615;
}

/*Sonstiges*/
.white-box{
    border: 1px solid #eeeeee; /*use if background is white*/
}
#usercentrics-button {
    margin-top: 2rem;
}
.cart-countdown{
    color: #575757;
}
.form-group.go2payment .btn-block {
    display:inline-block;
    margin: 0;
}

/*SVGs*/
rect.disabled {fill: #f0f0f0; }
g text,
g.occupied rect, g.occupied path { fill: #e40615; }
g:hover text, g.active text { fill: #ffffff; }
g.disabled {pointer-events: none;}
g.active rect, g.active path, g:hover rect, g:hover path { fill: #e40615; }

@-webkit-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(0, 102, 153, 0.1), 0 0 10px 10px #BABABA, 0 0 0 10px #e40615;
    }
    100% {
        box-shadow: 0 0 0 2px rgba(0, 102, 153, 0.1), 0 0 10px 10px #BABABA, 0 0 0 10px #e40615;
        -webkit-transform: scale(1.07);
        opacity: 0;
    }
}
@-moz-keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(0, 102, 153, 0.1), 0 0 10px 10px #BABABA, 0 0 0 10px #e40615;
    }
    100% {
        box-shadow: 0 0 0 2px rgba(0, 102, 153, 0.1), 0 0 10px 10px #BABABA, 0 0 0 10px #e40615;
        -moz-transform: scale(1.07);
        opacity: 0;
    }
}
@keyframes sonarEffect {
    0% {
        opacity: 0.3;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(0, 102, 153, 0.1), 0 0 10px 10px #BABABA, 0 0 0 10px #e40615;
    }
    100% {
        box-shadow: 0 0 0 2px rgba(0, 102, 153, 0.1), 0 0 10px 10px #BABABA, 0 0 0 10px #e40615;
        transform: scale(1.07);
        opacity: 0;
    }
}


/* IPAD portrait view */  
@media only screen and (max-width: 47.5em) {
    .form-group dl dt {
        float: none;
        display: inline;
    }
    .form-group dd {
        margin: -20px 0 0px 150px;
    }
}


@media only screen and (min-width: 65em) {

    .logo img {
        display: block;
        margin: -10px auto auto auto;
        width: 60%;
    }

    .mainnavigation ul {
        border: none;
        background-color: transparent;
        border-bottom: none;
    }
    .mainnavigation li {
        border-top: none;
    }

    .cbp_tmtimeline>li .cbp_tmlabel{
        border-bottom: none; 
    }
}