/*#region Page Structure*/
/*
body {
    background-attachment: fixed;
}*/

.indexContainer {
    width: 100%;
    height: 100%;
}

#topContainer, #bottomContainer, #leftContainer, #rightContainer {
    /*border: 2px solid;*/
}

#topContainer {
    width: 100%;
    height: 100px;
}

#bottomContainer {
    width: 100%;
    top: 267px; /*140+37+90*/
    bottom: 0;
    position: absolute;
    min-height: 810px;
    /*min-height: 700px;*/
}

#leftContainer, #rightContainer {
    display: inline-block;
    height: 100%;
    vertical-align:top;
}

#leftContainer {
    width: 60%;
}

#rightContainer {
    width: 39%;
    float: right;
}

#mapContainer, #resultsContainer {
    height: 99%;
    /*background-color: #0a6491;*/
    /*border-radius: 25px;*/
}

#resultsContainer {
    color: white;
    padding: 15px;
}

#results-tbl-container {
    height: 100%;
}

    .scroll::-webkit-scrollbar {
        width: 10px;
    }

    .scroll::-webkit-scrollbar-track {
        background-color: darkgray;
        border-radius: 5px;
    }

    .scroll::-webkit-scrollbar-thumb {
        background-color: goldenrod;
        border-radius: 5px;
    }

        .scroll::-webkit-scrollbar-thumb:hover {
            background-color: #f7d98d;
        }

        .scroll::-webkit-scrollbar-thumb:active {
            /*background-color: #6b4f09;*/
            background-color: darkgoldenrod;
        }


/*#endregion Page Structure*/

/*#region Constants*/

.scroll {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}

.results-header, .results-tbl-bar, #mapGuideTitle, #mapDetailsHeader {
    background-color: #001040;
}

.results-header, #mapGuideTitle, #mapDetailsHeader {
    border-bottom: solid 1px gold;
}

.results-title, #mapGuideTitle, #mapDetailsTitle {
    font-weight: 500;
}

#mapGuideContent, #mapDetailsBody, #results-data-container {
    /*background-color: #f2f2f2;*/
    background-color: #fcf3e9;
}

#mapGuide, #mapDetails, #results-header, #results-data-container{
    box-shadow: 7px 7px 5px rgb(0 0 0 / 0.4);
}

.results-header, #mapGuideTitle, #mapDetailsHeader {
    box-shadow: 0px 2px 5px gray;
    position: relative;
    z-index: 1;
}

/*#endregion Constants*/

/*#region Mobile header*/

#mobileHeader {
    height: 40px;
    padding: 0px 5px;
    /*background-color: #c2c7d6;*/ /*Same as page background*/
    background-color: #d6dcef; /*lighter*/
    /*background-color: #adbbe5;*/
    text-align: center;
}

#mobileElectionName, #mobileUpdateTime {
    display: inline-block;
    padding-top: 2px;
}

#mobileElectionName {
    font-size: 24px;
    font-weight: 500;
}


/*#endregion Mobile header*/

/*#region TickerTape*/

#tickerTrack {
    width: 100%;
    height: 90px;
    position: absolute;
    overflow: hidden;
    /*background-color: white;*/
    color: black;
    display: inline-block;
}

#ticker {
    height: 100%;
    /*border-top: solid 1px black;
    border-bottom: solid 1px black;*/
    position: relative;
    /*top: 4px;*/
    white-space: nowrap;
    font-size: 0px;
    box-shadow: inset 0px 2px 5px gray, inset 0px -2px 5px gray;
    /*background-color: #fcf2e8;*/
    /*background-color: #fcf7e8;*/
    background-color: #fcf3e9;
    /*background-color: #f9efd2;*/
    /*background-color: antiquewhite;*/
    /*background-color: white;*/
}

    #ticker:hover {

    }

.tickerItem {
    display: inline-block;
    height: 100%;
    width: 20%; /*fallback*/
    /*width: calc(100%/6);*/
    vertical-align: top;
    border-right: 1px solid;
    white-space: normal;
    font-size: 12px;
    /*padding: 5px;*/
}

    /*@keyframes tickerAnim {
    0% {
        transform: translate3d(10%, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}*/

    .tickerItem div {
        display: block;
    }

