@font-face {
    src: url('../fonts/antipole.otf');
    font-family: "Antipole";
}

@font-face {
    src: url('../fonts/syne.ttf');
    font-family: "Syne";
}

.body{
    background-image: url('../bg.png');
    background-size:cover;
}
.DayPickerNavigation--horizontal .DayPickerNavigation__next {
    right: -231px;
}
.col-md-12.datePickerStep {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.location-text{
    margin-top:15px;
    display: block;
    color:#174338;
}

.form-setup{
    display: flex;
    justify-content:space-between;
    align-items: flex-start;
}

h3.main-heading {
    font-size: 26px;
    color: #337363;
    margin-bottom: 14px;
}

.main-row{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width:100%
}
.CalendarMonth {
     width: 17% !important;
    
}
.DayPicker__week-header:nth-child(2){
    left: 270px !important;
}
li{
     width: 33px !important;
}
.DayPicker{
width: 543px !important;
}
.main-content{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.full-width{
    width:100%
}

.form-setup{
    width:100%;
}

body{
    font-family:'Syne' !important;   
   }
   .summary-wrapper {
       width: 35%;
   }

   #dates-container{
       width: 40%;
   }
   
   div#quote-container {
       background: white;
       border-radius: 10px;
       padding: 15px;
       margin-bottom: 20px;
       color: #337363;
       
   }

   .branding span{
    color: #337363;
    font-weight: 700;

   }

   .branding{
       padding: 10px 0%;
       width: 100%;
   }
   
   .next-button button {
       background: #FF6249;
       border: none;
       border-radius: 8px;
       width: 100%;
       padding: 10px;
       color:white;
       cursor: pointer;
   }
   
   table.base-class.wheelbase-quote tr {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

table.base-class.wheelbase-quote {
    width: 100%;
    padding: 10px;
}

div#availability-calendar-container {
    margin-right: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.DayPickerNavigation.DayPickerNavigation--horizontal span {
    border: none;
}

caption.CalendarMonth__caption.js-CalendarMonth__caption strong {
    font-weight: 300;
    font-size: 14px;
    color: #337363;
}

.DayPickerNavigation.DayPickerNavigation--horizontal svg {fill: #337363;}

.DayPickerNavigation.DayPickerNavigation--horizontal span {
    border: none;
}

caption.CalendarMonth__caption.js-CalendarMonth__caption strong {
    font-weight: 300;
    font-size: 1rem;
    color: #337363;
}

.DayPickerNavigation.DayPickerNavigation--horizontal svg {fill: #337363;}

.DayPicker__week-header small {
    font-size: 0.8rem;
    color: gray;
    text-transform: uppercase;
}
.DayPicker__week-header1 {
    color: #757575;
    position: absolute;
    top: 225px;
    z-index: 2;
    margin-left: 331px;
    padding: 0 13px;
    text-align: left;
}
tbody.js-CalendarMonth__grid td {
    border: none;
    font-size: 0.8rem;
}

.action-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
}

h3.main-heading {
    font-size: 26px;
    color: #337363;
    margin-bottom: 14px;
}

td.CalendarDay.CalendarDay--valid.CalendarDay--selected-start.CalendarDay--selected-span {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background: #337363;
}

input.CalendarDay.CalendarDay--valid.first-day{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background: #4BA18C;
    color:#18413B;
}
td.CalendarDay.CalendarDay--valid.last-day{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background: #4BA18C;
    color:#18413B;
}
td.CalendarDay.CalendarDay--valid.selected{
    background: #4BA18C;
    color:#18413B;
}


td.CalendarDay.CalendarDay--valid.CalendarDay--selected-span {
    background: #337363;
    color:#18413B;
}



td.CalendarDay.CalendarDay--valid.CalendarDay--selected-end {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background: #337363;
}

td.CalendarDay.CalendarDay--blocked.CalendarDay--blocked-calendar {
    background: white;
    color: #e0ded5;
}

.transition-container.transition-container--horizontal {
    width: 600px !important;
    /* height: 350px !important; */
}

div#quote-container {
    height: 263px;
}

.steps-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.single-header {
    margin-right: 30px;
    display: flex;
    align-items: center;
}

.steps-header span:first-child {
    background: #3a7768;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    border-radius: 30px;
    color: white;
    font-size: 13px;
    margin-right: 10px;
    opacity: 0.5;
}

.location-header{
    margin-top:50px;
    display: block;
}

.single-header.active span:first-child {
    opacity: 1;
}


/* Datepicker */
.DateRangePicker__picker.DateRangePicker__picker--direction-left.DateRangePicker__picker--horizontal.DateRangePicker__picker--portal {
    position: relative;
    top: unset;
    left: unset;
    background: transparent;
    width: unset;
}

.DayPicker.DayPicker--horizontal.DayPicker--portal {
    position: relative;
    top: unset;
    left: unset;
    margin: 0 !important;
}

div#date-range12-container {
    width: 100%;
}

