@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('lovelo/stylesheet.css');

@font-face {
    font-family: 'Raleway';
    src: url('TTFs/Raleway-Regular.ttf');
}

html, body {
    font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #222;
    color: #ccc;
    margin: 0px;
}

html {
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    font-size: 1.1rem;
}

table {
    font-size: 1rem;
}

th, td {
    font-size: 1rem;
}

.snackbar-stack {
    z-index: 2000;
}

.hidden{
    display: none;
}

/* main layout */

.main-header {
    background-color: #343a40;
}

.main-content {
    /* padding: 1rem 1rem 4.5rem 1rem; */
    padding: 0 0 4.5rem 0;
    xfont-size: 1.1em;
    /* background-color: rebeccapurple; */
    /* text-align: center; */
    padding-bottom: 3em;
}

.main-footer {
    padding: 0 1rem;
    font-size: 1.2rem;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    background-color: #343a40;
    height: 2.75em;
    height: 2.25em;
}

.main-footer-left {
    /* padding: 0.7rem 0 0 0; */
    /* height: 2.5rem; */
    /* overflow: hidden; */
    /* padding: 0.45rem 0 0 0; */
    /* height: 2rem; */
    /*overflow: hidden;*/
}

.main-footer-right {
    float: right;
    padding: 0.15rem 0 0 0;
}

.main-footer table,
.main-footer table * {
    border: none;
    line-height: 2.5rem;
}

.main-footer td i {
    font-size:1.75rem;
    margin-right: 0.15em;
}

.main-footer-separator {
    font-size: 1.25rem;
    vertical-align: super;
}

.main-footer-brand {
    text-align: left;
    min-width: 8rem;
}

/* end main layout */

a, .btn-link {
    color: #aaa;
}

.btn-primary {
    color: #fff;
    background-color: #B70004;
    border-color: #B71014;
}

.btn-primary:hover {
    background-color: #a70024;
    border-color: #571034;
} 

.content {
    padding-top: 1.1rem;
}

.login-navbar-padding {
    padding: 0.45em;
    min-height: 3.25em;
}

.login-navbar-logo-force-left {
    position: absolute;
    left:0.55em;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

table {
    border: 2px solid #bbb;
    border-collapse: collapse;
    xfont-size: 80%;
}

tr, td {
    padding: 0.2em;
    border: 2px solid #ccc;
    text-align: center;
}

h1, h2, h3 {
    font-family: Raleway;
}

.text-center {
    text-align: center;
}

/* search bar compononent */

.xsearch-bar {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.search-bar {
    /*float: left;*/
    /*margin-right: 0.5em;*/
}

.search-bar input {
    /*width: calc(100vw - 113px);*/
    /*display: inline;*/
    /*margin-right: 5px;*/
    font-size:0.9em;
}

/*@media screen and (min-width: 768px) {
    .search-bar > input {
        width: calc(250px + 15vw);
        display: inline;
        margin-right: 5px;
    }
}*/

/* grid row styles */

.row-header {
    font-weight: bold;
    background-color: rgba(0,0,0,0.2);
    border-bottom: 2px solid;
    border-bottom-color: rgba(255,255,255,0.1);
    grid-row: 1;
}

.row-data-odd {
    background-color: rgba(255,255,255,0.1);
    border-bottom: 2px solid;
    border-bottom-color: rgba(255,255,255,0.1);
}

.row-data-even {
    background-color: rgba(0,0,0,0.1);
    border-bottom: 2px solid;
    border-bottom-color: rgba(255,255,255,0.1);
}

.row-data-highlight {
    color: rgba(180,200,255,1);
    cursor: pointer;
    border-bottom-color: rgba(180,200,255,0.3);
}

/* login display compononent */

.ss-login-display {
    margin-top: 5px;
    margin-bottom: 5px;
}

.login-display {
    float: left;
}

/* tallyEdLogo component*/

.tally-ed-logo {
    font-size: 1.8rem;
    display: flex;
    flex-direction: row;
    font-family: lovelo;
}

.tally-ed-navbar-logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    float: left;
    margin-right: 0.75rem;
}

.navbar-brand {
    padding-bottom:0;
}

.tally-ed-logo-tally {
    font-family: lovelo;
    color: #eee;
}

.tally-ed-logo-ed {
    font-family: lovelo;
    color: #bbb;
}

/* Page level style */

.page-header {
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    padding: 20px;
}

    .page-header > h1 {
        font-size: 1.5rem;
        font-weight: bold;
    }

    .page-header > h3 {
        font-size: 0.8rem;
    }

@media screen and (min-width: 440px) {
    .page-header > h1 {
        font-size: 2.2rem;
    }

    .page-header > h3 {
        font-size: 1rem;
    }
}

@media screen and (min-width: 768px) {
    .page-header > h1 {
        font-size: 2.8rem;
    }

    .page-header > h3 {
        font-size: 1.4rem;
    }
}

/* navbar search box */

/*.navbar-nav*/ .dropdown-menu {
    background-color: #333;
    /*background-color: #343a40;*/
    color: #bbb;
}

/* Loading gif */

.loading-gif-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
}

.loading-gif{
    max-width: 20vw;
    max-height: 20vw;
    margin-top: 5vw;
    margin-left: auto;
    margin-right: auto;
}

