/* wARNING - no preprocessing is applied to this file, make sure to write vanilla css that will be
 * compatible with most mobile browsers! */

@font-face {
  font-family: 'TeXGyreHerosCondensed-Regular';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/admin/texgyreheroscn-regular-webfont.woff') format('woff');
}

@font-face {
  font-family: 'TeXGyreHeros-Regular';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/admin/texgyreheros-regular-webfont.woff') format('woff');
}

@font-face {
  font-family: 'TeXGyreHerosCondensed-Italic';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/admin/texgyreheroscn-italic-webfont.woff') format('woff');
}

@font-face {
  font-family: 'TeXGyreHeros-Italic';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/admin/texgyreheros-italic-webfont.woff') format('woff');
}

@font-face {
  font-family: 'TeXGyreHeros-Bold';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/admin/texgyreheros-bold-webfont.woff') format('woff');
}

@font-face {
  font-family: 'TeXGyreHerosCondensed-Bold';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/admin/texgyreheroscn-bold-webfont.woff') format('woff');
}

@font-face {
  font-family: 'TeXGyreHeros-BoldItalic';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/admin/texgyreheros-bolditalic-webfont.woff') format('woff');
}

@font-face {
  font-family: 'TeXGyreHerosCondensed-BoldItalic';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/admin/texgyreheroscn-bolditalic-webfont.woff') format('woff');
}

html {
  box-sizing: border-box;
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

:root {
  --font-regular: 'TeXGyreHeros-Regular', Helvetica, sans-serif;
  --font-bold: 'TeXGyreHeros-Bold', Helvetica, sans-serif;
  --font-italic: 'TeXGyreHeros-Italic', Helvetica, sans-serif;
  --font-bold-italic: 'TeXGyreHeros-BoldItalic', Helvetica, sans-serif;
  --color-background: #fff;
  --color-background-muted: #eee;
  --color-text: #000;
  --color-text-light: #333;
  --body-font-size-xlarge: 1.875rem;
  --body-font-size-large: 1.125rem;
  --body-font-size-medium: .9375rem;
  --headline-font-size-xlarge: 3rem;
  --headline-font-size-large: 2.25rem;
  --headline-font-size-medium: 1.5rem;
  --headline-font-size-small: 1.25rem;
  --spacing-xxlarge: 90px;
  --spacing-xlarge: 72px;
  --spacing-large: 36px;
  --spacing-medium: 24px;
  --spacing-small: 12px;
  --spacing-tiny: 8px;
  --body-padding: 16px;
  --max-width: 1600px;
  --nav-height: 50px;
}

@media(min-width: 650px) and (min-height: 400px) {
  :root {
    --body-font-size-large: 1.25rem;
    --headline-font-size-xlarge: 4.3125rem;
    --headline-font-size-large: 3.1875rem;
    --headline-font-size-medium: 1.6875rem;
    --spacing-xxlarge: 120px;
    --spacing-xlarge: 90px;
    --spacing-large: 45px;
    --spacing-medium: 30px;
    --spacing-small: 15px;
    --spacing-tiny: 10px;
    --body-padding: 30px;
    --nav-height: 60px;
  }
}

/* Global element styling */

h1,
h2,
h3,
h4,
h5,
.headline {
  line-height: 1;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: var(--font-regular);
  background: var(--color-background);
  color: var(--color-text);
  line-height: 1.4;
}

#__next,
#root {
  height: 100%;
}


a {
  color: var(--color-text);
  text-decoration: none;
}

a[role="button"] {
  cursor: pointer;
}

p {
  font-size: var(--body-font-size-large);
}

p a {
  text-decoration: underline;
}

input,
textarea {
  font-size: 16px;
}

button {
  cursor: pointer;
  font-family: var(--font-regular);
}

button {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 1px var(--spacing-small) 0 var(--spacing-small);
  line-height: 1;
  border-radius: 0px;
}

em {
  font-family: var(--font-italic);
  font-style: italic;
}

strong {
  font-family: var(--font-bold);
  font-weight: bold;
}

.text__active {
  font-family: var(--font-bold);
  font-weight: bold;
}

.text__active em {
  font-family: var(--font-bold-italic);
  font-weight: bold;
  font-style: italic;
}

.quill-content-inline p {
  display: inline-block;
  margin: 0;
}

/* Overall layout + headers */

.layout {
  padding: 0 var(--body-padding);
}

