@import url("https://fonts.googleapis.com/css2?family=Jost:wght@200..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap");
/*
264653
2a9d8f
e9c46a
f4a261
e76f51

white-red:
$custom-color: #f4f1de; // e9c46a; // yellow
$dark-color: #e76f51; // dark cyan
$light-color: #a93a1e; // f4f1de; // off-white
$background-color: #2a9d8f; // cyan
$shadow-color: transparentize($dark-color, 0.6);
$light-shadow-color: transparentize($dark-color ,0.80);
$cloud-color: rgba(255,255,255,0.33);
$timeMarker-blendMode: multiply;

std:
$custom-color: #e9c46a; // yellow
$dark-color: #335c67; // dark cyan
$light-color: #f4f1de; // off-white
$background-color: #2a9d8f; // cyan

$shadow-color: rgba(0,0,0,0.20);
$light-shadow-color: rgba(0,0,0,0.10);
$cloud-color: rgba(255,255,255,0.33);
$timeMarker-blendMode: lighten;

dark test:
$custom-color: #999999; // e9c46a; // yellow
$dark-color: #000000; // dark cyan
$light-color: #e76f51; // f4f1de; // off-white
$background-color: #2a9d8f; // cyan
$shadow-color: rgba(0,0,0,0.20);
$light-shadow-color: rgba(0,0,0,0.10);
$cloud-color: rgba(255,255,255,0.33);

*/
a {
  color: #3f867b;
}

a:hover {
  color: #3f867b;
}

.bg-transparent {
  background-color: transparent;
}

.fg-custom {
  color: #ffffff;
}

.bg-custom {
  background-color: #ffffff;
}

.fg-dark {
  color: #3f867b;
}

.bg-dark {
  background-color: #3f867b;
}

.fg-light {
  color: #e76f51;
}

.bg-light {
  background-color: #e76f51;
}

.fg-shadow {
  color: rgba(63, 134, 123, 0.4);
}

.bg-shadow {
  background-color: rgba(63, 134, 123, 0.4);
}

.fg-light-shadow {
  color: rgba(63, 134, 123, 0.2);
}

.bg-light-shadow {
  background-color: rgba(63, 134, 123, 0.2);
}

.fg-cloud {
  color: rgba(255, 255, 255, 0.33);
}

.bg-cloud {
  background-color: rgba(255, 255, 255, 0.33);
}

.fg-light-cloud {
  color: rgba(255, 255, 255, 0.75);
}

.bg-light-cloud {
  background-color: rgba(255, 255, 255, 0.75);
}

.fg-black {
  color: #000000;
}

.bg-black {
  background-color: #000000;
}

.fg-white {
  color: #ffffff;
}

.bg-white {
  background-color: #ffffff;
}

.link-dark {
  color: #3f867b;
}

.link-dark:hover {
  color: #3f867b;
}

.link-light {
  color: #e76f51;
}

.link-light:hover {
  color: #e76f51;
}

.link-custom {
  color: #ffffff;
}

.link-custom:hover {
  color: #ffffff;
}

.link-black {
  color: #000000;
}

.link-black:hover {
  color: #000000;
}

.link-white {
  color: #ffffff;
}

.link-white:hover {
  color: #ffffff;
}

/*
264653
2a9d8f
e9c46a
f4a261
e76f51

white-red:
$custom-color: #f4f1de; // e9c46a; // yellow
$dark-color: #e76f51; // dark cyan
$light-color: #a93a1e; // f4f1de; // off-white
$background-color: #2a9d8f; // cyan
$shadow-color: transparentize($dark-color, 0.6);
$light-shadow-color: transparentize($dark-color ,0.80);
$cloud-color: rgba(255,255,255,0.33);
$timeMarker-blendMode: multiply;

std:
$custom-color: #e9c46a; // yellow
$dark-color: #335c67; // dark cyan
$light-color: #f4f1de; // off-white
$background-color: #2a9d8f; // cyan

$shadow-color: rgba(0,0,0,0.20);
$light-shadow-color: rgba(0,0,0,0.10);
$cloud-color: rgba(255,255,255,0.33);
$timeMarker-blendMode: lighten;

dark test:
$custom-color: #999999; // e9c46a; // yellow
$dark-color: #000000; // dark cyan
$light-color: #e76f51; // f4f1de; // off-white
$background-color: #2a9d8f; // cyan
$shadow-color: rgba(0,0,0,0.20);
$light-shadow-color: rgba(0,0,0,0.10);
$cloud-color: rgba(255,255,255,0.33);

*/
a {
  color: #3f867b;
}

