.activity-selection--selected-topics {
  align-items: center;
  display: grid;
  grid-template-columns: max-content auto;
  grid-template-areas: "left" "right";
}

.search-results-label {
  color: var(--color-bright-green);
  font-size: var(--font-size-smaller);
  font-style: italic;
}

.browser--tv .activity-selection--selected-topics {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.browser--tv .activity-selection--selected-topics > div {
  flex: 1 1 auto;
  font-size: 16px;
  gap: 10px;
  padding: 8px !important;
}

.browser--tv .activity-selection--selected-topics > div img {
  max-height: 15px;
  max-width: 15px;
}

.browser--tv .activity-selection--selected-topics > p {
  display: none;
}

.browser--tv [data-topic-selection-target="categories"] {
  gap: 3px;
}

.browser--tv #activities[data-scroll-position-target="retainScrollPosition"] {
  margin-bottom: 0;
  margin-top: 0;
}

.admin-layout {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  overflow: hidden;
  width: 100%;
}

.admin-layout footer {
  display: none;
}

@media (min-height: 1505px) {
  .admin-layout footer {
    background-color: rgba(var(--color-off-white-rgb), 0.25);
    border-top: 4px solid var(--color-orange);
    display: flex;
    padding: 10px;
  }
}

.admin-layout .title {
  font-weight: bold;
  margin: 10px;
  text-align: center;
}

.badge {
  background-color: var(--color-bright-green);
  border-radius: 50%;
  font-size: var(--font-size-smaller);
  padding: 5px 10px 7px 10px;
}

.badge:empty {
  margin: 0;
  padding: 0;
}

.big-message {
  background-color: var(--color-off-white);
  border-radius: 33px;
  color: var(--color-navy-blue);
  container-type: inline-size;
  font-weight: 800;
  padding: clamp(10px, max(4vh, 4vw), 35px);
  text-align: center;
}

.big-message-admin {
  color: var(--color-purple);
}

.big-message-admin ~ p {
  margin-bottom: 10px;
}

.big-message p:last-child {
  margin-bottom: 20px;
}

.big-message p:only-child {
  margin-bottom: 0;
  margin-top: 0;
}

.layout-section-top .big-message {
  align-items: center;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 20px 20px;
}

.layout-section-top .big-message p,
.layout-section-top .big-message .trix-content {
  flex: 1 1 auto;
  margin: 0;
}

.bingo-board {
  align-items: stretch;
  background-color: rgba(var(--color-powder-blue-rgb), 0.4);
  border-radius: var(--border-radius);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 20px;
}

.bingo-board .btn {
  --bg-color: var(--color-off-white);
  --bg-active-color: #d7e4bd;
  --bg-invalid-color: #d7e4bd;

  align-items: center;
  display: flex;
  justify-content: center;
  padding: 10px;
}

@media (orientation: landscape) {
  .bingo-board .btn {
    font-size: 45px;
  }
}

@media (orientation: portrait) {
  .bingo-board .btn {
    font-size: 27px;
  }
}

.bingo-board .btn-selected {
  font-weight: bold;
  pointer-events: none;
}

.bingo-board .btn:active {
  background-color: var(--bg-active-color) !important;
}

.bingo-board .space-invalid {
  animation-duration: 1s;
  animation-name: invalidSpaceSelected;
}

.bingo-congrats {
  animation-duration: 1s;
  animation-name: congratsMessage;
  color: var(--color-bright-green);
  text-transform: uppercase;
  transition: opacity 1s ease-in, transform 1s ease-in;
}

@keyframes congratsMessage {
  from {
    opacity: 0;
    transform: scale(0.2);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes invalidSpaceSelected {
  from {
    background-color: var(--bg-invalid-color);
  }

  to {
    background-color: var(--bg-color);
  }
}

/* Bootstrap button groups */

.btn-group {
  display: inline-flex;
}

.btn-group .btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  margin: 0;
}

.btn-group > .btn-group:not(:last-child) > .btn,
.btn-group > .btn.dropdown-toggle-split:first-child,
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn-check:checked + .btn,
.btn-group > .btn-check:focus + .btn,
.btn-group > .btn.active,
.btn-group > .btn:active,
.btn-group > .btn:focus,
.btn-group > .btn:hover {
  z-index: 1;
}

.btn-group > .btn-check:checked + .btn,
.btn-group > .btn.active,
.btn-group > .btn.show,
.btn-group > .btn:first-child:active,
.btn-group > :not(.btn-check) + .btn:active {
  color: var(--color-navy-blue);
  background-color: var(--color-bright-green);
  border-color: var(--color-bright-green);
}

.btn-group > .btn {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
}

.btn-group > .btn-group:not(:first-child),
.btn-group > :not(.btn-check:first-child) + .btn {
  margin-left: calc(var(--bs-border-width) * -1);
}

.btn-group > .btn-group:not(:first-child) > .btn,
.btn-group > .btn:nth-child(n + 3),
.btn-group > :not(.btn-check) + .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn {
  --outline-color: var(--color-orange);
  --outline-offset: -0.09em;

  background-color: var(--color-off-white);
  border: none;
  border-color: var(--color-off-white);
  color: var(--color-navy-blue);
  border-radius: var(--border-radius);
  cursor: pointer;
  display: inline-block;
  font-style: normal;
  font-weight: 500;
  line-height: 1.1;
  padding: clamp(8px, 1.2em, 14px) clamp(8px, 1.8em, 40px);
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s ease-in-out;
}

button.btn,
.btn[type="button"],
.btn[type="reset"],
.btn[type="submit"] {
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
}

.btn-animated {
  transition: background-color 0.15s ease-in, color 0.15s ease-in,
    opacity 0.15s ease-in-out, transform 1s ease-in-out;
}

.btn-bordered {
  border: 1px solid var(--color-navy-blue);
}

.btn-blue {
  background-color: var(--color-powder-blue);
}

.btn:active {
  background-color: rgba(var(--color-off-white-rgb), 0.75);
}

.btn--faded {
  background-color: rgba(var(--color-off-white-rgb), 0.75);
}

@media (hover: hover) {
  .btn:hover {
    background-color: rgba(var(--color-off-white-rgb), 0.75);
  }

  .btn--faded:hover {
    background-color: rgba(var(--color-off-white-rgb), 0.65);
  }
}

.btn-danger {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-off-white) !important;
}

