/* Scoped responsive layer for the Space app. */
.space-app {
  --space-gutter: 1rem;
  --space-gutter-lg: 1.5rem;
  --space-card-min: 220px;
  --space-panel-gap: 1rem;
}

.space-app .space-shell {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-gutter);
  padding-right: var(--space-gutter);
}

.space-app .container.space-shell {
  max-width: 1200px;
}

.space-app .ui.wide.container.space-shell {
  max-width: 1320px;
}

.space-app .ui.text.menu.space-header-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 0;
}

.space-app .space-search-row {
  width: 100%;
  margin-bottom: 0.5rem;
}

.space-app .space-compact-section {
  margin-bottom: 0.5rem;
}

.space-app .space-search-form {
  width: 100%;
}

.space-app .space-search-form .ui.selection.dropdown,
.space-app .space-search-form .ui.button,
.space-app .space-search-form input[type="text"],
.space-app .space-search-form .prompt {
  min-height: 2.75rem;
}

.space-app .space-stack-grid {
  gap: var(--space-panel-gap);
}

.space-app .space-card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.space-app .space-card-grid .ui.card,
.space-app .space-card-grid .ui.link.card,
.space-app .space-card-grid > .card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.space-app .space-card-grid .headersprtx,
.space-app .space-card-grid .header,
.space-app .space-card-grid .meta,
.space-app .space-card-grid .description,
.space-app .space-card-grid .extra {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.space-app .space-event-item .ui.items .item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 0.75rem;
}

.space-app .space-event-item .ui.small.image,
.space-app .space-event-item .ui.small.image img {
  width: 100%;
  max-width: 112px;
}

.space-app .space-event-item .extra .ui.buttons,
.space-app .space-event-item .extra .ui.right.floated.buttons,
.space-app .space-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.space-app .space-event-item .extra .ui.buttons > a,
.space-app .space-event-item .extra .ui.buttons > .button,
.space-app .space-action-row > a,
.space-app .space-action-row > .button,
.space-app .space-action-row > button {
  min-height: 2.5rem;
}

.space-app .space-hero-overlay {
  max-width: calc(100% - 1rem);
  text-align: center;
}

.space-app .space-hero-overlay-centered {
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.space-app .space-hero-title-default {
  color: #34495e;
}

.space-app .space-toolong,
.space-app .toolong {
  display: -webkit-box;
  max-width: 100%;
  margin: 0 auto;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 0 rgb(245, 245, 245), 1px 1px 0 rgb(234, 234, 234);
}

.space-app .space-meta-grid {
  row-gap: 0.35rem;
}

.space-app i.icon.fontawesome {
  font-family: "Font Awesome 5 Pro", "Font Awesome 6 Pro";
  padding-right: 0.625rem;
  font-size: 1.1em !important;
}

.space-app .ui.header > .icon + .content {
  padding-right: 0.625rem;
}

.space-app .ui.header .content {
  padding: 0;
}

.space-app .space-scrollmenu,
.space-app .scrollmenu {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scrollbar-width: thin;
}

.space-app .space-scrollmenu .item,
.space-app .scrollmenu .item {
  white-space: nowrap;
  min-height: 2.5rem;
}

.space-app .space-two-panel {
  align-items: flex-start;
}

.space-app .space-two-panel > .column > .ui.segment {
  overflow: hidden;
}

.space-app .space-segment-grid {
  padding: 1.25rem;
  align-items: center;
}

.space-app .space-watch-actions {
  margin-bottom: 0.625rem;
}

.space-app .space-day-strip {
  min-height: 1.875rem;
  background-color: #ebebeb;
}

.space-app .space-day-label {
  margin: 0;
  font-size: 0.75rem;
}

.space-app .space-modal-copy {
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.49) 1px 1px 2px;
}

.space-app .space-link-default {
  color: #34495e;
}

.space-app .space-text-muted {
  color: #595959;
}

.space-app .space-post-head {
  padding-top: 0.3125rem;
}

.space-app .space-post-meta {
  text-align: left;
}

.space-app .space-post-author {
  font-weight: 700;
}

.space-app .space-post-body {
  padding: 0;
}

.space-app .space-avatar-grid .column,
.space-app .space-member-grid .column {
  min-width: 0;
}

.space-app .space-avatar-grid a,
.space-app .space-member-grid a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}

.space-app .space-avatar-grid span,
.space-app .space-member-grid span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-app iframe,
.space-app video,
.space-app img {
  max-width: 100%;
  height: auto;
}

.space-app .space-embed {
  width: 100%;
  min-height: 260px;
  border: 0;
}

.space-app .space-form-grid .row,
.space-app .space-form-grid .ui.grid,
.space-app .space-form-grid .fields {
  row-gap: 0.75rem;
}

.space-app .space-form-grid input,
.space-app .space-form-grid select,
.space-app .space-form-grid textarea,
.space-app .space-form-grid .dropdown {
  width: 100%;
  max-width: 100%;
}

.space-app .space-form-grid textarea {
  min-height: 6.5rem;
}

.space-app .space-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.space-app .space-table-wrap table {
  min-width: 560px;
}

.space-app .space-breadcrumb {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  padding-bottom: 0.125rem;
}

.space-app .space-breadcrumb .section,
.space-app .space-breadcrumb .divider,
.space-app .space-breadcrumb .active.section {
  white-space: nowrap;
}

