#app-calhip {
    font-family: 'Avenir', Helvetica, Arial, sans-serif, 'Roboto', 'lato';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;

}

body {
    margin: 0%;
    width: 100%; 
    height: 100%;
}

.content-calhip{
    margin-top: 3%;
}

.barra_lateral-calhip,
.contenido_central,
.middle_text {
    display: inline-block;
}

.barra_lateral-calhip {
    width: 30%;
}

.contenido_central {
    width: 70%;
    vertical-align: top;
}

.middle, .middle_text {
    width: 50%;
}

.middle_block {
    width: 50%;
    float:left;
}

.div25 {
    width: 25%;
}

.block {
    width: 100%;
    display: inline-block;
}

.text_left {
    text-align: left
}

.text_right {
    text-align: right;
}

.line_block {
    display: inline-block;
    margin-bottom: 3%;
    margin-left: 5%;
    width: 100%;
}

.containAll {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
 .box_w64{
    width: 64%;
 }

 .cont-calhip{
     display: inline;
 }

 .divisor{
    display: flow-root;
 }

@media screen and (max-width: 800px) {
    .sub_title_graf_blue {
        font-size: 16pt!important;
    }
    .text,
    .icon {
        font-size: 12pt!important;
    }
    .barra_lateral-calhip, #app-calhip, body, .bar-calhip, footer, .contenido_central, .content-calhip {
        width: 100%!important;
        margin: 0% 0% 0% 0%!important;
        padding: 0%!important;
    }
    #app-calhip {
        margin: 0% 0% 0% 0%!important;
        padding: 0% 0% 0% 0%!important;
    }
    .header-calhip{
        margin: 0!important;
    }
    .content-calhip{
        width: 100%!important;
    } 
 
    .footer{
        margin-right: 15%!important;
        width: 90%!important;
    }
    #calculator_title{
        font-size: 25px!important;
        margin-right: 0%!important;
    }
    .middle_block {
        width: 95%!important;
        margin-left: 0px!important;
    }
    #grafica_especial {
        margin-left: 0%!important;
    }
    .item-calhip {
        width: 47%!important;
    }
    .btn_item {
        width: 47%!important;
        font-size: 10pt!important;
    }
    .container-calhip, .header-calhip, .btns_titles{ 
        margin: 0% 0% 0% 0%!important;
    }
    li {
        margin-right:0%!important;
    }
    ul {
        padding-inline-start: 0px!important;
    }
    .item_size {
        width: 17%!important;
    }
    .content_element {
        padding: 0% 0% 0% 4%!important;
    }
    .desglose,
    .resumen {
        text-align: left!important;
    }
    .item_tittle {
        font-size: 14pt!important;
    }
    #title_text {
        text-align: justify!important;
        font-size: 11px!important;
    }
    .title_element { 
        margin-left: 0%!important;
        text-align: center!important;
        font-size: 10pt
    }
    .title_results {
        margin-left: 5%!important;
        margin-top: -2%!important;
        margin-bottom: 2%!important;
        text-align: center!important;
    }
    .block {
        padding-left: 0%!important;
        text-align: center!important;
    }
    .icon_esp{
        margin-block-start: 1em!important;
    }
    .aviso{
        padding: 0% 5% 0% 5%!important;
        font-size: 10pt!important;
    }
    .alerta{
        font-size: 10pt!important;
        text-align: left!important;
        margin-right: 10%!important;
    }

    .subtitle{
        font-size: 7pt!important;
    }
    .input_box_especial{
        width: 30%!important;
    }
    #porcentaje_enganche{
        width: 20%!important;
    }
    .item_text{
        min-height: 180px!important;
    }
    .item_container-calhip{
        min-height: 210px!important;
        max-height: 210px!important;
    }
    #pago_mensual{
        font-size: 15pt!important;
        margin-top: -10%!important;
    }
    .input_box, .input_box_especial {
        font-size: 13px!important;
    }
    .button input, .button_modify input {
        font-size: 10pt!important;
    }
    .sub_title_graf_gray, .sub_title_graf_blue {
        font-size: 10pt!important;
    }
    .cant_graf_gray, .cant_graf_blue {
        font-size: 10pt!important;
    }
    .total_amount {
        font-size: 13pt!important;
    }
    #title_footer{
        font-size: 18pt!important;
    }
    #pago_mensual_text {
        font-size: 10pt!important;
    }
    .ul_item_list {
        padding-inline-start: 0px!important;
    }
    .mid{
        margin-left: -10%!important;
        margin-right: 10%!important;
    }
    .cont_list{
        height: 400px!important;
    }
}