a:hover {
  color: #3f867b;
}

.bg-transparent {
  background-color: transparent;
}

.fg-custom {
  color: #ffffff;
}

.bg-custom {
  background-color: #ffffff;
}

.fg-dark {
  color: #3f867b;
}

.bg-dark {
  background-color: #3f867b;
}

.fg-light {
  color: #e76f51;
}

.bg-light {
  background-color: #e76f51;
}

.fg-shadow {
  color: rgba(63, 134, 123, 0.4);
}

.bg-shadow {
  background-color: rgba(63, 134, 123, 0.4);
}

.fg-light-shadow {
  color: rgba(63, 134, 123, 0.2);
}

.bg-light-shadow {
  background-color: rgba(63, 134, 123, 0.2);
}

.fg-cloud {
  color: rgba(255, 255, 255, 0.33);
}

.bg-cloud {
  background-color: rgba(255, 255, 255, 0.33);
}

.fg-light-cloud {
  color: rgba(255, 255, 255, 0.75);
}

.bg-light-cloud {
  background-color: rgba(255, 255, 255, 0.75);
}

.fg-black {
  color: #000000;
}

.bg-black {
  background-color: #000000;
}

.fg-white {
  color: #ffffff;
}

.bg-white {
  background-color: #ffffff;
}

.link-dark {
  color: #3f867b;
}

.link-dark:hover {
  color: #3f867b;
}

.link-light {
  color: #e76f51;
}

.link-light:hover {
  color: #e76f51;
}

.link-custom {
  color: #ffffff;
}

.link-custom:hover {
  color: #ffffff;
}

.link-black {
  color: #000000;
}

.link-black:hover {
  color: #000000;
}

.link-white {
  color: #ffffff;
}

.link-white:hover {
  color: #ffffff;
}

.loader {
  display: inline-block;
  width: 0.75em;
  box-sizing: border-box;
  line-height: 0;
  padding: 0.075em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #3f867b;
  --_m:
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l3 1s infinite linear;
}

@keyframes l3 {
  to {
    transform: rotate(1turn);
  }
}
.loader_clock {
  width: 60px;
  aspect-ratio: 1;
  display: flex;
  border: 4px solid;
  box-sizing: border-box;
  border-radius: 50%;
  background: radial-gradient(circle 5px, currentColor 95%, rgba(0, 0, 0, 0)), linear-gradient(currentColor 50%, rgba(0, 0, 0, 0) 0) 50%/4px 60% no-repeat;
  animation: l1 2s infinite linear;
}

.loader_clock:before {
  content: "";
  flex: 1;
  background: linear-gradient(currentColor 50%, rgba(0, 0, 0, 0) 0) 50%/4px 80% no-repeat;
  animation: inherit;
}

