/* v3 Rankings */

/*
  // Tooltips
  --content-background-color
  --label-background-color
  --label-color
  // Toggle details button
  --button-toggle-school-color
  // External View School Button
  --button-view-school-background-color
  --button-view-school-color
  --button-view-school-font-family
  --button-view-school-font-size
  --button-view-school-font-weight
*/

.v3-rankings .sponsored-disclosure {
    font-size: 14px;
  }

.v3-rankings sonic-tooltip {
    --label-color: var(--primary-700);
    --label-font-size: 14px;
    --label-text-transform: none;
  }

.v3-rankings__show-all .v3-rankings__schools > .extra-school{
      display: block;
    }

.v3-rankings sonic-qdf[layout="native"] {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
  }

.v3-rankings .extra-school{
    display: none;
  }

.v3-rankings .school {
    margin-bottom: 0.75rem;
    overflow-x: visible;
  }

.v3-rankings .school .flex-card {
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
      border-top-width: 1px;
      border-right-width: 1px;
      border-left-width: 1px;
      display: block;
    }

@media (min-width: 768px) {
      .v3-rankings .school .flex-card {
        display: flex;
      }
    }

.v3-rankings .school .rank {
      border-radius: 0.375rem;
      font-size: 0.75rem;
      line-height: 1rem;
      margin-top: 0px;
      margin-bottom: 0.25rem;
      max-width: -moz-max-content;
      max-width: max-content;
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      text-transform: uppercase;
    }

@media (min-width: 1024px) {
      .v3-rankings .school .rank {
        margin-bottom: 0.5rem;
      }
    }

