.acc-container + .hero-section-with-video {
        margin-top: 1.4rem;
    }
    .attribution {
        font-size: 0.75rem;
    }

/* Toggle */
    .toggle-container {
        display: flex;
        flex-wrap: wrap;
        width: fit-content;
        padding: 0.2rem 1rem;
        margin-bottom: 0.5rem;
        background: var(--brand-light-background-shade);
    }
    .toggle-container p {
        padding: 0.6rem 0;
    }
    .toggle-switch input {
      position: absolute;
      opacity: 0;
    }
    .toggle-switch {
      display: inline-block;
      font-size: 30px; /* 1 */
      height: 1em;
      width: 2em;
      margin-top: 0.5rem;
      background: #bdbdbd;
      box-shadow: inset 1px 0px 3px 2px rgb(0 0 0 / 40%), 0 -2px 2px rgb(0 0 0 / 20%);
      border-radius: 1em;
      -webkit-transition: all 300ms;
         -moz-transition: all 300ms;
              transition: all 300ms;
    }
    .toggle-switch:hover {
        cursor: pointer;
    }
    .toggle-switch div {
      height: 0.85em;
      width: 0.85em;
      margin-top: 2px;
      margin-left: 2px;
      border-radius: 1em;
      background: #FFF;
      -webkit-transition: all 300ms;
         -moz-transition: all 300ms;
              transition: all 300ms;
    }
    .toggle-label {
        font-weight: bold;
    }
    input:checked + .toggle-switch div {
      -webkit-transform: translate3d(117%, 0, 0);
         -moz-transform: translate3d(117%, 0, 0);
              transform: translate3d(117%, 0, 0);
    }
    input:checked + .toggle-switch {
        background: #3cae3c;
        transition: all 500ms;
    }
    .toggle-container > div {
        display: flex;
        align-items: center;
    }

    /* On this page listing */
    .on-this-page > ul {
        list-style-type: none;
        padding-left: 0;
    }
    .on-this-page > ul > li > ul {
        list-style-type: none;
        padding-left: 1.4rem;
    }
    .on-this-page > ul > li > ul > li > span {
        width: 1.4rem;
        margin-right: 0.2rem;
    }

    /* Vue content transition */
    .fade-enter-active, .fade-leave-active {
      max-height: 500px;
      transition: all .5s;
    }
    .fade-enter, .fade-leave-to {
      opacity: 0;
      max-height: 0;
    }
    .essential-label {
        background: var(--brand-light-background-alt);
        border-radius: 3px;
        font-weight: 600;
        padding: 0.2rem 0.4rem;
    }
    .essential-label:before {
        color: var(--brand-secondary);
        font-weight: 300;
        content: '\f005';
        font-family: 'Font Awesome 6 Pro';
        margin: 0 0.5em 0 0em;
    }
    .info-tip-toggle {
        margin-top: 2px;
        text-align: center;
    }

    .info-tip-toggle span {
        font-size: 1.125rem;
        line-height: 44px;
        width: 40px;
        color: var(--brand-light-link);
    }
    .toggle-container p {
        flex: 0 0 100%;
        padding-bottom: 0.4rem;   
    }

    .info-tip-toggle:hover {
        cursor: pointer;
    }
    
    /* step 4, fix to make tiles in the action plan resources section entirely clickable */
    .resources > li {
        position: relative;
    }
    .resources > li > a::before {
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        top: 0;
        left: 0;
    }
    
    /*step 4 table */
    .change-checklist-table {
        border-spacing:0;
        font-size: 1.125rem;
    }
    .change-checklist-table ul {
        padding-left: 0;
    }
    .change-checklist-table ul li {
        display: grid;
        grid-template-columns: 1.125rem 6fr 1fr;
        grid-gap: 1.25rem;
        list-style-type: none;
        padding: 0.5rem 0.75rem;
    }
    .change-checklist-table ul li label:hover {
        cursor: default;
    }
    .change-checklist-table ul li label a:hover {
        cursor: pointer;
    }
    .change-checklist-table ul li:nth-child(odd){
        background-color: var(--brand-light-background-shade);
    }

    button.print-btn {
        margin-top: 1rem;
    }
    
    @media screen and (max-width:480px){

        .toggle-container {
            display: flex;
        }
        .toggle-label {
            min-width: 195px;
        }
        .info-tip-toggle {
            width: 25%;
            text-align: left;
        }
        .toggle-switch {
            margin: 0 !important;
            width: 2.3em;
        }
        input:checked + .toggle-switch div {
          -webkit-transform: translate3d(83%, 0, 0);
             -moz-transform: translate3d(83%, 0, 0);
                  transform: translate3d(83%, 0, 0);
        }
    
    }
    ul.resources {list-style-type: none; display: flex; flex-direction: row; flex-wrap: wrap; padding-left: 0;}
    ul.resources li {display: block; width: 100%; margin: 0 0 15px; border: 1px solid var(--brand-light-border); border-radius: 0.75rem; padding: 1.2rem 1.4rem; background: var(--brand-light-background-shade);}
    ul.resources li:hover {background: var(--brand-light-background-alt); box-shadow: 0 0.25rem 0.25rem 0 rgba(0,0,0,.06)}
    ul.resources li i, ul.resources li span {display: block; color: var(--brand-secondary); font-size: 2rem; margin-bottom: 1rem; font-weight: 300; }
    ul.resources li span:before {
        font-family: 'Font Awesome 5 Pro';
    }
    ul.resources li a {font-weight: bold; font-size: 1.2rem; margin-bottom: 0.6rem; line-height: 1.2;}
    ul.resources li p {margin: 0.2rem 0 0.4rem;}
    
    @media screen and (min-width: 580px) and (max-width: 767px) {
        ul.resources li {
            width: calc(100% / 2 - 15px); 
            margin: 15px 0; 
        }
        ul.resources li:nth-child(2n) {margin: 15px 0 15px 30px;}
    }
    @media screen and (min-width: 768px){
        ul.resources li {
            width: calc(100% / 3 - 20px); 
            margin: 15px 0; 
        }
        ul.resources li:nth-child(3n-1) {margin: 15px 30px;}
    }
    .print-btn {
        margin-bottom: 1rem;
    }
    @media print {
        .print-btn, .top {
            display: none;
        }
    }