.tickerTitle {
    font-weight: 600;
    font-size: 12px;
    color: #4d7380;
    height: 30px;
    padding: 5px;
    /*border-bottom: solid 1px darkgoldenrod; */
}

.tickerItemContent {

}

.tickerRow {
    width: 100%;
    height: 25px;
    padding: 0px 15px 0px 5px;
}

    .tickerRow div {
        display: inline-block;
        vertical-align: middle;
    }

.tickerParty {
    height: 16px;
    width: 16px;
    border-radius: 8px;
}

.tickerCandidate {
}

.tickerTotal {
    text-align: right;
    float: right;
    font-weight: 500;
}

/*#endregion TickerTape*/

/*#region Map*/

#map{
    height: 65%;
    width: 100%;
}

    #map svg {
        height: 100%;
        max-height: 100%;
        max-width: 100%;
        filter: drop-shadow(6px 6px 2px rgb(0 0 0 / 0.4));
    }

/*g path {
    fill: #b8cad1;
}

.mapCounty path {
    fill: #057ca3;
}*/

.mapCounty {
    stroke: white;
    stroke-width: 1;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

    .mapCounty:hover{
        cursor: pointer;
    }

    /*.mapCounty path:active {
        fill: black;
    }*/

.mapCounty[data-reporting-status="45"] {
    fill: #057ca3;
}

    .mapCounty[data-reporting-status="45"]:hover {
        fill: #05b4ed;
        transition: 0.3s;
    }

.mapCounty[data-reporting-status="44"] {
    fill: #7ec6de;
}

    .mapCounty[data-reporting-status="44"]:hover {
        fill: #99e5ff;
        transition: 0.3s;
    }

.mapCounty[data-reporting-status="43"] {
    fill: #a3b2b8;
}

    .mapCounty[data-reporting-status="43"]:hover {
        fill: #b8cad1;
        transition: 0.3s;
    }

a.current .mapCounty {
    /*filter: drop-shadow(10px 10px 5px rgb(0 0 0 / 0.4));*/
    position: relative;
    z-index: 99;
    /*stroke: goldenrod;
    stroke-width: 3;*/
    fill: goldenrod;
    /*pointer-events: none;*/
}

    a.current .mapCounty:hover {
        /*cursor: default;*/
        /*fill: goldenrod;*/
        fill: #eacb7b;
        transition: 0.3s;
    }

a.current {
    /*pointer-events: none;*/
    /*cursor: default;*/
}

/*#endregion Map*/

/*#region County Name Tooltip*/

#county-tooltip {
    display: none;
    pointer-events: none;
    position: absolute;
    font-size: 16px;
    text-align: center;
    background-color: white;
    z-index: 99;
    /*height: 30px;*/
    padding: 5px;
    border-radius: 5px;
    transform: translateX(-50%);
}

@media(hover:hover) {
    #county-tooltip.active {
        display: block;
    }
}

/*#countyName {
    font: 12px Arial;*/
    /*width: 100%;*/
    /*display: none;
}

#county-tooltip {
    position: relative;
}

#countyName:hover {

}*/

/*#endregion County Name Tooltip*/

/*#region Map Guide*/

#mapGuide {
    position: absolute;
    width: 15%;
    min-width: 315px;
    height: 145px;
    background-color: white;
    z-index: 1;
    top: 15px;
    left: 15px;
    border-radius: 10px;
    /*box-shadow: 7px 7px 2px rgb(0 0 0 / 0.4);*/
}

#mapGuideContent {
    height: 105px;
    padding: 6px;
    border-radius: 0px 0px 10px 10px;
}

#mapGuideReporting {
    padding: 5px;
    border-bottom: solid 1px gray;
}

#mapGuideDropdown {
    display: block;
    width: 100%;
    position: relative;
    bottom: -15px;
}

#mapGuideDropdown div, #countyDropdown{
    display: inline-block;
}


#mapColorGuideTitle, #map-color-guide, #mapGuideDropdown {
    padding: 2px 5px;
}

#mapGuideTitle, #mapDetailsHeader {
    width: 100%;
    height: 40px;
    color: white;
    font-weight: 500;
    font-size: 16px;
    padding: 7px;
    padding-left: 12px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