.v3-rankings .school .rank {
      background-color: var(--rank-background, var(--accent-100, #daf2f8));
      color: var(--rank-color,var(--primary-700, #007296));
    }

.v3-rankings .school .title {
      font-weight: 700;
      font-size: 1.25rem;
      line-height: 1.75rem;
      line-height: 1.5rem;
      margin-top: 0.75rem;
      margin-bottom: 0.75rem;
      color: var(--primary-800, #1D5AA2)
    }

@media (min-width: 1024px) {
      .v3-rankings .school .title {
        font-size: 1.5rem;
        line-height: 2rem;
      }
    }

.v3-rankings .school .title {
      font-family: var(--heading-font-family, sans-serif);
    }

.v3-rankings .school .title a.spp-title-link {
        text-decoration: underline;
        -webkit-text-decoration-color: var(--link-color,#1d5aa2);
                text-decoration-color: var(--link-color,#1d5aa2);
      }

.v3-rankings .school .general-info {
      border-radius: 0.375rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      font-size: 0.75rem;
      line-height: 1rem;
      margin-left: 0px;
      margin-bottom: 0.75rem;
      margin-right: 1.5rem;
      margin-top: 0.875rem;
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
      padding-left: 0.5rem;
      padding-right: 0.5rem
    }

@media (min-width: 768px) {
      .v3-rankings .school .general-info {
        margin-right: 0px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
      }
    }

.v3-rankings .school .general-info {
      background-color: #f6f6f6;
      color: #506167;
    }

.v3-rankings .school .general-info li {
        list-style-position: outside;
        list-style-type: disc;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 0.5rem;
        margin-right: 0.75rem;
      }

.v3-rankings .school .general-info li:first-child {
        list-style-type: none;
        margin-left: 0px;
      }

.v3-rankings .school .general-info li:last-child {
        margin-right: 0px;
      }

.v3-rankings .school .data-inline-wrapper {
      border-top-right-radius: 0.5rem;
      overflow-y: hidden;
      padding-left: 1rem;
      padding-right: 1rem;
      width: 100%
    }

@media (min-width: 768px) {
      .v3-rankings .school .data-inline-wrapper {
        margin-top: 0px;
        margin-bottom: 0px;
        width: 33.333333%;
      }
    }

.v3-rankings .school .data-inline-wrapper {
      grid-template-columns: 1fr 1fr;
      background-color: #f6f6f6;
    }

.v3-rankings .school .data-inline-wrapper .tuition-wrapper {
        display: grid;
        padding-bottom: 0.75rem;
        width: 100%;
        -moz-column-gap: 0.5rem;
             column-gap: 0.5rem;
        grid-auto-flow: column;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr))
      }

@media (min-width: 768px) {
        .v3-rankings .school .data-inline-wrapper .tuition-wrapper {
          display: block;
          -moz-column-gap: 1rem;
               column-gap: 1rem;
        }
      }

.v3-rankings .school .data-inline-wrapper .tuition-wrapper .stat-header {
          font-weight: 700;
          font-size: 0.875rem;
          line-height: 1.25rem;
          padding-top: 0.5rem;
          padding-right: 1rem;
          text-align: left;
        }

@media (min-width: 768px) {
          .v3-rankings .school .data-inline-wrapper .tuition-wrapper .stat-header {
            padding-bottom: 0.5rem;
            padding-top: 1rem;
          }
        }

.v3-rankings .school .data-inline-wrapper .tuition-wrapper .stat-header {
          color: var(--data-inline-stat-header-color, #000);
        }

.v3-rankings .school .data-inline-wrapper .data-inline {
        border-collapse: separate;
        border-top-width: 2px;
        display: grid;
        padding-top: 0.5rem;
        padding-bottom: 0.75rem;
        width: 100%;
        -moz-column-gap: 0.5rem;
             column-gap: 0.5rem;
        grid-auto-flow: column;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
      }

@media (min-width: 768px) {
        .v3-rankings .school .data-inline-wrapper .data-inline {
          display: block;
          -moz-column-gap: 1rem;
               column-gap: 1rem;
        }
      }

.v3-rankings .school .data-inline-wrapper .data-inline {
        color: var(--data-inline-color, #3d484d);
        border-color: #e6e8e9;
      }

@media (min-width: 768px) {
        .v3-rankings .school .data-inline-wrapper .data-inline {
          display: none;
        }
      }

.v3-rankings .school .data-inline-wrapper .stat-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

.v3-rankings .school .data-inline-wrapper .stat-content .stat-label {
          font-size: 0.75rem;
          line-height: 1rem;
          padding-top: 0.25rem;
          padding-bottom: 0.25rem;
        }

.v3-rankings .school .data-inline-wrapper .stat-content .stat {
          font-weight: 700;
          font-size: 0.75rem;
          line-height: 1rem;
          padding-top: 0.25rem;
          padding-bottom: 0.25rem;
          text-align: right;
          white-space: nowrap;
          color: var(--data-inline-stat-color, #051d26);
        }

.v3-rankings .school .data-inline-wrapper .stat-content .stat.stat-not-provided {
          color: var(--data-inline-stat-not-provided-color, #506167);
        }

.v3-rankings .school .data-inline-wrapper sonic-tooltip {
        white-space: normal;
        --content-color: #fff;
        --label-border-radius: 50%;
        --label-color: var(--data-inline-background-color, #f4f9fa);
        --label-display: inline-block;
        --label-font-family: serif;
        --label-font-size: 12px;
        --label-font-weight: bold;
        --label-height: 18px;
        --label-line-height: 20px;
        --label-text-align: center;
        --label-text-decoration: none;
        --label-text-transform: lowercase;
        --label-width: 18px;
        --content-background-color: var(--primary-900, #16447a);
        --label-background-color: var(--primary-300, #7caae0);
        --label-color: var(--primary-50, #f4f9fa);
      }

.v3-rankings .school.is-active .data-inline-wrapper .data-inline {
      grid-template-rows: repeat(4, minmax(0, 1fr));
    }

@media (min-width: 768px) {
      .v3-rankings .school.is-active .data-inline-wrapper .data-inline {
        display: block;
      }
    }

.v3-rankings .school .content-wrapper1 {
      --tw-bg-opacity: 1;
      background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      width: 100%
    }

@media (min-width: 768px) {
      .v3-rankings .school .content-wrapper1 {
        width: 66.666667%;
      }
    }

.v3-rankings .school .content-wrapper1 .content {
        font-size: 1rem;
        line-height: 1.5rem;
        margin-bottom: 0.5rem
      }

@media (min-width: 768px) {
        .v3-rankings .school .content-wrapper1 .content {
          margin-bottom: 0px;
        }
      }

.v3-rankings .school .content-wrapper1 .content {
        display: -webkit-box;
        max-height: 120px;
        overflow: hidden;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
      }

@media (min-width: 768px) {

.v3-rankings .school .content-wrapper1 .content {
          max-height: 56px;

          -webkit-line-clamp: 2;

          line-clamp: 2;
      }
        }

.v3-rankings .school .content-wrapper1 .content h1, .v3-rankings .school .content-wrapper1 .content h2, .v3-rankings .school .content-wrapper1 .content h3, .v3-rankings .school .content-wrapper1 .content h4, .v3-rankings .school .content-wrapper1 .content p, .v3-rankings .school .content-wrapper1 .content ul, .v3-rankings .school .content-wrapper1 .content ol {
          margin-top: 0px;
          margin-bottom: 1rem;
        }

.v3-rankings .school .button-toggle-school {
      background-color: var(--gray-50, #fafafa);
      display: inline-block;
      align-items: center;
      height: 2.5rem;
      font-size: 0.75rem;
      line-height: 1rem;
      text-align: center;
      width: 100%
    }

@media (min-width: 768px) {
      .v3-rankings .school .button-toggle-school {
        --tw-bg-opacity: 1;
        background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
        display: flex;
        padding-left: 1.5rem;
        text-align: left;
      }
    }

.v3-rankings .school .button-toggle-school {
      color: var(--button-toggle-school-mobile-color, var(--primary-700, #007296));
      outline: none;
    }

.v3-rankings .school .button-toggle-school:focus {
        outline: auto;
      }

.v3-rankings .school .button-flex {
      border-bottom-right-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      overflow: hidden;
    }

.v3-rankings .school .toggle-space {
      display: none;
    }

@media (min-width: 768px) {
      .v3-rankings .school .toggle-space {
        display: block;
        grid-column: span 2 / span 2;
      }
    }

.v3-rankings .school .toggle-space {
      background-color: #f6f6f6;
    }

.v3-rankings .school sonic-qdf[layout="cta"] {
      --button-view-school-background-color: var(--primary-700, #007296);
      --button-view-school-color: #FFF;
    }

.v3-rankings .school sonic-qdf[layout="cta"][theme="secondary"] {
        --button-view-school-background-color: var(--primary-500, #508dd5);
        --button-view-school-color: #FFF;
      }

@media (min-width: 768px) {

.v3-rankings .school sonic-qdf[layout="cta"][theme="secondary"] {
          --button-view-school-background-color: var(--gray-50, #fafafa);

          --button-view-school-color: var(--primary-700, #007296);

          --button-background-color-hover: var(--gray-50, #fafafa);

          --button-color-hover: var(--primary-700, #007296)
      }
        }

.v3-rankings .school .button-view-school {
      background-color: var(--primary-700, #2471CB);
      font-weight: 700;
      height: 2.5rem;
      font-size: 0.75rem;
      line-height: 1rem;
      width: 100%;
      color: var(--button-toggle-school-mobile-color, #FFF);
      text-decoration: none;
    }

.v3-rankings .is-active .content-wrapper1>.content  {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-height: none;
  }

.v3-rankings .is-active .data-inline-wrapper {
    max-height: 100%;
    overflow-y: visible;
  }

.v3-rankings .is-active .data-inline-wrapper .stat-content:nth-child(n+5) {
      display: flex;
    }

.v3-rankings .v3-rankings__school.v3-rankings__school-active .v3-rankings__school-content {
      max-height: 100%;
    }