*, *::before, *::after 
{
    box-sizing: border-box;
}

:root
{
    /* dark colors */
    --dark-fore-color: white;
    --dark-back-color: black;
    --dark-link-color: #c193ff;
    --dark-button-color: #444;
    --dark-accent-color: #ae60e8;
    --dark-success-color: #00bc8c;
    --dark-info-color: #3498db;
    --dark-warning-color: #f39c12;
    --dark-danger-color: #e74c3c;
    --dark-body-back-color: #1e1e1e;
    --dark-body-fore-color: #dedede;

    /* light colors */
    --light-fore-color: black;
    --light-back-color: white;
    --light-link-color: #8f00c9;
    --light-button-color: #444;
    --light-accent-color: #8f00c9;
    --light-success-color: #18bc9c;
    --light-info-color: #3498db;
    --light-warning-color: #f39c12;
    --light-danger-color: #e74c3c;
    --light-body-back-color: white;
    --light-body-fore-color: black;

    --dark-fore-color-l: 100;
    --dark-back-color-l: 0;
    --light-fore-color-l: 0;
    --light-back-color-l: 100;


    --font-family: sans-serif;
    --color-scheme: dark;

    --contrast-color: white;
    --class-text-color: inherit; 
    --class-back-color: var(--button-color); 
    --class-fore-color: var(--contrast-color); 
    --class-accent-color: var(--accent-color);
    --focus-color: rgb(from var(--fore-color) r g b / 30%);
    --code-color: rgb(from var(--body-fore-color) r g b / 70%);
    --gridline-color: rgb(from var(--body-fore-color) r g b / 20%);
    --disabled-color: color-mix(in srgb, #808080, var(--back-color) 30%);
    --input-back-color: color-mix(in srgb, #808080, var(--back-color) 85%);

    color-scheme: var(--color-scheme);
    color: var(--body-fore-color);

    font-family: var(--font-family);
    font-size: 13.5pt;
    line-height: 1.5;
}

/* These styles are used when html class set to "dark" or "light" */
:root.dark
{
    --color-scheme: dark;
    --fore-color-l: 100;
    --back-color-l: 0;
    --fore-color: var(--dark-fore-color);
    --back-color: var(--dark-back-color);
    --link-color: var(--dark-link-color);
    --button-color: var(--dark-button-color);
    --accent-color: var(--dark-accent-color);
    --info-color: var(--dark-info-color);
    --warning-color: var(--dark-warning-color);
    --danger-color: var(--dark-danger-color);
    --success-color: var(--dark-success-color);
    --body-back-color: var(--dark-body-back-color);
    --body-fore-color: var(--dark-body-fore-color);
}
:root.light
{
    --color-scheme: light;
    --fore-color-l: 0;
    --back-color-l: 100;
    --fore-color: var(--light-fore-color);
    --back-color: var(--light-back-color);
    --link-color: var(--light-link-color);
    --button-color: var(--light-button-color);
    --accent-color: var(--light-accent-color);
    --info-color: var(--light-info-color);
    --warning-color: var(--light-warning-color);
    --danger-color: var(--light-danger-color);
    --success-color: var(--light-success-color);
    --body-back-color: var(--light-body-back-color);
    --body-fore-color: var(--light-body-fore-color);
}

/* These styles are used when html class not set */
@media (prefers-color-scheme: dark)
{
    :root
    {
        --color-scheme: dark;
        --fore-color-l: 100;
        --back-color-l: 0;
        --fore-color: var(--dark-fore-color);
        --back-color: var(--dark-back-color);
        --link-color: var(--dark-link-color);
        --button-color: var(--dark-button-color);
        --accent-color: var(--dark-accent-color);
        --info-color: var(--dark-info-color);
        --warning-color: var(--dark-warning-color);
        --danger-color: var(--dark-danger-color);
        --success-color: var(--dark-success-color);
        --body-back-color: var(--dark-body-back-color);
        --body-fore-color: var(--dark-body-fore-color);
    }
}
@media (prefers-color-scheme: light)
{
    :root
    {
        --color-scheme: light;
        --fore-color-l: 0;
        --back-color-l: 100;
        --fore-color: var(--light-fore-color);
        --back-color: var(--light-back-color);
        --link-color: var(--light-link-color);
        --button-color: var(--light-button-color);
        --accent-color: var(--light-accent-color);
        --info-color: var(--dark-info-color);
        --warning-color: var(--dark-warning-color);
        --danger-color: var(--dark-danger-color);
        --success-color: var(--light-success-color);
        --body-back-color: var(--light-body-back-color);
        --body-fore-color: var(--light-body-fore-color);
    }
}

body
{
    background-color: var(--body-back-color);
}

svg
{
    fill: currentColor;
}

.accent
{ 
    --class-text-color: var(--accent-color); 
    --class-back-color: var(--accent-color); 
    --class-fore-color: var(--contrast-color); 
    --class-accent-color: var(--accent-color); 
    --focus-color: rgb(from var(--accent-color) r g b / 50%);
}
.success 
{ 
    --class-text-color: var(--success-color); 
    --class-back-color: var(--success-color); 
    --class-fore-color: var(--contrast-color); 
    --class-accent-color: var(--success-color); 
    --focus-color: rgb(from var(--success-color) r g b / 50%);
}
.info 
{ 
    --class-text-color: var(--info-color); 
    --class-back-color: var(--info-color); 
    --class-fore-color: var(--contrast-color); 
    --class-accent-color: var(--info-color); 
    --focus-color: rgb(from var(--info-color) r g b / 50%);
}
.warning 
{ 
    --class-text-color: var(--warning-color); 
    --class-back-color: var(--warning-color); 
    --class-fore-color: var(--contrast-color); 
    --class-accent-color: var(--warning-color); 
    --focus-color: rgb(from var(--warning-color) r g b / 50%);
}
.danger 
{ 
    --class-text-color: var(--danger-color); 
    --class-back-color: var(--danger-color); 
    --class-fore-color: var(--contrast-color); 
    --class-accent-color: var(--danger-color); 
    --focus-color: rgb(from var(--danger-color) r g b / 50%);
}

p, span, h1, h2, h3, h4, h5, h6
{ color: var(--class-text-color); }

blockquote
{
    border-left: 0.2rem solid var(--gridline-color);
    padding-left: 0.4rem;
    margin-left: 0.2rem;
}

code
{
    color: var(--code-color);
}

a
{
    code { color: unset }
}

h1 { font-size: 2.15rem;  margin-bottom: 1rem; margin-top: 2.5rem; }
h2 { font-size: 1.35rem; margin-bottom: 1rem; margin-top: 2.5rem; }
h3 { font-size: 1.2rem;  margin-bottom: 1rem; margin-top: 2.5rem; }
h4 { font-size: 1.1rem; margin-bottom: 1rem; margin-top: 2.5rem; }
h5 { font-size: 1.05rem;  margin-bottom: 1rem; margin-top: 2.5rem; }
h6 { font-size: 1rem;    margin-bottom: 1rem; margin-top: 2.5rem; }

.muted { opacity: 0.5; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.hidden { visibility: hidden; }
.vcenter
{
    display: flex;
    align-items: center;
}

a
{
    --link-class-text-color: var(--class-text-color, var(--link-color));
    color: var(--link-class-text-color);
    text-decoration: none;
    transition: color 0.2s;

    &:hover
    {
        color: rgb(from var(--link-class-text-color) r g b / 70%);
    }
}

nav
{
    --link-color: var(--body-fore-color);

    ul
    {
        padding: 0;
        li
        {
            list-style: none;
            margin: 0;
            padding: 0;
        }
    }
}

input, button
{
    font-family: var(--font-family);
    font-size: 1rem;
}

.button
{
    display:inline-block;
}

button, 
.button,
input[type=button],
input[type="file"]::file-selector-button
{
    cursor: pointer;
    text-decoration: none;
    background-color: var(--class-back-color);
    color: var(--class-fore-color);
    padding: .475rem .65rem;
    border-width: 0;
    border-radius: 0.3rem;
    border-style: solid;
    font-size: 1rem;
    line-height: 1rem;
    white-space: nowrap;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, opacity 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    &:hover:not(:disabled)
    {
        background-color: rgb(from var(--class-back-color) r g b / 80%);
        color: var(--class-fore-color);
    }

    &:active:not(:disabled)
    {
        background-color: rgb(from var(--class-back-color) r g b / 60%);
    }    

    &:focus-visible
    {
        outline: none;
        box-shadow: 0 0 0 0.20rem var(--focus-color);
    }

    &:disabled
    {
        opacity: 0.5;
    }

    &.subtle
    {
        background: none;
        color: var(--class-text-color);

        &:hover
        {
            color: var(--class-fore-color);
        }

        &.muted
        {
            color: var(--class-text-color);
            opacity: 0.5;

            &:hover
            {
                opacity: 1.0;
                background: none;
            }
        }
    }


    &.dropdown
    {
        &::after 
        { 
            content:'';
            display: inline-block;
            margin-left: 0.25em;
            vertical-align: .1em;
            border-top: 0.3em solid;
            border-right: 0.3em solid transparent;
            border-bottom: 0;
            border-left: 0.3em solid transparent;        
        }
    }

    /* <button class="dropdown standalone">&nbsp;</button> */
    &.dropdown.standalone
    {
        &::after 
        { 
            margin-left: 0;
            transform: translateX(-0.15rem);
        }
    }

    &.small
    {
        font-size: 0.75rem;
        padding: .24rem .56rem;
    }

    &.large
    {
        font-size: 1.2rem;
        padding: .7rem .9rem;
    }

}

/* Radio buttons and Checkboxes styled to look like buttons */
input.button[type='radio'],
input.button[type='checkbox']
{
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
    & + label
    {
        margin-right: 0;
        display:inline-block;
        background-color: transparent;
        color: var(--fore-color);
        border-radius: 0.3rem;
        border-width: 1px;
        border-color: var(--class-back-color);
        padding-top: calc(0.475rem - 1px);
        padding-bottom: calc(0.475rem - 1px);
        padding-left: calc(0.65rem - 1px);
        padding-right: calc(0.65rem - 1px);
        border-style: solid;
        font-size: 1rem;
        line-height: 1rem;
        white-space: nowrap;
        cursor: pointer;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

        &:hover
        {
            background-color: rgb(from var(--class-back-color) r g b / 30%);
        }
    }
    & + label.subtle
    {
        padding: .475rem .65rem;
        border: none;

        &:hover
        {
            background-color: rgb(from var(--class-fore-color) r g b / 10%);
        }
    }
    &:checked
    {
        & + label
        {
            background-color: var(--class-back-color);
            color: var(--class-fore-color);

            &:hover
            {
                background-color: rgb(from var(--class-back-color) r g b / 80%);
            }
        }

    }
    &:active
    {
        & + label
        {
            &:hover
            {
                background-color: rgb(from var(--class-back-color) r g b / 20%);
            }
        }

    }
    &:active:checked
    {
        & + label
        {
            &:hover
            {
                background-color: rgb(from var(--class-back-color) r g b / 40%);
            }
        }
    }
    &:focus-visible 
    {
        & + label
        {
            outline: none;
            box-shadow: 0 0 0 0.20rem var(--focus-color);
        }
    }
}


input[type="file"]::file-selector-button:hover
{
    background-color: rgb(from var(--class-back-color) r g b / 80%);
}
input[type="file"]::file-selector-button:active
{
    background-color: rgb(from var(--class-back-color) r g b / 60%);
}    


/* Standard checkbox/radio button  (common)*/
input[type="checkbox"],
input[type="radio"]
{
    appearance: none;
    outline: none;
    display: inline-block;
    height: 1rem;
    width: 1rem;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--fore-color);
    background: var(--input-back-color);
    transform: translateY(0.1rem);
    margin-right: 0.4rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;

    &:checked
    {
        background-color: var(--class-accent-color);
        border-color: var(--class-accent-color);
    }

    &:focus-visible
    {
        outline: none;
        box-shadow: 0 0 0 0.20rem var(--focus-color);
    }

    &:disabled
    {
        background-color: var(--disabled-color);
        border-color: var(--disabled-color);
    }

    &:disabled + label
    {
        color: var(--disabled-color);
    }

}

label:has(input)
{
    margin-right: 0.75rem;     /* A bit of space to the right for when stacked horizontally */
}

label:has(input:disabled)
{
    color:var(--disabled-color);
}

/* Checkbox */
input[type="checkbox"]
{
    border-radius: 3px;
    &:checked
    {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    }
}

/* Radio Button */
input[type="radio"]
{
    border-radius: 10px;
    &:checked
    {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    }
}

/* Switch Style Checkbox */
input.switch[type="checkbox"],
input.theme-switch[type="checkbox"]
{
    width:30px;
    border-radius:10px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23888'/%3e%3c/svg%3e");
    background-position: left center;
    background-repeat: no-repeat;
    transition: background-position 0.15s ease-in-out, background-color 0.15s ease-in-out;

    &:checked
    {
        background-position: right center;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }
    &:disabled
    {
        background-image: none;
    }
}

input.theme-switch[type="checkbox"]
{
    width:40px;
    height: 24px;
    padding: 0;
    margin: 0;
    border-radius: 12px;
    background-color: #fff;
    border-color: var(--gridline-color);
    background-image: url("data:image/svg+xml,%3Csvg height='18px' viewBox='0 -960 960 960' width='24px' fill='%23e8eaed' id='svg4' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs8' /%3E%3Ccircle style='fill:%23d0d0d0;stroke:%23222222;stroke-width:0;stop-color:%23000000;fill-opacity:1' id='path847' cx='480' cy='-479.99997' r='480' /%3E%3Cpath d='m 480,-370.90909 q 45.45455,0 77.27273,-31.81818 31.81818,-31.81818 31.81818,-77.27273 0,-45.45455 -31.81818,-77.27273 Q 525.45455,-589.0909 480,-589.0909 q -45.45455,0 -77.27273,31.81817 -31.81817,31.81818 -31.81817,77.27273 0,45.45455 31.81817,77.27273 31.81818,31.81818 77.27273,31.81818 z m 0,72.72727 q -75.45454,0 -128.63636,-53.18182 Q 298.18182,-404.54546 298.18182,-480 q 0,-75.45454 53.18182,-128.63636 53.18182,-53.18182 128.63636,-53.18182 75.45454,0 128.63636,53.18182 53.18182,53.18182 53.18182,128.63636 0,75.45454 -53.18182,128.63636 Q 555.45454,-298.18182 480,-298.18182 Z M 225.45455,-443.63636 H 80.000002 v -72.72728 H 225.45455 Z m 654.54545,0 H 734.54546 v -72.72728 H 880 Z M 443.63636,-734.54545 V -880 h 72.72728 v 145.45455 z m 0,654.54545 v -145.45454 h 72.72728 V -80 Z m -167.27272,-554.54546 -91.81818,-88.18181 51.81818,-53.63637 87.27273,90.9091 z m 447.27273,450.9091 -88.18183,-91.81818 48.18182,-50 91.81818,88.18182 z m -89.09091,-500 88.18182,-91.81818 53.63636,51.81818 -90.90909,87.27273 z m -450.9091,447.27273 91.81819,-88.18183 49.99999,48.18182 -88.18181,91.81818 z M 480,-480 Z' id='path2' style='fill:%23000000;stroke-width:0.909091' /%3E%3C/svg%3E");
    &:checked
    {
        background-color: #606060;
        background-image: url("data:image/svg+xml,%3Csvg height='18px' viewBox='0 -960 960 960' width='24px' fill='%23e8eaed' id='svg4' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs8' /%3E%3Ccircle style='fill:%23000000;stroke:%23222222;stroke-width:0;stop-color:%23000000' id='path847' cx='480' cy='-480' r='480' /%3E%3Cpath d='M 480,-160 Q 346.66667,-160 253.33333,-253.33333 160,-346.66667 160,-480 160,-613.33333 253.33333,-706.66667 346.66667,-800 480,-800 q 12.44444,0 24.44444,0.88889 12,0.88889 23.55557,2.66666 -36.44446,25.77778 -58.22223,67.11112 Q 448,-688.00001 448,-640 q 0,79.99999 56,136 56.00001,56 136,56 48.88889,0 89.77778,-21.77778 40.88889,-21.77777 66.66667,-58.22223 1.77777,11.55557 2.66666,23.55557 Q 800,-492.44444 800,-480 800,-346.66667 706.66667,-253.33333 613.33333,-160 480,-160 Z m 0,-71.11111 q 78.22222,0 140.44444,-43.11111 62.22222,-43.11111 90.66667,-112.44445 -17.77777,4.44445 -35.55556,7.11111 -17.77777,2.66667 -35.55555,2.66667 -109.33333,0 -186.22222,-76.88889 Q 376.88889,-530.66667 376.88889,-640 q 0,-17.77778 2.66667,-35.55555 2.66666,-17.77779 7.11111,-35.55556 -69.33334,28.44445 -112.44445,90.66667 -43.11111,62.22222 -43.11111,140.44444 0,103.11111 72.88888,176.00001 72.8889,72.88888 176.00001,72.88888 z m -8.88889,-240 z' id='path2' style='stroke-width:0.888889' /%3E%3C/svg%3E");
    }
}

hr
{
    border-color: var(--gridline-color);
}

.spinner
{
    display:inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border-width: 2px;
    border-color: var(--class-text-color);
    border-style: solid;
    border-top-color: transparent;
    animation: spinner .75s linear infinite;

    &.xsmall
    {
        width: 0.75rem;
        height: 0.75rem;
        border-width: 2px;
    }

    &.small
    {
        width: 1rem;
        height: 1rem;
        border-width: 2px;
    }

    &.large
    {
        width: 2.5rem;
        height: 2.5rem;
        border-width: 3.5px;
    }

    &.xlarge
    {
        width: 4rem;
        height: 4rem;
        border-width: 5.3px;
    }
}

@keyframes spinner 
{
    to { transform: rotate(360deg); }
}

span.pill
{
    background-color: var(--class-back-color);
    color: var(--class-fore-color);
    display:inline-block;
    padding: .15rem .65rem;
    border-radius: 1rem;
    font-weight: 700;

    &.small
    {
        font-size: .75em;
    }
    &.large
    {
        font-size: 1.25em;
    }
}

input[type=date],
input[type=datedatetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
input[type=file],
textarea,
select
{
    background-color: var(--input-back-color);
    color: var(--body-fore-color);
    border-width: 1px;
    border-radius: 5px;
    border-style: solid;
    border-color: var(--class-back-color);
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1rem;
    outline: none;
    padding: .475rem .65rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;


    &::selection 
    {
        background-color: var(--accent-color);
        color: var(--class-fore-color);
    }
      
    &:focus-visible:not(:disabled)
    {
        outline: none;
        box-shadow: 0 0 0 0.20rem var(--focus-color);
    }

    &::placeholder
    {
        color: rgb(from var(--fore-color) r g b / 33%);
    }
    
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806 13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z' fill='%23808080'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  border-radius: 2px;
  padding: 0.25rem 2rem 0.25rem 0.75rem;
}

input[type=file]
{
    padding: 0.3rem;
}

input[type=file]::file-selector-button
{
    padding: .275rem .45rem;
}

.control-group
{
    position: relative;
    display: inline-flex;
    align-items: baseline;
    line-height: 1rem;

    span
    {
        border-radius: 5px;
        padding: calc(.475rem + 1px) calc(.65rem + 1px);
        z-index: -1;
        background-color: var(--class-back-color);
        color: var(--class-fore-color);
    }

    :not(:first-child),
    label:not(:first-of-type),
    input.button[type='radio'] + label:not(:first-of-type),
    input.button[type='checkbox'] + label:not(:first-of-type)
    {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    :not(:last-child),
    label:not(:last-of-type),
    input.button[type='radio'] + label:not(:last-of-type),
    input.button[type='checkbox'] + label:not(:last-of-type)
    {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    input[type=date],
    input[type=datedatetime-local],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week]
    {
        margin: 0;
    }
}



dialog
{
    all: revert;
    padding: 0;
    border-radius: 10px;
    border-color: var(--accent-color);
    form
    {
        all: revert;
        margin: 0;
    }
    header
    {
        all: revert;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--gridline-color);

        button.close
        {
            padding: 0.2rem;
            margin: 0.2rem;
            border-radius: 50%;
            width: 2rem;
            height: 2rem;
            &::before
            {
                content: "✖";
                /* -- back button style --
                content: "➜";
                display: inline-block;
                transform: rotate(180deg);   
                */
            }
        }

        .title
        {
            font-weight: bold;
        }
    }
    main
    {
        all: revert;
        margin: 1rem;
    }
    footer
    {
        all: revert;
        display: flex;
        gap: 10px;
        padding: 10px;
        justify-content: end;
        border-top: 1px solid var(--gridline-color);
    }
    &::backdrop 
    {
        all: revert;
        background-color: rgba(0, 0, 0, 0.75);
    }
}


.grid
{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    grid-row-gap: 0.5rem;
    grid-column-gap: 0.5rem;
    .cell-right { text-align: right; }
    .cell-left { text-align: left; }
    .cell-center { text-align: center; }

    .cell-1-1 { grid-column: 1 / -1; }
    .cell-1-2 { grid-column: 1 / 7; }
    .cell-2-2 { grid-column: 7 / -1; }
    .cell-1-3 { grid-column: 1 / 5; }
    .cell-2-3 { grid-column: 5 / 9; }
    .cell-3-3 { grid-column: 9 / -1; }
    .cell-12-3 { grid-column: 1 / 9; }
    .cell-23-3 { grid-column: 5 / -1; }
    .cell-1-4 { grid-column: 1 / 4; }
    .cell-2-4 { grid-column: 4 / 7; }
    .cell-3-4 { grid-column: 7 / 10; }
    .cell-4-4 { grid-column: 10 / -1; }
    .cell-13-4 { grid-column: 1 / 10; }
    .cell-23-4 { grid-column: 4 / 10; }
    .cell-24-4 { grid-column: 4 / -1; }
    .cell-1-6 { grid-column: 1 / 3; }
    .cell-2-6 { grid-column: 3 / 5; }
    .cell-3-6 { grid-column: 5 / 7; }
    .cell-4-6 { grid-column: 7 / 9; }
    .cell-5-6 { grid-column: 9 / 11; }
    .cell-6-6 { grid-column: 11 / -1; }
    .cell-23-6 { grid-column: 3 / 7; }
    .cell-45-6 { grid-column: 7 / 11; }
}

.cell-x
{
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    grid-row-gap: 0.5rem;
    grid-column-gap: 0.5rem;
}