#map-color-guide {
    padding-bottom: 7px;
    display: inline-block;
    width: 100%;
    /*border-bottom: solid 1px gray;*/
}

    #map-color-guide div {
        display: inline-block;
        vertical-align: middle;
    }

.map-color-guide-color {
    height: 20px;
    width: 20px;
    margin-right: 5px;
    border: solid 1px black;
}

#color-finished {
    background-color: #057ca3;
}

#color-partial {
    background-color: #7ec6de;
}

#color-none {
    background-color: #a3b2b8;
}

#color-selected {
    background-color: #daa520;
}

.map-color-guide-text {
    font-size: 14px;
    margin-right: 10px;
    /*width: 20%;*/
}

#countyDropdown {
    color: black;
    max-width: 230px;
    width: 80%;
    height: 35px;
    font-size: 14px;
    padding: 0px 0px 0px 5px;
    position: relative;
    top: -4px;
}

/*#topContainer select {
    padding: 8px 38px 8px 32px;
    text-decoration: none;
    font-size: 20px;*/
    /* background-color: #083c73; */
    /*display: block;
    transition: 0.3s;
    color: black;
    float: none;
}*/

/*#endregion Map Guide*/

/*#region Map Details*/

#mapDetailsContainer {
    width: 100%;
    height: 34%;
    padding: 15px;
    padding-top: 0px;
    padding-right: 0px;
}

#mapDetails {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    /*background-color: white;*/
    /*position: absolute;
    bottom: 90px;
    left: 50px;*/
}

#mapDetailsHeader {
    position: relative;
    z-index: 1;
}

#mapDetailsTitle, #mapDetailsTitleReporting {
    display: inline-block;
}

#mapDetailsTitleReporting {
    float: right;
    margin-right: 10px;
    color: #b6dfff;
}

#mapDetailsMobileTitle {
    display: none;
}

#mapDetailsDropdown {
    display: none;
    color: black;
}

#mapDetailsBody {
    padding: 10px;
    height: 100%;
    position: relative;
    top: -40px;
    padding-top: 50px;
    border-radius: inherit;
}

#mapDetailsContent {
    background-color: white;
    border: solid 1px grey;
    border-bottom: solid 4px lightgrey;
    border-radius: 10px;
    height: 100%;
    width: 100%;
    padding: 10px;
    text-align: center;
}

#mapDetailsContent[state="1"] .details-col {
    width: 49%;
}

#mapDetailsContent[state="2"] .details-col {
    width: 32%;
}

    #mapDetailsContent[state="1"] .details-col1 {
        border-right: dashed 1px grey; 
    }

    #mapDetailsContent[state="2"] .details-col1,
    #mapDetailsContent[state="2"] .details-col2 {
        border-right: dashed 1px grey;
    }

.details-col {
    display: inline-block;
    vertical-align: top;
    height: 75%;
    border-bottom: dashed 1px grey;
    padding-top: 10px;
    /*border: solid 1px blue;*/
}

.details-row {
    /*border: solid 1px blue;*/
    text-align: center;
}

.details-row-title {
    text-align: center;
    font-weight: 600;
    color: #4d7380;
    padding-bottom: 10px;
    font-size: 18px;
}

.details-item {
    /*width: 49%;*/
    display: inline-block;
    /*border: solid 1px blue;*/
}

.details-item1 {
    /*width: 60%;*/
    text-align: right;
}

.details-item2 {
    /*width: 38%;*/
    text-align: left;
    padding-left: 6px;
}

#detailsDownloads {
    text-align: left;
    height: 24%;
}

    #detailsDownloads div{
        display: inline-block;
        margin-left: 60px;
        margin-top: 18px;
    }

.downloadBtn {
    margin-left: 8px;
    border-radius: 2px;
}

    .downloadBtn path, .downloadBtn polyline, .downloadBtn line {
        stroke: black;
    }

    .downloadBtn:hover svg {
        background-color: darkgoldenrod;
    }

        .downloadBtn:hover path, .downloadBtn:hover polyline, .downloadBtn:hover line {
            stroke: white;
        }

    .downloadBtn svg {
        width: 30px;
        height: 30px;
        position:relative;
        top: -4px;
        background-color:goldenrod;
        border-radius: 4px;
    }

