.hint {
  color: #FFF;
}
.icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
  .attention::before {
    font-family: "Font Awesome 5 Free"; font-weight: 300; content: "\f06a";
    padding: 5px;
  }


.terminology::before {
    font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f0a1";
  } /*\f0f3 bell */

  .tip::before {
    font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f05a";
  }
  
  .award::before {
    font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f559";
  }
  
  .link::before {
    font-family: "Font Awesome 5 Free"; font-weight: 300; content: "\f0c1";
    padding: 5px;
  }
  
  
.bgAttn {
  border-radius: 5px;
  background: #E0B1CB50;
  padding: 15px; 
}

.vAttn{
  border-left: 6px solid #5E548E;
}

.bgLink {
  border-radius: 5px;
  background: #ADE8F460;
  padding: 10px; 
}

.vLink {
  border-left: 6px solid #03045E;
}




.vTip {
  border-left: 6px solid #57837B;
}


.bgTip {
  border-radius: 5px;
  background: #C9D8B6;
  padding: 10px; 
}
 
 
.vTerminology {
  border-left: 6px solid #4a4e69;
}


.bgTerminology {
  border-radius: 5px;
  background: #f2e9e4;
  padding: 10px; 
}
 
 

 
/* purples:  #231942, #5E548E #9F86C0 #BE95C4 #E0B1CB
blues: 03045E, 0096C7 ADE8F4