.btn-danger:active {
  background-color: rgba(var(--color-red-rgb), 0.75);
}

@media (hover: hover) {
  .btn-danger:hover {
    background-color: rgba(var(--color-red-rgb), 0.75);
  }
}

.btn-subtle {
  background-color: transparent;
  border-color: rgba(var(--color-powder-blue-rgb), 0.25);
  border-style: solid;
  border-width: 2px;
  color: var(--color-off-white) !important;
  opacity: 0.6;
}

.btn-subtle:active {
  background-color: rgba(var(--color-powder-blue-rgb), 0.75);
  opacity: 1;
}

@media (hover: hover) {
  .btn-subtle:hover {
    background-color: rgba(var(--color-powder-blue-rgb), 0.75);
    opacity: 1;
  }
}

.btn-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.btn-primary {
  background-color: var(--color-navy-blue);
  border-color: var(--color-navy-blue);
  color: var(--color-off-white);
}

.btn-primary:active {
  background-color: rgba(var(--color-navy-blue-rgb), 0.75);
}

@media (hover: hover) {
  .btn-primary:hover {
    background-color: rgba(var(--color-navy-blue-rgb), 0.75);
  }
}

.btn-secondary {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-navy-blue);
}

.btn-secondary:active {
  background-color: rgba(var(--color-orange-rgb), 0.75);
}

@media (hover: hover) {
  .btn-secondary:hover {
    background-color: rgba(var(--color-orange-rgb), 0.75);
  }
}

.btn-tertiary {
  background-color: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-navy-blue);
}

.btn-tertiary:active {
  background-color: rgba(var(--color-yellow-rgb), 0.75);
}

@media (hover: hover) {
  .btn-tertiary:hover {
    background-color: rgba(var(--color-yellow-rgb), 0.75);
  }
}

.btn-outline {
  background-color: transparent;
  border: 1px solid var(--color-off-white);
  color: var(--color-off-white);
}

.btn-outline:active {
  background-color: rgba(var(--color-bright-green-rgb), 0.75);
}

@media (hover: hover) {
  .btn-outline:hover {
    background-color: rgba(var(--color-bright-green-rgb), 0.75);
  }
}

.btn-selected {
  background-color: var(--color-bright-green);
  border: 1px solid var(--color-powder-blue);
  color: var(--color-navy-blue);
}

.btn-selected:active {
  background-color: rgba(var(--color-bright-green-rgb), 0.75);
}

@media (hover: hover) {
  .btn-selected:hover {
    background-color: rgba(var(--color-bright-green-rgb), 0.75);
  }
}

.btn-small {
  font-size: var(--font-size-smaller);
  padding: 0.5rem;
}

.btn-large {
  font-size: var(--font-size-larger);
  font-weight: bold;
  padding: 2rem 0.5rem;
  padding: clamp(8px, 3vh, 2rem) 0.5rem;
}

.btn-with-icon {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(30px, 60px) 1fr; /* appease android tablet */
  grid-template-columns: clamp(30px, 5cqw, 60px) 1fr;
  text-align: left;
}

.btn-with-icon-right {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr minmax(30px, 60px); /* appease android tablet */
  grid-template-columns: 1fr clamp(30px, 5cqw, 60px);
  text-align: center;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
  opacity: 0.6;
  pointer-events: none;
}

.btn-loading {
  opacity: 1 !important;
  position: relative;
}

.btn-loading::after {
  animation: 3s fillup 1 normal;
  animation-timing-function: ease-out;
  background-color: rgba(var(--color-orange-rgb), 0.2);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}

.btn-loading.btn::after {
  border-radius: var(--border-radius);
}

.btn-loading.btn-large::after {
  font-size: var(--font-size-larger);
}

.btn-loading.btn-small::after {
  font-size: var(--font-size-smaller);
}

.btn-loading.btn-primary::after {
  background-color: rgba(var(--color-off-white-rgb), 0.2);
}

