/*! DSA Overwrites to Compass | 03.12.2021 | Updated 3.23.2021 */
:root {
  --dsa-box-shadow: 0 5px 10px rgba(154,160,185,.05), 0 15px 30px rgba(166,173,201,.2);
  }
  /*! Expands the dropdowns in the main nav */
  @media (min-width: 1400px) {
    .cwf-nav--main .cwf-nav__list--level-2 {
      width: max-content;
      max-width: 16em;
    }
  }
  /*! removes the border on iframes */  
  iframe {
    border: 0;
  }
  /*! actually creates a style for the this T4 option */ 
  .t4_text-uppercase {
    text-transform: uppercase;
  }
  .t4_text-info {
    color: var(--cwf-color--gold);
      background-color: black;
      }
  /*! adds a short seperator to headings */  
  .separator:after {
    content: "";
    display: block;
    width: 4rem;
    border-bottom: .125rem solid var(--cwf-accent--background);
      padding-top: .5rem;
      } 
  /*!---------------------------- 
  Staff Profiles
  ----------------------------*/
  .dsa_staff-profile {
    box-shadow: var(--dsa-box-shadow);
      }
  .dsa_staff-profile--text {
    padding: .5em 1.5em;  
  }
  .dsa_staff-img {
    margin: auto;
    display: block;
  }
  .dsa_staff-name {
    margin-bottom: 0;
  }
  .dsa_staff-title {
    padding-top: .5rem;
    font-style: italic;
    font-size: 0.8rem;
  }
  .dsa_staff-pronoun {
    letter-spacing: 0.15em;
    font-size: .7rem;
  }
  /*!---------------------------- 
  Card Styles
  ----------------------------*/
  .dsa-card {
    margin: 3em auto !important;
    box-shadow: var(--dsa-box-shadow);
      padding: 1.5em;
      display: flex;
      align-items: center;
      }
  @media (min-width: 768px) {
    .dsa-card__img {
      margin: 1em;
      object-fit: contain;
      align-self: flex-start;
    }
    .dsa-card__text {
      flex-basis: 100%;
    }
  }
  .dsa-card_shadow {
  	margin: 2em auto !important;
    box-shadow: var(--dsa-box-shadow);
  }
  /*! remove the background image on the CWF cards */
.cwf-card__media--remove-bg > .plugin-card__container > .plugin-card__media {
    background-color: unset;
}
.cwf-card__media--remove-bg > .plugin-card__container > .plugin-card__media > .plugin-card__background {
    display:none;
}

  /*!---------------------------- 
  CSS Grid
  ----------------------------*/
  .dsa-grid {
    align-items: center;
  }
  @media only screen and (max-width: 1023px) {
    .dsa-grid_200 {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .dsa-grid_320 {
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
  }
  /*!---------------------------- 
  Extra Table Styling
  ----------------------------*/
  .styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: .9em;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    --cwf-table--border-color: none;
    --cwf-table__thead--background-color: #F8B300;
    --cwf-table__thead--border-color: none;
  }

  .styled-table tbody tr {
    border-bottom: thin solid #dddddd;
  }

  .styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
  }

  .styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #333333;
  }
  /*!---------------------------- 
  Feature Styles
  ----------------------------*/
  .dsa-feature {
    display: grid;
    gap: 2em;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "text img";
    padding: 1em 0;
  }
  .dsa-feature--alt {
    grid-template-areas:
      "img text";
  }
  .dsa-feature--lg {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "text img img";
  }
  .dsa-feature--lg-alt {
    grid-template-areas:
      "img img text";
  }
  .dsa-feature_text {
    grid-area: text;
    align-self: center;
  }
  .dsa-feature_img {
    grid-area: img;
    align-self: center;
  }
  @media (max-width: 767px) { 
    .dsa-feature {
      grid-template-columns: 1fr;
      grid-template-areas:
        "img"
        "text";
    }
  }

  /*!---------------------------- 
  Sortable Table
  ----------------------------*/
  table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):not([scope=row]):after {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    padding-left: 0.5em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "";
  }
  th.sorttable_sorted::after {
    padding-left: 0.5em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "";
  }
  th.sorttable_sorted_reverse::after {
    padding-left: 0.5em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "";
  }
  #sorttable_sortfwdind, #sorttable_sortrevind { 
    display: none; 
  } 
 /*!---------------------------- 
  Adds shadow to screenshot images
  ----------------------------*/
.help-doc img {
    margin: 30px 0;
    box-shadow: -10px -10px 30px 0 #d8d8e60d, 10px 10px 30px 0 #aeaec07d;
}