/* Menu lateral de ambito */

.list-group-mine .list-group-item {
    background-color: #80507A;
    color: gray;
}

.list-group-mine .list-group-item:hover {
    background-color: #E780BC;
    color: black;
    font-weight: bold;
}

.list-group-mine .list-group-item.active {
    background-color: #E780BC !important;
    color: black;
    font-weight: bold;
}


/* Menu lateral de ambito */

.dropdown-menu {
    max-height: 180px;
    overflow: scroll;
    overflow-x: hidden;
    margin-top: 0px;
}


/* sin transicion en el menu colapsable */

.collapsing {
    -webkit-transition: none;
    transition: none;
}


/*Varios estilos para los textos*/

.fontw {
    font-weight: 700;
    color: #34344E;
}

.fontwb {
    font-weight: 700;
    color: #D7D7D7;
}

.fontws {
    font-weight: 600;
    color: #34344E;
}

.fontwsb {
    font-weight: 600;
    color: #D7D7D7;
}

.bordeN {
    border-color: #D5137F;
    border-left-style: solid;
    border-width: .3rem;
}

.bordeNO {
    border-color: #D5137F;
    border-left-style: solid;
    border-width: .8rem;
}

.bordeNOC {
    border-color: #D5137F;
    border-left-style: solid;
    border-width: .5rem;
}

.bordeNOCV {
    border-color: #4199A0;
    border-left-style: solid;
    border-width: .5rem;
}

.bordeNOCA {
    border-color: #7A4493;
    border-left-style: solid;
    border-width: .5rem;
}

.bordeDVC {
    border-color: #858585;
    border-right-style: solid;
    border-width: .2rem;
}

.fontNOV {
    font-weight: 700;
    color: #4199A0;
}

.fontNOA {
    font-weight: 700;
    color: #7A4493;
}

.fontNO {
    font-weight: 700;
    color: #D5137F;
}

.fontn {
    font-weight: 700;
}

.fontcont {
    font-size: 28px;
    font-weight: 500;
    color: #D5137F;
}

.fontcontcas {
    font-size: 28px;
    font-weight: 700;
    color: #34344E;
}

.fontcontcasNegro {
    font-size: 28px;
    font-weight: 700;
    color: #D7D7D7;
}

.text_nominal {
    font-size: 13px;
}

.text_estadistica {
    font-weight: 700;
    font-size: 22px;
}

.text_estadistica_casilla {
    font-weight: 700;
    font-size: 18px;
}

.altura_progress {
    height: 40px;
}

.opacidad_estadistica {
    opacity: 0.2;
}

.text_lista {
    font-weight: 700;
    font-size: 44px;
}

.mb_3 {
    margin-bottom: -1rem !important;
}

.text_casilla_inf {
    font-size: 14px;
    font-weight: 500;
}

.font_resumen {
    font-size: 35px;
    color: #D1308A;
    font-weight: 700;
    margin-left: -1rem;
}

.font_radios {
    font-weight: 700;
    color: #34344E;
    font-size: 14px;
}

.font_radios_black {
    font-weight: 700;
    color: #DCDCDC;
    font-size: 14px;
}

.bordeR_resumen {
    border-right-style: solid;
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: #DEE0E3;
}

.bordeL_resumen {
    border-left-style: solid;
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: #DEE0E3;
}

.bordeTM_resumen {
    border-top-style: solid;
    border-bottom-style: solid;
    border-color: #DEE0E3;
}

.simbolos_resumen {
    font-size: 35px;
    margin-left: -1rem;
    margin-right: -1rem;
}


/*Estilos para el velocimetro*/

.velocimetro {
    margin-left: auto;
    height: 100px;
    width: 200px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
    position: relative;
}

.velocimetro__groove {
    height: 100px;
    width: 200px;
    background: transparent;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 20px solid #eee;
    border-bottom: 0;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
}

.velocimetro__score {
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(0deg);
    height: 200px;
    width: 200px;
    background: transparent;
    border-radius: 50%;
    border: 20px solid #D5137F;
    border-color: transparent transparent #D5137F #D5137F;
    box-sizing: border-box;
    z-index: 1;
    transition: transform 0.3s ease;
}

.velocimetro__score_dark {
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(0deg);
    height: 200px;
    width: 200px;
    background: transparent;
    border-radius: 50%;
    border: 20px solid #ED98CB;
    border-color: transparent transparent #ED98CB #ED98CB;
    box-sizing: border-box;
    z-index: 1;
    transition: transform 0.3s ease;
}

.velocimetro__base {
    width: 240px;
    height: 100px;
    background: white;
    position: relative;
    top: 100px;
    z-index: 20;
}

.velocimetro__base:before {
    content: "";
    width: 240px;
    position: absolute;
    top: 0;
}

.velocimetro__base_dark {
    width: 240px;
    height: 100px;
    background: #1D1D1D;
    position: relative;
    top: 100px;
    z-index: 20;
}

.velocimetro__base_dark:before {
    content: "";
    width: 240px;
    position: absolute;
    top: 0;
}

.velocimetro__odo {
    text-align: center;
    position: absolute;
    color: #5c6f7b;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.velocimetro__odo i {
    font-size: 13px;
    opacity: 0.6;
}

.velocimetro__odo>div {
    margin-bottom: 0;
}

.velocimetro__odo span {
    font-size: 0.7em;
}

.velocimetro__up {
    font-size: 10px;
    line-height: 1.5em;
    font-weight: 500;
    color: #D5137F;
}

.velocimetro__down {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2em;
    color: #D5137F;
}


/*Estilos para las gráficas*/

.chart {
    display: table;
    table-layout: fixed;
    width: 100%;
    max-width: 700px;
    height: 180px;
    margin: 0 auto;
    background-size: 100% 50px;
    background-position: left top;
}

.chart li {
    position: relative;
    display: table-cell;
    vertical-align: bottom;
    height: 180px;
}

.chart-div-uno {
    height: 100%;
    background-color: #D2127E;
    width: 90px;
    height: 180px;
}

.chart-div-uno-black {
    height: 100%;
    background-color: #FD2A71;
    width: 90px;
    height: 180px;
}