@keyframes l1 {
  100% {
    transform: rotate(1turn);
  }
}
/* base */
/* Wide - Minimum aspect ratio */
@media (min-aspect-ratio: 8/7) {
  :root {
    --headerMaxWidth: 30%;
    --elementsDisplayOnWideScreen: block;
    --elementsHiddenOnWideScreen: none;
    --elementsDisplayOnNarrowScreen: none;
    --elementsHiddenOnNarrowScreen: block;
    --elementsDisplayOnExtraNarrowScreen: none;
    --elementsHiddenOnExtraNarrowScreen: block;
    --menuRight_minWidth: 33vw;
    --menuRight_maxWidth: 33vw;
    --menuRight_paddingLeft: 2rem;
    --menuRight_left: null;
    --menuRight_right: 0;
  }
}
/* Narrow - Maximum aspect ratio */
@media (max-aspect-ratio: 8/7) {
  :root {
    --headerMaxWidth: 2rem;
    --elementsDisplayOnWideScreen: none;
    --elementsHiddenOnWideScreen: block;
    --elementsDisplayOnNarrowScreen: block;
    --elementsHiddenOnNarrowScreen: none;
    --elementsDisplayOnExtraNarrowScreen: none;
    --elementsHiddenOnExtraNarrowScreen: block;
    --menuRight_minWidth: 100vw;
    --menuRight_maxWidth: 100vw;
    --menuRight_left: 0;
    --menuRight_right: 0;
  }
}
/* Extra narrow - Maximum aspect ratio */
@media (max-aspect-ratio: 6/7) {
  :root {
    --elementsDisplayOnExtraNarrowScreen: block;
    --elementsHiddenOnExtraNarrowScreen: none;
  }
  .menuRight .font-medium {
    font-size: 1.5rem !important;
    line-height: 2.025rem !important;
  }
}
/* xs */
@media screen and (max-width: 600px) {
  html {
    font-size: 3vmin;
  }
  :root {
    --leftColumnWidth: 7rem;
    --headerClockColumnWidth: 17rem;
    --headerClockFloat: none;
    --activeEventDetails_display: block;
    --activeRoutineDetails_display: none;
    --activeEventDescription_fontSize: 2.5rem;
    --activeEventDescription_fontWeight: 2.5rem;
    --activeRoutineDescription_display: block;
    --activeRoutineProfilePic_size: 2.25rem;
    --activeRoutineName_fontSize: 1.5rem;
    --activeRoutineName_fontWeight: 400;
    --activeRoutineName_lineHeight: 2.025rem;
    --activeRoutineDescriptionClearFloat: both;
    --menuBrowseColumnWidth: 100vw/1;
    --menuFull_fontSize: 8vw;
    --fullscreen_fontSize: 7vw;
    --fullscreenEventWidth: 95vw;
    --fullscreenEventAlign: center;
  }
}
@media screen and (min-width: 601px) {
  html {
    font-size: 2vmin;
  }
  :root {
    --leftColumnWidth: 7rem;
    --headerClockColumnWidth: 17rem;
    --headerClockFloat: none;
    --activeEventDetails_display: block;
    --activeRoutineDetails_display: none;
    --activeEventDescription_fontSize: 2.5rem;
    --activeEventDescription_fontWeight: 2.5rem;
    --activeRoutineDescription_display: block;
    --activeRoutineProfilePic_size: 2.25rem;
    --activeRoutineName_fontSize: 1.5rem;
    --activeRoutineName_fontWeight: 400;
    --activeRoutineName_lineHeight: 2.025rem;
    --activeRoutineDescriptionClearFloat: both;
    --menuBrowseColumnWidth: 48vw;
    --menuFull_fontSize: 8vw;
    --fullscreen_fontSize: 6vw;
    --fullscreenEventWidth: 90vw;
    --fullscreenEventAlign: center;
  }
}
/* sm */
@media screen and (min-width: 768px) {
  html {
    font-size: 1.7vmin;
  }
  :root {
    --leftColumnWidth: 7rem;
    --headerClockColumnWidth: 17rem;
    --headerClockFloat: none;
    --activeEventDetails_display: block;
    --activeRoutineDetails_display: none;
    --activeEventDescription_fontSize: 2.5rem;
    --activeEventDescription_fontWeight: 2.5rem;
    --activeRoutineDescription_display: block;
    --activeRoutineProfilePic_size: 2.25rem;
    --activeRoutineName_fontSize: 1.5rem;
    --activeRoutineName_fontWeight: 400;
    --activeRoutineName_lineHeight: 2.025rem;
    --activeRoutineDescriptionClearFloat: both;
    --menuBrowseColumnWidth: 30vw;
    --menuFull_fontSize: 4vw;
    --fullscreen_fontSize: 4vw;
    --fullscreenEventWidth: 85vw;
    --fullscreenEventAlign: center;
  }
}
/* md */
@media screen and (min-width: 992px) {
  html {
    font-size: 1.9vmin;
  }
  :root {
    --leftColumnWidth: 11rem;
    --headerClockColumnWidth: 17rem;
    --headerClockFloat: none;
    --activeEventDetails_display: block;
    --activeRoutineDetails_display: block;
    --activeEventDescription_fontSize: 2.5rem;
    --activeEventDescription_fontWeight: 400;
    --activeRoutineDescription_display: block;
    --activeRoutineProfilePic_size: 2.25rem;
    --activeRoutineName_fontSize: 1.5rem;
    --activeRoutineName_fontWeight: 400;
    --activeRoutineName_lineHeight: 2.025rem;
    --activeRoutineDescriptionClearFloat: right;
    --menuBrowseColumnWidth: 30vw;
    --menuFull_fontSize: 3vw;
    --fullscreen_fontSize: 3vw;
    --fullscreenEventWidth: 66vw;
    --fullscreenEventAlign: left;
  }
}
/* lg */
@media screen and (min-width: 1500px) {
  html {
    font-size: 2vmin;
  }
  :root {
    --leftColumnWidth: 17rem;
    --headerClockColumnWidth: 17rem;
    --headerClockFloat: none;
    --activeEventDetails_display: block;
    --activeRoutineDetails_display: block;
    --activeEventDescription_fontSize: 2.5rem;
    --activeEventDescription_fontWeight: 400;
    --activeRoutineDescription_display: block;
    --activeRoutineProfilePic_size: 2.25rem;
    --activeRoutineName_fontSize: 1.5rem;
    --activeRoutineName_fontWeight: 400;
    --activeRoutineName_lineHeight: 2.025rem;
    --activeRoutineDescriptionClearFloat: right;
    --menuBrowseColumnWidth: 23vw;
    --menuFull_fontSize: 2vw;
    --fullscreen_fontSize: 2vw;
    --fullscreenEventWidth: 66vw;
    --fullscreenEventAlign: left;
  }
}
/* xl */
@media screen and (min-width: 1800px) {
  html {
    font-size: 1.7vmin;
  }
  :root {
    --leftColumnWidth: 17rem;
    --headerClockColumnWidth: 16rem;
    --headerClockFloat: left;
    --activeEventDetails_display: block;
    --activeRoutineDetails_display: block;
    --activeEventDescription_fontSize: 2.5rem;
    --activeEventDescription_fontWeight: 400;
    --activeRoutineDescription_display: block;
    --activeRoutineProfilePic_size: 2.25rem;
    --activeRoutineName_fontSize: 1.5rem;
    --activeRoutineName_fontWeight: 400;
    --activeRoutineName_lineHeight: 2.025rem;
    --activeRoutineDescriptionClearFloat: right;
    --menuBrowseColumnWidth: 18vw;
    --menuFull_fontSize: 2vw;
    --fullscreen_fontSize: 2vw;
    --fullscreenEventWidth: 50vw;
    --fullscreenEventAlign: left;
  }
}
.noprint {
  display: inline;
}

