/***************
  Styles for the Daily Schedule table layout.
  Everything is specified by the .daily-schedule class to prevent interfering with other tables
***************/
/*#249e34; */
/* Border framing Booking Form */
/* onfocus boxshadow color*/
/*
  Link color chosen to meet usability contrast requirements of 4.5 to 1 using tool at
 https://dequeuniversity.com/rules/axe/4.4/color-contrast?utm_source=lighthouse&utm_medium=lr
 $link-color: #108910;
 */
/* @Mixins Section */
/* See file FluidTypography.scss  Provides a way to fluidly change font, padding and other
   sizing as screen size changes.  EX:
   sizing as screen size changes.  EX:
   html {
  @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
}
*/
/*
   From https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
   Generates the css clamp function.
   Focused on font-size, but may be used for margins and padding

   Usage:
      clamped(min-size-px, max-size-px, min-browser-width-px, max-browser-width-px)
      font-size: clamped(26px, 36px, 600px, 1200px);
      font-size: clamped(26px, 36px);      //using width default values

*/
/* convenience mixin for bottom-only spacing */
table.daily-schedule {
  display: table;
  /* Allows adding a border as an unbroken line under a row */
  border: none;
  border-collapse: collapse;
  max-width: 100%;
  padding-left: 1.25rem;
}

@media only screen and (max-width: 800px) {
  .daily-schedule td,
.daily-schedule tr {
    width: 100%;
  }
  .daily-schedule tr td.activity {
    padding-left: 1.25rem;
    padding-right: 0rem;
    padding-top: 0rem;
  }
  .daily-schedule td.activity-time {
    font-size: clamp(1rem, 0.22vw + 0.93rem, 1.13rem); /* 17px */
    font-weight: 600;
    color: #83A348;
    padding-right: 0.3125rem;
  }
  .daily-schedule tr td:first-child, .Day {
    padding-left: 0.3125rem;
  }
  .daily-schedule .Day {
    background-color: #357266;
  }
  .daily-schedule td.Day {
    color: #ffffff;
    font-size: clamp(1.13rem, 0.22vw + 1.06rem, 1.25rem); /* 19px; */
    padding-top: 0.1875rem;
    padding-bottom: 0.1875rem;
    margin-top: 0.625rem;
  }
  .hide-on-phones {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
} /* @media only screen and (max-width: 500px) */
.daily-schedule th {
  text-align: left;
}

.daily-schedule th:first-child {
  padding-left: 1.875rem;
}

.daily-schedule td {
  padding-top: 0.625rem;
}

.daily-schedule th:last-child {
  padding-left: 1.875rem;
}

.daily-schedule td:last-child {
  padding-right: 1.875rem;
}

.daily-schedule .day-padding {
  padding-bottom: 0.625rem;
}

.daily-schedule .tr-color1 {
  background-color: #f3e0c1;
}

.daily-schedule .tr-color2 {
  background-color: #f8e9d4;
}

.daily-schedule .Day {
  font-size: clamp(1.25rem, 0.33vw + 1.15rem, 1.44rem); /* calc(20px + 0.390625vw);  */
  font-weight: 600;
  color: #A0C16D;
}

.daily-schedule tr td.activity-time {
  /* this specific width setting in rem keeps the time column to a minimum width so the pm does not wrap*/
  width: 8.75rem;
  font-size: clamp(1rem, 0.22vw + 0.93rem, 1.13rem); /*  calc(14px + 0.390625vw);  */
  vertical-align: top;
  /*Maintain space between time and Activity column*/
  padding-right: 1.875rem;
  padding-left: 0.9375rem;
}

/*# sourceMappingURL=daily-schedule.css.map */