/*
Swoppen Soferu
Online-Reservation Onepager Addon

*/

/* Calendar Styles {{{ */

a {
    cursor:pointer;
}
* {
    font-family: 'Quicksand', sans-serif;
}
.tmpl-content {
    background: #ffffff00!important;
    margin-top: 15px;
    margin-bottom: 15px;
}

.calendar.left, .calendar.right {
    width: 50%;
    max-width: unset;
    margin: unset;
}
.calendar.right table {
    border-left:2px solid #e7e7e7;
}
.tmpl_date_step #inlinePicker {
    display: none;
}
.or-box {
    padding-bottom:25px;
    background: white;
}
.daterangepicker:before,.daterangepicker:after {
    display:none;
}
.spacer {
    width: auto;
    height: 30px;
    /* padding: 0px 15px; */
    margin-left: -15px;
    margin-right: -15px;
}
.daterangepicker.daterangepicker-inline.ltr.show-calendar.opensright {
    float: left;
    width: 100%;
    border-radius: 0px!important;
    background: #e7e7e7;
}

.or-box-content {
    min-height: 300px;
    padding: 15px;
}
.or-box-content {
    min-height: 300px;
    padding: 15px;
}

.or-box-title {
    width: auto;
    padding: 10px 10px 5px 10px;
    background: white;
    color: white;
    border-bottom: 2px solid #b9a452;
    transition: all 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
a.list-group-item {
    border-radius: 0px;
}
.form-check.form-check-inline span i.fa-check-circle {
    position: absolute;
    top: 0px;
    opacity: 0;
    transition: all 0.3s ease;
}

input[type="radio"]:checked + span i.fa-check-circle {
    opacity: 1;
}
label.input-group-text, input, select {
    border-radius: 0px!important;
}

.list-group {
    max-height: 300px;
    overflow-y: scroll;
    max-height: 300px;
    border-radius: 0px!Important;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.scroll::-webkit-scrollbar {
    width: 3px;
    background:#d6d6d6;

}

.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
    border-radius: 0px;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.0);
    background:darkgrey;
    width:3px;
}

.list-group.scroll a {
    border-radius: 0px!important;
}


.daterangepicker td, .daterangepicker th {
    text-align: center;
    width: 20px;
    height: 41px;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}
.part-7 button {
    border-radius: 0px!important;
}
.spacer.border-bottom-spacer {
    border-bottom: 2px solid #7b7b7b!important;
    /* float: left; */
}
a.list-group-item.list-group-item-action.active {
    color: white;
}
.extra-service li a {
    background-color: white;
    border-radius:0px!important;
}

.extra-service li a.disabled {
    background-color: #c5c5c5f0!important;
}
.extra-service li a.active {
    color:white!important;
}

a.nav-link.active {}

a.nav-link.active+i.fas.fa-caret-down {
    position: absolute;
    font-size: 35px;
    bottom: -20px;
    left: 40%;
    display:block;
}
a.nav-link +i.fas.fa-caret-down {
    display:none;
}

li.nav-item {
    position: relative;
}
.extra {
    padding: 11px;
    background: white;
    border: 2px solid #ccc;
    cursor: pointer;
    transition:all 0.3s ease;
    /* opacity:0.4; */
    float: left;
}
.extra.active {
    /* opacity:1; */
}

.extra.active .extra-title {
    border-bottom: 1px solid #a0a0a0;
}
.extra-title {
    /* border-bottom: 2px solid #e7e7e7; */
    margin-bottom: 5px;
    font-size: 16px;
    padding-bottom: 5px;
    font-weight: 900;
    width: 100%;
    float: left;
    transition: all 0.3s ease;
}

.modal-title p.article_title {
    display: inline;
}

.extra-content {
    padding: 5px;
}

.row.extras-2.extras-category div {
    display: none;
}
/* }}} */

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

.radio {
    float: left;
    /* width: 14%; */
    width: 50%;
    margin: 0px;
}

.price_sum {
    width: 100%;
    text-align: right;
    padding: 10px 15px 10px 0px;
    border-top: 2px solid #cacaca;
    font-weight: 500;
    font-size: 16px;
}
.item-box {
    /* height: 30%; */
    padding: 15px;
    background: #333;
    color: white;
    transition: all 0.3s ease-in;
    border-left: 1px solid #f9f9f9;
    border-right: 1px solid #f9f9f9;
    cursor: pointer;
    border-bottom: 1px solid #525252;
}
.item-description {
    padding: 15px;
    background: #ffffff;
}
box-title h5 {
    font-size: 20px;
}

.item-description {
    display:none;
}
.btn {
    border-radius:0px!important;
    transition:all 0.3s ease;
}

