/* Base */
body { background: #fff; margin:0 auto; overflow-x: hidden; }
form { font-family: Barlow; font-size: 0.85em; color: #444; margin:0 auto; margin-top:0px; margin-bottom:0px; width:100%; padding: 0px; line-height:1.4em; overflow:hidden; }
h1 { font-family: Barlow; font-size: 2.0em; letter-spacing:0.01em; color: #444; font-weight: 400; margin-top:0px; margin-bottom:30px; text-transform: none; line-height:1.3em; }
h2 { font-family: Barlow; font-size: 1.6em; letter-spacing:0.01em; color: #444; font-weight: 400; margin-top:0px; margin-bottom:30px; text-transform: none; line-height:1.3em; }
h3 { font-family: Barlow; font-size: 1.3em; color: #888; font-weight: 400; margin-top:0px; margin-bottom:16px; line-height:1.4em;  }
h4 { font-family: Barlow; font-size: 1.2em; color: #888; font-weight: 300; margin-top:0px; margin-bottom:16px; line-height:1.4em;  }
a:link, a:active, a:visited { text-decoration:underline; border:none; color: #444; transition:0.25s; }
a:link:hover, a:active:hover, a:visited:hover { color: #2CA33B; transition:0.25s; }
.input { border: solid 1px #ddd; border-radius:2px; padding: 5px 5px 7px 5px; font-family:Barlow; font-size:1.0em; color: #444; background: #fff; transition:0.25s; }
.textinput { border: solid 1px #ddd; border-radius:2px; padding: 5px 5px 7px 5px; font-family:Barlow; font-size:1.0em; color: #444; background: #fff; transition:0.25s; }
.inputwarning { border: solid 1px #ffa500; border-radius:2px; padding: 5px 5px 7px 5px; font-family:Barlow; font-size:1.0em; color: #444; background: #FFF1DB; transition:0.25s; }
.input[type="submit"]:hover { background: #eee; cursor: pointer; }
.input:disabled { border: solid 1px #ddd; border-radius:2px; padding: 6px 5px; font-family:Barlow; font-size:1.0em; color: #444; opacity:0.5; }
.input:disabled:hover { cursor: default; background: #fff; color: #444; }
.input[type="text"]:read-only { background: #f8f8f8; }
.textinput { border: solid 1px #ddd; border-radius:2px; padding: 6px 5px; font-family:Barlow; font-size:1.0em; color: #444; }
.input:focus, .textinput:focus { outline:none; }
img:focus { outline:none; }
input { font-family:Barlow; font-size:1.0em; }
.validationerror { color: #ff0000; padding-left:10px; font-weight:600; }
.info { font-style:none; color: #888; font-size:0.9em; padding-top:3px; }
a { transition:0.25s; }
.clear { clear:both; height:20px; }
.warningtext { font-style:italic; }

:disabled { color: #444;  }
.separator { height:0px; padding-bottom:4px; margin-bottom:4px; border-bottom: solid 1px #ccc; margin-left:-10px; width:calc(100% + 20px); }

/* Header */
.header { margin-bottom:0px; text-align:left; height:150px; width:100%; background: #1EA4D9; text-align:center; }
.header .logo { height:120px; padding:15px; }
.header .logo img { height:100%; }

/* Customer */
.customer { background: #444; padding: 20px 20px; width:calc(100% - 40px); color: #fff; font-size:1.2em; text-align:left; }
.customer a:link, .customer a:active, .customer a:visited { color: #fff; }
.customer a:link:hover, .customer a:active:hover, .customer a:visited:hover { color: #ffff00; }

/* Days */
.day { background: #666; color: #fff; padding: 5px; margin-right:1px; margin-bottom:1px; display:inline-block; vertical-align:middle; line-height:1em; }
.noday { background: #666; color: #fff; padding: 5px; margin-right:1px; margin-bottom:1px; display:inline-block; vertical-align:middle; opacity:0.25; line-height:1em; }
.day:hover { cursor:pointer; }

/* Menu */
.menu { width:200px; background: #f8f8f8; display:inline-block; vertical-align:top; border-right: solid 1px #ccc; min-height:1000px; font-size:1.2em;  }
.menu .menuitem {  border-bottom: solid 1px #ccc; transition:0.25s; }
.menu .menuitem:hover { background: #ddd; cursor: pointer; }
.menu .menuitem a:link, .menu .menuitem a:active, .menu .menuitem a:visited { text-decoration:none; display:block; padding:12px 20px 14px 20px; }
.menu .menuitemhighlight {  border-bottom: solid 1px #ccc; transition:0.25s; background: #E8EF23; }
.menu .menuitemhighlight:hover { background: #D2D820; cursor: pointer; }
.menu .menuitemhighlight a:link, .menu .menuitemhighlight a:active, .menu .menuitemhighlight a:visited { text-decoration:none; display:block; padding:12px 20px 14px 20px; }

/* Mobile Menu */
.mobilemenuicon { position: absolute; top:10px; right:10px; display:block; width:40px; transition:0.25s; opacity:0.75; }
.mobilemenuicon:hover { cursor:pointer; opacity:1; }
.mobilemenuicon img { width:100%; }

/* Main */
.main { width:calc(100% - 258px); padding:40px 20px; margin: 0 auto; text-align:center; display:inline-block; vertical-align:top;  }
.mainlogin { width:calc(100% - 40px); padding:40px 20px; margin: 0 auto; text-align:center; display:inline-block; vertical-align:top;  }

/* Buttons */
.button { padding: 6px 10px 8px 10px; border: solid 1px #ccc; border-radius:3px; color: #666; background: #f8f8f8; transition:0.25s; margin:3px; }
.button:hover { background: #666; cursor: pointer; color: #fff; border: solid 1px #444;}
.button:disabled { opacity:0.5; }
.button:disabled:hover {  background: #f8f8f8; cursor:default; color: #666; border: solid 1px #ccc; }

.buttonhighlight { padding: 8px 20px 10px 20px; border: solid 0px #fff; border-radius:3px; color: #666; background: #00CCA7; color: #fff; transition:0.25s; margin:3px; font-size:1.4em; }
.buttonhighlight:hover { cursor:pointer; background: #00B291; }

.tooltip { position: absolute; background: #1EA4D9; color: #fff; line-height:1.3em; padding:10px 15px;; border: solid 1px #fff; width:auto; max-width:200px; height:auto; font-size:0.9em; }

/* Colours */
.red { background: #dd0000; color: #fff; }
.amber { background: #ffa500; color: #fff; }
.green { background:#58D332; color: #fff; }
.grey { background: #aaa; color: #fff; }
.darkgrey { background: #444; }
.lightred { background: #FFAEAD; color: #222;}
.lightamber { background: #FFD896; color: #222;}
.lightgreen { background:#C3F2B3; color: #222; }
.lightgrey { background: #eee; color: #222; }
.verylightred { background: #FFDBDB; color: #222;}
.verylightamber { background: #FFF3E2; color: #222;}
.verylightgreen { background:#F4FFEF; color: #222; }
.verylightgrey { background: #f8f8f8; color: #222; }
.light { color: #888; font-size:0.9em; }

.balancedebit { background: #FFF3E2; padding:20px; margin-bottom:20px; border: solid 1px #ccc; border-radius: 5px;  box-shadow: 1px 1px 9px #ddd; line-height:1.5em; font-size:1.2em; display:inline-block; }
.balancecredit { background: #F4FFEF; padding:20px; margin-bottom:20px;; border: solid 1px #ccc; border-radius: 5px;  box-shadow: 1px 1px 9px #ddd; line-height:1.5em; font-size:1.2em; display:inline-block; }

/* Filters */
.box { display: inline-block; margin-right:10px; vertical-align:middle }
.boxgap { display: inline-block; margin-right:30px; vertical-align:middle; }
.clear { clear:both; height:20px; }
.clear0 { clear:both; height:0px; }
.cleardeep { clear:both; height:50px; }
.infobox { background: #f8f8f8; padding:20px; margin-bottom:30px; width:100%; max-width:640px; font-size:1.2em; }

/* Login/Register */
.login { padding: 20px; background: #C7F83C; border: solid 0px #fff; border-radius:10px; width:calc(100% - 40px); max-width:900px;text-align:left; margin:0 auto; margin-bottom:50px; box-shadow:  1px 1px 9px #ddd; }
.register { padding: 20px; background: #FFFE37; border: solid 0px #fff; border-radius:10px; width:calc(100% - 40px); max-width:900px; text-align:left;  margin:0 auto;margin-bottom:50px; box-shadow:  1px 1px 9px #ddd; }
.item { display:inline-block; vertical-align:middle; margin-bottom:3px; width:120px; margin-right:10px; }
.item2 { display:inline-block; vertical-align:top; margin:3px 0px; width:170px; margin-right:10px; }
.login .item { width:120px; }
.login .note, .register .note { background:none; padding:0px; }
.submit { margin: 20px 0px 10px 0px; }
.submit .button { font-size:1.4em; padding: 6px 30px 10px 30px; background: #666; color: #fff; border: solid 0px #fff; border-radius:5px; transition:0.25s; margin-right:20px; margin-bottom:20px; }
.submit .button:hover { cursor: pointer; background: #222; }
.submit .button2 { font-size:1.4em; padding: 6px 30px 10px 30px; background: #666; color: #fff; border: solid 0px #fff; border-radius:5px; transition:0.25s; margin-right:20px; opacity:0.4; margin-bottom:20px; }
.submit .button2:hover { cursor: pointer; background: #222; }
.value { display:inline-block; vertical-align:middle; margin-bottom:3px; margin-right:0px; width:calc(100% - 190px);  }
.value .input { padding:4px 5px; border: solid 1px #888; border-radius:3px; font-size:1.2em; box-shadow: 2px 2px rgba(0 0 0 / 0.06); max-width:calc(100% - 15px); margin-right:5px;  }
.value .inputwarning { padding:4px 5px; border: solid 1px #ff0000; border-radius:3px; font-size:1.2em; box-shadow: 2px 2px rgba(0 0 0 / 0.06); }
.note { margin:0px 0px 20px 0px; padding:20px; background: #F5EE31; display:inline-block; font-size:1.2em; border: solid 0px #fff; border-radius:6px; line-height:1.4em; }
.clear { clear:both; height:10px; }
.clearline{ clear:both; height:0px; padding-bottom:10px; margin-bottom:10px; border-bottom: solid 1px #ddd; }
.cleardeep { clear:both; height:30px; }
.summary { background: #f8f8f8; padding:20px; margin:30px 0px; max-width:500px; }
.summary .item { width:100px; color: #888; }
.summary .button { font-size:1.2em; }
.reset { background: url(/images/base/fade.png); padding:15px 20px; margin:0px 0px 20px -20px; font-size:1.1em; width:100%; line-height:1.5em; }

/* Customer Details */
.mydetails { border: solid 0px #fff; border-radius:10px; width: 100%;; margin-right:0px; max-width:1200px; display:inline-block; margin-bottom:40px; vertical-align:top; text-align:left; }
.mychildren { border: solid 0px #fff; border-radius:10px; width: 100%;; margin-right:0px; max-width:1200px; display:inline-block; margin-bottom:40px; vertical-align:top; text-align:left;  }
.mybookings { border: solid 0px #fff; border-radius:10px; width: 100%;; margin-right:0px; max-width:1200px; display:inline-block; margin-bottom:40px; vertical-align:top; text-align:left; }
.myevents { border: solid 0px #fff; border-radius:10px; width: 100%;; margin-right:0px; max-width:1200px; display:inline-block; margin-bottom:40px; vertical-align:top; text-align:left; }
.myorders { border: solid 0px #fff; border-radius:10px; width: 100%;; margin-right:0px; max-width:1200px; display:inline-block; margin-bottom:40px; vertical-align:top; text-align:left;  }
.mywallet { border: solid 0px #fff; border-radius:10px; width: 100%;; margin-right:0px; max-width:1200px; display:inline-block; margin-bottom:40px; vertical-align:top; text-align:left; }
.myschedule { border: solid 0px #fff; border-radius:10px; width:100%; margin-right:0px; max-width:1200px; display:inline-block; margin-bottom:40px; vertical-align:top; text-align:left; }

/* Messages */
.messages .message { border-top: solid 1px #ccc; padding:15px 20px 15px 30px; width:calc(100% - 52px); transition:0.25s; background: #fff; position: relative; margin-bottom:0px; z-index:20;  position:relative; line-height:1.8em; }
.messages .message:hover { filter:brightness(0.98); }
.messages h3 { color: #222; margin-bottom:10px; }
.messages .date { color: #888; font-size:0.9em; margin-bottom:0px; }
.messages .status { position: absolute; left:0px; top:0px; width:10px; height:100%; background:#eee; z-index:0; border-top-left: solid 0px #fff;}
.messages .statusgreen { position: absolute; left:0px; top:0px; width:10px; height:100%; background:#58D332; z-index:0; border-top-left: solid 0px #fff;}
.messages .statusamber { position: absolute; left:0px; top:0px; width:10px; height:100%; background:#ffa500; z-index:0; border-top-left: solid 0px #fff;}
.messages .statusacknowledged { position: absolute; left:0px; top:0px; width:10px; height:100%; background:#58D332; z-index:0; border: solid 0px #fff;}
.messages .statusunacknowledged { position: absolute; left:0px; top:0px; width:10px; height:100%; background:#ffa500; z-index:0;border: solid 0px #fff;  }
.messages .acknowledge { margin-top:15px; margin-left:-3px; }
.messages .acknowledge .button { font-size:1.1em; padding: 7px 20px 10px 20px; }
.messages .icon { position: absolute; right:10px; top:10px; width:40px;  }
.messages .icon img { width:100%;}
.messages .amend { margin-top:15px; margin-left:-2px; font-size:1.1em; position: absolute; right:0px; bottom:10px; }
.messages .amend .button { margin-right:10px; padding: 7px 16px 9px 16px; }
.messages .buttons { margin-top:10px; margin-left:-5px; font-size:1.2em; }
.messages .whatsapp { background: #444; margin:10px 0px; padding:5px 15px 7px 15px; color: #fff; border: solid 0px #fff; border-radius:3px; transition:0.25s; display:inline-block; margin-right:10px; line-height:1.3em; }
.messages .nowhatsapp { background: #444; margin:10px 0px; padding:5px 15px 7px 15px; color: #fff; border: solid 0px #fff; border-radius:3px; transition:0.25s; opacity:0.5; display:inline-block; margin-right:10px; line-height:1.3em; }
.messages .whatsapp:hover, .message .nowhatsapp:hover { background: #222; cursor: pointer; }
.messages .haf { color: #fff; background: #888; padding:3px 10px 6px 10px; font-size:0.9em; border: solid 0px #fff; border-radius:3px; display:inline-block; margin-top:6px; }

/* Wallet */
.mywallet .zero { margin:10px 0px; background: #f8f8f8; padding:20px; font-size:1.2em; display:inline-block; border: solid 0px #fff; border-radius:5px; }
.mywallet .debit { margin:10px 0px; background: #FFF3E2; padding:20px; font-size:1.2em; display:inline-block; border: solid 0px #fff; border-radius:5px; }
.mywallet .credit { margin:10px 0px; background: #F4FFEF; padding:20px; font-size:1.2em; display:inline-block; border: solid 0px #fff; border-radius:5px; }

/* Captions */
.captions { width:calc(100% + 30px); }
.caption { background: #f8f8f8; padding: 20px; border: solid 1px #ddd; border-radius:10px; width:258px; margin-right: 30px; margin-bottom:30px; height:220px; display:inline-block; vertical-align:top; position: relative; overflow:hidden; box-shadow:  1px 1px 9px #eee;}
.caption .female { background: #FFE5FA; position: absolute; top:0px; left:0px; width:100%; height:100%; z-index:0; pointer-events:none; }
.caption .male { background:#EAF3FF; position: absolute; top:0px; left:0px; width:100%; height:100%; z-index:0; pointer-events:none;  }
.caption .unconfirmed { background: #FFF3E2; position: absolute; top:0px; left:0px; width:100%; height:100%; z-index:0; pointer-events:none; }
.caption .confirmed { background: #F4FFEF; position: absolute; top:0px; left:0px; width:100%; height:100%; z-index:0; pointer-events:none; }
.caption .completed { background: #EAF3FF; position: absolute; top:0px; left:0px; width:100%; height:100%; z-index:0; pointer-events:none; }
.caption .cancelled { background: #eee; position: absolute; top:0px; left:0px; width:100%; height:100%; z-index:0; pointer-events:none; }
.caption .departed { background: #DDEBFF; position: absolute; top:0px; left:0px; width:100%; height:100%; z-index:0; pointer-events:none; }
.caption h3 { margin-bottom:10px; z-index:10; position: relative; color: #222; }
.caption .lineitembold { margin-bottom:6px; z-index:10; position: relative; font-size:1.2em; font-weight:600; }
.caption .lineitemsemibold { margin-bottom:6px; z-index:10; position: relative; font-size:1.2em; font-weight:500; }
.caption .lineitem { margin-bottom:3px; z-index:10; position: relative;}
.caption .lineitemhighlight { margin-bottom:3px; z-index:10; position: relative; margin-top:10px; font-size:1.1em;}
.caption .left { position: absolute; bottom:10px; left:10px; }
.caption .right { position: absolute; bottom:10px; right:10px; }
.caption .button { font-size:1.0em; padding: 6px 15px 8px 15px; color: #444; background:none; border: solid 1px #aaa; border-radius:5px; transition:0.25s; }
.caption .button:hover { cursor: pointer; background: #444; color: #fff; border: solid 1px #444;  }
.caption .button:disabled { opacity:0.25; }
.caption .button:disabled:hover { cursor: default; background: none; color: #444; }
.caption .topright { position: absolute; top:10px; right:10px; }
.caption .topright .permission { width:12px; height:12px; background: #444; border: solid 0px #fff; border-radius:50%; display:inline-block; margin-left:4px; }
.caption .attendance { position:absolute; left:20px; bottom:20px; width:calc(100% - 150px); }
.caption .background { position: absolute; top:0px; left:0px; width:100%; height:100%; border: solid 0px #fff; border-radius:10px; pointer-events:none; z-index:0;  }
.caption .background img { width:100%; height:100%; opacity:0.1; }
.caption .backgroundoverlay { position: absolute; top:0px; left:0px; width:100%; height:100%; border: solid 0px #fff; border-radius:10px; pointer-events:none; background:none; z-index:1; background:url(/images/base/gradient.png) repeat-x; }

/* Attendance */
.attendance { width:100%; height:20px; overflow:hidden; z-index:10; position: relative; margin-top:12px; }
.attendance .notbooked { display:inline-block; width:12px; border-right: solid 1px #fff; border-bottom: solid 1px #fff; transition:0.25s; height:20px; vertical-align:middle; background:#eee; transition:0.25s; }
.attendance .booked { display:inline-block; width:12px; border-right: solid 1px #fff; border-bottom: solid 1px #fff; transition:0.25s; height:20px; vertical-align:middle; background:#5BBC23; transition:0.25s; }
.attendance .unpaid { display:inline-block; width:12px; border-right: solid 1px #fff; border-bottom: solid 1px #fff; transition:0.25s; height:20px; vertical-align:middle; background:#ffa500; transition:0.25s; }
.attendance .arrived { display:inline-block; width:12px; border-right: solid 1px #fff; border-bottom: solid 1px #fff; transition:0.25s; height:20px; vertical-align:middle; background:#70D6FF; transition:0.25s;}
.attendance .departed { display:inline-block; width:12px; border-right: solid 1px #fff; border-bottom: solid 1px #fff; transition:0.25s; height:20px; vertical-align:middle; background:#3BA4CE; transition:0.25s; }
.attendance .cancelled { display:inline-block; width:12px; border-right: solid 1px #fff; border-bottom: solid 1px #fff; transition:0.25s; height:20px; vertical-align:middle; background:#aaa; transition:0.25s; }
.attendance .notbooked:hover, .attendance .booked:hover, .attendance .unpaid:hover, .attendance .arrived:hover, .attendance .departed:hover, .attendance .cancelled:hover { cursor: pointer; filter:brightness(0.95); }

/* Schedule */
.myschedule .scheduleitem { width:100%; padding-top:20px; margin-top:20px; border-top: solid 1px #eee; }
.myschedule .scheduleitem h3 { color: #222; margin-bottom:10px;  }
.myschedule .message .activity { font-size:1.2em; margin-bottom:6px; font-weight:400;  }
.myschedule .child { font-size:1.2em; color: #222; font-weight:400; } 
.balance { font-size:1.2em; color: #fff; font-weight:400; margin:20px 0px; background: #ffa500; padding:8px 16px; display:inline-block; border: solid 0px #fff; border-radius:5px; } 
.myschedule .extras { margin-top:10px; }
.myschedule .item { display:inline-block; margin-right:10px; vertical-align:middle; width:auto; }
.myschedule .clear { clear:both; height:20px; }
.myschedule .pages { background: #fff; border: solid 0px #fff; border-radius:5px; padding: 10px 0px; display:inline-block; margin-bottom:20px; color: #000; font-size:1.2em; }
.myschedule .message { font-size:0.9em; }
.myschedule .message h3 { margin-bottom:4px;}

/* Checkbox */
.checkboxlist { background: #f8f8f8; padding:10px; }
.checkboxlist input[type="checkbox"] {  vertical-align:middle; width:1.3em; height:1.3em; margin-right:8px }
.checkboxlist input[type="checkbox"]+label {  vertical-align:middle; }
.checkboxlist input[type="checkbox"]:disabled+label {  vertical-align:bottom; color: #444; }
.checkboxlist table td { padding-right:30px; }

/* Wallet payment */
.walletpayment { border: solid 1px #ccc; padding:20px; border-radius:5px; margin-bottom:30px; box-shadow: 3px 3px 10px #ccc; background:#f8f8f8; }

/* Booking */
.book { display:inline-block; margin-bottom:40px; vertical-align:top; text-align:left; display:inline-block; width:100%; max-width:1600px; position: relative; }
.book td.align-top { vertical-align:top; padding-top:14px; }
.book h4 { padding-bottom:3px; margin-bottom:12px; border-bottom: solid 1px #ccc; margin-top:10px; color: #666; }
.book .selector { padding:14px 20px; border: solid 0px #fff; border-radius:5px; margin-right:20px; margin-bottom:20px; transition:0.25s; color: #fff; background: #aaa; font-size:1.2em; display:inline-block; vertical-align:top; text-align:center; line-height:1.3em; }
.book .selectorselected { padding:14px 20px; border: solid 0px #fff; border-radius:5px; margin-right:20px; margin-bottom:20px; transition:0.25s; color: #fff; background: #666; font-size:1.2em; display:inline-block; vertical-align:top; text-align:center; line-height:1.3em; }
.book .light { font-size:0.75em; color: #fff; }
.book .light2 { font-size:0.9em; color: #888; }
.book .selector:hover { cursor: pointer; background: #888; }
.book .noactivities { background: #f8f8f8; padding:20px; border: solid 0px #fff; border-radius:5px; margin-bottom:20px; font-size:1.2em; display:inline-block; }
.book .item { width:120px; }
.book .items { margin:40px 0px; width:calc(100% + 20px); }
.book .items .club { width:260px; padding:20px; border: solid 0px #fff; border-radius:5px; margin-right:20px; margin-bottom:20px; display:inline-block; vertical-align:top; height:370px; color: #222; background: #f8f8f8; transition:0.25s; position: relative; }
.book .items .club h3 { color: #fff; font-size:1.4em; margin-bottom:8px; margin-top:0px; margin-bottom:16px; background: #444; margin-top:-20px; margin-left:-20px; width:100%; padding:10px 20px; height:65px; font-size:1.3em; text-align:left; line-height:1.2em; }
.book .items .club h4 { color: #222; font-weight:300; margin-top:0px; margin-bottom:12px; }
.book .location { font-size:1.2em; margin-bottom:8px; }
.book .dates { font-weight:300; font-size:1.1em; line-height:1.5em; }
.book .day { background: #fff; color: #666; padding: 5px; margin:8px 1px 5px 0px; display:inline-block; vertical-align:middle; line-height:1em; }
.book .noday { background: #fff; color: #666; padding: 5px; margin:8px 1px 5px 0px; display:inline-block; vertical-align:middle; opacity:0.25; line-height:1em; }
.book .day:hover { cursor:default; }
.book .notbookable { position: absolute; bottom:75px; left:0px; width:100%; text-align:center; padding: 6px 0px 8px 0px; background: #222; color: #fff; font-size:1.0em; }
.book .cost { font-size:1.4em; font-weight:500;  position: absolute; bottom:20px; left:10px; line-height:1.1em; }
.book .cost .sessions { font-size:0.7em; font-weight:300; padding-left:5px;  }
.book .spaces { font-weight:300; font-size:0.75em;}
.book .spaces .monthly { padding-bottom:5px; font-weight:400; }
.book .spaces.full { background: #444; padding:8px 20px 9px 20px; color: #fff; bottom:0px; font-weight:400; left:0px; width:calc(100% - 40px); text-align:center; font-size:1.2em; text-transform:uppercase; transition:0.25s; }
.book .spaces.full .light { color: #eee; transition:0.25s; font-size:0.7em; }
.book .spaces.full:hover { cursor: pointer; background: #000; }
.book .spaces.waitinglist { background: #00BC06; padding:8px 20px 9px 20px; color: #fff; bottom:0px; font-weight:400; left:0px; width:calc(100% - 40px); text-align:center; font-size:1.2em; text-transform:uppercase; transition:0.25s; }
.book .spaces.waitinglist .light { color: #eee; transition:0.25s; font-size:0.7em; }
.book .add { position: absolute; bottom:20px; right:10px; transition:0.25s; padding: 7px 20px 9px 20px; border: solid 0px #fff; border-radius:3px; background: #00CCA7; color: #fff; font-size:1.4em; }
.book .add:hover {  cursor: pointer; background:#00B291; }
.book .options {  margin-top:10px; max-height:54px; overflow:hidden; font-size:1.0em; color: #222; line-height:1.3em; margin-left:-20px; padding:7px 20px 6px 20px; background: #E8EF23; width:100%; text-align:center; }
.book .options .option { margin-left:5px; width:24px; opacity:0.5; transition:0.25s; }
.book .options .option:hover { cursor: pointer; opacity:1; }
.book .intro { margin-bottom:30px; }
.book .confirm { margin:50px 0px; }
.book .day { background: #666; color: #fff; }
.book .noday { background: #ddd; color: #555; opacity:0.5; }
.book .confirm .button { font-size:1.4em; padding: 8px 30px 10px 30px; background: #00CCA7; color: #fff; border: solid 0px #fff; border-radius:5px; transition:0.25s; margin-right:20px; }
.book .confirm .button:hover { cursor: pointer; background: #00B291; }
.book .button { font-size:0.9em; padding: 6px 16px 7px 16px; background: #f8f8f8; color: #666; border: solid 1px #aaa; border-radius:5px; transition:0.25s; margin-right:20px; }
.book .button:hover { cursor: pointer; background: #666;  border: solid 1px #666; color: #fff; }
.book .promotions { background: #f8f8f8; padding:20px; width:500px; max-width:calc(100% - 40px); margin-bottom:20px; }
.book .promotions .input { font-size: 1.4em; padding: 4px 10px; border: solid 1px #ccc; border-radius:3px; display:inline-block; vertical-align:top; }
.book .promotions .button { margin:0px; font-size:1.2em; margin-left:10px; display:inline-block; vertical-align:top; padding:5px 20px 7px 20px; }
.book .imagebutton input { filter:grayscale(1); opacity:0.2; transition:0.25s; }
.book .imagebutton input:hover { filter:grayscale(0); opacity:1; cursor: pointer; }
.book .ponchopay { text-align:right; margin-top:20px; }
.book .ponchopay .button { margin-right:0px; font-size:1.4em; padding:8px 30px 10px 30px; background: #00CCA7; color: #fff; border: solid 0px #fff; border-radius:5px; }
.book .ponchopay .button:hover { cursor:pointer; background: #00B291; }
.book .previous { margin:30px 0px; }
.book .previous .button { margin-right:0px; font-size:1.3em; padding:8px 30px 10px 30px; background: #00CCA7; border: solid 0px #fff; border-radius:5px; color: #fff; transition:0.25s; }
.book .previous .button:hover { cursor: pointer; background: #00B291; }
.book .previous .backbutton { margin-right:0px; font-size:1.3em; padding:8px 30px 10px 30px; background: #EFEFEF; border: solid 0px #fff; border-radius:5px; color: #888; transition:0.25s; }
.book .previous .backbutton:hover { cursor: pointer; background: #444; color: #eee; }
.book .confirmed { margin:30px 0px; background: #E9FFE8; padding: 20px; max-width: 700px; line-height:1.5em; font-size:1.2em; border: solid 0px #fff; border-radius:5px; }
.book .info { margin-bottom:3px; }
.book .tfc { margin-top:0px;  }
.book .tfc .button { font-size:1.1em; border-radius:3px; padding: 5px 15px 7px 15px; }
.book .tfc .credit { border: solid 0px #ccc; border-radius:0px; padding:20px; background: #DBFFDB; border-top: solid 1px #ccc; }
.book .tfc .haf { border: solid 0px #ccc; border-radius:0px; padding:20px; background: #E8EF23; border-top: solid 1px #B7BC1C; }
.book .tfc .outline { border: solid 0px #ccc; border-radius:0px; padding:10px; background: #DDFF7A; border-top: solid 1px #B7BC1C; }
.book .tfc .outline .button { margin-right:0px; font-size:1.3em; padding:8px 30px 10px 30px; background: #00CCA7; border: solid 0px #fff; border-radius:5px; color: #fff; transition:0.25s; }
.book .tfc .outline .button:hover { cursor: pointer; background: #00B291; }
.book h2 { margin-bottom:10px; }

.table-container {
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.table-container.collapsed {
    max-height: 600px; /* collapsed limit */
    margin-top:20px;
}

.table-container.expanded {
    max-height: 3000px; /* large enough for any content */
}

.expand-toggle {
    cursor: pointer;
    color: #222;
    font-size: 1.0em;
    margin: 20px 0px;
    user-select: none;
    border: solid 1px #ccc;
    padding:6px 10px;
    border-radius:5px;
    background: #f8f8f8;
    display:inline-block;
    width:100px;
    text-align:center;
    transition:0.25s;
}

 .expand-toggle:hover { cursor:pointer; background: #eee; }

.book .monthly-payments { margin:30px 0px; }
.book .monthly-payments .info { margin-bottom:20px; font-size:1.0em; }
.book .monthly-payments td { height:36px; padding:5px 10px;  border-collapse:collapse; border: solid 1px #ccc; min-width:120px; }
.book .monthly-payments table { border-collapse:collapse; border: solid 1px #ccc; }
.book .monthly-payments .cell-highlight { background: #f8f8f8; }
.book .monthly-payments .row-header { background: #444; color: #fff; font-size:1.1em; }
.book .monthly-payments .button { margin:20px 0px; background: #00CCA7; border: solid 0px #fff;  border-radius: 4px; padding:8px 20px 10px 20px;; color: #fff; transition:0.25; font-size:1.3em; transition:0.25s; }
.book .monthly-payments .button:hover { background: #444; color: #fff; cursor:pointer; }

/* Extras */
.book .extras { margin: 20px 0px; width:calc(100% + 20px); }
.book .extra2 { display:inline-block; width:calc(33% - 70px); max-width:360px; margin-right:20px; margin-bottom:10px; margin-top:10px; vertical-align:top;  color: #444; padding:20px; font-size:1.1em; position: relative; border: solid 1px #ddd; border-radius:6px; box-shadow: 3px 3px 10px #ccc; line-height:1.5em; }
.book .extra2 h3 { font-size:1.3em; color: #fff; font-weight:400; background:#444; margin-left:-20px; margin-top:-20px; margin-bottom:10px; width:100%; padding:8px 20px 10px 20px; border: solid 0px #fff; border-top-left-radius:5px; border-top-right-radius:5px; }
.book .extra2 .desc { max-height:140px; overflow:hidden; font-weight:300; margin-bottom:40px; }
.book .extra2 .apply { position: absolute; bottom:15px; right:0px; }
.book .extra2 .apply .button { background: #444; border: solid 0px #fff; color: #fff; font-size:1.0em; padding:7px 16px 10px 16px; transition:0.25s; }
.book .extra2 .apply .button:hover { background: #222; }

/* Shop */
.shop { display:inline-block; margin-bottom:40px; vertical-align:top; text-align:left; display:inline-block; width:100%; max-width:1600px; position: relative; }
.shop .products { margin-top:30px; }
.shop .basket { max-width:1400px; }
.shop .box { display:inline-block; vertical-align:middle; margin-right:10px; font-size:1.2em; }
.shop .clear { margin-bottom:30px; }
.shop .continue { margin: 30px 0px; font-size:1.4em; }
.shop .continue .button { transition:0.25s; padding: 7px 20px 9px 20px; border: solid 0px #fff; border-radius:3px; background: #00CCA7; color: #fff; font-size:1.0em; }
.shop .continue .button:hover { cursor: pointer; background:#00B291; }

/* Products */
.products { margin: 30px 0px; position: relative; width:100%; }
.products h2 { font-size:2.2em; padding-top:50px; }
.products .continue { position: relative; margin:20px 0px;}
.products .continue .button { margin-right:0px; font-size:1.4em; }
.products .product { display:inline-block; width:320px; padding:0px; margin-right:40px; margin-bottom:40px; vertical-align:top; color: #444; font-size:1.1em; position: relative; border: solid 0px #fff; border-radius:10px;  position:relative; box-shadow:  1px 1px 9px #eee; }
.products .product .pic { width:240px; height:240px; background: #f8f8f8; padding:10px 40px; position:relative; text-align:center; overflow:hidden; }
.products .product .pic img { width:100%; position:absolute; left:0px; top:0px; }
.products .product .photoselector { position: absolute; left:0px; width:100%; bottom:4px; text-align:center; height:20px; z-index:5;  }
.products .product .photoselectoricon { display:inline-block; margin:2px; width:14px; height:14px; background: #ddd; vertical-align:middle; border: solid 1px #fff; border-radius:50%; transition:0.25s; }
.products .product .photoselectoricon:hover { cursor:pointer; background: #ccc; }
.products .product .photoselectoricon.selected { background: #888; }
.products .product .details {  height:280px; color:#666; text-align:center; border: solid 1px #eee; padding:20px; position:relative; }
.products .product .details .desc { height:190px; overflow:hidden; }
.products .product .details .desc h3 { text-align:center; }
.products .product .details .price { position: absolute; left:20px; bottom:20px; font-size:2.0em; text-align:left; }
.products .product .details .price .discount { padding: 5px 12px 7px 12px; background: #444; color: #fff; font-size:0.6em; margin-top:14px; text-align:center; }
.products .product .details .addtobasket { position: absolute; right:0px; bottom:0px; transition:0.25s; }
.products .product .details .add { position: absolute; bottom:10px; right:10px; transition:0.25s; padding: 7px 20px 9px 20px; border: solid 0px #fff; border-radius:3px; background: #00CCA7; color: #fff; font-size:1.4em; }
.products .product .details .add:hover { cursor: pointer; background:#00B291; }
.popup .productoptions h3 { margin-bottom:30px;}
.productoptions .title { margin-bottom:5px; }
.productoptions .clear { margin-bottom:10px; padding-bottom:5px; border-bottom:solid 1px #ddd; clear:both; }

/* Payment */
.paymentpanel { margin: 30px 0px; position: relative; width:100%;  }
.paymentpanel .continue { position: relative; margin-bottom:30px; }
.paymentpanel .continue .button { margin-right:0px; font-size:1.4em; }
.paymentpanel .stripe { margin-left:-10px; margin-top:-20px; }

/* Popup */
.popupbg { background: url(/images/base/popupbg.png); position: fixed; top:0px; left:0px; width:100%; height:100%; z-index:100; }
.popup { position: absolute; left:50%; top:50%; margin-left:-320px; margin-top:-320px; padding:20px; width:600px; height:600px; background: #f8f8f8; border: solid 0px #fff; border-radius:10px; }
.popup h2 { margin-top:-20px; margin-left:-20px; padding:10px 20px 12px 20px; background: #1EA4D9; color: #fff; font-size:1.6em; text-align:center; border: solid 0px #fff; border-top-left-radius:10px; border-top-right-radius:10px; width:100%; }
.popup h3 { text-align:center; color: #222; font-size:1.3em; margin-bottom:6px; }
.popup h4 { text-align:center; color: #888; font-size:1.3em; margin-bottom:20px; }
.popup .checkboxlist { padding: 10px 5px; background: #eee; max-height:250px; overflow-y:auto; overflow-x:hidden; }
.popup .checkboxlist input { width: 1.4em; height:1.4em; vertical-align:middle; margin-left:8px; }
.popup .checkboxlist label { padding-left:5px; vertical-align:middle; }
.popup .dates { margin-top:20px; }
.popup .dates .checkboxlist { padding:0px; }
.popup .dates h3 { font-size:1.3em;  background: #666; padding:10px 16px; color: #fff; margin-bottom:0px; }
.popup .dates table { width:calc(100% + 20px); margin-left:-10px; overflow-x:hidden; z-index:0; position: relative; }
.popup .dates td { border-bottom: solid 1px #aaa; padding:8px 10px; }
.popup .total { background: #666; padding:10px 16px; color: #fff; margin-top:-2px; position: relative; z-index:10; height:auto; line-height:1.4em; }
.popup .total .number { display:inline-block; width:calc(100% - 260px); vertical-align: middle; }
.popup .total .price { display:inline-block; text-align:right; width:250px; vertical-align:middle; }
.popup .buttons { bottom:20px; left:20px; width:calc(100% - 40px); position: absolute; font-size:1.2em; }
.popup .buttons .close { position: absolute; left:0px; bottom:0px; opacity:0.75; }
.popup .buttons .confirm { position: absolute; right:0px; bottom:0px; margin:0px; }
.popup .buttons .input { padding:8px 20px 12px 20px; font-size:1.2em; background: #ddd; border: solid 0px #fff; border-radius:3px; color: #222; transition:0.25s; }
.popup .buttons .confirm .input { background: #00CCA7; color: #fff;transition:0.25s; }
.popup .buttons .confirm .input:hover { background: #00B291; color:#fff; }
.popup .buttons .input:hover { cursor: pointer; background: #444; color: #eee; }
.popup .buttons .input:disabled { opacity:0.2; filter:grayscale(1);}
.popup .buttons .input:disabled:hover { background: #00CCA7; cursor:default; }
.popup .section { margin-top:20px; line-height:1.7em; }

.shoppingbasket { position: fixed; top:10px; right:10px; padding: 20px; padding-bottom:50px; background: #f8f8f8; border: solid 0px #fff; border-radius:0px; width:360px; font-weight:300; z-index:100;  box-shadow:  0px 0px 20px 0px #222; }
.shoppingbasket h3 { margin-top:0px;  color: #222; }
.shoppingbasket .totalcost { font-weight:400; margin:12px 0px; font-size:1.2em; }
.shoppingbasket .basketitem { padding: 10px 20px; border-bottom:solid 1px #ccc; line-height:1.0em; transition:0.25s; margin-left:-20px; width:100%; position: relative; }
.shoppingbasket .basketitem:hover { background: #eee; }
.shoppingbasket .basketpromotion { padding: 10px 20px; border-bottom:solid 1px #ccc; line-height:1.0em; transition:0.25s; margin-left:-20px; width:100%; position: relative; background: #FFFCBA; }
.shoppingbasket .basketpromotion:hover { background: #F4F1B2; }
.shoppingbasket .basketitem .remove { position: absolute; right:20px; top:50%; margin-top:-12px; filter:grayscale(1); opacity:0.2; transition:0.25s; }
.shoppingbasket .basketitem .remove:hover { filter:grayscale(0); opacity:1; cursor:pointer; }
.shoppingbasket .clearbasket { position: absolute; bottom:20px; left:20px; }
.shoppingbasket .checkout { position: absolute; bottom:12px; right:20px; }
.shoppingbasket .checkout .input { padding: 8px 20px 10px 20px; border: solid 0px #aaa; border-radius:3px; transition:0.25s; background: #00CCA7; color: #fff; font-size:1.2em; }
.shoppingbasket .checkout .input:hover { background: #00B291}

/* Tables */
.titleheading { height:26px; color: #fff; font-weight:400; font-size:1.3em; background:#555655; border-bottom: solid 1px #666; line-height:1.2em; }
.titleheading td { padding: 10px; }
.titlesubheading {height:26px; color: #444; font-weight:400; font-size:1.3em; background:#f8f8f8; border-bottom: solid 1px #ccc; line-height:1.2em; }
.titlesubheading td { padding: 10px; }
.total { height:46px; color: #222; font-weight:400; font-size:1.3em; background:#eee;  line-height:1.2em; }
.total td { padding: 10px; }
.rowdark {  background: #fff; transition:0.25s; height:46px; }
.rowlight { background: #fff; transition:0.25s; height:46px; }
.rowdark td { padding: 6px 8px; border-bottom: solid 1px #ddd;}
.rowlight td { padding: 6px 8px; border-bottom: solid 1px #ddd; }
.rowdark:hover { background: #fafafa; }
.rowlight:hover { background: #fafafa; }
.rowdarkhighlight {  background: #FFFABA; transition:0.25s; }
.rowlighthighlight { background: #FFFABA; transition:0.25s; }
.rowcredit { background: #DBFFDB; transition:0.25s; }
.rowhaf{ background: #E8EF23; transition:0.25s; }
.rowcredit:hover. .rowhaf:hover { filter:broghtness(0.97); }
.rowcredit td { padding: 6px 8px; border-bottom:solid 1px #ccc; }
.rowhaf td { padding:6px 8px; border-bottom:solid 1px #aaa; }
.rowdarkhighlight td { padding: 6px 8px; border-bottom: solid 1px #CECA98;}
.rowlighthighlight td { padding: 6px 8px; border-bottom: solid 1px #CECA98; }
.rowdarkhighlight:hover { background: #F4F1B2; }
.rowlighthighlight:hover { background: #F4F1B2; }

/* AJAX Calendar */
.calendar .ajax__calendar_container { background: #d9d9d9; z-index:20000; position: absolute; }
.calendar table { background: #fff; padding: 0; font-size: 0.9em; }
.calendar td { padding: 1px; }
.calendar .ajax__calendar_active { background: #018287; color: #fff; }
.calendar .ajax__calendar_other { background: #e9e9e9; color: #333; }
.calendar .ajax__calendar_day { margin: 1px; padding: 0; }
.calendar .ajax__calendar_day:hover { border: 1px solid #018287; margin: 0; }

@media only screen and (max-width: 960px)
{
	/* Left Menu */
	.menu { display:none; width:100%; height:auto; min-height:0px;}
	.mobilemenuicon { display:block;  }
	
	/* Login */
	.login { width: calc(100% - 40px); margin-right:0px; max-width:920px; display:block; margin-bottom:40px; }
	.register { width: calc(100% - 40px); margin-right:0px; max-width:920px; display:block;  }

	/* Main */
	.main { display:block; padding: 20px 10px; height:auto; margin-left:0px; border-left: none; min-height:0px; width:calc(100% - 20px); padding-top:30px; }
	.item { width:100%; margin-bottom:4px; margin-right:0px; }
	.value { width:100%; }
	
	.tableholder { width:100%; overflow-x:auto; }
	.tableholder table { min-width: 800px; }
	
	.messages .amend { margin-top:20px; margin-left:-2px; font-size:1.1em; position: relative; right:0px; bottom:0px; }
}

@media only screen and (max-width: 600px)
{
	.popup { left:10px; margin-left:0px; width:calc(100% - 60px); top:10px; margin-top:0px; height:auto; padding-bottom:100px; }
	.shoppingbasket { width:calc(100% - 20px); max-width:360px; left:50%; margin-left:-200px; }
}