@media screen and (max-device-width: 480px) {
    .item_bar {
        margin: 0% 6% 0% 1%!important;
    }
    .header-calhip {
        padding: 0% 0% 0% 0%!important;
    }
    .barra_lateral-calhip {
        width: 100%!important;
    }
    #app-calhip {
        margin: 0% 0% 0% 0%!important;
        padding: 15% 3% 15% 3%!important;
    }
    .middle_block {
        width: 100%!important;
        padding: 3% 3% 5% 3%!important;
    }
    #grafica_especial {
        margin-left: -0%!important;
    }
    .desglose,
    .resumen {
        text-align: left!important;
    }
    .desglose{
        margin-top: 10%!important;
    }
    .contenido_central {
        width: 90%!important;
    }
    .item-calhip {
        width: 47%!important;
    }
    .btn_item {
        width: 49%!important;
    }
    .btn_blue {
        margin-left: 0px;
        margin-top: 20px;
    }


    body {
        margin: 0% 5% 0% 5%!important;
    }
    .bar-calhip {
        margin: 0% 0% 0% 0%!important;
    }
    .footer {
        margin: 0% 0% 0% 0%!important;
    }
    li {
        margin-right: 1%!important;
        font-size: 10px!important;
    }
    .li_e{
        font-size: 12px!important;
    }
    ul {
        padding-inline-start: 9px!important;
    }
    .item_size {
        width: 17%!important;
    }
    .content_element {
        padding: 0% 0% 0% 4%!important;
    }
    .item_tittle {
        font-size: 11pt!important;
    }
    #title_text {
        text-align: justify!important;
        font-size: 13pt!important;
    }
    #calculator_icon {
        width: 41px!important;
        height: 30px!important;
    }
    #calculator_title {
        font-size: 20pt!important;
        text-align: center!important;
    }
    .title_element {
        margin-left: 0%!important;
        text-align: center!important;
    }
    .title_results {
        margin-left: 5%!important;
        margin-top: -2%!important;
        margin-bottom: 2%!important;
        text-align: center!important;
    }
    #arrow_icon {
        width: 13px!important;
        height: 13px!important;
    }
    .item_text {
        font-size: 12px!important;
    }
    .item_bar {
        margin: 0% 2% 0% 0%!important;
    }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .barra_lateral-calhip {
        width: 100%!important;
    }
    #app-calhip {
        margin: 0% 0% 0% 0%!important;
    }
    #calculator_title{
        font-size: 15pt!important;
    }
    .middle_block {
        width: 100%!important;
        padding: 3% 3% 15% 3%!important;
    }
    #grafica_especial {
        margin-left: -0%!important;
    }
    .desglose,
    .resumen {
        margin-top: 42px!important;
    }
    .contenido_central {
        width: 90%!important;
    }
    .item-calhip {
        width: 47%!important;
    }
    .btn_item {
        width: 46.9%!important;
    }
    .btn_blue {
        margin-left: 0px;
        margin-top: 20px;
    }
    .container-calhip {
        margin: 0% 0% 0% 5%!important;
    }
    body {
        margin: 0% 5% 0% 5%!important;
    }
    .bar-calhip {
        margin: 0% 0% 0% 0%!important;
    }
    .footer {
        margin: 0% 0% 0% 0%!important;
    }
    li {
        margin-right: 1%!important;
    }
    ul {
        padding-inline-start: 0px!important;
    }
    .item_size {
        width: 17%!important;
    }
    .content_element {
        padding: 0% 0% 0% 4%!important;
    }
    .desglose,
    .resumen {
        text-align: center!important;
    }
    .item_tittle {
        font-size: 14pt!important;
    }
    #title_text {
        text-align: justify!important;
        font-size: 13pt!important;
    }
    #calculator_icon,
    #calculator_title {
        width: 41px!important;
        height: 33px!important;
    }
    #calculator_title {
        font-size: 20pt!important;
    }
    .sub_title_graf_blue {
        font-size: 11pt!important;
    }
    .title_element {
        margin-left: 0%!important;
        text-align: center!important;
    }
    .title_results {
        margin-left: 5%!important;
        margin-top: -2%!important;
        margin-bottom: 2%!important;
        text-align: center!important;
    }
    .btns_titles {
        margin: 0% 0% 0% 0%!important;
    }
    .alerta{
        text-align: center!important;
    }
}