.custom-style-loader {
  display: none !important;
  /* do not delete */
}

.layout__sticky-footer {
  /* do not delete this: it is used to hide the html before these dynamic styles are loaded */
  display: flex !important;
  height: 100%;
  min-height: 100%;
  flex-direction: column;
}

main {
  /* height is set in the layout component based on whether player controls are showing or footer */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-regular);
}

.mini-header,
.headline,
footer {
  align-items: center;
  display: flex;
}

.mini-header,
footer {
  min-height: var(--nav-height);
}

.mini-header {
  border-bottom: 1px solid var(--color-text);
  justify-content: space-between;
  text-decoration: none;
  font-family: var(--font-regular);
  font-weight: 400;
}

.mini-header .settings-icon {
  width: 50px;
  height: 50px;
  padding: 10px;
  padding-right: 0px;
}

:is(.mini-header .settings-icon) svg {
    fill: var(--color-text);
    height: 100%;
    width: 100%;
    margin: 0px;
  }

.mini-header button,
.mini-header a {
  display: flex;
  border: none;
  height: 100%;
  font-size: var(--body-font-size-medium);
  align-items: center;
  padding: 0;
  min-height: var(--nav-height);
}

.mini-header a span {
  height: 48%;
  margin-right: calc(var(--spacing-tiny) / 2);
}

.mini-header a span svg {
  height: 100%;
}

.mini-header button svg {
  margin-left: var(--spacing-tiny);
}

.mini-header a svg {
  height: 48%;
  margin-right: var(--spacing-tiny);
}

.body-font-size-medium {
  font-size: var(--body-font-size-medium);
}

footer {
  color: var(--color-text-light);
  font-size: var(--body-font-size-medium);
  margin-top: var(--spacing-large);
}


.headline {
  margin-top: var(--spacing-medium);
  margin-bottom: var(--spacing-small);
}

h1.headline {
  font-size: var(--headline-font-size-large);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-bold);
  font-weight: 400;
}

.descriptive-header {
  margin-bottom: var(--spacing-large);
}


.ReactModal--overlay {
  z-index: 3;
}

.ReactModal--content {
  z-index: 4;
  position: absolute;
  background: var(--color-background);
  padding: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  border: none;
  outline: none;
  border-radius: 4px;
}

.settings-overlay {
  padding: 0 var(--body-padding);
  font-size: 20px;
}

.settings-overlay menu {
    padding: 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

:is(.settings-overlay menu) .row {
      display: flex;
      flex-direction: row;
      gap: var(--spacing-small);
      align-items: center;
    }

:is(.settings-overlay menu) .item {
      font-size: var(--body-font-size-large);
      padding: var(--spacing-small) 0;
    }

.settings-overlay .fontsize-button {
    border: none;
  }

.settings-overlay a {
    font-size: var(--body-font-size-medium);
  }


/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 80%;
}

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
  background-color: var(--color-text);
  border-radius: 0.5rem;
  height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  margin-top: -12px;
  /* Centers thumb on the track */

  /*custom styles*/
  background-color: var(--color-text);
  height: 2rem;
  width: 1rem;
}

input[type="range"]:focus::-webkit-slider-thumb {
  outline: 5px solid #212121;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: 0.125rem;
}

/******** Firefox styles ********/
/* slider track */
input[type="range"]::-moz-range-track {
  background-color: var(--color-text);
  border-radius: 0.5rem;
  height: 0.5rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
  border: none;
  /*Removes extra border that FF applies*/
  border-radius: 0;
  /*Removes default border-radius that FF applies*/

  /*custom styles*/
  background-color: var(--color-text);
  height: 2rem;
  width: 1rem;
}

input[type="range"]:focus::-moz-range-thumb {
  border: 1px solid var(--color-text);
  outline: 3px solid var(--color-text);
  outline-offset: 0.125rem;
}

.react-select-container .react-select__control {
    background: var(--color-background);
    display: flex;
    flex-wrap: nowrap;
    border-color: var(--color-text);
    width: 100%;
    border-radius: 0;
    margin-top: var(--spacing-tiny);
  }

.react-select-container .react-select__menu {
    background: var(--color-background);
    border: 1px solid var(--color-text);
  }

.react-select-container .react-select__option--is-focused {
    background: var(--color-text-light);
    color: var(--color-background);
  }

