body {
    background-image: none;
}

h1,
h2,
h3 {
    color: #000000;
}

hr {
    border-color: #f0f0f0;
}

/*Social Media*/
.instagramLink img {
    width: 34px;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Während den Schritten im Buchungsprozess sollten die „erledigten“ Schritte (Piktogramme) statt blau in dem grün (wie Buttons) sein. */
.cbp_tmtimeline>li.completed .cbp_tmicon {
    color: #ffffff;
    background: #bababa;
}

.cbp_tmtimeline_small li.completed .hi-icon-suchen span {
    background: url(/typo3conf/ext/sq_bikeboxConf_vvv/Resources/Public/img/icon-suchen-small-green-vvv.png) 22px center no-repeat;
}

.cbp_tmtimeline_small li.completed .hi-icon-buchen span {
    background: url(/typo3conf/ext/sq_bikeboxConf_vvv/Resources/Public/img/icon-buchen-small-green-vvv.png) 23px center no-repeat;
}

.cbp_tmtimeline_small li.completed .hi-icon-bezahlen span {
    background: url(/typo3conf/ext/sq_bikeboxConf_vvv/Resources/Public/img/icon-bezahlen-small-green-vvv.png) center center no-repeat;
}

.cbp_tmtimeline_small li.completed .hi-icon-erhalten span {
    background: url(/typo3conf/ext/sq_bikeboxConf_vvv/Resources/Public/img/icon-erhalten-small-green-vvv.png) center center no-repeat;
}

/*Given the white background, the following lines are required*/
.cbp_tmtimeline::before {
    background: #f0f0f0;
}

/*Icon Parken vvv*/
.hi-icon-suchen span {
    background: url(/typo3conf/ext/sq_bikeboxConf_vvv/Resources/Public/img/icon-suchen_vvv.png) center center no-repeat !important;
    background-size: 60% 60% !important;
}

.hi-icon-buchen span {
    background: url(/typo3conf/ext/sq_bikeboxConf_vvv/Resources/Public/img/icon-buchen_vvv.png) center center no-repeat !important;
    background-size: 60% 60% !important;
}

.hi-icon-bezahlen span {
    background: url(/typo3conf/ext/sq_bikeboxConf_vvv/Resources/Public/img/icon-bezahlen_vvv.png) center center no-repeat !important;
    background-size: 60% 60% !important;
}

.hi-icon-erhalten span {
    background: url(/typo3conf/ext/sq_bikeboxConf_vvv/Resources/Public/img/icon-erhalten_vvv.png) center center no-repeat !important;
    background-size: 60% 60% !important;
}

.hi-icon-parken span {
    background: url(/typo3conf/ext/sq_bikeboxConf_vvv/Resources/Public/img/icon-parken_vvv.png) center center no-repeat !important;
    background-size: 60% 60% !important;
}

.cbp_tmtimeline_small .hi-icon-parken span {
    background: url(/typo3conf/ext/sq_bikeboxConf_vvv/Resources/Public/img/icon-parken-small_vvv.png) 19px 19px no-repeat !important;
    background-size: 60% 60%  !important;
}

/*Farbe Header and footer @mobile*/
.pageheader,
.pagefooter {
    background-color: #004D66;
}

/*Logo position mobile default*/
.logo {
    margin: 45px 0px 4px 10px;
}

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

/*Farbe Klappfunktion unter "So geht's"*/
.foldingTitle {
    border: 1px solid #004D66;
    background: #004D66;
}

.foldingTitle .csc-header > *:first-child {  font-size: 16px;
    color: #fff;
    display: inline-flex;
}

.foldingTitle .csc-header:hover h3{
    color:#69AB98;
}

/*Bullet points*/
.foldingElement ul {
    list-style: none; /* Remove default bullets */
}

.foldingElement ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color:#004D66; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 0.8rem; /* Also needed for space (tweak if needed) */
    margin-left: -0.8rem; /* Also needed for space (tweak if needed) */
}

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