/* For fixed navbar */
/*
#app > .navbar {
    position: fixed;
    left: 0;
    right: 0;
    xborder-bottom: 2px solid #111;
    z-index:2;
}

#app > div > .content {
    margin-top: 4rem;
}

#app > div > .content.px-4 > .public-elections-list {
    margin-top: 5rem;
}

#app > div > .content.px-4 > .page-header,
#app > div > .content.px-4 > .public-elections-list-header {
    position:fixed;
    left:0;
    right:0;
    top:4rem;
    height:5em;
    margin-top:0;
    background-color:#1a1a1a;
    z-index:1;
}

.public-elections-list-error-message {
    margin-top: 5em;
}
*/
/* End: fixed navbar */

/* Public Elections List */

.public-elections-list {
    display: grid;
    flex-direction: column;
    align-content: space-evenly;
    justify-content: space-evenly;
    position: relative;
    align-items: center; /* Note special handling of this below, as there was a weird extra padding below the third header of a list. */
}

.public-elections-list-header {
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    padding: 20px;
}

.public-elections-list-header > h1 {
    font-size: 1.5rem;
    font-weight: bold;
}

.public-elections-list-election-header {
    font-size: 1rem;
    text-align: center;
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 0.5em;
    padding: 1em;
    color: #eee;
    background-color: #800;
    border-radius: 0.15em;
}

.header-filter-text {
    margin: auto 0 auto auto;
    font-size: 0.9em;
    width: 100%;
}

.public-elections-list-table {
    font-size: 0.7rem;
    display: grid;
    grid-template-columns: 70% 30%;
    justify-items: stretch;
    align-content: center;
    column-gap: 3px;
    grid-row-gap: 10px;
}

.public-elections-list-table > div {
    padding: 2px;
}

.public-elections-list-error-message {
    text-align: center;
    padding: 20px;
    font-style: italic;
    font-size: 0.8rem;
    display: none;
}

@media screen and (min-width: 440px) {
    .public-elections-list {
        align-items: unset; /* Unset here.  */
    }

    .public-elections-list-header > h1 {
        font-size: 2.2rem;
    }

    .public-elections-list-election-header {
        font-size: 1.4rem;
        margin-left: 10px;
    }

    .header-filter-text {
        width: 50%;
        font-size: 0.7em;
    }

    .public-elections-list-table {
        font-size: 1.0rem;
        padding: 10px;
        column-gap: 10px;
        grid-row-gap: 17px;
    }

    .public-elections-list-table > div {
        padding: 5px;
    }

    .public-elections-list-error-message {
        font-size: 1.1rem;
        /* margin-top: 4em; */  /* For fixed navbar */
    }
}

@media screen and (min-width: 768px) {
    .public-elections-list {
        align-items: center; /* And here, back to center.  */
    }

    .public-elections-list-header > h1 {
        font-size: 2.8rem;
    }

    .public-elections-list-election-header {
        font-size: 1.8rem;
    }

    .header-filter-text {
        width: 50%;
        font-size: 0.7em;
    }

    .public-elections-list-table {
        font-size: 1.3rem;
        padding: 10px;
        width: 80vw;
        column-gap: 10px;
        grid-row-gap: 17px;
    }

    .public-elections-list-table > div {
        padding: 10px;
    }

    .public-elections-list-error-message {
        font-size: 1.5rem;
        /* margin-top: 3.5em; */ /* For fixed navbar */
    }
}

.rep-color {
    background-color: rgba(180,0,0,0.3);
}

.dem-color {
    background-color: rgba(0,0,180,0.3);
}

.npa-color {
    background-color: rgba(80,80,80,0.3);
}

.oth-color {
    background-color: rgba(0,180,0,0.3);
}

.candidate-details{
    text-align: left;
}