.react-select-container .react-select__option--is-selected {
    background: var(--color-text);
    color: var(--color-background);
  }

.react-select-container .react-select__single-value {
    color: var(--color-text);
  }


.react-select-container .react-select__indicator-separator {
  background-color: transparent;
}

.radio-toggle {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-tiny);
}

.radio-toggle .react-aria-Radio {
    width: 100%;
    border: solid 1px var(--color-text);
    text-align: center;
    padding: var(--spacing-tiny);
  }

.radio-toggle .react-aria-Radio[data-selected="true"] {
    background: var(--color-text);
    color: var(--color-background);
  }

.radio-toggle .react-aria-Radio[data-focused="true"] {
    outline: 1px dotted #212121;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: 0.125rem;
  }


/* Exhibition and work navigation */

.exhibition {
  padding: var(--spacing-medium) 0;
  border-top: 1px solid var(--color-text);
}

.exhibition img {
  margin-bottom: var(--spacing-medium);
  max-width: 58vw;
}

.exhibition h2 {
  margin-top: 0;
}

.exhibition h2 a {
  font-family: var(--font-regular);
  text-decoration: none;
  font-size: var(--headline-font-size-medium);
}

.work-list-item {
  display: flex;
  padding: var(--spacing-small) 0;
  border-top: 1px solid var(--color-text);
}

.work-list-item a {
  text-decoration: none;
  font-size: var(--body-font-size-large);
  margin-bottom: 0;
}

/* Player at bottom of screen */

.player-container {
  border-top: 1px solid var(--color-text);
  display: flex;
  padding-bottom: var(--spacing-tiny);
  flex-direction: column;
  background-color: var(--color-background);
  font-size: var(--body-font-size-medium);
}

.player-container p,
.player-container .button-group button {
  font-size: var(--body-font-size-medium);
}

.progress-bar {
  background-color: var(--color-text);
  height: var(--spacing-tiny);
}

.player-container__condensed .collapse {
  display: none;
}

.player-container .controls {
  transition: color 0.1s;
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
}