@keyframes fillup {
  0% {
    width: 0%;
  }

  20% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

.collapsable-details > summary {
  background: no-repeat right url(/assets/icon-blue-arrow-down-9f1d3256b49246a05c1c7bfdcbe90dde3631500d039cc5fe0fc11cba35ff82df.svg);
  background-origin: content-box;
  list-style: none;
  padding: clamp(8px, 1.2em, 20px) clamp(8px, 1.2em, 20px);
  background-color: var(--color-off-white);
  border-radius: var(--border-radius);
  font-weight: bold;
  align-items: center;
  color: var(--color-navy-blue);
  cursor: pointer;
  display: flex;
}

.collapsable-details[open] > summary {
  background-image: url(/assets/icon-blue-arrow-up-c505783618cc08ac3f6942fefb753e029bf5c6b71b4f6776cab8a5791bc97980.svg);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.collapsable-details ul {
  background-color: rgba(var(--color-off-white-rgb), 0.8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.collapsable-details ul a,
.collapsable-details ul label {
  color: var(--color-navy-blue);
  display: flex;
  padding: 10px 10px 10px 20px;
  text-decoration: none;
}

.collapsable-details ul label:hover,
.collapsable-details ul a:active,
.collapsable-details ul a:hover {
  background-color: rgba(var(--color-off-white-rgb), 0.6);
}

.collapsable-details ul a img.ranking-icon,
.collapsable-details ul label img.ranking-icon {
  padding-right: 20px;
}

.collapsable-details input[type="checkbox"] {
  display: none;
}

.collapsable-details input[type="checkbox"] + label {
  cursor: pointer;
  margin: 0;
}

.collapsable-details input[type="checkbox"]:disabled + label {
  cursor: not-allowed;
}

.collapsable-details input[type="checkbox"]:checked + label {
  background-color: var(--color-bright-green);
}

.collapsable-details .border-bottom-dotted {
  border-bottom: 4px dotted gray;
}

.collapsable-details
  input[type="checkbox"]:checked
  + label
  .border-bottom-dotted {
  border-bottom: 4px dotted var(--color-navy-blue);
}

.browser--tv .collapsable-details > summary {
  --border-radius: 5px;
  padding: 5px;
}

.browser--tv .collapsable-details ul a,
.browser--tv .collapsable-details ul label {
  padding: 5px;
}

.dementia-indicators {
  align-items: center;
  background-color: var(--color-darker-blue);
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto;
  font-size: var(--font-size-smaller);
  font-style: normal;
  font-weight: bold;
  gap: 14px;
  padding: 20px;
  justify-content: center;
  min-width: clamp(90px, 34%, 50%);
}

.dementia-indicators--level {
  display: block;
  font-size: 0.55em;
  font-weight: normal;
}

.dementia-indicators--btn {
  background-color: rgba(var(--color-off-white-rgb), 0.3);
  border: none;
  border-color: var(--color-off-white);
  color: var(--color-navy-blue);
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  font-style: normal;
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  padding: 14px clamp(10px, 1.8em, 20px);
  position: relative;
  text-align: center;
  text-decoration: none;
}

.dementia-indicators .not-sm {
  display: none;
}

.dementia-indicators .sm-only {
  display: block;
}

@media (min-width: 660px) {
  .dementia-indicators .not-sm {
    display: block;
  }

  .dementia-indicators .sm-only {
    display: none !important;
  }
}

.text-with-image--text > .dementia-indicators {
  padding: 10px;
}

.text-with-image--text > p {
  margin: 0;
}

@media (orientation: landscape) {
  .dementia-indicators {
    grid-auto-flow: column;
    width: 100%;
  }
}

@media (orientation: portrait) {
  .dementia-indicators {
    grid-auto-flow: column;
    height: 100%;
  }

  .text-with-image > .text-with-image--text {
    flex-direction: row !important;
  }
}

@media (max-height: 680px) {
  .text-with-image--text > .dementia-indicators::before {
    content: "Level";
    font-size: 0.85em;
    font-weight: normal;
  }

  .text-with-image--text > .dementia-indicators .dementia-indicators--btn {
    background-color: initial;
    padding: 0;
  }

  .text-with-image--text
    > .dementia-indicators
    .dementia-indicators--btn:not(:last-child)::after {
    content: ",";
  }

  .dementia-indicators--level {
    display: none;
  }
}

@media (max-width: 850px) {
  .dementia-indicators {
    gap: 5px;
  }

  .dementia-indicators--btn {
    font-size: smaller;
    padding: 8px clamp(10px, 1.8em, 14px);
  }
}

.flex-list {
  --gap-width: 20px;

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-width);
  justify-content: center;
  margin: auto;
  max-width: 1200px;
}

.flex-list > * {
  flex: 1 0 auto;
}

/* when there are 2 or more children */

@media (orientation: portrait) {
  /* this is a fix until firefox supports `:has` */
  .flex-list.two-or-more-children > * {
    max-height: calc(50% - calc(var(--gap-width) / 2));
  }

  @supports (selector(html:has(body))) {
    :where(.flex-list:has(> :nth-child(2))) > * {
      max-height: calc(50% - calc(var(--gap-width) / 2));
    }
  }
}

/* when there are 2 or more children */

@media (orientation: landscape) {
  /* this is a fix until firefox supports `:has` */
  .flex-list.two-or-more-children > * {
    height: 100%;
    max-width: calc(50% - calc(var(--gap-width) / 2));
  }

  @supports (selector(html:has(body))) {
    :where(.flex-list:has(> :nth-child(2))) > * {
      height: 100%;
      max-width: calc(50% - calc(var(--gap-width) / 2));
    }
  }
}

/* when there are 3 or more children */

.flex-list.three-or-more-children > * {
  max-height: calc(50% - calc(var(--gap-width) / 2));
  max-width: calc(50% - calc(var(--gap-width) / 2));
  width: calc(50% - calc(var(--gap-width) / 2));
}

@supports (selector(html:has(body))) {
  :where(.flex-list:has(> :nth-child(3))) > * {
    max-height: calc(50% - calc(var(--gap-width) / 2));
    max-width: calc(50% - calc(var(--gap-width) / 2));
    width: calc(50% - calc(var(--gap-width) / 2));
  }
}

.top-level-activity-categories {
  display: grid;
  flex: 1 1 auto !important;
  gap: 12px;
}

@media (orientation: landscape) {
  .top-level-activity-categories--five {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .top-level-activity-categories--five > :nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
  }
  .top-level-activity-categories--five > :nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
  }
  .top-level-activity-categories--five > :nth-child(3) {
    grid-area: 2 / 1 / 3 / 2;
  }
  .top-level-activity-categories--five > :nth-child(4) {
    grid-area: 2 / 2 / 3 / 3;
  }
  .top-level-activity-categories--five > :nth-child(5) {
    grid-area: 1 / 3 / 3 / 4;
  }
}

@media (orientation: portrait) {
  .top-level-activity-categories--five {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, minmax(100px, 1fr));
  }

  .top-level-activity-categories--five > :nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
  }
  .top-level-activity-categories--five > :nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
  }
  .top-level-activity-categories--five > :nth-child(3) {
    grid-area: 2 / 1 / 3 / 2;
  }
  .top-level-activity-categories--five > :nth-child(4) {
    grid-area: 2 / 2 / 3 / 3;
  }
  .top-level-activity-categories--five > :nth-child(5) {
    grid-area: 3 / 1 / 4 / 3;
  }
}