.space-app .space-popup {
  max-width: min(95vw, 32rem);
}

.space-app .space-share-trigger {
  cursor: pointer;
}

.space-app .space-share-popup {
  width: min(50vw, 32rem);
}

.space-app .space-text-xs {
  font-size: 0.625rem;
}

.space-app .space-text-xxs {
  font-size: 0.5625rem;
}

.space-app .space-error-text {
  color: red;
}

.space-app .space-admin-cards {
  height: inherit;
}

.space-app .space-admin-card {
  height: auto;
  width: 100%;
}

.space-app .space-admin-image {
  height: inherit;
  background: repeating-linear-gradient(
    45deg,
    #fff,
    #fff 15px,
    rgba(255, 0, 11, 0.2) 15px,
    rgba(255, 0, 11, 0.2) 20px
  );
}

.space-app .space-action-gap-top {
  margin-top: 0.5rem;
}

.space-app .space-admin-attendance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.space-app .space-admin-attendance-actions .button {
  flex: 1 1 8rem;
}

.space-app .space-fixed-height-card {
  min-height: 0;
  max-height: none;
}

.space-app .ui.modal .modal-dialog,
.space-app .ui.modal .modal-content {
  width: 100%;
  max-width: 100%;
}

.space-app .ui.modal .modal-body,
.space-app .ui.modal .content {
  overflow-wrap: anywhere;
}

/* <= 1280 */
@media (max-width: 1280px) {
  .space-app .ui.wide.container.space-shell {
    max-width: 1160px;
  }

  .space-app .space-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* <= 1024 */
@media (max-width: 1024px) {
  .space-app {
    --space-gutter: 0.875rem;
  }

  .space-app .ui.wide.container.space-shell,
  .space-app .container.space-shell {
    max-width: 100%;
  }

  .space-app .space-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .space-app .space-event-item .ui.items .item {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

/* <= 768 */
@media (max-width: 768px) {
  .space-app {
    --space-gutter: 0.75rem;
  }

  .space-app .space-search-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .space-app .space-search-form .ui.selection.dropdown,
  .space-app .space-search-form .ui.button,
  .space-app .space-search-form input[type="text"] {
    width: 100%;
  }

  .space-app .space-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .space-app .space-two-panel,
  .space-app .ui.mobile.reversed.two.column.stackable.grid,
  .space-app .ui.two.column.stackable.grid {
    display: flex;
    flex-direction: column;
  }

  .space-app .space-two-panel > .column,
  .space-app .ui.mobile.reversed.two.column.stackable.grid > .column,
  .space-app .ui.two.column.stackable.grid > .column {
    width: 100% !important;
  }

  .space-app .space-action-row,
  .space-app .space-event-item .extra .ui.buttons,
  .space-app .space-event-item .extra .ui.right.floated.buttons {
    width: 100%;
  }

  .space-app .space-action-row > *,
  .space-app .space-event-item .extra .ui.buttons > * {
    flex: 1 1 11rem;
  }

  .space-app .space-share-popup {
    width: min(82vw, 32rem);
  }

  .space-app .space-embed {
    min-height: 220px;
  }

  .space-app .space-table-wrap table {
    min-width: 520px;
  }
}

/* <= 560 */
@media (max-width: 560px) {
  .space-app {
    --space-gutter: 0.625rem;
  }

  .space-app .space-card-grid {
    grid-template-columns: 1fr;
  }

  .space-app .space-event-item .ui.items .item {
    grid-template-columns: 1fr;
  }

  .space-app .space-event-item .ui.small.image,
  .space-app .space-event-item .ui.small.image img {
    max-width: 100%;
  }

  .space-app .space-action-row > *,
  .space-app .space-event-item .extra .ui.buttons > * {
    flex: 1 1 100%;
  }

  .space-app .space-hero-overlay {
    max-width: calc(100% - 0.5rem);
  }

  .space-app .space-segment-grid {
    padding: 0.875rem;
  }

  .space-app .space-day-strip {
    min-height: 0;
  }

  .space-app .space-day-label {
    font-size: 0.6875rem;
  }

  .space-app .space-avatar-grid,
  .space-app .space-member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .space-app .space-share-popup {
    width: min(92vw, 32rem);
  }

  .space-app .space-admin-attendance-actions .button {
    flex-basis: 100%;
  }

  .space-app .space-table-wrap table {
    min-width: 460px;
  }
}

/* <= 390 */
@media (max-width: 390px) {
  .space-app {
    --space-gutter: 0.5rem;
  }

  .space-app .space-breadcrumb {
    font-size: 0.85rem;
  }

  .space-app .space-embed {
    min-height: 190px;
  }

  .space-app .space-avatar-grid,
  .space-app .space-member-grid {
    grid-template-columns: 1fr;
  }

  .space-app .space-popup {
    max-width: 96vw;
  }
}

/* <= 320 */
@media (max-width: 320px) {
  .space-app {
    --space-gutter: 0.45rem;
  }

  .space-app .space-breadcrumb {
    font-size: 0.8rem;
  }

  .space-app .space-search-form .ui.button,
  .space-app .space-action-row > * {
    min-height: 2.25rem;
  }

  .space-app .space-table-wrap table {
    min-width: 420px;
  }
}