*{
    margin: 0;
    padding: 0;
}

html, body{
    background-color: black;
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: .9rem;
    padding: 2rem;
}

input, .infobox, button{
    all: unset;
    padding: .5rem;
    border: 1px solid rgb(69, 69, 69);
}

.pricing{
    width: 1320px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mainpos{
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(79, 79, 79);
    border-radius: 6px;
    overflow: hidden;
}

.mainpos-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1d1d1d;
    padding: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.mainpos-header:hover {
    background-color: #252525;
}

.mainpos-header-info{
    display: flex;
    gap: 2rem;
    align-items: center;
    height: 100%;
}

.mainpos-content {
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.vkpos, .ekpos{
    padding: 0 1rem;
}

.vkpos-table, .ekpos-table{
    display: grid;
    grid-template-columns: 280px repeat(auto-fit, minmax(120px, 120px));
    gap: 2px;
    border-radius: 6px;
}

button{
    width: max-content;
    cursor: pointer;
    transition: all 0.2s;
    margin: 1rem 0 1rem 1rem;
    border-radius: 6px;
}

button:hover {
    background: #333;
}

.infobox {
    background: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
}

.pricing-summary{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 400px;
}

label{
    font-weight: 300;
    color: #a1a1a1;
}