/*
 *   Reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:700;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

button::-moz-focus-inner {border:0; padding:0;}

/*
 *   Styles
 */

:root {
  --brand-blue: #265162;
  --green:#05b533;
  --booking-past:#d1f2ff;
  --booking-past-odd:var(--booking-past);
  --booking-active:#faff62;
  --booking-future:#6fd6ff;
  --booking-future-odd:#4687ad;
  --booking-future-odd:var(--booking-future);
}

* {box-sizing:border-box;}

html,
body {display:flex; flex-direction:column; flex:1; min-height:100%;}

body,
textarea,
select,
button,
input[type="password"],
input[type="date"],
input[type="month"],
input[type="text"] {font-family:'Open Sans', sans-serif; font-size:14px; line-height:1.6em; color:#333;}

body {}

a:link,
a:visited {color:#333;}

p {display:block; margin:0 0 1em 0; text-align:justify;}
p:last-child {margin-bottom:0;}

ul {display:block; margin:0 0 1em 0;}
ul:last-child {margin-bottom:0;}

h1 {font-weight:bold; font-size:24px;}
h2 {margin:0 0 30px 0; font-weight:bold; font-size:20px; color:var(--brand-blue);}

textarea,
select,
button,
input[type="password"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="text"] {padding:3px 8px; background:#fff; border:1px solid rgba( 0,0,0, .1 ); border-radius:3px;}

input[type="number"] {padding:5px 10px; min-width:80px;}

select {padding:5px 8px; font-size:14px; line-height:1em;}

label[data-checkbox] {display:flex; align-items:center; gap:8px;}

button,
a.button {display:inline-flex; align-items:center; gap:6px; padding:10px; background:linear-gradient( to bottom, #fefefe, #eee ); border:1px solid rgba( 0,0,0, .05 ); border-radius:3px; font-size:12px; line-height:1em; text-decoration:none; cursor:pointer;}
button:hover,
a.button:hover {}

button,
a.button {padding:6px 10px; border:1px solid rgba( 0,0,0, .1 ); border-radius:3px; background:var(--brand-blue); color:#fff; outline:none; font-weight:bold; cursor:pointer; text-decoration:none;}
button:hover,
a.button:hover {opacity:.9;}

button i,
a.button i {font-size:80%;}

button.delete,
a.button.delete {background:#f33;}

[v-cloak] {display:none !important;}

.float-left {float:left;}
.float-right {float:right;}

.text-center {text-align:center;}
.text-right {text-align:right;}

.pageresponse {padding:10px 20px; background:#ffc;}

.container {max-width:1100px; margin:0 auto;}

.StripeElement {background-color:white; height:40px; padding:10px 12px; border-radius:4px; border:1px solid transparent; box-shadow:0 1px 3px 0 #e6ebf1; -webkit-transition:box-shadow 150ms ease; transition:box-shadow 150ms ease;}
.StripeElement--focus {box-shadow:0 1px 3px 0 #cfd7df;}
.StripeElement--invalid {border-color:#fa755a;}
.StripeElement--webkit-autofill {background-color:#fefde5 !important;}
.stripe-field .errors {color:#f00; font-size:14px;}


nav {background:var(--brand-blue); font-size:14px;}
nav .container {display:flex; align-items:center;}
nav a:link,
nav a:visited {display:flex; align-items:center; gap:10px; padding:12px 20px; border-top:2px solid rgba( 0,0,0, 0 ); border-bottom:2px solid rgba( 0,0,0, 0 ); color:rgba( 255,255,255, .75 ); text-decoration:none; font-weight:600;}
nav a i {color:rgba( 255,255,255, .5 ); font-size:14px;}
nav a:hover {background:rgba( 255,255,255, .2 ); color:rgba( 255,255,255, .9 );}
nav a.active {background:rgba( 255,255,255, .2 ); border-bottom:2px solid #61a5cd; color:rgba( 255,255,255, .9 );}
nav a.logout {margin-left:auto;}

nav h1 {margin-right:16px; padding:12px 36px 12px 18px; border-right:1px solid rgba( 255,255,255, .1 ); color:white; font-size:18px; line-height:1.4em;}
nav h1 a:link,
nav h1 a:visited {padding:0; border:0; color:white;}
nav h1 a:hover {padding:0; background:none; color:white;}

@media ( max-width:600px ){

  nav .container {flex-wrap:wrap; justify-content:center;}

  nav a:link,
  nav a:visited {padding:12px 14px 24px 14px; border:0; font-size:16px; line-height:1.2em;}
  nav a i {display:none !important;}

  nav a.logout {margin-left:0;}

  nav h1 {display:flex; justify-content:center; width:100%; margin:0; padding:24px 12px 16px 12px; border:0; text-align:center;}
  nav h1 a:link,
  nav h1 a:visited {font-size:18px; line-height:1.2em; font-weight:bold;}

}

/*
nav {display:flex; flex-direction:column; padding:2px; background:#e4e660; border-top:1px solid rgba( 0,0,0, .1 ); font-size:18px;}
nav a {padding:12px; color:rgba( 0,0,0, .5 );}
nav a:hover {color:rgba( 0,0,0, .85 );}
*/

main {display:flex; flex:1; min-height:100%; background:rgba( 0,0,0, .02 );}
main .content {flex:1; width:100%;}
main .container {flex:1; width:100%; padding:30px 20px;}

section {padding:30px; background:white; box-shadow:2px 2px 1px 0 rgba( 0,0,0, .2 );}
section:not(:last-child) {margin-bottom:30px;}

@media (max-width:600px){
  section {margin:0 -20px; padding:20px; box-shadow:1px 1px 1px 0 rgba( 0,0,0, .2 );}
  section h2 {margin-bottom:30px; text-align:center;}
}

.calendar {width:100%;}
.calendar.loading {opacity:.5; pointer-events:none;}

.calendar .header .flex {display:flex; align-items:center; padding:12px 16px; background:var(--brand-blue); border-radius:3px;}
.calendar .header .monthname {flex:1; text-align:center; font-size:24px; color:white; font-weight:600;}
.calendar .header .monthname input[type="month"] {max-width:100%; padding:0; background:none; border:0; outline:none; text-align:center; font-size:24px; color:white; font-weight:600; color-scheme:dark;}
.calendar .header .prevmonth a,
.calendar .header .nextmonth a {display:inline-block; text-decoration:none; font-weight:600; color:rgba( 255,255,255, .5 );}
.calendar .header .prevmonth a:hover,
.calendar .header .nextmonth a:hover {color:#fff;}
.calendar .header .nextmonth {text-align:right;}
.calendar .header .prevmonth i {margin-right:8px; vertical-align:0px;}
.calendar .header .nextmonth i {margin-left:8px; vertical-align:0px;}

.calendar .bookings table tr td {padding:0; border:0; background:none;}
.calendar .bookings table tr:hover td {background:none;}
.calendar .bookings table tr td:first-child {text-align:center;}
.calendar .bookings table tr td:last-child {width:100%;}
.calendar .bookings a {display:block; text-decoration:none; color:#000;}
.calendar .bookings a:hover strong {text-decoration:underline;}
.calendar .bookings a strong {white-space:nowrap;}
.calendar .bookings a .time {margin:0 5px 0 0; font-size:11px; line-height:14px; color:rgba( 0,0,0, .5 );}
.calendar .bookings a .reference {margin:0 0 0 5px; font-size:11px; line-height:14px; color:rgba( 0,0,0, .5 );}

.daynames {}
.daynames td {padding:8px; font-size:11px; font-weight:bold; text-align:center;}
.days .week td {width:14.28%; background:#fff; border:1px solid rgba( 0,0,0, .75 ); vertical-align:top;}
.days .week .day {display:flex; flex-direction:column; height:100%; /* min-height:min( 13vh, 10vw ); */ aspect-ratio:1; transition:min-height .2s; padding:8px;}
.calendar.expanded .days .week .day {min-height:100px;}
.days .week td:hover {opacity:.8;}
.days .week td {}
.days .week td.active {background:#ffc; opacity:.8;}
.days .week td.lastmonth,
.days .week td.nextmonth {background:rgba( 0,0,0, .05 );}
.days .week td.lastmonth:hover,
.days .week td.nextmonth:hover {opacity:.8;}
.days .week td.today {}
.days .week td.today .day {}
.days .week td.blockout {background:rgba( 0,0,0, .2 );}
.days .week .day .top {display:flex; justify-content:center; margin:0 0 5px 0;}
.days .week .day .top .date {display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; font-size:11px; line-height:1em; color:rgba( 0,0,0, .75 );}
.days .week .today .day .top .date {border-radius:50%; background:var(--brand-blue); color:white;}
.days .week .day .top .tag {margin:-4px -6px 0 0; background:rgba( 0,0,0, .2 ); color:#fff;}
.days .week td.today .day .top .date {font-weight:bold;}
.days .week td.past .day {background:rgba( 0,0,0, .1 );}
.days .week td.past .day .date {color:rgba( 0,0,0, .25);}
.days .week .day .activities {display:flex; flex-direction:column; font-size:11px;}
.days .week .day .activities label {margin:0 0 2px 0; padding:4px; border-radius:3px; background:rgba( 0,0,0, .05 ); color:rgba( 0,0,0, .5 );}
.days .week .day:hover .activities label {color:rgba( 0,0,0, .85 );}
.days .week .day .activities label:hover {background:rgba( 0,0,0, .1 );}
.days .week .day .activities label.checked {font-weight:bold; background:#ccc; color:#000;}

.days td.booking {position:relative; --booking-color:var(--booking-future);}
.days td.booking:before {content:''; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:var(--booking-color);}
.days td.booking .day {position:relative; z-index:2;}

.days td.bookingStart {position:relative; --booking-color:var(--booking-future);}
.days td.bookingStart:before {content:''; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:linear-gradient( -45deg, var(--booking-color) 49.5%, rgba( 0,0,0, .4 ) 49.5%, rgba( 0,0,0, .4 ) 50.5%, rgba( 255,255,255, 0 ) 50.5% );}
.days td.bookingStart .day {position:relative; z-index:2;}

.days td.bookingEnd {position:relative; --booking-color:var(--booking-future);}
.days td.bookingEnd:after {content:''; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background:linear-gradient( 135deg, var(--booking-color)  49.5%, rgba( 0,0,0, .4 ) 49.5%, rgba( 0,0,0, .4 ) 50.5%,  rgba( 255,255,255, 0 ) 50.5% );}
.days td.bookingEnd .day {position:relative; z-index:2;}

.days td.bookingOdd,
.days td.bookingStartOdd:before,
.days td.bookingEndOdd:after {--booking-color:var(--booking-future-odd);}

.days td.today.bookingEnd:after,
.days td.past.booking,
.days td.past.bookingStart:before,
.days td.past.bookingEnd:after {--booking-color:var(--booking-past);}

.days td.today.bookingEndOdd:after,
.days td.past.bookingOdd,
.days td.past.bookingStartOdd:before,
.days td.past.bookingEndOdd:after {--booking-color:var(--booking-past-odd);}

.days td.booking.bookingActive,
.days td.bookingActive:not(.bookingEnd):not(.bookingStart),
.days td.past.bookingActive:not(.bookingEnd):not(.bookingStart),
.days td.bookingActive.bookingStartActive:before,
.days td.bookingActive.bookingEndActive:after {--booking-color:var(--booking-active);}

.days td.bookingActive.today .day {}

.days .day .bookings {flex:1; display:flex; flex-direction:column; font-size:12px; line-height:1.4em;}
.days .day .bookings a {display:flex; flex-direction:column;}
.days .day .bookings a strong {}
.days .day .bookings a:not(:first-child) .subtitle {display:none;}
.days .day .bookings .arriving {align-self:flex-end; margin-top:auto; text-align:right;}

@media (max-width:700px){

  .days .day table {display:none;}

  .calendar .header .monthname {font-size:18px; line-height:1em;}
  .calendar .header .monthname {width:100%;}
  .calendar .header .monthname input[type="month"] {width:100%; font-size:18px; line-height:1em; justify-content:center;}
  
  .days .week .day .top .date {font-size:9px; line-height:1.4em;}

  .days .day .bookings {font-size:9px; line-height:1.4em;}
  .days .day .bookings .departing span {display:none;}
  .days .day .bookings .arriving span {display:none;}

}

@media (max-width:480px){

  .days .week .day .top .date {font-size:12px; line-height:1.4em;}
  .days .day .bookings {display:none;}

  .calendar .header .flex {padding:0;}

  .calendar .header .prevmonth a,
  .calendar .header .nextmonth a {padding:12px 16px; font-size:18px;}

}


.legend {display:flex; flex-wrap:wrap; justify-content:center; gap:10px 30px; margin:0 0 20px 0;}
.legend .item {display:flex; align-items:center; gap:5px;}
.legend .item span {display:inline-flex; width:15px; aspect-ratio:1; border:1px solid rgba( 0,0,0, .1 );}
.legend .item.active span {background:var(--booking-active);}
.legend .item.future span {background:linear-gradient( 135deg, var(--booking-future) 50%, var(--booking-future-odd) 50% );}
.legend .item.past span {background:linear-gradient( 135deg, var(--booking-past) 50%, var(--booking-past-odd) 50% );}

.quiet {color:rgba( 0,0,0, .5 );}

.tag {display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:3px; font-weight:bold; font-size:11px; line-height:1em; white-space:nowrap; background:rgba( 0,0,0, .05 ); border-radius:3px;}
.tag i {color:rgba( 0,0,0, .5 );}
.tag.tag-new {background:orange;}
.tag.tag-confirmed {background:var(--green); color:white;}
.tag.tag-confirmed i {color:rgba( 255,255,255, .5 );}

table.list {width:100%; margin:0 0 1em 0;}
table.list:last-child {margin-bottom:0;}
table.list tr th {padding:6px 8px; border-bottom:1px solid rgba( 0,0,0, .5 ); text-align:left; font-size:11px; font-weight:bold; color:rgba( 0,0,0, .4 ); text-transform:uppercase;}
table.list tr td {padding:8px; background:#fff; border:1px solid rgba( 0,0,0, .1 ); border-width:1px 0;}
table.list tr:last-child td {border-bottom:0;}
table.list tr.active td {background:#ffc;}
table.list input[type="text"] {}
table.list a.button {padding:4px 8px; font-size:11px;}
table.list a:link:not(.button),
table.list a:visited:not(.button) {text-decoration:none;}
table.list a:hover:not(.button) {text-decoration:underline;}

table.list thead th[data-sorted="true"] {border-bottom:2px solid rgba( 0,138,255, 1 ); color:rgba( 0,138,255, 1 );}
table.list thead th[data-sorted="true"]::after { margin:0 0 0 5px; font-family:'Font Awesome\ 5 Free'; }
table.list thead th[data-sorted-direction="ascending"]::after { content:'\f0d8' }
table.list thead th[data-sorted-direction="descending"]::after { content:'\f0d7' }

table.form {margin:0 0 1em 0;}
table.form tr th {padding:8px; text-align:left; font-weight:bold;}
table.form tr td {padding:8px;}

form.add {margin:0 0 10px 0; padding:10px; background:rgba( 0,0,0, .1 ); border-radius:3px;}
form.add input[type="text"] {border:0;}

.login {display:flex; justify-content:center; align-items:center; width:100%; text-align:center; background:var(--brand-blue);}
.login h2 {margin:0 0 20px 0; font-size:32px; line-height:1em; font-weight:normal; font-family:'Patua One'; color:rgba( 255,255,255, .9 );}
.login h2 strong {font-weight:normal; color:#fff;}
.login form {display:flex; flex-direction:column; gap:10px; max-width:100%; width:500px; padding:60px; background:rgba( 0,0,0, .2 ); box-shadow:3px 4px 1px 0px rgba( 0,0,0, .3 ); border:1px solid rgba( 0,0,0, .1 ); border-radius:3px;}
.login form input {padding:8px; border:0; font-size:14px;}
.login form label {display:flex; align-items:center; gap:5px; text-align:left; color:#fff;}
.login form label input {}
.login form button {justify-content:center; padding:12px; background:rgba( 255,255,255, .1 ); font-size:14px; text-align:center;}
.login form button:hover {background:rgba( 255,255,255, .15 );}

@media ( max-width:600px ){
  .login form {height:100%; padding:60px 20px;}
}

.context-menu {position:absolute; z-index:4; display:flex; flex-direction:column; min-width:200px; border-radius:3px; border:1px solid rgba( 0,0,0, .2 ); box-shadow:1px 1px 2px 0px rgba( 0,0,0, .5 ); background:#fff;}
.context-menu:not(.visible) {opacity:0; pointer-events:none;}
.context-menu a {padding:8px 16px; text-decoration:none; color:rgba( 0,0,0, .8 );}
.context-menu a:not(:last-child) {border-bottom:1px solid rgba( 0,0,0, .05 );}
.context-menu a:hover {background:rgba( 0,0,0, .05 );}
.context-menu a i {margin-right:10px; font-size:75%; color:rgba( 0,0,0, .5 );}
.context-menu .booking {display:flex; align-items:center; gap:10px;}
.context-menu .booking .name {flex-grow:1;}
.context-menu .booking i {margin:0;}
.context-menu .booking .span {white-space:nowrap; margin-left:auto; padding-left:20px; color:rgba( 0,0,0, .5 ); font-size:90%; line-height:1.2em;}

@media ( max-width:480px ){
  .context-menu {transition:opacity .2s, transform .2s; position:fixed; top:auto !important; bottom:0; left:0 !important; right:0; margin:10px;}
  .context-menu:not(.visible) {transform:translateY(20px);}
  .context-menu a {padding:20px; font-size:18px; line-height:1.2em;}

  .context-menu-bg {transition:opacity .2s; position:fixed; z-index:3; top:0; left:0; right:0; bottom:0; background:rgba( 0,0,0, .4 );}
  .context-menu-bg:not(.visible) {opacity:0; pointer-events:none;}
}

.timepicker {display:none; position:absolute; z-index:3001; max-width:300px; min-width:250px; max-height:300px; overflow:auto; margin-top:3px; background:#fff; box-shadow:0px 0px 2px 2px rgba( 0,0,0, .15 ); border-radius:3px; white-space:normal; text-align:left; font-size:14px;}
.timepicker a {display:inline-block; width:100%; padding:8px; border-top:1px solid rgba( 0,0,0, .1 ); color:#333; text-decoration:none;}
.timepicker a:first-child {border-top:0;}
.timepicker a:hover {background:rgba( 0,0,0, .05 );}
.timepicker a.active {background:rgba( 0,0,0, .05 );}
.timepicker a .quiet {color:rgba( 0,0,0, .2 );}
.timepicker .row {display:inline-block; width:100%; border-top:1px solid rgba( 0,0,0, .1 );}
.timepicker .row:first-child {border-top:0;}
.timepicker .row a {width:auto; border:0;}
.timepicker .row a.hour {border-right:1px solid rgba( 0,0,0, .1 );}
.timepicker .row a.minute {display:none;}
.timepicker .row a.minute .quiet {color:rgba( 0,0,0, .5 );}
.timepicker .row:hover {background:rgba( 0,0,0, .05 );}
.timepicker .row:hover a.minute {display:inline-block;}

.add-booking-line {margin:0 0 30px 0; text-align:right;}
.add-booking-line:last-child {margin:30px 0 0 0;}

@media ( max-width: 600px ){
  
  .hide-mobile {display:none !important;}
  
  .days .week .day {padding:5px;}

  .add-booking-line {text-align:center;}
  .add-booking-line .button {padding:10px 20px; font-size:18px; line-height:1.2em;}

  table.form {width:100%;}
  table.form tbody {display:flex; flex-direction:column; gap:10px;}
  table.form tr {display:flex; flex-direction:column; gap:10px;}
  table.form tr th,
  table.form tr td {display:flex; padding:0; gap:10px;}
  table.form input[type="text"],
  table.form input[type="date"],
  table.form textarea {width:100% !important;}
  
}

@media ( max-width: 400px ){
  
  .hide-all {display:none;}
  
}