.chart-div-dos {
    height: 100%;
    background-color: #79144C;
    width: 90px;
    height: 180px;
}

.chart-div-dos-black {
    height: 100%;
    background-color: #FE9DB0;
    width: 90px;
    height: 180px;
}

.chart-div-tres {
    height: 100%;
    background-color: #EFB5D3;
    width: 90px;
    height: 180px;
}

.chart-div-tres-black {
    height: 100%;
    background-color: #FEC5CD;
    width: 90px;
    height: 180px;
}

.chart span {
    margin: 0 1em;
    display: block;
    background: #E6E6E6;
    animation: draw 1s ease-in-out;
    width: 90px;
    margin-left: 0;
}

.chart span:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 5px 1em 0;
    display: block;
    text-align: left;
    content: attr(title);
    word-wrap: break-word;
    font-size: 14px;
}

@keyframes draw {
    0% {
        height: 0;
    }
}


/*Estilos para las tarjetad Urbanas y No urbanas*/

.card-urbana {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #D2127E;
}

.card-urbana-dark {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #F1B1D7;
}

.card-nourbana {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #83044C;
}

.card-nourbana-dark {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #E97EBD;
}

.card {
    background-color: transparent;
}

.imagen-urbana {
    height: 30px;
    margin-left: 1rem;
}

.imagen-nourbana {
    height: 30px;
    margin-right: 1rem;
}

.letras-urnour {
    font-weight: 600;
    color: white;
    font-size: 22px;
}

.letras-urnour-black {
    font-weight: 600;
    color: black;
    font-size: 22px;
}

.letras-urnourd {
    font-weight: 500;
    color: white;
    font-size: 14px;
}

.letras-urnourd-black {
    font-weight: 500;
    color: black;
    font-size: 14px;
}

ul.test {
    list-style-type: none;
}

ul.test li {
    float: left;
}

ul.test li svg {
    padding: 16px;
}


/*Parte del carrusel tipo A*/

.MultiCarousel {
    float: left;
    overflow: hidden;
    padding: 15px;
    width: 100%;
    position: relative;
    height: 100%;
}

.MultiCarousel .MultiCarousel-inner {
    transition: 1s ease all;
    float: left;
}

.MultiCarousel .MultiCarousel-inner .item {
    float: left;
}

.MultiCarousel .MultiCarousel-inner .item>div {
    text-align: center;
    margin: 10px;
    background: #F4F4F4;
    color: #666;
    border: 1px solid #797979;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.MultiCarousel .leftLst,
.MultiCarousel .rightLst {
    position: absolute;
    border-radius: 50%;
    top: calc(50% - 20px);
}

.MultiCarousel .leftLst {
    left: 0;
}

.MultiCarousel .rightLst {
    right: 0;
}

.MultiCarousel .leftLst.over,
.MultiCarousel .rightLst.over {
    pointer-events: none;
    opacity: 0.5;
}

.leftLst:focus {
    outline: none;
    box-shadow: none;
}

.rightLst:focus {
    outline: none;
    box-shadow: none;
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .rowCarrusel {
        max-width: 1190px;
    }
}

.carrusel-tar-sup {
    background-color: white;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carrusel-tar-sup-black {
    background-color: #363636;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E5E5E5;
}

.carrusel-tar-inf {
    background-color: #F4F4F4;
    height: 5rem;
}

.carrusel-tar-inf-black {
    background-color: #272727;
    height: 5rem;
    color: #E5E5E5;
}


/*Parte del carrusel tipo B*/

.MultiCarouselB {
    float: left;
    overflow: hidden;
    padding: 15px;
    width: 100%;
    position: relative;
    height: 100%;
}

.MultiCarouselB .MultiCarousel-innerb {
    transition: 1s ease all;
    float: left;
}

.MultiCarouselB .MultiCarousel-innerb .itemb {
    float: left;
}

.MultiCarouselB .MultiCarousel-innerb .itemb>div {
    text-align: center;
    margin: 10px;
    background: #F4F4F4;
    color: #666;
    border: 1px solid #797979;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-bottom-right-radius: .8rem;
    border-bottom-left-radius: .8rem;
}

.MultiCarouselB .leftLstb,
.MultiCarouselB .rightLstb {
    position: absolute;
    border-radius: 50%;
    top: calc(50% - 20px);
}

.MultiCarouselB .leftLstb {
    left: 0;
}

.MultiCarouselB .rightLstb {
    right: 0;
}

.MultiCarouselB .leftLstb.over,
.MultiCarouselB .rightLstb.over {
    pointer-events: none;
    opacity: 0.5;
}

.leftLstb:focus {
    outline: none;
    box-shadow: none;
}

.rightLstb:focus {
    outline: none;
    box-shadow: none;
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .rowCarruselb {
        max-width: 1190px;
    }
}

.carrusel-tar-supb {
    background-color: white;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carrusel-tar-supb-black {
    background-color: #363636;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E5E5E5;
}

.carrusel-tar-infb {
    background-color: #F4F4F4;
    height: 5rem;
}

.carrusel-tar-infb-black {
    background-color: #272727;
    height: 5rem;
    color: #E5E5E5;
}

.carrusel-tar-select {
    height: 2rem;
    border-bottom-right-radius: .8rem;
    border-bottom-left-radius: .8rem;
}

.carrusel-tar-select>p {
    color: white;
    padding-top: 0.2rem;
}

.selecccionar-carrusel {
    background-color: #23233E;
    cursor: pointer;
}

#ver_detalle_carrusel {
    outline: none;
    box-shadow: none;
}

.ver_detalle_out {
    pointer-events: none;
    opacity: 0.5;
    border: 1px solid #797979;
}

.ver_detalle_out_dark {
    pointer-events: none;
    opacity: 0.5;
    border: 1px solid #797979;
    color: white;
    background-color: black;
}

.ver_detalle_in {
    background-color: #23233E;
    color: rgba(255, 255, 255, 1) !important;
}

.ver_detalle_in:hover {
    background: rgba(0, 0, 0, 0);
    color: black !important;
    border: 1px solid #23233E;
    transition: all 0.2s ease;
}

.ver_detalle_in_dark {
    background-color: #F393C4;
    color: rgb(0, 0, 0) !important;
}

.ver_detalle_in_dark:hover {
    background: rgba(0, 0, 0, 0);
    color: white !important;
    border: 1px solid #F393C4;
    transition: all 0.2s ease;
}

#tooltip {
    background: white;
    border: 1px solid black;
    border-left-width: 15px;
    border-radius: 5px;
    padding: 5px;
}

.swal-size {
    width: 850px !important;
}

.navi {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
}


/*Estilos para los radio buttons de la vista de tarjetas, graficas o mapa*/

.switch {
    position: relative;
    width: 10rem;
    height: 3.5rem;
    color: #F8F8F8;
    font-size: 20px;
    border-radius: 10px;
}

.quality {
    position: relative;
    display: inline-block;
    width: 50%;
    height: 100%;
    line-height: 40px;
}

.first-label {
    border-radius: 5px 0 0 5px;
    border-top: 1px solid #F1F1F1;
    border-left: 1px solid #F1F1F1;
    border-bottom: 1px solid #F1F1F1;
}

.last-label {
    border-radius: 0 5px 5px 0;
    border-top: 1px solid #F1F1F1;
    border-right: 1px solid #F1F1F1;
    border-bottom: 1px solid #F1F1F1;
}

.quality label {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 120%;
    cursor: pointer;
    text-align: center;
    transition: transform 0.4s, color 0.4s, background-color 0.4s;
    font-size: 12px;
}

.quality p {
    margin-top: -0.9rem;
}

.quality input[type="radio"] {
    appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
}

.quality input[type="radio"]:focus {
    outline: 0;
    outline-offset: 0;
}

.quality input[type="radio"]:checked~label {
    background-color: #181A2F;
    color: #F8F8F8;
}

.quality input[type="radio"]:active~label {
    transform: scale(1.05);
}


/*Estilos para la grafica con candidatos*/

#q-graph {
    display: block;
    position: relative;
    width: 100%;
    height: 12rem;
    margin: 1.1em 0 0;
    padding: 0;
    background: transparent;
    font-size: 11px;
}

