.grid-input{
    display: grid;
    grid-template-columns: 200px 200px;
    column-gap: 10px;
    margin-bottom: 10px;
    justify-content: center;
 
}

@media(min-width:320px) and (max-width:520px){
.grid-input{grid-template-columns: 300px;row-gap: 10px;}}



.grid-peppol{
    display: grid;
    grid-template-columns: 500px 500px;
    column-gap: 10px;
    margin-bottom: 10px;
    justify-content: center;
 
}

@media(min-width:320px) and (max-width:576px){
.grid-peppol{grid-template-columns: 320px;row-gap: 10px;}}
@media(min-width:577px) and (max-width:1032px){
.grid-peppol{grid-template-columns: 435px;row-gap: 10px;}}


@media(min-width:320px) and (max-width:576px){
.image-peppol{  width: 320px;height: 500px;object-fit: contain;}}
@media(min-width:577px) and (max-width:1032px){
.image-peppol{ width: 435px;height: 700px;object-fit: contain;}}



@media(min-width:320px) and (max-width:576px){
.image-peppol-cyberbox{  width: 320px;height: 200px;object-fit: contain;}}
@media(min-width:577px) and (max-width:1032px){
.image-peppol-cyberbox{ width: 435px;height: 236px;object-fit: contain;}}




.style-input
{
    padding: 6px;
    
}



.style-file
{
    font-size: 15px;
    cursor: pointer;
    margin-top: 10px;
}



#peppol-element{
    margin-bottom: 200px;
    margin-top: 50px;
}



.button-add
{
    background-color: rgb(3, 145, 3);
    color: white;
    border: none;
    font-size: 15px;
    padding: 8px;
    cursor: pointer;
    
}

.button-add:hover
{
    background-color: rgb(1, 82, 1);
}



.files, .buton-grid{
    display: grid;
    grid-template-columns: 320px;
    justify-content: center;
    

}



#filter-select{
    font-weight: bold;
    cursor: pointer;
    width: 270px;
    
}



h3
{text-align: center;text-decoration: underline;font-family: 'Bangers', cursive;
}



#carte-id{
    font-weight: bold;
    margin-top: 10px;
    background-color: yellow;
}



.buton-grid{
    margin-top: 20px;
}