@media (orientation: landscape) {
  .top-level-activity-categories--six {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .top-level-activity-categories--six > :nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
  }
  .top-level-activity-categories--six > :nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
  }
  .top-level-activity-categories--six > :nth-child(3) {
    grid-area: 2 / 1 / 3 / 2;
  }
  .top-level-activity-categories--six > :nth-child(4) {
    grid-area: 2 / 2 / 3 / 3;
  }
  .top-level-activity-categories--six > :nth-child(5) {
    grid-area: 1 / 3 / 2 / 4;
  }
  .top-level-activity-categories--six > :nth-child(6) {
    grid-area: 2 / 3 / 3 / 4;
  }
}

@media (orientation: portrait) {
  .top-level-activity-categories--six {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, minmax(100px, 1fr));
  }

  .top-level-activity-categories--six > :nth-child(1) {
    grid-area: 1 / 1 / 2 / 2;
  }
  .top-level-activity-categories--six > :nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
  }
  .top-level-activity-categories--six > :nth-child(3) {
    grid-area: 2 / 1 / 3 / 2;
  }
  .top-level-activity-categories--six > :nth-child(4) {
    grid-area: 2 / 2 / 3 / 3;
  }
  .top-level-activity-categories--six > :nth-child(5) {
    grid-area: 3 / 1 / 4 / 2;
  }
  .top-level-activity-categories--six > :nth-child(6) {
    grid-area: 3 / 2 / 4 / 3;
  }
}

@media (min-height: 800px) {
  .flex-list {
    height: 100%;
    overflow: hidden;
    width: 100%;
  }
}

.text-with-image {
  --bg-color: #e6eaf1;

  align-items: stretch;
  color: var(--color-navy-blue);
  cursor: pointer;
  display: grid;
  flex: 1 1 auto !important;
  justify-items: stretch;
  text-decoration: none;
}

.text-with-image:hover {
  --bg-color: var(--color-powder-blue);
}

.text-with-image > span {
  background-color: var(--color-off-white);
  justify-content: center;
  padding: 10px;
}

.text-with-image > .text-with-image--text {
  align-items: center;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
  font-weight: bold;
  overflow: hidden;
  text-align: center;
}

@media (orientation: landscape) {
  .text-with-image {
    grid-template-areas: "left right";
    grid-template-columns: [left] 1fr [right] 1fr;
  }

  .text-with-image > .text-with-image--text {
    border-bottom-left-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
    grid-area: left;
  }

  .text-with-image > span {
    border-bottom-right-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    grid-area: right;
  }
}

@media (orientation: portrait) {
  .text-with-image {
    grid-template-areas: "top" "bottom";
    grid-template-rows: [top] 60% [bottom] 40%;
  }

  .text-with-image > .text-with-image--text {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    grid-area: bottom;
  }

  .text-with-image > span {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    grid-area: top;
  }
}

.background-image {
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  filter: blur(var(--background-blur)) grayscale(60%);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.image-with-caption {
  background-color: var(--color-navy-blue);
  border-radius: var(--border-radius);
  display: grid;
  font-weight: bold;
  gap: 10px;
  grid-template-rows: 1fr auto;
  margin: auto;
  max-height: 100%;
  overflow: hidden;
  padding: 10px;
  text-align: center;
}

.leader-layout {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  height: 100vh;
  height: 100dvh;
  width: 100%;
}

@supports (selector(html:has(body))) {
  body:has(#modal > div) #content {
    filter: blur(2px);
  }
}

.modal-backdrop {
  background-color: #101110;
  height: 100%;
  opacity: 0.5;
  width: 100%;
  /* width: 0; */
}

.modal-content-wrapper {
  background-color: var(--theme-background-color);
  container-type: inline-size;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  width: min(800px, 100%);
  /* width: 100%; */
}

.modal-content {
  padding: 20px 20px 60px 30px;
}

.modal-wrapper {
  align-items: center;
  display: flex;
  height: 100vh;
  height: 100dvh;
  left: 0;
  justify-content: center;
  position: fixed;
  top: 0;
  width: 100vw;
  width: 100dvw;
  z-index: 100;
}

.modal-centered .modal-backdrop {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.modal-centered .modal-content-wrapper {
  background-color: var(--color-off-white);
  border-radius: 60px;
  color: var(--color-navy-blue);
  height: auto;
  z-index: 100;
}

.modal-centered .modal-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 40px;
}

.modal-centered .modal-title {
  background-color: var(--color-orange);
  border-top-left-radius: var(--border-radius-large);
  border-top-right-radius: var(--border-radius-large);
  margin: 0;
  padding: 20px;
  text-align: center;
}

.sca-modal-content {
  font-size: 25px;
}

.overlay {
  align-items: center;
  background-color: rgba(var(--color-navy-blue-rgb), 0.9);
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  justify-content: center;
  overflow: hidden;
  padding: 5vw;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 100;
}

.overlay > * {
  z-index: 2;
}

.overlay--arrow {
  background-image: url(/assets/overlay-arrow-f323486902b834cc1235a22b77d627f983947f65fc96532042ff050c89afb2bc.png);
  background-size: contain;
  background-position-x: 0;
  background-position-y: 0;
  background-repeat: no-repeat;
  display: block;
  height: 155px;
  margin-left: calc(-1 * (min(8vh, 8vw) + 350px));
  position: absolute;
  top: 0;
  width: 68px;
  z-index: 0;
}

.overlay--wrapper {
  position: relative;
}

.player-layout {
  display: grid;
  grid-template-rows: min-content 1fr;
  height: 100vh;
  height: 100dvh;
  width: 100%;
}

.player-layout.lingo-bingo {
  grid-template-rows: 180px 1fr;
}

.player-layout.lingo-bingo .layout-section-top {
  display: grid;
  grid-template-rows: min-content auto;
  z-index: 10;
}

.player-layout.lingo-bingo .layout-section-top .big-message {
  height: 100%;
}

.quote {
  background-image: url(/assets/quote--portrait-ec0697130baaac612145a3a2cd812452bd599e3adf248fb27a599702090b6e90.svg);
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--color-navy-blue);
  margin: 0;
  padding: 30px 88px 12.5vh 75px;
}

