@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

/* Body text, forms, buttons, calendar, weekday list */
body, input, select, textarea, button, p, li, td, label, a, span, div {
  font-family: 'Nunito', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif !important;
}

/* Company title / main heading */
.company-name, .title-main, h1, h2, h3, h4, h5, h6 {
  font-family: 'Fredoka', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif !important;
  font-weight: 600 !important;
}
.title-main:not(.company-name, .company-logo-and-name) {
    display: none;
}

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

/* 1. Stack: description on top, opening hours underneath (all screen sizes) */
.description_working_hours {
  display: flex;
  flex-direction: column;
}
.description_working_hours .col-sm-8 {
  order: 1;
  width: 100%;
  max-width: 800px;        /* cap line length for readability */
  margin: 0 auto;          /* centre the description block */
  flex: 0 0 auto;
}
.description_working_hours .col-sm-4 {
  order: 2;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

/* 2. Centre the opening hours block */
.description_working_hours .col-sm-4 {
  align-items: center;
  text-align: center;
}

.description_working_hours .col-sm-4 .title {
  text-align: center;
  width: 100%;
}

.description_working_hours .col-sm-4 .data {
  width: 100%;
  text-align: center;
}

.description_working_hours .col-sm-4 .data p.clearfix {
  display: inline-flex;
  gap: 0.5em;
  float: none;
}

.description_working_hours .col-sm-4 .data p.clearfix > * {
  float: none;
}
.brand {
  display: none !important;
}

@media (max-width: 768px) {
  /* the dropdown menu panel */
  #nav, nav, .nav, .navbar, .menu, #menu, .main-menu, .header-menu,
  .mobile-menu, .nav-menu, .menu-dropdown {
    background-color: #FBFAF6 !important;   /* your off-white */
  }
  /* keep the links navy so they read on the light panel */
  #nav a, nav a, .nav a, .navbar a, .menu a, #menu a,
  .main-menu a, .header-menu a {
    color: #3E4361 !important;
  }
}

@media (max-width: 1024px) {
  /* Panel + frame: forest green, edge to edge, no rounded frame */
  #header .nav-wrapper {
    background: #15875C !important;
    background-color: #15875C !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Inner containers stay transparent so green shows through */
  #header .nav-wrapper #sb_menu,
  #header .nav-wrapper #sb_menu .nav {
    background: transparent !important;
    border: 0 !important;
  }
  /* Menu links: white text */
  #header .nav-wrapper #sb_menu .nav li a {
    color: #FFFFFF !important;
  }
}
.brand.company-logo-only {
  display: inline-block !important;
}