/* ============================================================
   DRE TRANSCRIPT
   ACF / member-site scoped engine
============================================================ */

.dre-transcript{
  --dre-blue:#18a5dd;
  --dre-pink:#ed4db4;
  --dre-grey-dark:#4F535D;
  --dre-border:#e4e4e4;

  width:100%;
  max-width:none;
  margin:0;
  padding:16px;

  background:#ffffff;
  border-radius:14px;
  box-sizing:border-box;

  font-family:Nunito, Arial, sans-serif;
  font-size:1rem;
  line-height:1.5;
}

.dre-transcript *{
  box-sizing:border-box;
}

/* ============================================================
   INNER RHYTHM
============================================================ */

.dre-transcript > * + *{
  margin-top:16px;
}

/* ============================================================
   TITLE + INSTRUCTIONS
============================================================ */

.dre-transcript-title{
  margin:0 0 8px;
  font-size:1.25rem;
  line-height:1.3;
  color:var(--dre-grey-dark);
}

.dre-transcript-instructions{
  margin:0;
  color:var(--dre-grey-dark);
  line-height:1.5;
}

/* ============================================================
   AUDIO BUTTON
============================================================ */

.dre-transcript .dre-audio-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  margin:8px auto 4px;

  width:40px;
  height:40px;

  padding:0;
  border-radius:999px;

  background:var(--dre-blue);
  color:#ffffff !important;
  border:2px solid var(--dre-blue);

  font-family:inherit;
  font-size:1rem;
    font-weight:700;
  line-height:1;

  cursor:pointer;
}

.dre-transcript .dre-audio-btn:hover{
  background:#1fb0ea;
  border-color:#1fb0ea;
  color:#ffffff !important;
}

.dre-transcript .dre-audio-btn:active{
  background:#ffffff;
  color:var(--dre-blue) !important;
  border-color:var(--dre-blue);
}

/* ============================================================
   TRANSCRIPT TEXT AREA
============================================================ */

.dre-transcript-text{
  width:100%;
  margin:12px 0 0;

  padding:14px 16px;
  border:1px solid var(--dre-pink);
  border-radius:12px;

  line-height:1.6;
  font-size:1rem;
  color:var(--dre-grey-dark);

  box-sizing:border-box;
}

.dre-transcript-text span{
  cursor:pointer;
   font-weight:400 !important;
}

.dre-transcript-text span:hover{
  text-decoration:underline;
}

.dre-transcript-text span.is-active{
  color:var(--dre-blue) !important;
  font-weight:400 !important;
  text-decoration:none !important;
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width:640px){

  .dre-transcript{
    padding-left:0;
    padding-right:0;
  }

  .dre-transcript-text{
    border-radius:14px;
  }
}