body {
    font-family: Arial, sans-serif;
    background: url(../public/bg.jpeg) no-repeat center fixed;     
    background-size: cover;
    margin: 0;
    padding: 0;
    tab-size: 4;
}

h1 {
    text-align: center;
    background-color: #0077b6b0;
    color: white;
    padding: 20px;
    margin: 0;
}

.container {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.column {
  	max-width: 300px;
  	width: 100%;
    background-color: #ffffffc9;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #aaa;
    padding: 20px;
    min-width: 20vw;
    margin: 10px;
}

.column h2 {
    text-align: center;
    color: #0077b6;
    margin: 10px 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    background-color: #0076b6d8;
    color: white;
    padding: 10px;
    border: 1px solid #005a8d;
    border-radius: 3px;
    margin: 5px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

li:hover {
    background-color: #005a8d;
}

#fizetesreVarList li {
    border: 1px solid #e94560;
    background-color: #ff4f61d2;
}

#fizetesreVarList li:hover {
    background-color: #e94560;
}

#kifizetveList li {
    border: 1px
}


#kiszallitvaList li {
    border: 1px solid #3fcc35;
    background-color: #3cdb5edc;
}

#kiszallitvaList li:hover {
    background-color: rgb(88, 204, 60);
}

.name-class {
    font-weight: 600;
}

.id-class {
    font-size: larger;
}

.value-class {
    font-style: italic;
}