@media (max-width: 768px) {

    * {
        /border: 1px solid black;

    }

    body {
        background-image: url("../assets/us-flag.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .body-contain {
        padding-bottom: 5rem;
    }

    #title-cont h1 {
        font-size: 2.2rem;
    }

    #title-cont h3 {
        font-size: 1.4rem;
    }

    #title-cont h1,
    #title-cont h3 {
        margin: 0rem auto !important;
        text-align: center;
        width: 100%;
    }

    #page-title-cont {
        display: flex;
        flex-direction: column;
        margin-top: 3rem;
        margin-bottom: 1rem !important;
        width: 100%;
    }

    .header-cont {
        width: 100%
    }

    #header-cont3 {
        display: flex;
        justify-content: right;
        padding-right: 0rem;
    }

    #title-cont {
        margin: 0rem auto;
    }

    #senate-seal {
        height: 5rem;
        width: 5rem;
        margin: 1rem auto 2rem auto;
    }

    .tabcontent {
        width: 95%;
        margin: 2rem auto 0rem auto
    }

    .tabcontent p {
        font-size: 1.55rem;
        ;
    }

    .tab-text-highlight {
        background: var(--gray2);
        font-weight: bold;
        padding: 0 0.5rem 0 0.5rem;
    }



    /* TABS */

    #senate-page-tab-cont {}

    .page-tab-button {
        width: 33.33333%;
        font-size: 1.4rem !important
    }

    .tabcontent {
        display: none;
        padding: 0.3rem 0.8rem;
    }

    /* TAB1 :SUMMARY [VACANT] */

    #senate-page-tab-cont button[data-tab="senate-tab1"],
    #senate-tab1 {
        display: none;
    }

    #senate-tab1 {
        display: none;
    }


    /* TAB 2: SENATE RACES */

    #senate-tab3 {
        width: 95%;
        margin: 2.5rem auto 0 auto;
        overflow: hidden;
    }

    .state-search-cont {
        width: 90%;
        margin: auto;
    }

    .state-search-cont h3 {
        font-size: 2.4rem;
    }

    .search-label {
        margin: 0.5rem 0 2rem 0;
        font-size: 1.4rem !important;
        line-height: 2rem;
    }

    .districts-search-section {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .selector-wrappers {
        display: flex;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .state-selector-wrapper {
        width: 20rem;
    }


    #state-district-contain {
        background: var(--gblue4);
        color: white;
        padding-top: 1.2rem;
        border: 3px inset var(--gray3);
        display: flex;
        width: 100%;
        height: 45rem;
        align-items: center;
        justify-items: center;
    }

    .state-district-contain-cover {
        color: white;
        text-align: center;
        width: 85%;
        font-size: 2.2rem !important;
        line-height: 3.2rem;
    }

    .no-district-data,
    .no-state-election {
        display: none;
        color: white;
        font-size: 2.2rem !important;
        line-height: 3rem;
        text-align: center;
        margin: 0 auto;
        width: 85%;
    }

    .no-district-data-sign,
    .no-election-data-sign {
        padding: 0.5rem 2rem 0.5rem 2rem;
        margin-bottom: 2rem;
        font-size: 3rem !important;
    }

    .no-district-data-sign {
        background: var(--blue5);
        color: var(--cyan2);
    }

    .no-election-data-sign {
        background: var(--gray2);
        color: red;
    }

    #loadingSpinner {
        margin: 0 auto;
    }

    #state-data-contain {
        display: none;
        width: 100%;
        padding-left: 0rem;
        margin: 0 auto;
    }

    #state-district-title {
        margin: 0.5rem 0 2rem 0;
        color: white;
        text-align: center;
    }

    .district-tab-table {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: left;
        justify-content: center;
        overflow-y: scroll;
        padding-bottom: 3rem;
        gap: 4rem;
        height: 39rem;
        width: 100%;
        margin: auto;
    }

    .district-tab-rows-cont {
        display: flex;
        flex-direction: column;
        max-width: 24rem;
        width: 100%;
        border: 3px inset var(--gray3);
        height: 36rem;
        overflow: hidden;
        margin-bottom: 0rem;
    }

    .district-tab-rows {
        display: flex;
        padding: 0.7rem 1.5rem 0.7rem 1.5rem;
        background-color: white;
    }

    .district-pol-name-cont {
        height: 39%;
        display: flex;
        flex-direction: column;
        border-bottom: 2px solid var(--gray3);
        width: 100%;
    }

    .district-pol-name-sec {
        display: flex;
        width: 100%;
    }

    .district-pol-img {
        height: 5rem;
        border-radius: 0.5rem;
        margin-right: 0.5rem;
    }

    .district-pol-name-party {
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    .district-pol-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: -1px;
        font-size: 1.7rem;
        text-align: left;
        font-weight: bold;
        margin: 0.1rem 0 0.1rem 0;
        width: 95%;
    }

    .district-pol-party-status-cont {
        display: flex;
        align-items: center;
        margin: 0.1rem auto 0 auto;
        padding: 0rem 0rem 0.8rem 0.1rem;
        width: 100%;
    }

    .district-pol-party-cont {
        display: flex;
    }

    .district-pol-party-color {
        padding: 0.05rem 0.4rem 0.1rem 0.4rem;
        margin: auto 0.25rem auto 0;
        font-size: 1rem;
        font-weight: bold;
        color: white;
        border-radius: 0.5rem;
        height: 90%;
        min-width: 1.5rem;
        text-align: center;
        background-color: var(--metal);
    }

    [data-district-pol-party-color='D'].district-pol-party-color {
        background-color: var(--dems);
    }

    [data-district-pol-party-color='R'].district-pol-party-color {
        background-color: var(--reps);
    }

    [data-district-pol-party-color='I'].district-pol-party-color {
        background-color: var(--inds);
    }

    [data-district-pol-party-color='G'].district-pol-party-color {
        background-color: var(--grns);
    }

    .district-pol-party {
        font-size: 1.1rem;
    }

    .district-div {
        font-size: 1.3rem;
        margin: 0 0.3rem 0 0.2rem;
        padding-bottom: 0.2rem;
    }

    .district-pol-position {
        padding: 0rem 0.6rem 0.1rem 0.6rem;
        font-size: 1.1rem;
        width: fit-content;
    }

    [data-district-pol-position='Incumbent'].district-pol-position {
        background: var(--gblue4);
        color: white;
        opacity: 0.9;
    }

    [data-district-pol-position='Candidate'].district-pol-position {
        background: var(--cyan2);
        color: var(--blue4);
        border: 1px solid var(--blue4)
    }

    .district-sentiment-cont {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 1.2rem;
    }

    .district-sentiment-label {
        text-align: center;
        font-size: 1.2rem;
        text-decoration: underline;
        margin-bottom: 0.4rem;
    }

    .district-sentiment-value {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin: 0rem auto 0 auto;
        font-size: 1.4rem;
        height: 2.8rem;
        width: 12.5rem;
        border-radius: 0rem;
        color: white;
        padding: 0 0.5rem 0 0.5rem;
    }

    .district-latest-event-cont {
        height: 46%;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding-top: 0.8rem;
        padding-bottom: 1.1rem;

    }

    .district-latest-event-label {
        text-align: center;
        font-size: 1.5rem;
        font-size: bold;
        text-decoration: underline;
    }

    .district-latest-event-quote {
        text-align: center;
        font-size: 1.2rem;
        padding-top: 0.5rem;
        padding-bottom: 0.3rem;
        margin-bottom: 0.5rem;
    }

    .district-latest-event-date {
        text-align: center;
        font-size: 1rem;
        color: var(--blue3);
        font-style: italic;
        margin-bottom: 0.5rem;
    }

    .district-div1 {
        border-bottom: 2px solid var(--gray3);
    }

    .district-write-letter-cont {
        height: 15%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .district-write-letter-cont button {
        min-width: 13rem;
        font-size: 1.3rem;
    }

    .fa-pen {
        color: white;
        font-size: 1.1rem;
    }

    .pol-profile-write-cont {
        padding: 0.5rem 1rem 0.5rem 1rem;
    }

    #write-icon {
        margin-right: 0.5rem;
        color: white
    }


    /* pol sentiment info */
    .result-pol-sentiment-contain {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.8rem;
    }

    .result-pol-sentiment-label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        white-space: nowrap;
    }

    .result-pol-sentiment-val {
        margin-top: -0.02rem;
        font-size: 1.5rem;
        padding: 0rem 0.7rem 0.1rem 0.7rem;
        height: 2.2rem;
        width: 14rem;
        border-radius: 1rem;
        color: white;
        box-shadow: 0 0.2rem 1rem 0rem rgba(0, 0, 0, 0.2);
        border: 0.1rem solid var(--light-brown);
        text-align: center;
    }

    [data-result-pol-sentiment='Strongly Pro'] {
        background-color: var(--strongly-pro);
    }

    [data-result-pol-sentiment='Slightly Pro'] {
        background-color: var(--slightly-pro);
    }

    [data-result-pol-sentiment='Neutral'] {
        background-color: var(--neutral);
    }

    [data-result-pol-sentiment='Slightly Anti'] {
        background-color: var(--slightly-anti);
    }

    [data-result-pol-sentiment='Strongly Anti'] {
        background-color: var(--strongly-anti);
    }

    [data-result-pol-sentiment='Not enough data'] {
        background-color: var(--not-enough-data);
    }


    /* TAB3: SEATS */


    /* TAB3 - TABLE HEADER */



    #senate-tab3 {
        width: 95%
    }

    .seats-tab-intro,
    .seats-tab-intro span {
        font-size: 1.4rem !important;
        line-height: 1.9rem;
    }

    #state-table-cont {
        margin-top: 3rem !important;
        display: flex;
        justify-content: center;
        margin: 0rem auto;
        width: 100%;
        max-width: 130rem;
        max-height: 60vh;
        overflow-y: scroll;
        background: white;
    }

    #state-table-wrapper {
        width: 100%;
        background: white;
    }


    #state-table {
        margin: 0 auto;
        width: 100%;
        border-collapse: collapse;
    }

    #state-table-header-cont {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--gblue3) !important;
        line-height: 2.5rem;
    }


    .table-header {
        font-size: 1.15rem;
        font-weight: bold;
        padding: 0.2rem;
        line-height: 1.8rem;
    }

    #state-name {
        width: 10%;
        text-align: left;
        padding-left: 0.4rem;
    }

    #districts {
        display: none;
        width: 10%;
    }

    #state-sentiment {
        width: 35%;
    }

    #candidates-sentiment {
        width: 35%;
    }

    #flip-opportunity {
        width: 25%;
    }

    /* TAB3 - TABLE ROWS */

    .table-rows {
        font-size: 1.15rem;
        line-height: 2.4rem;
        padding: 0.4rem;
    }

    tbody tr:nth-child(even) {
        background-color: var(--gray1);
    }

    tbody tr:nth-child(odd) {
        background-color: white;
    }

    .state-rows {
        font-size: 1.15rem;
        font-weight: bold;
    }

    .district-rows,
    .sentiment-rows,
    .flip-opportunity-rows {
        text-align: center;
    }

    .district-rows {
        display: none;
    }

    .flex-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .candidates-sentiment-rows {
        text-align: center;
    }

    .senate-sentiment-rows {
        text-align: center;
    }

    .senate-sentiment-inner,
    .candidates-sentiment-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 1rem;
        height: 2.2rem;
        width: 80%;
        max-width: 15rem;
        border-radius: 0.8rem;
        color: white;
        box-shadow: 0 0.2rem 1rem 0rem rgba(0, 0, 0, 0.2);
        border: 0.1rem solid var(--gray2)
    }

    [data-senate-sentiment='Strongly Pro'] .senate-sentiment-inner,
    [data-candidates-sentiment='Strongly Pro'] .candidates-sentiment-inner,
    [data-district-sentiment-value='Strongly Pro'].district-sentiment-value {
        background-color: var(--strongly-pro);
    }

    [data-senate-sentiment='Slightly Pro'] .senate-sentiment-inner,
    [data-candidates-sentiment='Slightly Pro'] .candidates-sentiment-inner,
    [data-district-sentiment-value='Slightly Pro'].district-sentiment-value {
        background-color: var(--slightly-pro);
    }

    [data-senate-sentiment='Neutral'] .senate-sentiment-inner,
    [data-candidates-sentiment='Neutral'] .candidates-sentiment-inner,
    [data-district-sentiment-value='Neutral'].district-sentiment-value {
        background-color: var(--neutral);
    }

    [data-senate-sentiment='Slightly Anti'] .senate-sentiment-inner,
    [data-candidates-sentiment='Slightly Anti'] .candidates-sentiment-inner,
    [data-district-sentiment-value='Slightly Anti'].district-sentiment-value {
        background-color: var(--slightly-anti);
    }

    [data-senate-sentiment='Strongly Anti'] .senate-sentiment-inner,
    [data-candidates-sentiment='Strongly Anti'] .candidates-sentiment-inner,
    [data-district-sentiment-value='Strongly Anti'].district-sentiment-value {
        background-color: var(--strongly-anti);
    }

    [data-senate-sentiment='Not enough data'] .senate-sentiment-inner,
    [data-candidates-sentiment='Not enough data'] .candidates-sentiment-inner,
    [data-district-sentiment-value='Not enough data'].district-sentiment-value {
        background-color: var(--not-enough-data);
    }

    .flip-value-cont {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.8rem;
    }

    .flip-value {
        color: white;
        border-radius: 0.5rem;
        width: 2.8rem;
        height: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flip-anti {
        background-color: var(--strongly-anti)
    }

    .flip-pro {
        background-color: var(--strongly-pro)
    }

    .flip-value-no-background {
        background-color: transparent;
    }



    /* TAB 4: Retirements */


    #retirements-cont {
        width: 100%;
        margin: 3rem auto 0 auto;
        overflow-y: scroll;
        max-height: 60vh;
        background: white;
    }

    .retirement-header {
        text-align: center;
        vertical-align: middle;
        padding-top: 1rem;
        height: 5rem;
        background: var(--gblue3);
        color: white;
    }

    .ret-tab-intro,
    .ret-tabe-intro span {
        font-size: 1.4rem !important;
        line-height: 1.9rem;
    }


    /* END-OF-TERM-RETIREMENTS */

    .end-term-retirements-table {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
        width: 98%;
    }

    .end-term-header-row {
        margin-top: 1rem;
        margin-bottom: 0.5rem !important;
        border: none !important;
        text-decoration: underline;
        font-weight: bold;
    }


    .end-term-retirements-table div.end-term-retirement-entry {
        display: flex;
        align-items: center;
        padding: 0.5rem;
        border-bottom: 1px solid var(--gray2);
        margin-bottom: 0rem;
    }

    .end-term-retirement-entry>div {
        display: flex;
        align-items: center;
        font-size: 1.1rem;
    }

    .end-term-state-district-cont {
        width: 10%;
        min-width: 4.5rem;
    }

    .end-term-pol-state {
        padding-right: 2%;
    }

    .end-term-district-separator {
        padding-bottom: 0.2rem;
    }

    .end-term-pol-district {
        padding-left: 2%;
        font-size: 1.1rem;
    }

    .end-term-pol-cont {
        width: 14rem !important;
    }

    .end-term-pol-party {
        padding: 0.1rem;
        color: white;
        font-size: 1.1rem;
        width: 1.8rem;
        text-align: center;
        border-radius: 0.3rem;
        margin-right: 0.5rem;
    }

    [data-end-term-pol-party='D'].end-term-pol-party {
        background-color: var(--dems);
    }

    [data-end-term-pol-party='R'].end-term-pol-party {
        background-color: var(--reps);
    }

    [data-end-term-pol-party='I'].end-term-pol-party {
        background-color: var(--inds);
    }

    [data-end-term-pol-party='G'].end-term-pol-party {
        background-color: var(--grns);
    }

    .end-term-pol-name {
        width: 100%;
        margin-left: 0.1rem;
    }

    .end-term-pol-name:hover {
        cursor: pointer;
        text-decoration: underline;
        color: blue;
    }

    .end-term-pol-sentiment-cont {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .end-term-pol-sentiment {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        color: white;
        min-width: 7rem;
        border-radius: 0.8rem;
        border: 0.1rem solid var(--gray5);
        font-size: 0.8rem;
        padding: 0.1rem 0rem 0.1rem 0rem;
    }


    [data-end-term-sentiment='Strongly Pro'].end-term-pol-sentiment {
        background-color: var(--strongly-pro);
    }

    [data-end-term-sentiment='Slightly Pro'].end-term-pol-sentiment {
        background-color: var(--slightly-pro);
    }

    [data-end-term-sentiment='Neutral'].end-term-pol-sentiment {
        background-color: var(--neutral);
    }

    [data-end-term-sentiment='Slightly Anti'].end-term-pol-sentiment {
        background-color: var(--slightly-anti);
    }

    [data-end-term-sentiment='Strongly Anti'].end-term-pol-sentiment {
        background-color: var(--strongly-anti);
    }

    [data-end-term-sentiment='Not enough data'].end-term-pol-sentiment {
        background-color: var(--not-enough-data);
    }

    .end-term-date-announced-cont {
        display: none !important;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        width: 20%;
    }

    .end-term-date-announced {
        display: none;
    }

    .end-term-impact-cont {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: auto;
        text-align: center;
        font-size: 1.1rem !important;
        width: 20%;
    }

    .end-term-impact-value {
        padding: 0.4rem 0.4rem 0.4rem 0.4rem;
        color: white;
        border-radius: 0.3rem;
        text-align: center;
        font-weight: bold;
        width: 75%;
    }

    [data-end-term-change-impact='+ Pro'].end-term-impact-value {
        background-color: var(--strongly-pro);
    }

    [data-end-term-change-impact='+ Anti'].end-term-impact-value {
        background-color: var(--strongly-anti);
    }

    [data-end-term-change-impact='Both'].end-term-impact-value {
        background: var(--sentiment-range);
    }

    [data-end-term-change-impact='None'].end-term-impact-value {
        background-color: var(--not-enough-data);
    }
}