#pc-element .hidden {
    display: none;
}
#pc-element-img-wrapper {
    min-height: 420px;
    height: 100%;
    margin: 0;
    padding: 20px;
    background-color: white;
}
#pc-element-img-wrapper .clickable {
    cursor: pointer;
}
#pc-element-title {
    font-size: 36px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 15px;
}
#pc-elements-title {
    font-size: 36px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 30px;
}
#pc-element-layouts {
    display: flex;
    flex-wrap: wrap;
    margin-bottom:15px;
}
#pc-element-layouts .svg-container {
    background-color: white;
    padding: 8px;
    margin-right: 15px;
    margin-bottom: 15px;
    height: 110px;
    border:2px solid white;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
#pc-element-layouts .svg-container div {
    text-align: center;
    margin-top:6px;
    white-space: nowrap;
}
#pc-element-layouts .svg-container.active {
    border:2px solid #789c48;
}
.pc-element-panel-head {
    display: flex;
    justify-content: space-between;
    background: #58585a;
    padding: 6px 8px;
    height: 40px;
}
.pc-element-panel-head > div {
    text-align: left;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
}
#pc-element-details-list > table {
    color: #58595b;
    user-select: none;
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    margin-top:10px;
    margin-bottom: 4px;
}
#pc-element-details-list > table > tbody {
}
#pc-element-details-list > table.arc > tbody {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#pc-element-details-list > table > tbody > tr {
    display: table-header-group;
    padding:0;
}
#pc-element-details-list > table.arc > tbody > tr {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 8px;
}
#pc-element-details-list > table td {
    padding:2px 8px;
    text-align: center;
}
#pc-element-details-list > table tr:hover, #pc-element-details-list > table tr.cursor {
    background-color: #d1e58c;
}
#pc-element-details-list > table td button {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0;
}
#pc-element-details-list > table td img.element-colors {
    width: 60px;
    height: 60px;
    border: 2px solid #a7a9ac;
    border-radius: 4px;
}
#pc-element-details-list > table tr.nocolor {
    display: none !important;
}
#pc-element-details-list > table td:nth-of-type(1){
    white-space: nowrap;
}
.pc-element-color-wrapper {
    display: flex;
    text-align: left;
    flex-wrap: wrap;
}
.pc-element-color-wrapper img.color-image {
    width: 120px;
    height: 120px;
    border:2px solid #a7a9ac;
    border-radius: 4px;
    margin-right: 10px;
}
.pc-element-color-wrapper img.color-image:nth-of-type(2) {
    margin-right: 0;
}
.pc-element-color-wrapper .pc-element-color {
    padding: 10px;
    user-select: none;
    cursor: pointer;
    border:2px solid #fff;
    width: 282px;
    text-align: start;
    font-weight: 500;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}
.pc-element-color-wrapper .pc-element-color.active {
    background-color: #d1e58c;
}
.pc-element-color-wrapper .pc-element-color .price {
    font-size: 13px;
    font-weight: 900;
    margin-top:5px;
}
#pc-element-colors {
    margin-bottom: 30px;
}
#pc-element-colors .colors-wrapper {
    max-height: 440px;
    overflow: auto;
}
#pc-element-colors .color-title {
    font-weight: 600;
    margin-bottom: 15px;
}
#pc-element-colors .color {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    cursor: pointer;
}
#pc-element-colors .color img {
    width: 40px;
    height: 40px;
    border:2px solid #a7a9ac;
    border-radius: 4px;
    margin-right: 10px;
}
#pc-element-colors .color.active {
    background-color: #d1e58c;
}
#pc-element .one-item #pc-element-img-wrapper {
    display:none;
}
#pc-element-details-list {
    background-color: #f6f6f6;
    padding: 15px 15px;
}