div#date-container {
    width: 60%;
}

.date-picker-wrapper.two-months {
    width: 98%;
}

.month-wrapper {
    width: 98% !important;
}

table.month1 {
    width: 40% !important;
}

table.month2,table.month1 {
    width: 47% !important;
}

.drp_top-bar {
    display: none;
}

div#date-range12-container {
    width: 100%;
}

div#date-container {
    width: 60%;
}

.date-picker-wrapper.two-months {
    width: 100%;
    padding: 0;
    background: white;
    border: none;
    overflow: hidden;
}

.month-wrapper {
    width: 98% !important;
}

table.month1 {
    width: 40% !important;
}

table.month2,table.month1 {
    width: 47% !important;
}

.drp_top-bar {
    display: none;
}

.steps-forms {
    width: 100%;
}

.month-wrapper {
    width: 98% !important;
    padding: 20px 6px !important;
}

.day.toMonth.valid {
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Syne' !important;
    color: #3a7768 !important;
}

tr.week-name th {
    font-family: 'Syne';
}

th.month-name {
    font-family: 'Syne';
}

tr.caption span {
    font-family: 'Syne';
    font-size: 16px;
    font-weight: 100;
    color: #3a7768;
}

th.month-name div:last-child {
    display: none;
}

th.month-name {
    color: #3a7768;
}

th.month-name {
    color: #3a7768;
}

.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
    margin: 0 !important;
    width: 100%;
    height: 38px;
    font-size: 14px;
}

.day.toMonth.valid.tmp.checked {
    background: #3a7768;
    color: white !important;
}

.day.toMonth.valid.checked.tmp.first-date-selected {
    background: #3a7768 !important;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.day.toMonth.valid.tmp.checked.last-date-selected {
    background: #3a7768 !important;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.steps-forms {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 10px;
}

.month-wrapper {
    border: none !important;
}

.date-picker-wrapper .gap .gap-line .gap-1 {
    z-index: 1;
    height: 0;
    border-left: 8px solid #fff !important;
    border-top: 8px solid #fff !important;
    border-bottom: 8px solid #fff !important;
}

div#date-range12-container {
    border-radius: 10px;
    overflow: hidden;
}

.day.toMonth.valid.real-today.tmp {
    background: #f8f8f8;
}


.DateRangePickerInput {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
}

.DateRangePickerInput .DateInput {
    padding: 0;
    border: none;
}

.single-body{
    display:none;
}

.single-body.active{
    display:flex
}

.section-wrapper{
    padding:35px;
}

.month-wrapper .time {
    display: none;
}

.month-wrapper {
    display: flex;
}

.info-wrapper {
    margin-bottom: 40px;
}

.info-wrapper h5 {
    margin-bottom: 20px;
    font-size: 20px;
}

.info-wrapper label {
    font-size: 14px;
    margin-bottom: 5px;
    color:#18413B;
}

.info-wrapper .form-control {
    border-color: #4BA18C;
    margin-bottom: 20px;
    color:#4BA18C;
}

.payment-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
    border: solid;
    border-radius: 15px;
    border-color: #e7e7e7;
    border-width: 1px;
}

.payment-wrapper img {
    margin-bottom: 10px;
}

.payments-wrapper h5 {
    margin-bottom: 25px;
}

.total-wrapper{
    display: flex;
    justify-content:flex-end;
}

.total-wrapper span:first-child {
    color:#4BA18C
}
.total-wrapper span:last-child {
    color:#336373
}

.payments-container{
    height:100%;
}

.single-body {
    height: 100%;
}

.section-wrapper.container.payments-container .row {
    height: 100%;
}

.payments-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer
}