.noscreen {
  display: none;
}

@media print {
  .noprint {
    display: none;
  }
  .noscreen {
    display: inline;
  }
}
body {
  font: 100% Jost, Futura, Rubik, Helvetica, sans-serif;
  font-size: 2vmin;
  font-weight: 375;
  color: #e76f51;
  margin: 0;
  cursor: default;
  background-color: #ffffff;
}

.page {
  margin-top: 5vh;
  margin-bottom: 5vh;
  text-align: center;
  display: flex;
  min-height: 90vh;
  flex-direction: column;
  justify-content: flex-start;
}

/* type */
* {
  letter-spacing: 0.05em;
}

.type-round {
  font-family: Nunito;
}

.scalingFont {
  font-size: var(--menuFull_fontSize) !important;
  line-height: 1.2em !important;
}

.scalingFont_small {
  font-size: calc(var(--menuFull_fontSize) * 0.66) !important;
  line-height: 1.2em !important;
}

.scalingFontFS {
  font-size: var(--fullscreen_fontSize) !important;
  line-height: 1.3em !important;
}

.scalingFontFS_x2 {
  font-size: calc(var(--fullscreen_fontSize) * 2) !important;
  line-height: 1.3em !important;
}

.font-thin {
  font-weight: 200 !important;
}

.font-bold {
  font-weight: 600 !important;
}

.inputBox {
  padding: 0.33rem;
  padding-left: 0.5rem;
  border: none;
  outline: none;
  width: 100%;
}

.inputLink {
  padding: 0.33rem;
  padding-left: 0.5rem;
}

.formButtonRounded {
  padding: 0.1rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 1em;
}