#q-graph tr,
#q-graph th,
#q-graph td {
    position: absolute;
    bottom: 0;
    width: 12rem;
    z-index: 2;
    padding: 0;
    text-align: center;
}

#q-graph td {
    transition: all 0.3s ease;
}

#q-graph thead tr {
    left: 100%;
    top: 50%;
    bottom: auto;
    margin: -2.5em 0 0 5em;
}

#q-graph thead th {
    width: 7.5em;
    height: auto;
    padding: 0.5em 1em;
}

#q-graph thead th.paid {
    top: 2.75em;
    line-height: 2;
    left: 0;
}

#q-graph tbody tr {
    height: 15.2rem;
    padding-top: 2px;
}

#q-graph tbody th {
    bottom: -1.75em;
    vertical-align: top;
    font-weight: normal;
    color: #333;
}

#q-graph .bar {
    width: 3.5rem;
    border: 1px solid;
    border-bottom: none;
    color: #000;
}

#q-graph .bar p {
    margin: 5px 0 0;
    padding: 0;
    opacity: 0.4;
}

#q-graph .paid {
    left: 4rem;
    border-color: transparent;
}

#ticks {
    position: relative;
    top: -300px;
    left: 2px;
    width: 100%;
    height: 12rem;
    z-index: 1;
    margin-bottom: -12rem;
    font-size: 12px;
    font-family: "fira-sans-2", Verdana, sans-serif;
    opacity: 0.4;
}

#ticks .tick {
    position: relative;
    border-bottom: 1px dotted #C4C4C4;
    width: 100%;
}

#ticks .tick p {
    position: absolute;
    left: -5em;
    top: 3rem;
    margin: 0 0 0 1em;
}

.borde-tabla {
    border: #F2F2F2 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -14rem;
}

.borde-tabla-dark {
    border: #000 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -14rem;
    color: white;
}

.borde-tablap {
    border: #F2F2F2 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -5rem;
}

.borde-tablap-black {
    border: #000 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -5rem;
    color: white;
}

.borde-tablau {
    border-left: #F2F2F2 2px solid;
    border-right: #F2F2F2 2px solid;
    border-bottom: #F2F2F2 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -15.15rem;
}

.borde-tablau-dark {
    border-left: #000 2px solid;
    border-right: #000 2px solid;
    border-bottom: #000 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -15.15rem;
    color: white;
}

.borde-tablaup {
    border-left: #F2F2F2 2px solid;
    border-right: #F2F2F2 2px solid;
    border-bottom: #F2F2F2 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -6.15rem;
}

.borde-tablaup-dark {
    border-left: #000 2px solid;
    border-right: #000 2px solid;
    border-bottom: #000 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -6.15rem;
    color: white;
}

.borde-tablad {
    border-left: #F2F2F2 2px solid;
    border-right: #F2F2F2 2px solid;
    border-bottom: #F2F2F2 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -16.4rem;
}

.borde-tablad-dark {
    border-left: #000 2px solid;
    border-right: #000 2px solid;
    border-bottom: #000 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -16.4rem;
    color: white;
}

.borde-tabladp {
    border-left: #F2F2F2 2px solid;
    border-right: #F2F2F2 2px solid;
    border-bottom: #F2F2F2 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -7.4rem;
}

.borde-tabladp-dark {
    border-left: #000 2px solid;
    border-right: #000 2px solid;
    border-bottom: #000 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -7.4rem;
    color: white;
}

.borde-tablat {
    border-left: #F2F2F2 2px solid;
    border-right: #F2F2F2 2px solid;
    border-bottom: #F2F2F2 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -17.6rem;
}

.borde-tablat-dark {
    border-left: #000 2px solid;
    border-right: #000 2px solid;
    border-bottom: #000 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -17.6rem;
    color: white;
}

.borde-tablatp {
    border-left: #F2F2F2 2px solid;
    border-right: #F2F2F2 2px solid;
    border-bottom: #F2F2F2 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -8.6rem;
}

.borde-tablatp-dark {
    border-left: #000 2px solid;
    border-right: #000 2px solid;
    border-bottom: #000 2px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    margin-bottom: -8.6rem;
    color: white;
}

