html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

html, body, svg {
    background-color: #f0f1f2;
	font-family: sans-serif;
	font-size: 16px;
}

svg { top: 0px; left: 0px; }
svg text { pointer-events: none; }

/* thanks s/o # 826782 */
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

/* counts and candidates  */
.total-count {
    font-size: 66px;
    fill: silver;
    font-family: Arial;
}

.count-dem { fill: #5d8aa6 }
.count-gop { fill: #d53d40; text-anchor: end }

.count-270 {
    text-anchor: middle;
    font-family: Arial;
    font-size: 14px;
    fill: black;
}

.count-arrow {
    stroke: #4D4D4D;
    fill: #4D4D4D;
    stroke-width: 3px;
}

/* tooltip */

svg g.tooltip, svg g.tooltip2 {
    transition: position 1s ease-in-out;
    pointer-events: none;
}

.tooltip, .tooltip2 {
    background-color: white;
    opacity: 0.95;
    border:3px solid black;
    position: fixed; /* safari bugfix for svg foreignObject */
}
.tooltip h1, .tooltip2 h1 {
    text-align: center;
    font-weight: bold;
    margin:0;
    padding:0;
    padding-top:5px;
    font-size: 16px;
    font-family: Arial;
}

.tooltip table {
    margin-top: 5px;
    width: 100%;
    border-collapse: collapse;
}
.tooltip td { width: 25%; }
.tooltip th { width: 25%; }

.tooltip td, .tooltip th {
    text-align: center;
    padding: 3px;
    font-family: Arial;
    font-size: 14px;
}

.tooltip-name { padding: 5px }

.this-year td, .this-year th { background-color: gray }

/* polygons */

.state text {
    text-anchor: middle;
    fill: #f0f1f2;
    font-family: Arial;
    font-size: 14px;
}

.state rect {
    stroke: white;
    stroke-width: 1;
}

.state path { transition: all 0.3s ease-in-out; }


.recently_updated path {
    stroke: #d7b016;
    stroke-width: 10px;
    stroke-opacity: 0.5;
}

g#DC.recently_updated path { stroke-width: 0.5px; }


.over path, path.over {
    stroke: #d7b016;
    stroke-width: 6px;
}
.over rect {
    stroke: #d7b016;
}

.over text {
    fill: #d7b016;
}

/* party identities */

/*
.dem path, .dem rect { fill: #5d8aa6 ; }
.gop path, .gop rect { fill: #d53d40; }
.indetermined path, .indetermined rect { fill:gray }
.layer-chart .indetermined { fill:gray }
*/

.layer-america .dem .state-shape { fill: #5d8aa6; }
.layer-america .gop .state-shape { fill: #d53d40; }
.layer-america .indetermined .state-shape { fill:gray; }
.layer-america .split .state-shape { fill:#774F73; }

.layer-america .dem .fakeRect { fill: #5d8aa6; }
.layer-america .gop .fakeRect { fill: #d53d40; }
.layer-america .indetermined .fakeRect { fill:gray; }
.layer-america .split .fakeRect { fill:#774F73; }


.layer-chart .dem { fill: #5d8aa6; }
.layer-chart .gop { fill: #d53d40; }
.layer-chart .indetermined { fill: gray; }
.layer-chart .split { fill: #774F73; }
.tooltip td.dem { background-color: #5d8aa6 }
.tooltip td.gop { background-color: #d53d40 }


/* interactive elements, links */

.map-title {
    fill: black;
    font-size: 30px;
    font-family: Arial;
    text-anchor: middle;
}

/* .active_link { cursor: pointer } */
.active_link .under-rect { fill: #222 }
/* .active_link:hover text { text-decoration: underline; } */

.clickable { opacity: 0; cursor: pointer }

/* .active_link .clickable { fill: #f0f1f2 } */

.underline { fill: #333 }
.active .underline { fill: #d7b016 }


.active_link text {
    fill: black;
    font-size: 16px;
    font-family: Arial;
}
.active_link:hover text { fill: gray }

/*
.active path { fill: #d7b016 !important }
*/

/* .expand_link { text-anchor: middle } */

/* embed code + link */

/* .embed_link { text-anchor: end } */

.embed p { margin-top:0; padding: 0; margin-bottom:0.5em }
.embed {
    background-color: white; opacity: 0.9;
    font-family: Arial;
    font-size: 16px;
    padding: 1em;
}
.ta-wrap {
    padding: 10px;
}
.embed textarea {
    width: 100%;
    resize: none;
    font-family: Courier New;
    font-size: 16px;
}

.embed_code_head { display: flex; justify-content: space-between;}

select { font-family: Arial; font-size: 16px; }

label, #hide_voa_logo { cursor:pointer }

/* .embed-open { } */

textarea::-moz-selection { background: yellow; }
textarea::selection { background: yellow; }

/* dc and hi adjustments */
g#HI.over text { fill: white; }
g#DC  .state-shape path { stroke-width: 0.5px; }
g#DC.over .state-shape {
    transform: scale(50);
    stroke-width: 0.1px;
    translate: -50px -50px;
}

/* ltr adjustments */
/* body.dir-rtl .count-gop { text-anchor: start } */
/* body.dir-rtl .count-dem { text-anchor: end } */
/* body.dir-rtl .active_link text { text-anchor: start } */
/* text.active-link { text-anchor: end } */
/* label position fixes */


g#CA text { transform: translate(-19px, 0px) }
g#TX text { transform: translate(22px, 0px) }
g#AK text { transform: translate(-12px, -10px) }
g#HI text { transform: translate(-5px, 20px) }
g#LA text { transform: translate(-25px, 0px) }
g#FL text { transform: translate(47px, 0px) }
g#ID text { transform: translate(0px, 50px) }
g#MN text { transform: translate(-15px, 10px) }
g#KY text { transform: translate(18px, 8px) }
g#WV text { transform: translate(-10px, 15px) }
g#VA text { transform: translate(22px, 7px) }
g#MI text { transform: translate(36px, 41px) }
g#WA text { transform: translate(5px, 7px) }
g#TN text { transform: translate(-13px, 9px) }
g#OH text { transform: translate(0px, 10px) }
g#OK text { transform: translate(32px, 3px) }
g#NC text { transform: translate(30px, 5px) }
g#PA text { transform: translate(-3px, 7px) }
g#NV text { transform: translate(0px, -19px) }
g#OR text { transform: translate(0px, 12px) }
g#UT text { transform: translate(4px, 14px) }
g#CO text { transform: translate(4px, 6px) }
g#KS text { transform: translate(0px, 5px) }
g#AL text { transform: translate(-3px, 0px) }
g#MT text { transform: translate(8px, 8px) }
g#SC text { transform: translate(8px, 0px) }
g#AR text { transform: translate(-4px, 7px) }
g#GA text { transform: translate(1px, 8px) }
g#AZ text { transform: translate(5px, 0px) }
g#WY text { transform: translate(5px, 7px) }
g#NY text { transform: translate(9px, 4px) }
g#ME text { transform: translate(-3px, 0px) }
g#ND text { transform: translate(0px, 7px) }
g#IA text { transform: translate(-2px, 6px) }
g#NE text { transform: translate(2px, 7px) }
g#MO text { transform: translate(0px, 9px) }
g#NM text { transform: translate(6px, 2px) }
g#WI text { transform: translate(3px, 11px) }
g#IL text { transform: translate(4px, 0px) }
g#SD text { transform: translate(0px, 2px) }
g#MS text { transform: translate(2px, 2px) }
g#IN text { transform: translate(1px, 3px) }

/* responsive */

/* full width adjustments */
.lang-om .map-title { font-size: 26px }
.lang-ti g.tooltip foreignObject { width: 350px; height: 350px; }
.lang-sw .map-title { font-size: 23px }
.lang-nd .map-title { font-size: 20px }
.lang-nd g.tooltip foreignObject { width: 350px; height:350px; }
.lang-fr-bm .map-title { font-size: 26px; }
.lang-hy .map-title { font-size: 23px; }
.lang-hy g.tooltip foreignObject { width: 350px; }
.lang-hy th { word-wrap: anywhere }
.lang-ka .map-title { font-size: 24px }
.lang-ka g.tooltip foreignObject { width: 350px; height:325px; }
.lang-uk .map-title { font-size: 24px }
.lang-my .map-title { font-size: 16px; }
.lang-km .map-title { font-size: 21px; }
.lang-km g.tooltip foreignObject { width: 350px; height:325px; }
.lang-lo .map-title { font-size: 26px; }
.lang-lo g.tooltip foreignObject { width: 350px; height:325px; }
.lang-th g.tooltip foreignObject { width: 350px; height:325px; }
.lang-vi .map-title { font-size: 26px; }
.lang-prs .map-title { font-size: 26px; }
.lang-ps-af .map-title { font-size: 23px; }
.lang-ps-af g.tooltip foreignObject { width: 350px; height:325px; }
.lang-ku-iq .map-title { font-size: 26px; }
.lang-ku-iq g.tooltip foreignObject { width: 350px; height:325px; }
.lang-tr g.tooltip foreignObject { width: 350px; height:325px; }
@media screen and (max-width: 900px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 16.0px } }
@media screen and (max-width: 876px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 16.4px } }
@media screen and (max-width: 852px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 16.7px } }
@media screen and (max-width: 828px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 17.1px } }
@media screen and (max-width: 804px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 17.4px } }
@media screen and (max-width: 780px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 17.8px } }
@media screen and (max-width: 756px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 18.2px } }
@media screen and (max-width: 732px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 18.5px } }
@media screen and (max-width: 708px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 18.9px } }
@media screen and (max-width: 684px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 19.2px } }
@media screen and (max-width: 660px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 19.6px } }
@media screen and (max-width: 636px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 20.0px } }
@media screen and (max-width: 612px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 20.3px } }
@media screen and (max-width: 588px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 20.7px } }
@media screen and (max-width: 564px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 21.0px } }
@media screen and (max-width: 540px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 21.4px } }
@media screen and (max-width: 516px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 21.8px } }
@media screen and (max-width: 492px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 22.1px } }
@media screen and (max-width: 468px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 22.5px } }
@media screen and (max-width: 444px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 22.8px } }
@media screen and (max-width: 420px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 23.2px } }
@media screen and (max-width: 396px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 23.6px } }
@media screen and (max-width: 372px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 23.9px } }
@media screen and (max-width: 348px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 24.3px } }
@media screen and (max-width: 324px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 24.6px } }
@media screen and (max-width: 300px) { .layer-america .state text, .expand_link text, .embed_link text, text.count-270 { font-size: 25.0px } }

