.backButton {
    display: flex;
    width: 100%;
    height:42.49px;
    align-items: center;
    justify-content: left    ;
         background-color: transparent;
         padding: 0 var(--padding-base);
         border-bottom: 1px solid var(--border-action-primary-gray);

}


          .backButton a {
    display: flex;
    width:fit-content;
    height: auto;
    flex-direction: row;
    text-decoration: none;
    align-items: center;
        padding: var(--spacing-xs) var(--spacing-sm);
font-weight: var(--font-weight-medium);
    padding-right:  var(--spacing-base);
        cursor: pointer;       




    justify-content: left;

    border-radius: var(--spacing-xs);
        border: 1.6px solid transparent;
    transition: var(--transition-duration);
}




    .backButton i {
justify-content: left;
display: block;
font-size: var(--major-third-base);
align-items: center;
}

/* When the portfolio link is hovered, find the material icon inside it and make it blue */
.backButton a:hover .material-icons-outlined,
.backButton a:hover .material-icons {
      color: var(--text-anchor-blue); 
    }

   .backButton a:hover {
      color: var(--text-anchor-blue);
            background-color: var(--action-item-hover);
           border: 1.6px solid var(--border-action-blue-hover);
          }
@media only screen and (max-width: 768px) {

  .backButton{
display: none;
  }
  }
  @media print {
.backButton-container{
    display: none !important;
  }
}