.linkRestricted {
  opacity: 0.5;
}

.underline-light {
  border-bottom: 4px solid #e76f51;
}

.link {
  cursor: pointer;
  text-decoration: none;
}

.link:hover {
  text-decoration: none;
}

.font-small {
  font-size: 1rem;
  font-weight: 350;
  line-height: 1.5rem;
}

.font-medium {
  font-size: 2vmin;
  font-weight: 375;
  line-height: 3vmin;
}

.font-large {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2.025rem;
}

.font-mega {
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 3.125rem;
}

.text-align-left {
  text-align: left !important;
}

.text-align-center {
  text-align: center !important;
}

.text-align-right {
  text-align: right !important;
}

/* generic */
.rotate45 {
  transform: rotate(45deg);
}

.hiddenUntilLoaded {
  display: none !important;
}

.hiddenElement_ni {
  display: none;
}

.hiddenElement {
  display: none !important;
}

.padding-zero {
  padding: 0 !important;
}

.margin-zero {
  margin: 0 !important;
}

.disabled {
  pointer-events: none;
}

.floatLeft {
  float: left !important;
}

.floatNone {
  float: none !important;
  clear: both !important;
}

.floatRight {
  float: right !important;
}

.rowFlex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  float: none;
}
.rowFlex .flex-left {
  flex: 1;
  display: block;
  text-align: left;
}
.rowFlex .flex-center {
  flex: 1;
  display: block;
  text-align: center;
}
.rowFlex .flex-right {
  flex: 1;
  display: block;
  text-align: right;
}

.display-inline-block {
  display: inline-block;
}

.dot-tiny {
  display: inline-block;
  width: 0.8vmin;
  height: 0.8vmin;
  border-radius: 50%;
  box-sizing: border-box;
  line-height: 0;
}

.dot-small {
  display: inline-block;
  width: 1.5vmin;
  height: 1.5vmin;
  border-radius: 50%;
  box-sizing: border-box;
  line-height: 0;
}

.dot {
  display: inline-block;
  width: 3vmin;
  height: 3vmin;
  border-radius: 50%;
  box-sizing: border-box;
  line-height: 0;
}

.dot-large {
  display: inline-block;
  width: 600;
  height: 600;
  border-radius: 50%;
  box-sizing: border-box;
  line-height: 0;
}

.li-h-l {
  float: left;
  padding-right: 0.75em;
}

.li-h-r {
  float: right;
  padding-right: 0.75em;
}

.chevron::before {
  margin-right: 0.75em;
  border-style: solid;
  border-width: 0.125em 0.125em 0 0;
  content: "";
  display: inline-block;
  height: 0.45em;
  left: 0.15em;
  position: relative;
  top: 0.15em;
  transform: rotate(-45deg);
  vertical-align: top;
  width: 0.45em;
  top: 0;
  transform: rotate(135deg);
}

.playPause {
  display: inline-block;
  width: 1.5vmin;
  height: 1.5vmin;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  cursor: pointer;
  border-style: solid;
  border-width: 0.75vmin 0 0.75vmin 1.2vmin;
}
.playPause.paused {
  border-style: double;
  border-width: 0rem 0 0rem 1.2vmin;
}
.playPause:hover {
  border-color: transparent transparent transparent #404040;
}

.ul-horizontal {
  display: inline-block;
  padding: 0;
  margin: 0;
  list-style-type: none;
  overflow: hidden;
}
.ul-horizontal li {
  display: inline-block;
  float: left;
  padding: 0;
  margin: 0;
  padding-right: 0.75em;
}

.ul-vertical-center {
  display: block;
  padding: 0;
  margin: 0;
  list-style-type: none;
  overflow: hidden;
}
.ul-vertical-center li {
  display: inline-block;
  padding: 0;
  margin: 0;
  text-align: center;
  float: none !important;
}

/* d.p. custom */
.container {
  background-color: var(--bg);
  margin: auto;
  max-width: 100vw;
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100vh;
}

#layoutRoot {
  background-color: #ffffff;
}