@media screen and (max-width: 450px) { .embed_link { display: none }}
@media screen and (max-width: 350px) {
    .layer-america .state text { display: none }
    .layer-tooltip { display: none }
    path.textrect { display: none }
}

@media screen and (max-width: 400px) { .layer-navigation { display: none }}

@media screen and (max-width: 1000px) { .tooltip2 { font-size: 18.0px; } }
@media screen and (max-width: 960px) { .tooltip2 { font-size: 19.5px; } }
@media screen and (max-width: 920px) { .tooltip2 { font-size: 20.9px; } }
@media screen and (max-width: 880px) { .tooltip2 { font-size: 22.4px; } }
@media screen and (max-width: 840px) { .tooltip2 { font-size: 23.9px; } }
@media screen and (max-width: 800px) { .tooltip2 { font-size: 25.3px; } }
@media screen and (max-width: 760px) { .tooltip2 { font-size: 26.8px; } }
@media screen and (max-width: 720px) { .tooltip2 { font-size: 28.3px; } }
@media screen and (max-width: 680px) { .tooltip2 { font-size: 29.7px; } }
@media screen and (max-width: 640px) { .tooltip2 { font-size: 31.2px; } }
@media screen and (max-width: 600px) { .tooltip2 { font-size: 32.7px; } }
@media screen and (max-width: 560px) { .tooltip2 { font-size: 34.1px; } }
@media screen and (max-width: 520px) { .tooltip2 { font-size: 35.6px; } }
@media screen and (max-width: 480px) { .tooltip2 { font-size: 37.1px; } }
@media screen and (max-width: 440px) { .tooltip2 { font-size: 38.5px; } }
@media screen and (max-width: 400px) { .tooltip2 { font-size: 40.0px; } }
@media screen and (max-width: 400px) {  text.map-title { font-size: 40.0px; } }
@media screen and (max-width: 393.33333333333px) {  text.map-title { font-size: 40.3px; } }
@media screen and (max-width: 386.66666666667px) {  text.map-title { font-size: 40.7px; } }
@media screen and (max-width: 380px) {  text.map-title { font-size: 41.0px; } }
@media screen and (max-width: 373.33333333333px) {  text.map-title { font-size: 41.3px; } }
@media screen and (max-width: 366.66666666667px) {  text.map-title { font-size: 41.7px; } }
@media screen and (max-width: 360px) {  text.map-title { font-size: 42.0px; } }
@media screen and (max-width: 353.33333333333px) {  text.map-title { font-size: 42.3px; } }
@media screen and (max-width: 346.66666666667px) {  text.map-title { font-size: 42.7px; } }
@media screen and (max-width: 340px) {  text.map-title { font-size: 43.0px; } }
@media screen and (max-width: 333.33333333333px) {  text.map-title { font-size: 43.3px; } }
@media screen and (max-width: 326.66666666667px) {  text.map-title { font-size: 43.7px; } }
@media screen and (max-width: 320px) {  text.map-title { font-size: 44.0px; } }
@media screen and (max-width: 313.33333333333px) {  text.map-title { font-size: 44.3px; } }
@media screen and (max-width: 306.66666666667px) {  text.map-title { font-size: 44.7px; } }
@media screen and (max-width: 300px) {  text.map-title { font-size: 45.0px; } }