.borde-tabla-lateral {
    border-bottom: #F2F2F2 2px solid;
    padding-bottom: 0px;
}

.borde-tabla-lateral-dark {
    border-bottom: #000 2px solid;
    padding-bottom: 0px;
}

.altura-tabla-uno {
    margin-left: -4rem;
    height: 14rem;
    padding-top: 9rem;
    width: 97%;
}

.altura-tabla-dos {
    margin-left: -4rem;
    height: 1.2rem;
    width: 97%;
}

.altura-tabla-uno-pp {
    margin-left: -4rem;
    height: 5rem;
    padding-top: 1rem;
    width: 97%;
}

.font-candidato {
    font-size: 12px;
}

.font-candidato-votos {
    font-size: 14px;
    font-weight: 700;
}

.font-votos-entidad {
    font-size: 11px;
    font-weight: 700;
}

.borde-ganador {
    border: #D5137F 5px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    padding-bottom: 0px;
    border-radius: 0.5rem;
    height: 35rem;
    margin-bottom: -17.6rem;
}

.borde-ganadorp {
    border: #D5137F 5px solid;
    border-collapse: separate;
    border-spacing: 10px 5px;
    padding-bottom: 0px;
    border-radius: 0.5rem;
    height: 25rem;
    margin-bottom: -8.6rem;
}

.font-candidato-ganador {
    font-size: 12px;
    font-weight: 700;
}

.font-candidato-votos-ganador {
    font-size: 18px;
    font-weight: 700;
    color: #D5137F;
}

.font-votos-entidad-ganador {
    font-size: 13px;
    font-weight: 700;
}


/*Tabla detalle votos por casilla*/

.tabla-detalle {
    font-size: 100%;
    white-space: nowrap;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border: 1px solid black;
    width: 100%;
    position: absolute;
    margin-left: -1rem;
}

.tabla-detalle td,
.tabla-detalle th {
    padding: 0.5rem 1rem;
}

.tabla-detalle thead th {
    padding: 3px;
    position: sticky;
    top: 0;
    z-index: 1;
    width: 25vw;
    background-color: #23233E;
    color: white;
    font-weight: 400;
}

.tabla-detalle td {
    background: #fff;
    padding: 4px 5px;
    text-align: center;
}

.tabla-detalle tbody th {
    font-weight: 500;
    position: relative;
}

.tabla-detalle thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}

.tabla-detalle-columndos-title {
    position: sticky !important;
    left: 13rem !important;
    z-index: 2 !important;
}

.tabla-detalle tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
}

.tabla-detalle-columndos {
    position: sticky !important;
    left: 13rem !important;
    z-index: 1 !important;
}

[role="region"][aria-labelledby][tabindex] {
    width: 100%;
    max-height: 70vh;
    overflow: auto;
}

[role="region"][aria-labelledby][tabindex]:focus {
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
    outline: 0;
}

.tabla-color>tbody>tr:nth-child(odd)>td,
.tabla-color>tbody>tr:nth-child(odd)>th {
    background-color: white;
}

.tabla-color>tbody>tr:nth-child(even)>td,
.tabla-color>tbody>tr:nth-child(even)>th {
    background-color: #F2EFEF;
}

.div-tabla-detalle {
    background-color: white;
    height: 29rem;
    position: relative;
}


/*Tabla detalle votos por casilla oscuro*/

.tabla-detalle-black {
    font-size: 100%;
    white-space: nowrap;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border: 1px solid black;
    width: 100%;
    position: absolute;
    margin-left: -1rem;
}

.tabla-detalle-black td,
.tabla-detalle-black th {
    padding: 0.5rem 1rem;
}

.tabla-detalle-black thead th {
    padding: 3px;
    position: sticky;
    top: 0;
    z-index: 1;
    width: 25vw;
    background-color: #1D1D1D;
    color: white;
    font-weight: 400;
}

.tabla-detalle-black td {
    background: #fff;
    padding: 4px 5px;
    text-align: center;
}

.tabla-detalle-black tbody th {
    font-weight: 500;
    position: relative;
}

.tabla-detalle-black thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}

.tabla-detalle-black tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
}

.tabla-color-black>tbody>tr:nth-child(odd)>td,
.tabla-color-black>tbody>tr:nth-child(odd)>th {
    background-color: #1D1D1D;
}

.tabla-color-black>tbody>tr:nth-child(even)>td,
.tabla-color-black>tbody>tr:nth-child(even)>th {
    background-color: #373737;
}

.div-tabla-detalle-black {
    background-color: black;
    height: 29rem;
    position: relative;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

#social-share {
    position: fixed;
    bottom: 0px;
    right: 15px;
    width: 55px;
    z-index: 20;
    border-radius: 100px 100px 0px 0px;
    padding: 23px 5px 5px 5px;
    background-color: white;
    /*transitions with relative delay*/
}

#social-share div.social-open-menu .btn-share,
#social-share ul.social-itens .btn-share {
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    color: white;
    line-height: 1;
    outline: 0;
    border: 0;
    margin-top: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#social-share div.social-open-menu .btn-share:hover,
#social-share ul.social-itens .btn-share:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#social-share ul.social-itens {
    list-style: none;
    text-decoration: none;
    text-align: center;
    position: relative;
    display: block;
    /* display: none; */
}

#social-share ul.social-itens .btn-share {
    width: 40px;
    height: 40px;
    /* transform: none; */
}

#social-share ul.social-itens .btn-share.social-item-1 i {
    text-shadow: 0px 0px #344e86, 1px 1px #344e86, 2px 2px #344e86, 3px 3px #344e86, 4px 4px #344e86, 5px 5px #344e86;
}

#social-share ul.social-itens .btn-share.social-item-2 {
    background-color: #E91E63;
}

#social-share ul.social-itens .btn-share.social-item-2 i {
    text-shadow: 0px 0px #d81558, 1px 1px #d81558, 2px 2px #d81558, 3px 3px #d81558, 4px 4px #d81558, 5px 5px #d81558;
}

#social-share ul.social-itens .btn-share.social-item-3 i {
    text-shadow: 0px 0px #edb100, 1px 1px #edb100, 2px 2px #edb100, 3px 3px #edb100, 4px 4px #edb100, 5px 5px #edb100;
}

