@font-face {
  font-family: "robotoLight";
  src: url(https://narrativ-source-public.s3.amazonaws.com/static/fonts/Roboto-Light.ttf);
  font-display: swap;
}

@font-face {
  font-family: "robotoMedium";
  src: url(https://narrativ-source-public.s3.amazonaws.com/static/fonts/Roboto-Medium.ttf);
  font-display: swap;
}

@font-face {
  font-family: "robotoRegular";
  src: url(https://narrativ-source-public.s3.amazonaws.com/static/fonts/Roboto-Regular.ttf);
  font-display: swap;
}

@-webkit-keyframes pulse {
  50% {
    height: 17px;
  }

  100% {
    height: 4px;
  }
}

@keyframes pulse {
  50% {
    height: 17px;
  }

  100% {
    height: 4px;
  }
}

@-webkit-keyframes narrativ-hide {
  0% {
    opacity: 1;
    display: block;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes narrativ-hide {
  0% {
    opacity: 1;
    display: block;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

#narrativ-player_here,
#narrativ-sticky_player_here {

  --narrativBackgroundColorInPage: #F5F5F5;
  --narrativBackgroundColorResize: #4169E1;

  --narrativPlayerSectionMaxWidth: 2000px;
  --narrativPlayerSectionMarginTop: 0px;
  --narrativPlayerSectionMaxWidth1200px: 1200px;
  --narrativPlayerSectionMaxWidth900px: 900px;

  --narrativTimelineWidthStandard: 300px;
  --narrativTimelineWidth1200px: 250px;

  --narrativVolumeLeft: #4169E1;
  --narrativVolumeRight: #5B88FF;
  --narrativVolumeBubble: #4169E1;
  --narrativVolumeHover: #5B88FF;

  --narrativTimelinePlayed: #4169E1;
  --narrativTimelineBuffered: #5B88FF;
  --narrativTimelineToLoad: gray;
  --narrativTimelineBubble: #4169E1;
  --narrativTimelineHover: #5B88FF;

  --narrativPlayBtnFillColor: #4169E1;
  --narrativPlayBtnIconColor: white;
  --narrativPlayBtnFillColorHover: #5B88FF;

  --narrativResizePlayBtnFillColor: white;
  --narrativResizePlayBtnIconColor: #4169E1;
  --narrativResizePlayBtnFillColorHover: gray;

  --narrativTextColor: #414141;
  --narrativTextColorHover: #5b88ff;
  --narrativTextResizeColor: white;
  --narrativTextResizeColorHover: #aac2ff;

  --narrativVolumeResizedLeft: #5B88FF;
  --narrativVolumeResizedRight: white;
  --narrativVolumeResizedBubble: #5B88FF;
  --narrativVolumeResizedBubbleHover: white;

  --narrativBottomStickyMargin: 0px;
  --narrativBottomStickyWidthAdj: 32px;
  --narrativMobileWidthAdjust: 16px;
  --narrativMobileLeftAdjust: -24px;
  --narrativMobileBottomPad: 0px;

  --narrativPlayMaskX: 55%;
  --narrativPlayMaskY: 50%;
  --narrativPlayerWidthDefault: none;

  --narrativPlayerPadding1: 21px;
  --narrativPlayerPadding2: 24px;

  --narrativPlayerPhotoSize: 80px;




  --narrativSmallestWidth: undefined;
  --narrativSmallestMarginTop: undefined;
  --narrativSmallestMarLeft: undefined;
  --narrativSmallestMarRight: undefined;
  --narrativSmallestDisplay: block;
  --narrativSmallestAlign: undefined;
  --narrativSmallestJustCon: undefined;


}

.narrativ-player_section {
  width: var(--narrativPlayerWidthDefault);
  display: flex;
  margin: 0 auto 10px auto;
  left: 0;
  background: var(--narrativBackgroundColorInPage);
  box-shadow: 4px 0px 15px rgba(0, 0, 0, 0.12);
  padding: var(--narrativPlayerPadding1) var(--narrativPlayerPadding2);
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
  box-sizing: border-box;
}

.narrativ-player_section .narrativ-info_box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.narrativ-player_section .narrativ-info_box .narrativ-volume_text {
  display: none;
}

.narrativ-player_section .narrativ-title_box {
  display: flex;
  width: 25%;
  max-width: 320px;
  align-items: center;
  justify-content: flex-start;
}

.narrativ-player_section .narrativ-title_box .narrativ-current_photo {
  width: var(--narrativPlayerPhotoSize);
  height: var(--narrativPlayerPhotoSize);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 16px 0 0;
  position: relative;
}

.narrativ-current_title {
  color: var(--narrativTextColor);
  align-items: center;
  font-family: robotoRegular;
  font-size: 16px !important;
  line-height: 18px !important;
  cursor: default;

  /* Abbreviate titles that are too long */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* When the inline player is not reoriented, allow up to 4 lines */
#narrativ-player_here:not(.narrativ-width-reorient) .narrativ-current_title {
  -webkit-line-clamp: 4;
}

.narrativ-current_title:hover {
  color: var(--narrativTextColorHover);
}

.narrativ-player_section .narrativ-volume_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.narrativ-player_section .narrativ-volume_text {
  font-family: robotoMedium;
  font-size: 14px;
  line-height: 14px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  color: #999999;
}

.narrativ-player_section .narrativ-volume_text img {
  max-width: 65px;
  margin: 0 0 0 4px;
}

.narrativ-musicBar_animation {
  width: var(--narrativPlayerPhotoSize);
  height: var(--narrativPlayerPhotoSize);
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(0deg, rgba(64, 64, 64, 0.4), rgba(64, 64, 64, 0.4));
  border-radius: 8px;
}

.narrativ-musicBar_animation.narrativ-play span {
  -webkit-animation: pulse 1s linear infinite;
  animation: pulse 1s linear infinite;
}

.narrativ-musicBar_animation span {
  background: #FDFDFD;
  border-radius: 46.1538px;
  width: 3px;
  height: 4px;
  margin: 0 1.5px;
  display: block;
  position: relative;
  transition: all 1s;
}

.narrativ-musicBar_animation span:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.narrativ-musicBar_animation span:nth-child(2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.narrativ-musicBar_animation span:nth-child(3) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.narrativ-musicBar_animation span:nth-child(4) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.narrativ-musicBar_animation span:nth-child(5) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.narrativ-musicBar_animation span:nth-child(6) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.narrativ-musicBar_animation span:nth-child(7) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.narrativ-speed {
  position: absolute;
  left: 0;
  transition: all 0.2s;
}

.narrativ-speed .narrativ-speedValue {
  color: var(--narrativTextColor);
  font-family: robotoRegular;
  font-size: 16px;
  line-height: 19px;
  cursor: pointer;
  margin: 0 5px;
  border: none;
  outline: none;
  background-color: transparent;
}

.narrativ-speed .narrativ-speedValue:hover {
  color: var(--narrativTextColorHover);
}

.narrativ-speed .narrativ-speedValue:disabled {
  color: #606060;
}

.narrativ-speed .narrativ-speedValue.narrativ-active {
  font-weight: bold;
}

.narrativ-speed .narrativ-speedPop_Up {
  background: #F5F5F5;
  box-shadow: 4px 0px 15px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 16px 11px;
  visibility: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 120%;
  left: -130px;
  z-index: 10;
}

.narrativ-speed .narrativ-speedPop_Up.narrativ-show {
  visibility: visible;
}

.narrativ-player_box.narrativ-inActive {
  position: relative;
}

.narrativ-player_box.narrativ-inActive::after {
  width: 100%;
  height: 30%;
  content: "";
  position: absolute;
  bottom: 0%;
  left: 0;
  background-color: transparent;
  z-index: 10;
}

.narrativ-controller_box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 0 20px;
}

.narrativ-controller_box .narrativ-play_btn {
  width: 51px;
  height: 51px;
  background-color: var(--narrativPlayBtnFillColor);
  border-radius: 33.275px;
  border: none;
  outline: none;
  cursor: pointer;
  margin: 0 17px;
  transition: background-color 0.2s;
  padding: inherit;
}

.narrativ-controller_box .narrativ-play_btn::after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--narrativPlayBtnIconColor);
  -webkit-mask-image: url("https://narrativ-source-public.s3.amazonaws.com/static/play.svg");
  mask-image: url("https://narrativ-source-public.s3.amazonaws.com/static/play.svg");

  -webkit-mask-position: var(--narrativPlayMaskX) var(--narrativPlayMaskY);
  mask-position: var(--narrativPlayMaskX) var(--narrativPlayMaskY);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 20px;
  mask-size: 20px;

  opacity: 1;
}

.narrativ-controller_box .narrativ-play_btn.narrativ-pause::after {
  -webkit-mask-image: url("https://narrativ-source-public.s3.amazonaws.com/static/pause.svg");
  mask-image: url("https://narrativ-source-public.s3.amazonaws.com/static/pause.svg");
  -webkit-mask-size: 16px;
  mask-size: 16px;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
}

.narrativ-controller_box .narrativ-play_btn:hover,
.narrativ-controller_box .narrativ-play_btn:disabled {
  background-color: var(--narrativPlayBtnFillColorHover);
}

.narrativ-controller_box .narrativ-return {
  width: 30px;
  height: 35px;
  background-color: transparent;
  background-image: url("https://narrativ-source-public.s3.amazonaws.com/static/return.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: color 0.2s;
}

.narrativ-controller_box .narrativ-return:hover,
.narrativ-controller_box .narrativ-return:disabled {
  background-image: url("https://narrativ-source-public.s3.amazonaws.com/static/return-hover.svg");
  background-size: 100%;
}

.narrativ-controller_box .narrativ-return::after {
  content: "15";
  position: absolute;
  font-size: 10px;
  padding: 6px 0 0;
  font-family: robotoRegular;
  transition: all 0.2s;
  opacity: 1;
  display: block;
}

.narrativ-controller_box .narrativ-return:hover::after,
.narrativ-controller_box .narrativ-return:disabled::after {
  color: #606060;
}

.narrativ-controller_box .narrativ-return.narrativ-return_forward {
  transform: scaleX(-1);
}

.narrativ-controller_box .narrativ-return.narrativ-return_forward::after {
  transform: scaleX(-1);
  padding: 6px 2px 0 0;
}

.narrativ-volume {
  margin: 0 0 20px;
  display: flex;
  align-items: center;
}

.narrativ-volume .narrativ-volume_icon {
  margin: 0 11px 0 0;
  max-width: 22px;
  width: 22px;
  height: 18px;
  background-image: url("https://narrativ-source-public.s3.amazonaws.com/static/volume.svg");
  background-position: 0% 50%;
  background-repeat: no-repeat;
  background-size: 20px;
}

.narrativ-volume .narrativ-volume_icon.narrativ-mute {
  background-image: url("https://narrativ-source-public.s3.amazonaws.com/static/mute.svg");
}

.narrativ-volume .narrativ-volume_icon.narrativ-mute:hover {
  background-image: url("https://narrativ-source-public.s3.amazonaws.com/static/mute-hover.svg");
}

.narrativ-volume .narrativ-volume_icon:hover {
  background-image: url("https://narrativ-source-public.s3.amazonaws.com/static/volume-hover.svg");
}

.narrativ-audio_player {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.narrativ-audio_player .narrativ-currentTime,
.narrativ-audio_player .narrativ-durationTime {
  line-height: 14px;
  display: flex;
  align-items: center;
  font-family: robotoRegular;
  font-size: 12px;
  min-width: 30px;
  cursor: default;
}


#narrativ-sticky_player_here .narrativ-player_section {
  margin: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-animation: fadeInOut 0.5s ease-in-out;
  animation: fadeInOut 0.5s ease-in-out;
  justify-content: center;
  z-index: 9999;
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize {
  height: 76px;
  background-color: var(--narrativBackgroundColorResize);
  box-shadow: 4px 0px 15px rgba(0, 0, 0, 0.12);
  border-radius: 8px 8px 0px 0px;
  transition: all 0.5s;
  padding-top: 8px;
  padding-bottom: 12px;
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-current_photo,
#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-audio_player,
#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-volume_text {
  display: none;
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-arrow {
  background-color: #90AEFF;
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-arrow.collapse::after {
  transform: rotate(180deg);
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-play_btn {
  background-color: var(--narrativResizePlayBtnFillColor);
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-play_btn::after {
  background-color: var(--narrativResizePlayBtnIconColor);
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-player_box {
  width: 522px;
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-player_box.narrativ-inActive::after {
  display: none;
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-controller_box {
  margin: 0;
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-controller_box .narrativ-return {
  background-image: url("https://narrativ-source-public.s3.amazonaws.com/static/return-white.svg");
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-controller_box .narrativ-return::after {
  color: #FDFDFD;
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-current_title {
  color: var(--narrativTextResizeColor);
  max-width: 355px;
  overflow: hidden;
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-current_title:hover {
  color: var(--narrativTextResizeColorHover);
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-volume {
  margin: 0;
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-volume .narrativ-volume_icon {
  background-image: url("https://narrativ-source-public.s3.amazonaws.com/static/volume-white.svg");
  transition: all 0.3s;
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-volume .narrativ-volume_icon.narrativ-mute {
  background-image: url("https://narrativ-source-public.s3.amazonaws.com/static/mute-white.svg");
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-speed .narrativ-speedValue {
  color: var(--narrativTextResizeColor);
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-speed .narrativ-speedValue:hover {
  color: var(--narrativTextResizeColorHover);
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-speed .narrativ-speedPop_Up {
  background-color: var(--narrativBackgroundColorResize);
  box-shadow: 4px 0px 15px rgba(0, 0, 0, 0.32);
}


#narrativ-sticky_player_here .narrativ-player_section .narrativ-arrow {
  position: absolute;
  background: #4169E1;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  top: -16px;
  right: 5vw;
  cursor: pointer;
}

#narrativ-sticky_player_here .narrativ-player_section .narrativ-arrow::after {
  content: "";
  background-image: url("https://narrativ-source-public.s3.amazonaws.com/static/arrow.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  position: absolute;
  transition: all 0.3s;
  width: 100%;
  height: 100%;
}

#narrativ-sticky_player_here .narrativ-player_section .narrativ-arrow.narrativ-collapse::after {
  transform: rotate(180deg);
}

#narrativ-sticky_player_here .narrativ-player_section .narrativ-player_box {
  margin: 0 85px 0 81px;
}


/* ======================== ALL SLIDERS ======================== */

/* ====================== TIMELINE SLIDER ====================== */

input[type=range]:active,
input[type=range]:focus {
  outline: 0;
}

.narrativ-timeline input[type=range]::-webkit-slider-runnable-track,
.narrativ-timeline input[type=range]::-moz-range-track,
.narrativ-timeline input[type=range]::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
  position: relative;
}

.narrativ-audio_player .narrativ-buffered2 {
  height: 4px;
  border-radius: 16px;
  background: var(--narrativTimelineToLoad);
  position: absolute;
  left: 0;
  z-index: 0;
}

.narrativ-audio_player .narrativ-timeline {
  background: var(--narrativTimelineBuffered);
  width: var(--narrativTimelineWidthStandard);
  height: 4px;
  position: relative;
  cursor: pointer;
  margin: 0 8px;
  border-radius: 16px;
  display: flex;
}

.narrativ-audio_player .narrativ-timeline .narrativ-seek_slider {
  -webkit-appearance: none;
  height: 4px;
  background: var(--narrativTimelineBuffered);
  border-radius: 16px;
  background-image: linear-gradient(var(--narrativTimelinePlayed), var(--narrativTimelinePlayed));
  background-size: 0% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  margin: 0px;
}

.narrativ-audio_player .narrativ-timeline .narrativ-seek_slider {
  background-color: var(--narrativTimelineBuffered);
  width: 100%;
}

.narrativ-timeline input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--narrativTimelineBubble);
  cursor: pointer;
  border: none;
}

.narrativ-timeline input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--narrativTimelineBubble);
  cursor: pointer;
  border: none;
  outline: none;
}

.narrativ-timeline input[type=range]::-ms-thumb {
  -ms-appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--narrativTimelineBubble);
  cursor: pointer;
  border: none;
  position: relative;
  top: 0px;
}

.narrativ-audio_player .narrativ-timeline:hover input[type=range]::-webkit-slider-thumb {
  background: var(--narrativTimelineHover);
}

.narrativ-timeline input[type=range]::-webkit-slider-thumb:hover,
.narrativ-timeline input[type=range]::-moz-range-thumb:hover,
.narrativ-timeline input[type=range]::-ms-thumb:hover {
  background: var(--narrativTimelineHover);
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize input[type=range]:hover::-webkit-slider-thumb,
#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize input[type=range]:hover::-moz-range-thumb,
#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize input[type=range]:hover::-ms-thumb {
  background: var(--narrativTimelineHover);
}

#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize input[type=range]::-webkit-slider-thumb,
#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize input[type=range]::-moz-range-thumb,
#narrativ-sticky_player_here .narrativ-player_section.narrativ-resize input[type=range]::-ms-thumb {
  background: var(--narrativTimelineBubble);
}


/* ====================== VOLUME SLIDER ====================== */

.narrativ-volume input {
  display: inline-block;
  vertical-align: middle;
  font-size: 1em;
  font-family: Arial, sans-serif;
}

.narrativ-volume input[type=range] {
  -webkit-appearance: none;
  /*width: 143px;*/
  width: 90%;
  height: 4px;
  
  /* We are using a variable to be able to change the percentage from the JS independantly of the color
     which depends on whether or not the narrativ-resize class is applied */
  --narrativVolumePercentage: 70%;
  background: linear-gradient(to right, var(--narrativVolumeLeft) var(--narrativVolumePercentage), var(--narrativVolumeRight) var(--narrativVolumePercentage));
  

  border-radius: 16px;
  background-repeat: no-repeat;
}

.narrativ-resize .narrativ-volume input[type=range] {
  background: linear-gradient(to right, var(--narrativVolumeResizedLeft) var(--narrativVolumePercentage), var(--narrativVolumeResizedRight) var(--narrativVolumePercentage));
}

.narrativ-volume input[type=range].narrativ-mute {
  background: linear-gradient(to right, var(--narrativVolumeLeft) 0%, var(--narrativVolumeRight) 0%) !important;
}

.narrativ-volume input[type=range].narrativ-mute::-webkit-slider-thumb,
.narrativ-volume input[type=range].narrativ-mute::-moz-range-thumb,
.narrativ-volume input[type=range].narrativ-mute::-ms-thumb {
  position: absolute;
  top: -6px;
}

.narrativ-volume input[type=range]::-webkit-slider-thumb {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--narrativVolumeBubble);
  cursor: pointer;
  border: none;
  -webkit-appearance: none;
}

.narrativ-resize .narrativ-volume input[type=range]::-webkit-slider-thumb {
  background: var(--narrativVolumeResizedBubble);
}

.narrativ-volume input[type=range]::-moz-range-thumb {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--narrativVolumeBubble);
  cursor: pointer;
  border: none;
  -moz-appearance: none;
  appearance: none;
}

.narrativ-resize .narrativ-volume input[type=range]::-moz-range-thumb {
  background: var(--narrativVolumeResizedBubble);
}

.narrativ-volume input[type=range]::-ms-thumb {

  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--narrativVolumeBubble);
  cursor: pointer;
  border: none;
  -ms-appearance: none;
  position: relative;
  top: 0px;
}

.narrativ-resize .narrativ-volume input[type=range]::-ms-thumb {
  background: var(--narrativVolumeResizedBubble);
}




.narrativ-volume input[type=range]:hover::-webkit-slider-thumb {
  background: var(--narrativVolumeHover);
}

.narrativ-volume input[type=range]:hover::-moz-range-thumb {
  background: var(--narrativVolumeHover);
}

.narrativ-volume input[type=range]:hover::-ms-thumb {
  background: var(--narrativVolumeHover);
}




.narrativ-resize .narrativ-volume input[type=range]:hover::-webkit-slider-thumb {
  background: var(--narrativVolumeResizedBubbleHover);
}

.narrativ-resize .narrativ-volume input[type=range]:hover::-moz-range-thumb {
  background: var(--narrativVolumeResizedBubbleHover);
}

.narrativ-resize .narrativ-volume input[type=range]:hover::-ms-thumb {
  background: var(--narrativVolumeResizedBubbleHover);
}


/* ====================== WIDTH DYNAMICS ====================== */


.narrativ-width-reorient .narrativ-player_section {
  width: var(--narrativPlayerWidthDefault);
  max-width: var(--narrativPlayerSectionMaxWidth1200px);
  flex-direction: column;
  border-radius: 8px;
}

.narrativ-width-reorient .narrativ-player_section .narrativ-title_box {
  max-width: 100%;
  width: 100%;
}

.narrativ-width-reorient .narrativ-player_section .narrativ-title_box img {
  max-width: 60px;
}

.narrativ-width-reorient .narrativ-player_section .narrativ-title_box .narrativ-current_title {
  max-width: 100%;
  overflow: hidden;
}

.narrativ-width-reorient .narrativ-player_section .narrativ-info_box {
  flex-direction: column-reverse;
  max-width: calc(100% - 96px);
}

.narrativ-player_section .narrativ-volume_text {
  cursor: pointer;
}

.narrativ-width-reorient .narrativ-player_section .narrativ-info_box .narrativ-volume_text {
  display: flex;
  margin: 0 0 8px;
}

.narrativ-width-reorient .narrativ-player_section .narrativ-volume_box {
  display: none;
}

.narrativ-width-reorient .narrativ-player_section .narrativ-volume_text img {
  margin: 0 0 0 3px;
}

.narrativ-width-reorient .narrativ-player_box {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
}

.narrativ-width-reorient .narrativ-player_box.narrativ-inActive::after {
  bottom: 55%;
  height: 40%;
}

.narrativ-width-reorient .narrativ-controller_box {
  margin: 0;
}

.narrativ-width-reorient .narrativ-audio_player {
  width: 100%;
  min-height: 45px;
  margin: 12px 0 0px;
  position: relative;
  align-items: flex-start;
}

.narrativ-width-reorient .narrativ-audio_player .narrativ-timeline {
  width: 100%;
  margin: 0;
}

.narrativ-width-reorient .narrativ-audio_player .narrativ-durationTime,
.narrativ-width-reorient .narrativ-audio_player .narrativ-currentTime {
  position: absolute;
  top: 15px;
}

.narrativ-width-reorient .narrativ-audio_player .narrativ-durationTime {
  right: 0;
}

.narrativ-width-reorient .narrativ-audio_player .narrativ-currentTime {
  left: 0;
}

.narrativ-width-reorient .narrativ-speed .narrativ-speedPop_Up {
  left: 0px;
}

#narrativ-sticky_player_here .narrativ-width-reorient {
  height: 226px;
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section {
  height: 225px;
  padding: 0px 16px 0px;
  left: 0;
  box-shadow: 4px 0px 15px rgba(0, 0, 0, 0.12);
  border-radius: 8px 8px 0px 0px;
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section .narrativ-arrow {
  top: 16px;
  right: 5px;
  background-color: transparent;
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section .narrativ-arrow.narrativ-collapse {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section .narrativ-arrow.narrativ-collapse::after {
  background-position: 20px 50%;
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section .narrativ-arrow::after {
  filter: invert(1);
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section.narrativ-resize {
  height: 64px;
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section.narrativ-resize .narrativ-arrow {
  background-color: transparent;
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section.narrativ-resize .narrativ-arrow::after {
  filter: invert(0);
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section.narrativ-resize .narrativ-speed,
#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section.narrativ-resize .narrativ-return {
  display: none;
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section.narrativ-resize .narrativ-play_btn {
  width: 32px;
  height: 32px;
  margin: 0;
  z-index: 10;
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section.narrativ-resize .narrativ-play_btn::after {
  -webkit-mask-size: 12px;
  mask-size: 12px;
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section.narrativ-resize .narrativ-info_box {
  width: 100%;
  max-width: 100%;
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section.narrativ-resize .narrativ-info_box .narrativ-current_title {
  width: 100%;
  max-width: 100%;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section.narrativ-resize .narrativ-player_box {
  position: absolute;
  width: 60px;
  right: 50px;
  margin: 0;
  -webkit-animation: bg 0.3s 0.1s ease-in;
  animation: bg 0.3s 0.1s ease-in;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  transition: all 0.3s;
}

#narrativ-sticky_player_here .narrativ-width-reorient .narrativ-player_section.narrativ-resize .narrativ-player_box .narrativ-controller_box {
  justify-content: flex-end;
}

#narrativ-player_here .narrativ-player_section {
  width: var(--narrativPlayerWidthDefault);
  max-width: var(--narrativPlayerSectionMaxWidth);
  margin-top: var(--narrativPlayerSectionMarginTop);
  margin-bottom: var(--narrativPlayerSectionMarginBottom);
}

#narrativ-sticky_player_here.narrativ-hidden {
  display: none;
}

@media all and (max-width: 1200px) {
  #narrativ-player_here .narrativ-player_section {
    width: var(--narrativPlayerWidthDefault);
    max-width: var(--narrativPlayerSectionMaxWidth1200px);
  }

  .narrativ-audio_player .narrativ-timeline {
    width: var(--narrativTimelineWidth1200px);
  }

  .narrativ-player_section .narrativ-title_box .narrativ-current_title {
    font-size: 16px;
    max-width: 150px;
  }

  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-player_box {
    width: 376px;
  }

  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-current_title {
    max-width: 246px;
  }

  #narrativ-sticky_player_here .narrativ-player_section .narrativ-player_box {
    margin: 0 50px;
    background: transparent;
  }
}

@media all and (max-width: 900px) {
  #narrativ-player_here .narrativ-player_section {
    width: var(--narrativPlayerWidthDefault);
    max-width: var(--narrativPlayerSectionMaxWidth900px);
  }

  .narrativ-player_section {
    flex-direction: column;
    border-radius: 8px;
  }

  .narrativ-player_section .narrativ-title_box {
    max-width: 100%;
    width: 100%;
  }

  .narrativ-player_section .narrativ-title_box img {
    max-width: 60px;
  }

  .narrativ-player_section .narrativ-title_box .narrativ-current_title {
    max-width: 100%;
    overflow: hidden;
  }

  .narrativ-player_section .narrativ-info_box {
    flex-direction: column-reverse;
    max-width: calc(100% - 96px);
  }

  .narrativ-player_section .narrativ-info_box .narrativ-volume_text {
    cursor: pointer;
    display: flex;
    margin: 0 0 8px;
  }

  .narrativ-player_section .narrativ-volume_box {
    display: none;
  }

  .narrativ-player_section .narrativ-volume_text img {
    margin: 0 0 0 3px;
  }

  .narrativ-player_box {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .narrativ-player_box.narrativ-inActive::after {
    bottom: 55%;
    height: 40%;
  }

  .narrativ-controller_box {
    margin: 0;
  }

  .narrativ-audio_player {
    width: 100%;
    min-height: 45px;
    margin: 12px 0 0px;
    position: relative;
    align-items: flex-start;
  }

  .narrativ-audio_player .narrativ-timeline {
    width: 100%;
    margin: 0;
  }

  .narrativ-audio_player .narrativ-durationTime,
  .narrativ-audio_player .narrativ-currentTime {
    position: absolute;
    top: 15px;
  }

  .narrativ-audio_player .narrativ-durationTime {
    right: 0;
  }

  .narrativ-audio_player .narrativ-currentTime {
    left: 0;
  }

  .narrativ-speed .narrativ-speedPop_Up {
    left: 0px;
  }

  #narrativ-sticky_player_here {
    height: 226px;
  }

  #narrativ-sticky_player_here .narrativ-player_section {
    height: 225px;
    padding: 0px 16px 0px;
    left: 0;
    box-shadow: 4px 0px 15px rgba(0, 0, 0, 0.12);
    border-radius: 8px 8px 0px 0px;
  }

  #narrativ-sticky_player_here .narrativ-player_section .narrativ-arrow {
    top: 16px;
    right: 5px;
    background-color: transparent;
  }

  #narrativ-sticky_player_here .narrativ-player_section .narrativ-arrow.narrativ-collapse {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }

  #narrativ-sticky_player_here .narrativ-player_section .narrativ-arrow.narrativ-collapse::after {
    background-position: 20px 50%;
  }

  #narrativ-sticky_player_here .narrativ-player_section .narrativ-arrow::after {
    filter: invert(1);
  }

  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize {
    height: 64px;
  }

  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-arrow {
    background-color: transparent;
  }

  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-arrow::after {
    filter: invert(0);
  }

  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-speed,
  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-return {
    display: none;
  }

  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-play_btn {
    width: 32px;
    height: 32px;
    margin: 0;
    z-index: 10;
  }

  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-play_btn::after {
    -webkit-mask-size: 12px;
    mask-size: 12px;
  }

  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-info_box {
    width: 100%;
    max-width: 100%;
  }

  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-info_box .narrativ-current_title {
    width: 100%;
    max-width: 100%;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
  }

  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-player_box {
    position: absolute;
    width: 60px;
    right: 50px;
    margin: 0;
    -webkit-animation: bg 0.3s 0.1s ease-in;
    animation: bg 0.3s 0.1s ease-in;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    transition: all 0.3s;
  }

  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-player_box .narrativ-controller_box {
    justify-content: flex-end;
  }
}


@media screen and (max-width: 600px) {
  #narrativ-sticky_player_here .narrativ-player_section {
    margin-bottom: var(--narrativBottomStickyMargin) !important;
  }
}

@media all and (max-width: 500px) {
  #narrativ-player_here .narrativ-player_section {
    padding: 20px 16px 20px;
    margin-left: var(--narrativMobileLeftAdjust) !important;
    width: calc(100% + var(--narrativMobileWidthAdjust)) !important;
    overflow: hidden;
  }

  #narrativ-player_here .narrativ-player_section {
    margin-bottom: var(--narrativMobileBottomPad);
  }

  #narrativ-player_here {
    width: var(--narrativSmallestWidth);
  }

  #narrativ-player_here,
  #narrativ-sticky_player_here {
    padding: 0 8px;

    margin-top: var(--narrativSmallestMarginTop);
    margin-left: var(--narrativSmallestMarLeft);
    margin-right: var(--narrativSmallestMarRight);
    display: var(--narrativSmallestDisplay);
    align-items: var(--narrativSmallestAlign);
    justify-content: var(--narrativSmallestJustCon);

    box-sizing: border-box;
  }

  #narrativ-sticky_player_here .narrativ-player_section {
    padding: 0px 16px 0px;
  }

  #narrativ-sticky_player_here .narrativ-player_section.narrativ-resize .narrativ-info_box .narrativ-current_title {
    max-width: 70%;
  }

}