@govtechsg/oobee 0.10.20

package/src/static/ejs/partials/styles/styles.ejs

@@ -0,0 +1,1843 @@
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap" rel="stylesheet');
+
+  /* Bootstrap CSS overrides */
+  #accessibility-site-report:root {
+    --bs-border-color: var(--a11y-black-25);
+    --bs-border-radius: 0.25rem;
+  }
+
+  #accessibility-site-report .btn-close {
+    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2393928d'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
+    --bs-btn-close-opacity: 1;
+  }
+
+  #accessibility-site-report .accordion {
+    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23525048'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  }
+
+  #accessibility-site-report .row > * {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .card {
+    /* background-color: #fff; */
+    /* box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%); */
+    border-width: 1px;
+    border-radius: 0;
+    color: unset;
+  }
+
+  .modal-content {
+    background-color: var(--true-white);
+  }
+
+  #scan-about.card {
+    border-width: 0px 1px;
+  }
+
+  #accessibility-site-report body,
+  #accessibility-site-report html {
+    all: unset;
+    font-family: 'PT Sans';
+    background-color: var(--a11y-black-5);
+    margin: 0;
+    min-height: 100vh;
+    line-height: 1.75rem;
+  }
+
+  #accessibility-site-report hr {
+    border-color: var(--a11y-black-25);
+    opacity: 1;
+  }
+
+  h6,
+  .h6,
+  h5,
+  .h5,
+  h4,
+  .h4,
+  h3,
+  .h3,
+  h2,
+  .h2,
+  h1,
+  .h1 {
+    /* color: unset; */
+    color: var(
+      --a11y-black-100
+    ); /* TODO: check that this doesn't affect strings in error messages */
+  }
+
+  #accessibility-site-report h1 {
+    font-family: 'PT Sans';
+    font-weight: 700;
+    font-size: 2rem;
+    padding-bottom: 0.5rem;
+    margin-top: 0;
+    color: var(--a11y-black-100);
+    line-height: 2.5rem;
+  }
+
+  #accessibility-site-report h2 {
+    font-size: 1.125rem;
+    font-weight: 700;
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+    line-height: 2rem;
+  }
+
+  #accessibility-site-report p {
+    font-size: 1rem;
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  #accessibility-site-report a {
+    color: var(--sky-blue-150);
+    text-decoration: none;
+  }
+
+  #accessibility-site-report a:hover {
+    /* color: #002b99; */
+    text-decoration: underline;
+  }
+
+  /* End of Bootstrap CSS overrides */
+  :root {
+    --must-fix-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%23f26949'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.4292 9.99822V5.71251C11.4292 4.92353 10.7896 4.28394 10.0006 4.28394C9.21161 4.28394 8.57202 4.92353 8.57202 5.71251V9.99822C8.57202 10.7872 9.21161 11.4268 10.0006 11.4268C10.7896 11.4268 11.4292 10.7872 11.4292 9.99822ZM10.0006 12.8554C9.21202 12.8554 8.57202 13.4954 8.57202 14.2839C8.57202 15.0725 9.21202 15.7125 10.0006 15.7125C10.7892 15.7125 11.4292 15.0725 11.4292 14.2839C11.4292 13.4954 10.7892 12.8554 10.0006 12.8554Z' fill='%2326241b'/%3E%3C/svg%3E%0A");
+
+    --good-to-fix-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%23ffb200'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 6.5625C8.10131 6.5625 6.5625 8.10131 6.5625 10C6.5625 11.8987 8.10131 13.4375 10 13.4375C11.8987 13.4375 13.4375 11.8987 13.4375 10C13.4375 8.10131 11.8987 6.5625 10 6.5625ZM4.84375 10C4.84375 7.15207 7.15207 4.84375 10 4.84375C12.8479 4.84375 15.1562 7.15207 15.1562 10C15.1562 12.8479 12.8479 15.1562 10 15.1562C7.15207 15.1562 4.84375 12.8479 4.84375 10Z' fill='%2326241b'/%3E%3C/svg%3E%0A");
+
+    --needs-review-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%23c9c8c6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.09759 7.26594C8.23445 6.67496 8.46462 6.23328 8.7881 5.9409C9.14891 5.65474 9.57815 5.51166 10.0758 5.51166C10.5984 5.51166 11.0152 5.64852 11.3262 5.92224C11.6372 6.19596 11.7928 6.53188 11.7928 6.93002C11.7928 7.22862 11.7057 7.48367 11.5315 7.69518C11.4195 7.84448 11.0712 8.15552 10.4864 8.6283C9.90785 9.11353 9.51594 9.54277 9.31065 9.91602C9.12403 10.3079 9.03072 10.7745 9.03072 11.3157V11.7449L9.04938 11.8569C9.04938 11.9316 9.06026 12 9.08204 12.0622C9.10381 12.1244 9.12558 12.1742 9.14736 12.2115C9.16913 12.2488 9.20645 12.2815 9.25933 12.3095C9.31221 12.3375 9.35264 12.3593 9.38064 12.3748C9.40863 12.3904 9.45995 12.4012 9.5346 12.4075C9.60925 12.4137 9.66058 12.4168 9.68857 12.4168H9.85187H10.0012C10.2065 12.4168 10.3589 12.409 10.4584 12.3935C10.5579 12.3779 10.6466 12.3313 10.7243 12.2535C10.8021 12.1757 10.841 12.056 10.841 11.8942C10.841 11.6827 10.8534 11.465 10.8783 11.2411C10.897 11.0109 10.9343 10.8305 10.9903 10.6998C11.0712 10.5008 11.3324 10.2208 11.7741 9.86003C12.6077 9.15707 13.1427 8.61587 13.3791 8.23639C13.6279 7.83204 13.7523 7.41524 13.7523 6.986C13.7523 6.17729 13.4102 5.48678 12.7259 4.91446C12.0603 4.30482 11.1458 4 9.9825 4C8.88763 4 8.00428 4.2986 7.33243 4.8958C6.71656 5.41835 6.36198 6.07154 6.26866 6.85537C6.25622 6.89269 6.25 6.9549 6.25 7.04199C6.25 7.29705 6.3402 7.51633 6.52061 7.69984C6.70101 7.88336 6.91563 7.97512 7.16446 7.97512C7.37597 7.97512 7.56571 7.90824 7.73367 7.77449C7.90163 7.64075 8.0105 7.47123 8.06026 7.26594H8.09759ZM10.0012 13.2939C9.62791 13.2939 9.30754 13.4246 9.04005 13.6858C8.77255 13.9471 8.6388 14.2644 8.6388 14.6376C8.6388 15.0047 8.77255 15.3235 9.04005 15.5941C9.30754 15.8647 9.62791 16 10.0012 16C10.3744 16 10.6948 15.8647 10.9623 15.5941C11.2298 15.3235 11.3635 15.0047 11.3635 14.6376C11.3635 14.2644 11.2298 13.9471 10.9623 13.6858C10.6948 13.4246 10.3744 13.2939 10.0012 13.2939Z' fill='%2326241b'/%3E%3C/svg%3E%0A");
+
+    --passed-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%233aa566'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1781 5.3131C15.7942 5.80597 15.8941 6.70496 15.4012 7.32105L9.68694 14.4639C9.19407 15.08 8.29508 15.1799 7.67899 14.687C7.0629 14.1941 6.96301 13.2951 7.45589 12.6791L13.1702 5.5362C13.663 4.92011 14.562 4.82023 15.1781 5.3131Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.70415 9.70455C5.26204 9.14666 6.16656 9.14666 6.72446 9.70455L9.5816 12.5617C10.1395 13.1196 10.1395 14.0241 9.5816 14.582C9.02371 15.1399 8.11919 15.1399 7.56129 14.582L4.70415 11.7249C4.14626 11.167 4.14626 10.2624 4.70415 9.70455Z' fill='white'/%3E%3C/svg%3E%0A");
+
+    /* Oobee Brand Colours and Fonts */
+    --a11y-purple-50: #f8d6ff;
+    --a11y-purple-70: #e5a6f2;
+    --a11y-purple-100-light: #9021a6; /* Primary Purple Light Mode */
+    --a11y-purple-100-dark: #d54dff; /* Primary Purple Dark Mode */
+    --a11y-purple-150: #642272;
+    --a11y-purple-highlight: #c000e5;
+
+    /* Accents - RGBY */
+    --coral-red-50: #ffb7a6;
+    --coral-red-70: #f27961;
+    --coral-red-100: #f26949;
+    --coral-red-150: #a53419;
+    --leaf-green-50: #ace5c3;
+    --leaf-green-70: #5cc487;
+    --leaf-green-100: #3aa566;
+    --leaf-green-150: #146635;
+    --sky-blue-50: #9ee0f2;
+    --sky-blue-70: #73d5e5;
+    --sky-blue-100: #2bafd8;
+    --sky-blue-150: #006b8c;
+    --sunshine-yellow-50: #ffdfa6;
+    --sunshine-yellow-70: #ffd066;
+    --sunshine-yellow-100: #ffb200;
+    --sunshine-yellow-150: #a56600;
+
+    /* Neutral Colours */
+    --true-white: #ffffff;
+    --a11y-black-5: #f4f4f4;
+    --a11y-black-15: #dededd;
+    --a11y-black-25: #c9c8c6;
+    --a11y-black-50: #93928d;
+    --a11y-black-80: #525048;
+    --a11y-black-90: #3c3a32;
+    --a11y-black-100: #26241b;
+
+    /* Fonts */
+    --a11y-regular-paragraph: 'PT Sans';
+  }
+
+  * {
+    color: var(--a11y-black-100);
+  }
+
+  a[target='_blank']:after {
+    content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.477 2.625C6.477 2.52554 6.43749 2.43016 6.36716 2.35984C6.29684 2.28951 6.20146 2.25 6.102 2.25H1.125C0.826631 2.25 0.540483 2.36853 0.329505 2.5795C0.118526 2.79048 0 3.07663 0 3.375L0 10.875C0 11.1734 0.118526 11.4595 0.329505 11.6705C0.540483 11.8815 0.826631 12 1.125 12H8.625C8.92337 12 9.20952 11.8815 9.42049 11.6705C9.63147 11.4595 9.75 11.1734 9.75 10.875V5.898C9.75 5.79854 9.71049 5.70316 9.64016 5.63283C9.56984 5.56251 9.47446 5.523 9.375 5.523C9.27554 5.523 9.18016 5.56251 9.10983 5.63283C9.03951 5.70316 9 5.79854 9 5.898V10.875C9 10.9745 8.96049 11.0698 8.89016 11.1402C8.81984 11.2105 8.72446 11.25 8.625 11.25H1.125C1.02554 11.25 0.930161 11.2105 0.859835 11.1402C0.789509 11.0698 0.75 10.9745 0.75 10.875V3.375C0.75 3.27554 0.789509 3.18016 0.859835 3.10984C0.930161 3.03951 1.02554 3 1.125 3H6.102C6.20146 3 6.29684 2.96049 6.36716 2.89016C6.43749 2.81984 6.477 2.72446 6.477 2.625Z' fill='%23006b8c'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 0.375C12 0.275544 11.9605 0.180161 11.8902 0.109835C11.8198 0.0395088 11.7245 0 11.625 0L7.875 0C7.77554 0 7.68016 0.0395088 7.60983 0.109835C7.53951 0.180161 7.5 0.275544 7.5 0.375C7.5 0.474456 7.53951 0.569839 7.60983 0.640165C7.68016 0.710491 7.77554 0.75 7.875 0.75H10.7197L4.6095 6.8595C4.57463 6.89437 4.54697 6.93576 4.5281 6.98131C4.50924 7.02687 4.49952 7.07569 4.49952 7.125C4.49952 7.17431 4.50924 7.22313 4.5281 7.26869C4.54697 7.31424 4.57463 7.35563 4.6095 7.3905C4.64436 7.42537 4.68576 7.45302 4.73131 7.47189C4.77686 7.49076 4.82569 7.50047 4.875 7.50047C4.92431 7.50047 4.97313 7.49076 5.01869 7.47189C5.06424 7.45302 5.10563 7.42537 5.1405 7.3905L11.25 1.28025V4.125C11.25 4.22446 11.2895 4.31984 11.3598 4.39016C11.4302 4.46049 11.5255 4.5 11.625 4.5C11.7245 4.5 11.8198 4.46049 11.8902 4.39016C11.9605 4.31984 12 4.22446 12 4.125V0.375Z' fill='%23006b8c'/%3E%3C/svg%3E%0A");
+    display: inline-block;
+    padding-left: 0.25rem;
+    text-decoration-line: none;
+  }
+
+  header {
+    background-color: var(--true-white);
+    padding: 1.5rem 1rem;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--a11y-black-25);
+    box-shadow: 0 3px 5px 0 #736ccb1a;
+    gap: 1rem;
+  }
+
+  .help-link {
+    display: inline-block;
+    padding-left: 0.25rem;
+    text-decoration-line: none;
+  }
+
+  .unbulleted-list {
+    list-style: none;
+    padding-left: 0;
+  }
+
+  #header .card {
+    box-shadow: 0 3px 5px 0 #736ccb1a;
+  }
+
+  footer .card {
+    box-shadow: 0 -3px 5px 0 #736ccb1a;
+  }
+
+  .toggleWrapper {
+    padding: 0 50px;
+    text-align: right;
+  }
+
+  /* reportSearch starts here */
+
+  .search-warning {
+    background: rgb(0, 107, 140, 0.05);
+    border: 1px solid var(--sky-blue-150);
+    margin-bottom: 2rem;
+    text-align: center;
+  }
+
+  .input-search {
+    position: absolute;
+    padding: 0.5rem 0.5rem 0.5rem 1rem;
+  }
+
+  #searchBarInput {
+    padding-left: 3.5rem;
+    min-height: 3rem;
+  }
+
+  #searchGroup .form-control::placeholder {
+    color: var(--a11y-black-80);
+  }
+
+  .search-filter-off {
+    display: none;
+  }
+  .search-filter-on {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 16px;
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    height: 76px;
+    border-radius: 0px 0px 4px 4px;
+    border: 1px solid var(--a11y-black-25);
+    background: var(--a11y-black-5);
+    max-width: 100%;
+    min-width: 100%;
+    border-top: 0;
+  }
+
+  .filter-button-issue {
+    min-height: 50px;
+    width: 158px;
+    height: 44px;
+    gap: 10px;
+    border-radius: 5px;
+    border: 1px solid var(--a11y-black-25);
+    background: var(--true-white);
+    box-sizing: border-box;
+    text-align: center;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    padding-block: 1px;
+    padding-inline: 6px;
+  }
+  .filter-button-pages {
+    min-height: 50px;
+    width: 68px;
+    height: 44px;
+    gap: 10px;
+    border-radius: 4px;
+    border: 1px solid var(--a11y-black-25);
+    background: var(--true-white);
+    box-sizing: border-box;
+    text-align: center;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    padding-block: 1px;
+    padding-inline: 6px;
+  }
+  .filter-button-html {
+    min-height: 50px;
+    margin-right: 16px;
+    width: 197px;
+    height: 44px;
+    gap: 10px;
+    border-radius: 4px;
+    border: 1px solid var(--a11y-black-25);
+    background: var(--a11y-black-5);
+    box-sizing: border-box;
+    text-align: center;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    padding-block: 1px;
+    padding-inline: 6px;
+  }
+
+  .filter-options {
+    display: flex;
+    gap: 16px;
+  }
+
+  .filter-options-group input[type='radio']:checked + label {
+    border: 2px solid var(--A11Y-Primary-Blue-600, var(--sky-blue-150));
+    background: var(--true-white);
+    color: var(--sky-blue-150);
+  }
+
+  .filter-words:hover {
+    background: #f2f6ff;
+    border: 1px solid var(--sky-blue-150);
+  }
+
+  .filter-words {
+    color: var(--a11y-black-100);
+    font-size: 16px;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 400;
+    line-height: 28px;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .ps-xl-3 {
+    padding-left: 1rem !important;
+  }
+
+  /* reportSearch ends here */
+
+  @media (max-width: 767px) {
+    .toggleWrapper {
+      border-top: 1px solid #e1e7eb;
+      padding-top: 1.5rem !important;
+      margin-top: 1.5rem !important;
+      justify-content: center;
+    }
+  }
+
+  .toggleWrapper input {
+    position: absolute;
+    left: -99em;
+  }
+
+  .toggle {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    width: 45px;
+    height: 26px;
+    background-color: #83d8ff;
+    border-radius: 84px;
+    transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    margin-bottom: 0;
+    margin-top: 10px;
+  }
+
+  .toggle:before {
+    content: 'Light';
+    position: absolute;
+    left: -50px;
+    font-size: 18px;
+    color: var(--sky-blue-150);
+  }
+
+  .toggle:after {
+    content: 'Dark';
+    position: absolute;
+    right: -48px;
+    font-size: 18px;
+    color: var(--a11y-black-100);
+  }
+
+  .toggle__handler {
+    display: inline-block;
+    position: relative;
+    z-index: 1;
+    top: 2px;
+    left: -21px;
+    width: 22px;
+    height: 22px;
+    background-color: var(--true-white);
+    border-radius: 50px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    transform: rotate(-45deg);
+    cursor: pointer;
+  }
+
+  .toggle__handler .crater {
+    position: absolute;
+    background-color: #e8cda5;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+    border-radius: 100%;
+  }
+
+  .toggle__handler .crater--1 {
+    top: 9px;
+    left: 6px;
+    width: 2px;
+    height: 2px;
+  }
+
+  .toggle__handler .crater--2 {
+    top: 13px;
+    left: 11px;
+    width: 3px;
+    height: 3px;
+  }
+
+  .toggle__handler .crater--3 {
+    top: 5px;
+    left: 13px;
+    width: 4px;
+    height: 4px;
+  }
+
+  .star {
+    position: absolute;
+    background-color: var(--true-white);
+    transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    border-radius: 50%;
+  }
+
+  .star--1 {
+    top: 6px;
+    left: 8px;
+    z-index: 0;
+    width: 30px;
+    height: 1px;
+  }
+
+  .star--2 {
+    top: 10px;
+    left: 15px;
+    z-index: 1;
+    width: 19px;
+    height: 1px;
+  }
+
+  .star--3 {
+    top: 14px;
+    left: 12px;
+    z-index: 0;
+    width: 30px;
+    height: 1px;
+  }
+
+  .star--4,
+  .star--5,
+  .star--6 {
+    opacity: 0;
+    transition: all 0.3s 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  }
+
+  .star--4 {
+    top: 19px;
+    left: 14px;
+    z-index: 0;
+    width: 1px;
+    height: 1px;
+    transform: translate3d(3px, 0, 0);
+  }
+
+  .star--5 {
+    top: 6px;
+    left: 15px;
+    z-index: 0;
+    width: 2px;
+    height: 2px;
+    transform: translate3d(3px, 0, 0);
+  }
+
+  .star--6 {
+    top: 16px;
+    left: 18px;
+    z-index: 0;
+    width: 1px;
+    height: 1px;
+    transform: translate3d(3px, 0, 0);
+  }
+
+  input:checked + .toggle {
+    background-color: #749dd6;
+  }
+
+  input:checked + .toggle:before {
+    color: var(--a11y-black-100);
+  }
+
+  input:checked + .toggle:after {
+    color: #a68fce;
+  }
+
+  input:checked + .toggle .toggle__handler {
+    background-color: #ffe5b5;
+    transform: translate3d(19px, 0, 0) rotate(0);
+  }
+
+  input:checked + .toggle .toggle__handler .crater {
+    opacity: 1;
+  }
+
+  input:checked + .toggle .star--1 {
+    width: 2px;
+    height: 2px;
+  }
+
+  input:checked + .toggle .star--2 {
+    width: 3px;
+    height: 3px;
+    transform: translate3d(-5px, 0, 0);
+  }
+
+  input:checked + .toggle .star--3 {
+    width: 2px;
+    height: 2px;
+    transform: translate3d(-7px, 0, 0);
+  }
+
+  input:checked + .toggle .star--4,
+  input:checked + .toggle .star--5,
+  input:checked + .toggle .star--6 {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  input:checked + .toggle .star--4 {
+    transition: all 0.3s 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  }
+
+  input:checked + .toggle .star--5 {
+    transition: all 0.3s 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  }
+
+  input:checked + .toggle .star--6 {
+    transition: all 0.3s 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  }
+
+  .scan-about-item {
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .scan-about-item svg {
+    margin-right: 0.875rem;
+  }
+
+  .scan-about-item a {
+    display: inline-block;
+  }
+
+  .screenshot-lightbox {
+    display: none;
+    position: fixed;
+    z-index: 9999;
+    padding: 2rem;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+  .lightbox-content {
+    position: relative;
+    margin: auto;
+    display: block;
+    overflow: auto;
+    height: calc(100% - 4rem);
+  }
+  .lightbox-header {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+    margin-bottom: 2rem;
+  }
+  .lightbox-header button {
+    background-color: rgba(0, 0, 0, 0.8);
+    border: none;
+    border-radius: 50%;
+    margin: 0;
+    min-height: 36px;
+    min-width: 36px;
+    line-height: 1rem;
+  }
+  .lightbox-header h5 {
+    flex: 1;
+    text-align: center;
+    color: var(--true-white);
+    font-weight: 700;
+  }
+  #lightbox-image {
+    object-fit: contain;
+    position: absolute;
+    width: 100%;
+  }
+
+  #pagesScannedModalToggle,
+  #pagesScannedModalToggleTxt {
+    background-color: transparent;
+    color: var(--sky-blue-150);
+    border: none;
+    padding: 0;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  #pagesScannedModalToggle:hover {
+    /* color: #00339a; */
+    text-decoration: underline;
+  }
+
+  /* #pagesScannedModal .modal-header {
+    border-bottom: none;
+    padding: 1rem 1.5rem 0 1.5rem;
+  }
+  */
+  #pagesScannedModal .modal-title {
+    width: 100%;
+    word-wrap: break-word;
+  }
+  #pagesScannedModal .tab-content {
+    overflow-y: scroll;
+    max-height: 600px;
+  }
+
+  #pagesScannedModal li {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--a11y-black-25);
+  }
+  #pagesScannedModal .nav-tabs {
+    border-width: 2px !important;
+  }
+  #pagesScannedModal .nav-item {
+    padding: 0px;
+    border-bottom: none;
+    margin-bottom: -1px;
+  }
+  #pagesScannedModal .nav-link.active {
+    border-bottom: 2px solid var(--sky-blue-150);
+  }
+  #pagesScannedModal .nav-link {
+    border: none;
+    color: var(--a11y-black-100);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  #pagesScannedModal .badge {
+    background-color: #e7ecee;
+    color: var(--a11y-black-100);
+    text-align: center;
+    border-radius: 8px;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1rem;
+  }
+  #pagesScannedModal .nav-link.active > .badge {
+    background-color: var(--sky-blue-150);
+    color: white;
+  }
+  #pagesScannedModal .not-scanned-url {
+    word-wrap: break-word;
+  }
+  #pagesScannedModal p {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--a11y-black-100);
+    margin: 0;
+  }
+
+  #pagesScannedModal h6 {
+    padding-left: 0.5rem;
+  }
+
+  #pagesScannedModal .custom-flow-screenshot-container {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  #pagesScannedModal .custom-flow-screenshot-container img {
+    height: 56px;
+    width: 67px;
+    flex-shrink: 0;
+  }
+
+  #pagesScannedModal .custom-flow-screenshot-container .display-url-container {
+    overflow: hidden;
+  }
+
+  #wcag-compliance-card,
+  #top-five-card {
+    border-radius: 0.25rem;
+  }
+  #summary-scan-results-card,
+  #scanabout-compliance-card {
+    box-shadow: none;
+    border-width: 1.5px;
+    border-color: var(--a11y-black-25);
+  }
+
+  .wcag-compliance-passes-panel {
+    margin: 1.5rem 0;
+    padding: 1rem;
+    border: 1px solid var(--a11y-black-25);
+    border-radius: 0.25rem;
+  }
+
+  .wcag-compliance-passes-bar {
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+    height: 0.475rem;
+    border-radius: 0.25rem;
+    background-color: #e7ecee;
+    position: relative;
+  }
+
+  #wcag-compliance-passes-bar-progress {
+    background-color: var(--a11y-purple-100-light);
+    position: absolute;
+    left: 0;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  .wcag-compliance-passes-bar-progress {
+    background-color: var(--a11y-purple-100-light);
+    position: absolute;
+    left: 0;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  /* #wcagModalToggle {
+    background: none;
+    border: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  #wcagModalToggle:hover svg path {
+    fill: #86b7fe;
+  } */
+
+  /* START CSS for new wcagComplianceCard */
+  #wcag-compliance-card p {
+    margin: 1.5rem 0 1rem 0;
+  }
+
+  button#wcagModalToggle {
+    background: none;
+    border: 0;
+    padding: 0;
+    float: right;
+    color: var(--sky-blue-150);
+  }
+
+  button#wcagModalToggle:hover {
+    /* color: #002b99; */
+    text-decoration: underline;
+  }
+
+  button#wcagModalToggle:after {
+    content: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 9 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.03847 16C0.833084 16 0.632306 15.9388 0.461529 15.8241C0.290753 15.7095 0.157649 15.5465 0.0790493 15.3558C0.000449621 15.1651 -0.0201154 14.9553 0.0199549 14.7529C0.0600251 14.5505 0.158931 14.3645 0.304165 14.2186L6.49293 7.99975L0.304165 1.78088C0.109639 1.58514 0.000422347 1.31979 0.000518839 1.04315C0.000615331 0.766523 0.110018 0.501248 0.30468 0.30564C0.499341 0.110032 0.763331 9.70251e-05 1.03862 6.41929e-08C1.31392 -9.68968e-05 1.57798 0.109652 1.77278 0.305123L8.69586 7.26187C8.8906 7.45757 9 7.72299 9 7.99975C9 8.2765 8.8906 8.54192 8.69586 8.73763L1.77278 15.6944C1.67646 15.7914 1.562 15.8684 1.43598 15.9208C1.30996 15.9733 1.17487 16.0002 1.03847 16Z' fill='%23006b8c'/%3E%3C/svg%3E%0A");
+    display: inline-block;
+    padding-left: 0.25rem;
+    text-decoration-line: none;
+  }
+
+  @media only screen and (max-width: 767px) {
+    button#wcagModalToggle {
+      position: absolute;
+      top: 1.1rem;
+      right: 1rem;
+    }
+
+    button#wcagModalToggle:after {
+      display: none;
+    }
+  }
+  /* END CSS for new wcagComplianceCard */
+
+  #pagesScannedModal .modal-header,
+  #wcagModal .modal-header {
+    border: none;
+    padding: 1rem 1.5rem 0 1.5rem;
+  }
+
+  #pagesScannedModal .modal-title #wcagModal .modal-title {
+    font-size: 1.125rem;
+  }
+
+  #wcagModal .modal-body {
+    padding: 1.5rem;
+  }
+
+  #wcagLinksAccordion .accordion-button:not(.collapsed) {
+    font-weight: bold;
+    background-color: inherit;
+    color: inherit;
+    box-shadow: none;
+  }
+
+  #wcagLinksAccordion .accordion-button:not(.collapsed):focus {
+    box-shadow: var(--bs-accordion-btn-focus-box-shadow);
+  }
+
+  #wcagLinksAccordion .accordion-button:not(.collapsed)::after {
+    background-image: var(--bs-accordion-btn-icon);
+  }
+
+  #wcagLinksList {
+    list-style-type: none;
+    column-count: 3;
+    margin: 0;
+    padding: 0;
+  }
+
+  #wcagLinksList li {
+    margin-bottom: 0.5rem;
+  }
+
+  #top-five-card li:not(:last-of-type) {
+    border-bottom: 1px solid var(--a11y-black-25);
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .category-selector {
+    border: 1px solid var(--a11y-black-25);
+    background-color: white;
+    border-radius: 0.25rem;
+    padding: 1rem;
+    width: 100%;
+    text-align: start;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .category-selector.selected {
+    border: 2px solid var(--sky-blue-150);
+    padding: calc(1rem - 1px);
+    cursor: default;
+  }
+
+  .category-selector:not(.selected):hover {
+    cursor: pointer;
+    background-color: rgba(158, 224, 242, 0.2);
+    border: 1px solid var(--sky-blue-150);
+  }
+
+  .category-selector .category-name {
+    font-weight: bold;
+    font-size: 1.125rem;
+    line-height: 2rem;
+  }
+
+  .category-selector .category-name::before {
+    height: 1.25rem;
+    width: 1.25rem;
+    margin-right: 0.5rem;
+    content: '';
+    background-repeat: no-repeat;
+    background-size: 1.25rem;
+    display: inline-block;
+  }
+
+  .category-selector.selected .category-name {
+    color: var(--sky-blue-150);
+  }
+
+  .category-selector.mustFix .category-name::before {
+    background-image: var(--must-fix-icon);
+  }
+
+  .category-selector.goodToFix .category-name::before {
+    background-image: var(--good-to-fix-icon);
+  }
+
+  .category-selector.needsReview .category-name::before {
+    background-image: var(--needs-review-icon);
+  }
+
+  .category-selector.passed .category-name::before {
+    background-image: var(--passed-icon);
+  }
+
+  #summarymustFixIcon {
+    height: 1.25rem;
+    width: 1.25rem;
+    margin-right: 0.5rem;
+    content: '';
+    background-repeat: no-repeat;
+    background-size: 1.25rem;
+    display: inline-block;
+  }
+
+  #summarygoodToFixIcon {
+    height: 1.25rem;
+    width: 1.25rem;
+    margin-right: 0.5rem;
+    content: '';
+    background-repeat: no-repeat;
+    background-size: 1.25rem;
+    display: inline-block;
+  }
+
+  #summaryneedsReviewIcon {
+    height: 1.25rem;
+    width: 1.25rem;
+    margin-right: 0.5rem;
+    content: '';
+    background-repeat: no-repeat;
+    background-size: 1.25rem;
+    display: inline-block;
+  }
+
+  #summarypassedIcon {
+    height: 1.25rem;
+    width: 1.25rem;
+    margin-right: 0.5rem;
+    content: '';
+    background-repeat: no-repeat;
+    background-size: 1.25rem;
+    display: inline-block;
+  }
+
+  .category-selector .category-information {
+    color: var(--a11y-black-100);
+    text-align: start;
+  }
+
+  #scan-about {
+    width: 300px;
+    padding: 1.5rem 1rem;
+    word-break: break-all;
+    border-right: 1px solid var(--a11y-black-25);
+  }
+
+  #scan-about ul {
+    padding-left: 0;
+  }
+
+  #scan-about li {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  #scan-about li > svg {
+    flex-shrink: 0;
+    margin-right: 1rem;
+    height: 1.125rem;
+    width: 1.125rem;
+  }
+
+  #footer {
+    padding: 0.75rem 1rem;
+    box-shadow: 0 -0.25rem 10px #736ccb1a;
+    font-size: 0.875rem;
+    line-height: 1rem;
+  }
+
+  #empty-category-summary-section {
+    padding-top: 1.5rem;
+    width: 100%;
+    text-align: center;
+  }
+
+  #empty-category-summary-section p {
+    color: var(--a11y-black-80);
+  }
+
+  #no-issues-message {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #no-issues-message::before {
+    content: '';
+    display: inline-block;
+    width: 1.75rem;
+    height: 1.75rem;
+    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.8408 3.56156C13.5637 3.24229 12.3775 4.20812 12.292 5.4585C12.1958 6.8625 11.9847 8.15161 11.7202 8.9184C11.5532 9.39932 11.0803 10.2716 10.3309 11.1079C9.58682 11.9401 8.61832 12.6816 7.48416 12.9915C6.58646 13.2359 5.67139 14.0134 5.67139 15.1489V20.4937C5.67139 21.6225 6.58245 22.4494 7.60573 22.5576C9.03511 22.7099 9.69503 23.112 10.3683 23.5235L10.4324 23.5636C10.7958 23.784 11.2046 24.0284 11.7282 24.2101C12.2586 24.3918 12.8784 24.5 13.6866 24.5H18.3622C19.6139 24.5 20.4982 23.8628 20.9457 23.0786C21.162 22.7086 21.2789 22.2889 21.285 21.8603C21.285 21.6573 21.2543 21.4435 21.1822 21.2405C21.4507 20.8891 21.6898 20.4683 21.8341 20.0369C21.981 19.596 22.0639 19.0189 21.8394 18.5019C21.9316 18.3283 21.9997 18.1426 22.0518 17.9636C22.1547 17.6029 22.2028 17.2048 22.2028 16.8187C22.2028 16.434 22.1547 16.0373 22.0518 15.6752C22.0051 15.5088 21.9434 15.347 21.8675 15.1917C22.1014 14.8589 22.2519 14.4747 22.3063 14.0716C22.3607 13.6684 22.3174 13.2582 22.1801 12.8753C21.9049 12.0844 21.269 11.4058 20.577 11.176C19.4455 10.7993 18.1685 10.8073 17.216 10.8942C17.0182 10.9119 16.8209 10.9342 16.6242 10.961C17.0876 8.97636 17.0592 6.90861 16.5414 4.93751C16.4513 4.62169 16.2785 4.33568 16.0408 4.10904C15.8031 3.8824 15.5092 3.72337 15.1895 3.64839L14.8408 3.56156ZM18.3622 23.1655H13.6866C13.0053 23.1655 12.5338 23.0733 12.1637 22.9464C11.7883 22.8168 11.4878 22.6418 11.1271 22.4214L11.0736 22.3893C10.3322 21.9365 9.47327 21.4128 7.74733 21.2298C7.30248 21.1817 7.00726 20.8424 7.00726 20.4951V15.1489C7.00726 14.8096 7.30916 14.4235 7.8355 14.2806C9.29828 13.8798 10.4765 12.9501 11.3275 11.9989C12.1757 11.0505 12.7488 10.0285 12.9813 9.35657C13.3059 8.42146 13.525 6.99475 13.6252 5.54934C13.6586 5.06575 14.1061 4.75583 14.5162 4.85736L14.8662 4.94552C15.0799 4.99896 15.2108 5.13655 15.2509 5.28617C15.7965 7.36481 15.7292 9.55688 15.0572 11.5982C15.0192 11.7117 15.0124 11.8334 15.0375 11.9504C15.0626 12.0675 15.1187 12.1757 15.2 12.2636C15.2812 12.3516 15.3846 12.416 15.4993 12.4503C15.614 12.4846 15.7359 12.4874 15.8521 12.4585L15.8561 12.4571L15.8748 12.4531L15.9522 12.4344C16.4091 12.3374 16.8712 12.2674 17.3362 12.2247C18.2219 12.1445 19.2826 12.1525 20.1549 12.4438C20.3887 12.5212 20.756 12.8445 20.9163 13.3121C21.0593 13.7235 21.0326 14.2071 20.561 14.6773L20.0894 15.1489L20.561 15.6218C20.6184 15.6792 20.7013 15.8102 20.7667 16.0426C20.8308 16.2657 20.8669 16.5369 20.8669 16.8187C20.8669 17.1019 20.8308 17.3718 20.7667 17.5962C20.6999 17.8287 20.6184 17.9596 20.561 18.017L20.0894 18.4886L20.561 18.9615C20.6238 19.0243 20.7066 19.1979 20.5677 19.6134C20.4229 20.0163 20.1928 20.3831 19.8931 20.6888L19.4215 21.1603L19.8931 21.6332C19.9011 21.6399 19.9478 21.7 19.9478 21.8603C19.9419 22.0563 19.8863 22.2475 19.7862 22.416C19.5658 22.8008 19.1143 23.1641 18.3622 23.1641V23.1655Z' fill='%23525048'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-size: auto;
+    margin-right: 0.5rem;
+  }
+
+  .rule-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    width: 100%;
+    background-color: transparent;
+    border: 0;
+    border-bottom: 1px solid var(--a11y-black-25);
+  }
+
+  .rule-item:hover {
+    background-color: white;
+    box-shadow: 0 0.125rem 4px #0000001a;
+  }
+
+  .rule-items-count {
+    width: 2.25rem;
+    height: 2.25rem;
+    font-weight: bold;
+    border-radius: 0.375rem;
+    color: var(--a11y-black-100);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 1rem;
+  }
+
+  .rule-items-count.mustFix {
+    background-color: var(--coral-red-100);
+  }
+
+  .rule-items-count.passed {
+    background-color: var(--leaf-green-100);
+  }
+
+  .rule-items-count.goodToFix {
+    background-color: var(--sunshine-yellow-100);
+  }
+
+  .rule-items-count.needsReview {
+    background-color: var(--a11y-black-25);
+  }
+
+  #expandedRule {
+    width: 55%;
+    overflow-y: auto;
+  }
+
+  #expandedRule #expandedRuleName {
+    font-size: 1.5rem;
+    font-weight: bold;
+    line-height: 2rem;
+    margin-bottom: 0;
+  }
+
+  #expandedRuleDescription {
+    margin-top: 2rem;
+  }
+
+  #expandedRuleHelpUrl {
+    display: block;
+    margin-bottom: 1rem;
+    width: fit-content;
+  }
+
+  #expandedRule #conformance-header {
+    font-size: 1rem;
+    font-weight: bold;
+    line-height: 1.75rem;
+  }
+
+  #expandedRule .offcanvas-header {
+    position: static;
+    margin-bottom: 2rem;
+  }
+
+  #expandedRule #issue-page-count {
+    font-size: 1.125rem;
+    line-height: 2rem;
+    font-weight: bold;
+  }
+
+  #expandedRule .offcanvas-body {
+    background-color: var(--a11y-black-5);
+    border-top: 1px solid var(--a11y-black-25);
+    padding: 2rem 1.5rem;
+    overflow-y: unset;
+  }
+
+  #expandedRuleSearchWarning {
+    color: var(--a11y-black-100);
+  }
+
+  .rule-desc-text {
+    width: 100%;
+    word-wrap: break-word;
+  }
+
+  .conformance-bubble {
+    color: white;
+    width: 2.5rem;
+    height: 1.875rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.3rem;
+    margin-right: 1rem;
+  }
+
+  .conformance-bubble.wcag2a {
+    background-color: var(--a11y-purple-150);
+  }
+
+  .conformance-bubble.wcag2aa,
+  .conformance-bubble.wcag21aa {
+    background-color: var(--a11y-purple-100-light);
+  }
+
+  .conformance-bubble.wcag22aa {
+    background-color: var(--a11y-purple-100-light);
+  }
+
+  .conformance-bubble.wcag2aaa {
+    background-color: var(--a11y-purple-100-light);
+  }
+
+  .conformance-bubble.best-practice {
+    background-color: var(--a11y-purple-highlight);
+  }
+
+  #expandedRuleCategorySelectors {
+    display: flex;
+  }
+
+  #expandedRuleCategorySelectors .category-selector {
+    border-radius: 0;
+  }
+
+  #expandedRuleCategorySelectors .category-selector:first-child {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+  }
+
+  #expandedRuleCategorySelectors .category-selector:last-child {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
+
+  #expandedRuleCategorySelectors .category-name {
+    font-size: 1rem;
+    line-height: 1.75rem;
+  }
+
+  #expandedRuleCategorySelectors .category-name::before {
+    height: 1.125rem;
+    width: 1.125rem;
+    background-size: 1.125rem;
+  }
+
+  #expandedRuleCategoryContent h5 {
+    font-size: 1.125rem;
+    font-weight: bold;
+    line-height: 2rem;
+  }
+
+  #expandedRuleCategoryContent .accordion-button {
+    padding: 1rem 1rem 1rem 1.25rem;
+  }
+
+  #expandedRuleCategoryContent .accordion-button:not(.collapsed) {
+    background-color: inherit;
+    color: inherit;
+  }
+
+  #expandedRuleCategoryContent .accordion-button::after {
+    content: none;
+  }
+
+  #expandedRuleCategoryContent .accordion-button::before {
+    content: '';
+    width: 0.75rem;
+    height: 1rem;
+    background-image: url("data:image/svg+xml,%3Csvg width='9' height='16' viewBox='0 0 9 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.03847 16C0.833084 16 0.632305 15.9388 0.461529 15.8241C0.290753 15.7095 0.157649 15.5465 0.0790493 15.3558C0.000449621 15.1651 -0.0201154 14.9553 0.0199549 14.7529C0.0600251 14.5505 0.158931 14.3645 0.304165 14.2186L6.49293 7.99975L0.304165 1.78088C0.109639 1.58514 0.000422347 1.31979 0.000518839 1.04315C0.000615331 0.766523 0.110018 0.501248 0.30468 0.30564C0.499341 0.110032 0.763331 9.70251e-05 1.03862 6.41929e-08C1.31392 -9.68968e-05 1.57798 0.109652 1.77278 0.305123L8.69586 7.26187C8.8906 7.45757 9 7.72299 9 7.99975C9 8.2765 8.8906 8.54192 8.69586 8.73763L1.77278 15.6944C1.67646 15.7914 1.562 15.8684 1.43598 15.9208C1.30996 15.9733 1.17487 16.0002 1.03847 16Z' fill='%23006b8c'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-size: auto;
+    transition: transform 0.2s ease-in-out;
+    margin-right: 1rem;
+    flex-shrink: 0;
+  }
+
+  #expandedRuleCategoryContent .accordion-button:not(.collapsed)::before {
+    transform: rotate(90deg);
+  }
+
+  #expandedRuleCategoryContent .accordion-button .counter {
+    padding: 0.5rem;
+    min-width: 61px;
+    border: 1px solid var(--a11y-black-25);
+    border-radius: 0.375rem;
+    padding: 0.25rem 0.5rem;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: end;
+    flex-shrink: 0;
+  }
+
+  #expandedRuleCategoryContent .accordion-button .counter::before {
+    height: 1.125rem;
+    width: 1.125rem;
+    margin-right: 0.375rem;
+    content: '';
+    background-repeat: no-repeat;
+    background-size: 1.125rem;
+    display: inline-block;
+  }
+
+  #expandedRuleCategoryContent .mustFix .accordion-button .counter::before {
+    background-image: var(--must-fix-icon);
+  }
+
+  #expandedRuleCategoryContent .goodToFix .accordion-button .counter::before {
+    background-image: var(--good-to-fix-icon);
+  }
+
+  #expandedRuleCategoryContent .needsReview .accordion-button .counter::before {
+    background-image: var(--needs-review-icon);
+  }
+
+  #expandedRuleCategoryContent .mustFix .accordion-body .card {
+    border-top: 0.25rem solid var(--coral-red-100);
+  }
+
+  #expandedRuleCategoryContent .goodToFix .accordion-body .card {
+    border-top: 0.25rem solid var(--sunshine-yellow-100);
+  }
+
+  #expandedRuleCategoryContent .needsReview .accordion-body .card {
+    border-top: 0.25rem solid var(--a11y-black-25);
+  }
+
+  #expandedRuleCategoryContent .accordion-body .card .needsReview {
+    color: var(--a11y-black-100);
+    background-color: var(--a11y-black-5);
+    border-bottom: 1px solid var(--a11y-black-25);
+    padding: 0.5rem 1rem;
+    display: flex;
+    align-items: center;
+  }
+
+  #expandedRuleCategoryContent .accordion-body .card .needsReview::before {
+    content: '';
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.5rem;
+    background-repeat: no-repeat;
+    background-size: 1.25rem;
+    display: inline-block;
+    flex-shrink: 0;
+  }
+
+  #expandedRuleCategoryContent .mustFix .accordion-body .card .needsReview::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5714 19.5H1.42857C0.916142 19.5 0.5 19.0839 0.5 18.5714V1.42857C0.5 0.916142 0.916142 0.5 1.42857 0.5H18.5714C19.0839 0.5 19.5 0.916142 19.5 1.42857V18.5714C19.5 19.0839 19.0839 19.5 18.5714 19.5Z' stroke='%23f26949'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.72337 6.7417C7.88706 6.03485 8.16236 5.50658 8.54926 5.15688C8.98081 4.81461 9.4942 4.64348 10.0894 4.64348C10.7144 4.64348 11.213 4.80717 11.585 5.13456C11.957 5.46194 12.143 5.86372 12.143 6.33991C12.143 6.69706 12.0388 7.00211 11.8305 7.25509C11.6966 7.43366 11.2799 7.80568 10.5805 8.37116C9.88855 8.95152 9.4198 9.46491 9.17426 9.91134C8.95105 10.3801 8.83944 10.9381 8.83944 11.5854V12.0988L8.86176 12.2328C8.86176 12.3221 8.87479 12.4039 8.90083 12.4783C8.92687 12.5527 8.95291 12.6122 8.97895 12.6569C9.00499 12.7015 9.04964 12.7406 9.11288 12.7741C9.17612 12.8075 9.22449 12.8336 9.25797 12.8522C9.29145 12.8708 9.35284 12.8838 9.44212 12.8913C9.53141 12.8987 9.59279 12.9024 9.62627 12.9024H9.82159H10.0002C10.2457 12.9024 10.428 12.8931 10.547 12.8745C10.6661 12.8559 10.7721 12.8001 10.8651 12.7071C10.9581 12.6141 11.0046 12.4709 11.0046 12.2774C11.0046 12.0244 11.0195 11.764 11.0493 11.4962C11.0716 11.2209 11.1162 11.0051 11.1832 10.8488C11.2799 10.6107 11.5924 10.2759 12.1207 9.84438C13.1177 9.0036 13.7576 8.35629 14.0403 7.90241C14.338 7.41878 14.4868 6.92027 14.4868 6.40688C14.4868 5.43961 14.0775 4.61373 13.2591 3.9292C12.463 3.20003 11.3692 2.83545 9.97784 2.83545C8.66831 2.83545 7.61177 3.19259 6.80819 3.90688C6.07158 4.53188 5.64748 5.31312 5.53587 6.25063C5.52099 6.29527 5.51355 6.36967 5.51355 6.47384C5.51355 6.7789 5.62144 7.04118 5.83721 7.26067C6.05299 7.48017 6.30968 7.58991 6.6073 7.58991C6.86028 7.58991 7.08721 7.50993 7.2881 7.34996C7.489 7.18999 7.6192 6.98724 7.67873 6.7417H7.72337ZM10.0002 13.9515C9.55373 13.9515 9.17055 14.1078 8.8506 14.4203C8.53066 14.7328 8.37069 15.1122 8.37069 15.5587C8.37069 15.9977 8.53066 16.379 8.8506 16.7026C9.17055 17.0263 9.55373 17.1881 10.0002 17.1881C10.4466 17.1881 10.8298 17.0263 11.1497 16.7026C11.4697 16.379 11.6296 15.9977 11.6296 15.5587C11.6296 15.1122 11.4697 14.7328 11.1497 14.4203C10.8298 14.1078 10.4466 13.9515 10.0002 13.9515Z' fill='%23f26949'/%3E%3C/svg%3E%0A");
+  }
+
+  #expandedRuleCategoryContent .goodToFix .accordion-body .card .needsReview::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5714 19.5H1.42857C0.916142 19.5 0.5 19.0839 0.5 18.5714V1.42857C0.5 0.916142 0.916142 0.5 1.42857 0.5H18.5714C19.0839 0.5 19.5 0.916142 19.5 1.42857V18.5714C19.5 19.0839 19.0839 19.5 18.5714 19.5Z' stroke='%23ffb200'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.72331 6.7417C7.887 6.03485 8.1623 5.50658 8.5492 5.15688C8.98075 4.81461 9.49414 4.64348 10.0894 4.64348C10.7144 4.64348 11.2129 4.80717 11.5849 5.13456C11.9569 5.46194 12.143 5.86372 12.143 6.33991C12.143 6.69706 12.0388 7.00211 11.8305 7.25509C11.6965 7.43366 11.2799 7.80568 10.5805 8.37116C9.88849 8.95152 9.41974 9.46491 9.1742 9.91134C8.95099 10.3801 8.83938 10.9381 8.83938 11.5854V12.0988L8.8617 12.2328C8.8617 12.3221 8.87472 12.4039 8.90077 12.4783C8.92681 12.5527 8.95285 12.6122 8.97889 12.6569C9.00493 12.7015 9.04958 12.7406 9.11282 12.7741C9.17606 12.8075 9.22443 12.8336 9.25791 12.8522C9.29139 12.8708 9.35277 12.8838 9.44206 12.8913C9.53135 12.8987 9.59273 12.9024 9.62621 12.9024H9.82152H10.0001C10.2456 12.9024 10.4279 12.8931 10.547 12.8745C10.666 12.8559 10.772 12.8001 10.8651 12.7071C10.9581 12.6141 11.0046 12.4709 11.0046 12.2774C11.0046 12.0244 11.0194 11.764 11.0492 11.4962C11.0715 11.2209 11.1162 11.0051 11.1831 10.8488C11.2799 10.6107 11.5924 10.2759 12.1206 9.84438C13.1177 9.0036 13.7575 8.35628 14.0403 7.90241C14.3379 7.41878 14.4867 6.92027 14.4867 6.40688C14.4867 5.43961 14.0775 4.61373 13.259 3.9292C12.4629 3.20003 11.3692 2.83545 9.97777 2.83545C8.66824 2.83545 7.61171 3.19259 6.80813 3.90688C6.07152 4.53188 5.64742 5.31312 5.53581 6.25063C5.52093 6.29527 5.51349 6.36967 5.51349 6.47384C5.51349 6.7789 5.62137 7.04118 5.83715 7.26067C6.05292 7.48017 6.30962 7.58991 6.60724 7.58991C6.86022 7.58991 7.08715 7.50993 7.28804 7.34996C7.48894 7.18999 7.61914 6.98724 7.67867 6.7417H7.72331ZM10.0001 13.9515C9.55367 13.9515 9.17048 14.1078 8.85054 14.4203C8.5306 14.7328 8.37063 15.1122 8.37063 15.5587C8.37063 15.9977 8.5306 16.379 8.85054 16.7026C9.17048 17.0263 9.55367 17.1881 10.0001 17.1881C10.4465 17.1881 10.8297 17.0263 11.1497 16.7026C11.4696 16.379 11.6296 15.9977 11.6296 15.5587C11.6296 15.1122 11.4696 14.7328 11.1497 14.4203C10.8297 14.1078 10.4465 13.9515 10.0001 13.9515Z' fill='%23ffb200'/%3E%3C/svg%3E%0A");
+  }
+
+  #expandedRuleCategoryContent .needsReview .accordion-body .card .needsReview::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%23c9c8c6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.09759 7.26594C8.23445 6.67496 8.46462 6.23328 8.7881 5.9409C9.14891 5.65474 9.57815 5.51166 10.0758 5.51166C10.5984 5.51166 11.0152 5.64852 11.3262 5.92224C11.6372 6.19596 11.7928 6.53188 11.7928 6.93002C11.7928 7.22862 11.7057 7.48367 11.5315 7.69518C11.4195 7.84448 11.0712 8.15552 10.4864 8.6283C9.90785 9.11353 9.51594 9.54277 9.31065 9.91602C9.12403 10.3079 9.03072 10.7745 9.03072 11.3157V11.7449L9.04938 11.8569C9.04938 11.9316 9.06026 12 9.08204 12.0622C9.10381 12.1244 9.12558 12.1742 9.14736 12.2115C9.16913 12.2488 9.20645 12.2815 9.25933 12.3095C9.31221 12.3375 9.35264 12.3593 9.38064 12.3748C9.40863 12.3904 9.45995 12.4012 9.5346 12.4075C9.60925 12.4137 9.66058 12.4168 9.68857 12.4168H9.85187H10.0012C10.2065 12.4168 10.3589 12.409 10.4584 12.3935C10.5579 12.3779 10.6466 12.3313 10.7243 12.2535C10.8021 12.1757 10.841 12.056 10.841 11.8942C10.841 11.6827 10.8534 11.465 10.8783 11.2411C10.897 11.0109 10.9343 10.8305 10.9903 10.6998C11.0712 10.5008 11.3324 10.2208 11.7741 9.86003C12.6077 9.15707 13.1427 8.61587 13.3791 8.23639C13.6279 7.83204 13.7523 7.41524 13.7523 6.986C13.7523 6.17729 13.4102 5.48678 12.7259 4.91446C12.0603 4.30482 11.1458 4 9.9825 4C8.88763 4 8.00428 4.2986 7.33243 4.8958C6.71656 5.41835 6.36198 6.07154 6.26866 6.85537C6.25622 6.89269 6.25 6.9549 6.25 7.04199C6.25 7.29705 6.3402 7.51633 6.52061 7.69984C6.70101 7.88336 6.91563 7.97512 7.16446 7.97512C7.37597 7.97512 7.56571 7.90824 7.73367 7.77449C7.90163 7.64075 8.0105 7.47123 8.06026 7.26594H8.09759ZM10.0012 13.2939C9.62791 13.2939 9.30754 13.4246 9.04005 13.6858C8.77255 13.9471 8.6388 14.2644 8.6388 14.6376C8.6388 15.0047 8.77255 15.3235 9.04005 15.5941C9.30754 15.8647 9.62791 16 10.0012 16C10.3744 16 10.6948 15.8647 10.9623 15.5941C11.2298 15.3235 11.3635 15.0047 11.3635 14.6376C11.3635 14.2644 11.2298 13.9471 10.9623 13.6858C10.6948 13.4246 10.3744 13.2939 10.0012 13.2939Z' fill='white'/%3E%3C/svg%3E%0A");
+  }
+
+  .page-item-card-section-title {
+    width: 20%;
+  }
+
+  .ai-response-card {
+    padding: 1rem;
+    border: 1px solid var(--a11y-black-25);
+    background-color: rgba(144, 33, 166, 0.05);
+    border-radius: 4px;
+  }
+
+  .page-item-card-section-content {
+    width: 80%;
+    flex-shrink: 0;
+  }
+
+  .page-item-card-section-content img {
+    max-width: 100%;
+  }
+
+  .page-item-card-section-content ul {
+    list-style: inside;
+    list-style-position: outside;
+  }
+
+  .page-item-card-section-content .copy-button {
+    border: 1px solid #97adb5;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: var(--true-white);
+    padding: 0.25rem;
+    line-height: 1rem;
+  }
+
+  button.copy-button:focus {
+    box-shadow: 0 0 0 0.125rem rgba(0, 71, 250, 0.5);
+  }
+
+  .page-item-card-section-content .path-container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .processAI {
+    color: var(--a11y-black-100);
+  }
+
+  .g-one {
+    gap: 1rem;
+  }
+
+  .custom-flow-screenshot {
+    border: 1px solid #2e69ff;
+    border-radius: 4px;
+    width: 150px;
+    height: 128px;
+    object-fit: cover;
+    object-position: 100% 0;
+    cursor: zoom-in;
+  }
+
+  .custom-flow-screenshot-container {
+    display: flex;
+    gap: 1rem;
+  }
+
+  #expandedRuleCategoryContent .accordion-body pre,
+  .bg-grey-w-border {
+    background-color: var(--a11y-black-5);
+    border: 1px solid var(--a11y-black-25);
+    font-size: 1rem;
+    padding: 0.5rem;
+    white-space: normal;
+    margin-bottom: 0;
+    line-height: 1.25rem;
+    border-radius: 4px;
+  }
+
+  #expandedRuleCategoryContent .page-accordion-content-title {
+    font-weight: bold;
+    margin-top: 1rem;
+    display: flex;
+    align-items: center;
+  }
+
+  #expandedRuleCategoryContent .page-accordion-content-title::before {
+    height: 1.125rem;
+    width: 1.125rem;
+    margin-right: 0.5rem;
+    content: '';
+    background-repeat: no-repeat;
+    background-size: 1.125rem;
+    display: inline-block;
+  }
+
+  #expandedRuleCategoryContent .mustFix .page-accordion-content-title::before {
+    background-image: var(--must-fix-icon);
+  }
+
+  #expandedRuleCategoryContent .goodToFix .page-accordion-content-title::before {
+    background-image: var(--good-to-fix-icon);
+  }
+
+  #expandedRuleCategoryContent .needsReview .page-accordion-content-title::before {
+    background-image: var(--needs-review-icon);
+  }
+
+  #expandedRuleCategoryContent .page-items-count {
+    border: 1px solid var(--a11y-black-25);
+    border-radius: 0.475rem;
+    margin-left: 0.5rem;
+    padding: 0 0.5rem;
+  }
+
+  #summary-table-header {
+    border-bottom: 3px solid var(--a11y-purple-100-light) !important;
+    border-top: 1px solid var(--a11y-black-25);
+    border-left: 1px solid var(--a11y-black-25);
+    border-right: 1px solid var(--a11y-black-25);
+    border-style: solid;
+    padding-left: 16px;
+    padding-top: 14px;
+    padding-bottom: 14px;
+  }
+
+  #summary-table-icon {
+    visibility: hidden;
+  }
+
+  #summary-table-issue-description {
+    text-align: left;
+    padding-left: 10px;
+  }
+
+  #summary-table-pages {
+    text-align: right;
+  }
+
+  #summary-table-occurrences {
+    text-align: right;
+    padding-right: 10px;
+  }
+
+  #summary-table-helpUrl {
+    padding-right: 16px;
+    padding-left: 10px;
+  }
+
+  #table-mustFix-icon {
+    background-repeat: no-repeat;
+    background-position: center;
+    margin: auto;
+    margin-top: 1.25rem;
+  }
+
+  #table-goodToFix-icon {
+    background-repeat: no-repeat;
+    background-position: center;
+    margin: auto;
+    margin-top: 1.25rem;
+  }
+
+  #table-needsReview-icon {
+    background-repeat: no-repeat;
+    background-position: center;
+    margin: auto;
+    margin-top: 1.25rem;
+  }
+
+  .svg-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .svg-aboutscan {
+    margin-right: 1rem;
+    height: 1.125rem;
+    width: 1.125rem;
+    flex-shrink: 0;
+  }
+
+  .txt {
+    font-family: Calibri;
+    font-size: 15px;
+    text-align: center;
+    margin-bottom: -5px;
+    color: rgb(174, 121, 128);
+  }
+
+  .footer {
+    height: 50px;
+    display: flex;
+    padding: 15px;
+  }
+
+  .nbPages {
+    font-family: Calibri;
+    font-size: 13px;
+    color: rgb(174, 121, 128);
+    text-align: right;
+  }
+
+  hr.solid {
+    border-top: 1px solid rgb(174, 121, 128);
+  }
+
+  .aiGenerateResponseButton {
+    border: 1px solid var(--a11y-purple-100-light);
+    color: var(--a11y-purple-100-light);
+    background-color: var(--true-white);
+    border-radius: 4px;
+    padding: 0.5rem 1rem;
+  }
+
+  .aiGenerateResponseButton:disabled {
+    border: 1px solid var(--a11y-black-25);
+    color: var(--a11y-black-25);
+  }
+
+  .aiGenerateResponseButton:hover:not(:disabled) {
+    background-color: var(--a11y-purple-50);
+    color: var(--a11y-purple-100-light);
+    border-color: var(--a11y-purple-100-light);
+  }
+
+  .aiGenerateResponseButton:active:not(:disabled) {
+    background-color: var(--a11y-purple-70);
+    color: var(--a11y-purple-150);
+    border-color: var(--a11y-purple-150);
+  }
+
+  .generateAiError {
+    color: var(--coral-red-100);
+    margin-top: 0.5rem;
+  }
+
+  .aiFeedbackResponse {
+    color: var(--a11y-black-100);
+  }
+
+  .undoAiFeedback:hover {
+    text-decoration: underline !important;
+  }
+
+  .feedbackButtons {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 2rem;
+  }
+
+  .aiFeedbackButton {
+    background-color: var(--true-white);
+    border: 1px solid var(--a11y-purple-100-light);
+    color: var(--a11y-purple-100-light);
+    border-radius: 4px;
+    padding: 0.25rem 1rem;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .aiFeedbackButton:hover {
+    background-color: var(--a11y-purple-50);
+    color: var(--a11y-purple-100-light);
+    border-color: var(--a11y-purple-100-light);
+  }
+
+  .aiFeedbackButton:active {
+    background-color: var(--a11y-purple-70);
+    color: var(--a11y-purple-150);
+    border-color: var(--a11y-purple-150);
+  }
+
+  .codeForAiResponse {
+    display: inline-block;
+    background-color: var(--a11y-black-5);
+    border: 1px solid var(--a11y-black-25);
+    font-size: 1rem;
+    padding: 0.5rem;
+    white-space: normal;
+    margin-bottom: 0;
+    line-height: 1.25rem;
+    border-radius: 4px;
+  }
+
+  #expandedRuleAiFeedback {
+    margin-top: 2rem;
+    background-color: rgba(144, 33, 166, 0.05);
+    border: 1px solid var(--a11y-purple-100-light);
+    border-radius: 4px;
+    padding: 1rem;
+  }
+
+  /* Mobile UI Styles - KC*/
+
+  /* START: Styles categorySelectorDropdown */
+  .ally-button-container {
+    #announcement {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    select,
+    ul {
+      display: block;
+      border: 0;
+      font-size: 1rem;
+    }
+
+    button {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+
+      &::before {
+        font-family: 'Font Awesome 5 Free';
+        content: '\f107';
+        vertical-align: middle;
+        font-weight: 900;
+        position: absolute;
+        right: 0.8rem;
+      }
+
+      &:focus-visible {
+        outline: 0;
+        box-shadow: 0 0 5px 2px rgba(251, 146, 60, 0.7) inset;
+      }
+    }
+
+    ul {
+      color: #3f403b;
+      position: absolute;
+      left: 0;
+      right: 0;
+      max-height: 10rem;
+      overflow-y: auto;
+      list-style-type: none;
+      padding: 0;
+      margin-top: 0.1rem;
+      opacity: 0;
+      transform: scale(1, 0);
+      transform-origin: top left;
+      transition: all 0.3s ease-in;
+      pointer-events: none;
+      z-index: 2;
+
+      &.active {
+        opacity: 1;
+        transform: scale(1, 1);
+        pointer-events: auto;
+      }
+
+      li {
+        margin: 0 0.5rem;
+        padding: 0.6rem 0.5rem;
+        border-top: 1px solid #e6e6e6;
+        cursor: pointer;
+        transition: all 0.3s ease-in;
+        position: relative;
+        background-color: rgb(255, 255, 255);
+
+        &::before {
+          font-family: 'Font Awesome 5 Free';
+          content: '\f00c';
+          vertical-align: middle;
+          font-weight: 900;
+          position: absolute;
+          right: 0.8rem;
+          opacity: 0;
+          transition: opacity 0.3s ease-out;
+        }
+
+        &.current {
+          /* Color of list item when selected */
+          background: #e6e6e6;
+        }
+
+        &.active {
+          box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.7);
+        }
+
+        &.active::before {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  ul#issueTypeListbox,
+  ul#expandedRuleIssueTypeListbox {
+    position: absolute;
+    padding: 0;
+    opacity: 0;
+    transform: scale(1, 0);
+    transform-origin: top left;
+    transition: all 0.3s ease-in;
+
+    &.active {
+      opacity: 1;
+      transform: scale(1, 1);
+      pointer-events: auto;
+    }
+
+    li {
+      padding: 0.5rem 1rem;
+      border-radius: 0;
+      border-top: 0;
+      cursor: pointer;
+      transition: all 0.3s ease-in;
+      background-color: rgb(255, 255, 255);
+
+      &[aria-selected='true']::after {
+        border-bottom: 1px solid var(--a11y-black-100);
+        border-right: 1px solid var(--a11y-black-100);
+        content: '';
+        height: 16px;
+        position: absolute;
+        right: 16px;
+        top: 50%;
+        transform: translate(0, -50%) rotate(45deg);
+        width: 8px;
+      }
+
+      &:hover {
+        border-color: var(--a11y-black-25);
+        background-color: #f2f6ff;
+      }
+
+      &:focus {
+        border-color: var(--a11y-black-25);
+        background-color: #f2f6ff;
+      }
+    }
+  }
+
+  .ally-toggle-button {
+    width: 100%;
+    padding: 10px;
+    text-align: left;
+    background-color: var(--true-white);
+    border: 1px solid;
+    border-color: var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+  }
+
+  /* Special CSS to overwrite for mobile dropdown as we are reusing the same class. */
+  .expanded-rule-issue-type-combobox-button > .category-selector,
+  .ally-toggle-button-2 > .category-selector {
+    padding: 8px 16px;
+  }
+
+  .expanded-rule-issue-type-combobox-button > .category-selector:not(.selected):hover,
+  .expanded-rule-issue-type-combobox-button > .category-selector:not(.selected):focus,
+  .ally-toggle-button-2 > .category-selector:not(.selected):hover,
+  .ally-toggle-button-2 > .category-selector:not(.selected):focus {
+    background-color: var(--true-white);
+  }
+
+  .expanded-rule-issue-type-combobox-button::after,
+  .ally-toggle-button-2::after {
+    border-bottom: 1px solid var(--a11y-black-100);
+    border-right: 1px solid var(--a11y-black-100);
+    content: '';
+    display: block;
+    height: 12px;
+    pointer-events: none;
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translate(0, -65%) rotate(45deg);
+    width: 12px;
+  }
+  /* END: Styles categorySelectorDropdown */
+
+  .rule-item-description {
+    margin-right: auto;
+    padding-left: 0.5rem;
+    width: 80%;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: 56px;
+    text-align: left !important;
+  }
+
+  .compliance-summary {
+    --bs-gutter-x: 1.5rem;
+    --bs-gutter-y: 0;
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: 1rem;
+    margin-left: 1rem;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    gap: 1rem;
+  }
+
+  .mobile-view {
+    display: none;
+  }
+
+  @media only screen and (max-width: 767px) {
+    .compliance-summary {
+      flex-direction: column;
+    }
+
+    #expandedRule {
+      width: 95%;
+    }
+
+    .rule-item-description {
+      width: 70%;
+    }
+    .desktop-view {
+      display: none;
+    }
+
+    .mobile-view {
+      display: flex;
+    }
+
+    .wcag-compliance-passes-panel {
+      border: none;
+      padding: 0;
+      margin: 1rem 0;
+    }
+
+    .compliance-summary {
+      padding-top: 0;
+    }
+
+    #accessibility-site-report h2 {
+      margin-bottom: 1rem;
+    }
+
+    #accessibility-site-report p,
+    #accessibility-site-report a {
+      font-size: 1rem !important;
+    }
+
+    main {
+      flex-direction: column;
+    }
+
+    #scan-about {
+      /* background-color: powderblue; */
+      width: auto;
+      padding-bottom: 1rem;
+      border: 0;
+    }
+    #scan-about.card {
+      border-width: 0;
+    }
+    #scan-about ul {
+      margin-bottom: 0;
+    }
+
+    /* reportSearch */
+    .search-filter-on {
+      width: 90vw;
+    }
+  }
+</style>