coconut-leaf/src/static/css/datetimepicker.css

div.perfectTable {
    display: flex;
    flex-flow: column;
}

/*
div.perfectTable > div > div:nth-child(1) {
    border-left: 1px solid black;
}

div.perfectTable > div:nth-child(1) > div {
    border-top: 1px solid black;
}
*/

div.perfectTable > div > div {
    /*border-top: 0 solid black;
    border-left: 0 solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;

    padding: 0.75em;*/

    flex-grow: 1;
    flex-basis: 0;
    flex-shrink: 0;

    overflow: hidden;

    display: flex;
    justify-content: center;

    padding-top: 1rem;
    padding-bottom: 1rem;
}

div.perfectTable > div {
    display: flex;
    flex-flow: row;
}

div.perfectTable > div > div[picked=true] {
    background: hsl(171, 100%, 41%);
    color: #fff;
}








div.pickerContainer {
    display: flex; 
    align-items: center; 
    flex-flow: row;
    justify-content: center;
}

div.pickerContainer > div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

div.pickerContainer > svg {
    width: 100%;
    height: 100%;
}

div.pickerContainer > svg > text {
    dominant-baseline: middle;
    text-anchor: middle;
    user-select: none;
    cursor: default;
}

div.pickerContainer > svg > circle[type=background] {
    stroke-width: 0;
    fill: #d0d0d0;
}

div.pickerContainer > svg > circle[type=symbol] {
    stroke-width: 0;
    fill: hsl(171, 100%, 41%); /* $primary */
}

div.pickerContainer > svg > line {
    stroke-width: 0.125em;
    stroke: hsl(171, 100%, 41%); /* $primary */
}






header.pickerHeader {
    display: flex;
    flex-flow: row;

    flex-grow: 0;
    flex-basis: 0;
    flex-shrink: 0;

    justify-content: space-between;
}

header.pickerHeader > div {
    display: flex;
    flex-flow: column;

    flex-grow: 1;
    flex-basis: 0;
    flex-shrink: 0;
}