@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
/*@import url(https://fonts.googleapis.com/css?family=Lato:300,400,600,700);*/

body {  }
body.admin{font-family: "Open Sans"; }

#bookingformouter{font-family: "Open Sans"; }
#bookingAdder, .popUP{font-family: "Open Sans"; }
#bookingformouter h3{line-height:15px !important;}
#bookingformouter h3, #bookingAdder h3{font-family: "Open Sans"; }
#paymnentdetails, #paymentdetails, .overpopup{font-family: "Open Sans"; }


a { cursor: pointer; }

.pw100 { width: 100%; }
.pw80 { width: 80%; }
.pw50 { width: 50%; }

.padt5 { padding-top: 5px; }
.padt10 { padding-top: 10px; }
.padt20 { padding-top: 20px; }
.padt30 { padding-top: 30px; }
.padt40 { padding-top: 40px; }
.pad10 { padding: 10px; }

.mauto{margin-right:auto;margin-left:auto;}

.none { display: none; }
.cen { text-align: center; }
.rit { text-align: right; }

.tab-holder { margin-top: 0; }
.tab-holder .tab.selected { display: block; }
.tab-holder .tab { display: none; /*background:#FFF;padding:5px;*/ }

.tabs { height: 31px; margin-bottom: 0; background: transparent; }
.tabs > a { float: left; border: solid 1px #6fc055; cursor: pointer; transition: all 0.3s ease 0s; display: block; padding: 3px 21px 4px; color: #FFF; font-family: 'Segoe UI'; font-size: 13px; line-height: 22px; text-decoration: none; }
.tabs > a:hover { background: #09F; border-color: #09F; }
.tabs > a.selected { background: #09F; color: #FFF; }
.tab { padding: 10px; border: solid 1px #E0E0E0; border-top: none; min-height: 400px; }


.title .td-info{font-size:0.7em;color:#95173d}
/**/
.table { display: table; }
.table > div { display: table-row; }
.table > div > div { display: table-cell;padding:1px; }

.collapse { border-collapse: collapse; }

.extraslist{margin-bottom:25px}
.extraslist.table > div > div{width:50%;}
.extraslist .extra .inner{padding:0 15px}
.extraslist .extra .box{background-color: #AAA;background-size: cover; padding: 15px; min-height: 120px;color: #FFF;
    margin-bottom: 5px;padding-top: 25px;font-weight: 600;text-shadow: 2px 0px 5px rgba(0,0,0,0.5);}
.extraslist .moreinfo{font-size:11px;color:#AAA;}

.extralistpep  tr.toprow td{border-top:solid 1px #FFF;}
.extralistpep tr td{border-top:solid 1px #000;padding-top:10px;padding-bottom:8px;color:#000;font-weight:600; }
.extralistpep tr td input{border:none;background:#F6F6F6;padding:8px 8px 8px 20px;border-radius:15px;max-width:50px;text-align:center;}
.extralistpep tr td.extras-total{text-align:right;}

tr.totalrow td{font-size:1.2em;/*background:#F6F6F6;*/}

#bookingformouter{line-height: 15px;}
#bookingAdder{line-height: 15px;}

/* Calendar */
.calendar { clear: both; position: relative; background: #FFF;line-height:15px !important; }
.calendar .table { width: 100%; border-collapse: collapse; }
.calendar .table > div > div { padding: 0 !important; }
.calendar .wk > div { width: 14.28%; border: 1px solid #D0D0D0; vertical-align: top; }
.calendar .wk > div:hover > div { border: 2px solid #09F; transition: all 0.4s ease 0s; }
.calendar .wk > div > div { padding: 0; height: 150px; overflow-y: auto; border: 2px solid transparent; position: relative; transition: all 0.5s ease-in-out; }
.calendar .wk > div > div.loadthis { background: #EEE; }
.calendar .wk > div > div.currentday { border-color: #900; }
.calendar .day { display: block; font-size: 13px; padding: 1px 3px; }
.calendar .day .controls { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.calendar .day .controls a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.calendar .title { font-size: 21px; position: relative; padding:10px 0 0 48px; }
.calendar .title .controls { position: absolute; right: 0;top: 0; }
.calendar .title .navi { position: absolute; top: 6px; width: 20px; height: 24px; background-position: center center; background-repeat: no-repeat; background-size: 18px; }
.calendar .title .navi.prev { left: 0; }
.calendar .title .navi.next { left: 24px; }
.calendar .title .navi a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0;color:#555 }
.calendar .title .navi a:hover{color: #09F;}

.calendar .title .datenavi { position: absolute; z-index: 10; }

.admin .calendar .title{height:58px}
.admin #mobilekey{margin-top: 15px;}

body.admin .navigation{top: 8px;position: absolute;left: 0;}
body.admin .datenavi .btn{padding: 7px 8px;}

.datenavi table td { vertical-align: top; }
/*.datenavi input[type="button"] { padding: 3px 4px; }*/
.datenavi input[type="text"] { padding: 5px 7px 4px 7px; width: 85px; }
.datenavi .fbox input.datepicker{padding:5px 0;}

.calendar .monthlabel { display: block; margin-top: 0; margin-bottom: 0; text-align: center; margin-bottom: 5px; }
.calendar .dayofweek { font-size: 13px; padding-left: 5px; background: #999; text-align: left; color: #FFF; text-transform: uppercase; border: 1px solid #999; }

.calendar .month > .title { padding: 10px; text-align: left; }
.calendar .month { padding: 10px 0; width: 100%; margin: 2px; display: none; }
.calendar .month.active { display: block; }

/*Voucher Code*/
#frmgiftcode {padding-bottom:40px;}
#frmgiftcode input{padding:12px 15px;width:calc(100% - 20px);font-size:15px;}
#gccodevalue{text-transform:uppercase;border:dashed 2px #999;padding:15px 10px;background:#EEE;letter-spacing: 3px;}
#frmgiftcode .popupclose{display:none !important;}

#bookingAdder h1, #bookingformouter h1{}
#bookingAdder h2, #bookingformouter h2{font-size:25px !important;font-weight:700 !important;line-height: 1.2em !important;}
#bookingAdder h3, #bookingformouter h3{font-weight:700 !important;line-height: 1.2em !important;}
#bookingAdder h4, #bookingformouter h4, .popUP h4 { margin-top: 0; color: #555 !important; margin-bottom: 5px;height:auto;line-height: 1.2em !important;font-weight:700 !important;font-size: 20px !important; }
h3.subtitle { font-size: 12px; }

#SUBTOTAL{text-align: right;}
#DISCOUNTTOTAL{text-align: right;}
/* Popups */
.popup, .pop { background: #FFF; position: absolute; padding: 3px 4px 5px 4px; border: none !important; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); z-index: 1001;
border-radius:10px; }
.popup .container { margin: 0 5px 0 5px; }
.popup iframe { width: 98%; height: 100%; border: none; }
#popupclose, .popupclose { transition: all 500ms ease-in-out; position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; text-decoration: none; background: transparent url("/booking/img/close.png") no-repeat center center; z-index: 51; opacity: 0.3; padding: 6px; border: solid 2px #FFF; border-radius: 4px; }
#popupclose:hover, .popupclose:hover { opacity: 1.0; text-decoration: none; border-color: #E0E0E0; }
#popupclose:active, .popupclose:active { opacity: 1.0; text-decoration: none; border-color: #A00; background-color: #A00; }
.popUP:hover #popupclose, .popUP:hover .popupclose { display: block; transition: all 800ms ease-in-out; }
.overlay { z-index: 1000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(100,100,100,0.3); }
#popup-holder { }

.popUP { position: absolute /* fixed*/; z-index: 1001; max-width: 85% !important; background: #FFF; padding: 20px; min-height: 250px; min-width: 200px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); border: none !important; border-radius:10px; }
.popUP h1, .popUP h2, .popUP h3 { margin-top: 0; color: #606060 !important;height:auto;letter-spacing: 0px;text-transform:none;  }
.popUP h3 { font-size: 23px !important; margin-bottom: 7px;height:auto;text-transform:none;line-height: 1.2em !important; }
.popUP h4 { margin-top: 0; color: #555 !important; margin-bottom: 5px;height:auto;line-height: 1.2em !important; }
.popUP > .content { border: solid 1px #bfa472; padding: 10px 20px; min-height: 270px; }
.popUP iframe { width: 100%; height: 100%; border: none; }
.popUP.addingform { z-index: 1002; }
.popUP.addingform label{text-transform: uppercase;font-size:11px;font-weight:600;line-height: 15px;display: inline-block;vertical-align: top;}
.popUP.blockform { z-index: 1002; width: 500px; height: 300px; max-height: 300px !important; min-height: 100px !important; }
.popUP.configform { z-index: 1002; width: 600px; height: 390px; max-height: 400px !important; min-height: 100px !important; }

#terms{border:solid 1px rgba(0,0,0,0);}

#bookingAdder{width:1000px}
#bookingAdder #d-climbers{padding:30px 30px 15px 30px;vertical-align:top;}
#bookingAdder #d-info{background:#EEE;padding:20px;width:400px;height: 55vh;}
#bookingAdder #d-info td{text-align:left;border:none !important;background-color: rgba(0,0,0,0) !important;}
#bookingAdder #d-info td.rit{text-align:right;}
#bookingAdder #d-info td:hover{}
	
#bookingAdder.popUP{padding: 0;border-radius:0;}

.admin #bookingAdder{min-height:90vh;width:1300px}
.admin #bookingAdder #d-info{height: calc(90vh - 40px);}

/* Specific */
.dayform { width: 1350px;  max-width: 100%; }
.dayform .slots .slot.basecamp { background: #6FC055; border-color: #6FC055; color: #FFF; }
.dayform .slots .slot.completed { opacity: 0.8; }
.dayform .slots .slot.completed:hover { opacity: 1.0; }
.dayform .slots .slot.removed { display: none;  }

.dayform .slots { min-height: 70px;padding-bottom:10px; }
.dayform .slots .timeslot { width: 48px; height: 77px; float: left; display: inline-block; vertical-align: top; color: #A0A0A0; padding-top: 3px; padding-left: 2px; margin-right: 8px; font-size: 11px; }
.dayform .slots .slot { background: #E0E0E0; display: inline-block; border-radius: 4px; width: 86px; height: 40px; padding: 1px 3px; border: solid 2px #E0E0E0; margin: 0 2px 2px 0; text-align: center; vertical-align: middle; position: relative; transition: all ease-in-out 0.2s; font-size: 11px; vertical-align: middle; word-wrap: break-word; }
.dayform .slots .slot.add, .dayform .slots .slot.block { border-color: #E0E0E0; color: #C0C0C0; background: #FFF; width: 40px; height: 32px; font-size: 2em; margin-top: 5px; margin-right: 5px; }
.dayform .slots .slot.add span { display: block; vertical-align: middle; top: 0; right: 0; left: 0; position: absolute; }
.dayform .slots .slot.add:hover { background: #09F; border-color: #09F; color: #FFF; }
.dayform .slots .slot.block { font-size: 12px; float: right; border: none; width: 55px; }
.dayform .slots .slot.block:hover span { color: #900; }

.dayform .slots .timeslot .spaces { margin-top: 5px; text-align: center; }

.dayform .slots .slot a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }
.dayform .slots .slot table { width: 100%; line-height: 12px; }
.dayform .slots .slot.disabled, .dayform .slots .slot.disabled:hover { border-color: #F0F0F0; border-style: dashed; color: #F0F0F0; background: #FFF; }

.dayform .slots .slot.parent { min-width: 84px; width: auto;max-width:98% !important; }
.dayform .slots .slot.parent span.name { position: absolute; top: 8px; left: 2px; bottom: 2px; display: block; width: 250px; max-width: 100%; font-size: 14px; }
.dayform .slots .slot.parent .children { position: absolute; font-size: 18px; right: -10px; }

.dayform .slots.blocked { background: #EEE; }
.dayform .slots.blocked .add { display: none; }
.blockedsession { padding: 4px; font-size: 1.1em; }
.blockedsession .icon { /*Litte Warning Icon*/ }

.dayform .entries { min-height: 720px; font-size: 12px; }

.selectedDay.dayform h3 .date { font-size: 0.7em; color: #FFF; font-weight: normal; }
.selectedDay.dayform{padding-bottom: 10px;}
.selectedDay.dayform .noteswrapper{left: 0;right:auto;top: 25px;}

.selectedDay { padding-top:0; padding-left: 0; padding-right: 0;  border-radius:0;}
.selectedDay .tabs { background: transparent;display:none; }
.selectedDay .tabs .tabbtn { margin-left: 10px; }
.selectedDay .tab { border-color: #FFF; padding: 8px 10px 5px 10px; }
.selectedDay .tab.basecamp { border-top: solid 2px #18A0C4; }
.selectedDay .tab-holder { margin-top: 0; }
.selectedDay .tab-holder .tab.selected { background: #FFF; }
.selectedDay h3 { color: #FFF !important; text-align: center; }
.selectedDay .popupclose { background-image: url('../img/closewhite.png'); }

.selectedDay .d-header{background-color:#18A0C4;padding-top:20px;padding-bottom:20px;}

.animatedmessage { position: fixed; top: 28%; right: 1%; width: 250px; text-align: center; z-index: 100; font-weight: normal; font-size: 13px; }
.animatedmessage.green { color: #09F; }
.animatedmessage .inner { background: #FFF; max-width: 150px; margin: auto; border-radius: 5px; color: #517AA2; font-size: 13px; padding: 12px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }
.animatedmessage.basecamp .inner { background-color: #6FC055; color: #FFF; }
.animatedmessage.red .inner { background-color: #FFF; color: #F00; }

.loader { position: absolute; z-index: 15000; top: 17%; margin-left: calc((100% / 2) - 70px); display: none; border-radius: 3px; box-shadow: 0 0 5px #09F; padding: 10px 18px 12px; font-size: 13px; color: #09F; background: rgba(255,255,255,0.8); }
.loader img { margin-right: 4px; }

.dayform .slots .slot a.state, .pending .state, .paid .state, .confirmed .state, .completed .state, .removed .state, .undefined .state,
.dayform .slots .slot a.weborder { width: 10px; height: 10px; position: absolute; top: auto !important; right: -3px; bottom: -5px; left: auto; border-radius: 50%; border: solid 1px #FFF; background-size: 100%; background-repeat: no-repeat; background-position: center center; }
.undefined .state { background-color: #CCC; border-color: #CCC; background-image: url('/booking/img/pendingwhite.png'); }
.pending .state { background-color: #FFA64D; background-image: url('/booking/img/pendingwhite.png'); }
.paid .state { background-color: #F60; border-color: green; background-image: url('/booking/img/tickwhite.png'); }
.completed .state { background-color: green; border-color: green; background-image: url('/booking/img/tickwhite.png'); }
.confirmed .state { background-color: #0D0; border-color: #0D0; background-image: url('/booking/img/tickwhite.png'); }

.weborder .weborder { right: auto !important; left: -3px !important; background-color: #F60; background-image: url('/booking/img/weborder-white.png'); background-size: 80%; border-color: #F60 !important; }
h3 .weborder .weborder { margin-left: 4px; width: 16px; height: 16px; display: inline-block; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: 100%; border: solid 2px #F60; }

.calendar .table > div > div.timeblock { padding-top: 5px; padding-bottom: 5px; }
.calendar .timeblock > div > .pending { opacity: 0.8; background-color: #FFA64D; background-image: url('/booking/img/pendingwhite.png'); }
.calendar .timeblock > div > .paid { background-image: url('/booking/img/paidwhite.png'); }
.calendar .timeblock > div > .completed { opacity: 0.8; background-image: url("/booking/img/tickwhite.png"); }
.calendar .timeblock > div > .removed { display: none; }

.tabs > a.basecamp { background: #6FC055; }

.addelement { font-size: 12px; font-weight: bold; }

#ui-datepicker-div{z-index:+100001 !important;}

input[type=button], input[type=submit], a.btn { background: #C0C0C0 none repeat scroll 0 0; border: solid 1px #C0C0C0; color:#FFF; border-radius: 2px;
   padding: 8px; transition: all 0.5s ease-in-out; cursor: pointer; font-size: 12px; text-decoration: none; display: inline-block; }
input[type=button]:hover, input[type=submit]:hover, a.btn:hover { background: #09F; border-color: #09F; color: #FFF; }
input[type=button], input[type=submit]{ padding: 10px 8px;}

.btn { border: solid 2px #e0e0e0; color: #c0c0c0; border-radius: 4px; padding: 10px; transition: all ease-in-out 150ms; }
.btn:hover { background-color: #09F; border-color: #09F; color: #FFF; }
.btn.big { padding: 10px 15px;font-weight: 600;text-transform: uppercase;letter-spacing: 1px; }
.btn.refresh { background: url('../img/refresh.png') no-repeat center center; background-size: 20px 20px; padding-left: 20px; }
.btn.refresh:hover { background: #09F url('../img/refreshwhite.png') no-repeat center center; }

.btn.red { background: #FFF; border-color: #F00; color: #F00; }
.btn.red:hover { background: #900; border-color: #900; color: #FFF; }

.btn.green { background: #090 !important; border-color: #090 !important; color: #FFF !important; }
.btn.green:hover { background: #2B2 !important; border-color: #2B2 !important; }

.linkbtn { font-size: 12px !important; color: #AAA !important; }
.linkbtn:hover { color: #333 !important; }

#couponTrigger{color:rgb(102, 102, 102);}
.popUP table td{padding:0}

label { color: #555; font-size: 12px; }
input[type=text] { font-family: Arial; font-size: 12px; }

select { padding: 10px 12px; min-width: 120px; width: 220px; max-width: 100%;font-family: "Open Sans" !important; }
select option { padding: 1px 5px;font-family: "Open Sans" !important; }

.fbox:not(td){margin-bottom:4px;}
.fbox { border: solid 1px rgba(0,0,0,0.4); overflow: hidden; padding: 0px;background:#FFF; }
.fbox input[type=text],.fbox input[type=number], .fbox textarea { border-color: transparent; width: calc(100% - 24px); transition: all 1s ease-in-out; padding: 10px 12px; }
.fbox input[type=text]:focus, .fbox input[type=number]:focus,.fbox textarea:focus { outline: none; }
.fbox input:-webkit-autofill { border-color: transparent; background: transparent; -webkit-box-shadow: 0 0 0px 1000px white inset; }
textarea { resize: none; font-family: Arial; padding: 8px 12px; font-size: 12px; }

.fbox input.datepicker { background: url('../img/calendar.png') no-repeat center right;width:calc(100% - 5px) }
/*.fbox select.timepicker { background: url('../img/clock.png') no-repeat center right; }*/
.fbox select { border: none; }
.fbox.select { padding-left: 0; padding-right: 0; }

.message { background: #B9E085; color: #555; }
.error { background: #F99; color: #555; }

.message > div { padding: 5px 10px; }
.message b { font-size: 13px; }
.message { font-size: 12px; }

.basecamp .basecamp { display: block; }

.maxrows .addelement { color: #CCC; }

.hrow-sticky{transition:all ease-in- 0.2s;}
body.scrolled .hrow-sticky{position:fixed;top:0;left:0;right:0;max-width:1200px;opacity:0.8;z-index: 1001;}
body.scrolled .hrow-sticky>div{/*display:inline-block;*/}
body.scrolled #cal-tables{margin-top:46px;}
body.scrolled #spacedblock{}
/* ================================= */

#navigatedate{padding:5px 4px 3px;}
#selectadate{display:none;vertical-align:bottom;}
#selectadate a{background-color: #555;color: #FFF;font-size: 12px !important;padding:5px 10px 4px;text-transform:uppercase !important;}

/**/
.tooltipster-default { border-radius: 5px; border: 1px solid #CCC; background: #FFF; color: #333; box-shadow: 2px 2px 2px rgba(0,0,0,0.2); }
.tooltipster-default .tooltipster-content { /*font-family: Lato, sans-serif;*/ font-size: 13px; line-height: 15px; padding: 8px 10px; overflow: hidden; }
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border { /* border-color: ... !important; */ }
.tooltipster-icon { cursor: help; margin-left: 4px; }
/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base { padding: 0; font-size: 0; line-height: 0; position: absolute; left: 0; top: 0; z-index: 9999999; pointer-events: none; width: auto; overflow: visible; max-width: 260px; }
.tooltipster-base .tooltipster-content { overflow: hidden; font-size: 12px; }
/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow { display: block; text-align: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }
.tooltipster-arrow span, .tooltipster-arrow-border { display: block; width: 0; height: 0; position: absolute; }
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span { border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-top: 8px solid; bottom: -7px; }
.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-top: 9px solid; bottom: -7px; }

.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span { border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-bottom: 8px solid; top: -7px; }
.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { border-left: 9px solid transparent !important; border-right: 9px solid transparent !important; border-bottom: 9px solid; top: -7px; }
.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border { left: 0; right: 0; margin: 0 auto; }
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span { left: 6px; }
.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border { left: 5px; }
.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span { right: 6px; }
.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border { right: 5px; }
.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-left: 8px solid; top: 50%; margin-top: -7px; right: -7px; }
.tooltipster-arrow-left .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-left: 9px solid; margin-top: -8px; }
.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border { border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important; border-right: 8px solid; top: 50%; margin-top: -7px; left: -7px; }
.tooltipster-arrow-right .tooltipster-arrow-border { border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important; border-right: 9px solid; margin-top: -8px; }
/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */
.tooltipster-fade { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; }
.tooltipster-fade-show { opacity: 1; }
.tooltipster-grow { -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -o-transform: scale(0,0); -ms-transform: scale(0,0); transform: scale(0,0); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-backface-visibility: hidden; }
.tooltipster-grow-show { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -o-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); }
.tooltipster-swing { opacity: 0; -webkit-transform: rotateZ(4deg); -moz-transform: rotateZ(4deg); -o-transform: rotateZ(4deg); -ms-transform: rotateZ(4deg); transform: rotateZ(4deg); -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; }
.tooltipster-swing-show { opacity: 1; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1); -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); }
.tooltipster-fall { top: 0; -webkit-transition-property: top; -moz-transition-property: top; -o-transition-property: top; -ms-transition-property: top; transition-property: top; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); }
.tooltipster-fall-show { }
.tooltipster-fall.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; top: 0px !important; opacity: 0; }

.tooltipster-slide { left: -40px; -webkit-transition-property: left; -moz-transition-property: left; -o-transition-property: left; -ms-transition-property: left; transition-property: left; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); }
.tooltipster-slide.tooltipster-slide-show { }
.tooltipster-slide.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; left: 0px !important; opacity: 0; }
/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing { opacity: 0.5; -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }

.bwrapper { width: 80%; margin: auto; }

#couponquerycode{font-size:19px;margin-bottom: 15px;text-align: center;width:100%;padding: 10px 15px;}
#frmcouponquery{z-index:1020} 

.warning{padding:2px 0;font-size:0.8em;font-style:italic;color:#F00;}
.warning table{font-size:0.85em;margin-top:4px;width:100%;}

.dayform .slots.rafull { background: rgba(202, 221, 233, 0.2); }
.calendar .box { position: relative; }
.cformleftcell{padding-right:10px;}


@media only screen and (max-width: 1600px) {

    .bwrapper { width: 90%; }
}

@media only screen and (max-width: 1400px) {

    .dayform .entries { max-height: 640px; }
    /*  .dayform .slots { min-height: 60px; }*/

    .bwrapper { width: 100%; }
}

.padl10 { padding-left: 10px; }

.tab { padding: 0; border: none; }

.calendar .table > div > div.dayofweek { padding: 2px 4px; text-align: center; position: relative; }
.calendar .table > div > div:first-child { width: 120px; max-width: 160px; font-size: 11px; width: 8%; min-width: 50px; }
.calendar .table > div > div { /*width: 12.6%;*/ width: calc((100% / 7) - 60px) }

.calendar .timeslot .wrapper {background:none;}
.calendar .timeslot > div > div { height: auto; position: relative; margin: 2px 2px 3px; }
.calendar .timeslot > div { vertical-align: top; }

.timeslot .weekend { background: #EEE; }
.calendar .timeslot > div.weekend > div { border: solid 3px #EEE; }
.calendar .table > div > div.time { padding: 5px; z-index:1001}

.saving { opacity: 0.8; }

.icon { position: absolute; top: 12px; left: 6%; width: 32px; height: 32px; background-repeat: no-repeat; background-size: 90%; background-position: center center; border-radius: 50%; border: solid 1px rgba(255,255,255,0); }

/*.available { color: #FFF; }
.available > div { background-color: #4A4; }
.available .icon { background-image: url('/booking/img/available.png'); border: solid 1px #090; }
.available .notice {color: #FFF; }*/

.available { color: #333; }
.available > div { background-color: #EFE; border: solid 1px #4A4; }
.available .icon { background-image: url('/booking/img/available.png?mod=1'); }
.available .notice { color: #333; }
.available:hover .notice { color: #FFF; }
.available:hover .icon { background-image: url('/booking/img/available-white.png?mod=1'); }

.runningout > div { background-color: #EFE; border: dashed 1px #4A4; transition: all ease-in-out 0.2s; }
.runningout .icon { background-image: url('/booking/img/available.png?mod=1'); }
.runningout:hover > div { background-color: #4A4; }
.runningout:hover .notice { color: #FFF; }
.runningout:hover .icon { background-image: url('/booking/img/available-white.png?mod=1'); }

.old > div, .full > div { background-color: #FFF; transition: all ease-in-out 0.2s; }
.old > div { color: #AAA; background-image: url('/booking/img/unavailable.png?mod=1'); background-repeat: no-repeat; background-position: center center; background-size: 37px 37px; border: dotted 1px #A0A0A0; }
.old .notice { left: 0; text-align: center; top: 10px; font-size: 0.7em; display: none; }
.old:hover { background: red; }

.full > div { border: dashed 1px #F60; opacity: 1.0; color: #F60; }
.full .notice { color: #F60; }
.full:hover { background-color: #F60; }
.full:hover > div { background-color: #F60; }
.full:hover .notice { color: #FFF; }

.calltobook > div { background-color: rgba(255, 221, 0, 0.5); border: dashed 1px #F60; transition: all ease-in-out 0.2s; }
.calltobook:hover { background-color: #F60; }

.box { }
.box > div { min-height: 52px; position: relative; }
.box.available:hover > div { background-color: #5B5; transition: all ease-in-out 0.3s; }
.box.empty > div { background: rgba(220,220,220,0.1); }
.box a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }

.box > div.entrycontainer { min-height: 8px; padding: 2px 8px; }
.box .ip { position: absolute; top: -4px; right: -2px; min-height: 12px; min-width: 12px; background: red; display: none; padding: 0 3px; font-size: 10px; color: #FFF; }
.today .box .ip, .today .box.old .ip { display: block; background: rgba(0,0,0,1); }
.today .box.old .ip { display: none; }
.box.runningout .ip, .today .box.runningout .ip { display: block; background: red; }
.box.old .ip { display: none; }


.table > div.timeslot { border-bottom: dashed 2px #EEE; }
.rel { position: relative; }
.notice { font-size: 11px; padding-top: 10px; height: 100%; text-align: center; font-weight: 400; /*font-family: Lato;*/ }
.numbers { font-size: 12px; padding-top: 5px; height: 100%; text-align: center; }


.tvalue { font-size: 17px; font-weight: bold; display: block; position: relative; }
.tvalue > span { font-size: 11px; font-weight: normal; display: inline-block; vertical-align: top; padding-top: 4px; }

#cal-tables { border-bottom: solid 1px #999; }

.calendar .weekstart.active { display: table !important; background: #FFF; }
.calendar .weekstart { display: none !important; }

.calendar.slotbasecamp .slotbasecamp { display: table-row; }
.calendar.slotbasecamp .slotbasecamp .box.basecamp { display: block; }
.calendar.slotbasecamp .box.broom{display: none; }
.calendar .slotbasecamp { display: none; }
.calendar.slotbroom .box.basecamp{ display: none; }
.calendar.slotbroom .box.broom{display: block; }
.calendar.slotbroom  .slotbroom{ display: table-row; }

#servicelinks { display:none; margin-left: 125px; }
#servicelinks a { margin-left: 10px; }

.calendar #cal-tables { border-top: 2px solid #18A0C4; min-height: 400px; background-image: url('/booking/img/loader-big.gif'); background-repeat: no-repeat; background-position: center 10%; position:relative; }
.calendar.slotbasecamp .dayofweek { background: #18A0C4; border: 1px solid #18A0C4; }


hr, #bookingAdder hr { height: 1px; border: none; background: #CCC;margin:7px 0 !important; }

.extraageoptions { position: relative; }

.copyitem .delete.icn { display: none; position: absolute; height: 16px; width: 16px; bottom: 8px; right: 30px; color: red; font-size: 10px; z-index: 3; }
.copyitem:hover .delete.icn { display: block; }

.couponextras .loading{display:none;}
.couponitem.checking .loading{display:block;}
.couponitem.checking .applycoupon{display:none;}
.couponitem.valid .applycoupon{display:none}
.couponitem.invalid .fbox{border-color:#F00}
.couponitem.valid .fbox{border-color:#090}

.couponitem input[type=text]{text-transform:uppercase;}
.applycoupon{text-transform: uppercase;padding:2px 5px;border-radius:4px;border:solid 1px #888;color:#888;font-size: 11px;font-weight: 600;}

.subtotal h3{font-size:17px;font-weight:400;}

#mobilekey {/* top:45px;*/font-size: 11px; display: flex;  gap: 5px;  flex-direction: row;}
#mobilekey > div { display: inline-block; margin-right: 2px; margin-bottom: 2px; }
#mobilekey > div .key { background: #000; display: inline-block; color: #FFF; padding: 1px 2px; }
#mobilekey > label { margin-right: 8px; font-size: 9px; }
#mobilekey > div.available .key { background-color: #EFE;border: solid 1px #4A4;color:#222; }
#mobilekey > div.runningout .key { background-color: #EFE; border: dashed 1px #4A4;color:#222; }
#mobilekey > div.calltobook .key { background: rgba(255, 221, 0, 0.5); color: #000; }
#mobilekey > div.unavailable .key { background: #eee; color: #000;border: dotted 1px #CCC; }

#statusmessage { position: fixed; bottom: 4px; right: 10px; min-height: 16px; padding: 10px 35px 12px 20px; margin: 3px; color: #FFF;
  background: #C0C0C0; font-size: 13px; font-family: "lucida grande",verdana,arial,sans-serif; z-index: 1020; display: none; min-width: 300px;
  max-width: 100%; }
#statusmessage img { float: left; margin-right: 2px; }
#statusmessage.green { color: #555; background: #BFB; border: none; }
#statusmessage.green .icon { display: block; float: left; width: 16px; height: 16px; margin-right: 2px; background: transparent url('/booking/img/check.png') no-repeat; }
#statusmessage.red { color: #333; background: #F99; border: none; }
#statusmessage.red .icon { display: block; float: left; width: 16px; height: 16px; margin-right: 2px; background: transparent url('/booking/img/cross-grey.png') no-repeat 4px 6px; }
#statusmessage .icon{position:relative;top:auto;left:auto;}

.calendar .table > div.timeslot.mobile { display: none; }

#coupondata table{width:100%;}

#progresssteps{text-align:center;width:70%;position:relative;margin:0px auto 35px;}
#progresssteps .table>div>div{padding-bottom:12px;position:relative;}
#progresssteps .step{width:40px;}
#progresssteps .circle{border-radius:50%;height:29px;width:35px;margin:0px auto;border:1px solid #C0C0C0;color:#C0C0C0;padding-top:6px;}
#progresssteps span{display:block;margin-top:4px;text-transform:uppercase;font-size:11px;color:#A0A0A0;/*position: absolute;bottom:-8px;left:0;right:0;*/}
#progresssteps .viewed .circle{background:#090;color:#FFF;border-color:#090;}
#progresssteps .space{padding-top:12px;padding-left:4px;padding-right:4px;}
#progresssteps hr{margin-top:8px;height:3px;width:45px;background:#CCC}
#progresssteps .viewed hr{background:#090}

.overpopup{width:600px;max-width:100%;margin:auto;background:rgba(255,255,255,1.0);border-radius:5px;padding:20px 30px;max-width:100%;}
#paymentdetails{width:75%;max-width:550px;margin:auto;}
#paymentbookingdetails{text-align:center;margin-top:20px;}
#paymentbookingdetails table{width:60%;margin:0 auto 25px auto;font-size:11px;border-top:solid 1px #222;border-bottom:solid 1px #222;}
#paymentform-inner{background: #f7f8f9;padding:10px 20px;border-radius:5px;}

.climberagebox{width:100px;}

#extras .fbox{margin:0 1px}
#mobilebutton{display:none;}
body.popopen #mobilebutton{display:none !important;}
.whensmall, .table > div.whensmall, label.whensmall, .popUP.addingform label.whensmall{display:none;}

@media only screen and (max-width: 1000px) {
    .icon { left: 0px; }
    .icon {  display: block;position: relative; top: 8px; left: auto; right: auto; background-position: center center; margin: auto; /*background-size:22px 22px;*/ }
    .available .notice { padding-left: 0px; }
    .calltobook .icon { background-image: url('/booking/img/callusblack.png'); background-repeat: no-repeat; }
    .runningout .icon { background-image: url("/booking/img/available.png"); }
    .blocked .icon { background-image: url("/booking/img/unavailable.png"); opacity: 0.6; }
    .box > div { min-height: 75px; padding: 5px 8px; }

    #bookingAdder.popUP{width:100%;max-width:calc(100% - 10px) !important;top:2px !important;left:5px !important;}
    #bookingAdder #d-info{width:300px;}
    #bookingAdder #d-climbers{padding:30px 20px 15px 20px;}

    #bookingformouter{width:calc(100% - 15px);margin:auto}
}

@media only screen and (max-width: 800px) {

	body.admin .basecamp .logo{display:none;}
    body.admin #servicelinks{display:none;}
    body.admin  .calendar .table > div > div.dayofweek{line-height:17px;}

    #exportbtn{display:none;}

    .tvalue { font-size: 14px; }
    .calendar .dayofweek { font-size: 12px; }
    .calendar .monthlabel { text-align: left; font-size: 1.05em; }
    .calendar .table > div > div.time { text-align: center; }
    .calendar .table > div > div.time .tvalue > span { display: block; }

    .notice { font-size: 11px; }
    #mobilekey { display: block; }
    #bookingformouter{width:calc(99% - 20px);}
}

@media only screen and (max-width: 700px) {

    .old > div, .full > div { background-size: 32px 32px; }
    .tvalue { font-size: 13px; }

    .notice { padding-top: 0px; padding-bottom:0}
    .notwhensmall, .popUP .table > div.notwhensmall { display: none !important; }
    .whensmall{display:block  !important;}
	.table.whensmall{display:table !important;}
	.table > div.whensmall{display:table-row !important;}
	.table > div > div.whensmall{display:table-cell !important;}

    .fbox.select{border:none}
    .fbox.select select{width:100% !important;border: solid 1px rgba(0,0,0,0.4);}

    .full .icon { height: 17px; }

    .calendar .table > div > div.time { padding: 2px; }
    .calendar .table > div > div.dayofweek { line-height: 12px; }

    .tvalue { line-height: 12px; }

    .popUP { border-radius: 0; top: 0; left: 0; right: 0; padding: 10px; }
    .popUP .table { display: block; }
    .popUP .table > div { display: block; }
    .popUP .table > div > div { display: block; }
    .popUP .table > div > div.pw50 { width: 100%; }
    .popUP h3 { font-size: 20px; text-align: center; margin-bottom: 15px; }

    .popup select.timepicker { min-width: 60px; max-width: 120px; }
    .popup .ageoptions.fbox { width: 120px !important; margin-bottom: 15px; }
    .popup .ageoptions.fbox select { max-width: 120px; }
    .popup .extraageoptions { max-width: 100px; width: 100px !important; }
    .popup .extraageoptions select { width: 90px !important; }

    .cformleftcell{padding-right:0;}
    #bookingAdder #d-info{width: calc(100% - 40px);}

    .box > div { min-height: 65px; padding: 5px 8px; }

    .popUP { max-width: 100% !important; right: 1px !important; left: 1px !important; }
    #bookingAdder #d-climbers{padding:30px 25px 15px 25px}
    .overpopup{padding:20px;}

    #paymentbookingdetails table{width:80%}
    .climberagebox{width:145px}

}

@media only screen and (max-width: 680px) {

  body.admin .calendar .title .controls,
  body.admin .navigation{position:relative;top:0;}
  body.admin .calendar .title{height:auto;}
  body.admin input[type="button"], body.admin input[type="submit"]{padding: 7px 7px;}
  body.admin .btn.refresh{padding-left: 20px;}
  body.admin .calendar .title{padding-top: 0px;}
  body.admin .calendar .monthlabel{margin-top:15px;}

  body.admin .calendar .title .datenavi{right: 0;top: 0;}

	  body.admin .calendar .title .datenavi{right: 0;top: 0;position:relative;}
  body.admin .calendar .title .datenavi table{margin:auto;}
  body { margin: 3px; }

	 body.admin .calendar .title .controls{width:100%;position:fixed;top:0;right:0;bottom:0;left:0;background:#FFF;z-index: 1002;display:none;padding-top: 30px;}
	  body.admin .calendar .title .controls.open{display:block;}
	  body.admin .calendar .title .controls .btn{display:block;width: 90%;border-radius:0;margin-top:2px;margin-left:auto;margin-right:auto;margin-bottom: 5px;text-align:center;}
	  body.admin .calendar .title .controls a.btn{width:85%}
	  body.admin #mobilebutton{display:block;position:absolute;right:5px;top:5px;z-index: 1003;}

    .dayform > div.inner { padding: 25px 0 !important; }
    #mobilekey > div{display:none;}

    .padl10 { padding-left: 0; }

    .calendar .table > div > div.time{width:65px;position:absolute;display: block;}
    .calendar .table > div > div .tvalue{position: absolute;left:10px;top:15px;z-index:2;}
    .calendar .table > div > div.time .tvalue > span{display:inline;}
    #spacedblock{width:0px !important;min-width:0;}
    #selectadate{display:block;}

    .calendar .table > div > div.dayofweek { line-height: 10px; }
    .calendar .table > div > div, .calendar .table > div.timeslot > div:first-child { min-width: 0; }
    .calendar .dayofweek { font-size: 10px; }

    .tvalue { font-size: 12px; line-height: 10px; }
    .calendar .table > div > div.time { padding: 5px 3px 5px 0; }
    .calendar .monthlabel { text-align: left; font-size: 17px; }

    .calendar .title { padding-left: 2px; }
    .navigation { width: 100%; position: relative; height: 30px; }
    .calendar .title .navi.next { right: 0; left: auto;  }
    .calendar .title .navi { width: 40px; font-size:25px; text-align: center; height: 22px; }
    .calendar .title .navi a{padding:4px;display:inline-block;}

    .calendar .timeslot > div > div { margin: 1px 1px 2px; }
    .icon { top: 2px; }

    .box > div { padding: 5px 8px; }
}


@media only screen and (max-width: 600px) {

.notice { font-size: 13px; }

  #cal-tables{margin:0 10px}
  .today .box .ip, .today .box.old .ip{display:none;}
  .today.btn{display:none;}

  .calltobook > div{border: solid 1px rgba(255, 221, 0, 0.5);}
  .table > div.timeslot{border-bottom-color:#FFF;}
  #cal-tables{border-bottom-color:#FFF;}

  .calendar .box.old > div{min-height:20px;background-color:#EEE;background-image:none;height:40px;}
  .calendar .box.old > div .icon{display:none;height: 15px;}
  .calendar .table > div.timeslot.mobile{position: absolute;z-index: 2;left: 8px;padding-top: 8px;width:60px;}
  .calendar .monthlabel{text-align: center;margin-top:8px;}
  #mobilekey{text-align: center;}

  #bookingAdder #d-climbers{padding:30px 15px 15px 15px}
  #checkoutbar{width:100%;max-width:100%;position: relative;}
  #checkoutbar table.pw100{width:93%;}

  #bookingAdder.popUP{top:0 !important;left:0 !important;right:0 !important;max-width: 100% !important;}
  #bookingAdder #d-info{width: calc(100% - 30px);max-width:100%;height:auto;padding:15px 15px 20px}
  #terms label{word-wrap: break-word;}
  .extraperson {border-bottom:solid 1px #EEE;padding-bottom:5px;margin-bottom:5px;}
  .overpopup{padding:20px 15px;;}

  #extrasouter{width:100% !important;margin:0}
  .extraslist .extra .inner{padding:0 5px}
  #timer{display:block;}
  .mauto{width:100%;text-align: center;}
  .overpopup{width:calc(100% - 30px);font-size:15px;}
  .overpopup h2{font-size:21px;}

  #paymentdetails{width:95%;}
  #paymentbookingdetails table{width:100%;}
  #paymentform-inner{padding:0;}

  #terms label a{display:block;margin-left:24px;margin-top:8px;}

  .dayform .slots .timeslot{height:auto;width:100%;padding-bottom:5px;}
  .dayform .slots{border-bottom: solid 1px #EEE;position:relative;}
  .dayform .slots .timeslot .spaces{position:absolute;right:5px;top:-3px;}
  .selectedDay .d-header h3{max-width:80%;margin:auto;}

}
@media only screen and (max-width: 500px) {
  .popUP{padding:0;}
}
@media only screen and (max-width: 400px) {
    body { margin: 1px; }

    .box > div { min-height: 75px; padding: 3px 2px;background-size: 24px 24px; }
    .calendar .timeslot > div > div { margin: 1px 1px 2px 0; }

}

.autocomplete-suggestions { text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: rgba(255,255,255,0.95); box-shadow: -1px 1px 3px rgba(0,0,0,.1); /* core styles should not be changed */ position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box; }
.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
.autocomplete-suggestion i { color: #AAA; font-size: 11px; }
.autocomplete-suggestion.selected { background: #09F; color: #FFF; }
.autocomplete-suggestion.selected i { color: #FFF; }