.player-container .buttons {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.player-container__condensed .toggle-captions-button {
  padding-right: 0;
}

.player-container.player-container__condensed .controls,
.player-container.player-container__condensed .buttons {
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.player-container__condensed .toggle-captions-button {
  margin-right: calc(var(--spacing-tiny) * -1);
}

@media(min-width: 500px) {
  .player-container .controls {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .player-container .controls .buttons {
    flex-direction: row;
    align-items: center;
  }

  .player-container .controls .buttons .button-group:not(:last-child) {
    flex-direction: row;
    align-items: center;
  }
}

.player-container .controls button {
  border: none;
  padding: var(--spacing-tiny) var(--spacing-tiny);
}

.player-container .controls button img,
.player-container .controls button svg {
  width: 32px;
  height: 32px;
  color: var(--text-color);
}

.button-group {
  display: flex;
  align-items: center;
}

.button-group button {
  font-family: var(--font-regular);
  font-size: 17px;
}

.time-remaining, .audio-description {
  padding: var(--spacing-tiny) var(--spacing-tiny);
}

.audio-description {
  padding-right: 0px;
}

.time-remaining {
  /* Note - font must support fixed-width numbers for this to work */
  font-variant-numeric: tabular-nums;
}

.audio-description svg {
  width: 32px;
  color: var(--text-color);
  line-height: normal;
}

.inactive {
  color: #999999;
}

.title-container {
  display: flex;
  flex-direction: row;
}

.react-tiny-popover-container {
  z-index: 6;
  display: flex;
  padding-bottom: 10px;
}

.options-menu-container {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-text);
  width: calc(100vw - 2 * var(--body-padding));
  background-color: var(--color-background);
  margin-top: 2px;
  max-width: 650px;
}

.options-menu-trigger__open svg {
  transform: rotate(180deg);
}

.options-menu-container button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  font-family: var(--font-regular);
  transition: color 0.1s;
}

.options-menu-container button p {
  margin-right: var(--spacing-medium);
  font-size: 16px;
}

.options-menu-container button svg {
  height: 30px;
  width: 30px;
}

.react-tiny-popover-container img {
  width: 50px;
  height: 50px;
}

.settings-overlay .work-title,
.player-container .work-title {
  margin: var(--spacing-tiny) 0;
  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2px;
  /* Prevent end of last character getting cut off */
  flex: 1;
  min-width: 0; /* This is crucial for text-overflow to work in a flex container */
  display: flex;
}

.player-container .work-title p, .settings-overlay .work-title p {
  text-overflow: ellipsis;
  padding-right: 2px;
  overflow: hidden;
  font-size: var(--body-font-size-medium);
}


/* Styles meant for horizontal display on phones */
@media(min-width: 500px) and (max-height: 400px) {
  .headline {
    margin-bottom: var(--spacing-tiny);
  }
}

.fullscreen-captions {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  bottom: calc(3 * var(--nav-height));
  /* player height */
  z-index: 1;
  background-color: var(--color-background);
  display: flex;
  flex-direction: column;
  padding: 0 var(--body-padding);
  flex: 1;
}

.fullscreen-captions .captions {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.fullscreen-captions .captions-text {
  margin-left: 1vw;
  margin-right: 1vw;
  font-size: 7.0vw;
}

.captions-text {
  margin: 0;
  text-align: center;
  overflow-y: visible;
}

.fullscreen-captions .captions-rotate-prompt {
  max-width: 75%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fullscreen-captions .captions-rotate-prompt img {
  max-width: 75%;
}

.fullscreen-captions .captions-text {
  font-size: 3.2vw;
  text-align: center;
  margin-left: 12vw;
  margin-right: 12vw;
}

.location-restriction .captions-text {
  font-size: 1.5rem;
  text-align: center;
  margin-left: 12vw;
  margin-right: 12vw;
}

.fullscreen-captions .location-restriction {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.fullscreen-captions .geolocate-approval-button {
  border: 1px solid var(--color-text);
  border-radius: 5px;
  padding: 1rem;
  font-size: 1.25rem;
}

.on-screen-captions-controls {
  position: relative;
  margin-top: -100px;
  z-index: 1;
}

.on-screen-captions-controls>button {
  margin-left: 20%;
  margin-right: 20%;
  padding: 1rem;
  position: absolute;
  backdrop-filter: blur(10px);
  font-size: 16px;
}

.scroll {
  overflow-y: scroll;
}

.scroll div {
    padding-bottom: 30px;
  }

.react-aria-Popover {
  --background-color: var(--color-background);
  --border-color: var(--color-text);

  border: 1px solid var(--border-color);
  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
  border-radius: 6px;
  background: var(--background-color);
  color: var(--color-text);
  outline: none;
  max-width: 250px;
  padding: 8px;
}

.react-aria-Popover .react-aria-OverlayArrow svg {
    display: block;
    fill: var(--background-color);
    stroke: var(--border-color);
    stroke-width: 1px;
  }

.react-aria-Popover[data-placement=top] {
    --origin: translateY(8px);
  }

.react-aria-Popover[data-placement=top]:has(.react-aria-OverlayArrow) {
      margin-bottom: 6px;
    }

.react-aria-Popover[data-placement=bottom] {
    --origin: translateY(-8px);
  }

.react-aria-Popover[data-placement=bottom]:has(.react-aria-OverlayArrow) {
      margin-top: 6px;
    }

.react-aria-Popover[data-placement=bottom] .react-aria-OverlayArrow svg {
      transform: rotate(180deg);
    }

.react-aria-Popover[data-placement=right] {
    --origin: translateX(-8px);
  }

.react-aria-Popover[data-placement=right]:has(.react-aria-OverlayArrow) {
      margin-left: 6px;
    }

.react-aria-Popover[data-placement=right] .react-aria-OverlayArrow svg {
      transform: rotate(90deg);
    }

.react-aria-Popover[data-placement=left] {
    --origin: translateX(8px);
  }

.react-aria-Popover[data-placement=left]:has(.react-aria-OverlayArrow) {
      margin-right: 6px;
    }

.react-aria-Popover[data-placement=left] .react-aria-OverlayArrow svg {
      transform: rotate(-90deg);
    }

.react-aria-Popover[data-entering] {
    animation: popover-slide 200ms;
  }

.react-aria-Popover[data-exiting] {
    animation: popover-slide 200ms reverse ease-in;
  }

@keyframes popover-slide {
  from {
    transform: var(--origin);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.mediaPlayer-controls-container {
  margin-top: 60px;
  border: 1px dashed var(--color-text-light);
  padding: 0.5em 1em 1em 1em;
}


.mediaPlayer-control-group button {
  padding: 0.4em 1.5em;
}