/*#endregion Map Details*/

/*#region Party Select*/
#party-container {
    float: right;
}

    #party-container a {
        display: inline-block;
        padding: 2px 10px;
        font-size: 14px;
        font-weight: 400;
        color: white;
        text-decoration: none;
        border-radius: 11px;
        /*background-color: midnightblue;*/
        box-shadow: inset 2px 2px 3px #5367a3, inset -1px -1px 3px #010512;
    }

        #party-container a:hover {
            background-color: #f0c048;
            color: black;
            box-shadow: inset 3px 3px 5px #f7d98d, inset -1px -1px 3px #6b4f09;
        }

        #party-container a.current, #party-container a:active {
            /*background-color: darkslateblue;*/
            background-color: #f0c048;
            color: black;
            box-shadow: inset 3px 3px 5px #6b4f09, inset -1px -1px 3px #f7d98d;
        }

#partyDropdown {
    width: 100%;
    float: none;
    color: black;
    max-width: 230px;
    height: 30px;
    font-size: 14px;
    padding: 0px 0px 0px 5px;
}

#mobile-party-container {
    display: none;
}

/*#endregion Party Select*/

/*#region Results*/

#results-data-container { /*includes county reults + favorites, excludes party buttons. Scrollable*/
    /*background-color: white;*/
    width: 100%;
    height: 99%;
    display: block;
    /*border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;*/
    border-radius: 10px;
    position: relative;
    bottom: 50px;
    padding-top: 50px;
    padding-right: 5px;
    padding-bottom: 0px;
}

#gpu-results { /*county results window, minimizable*/
    padding: 2px;
}

#results-no-contests {
    font-size: 20px;
    color: black;
}

.results-header div, .results-tbl-bar {
    color: white;
    font-size: 16px;
    height: 100%;
    padding: 10px;
}

#mobile-party-container {
    padding: 8px 10px 0px 0px;
}

.results-header {
    height: 50px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    z-index: 2;
    /*box-shadow: 0px 2px 5px gray;*/
}

    .results-header div {
        display: inline-block;
    }

.results-title {

}

.results-tbl {
    margin: 15px;
    opacity: 1.00;
    border-radius: 10px 10px 5px 5px;
    box-shadow: 4px 6px 6px gray;
}

.results-tbl-bar {
    height: 50px;
    border-radius: 10px 10px 0px 0px;
}

    .results-tbl-bar div {
        display: inline-block;
    }

.results-tbl-title {
    margin-top: 2px;
    /*width: 90%;*/
}

.results-tbl-bar-party {
    /*width: 9%;*/
    /*text-align: right;*/
    float: right;
}

    .results-tbl-bar-party img {
        /*height: 35px;*/
    }

.demIco {
    position: relative;
    top: -9px;
    /*left: -2px;*/
}

.repIco {
    position: relative;
    top: -7px;
    /*left: -5px;*/
}

    .results-tbl-bar-party[partyId = "1"] {
        color: #0000CD;
        font-weight: 900;
        text-shadow: -1px 1px 1px #FFF, 1px 1px 1px #FFF, 1px -1px 1px #FFF, -1px -1px 1px #FFF;
    }

        /*.results-tbl-bar-party[partyId = "1"] img {
            content: url(~\Images\demIcon-1.png);
        }*/

    .results-tbl-bar-party[partyId = "2"] {
        color: #E41B17;
        font-weight: 900;
        text-shadow: -1px 1px 1px #FFF, 1px 1px 1px #FFF, 1px -1px 1px #FFF, -1px -1px 1px #FFF;
    }

    .results-tbl-bar-party:not([partyid="1"]):not([partyid="2"]) {
        width: 0%;
    }

.results-tbl-content {
    border: solid 1px lightgrey;
    border-top: none;
    border-bottom: solid 3px lightgrey;
    padding: 5px;
    border-radius: 0px 0px 5px 5px;
    background-color: white;
}

.results-tbl-body-row {
    margin-bottom: 5px;
}

