:root {
    --dark-color: #0e0b16;
}

@font-face {
    font-family: "font-black";
    src: url(/assets/fonts/ProximaNova-Alt-Black.woff2);
}

@font-face {
    font-family: "font-bold";
    src: url(/assets/fonts/ProximaNova-Alt-Bold.woff2);
}

@font-face {
    font-family: "font-regular";
    src: url(/assets/fonts/ProximaNova-Regular.woff2);
}

body{
font-family: 'font-regular';
background-color: #fcfcfc;
}

.f-black{
font-family: 'font-black';
}
.f-bold{
font-family: 'font-bold';
}
.f-regular{
font-family: 'font-regular';
}

.txt-right{
text-align: right;
}

.block{
display: block;
}

.uppercase{
text-transform: uppercase;
}

.capitalize{
text-transform: capitalize;
}

.hr{
    border: solid 1px #929292;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.f1-vw{
    font-size: 12vw;
}

.c2{
color: #bebebe;
}

.inline-block{
display: inline-block;
}

.header-logo{
background-color: var(--dark-color);
padding: 50px;
}

.invoice-header-info{
padding-top: 70px;
padding-bottom: 30px;
}

.relative{
position: relative;
}

.block{
display: block;
}

.home{
background-color: var(--dark-color);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
}

/*Badges*/
.custom-badge{
font-family: 'font-regular';
text-transform: uppercase;
padding: 6px 0px;
border-radius: 6px;
font-size: 13px;
letter-spacing: 1px;
max-width: 200px;
width: 125px;
display: inline-block;
text-align: center;
}
.pendiente-badge{
background-color: #dd8b26;
color: #ffffff;
}

.pagada-badge{
background-color: #0fef69;
color: #ffffff;
max-width: 200px;
}

.badge-status{
border: solid 2px #bebebe;
display: inline-block;
padding: 0px 10px;
border-radius: 4px;
color: #bebebe;
text-transform: uppercase;
font-family: 'font-bold';
letter-spacing: 1px;
font-size: 14px;
}

/*Items*/
.invoice-item{
    background-color: #e7dfdd;
    padding: 20px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 15px;
    margin-top: 15px;
}

.items-description{
padding-left: 30px;
margin-bottom: 20px;
}

.invoice-footer{
margin-top: 40px;
}

/*Buttons*/
.dark-button, .dark-button:hover{
background-color: #000000;
color: #ffffff;
text-decoration: none;
padding: 15px 20px;
display: inline-block;
border-radius: 8px;
text-transform: uppercase;
font-family: 'font-bold';
width: 200px;
text-align: center;
letter-spacing: 1px;
border: none;
}

.payment-button-div{
    width: 200px;
    float: right;
    text-align: center;
}

.circle-mark{
margin-top: 70px;
}

@media only screen and (min-width: 1200px) {
    .container{
        max-width: 60%!important;
    }
}

@media only screen and (min-width: 991px) {

}