html {
    min-height: 100%;
}

body {
    background: linear-gradient(to top, #1d2d5e 15%, #3a466b 30%, #8993ad 60%, #bac0d1 85%, #dcdfe8 100%) no-repeat scroll #1d2d5e;
}

.dataGuideLink {
    font-size: .815rem;
    font-weight: 500;
    color: #333;
}

#county-tooltip {
    display: none;
}

.bannerImg:hover {
    cursor: pointer;
}

#refresh {
    font-size: 14px;
    /*float: right;*/
    padding: 0px 8px;
    /*position: absolute;
    top: 10px;
    right: 10px;*/
    position: relative;
    top: 6px;
    z-index: 1;
    /*background-color: lightpink;*/
    color: white;
    /*border-radius: 5px;
    border: solid 1px;
    border-color: darkmagenta;*/
    display: inline-block;
}

#countdown {
    color: lightgreen;
    font-size: 16px;
}

.auto-reload-message {
    /*color: #000000*/
}

.page {
    /*max-width: 1100px;*/
    /*margin: auto;*/
}

.pageTitle {
    font-size: 36px;
    font-weight: 500;
    text-shadow: 1px 1px gray;
    text-align: left;
}

.results {
    padding: 10px;
}

/*https://neumorphism.io/#d998f0 */

.alert-message-wrapper {
    padding-top: 20px;
    text-decoration: none;
}

.alert-message {
    /*  font-size: 1rem;
    border-radius: 25px;
    background: #673578;
    box-shadow: 5px 5px 30px #673578, 0px 0px 10px #673578;*/
    margin: auto;
    width: 100%;
    min-width: 700px;
    padding: 5px;
    /*color: antiquewhite;
    text-align: center;*/
}

.gradient-sub-heading {
    color: #ffffff;
    background-color: #e9bcb7;
    background-image: linear-gradient(315deg, #e9bcb7 0%, #29524a 90%);
    font-size: 0.9em;
    font-family: sans-serif;
}

.styled-table {
    border-collapse: collapse;
    margin: 0px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 700px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
}

    .styled-table thead tr {
        text-align: left;
        text-shadow: 1px 1px #000000;
    }

    .styled-table th,
    .styled-table td {
        padding: 5px 10px;
    }

    .styled-table .thright {
        max-width: 75px;
        text-align: right;
    }

    .styled-table .thleft {
        min-width: 220px;
    }

    .styled-table tbody tr {
        border-bottom: 1px solid #dddddd;
    }

    .styled-table tbody tr {
        background-color: #fcf0ef;
    }

.totals {
    max-width: 120px !important;
    text-align: center !important;
}

.reviewTotals {
    text-align: right;
}

.member tr.selected {
    background-color: rgba(41, 103, 182, 0.89);
    color: #FFF;
}


.headContainer {
    padding-right: 8%;
    padding-left: 2%;
    margin-right: auto;
    margin-left: auto;
    background-image: url(../Images/headerBackGround1.png);
    background-size: 100% 100%;
    /*background-repeat: repeat;*/
    /*border-bottom: 1px solid gold;*/
    /*box-shadow: 0px 3px 4px grey;*/
    /*display: table;
    width: 100%;*/
}

#bannerNotice{
    max-width: 400px;
    width: 95%;
    height: 30px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: antiquewhite;
    border-radius: 0px 0px 12px 12px;
    font-weight: 600;
    font-size: 18px;
}

.bannerImg {
    max-width: 100%;
    height: auto;
}

.bannerText {
    font-size: 26px;
    text-shadow: 1px 1px gray;
    text-align: center;
    /*display: table-cell;
    vertical-align: middle;*/
}

#electionBannerText {
    color: white;
    position: absolute;
    top: 25px;
    right: 32px;
}

#electionBodyText {
    color: black;
    /*width: 100%;*/
}

.electionName {
    font-size: 36px;
}

#headNavbar {
    background-color: #001040;
    font-size: 0; /*remove space between buttons*/
    border-bottom: 1px solid #ffd700;
    border-top: 1px solid #ffd700;
    box-shadow: 0px 3px 4px grey;
    /*margin-top: 1px;*/
}
#btnRefresh {
    width: 125px;
}

    /*#headNavbar[pageState="1"] #stateNavBtn {
        color: greenyellow;
    }*/

#headNavbar[pageState="0"] #indexNavBtn input,
#headNavbar[pageState="1"] #stateNavBtn input,
#headNavbar[pageState="2"] #federalNavBtn input,
#headNavbar[pageState="3"] #judicialNavBtn input,
#headNavbar[pageState="4"] #countyNavBtn input,
#headNavbar[pageState="5"] #countyNavBtn input,
#headNavbar[pageState="6"] #reportsNavBtn input {
    box-shadow: inset -1px 3px 5px #0c1b42;
    background-color: #26386c;
    font-weight: 800;
    /*border-left: solid 1px gold;
    border-right: solid 1px gold;*/
}

