/* @import url('https://fonts.googleapis.com/css?family=Numans'); */

@font-face {
font-family: LatoBoldFont;
src: url('../fonts/lato-700-8256b6.woff2');
}

@font-face {
font-family: LatoThinFont;
src: url('../fonts/lato-300-dca86a.woff2');
}

@font-face {
font-family: LatoSuperBoldFont;
src: url('../fonts/lato-900-7c11c8.woff2');
}

@font-face {
font-family: LatoNormalFont;
src: url('../fonts/lato-regular-f7ff2a.woff2');
}

html,body{
background-image: url('../img/bg_bandaancha.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
height: 100%;
font-family: LatoNormalFont, sans-serif;
color: #FFC439;
text-align: center;
}

.container{
height: 100%;
align-content: center;
}

.button-container{
/* height: 100%; */
margin: 0 auto;
align-content: center;
}

.container-content {
text-align: center;
position: relative;
}

.card{
height: 355px;
margin-top: auto;
/* margin-bottom: auto; */
margin-bottom: 1rem;
width: 280px;
background-color: rgba(0,0,0,0.5) !important;
}

.social_icon span{
font-size: 60px;
margin-left: 10px;
color: #FFC312;
}

.social_icon span:hover{
color: white;
cursor: pointer;
}

.card-header h1{
font-family: LatoBoldFont;
color: white;
text-align: center;
}

.debt h3{
font-family: LatoBoldFont;
font-size: 35px;
}

h4{
font-size: 20px;
}

.card-footer img {
display: block;
max-width: 40%;
max-height: 40%;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
}

.social_icon{
position: absolute;
right: 20px;
top: -45px;
}

.input-group-prepend span{
width: 50px;
background-color: #FFC439;
color: black;
border:0 !important;
}

input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}

.remember{
color: white;
}

.remember input
{
width: 20px;
height: 20px;
margin-left: 15px;
margin-right: 5px;
}

.yellow_btn{
color: black;
background-color: #FFC439;
width: 100px;
}

.yellow_btn:hover{
color: black;
background-color: #FC9905;
}

.yellow_webpay_btn{
color: black;
background-color: #FFC439;
width: 180px;
}

.yellow_webpay_btn img{
display: block;
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
}

.yellow_webpay_btn:hover{
color: black;
background-color: #FC9905;
}

.yellow_ext_btn{
color: black;
background-color: #FFC439;
width: 150px;
}

.yellow_ext_btn:hover{
color: black;
background-color: #FC9905;
}

.yellow_small_btn{
color: black;
background-color: #FFC439;
width: 50px;
font-size: 20px;
padding: 0;
}

.yellow_small_btn:hover{
color: black;
background-color: #FC9905;
}

.yellow_static_btn{
color: black;
background-color: #FFC439;
width: 100px;
position: fixed;
top: 30px;
right: 30px;
}

.yellow_static_btn:hover{
color: black;
background-color: #FC9905;
}

.links{
color: white;
}

.links a{
margin-left: 4px;
}

/* Seccion de la tabla de facturas */

.card-invoices{
    /* height: 355px; */
    /* margin-top: auto; */
    /* margin-top: 90px;
    margin-bottom: 20px; */
    /* margin-bottom: 1rem; */
    /* width: 310px; */
    /* padding: 30px; */
    /* padding-bottom: 100%; */
    margin: 20px;
    background-color: rgba(0,0,0,0.5) !important;
    position: relative;
    
}

.card-body-invoices {
/* position: absolute; */
width: 100%;
height: 100%;
padding: 20px;
}

html dl {
text-align: right;
position: absolute;
right: 40px;
top: 20px;
}

html dl dt, html dl dd {
color: #FFC439;
display: inline;
font-size: 15pt;
margin: 0; }
/* html dl dt {
color: white; }
html dl dt::before {
content: '';
display: block; }
html dl dt::after {
content: ':'; } */

html table {
border-collapse: collapse;
margin-top: 40px;
width: 100%; }

html table th {
border-bottom: .2mm solid #a9a;
color: #a9a;
font-family: LatoBoldFont;
font-size: 10pt;
font-weight: 400;
padding-bottom: .25cm;
text-transform: uppercase; }

html table td {
color: white;
padding-top: 7mm; }

html table td:nth-last-of-type(2) {
color: #FFC439;
font-family: LatoBoldFont;
font-size: 20px;
/* text-align: right;  */
}

html table th, html table td {
text-align: center; }

html table th:first-of-type, html table td:first-of-type {
text-align: left; }

html table th:last-of-type, html table td:last-of-type {
text-align: right; }

html table#total {
/* background: #f6f6f6;
border-color: #f6f6f6;
border-style: solid;
border-width: 2cm 3cm;
bottom: 0; */
font-size: 20pt;
margin-top: 40px;
/* margin: 0 -3cm;
position: absolute;
width: 18cm;  */
}

html table#total th{
font-size: 13pt; }