.payment-wrapper .material-icons {
    color: #337363;
    position: absolute;
    right: 5px;
    bottom: 5px;
    display:none;
}

.payment-wrapper.active {
    border-color: #337363;
    border-width: 1px;
}

.payment-wrapper.active .material-icons {
    display:block;
}

.payment-wrapper {
    position: relative;
}

.summary-wrapper div.pricing-summary {
    width: 100%;
    overflow: hidden;
    height: 240px;
    background: white;
    border-radius: 15px;
    margin-bottom:10px;
}

.summary-wrapper iframe {
    width: 100%;
    overflow: hidden;
    height: 103%;
    background: white;
    border-radius: 15px;
    border: none;
}

.form-check-input {
    width: 1.5em !important;
    height: 1.5em !important;
    margin-top: 0.10em !important;
    border-color:#4BA18C !important;
    margin-right:10px !important;
}

.form-check-label{
    font-size:18px !important;
    
}

.form-check-input:checked[type=checkbox] {
    background-image: url('../check.svg') !important;
    background-size: 14px;
    background-color: #ffffff;
}

.form-check.addon-check {
    display: flex;
    align-items: center;
}

.form-check.addon-check label {
    line-height: 0;
    margin: 0;
    font-size: 14px !important;
    font-weight: 100;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.form-check.addon-check label span.actual-price {
    color: #FF6249;
    margin-left: 10px;
}

span.active-price {
    color: #CCCCCC;
}

span.active-price.active {
    color: #337363;
}

span.active-price {
    color: #CCCCCC;
}

.addon-total {margin-top: 45px;margin-bottom: 10px;display: flex;justify-content: flex-end;align-items: center;}

.addon-total span:first-child {
    color: #4BA18C;
    margin-right: 10px;
    font-size: 20px;
}

.addon-total span:last-child {
    color: #337363;
    font-size: 20px;
}

.info-wrapper:last-child {
    margin-bottom: 0;
}

div#quote-container {
    height: auto;
    padding-bottom: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding:0;
}

table.base-class.wheelbase-quote tr {
    height: 45px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 20px;
}

table.base-class.wheelbase-quote {
    padding: 0 10px;
}

.van-info {
    background: white;
    display: flex;
    padding: 15px;
}

.van-info img {
    width: 20%;
    border-radius: 10px;
    margin-right: 12px;
}