#social-share ul.social-itens.open .btn-share {
    transform: scale(1);
    opacity: 1;
    /* transform: translate(0px, -15px); */
}

#social-share ul.social-itens li {
    position: relative;
}

#social-share ul.social-itens li .btn-share {
    transform: scale(0);
    opacity: 0;
}

#social-share ul.social-itens li .btn-share-text {
    /* opacity: 0; */
    position: absolute;
    bottom: 15px;
    right: 100%;
    margin-right: 10px;
    min-width: 75px;
    border-radius: 2px;
    padding: 3px 4px;
    text-align: center;
    font-weight: 300;
    background: rgba(20, 20, 20, 0.7);
    color: #fff;
    display: block;
    opacity: 0;
    /* transition: all 500ms ease-in-out  0.5s; */
}

#social-share ul.social-itens li:hover .btn-share-text {
    opacity: 1;
}

#social-share div.social-open-menu .btn-share {
    width: 45px;
    height: 45px;
    background-color: #fff;
    border: solid 3px;
    border-color: #D40681;
}

#social-share .social-itens.open .social-item-1,
#social-share .social-itens.open .social-item-1 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s;
}

#social-share .social-itens.hidden .social-item-1,
#social-share .social-itens.open .social-item-1 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s;
}

#social-share .social-itens.open .social-item-2,
#social-share .social-itens.open .social-item-2 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s;
}

#social-share .social-itens.hidden .social-item-2,
#social-share .social-itens.open .social-item-2 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s;
}

#social-share .social-itens.open .social-item-3,
#social-share .social-itens.open .social-item-3 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s;
}

#social-share .social-itens.hidden .social-item-3,
#social-share .social-itens.open .social-item-3 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s;
}

#social-share ul.social-itens {
    background-color: #DEDEDE;
    border-radius: 100px 100px 0px 0px;
    border: solid 2px;
    border-color: #D9D9D9;
    margin-bottom: -35px;
    height: 0px;
}

#social-share ul.social-itens.open,
#social-share .social-itens.open {
    height: 210px;
    transition: 300ms height 0.1s;
}

#social-share ul.social-itens.hidden,
#social-share .social-itens.open {
    transition: 300ms height 0.7s;
}

#social-share.open {
    padding-top: 5px;
}

#social-share.hidden {
    padding-top: 23px;
    transition: 300ms padding-top 0.7s;
}

.share-icons {
    width: 100%;
}

.social-item-1,
.social-item-2,
.social-item-3 {
    right: 30px;
}

.descargarMovil {
    cursor: pointer;
}

.descargarEscaner {
    cursor: pointer;
}

.seccionDetalle {
    cursor: pointer;
    text-decoration-line: underline;
}

.color-titulos-tabla {
    color: #23233E;
}

.color-titulos-tabla-black {
    color: #B5B5B5;
}

.font_tabla_resumen {
    font-size: 35px;
    color: #D1308A;
    font-weight: 700;
}

.font_tabla_resumen_partidos {
    font-size: 20px;
}

.font_carrusel {
    margin-left: -1rem;
    margin-right: 1rem;
}

.cabecera-tabla-participacion {
    background-color: #DDDDDD;
    border-style: hidden;
}

.anchura-progressbar {
    margin-left: -0.8rem;
    border-radius: 0;
    width: 21.5rem;
    margin-top: -1rem;
}

.anchura-progressbar-partidos {
    margin-left: -0.8rem;
    border-radius: 0;
    width: 30.8rem;
    margin-top: -1rem;
}

.bote-basura {
    font-size: 2rem;
    margin-top: auto;
    margin-block: auto;
    cursor: pointer;
}

.boton-detalle-tarjetas {
    width: 100%;
    height: 2rem;
}

.font-totalv-detalle {
    font-weight: 700;
    font-size: 16px;
    color: #23233E;
}

.font-totalv-detalle-black {
    font-weight: 700;
    font-size: 16px;
    color: #E5E5E5;
}

.font-totalp-detalle {
    font-size: 13px;
    color: #23233E;
}

.font-totalp-detalle-black {
    font-size: 13px;
    color: #E5E5E5;
}

.divisor-tarjetas {
    max-width: 11rem;
    margin-left: .6rem;
}

.tarjetas-tar-select {
    border-bottom-right-radius: .8rem !important;
    border-bottom-left-radius: .8rem !important;
}

.estilo-tarjetas-ganador {
    height: 24rem;
    background-color: #F9F9F9;
    border-color: #34344E;
    max-width: 11rem;
    max-height: 30rem;
    border-radius: .8rem !important;
}

.estilo-tarjetas-ganador-black {
    height: 24rem;
    background-color: #363636;
    max-width: 11rem;
    max-height: 30rem;
    border-radius: .8rem !important;
    border: #D979AF 3px solid;
    color: #E5E5E5;
}

.estilo-tarjetas {
    height: 24rem;
    background-color: #F9F9F9;
    border-color: #34344E;
    max-width: 11rem;
    max-height: 30rem;
    border-radius: .8rem !important;
}

.estilo-tarjetas-black {
    height: 24rem;
    background-color: #363636;
    border-color: #34344E;
    max-width: 11rem;
    max-height: 30rem;
    border-radius: .8rem !important;
    color: #E5E5E5;
}

.estilo-cuerpo-tarjetas {
    font-size: 10px;
    background-color: #F4F4F4;
    position: absolute;
    left: 0%;
    right: 0%;
    bottom: 11%;
    z-index: 0;
}

.estilo-cuerpo-tarjetas-black {
    font-size: 10px;
    background-color: #272727;
    position: absolute;
    left: 0%;
    right: 0%;
    bottom: 11%;
    z-index: 0;
    color: #E5E5E5;
}

.estilo-cuerpo-tarjetas-dos {
    font-size: 15px;
    background-color: #F4F4F4;
    position: absolute;
    left: 0%;
    right: 0%;
    bottom: 13%;
    z-index: 0;
}

.estilo-cuerpo-tarjetas-dos-black {
    font-size: 15px;
    background-color: #272727;
    position: absolute;
    left: 0%;
    right: 0%;
    bottom: 13%;
    z-index: 0;
    color: #E5E5E5;
}