@media (orientation: landscape) {
  .quote {
    background-image: url(/assets/quote--landscape-7280e379d10b82421fd0cd6f0af7188c0f5daa735cecc2cb110171f06a62b35e.svg);
    padding: 30px 88px 16vh 75px;
  }
}

.quote footer {
  font-size: 40px;
}

.quote p {
  font-size: clamp(45px, 3.5vh, 50px);
  font-weight: bold;
  margin-bottom: 5px;
  text-align: center;
}

.quote p::after {
  content: '”';
}

.quote p::before {
  content: '“';
}

.quote footer {
  text-align: right;
}

.rec-modal-backdrop {
  background-color: #101110;
  height: 100%;
  opacity: 0.5;
  width: 100%;
}

.rec-modal-content-wrapper {
  background-color: var(--theme-background-color);
  container-type: inline-size;
  flex-shrink: 0;
  height: 100%;
  width: min(710px, 100%);
  font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: flex;
  padding: 2%;
}

.rec-modal-content {
  padding: 20px 20px 60px 30px;
}

.rec-modal-wrapper {
  align-items: center;
  display: flex;
  height: 100vh;
  height: 100dvh;
  left: 0;
  justify-content: center;
  position: fixed;
  top: 0;
  width: 100vw;
  width: 100dvw;
  z-index: 100;
}

.rec-modal-centered .rec-modal-backdrop {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.rec-modal-centered .rec-modal-content-wrapper {
  background-color: var(--color-off-white);
  border-radius: 10px;
  border-color: var(--color-navy-blue);
  color: var(--color-navy-blue);
  height: auto;
  z-index: 100;
}

.rec-modal-centered .rec-modal-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 40px;
}

.preview-dialog-content {
  margin: auto !important;
  padding: 0 !important;
}

.preview-dialog {
  background: transparent;
  border: transparent;
}

.warning-icon {
  color: #ff0000;
  font-size: 30px;
}

.preview-dialog-desc {
  text-align: left;
  display: flex;
  align-items: center;
  width: 100% !important;
  margin-left: 11% !important;
}

.preview-dialog-video {
  width: 90%;
}

.preview-dialog-header{
  display: flex;
  flex-direction: column;
}

.preview-dialog-header h1 {
  margin-bottom: 0px !important;
}

.preview-dialog-header p {
  font-size: 16px !important;
  margin-top: 0px !important;
  font-family: 'Arial', sans-serif;
}

.rec-modal-centered .rec-modal-title {
  font-weight: 800;
  line-height: 40px;
  font-size: 25px !important;
}

.recording-alert-icon {
  margin-right: 1%;
}

.rec-alert-msg {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
}

.close-btn {
  position: relative;
  top: 0;
  height: -moz-fit-content;
  height: fit-content;
  background-color: transparent;
  border: 0;
  font-size: 20px;
  cursor: pointer;
}

.rec-modal-img {
  display: flex;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 7%;
}

.action-buttons button {
  background-color: var(--color-navy-blue);
  border: 0;
  border-radius: 5px;
  color: var(--color-off-white);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  height: 40px;
  padding: 0 20px;
}

.action-buttons .cancel {
  background-color: whitesmoke;
  color: var(--color-navy-blue);
  border: solid 1px;
}

.rpa-desc {
  font-size: 18px !important;
}

.rpa-learn-more{
  color: var(--Prussian-blue-60);
  font-size: 28px !important;
  margin-top: 5% !important;
}

.rpa-title {
  font-size: 40px !important;
}

.rpa-dialog {
  background: transparent;
  border: transparent;
}

.transparent-dialog {
  background: transparent;
  border: transparent;
}

.psa-modal-backdrop {
  background-color: #101110;
  height: 100%;
  opacity: 0.5;
  width: 100%;
}

.psa-modal-content-wrapper {
  background-color: var(--theme-background-color);
  container-type: inline-size;
  flex-shrink: 0;
  height: 100%;
  width: min(810px, 100%);
  font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: flex;
  padding: 2%;
}

.psa-modal-wrapper {
  align-items: center;
  display: flex;
  height: 100vh;
  height: 100dvh;
  left: 0;
  justify-content: center;
  position: fixed;
  top: 0;
  width: 100vw;
  width: 100dvw;
  z-index: 100;
}