.van-info {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.pricing-summary {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.wheelbase-quote-error.wheelbase-quote-error {
    color: #c84343;
}

.header {
    width: 100%;
    margin: 80px 0;
    margin-top: 30px;
}

.header .head-title {
    font-family: 'Antipole';
    display: flex;
    flex-direction: column;
    font-size: 2.5rem;
    color: white;
    justify-content: flex-start;
    align-items: baseline;
}

.header span {
    background: #18413B;
    padding: 5px 20px;
}

.header span:first-child {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.header span:last-child {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
}

.header .row {
    display: flex;
    align-items: center;
}

.header .head-sub-title {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header .head-sub-title p {
    margin: 0;
    font-size: 1.5rem;
}

.loader-wrapper{
    width:100%;
    height:50vh;
    display:flex;
    align-items: center;
    justify-content:center;
}

.van-info img {
    width: 70px;
    border-radius: 10px;
    margin-right: 12px;
    height: 70px;
}


.container.main-content{
    max-width: 90% !important;
    width: 90% !important;
    margin: 0 auto !important;
}

.branding a {
    margin-left: -5%;
}

.full-width {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.steps-header {
    width: 83%;
}

.form-setup {
    width: 83%;
}

footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 15px;
    flex: 1;
    align-items: flex-end;
}

.body{
    height: 100vh;
}

.container.main-content {
    height: 100%;
    display: flex !important;
    flex-direction: column;
}

.relative.flex.items-top.justify-center.min-h-screen.bg-gray-100.dark\:bg-gray-900.sm\:items-center.py-4.sm\:pt-0 {
    padding: 0 !important;
}
/*.DayPicker__week-header{*/
/*    left: 258px !important;*/
/*}*/
@media only screen and (max-width: 600px){
    
    .DayPicker {
    width: 315px !important;
    margin: 0 auto !important;
}
.CalendarMonth {
    width: 100% !important;
}
.DayPicker__week-header li {width:39px !important}
div#availability-calendar-container {width:100% !important}
.DayPicker--horizontal {
    box-shadow: none !important;
}
    
    
    
    
	.container.main-content {
    display: block;
    width: 100% !important;
    }

    .branding {
        width: 100% !important;
    }

    .header {
        width: 100%;
    }

    .col-12.col-lg-6.head-title span {
        font-size: 2.2rem;
    }

    .col-12.col-lg-6.head-title span:first-child {
        margin-bottom: -5px;
    }

    .col-12.col-lg-6.head-title {
        margin-bottom: 10px;
    }

    .col-12.col-lg-6.head-sub-title p {
        font-size: 1.2rem;
        justify-content: flex-start !important;
    }

    .col-12.col-lg-6.head-sub-title {
        display: block;
    }

    div#step-4 {
        display: none;
    }

    .row.main-row {
        display: block;
        width: 100%;
        margin: 0;
    }

    .form-setup {
        display: block;
    }

    div#date-container {
        width: 100%;
        margin-bottom: 20px;
    }

    .summary-wrapper {
        width: 100%;
    }
    .form-setup {
        width: 100%;
    }

    .full-width {
        padding: 0;
    }
    
    .steps-header {
        width: 100%;
    }
    
    .steps-header .single-header span:last-child {
        font-size: 0.6rem;
    }

    .steps-header span:first-child {
        background: #3a7768;
        width: 23px;
        height: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
        border-radius: 30px;
        color: white;
        font-size: 13px;
    }
    footer span {
        font-size: 0.9rem;
    }
    .container.main-content {
        padding: 0;
    }
    .body {
        height: auto !important;
    }
}

@media (min-width: 1366px) and (max-width: 1366px){
    /*.form-setup{*/
    /*    width:87% !important;*/
    /*}*/
    /*.steps-header{*/
    /*    width:87% !important;*/
    /*}*/
}
@media (min-width: 1280px) and (max-width: 1280px){
    .form-setup{
        width:93% !important;
    }
    .steps-header{
        width:93% !important;
    }
}
@media (min-width: 2560px) and (max-width: 2560px){
    body{
        font-size:1.5rem !important;
    }
    tbody.js-CalendarMonth__grid td{
        font-size: 1.3rem !important;
    }
    caption.CalendarMonth__caption.js-CalendarMonth__caption strong{
        font-size: 1.3rem !important;
    }
    .DayPicker__week-header small{
        font-size: 1.1rem !important;
    }
    .van-info img{
        width: 120px !important;
        height: 120px !important;
    }
    table.base-class.wheelbase-quote tr{
        font-size: 1.6rem !important;
    }
    .van-info span {
        font-size: 2rem;
    }
    .base-class.wheelbase-quote {
        font-size: 1.5rem !important;
    }
    .next-step-1.next-button .btn {
        font-size: 1.7rem;
    }
}

@media (min-width: 1150px) and (max-width: 1280px){

    .form-setup{
        width:100% !important;
    }
    .steps-header{
        width:100% !important;
    }

    tbody.js-CalendarMonth__grid td{
        font-size: 0.8rem !important;
    }
    .DayPicker__week-header small{
        font-size: 0.6rem;
    }
}

@media (min-width: 1000px) and (max-width: 1150px){

    .form-setup{
        width:100% !important;
    }
    .steps-header{
        width:100% !important;
    }

    tbody.js-CalendarMonth__grid td{
        font-size: 0.7rem !important;
    }
    .DayPicker__week-header small{
        font-size: 0.5rem !important;
    }
    .container.main-content{
        max-width:100% !important;
        width:94% !important;
    }
}

@media (min-width: 1920px) and (max-width: 1920px){
     tbody.js-CalendarMonth__grid td{
        font-size: 0.9rem !important;
    }
}

@media (max-width: 380px) {
.CalendarMonth {
     width: 289px !important;
}
}
li{
    width: 34px !important;
}
.DayPickerNavigation--horizontal .DayPickerNavigation__next {
    right: 15px !important;
}

}
@media (max-width: 1000px) {
    .CalendarMonth {
        width: 292px !important;
}
.single-body    {
  width: 315px !important;
}
li{
    width: 38px !important;
}
.DayPickerNavigation--horizontal .DayPickerNavigation__next {
    right: 15px !important;
}
}