#sb_client_info {
    background-color: #000000 !important;
}


#sb_cart > div > div {
    background-color: #000000 !important;
}


#header {
    background-color: #e60000 !important;
}


#sb_dateview_container > div > div > div.calendar > div.weeks-date.row-no-padding.clearfix > div:nth-child(n) > div > div:nth-child(n) > a {
    font-weight: bold;
}


/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}

/* APOCALYPSE AIRSOFT CHRISTMAS */

/* Falling snow */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99990;
  pointer-events: none;
  background-image:
    radial-gradient(3px 3px at 20px 30px, white 95%, transparent),
    radial-gradient(2px 2px at 90px 80px, white 95%, transparent),
    radial-gradient(4px 4px at 145px 140px, white 95%, transparent),
    radial-gradient(2px 2px at 200px 50px, white 95%, transparent);
  background-size: 240px 190px;
  opacity: .75;
  animation: apocalypseSnow 12s linear infinite;
}

@keyframes apocalypseSnow {
  from { background-position: 0 -190px; }
  to { background-position: 45px 190px; }
}

/* Santa flying across screen */
body::after {
  content: "";
  position: fixed;
  top: 10%;
  left: 0;
  width: clamp(140px, 19vw, 300px);
  aspect-ratio: 1.45;
  z-index: 99991;
  pointer-events: none;
  background-image: url("https://res.cloudinary.com/ux1nley4/image/upload/f_auto,q_auto/Santa_s_Sparkling_Sleigh_and_Reindeer_Duo");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  animation: apocalypseSanta 43s linear infinite;
}

@keyframes apocalypseSanta {
  0%, 7% {
    transform: translate(-120%, -25px);
  }
  32% {
    transform: translate(calc(50vw - 50%), 105px);
  }
  57%, 100% {
    transform: translate(calc(100vw + 20px), -25px);
  }
}

/* Multicoloured Christmas lights */
#header {
  position: relative;
}

#header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55px;
  pointer-events: none;
  z-index: 20;
  background-image:
    radial-gradient(circle at 15px 16px,
      #ff4141 0 4px, transparent 6px),
    radial-gradient(circle at 45px 34px,
      #46ff85 0 4px, transparent 6px),
    radial-gradient(circle at 75px 34px,
      #559dff 0 4px, transparent 6px),
    radial-gradient(circle at 105px 16px,
      #ffe075 0 4px, transparent 6px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='55'%3E%3Cpath d='M0 4 Q60 65 120 4' fill='none' stroke='%232d302b' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 120px 55px;
  background-repeat: repeat-x;
  animation: apocalypseLights 2.8s ease-in-out infinite alternate;
}

@keyframes apocalypseLights {
  from {
    opacity: .65;
    filter: brightness(.8);
  }
  to {
    opacity: 1;
    filter: brightness(1.4);
  }
}

/* Mobile adjustments */
@media (max-width: 600px) {
  body::after {
    width: 145px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  #header::after {
    animation: none;
  }
  body::after {
    display: none;
  }
}


/* APOCALYPSE - CORRECTED SANTA PRESENTS */

#header::before {
  content: "🎁";
  position: fixed;
  z-index: 99992;
  font-size: 32px;
  width: 36px;
  height: 36px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  animation: apocalypseGiftsFixed 43s linear infinite;
}

@keyframes apocalypseGiftsFixed {

  /* PRESENT 1 - OUT OF SANTA'S SACK */
  0%, 18.99% {
    left: 15vw;
    top: calc(10vh + 65px);
    opacity: 0;
    transform: rotate(0deg);
  }
  19% {
    left: 15vw;
    top: calc(10vh + 65px);
    opacity: 1;
    transform: rotate(0deg);
  }
  24% {
    left: calc(15vw - 35px);
    top: calc(10vh + 240px);
    opacity: 1;
    transform: rotate(-260deg);
  }
  27%, 30.98% {
    left: calc(15vw - 55px);
    top: 95vh;
    opacity: 0;
    transform: rotate(-430deg);
  }

  /* INSTANT INVISIBLE RESET */
  30.99% {
    left: 45vw;
    top: calc(10vh + 155px);
    opacity: 0;
    transform: rotate(0deg);
  }

  /* PRESENT 2 */
  31% {
    left: 45vw;
    top: calc(10vh + 155px);
    opacity: 1;
    transform: rotate(0deg);
  }
  36% {
    left: calc(45vw - 35px);
    top: calc(10vh + 330px);
    opacity: 1;
    transform: rotate(-260deg);
  }
  39%, 42.98% {
    left: calc(45vw - 55px);
    top: 95vh;
    opacity: 0;
    transform: rotate(-430deg);
  }

  /* INSTANT INVISIBLE RESET */
  42.99% {
    left: 71vw;
    top: calc(10vh + 95px);
    opacity: 0;
    transform: rotate(0deg);
  }

  /* PRESENT 3 */
  43% {
    left: 71vw;
    top: calc(10vh + 95px);
    opacity: 1;
    transform: rotate(0deg);
  }
  48% {
    left: calc(71vw - 35px);
    top: calc(10vh + 270px);
    opacity: 1;
    transform: rotate(-260deg);
  }
  51%, 100% {
    left: calc(71vw - 55px);
    top: 95vh;
    opacity: 0;
    transform: rotate(-430deg);
  }
}

@media (max-width: 600px) {
  #header::before {
    font-size: 25px;
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #header::before {
    display: none;
  }
}
