/*@import url('https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.2.2/sketchy/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.2.2/flatly/bootstrap.min.css');*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.2.2/sandstone/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.css');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Tomorrow');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Muli');
@import url('https://fonts.googleapis.com/css?family=Inconsolata');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/******************************************************************************
 *
 *  HTMX LOADING BAR
 *
 */
.htmx-indicator {
  opacity: 0%;
}

  .htmx-indicator.htmx-request {
    opacity: 100%;
  }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Muli, Montserrat, Raleway, Roboto;
  padding-top: 16px;
}

body {
  font-family: Muli, Roboto, Arial, Helvetica, sans-serif;
}

/****** sketchy *****/
th {
  text-transform: lowercase;
}

.breadcrumb-item, .navbar-brand, .nav-link, .btn, b {
  text-transform: uppercase;
}
/****** sketchy *****/

ol.breadcrumb,
.btn {
  font-family: Tomorrow, Roboto, Arial, Helvetica, sans-serif;
}

label,
.col-form-label {
  font-family: 'Open Sans', Montserrat, Raleway, Roboto, Raleway, Garamond, Helvetica, Arial, sans-serif;
}

.form-control,
.form-select {
  font-family: Inconsolata, Roboto, Tomorrow;
  /*
    background-color: lightgoldenrodyellow;
    */
}

.breadcrumb-item a {
  text-decoration: none;
}

.hover-container .hover-display {
  display: none;
}

.hover-container:hover .hover-display {
  display: inline;
}

a {
  text-decoration: none;
}

.btn {
  cursor: pointer;
}

th.w75px,
td.w75px {
  width: 75px;
}

table.table-calendar tbody tr {
  min-height: 75px;
  height: 75px;
}

th.links-crud {
  width: 175px;
}

th {
  color: #8e8c84;
}

a.expando-link span {
  display: none;
}

a.expando-link:hover span {
  display: inline;
}

.cards .card {
  transition: all 0.2s ease;
  cursor: pointer;
}

  .cards .card:hover {
    box-shadow: 4px 4px 4px 4px #e9ecef;
    transform: scale(1.1);
  }

.cards .card-header {
  font-weight: bold;
  /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
}

.form-control,
.form-select {
  background-color: lightgoldenrodyellow;
}

.pointer {
  cursor: pointer;
}

.sort-handle {
  cursor: move;
}

fieldset {
  margin-bottom: 16px;
  /*border-bottom: dashed 1px #8e8c84;*/
}

  fieldset legend {
    font-weight: bold;
    color: #8e8c84;
    padding-bottom: 16px;
    /*border-bottom: dashed 1px #8e8c84;*/
  }

.requiredField,
.asteriskField {
  color: maroon;
}

.asteriskField {
  margin-left: 8px;
}

/******************************************************************************
 *  SOME WORKOUT CALENDAR DECORATIONS
 */
.workout-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

  .workout-calendar div {
    height: 90px;
    margin-bottom: 4px;
    padding-left: 0;
    padding-right: 0;
  }

    .workout-calendar div div {
      background-color: #e9ecef;
      margin-left: 4px;
      padding: 8px;
    }

.workout-calendar-item {
  position: relative; /* Needed for absolute positioning of week number */
}

.is-sunday {
  /* Any specific styling for Sundays if needed */
}

.week-number {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: small; /* Adjust as needed */
  /* Optionally hide it by default and only show for Sundays */
  opacity: 0;
  pointer-events: none; /* Prevent it from interfering with clicks */
}

.is-sunday .week-number {
  opacity: 1; /* Show the week number for Sunday divs */
  pointer-events: auto;
}