.article .paragraph {
    padding: 0;
    
}
.dias100 {
    max-width: 833px;
    margin: 0 auto;
    font-family: Roboto, sans-serif;

    padding: 10px;
}

.dias100 h2 {
    text-align: center;
font-size: 22px;
max-width: 460px;
margin: 20px auto;
}
.dias100 .appbars {
    max-width: 600px;
    margin: 0 auto;
    width: 70%;
}

.dias100 .headers .presi .appbars {
    width: 68%;
    padding-top: 20px;
}
.fullapproval, .fulldisapproval {
    position: relative;
    width: 42%;
    margin-right: 5px;
    background: #e2e2e2;
    font-size: 14px;
}

.headers .fullapproval, .headers .fulldisapproval {
    background: transparent;
}
.headers .fullapproval, .headers .fulldisapproval {
    font-weight: 700;
}

.dias100 .headers .presi div img {
    width: 18px;
    position: absolute;
    top: -25px;
    left: 38%;
}
.dias100 .approvalbar {
    
    background: rgba(145,192,63,0.6);
    padding:5px 5px 5px 3px;
    margin-right: 10px;

}
.dias100 .approvalbar.appbar_Biden {
    background: rgba(145,192,63,1);
}

img.face {
    width: 20px;
    vertical-align: text-bottom;
}

.approvalbar, .disapprovalbar {
    font-size: 12px;
    color: #444343;
    font-weight: 700;
}

.disapprovalbar.disappbar_Biden {
    color: #fff;
    font-weight: 700;
}

.approvalbar.appbar_Biden {
    color: #fff;
    font-weight: 700;
}
.dias100 .disapprovalbar {
    background: rgba(208,60,88,0.6);
    padding: 5px 5px 5px 3px;
}

.dias100 .disapprovalbar.disappbar_Biden {
    background: rgba(208,60,88,1);
}
.dias100 .presi {
    margin-bottom: 20px;
    max-width: 600px;
    margin: 0px auto 15px;
}
.dias100 .presi .nom {
    width: 75px;
    min-height: 10px;
    text-align: right;
}
.dias100 .presi div {
    display: inline-block;
}

.dias100 .presi div.cara {
    width: 30px;
    min-height:10px;
    padding: 0 5px;
}
.dias100 .presi div img {
    width: 100%;
    margin-bottom: -10px;
}

.ev_entradilla {
    font-family: Roboto, sans-serif;
    max-width: 500px;
    margin: 20px auto;
    text-align: center;
    padding: 0 20px;
    font-size: 22px;
max-width: 490px;
font-weight: 700;
margin: 20px auto;
}

.ev_app {
    color: rgba(145,192,63,1);
    font-weight: 700;
}
.ev_disapp {
    color: rgba(208,60,88,1);
    font-weight: 700;
}

#appdis .xAxis path {
    display: none;
}
#appdis .xAxis line {
    stroke:gray;
    stroke-width:.35;
}
#appdis .xAxis text, #appdis .yAxis text {
    fill: gray;
}

#presidentes .allpres {
    opacity: 0;
    transition: opacity .3s;
}

#presidentes svg .xAxis path {
    display: none;
}
.botonera  .leg_pres {
    display: flex;
}

.botonera  .button {
    display: inline-block;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #808d9c;
    color: #808d9c;
    opacity: .66;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 7px;
    margin-right: 7px;
    height: 48px;
    cursor: pointer;
}

.botonera .leyenda {
    display: flex;
    flex-wrap: wrap;
}
.botonera  .button.active {
    pointer-events: none;
    border: 1px solid #223753;
    color: #223753;
    opacity: 1;
}

.botonera  img.facebutton {
    width: 24px;
    pointer-events: none;
}

.yAxis .tick line {
    stroke: #bfbbbb;
}

.yAxis path {
    display: none;
}
.tooltip {
    position: absolute;
    background: white;
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 12px;
    pointer-events: none;
}
@media screen and (min-width: 720px) {

    .dias100 .appbars {
        max-width: 700px;
        width: 80%;
    }

    .approvalbar, .disapprovalbar {
        font-size: 14px;
    }
    .fullapproval, .fulldisapproval {
        width: 48%;
    }
    .dias100 .headers .presi .appbars {
        width: 80%;
    }
    .fullapproval, .fulldisapproval {
        font-size: 16px;
    }
    .dias100 .headers .presi div img {
        width: 20px;
    }

    .dias100 .headers .presi div img {
        width: 18px;
        position: relative;
        top: 0px;
        left: 0;
    }


}
div.trumpometro_container {
    font-family: 'Roboto', sans-serif;
    max-width: 833px;
    height: 280px;
    margin: 0 auto;
    margin-bottom:40px;
    background-color: #f6f6f6;
}

div.title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    /* color: #4e5f75; */
    text-align: center;
    padding-top: 25px;
    padding-bottom: 5px;
    max-width: 240px;
    margin: 0 auto;
}