.estilo-tarjetas-partidos-ganador {
    height: 18rem;
    background-color: #F9F9F9;
    border-color: #D1308A;
    max-width: 11rem;
    max-height: 30rem;
    border-radius: .8rem !important;
}

.estilo-tarjetas-partidos-ganador-black {
    height: 18rem;
    background-color: #363636;
    border-color: #D1308A;
    max-width: 11rem;
    max-height: 30rem;
    border-radius: .8rem !important;
    color: #E5E5E5;
}

.estilo-tarjetas-partidos {
    height: 18rem;
    background-color: #F9F9F9;
    border-color: #34344E;
    max-width: 11rem;
    max-height: 30rem;
    border-radius: .8rem !important;
}

.estilo-tarjetas-partidos-black {
    height: 18rem;
    background-color: #363636;
    border-color: #34344E;
    max-width: 11rem;
    max-height: 30rem;
    border-radius: .8rem !important;
    color: #E5E5E5;
}

.estilos-tarjetas-cuatro-ganador {
    height: 20rem;
    background-color: #F9F9F9;
    border-color: #D1308A;
    max-width: 12rem;
    max-height: 20rem;
    border-radius: .8rem !important;
}

.estilos-tarjetas-cuatro-ganador-black {
    height: 20rem;
    background-color: #363636;
    border-color: #D1308A;
    max-width: 12rem;
    max-height: 20rem;
    border-radius: .8rem !important;
    color: #E5E5E5;
}

.estilos-tarjetas-cuatro {
    height: 20rem;
    background-color: #F9F9F9;
    border-color: #34344E;
    max-width: 12rem;
    max-height: 20rem;
    border-radius: .8rem !important;
}

.estilos-tarjetas-cuatro-black {
    height: 20rem;
    background-color: #363636;
    border-color: #34344E;
    max-width: 12rem;
    max-height: 20rem;
    border-radius: .8rem !important;
    color: #E5E5E5;
}

.estilo-tarjetas-small {
    background-color: #F9F9F9;
    border-color: #34344E;
    max-width: 12rem;
    max-height: 12rem;
}

.estilo-tarjetas-small-ganador {
    background-color: #F9F9F9;
    max-width: 12rem;
    max-height: 12rem;
    border: #D1308A 1rem solid;
}

.estilo-tarjetas-small-cuerpo {
    background-color: #F4F4F4;
}

.estilo-tarjetas-small-black {
    background-color: #363636;
    border-color: #34344E;
    max-width: 12rem;
    max-height: 12rem;
    color: #E5E5E5;
}

.estilo-tarjetas-small-ganador-black {
    background-color: #363636;
    max-width: 12rem;
    max-height: 12rem;
    color: #E5E5E5;
    border: #D1308A 1rem solid;
}

.estilo-tarjetas-small-cuerpo-black {
    background-color: #272727;
    color: #E5E5E5;
}

.estilo-tarjetas-medium {
    background-color: #F9F9F9;
    border-color: #34344E;
    max-width: 13rem;
    max-height: 13rem;
}

.estilo-tarjetas-medium-ganador {
    background-color: #F9F9F9;
    max-width: 13rem;
    max-height: 13rem;
    border: #D1308A 1rem solid;
}

.estilo-tarjetas-medium-black {
    background-color: #272727;
    border-color: #34344E;
    max-width: 13rem;
    max-height: 13rem;
    color: #E5E5E5;
}

.estilo-tarjetas-medium-ganador-black {
    background-color: #272727;
    max-width: 13rem;
    max-height: 13rem;
    border: #D1308A 1rem solid;
    color: #E5E5E5;
}

.agregar-footer {
    font-size: 2rem;
    margin-top: auto;
    margin-block: auto;
    cursor: pointer;
    color: #23233E;
}

.agregar-footer-black {
    font-size: 2rem;
    margin-top: auto;
    margin-block: auto;
    cursor: pointer;
    color: #B1B1B1;
}

.imagen-candidato-detalle {
    width: 3rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-right: -2rem;
}

.borde-inferior-detalle {
    border-bottom: 1px solid;
    border-color: #D5D3D3;
    height: 4rem;
}

.texto-detalle-partidos {
    color: #23233E;
    font-weight: 700;
    margin-top: -1rem;
    margin-bottom: -0.3rem;
}

.texto-detalle-partidos-black {
    color: #E5E5E5;
    font-weight: 700;
    margin-top: -1rem;
    margin-bottom: -0.3rem;
}

.texto-detalle-partidos-black {
    color: #E5E5E5;
    font-weight: 700;
    margin-top: -1rem;
    margin-bottom: -0.3rem;
}

.borde-elementos-detalle {
    border-bottom: 1px solid;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.mapa-actas {
    background-image: url('../img/generales/mapa-black.jpg');
    width: 100%;
    height: 30vh;
    background-repeat: no-repeat;
    background-position-y: -2rem;
}

.mapa-actas-dark {
    background-image: url('../img/generales/dotted-world-map.png');
    width: 100%;
    height: 30vh;
    background-repeat: no-repeat;
    background-position-y: -2rem;
}

.mapa-vista-actas {
    background-image: url('../img/generales/mapa-black.jpg');
    width: 100%;
    background-repeat: no-repeat;
    background-position-y: -2rem;
}

.mapa-vista-actas-dark {
    background-image: url('../img/generales/dotted-world-map.png');
    width: 100%;
    background-repeat: no-repeat;
    background-position-y: -2rem;
}

.bordeNO-actas {
    border-color: #D5137F;
    border-left-style: solid;
    border-width: .8rem;
    margin-top: 0.5rem;
}

.icono-actas {
    color: #D1308A;
    text-shadow: -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, 1px 1px 1px #fff;
}

.boton-actas {
    border: #D1308A;
    background-color: #D1308A;
    width: 8rem;
    height: 2rem;
    font-size: 13px;
}

.boton-actas:hover,
.boton-actas:focus {
    border: #D1308A;
    background-color: #D1308A;
    outline: none;
    box-shadow: none;
}

.font-actas-maopa {
    color: #23233E;
    font-size: 25px;
    font-weight: 700;
}

.font-actas-maopa-dark {
    color: #E2E2E2;
    font-size: 25px;
    font-weight: 700;
}

.mundo-mapa {
    font-size: 50px;
    color: #23233E;
    margin-bottom: -0.5rem;
    margin-top: 1rem;
}

.mundo-mapa-dark {
    font-size: 50px;
    color: #E2E2E2;
    margin-bottom: -0.5rem;
    margin-top: 1rem;
}

.estiloEstado {
    color: #7474DD;
    text-decoration-line: underline;
}

.estiloEstadoNegro {
    color: #E1E1E1;
    text-decoration-line: underline;
}

.font-preguntas {
    font-weight: bold;
    border-color: white;
    border-left-style: solid;
    border-width: .8rem;
    font-size: 1.7rem;
    margin-bottom: 2rem;
}

#lista-preguntas {
    list-style: none;
}

