.main-dashboard {
  position: relative;
  background-color: var(--dashboard-bg-color);
  background-image: var(--background-pattern-url);
  background-repeat: repeat;
}
.main-dashboard {
  color: var(--dashboard-text-color);
}
.main-dashboard > * {
  position: relative;
}
.main-dashboard::before {
  content: "";
  z-index: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(160deg, var(--dashboard-bg-gradient) 30%, transparent);
}

.add-wave--dash {
  position: absolute;
  top: -50vmin;
  right: 0%;
  z-index: -1;
  pointer-events: none;
}
.dashboard h1 {
  color: var(--dashboard-text-color);
}
.dashboard > h1, .dashboard > h2, .dashboard .user-info {
  grid-column: 1/span calc(var(--half) - 1);
}
.dashboard .overview {
  grid-column: var(--half)/span calc(var(--half) + 1);
  grid-row: auto/span all;
}
.dashboard h2 {
  color: var(--secondary-color);
}
.dashboard .user-info h1 {
  margin-bottom: 1.2em;
}
.dashboard .user-info h2 {
  margin-top: 2em;
  color: var(--dashboard-text-color);
}
.dashboard .user-info p {
  max-width: 45ch;
  color: var(--dashboard-text-color);
}
.dashboard .user-info p b {
  color: var(--dashboard-text-color);
}
.dashboard .user-info a {
  color: inherit;
}
@media (hover: hover) {
  .dashboard .user-info a:hover {
    text-decoration: none;
  }
}
.dashboard .user-info .welcome {
  color: var(--dashboard-text-color);
}
.dashboard .updated {
  font-weight: 300;
  color: var(--action-color);
  font-style: italic;
}
.dashboard .wpua-edit h3 {
  color: var(--dashboard-text-color);
}
.dashboard .wpua-edit button, .dashboard .wpua-edit input[type=submit] {
  --background-color: var(--dashboard-text-color);
  --color: var(--dashboard-bg-color);
  font-size: 0.8em;
  padding: 1em;
}
.dashboard .edit-profile-btn, .dashboard .edit-prefs-btn {
  font-size: 0.8em;
}
.dashboard .edit-profile-btn::part(base), .dashboard .edit-prefs-btn::part(base) {
  color: var(--dashboard-text-color);
}
.dashboard .edit-profile-btn svg, .dashboard .edit-prefs-btn svg {
  margin: 0;
  height: 100%;
  width: auto;
}
.dashboard .extra {
  background-color: var(--background);
  margin: 2em 0;
  margin-left: calc(-1 * var(--padding-side));
  padding: 3em 6em 3em var(--padding-side);
}
.dashboard .extra h2 {
  margin: 0 0 0.8em;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.dashboard .extra h2 svg, .dashboard .extra h2 img {
  max-height: 1.5em;
  margin-left: 0.5em;
}
.dashboard .extra p {
  color: var(--dashboard-text-color);
}
.dashboard .extra sl-button {
  margin-top: 2em;
}
.dashboard sl-dialog {
  color: var(--body-text-color);
}
@media screen and (max-width: 1060px) {
  .dashboard .overview, .dashboard .user-info, .dashboard > h1, .dashboard > h2 {
    grid-column: 1/span var(--columns);
  }
  .dashboard .user-info {
    padding: 0 2em 5em;
  }
  .dashboard .extra {
    margin: 0 auto 1.5em;
    padding: 3em;
  }
}
@media screen and (max-width: 768px) {
  .dashboard {
    padding: 0;
  }
  .dashboard > h1 {
    padding: 0 1rem;
  }
}
@media screen and (max-width: 500px) {
  .dashboard h1 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 425px) {
  .dashboard .user-info {
    padding: 0 1em 3em;
  }
  .dashboard .extra {
    margin: 0 -1em 1.5em;
  }
}

.event {
  grid-column: 1/span var(--columns);
}

.one-to-one, .session-page {
  grid-column: 1/span var(--columns);
}

.main-dashboard nav {
  --gap: 1em;
}
.main-dashboard nav ul {
  grid-column: 1/span var(--columns);
  list-style: none;
  margin: 0 calc(-1 * var(--gap));
  padding: 3em 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: stretch;
}
.main-dashboard nav li {
  --max: 20%;
  --min: 20ch;
  --width: calc(max(var(--min),var(--max)) - (2 * var(--gap)));
  max-width: var(--width);
  flex: 1 0 var(--width);
  --border: 1px solid var(--dashboard-menu-color);
  border-left: var(--border);
  border-bottom: var(--border);
  margin: var(--gap);
  box-sizing: border-box;
  transition: opacity var(--ease);
  color: var(--dashboard-text-color);
  position: relative;
}
.main-dashboard nav li a:active, .main-dashboard nav li a:focus {
  outline: none;
}
.main-dashboard nav li:not(.current-menu-item) {
  opacity: 0.4;
}
.main-dashboard nav li:not(.current-menu-item):focus-within {
  opacity: 1;
}
@media (hover: hover) {
  .main-dashboard nav li:not(.current-menu-item):hover {
    opacity: 1;
  }
}
.main-dashboard nav li a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  padding: 1em;
  color: var(--dashboard-menu-color);
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.main-dashboard nav li a span {
  text-transform: none;
  font-weight: 300;
}
.main-dashboard nav li svg {
  width: 3em;
  height: 3em;
  padding: 0 0 1em;
}
.main-dashboard nav li sl-badge {
  position: absolute;
  right: 0.5em;
  bottom: 0.5em;
}
.main-dashboard nav li .run-tutorial {
  --sl-spacing-large: 1.5em;
  --sl-color-gray-40: var(--dashboard-menu-color);
}
@media screen and (max-width: 768px) {
  .main-dashboard nav {
    padding: 0 2em;
  }
  .main-dashboard nav ul {
    overflow-x: scroll;
    flex-flow: row nowrap;
  }
  .main-dashboard nav li {
    --width: 215px;
  }
}
@media screen and (max-width: 500px) {
  .main-dashboard nav li a {
    font-size: 0.8rem;
  }
  .main-dashboard nav li {
    --width: 150px;
  }
}
@media screen and (max-width: 425px) {
  .main-dashboard nav {
    padding: 0 1em;
  }
}

.overview {
  margin-bottom: 6rem;
}
.overview .tweets {
  max-height: 100vh;
  overflow-y: scroll;
  margin: 2em 0 3em auto;
}
.overview .twitter-preload {
  display: inline-flex;
  align-items: center;
  background-color: #1DA1F2;
  color: white;
  padding: 0.8em 1.2em;
  border-radius: 4px;
  text-decoration: none;
}
.overview .twitter-preload::after {
  content: "";
  display: inline-block;
  margin: 0 0 0 0.5em;
  width: 1em;
  height: 1em;
  background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23ffffff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
}
.overview sl-tab-group {
  --sl-font-weight-semibold:400;
  --sl-color-primary-50:white;
  --sl-color-gray-40:rgba(white, 0.5);
  background-color: transparent;
}
.overview sl-tab-group > h2 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 auto 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.overview sl-tab-group::part(nav) {
  background-color: var(--secondary-color);
  padding: 1em 2em;
  color: white;
}
.overview sl-tab-group::part(nav):active, .overview sl-tab-group::part(nav):focus {
  outline: none;
}
.overview sl-tab-group::part(base) {
  border-width: 0px;
}
.overview sl-tab-group::part(tabs) {
  border-bottom: none;
  text-transform: uppercase;
  font-weight: 700;
}
.overview sl-tab-group::part(body) {
  background-color: transparent;
  color: var(--body-text-color);
  padding: 0em 0em;
}
.overview sl-tab-group::part(active-tab-indicator) {
  margin-left: -2em;
}
.overview sl-tab-group .tab.tab--active:not(.tab--disabled) {
  --sl-font-weight-semibold:700;
}
.overview sl-tab {
  background-color: var(--secondary-color);
}
.overview sl-tab[active]::part(base) {
  font-weight: 700;
}
.overview sl-tab::part(base) {
  transition: color var(--ease);
}
@media (hover: hover) {
  .overview sl-tab::part(base):hover {
    --sl-color-gray-40:rgba(white, 0.5);
  }
}
@supports selector(*::part(base)) {
  .overview sl-tab {
    background-color: transparent;
  }
}
.overview sl-tab-panel::part(base) {
  border: none;
}
.overview article {
  margin: -20px;
}
.overview article h2, .overview article > h3 {
  padding: 3rem 2rem 2rem;
  margin: 0;
}
.overview article > h2 {
  font-size: var(--step-2);
}
.overview a {
  color: var(--body-text-color);
}
.overview .event-list, .overview article > h2 {
  background-color: var(--body-bg-color);
}
.overview .event-list {
  padding-bottom: 1rem;
}
.overview__onetoone {
  margin-top: 1rem;
  background-color: var(--body-bg-color);
  color: var(--secondary-color);
}
.overview__onetoone > h3 {
  padding: 3rem 2rem 2rem;
  margin: 0;
  font-family: var(--body-type), var(--sl-font-sans);
  font-weight: 400;
  font-size: var(--step-2);
}
.overview__onetoone p {
  padding: 1rem 2rem;
  margin: 0;
  max-width: 40ch;
  opacity: 0.6;
}
.overview__onetoone aside {
  padding: 2em;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.overview__onetoone aside > sl-button {
  display: inline-block;
}
.overview__onetoone aside > svg {
  width: 6rem;
  height: 6rem;
}
.overview .main-event.sector-event::before, .overview .meeting-event.sector-event::before {
  left: 0;
}
@media screen and (max-width: 500px) {
  .overview sl-tab-group::part(tabs) {
    flex-flow: row wrap;
  }
  .overview sl-tab-group::part(active-tab-indicator) {
    display: none;
  }
  .overview sl-tab-group > h2 {
    flex: 1 0 100%;
    justify-content: flex-start;
    margin: 1em 0;
  }
  .overview sl-tab::part(base) {
    font-size: 1.5em;
  }
  .overview sl-tab:first-of-type::part(base) {
    padding-left: 0;
  }
  .overview sl-tab[active] {
    text-decoration: underline;
  }
}
@media screen and (max-width: 440px) {
  .overview__onetoone aside > svg {
    margin-left: 1em;
    width: 3rem;
    height: 3rem;
  }
}
@media screen and (max-width: 340px) {
  .overview__onetoone aside > svg {
    display: none;
  }
}

.event-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-event, .meeting-event {
  --sector-color: var(--secondary-color);
  padding: 1rem 2rem;
  margin-bottom: 0.7em;
  position: relative;
}
.main-event.dummy, .meeting-event.dummy {
  display: none;
}
.main-event.dummy.show, .meeting-event.dummy.show {
  display: revert;
}
.main-event h4, .meeting-event h4 {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1em;
  margin: 0;
  font-weight: 400;
  font-size: var(--step-1);
}
.main-event h4 svg:not(.animation), .meeting-event h4 svg:not(.animation) {
  height: 0.8em;
  width: 0.8em;
}
.main-event h4 sl-button, .main-event h4 sl-button, .meeting-event h4 sl-button, .meeting-event h4 sl-button {
  margin-left: auto;
}
.main-event h4 .attend, .meeting-event h4 .attend {
  margin: 0 0 0 1em;
}
.main-event h4 a, .meeting-event h4 a {
  text-decoration: none;
  transition: opacity var(--ease);
  padding-right: 1em;
}
.main-event h4 a .divider, .meeting-event h4 a .divider {
  margin: 0 1ch;
}
@media (hover: hover) {
  .main-event h4 a:hover, .meeting-event h4 a:hover {
    opacity: 0.4;
  }
}
.main-event p, .meeting-event p {
  color: var(--body-text-color--faded);
  max-width: 60%;
}
.main-event.added, .meeting-event.added {
  background-color: var(--gray-color);
}
.main-event.ended, .meeting-event.ended {
  opacity: 0.5;
}
.main-event.sector-event::before, .meeting-event.sector-event::before {
  content: "";
  width: 0.6rem;
  bottom: 0;
  position: absolute;
  left: -0.6rem;
  top: 0;
  background-color: var(--sector-color);
}
.main-event.sector-event:not(.dummy) + .main-event.sector-event, .meeting-event.sector-event:not(.dummy) + .main-event.sector-event {
  --before-top: -1.7rem;
  --margin-top: 0;
  margin-top: var(--margin-top);
}
.main-event.sector-event:not(.dummy) + .main-event.sector-event::before, .meeting-event.sector-event:not(.dummy) + .main-event.sector-event::before {
  top: var(--before-top);
}
.main-event.sector-event.added, .meeting-event.sector-event.added {
  background-color: initial;
  position: relative;
}
.main-event.sector-event.added::after, .meeting-event.sector-event.added::after {
  content: "";
  position: absolute;
  background-color: var(--sector-color);
  opacity: 0.1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}
.main-event .add-to-cal, .meeting-event .add-to-cal {
  --sl-panel-background-color: var(--body-bg-color);
  --sl-panel-border-color: var(--body-bg-color);
}
@media (hover: hover) {
  .main-event.no-link h4 a:hover, .meeting-event.no-link h4 a:hover {
    opacity: 1;
  }
}
@media screen and (max-width: 560px) {
  .main-event h4 a b, .meeting-event h4 a b {
    flex: 1 0 100%;
  }
  .main-event h4 a .divider, .meeting-event h4 a .divider {
    display: none;
  }
}
@media screen and (max-width: 425px) {
  .main-event p, .meeting-event p {
    max-width: 100%;
  }
}

.meeting-event {
  background-color: var(--primary-color--faded-2);
}
.meeting-event h4 {
  color: var(--secondary-color);
}
.overview .meeting-event p {
  padding-left: 0;
}
.meeting-event.added {
  background-color: var(--primary-color--faded-2);
}

.screen-reader-text {
  display: none;
}