.dt-pupko-dialog {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 2fr 1fr;
}

.dt-pupko-dialog .bl{
    display: grid;
    grid-gap: 10px;
    padding: 10px;
}

.dt-pupko-dialog .dd-block {
    grid-template-columns: repeat(7, 1fr);
}

.dt-pupko-dialog .mm-block {
    grid-template-columns: repeat(2, 1fr);
}

.dt-pupko-dialog .yy-block {
    grid-template-columns: repeat(4, 1fr);
    grid-column: 1 / 3;
}

.dt-pupko-dialog [dw='0'] :is(:nth-child(7n+6), :nth-child(7n)),
.dt-pupko-dialog [dw='1'] :is(:nth-child(7n), :nth-child(7n+1)),
.dt-pupko-dialog [dw='2'] :is(:nth-child(7n+1), :nth-child(7n+2)),
.dt-pupko-dialog [dw='3'] :is(:nth-child(7n+2), :nth-child(7n+3)),
.dt-pupko-dialog [dw='4'] :is(:nth-child(7n+3), :nth-child(7n+4)),
.dt-pupko-dialog [dw='5'] :is(:nth-child(7n+4), :nth-child(7n+5)),
.dt-pupko-dialog [dw='6'] :is(:nth-child(7n+5), :nth-child(7n+6))
{
    color: red;
}

.dt-pupko-dialog :is(.yy, .mm, .dd) {
    border: 1px dashed gray;
    padding: 4px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}

.dt-pupko-dialog .sel{
    background-color: silver;
}

.dt-pupko-dialog .yy:has(input) {
    text-align: right;
    padding-right: 0px;
}

.dt-pupko-dialog .yy input {
    width: 70px;
    outline: none;
    resize: none;
}

    .dt-pupko-dialog .day-now{
        border-style: double;
        border-width: 6px;
    }