/*
 *   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 {
  --base-font-size: 14px;
  --brand-blue: #265162;
  --brand-dark-blue: #040d10;
  --brand-purple: #834979;
  --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:var(--base-font-size); line-height:160%; color:#333;}

@media (max-width:600px){
  :root {
    --base-font-size: 18px;
  }
}

body {}

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

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

em {font-style:italic;}

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; line-height:100%;}

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:var(--base-font-size); 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:600; 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:#c11a1a;}

button.hollow,
a.button.hollow {background:none; border:2px solid var(--brand-blue); color:var(--brand-blue);}
button.hollow:hover,
button.hollow:active,
a.button.hollow:hover,
a.button.hollow:active {background:var(--brand-blue); color:white;}

button:disabled,
button:disabled:hover,
a.button.button-disabled,
a.button.button-disabled:hover {background:#666; opacity:1; cursor:default;}

@media (max-width:600px){
  button,
  a.button {padding:10px 15px;}
}

.google-calendar-button {display:flex; align-items:center; gap:10px; padding:8px 16px; background:rgba( 0,0,0, .05 ); border-radius:5px; text-decoration:none; font-weight:600;}
.google-calendar-button:hover {background:rgba( 0,0,0, .1 );}
.google-calendar-button img {width:20px; height:20px;}

label.toggle {display:flex; align-items:center; gap:5px;}
label.toggle input[type="checkbox"] {accent-color:var(--brand-blue);}
label.toggle input[type="checkbox"]:hover {accent-color:var(--brand-dark-blue);}

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

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

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

.vertical-top {vertical-align:top;}
.vertical-middle {vertical-align:middle;}
.vertical-bottom {vertical-align:bottom;}

.flex {display:flex;}
.flex-column {flex-direction:column;}

@media ( min-width: 601px ){
  
  .show-mobile {display:none !important;}
  
}

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

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

@keyframes pageresponse-flash {
  0% {background-color:#ffc;}
  50% {background-color:#ffff74;}
  100% {background-color:#ffc;}
}

.pageresponse {padding:10px 0; background:#ffc; animation:pageresponse-flash 500ms 2 ease-in-out;}
.pageresponse .container {padding:0 20px;}

.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;}

.quick-nav {background:var(--brand-dark-blue);}
.quick-nav .container {display:flex; justify-content:flex-end; align-items:center; gap:1px;}
.quick-nav .dropdown,
.quick-nav a:link,
.quick-nav a:visited {display:flex; align-items:center; gap:10px; padding:8px 18px; color:rgba( 255,255,255, .75 ); text-decoration:none; font-weight:600; font-size:14px; line-height:120%;}
.quick-nav .dropdown:hover,
.quick-nav a:hover {background:rgba( 255,255,255, .1 );}
.quick-nav a.active {background:rgba( 255,255,255, .1 );}
.quick-nav .user {display:flex; align-items:center; gap:10px;}

@media ( min-width:901px ){
  .quick-nav .dropdown {position:relative; align-self:stretch; display:flex; align-items:center; font-weight:normal; cursor:default;}
  .quick-nav .dropdown .menu {position:absolute; z-index:2; bottom:0; right:0; transform:translateY(100%); display:flex; flex-direction:column; width:200px; padding:5px 0; background:var(--brand-dark-blue); box-shadow:0px 2px 3px 0 rgba( 0,0,0, .4 );}
  .quick-nav .dropdown:not(:hover) .menu {display:none;}
  .quick-nav .dropdown .menu a {padding:8px 18px; font-weight:normal; font-size:11px; line-height:140%;}
}

@media ( max-width:900px ){
  .quick-nav {order:100;}
  .quick-nav .container {flex-direction:column; align-items:flex-start;}
  .quick-nav .logout,
  .quick-nav .dropdown,
  .quick-nav .menu {display:contents;}
  .quick-nav .logout i,
  .quick-nav a i {display:none;}
  .quick-nav a:link,
  .quick-nav a:visited,
  .quick-nav .user {width:100%; padding:15px 20px;}
  .quick-nav .user {border-top:1px solid rgba( 255,255,255, .15 ); font-weight:normal;}
}

header {background:var(--brand-blue); font-size:14px;}
header .container {display:flex; align-items:center;}

header 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:140%;}
header h1 a:link,
header h1 a:visited {padding:0; border:0; color:white; text-decoration:none;}
header h1 a:hover {padding:0; background:none; color:white;}

header .burger {margin-left:auto; padding:12px 18px; color:white; font-size:22px;}

@media ( max-width:900px ){
  header h1 {font-size:22px; line-height:140%; border:0;}
}

@media ( max-width:600px ){
  header {position:sticky; z-index:200; top:0;}
}

nav {display:flex; align-items:center; flex:1; transition:transform .2s;}
nav a:not(.close):link,
nav a:not(.close):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 .user:hover,
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 .user {display:flex; align-items:center; gap:10px; padding:12px 20px; border-top:2px solid rgba( 0,0,0, 0 ); color:rgba( 255,255,255, .5 ); text-decoration:none; cursor:default;}
nav .logout {align-self:stretch; display:flex; align-items:center; gap:0; margin-left:auto;}
nav .close {position:absolute; top:0; right:0; padding:18px 22px; color:white;}
nav .close i {color:white; font-size:22px;}

.nav-bg {position:fixed; z-index:100; left:0; top:0; right:0; bottom:0; background:rgba( 0,0,0, .5 ); transition:opacity .2s;}
.nav-bg:not(.open) {opacity:0; pointer-events:none;}

@media ( min-width:901px ){
  nav .close,
  header .burger {display:none;}
}

@media ( max-width:900px ){

  nav {position:fixed; z-index:200; right:0; top:0; bottom:0; left:10%; flex-direction:column; align-items:flex-start; padding:50px 0 20px 0; background:var(--brand-blue); box-shadow:0 0 10px 0 rgba( 0,0,0, .5 );}
  nav:not(.open) {transform:translateX(100%);}
  nav .logout {flex-direction:column; align-items:flex-start; margin:auto 0 0 0;}
  nav a:not(.close):link,
  nav a:not(.close):visited,
  nav .user {width:100%; padding:15px 30px; border:0; font-size:18px; line-height:140%;}
  nav a:not(.close) i {display:none !important;}
}

/*
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;}

.title {display:flex; justify-content:space-between; align-items:center; gap:30px;}
.title:not(:last-child) {margin-bottom:30px;}
.title h2 {margin:0;}
.title .actions {display:flex; align-items:center; gap:10px;}

@media (max-width:600px){
  .title .actions .button,
  .title .actions button {padding:6px 10px; font-size:14px; line-height:120%; white-space:nowrap;}
}

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;}
}

.dashboard .tiles {display:grid; grid-template-columns:repeat(2, 1fr); gap:30px;}
.dashboard .tiles a {display:flex; align-items:center; justify-content:center; aspect-ratio:3/2; padding:30px; background:var(--brand-purple); border-radius:5px; color:white; text-decoration:none; font-size:24px; line-height:140%; font-weight:600;}
.dashboard .tiles a.liamandsam {padding:0;}
.dashboard .tiles a.liamandsam img {width:100%; height:100%; object-fit:cover; object-position:center; border:3px solid var(--brand-purple); border-radius:5px;}

@media (max-width:600px){
  .dashboard .tiles {grid-template-columns:1fr;}
  .dashboard .tiles a {aspect-ratio:5/2; font-size:18px; line-height:140%;}
  .dashboard .tiles a.liamandsam {aspect-ratio:1136/852;}
}


.calendar-page {width:100%;}
.calendar-page .container {}

@media (max-width:480px){
  .calendar-page {}
  .calendar-page .container {display:flex; flex-direction:column;}
  .calendar-page .legend {order:3; margin:30px 0 0 0;}
}

.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; gap:3px; font-size:11px; line-height:1em; color:rgba( 0,0,0, .75 );}
.days .week .day .top .date .number {display:inline-flex; align-items:center; justify-content:center; height:20px;}
.days .week .today .day .top .date .number { min-width:20px; 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:not(.booking):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:not(.booking):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 .week .today .day .top .date .monthName {display:none;}
  .days .day .bookings {display:none;}

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

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

}


.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 th.shrink,
table.list tr td.shrink {width:1px; white-space:nowrap;}
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.list em {color:rgba( 0,0,0, .5 );}

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;}

table.form .dayname {margin-left:10px;}

table.form .actions {display:flex; align-items:center; gap:10px;}

@media (max-width:600px){
  table.form .dayname {display:none; margin-top:-3px; margin-left:0; color:rgba( 0,0,0, .5 );}
}

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 {justify-content:center; 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:15px; font-size:75%; color:rgba( 0,0,0, .5 );}
.context-menu .booking {display:flex; align-items:center; gap:15px;}
.context-menu .booking .name {flex-grow:1; display:flex; flex-direction:column; gap:2px; line-height:140%;}
.context-menu .booking .name strong {font-size:80%; line-height:140%;}
.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 ( min-width:481px ){
  .context-menu {border-radius:2px; border:0; box-shadow:1px 1px 2px 0 rgba(0,0,0,.3), 1px 1px 12px 0px rgba( 0,0,0, .1 );}
}

@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 {display:flex; justify-content:flex-end; gap:20px; margin:0 0 30px 0; text-align:right;}
.add-booking-line:last-child {margin:30px 0 0 0;}
.add-booking-line .spacer {flex:1;}

@media ( max-width: 600px ){
  
  .days .week .day {padding:5px;}

  .add-booking-line {flex-direction:column; align-items:center; gap:15px; text-align:center;}
  .add-booking-line .button {padding:10px 20px; font-size:18px; line-height:120%;}
  .add-booking-line .spacer {display:none;}
  .add-booking-line .google-calendar-button {order:2; font-size:14px; line-height:120%;}
  .add-booking-line .google-calendar-button i {width:18px; height:18px;}

  table.form {width:100%;}
  table.form tbody {display:flex; flex-direction:column; gap:20px;}
  table.form tr {display:flex; flex-direction:column; gap:5px;}
  table.form tr th,
  table.form tr td {display:flex; flex-direction:column; align-items:flex-start; padding:0; gap:10px;}
  table.form input[type="text"],
  table.form input[type="date"],
  table.form textarea {width:100% !important; border-color:rgba( 0,0,0, .5 );}
  
  table.form .actions {width:100%; margin-top:30px; flex-direction:column; align-items:stretch; gap:20px;}
  table.form .actions button,
  table.form .actions .button {justify-content:center; gap:10px; padding:15px 20px;}

}

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

.people-list {width:100%; display:grid; grid-template-rows:repeat(var(--rows), 1fr); grid-auto-flow:column; gap:5px 10px;}
.people-list label {display:flex; align-items:center; gap:10px; padding:5px 10px; background:rgba( 0,0,0, .05 ); border-radius:3px;}
.people-list label.checked {background:var(--brand-blue); color:white;}
.people-list label input[type="checkbox"] {accent-color:var(--brand-blue);}
.people-list label input[type="checkbox"]:hover {accent-color:var(--brand-dark-blue);}

@media ( max-width: 900px ){
}

.family-history-login {align-items:center; justify-content:center; padding:30px; background:rgba( 0,0,0, .02 ); font-size:24px; line-height:140%; font-weight:600; color:var(--brand-blue);}
.family-history-login p {text-align:center;}

.fa-user-lock {font-size:11px; color:#26516280;}

.catch-up-list .actions {margin-bottom:20px; text-align:right;}

@media ( max-width: 600px ){
  .catch-up-list .container {display:flex; flex-direction:column;}
  .catch-up-list .actions {order:2; margin:20px 0 0 0; display:flex; align-self:stretch; width:100%;}
  .catch-up-list .actions a {width:100%; justify-content:center; gap:10px; padding:15px 20px;}
}


main.liamandsam {justify-content:center; padding:30px; background:#050505;}

.liamandsam .home-tiles {width:100%; max-width:720px;}
.liamandsam .home-tiles {display:grid; grid-template-columns:repeat(2, 1fr); gap:30px;}
.liamandsam .home-tiles a {display:flex; align-items:center; justify-content:center; aspect-ratio:3/2; padding:30px; background:var(--brand-purple); border-radius:5px; color:white; text-decoration:none; font-size:24px; line-height:140%; font-weight:600;}
.liamandsam .home-tiles a img {width:100%;}
.liamandsam .home-tiles a.dvd {padding:0;}
.liamandsam .home-tiles a.dvd img {width:100%; height:100%; object-fit:cover; object-position:center; border:3px solid var(--brand-purple); border-radius:5px;}

@media (max-width:600px){
  .liamandsam .home-tiles {grid-template-columns:1fr;}
  .liamandsam .home-tiles a {aspect-ratio:5/2; font-size:18px; line-height:140%;}
  .liamandsam .home-tiles a.dvd {aspect-ratio:1136/852;}
}

.liamandsam .menu {position:relative; width:100%; max-width:720px;}
.liamandsam .menu img {width:100%; border-radius:5px;}
.liamandsam .menu .element,
.liamandsam .menu .element-button {position:absolute;}
.liamandsam .menu .element:hover {border:5px solid #fefd21;}
.liamandsam .menu .element-button:hover {background:rgba( 143,63,65, .75 ); border-radius:10px;} 
.liamandsam .menu .video1 {left:12.588028169014084%; top:21.922626025791324%; width:20.774647887323944%; height:21.101992966002346%;}
.liamandsam .menu .video2 {left:39.7887323943662%; top:21.922626025791324%; width:20.774647887323944%; height:21.101992966002346%;}
.liamandsam .menu .video3 {left:67.25352112676056%; top:21.922626025791324%; width:20.774647887323944%; height:21.101992966002346%;}
.liamandsam .menu .video4 {left:12.588028169014084%; top:52.40328253223916%; width:20.774647887323944%; height:21.101992966002346%;}
.liamandsam .menu .video5 {left:39.7887323943662%; top:52.40328253223916%; width:20.774647887323944%; height:21.101992966002346%;}
.liamandsam .menu .video6 {left:67.25352112676056%; top:52.40328253223916%; width:20.774647887323944%; height:21.101992966002346%;}
.liamandsam .menu .home {left:11.53169014084507%; top:83.64243845252052%; width:7.482394366197183%; height:5.509964830011723%;}
.liamandsam .menu .back {left:21.566901408450704%; top:83.64243845252052%; width:7.570422535211267%; height:5.509964830011723%;}
.liamandsam .menu .forward {left:31.690140845070424%; top:83.64243845252052%; width:7.570422535211267%; height:5.509964830011723%;}
.liamandsam .menu .play {left:41.813380281690144%; top:83.64243845252052%; width:7.570422535211267%; height:5.509964830011723%;}

.liamandsam h3 {color:white; font-weight:bold; text-align:center; font-size:18px; line-height:140%;}
.liamandsam .frame {display:flex; flex-direction:column; align-items:center; gap:20px;}
.liamandsam .video {position:relative; width:100%; max-width:720px;}
.liamandsam .video video {width:100%; aspect-ratio:720/540; border-radius:5px;}
.liamandsam .frame .buttons {width:100%; display:grid; grid-template-columns:repeat(3, 1fr); align-items:center; gap:20px;}
.liamandsam .frame .button {gap:10px; padding:10px 20px; background:rgba( 255,255,255, .1 );}
.liamandsam .frame .button i {color:rgba( 255,255,255, .5 );}
.liamandsam .frame .button:hover {background:rgba( 255,255,255, .2 );}
.liamandsam .frame .buttons .spacer {flex:1;}
.liamandsam .frame .buttons .item:first-child {justify-self:flex-start;}
.liamandsam .frame .buttons .item:nth-child(2) {justify-self:center;}
.liamandsam .frame .buttons .item:last-child {justify-self:flex-end;}

.liamandsam .covers {display:flex; align-items:center; gap:30px; max-width:720px;}
.liamandsam .covers a {flex:1; aspect-ratio:700/1000;}
.liamandsam .covers img {display:block; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:5px;}

@media (min-width:780px){
  .liamandsam .video video {width:720px;}
}

@media (max-width:600px){
  main.liamandsam {padding:10px; padding-bottom:60px;}
  .liamandsam h3 {margin-top:10px;}
  .liamandsam .frame .buttons {grid-template-columns:repeat(2, 1fr);}
  .liamandsam .frame .buttons .item:nth-child(2) {grid-row:2; grid-column:span 2; justify-self:center;}
  .liamandsam .frame .buttons .item {width:100%; align-items:center; align-self:stretch;}
  .liamandsam .frame .buttons .button {justify-content:center; width:100%; height:100%;}
  .liamandsam .frame .button {font-size:14px; line-height:100%;}

  .liamandsam .covers {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
}