.routineFooter {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 1.5rem;
  padding-bottom: 0.375rem;
  overflow: hidden;
}
.routineFooter div {
  padding-bottom: 4px;
}
.routineFooter ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  overflow: hidden;
}
.routineFooter li {
  float: left;
  padding-right: 0.75em;
}
.routineFooter .footerRow {
  flex: 1;
  display: block;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.routineHeader {
  display: block;
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  box-shadow: 6px 6px 30px rgba(63, 134, 123, 0.2);
}
.routineHeader ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  overflow: hidden;
}
.routineHeader li {
  float: left;
  padding-right: 0.75em;
}
.routineHeader .leftColumn {
  width: var(--headerClockColumnWidth);
  float: var(--headerClockFloat);
}
.routineHeader .row {
  /*display: flex;

  flex-direction: row;
  justify-content: space-between;

  align-items: stretch;*/
  padding: 2rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
}
.routineHeader .borderBottom {
  border-bottom: rgba(63, 134, 123, 0.2) solid 1px;
}
.routineHeader .clock {
  font-size: var(--activeEventDescription_fontSize);
  font-weight: var(--activeEventDescription_fontWeight);
  line-height: 1.3em;
}
.routineHeader .flex-right {
  flex-shrink: 0;
}

.clockDelimiter {
  padding-right: 0.125em !important;
  padding-left: 0.125em !important;
}

.activeRoutineProfilePic img {
  display: inline-block;
  border: #3f867b solid 3px;
  width: var(--activeRoutineProfilePic_size);
  height: var(--activeRoutineProfilePic_size);
  border-radius: 50%;
  box-sizing: border-box;
  line-height: 0;
}

.activeRoutineName {
  display: flex;
  font-size: var(--activeRoutineName_fontSize);
  font-weight: var(--activeRoutineName_fontWeight);
  line-height: var(--activeRoutineName_lineHeight);
  float: right;
  justify-content: center;
  align-items: center;
}

.activeRoutineDescription {
  display: var(--activeRoutineDescription_display);
  clear: both;
  opacity: 0.5;
}

#activeEventMain {
  max-height: 33vh;
  overflow: auto;
}

#activeEventDetails {
  margin-top: 1rem;
  display: var(--activeEventDetails_display);
  opacity: 0.5;
}

#activeRoutineDetails {
  display: var(--activeRoutineDetails_display);
  opacity: 0.5;
}

.activeEventTitleVar {
  font-size: var(--activeEventDescription_fontSize);
  font-weight: var(--activeEventDescription_fontWeight);
  line-height: 1.3em;
  justify-content: center;
  align-items: center;
}

.activeEventDescription {
  font-size: var(--activeEventDescription_fontSize);
  font-weight: var(--activeEventDescription_fontWeight);
  line-height: 1.3em;
  opacity: 0.75;
}