/*Farbe Icons für bei den Schritten 1-5*/
.cbp_tmtimeline_large .hi-icon:hover {
    box-shadow: 0 0 0 1px #004D66;
}

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

.cbp_tmtimeline_large .hi-icon:hover:before,
.cbp_tmtimeline>li.active .hi-icon:before{
    background: #004D66;
}

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

.hi-icon:before {
    background: rgba(188, 188, 188, 0.5);
}

.hi-icon::after {
    box-shadow: 0 0 0 1px rgba(188, 188, 188, 0.5);
}

.hi-icon {
    box-shadow: 0 0 0 1px rgba(188, 188, 188, 0.5);
}

/*Because de white background */
.cbp_tmtimeline > li.completed .hi-icon::before {
    background: rgba(188, 188, 188, 0.5);
}

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

.cbp_tmtimeline>li .cbp_tmlabel {
    color: #000000;
}

.cbp_tmtimeline > li .cbp_tmlabel_large {
    color: #656565;
    padding: 0 0 18px 100px !important;  
}

.cbp_tmtimeline > li .cbp_tmlabel_small {
    color: #656565;
    padding: 0 0 0 50px !important;
}

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

/*Farbe Footerpunkte*/
.footernavigation {
    background-size: auto 80px;
    margin-top: 10px;
    height: 80px;
}

.footernavigation a {
    border-left: 1px solid #69AB98;
}


/*Farbe Menüpunkte*/
.mainnavigation {
    margin: 40px 16px 40px 0px;
}

.mainnavigation li {
    border-top: none;
}

.mainnavigation ul {
    background: none repeat scroll 0 0 #1c1b1b;
    border-bottom: 12px solid #69AB98;
    margin-top: 6px;
}

.mainnavigation a,
.footernavigation a {
    color: #ffffff;
}

.mainnavigation a:hover,
.mainnavigation a:focus,
.mainnavigation .active a {
    color: #69AB98;
    background: transparent;
}

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

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

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

.form-group .btn-submit:hover,
.sqbikebox-submit-btn:hover,
.powermail_submit:hover {
    background-color: #69AB98;
}

.btn-blue,
.toggle-radio+label {
    cursor: pointer;
    background-color: #004D66;
}

.toggle-radio+label.selectedPrice {
    background-color: #69AB98;
    color: #fff;
}

.btn-blue:hover {
    background-color: #69AB98;
}

.frame-type-felogin_login h3,
#c3152 h3 {
    margin: 2rem 0;
    color: #656565;
}

.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: #69AB98 !important;
    border: 1px solid #D2D2D2;
}

.loadspinner {
    border: solid 4px #004D66;
}

a,
.faq li a,
.faq {
    color: #69AB98;
}

.logo a {
    width: 260px;
}

.legend-colorbox {
    width: 50px!important;
    height: 20px!important;
    margin-top: 20px!important;
    border-right-width: 1px!important;
}

.legend-text {
    width: 100px!important;
    max-width: 100px!important;
    border: none!important;
    margin-right: 4%;
    color: #000!important;
    margin-top: 5px;
}

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

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

/* POWERMAIL */
.powermail_form.powermail_form_32 .checkbox{
    display: block;
    position: relative;
}

.powermail_form.powermail_form_32 .checkbox label{
    margin-top: 10px;
}

.powermail_form.powermail_form_32 input[type="checkbox"]{
    position: absolute;
    left: 140px;
    width: 35px;
    height: 25px;
}

/* Sonstiges */
/*Fix bug with responsive width*/
.select2 {
    width: 100% !important;
}

/*Farbige Rahmen der Tabelle in FAQ (Frage 35 der)
Ojo: Any table in a content element with frame-layout-2 will add a border to the table
*/
.frame-layout-2 table,.frame-layout-2 tr,.frame-layout-2 td {
    border: 1px solid #dddddd;
    padding: 0.25rem;
}
.frame-layout-2 table {
    border-collapse: collapse;
    background-color: transparent;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    padding-left: 100px;
}

