@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
:root {
  --background-color: rgb(0, 0, 0);
  --header-background-color: #ff6600;
  --header-text-color: white;
  --header-height: 150px;
  --progress-bar-wrapper-background-color: rgb(32, 32, 32);
  --progress-bar-background-color: rgba(255, 255, 255, 0.333);
  --progress-bar-color: white;
  --progress-bar-height: 8px;
  --progress-bar-gap: 3px;
  --button-color: rgba(100,100,100,0.7);
  --button-hover-color: #318aff;
  --button-active-color: #0054c2;
  --low-opacity-black: rgba(0, 0, 0, 0.333);
  --mid-opacity-black: rgba(0, 0, 0, 0.5);
  --padding: 15px;
  --content-spacing: 5px;
  --content-small: 100px;
  --content-full: 150px;
}

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

body,
html {
  margin: 0;
  padding: 0;
}

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  text-decoration: none;
}

html {
  overflow-x: hidden;
  min-width: 320px;
  scroll-behavior: smooth;
  touch-action: manipulation;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body#highlights .layout {
  height: 100dvh;
  overflow: hidden;
}

.layout > .header > .dropdown {
  display: flex;
  align-items: center;
}
.layout > .header > .dropdown > select {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border: 0;
  padding: 5px;
  border-radius: 5px;
}
.layout > .header > .dropdown > select.visible {
  opacity: 1;
}
.layout > .content {
  position: relative;
}
.layout > .content .message-wrapper {
  position: absolute;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: var(--padding);
  pointer-events: none;
}
.layout > .content .message-wrapper .message {
  background-color: var(--mid-opacity-black);
  color: white;
  border-radius: 5px;
  text-align: center;
  padding: var(--padding);
  max-width: 400px;
  margin: 0 auto;
  position: relative;
  transition: margin 0.5s, height 0.5s, opacity 0.5s;
}

.layout > .content > .progress-bars {
  flex: 0 0 auto;
}
.layout > .content > .story-container-preview-wrapper {
  flex: 0 0 auto;
}
.layout > .content > .story-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.layout > .content > .story-wrapper > .story-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Ensures any overflow is hidden */
  margin: var(--padding);
  position: relative;
}
.layout > .content > .story-wrapper > .story-container #current-media,
.layout > .content > .story-wrapper > .story-container #upcoming-media {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.layout > .content > .story-wrapper > .story-container #current-media {
  z-index: 100;
  opacity: 1;
}
.layout > .content > .story-wrapper > .story-container #upcoming-media {
  z-index: -1;
  opacity: 0;
}

.overlay {
  position: absolute;
  z-index: 400;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  padding: var(--padding);
}
.overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.overlay .preview .preview-background {
  width: 120%;
  height: 120%;
  filter: blur(8px);
  opacity: 0;
}
.overlay .preview .preview-background.visible {
  opacity: 0.8;
}
.overlay .preview:hover > .play {
  transform: scale(1.15);
}
.overlay .preview:hover > .preview-background {
  width: 130%;
  height: 130%;
}

.story-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-container video,
.story-container img {
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 9/16;
  height: 100%;
}
.story-container video {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -moz-user-select: none;
       user-select: none;
  pointer-events: none;
  /* Disable default pointer events */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.story-container video::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: all;
  /* Enable pointer events for custom controls */
}
.story-container video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
.story-container video::-webkit-media-controls {
  display: none !important;
  visibility: hidden !important;
}

.story-container-preview-wrapper {
  overflow: hidden;
  height: var(--content-full);
  margin-top: var(--padding);
  --maskWidth: 100px;
  --maskSpacing: var(--padding);
  outline: 1px solid blue;
}
.story-container-preview-wrapper.mask-edges {
  -webkit-mask-image: linear-gradient(to right, transparent var(--maskSpacing), black var(--maskWidth), black calc(100% - var(--maskWidth)), transparent calc(100% - var(--maskSpacing)));
          mask-image: linear-gradient(to right, transparent var(--maskSpacing), black var(--maskWidth), black calc(100% - var(--maskWidth)), transparent calc(100% - var(--maskSpacing)));
}
.story-container-preview-wrapper .story-container-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--content-spacing);
  position: relative;
  height: inherit;
  opacity: 0;
}
.story-container-preview-wrapper .story-container-preview.visible {
  opacity: 1;
}
.story-container-preview-wrapper .story-container-preview > img {
  height: var(--content-small);
  width: auto;
  overflow: hidden;
  border-radius: 5px;
  transition: all 0.3s ease;
  cursor: pointer;
  opacity: 0.75;
  flex-shrink: 0;
}
.story-container-preview-wrapper .story-container-preview > img.current {
  height: var(--content-full);
  opacity: 1;
}