.parrafos-preguntas {
    margin-left: 3rem;
    margin-right: 30rem;
}

.font-titulo-preguntas {
    font-weight: bold;
    border-color: #34344E;
    color: #34344E;
    border-left-style: solid;
    border-width: .8rem;
    font-size: 1.7rem;
}

.font-titulo-preguntas-black {
    font-weight: bold;
    border-color: #D7D7D7;
    color: #D7D7D7;
    border-left-style: solid;
    border-width: .8rem;
    font-size: 1.7rem;
}

.buscador {
    width: 95%;
    position: relative;
    display: flex;
}

.searchTerm {
    width: 100%;
    border: none;
    border-right: none;
    padding: 5px;
    height: 3rem;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #000;
    box-shadow: 30px 5px #9DBFAF;
    font-size: 20px;
}

.searchTerm::placeholder {
    color: #34344E;
    font-size: 1.3rem;
    font-weight: 700;
    padding-left: 1rem;
}

.searchTermBlack {
    width: 100%;
    border: none;
    border-right: none;
    padding: 5px;
    height: 3rem;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #fff;
    box-shadow: 30px 5px #9DBFAF;
    font-size: 20px;
    background-color: black;
}

.searchTermBlack::placeholder {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    padding-left: 1rem;
}

.botonBuscar {
    width: 40px;
    height: 3rem;
    border: none;
    background: white;
    text-align: center;
    color: black;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 25px;
    box-shadow: 4px 6px #9DBFAF;
}

.botonBuscarBlack {
    width: 40px;
    height: 3rem;
    border: none;
    background: black;
    text-align: center;
    color: white;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 25px;
    box-shadow: 4px 6px #9DBFAF;
}

[data-info]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}

[data-info]:after {
    content: attr(data-info);
    background-color: #333;
    color: #fff;
    font-size: 13px;
    position: absolute;
    padding: 3px 20px;
    bottom: -1.6em;
    left: 100%;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
    border-radius: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
}

[data-info] {
    position: relative;
}

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}

[data-title]:after {
    content: attr(data-title);
    background-color: #333;
    color: #fff;
    font-size: 14px;
    position: absolute;
    padding: 3px 20px;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #222222;
    opacity: 0;
    border: 1px solid #111111;
    z-index: 99999;
    visibility: hidden;
    border-radius: 6px;
}

[data-title] {
    position: relative;
}

.boton-avance {
    width: 6rem;
    height: 2.5rem;
}

.boton-avance:hover,
.boton-avance:focus {
    border: #D1308A;
    background-color: #D1308A;
    outline: none;
    box-shadow: none;
}

#lista-preguntas>li>a {
    text-decoration: none;
    font-weight: 700;
    color: white;
}

.preguntas {
    margin-bottom: 1rem;
}

.info-encabezado {
    font-size: 13px;
    border-color: white;
    border-left-style: solid;
    border-right-style: solid;
    border-width: 0.1rem;
    height: 2rem;
    margin-top: 0.5rem;
}

.preguntas-encabezado {
    font-size: 13px;
    margin-top: 0.4rem;
}

.font-encabezado {
    font-size: 13px;
    border-color: white;
    border-right-style: solid;
    border-width: 0.1rem;
    height: 2rem;
    margin-top: 0.4rem;
}

.a-menor {
    color: white;
    font-size: 14px !important;
}

.rango-texto {
    margin-left: -0.5rem;
    margin-right: -1rem;
}

.a-grande {
    color: white;
    font-size: 25px !important;
    margin-top: -0.6rem;
}

.boton-base {
    font-size: 15px;
    background-color: #34344E;
    margin-left: auto;
    margin-right: auto;
    width: 12rem;
}

.boton-base:hover,
.boton-base:focus {
    border: #34344E;
    background-color: #34344E;
    outline: none;
    box-shadow: none;
}

.boton-base-black {
    font-size: 15px;
    background-color: #D1308A;
    margin-left: auto;
    margin-right: auto;
    width: 12rem;
}

.boton-base-black:hover,
.boton-base-black:focus {
    border: #D1308A ;
    background-color: #D1308A ;
    outline: none;
    box-shadow: none;
}

.lista-base {
    list-style: none;
    margin-left: 1.5rem;
}

.lista-base>li>a {
    text-decoration: none;
    color: white;
}

.parrafo-base {
    margin-bottom: -14rem;
    margin-left: 20rem;
    margin-right: 20rem;
}

#lista-consulta {
    margin: 1rem 1rem;
    padding: 0;
    counter-reset: item;
}

#lista-consulta>li {
    margin: 0;
    padding: 0 0 0 2em;
    text-indent: -2em;
    list-style-type: none;
    counter-increment: item;
}

#lista-consulta>li:before {
    display: inline-block;
    width: 1.5em;
    padding-right: 0.5em;
    font-weight: bold;
    text-align: right;
    content: counter(item) ".";
}

.font-fila-bd {
    color: #A5005D;
    font-weight: bold;
    font-size: 24px;
}

.font-texto {
    color: #34344E;
    font-weight: 600;
    font-size: 16px;
    margin-top: -1.2rem;
    margin-left: 1rem
}

.font-texto-dos {
    color: #34344E;
    font-size: 16px;
    margin-top: -1.2rem;
    margin-left: 1rem
}

.font-texto-corchetes {
    color: #34344E;
    font-size: 14px;
}

