.title-main {
    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 */
}
.title-main {
  display: none;
}

/*
  Custom CSS
  Please make sure your CSS rules are 
  more particular / have higher priority
  then other page styles
*/
#events h3 { }
#events p.duration, #events div.duration { }
#events p.description, #events div.description { }
#events .selectedEvent { }
#events input.reserve_time_btn { }
#events input.select_another_btn { }
#eventForm #start_date-block-container h3, #eventForm #timeline-container h3 { }
#eventForm #save_button { }
div.ui-widget-content { }
div.ui-widget-header { }
#timeline-container table.timeline { }
.timeline td.not_worked_time { }
.timeline td.free_time { }
.timeline td.selected_time { }
.timeline td.reserved_time { }
div#loading { }
#start_date-block-container .zend_form dt,
start_date-block-container .zend_form dt b,
start_date-block-container .zend_form dd label { }

/* =========================
   CALM CARDS (FOR YOUR 3-COLUMN TABLE)
   ========================= */

/* Table becomes 3 separate “cards” */
table{
  width: 100% !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 18px !important;
  background: transparent !important;
}

table td{
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 18px !important;
  padding: 26px 22px !important;
  padding-top: 56px !important; /* room for icon */
  vertical-align: top !important;
  box-shadow: 0 10px 26px rgba(15,23,42,0.06) !important;
  color: #475569 !important;
  line-height: 1.55 !important;
  position: relative !important;
  box-sizing: border-box !important;
  font-size: 14px !important;        /* desktop base */
  font-weight: 400 !important;       /* desktop base */
}

/* Icons */
table td:nth-child(1)::before,
table td:nth-child(2)::before,
table td:nth-child(3)::before{
  position: absolute !important;
  top: 18px !important;
  left: 22px !important;
  font-size: 22px !important;
  opacity: 0.9 !important;
}

table td:nth-child(1)::before{ content: "♡"; color: #60a5fa; }
table td:nth-child(2)::before{ content: "☾"; color: #a78bfa; }
table td:nth-child(3)::before{ content: "❀"; color: #34d399; }

/* =========================
   MOBILE: layout + spacing (NO font sizing here)
   ========================= */
@media (max-width: 768px){

  table{ border-spacing: 0 !important; }
  table, tbody, tr, td{ display: block !important; width: 100% !important; }

  table td{
    margin: 0 0 14px 0 !important;
    padding: 18px 16px !important;
    padding-top: 46px !important;
    border-radius: 16px !important;
  }

  table td:nth-child(1)::before,
  table td:nth-child(2)::before,
  table td:nth-child(3)::before{
    top: 14px !important;
    left: 16px !important;
    font-size: 20px !important;
  }
}

/* =========================
   MOBILE ONLY: fix inline-styled span headings
   (this is what was affecting laptop before)
   ========================= */
@media (max-width: 768px){

  /* Base body text */
  table td{
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    font-weight: 400 !important;
  }

  /* Any bold inline span (your headings/subheadings) */
  table td span[style*="font-weight: bold"],
  table td span[style*="font-weight:bold"]{
    display: block !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
  }

  /* First bold span = Title */
  table td span[style*="font-weight: bold"]:first-of-type,
  table td span[style*="font-weight:bold"]:first-of-type{
    font-size: 22px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    margin: 2px 0 8px 0 !important;
  }

  /* Second bold span = Subtitle */
  table td span[style*="font-weight: bold"]:nth-of-type(2),
  table td span[style*="font-weight:bold"]:nth-of-type(2){
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin: 0 0 10px 0 !important;
  }
}

.button-enhanced {
    background-color: #9DB8B5;
    color: #fff; 
    padding: 10px 20px;
    font-size: 16px;
    border: 2px solid #6E8E8B; 
    border-radius: 8px; /* rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    transition: all 0.3s ease; /* smooth hover effect */
    cursor: pointer;
}

.button-enhanced:hover {
    border-color: #4F6D6A; 
    box-shadow: 0 16px 22px rgba(0, 0, 0, 0.3);
    background-color: #8AA39F; 
    color:#FAE4A3;
}

a{text-decoration:none;}

a:hover{text-decoration:none;}

a.basic-link{color:#000000}

a.basic-link:hover{font-weight:bold}