/* Verstecke das erste Zeichen, um die Reihenfolge in aufsteigender Reihenfolge in der Kachelübersicht
.1 VMOBIL Lab Leihrad - X
*/
li.unitLink[data-value="3495"] figcaption::first-letter,
li.unitLink[data-value="2530"] figcaption::first-letter,
li.unitLink[data-value="2532"] figcaption::first-letter {
  color:transparent;
  margin-left:-0.7rem;
}

/*Hide Titles: Im Buchungsprozess: Jetzt bezahlen und Erhalten Sie Ihren Zugangscode*/
/*Hide Available Boxes in Hinweis*/
.available-boxes,
#c2850>#c87>header h1,
#c2812>.csc-header>h1 {
  display: none;
}

.allBoxOccupied.link2contactform {
    display: none !important;
}

/*Extra button "Box suchen & buchen" in menu with 4 buttons under Meine Radbox 06.05*/
.mybikebox-submenu li {
    margin: 0 -5px 10px 0;
}

.mybikebox-submenu li a {
    padding: 5px 10px;
}

.unit-selection ul li figcaption {
    font-size: 15px;
}


/*Registrierungsseite Radio Buttons*/
.circle-radio+label::after {
    border: 3px solid #D2D2D2;
}

.trenner>li:first-child {
    padding-top: 10px;
}

.box-selection ul li:last-child ul li {
    border-bottom: 2px solid #656565;
}

label.selectedPrice {
    color: #fff;
}

.content-suchen h2,
.content-buchen h2,
.content-completion h2 {
    color: #000000;
}

.sidebar label,
.sidebar h2,
.content-suchen h2,
.content-buchen h2,
.content-completion h2,
.tx-femanager h2,
.frame-type-felogin_login h3,
dl dt,
.tx-femanager .required,
.required label:after {
    color: #000000;
}

.duration-options label {
    color: #e5e5e5;
}

.box-selection {
    border-bottom: 2px solid #656565;
}

.box-selection ul li ul li.active,
.box-selection ul li ul li.box:hover {
    background: none repeat scroll 0 0 #69AB98;
    color: #fff;
}

.box-selection ul li ul li.box.active,
.box-selection ul li ul li.box:hover {
    background: none repeat scroll 0 0 #69AB98;
    color: #fff;
}

.cd-dropdown,
.cd-select,
.form-group-duration {
    border-color: rgba(188, 188, 188, 0.5);
}

/* Rankweil*/
.rankweil_Ost ul li ul {
    padding-left: 0;
}

.box-selection ul li ul li {
    color: #bababa;
    border-color: #656565;
    font-size: 1em;
}

.box-selection ul li ul li.box.disabled:hover {
    color: #9a9a9a;
}

.musterstandort ul li ul li {
    width: 20%;
}

.rankweil_Ost ul li ul li {
    width: 3.5%;
}

.rankweil_Ost_Zukunft ul li ul li {
    width: 20%;
}

/**NEW SNIPPET**/
/*Cart*/
.cart-countdown{
    color: #ffffff;
}
.white-box{
    border: 1px solid #eeeeee;
}

.form-group.go2payment .btn-block,
.timebar-nav .btn-block {
    display:inline-block;
    margin: 0;
}

.thumbnails li img {
    height: 100px;
  }


/*Verlängern Button/ FE Buchungen verwalten*/
.responsive-table .paymentNeeded,
.white-box .paymentNeeded {
    background: none repeat scroll 0 0 #69AB98;
}

.orderlist .white-box, .cartlist .white-box {
    background: #f0f0f0;
    background-color: #f0f0f0;
}


/*Verwaltungs BE
.dtsearch-cell dt-left ui-state-default{*/
.dtsearch-cell {
    color: #070707 !important;
}