.psa-modal-centered .psa-modal-backdrop {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.psa-modal-centered .psa-modal-content-wrapper {
  background-color: var(--color-off-white);
  border-radius: 10px;
  border-color: var(--color-navy-blue);
  color: var(--color-navy-blue);
  height: auto;
  z-index: 100;
}

.psa-modal-centered .psa-modal-content {
  align-items: center;
  display: flex;
  padding: 20px;
}

.preview-dialog-content {
  margin: auto !important;
  padding: 0 !important;
}

.preview-dialog {
  background: transparent;
  border: transparent;
}

.warning-icon {
  color: #ff0000;
  font-size: 30px;
}

.preview-dialog-desc {
  text-align: left;
  display: flex;
  align-items: center;
  width: 100% !important;
  margin-left: 11% !important;
}

.preview-dialog-video {
  width: 90%;
}

.preview-dialog-header {
  display: flex;
  flex-direction: column;
}

.preview-dialog-header h1 {
  margin-bottom: 0px !important;
}

.preview-dialog-header p {
  font-size: 16px !important;
  margin-top: 0px !important;
  font-family: 'Arial', sans-serif;
}

.psa-modal-centered .psa-modal-title {
  font-weight: 800;
  line-height: 40px;
  font-size: 35px !important;
}

.recording-alert-icon {
  margin-right: 1%;
}

.psa-alert-msg {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
}

.close-btn {
  position: relative;
  top: 0;
  height: -moz-fit-content;
  height: fit-content;
  background-color: transparent;
  border: 0;
  font-size: 20px;
  cursor: pointer;
}

.psa-modal-img {
  display: flex;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 7%;
}

.action-buttons button {
  background-color: var(--color-navy-blue);
  border: 0;
  border-radius: 5px;
  color: var(--color-off-white);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  height: 40px;
  padding: 0 20px;
}

.action-buttons .cancel {
  background-color: whitesmoke;
  color: var(--color-navy-blue);
  border: solid 1px;
}

.psa-desc {
  font-size: 25px !important;
}

.psa-learn-more {
  color: var(--Prussian-blue-60);
  font-size: 28px !important;
  margin-top: 5% !important;
}

.psa-title {
  font-size: 40px !important;
}

.psa-dialog {
  background: transparent;
  border: transparent;
}

.transparent-dialog {
  background: transparent;
  border: transparent;
}

.psa-dialog button {
  height: 60px !important;
  padding: 0px 16px !important;
  font-size: 20px !important;
}

:root {
  --Prussian-blue-20: #e9eef4;
  --Prussian-blue-50: #a5b4cb;
  --Prussian-blue-60: #4f5868;
  --Prussian-blue-80: #333e52;
  --Prussian-blue-90: #253044;
  --white: #ffffff;
  --semantic-green: #21ba45;
  --font-family: 'Montserrat', sans-serif;
  --semantic-red: #de4346;
  --bell-yellow: #ffc008;
  --uploading-yellow: #FEA239;
}

.retry-upload-dialog{
  background: transparent;
  border: 0;
}

.retry-modal-backdrop {
  background-color: #101110;
  height: 100%;
  opacity: 0.5;
  width: 100%;
}

.retry-modal-content-wrapper {
  background-color: var(--theme-background-color);
  container-type: inline-size;
  flex-shrink: 0;
  width: min(1200px, 100%);
  font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 2%;
}

.retry-modal-content {
  padding: 20px 20px 60px 30px;
}

.retry-modal-wrapper {
  align-items: center;
  display: flex;
  height: 100vh;
  height: 100dvh;
  left: 0;
  justify-content: center;
  position: fixed;
  top: 0;
  width: 100vw;
  width: 100dvw;
  z-index: 100;
}

.retry-modal-centered .retry-modal-backdrop {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.retry-modal-centered .retry-modal-content-wrapper {
  background-color: var(--Prussian-blue-90);
  border-radius: 10px;
  border-color: var(--Prussian-blue-90);
  color: var(--Prussian-blue-90);
  z-index: 100;
  max-height: 70vh;
}

.retry-modal-centered .retry-modal-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 40px;
}

.retry-modal-centered .retry-modal-title {
  font-weight: 800;
  line-height: 40px;
  font-size: 30px;
}

.retry-dialog-header,
.retry-dialog-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.retry-dialog-header h2 {
  margin: 0;
  font-size: 35px;
  color: var(--white);
}

.close-button {
  background-color: transparent;
  border: none;
  font-size: 18px;
  color: var(--white);
  cursor: pointer;
}

.upload-table-container{
  max-height: 55vh;
  overflow-y: auto;
  margin-top: 20px;
}

.upload-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--white);
  font-size: 25px;
}

.upload-table th,
.upload-table td {
  padding: 10px;
  text-align: left;
  color: var(--Prussian-blue-80);
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  font-size: 25px;
}

.upload-table th:nth-child(1),
.upload-table td:nth-child(1) {
  width: 40%;
}

.upload-table th:nth-child(2),
.upload-table th:nth-child(3),
.upload-table td:nth-child(2),
.upload-table td:nth-child(3) {
  width: 20%;
}

.upload-table th:nth-child(4),
.upload-table th:nth-child(5),
.upload-table td:nth-child(4),
.upload-table td:nth-child(5) {
  width: 20%;
}

.upload-table tr {
  border-bottom: 1px solid #444;
  display: flex !important;
}

.upload-table td {
  vertical-align: middle;
}

.video-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: middle;
}

.status {
  padding: 5px 10px;
  border-radius: 20px;
  display: inline-block;
}

.status.uploaded {
  border: solid 1px var(--semantic-green);
  color: var(--semantic-green);
  display: flex;
  align-items: center;
  align-content: center;
  border-radius: 10px;
  width: 100%;
  font-weight: 500;
}

.uploaded-icon {
  margin-right: 0.8em;
}

.status.failed {
  border: solid 1px var(--semantic-red);
  color: var(--semantic-red);
  border-radius: 10px;
  display: flex;
  align-items: center;
  align-content: center;
  font-weight: 500;
  width: 100%;
}

.status.uploading {
  border: solid 1px var(--uploading-yellow);
  color: var(--uploading-yellow);
  border-radius: 10px;
  display: flex;
  align-items: center;
  align-content: center;
  font-weight: 500;
  width: 100%;
}

.failed-icon {
  margin-right: 0.8em;
}

.retry-upload {
  background-color: var(--Prussian-blue-80);
  border: none;
  color: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  align-content: center;
}