.results-tbl-row {
    font-size: 0px; /*For all columns to be flush side-by-side*/
}

.results-tbl-row-bar {
    width: 100%;
    height: 3px;
}

    .results-tbl-row-bar[partyid="1"] {
        background-color: #a8d5ff;
    }

    .results-tbl-row-bar[partyid="2"] {
        background-color: #fcc5c5;
    }

    .results-tbl-row-bar[partyid]:not([partyid="1"]):not([partyid="2"]) {
        background-color: bisque;
    }

    .results-tbl-row-bar span {
        height: inherit;
        display: block;
    }

    .results-tbl-row-bar[partyid="1"] span, .tickerParty[partyid = "1"] {
        background-color: #0000CD;
    }

    .results-tbl-row-bar[partyid="2"] span, .tickerParty[partyid = "2"] {
        background-color: #E41B17;
    }

    .results-tbl-row-bar[partyid]:not([partyid="1"]):not([partyid="2"]) span, .tickerParty[partyid]:not([partyid="1"]):not([partyid="2"]) {
        background-color: darkgoldenrod;
    }

    .results-tbl-header, .results-tbl-footer-total {
        font-weight: 700;
    }

.results-tbl-header {
    padding-bottom: 5px;
    white-space: nowrap;
} 

.results-tbl-footer {
    padding-top: 5px;
}

.results-tbl-row div {
    display: inline-block;
    /*border: solid 1px blue;*/
    font-size: 14px;
    color: black;
}

/*.results-tbl-header div {
    font-size: 12px;
}*/

.results-tbl-col1 {
    width: 39%;
}

.results-tbl-col2 {
    width: 10%;
}

.results-tbl-col3 {
    width: 20%;
    text-align: right;
}

.results-tbl-col4 {
    width: 20%;
    text-align: right;
}

.results-tbl-col5 {
    width: 10%;
    text-align: right;
}

/*#endregion Results*/

/*#region Responsive Queries*/

#electionBodyText {
    display: none;
}

#mobileHeader {
    display: none;
}

#mobileElectionName, #mobileUpdateTime {
    display: none;
}

#updatedStatusSmall {
    display: none;
}

#mapDetailsMobileReporting {
    display: none;
}

@media only screen and (max-width: 1770px) {
    .results-header {
        height: 80px;
    }
        .results-header div {
            display: block;
            height: auto;
            padding-top: 5px;
            padding-bottom: 5px;
        }

    #party-container {
        float: none;
    }

    #results-data-container {
        bottom: 80px;
        padding-top: 80px;
    }
}

@media only screen and (max-width:1400px) {
   
    .tickerItem {
        width: 25%;
    }

    #bottomContainer {
        position: static;
        height: 100%;
    }

    #leftContainer, #rightContainer {
        display: block;
        width: 100%;
    }

    #mapGuide {
        top: 280px;
    }

    #mapDetailsContainer {
        padding: 15px;
    }

    #mapDetails {
        height: 260px;
    }

    #results-data-container {
        bottom: 50px;
        padding-top: 50px;
    }

    .results-header {
        height: 50px;
    }

    .results-header div {
        display: inline-block;
        padding: 10px;
    }

    #party-container {
        float: right;
    }

}

@media only screen and (max-width:1110px) {

    #mapGuide {
        top: 320px;
    }
    
    .tickerItem {
        width: 50%;
        width: calc(100%/3);
    }

    #map {
        padding-top: 50px;
    }

    #topContainer {
        height: 130px;
    }

    #mobileHeader {
        display: block;
    }

    #mobileElectionName {
        display: block;
    }
}

/*@media only screen and (max-width:730px) {
    .tickerItem {
        width: 50%;
    }
}*/

