.dmc-colors{
    margin:12px 0;
    font-size:12px;
}

.dmc-controls{
    margin-bottom:8px;
}

.dmc-control-row{
    display:flex;
    align-items:center;
    gap:6px;
    margin:0 0 4px 0;
}

.dmc-control-row input,
.dmc-control-row select{
    width:100%;
    max-width:280px;
    height:34px;
    box-sizing:border-box;
    padding:5px 8px;
    font-size:13px;
}

.dmc-control-row button{
    height:34px;
    min-height:34px;
    line-height:32px;
    box-sizing:border-box;
    padding:0 12px;
    font-size:13px;
    cursor:pointer;
}

.dmc-table-wrap{
    width:100%;
    overflow-x:auto;
}

.dmc-table{
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
}

.dmc-table th,
.dmc-table td{
    border:1px solid #ddd;
    padding:2px 5px;
    line-height:1.12;
    vertical-align:middle;
    font-size:11px;
    min-height:32px;
    box-sizing:border-box;
    overflow-wrap:normal;
    word-break:normal;
}

.dmc-table th{
    padding:3px 5px;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}

/* Цветовая колонка */
.dmc-table th:nth-child(1){
    width:90px;
    min-width:90px;
}

.dmc-swatch-cell{
    position:relative;
    padding:0!important;
    width:90px;
    min-width:90px;
    height:32px;
}

.dmc-color-box{
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

/* Номер цвета: максимально узкая колонка по содержимому */
.dmc-table th:nth-child(2),
.dmc-table td:nth-child(2){
    width:1%;
    white-space:nowrap;
    text-align:center;
}

.dmc-table td:nth-child(2),
.dmc-table td:nth-child(2) strong{
    font-size:14px;
    line-height:1;
}

.dmc-table th:nth-child(3),
.dmc-table td:nth-child(3){
    width:28%;
}

.dmc-table th:nth-child(4),
.dmc-table td:nth-child(4){
    width:34%;
}

.dmc-table th:nth-child(5),
.dmc-table td:nth-child(5){
    width:24%;
}

.dmc-empty{
    margin-top:8px;
}

@media (max-width: 600px){
    .dmc-colors{
        font-size:11px;
    }

    .dmc-control-row{
        gap:4px;
    }

    .dmc-control-row input,
    .dmc-control-row select{
        max-width:220px;
        height:32px;
        padding:4px 7px;
        font-size:12px;
    }

    .dmc-control-row button{
        height:32px;
        min-height:32px;
        line-height:30px;
        padding:0 8px;
        font-size:12px;
    }

    .dmc-table th,
    .dmc-table td{
        padding:2px 4px;
        font-size:10px;
        line-height:1.08;
        min-height:30px;
    }

    .dmc-table th{
        font-size:10px;
        padding:3px 4px;
    }

    /* На мобильных цветовая колонка становится узкой, почти квадратной */
    .dmc-table th:nth-child(1){
        width:32px;
        min-width:32px;
        max-width:32px;
        font-size:0;
        padding:0;
    }

    .dmc-swatch-cell{
        width:32px;
        min-width:32px;
        max-width:32px;
        height:32px;
    }

    .dmc-table th:nth-child(2),
    .dmc-table td:nth-child(2){
        width:1%;
        min-width:42px;
        padding-left:3px;
        padding-right:3px;
    }

    .dmc-table td:nth-child(2),
    .dmc-table td:nth-child(2) strong{
        font-size:13px;
    }
}