.controls {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: calc(var(--padding) * 2);
  z-index: 300;
  position: fixed;
  bottom: 0;
  right: 50%;
  height: -moz-fit-content;
  height: fit-content;
  transform: translateX(50%);
  margin: 0 auto;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.controls.visible {
  opacity: 1;
}
.controls .idx {
  background-color: var(--low-opacity-black);
  border-radius: 30px;
  color: white;
  font-size: 80%;
  white-space: nowrap;
  padding: 8px 0px;
  min-width: 80px;
  gap: 0.3em;
}

#progress-bars {
  display: flex;
  padding: var(--padding);
  background-color: var(--progress-bar-wrapper-background-color);
  gap: var(--progress-bar-gap);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#progress-bars.visible {
  opacity: 1;
}
#progress-bars .progress-bar {
  background-color: var(--progress-bar-background-color);
  flex-grow: 1;
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  overflow: hidden;
  height: var(--progress-bar-height);
}
#progress-bars .progress-bar .progress-bar-inner {
  height: 100%;
  background-color: var(--progress-bar-color);
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0.1s linear;
}

.story-wrapper {
  position: relative;
}
.story-wrapper #prev_overlay,
.story-wrapper #next_overlay {
  z-index: 300;
  color: white;
  width: 50px;
  height: 50px;
  transition: opacity 0.2s ease-in-out;
  margin: 0 var(--padding);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.story-wrapper #prev_overlay {
  left: 0;
}
.story-wrapper #next_overlay {
  right: 0;
}
.story-wrapper #story-settings {
  position: absolute;
  right: 0;
  margin: calc(var(--padding) * 2);
  z-index: 300;
  display: flex;
  gap: 5px;
  bottom: 0;
}

button {
  background-color: var(--button-color);
  color: white;
  border: none;
  padding: 10px;
  cursor: default;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 70%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
button.icon-button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  font-size: 16px;
  /* Adjust as needed */
}
button.icon-button i {
  transition: transform 0.1s ease-in-out;
}
button.icon-button:hover i {
  transform: scale(1.25);
}
button .hidden {
  display: none;
}
button:active {
  background-color: var(--button-active-color);
}
button:hover {
  background-color: var(--button-hover-color);
}
button.visible {
  opacity: 1;
  cursor: pointer;
}

button.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.centered-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.centered-flex > * {
  flex: 1 0 0;
}
.centered-flex > *.left-aligned {
  text-align: left;
}
.centered-flex > *.right-aligned {
  text-align: right;
}
.centered-flex > *.center {
  text-align: center;
  flex: 0;
  display: block;
}

@media (max-width: 767px) {
  :root {
    --progress-bar-height: 4px;
    --content-small: 60px;
    --content-full: 100px;
  }
}/*# sourceMappingURL=ig.css.map */

.close-button {
    background-color: var(--button-color);
    color: white;
    border: none;
    padding: 5px;
    cursor: default;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 26px;
    width: 40px;
    transition: opacity 0.3s ease-in-out;
}
.close-button a {
  text-align: center;
  display: block;
}
.close-button a i {
  color: white !important;
}

.close-button:hover {
    background-color: var(--button-hover-color);
}

@media (max-width: 767px) {
  .story-wrapper #prev_overlay,
  .story-wrapper #next_overlay {
    height: 80%;
    top: 50%;
    transform: translateY(-50%);
    width: 25%;
    background: transparent;
    border: none;
    margin: 0;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    font-size: 30px;
    display: flex;
    align-items: center;
  }

  .story-wrapper #prev_overlay {
    left: 0;
    justify-content: flex-start;
    background: radial-gradient(ellipse at left, rgba(0,0,0,0.15) 0%, transparent 70%);
  }

  .story-wrapper #next_overlay {
    right: 0;
    justify-content: flex-end;
    background: radial-gradient(ellipse at right, rgba(0,0,0,0.15) 0%, transparent 70%);
  }

  .story-wrapper #prev_overlay:hover {
    background: radial-gradient(ellipse at left, rgba(0,0,0,0.3) 0%, transparent 70%);
  }

  .story-wrapper #next_overlay:hover {
    background: radial-gradient(ellipse at right, rgba(0,0,0,0.3) 0%, transparent 70%);
  }

  button {
    z-index: 1000 !important;
  }
}

#centered-unmute {
  position: absolute;
  z-index: 500;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  border: 2px solid white;
}

#centered-unmute span {
  font-size: 14px;
  margin-top: 10px;
  font-weight: normal;
  text-transform: none;
}