#attributesContainer {
    display:flex;
    flex-wrap:wrap;
    gap:4rem;
}
.attributeContainer {
    width:45%;
}
@media(max-width: 768px) {
    .attributeContainer {
        width:90%;
    }
}
.attributeValuesLabel {
    display:block;
    margin-top:1rem;
    margin-bottom:0.5rem;
}
.attributeValuesContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5rem;
    min-height:50px;
    border-radius:7px;
    border: 1px solid var(--colorOnBorders);
    position:relative;
    padding:1rem;
}

.attributeValuesContainer .attributeValue {
    background: var(--colorSurface-200);
    color: var(--colorSurface-600);
    padding:0.3rem;
    border-radius:7px;
    font-size:0.8rem;
    pointer-events:none;
    text-align:center;
}

.attributeValuesContainer .addAttributeValuesButton {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    height: max-content;
    right: -2rem;
    cursor:pointer;
}

@media(hover:hover) {
    .attributeValuesContainer .addAttributeValuesButton:hover svg {
        fill:var(--colorPrimary-400);
    }
}

.attributeValuesContainer .addAttributeValuesButton svg {
    width:18px;
    height:18px;
    fill:var(--colorPrimary-500);
    transition:0.3s ease all;
}

.attributeValuesSelectDialog {
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:300px;
    height:300px;
    margin:auto;
    background: var(--colorSurface-100);
    border: 1px solid var(--colorSurface-200);
    border-radius:7px;
    padding:2rem 0.5rem;
    overflow-y:auto;
    z-index:1;
}

.closeAttributeValuesSelectDialog {
    position:absolute;
    top:0.5rem;
    right:0.5rem;
    cursor:pointer;
}
.closeAttributeValuesSelectDialog svg {
    width:20px;
    height:20px;
    fill: var(--colorSurface-600);
    transition:0.3s ease all;
}

@media(hover:hover) {
    .closeAttributeValuesSelectDialog:hover svg {
        fill: var(--colorSurface-0);
    }
}

.attributeValuesSelectDialog.show {
    display:flex;
    flex-direction:column;
    gap: 1rem;
    align-items: center;
}

.attributeValueSelect {
    padding:0.5rem 1rem;
    background: var(--colorSurface-200);
    color: var(--colorSurface-600);
    cursor:pointer;
    border-radius:7px;
    height:max-content;
    transition:0.3s ease all;
    text-align: center;
    width: 80%;
}

.attributeValueSelect.active {
    background: var(--colorPrimary-500);
    color: var(--colorSurface-100);
}

@media(hover:hover) {
    .attributeValueSelect:hover {
        background: var(--colorPrimary-500);
        color: var(--colorSurface-100);
    }
}

#companyInfo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

#companyInfo textarea, #companyInfo input {
    max-width:300px;
}

.sectionTabs {
    max-width:1000px;
}