/*
 * standard_new_short_player.css — externalized static CSS for standard_new_short_player.jsp
 *
 * Externalized 2026-05-24 (audit: engineering-docs/features/jsp-externalization-audit-2026-05-24.md)
 *
 * Per-partner theming values live in the JSP as CSS custom properties on :root.
 * This file consumes them via var(--name).
 *
 * Versioned filename for cache-busting. Bump the version when this file changes.
 * Tomcat serves /css/* with Cache-Control: public, max-age=31536000, immutable.
 */

                  #instaread-widget {
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}

                  .pointer {
                      cursor: pointer;
                  }

                  .provider-primary {
                      color: var(--primary-color);
                  }

                  .provider-primary-background,
                  .provider-primary-background-spinner:after {
                      background-image: linear-gradient(141deg, var(--background-gradient-start) 12%, var(--background-gradient-stop) 87%);
                  }

                  .provider-primary-background {
                      background: var(--primary-color) !important;
                  }

                  .provider-primary-border,
                  .button-container:hover .spinner,
                  .button-container:hover .spinner:before,
                  .button-container-selected .provider-primary-selected,
                  .button-container-selected .provider-primary-border-small,
                  .provider-primary-seekbar::-webkit-slider-thumb,
                  .provider-primary-seekbar::-moz-range-thumb,
                  .provider-primary-seekbar::-moz-range-progress,
                  .button-container:hover .circular-button,
                  .button-container:hover .spinner:after,
                  .button-container:hover .speed-text-hover,
                  .widget-ad-container,
                  .provider-primary-seekbar::-moz-range-progress,
                  input[type="range"]::-webkit-slider-thumb,
                  input[type="range"]::-moz-range-thumb,
                  .provider-primary-seekbar::-webkit-slider-thumb:hover,
                  .provider-primary-seekbar::-moz-range-thumb:hover,
                  .provider-primary-seekbar::-moz-range-thumb {
                      background-color: var(--primary-color);
                  }



                  .provider-primary-border {
                      border: solid 4px var(--primary-color);
                  }

                  .sponsor-text {
                      color: var(--sponsor-text-color);
                      font-size: var(--sponsor-text-size) !important;
                  }

                  .sponsor-instaread-logo {
                      height: var(--sponsor-text-logo) !important;
                  }

                  .speed-text-hover {
                      color: var(--speed-time-color);
                  }

                  .speed-current-time,
                  .audio-primary-text,
                  .current {
                      color: var(--speed-time-current-color);
                  }

                  .widget-ad-container {
                      /* background-image: linear-gradient(to bottom, var(--widget-ad-gradient-start-color) 0%, var(--widget-ad-gradient-end-color) 100%) !important; */
                      cursor: pointer;
                      height:35px;
                      background-image:url(../images/default_ad.png); /* Set the path to your image */
                      background-size: cover; /* Adjust the background size */
                      width: 250px;
                      background-repeat: no-repeat;
                      -webkit-background-repeat: no-repeat;
                      -moz-background-repeat: no-repeat;
                      -o-background-repeat: no-repeat;
                      background-position: center;
                      box-shadow:none !important;
                      -webkit-background-size: contain;
                      -moz-background-size: contain;
                      -o-background-size: contain;
                  }
                  .widget-ad-inner-container_default{
                      background-image: url(../images/default_ad.png) !important;
                      background-size: cover !important;
                      background-position: center !important;
                  }

                 .audioPrimaryWaves{
                    height: auto;
    width: 100%;
    cursor: pointer;
    max-width: 100%;
}
#audioWaveform {
  width: 100%;
  height: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  user-select: none; /* Prevent text selection during drag */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Static waveform bars */
.waveform-bar {
  width: 4px;
  background-color: var(--track-unfinished-bg-color);
  border-radius: 3px; /* Fully rounded ends (half of width) */
  transition: background-color 0.4s ease, opacity 0.3s ease, transform 0.2s ease;
  flex-shrink: 0;
  opacity: 1;
  animation: fadeInBar 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  pointer-events: none; /* Let clicks pass through to container */
}

