body{ font-family: 'Open Sans', sans-serif;}
.none{ display:none;}
.dropdown{color: #444444;font-size:17px;}
#calender_section{ width:700px; margin:30px auto 0;}
#calender_section h2{ background-color:#efefef; color:#444444; font-size:17px; text-align:center; line-height:40px;}
#calender_section h2 a{ color:#F58220; float:none;}
#calender_section_top{width:100%;float:left;margin-top: 0;}
#calender_section_top ul{padding:0; list-style-type:none; float: left; margin-right: -5px;}
#calender_section_top ul li{float:left;display:block;width: 40px;color: #585858;text-align:center;font-size: 12px;min-height:0;background:none;box-shadow:none;margin:0;padding:0;font-weight: 700;}
#calender_section_bot{width: 281px;margin-top: 0;float:left;border-left:1px solid #ccc;border-bottom:1px solid #ccc;}
#calender_section_bot ul{ margin:0; padding:0; list-style-type:none;float: left; margin-right: -5px;}
#calender_section_bot ul li{float:left;width: 40px;height: 40px;text-align:center;border-top:1px solid #ccc;border-right:1px solid #ccc;min-height:0;background:none;box-shadow:none;margin:0;padding:0;position:relative;}
#calender_section_bot ul li span{margin-top: 0;float:left;margin-left: 0;text-align:center;display: block;width: 100%;color: #585858;font-weight: bold;height: 39px;line-height: 39px;}

.grey{ background-color:#DDDDDD !important;}
.light_sky{ background-color:#B9FFFF !important;}

/*==========Left Calendar Hover Popup ===============*/
.booking-calender-view .date_cell { cursor: pointer; cursor: hand; }
.booking-calender-view .date_cell:hover {background: #5bb85d !important;}
.booking-calender-view .date_cell:hover span{color: #fff !important;}
.booking-calender-view .view-green span {background: #5bb85d !important;color: #fff !important;cursor: pointer;display: block;}
.booking-calender-view .view-yellow span {background: #FFFF00 !important;color: #585858 !important;cursor: pointer;display: block;}
/*.booking-calender-view .view-red span {background: #bc0d00 !important;color: #fff !important;display: block;}*/
.calender_section_bot .view-red span {background: #bc0d00 !important;color: #fff !important;display: block;}
.booking-calender-view .view-green span:hover {opacity: 0.8;}

.date_popup_wrap {
    position: absolute;
    width: 143px;
    height: 115px;
    z-index: 9999;
    top: -115px;
    left:-55px;
    background: transparent url(add-new-event.png) no-repeat top left;
    color: #666 !important;
}
.events_window {
    overflow: hidden;
    overflow-y: auto;
    width: 133px;
    height: 115px;
    margin-top: 28px;
    margin-left: 25px;
}
.event_wrap {
    margin-bottom: 10px; padding-bottom: 10px;
    border-bottom: solid 1px #E4E4E7;
    font-size: 12px;
    padding: 3px;
}
.date_window {
    margin-top:20px;
    margin-bottom: 2px;
    padding: 5px;
    font-size: 16px;
    margin-left:9px;
    margin-right:14px
}
.popup_event {
    margin-bottom: 2px;
    padding: 2px;
    font-size: 16px;
    width:100%;
}
.popup_event a {color: #000000 !important;}
.packeg_box a {color: #F58220;float: right;}
a:hover {color: #181919;text-decoration: underline;}



/*11.01.2018*/
/*Details Page */
.catalog-product-view .book-calender-content {background: #f0f0f0; padding: 48px 58px;}
.catalog-product-view .book-calender-content:after, .catalog-product-view .booking-calender:after {content: ""; display: block; clear: both;}
.catalog-product-view .booking-calender .booking-left {float:left; width: 311px;}
.catalog-product-view .booking-calender .booking-right {float: right;}
.catalog-product-view .timeslot-area ul:after {content:""; display: block; clear: both;}
.next-booking {float: right;width: 147px;height: 48px;line-height: 48px;text-align: center;background: #b4b4b4;color: #fff;font-weight: 700;font-size: 20px;}
.booking-calender-timeslot-view ul li.view-green, .next-booking.active {background: #5bb85d;  color: #fff; cursor: pointer;}
.booking-calender-timeslot-view ul li.view-green:hover, .next-booking.active:hover, .next-booking:hover {opacity: 0.8;}

.booking-calender-view select {width:120px; font-size: 12px;padding-right: 38px;}
.booking-calender-view h2 a {font-size: 12px;}
.booking-calender-view h2 a:hover {text-decoration: none; color: #181919;}
.booking-calender-view:after {content: ""; display: block; clear: both;}
.booking-calender-view {background: #fff;padding: 14px;border: 1px solid #d7d7d7; width: 311px;}
.booking-calender-view>h2 {margin-bottom: 15px !important;}
.book-calender-content>* {text-align: center;display: block;}
.booking-calender {margin-top: 60px;}
.booking-calender-timeslot-view ul {list-style-type: none;    margin-bottom: 0; padding: 0;}
.booking-calender-timeslot-view ul li {float:left;margin: 0 29px 31px 0;}
.booking-calender-timeslot-view ul {width: 100%; float: right;}
.upsell-outer-container {clear: both;}



/* 12.02.2019 - Calender */
.booking-calender-view h2 a {font-size: 0px;display: inline-block;width: 28px;height: 32px;background-image: url(../images/spite-custom.png);vertical-align: top; border: 1px solid #bbbaba;border-radius: 1px;}
.booking-calender-view h2 a.prev-arrow {background-position: -5px -386px;background-repeat: no-repeat;}
.booking-calender-view h2 a.next-arrow {background-position: -45px -386px;background-repeat: no-repeat;}
.catalog-product-view .booking-calender-view select[name="month_dropdown"] {width:115px;}
.catalog-product-view .booking-calender-view select[name="year_dropdown"] {width:86px;}
.catalog-product-view .booking-calender-view select {vertical-align: top;}
.booking-calender-view h2 a.next-arrow { background-position: -45px -386px; background-repeat: no-repeat;}

/*22.02.2019 */
.catalog-product-view .booking-calender-view h2 { margin-left: -10px;  margin-right: -10px;}

/*15.03.2019 */
.catalog-product-view .booking-calender-view .dateclass.active span,
.catalog-product-view .booking-calender-timeslot-view ul li.selecttime.active input, 
.catalog-product-view .booking-calender-timeslot-view ul li.selecttime.active .dynamicgreen {background: #3f8aff !important;}

/* 04.09.2019 - Sales Details */
.booking-calender .preferreddatetime-container {text-align: left;}
.booking-calender .preferreddatetime-link {margin-top: 10px; font-weight: 600;}
.booking-calender .preferreddatetime-link a {text-decoration: underline;}
.booking-calender .preferreddatetime-link a:hover {text-decoration:none;}
.booking-calender .preferreddatetime-container .preferinput {margin-top: 25px; width: 48%;position: relative;}
.booking-calender .preferreddatetime-container .preferinput input {width: 100% !important;}
.booking-calender .preferreddatetime-container .preferinput:after {content: ''; display: block;width: 24px;height: 24px; background: url(../images/spite-custom.png) 0px -454px repeat; overflow: hidden;position: absolute;top: 7px;right: 7px;z-index: 1;}

/*09.10.2019-Details page Calender Section*/
.catalog-product-view .booking-calender .booking-left.no-calender-box {float: none; width:100%;}
.no-calender-box .booking-calender-view {width: 100%;border: 0;background: none;}
.no-calender-box .unavailable-msg {font-size: 30px;font-weight: 700;color: #585858 !important;}

/*09.12.2019*/
.booking-calender-timeslot-view ul li .slotpricecontainer input {background: none;    border: 0;}
.booking-calender-timeslot-view ul li .slotpricecontainer {background: #5bb85d; cursor: pointer;}
.booking-calender-timeslot-view ul li input {width: 140px;border: 0;padding: 0 20px; height: 48px;line-height: 48px;text-align: center; background: #b4b4b4;color: #fff; font-weight: 700; font-size: 16px;}
.view-green .slotpricecontainer span { font-size: 12px; display: block; color: #fff; font-weight: 700;}
.booking-calender-timeslot-view ul li.view-green input, .next-booking.active { cursor: pointer;}

/*13.12.2019*/
.booking-calender-timeslot-view ul li .dynamicgreen input {height: auto; line-height: normal;}
.booking-calender-timeslot-view ul li .dynamicgreen {height: 48px;padding: 6px 0 0; line-height: 10px;}

/* 13.12.2019 - Sales Details */
.booking-calender-timeslot-view .redavailcontainer .availqty {font-size: 12px;display: block;color: #fff;font-weight: 700;}
.booking-calender-timeslot-view ul li .slotpricecontainer.redavailcontainer {background: #BC0D00;}
.booking-calender-timeslot-view ul li .redavailcontainer input {height: auto; line-height: normal; }
.booking-calender-timeslot-view ul li .redavailcontainer {height:48px;padding: 8px 0 0;line-height: 10px;}

/* 12.04.2021 -- Multiple Calender (New Class ".multiple-calendar") */
.catalog-product-view .booking-calender.multiple-calendar {margin:15px -37px 0;}
.catalog-product-view .booking-calender.multiple-calendar .booking-left { float: none;  width: 100%;}
.multiple-calendar .booking-calender-view {width: auto; background: none; border: 0; padding: 0;}
.multiple-calendar .calender_section_top  {width: 100%; float: left; margin-top: 0;}
.multiple-calendar .set-calendar-container:after {content:""; display: block; clear: both;}
.multiple-calendar .inner-set-calendar {background: #fff;padding: 14px;border: 1px solid #d7d7d7;width: 311px;height: 336px;float: left;margin: 3px;}
.catalog-product-view .booking-calender.multiple-calendar .booking-right {width: auto; float: none; margin: 4px;}
.multiple-calendar .calender_section_top ul { padding: 0; list-style-type: none; float: left; margin-right: -5px;}
.multiple-calendar .calender_section_top ul li {float: left; display: block; width: 40px; color: #585858; text-align: center; font-size: 12px; min-height: 0; background: none; box-shadow: none; margin: 0; padding: 0; font-weight: 700;}
.multiple-calendar .calender_section_bot {width:281px;margin-top:0;float:left;border-left:1px solid #ccc;border-bottom:1px solid #ccc}
.multiple-calendar .calender_section_bot ul {margin:0;padding:0;list-style-type:none;float:left;margin-right:-5px}
.multiple-calendar .calender_section_bot ul li{float:left;width:40px;height:40px;text-align:center;border-top:1px solid #ccc;border-right:1px solid #ccc;min-height:0;background:0 0;box-shadow:none;margin:0;padding:0;position:relative}
.multiple-calendar .calender_section_bot ul li span{margin-top:0;float:left;margin-left:0;text-align:center;display:block;width:100%;color:#585858;font-weight:700;height:39px;line-height:39px} 
.catalog-product-view .multiple-calendar .calender-loader {left: 50%;}
.catalog-product-view .multiple-calendar .booking-left .overlay {width: 100%}
.multiple-calendar .booking-calender-timeslot-view ul li {margin: 0 17px 17px 0;}
.catalog-product-view .multiple-calendar .booking-right {height: auto;}
.catalog-product-view .multiple-calendar .booking-calender-timeslot-view .timeslot-area { min-width: auto; height: auto;}
.multiple-calendar .notify-me-outer {position: static;  transform: translate(0, 0);  margin: 0 auto;}
.detailscontainer .product-add-form .product-options-wrapper .multiple-calendar  .booking-calender-view h2 {text-align: left; margin-left: 4px; margin-bottom: 0;}

@media only screen and  (max-width: 1023px) {
    .catalog-product-view .booking-calender .booking-right { width: 52%;}

    .booking-calender-timeslot-view ul li {font-size: 14px; margin: 0 5px 5px 0;}
    ul.timeslot-list {padding: 0;}
    
    /* 12.04.2021 -- Multiple Calender (New Class ".multiple-calendar") */
    .catalog-product-view .booking-calender.multiple-calendar {margin: 15px 0 0;}
}

@media only screen and  (max-width: 767px) {
    .catalog-product-view .book-calender-content { padding: 5px !important;}
    .catalog-product-view .book-calender-content {  margin-bottom: 20px;}
    .catalog-product-view .booking-calender .booking-left { float: none; width: 100%;  margin-bottom: 15px;}
    .catalog-product-view .booking-calender .booking-right { width: 100%;}
    .booking-calender-view, #calender_section_bot { width: 100%;}
    #calender_section_top ul li, #calender_section_bot ul li {width:14.2857%;}
    .booking-calender { margin-top: 20px;}
    .opencontent-booking {padding-top: 0;}
    .catalog-product-view .closecontent-booking .fields { margin-bottom: 20px}
    .detailscontainer .product-add-form h2 {font-size: 16px;}
    .opencontent:after, .openbooking:after {border-left: 4px solid transparent; border-right: 4px solid transparent;  border-top: 6px solid #585858;top: 6px;}
    .opencontent.openarrow-upsell:after, .openbooking.openarrow-booking:after {border-bottom: 6px solid #585858; top: 6px;}
    .catalog-product-view .closecontent-booking label, .picup-heading {font-size: 14px;}
    .product-info-main .mainarea-description .value h2 {  font-weight: bold;  color: #585858;font-size: 18px;top: 6px;}
    
    /*Calender */
    .catalog-product-view .calender-loader { left: 50%; top: 50%; transform:translateX(-50%); }
    
    /* 11.03.2019 */
    #calender_section_top ul, #calender_section_bot ul {width: 100%;}
    .catalog-product-view .booking-right, .timeslot-area{height: auto; min-width: auto;}
    .booking-calender-timeslot-view ul li {float: left; margin: 0 5px 5px 0;}
    .booking-calender-timeslot-view ul {width: auto;  float: none;}
    .catalog-product-view .notify-me-outer {width:100%;  position: static;  top:0; left:0; transform: translate(0, 0); padding: 0; }
    
    /* 12.04.2021 -- Multiple Calender (New Class ".multiple-calendar") */
    .multiple-calendar .inner-set-calendar {float: none; margin-left: auto; margin-right: auto;}
}


@media only screen and (max-width:480px) {
    .booking-calender .booking-calender-view h2 {margin-left:-10px;margin-right:-10px;}
    .booking-calender-view select { width: 112px;  padding-left: 5px;}

    /* 11.03.2019 */
    .catalog-product-view .booking-calender-timeslot-view {overflow: visible !important;}
    
    /* 04.09.2019 */
    .booking-calender .preferreddatetime-container .preferinput {width: 100%;}
    .booking-calender .preferreddatetime-container .preferinput { margin-top: 10px;}
}


@media only screen and (max-width:360px) {
    
    /* Sales Details page Calender */
    .booking-calender-view select {font-size: 11px;}
    .catalog-product-view .booking-calender-view select[name="month_dropdown"] { width: 102px;}
    .catalog-product-view .booking-calender-view select[name="year_dropdown"] { width: 73px; min-width: 73px;}
    .booking-calender-view h2 a {width: 24px;}
    .booking-calender-view h2 a.prev-arrow { background-position: -7px -386px;}
    .booking-calender-view h2 a.next-arrow {background-position: -46px -386px;}
    

}