@media (max-width: 768px) {

    * {
        /border: 1px solid black;
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        overflow-x: auto;
        margin: 0rem auto;
        padding: 0;
    }

    .body-contain {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        padding: 0;
    }

    h3,
    h4 {
        text-align: center;
    }

    h3.fancy {
        font-size: 1.6rem;
        font-weight: bold;
        padding: 1rem 0rem 0.8rem 0rem;
        margin: 15rem auto 6rem auto;
        width: 20rem;
    }



    /* LANDING PAGE */

    #parallax-cont {
        width: 100%;
        height: 46vh;
        margin-bottom: 4rem;
        background-image: url("../assets/capitol-bldg-lp.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    #capitol-bldg-cont {
        width: 99%;
        height: 80%;
        max-height: 34rem;
        margin: 0 auto;
        position: absolute;
        top: 0;
    }

    #capitol-bldg {
        width: 100%;
        height: 100%;
        max-height: 34rem;
    }

    .parallax {
        height: 32vh;
        width: 99%;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        position: relative;
        z-index: 10;
    }

    #index-page {
        margin: 0rem auto 0rem auto;
        padding-top: 0rem !important;
        padding-bottom: 0rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-content: center;
    }

    .logo-title-cont {
        display: flex;
        margin: 1rem auto 0rem 0.5rem;
        text-align: center;
        width: 70%;
        height: 5vh;
    }

    #main-intro-logo {
        height: 3rem;
        margin-right: 0.5rem;
        transform: rotate(0deg) scaleX(1);
        transform-origin: center;
        animation: shift 3.5s linear forwards;
        animation-delay: 0s;
    }

    @keyframes shift {
        0% {
            transform: rotate(45deg) scaleX(1);
        }

        55% {
            transform: rotate(45deg) scaleX(1);
        }

        60% {
            transform: rotate(40deg) scaleX(1);
        }

        65% {
            transform: rotate(30deg) scaleX(1);
        }

        70% {
            transform: rotate(20deg) scaleX(1);
        }

        75% {
            transform: rotate(5deg) scaleX(1);
        }

        80% {
            transform: rotate(-10deg) scaleX(1);
        }

        85% {
            transform: rotate(5deg) scaleX(1);
        }

        90% {
            transform: rotate(-5deg) scaleX(1);
        }

        95% {
            transform: rotate(5deg) scaleX(1);
        }

        100% {
            transform: rotate(0deg) scaleX(1);
        }
    }

    #header-title-lp {
        display: block;
        opacity: 1;
        display: inline-block;
        transition: opacity 0.6s;
        color: var(--blue3);
        font-size: 2.9rem;
        font-weight: 100 !important;
        font-family: var(--text-logo-name);
        margin-top: 0rem;
    }

    /* .letter {
        opacity: 0;
        display: inline-block;
        transition: opacity 0.6s;
        color: var(--blue3);
        font-size: 2.9rem;
        font-weight: 100 !important;
        font-family: var(--text-logo-name);
        margin-top: 0rem;
    } 
    */

    .main-text-shadow {
        font-weight: bold;
    }

    #main-intro-stmt-cont {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 4rem;
        margin-left: 0;
    }

    #main-intro-title {
        color: transparent;
        font-size: 2vh;
        margin: 0rem 0 0 1.5rem;
        width: 100%;
        font-weight: bold;
        text-align: left;
        contain: layout style paint;
        padding: 0.5rem 1rem 0.5rem 1rem;
    }

    .intro-text-bg {
        background: var(--gblue4);
        color: white;
        padding: 1rem 1rem 1rem 1rem;
        mix-blend-mode: screen;

    }

    .main-intro-stmt-cont {
        height: 75%;
        width: 50%
    }

    #main-intro-stmts {
        padding: 0.8vh;
        width: 100%;
        font-weight: bold;
        text-align: left;
        margin-left: 2vw;
    }

    .main-intro-p {
        margin: 0.5vh 0 0 0vh;
        font-size: 1.5vh;
    }

    .main-intro-p span {
        font-weight: bold;
        color: var(--blue4);
    }

    .fas.fa-check {
        padding: 0.8rem;
        font-size: 1.3vh;
        color: var(--blue4)
    }

    #intro-p1 {
        padding-top: 0.6vh;
    }


    #election-center-button {
        z-index: 99;
        margin: 2rem auto 0rem auto;
        background: var(--gbluegray2);
        font-size: 1.rem;
        border: 0px var(--blue4) solid;
        width: 100%;
        display: flex;
        justify-content: center;
        opacity: 1;
        transition: all 0.6s ease;
    }

    #election-center-button a {
        color: var(--blue4);
        text-decoration: none;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 5rem;
        transition: all 0.6s ease;
    }

    #election-center-button a span {
        letter-spacing: 0.3rem;
        font-size: 1.5rem;
        font-weight: bold;
        color: white;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.6s ease;
    }

    #election-center-button span .fa-circle-right {
        font-size: 1.7rem;
        color: white;
        padding-left: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #election-center-button:hover {
        text-decoration: none;
        opacity: 0.5;

    }

    #election-center-button span:hover {
        color: white !important;
        text-decoration: none;
        animation: none;
        font-size: 1.8rem;

    }



    /* PAGE 1 */

    #page1 {
        width: 100vw;
        height: 62vh;
        margin-top: 2rem;
        margin-bottom: 20rem;
    }

    #search-map-cont {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 5%;
        width: 95%;
        max-width: 130rem;
        padding: 0rem;
        margin: 0rem auto 0 auto;
    }

    #search-section {
        width: 85%;
        min-width: 23rem;
        max-width: 30rem;
        height: 33rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: var(--ggray2);
        border: none;
        border-radius: 0.5rem;
        padding: 0.5rem 2.5rem 0.5rem 2.5rem;
        position: relative;
        left: 0%;
        margin: 0 auto;
    }

    #search-fields-cont {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
        display: flex;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-content: space-evenly;
    }

    .search-field-cont {
        display: flex;
        flex-direction: column;
        margin-bottom: 2.5rem;
    }

    .search-label {
        color: var(--blue4);
        font-weight: bold;
        font-size: 1.4rem;
        text-align: left;
        width: 100%;
    }


    /* PAGE 1 | DROPDOWNS */


    .select2-container,
    .select2-selection {
        width: 100% !important;
    }

    .select2-container--default .select2-selection--single {
        font-size: 1.4rem;
        text-align: left;
    }

    .select2-results__options {
        font-size: 1.4rem;
        text-align: left;
    }

    .select2-search__field:focus {
        background: var(--gray);
    }

    #select2-leg-select-results {
        font-size: 1.25rem !important;
    }


    /* PAGE 1 | FIND REPRESENTATIVE */

    #search-pol-input-main {
        height: 2.8rem;
        padding-left: 2.1rem;
        width: 100%;
        position: relative;
        transform: translate(-1.2rem, 0);
    }

    #search-pol-input-main::placeholder {
        opacity: 0.6;
    }

    .mag-glass-main {
        position: relative;
        transform: translate(60%, 35%);
        font-size: 1.8rem;
        font-weight: bold;
        color: black;
        z-index: 2;
    }

    .input-button-main-cont {
        display: flex;
        gap: 0rem;
    }

    #locate-pol-search-button-main {
        width: 10rem;
        height: 2.7rem;
        width: 20%;
        outline: none;
        font-size: 1.4rem;
        font-weight: 500;
        border-radius: 0.5rem;
        cursor: pointer;
        border: 0.1rem solid var(--blue4);
        transition: all 0.3s ease;
        margin-top: 0.15rem;
    }


    .fa-arrow-circle-right {
        padding-top: 0.15rem;
        font-size: 1.7rem;
        color: white;
    }

    .fa-arrow-circle-right:hover {
        color: var(--blue3);
    }


    /* PAGE 1 | MAP */

    #map-section {
        margin: 4rem auto 1rem auto;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #state-map-note-cont {
        max-width: 90rem;
        margin-bottom: 0rem;
        background: var(--gray1);
        padding: 1rem 1rem 0rem 1rem;
    }

    .state-map-note-value {
        font-size: 1.4rem;
        line-height: 2.4rem;
        text-align: center;
    }

    .pro-crypto-text {
        text-wrap: nowrap;
        background: var(--strongly-pro);
        color: var(--white);
        border-radius: 0.5rem;
        padding: 0rem 0.3rem 0.2rem 0.3rem;
    }

    .anti-crypto-text {
        text-wrap: nowrap;
        background: var(--strongly-anti);
        color: var(--white);
        border-radius: 0.5rem;
        padding: 0rem 0.3rem 0.2rem 0.3rem;
    }

    #chartdiv {
        width: 100%;
        height: 30rem;
        pointer-events: all;
        margin-top: 0rem;
    }

    #chartdiv:hover {
        cursor: pointer;
    }



    /* PAGE 2: SENTIMENT INSIGHTS */

    #page2 {
        width: 100vw;
        height: 100vh;
        max-height: 90rem;
        margin-bottom: 15vh;
    }

    .page-title-cont {
        margin-bottom: 5rem !important;
    }


    /* PAGE 2 | KPI STATS */

    #kpi-stat-section {
        width: 77%;
        margin: 7rem auto 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .kpi-cont {
        background: var(--gblue4);
        padding: 0rem;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 6rem;
        border: 1px solid white
    }

    .kpi-value,
    .kpi-text {
        color: white;
        text-align: center;
        color: rgba(255, 255, 255, 0.95);
        text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
    }

    .kpi-value {
        font-size: 3.5rem;
        width: 40%;
        font-weight: bold;
    }

    .kpi-text {
        font-size: 1.25rem;
        text-align: left;
        width: 55%;
    }

    .stats-section-kpi-date-text {
        margin: 0.5rem auto 6rem auto;
        width: 100%;
        text-align: center;
        font-size: 1rem;
        font-style: italic;
    }

    .kpi-date-span {
        font-style: normal;
        font-weight: bold;
        background-color: var(--gray1);
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }

    /* PAGE 2 | WRAPPER */

    .wrapper {
        margin: 0 auto;
        height: 50rem;
        max-width: 98vw;
        width: 95%;
        height: 50rem;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .stats-logo {
        display: none;
        height: 3rem;
        position: absolute;
        transform: translate(1400%, 43.5rem);
        z-index: 10;
    }

    .tabs {
        display: flex;
        justify-content: center;
        position: relative;
        margin: 3rem 0;
        width: 100%;
        height: 47rem;
    }

    .tabs::before,
    .tabs::after {
        content: "";
        display: table;
    }

    .tabs::after {
        clear: both;
    }

    .tab {
        float: left;
    }

    .tab-switch {
        display: none;
    }

    .tab-label {
        position: relative;
        display: block;
        line-height: 3.5rem;
        height: 3.5rem;
        padding: 0rem 0.5rem;
        background: var(--gblue4);
        color: white;
        border-right: 0.2rem solid white;
        cursor: pointer;
        top: 0;
        transition: all 0.35s;
        width: 7rem;
        text-align: center;
        font-size: 1.2rem;
        z-index: 5;
    }

    .tab-label:hover {
        top: -0.4rem;
        transition: top 0.35s;
    }

    .tab-content {
        position: absolute;
        z-index: 1;
        top: 2.75rem;
        left: 0;
        padding: 1.618rem;
        opacity: 0;
        background: var(--ggray1);
        transition: all 0.35s;
        width: 100%;
        height: 45rem;
        border: 1px solid var(--gray5)
    }

    .tab-switch:checked+.tab-label {
        background: linear-gradient(45deg, var(--cyan2) 1%, var(--cyan2) 88%, var(--blue3) 98%);
        color: var(--blue4);
        border-right: 0.2rem solid #fff;
        transition: all 0.35s;
        z-index: 5;
        top: -0.0625rem;
        border-radius: 0rem 0rem 0 0;
    }

    .tab-switch:checked+label+.tab-content {
        z-index: 2;
        opacity: 1;
        transition: all 0.35s;
    }


    /* PAGE 2 - TAB 1 - CONGRESS */

    #summary-data-cont {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin: 0;
    }

    #summary-level1-cont,
    #summary-level2-cont,
    #summary-level3-cont {
        width: 100%;
    }

    #summary-level1-cont {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin: 0;
    }

    .h3-cont h3 {
        z-index: 5
    }

    #us-avg {
        width: 100%;
        min-width: 15rem;
        max-width: 30rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        gap: 1.5rem;
        margin: 0;
        padding-bottom: 5.5rem;
        padding-top: 3rem;
    }

    .stats-capitol {
        position: absolute;
        height: 14rem;
        transform: translate(21%, 0);
    }

    .congr-sent-label h3 {
        font-size: 1.6rem !important;
    }

    #congress-avg {
        height: 3.5rem;
        width: 50%;
        min-width: fit-content;
        max-width: 25rem;
        margin: 0% auto;
        padding: 0.1rem 1rem 0.2rem 1rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: var(--white);
        font-size: 2rem;
        font-style: bold;
        box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.2);
        border: 0.1rem solid var(--gray5);
        border-radius: 2rem;
        cursor: default;
        z-index: 2;
    }

    .border-outline {
        border-bottom: 0rem solid transparent;
        border-top: 0rem solid transparent;
        border-left: 0rem solid transparent;
        border-right: 0rem solid var(--gray2);
        height: 0.2rem;
        width: 100%;
        background: var(--ggray3);
        margin: auto 0rem auto 0rem;
        vertical-align: none;
    }

    #demrep-content {
        width: 100vw;
        height: 65%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0 0 0 0;
        background: transparent;
        bottom: 0;
    }

    .demrep-border {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 90%;
        min-width: 30rem;
        max-width: 40rem;
        height: 70%;
        min-height: 28rem;
        margin: auto;
    }

    #demrep-content h2 {
        text-align: center;
    }

    .range-label {
        font-weight: bold;
        font-size: 1.6rem;
        text-align: center;
    }

    .range-label span {
        font-size: 1rem;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .party-avg-label {
        margin-top: 3.5rem;
    }

    .chamber-avg-label {
        margin-bottom: 3.5rem;
    }

    .text-note {
        font-size: 1.2rem;
        width: 65%;
        margin: 1rem auto 0 auto;
        font-style: italic;
        line-height: 1.7rem;
        text-align: center
    }

    .map-legend {
        width: 95%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 0% auto;
    }

    .gradient-container {
        display: flex;
        align-items: center;
        position: relative;
        margin: 0 1rem;
        width: 100%;
    }

    .gradient {
        width: 100%;
        height: 1.3rem;
        background: linear-gradient(90deg, var(--strongly-anti) 5%, var(--strongly-pro) 90%);
        z-index: 1;
        box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.2);
        border: 0.1rem solid var(--gray5);
        border-radius: 2rem;
    }

    .map-legend {
        margin-top: 2rem;
        margin-bottom: 4.5rem;
    }

    .map-legend .label {
        font-size: 150%;
    }

    .label-dems span,
    .label-reps span {
        font-size: 1.2rem;
        padding: 15% 20% 15% 20%;
        border-radius: 0.5rem;
        color: white !important;
    }

    .label-dems span {
        margin-left: -48%;
    }

    .label-reps span {
        margin-left: -38%;
    }

    .house-logo-text,
    .senate-logo-text {
        display: flex;
        flex-direction: column;
        width: 4rem;
        margin-left: -54%
    }

    .house-logo-text span {
        padding-left: 1.5rem;
    }

    .arrow.dems,
    .arrow.reps {
        position: absolute;
        top: -3.5rem;
        width: 2rem;
        height: 3rem;
        text-align: center;
        font-weight: bold;
    }

    .arrow.house,
    .arrow.senate {
        position: absolute;
        top: 1.6rem;
        width: 2rem;
        height: 3rem;
        text-align: center;
        font-weight: bold;
    }

    .label-senate img,
    .label-house img {
        height: 4rem;
    }

    .arrow .label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .arrow.dems {
        left: calc((var(--dems-pos) - 1) / 10 * 100%);
        transform: translateX(-50%);
    }

    .arrow.reps {
        left: calc((var(--reps-pos) - 1) / 10 * 100%);
        transform: translateX(-50%);
    }

    .arrow.house {
        left: calc((var(--house-pos) - 1) / 10 * 100%);
        transform: translateX(-50%);
    }

    .arrow.senate {
        left: calc((var(--senate-pos) - 1) / 10 * 100%);
        transform: translateX(-50%);
    }

    .arrow.dems .label,
    .dems-text,
    .label-dems span {
        background-color: var(--dems);
    }

    .arrow.reps .label,
    .reps-text,
    .label-reps span {
        background-color: var(--reps);
    }

    .arrow .fa-arrow-down {
        font-size: 1.5rem;
        margin-top: 0.4rem;
    }

    .arrow .fa-arrow-up {
        font-size: 1.5rem;
    }

    .label {
        font-weight: bold;
    }

    .label.anti {
        color: var(--strongly-anti);
    }

    .label.pro {
        color: var(--strongly-pro);
    }


    /* PAGE 2 - TAB 2 | PARTIES */

    .congress-sentiment-detail-cont {
        display: flex;
        flex-direction: column;
        height: 100%;
        margin: auto;
    }

    #politicians-chart {
        margin: 1.5rem auto auto auto
    }

    .sentiment-by-party-count-text {
        padding: 0.8rem;
        margin-bottom: 2.5rem;
    }

    .y.axis {
        display: none;
    }

    .x.axis {
        font-size: 0.9rem;
    }

    .strongly-pro {
        color: var(--strongly-pro);
    }

    .slightly-pro {
        color: var(--slightly-pro);
    }

    .neutral {
        color: var(--neutral);
    }

    .slightly-anti {
        color: var(--slightly-anti);
    }

    .strongly-anti {
        color: var(--strongly-anti);
    }

    .axis text {
        padding: 0.3rem;
    }

    .axis .tick {
        pointer-events: none;
    }

    .axis path,
    .axis line {
        display: none;
    }

    .bar-cont {
        border-radius: 1rem;
    }

    .bar-text {
        fill: white;
        font-size: 0.8rem;
        font-weight: bold;
    }

    .gradient-bar {
        height: 0.4rem;
    }

    .key-message {
        display: none;
        font-size: 1.6rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 0rem;
    }

    .key-message-mobile {
        line-height: 2.1rem;
    }

    .key-message-mobile span {
        display: block;
        font-size: 1.6rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 0rem;
    }

    .key-message-sub {
        display: none;
        font-size: 1.25rem;
        text-align: center;
    }

    .key-message-sub-mobile {
        display: block;
        font-style: italic;
        font-size: 1.2rem;
        text-align: center;
        margin-top: 4rem;
    }


    /* PAGE 2 - TAB 3 | LEGISLATION */

    #legislation-section {
        display: flex;
        flex-direction: column;
        gap: 1%;
        margin: 0rem auto 0 auto;
        padding-top: 1rem;
        height: 100%;
        width: 100%;
    }

    .legislation-intro-text {
        display: none;
        font-size: 1.3rem;
        font-weight: bold;
        width: 95%;
        text-align: center;
        margin: 0 auto;
    }

    .legislation-total {
        font-size: 1.4rem;
        font-style: bold;
        padding: 0.1rem 0.4rem 0.1rem 0.5rem;
        background-color: white;
        color: var(--blue4);
        border-radius: 0.4rem;
    }

    .leg-chart-table-cont {
        display: flex;
        flex-direction: column;
        gap: 3%;
        margin: 0rem auto 0 auto;
        padding-top: 0rem;
        height: 100%;
        width: 100%;
    }

    #leg-chart-filter-cont {
        display: flex;
        justify-content: center;
    }

    .filter-label {
        font-size: 1.2rem;
        font-size: bold;
        text-align: center;
        margin-bottom: 0.3rem;
        text-decoration: underline;
    }

    .filter-cont {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 23%
    }

    .leg-filter {
        width: 100%;
    }

    select {
        text-align: center;
    }

    .clear-filter {
        color: blue;
        margin-top: 0.4rem;
        margin-left: 2rem;
        font-size: 1.1rem;
    }

    .clear-filter:hover {
        text-decoration: underline;
        cursor: pointer;
    }

    #leg-chart-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 0rem;
    }

    .leg-x-axis {
        font-size: 0.9rem;
        font-weight: bold;
    }

    .leg-x-axis path {
        display: none;
    }

    .leg-bar {
        fill: var(--blue4);
    }

    .leg-bar-text {
        font-size: 1.3rem;
        font-weight: bold;
    }

    .no-data-message {
        font-size: 1.8rem;
    }


    /* PAGE 2 - TAB 3 | LEGISLATION FILTER TABLE */

    #leg-table-section {
        width: 100%
    }

    #leg-table-container {
        width: 100%;
        height: 15rem;
        overflow-y: auto;
        overflow-x: hidden;
        border-bottom: 1px solid var(--gray4);
        display: flex;
        flex-direction: column;
    }

    #legislation-table {
        width: 100%;
        table-layout: fixed;
        overflow: scroll;
        border-collapse: collapse;
    }

    .default-message {
        font-size: 1.5rem;
        text-align: center;
        padding-top: 10rem;
        font-size: bold;
        font-style: italic;
    }

    .fa-arrow-left-long {
        font-size: 2.4rem;
    }

    .no-data-cell {
        font-size: 1.5rem;
        text-align: center;
        padding-top: 7rem;
        font-size: bold;
    }

    #legislation-table thead {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--gray2);
    }

    #legislation-table th {
        color: var(--blue4);
        padding: 0.3rem;
        font-size: 1.25rem;
        font-weight: bold;
    }

    .leg-title {
        width: 100%;
        text-align: left;
        padding-left: 0.3rem;
    }

    .leg-introduced {
        display: "none" !important;
    }

    .legislation-row {
        line-height: 2.4rem;
    }

    .legislation-row:nth-child(even) {
        background-color: var(--gray2);
    }

    .leg-introduced-cell {
        display: none;
        text-align: center;
        font-size: 1.1rem;
    }

    .leg-title-cell {
        display: block;
        font-size: 1.1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 84vw;
        padding-left: 0.3rem;
        cursor: pointer;
    }

    .leg-title-cell:hover {
        color: blue;
        text-decoration: underline;
    }

    .filtered-values-displayed-cont {
        margin: 0.7rem 20% 0 0%;
        width: 80%;
        display: flex;
        gap: 2%;
    }

    .filtered-values-label {
        font-size: 1.2rem;
        font-weight: bold;
        text-decoration: underline;
    }

    .filtered-values {
        font-size: 1.2rem;
    }

    /* PAGE 2 - TAB 4 | CATEGORIES */

    #category-section {
        overflow: scroll;
        height: 98%;
    }

    .category-intro-text {
        width: 95%;
        margin: 1rem auto 0rem auto;
        font-size: 1.4rem;
    }

    .category-chart-cont {
        display: flex;
        flex-direction: column;
        padding: 2rem 1rem 0rem 1rem;
        width: 100%;
        gap: 4rem;

    }

    .category-bars-cont {
        width: 100%;
    }

    .category-bar {
        display: flex;
        margin-bottom: 0.7rem;
        align-items: center;
    }

    .category-bar-label {
        width: 17rem;
        font-size: 1.15rem;
        font-weight: normal;
        background: var(--gray3);
        padding: 0.1rem 0rem 0rem 0.1rem
    }

    .category-bar-count {
        padding: 0.1rem 0.5rem 0.1rem 0.2rem;
        text-align: right;
        font-size: 1.1rem;
    }

    .category-bar:hover {
        cursor: pointer;
        opacity: 0.6;
    }


    /* Background and text color classes */
    .bar-high-count {
        background: var(--gblue4);
        color: white;
    }

    .bar-medium-count {
        background: var(--gblue3);
        color: white;
        opacity: 0.8;
    }

    .bar-low-count {
        background: var(--gblue2);
        color: white;
        opacity: 0.6;
    }

    .category-table-header {
        font-size: 1.8rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 1rem;
        color: var(--blue4)
    }


    .category-table {
        border: 1px solid var(--gray5);
        transition: opacity 0.5s ease;
        width: 100%;
        max-width: 35rem;
        max-height: 26rem;
        table-layout: fixed;
        overflow-y: scroll;
        border-collapse: collapse;
    }

    .category-table.visible {
        display: block;
        opacity: 1;
    }

    .category-table thead {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--gray2);
        width: 100%;
    }

    .category-table th {
        text-align: left;
        font-size: 1.25rem;
        font-weight: bold;
        color: var(--blue4);
    }

    .category-table td {
        font-size: 1.15rem;
    }


    .category-table th,
    .category-table td {
        padding: 0.2rem 0 0.5rem 0.5rem;
        vertical-align: top;
    }

    .category-table th.category-leg-number,
    .category-table td:nth-child(1) {
        width: 18%;
        min-width: 6.5rem;
        cursor: default;
    }

    .category-table th.category-leg-title,
    .category-table td:nth-child(2) {
        width: 82%;
        min-width: 25rem;
        cursor: default;
    }

    .category-table td:nth-child(2):hover {
        color: blue;
        text-decoration: underline;
        cursor: pointer;
    }


    /* PAGE 2 - TAB 5 | COVERAGE */

    #coverage-section {
        margin: 0rem 0 0 0;
        padding-top: 0.5rem;
        height: 100%;
        width: 100%;
    }

    #congress-member-count-cont {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 3%;
        margin: 0rem auto 0 auto;
    }

    #congress-member-count {
        height: 7rem;
        width: 30%;
        margin: 0.5rem auto 1rem auto;
        padding: 0.1rem 2rem 0.6rem 2rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: var(--blue4);
        background: white;
        font-size: 3rem;
        font-style: bold;
        -webkit-box-shadow: 3px 3px 3px 0px var(--gray4);
        box-shadow: 4px 4px 5px 0px var(--gray4);
        border-top: 1rem solid var(--gray4);
        cursor: default;
        text-shadow: none;
    }

    .congress-members-rated-label {
        text-align: left;
        font-size: 1.2rem;
    }

    .congress-members-rated-label span {
        color: var(--blue4);
        font-weight: bold;
        background-color: white;
        padding: 0rem 0.5rem 0rem 0.5rem;
        border-radius: 0.5rem;
        font-size: 1.3rem;
    }

    .congress-progress-cont {
        display: flex;
        width: 100%;
        justify-content: space-around;
        margin: 2rem auto 0 auto;
        gap: 5%;
        min-height: 18rem;
    }

    .chamber-progress-section,
    .party-progress-section {
        width: 100%;
    }

    .chamber-progress-section {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .congress-progress-cont .progress-bars {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 6%;
    }

    .congress-progress-cont .progress-info {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .party-progress-section {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .party-progress-section .progress-bars {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .chamber-progress-cont,
    .party-progress-cont {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem;
    }

    .coverage-party-cont {
        display: flex;
        align-items: center;
        gap: 4%;
    }

    .coverage-party-icon {
        height: 1.5rem;
        width: 2.5rem;
        border-radius: 0.3rem;
    }

    .coverage-party-icon.dems {
        background-color: var(--dems)
    }

    .coverage-party-icon.reps {
        background-color: var(--reps)
    }

    .coverage-party-icon.inds {
        background-color: var(--inds)
    }

    .party-name {
        font-size: 1.4rem;
        font-weight: bold;
        padding-bottom: 0.2rem;
    }

    .bar-chamber-label {
        font-size: 1.6rem;
        font-weight: bold;
    }

    .bar-percent-label {
        font-size: 1.3rem;
        font-weight: bold;
    }

    .progress-bars img {
        height: 3.5rem;
        margin-top: 0.8rem;
    }

    .congress-progress-cont .line {
        height: 2rem;
        width: 100%;
        background: var(--gray1);
        position: relative;
        border-radius: 0.5rem 1.3rem 1.3rem 0.5rem;
        border: 1.5px solid var(--gray5);
        display: flex;
        align-self: center;
    }

    .congress-progress-cont .line::before {
        position: absolute;
        height: 1.8rem;
        background: var(--blue4);
        color: white;
        border-radius: 0.5rem 1.3rem 1.3rem 0.5rem;
        text-align: right;
        padding-right: 3%;
        padding-top: 0.1rem;
        font-size: 1.2rem;
    }



    /* PAGE 3 | RECENT EVENTS */

    #rec-events-fancy-header {
        line-height: 0.8rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .last-3-months {
        font-size: 1.1rem;
        font-weight: normal;
        margin-top: 0.3rem;
    }

    #page3 {
        margin-bottom: 10rem;
    }

    #rec-events-sec {
        padding-top: 4rem;

    }

    .rec-event-intro {
        width: 85%;
        margin: 0 auto;
        padding: 0rem;
    }

}