@keyframes fadeInBar {
  0% {
    opacity: 0;
    transform: scaleY(0.5);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Gradual fill effect - Apple Music style (left to right) */
.waveform-bar.filling {
  position: relative;
  background-color: var(--track-unfinished-bg-color);
  transition: background-color 0.2s ease;
}

.waveform-bar.filling::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--fill-percentage, 0%);
  background-color: var(--primary-color);
  border-radius: 3px;
  transition: width 0.15s ease, opacity 0.1s ease;
  z-index: 1;
}

/* Smooth transition from filling to played - prevent blink */
.waveform-bar.played {
  position: relative;
  background-color: var(--primary-color);
  transition: background-color 0.15s ease;
}

/* When played, keep the fill pseudo-element at 100% to prevent blink */
.waveform-bar.played::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--primary-color);
  border-radius: 3px;
  opacity: 1;
  transition: opacity 0.2s ease, width 0.15s ease;
  z-index: 1;
}

/* Ensure waveform container is responsive */
.audioPrimaryWaves {
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.audioPrimaryWaves.transitioning {
  opacity: 0.3;
}

                  .underline {
                      -webkit-text-decoration-line: underline;
                      text-decoration-line: underline;
                  }

                  .text-black {
                      color: #000;
                  }

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

                  .toast {
                      position: fixed;
                      bottom: 10px;
                      left: 50%;
                      transform: translateX(-50%);
                      background-color: var(--primary-color);
                      color: #fff;
                      padding: 6px 20px;
                      border-radius: 5px;
                      opacity: 0;
                      transition: opacity 0.3s;
                      z-index: 9999;
                  }

                  .toast.show {
                      opacity: 1;
                  }

                  .toast-content {
                      font-size: 14px;
                  }

                  .pby-container {
                      z-index: 9999;
                      cursor: pointer;
                  }

                  /** Thumb Styles **/
                  /** Chrome, Safari, Opera, and Edge Chromium **/
                  input[type="range"]::-webkit-slider-thumb {
                      -webkit-appearance: none;
                      /* Override default look */
                      appearance: none;
                      background-color: var(--primary-color);
                      border: none;
                      border-radius: 100%;
                      height: 12px;
                      width: 12px;
                  }

                  /** Thumb Styles **/
                  /** Firefox **/
                  input[type="range"]::-moz-range-thumb {
                      border: none;
                      border-radius: 100%;
                      background-color: var(--primary-color);
                      height: 12px;
                      width: 12px;
                  }
                  .provider-primary-seekbar::-webkit-slider-thumb:hover {
                      -webkit-appearance: none;
                      /* Override default look */
                      background-color: var(--primary-color);
                      appearance: none;
                      border: none;
                      border-radius: 100%;
                      height: 12px;
                      width: 12px;
                  }

                  .provider-primary-seekbar::-moz-range-thumb:hover {
                      -webkit-appearance: none;
                      /* Override default look */
                      appearance: none;
                      border: none;
                      border-radius: 100%;
                      background-color: var(--primary-color);
                      height: 12px;
                      width: 12px;
                  }

                  .provider-primary-border {
                      border: solid 4px var(--primary-color);
                  }

                  /* .instaread-widget-mobile .provider-secondary-background {
                      background-color: #ffffff;
                  } */
                    .instaread-widget-mobile .audioplayer-middle-container-1 {
                    padding-right: 1rem !important;
                    padding-left: 0.5rem !important;
                 }
                 .instaread-widget-desktop .audioplayer-middle-container-1{
                   padding-left: 0.65rem !important;
                  padding-right: 0.65rem !important;
               }

                  .widget-ads-container {
                      padding: 1px
                  }
                 .instaread-widget-mobile .widget-ad-container{
                  margin-top: 0px !important;
                 }
                  .instaread-widget-mobile .widget-ads-container{
                      width: 320px;
                      min-width: 320px;
                      height: 100px;
                      display: flex;
                      justify-content: center;
                      position: relative;
                      align-items: center
                  }
                  .instaread-widget-mobile .parent-ad-container {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      flex-direction: column;
                  }


                  .instaread-widget-mobile .widget-audio-container{
                      padding-top: 16px;
                      position: relative;
                  }

                  /* .instaread-widget-mobile .widget-audio-inner-container{
                      height:auto;
                  } */

                  .instaread-widget-mobile {
                      background-color: var(--bg-secondary-color);
                      width: 99%;
                      height: 218.4px;
                       box-shadow: var(--box-shadow) !important;

                     /** border: solid 1px rgb(0 0 0 / 0.1);
                      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); **/
                  }

                  .instaread-widget-desktop {
                       box-shadow: var(--box-shadow) !important;
                      /** border: solid 1px rgb(0 0 0 / 0.1);
                      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); -- **/
                  }
                  .adp-interscroller-container{
                      position: absolute;
                  }
                  .adp-interscroller-inner-div{
                      margin-top: 0px;
                  }

                  #audio_speed {
                      padding: 0.5px;
                      border: 1px solid var(--primary-color);
                      border-radius: 2px;
                      color: var(--primary-color);
                      font-weight: 500;
                      font-size: 12px;
                      border-radius: 0;
                      /* line-height: 0; */
                      letter-spacing: -1;
                      -webkit-appearance: none;
                      -moz-appearance: none;
                      appearance: none;
                      text-align: center;
                      text-align-last: center;
                      -webkit-text-align: center;
                      -moz-text-align: center;
                      background-color: #ffffff;
                      -webkit-background-color: #ffffff;
                      -moz-background-color: #ffffff;
                  }

                  /* Show the snackbar when clicking on a button (class added with JavaScript) */
                  .show {
                      visibility: visible !important;
                  }

                  /* new desktop styles*/
                  .instaread-widget-desktop .icon-backward_15 #back_15 {
                      width: 25px;
                      height: 25px;
                  }
                    .instaread-widget-mobile #audio_speed {
                            width: 35px !important;
                        }


                  #audio_speed {
                      width: 32px;
                      height: 18px;
                      font-family: var(--font-family) !important;
                      -webkit-appearance: none;
                      -moz-appearance: none;
                      appearance: none;
                      text-align: center;
                      text-align-last: center;
                      -webkit-text-align: center;
                      -moz-text-align: center;
                      background-color: #ffffff;
                      -webkit-background-color: #ffffff;
                      -moz-background-color: #ffffff;

                  }

                  .instaread-widget-mobile .pby-container .pb-instaread-logo {
                      width: auto;
                      opacity: 0.2;
                      height: 14px;
                  }

                  .instaread-widget-mobile .audio_control_containers {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                  }

                  .instaread-widget-mobile .flexible-seekbar {
                      padding: 0.0319rem 0;
                  }

                  .instaread-widget-mobile .audio-control-1 {
                      width: 95.126%;
                  }
                  .audio-primary-text{
                      font-family: var(--font-family) !important;
                  }
                  #textTime{
                      font-family: var(--font-family);
                  }
                  .circular-button{
                      box-shadow: none;
                  }

                  .instaread-widget-mobile .circular-button {
          position: relative;
          width: 50px;
          height: 50px;
      }
                  .instaread-widget-mobile .pby-container{
                      right: 4.14%;
                      bottom: -17px;
                  }
                  .instaread-widget-mobile .icon-backward_15{
                      padding-top: 5px;
                  }
                  .instaread-widget-mobile .icon-farward_15{
                      padding-top: 5px;
                  }
                  .instaread-widget-mobile .icon-backward_15 #back_15{
                      width: 20px;
                      height: 18px;

                  }
                  .instaread-widget-mobile .icon-farward_15 #far_15{
                      width: 20px;
                      height: 18px;
                  }
              .instaread-widget-mobile .icon-pause {
                background: url("../images/icon-pause.png") no-repeat;
                background-position: center ;
              }
              .instaread-widget-mobile .icon-replay {
                background: url("../images/icon-replay.png") no-repeat;
                background-position: center;
              }
              /* .instaread-widget-desktop .icon-pause{
                background: url("../images/pause-icon.svg") no-repeat;
                background-position: center ;
              }
              .instaread-widget-desktop .icon-replay{
                background: url("../images/replay-icon.svg") no-repeat;
                background-position: center;
              } */
              .instaread-widget-mobile .play-icon-inner-container{
                margin-top: 0px;
                margin-left: 0px;
                height: 50px !important;
                display: block;
              }

               .instaread-widget-mobile .audio-primary-text {
                  font-size: 14px;
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  display: flex;
                  align-items: center;
                  box-sizing: border-box;
                  height: 15px;
                  padding-left: 1.2rem;
              }
              .instaread-widget-mobile #widget-audio-container > div[style*="justify-content: space-between"]{
                display: flex;
                justify-content: space-between;
                position: absolute;
                top: 0;
                left: 0;
                height: 29px;
                align-items: center;
                padding: 0 1.2rem;
                box-sizing: border-box;
                width: 100%;
              }
              .instaread-widget-mobile .advertisementText{
                  font-size: 12px !important;
                  font-family: var(--font-family);
                  margin-bottom: 6px;
                  width: 100%;
                  padding-left: 2.8rem;
                  min-height: 16px;
              }
              .instaread-widget-mobile #audioPrimaryWave{
                  width: 220px;
                  height: 50px;
              }
              .circle-block{
                align-items: center;
                display: flex;
                justify-content: center;
                position: relative;
              }
              .spinner:after{
                width: 50%;
                height: 50%;
                border-radius: 50%;
                content: "";
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
              }
              .spinner:before{
                width: 50%;
                height: 50%;
                background: #ffffff;
                border-radius: 100% 0 0;
                position: absolute;
                top: 0;
                left: 0;
                content: "";
              }
              .spinner{
                margin: 0.72rem 0.24rem;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background: #ffffff;
                background: -moz-linear-gradient(left, #ffffff, rgba(226, 245, 255, 0));
                background: -webkit-linear-gradient(left, #ffffff, rgba(226, 245, 255, 0));
                background: -o-linear-gradient(left, #ffffff, rgba(226, 245, 255, 0));
                background: -ms-linear-gradient(left, #ffffff, rgba(226, 245, 255, 0));
                background: linear-gradient(to right, #ffffff 16%, rgba(226, 245, 255, 0) 58%);
                -webkit-animation: load3 1.4s infinite linear;
                animation: load3 1.4s infinite linear;
              }
              @-webkit-keyframes load3 {
                0% {
                  -webkit-transform: rotate(0deg);
                  transform: rotate(0deg);
                }
                100% {
                  -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
                }
              }
              @keyframes load3 {
                0% {
                  -webkit-transform: rotate(0deg);
                  transform: rotate(0deg);
                }
                100% {
                  -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
                }
              }
              .instaread-widget-desktop .icon-replay {
                  /* -webkit-box-shadow: 1px 1px 5px 0px rgba(161, 161, 161, 1);
                  -moz-box-shadow: 1px 1px 5px 0px rgba(161, 161, 161, 1);
                  box-shadow: 1px 1px 5px 0px rgba(161, 161, 161, 1); */
                  border-radius: 50%;
              }
              .instaread-widget-mobile .icon-replay {
                  /* -webkit-box-shadow: 1px 1px 5px 0px rgba(161, 161, 161, 1);
                  -moz-box-shadow: 1px 1px 5px 0px rgba(161, 161, 161, 1);
                  box-shadow: 1px 1px 5px 0px rgba(161, 161, 161, 1); */
                  border-radius: 50%;
              }
              .instaread-widget-desktop .audioplayer-middle-container-1{
                  padding-left: 1rem;
                  display: flex;
                  align-items: center;
                  height:100%;
              }

              .instaread-widget-mobile .audioplayer-middle-container-1{
                  align-items: center;
                  display: flex;
              }


              .instaread-widget-desktop .pby-container {
                bottom: 15px;
            }


                  @media all and (min-width:600px) {

                      .instaread-widget-desktop {
                          background-color: var(--bg-secondary-color);
                          width: 99%;
                          height: 140px;
                          display: flex;
                          flex-direction: row;
                          align-items: center;
                      }

                      .instaread-widget-desktop .audio_control_containers {
                          display: flex;
                          justify-content: center;
                          align-items: center;

                      }
                      .instaread-widget-desktop .icon-backward_15{
                          padding-top: 5px;
                      }
                      .instaread-widget-desktop .icon-farward_15{
                          padding-top: 5px;
                      }
                      .instaread-widget-desktop .flexible-seekbar {
                          padding: 0.0319rem 0;
                      }
                      .instaread-widget-desktop .parent-ad-container{
                                 width: 52%;
                              padding: 0px 10px;
                              border-bottom: 0;
                              height: 132px;
                              padding-left:0px !important
                      }
                      .instaread-widget-desktop #widget-audio-container {
                          width: 65%;
                          min-width: 278.4px;
                          padding: 0px 10px;
                          min-width: 278.4px;
                          border-bottom: 0;
                          position: relative;
                          padding-top: 55px;
                          padding-left:0px !important
                      }



                      .instaread-widget-desktop .widget-ads-container {
                          /* padding: 15px 10px;
                          width: 370.3px; */
                          width: 320px;
                          min-width: 320px;
                          min-height: 100px;
                          height: 100px;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          position: relative;
                      }

                      .instaread-widget-desktop .left-container {
                          margin-left: 0.3rem;
                      }


                      .default-instaread-ad-container {
                          height: 42px !important;
                      }

                      .instaread-widget-desktop .circular-button {
                          height: 50px;
                          width: 50px;
                      }

                      .instaread-widget-desktop .pby-container .pb-instaread-logo {
                          opacity: 0.2;
                          height: 14px;
                          width: auto;
                      }

                      .instaread-widget-desktop .instaread-logo {
                          width: 48px;
                      }

                      .instaread-widget-desktop .audio-control-1 {
                          width: 101.03%;
                      }

                      .instaread-widget-desktop .pby-container {
                          right: 3.2%;
                      }

                      .instaread-widget-desktop .speed-current-time {
                          margin-right: 0.1rem;
                          padding-top: 4px;
                      }


                      .instaread-widget-desktop .icon-backward_15 #back_15 {
                          width: 20px;
                          height: 18px;
                      }

                      .instaread-widget-desktop .icon-farward_15 #far_15 {
                          width: 20px;
                          height: 18px;
                      }

                      #audio_speed {
                          font-size: 11px;
                          cursor: pointer;
                          width: 32px;
                          height: 18px;
                      }

                      .instaread-widget-desktop .play-icon-inner-container {
                          margin-top: 0px;
                          margin-left: 0px;
                          height: 50px;
                          display: block;
                      }

                      .instaread-widget-desktop .audio-primary-text {
                          font-size: 15px;
                          position: absolute;
                          top: 0;
                          left: 0;
                          width: 100%;
                          display: flex;
                          align-items: center;
                          box-sizing: border-box;
                          height: 48px;
                          padding-left: 1rem;
                      }
                      .instaread-widget-desktop #widget-audio-container > div[style*="justify-content: space-between"] {
                            display: flex;
                            justify-content: space-between;
                            position: absolute;
                            top: 0;
                            left: 0;
                            height: 55px;
                            align-items: center;
                            padding: 0 1.2rem;
                            box-sizing: border-box;
                            width: 100%;
                      }

                      .instaread-widget-desktop .audio-display {
                          margin-top: 19px;
                      }


                      .instaread-widget-desktop .advertisementText{
                          font-size: 12px !important;
                          font-family: var(--font-family);
                          margin-left: 2rem;
                          width: 87%;
                          min-height: 16px;
                      }

                  }
                  ._ap_apex_ad{
                    display: flex  !important;
                    align-items: center !important;
                  }
                  .icon-playmbg {
                      background: url("../images/icon-playmbg.png") no-repeat;
                      background-repeat: no-repeat;
                      background-position: 57% 51%;
                  }
                  .instaread-widget-desktop .widget-audio-inner-container{
                          height: auto;
                          margin-top: 0px !important;
                  }
                 .instaread-widget-mobile .widget-audio-inner-container{
                      /* align-items: center; */
                      /* height:85%; */
                      margin-top: 0px !important;
                  }
                  .instaread-widget-desktop .widget-ad-container {
                    cursor:pointer;
                    margin-top :-5px !important;
              }

                             .instaread-widget-mobile .audioPrimaryWaves {
          width: 100% !important;
          max-width: 100% !important;
          height: 44px;
      }
      .instaread-widget-mobile #audioWaveform {
          width: 100%;
          max-width: 100%;
      }
      .instaread-widget-mobile .audio-primary-text{
          font-size: 14px !important;
      }

      @media screen and (max-width: 361px) {
        .instaread-widget-mobile .audioPrimaryWaves {
          width: 100% !important;
          max-width: 100% !important;
          height: 40px;
      }
      }


                  /* Rest of your styles... */