@charset "UTF-8";
/* CSS Document */
/* ESTAS SON LAS CLASE FORMULARIO DE PAGOS */
.text-bold{
	font-weight: bold;
	width: 50%;
}
.st-table{
width: 100%;
}
.st-table tbody tr td{
padding: 15px;
background: #FFFFFF;
border-bottom: 5px solid #E5E5E5;
}
.st-table thead tr td{
background: #128594;
color: #FFFFFF;
font: normal normal bold 15px/26px Titillium Web;
padding: 15px;
}
.st-bloque-list{
	border-bottom: 1px solid #ccc;
}
.errorinput{
    background: #FFD1D9 !important;
}
.div-img-pago{
    min-height: 300px;
    background: url('../imagenes/paga-recibo-en-linea-gdp.jpg');
    background-position: center;
    background-size: cover;
}
.btn_nuevo_550{
    background: transparent linear-gradient(90deg, #A8B423 0%, #727B17 100%) 0% 0% no-repeat padding-box !important;
    border: 1px solid #AEBC18 !important;
    opacity: 1 !important;
    color: #FFFFFF !important;
    min-width: 150px !important;
    height: auto !important;
    /*font: normal normal bold 15px/26px Titillium Web !important;
    letter-spacing: 1px;*/
    font-family: 'Titillium Web';
}
.text_negro_1{
    text-align: left;
    font: normal normal bold 20px/30px Titillium Web;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
}
.label-input{
    text-align: left;
    font: normal normal bold 15px/26px Titillium Web;
    letter-spacing: 0px;
    color: #0D68A0;
    opacity: 1;
}
.input-nuevo, .kr-input-field{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #21CBD6 !important;
    opacity: 1!important;
    border-radius: 20px;
    padding: 0.3em 0.7em;
}
input::placeholder{
    color: #C3C6D1 !important;
}
.content-select{
    max-width: 250px;
    position: relative;
}
.outlinenone_t{
    outline: none;
    background-color: #dfe;
    border: 0;
}
.content-input input,
.content-select select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.content-select select::-ms-expand {
    display: none;
}
.content-select{
    max-width: 350px;
    position: relative;
}

.content-select select{
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 1px 10px;
    height: 30px;
    outline: 0; 
    border: 0;
    border-radius: 0;
    background:#FFFFFF;
    color: #7b7b7b;
    font-size:16px;
    color: #999;
    font-family: var(--tipografia-light);
    border: 1px solid #21CBD6 !important;
    border-radius: 10px;
    position: relative;
    transition: all 0.25s ease;
}

.content-select select:hover{
    background:#E9E9E9;
}

/* 
Creamos la fecha que aparece a la izquierda del select.
Realmente este elemento es un cuadrado que sólo tienen
dos bordes con color y que giramos con transform: rotate(-45deg);
*/
.content-select i{
    position: absolute;
    right: 10px;
    top: calc(50% - 8px);
    width: 10px;
    height: 10px;
    display: block;
    border-left: #21CBD6 2px solid;
    border-bottom: #21CBD6 2px solid;
    transform: rotate(-45deg); /* Giramos el cuadrado */
    transition: all 0.25s ease;
    font-family: var(--tipografia-light);
}

.content-select:hover i{
    margin-top: 3px;
}
.fondo_degrade_azul22{
    background: transparent linear-gradient(180deg, #138C92 0%, #0D68A0 100%) 0% 0% no-repeat padding-box;
    opacity: 1;
}
/* FIN ESTAS SON LAS CLASE FORMULARIO DE PAGOS */