.wd--vote--root {
    --wd--font-base: "Nunito Sans", "Adjusted Verdana Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wd--font-display: "Onest", "Adjusted Verdana Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    --wd--font-map: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    --wd--font-weight: 600;

    --wd--color-surface: #161616;
    --wd--color-surface-raised: #2d2d2d;
    --wd--color-surface-muted: #545454;
    --wd--color-surface-dark: #333333;
    --wd--color-accent: #F40F97;
    
    --wd--border-top: 7px solid #F40F97;
    --wd--color-text: #ffffff;
    --wd--color-text-inverted: #000000;
    --wd--color-text-muted: #8a8a8a;
    --wd--color-text-subtle: #a9a9a9;
    --wd--color-live-text: #ffffff;
    --wd--color-tooltip-surface: #ffffff;
    --wd--color-tooltip-divider: #ECECEC;
    --wd--color-tooltip-shadow: rgba(0, 0, 0, 0.25);
    --wd--color-map-gesture-screen: rgba(22, 22, 22, 0.6);
    --wd--color-election-border: #545454;
    --wd--color-election-eliminated: #F40F97;
    --wd--color-election-elected: #27F590;
    --wd--color-election-elected-background: #27f5906b;
    --wd--color-party-default: #999999;
    --wd--color-party-dem-main: #0F6CF5;
    --wd--color-party-dem-secondary: #89B9FF;
    --wd--color-party-dem-tertiary: #014BB9;
    --wd--color-party-rep-main: #f40f97;
    --wd--color-party-rep-secondary: #EC7ABE;
    --wd--color-party-rep-tertiary: #AB0066;
    --wd--color-party-ind-main: #8B51D4;
    --wd--color-party-ind-secondary: #A889D0;
    --wd--color-party-ind-tertiary: #6E1BD6;
     --wd--color-third-party: #3B787A;
    --wd--color-battleground: #F5D30F;
}

.wd--vote--root p {
    line-height: normal;
}

.wd--map--container {
    width: auto;
    margin-left: 0;
}

.wd--map--container-bleed {
    width: 100vw;
    margin-left: -16px;
}

@media (min-width: 768px) {
    .wd--map--container-bleed {
        width: auto;
        margin-left: 0;
    }
}


.insert.jumbo .wd--map--container {
    margin-left: 0;
}

.wd--mid--wrapper {
    background-color: var(--wd--color-surface);
    border-top: var(--wd--border-top);
}

.wd--mid--live-button {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    height: 20px;
    font-family: var(--wd--font-display);
    font-size: 11px;
    background-color: var(--wd--color-accent);
    color: var(--wd--color-live-text);
    text-transform: uppercase;
    padding-right: 0.25rem;
    padding-left: 0.25rem;
    margin-top: 5px;
    margin-left: 5px;
}

.wd--mid--live-button.wd--mid--live-button-prog {
    background-color: var(--wd--color-surface-muted);
}

.wd--mid--live-blink {
    background-color: var(--wd--color-live-text);
}

.prog-blink {
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin-right: 0.25rem;
    background-color: var(--wd--color-text);
}

