/* =========================================================
   DRE CLICK GLOSSARY
========================================================= */

.dre-click-glossary{
  --dre-blue:#18a5dd;
  --dre-pink:#ed4db4;
  --dre-grey-dark:#4F535D;

  width:100%;
  margin:0;
  padding:16px;

  font-family:Nunito, Arial, sans-serif;
  font-size:1rem;
  line-height:1.6;
  box-sizing:border-box;
}

.dre-click-glossary *{
  box-sizing:border-box;
}

.dre-click-glossary-card{
  background:#ffffff;
  border:1px solid #e4e4e4;
  border-radius:14px 14px 0 0;
  padding:22px;
}

.dre-click-glossary-text{
  color:var(--dre-grey-dark);
}

.dre-click-glossary-text p{
  margin:0 0 16px 0;
}

.dre-click-glossary-text p:last-child{
  margin-bottom:0;
}

.dre-cg-term{
  all:unset;
  cursor:pointer;

  color:#6b7280;
  font-weight:400;
  line-height:inherit;

  padding:1px 3px;
  border-radius:6px;

  transition:
    background-color .15s ease,
    color .15s ease;
}

.dre-cg-term:hover{
  background:transparent;
  color:#8a94a3;
}

.dre-cg-term.is-active{
  background:transparent;
  color:var(--dre-blue);
  font-weight:400;
}

.dre-click-glossary-reveal{
  margin-top:18px;
  padding:14px 16px;
  background:#f6fbfe;
  border:1px solid #d7edf8;
  border-radius:12px;
  color:var(--dre-grey-dark);
}

.dre-cg-selected-term{
  display:block;
  color:var(--dre-blue);
  margin-bottom:4px;
}

.dre-cg-selected-meaning{
  display:block;
}

/* Footer */

.dre-click-glossary-footer{
  margin-top:-1px;
  background:#ffffff;
  border:1px solid #e4e4e4;
  border-top:none;
  border-radius:0 0 14px 14px;
  padding:14px;
  text-align:center;
}

.dre-cg-toggle-list{
  all:unset;
  cursor:pointer;
  color:var(--dre-blue);
  font-weight:700;
}

.dre-cg-toggle-list:hover{
  text-decoration:underline;
}

.dre-click-glossary-list{
  margin-top:14px;
  text-align:left;
}

.dre-cg-list-item{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:14px;

  padding:12px 0;
  border-top:1px solid #e4e4e4;
}

.dre-cg-list-item strong{
  color:var(--dre-grey-dark);
}

.dre-cg-list-item span{
  color:var(--dre-grey-dark);
}

/* Mobile */

@media (max-width:640px){

  .dre-click-glossary{
    padding-left:0;
    padding-right:0;
  }

  .dre-click-glossary-card{
    padding:0;
    border:none;
    border-radius:0;
    background:transparent;
  }

  .dre-click-glossary-footer{
    margin-top:12px;
    border-top:1px solid #e4e4e4;
    border-radius:14px;
  }

  .dre-cg-list-item{
    grid-template-columns:1fr;
    gap:4px;
  }
}