:root {
  --topbar-bg-color: #222222;
}

html {
  font-size: 9px;
}

@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 1024px) {
    body {
      font-size: calc(1.4rem*1.15);
    }
  }
}

.display_with_cal .columns {
  display: flex;
  height: 100%;
  position: relative;
}
.display_with_cal .columns .left, .display_with_cal .columns .right {
  width: 50%;
}
.display_with_cal .columns .right {
  height: 100vh;
  position: relative;
}
.display_with_cal .columns .right .render_calendar {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 50%;
  width: calc( var(--site-width) / 2);
  padding-right: 2rem;
}
.display_with_cal .columns .right .render_calendar .calendar {
  height: 100vh;
}
@media screen and (max-width: 650px) {
  .display_with_cal .columns .right {
    display: none;
  }
  .display_with_cal .columns .left {
    width: 100%;
  }
}

body.week_view .display_with_cal {
  width: 100%;
  max-width: 100%;
}
body.week_view .display_with_cal .columns .left {
  max-width: 45rem;
}
body.week_view .display_with_cal .columns .right {
  width: 100%;
}
body.week_view .display_with_cal .columns .right .render_calendar {
  width: calc(100vw - 45rem - 2rem);
  left: auto;
}