.routineDayView {
  overflow: auto;
  white-space: nowrap;
}
.routineDayView #routineDayView_time {
  padding-top: 100px;
}
.routineDayView #routineDayView_data {
  padding-top: 100px;
}
.routineDayView .leftCol {
  float: left;
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 400;
  width: var(--leftColumnWidth);
  border-right: #ffffff solid 3px;
}
.routineDayView .leftCol ul {
  line-height: 1.5rem;
  padding-left: 0;
  padding-right: 1rem;
  margin: 0;
  list-style-type: none;
  overflow: hidden;
}
.routineDayView .leftCol li {
  text-align: right;
  height: 3rem;
}
.routineDayView .rightCol {
  clear: both;
  display: inline-block;
  overflow: hidden;
}
.routineDayView .rightCol #dvEvents1c4r ul {
  line-height: 1.5rem;
  padding-left: 0;
  padding-right: 1rem;
  margin: 0;
  list-style-type: none;
}
.routineDayView .rightCol #dvEvents1c4r li {
  text-align: left;
  height: 3rem;
}
.routineDayView .rightCol #dvEvents1c4r li #dvTimeSlot {
  display: block;
  white-space: nowrap;
  height: 3rem;
}
.routineDayView .rightCol #dvEvents1c4r li #dvTimeSlot ul {
  list-style-type: none;
}
.routineDayView .rightCol #dvEvents1c4r li #dvTimeSlot li {
  display: inline-block;
}
.routineDayView .rightCol #dvEvents1c4r li #dvTimeSlot li .eventContainer {
  display: table;
  height: 3rem;
  float: left;
  margin-left: 0.5rem;
}
.routineDayView .rightCol #dvEvents1c4r li #dvTimeSlot li .eventContainerStarting {
  border-top-left-radius: 3vmin;
  border-top-right-radius: 3vmin;
}
.routineDayView .rightCol #dvEvents1c4r li #dvTimeSlot li .eventContainerStartingEnding {
  border-radius: 3vmin;
}
.routineDayView .rightCol #dvEvents1c4r li #dvTimeSlot li .eventContainerEnding {
  border-bottom-left-radius: 3vmin;
  border-bottom-right-radius: 3vmin;
}
.routineDayView .rightCol #dvEvents1c4r li #dvTimeSlot li .event {
  padding: 0.5rem;
  padding-left: 3vmin;
  padding-right: 3vmin;
  font-size: 2vmin;
  font-weight: 375;
  line-height: 2vmin;
  border-radius: 3vmin;
  box-shadow: 3px 3px 15px rgba(63, 134, 123, 0.4);
}
.routineDayView .rightCol #dvEventsXc2r ul {
  line-height: 1.5rem;
  padding-right: 1rem;
  margin: 0;
  list-style-type: none;
}
.routineDayView .rightCol #dvEventsXc2r li {
  text-align: left;
  height: 6rem;
}
.routineDayView .rightCol #dvEventsXc2r li #dvTimeSlot {
  white-space: nowrap;
}
.routineDayView .rightCol #dvEventsXc2r li #dvTimeSlot ul {
  list-style-type: none;
}
.routineDayView .rightCol #dvEventsXc2r li #dvTimeSlot li {
  display: inline-block;
}
.routineDayView .rightCol #dvEventsXc2r li #dvTimeSlot li .eventContainer {
  display: table;
  height: 6rem;
  float: left;
}
.routineDayView .rightCol #dvEventsXc2r li #dvTimeSlot li .eventPositioner {
  display: table-cell;
  padding-right: 0.75rem;
}
.routineDayView .rightCol #dvEventsXc2r li #dvTimeSlot li .eventPositioner_30 {
  padding-top: 3rem;
}
.routineDayView .rightCol #dvEventsXc2r li #dvTimeSlot li .event {
  padding: 0.5rem;
  padding-left: 3vmin;
  padding-right: 3vmin;
  margin-left: 0.5rem;
  font-size: 2vmin;
  font-weight: 375;
  line-height: 2vmin;
  border-radius: 3vmin;
  box-shadow: 3px 3px 15px rgba(63, 134, 123, 0.4);
}
.routineDayView #timeMarker {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 3px;
  background: #e76f51;
  box-shadow: 3px 3px 15px rgba(63, 134, 123, 0.4);
  mix-blend-mode: multiply;
}
.routineDayView #timeMarkerDotContainer {
  display: block;
  position: absolute;
  top: 0px;
  left: var(--leftColumnWidth);
}
.routineDayView #timeMarkerDot {
  display: block;
  position: absolute;
  top: -1.4vmin;
  left: -1.4vmin;
  width: 3vmin;
  height: 3vmin;
  border-radius: 50%;
  box-sizing: border-box;
  background: #e76f51;
  box-shadow: 3px 3px 15px rgba(63, 134, 123, 0.4);
}

/*.contact {
    font-size: $fontSize_large;
    font-weight: $fontWeight_large;
    color: $dark-color;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 2em;
    padding-top: $headerHeight * 1.5;
    div {
        flex: 1;
        margin: 2em;
    }
}
*/
/*.header {
    position:absolute;
    left:0vw;
    top:2vh;

    text-align: center;
    display: flex;
    height: $headerHeight;
    width: 100vw;
    flex-direction: row;
    justify-content: flex-start;

    //background-color: #ff0000;

    font-size: $fontSize;

    img {
        height: $headerHeight;
    }

    a {

    }
}*/
.fullscreenRoot {
  position: fixed;
  overflow: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreenEvent {
  max-width: var(--fullscreenEventWidth);
  text-align: var(--fullscreenEventAlign);
}
.fullscreenEvent ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  overflow: hidden;
  text-align: var(--fullscreenEventAlign);
}
.fullscreenEvent li {
  float: left;
}
.fullscreenEvent .leftColumn {
  width: var(--headerClockColumnWidth);
  float: var(--headerClockFloat);
}