.corchete-derecho {
    color: #34344E;
    font-size: 70px;
    font-weight: 500;
    margin-top: -2.5rem;
    margin-left: -2.4rem;
}

.corchete-izquierdo {
    color: #34344E;
    font-size: 70px;
    font-weight: 500;
    margin-top: -2.5rem;
    margin-left: 5.2rem;
}

.margin-corchetes {
    margin-left: -4rem;
    margin-top: -2rem;
}

.lista-base-uno {
    color: #34344E;
    font-weight: 500;
    font-size: 15px;
    margin-top: -4rem;
    margin-left: -4rem;
}

.lista-base-dos {
    color: #34344E;
    font-weight: 500;
    font-size: 15px;
    margin-left: -4rem;
}

.margin-auth {
    margin-left: 5rem;
    margin-right: 20rem;
    font-size: 16px;
}

.modoBlanco {
    background-color: white;
}

.modoObscuro {
    background-color: #000;
    color: #B5B5B5 !important;
}

.modoNegro {
    background-color: #1D1D1D;
}

.modoClaro {
    background-color: #F9F9F9;
}

.menuLateralClaro {
    background-color: #34354D;
    min-height: 1000px;
}

.menuLateralObscuro {
    background-color: #1D1D1D;
    min-height: 1000px;
}

.conoceCasillaClaro {
    background-color: #34344E;
    color: white;
}

.conoceCasillaObscuro {
    background-color: #1D1D1D;
    border-color: #B5B5B5;
    color: #B5B5B5;
}

.colorRosa {
    background-color: #D288B4;
}

.cabeceraBlanco {
    background-color: white;
}

.cabeceraObscuro {
    background-color: #1D1D1D;
    color: white;
}

.botonUnoObs {
    background-color: #1D1D1D !important;
    color: #B5B5B5 !important;
}

.botonesClaro {
    background-color: #D1308A !important;
    border: #D1308A !important;
}

.botonesObscuro {
    background-color: #D1308A !important;
    border: #D1308A !important;
    color: black !important;
}

.qualityblack {
    position: relative;
    display: inline-block;
    width: 50%;
    height: 100%;
    line-height: 40px;
}

.qualityblack label {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 120%;
    cursor: pointer;
    text-align: center;
    transition: transform 0.4s, color 0.4s, background-color 0.4s;
    font-size: 12px;
}

.qualityblack p {
    margin-top: -0.9rem;
}

.qualityblack input[type="radio"] {
    appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
}

.qualityblack input[type="radio"]:focus {
    outline: 0;
    outline-offset: 0;
}

.qualityblack input[type="radio"]:checked~label {
    background-color: #D187B3;
    color: black;
}

.qualityblack input[type="radio"]:active~label {
    transform: scale(1.05);
}

.cuadroResumenClaro {
    background-color: #F4F4F4
}

.cuadroResumenObscuro {
    background-color: #222222
}

.fontTotalVotos {
    font-size: 40px;
    font-weight: 700;
    color: #34344E;
}

.fontTotalVotosBlack {
    font-size: 40px;
    font-weight: 700;
    color: #ED98CB;
}

.seccion_casilla_black {
    background-color: black;
    color: white;
}

.seccion_casilla_black:hover {
    background-color: black;
    color: white;
}

.seccion_casilla_black:focus {
    background-color: black;
    color: white;
}

.modalClaro {
    background-color: #ffffff;
    color: #000000;
}

.modalOscuro {
    background-color: #121212;
    color: #B1B1B1;
}

.font-detalle {
    color: #34344E;
    font-size: 20px;
    font-weight: 700;
}

.font-detalle-black {
    color: #D7D7D7;
    font-size: 20px;
    font-weight: 700;
}

.footer_blanco {
    background-color: #34354D;
}

.footer_negro {
    background-color: #1D1D1D;
}

.modalHeaderClaro {
    background-color: #23233E;
    color: white;
}

.modalHeaderOscuro {
    background-color: #121212;
    color: white;
}

.colorLetrasClaro {
    color: black;
}

.colorLetrasNegro {
    color: #B5B5B5;
}

.switch_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 5rem;
    min-width: 4rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}


/* Switch 3 Specific Style Start */

.toggle_switch {
    width: 100px;
    height: 45px;
    position: relative;
}

input[type="checkbox"].switch_3 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    outline: 0;
    z-index: 1;
}

svg.checkbox .outer-ring {
    stroke-dasharray: 375;
    stroke-dashoffset: 375;
    -webkit-animation: resetRing 0.35s ease-in-out forwards;
    animation: resetRing 0.35s ease-in-out forwards;
}

input[type="checkbox"].switch_3:checked+svg.checkbox .outer-ring {
    -webkit-animation: animateRing 0.35s ease-in-out forwards;
    animation: animateRing 0.35s ease-in-out forwards;
}

input[type="checkbox"].switch_3:checked+svg.checkbox .is_unchecked {
    opacity: 1;
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
}

input[type="checkbox"].switch_3:checked+svg.checkbox .is_checked {
    opacity: 0;
    -webkit-transform: translateX(-200%) rotate(180deg);
    transform: translateX(-200%) rotate(180deg);
}

svg.checkbox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

svg.checkbox .is_unchecked {
    opacity: 0;
    fill: #fff;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translateX(200%) rotate(45deg);
    transform: translateX(200%) rotate(45deg);
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
}

svg.checkbox .is_checked {
    opacity: 1;
    fill: yellow;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
}

@-webkit-keyframes animateRing {
    to {
        stroke-dashoffset: 0;
        stroke: #000;
    }
}

@keyframes animateRing {
    to {
        stroke-dashoffset: 0;
        stroke: #000;
    }
}

@-webkit-keyframes resetRing {
    to {
        stroke-dashoffset: 0;
        stroke: #b0aa28;
    }
}

@keyframes resetRing {
    to {
        stroke-dashoffset: 0;
        stroke: #b0aa28;
    }
}

.colorClaroPreguntas {
    background-color:#F4F4F4;
}

.colorClaroPreguntasNegro {
    background-color:#000000;
}

.font-votos-tarjetas {
    font-size: 10px;
}

.avisoPrivacidad {
    cursor: pointer;
    text-decoration-line: underline;
}