div.live {
    font-family: Roboto, sans-serif;
    font-weight: 300;
    font-size: 14px;
    margin-top: 3%;
    margin-left: 3%;
    position: absolute;
}
  
div.live img {
    width: 17px;
    vertical-align: bottom;
}
  
div.live span {
    padding-left: 5px;
}
  

div.main_container {
    margin: auto;
    height: 98px;
    position: relative;
    padding: 20px;
}

div.temperature_container {
    max-width: 790px;
    width: 100%;
    position: relative;
    height: 48px;
    background-color: #fff;
    border: 1px solid #223753;
    border-radius: 25px;
    margin: auto;
}

div.temperature {
    margin: auto;
    margin-top: 1.2%;
    width: 98%;
    height: 80%;
    border-radius: 20px;
    background-image: linear-gradient(to right, #df2b35 0%, #ffbf00 33%, #91c03f 64%);
}

div.mask {
    position:absolute;
    margin-top: 1.2%;
    top:0;
    right:1%;
    left:0%;
    width: 100%;
    background: #f6f6f6;
    height: 82%;
    border-radius: 20px;
    transition: left 2s, width 2s;
}
div.degrees_container {
    position: relative;
    font-size: 14px;
    color: #747474;
}

.trumpline {
    position: relative;
    max-width: 833px;
    margin: 0 auto;
}

.circ1, .circ2 {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid #000;
    border-radius: 25px;
    
}

.circ1 {
    top: 50%;
    left: 3%;
}

.circ2 {
    top: 57%;
    left: 28.5%;
}

.comienzo {
    position: absolute;
    bottom: -40px;
    left: 0;
    font-size: 14px;
    max-width: 130px;
    padding-left: 20px;
    color: #747474;
    font-family: Roboto, sans-serif;
}

.ano2018, .ano2019, .ano2020 {
    position: absolute;
    font-family: Roboto, sans-serif;
    bottom: -8px;
    right: 58.5%;
    font-size: 14px;
    max-width: 130px;
    color: #747474;
}


.ano2019 {
    right: 36.5%;
}

.ano2020 {
    right: 13.5%;
}
.t2 {
    max-width: 500px;
    margin: 50px auto -10px;
    font-weight: 500;
    text-align: center;
    padding-left: 20px;
    font-size: 17px;
    font-family: Roboto, sans-serif;
    text-align: center;
    font-size: 22px;
    max-width: 460px;
    font-weight: 700;
    margin: 20px auto;
}
.destacado_text {
    font-weight: 500;
    fill: #000 !important;
}
div.degrees {
    position: absolute;
    margin-top: 25px;
}

div.degrees.zerodegree:after { 
    content: '';
    position: absolute;
    left: 4px;
    top: -22px;
    width: 2px;
    height: 17px;
    border-right: 1px solid #000;
}

div.degrees.ciendegree {
    left: 95%;
}
div.degrees.ciendegree:after { 
    content: '';
    position: absolute;
    left: 12px;
    top: -22px;
    width: 2px;
    height: 17px;
    border-right: 1px solid #000;
}

div.approval_result {
    font-family: 'Roboto Slab', serif;
    font-size: 25px;
    font-weight: 700;
    display: flex;
    border: 1px solid #223753;
    padding: 10px 10px;
    border-radius: 5px;
    background-color: #fff;
    position: absolute;
    top:100px;
    left: 0;
    margin-left: -53px;
    opacity: 0;
    transition: left 2s,opacity 2s;
}

div.approval_result:before {
    position:absolute;
    content: '';
    width: 0; 
  height: 0; 
  width: 0; 
  height: 0; 
  border-color: transparent transparent transparent #a00;
    border-width: 11px;
}
div.approval_result:after {
    content: '';
    position: absolute;
    left: 50%;
    top: -35px;
    height: 35px;
    width: 2px;
    border-right: 1px solid #000;
}
div.approval_result img {
    height: 35px;
    padding-right: 7px;
    vertical-align: top;
}

@media screen and (min-width: 780px) {


    .ano2018 {
        right: 65%;
        bottom: -14px;
    }

    .ano2019 {
        right: 40%;
        bottom: -14px
    }

    .ano2020 {
        right: 15%;
        bottom: -14px
    }

    .comienzo {
        bottom: -40px;
    }
    .circ1 {
        top: 128px;
        left: -5px;
    }
    
    .circ2 {
        top: 56%;
        left: 29.5%;
    }
    
    .comienzo, .t2 {
        padding-left: 0;
    }

    .comienzo {
        bottom: -53px;
    }
div.degrees.ciendegree {
    left: 97%;
}


div.degrees.zerodegree {
    left: 1%;
}
   

    div.temperature {
        margin-top: 0.59%;
    }

    div.mask {
        margin-top: 0.59%;
    }
}