/*Btns*/
.pagecontent .ui-state-default,
.pagecontent .ui-widget-content .ui-state-default,
.pagecontent .ui-widget-header .ui-state-default,
.pagecontent .ui-button,
html .pagecontent .ui-button.ui-state-disabled:hover,
html .pagecontent .ui-button.ui-state-disabled:active {
    background: #69AB98;
}

.pagecontent .ui-state-default:hover,
.pagecontent .ui-state-default.ui-state-disabled {
    background: #8ba78f;
}

table.dataTable tbody tr:hover,
table.dataTable tbody tr.odd:hover {
    background-color: #99b29d;
}


/*Buchungen*/
/*Hide first column in header*/
table#tx_datatables-bookingTable-2926 thead tr td:first-child {
    xdisplay: none;
}


/*Add more space for the second column*/
table#tx_datatables-bookingTable-2926 thead tr td:nth-child(2) {
    max-width: 333px !important;
    min-width: 333px;
    width: 330px;
    max-width: -moz-max-content;
    /* Firefox/Gecko */
}

/*Powermail Checkbox "Datenschutzerklaerungakzeptieren"*/
.powermail_form.powermail_form_21 .checkbox {
    display: block;
}

.powermail_form.powermail_form_21 input[type="checkbox"] {
    position: absolute;
    left: 70rem;
    width: 25px;
    height: 30px;
}

@-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 rgba(0, 102, 153, 1);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(0, 102, 153, 0.1), 0 0 10px 10px #BABABA, 0 0 0 10px rgba(0, 102, 153, 1);
        -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 rgba(0, 102, 153, 1);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(0, 102, 153, 0.1), 0 0 10px 10px #BABABA, 0 0 0 10px rgba(0, 102, 153, 1);
        -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 rgba(0, 102, 153, 1);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(0, 102, 153, 0.1), 0 0 10px 10px #BABABA, 0 0 0 10px rgba(0, 102, 153, 1);
        transform: scale(1.07);
        opacity: 0;
    }
}

@media only screen and (max-width: 33em) {
    .box-selection ul li ul {
        padding-left: 0px;
    }
    .box-selection ul li ul li.ebike::after {
        top: -66px;
    }
    .box-selection ul li ul li {
        width: 21%;
    }
    .box-selection ul li:first-child ul li.notopborder {
        width: 13%;
    }
    .box-selection ul li ul li.box.active::after,
    .box-selection ul li ul li.box:hover::after {
        left: 0px;
        top: 38px;
    }
    .rankweil_Ost ul li ul li {
        width: 7%;
    }
    .rankweil_West ul li ul li {
        width: 16%;
    }
}


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

    .hamburgSchliessfaecher ul li ul li {
        font-size: 1.2em;
    }
}

@media only screen and (max-width: 25em) {
    .cbp_tmtimeline>li .cbp_tmlabel {
        border-bottom: 1px solid #69AB98;
    }
    .box-selection ul li.bottom-middle-row ul li:first-child {
        border-left-width: 1px;
    }
    .box-selection ul li.bottom-middle-row ul li:last-child {
        border-right-width: 1px;
    }
    .box-selection ul li:last-child ul li {
        border-bottom-width: 1px;
    }
}

@media only screen and (min-width: 43em) { /*688px*/
     .cbp_tmtimeline_small > li .cbp_tmlabel h3 {
        margin-top: 23px;
    }

    .cbp_tmtimeline_small > li{
        margin-left: 0px !important;
     }
}

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

    .logo {
        margin: 45px 0px 24px 22px;
    }
    .mainnavigation ul {
        border: none;
        background-color: transparent;
        border-bottom: none;
    }
    .pagecontent {
        padding: 0 40px 0px 40px;
    }
    .cbp_tmtimeline>li .cbp_tmlabel {
        border-bottom: none;
    }
    .pagefooter {
        margin-top: 25px;
    }
}