.retry-upload.disabled {
  background-color: var(--Prussian-blue-20);
  cursor: not-allowed;
}

.refresh-btn {
  margin-right: 0.5em;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.bulk-upload {
  border: none;
  background-color: var(--bell-yellow);
  color: var(--Prussian-blue-90);
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
  display: flex;
  align-items: center;
  align-content: center;
}

.close-button-footer {
  background-color: #2a2e39;
  border: 1px solid #fff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  align-content: center;
}

.retry-upload-alert-icon {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.retry-modal-error-message{
  font-size: 22px;
  color: var(--semantic-red);
}

.search {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
}

.search--clear-link {
  display: flex;
  margin-left: -50px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.search--input {
  height: 100%;
  padding-right: 60px;
}

.search--input:-moz-placeholder-shown + .search--clear-link {
  opacity: 0;
  pointer-events: none;
}

.search--input:placeholder-shown + .search--clear-link {
  opacity: 0;
  pointer-events: none;
}

.slider-menu {
  height: 40px;
  overflow: hidden;
  text-align: center;
  transition: background-color 0.15s ease-in-out;
}

.slider-menu > summary {
  background: no-repeat center url(/assets/icon-arrow-down-5e491db8fbcae65b490120259bf9ecca8e3a6154d4238db3deab0d92f7ca2153.svg);
  color: rgba(255, 255, 255, 0);
  font-size: 0.0000001em;
  list-style: none;
  min-height: 40px;
  overflow: hidden;
}

.slider-menu > div {
  background-color: var(--color-powder-blue);
  position: absolute;
  max-width: 1200px;
  width: 100%;
  z-index: 10000;
}

.slider-menu[open],
.layout-section-top .slider-menu[open] {
  background-color: var(--color-powder-blue);
}

.slider-menu[open] > summary {
  transform: rotate(180deg);
}

.layout-section-top .slider-menu {
  background-color: var(--color-off-white);
  color: var(--color-navy-blue);
}

.layout-section-top .slider-menu > summary {
  background: no-repeat center url(/assets/icon-arrow-down-navy-blue-eb8cd2d6f488f84b7bafeec6a47468a5f79b1e80a4ccff6283a7170f1bc6897a.svg);
}

.slider-menu .btn {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 20px 3ch;
  text-align: center;
}

.slider-menu .btn > .img-fluid {
  max-height: 22px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--color-bright-green);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--color-bright-green);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.side-by-side-switch {
  display: grid;
  gap: 14px;
  grid-template-columns: 2fr 1fr;
  justify-items: stretch;
}

.step-container {
  align-items: center;
  background-color: var(--color-orange);
  box-sizing: border-box;
  color: var(--color-black);
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 6px;
  text-align: center;
}

.step-container > * {
  opacity: 0.3;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.step-container a {
  background-color: var(--color-off-white);
  border-radius: 36px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  color: var(--color-black);
  padding: clamp(8px, 1.2em, 12px) clamp(8px, 1.2em, 12px);
  text-decoration: none;
}

.step-container .current-step,
.step-container .upcoming-step {
  font-weight: 800;
  opacity: 1;
}

.step-container .future-step {
  padding: clamp(8px, 1.2em, 12px) clamp(8px, 1.2em, 12px);
}

.step-container .previous-step {
  opacity: 0.6;
  transition: opacity 0.25s ease-in-out;
}

.step-container .previous-step:hover {
  opacity: 1;
}

.step-container .text-step {
  margin-right: 40px;
}

.video-embed > div {
  flex: 1 1 auto;
  padding: initial !important;
  position: relative;
}

@page {
  margin: 0.5in 0.5in;
}

@page: first {
  margin-top: 0.5in;
}

@media print {
  .no-print {
    display: none !important;
  }

  .page-break {
    page-break-before: always;
  }
}

:root {
  accent-color: var(--accent--ui);
  font-size: var(--font-size, 20px);
}

:focus,
:focus-visible {
  --outline-size: max(2px, 0.15em);

  /* outline:
      var(--outline-width, var(--outline-size))
      var(--outline-style, solid)
      var(--outline-color, currentColor);

  outline-offset: var(--outline-offset, var(--outline-size)); */
}

/* scroll padding allowance above anchor links */

:target {
  scroll-padding-block-start: 2rem;
}

/* scroll padding allowance below focused elements to ensure they are in view */

:focus {
  scroll-padding-block-end: 8vh;
}

::-webkit-scrollbar {
  background-color: rgba(var(--color-navy-blue-rgb), 0.8);
  width: 8px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(var(--color-off-white-rgb), 0.3);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(var(--color-off-white-rgb), 0.5);
  border: 1px solid rgba(var(--color-off-white-rgb), 0.4);
}

dialog {
  background-color: transparent;
  border: none;
  color: var(--color-off-white);
  position: relative;
  z-index: 100;
}

button,
input,
select,
textarea {
  font: inherit;
  font-size: var(--form-font-size, 20px);
}

input[type="checkbox"] {
  scale: 1.3;
}

.text-larger input[type="checkbox"] {
  scale: 2.3;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font: inherit;
}

body,
html {
  height: 100%;
  margin: 0;
  width: 100%;
}

/* hack for Insight Articles and Viva Stories to hide alt text */

.h-100 > img {
  color: var(--color-navy-blue);
}

input,
label {
  margin: 10px 0;
}

input[type="email"],
input[type="password"],
input[type="text"],
select,
textarea {
  border-radius: 9px;
  padding: clamp(8px, 1.2em, 14px) clamp(8px, 1.8em, 16px);
  width: 100%;
}

.turbo-progress-bar {
  align-items: stretch;
  background-color: transparent;
  bottom: 0;
  display: flex;
  height: 100vh;
  height: 100dvh;
  left: 0;
  justify-content: stretch;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 100% !important;
}

.turbo-progress-bar::after {
  background-color: rgba(0, 0, 0, 0.1);
  background-image: url(/assets/loading-19f2e5fe31dd65d6b60ff58d4ca320ac09a3311fffa26612c1d6b8e877cb5c5c.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  content: "";
  flex: 1 1 auto;
}

.container {
  container-type: inline-size;
}

.display-orientation-landscape,
.display-orientation-portrait {
  display: none;
}

@container (width < 700px) {
  .d-sm-none {
    display: none !important;
  }
}

@media (orientation: landscape) {
  .display-orientation-landscape {
    display: initial;
  }
}

@media (orientation: portrait) {
  .display-orientation-portrait {
    display: initial;
  }
}

/* used for book image background colors */

.bg-dark-blue {
  background-color: #0c0e15;
  color: var(--color-off-white);
}

.bg-transparent-blue {
  background-color: rgba(var(--color-powder-blue-rgb), 0.4);
  /* color: var(--color-off-white); */
}

.bg-white {
  background-color: #fff;
  color: var(--color-navy-blue);
}

.border-radius {
  border-radius: var(--border-radius);
}

.fs-italic {
  font-style: italic;
}

.fs-normal {
  font-style: normal;
}

.fw-bold {
  font-weight: bold;
}

.img-fluid {
  height: auto;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  max-width: 100%;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.nowrap {
  white-space: nowrap;
}

.white-space-normal {
  white-space: normal !important;
}

.table-grid {
  border-collapse: collapse;
  display: grid;
  min-width: 100%;
}

.table-grid tbody,
.table-grid thead,
.table-grid tr {
  display: contents;
}

.table-grid th,
.table-grid td {
  overflow: hidden;
  padding: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-grid th {
  background: var(--color-navy-blue);
  color: var(--color-off-white);
  position: sticky;
  top: 0;
}

.relative {
  position: relative;
}

.user-select-none {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.image-wrapper img {
  width: 100%;
}

.smooth-scroll {
  scroll-behavior: smooth;
}

.settings-section {
  align-items: center;
  background-color: rgba(var(--color-powder-blue-rgb), 0.4);
  border: 1px solid rgba(var(--color-powder-blue-rgb), 0.5);
  border-radius: var(--border-radius);
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-bottom: 20px;
  padding: 30px;
}

@media (min-width: 600px) {
  .settings-section {
    display: grid;
    grid-template-columns: 30% 1fr;
  }
}

.session-type-indicator {
  background-color: var(--bg-color, var(--color-blue));
  color: var(--color-black);
  margin: 0;
  padding: 5px;
  font-style: italic;
  text-align: center;
}

/* LAYOUT */

.app-wrapper {
  margin: 0 auto;
  max-width: 1200px;
  overflow: hidden;
  width: 100%;
}

.section-vcenter {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

.side-by-side {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  justify-items: stretch;
}

/* HELPERS */

.d-block {
  display: block;
}

.d-flex {
  display: flex;
  flex-direction: row;
}

.d-flex > * {
  flex: 0 1 auto;
}

.flex-grow {
  flex: 1 1 auto;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-direction-column {
  flex-direction: column;
}

.flex-direction-row {
  flex-direction: row;
}

.gap-10 {
  gap: 10px;
}

.gap-20 {
  gap: 20px;
}

.opacity-0 {
  opacity: 0;
}

.hidden-but-takes-up-space {
  display: inline-block !important;
  visibility: hidden;
}

.align-self-center {
  align-self: center;
}

.align-self-start {
  align-self: start;
}

.align-self-stretch {
  align-self: stretch;
}

.align-items-center {
  align-items: center;
}

.align-items-start {
  align-items: start;
}

.align-items-stretch {
  align-items: stretch;
}

.justify-content-between {
  justify-content: space-between;
}

.d-none {
  display: none;
}

.justify-content-center {
  justify-content: center;
}

.m-auto {
  margin: auto;
}

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

.m-10 {
  margin: 10px;
}

.m-20 {
  margin: 10px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-20 {
  margin-left: 20px;
}

.mr-40 {
  margin-right: 40px;
}

.mt-0 {
  margin-top: 0;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

@media (min-height: 600px) and (min-width: 600px) {
  .m-20 {
    margin: 20px;
  }
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

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

.p-10 {
  padding: 10px;
}

.p-20 {
  padding: 10px;
}

@media (min-height: 600px) and (min-width: 600px) {
  .p-20 {
    padding: 20px;
  }
}

.p-absolute {
  position: absolute;
}

.font-lighter {
  font-weight: lighter;
}

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

.text-inherit {
  font-size: inherit;
}

.text-larger {
  font-size: var(--font-size-larger);
}

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

.text-smaller {
  font-size: var(--font-size-smaller);
}

.text-tiny {
  font-size: var(--font-size-tiny);
}

.h-100 {
  height: 100%;
}

.h-100vh {
  height: 100vh;
  height: 100dvh;
}

.w-100 {
  width: 100%;
}

.maxheight-100 {
  max-height: 100%;
}

.maxwith-400 {
  max-width: 400px;
}

.minwidth-50p {
  min-width: 50%;
}

.maxwidth-100p {
  max-width: 100%;
}

.hide-loading-icon {
  display: none;
}

.show-loading-icon {
  display: flex;
  align-items: center;
  height: 50px;
  font-size: 20px;
  width: 100%;
}

.mode--casting:not(:has(.admin-layout))
  .d-flex.gap-20.justify-content-stretch.p-20:has(.btn.btn-large:only-child) {
  padding: 8px !important;
}

.mode--casting:not(:has(.admin-layout))
  .d-flex.gap-20.justify-content-stretch.p-20
  .btn.btn-large:only-child {
  font-size: 0.4rem !important;
  padding: 8px !important;
}