/** ---------------------------------------------------------------------------
 *
 * App Styles
 *
 * --------------------------------------------------------------------------*/


/**
 * App Layout
 *
 * Header and Footer and sticky and the main area is a scrollable content area
 * --------------------------------------------------------------------------*/
.border-bottom {
  border-bottom: 1px solid var(--yas-blue-80);
}

.border-top {
  border-top: 1px solid var(--yas-blue-80);
}

.border-all {
  border: 1px solid var(--yas-blue-80);
}

.footer {
  /* @note for the floating add button */
  position: relative;
}

.create-btn {
  position: absolute;
  /* @note position to the right of the footer */
  right: 10px;
  /* @note position btn above the footer - number is magic */
  top: -78px;
}

/* @note the table component has a caption element which is absolutely
 * positioned and this cause space at the bottom of the screen to be created.
 * setting the parent to relative resolves this.  We shold investigate an
 * alternative. */
.nutrient-table-wrapper {
  position: relative;
}


/* Workout */

.excercise-segment__title {
  border-bottom: 1px solid var(--yas-black);
}