.datetime-wrapper {
    display: none;
    background-color: #ffffff;
    border: 1px solid #c0c0c0;
    border-radius: 6px;
    margin-top: 2px;
    min-width: 340px;
    position: absolute;
    padding: 4px;
    z-index: 2;
}

/* -ms attributes generated using https://autoprefixer.github.io */
.datetime-content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 4px 1fr 4px 1fr 4px 1fr 4px 1fr 4px 1fr;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto 4px auto 4px auto 4px auto 4px auto;
    grid-template-rows: auto auto auto auto auto;
    grid-gap: 4px;
    grid-auto-flow: column;
}

    .datetime-content > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    .datetime-content > *:nth-child(2) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }

    .datetime-content > *:nth-child(3) {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
    }

    .datetime-content > *:nth-child(4) {
        -ms-grid-row: 7;
        -ms-grid-column: 1;
    }

    .datetime-content > *:nth-child(5) {
        -ms-grid-row: 9;
        -ms-grid-column: 1;
    }

    .datetime-content > *:nth-child(6) {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }

    .datetime-content > *:nth-child(7) {
        -ms-grid-row: 3;
        -ms-grid-column: 3;
    }

    .datetime-content > *:nth-child(8) {
        -ms-grid-row: 5;
        -ms-grid-column: 3;
    }

    .datetime-content > *:nth-child(9) {
        -ms-grid-row: 7;
        -ms-grid-column: 3;
    }

    .datetime-content > *:nth-child(10) {
        -ms-grid-row: 9;
        -ms-grid-column: 3;
    }

    .datetime-content > *:nth-child(11) {
        -ms-grid-row: 1;
        -ms-grid-column: 5;
    }

    .datetime-content > *:nth-child(12) {
        -ms-grid-row: 3;
        -ms-grid-column: 5;
    }

    .datetime-content > *:nth-child(13) {
        -ms-grid-row: 5;
        -ms-grid-column: 5;
    }

    .datetime-content > *:nth-child(14) {
        -ms-grid-row: 7;
        -ms-grid-column: 5;
    }

    .datetime-content > *:nth-child(15) {
        -ms-grid-row: 9;
        -ms-grid-column: 5;
    }

    .datetime-content > *:nth-child(16) {
        -ms-grid-row: 1;
        -ms-grid-column: 7;
    }

    .datetime-content > *:nth-child(17) {
        -ms-grid-row: 3;
        -ms-grid-column: 7;
    }

    .datetime-content > *:nth-child(18) {
        -ms-grid-row: 5;
        -ms-grid-column: 7;
    }

    .datetime-content > *:nth-child(19) {
        -ms-grid-row: 7;
        -ms-grid-column: 7;
    }

    .datetime-content > *:nth-child(20) {
        -ms-grid-row: 9;
        -ms-grid-column: 7;
    }

    .datetime-content > *:nth-child(21) {
        -ms-grid-row: 1;
        -ms-grid-column: 9;
    }

    .datetime-content > *:nth-child(22) {
        -ms-grid-row: 3;
        -ms-grid-column: 9;
    }

    .datetime-content > *:nth-child(23) {
        -ms-grid-row: 5;
        -ms-grid-column: 9;
    }

    .datetime-content > *:nth-child(24) {
        -ms-grid-row: 7;
        -ms-grid-column: 9;
    }

    .datetime-content > *:nth-child(25) {
        -ms-grid-row: 9;
        -ms-grid-column: 9;
    }

    .datetime-content > *:nth-child(26) {
        -ms-grid-row: 1;
        -ms-grid-column: 11;
    }

    .datetime-content > *:nth-child(27) {
        -ms-grid-row: 3;
        -ms-grid-column: 11;
    }

    .datetime-content > *:nth-child(28) {
        -ms-grid-row: 5;
        -ms-grid-column: 11;
    }

    .datetime-content > *:nth-child(29) {
        -ms-grid-row: 7;
        -ms-grid-column: 11;
    }

    .datetime-content > *:nth-child(30) {
        -ms-grid-row: 9;
        -ms-grid-column: 11;
    }

.datetime-number {
    text-align: right;
}

.datetime-middle {
    background-color: lightcyan;
}

.datetime-action {
    display: -ms-grid;
    display: grid;
    margin-top: 10px;
    grid-auto-flow: row;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

    .datetime-action > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    .datetime-action > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }

    .datetime-action > *:nth-child(3) {
        -ms-grid-row: 1;
        -ms-grid-column: 4;
    }


.datetime-ok {
    grid-column: 3;
}

.datetime-cancel {
    grid-column: 4;
}