/*Small screens - phones / TVs*/
@media only screen and (max-width:750px) {

    #topContainer {
        height: 175px;
    }
    
    .tickerItem {
        width: 50%;
    }

    #mobileHeader {
        height: 75px;
    }

    #mobileUpdateTime, #mobileElectionName {
        padding-top: 8px;
        font-size: 18px;
    }

    #updatedStatusLarge {
        display: none;
    }

    #mobileUpdateTime {
        display: block;
    }
    
    #map, #mapGuide {
        display: none;
    }

    #bottomContainer {
        position: static;
        height: 100%;
    }

    #leftContainer, #rightContainer {
        display: block;
        width: 100%;
    }

    #mapDetailsContainer {
        padding: 15px;
    }

    #mapDetails {
        height: auto;
    }

    #mapDetailsHeader {
        height: 50px;
        padding: 0px;
    }

        #mapDetailsHeader div {
            padding: 10px;
        }

    #mapDetailsBody {
        position: static;
        padding-top: 10px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    #mapDetailsHeader {
        font-size: 18px;
    }

    #mapDetailsTitle {
        display: none;
    }

    #mapDetailsMobileTitle, #mapDetailsDropdown {
        display: inline-block;
    }

    #mapDetailsDropdown {
        height: 30px;
        color: white;
        /*font-weight: 500;*/
        float: right;
    }

    #mobileCountyDropdown {
        width: 100%;
        float: none;
        color: black;
        max-width: 230px;
        height: 30px;
        font-size: 14px;
        padding: 0px 0px 0px 5px;
    }

    #mapDetailsTitleReporting {
        display: none;
    }

    #mapDetailsMobileReporting {
        display: block;
        text-align: center;
        font-weight: 600;
        color: #4d7380;
        font-size: 16px;
    }

    #mapDetailsContent {
        padding-top: 0px;
    }

    .details-col {
        display: block;
        padding-bottom: 10px;
        margin-right: 0px;
    }

    #mapDetailsContent[state="1"] .details-col, 
    #mapDetailsContent[state="2"] .details-col {
        width: 99%;
    }

    #mapDetailsContent[state="1"] .details-col1,
    #mapDetailsContent[state="2"] .details-col1,
    #mapDetailsContent[state="2"] .details-col2 {
        border-right: none;
    }

    #detailsDownloads {
        text-align: center;
    }

        #detailsDownloads div {
            margin-left: 0px;
            padding-right: 20px;
        }

    #results-data-container {
        top: 0px;
        padding-top: 0px;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
    }

    #results-data-container {
        box-shadow: none;
    }

    #results-tbl-container {
        border-radius: 10px;
        box-shadow: 7px 7px 5px rgb(0 0 0 / 0.4);
    }
}

@media only screen and (max-width: 700px) {

    .results-tbl-row-data div{
        font-size: 14px;
    }

    .results-tbl-row div.results-tbl-col3, .results-tbl-row div.results-tbl-col5 {
        display: none;
    }

    .results-tbl-col1 {
        width: 59%;
    }

    .results-tbl-col2 {
        width: 10%;
    }

    .results-tbl-col4 {
        width: 30%;
    }

}

@media only screen and (max-width: 680px) {
    #party-container {
        display: none;
    }

    #mobile-party-container {
        display: block;
        float: right;
        /*width: 40%;*/
    }

    .results-header {
        height: auto;
    }

    .results-title{
        width: 60%;
        white-space: normal;
    }
}

@media only screen and (max-width:500px) {
    #tickerTrack {
        display: none;
    }

    #topContainer {
        height: 75px;
        box-shadow: 0px 2px 5px gray;
    }
}

@media only screen and (max-width:480px) {
    /*.results-header {
        height: 80px;
    }*/
    
    #party-container {
        display: none;
    }

    .results-tbl-bar {
        height: auto;
    }

    .results-tbl-bar-party {
        /*height: 100%;*/
    }
    
    .demIco, .repIco {
        height: 35px;
        vertical-align: middle;
        position: relative;
        top: -6px;
    }

    .results-tbl-title {
        width: 75%;
        font-size: 14px;
    }

    /*.results-tbl-header div {
        font-size: 12px;
    }*/

    .results-tbl-col1 {
        width: 60%;
    }
    
    .results-tbl-col4{
        width: 40%;
    }

    /*.results-tbl-header-name, .results-tbl-header-total {
        width: 50%;
    }*/

    .results-tbl-row div.results-tbl-col2{
        display: none;
    }

}

@media only screen and (max-width: 320px) {
    #mobile-party-container {
        width: 40%;
    }
}


/*#endregion Responsive Queries*/