* {
    font-family: 'Source Sans Pro';
    margin: 0;
    list-style: none;
    text-decoration: none;
    padding: 0;
}

body,
.about .container,
.app .container,
.inputs .container,
footer {
    font-family: 'Source Sans Pro', sans-serif;
    padding-bottom: 0;
    background: -webkit-linear-gradient(left, #1a8cff, #99ccff);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, #1a8cff, #99ccff);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, #1a8cff, #99ccff);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(left, #1a8cff, #99ccff);
    /* Standard syntax (must be last) */
}

#powerBySAP {
    display: flex;
    justify-content: flex-end;
    padding: 0.5em 3em;
}

.home #powerBySAP img {
    width: 15%;
    height: 15%;
}

#powerBySAP img {
    width: 9%;
    height: 9%;
}

#imgApp {
    margin-top: 8em;
}

.graficos footer {
    display: none;
}

p {
    font-size: 1.7em;
    font-weight: lighter;
}

h2 {
    font-size: 2em;
}

.letraTamano {
    font-size: 1em;
}

.blanco {
    color: white;
}

.todo {
    margin-right: 80px;
    margin-left: 80px;
    margin-top: 80px;
}

.menuNav .lista {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 1.2em;
}

.menuNav .lista li {
    padding: 0em 1.5em;
}

.menuNav .lista li a {
    font-size: 1.15em;
}

.logintext {
    border-image: initial;
    border: 2px solid white;
    border-radius: 24px;
    padding: 0.2em 0.5em;
}

.menu {
    color: white;
}

.menu ul li a {
    font-size: 1em padding: 1.8em 1em;
}

.menuIcono {}

.logo h1 {
    text-indent: 9999999px;
    overflow: hidden;
}

.menuNav {
    display: flex;
    flex: row;
    justify-content: flex-end;
    align-items: center;
}

.menuNav div {
    width: 20%;
    padding-left: 3em;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.home .menuNav .logoNav {
    visibility: hidden;
}

.menuNav nav {
    width: 80%;
}

.inputs .main_home {
    display: flex;
    flex: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 1.5em;
}

.main_home {
    display: flex;
    flex: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5em;
}

.home_left {
    width: 65%;
    padding: 0 1em 0 5em;
}

.home_right {
    width: 35%;
    padding-left: 3em;
}

#about .home_right {
    width: 35%;
    margin-top: 8em;
    padding-left: 3em;
}

.home_leftinputs {
    width: 55%;
    padding-left: 8em;
    padding-right: 5em;
}

.home_rightinputs {
    width: 45%;
    padding-right: 8em;
    padding-left: 4em;
}

.home_right img {
    width: 75%;
    box-sizing: border-box;
}

.intro p {
    padding-top: 0.8em;
    width: 550px;
}

.intro h2 {
    padding-top: 1em;
}

.buttonCasa {
    padding-left: 3em;
    padding-top: 3.5em;
}

#buttonCasa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.buttonEmpezar {
    background-color: #6CC23E;
    border: none;
    border-radius: 8px;
    padding: 0.5em 1em;
    font-size: 21px;
    cursor: pointer;
    font-weight: bold;
}

#buttonCasa a {
    padding-top: 1em;
    font-size: 1.3em;
}

.about .container,
.app .container {
    padding-bottom: 2em;
}

.about_text {
    color: white;
    width: 50%;
    padding-left: 2em;
}

.about_text h2,
h3 {
    margin-bottom: 1em;
    font-size: 1.3
}

.about_text p,
.about_text ul {
    font-size: 1em;
    margin: 1.7em 0em;
}

.about_text ul {
    padding-left: 3em;
}

.about_text ul li {
    list-style-type: disc;
}

.about_text .destacado {
    font-weight: bolder;
}

#about,
#app {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.login {
    background: #f4f5f7;
}

.login .menuNav {
    display: none;
}

.loginTodo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 5em;
    color: black;
}

.loginTodo p {
    font-size: 1em;
    padding-bottom: 1em
}

.loginLogo {
    padding-bottom: 2em;
}

.loginLogin {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1em;
    color: #312D2D;
    font-size: 21px;
}

.loginRegistrarse {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1em;
    color: #312D2D;
    font-size: 21px;
}

.lineas {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.separadorV {
    padding-bottom: 1em;
}

.separadorH1 {
    padding-right: 1em;
}

.separadorH2 {
    padding-left: : 1em;
}

.loginBoton {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1em;
}

.loginCheck {
    padding-bottom: 1em;
}

.loginRegistrarse input {
    color: grey;
    width: 100%;
    height: 50%;
    border: solid 1px darkgrey;
    border-radius: 4px;
    padding: 0.5em 0.2em;
    padding-left: 0.5em;
    width: 14.1em;
}

.buttonGoogle,
.buttonFacebook {
    background-position: left;
    background-repeat: no-repeat;
    border: none;
    border-radius: 8px;
    width: 12em;
    height: 3em;
    margin-bottom: 2em;
    font-size: 21px;
    cursor: pointer;
    font-weight: bold;
    color: white;
    text-indent: 30px;
}

.buttonGoogle {
    background-image: url('../gp.png');
    background-color: #d34836;
}

.buttonFacebook {
    background-image: url('../fb1.png');
    background-color: #3b5998;
}

.recordarContrasena {
    color: #1a8cff;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 5em;
}

.partial-graficos {
    background-color: white;
    height: 100%;
}

.partial-graficos #contentGraficos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.slidersPanel{
    width: 31%;
}
#slider {
    height: 100%;
    box-sizing: border-box;
    padding: 0.5em;
    background: #f4f5f7;
    overflow: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #55637D;
}