.navBtn, .navBtn input, .navBtn div {
    display:inline-block;
}

.navBtn input{
    border-radius: 0px;
    color: #e0ad2b;
    font-weight: 600;
    /*width: 175px;*/
    padding: 5px 16px;
    /* display: inline;*/
    /*border-right: 1px solid #ffffff;*/
}

    .navBtn input:hover {
        color: white;
        background-color: #26386c;
    }

    .navBtn input:focus{
        color: white;
    }

    /*.navBtn:focus-within{
        outline: white 3px solid;
    }*/

#menuBtn {
    display: none;
}

.sidenav{
    display: none;
}

#btnRefresh {
    width: 125px;
}

#updatedStatusLarge {
    font-size: 14px;
    color: aliceblue;
    font-weight: 600;
    /*display: inline-block;*/
    padding: 8px;
    margin-right: 25px;
}

#updatedStatusSmall {
    color: #000000;
    font-size: 12px;
    padding-left: 10px;
    display: none;
}

.mContent {
    margin: 50px 0px 14px 0px;
    padding: 30px 10px 0px 12px;
    background-color: #F0F0F0;
    border-top: 2px solid #001040;
    border-bottom: 4px solid #001040;
    border-left: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
    border-radius: 4px 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
}

/****************Start: The side navigation menu *****https://www.w3schools.com/howto/howto_js_sidenav.asp************/
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 99; /* Stay on top */
    top: 0; /* Stay at the top */
    background-color: #083c73; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    opacity: .97;
}

    /* The navigation menu links */
    .sidenav a, select {
        padding: 8px 38px 8px 32px;
        text-decoration: none;
        font-size: 20px;
        color: whitesmoke;
        /*background-color: #083c73;*/
        display: block;
        transition: 0.3s;
        float: right;
        white-space: nowrap;
    }

        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
            color: black;
        }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 12px;
        font-size: 20px;
        margin-left: 30px;
    }

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}
/****************End: The side navigation menu *****************/


/****Start: Two Column layout***https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_two_columns_unequal***/

* {
    box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.pageContainer {
    max-width: 1100px;
    margin: auto;
}

.summary, .results {
    width: 100%;
}

/* Clear floats after the columns */
.pageContainer:after {
    content: "";
    display: table;
    clear: both;
}

/***********End: Two column layout*/

.collapsing { /*disable bootstrap collapse animation*/
    transition: none !important;
}

.contestcollapse {
    max-height: 600px;
    overflow-y: auto;
}

.collapseAllBtn {
    display: inline-block;
    position: absolute;
    right: 4px;
    font-weight: 500;
    color: #bd9122;
    text-shadow: 1px 1px grey;
    font-size: 20px;
}

    .collapseAllBtn:hover {
        color: cornflowerblue;
    }


/*#region Modal*/
/*https://www.w3schools.com/howto/howto_css_modals.asp*/
/* The Modal (background) */
.modal1 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal1-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    overflow: auto; /* Enable scroll if needed */
    max-height: 60%; /* Full height */
    max-width: 1000px;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
/*#endregion Modal*/


/*#region divTable base - must still specify width of columns by percentage*/

.divTable {
    width: 100%;
    border-top: 2px solid black;
    border-bottom: 4px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-radius: 5px;
}

.divTableHeading {
}

.divTableHeadRow {
    width: 100%;
    background-color: #444444;
    font-size: 0px;
}

.divTableHeadCell {
    padding: 5px;
    padding-left: 8px;
    color: white;
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
}

.divTableBtn {
    color: #e0ad2b;
    padding: 3px;
    display: inline-block;
}

    .divTableBtn:hover {
        color: white;
    }

.divTableBody {
}

.divTableRow {
    width: 100%;
    font-size: 0px; /*Eliminate white space between cells*/
    background-color: white;
}

    .divTableRow:not(:first-child) {
        border-top: 1px dashed dimgrey;
    }

.divTableCell {
    display: inline-block;
    font-size: 16px;
    padding: 8px;
    vertical-align: middle;
}

/*#endregion divTable*/

#dataTable .divTableBody .divTableRow a {
    color: black;
}

#dataTable .divTableRow {
    border-left: solid 4px white;
}

    #dataTable .divTableRow:hover {
        background-color: #97b1e6;
        border-left: solid 4px black;
    }


/*#region countyMap table specifics - include with divTable classes*/
/*.countyMapTableRow:not(:last-child) {
    border-bottom: 1px dashed dimgrey;
}*/

.countyMapTableRow a {
    color: black;
}

    .countyMapTableRow a:hover {
        /*color: white;*/
    }

