.recur-table {
    display: flex;
    position: relative;
}

.recur-t-cell:not(.recur-t-cell--input) > div,
.recur-t-cell--input{
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
    box-shadow:
            1px 0 0 0 #888,
            0 1px 0 0 #888,
            1px 1px 0 0 #888,
            1px 0 0 0 #888 inset, /* Just to fix the corner */
            0 1px 0 0 #888 inset;
    padding: 0.5em;
}

.recur-t-cell--input {
    font-size: 0.85em;
}

.recur-t-cell--input input::placeholder {
    color: var(--gray);
    font-style: italic;
}

.recur-t-cell--input > input,
.recur-t-cell--input > select {
    border: none;
    background-color: inherit;
}

.recur-t--select-one input {
    border: none;
    background-color: inherit;
    width: 100%;
}

.recur-t-header > div{
    font-size: 0.9em;
}

.recur-t-cell--h-center > div,
.recur-t-cell--h-center > input,
.recur-t-cell--h-center > .recur-t--select-one > input{
    align-items: center;
    text-align: center;
}

.recur-table.recur-t-faux-cell{
    flex: initial;
    width: 28px;
}

.recur-t-merged-cell{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    box-shadow:
            1px 0 0 0 #888,
            0 1px 0 0 #888,
            1px 1px 0 0 #888,
            1px 0 0 0 #888 inset, /* Just to fix the corner */
            0 1px 0 0 #888 inset;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 4.16%;
    text-align: center;
    font-weight: bold;
}

.recur-t-vertical-content{
    transform: rotate(-90deg);
    flex: none;
}

.recur-table input {
    background: inherit;
}

.recur-table > * {
    flex: 1 0 auto;
    box-sizing: border-box;
}

.recur-table.recur-t-row {
    flex-direction: row;
    width: 100%; /* It is the default as it is a div but to ensure it. */
}

.recur-table.recur-t-col {
    flex-direction: column;
}

.recur-t-dark-bg{
    background-color: var(--light-gray);
}

.recur-t-light-bg{
    background-color: var(--v-light-gray);
}

.recur-t-white-bg{
    background-color: white;
}

.recur-t-ubk-blue-bg{
    background-color: var(--ubk-blue);
}

.recur-t-white-font-color{
    color: var(--white);
    letter-spacing: .1em;
}

/* Recur table col layout based on Pure-CSS model */

.recur-t-col--1-24{
    width: 4.16%;
}

.recur-t-col--1-12, .recur-t-col--2-24{
    width: 8.33%;
}

.recur-t-col--1-8, .recur-t-col--2-16, .recur-t-col--3-24{
    width: 12.5%;
}

.recur-t-col--1-6, .recur-t-col--2-12, .recur-t-col--3-18, .recur-t-col--4-24{
    width: 16.66%;
}

.recur-t-col--5-24{
    width: 20.83%;
}

.recur-t-col--1-4, .recur-t-col--2-8, .recur-t-col--3-12, .recur-t-col--4-16, .recur-t-col--5-20, .recur-t-col--6-24{
    width: 25%;
}

.recur-t-col--7-24{
    width: 29.16%;
}

.recur-t-col--1-3, .recur-t-col--2-6, .recur-t-col--3-9, .recur-t-col--4-12, .recur-t-col--5-15,
.recur-t-col--6-18, .recur-t-col--7-21, .recur-t-col--8-24{
    width: 33.33%;
}

.recur-t-col--3-8, .recur-t-col--9-24{
    width: 37.5%;
}

.recur-t-col--5-12, .recur-t-col--10-24{
    width: 41.66%;
}

.recur-t-col--11-24{
    width: 45.83%;
}

.recur-t-col--1-2, .recur-t-col--2-4, .recur-t-col--3-6, .recur-t-col--4-8, .recur-t-col--5-10,
.recur-t-col--6-12, .recur-t-col--7-14, .recur-t-col--8-16, .recur-t-col--9-18, .recur-t-col--10-20,
.recur-t-col--11-22, .recur-t-col--12-24{
    width: 50%;
}

.recur-t-col--13-24{
    width: 54.16%;
}

.recur-t-col--7-12, .recur-t-col--14-24{
    width: 58.33%;
}

.recur-t-col--5-8, .recur-t-col--15-24{
    width: 62.50%;
}

.recur-t-col--2-3, .recur-t-col--4-6, .recur-t-col--8-12, .recur-t-col--16-24{
    width: 66.66%;
}

.recur-t-col--17-24{
    width: 70.83%;
}

.recur-t-col--3-4, .recur-t-col--6-8, .recur-t-col--9-12, .recur-t-col--12-16, .recur-t-col--15-20, .recur-t-col--18-24{
    width: 75%;
}

.recur-t-col--19-24{
    width: 79.16%;
}

.recur-t-col--5-6, .recur-t-col--10-12, .recur-t-col--15-18, .recur-t-col--20-24{
    width: 83.33%;
}

.recur-t-col--7-8, .recur-t-col--14-16, .recur-t-col--21-24{
    width: 87.5%;
}

.recur-t-col--11-12, .recur-t-col--22-24{
    width: 91.66%;
}

.recur-t-col--23-24{
    width: 95.83%;
}

.recur-t-col--1{
    width: 100%;
}