/* Styles definition here */
.ahb_list_service, .totalCost {
    color: white !important;
}
.uh {
    color: #20B2AA !important; /* Maintain the soft green color */
}

.d {
    color: #E15252 !important;
	font-weight: bold;
}
.t {
    color: orange !important;
	font-weight: bold;
}


/*
.formLavaRun .ui-datepicker-calendar {background:black ;color: black;}

.fromLavaRun #fbuilder .ui-datepicker th{background:black ;color: black;}
.formLavaRun #fbuilder .ui-datepicker-inline { max-width:none !important; }
.formLavaRun #fbuilder input[type=text], #fbuilder textarea, #fbuilder select { color: black; }
.Label1Lavarun .field required { color: white; font-weight: bold; }
*/
/*.formLavaRun .field required { color: white; font-weight: bold; }*/

/*
.formLavaRun #fbuilder, #fbuilder label, #fbuilder span { color: white; font-weight: bold; }
.formLavaRun #fbuilder .ui-datepicker-title { color: white; font-weight: bold; }
.formLavaRun #fbuilder .ui-datepicker-header { background:black ; color:black; text-shadow:none; }
.formLavaRun .fieldCalendar { background:black ; color:black; text-shadow:none; }
*/
/*#fbuilder .slots .htmlUsed a{text-decoration: line-through;background:#ddd;color:#ccc}*/

/*
.formLavaRun #fbuilder .ui-datepicker table, #fbuilder .ui-datepicker thead, #fbuilder .ui-datepicker tr, #fbuilder .ui-datepicker th, #fbuilder .ui-datepicker td {border: 2px solid black;}
.formLavaRun #fbuilder input[type=text], #fbuilder textarea, #fbuilder select { color: black; }
*/
/* General container styles for the test form */
#testForm {
  font-family: 'Roboto', sans-serif;
  background: #1a1a1a;
  color: #FFF;
  padding: 20px;
}

/* Calendar container with gradient and shadow */
#testForm .ui-datepicker {
  background: linear-gradient(135deg, #2c3e50, #4ca1af);
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* Header styles with larger text and subtle overlay */
#testForm .ui-datepicker-header {
  background: rgba(0, 0, 0, 0.3);
  font-size: 1.8rem;
  font-weight: 300;
  text-align: center;
  padding: 10px 0;
  text-shadow: none;
}

/* Table & cell styling */
#testForm .ui-datepicker table {
  width: 100%;
  border-collapse: collapse;
}
#testForm .ui-datepicker th,
#testForm .ui-datepicker td {
  padding: 10px;
  text-align: center;
}

/* Day cell design */
#testForm td a,
#testForm td span {
  display: block;
  padding: 12px;
  border-radius: 5px;
  transition: background 0.3s ease, transform 0.3s ease;
}

/* Hover effects for available days */
#testForm td:not(.ui-datepicker-unselectable) a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* Style for inactive/unselectable days */
#testForm .ui-datepicker-unselectable .ui-state-default {
  color: #b0b0b0;
}

/* Active day (selected) styling */
#testForm .ui-datepicker-calendar .ui-state-active {
  background: #e74c3c;
  color: #fff;
  transform: scale(1.05);
}

/* Navigation arrows with a modern twist */
#testForm .ui-datepicker-prev,
#testForm .ui-datepicker-next {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 16px;
  border: 2px solid #FFF;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}
#testForm .ui-datepicker-prev:hover,
#testForm .ui-datepicker-next:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Field layout improvements */
#testForm .dfield.fapp {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
#testForm .fieldCalendar,
#testForm .slotsCalendar {
  flex: 1;
  min-width: 280px;
}

/* Slots design (for time or field slots) */
#testForm .slots {
  background: #FFF;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-align: center;
}
#testForm .slots div a {
  display: block;
  background: #f0f0f0;
  color: #333;
  border: none;
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
  transition: background 0.3s ease, transform 0.3s ease;
}
#testForm .slots div a:hover {
  background: #ddd;
  transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 767px) {
  #testForm .dfield.fapp {
    flex-direction: column;
  }
  #testForm .ui-datepicker-header {
    font-size: 1.4rem;
    padding: 8px 0;
  }
  #testForm .ui-datepicker-prev,
  #testForm .ui-datepicker-next {
    width: 20px;
    height: 20px;
    margin: 10px;
  }
}