.fullscreenHeader {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  padding: 1.625rem;
  padding-top: 1.375rem;
}

.fullscreenFooter {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 1.625rem;
  padding-bottom: 1.375rem;
}

.menuFull {
  position: fixed;
  overflow: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.menuFull .menuInnerContainer {
  padding: 1.625rem;
  padding-top: 0.375rem;
}
.menuFull .menuInnerContainer .row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  gap: 1rem;
}
.menuFull .menuInnerContainer .row ul {
  padding: 0;
  padding-top: 2rem;
  margin: 0;
  list-style-type: none;
  overflow: hidden;
}
.menuFull .menuInnerContainer .row li {
  float: left;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
.menuFull .menuInnerContainer .column {
  display: flex;
  flex-direction: column;
  width: var(--menuBrowseColumnWidth);
}
.menuFull .menuInnerContainer .column ul {
  padding-top: 2rem;
  margin: 0;
  list-style-type: none;
  overflow: hidden;
}
.menuFull .menuInnerContainer .column li {
  float: none;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.menuRight {
  position: fixed;
  overflow: auto;
  left: var(--menuRight_left);
  right: var(--menuRight_right);
  top: 0;
  bottom: 0;
  min-width: var(--menuRight_minWidth);
  max-width: var(--menuRight_maxWidth);
  box-shadow: 6px 6px 30px rgba(63, 134, 123, 0.2);
}
.menuRight .menuInnerContainer {
  padding: 1.625rem;
  padding-top: 0.375rem;
}
.menuRight .menuInnerContainer ul {
  padding: 0;
  padding-top: 2rem;
  margin: 0;
  list-style-type: none;
  overflow: hidden;
}
.menuRight .menuInnerContainer li {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.menuHeader {
  padding: 1.625rem;
  padding-top: 1.625rem;
  padding-bottom: 0.375rem;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.menuVisibility {
  display: var(--elementsDisplayOnWideScreen) !important;
}

.menuButton {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  padding: 0.375rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: var(--activeRoutineName_fontSize);
  font-weight: var(--activeRoutineName_fontWeight);
  line-height: var(--activeRoutineName_lineHeight);
  border-radius: 2.25rem;
  box-shadow: 3px 3px 15px rgba(63, 134, 123, 0.4);
}

.menuButton-black {
  box-shadow: 3px 3px 15px #000000;
}

#main_link_fullscreen {
  display: var(--elementsDisplayOnWideScreen) !important;
}

.displayOnWideScreen {
  display: var(--elementsDisplayOnWideScreen) !important;
}

.displayOnNarrowScreen {
  display: var(--elementsDisplayOnNarrowScreen) !important;
}

.displayOnExtraNarrowScreen {
  display: var(--elementsDisplayOnExtraNarrowScreen) !important;
}

.hideOnWideScreen {
  display: var(--elementsHiddenOnWideScreen) !important;
}

.hideOnNarrowScreen {
  display: var(--elementsHiddenOnNarrowScreen) !important;
}

.hideOnExtraNarrowScreen {
  display: var(--elementsHiddenOnExtraNarrowScreen) !important;
}

.progressBarFrame {
  display: block;
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 0.125rem;
  margin-top: 0.75em;
  margin-left: 2rem;
}
.progressBarFrame .progressBar {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: 0.125rem;
}

.editorPreviewEvent {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding: 0.75em;
  padding-left: 1em;
  padding-right: 1em;
  font-size: 1em;
  line-height: 1em;
  border-radius: 1.5em;
  box-shadow: 3px 3px 15px rgba(63, 134, 123, 0.2);
}

.delimiter {
  margin-top: 0.75em;
  border-bottom: rgba(63, 134, 123, 0.2) solid 1px;
  margin-bottom: 1.25em;
}

.ph, .ph-bold, .ph-duotone, .ph-fill {
  margin-right: 0.66em;
  font-size: 0.75em !important;
}

.dim {
  opacity: 0.5;
}

.opacityZero {
  opacity: 0;
}

/*# sourceMappingURL=main.css.map */