/* Barra lateral */
.btn_item {
    display: inline-block;
    padding: 0px;
    font-size: 13pt;
    width: 40%;
    font-family: 'Roboto', sans-serif;
    border-width: thin;
    border-style: solid;
}

.btn_item:hover {
    cursor: pointer;
}

.btn_blue {
    background-color: #0881FA;
    color: white;
    border-color: #0881FA;
}

.btn_white {
    background-color: white;
    border-color: #BCBCBC;
}


/*  InfoHipo  */

.text,
.icon {
    display: inline-block;
    font-family: 'roboto', sans-serif;
    font-size: 13pt;
    font-weight: 400;
}

.middle{
    align-self: center;
    display: block;
    width: 100%;
}

.aviso{
    text-align: center;
    font-size: 12pt;
}

.container-calhip {
    background-color: #E3EEFF;
    border-color: #0881FA;
    padding-top: 0%;
    padding-bottom: 0%;
    padding-left: 0%;
    padding-right: 0%;
    border-width: thin;
    border-style: solid;
    margin: 0% 9.5% 0% 9.5%;
}

.item_right {
    text-align: right;
    margin-right: 5%;
}

.item_left {
    text-align: left;
    margin-left: 5%;
}

.element {
    display: inline;
    width: 100%;
    /*height: 50px;*/
    margin-bottom: 0%;
}

h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 20pt;
    text-align: center;
}

.icon {
    vertical-align: middle;
    margin-left: 3%;
}

.input_box, .input_box_especial {
    width: 64%;
    height: 35px;
    font-size: 18px;
    text-align: right;
    border-style: solid;
    border-width: 3px;
    border-color: #0881FA;
    padding-right: 10px;
    /* Padding derecho interior de los input*/
}

.input_box_especial{
    width: 35%;
    display: inline-block;
    margin-top: 3%;
}   

.especial_simbol{
    display: inline-block;
    margin-right: 2%;
    margin-left: 3%;

}

#porcentaje_enganche{
    width: 25%;
}

.subtitle {
    /* Capital + intereses */
    font-size: 10px;
    margin-top:-3%;
    margin-left: 0%;
}

#pago_mensual{
    text-align: right;
    margin-right: 5%;
    margin-top: -16%;
    font-size: 15pt;
}

#element_pago_mensual{
    margin-left: 10%;
}

.alerta{
    color: red;
    text-align: center;
    width: 100%;
}


/* Btn Blue */

.botton_container-calhip {
    width: 100%;
}

.button {
    vertical-align: middle;
    text-align: center;
    align-content: center;
    margin: 8% 0% 5% 0%;
    border-radius: 10px;
}

.button input {
    color: #fff;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14pt;
    font-weight: 400;
    padding: 5% 7% 5% 7%;
    background-color: #0881FA;
    border-style: none;
    border-radius: 10px;
}

#btn_calcular_resultados:hover,
#aceptar,
#eliminar,
.p_click {
    cursor: pointer;
}


/* Pagos adicionales */

.button_modify {
    vertical-align: middle;
    text-align: center;
    align-content: center;
    margin: 10% 10% 0% 10%;
    border-radius: 10px;
    /*background-color: red;*/
}

.button_modify input {
    color: #000;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 13pt;
    font-weight: 400;
    padding: 5% 7% 5% 7%;
    background-color: #fff;
    border-style: none;
    border-radius: 10px;
}

.select_item {
    font-size: 10pt;
    width: 68%;
    height: 50px;
    text-align: right;
    border-style: solid;
    border-width: 3px;
    border-color: #0881FA;
    padding-right: 10px;
}

.list_pag_ext {
    /*padding-top: 5%;*/
    text-align: left;
}

li {
    list-style: none;
    display: inline-block;
    margin-right: 5%;
}

.li_e{
    font-size: 14px;
}

.ul_item_list {
    display: inline-block;
    width: 80%;
    padding-inline-start: 10px;
}

.block_add {
    padding-left: 50%;
    margin-top: 0%;
}

.alg_right {
    text-align: right;
}

.alg_left {
    text-align: left;
}

.icon_add {
    width: 15%;
    height: 15%;
}

.icon, .icon_add:hover,
#aceptar:hover,
#eliminar:hover,
#cancelar:hover {
    cursor: pointer;
}

#icon_modify {
    margin-left: -3%;
}

#icon_delete {
    margin-left: 3%;
}

.iterative{
display: inline-block;
border-color: #BCBCBC;
border-width:thin;
border-style: solid;
}

.list_pag_ext {
    width: 100%;
}