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

html, body, svg {
    background-color: #222;
	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: #3a79b7 }
.count-gop { fill: #c11d22; text-anchor: end }

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

.count-arrow {
    stroke: silver;
    stroke-width: 3px;
}


/* tooltip */

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

.tooltip {
    background-color: white;
    opacity: 0.95;
    border:3px solid black;
    position: fixed; /* safari bugfix for svg foreignObject */
}
.tooltip 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: 16px;
}

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

/* polygons */

.state text {
    text-anchor: middle;
    fill: white;
    font-family: Arial;
    font-size: 16px;
}

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

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


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

.over text {
    fill: black;
}

/* party identities */

/*
.dem path, .dem rect { fill: #3a79b7; }
.gop path, .gop rect { fill: #c11d22; }
.indetermined path, .indetermined rect { fill:gray }
.layer-chart .indetermined { fill:gray }
*/

.layer-america .dem .state-shape { fill: #3a79b7; }
.layer-america .gop .state-shape { fill: #c11d22; }
.layer-america .indetermined .state-shape { fill:gray; }
.layer-america .split .state-shape { fill:#774F73; }

.layer-america .dem .fakeRect { fill: #3a79b7; }
.layer-america .gop .fakeRect { fill: #c11d22; }
.layer-america .indetermined .fakeRect { fill:gray; }
.layer-america .split .fakeRect { fill:#774F73; }


.layer-chart .dem { fill: #3a79b7; }
.layer-chart .gop { fill: #c11d22; }
.layer-chart .indetermined { fill: gray; }
.layer-chart .split { fill: #774F73; }
.tooltip td.dem { background-color: #3a79b7 }
.tooltip td.gop { background-color: #c11d22 }


/* interactive elements, links */

.map-title {
    fill: white;
    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; }

.active_link .underneath-path-rect { fill: #222 }

.under-rect { fill: #222 }
.active .under-rect { fill: silver }


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

/*
.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;
}


/* 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; }