.office-detail-list {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 25% 55% 20%;
    align-items: stretch;
    grid-row-gap: 5px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

    .office-detail-list > .row-start {
        border-radius: 10px 0px 0px 10px;
    }

    .office-detail-list > .row-end {
        border-radius: 0px 10px 10px 0px;
    }

.candidate-vote-view-cell {
    display: flex;
    align-content: center;
    align-items: center;
}

    .candidate-vote-view-cell > .candidate-image-wrapper {
        margin: 5px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 50px;
        width: 50px;
        border-radius: 5px;
    }

    .candidate-vote-view-cell > .candidate-image-wrapper > .candidate-image {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 50px;
        width: 50px;
        border-radius: 5px;
    }

    .candidate-vote-view-cell > .candidate-details {
        margin: 0px 10px 0px 0px;
        display: flex;
        flex-direction: column;
    }

        .candidate-vote-view-cell > .candidate-details > .candidate-name {
            font-size: 0.8rem;
            margin-bottom: 3px;
        }

        .candidate-vote-view-cell > .candidate-details > .candidate-not-filed-yet {
            font-size: 0.6rem;
            margin-bottom: 0.1rem;
        }

        .candidate-vote-view-cell > .candidate-details > buttons-container {
            display: flex;
            flex-direction: row;
        }

    .candidate-vote-view-cell > .tally-data {
        margin-left: auto;
        margin-right: auto;
        padding-left: 3px;
        padding-right: 3px;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
    }

        .candidate-vote-view-cell > .tally-data > h3 {
            font-size: 0.8rem;
        }

        .candidate-vote-view-cell > .tally-data > .tally-count {
            display: flex;
            flex-direction: row;
        }

            .candidate-vote-view-cell > .tally-data > .tally-count > h3 {
                font-size: 0.8rem;
            }

    .candidate-vote-view-cell > .candidate-details > .buttons-container > .candidate-details-button {
        font-size: 0.8rem;
        padding: 0px 3px;
    }

@media screen and (min-width: 440px) {
    .office-detail-list {
        margin-top: 10px;
        grid-row-gap: 5px;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

        .office-detail-list > .row-start {
            border-radius: 15px 0px 0px 15px;
        }

        .office-detail-list > .row-end {
            border-radius: 0px 15px 15px 0px;
        }

    .candidate-vote-view-cell {
    }
        .candidate-vote-view-cell > .candidate-image-wrapper {
            margin: 10px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 75px;
            width: 75px;
            border-radius: 10px;
        }

            .candidate-vote-view-cell > .candidate-image-wrapper > .candidate-image {
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                height: 75px;
                width: 75px;
                border-radius: 10px;
            }

        .candidate-vote-view-cell > .candidate-details {
            margin: 0px 15px 0px 0px;
        }

            .candidate-vote-view-cell > .candidate-details > .candidate-name {
                font-size: 1.1rem;
                margin-bottom: 5px;
            }

            .candidate-vote-view-cell > .candidate-details > .candidate-not-filed-yet {
                font-size: 0.9rem;
                margin-bottom: 0.3rem;
            }

            .candidate-vote-view-cell > .candidate-details > buttons-container {
            }

        .candidate-vote-view-cell > .tally-data {
            padding-left: 5px;
            padding-right: 5px;
        }

            .candidate-vote-view-cell > .tally-data > h3 {
                font-size: 1.1rem;
            }

            .candidate-vote-view-cell > .tally-data > .tally-count {
            }

                .candidate-vote-view-cell > .tally-data > .tally-count > h3 {
                    font-size: 1.1rem;
                }

        .candidate-vote-view-cell > .candidate-details > .buttons-container > .candidate-details-button {
            font-size: 1.1rem;
            padding: 0px 5px;
        }
}

@media screen and (min-width: 768px) {
    .office-detail-list {
        margin-top: 20px;
        grid-row-gap: 15px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

        .office-detail-list > .row-start {
            border-radius: 20px 0px 0px 20px;
        }

        .office-detail-list > .row-end {
            border-radius: 0px 20px 20px 0px;
        }

    .candidate-vote-view-cell {
    }
        .candidate-vote-view-cell > .candidate-image-wrapper {
            margin: 20px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 150px;
            width: 150px;
            border-radius: 15px;
        }

            .candidate-vote-view-cell > .candidate-image-wrapper > .candidate-image {
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                height: 150px;
                width: 150px;
                border-radius: 15px;
            }

        .candidate-vote-view-cell > .candidate-details {
            margin: 0px 20px 0px 0px;
        }

            .candidate-vote-view-cell > .candidate-details > .candidate-name {
                font-size: 1.5rem;
                margin-bottom: 10px;
            }

            .candidate-vote-view-cell > .candidate-details > .candidate-not-filed-yet {
                font-size: 1.1rem;
                margin-bottom: 0.8rem;
            }

            .candidate-vote-view-cell > .candidate-details > buttons-container {
            }

        .candidate-vote-view-cell > .tally-data {
            padding-left: 10px;
            padding-right: 10px;
        }

            .candidate-vote-view-cell > .tally-data > h3 {
                font-size: 1.5rem;
            }

            .candidate-vote-view-cell > .tally-data > .tally-count {
            }

                .candidate-vote-view-cell > .tally-data > .tally-count > h3 {
                    font-size: 1.5rem;
                }

        .candidate-vote-view-cell > .candidate-details > .buttons-container > .candidate-details-button {
            font-size: 1.3rem;
            padding: 0px 10px;
        }
}

/* Amendment Detail View */
.amendment-description{
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    font-style: italic;
    max-width: calc(300px + 30vw);
    font-size: 0.9rem;
}

.amendment-detail-name{
    font-size: 1rem;
}

@media screen and (min-width: 440px) {
    .amendment-description{
        font-size: 1.1rem;
    }

    .amendment-detail-name {
        font-size: 1.3rem;
    }

}

@media screen and (min-width: 768px) {
    .amendment-description {
        font-size: 1.3rem;
    }

    .amendment-detail-name {
        font-size: 1.8rem;
    }

}

/* Opinion poll detail*/
.opinion-poll-detail-name {
    font-size: 1rem;
}

@media screen and (min-width: 440px) {
    .opinion-poll-detail-name {
        font-size: 1.3rem;
    }
}

@media screen and (min-width: 768px) {
    .opinion-poll-detail-name {
        font-size: 1.8rem;
    }
}


/* Candidate page */
.candidate-page-candidate-name{
    font-size: 1.1rem;
    margin-bottom: 0rem;
}

.candidate-page-office-name{
    font-size: 0.7rem;
}

.candidate-page-party-name {
    font-size: 0.7rem;
}

.candidate-nav-buttons{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.page-nav-button{
    margin: 1px 1px;
    font-size: 0.7rem;
}

/* news feed */
.news-feed-container {
    width: calc(250px + 15vw);
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

.news-feed-search-type-selector {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.btn-news-feed-search-type {
    font-weight: bold;
    padding: 5px 7px;
    font-size: 0.65rem;
    margin: 2px;
}

.news-feed-article-container {
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
}

.news-feed-load-more-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.btn-load-more-articles {
    font-weight: bold;
    padding: 5px 7px;
    font-size: 0.65rem;
    margin: 2px;
}

.news-article-container {
    display: flex;
    flex-direction: row;
    margin: 5px;
}

.news-article-summary-container {
    display: flex;
    flex-direction: column;
}

.news-article-image-wrapper {
    height: 50px;
    min-width: 75px;
    margin: 5px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    background-image: url('../img/Placeholders/ted-news-placeholder.jpg');
    background-size: cover;
}

.news-article-image {
    height: 50px;
    min-width: 75px;
    border-radius: 5px;
    background-size: cover;
}

.news-article-title {
    font-size: 0.7rem;
}

.news-article-snippet {
    font-size: 0.5rem;
}

.news-article-source {
    font-weight: bold;
}

.news-article-date {
    font-style: italic;
}

.news-article-summary {
}

/* Competitor list */
.competitor-list-container {
    width: calc(250px + 15vw);
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
}

.competitor-list-no-competitors-message {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.competitor-card-container {
    margin: 5px;
    padding: 5px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.competitor-card-image-wrapper {
    background-image: url('../img/Placeholders/candidate-no-image.jpg');
    margin: 5px;
    height: 100px;
    width: 100px;
    background-size: cover;
    border-radius: 8px;
}

.competitor-card-image {
    height: 100px;
    width: 100px;
    background-size: cover;
    border-radius: 8px;
}

.competitor-card-name {
    text-align: center;
}

/* candidate page responsive styles*/
@media screen and (min-width: 440px) {
    .candidate-page-candidate-name {
        font-size: 1.3rem;
        margin-bottom: 0.3rem;
    }

    .candidate-page-office-name {
        font-size: 1.1rem;
    }

    .candidate-page-party-name {
        font-size: 1.1rem;
    }

     .candidate-nav-buttons {
    }

    .page-nav-button {
        margin: 3px 2px;
        font-size: 0.9rem;
    }

    /* news feed 440px */
    .news-feed-container {
        width: calc(330px + 15vw);
        margin-top: 14px;
    }

    .news-feed-search-type-selector {
    }

    .btn-news-feed-search-type {
        padding: 5px 7px;
        font-size: 0.8rem;
        margin: 3px;
    }

    .news-feed-article-container {
        margin-top: 7px;
        margin-bottom: 10px;
    }

    .news-feed-load-more-container {
    }

    .btn-load-more-articles {
        padding: 5px 7px;
        font-size: 0.8rem;
        margin: 3px;
    }

    .news-article-container {
        margin: 7px;
    }

    .news-article-summary-container {
    }

    .news-article-image-wrapper {
        height: 70px;
        min-width: 90px;
        margin: 7px;
        border-radius: 7px;
    }

    .news-article-image {
        height: 70px;
        min-width: 90px;
        border-radius: 7px;
    }

    .news-article-title {
        font-size: 0.8rem;
    }

    .news-article-snippet {
        font-size: 0.7rem;
    }

    .news-article-source {
    }

    .news-article-date {
    }

    .news-article-summary {
    }

    /* Competitor list 440px */
    .competitor-list-container {
        width: calc(330px + 15vw);
        margin-top: 14px;
    }

    .competitor-list-no-competitors-message {
    }

    .competitor-card-container {
        margin: 7px;
        padding: 7px;
        border-radius: 9px;
    }

    .competitor-card-image-wrapper {
        margin: 7px;
        height: 140px;
        width: 140px;
        border-radius: 8px;
    }

    .competitor-card-image {
        height: 140px;
        width: 140px;
        border-radius: 8px;
    }

    .competitor-card-name {
    }
}

@media screen and (min-width: 768px) {
    .candidate-page-office-name {
        font-size: 1.4rem;
    }

    .candidate-page-party-name {
        font-size: 1.4rem;
    }

    .candidate-nav-buttons {
    }

    .page-nav-button {
        margin: 5px 3px;
        font-size: 1.3rem;
    }

    /* news feed 768px */
    .news-feed-container {
        width: calc(600px + 15vw);
        margin-top: 20px;
    }

    .news-feed-search-type-selector {
    }

    .btn-news-feed-search-type {
        padding: 7px 10px;
        font-size: 1rem;
        margin: 5px;
    }

    .news-feed-article-container {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .news-feed-load-more-container {
    }

    .btn-load-more-articles {
        padding: 7px 10px;
        font-size: 1rem;
        margin: 5px;
    }

    .news-article-container {
        margin: 10px;
    }

    .news-article-summary-container {
    }

    .news-article-image-wrapper {
        height: 100px;
        min-width: 150px;
        margin: 10px;
        border-radius: 10px;
    }

    .news-article-image {
        height: 100px;
        min-width: 150px;
        border-radius: 10px;
    }

    .news-article-title {
        font-size: 1.4rem;
    }

    .news-article-snippet {
        font-size: 1rem;
    }

    .news-article-source {
    }

    .news-article-date {
    }

    .news-article-summary {
    }

    /* Competitor list 768px */
    .competitor-list-container {
        width: calc(600px + 15vw);
        margin-top: 20px;
    }

    .competitor-list-no-competitors-message {
    }

    .competitor-card-container {
        margin: 10px;
        padding: 10px;
        border-radius: 15px;
    }

    .competitor-card-image-wrapper {
        background-image: url('../img/Placeholders/candidate-no-image.jpg');
        margin: 10px;
        height: 200px;
        width: 200px;
        border-radius: 12px;
    }

    .competitor-card-image {
        height: 200px;
        width: 200px;
        border-radius: 12px;
    }

    .competitor-card-name {
    }
}


/* Stats header */
.stats-title{
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
}

.stats-divider{
    width: 340px;
    background: #aaa;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
}

.top-divider{
    margin-top: 2rem;
}

/* Stats Viewer */
.stats-viewer-container {
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.stats-viewer-buttons-panel {
    display: flex;
    flex-direction: column;
    width: 82px;
}

.stats-viewer-graph-panel {
    width: 258px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
}

.stats-button {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.65rem;
}

.stats-loading-gif{
    height: 150px;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 440px) {
    .stats-title {
        margin-top: 0.35rem;
        margin-bottom: 0.35rem;
        font-size: 1.3rem;
    }

    .stats-divider {
        width: 380px;
    }
    .stats-viewer-container {
        margin-top: 1rem;
    }

    .stats-viewer-buttons-panel {
        width: 100px;
    }

    .stats-viewer-graph-panel {
        width: 280px;
    }

    .stats-button {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
        font-size: 0.85rem;
    }

    .stats-loading-gif {
        height: 150px;
        width: 150px;
    }
}

@media screen and (min-width: 768px) {
    .stats-title {
        margin-top: 0.35rem;
        margin-bottom: 0.35rem;
        font-size: 1.9rem;
    }
    .stats-divider {
        width: 800px;
    } .stats-viewer-container {
        margin-top: 1rem;
    }

    .stats-viewer-buttons-panel {
        width: 150px;
    }

    .stats-viewer-graph-panel {
        width: 650px;
    }

    .stats-button {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
        font-size: 1.3rem;
    }

    .stats-loading-gif {
        height: 200px;
        width: 200px;
    }
}

/* common page styles */
.common-page-container {
    display: flex;
    flex-direction: column;
    background-size: 100% auto;
    background-repeat: no-repeat;
    min-height: 75vh;
}

.common-page-common-name {
    font-size: 1.1rem;
    margin-bottom: 0rem;
}

.common-page-office-name {
    font-size: 0.7rem;
}

.common-tabs-control {
    /*font-size: 0.7rem;*/
    justify-content: center;
}

.common-tabs-control > li > a {
    padding: 5px 7px;
}

.common-banner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 1.5rem auto;
}

/* container wraps common image in case no image available */
.common-banner-image-wrapper {
    background-image: url('../img/svg/tallyEDLogo.svg');
    margin: 5px;
    height: 100px;
    width: 100px;
    background-size: cover;
    border-radius: 6px;
}

.common-banner-image {
    height: 100px;
    width: 100px;
    background-size: cover;
    border-radius: 6px;
}

.common-banner-details {
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.common-twitter-handle {
    font-size: 0.9rem;
    font-family: Raleway;
    margin-bottom: 0.25rem;
}

.common-nav-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.page-nav-button {
    margin: 1px 1px;
    font-size: 0.7rem;
}

.common-tabs-control {
    width: calc(250px + 15vw);
    margin-left: auto;
    margin-right: auto;
    border-color: #343a40;
    padding: 0.1em !important;
    /*border-width: 0.2em;*/
    border-width: 3px;
}

.common-tabs-control .nav-link.active {
    background-color: rgba(0,0,0,0.4);
    /* margin-top: 1px; */
    margin-bottom: 0;
}

.nav-pills .nav-link {
    margin-top: 4px !important;
}

.common-tabs-control > li > a:active {
}

.nav-tabs {
    font-size: 1.15em;
}

.nav.nav-tabs .nav-item a.nav-link {
    color: #dddddd !important;
    font-weight: 700 !important;
    background-color: #343a40;
    /*margin: 0 0.1em !important;*/
    margin: -2px !important;
    border-width: 0 !important;
    /*margin-bottom: -2px !important;*/
    padding: 0.1em 1em !important;
}

.nav.nav-tabs .nav-item a.nav-link:not(.active) {
    color: #bbb !important;
    background-color: #343a4000;
}

.nav-pills .nav-link {
    margin: auto 0.1rem;
    padding: 0.6em 0;
    font-weight: bold;
}

.nav-pills .nav-link.active {
    /*margin-top: 2px;*/
    /*margin-bottom: -1px;*/
    /*padding-top: 0.45rem;*/
}

/* used to make tabs from radio button group*/
.radio-panelx {
    width: 100%;
}

.radio-buttonx {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
}

/* news feed */
.news-feed-container {
    width: calc(250px + 15vw);
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

.news-feed-search-type-selector {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.btn-news-feed-search-type {
    font-weight: bold;
    padding: 5px 7px;
    font-size: 0.65rem;
    margin: 2px;
}

.news-feed-article-container {
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
}

.news-feed-load-more-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.btn-load-more-articles {
    font-weight: bold;
    padding: 5px 7px;
    font-size: 0.65rem;
    margin: 2px;
}

.news-article-container {
    display: flex;
    flex-direction: row;
    margin: 5px;
}

.news-article-summary-container {
    display: flex;
    flex-direction: column;
}

.news-article-image-wrapper {
    height: 50px;
    min-width: 75px;
    margin: 5px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    background-image: url('../img/Placeholders/ted-news-placeholder.jpg');
    background-size: cover;
}

.news-article-image {
    height: 50px;
    min-width: 75px;
    border-radius: 5px;
    background-size: cover;
}

.news-article-title {
    font-size: 0.7rem;
}

.news-article-snippet {
    font-size: 0.5rem;
}

.news-article-source {
    font-weight: bold;
}

.news-article-date {
    font-style: italic;
}

.news-article-summary {
}

/* Competitor list */
.competitor-list-container {
    width: calc(250px + 15vw);
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
}

.competitor-list-no-competitors-message {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.competitor-card-container {
    margin: 5px;
    padding: 5px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.competitor-card-image-wrapper {
    background-image: url('../img/Placeholders/candidate-no-image.jpg');
    margin: 5px;
    height: 100px;
    width: 100px;
    background-size: cover;
    border-radius: 8px;
}

.competitor-card-image {
    height: 100px;
    width: 100px;
    background-size: cover;
    border-radius: 8px;
}

.competitor-card-name {
    text-align: center;
}

/* common page responsive styles*/
@media screen and (min-width: 440px) {
    .common-page-common-name {
        font-size: 1.3rem;
        margin-bottom: 0.3rem;
    }

    .common-page-office-name {
        font-size: 1.1rem;
    }

    .common-tabs-control {
        /*font-size: 0.85rem;*/
    }

    .common-tabs-control > li > a {
        padding: 7px 10px;
    }

    .common-banner-image-wrapper {
        margin: 7px;
        height: 140px;
        width: 140px;
        background-size: cover;
        border-radius: 8px;
    }

    .common-banner-image {
        height: 140px;
        width: 140px;
        background-size: cover;
        border-radius: 7px;
    }

    .common-banner-details {
        margin: 10px;
    }

    .common-twitter-handle {
        font-size: 1rem;
        margin-bottom: 0.35rem;
    }

    .common-nav-buttons {
    }

    .page-nav-button {
        margin: 3px 2px;
        font-size: 0.9rem;
    }

    .common-tabs-control {
        width: calc(330px + 15vw);
        margin-left: auto;
        margin-right: auto;
        padding: 3px;
    }

    .common-tabs-control > li > a {
        margin-left: 2px;
        margin-right: 2px;
    }

    /* news feed 440px */
    .news-feed-container {
        width: calc(330px + 15vw);
        margin-top: 14px;
    }

    .news-feed-search-type-selector {
    }

    .btn-news-feed-search-type {
        padding: 5px 7px;
        font-size: 0.8rem;
        margin: 3px;
    }

    .news-feed-article-container {
        margin-top: 7px;
        margin-bottom: 10px;
    }

    .news-feed-load-more-container {
    }

    .btn-load-more-articles {
        padding: 5px 7px;
        font-size: 0.8rem;
        margin: 3px;
    }

    .news-article-container {
        margin: 7px;
    }

    .news-article-summary-container {
    }

    .news-article-image-wrapper {
        height: 70px;
        min-width: 90px;
        margin: 7px;
        border-radius: 7px;
    }

    .news-article-image {
        height: 70px;
        min-width: 90px;
        border-radius: 7px;
    }

    .news-article-title {
        font-size: 0.8rem;
    }

    .news-article-snippet {
        font-size: 0.7rem;
    }

    .news-article-source {
    }

    .news-article-date {
    }

    .news-article-summary {
    }

    /* Competitor list 440px */
    .competitor-list-container {
        width: calc(330px + 15vw);
        margin-top: 14px;
    }

    .competitor-list-no-competitors-message {
    }

    .competitor-card-container {
        margin: 7px;
        padding: 7px;
        border-radius: 9px;
    }

    .competitor-card-image-wrapper {
        margin: 7px;
        height: 140px;
        width: 140px;
        border-radius: 8px;
    }

    .competitor-card-image {
        height: 140px;
        width: 140px;
        border-radius: 8px;
    }

    .competitor-card-name {
    }
}

@media screen and (min-width: 768px) {
    .common-page-common-name {
        font-size: 2.1rem;
        margin-bottom: 0.2rem;
    }

    .common-page-office-name {
        font-size: 1.4rem;
    }

    .common-tabs-control {
        /*font-size: 1.1rem;*/
    }

    .common-tabs-control > li > a {
        padding: 8px 16px;
    }

    .common-banner-image-wrapper {
        margin: 10px;
        height: 200px;
        width: 200px;
        background-size: cover;
        border-radius: 12px;
    }

    .common-banner-image {
        height: 200px;
        width: 200px;
        background-size: cover;
        border-radius: 12px;
    }

    .common-banner-details {
        margin: 10px;
    }

    .common-twitter-handle {
        font-size: 1.7rem;
        margin-bottom: 0.5rem;
    }

    .common-nav-buttons {
    }

    .page-nav-button {
        margin: 5px 3px;
        font-size: 1.3rem;
    }

    .common-tabs-control {
        width: calc(600px + 15vw);
        margin-left: auto;
        margin-right: auto;
        padding: 4px;
    }

    .common-tabs-control > li > a {
        margin-left: 2px;
        margin-right: 2px;
    }

    /* news feed 768px */
    .news-feed-container {
        width: calc(600px + 15vw);
        margin-top: 20px;
    }

    .news-feed-search-type-selector {
    }

    .btn-news-feed-search-type {
        padding: 7px 10px;
        font-size: 1rem;
        margin: 5px;
    }

    .news-feed-article-container {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .news-feed-load-more-container {
    }

    .btn-load-more-articles {
        padding: 7px 10px;
        font-size: 1rem;
        margin: 5px;
    }

    .news-article-container {
        margin: 10px;
    }

    .news-article-summary-container {
    }

    .news-article-image-wrapper {
        height: 100px;
        min-width: 150px;
        margin: 10px;
        border-radius: 10px;
    }

    .news-article-image {
        height: 100px;
        min-width: 150px;
        border-radius: 10px;
    }

    .news-article-title {
        font-size: 1.4rem;
    }

    .news-article-snippet {
        font-size: 1rem;
    }

    .news-article-source {
    }

    .news-article-date {
    }

    .news-article-summary {
    }

    /* Competitor list 768px */
    .competitor-list-container {
        width: calc(600px + 15vw);
        margin-top: 20px;
    }

    .competitor-list-no-competitors-message {
    }

    .competitor-card-container {
        margin: 10px;
        padding: 10px;
        border-radius: 15px;
    }

    .competitor-card-image-wrapper {
        background-image: url('../img/Placeholders/candidate-no-image.jpg');
        margin: 10px;
        height: 200px;
        width: 200px;
        border-radius: 12px;
    }

    .competitor-card-image {
        height: 200px;
        width: 200px;
        border-radius: 12px;
    }

    .competitor-card-name {
    }
}

/* All inputs get dark & no border */

input {
    background-color: #242424 !important;
    border: none !important;
    color: #ddd !important;
    background-color: #343a40 !important;
}

/* find voters dialog, with blazorise grid, etc */

.fv-search {
    display: table;
    margin: 0.5rem 0 0.5rem 0.25rem;
    width: 100%;
}

.fv-search-box {
    height:2rem !important;
    margin-bottom:0.2em;
    display:table-cell;
}

.fv-search-controls {
    display: table-cell;
    width: 40%;
    max-width: 14em;
}

.fv-search-button {
    margin-left: 0.5em;
    width: 6em;
}

.fv-search .custom-checkbox {
    margin-left:0.5em;
    margin-top:0.2em;
    font-size:0.8em;
    line-height:2em;
}

.fv-grid {
    border: none;
    font-family:Raleway;
    margin-top:1em;
}

.fv-grid thead th {
    border: none;
    padding: 0 2px;
}

.fv-grid thead th input,
.fv-search input {
    background-color: #242424 !important;
    color:#ddd;
    border-radius: 0.2em;
    border-color: #444;
    margin: 0.3em 0;
    padding: 0;
}

/* fv-grid-page is used on network tab, columns 4/5 are county/party, and are removed when narrow */

.fv-grid thead th input {
    background-color: #2a2a2a !important;
}

.fv-grid-page td:nth-child(4),
.fv-grid-page td:nth-child(5),
.fv-grid-page th:nth-child(4),
.fv-grid-page th:nth-child(5) {
    display: none;
}

@media screen and (min-width: 762px) {

    .fv-grid-page td:nth-child(4),
    .fv-grid-page td:nth-child(5),
    .fv-grid-page th:nth-child(4),
    .fv-grid-page th:nth-child(5) {
        display: table-cell;
    }
}

.fv-search input {
    padding: 0.5em;
    display: table-cell;
}

.fv-grid .filter-row,
.fv-grid-page-filter-row {
    border: none;
}

.fv-grid tr,
.fv-grid td {
    padding: 0.2em;
    border: none;
    text-align: center;
    color: #ddd;
    width: auto;
    vertical-align:middle;
}

.fv-grid tbody tr {
    border-bottom:1px solid #444;
}

.fv-grid tbody tr:last-child {
     border:none;
}

.fv-grid td {
    padding: 0.3em 0.2em;
    /*height: 3rem;*/
    padding: 0 0.1em;
    padding: 0.2em 0.2em;
    /*font-size: 1rem;*/
    /*font-size: 110%;*/
}

.fv-grid thead th {
    /*font-size: 80%;*/
}

.org-grid-div .fv-grid td {
    font-size: 1.15em;
}

.fvp-search-box {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em;
}

.fvp-search-controls {
    margin: 0.1em 0.1em;
    flex-basis: 14em;
    flex-wrap: nowrap;
}

.fvp-search-controls button {
    border: none !important;
    box-shadow: none !important;
    padding: 0.57em;
    margin: 0.1em 0.1em;
    color: #ddd !important;
    font-weight: bold;
}

.fvp-search-controls .btn-sm .spinner-border {
    width: 1em;
    height: 1em;
    margin: 0;
    position: relative;
    margin-right: 0.5em;
    margin-bottom: 0.1em;
}

.fvp-search-box input {
    flex-basis: 11em;
    margin: 0.1rem .1rem;
    padding: 0 1em;
}

* select {
    text-align: center !important;
    background-color: #242424 !important;
    color: #ddd !important;
    border: none !important;
    margin: 0.1rem .1rem !important;
    padding: 0 1em !important;
}

.fv-grid select,
.fv-grid input {
    background-color: #2a2a2a !important;
    margin: 0.3em 0 !important;
    padding: 0 0em !important;
    font-size: 0.95em;
    text-align: center;
}

.fv-grid select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23ddd' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}

.fvp-search-box select {
    text-align: center;
    background-color: #242424;
    color: #ddd;
    border: none;
    margin: 0.1rem .1rem;
    padding: 0 1em;
    width: auto;
}

.fvp-search-button {
    width: 7em;
    padding: 0.4em 0.5em;
    margin: 0;

    
    width: 7em;
    padding: 0.4em 0.5em;
    margin: 0.3em 0.2em;
}

.page-link,
.page-item select {
    background-color: #242424 !important;
    border:none;
    margin-left:1px
}

.page-item select {
    height:2.27em;
    border-radius:0px;
    color:#ccc;
}

.cm-content .modal-header {
    border: none;
    border-bottom: 2px solid #444;
}

.cm-content .modal-footer {
    border: none;
    border-top: 2px solid #444;
}

.filter-row th input {
    text-align:center;
    font-size:1em;
}

.filter-row th:first-child input {
    visibility:hidden;
}

.filter-row th:first-child::after {
	content: 'Filter:';
	position:absolute;
	margin-top:-2rem;
	margin-left:-1.5em;
}

.fv-no-results {
    font-size:1.2em;
    padding-top:2em;
    text-align: center;
}

/* image browser */

/*
.image-browser {
}

.image-browser input {
    xdisplay: none;
}


.image-browser-button {
    background-color: #444;
    color: #ccc;
}

.image-browser-button:hover {
    color: #ddd;
}

.image-browser-button:active {
    color: #eee;
}
*/

.image-browser-input {
    opacity: 0;
    cursor: pointer; 
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:100%;
    height:100%;
}

.image-browser-label {
    cursor: pointer;
    background-color: #343a40;
    color: #bbb;
    font-size: 1.2rem;
    font-weight: bolder;
    border-radius: 0.5em;
    xdisplay: block;
    position: relative;
    text-align: center;
    margin: 0;
    padding: 1em;
    min-height: 10em;
}

/* user data banner */
.user-data-banner-login-options {
    xfont-size: 1em;
}

.user-data-banner-address {
    xfont-size: 1em;
}

.user-data-banner-precinct {
    xfont-size: 1em;
}

.user-data-banner-party {
    xfont-size: 1em;
}

.user-unlinked-color {
    color: darkgoldenrod;
}

@media screen and (min-width: 440px) {
    .user-data-banner-login-options {
        xfont-size: 1em;
    }

    .user-data-banner-address {
        xfont-size: 1em;
    }

    .user-data-banner-precinct {
        xfont-size: 1em;
    }

    .user-data-banner-party {
        xfont-size: 1em;
    }
}

@media screen and (min-width: 768px) {
    .user-data-banner-login-options {
        font-size: 1.3rem;
    }

    .user-data-banner-address {
        font-size: 1.3rem;
    }

    .user-data-banner-precinct {
        font-size: 1.3rem;
    }

    .user-data-banner-party {
        font-size: 1.3rem;
    }
}

/* ballot */
.ballot-container {
    margin-top: 1rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 10px);
    xfont-size: 1.1em;
}

.ballot-election-buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.election-button {
    margin: 0.3rem;
    font-weight: bold;
    font-size: 0.7rem;
}

@media screen and (min-width: 440px) {
    .ballot-container
    {
        max-width: calc(300px + 30vw);
    }

    .election-button {
        margin: 0.4rem;
        font-size: 1rem;
    }
}

@media screen and (min-width: 768px) {
    .ballot-container
    {
        max-width: calc(600px + 20vw);
    }

    .election-button {
        margin: 0.5rem;
        font-size: 1.5rem;
    }
}

/* blazorise large button wait spinner align */

.btn-lg .spinner-border {
    width: 1em;
    height: 1em;
    margin: 0;
    position: relative;
    margin-right: 1em;
    margin-bottom: 0.1em;
}

/* charts */

.charts-table {
    width: 100%;
    xheight: 20em;
    margin-top: 3em;
}

.charts-table td {
    display: inline-block;
    width: 30em;
    xheight: 20em;
    xmargin-top: 1em;
}

.charts-table canvas {
    xwidth: 40em;
    xheight: 30em;
}

.chart {
}

.chart div {
    margin-top:2em;
}

.chart div div {
    margin-bottom:2em;
}

/* pc page - selected campaign */

.sc-select-row {
    margin: 2rem 0;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}

.sc-select-row span {
    display: inline-block;
    color: #bbb;
    margin: 0.5em;
    font-size: 0.9em;
}

.sc-select-row-select {
    display: inline-block;
    width: auto;
    background-color: #343a40 !important;
    font-size: 1rem;
    height: 2.55em;
    font-weight: bold;
    max-width: 60%;
    padding-right: 2em !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23ddd' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}

.sc-select-row-select {
    font-size:1.1rem;
}

.charts-div ul {
    xborder: none;
    border-color: #333;
    border-width: 4px
}

/* pill-style blasorize tabs */

.nav-pills .nav-link {
    background-color: #343a40;
}

/* voter list selector */
#voter-list-selector-parent {
    display: flex;
    row-gap: 1em;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

    #voter-list-selector-parent > button {
        width: calc(100px + 10vw);
    }

.voter-list-step-header {
    display: flex;
    flex-direction: row;
    column-gap: 0.5em;
    align-self: start;
    align-items: center;
}

.voter-list-step-number {
    font-size: 2.5em;
    font-weight: bold;
    margin: 0.5em;
}

#voter-list-selection-results {
    display: grid;
    column-gap: 1em;
    row-gap: 1em;
    align-items: center;
    justify-items: start;
    background-color: #282828;
    border-radius: 5px;
    padding: 0.5em;
}

.voter-type-modal-main {
    display: flex;
    flex-direction: column;
    row-gap: 1em;
    text-align: left;
}

.voter-type-description-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    row-gap: 1em;
    column-gap: 1em;
}

.voter-type-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.4em;
}

.voter-type-title{
    font-size: 0.9em;
    font-weight: bold;
}

.voter-type-sublist{
    font-size: 0.6em;
}

#voter-demographics-modal-main{
    display: grid;
    justify-content: flex-start;
    row-gap: 1em;
    column-gap: 2em;
}

.voter-demographics-checklist{
    display: flex;
    flex-direction: column;
    row-gap: 0.4em;
    align-items: flex-start;
}

/* remove links from lower-right of gmap */

a[href^="http://maps.google.com/maps"] {
    display: none !important
}

.gmnoprint a, .gmnoprint span, .gm-style-cc {
    display: none;
}

.gmnoprint div {
    background: none !important;
}

/* override font size on Blazorise DropDownList */
.small-dropdown{
    font-size: 0.75rem !important;
}

    .small-dropdown > button {
        font-size: 0.75rem !important;
        padding: 2.4px 8px !important;
    }