#slider .sliders {
    padding: 0.37em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#slider .sliders div {
    width: 100%;
    margin-left: 0.5em;
}

#slider .sliders div {
    font-size: 14px;
}

#slider .sliders div .rzslider {
    height: 0;
    margin: 0;
}

#slider .sliders div .rzslider .rz-bubble {
    display: none
}

#slider .sliders div .rzslider .rz-pointer {
    background: #09D261;
    width: 20px;
    height: 20px;
    top: -8px;
}

#slider .sliders div.rzslider .rz-pointer:after {
    background-color: transparent;
}

#slider .sliders div.rzslider .rz-pointer.rz-active:after {
    background-color: transparent;
}


/*-------------Sprite-------------------*/

#slider .sliders i {
    padding: 25px 30px;
    overflow: hidden;
    overflow: hidden;
    background-image: url('../images/icons.png');
    background-repeat: no-repeat;
    transition: all 0.5s linear;
}

#slider .sliders:nth-child(1) i {
    background-position: -1px -10px;
}

#slider .sliders:nth-child(2) i {
    background-position: -1px -77px;
}

#slider .sliders:nth-child(3) i {
    background-position: -0px -143px;
}

#slider .sliders:nth-child(4) i {
    background-position: -0px -210px;
}

#slider .sliders:nth-child(5) i {
    background-position: -0px -276px;
}

#slider .sliders:nth-child(6) i {
    background-position: 2px -341px;
}

#slider .sliders:nth-child(7) i {
    background-position: -1px -410px;
}

#slider .sliders:nth-child(8) i {
    background-position: 3px -474px;
}

#slider .sliders:nth-child(9) i {
    background-position: 4px -541px;
}

#slider .sliders:nth-child(1) i:hover {
    background-position: -9px -13px;
}

#slider .sliders:nth-child(2) i:hover {
    background-position: -10px -85px;
}

#slider .sliders:nth-child(3) i:hover {
    background-position: -7px -147px;
}

#slider .sliders:nth-child(4) i:hover {
    background-position: -10px -215px;
}

#slider .sliders:nth-child(5) i:hover {
    background-position: -7px -279px;
}

#slider .sliders:nth-child(6) i:hover {
    background-position: -2px -349px;
}

#slider .sliders:nth-child(7) i:hover {
    background-position: -10px -415px;
}

#slider .sliders:nth-child(8) i:hover {
    background-position: -5px -480px;
}

#slider .sliders:nth-child(9) i:hover {
    background-position: -2px -545px;
}

.partial-graficos {
    background: white;
}

#graficos {
    width: 69%;
}

#donut,
#dataFake,
#indice {
    width: 100%;
    margin-top: 2em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: inherit;
}

#donut {
    align-items: flex-start;
}

#donutPersona,
#datosInflacion {
    width: 100%;
    background: inherit;
}

#donutPersona .ng-isolate-scope .nvd3-svg {
    height: 470px !important;
    width: 470px !important;
}

#indice .ng-isolate-scope .nvd3-svg {
    height: 470px !important;
    width: 770px !important;
}

#dataFake .ng-isolate-scope .nvd3-svg {
    height: 200px !important;
    width: 350px !important;
}

#dataFake {
    background: inherit;
    align-items: flex-start;
}

.dataFake {
    padding: 2em;
}

#porcentajeInflacion .data .percentage {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 58%;
    border-box: box-sizing;
}

#porcentajeInflacion .data .percentage span {
    font-size: 2.5em;
    font-weight: light;
    white-space: nowrap;
    width: 100%;
    border-box: box-sizing;
}

#porcentajeInflacion .data .percentage label {
    font-size: 1.15em;
    padding-left: 10px;
    font-weight: bolder;
    width: 80%;
    border-box: box-sizing;
}

#porcentajeInflacion .data div p {
    font-size: 0.8em;
    color: #55637D;
    width: 80%;
}

#porcentajeInflacion #data2 div p {
    font-size: 0.8em;
    color: #178EC8;
    width: 80%;
}

#porcentajeInflacion #data1 .percentage #promedioP,
#porcentajeInflacion #data2 .percentage #generalP {
    font-size: 40px;
}

#porcentajeInflacion #data1 .percentage span,
#porcentajeInflacion #data1 .percentage label {
    color: #6CC13E;
}

#porcentajeInflacion #data2 .percentage span,
#porcentajeInflacion #data2 .percentage label {
    color: #178EC8;
}


/*------------------Material---------------------*/

#graficosContent {
    width: 100%;
    height: 100%;
}

#graficosTabs {
    width: 100%;
    height: 100%;
}