.large {
    padding: 20px 50px;
    /* margin-left: 50%; */
    /* margin-right: auto; */
    text-align: center;
}
.btn:hover {
    background:#333!important;
}
.select-room li {
    transition: all 0.3s ease;
}
.btn-outline-primary {
    background: transparent!important;
    border-bottom: 2px solid #ababab!important
}
.btn-outline-primary:hover {
    color:white!important;
}
.item-box i.fas.fa-caret-down {
    visibility: hidden;
    transition:all 0.3s ease;
    position: absolute;
    bottom: -14px;
    font-size: 25px;
    z-index: 5;
}

.item-box.active i.fas.fa-caret-down {
    visibility: visible;
    transition:all 0.3s ease;
    position: absolute;
    bottom: -14px;
    font-size: 25px;
    z-index: 5;
}

.bussines-form h3 {
    border-top: 2px solid #c7c7c7;
    padding-top: 25px;
}
/* MEDIA QUERYS {{{ */

@media screen and (max-width: 570px) {
    .calendar.left, .calendar.right {
        width: 100%;
        max-width: unset;
        margin: unset;
    }
    .calendar.right tbody {
        border-left:none;
    }
}


/* }}} */

.info-bar {
    width: 100%;
    background: white;
    position: fixed;
    bottom: 0px;
    /* right: 50%; */
    /* left: 50%; */
    z-index: 9999;
    left: 0px;
    box-shadow: 0px -2px 17px -1px rgba(0, 0, 0, 0.52);
}
.hidden {
    display:none;
}

.booking_warranty_box div.form-check-inline {
    background: #f9f9f9;
    width: 100%;
    padding: 10px;
}

.booking_warranty_box div.form-check-inline+p {
    background: #c1c1c1;
    padding: 15px;
}
.payment-option {
    display: none;
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Als erstes verstecken wir die Standard Form-Elemente */
input[type="checkbox"],
input[type="radio"] {
    display: none;
}

/*
Dem Label gebe ich ein Display Block,
damit dieser über die komplette Breite klickbar ist.
*/
.part-8 label {
    margin-left: 0px!important;
    padding-left: 0px!important;
    margin: 10px 0px;
}
.input-group {
    margin: 8px 0px;
}
/* Der span ist unsere neue Checkbox und den stylen wir wie folgt */
label span {
    background: #fff;
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 1px solid #eaeaea;

    /*
    Die Positionierung kann je nach Einsatzgebiet abweichen.
    Ich möchte hier sichergehen das die Checkbox oder Radiobutton immer ob am Textanfang steht,
    falls wir einen mehrzeiligen Text haben, wie es z.B. bei "AGB´s akzeptieren" üblich ist.
    Die könnt ihr aber auch anders lösen.
    */
    position: absolute;
    top: 3px;
    left: 0;

    /* Ein Transition Effekt für den Hover - Checked Status. Dadurch wirkt es etwas animiert. */
    transition: all .2s linear;
}

/* Den Radiobutton runden wir komplett ab */
input[type="radio"] + span {
    border-radius: 50%;
    position:relative;
}

/* Hover-Effekt */
label:hover span {
    border: 1px solid #bbb;
}

/*
Mit dem "+" Selektor können wir das direkt nachfolgende Element
ansprechen, indem Fall unsere Label mit darin enthalten span.
*/
input[type="checkbox"]:checked + span,
input[type="radio"]:checked + span{
    border: 3px solid #8BC34A;
}
input[type="checkbox"]:checked + span, input[type="radio"]:checked + span {
    border: none;
    /* background: #000000; */
    /* min-width: 5px; */
    /* min-height: 5px; */
    transition: all 0.3s ease;
    /* visibility: visible; */
    position: relative;
}


input[type="checkbox"] + span {
    border: 2px solid #909090;
    transition: all 0.3s ease;
}

input[type="checkbox"] + span + label,input[type="radio"] + span + label {
    margin-left: -15px;
    width: 80%;
}

li.nav-item.active, li.nav-item.active a {
    background: #446d93;
    color: white!important;
    transition: all 0.3s ease;
}
li.nav-item {
    position: relative;
    transition: all 0.3s ease;
}
.room_settings.active {
    border-bottom: 2px solid #545454;
}
.room_settings {
    height: 0px;
    transition: all 0.3s ease;
    /* padding-bottom: 150px; */


}
.item-box:not(.active):hover {
    opacity: 0.9;
}
.room_settings.active {
    padding: 5px;
    height: 200px;
    background: #e7e7e7;
    z-index: 9;
}
.room_quantity {
    transition: all 0.3s ease;
}
.custom-select.hasError {
    background-color: #ff8888!important;
}

.addRoom {
    width: 100%;
}

.addRoom:hover {
    color: white!important;
}

.info-bar nav {
    padding: 0px;
}

.input-group.mb-6.col-md-6.col-xs-6 {
    margin-bottom: 15px;
}

@media screen and (max-width:1024px){
    .overview-summary {
        width:60%!important;
    }
}
@media screen and (max-width:765px){
    .overview-summary {
        width:80%!important;
    }
}