html, body
{
    height:100%
}
.check{
    color:green !important;
}

.bar-color-blue{
    background-color: #05d5e2 !important;
}
.bar-color-grey{
    background   : #e0e4e7 !important;
    border-radius: 5rem;
    overflow     : hidden;
    height       : 8px !important;
}
.bg-grey{
    background: #f8fafb;
    width: 100%;
}
.pa{
    position: absolute;
    width: fit-content;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    text-align:center;
}
span#pa-center::before {
    content: "";
    background: white;
    width: 160%;
    height: 110%;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    transform: translate(-50%,-50%);
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
    font-weight: bold;
}
.pa-izq{
    left:0;
}
.pa-der{
    right:0;
}
.pa-contenedor{
    position: relative;
    margin-top: 0.5rem;
    height: 25px;
}
.colocacion-datos-gastos {
    display: flex;
    flex-direction: column;
    align-content: center;
    flex: 1 0 400px;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}
.colocacion-periodo-factura {
    display        : flex;
    flex-direction : row;
    flex-wrap      : wrap;
    align-items    : stretch;
    padding        : 0;
    align-content  : flex-start;
    justify-content: flex-start;
    width          : 100%;
}
.colocacion-datos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}
.rdp{
    padding: .8rem 1.6rem;
}
.mejor-ahorro {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: #fafbfc;
}
.datos-mejorar-ahorro {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}
.colocar-ahorro {
    max-width: 100%;
    width: 100%;
}
.btn-dark-blue {
    background: #161b43 !important;
}
.datos-principales {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    justify-content: center;
}
.btn-light-blue{
    background: #cfebf5 !important;
}
.text-dark-blue{
    color:#31758a !important;
}
.orden-historial-facturas td{
    padding: 1rem;
    padding: 1rem;
}
.banner-periodo-factura {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    background: url(../assets/icons/flechitas-deco.png) no-repeat scroll 95% center / auto 70% #006ba4;
    flex: 1 0 350px;
    gap: 0.2rem;
    color: #ffffff;
    border-radius: 7px;
    gap: 1rem;
}
.banner-periodo-factura .icono img {
    height: 85px;
}
.colocacion-wallet {
    position: relative;
    top: 0;
    z-index:1;
}
.wallet-balance {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
}

.tarjeta_checklist
{
    background: #f1f3f4;
    border-radius: 5px;
    padding: 0.5rem;
}

.check svg path {
    fill: var(--color-success);
}

.check svg {
    width: 100%;
    height: 100%;
}

.check {
    width: 20px;
    height: 20px;
    position: relative;
    display: block;
}

span.circle-cont-red {
    display: flex;
    padding-left: 0.15rem;
    width: 20px;
}

span.texto_enlace {
    color: var(--main-pink);
    cursor: pointer;
}

span.texto_enlace:hover {
    text-decoration: underline;
}

span.circle-red {
    width: 14px;
    height: 14px;
    border-radius: 100%;
    box-shadow: 0 0 0 1px var(--color-error);
    position: relative;
}

span.c-circle {
    background-color: var(--color-error);
    width: 7px;
    height: 7px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 100%;
    transform: translate(-50%,-50%);
}

#_accesoRapidoApellido,
#_accesoRapidoDNI,
#_accesoRapidoTelefono,
#_accesoRapidoIBAN,
#_accesoRapidoDireccion,
#_accesoRapidoLocalidad,
#_accesoRapidoNombre {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 0.2rem;
}
div#_barAzul {
    transition: width 4000ms ease-in-out;
}

span#pa-center {
    left: 0%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 4;
    transition: left 4000ms ease-in-out;
}
.dpi-flex {
    display: flex;
    gap: 0.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
    padding:0.9rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
    border-radius: 5px;
}

.d-porcentaje 
{
    flex           : 1 0 310px;
    display        : flex;
    flex-direction : row;
    flex-wrap      : wrap;
    align-content  : flex-start;
    justify-content: center;
    align-items    : stretch;
    gap            : 1rem;
}

.d-tabla {
    flex: 1 0 auto;
}
tbody#_contenidoResultadosMejora tr {
    background-color: #f5f6f9;
}
tr.tr-separador {
    background-color: #ffffff !important;
    height: 2px;
    border: none !important;
}
tr.tr-separador td {
    height: 2px;
    padding: 0;
    margin: 0;
    min-height: 4px;
    border: none !important;
    max-height:2px;
}
td.td-separador span {
    height: 7px;
    display: block;
}
tr td 
{
    border:none !important;
}