.live-blink {
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin-right: 0.25rem;
    background-color: var(--wd--color-text);
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.wd--mid-overview--wrapper {
    display: flex;
    flex-flow: column wrap;
}

.wd--mid-title--card {
    font-weight: 400;
}
.wd--mid-card--wrapper {
    display: flex;
    flex-flow: column wrap;
    background-color: var(--wd--color-surface-raised);
    color: var(--wd--color-text);
    font-family: var(--wd--font-base);
    padding: 12px;
    font-size: 12px;
    border-radius: 4px;
}

.wd--mid-card--wrapper.wd--mid-card--tooltip {
    padding: 10px 12px 10px 12px;
}

.wd--mid-card--top {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding-bottom: 12px;
}

.wd--mid-card--tooltip > .wd--mid-card--top {
    padding-bottom: 8px;
}

.wd--mid-card--tooltip-tt > .wd--mid-card--top{
    padding-bottom: 4px;
}

.wd--mid-card--titleCont {
    display: flex;
    flex-flow: column wrap;
}

.wd--mid-card--subtitleRow {
    display: flex;
    flex-flow: row nowrap;
    gap: 4px;
}

.wd--mid-title--battleground {
    color: var(--wd--color-battleground);
    padding: 1px;
    align-self: center;
    font-size: 10px !important;
    font-family: var(--wd--font-display);
    text-transform: uppercase;
}

.wd--mid-card--tagCont {
    display: flex;
    flex-flow: column wrap;
    align-self: flex-start;
}

.wd--mid-title--card {
    font-family: var(--wd--font-display);
    font-size: 19px;
    line-height: 1.75rem;
}

.wd--mid-subtitle--card {
    font-size: 13px !important;
    color: var(--wd--color-text-muted);
    font-weight: var(--wd--font-weight);
}

.wd--mid-tagtitle--card {
    font-size: 11px !important;
    text-align: right;

    color: var(--wd--color-text-muted);
    font-weight: var(--wd--font-weight);
}

.wd--mid-tooltip--tagName {
    font-family: var(--wd--font-display);
    font-size: 11px !important;
}

.wd--mid-card--tagInner {
    display: flex;
}

.wd--mid-card--candidateCont {
    display: flex;
    flex-flow: column nowrap;
    border-bottom: thin solid var(--wd--color-text-muted)
}

.wd--mid-card--headers {
    display: flex;
    flex-flow: row nowrap;
    border-bottom: thin solid var(--wd--color-text-muted)
}

.wd--mid-card-headertext  {
    color: var(--wd--color-text-muted);
}

.wd--mid-card-header-name {
    width: 45%;
}

.wd--mid-card-header-per {
    width: 35%;
}

.wd--mid-card-header-votes {
    width: 20%;
    text-align: right;
}

.wd--mid-card-candidate {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    height: 32px;
    border-bottom: thin solid var(--wd--color-election-border);
}

.wd--mid-tooltip--candidates > .wd--mid-card-candidate {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    height: 28px;
    border-bottom: thin solid var(--wd--color-election-border);
}

.wd--mid-card-candidate:last-child {
    border-bottom: none;
}

.wd--mid-card-candidate--name {
    width: 45%;
    font-weight: var(--wd--font-weight);
}

.wd--mid-card-candidate--perCont {
    position: relative;
    width: 35%;
}

.wd--mid-card-candidate--perCont.wd--mid-card-candidate--progWidth {
    width: 50%;
}

.wd--mid-card-candidate--perText {
    position: absolute;
    align-self: start;
    
    top: 1px;
    
    left: 4px;
    font-weight: var(--wd--font-weight);
    font-size: 11px !important;
}

.wd--mid-card-candidate--perBar {
    height: 16px;
}

.wd--mid-card-candidate--perCont {
    position: relative;
    width: 35%;
}

.wd--mid-card-candidate--votesText {
    width: 20%;
    text-align: right;
}

.wd--mid-card-footer {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding-top: 8px;
}

.wd--mid-card-footer--left {
  display: flex;
  flex-flow: column wrap;  
}

.wd--mid-card-footer--left--inner {
    display: flex;
    flex-flow: row nowrap;
}

.wd--mid-tooltip--counted {
    margin-right: 4px;
}

.wd--mid-card-footer--right {
  display: flex;
  flex-flow: column wrap;
  text-align: right; 
}

.wd--mid-card-footer--text {
  color: var(--wd--color-text-muted);
  font-weight: var(--wd--font-weight);
  font-size: 10px !important;
}

.wd--mid-card--wrapper.wd--mid-card--tooltip {
    
    width: 370px;
    
    box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.65);
}

.wd--mid-card--wrapper.wd--mid-card--tooltip-tt {
    
    width: 370px;
    
    box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.65);
}

.wd--mid-tooltip--tag {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 1px 6px 1px 6px;
    text-transform: uppercase;
}

.wd--mid-tooltip--candidates {
    color: black;
}

.wd--mid-tooltip--tag--dem.wd--mid-tooltip--tag--call {
    background-color: var(--wd--color-party-dem-main);
}

.wd--mid-tooltip--tag--dem.wd--mid-tooltip--tag--lead {
    background-color: var(--wd--color-party-dem-secondary);
}

.wd--mid-tooltip--tag--rep.wd--mid-tooltip--tag--call {
    background-color: var(--wd--color-party-rep-main);
}

.wd--mid-tooltip--tag--rep.wd--mid-tooltip--tag--lead {
    background-color: var(--wd--color-party-rep-secondary);
}

.wd--mid-tooltip--tag--rep.wd--mid-tooltip--tag--prog {
    background-color: var(--wd--color-party-rep-secondary);
}

.wd--mid-tooltip--tag--dem.wd--mid-tooltip--tag--prog {
    background-color: var(--wd--color-party-dem-secondary);
}