.countyName {
    font-weight: 500;
    padding-left: 5px;
}

.countyMapTableRow {
    border-left: solid 4px #f0f0f0;
}

.countyMapTableRow[state="0"] {
    background: linear-gradient(45deg, #f0f0f0 30%, #d1d1d1 90%);
}

.countyMapTableRow[state="1"] {
    background: linear-gradient(45deg, #f0f0f0 30%, #e6cc97 90%);
}

.countyMapTableRow[state="2"] {
    background: linear-gradient(45deg, #f0f0f0 30%, #97b1e6 90%);
}

.countyMapTableRow:hover {
    border-left: solid 4px black;
}

.countyMapTableRow[state="0"]:hover {
    background: initial;
    background-color: #d1d1d1;
}

.countyMapTableRow[state="1"]:hover {
    background: initial;
    background-color: #e6cc97;
}

.countyMapTableRow[state="2"]:hover {
    background: initial;
    background-color: #97b1e6;
}



/*#endregion countyTable*/

/*#region results Tables*/

.resultTableRow {
    background: linear-gradient(to left, #001040, #001040 25%, white 25%, white 100%);
}

.collapseBtn {
    display: inline-block;
}

.divTableRow[partyid="1"] {
    border-left: solid 10px #003cb3;
}

.divTableRow[partyid="2"] {
    border-left: solid 10px #b30000;
}

.divTableRow[partyid]:not([partyid="1"]):not([partyid="2"]) {
    border-left: solid 10px grey;
}

.candidateCell {
    width: 25%;
    color: #001040;
    padding: 7px;
    font-size: 17px;
    font-weight: 500;
    text-align: right;
}

.barCell {
    width: 50%;
    font-size: 12px;
    justify-content: center;
}

.percentBar {
    height: 17px;
    width: 99%;
    background: linear-gradient(to top, darkgrey 50%, white 100%);
    border-radius: 3px;
    box-shadow: 1px 1px 4px black;
}

    .percentBar span {
        display: block;
        height: 100%;
        background: linear-gradient(to top, cornflowerblue 50%, white 100%);
        position: relative;
        border-radius: 3px;
        /*overflow: hidden;*/
    }

.dataCell {
    color: white;
    /*background-color: #001040;*/
    width: 25%;
    text-align: center;
}

/*#endregion results tables*/


/*RESPONSIVENESS SPECIFICATIONS*/
/*Medium screens - tablets and small computers*/

@media only screen and (min-width: 1008px) {
    #electionBodyText {
        display: none;
    }

    /*#updatedStatusSmall {
        display: none;
    }*/
}

@media only screen and /*(min-width: 641px) and */ (max-width:1300px) {
    /*#updatedStatusLarge {
        display: none;
    }

    #updatedStatusSmall {
        display: inline-block;
    }*/
}

@media only screen and /*(min-width: 641px) and */ (max-width:1110px) {
    .headContainer {
        /*height: 140px;*/
        background-position-x: center;
    }

    /*.headContainer img {
            display: none;
        }*/

    #electionBannerText {
        display: none;
    }

    #electionBodyText {
        display: block;
        margin-top: 20px;
    }

    .pageTitle {
        text-align: center;
    }

    .countyFiles {
        text-align: center;
    }

    #countiesReporting {
        text-align: center;
    }

    #menuBtn {
        display: initial;
    }

    .sidenav{
        display: initial;
    }

    #indexNavBtn, #stateNavBtn, #countyNavBtn, #federalNavBtn, #judicialNavBtn, #reportsNavBtn {
        display: none;
    }

}

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

    #btnRefresh {
        width: 150px;
        font-size: 20px;
    }

    #menuBtn input {
        font-size: 20px;
    }

    #refresh {
        top: 7px;
    }

    #updatedStatusLarge {
        display: none;
    }

    #updatedStatusSmall {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 16px;
    }

    .pageTitle {
        font-size: 28px;
    }

    #countiesReporting {
        font-size: 16px;
    }

    .collapseBtn {
        display: none;
    }

    .divTableCell{
        display: block;
        width: 100%;
    }

    .candidateCell{
        text-align: left;
    }

    .dataCell{
        background-color: #001040;
    }

    .resultTableRow{
        background: white;
    }

    .countyMapTableRow .divTableCell{
        display: inline-block;
    }
    
}

@media only screen and (max-width: 470px) {
    .bannerText {
        font-size: 20px;
        top: 37px;
    }

    .electionName {
        font-size: 30px;
    }
/*
    #updatedStatusSmall {
        display: none;
    }*/
}

@media only screen and (max-width: 360px) {
    #refresh {
        margin-bottom: 15px;
        margin-left: 10px;
    }
}