/* Tile */
.grid-stack-item-content {
    /* Default tile colour */
    background-color: #18bc9c;
    color: #2c3e50;

    /* Center text */
    display: flex;
    justify-content: center;
    align-items: center;

    font-weight: bold;
    font-size: large;
    text-align: center;
    overflow: hidden !important;
}

.black-tile {
    background-color: darkgrey;
    color: black;
}

.blue-tile {
    background-color: cornflowerblue;
    color: darkblue;
}

.orange-tile {
    background-color: peachpuff;
    color: chocolate;
}

.red-tile {
    background-color: salmon;
    color: darkred;
}

.selected-tile {
    opacity: 0.5;
}

.staging-tile {
    box-shadow: 0px 0px 5px black;
}

/* 36 columns */
/*
To change, use:
```scss
.grid-stack > .grid-stack-item {

  $gridstack-columns: 36;

  min-width: (100% / $gridstack-columns);

  @for $i from 1 through $gridstack-columns {
    &[gs-w='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
    &[gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
    &[gs-min-w='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
    &[gs-max-w='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
  }
}
```

at this link: https://www.sassmeister.com/
*/
.grid-stack > .grid-stack-item {
    min-width: 2.7777777778%;
}
.grid-stack > .grid-stack-item[gs-w="1"] {
    width: 2.7777777778%;
}
.grid-stack > .grid-stack-item[gs-x="1"] {
    left: 2.7777777778%;
}
.grid-stack > .grid-stack-item[gs-min-w="1"] {
    min-width: 2.7777777778%;
}
.grid-stack > .grid-stack-item[gs-max-w="1"] {
    max-width: 2.7777777778%;
}
.grid-stack > .grid-stack-item[gs-w="2"] {
    width: 5.5555555556%;
}
.grid-stack > .grid-stack-item[gs-x="2"] {
    left: 5.5555555556%;
}
.grid-stack > .grid-stack-item[gs-min-w="2"] {
    min-width: 5.5555555556%;
}
.grid-stack > .grid-stack-item[gs-max-w="2"] {
    max-width: 5.5555555556%;
}
.grid-stack > .grid-stack-item[gs-w="3"] {
    width: 8.3333333333%;
}
.grid-stack > .grid-stack-item[gs-x="3"] {
    left: 8.3333333333%;
}
.grid-stack > .grid-stack-item[gs-min-w="3"] {
    min-width: 8.3333333333%;
}
.grid-stack > .grid-stack-item[gs-max-w="3"] {
    max-width: 8.3333333333%;
}
.grid-stack > .grid-stack-item[gs-w="4"] {
    width: 11.1111111111%;
}
.grid-stack > .grid-stack-item[gs-x="4"] {
    left: 11.1111111111%;
}
.grid-stack > .grid-stack-item[gs-min-w="4"] {
    min-width: 11.1111111111%;
}
.grid-stack > .grid-stack-item[gs-max-w="4"] {
    max-width: 11.1111111111%;
}
.grid-stack > .grid-stack-item[gs-w="5"] {
    width: 13.8888888889%;
}
.grid-stack > .grid-stack-item[gs-x="5"] {
    left: 13.8888888889%;
}
.grid-stack > .grid-stack-item[gs-min-w="5"] {
    min-width: 13.8888888889%;
}
.grid-stack > .grid-stack-item[gs-max-w="5"] {
    max-width: 13.8888888889%;
}
.grid-stack > .grid-stack-item[gs-w="6"] {
    width: 16.6666666667%;
}
.grid-stack > .grid-stack-item[gs-x="6"] {
    left: 16.6666666667%;
}
.grid-stack > .grid-stack-item[gs-min-w="6"] {
    min-width: 16.6666666667%;
}
.grid-stack > .grid-stack-item[gs-max-w="6"] {
    max-width: 16.6666666667%;
}
.grid-stack > .grid-stack-item[gs-w="7"] {
    width: 19.4444444444%;
}
.grid-stack > .grid-stack-item[gs-x="7"] {
    left: 19.4444444444%;
}
.grid-stack > .grid-stack-item[gs-min-w="7"] {
    min-width: 19.4444444444%;
}
.grid-stack > .grid-stack-item[gs-max-w="7"] {
    max-width: 19.4444444444%;
}
.grid-stack > .grid-stack-item[gs-w="8"] {
    width: 22.2222222222%;
}
.grid-stack > .grid-stack-item[gs-x="8"] {
    left: 22.2222222222%;
}
.grid-stack > .grid-stack-item[gs-min-w="8"] {
    min-width: 22.2222222222%;
}
.grid-stack > .grid-stack-item[gs-max-w="8"] {
    max-width: 22.2222222222%;
}
.grid-stack > .grid-stack-item[gs-w="9"] {
    width: 25%;
}
.grid-stack > .grid-stack-item[gs-x="9"] {
    left: 25%;
}
.grid-stack > .grid-stack-item[gs-min-w="9"] {
    min-width: 25%;
}
.grid-stack > .grid-stack-item[gs-max-w="9"] {
    max-width: 25%;
}
.grid-stack > .grid-stack-item[gs-w="10"] {
    width: 27.7777777778%;
}
.grid-stack > .grid-stack-item[gs-x="10"] {
    left: 27.7777777778%;
}
.grid-stack > .grid-stack-item[gs-min-w="10"] {
    min-width: 27.7777777778%;
}
.grid-stack > .grid-stack-item[gs-max-w="10"] {
    max-width: 27.7777777778%;
}
.grid-stack > .grid-stack-item[gs-w="11"] {
    width: 30.5555555556%;
}
.grid-stack > .grid-stack-item[gs-x="11"] {
    left: 30.5555555556%;
}
.grid-stack > .grid-stack-item[gs-min-w="11"] {
    min-width: 30.5555555556%;
}
.grid-stack > .grid-stack-item[gs-max-w="11"] {
    max-width: 30.5555555556%;
}
.grid-stack > .grid-stack-item[gs-w="12"] {
    width: 33.3333333333%;
}
.grid-stack > .grid-stack-item[gs-x="12"] {
    left: 33.3333333333%;
}
.grid-stack > .grid-stack-item[gs-min-w="12"] {
    min-width: 33.3333333333%;
}
.grid-stack > .grid-stack-item[gs-max-w="12"] {
    max-width: 33.3333333333%;
}
.grid-stack > .grid-stack-item[gs-w="13"] {
    width: 36.1111111111%;
}
.grid-stack > .grid-stack-item[gs-x="13"] {
    left: 36.1111111111%;
}
.grid-stack > .grid-stack-item[gs-min-w="13"] {
    min-width: 36.1111111111%;
}
.grid-stack > .grid-stack-item[gs-max-w="13"] {
    max-width: 36.1111111111%;
}
.grid-stack > .grid-stack-item[gs-w="14"] {
    width: 38.8888888889%;
}
.grid-stack > .grid-stack-item[gs-x="14"] {
    left: 38.8888888889%;
}
.grid-stack > .grid-stack-item[gs-min-w="14"] {
    min-width: 38.8888888889%;
}
.grid-stack > .grid-stack-item[gs-max-w="14"] {
    max-width: 38.8888888889%;
}
.grid-stack > .grid-stack-item[gs-w="15"] {
    width: 41.6666666667%;
}
.grid-stack > .grid-stack-item[gs-x="15"] {
    left: 41.6666666667%;
}
.grid-stack > .grid-stack-item[gs-min-w="15"] {
    min-width: 41.6666666667%;
}
.grid-stack > .grid-stack-item[gs-max-w="15"] {
    max-width: 41.6666666667%;
}
.grid-stack > .grid-stack-item[gs-w="16"] {
    width: 44.4444444444%;
}
.grid-stack > .grid-stack-item[gs-x="16"] {
    left: 44.4444444444%;
}
.grid-stack > .grid-stack-item[gs-min-w="16"] {
    min-width: 44.4444444444%;
}
.grid-stack > .grid-stack-item[gs-max-w="16"] {
    max-width: 44.4444444444%;
}
.grid-stack > .grid-stack-item[gs-w="17"] {
    width: 47.2222222222%;
}
.grid-stack > .grid-stack-item[gs-x="17"] {
    left: 47.2222222222%;
}
.grid-stack > .grid-stack-item[gs-min-w="17"] {
    min-width: 47.2222222222%;
}
.grid-stack > .grid-stack-item[gs-max-w="17"] {
    max-width: 47.2222222222%;
}
.grid-stack > .grid-stack-item[gs-w="18"] {
    width: 50%;
}
.grid-stack > .grid-stack-item[gs-x="18"] {
    left: 50%;
}
.grid-stack > .grid-stack-item[gs-min-w="18"] {
    min-width: 50%;
}
.grid-stack > .grid-stack-item[gs-max-w="18"] {
    max-width: 50%;
}
.grid-stack > .grid-stack-item[gs-w="19"] {
    width: 52.7777777778%;
}
.grid-stack > .grid-stack-item[gs-x="19"] {
    left: 52.7777777778%;
}
.grid-stack > .grid-stack-item[gs-min-w="19"] {
    min-width: 52.7777777778%;
}
.grid-stack > .grid-stack-item[gs-max-w="19"] {
    max-width: 52.7777777778%;
}
.grid-stack > .grid-stack-item[gs-w="20"] {
    width: 55.5555555556%;
}
.grid-stack > .grid-stack-item[gs-x="20"] {
    left: 55.5555555556%;
}
.grid-stack > .grid-stack-item[gs-min-w="20"] {
    min-width: 55.5555555556%;
}
.grid-stack > .grid-stack-item[gs-max-w="20"] {
    max-width: 55.5555555556%;
}
.grid-stack > .grid-stack-item[gs-w="21"] {
    width: 58.3333333333%;
}
.grid-stack > .grid-stack-item[gs-x="21"] {
    left: 58.3333333333%;
}
.grid-stack > .grid-stack-item[gs-min-w="21"] {
    min-width: 58.3333333333%;
}
.grid-stack > .grid-stack-item[gs-max-w="21"] {
    max-width: 58.3333333333%;
}
.grid-stack > .grid-stack-item[gs-w="22"] {
    width: 61.1111111111%;
}
.grid-stack > .grid-stack-item[gs-x="22"] {
    left: 61.1111111111%;
}
.grid-stack > .grid-stack-item[gs-min-w="22"] {
    min-width: 61.1111111111%;
}
.grid-stack > .grid-stack-item[gs-max-w="22"] {
    max-width: 61.1111111111%;
}
.grid-stack > .grid-stack-item[gs-w="23"] {
    width: 63.8888888889%;
}
.grid-stack > .grid-stack-item[gs-x="23"] {
    left: 63.8888888889%;
}
.grid-stack > .grid-stack-item[gs-min-w="23"] {
    min-width: 63.8888888889%;
}
.grid-stack > .grid-stack-item[gs-max-w="23"] {
    max-width: 63.8888888889%;
}
.grid-stack > .grid-stack-item[gs-w="24"] {
    width: 66.6666666667%;
}
.grid-stack > .grid-stack-item[gs-x="24"] {
    left: 66.6666666667%;
}
.grid-stack > .grid-stack-item[gs-min-w="24"] {
    min-width: 66.6666666667%;
}
.grid-stack > .grid-stack-item[gs-max-w="24"] {
    max-width: 66.6666666667%;
}
.grid-stack > .grid-stack-item[gs-w="25"] {
    width: 69.4444444444%;
}
.grid-stack > .grid-stack-item[gs-x="25"] {
    left: 69.4444444444%;
}
.grid-stack > .grid-stack-item[gs-min-w="25"] {
    min-width: 69.4444444444%;
}
.grid-stack > .grid-stack-item[gs-max-w="25"] {
    max-width: 69.4444444444%;
}
.grid-stack > .grid-stack-item[gs-w="26"] {
    width: 72.2222222222%;
}
.grid-stack > .grid-stack-item[gs-x="26"] {
    left: 72.2222222222%;
}
.grid-stack > .grid-stack-item[gs-min-w="26"] {
    min-width: 72.2222222222%;
}
.grid-stack > .grid-stack-item[gs-max-w="26"] {
    max-width: 72.2222222222%;
}
.grid-stack > .grid-stack-item[gs-w="27"] {
    width: 75%;
}
.grid-stack > .grid-stack-item[gs-x="27"] {
    left: 75%;
}
.grid-stack > .grid-stack-item[gs-min-w="27"] {
    min-width: 75%;
}
.grid-stack > .grid-stack-item[gs-max-w="27"] {
    max-width: 75%;
}
.grid-stack > .grid-stack-item[gs-w="28"] {
    width: 77.7777777778%;
}
.grid-stack > .grid-stack-item[gs-x="28"] {
    left: 77.7777777778%;
}
.grid-stack > .grid-stack-item[gs-min-w="28"] {
    min-width: 77.7777777778%;
}
.grid-stack > .grid-stack-item[gs-max-w="28"] {
    max-width: 77.7777777778%;
}
.grid-stack > .grid-stack-item[gs-w="29"] {
    width: 80.5555555556%;
}
.grid-stack > .grid-stack-item[gs-x="29"] {
    left: 80.5555555556%;
}
.grid-stack > .grid-stack-item[gs-min-w="29"] {
    min-width: 80.5555555556%;
}
.grid-stack > .grid-stack-item[gs-max-w="29"] {
    max-width: 80.5555555556%;
}
.grid-stack > .grid-stack-item[gs-w="30"] {
    width: 83.3333333333%;
}
.grid-stack > .grid-stack-item[gs-x="30"] {
    left: 83.3333333333%;
}
.grid-stack > .grid-stack-item[gs-min-w="30"] {
    min-width: 83.3333333333%;
}
.grid-stack > .grid-stack-item[gs-max-w="30"] {
    max-width: 83.3333333333%;
}
.grid-stack > .grid-stack-item[gs-w="31"] {
    width: 86.1111111111%;
}
.grid-stack > .grid-stack-item[gs-x="31"] {
    left: 86.1111111111%;
}
.grid-stack > .grid-stack-item[gs-min-w="31"] {
    min-width: 86.1111111111%;
}
.grid-stack > .grid-stack-item[gs-max-w="31"] {
    max-width: 86.1111111111%;
}
.grid-stack > .grid-stack-item[gs-w="32"] {
    width: 88.8888888889%;
}
.grid-stack > .grid-stack-item[gs-x="32"] {
    left: 88.8888888889%;
}
.grid-stack > .grid-stack-item[gs-min-w="32"] {
    min-width: 88.8888888889%;
}
.grid-stack > .grid-stack-item[gs-max-w="32"] {
    max-width: 88.8888888889%;
}
.grid-stack > .grid-stack-item[gs-w="33"] {
    width: 91.6666666667%;
}
.grid-stack > .grid-stack-item[gs-x="33"] {
    left: 91.6666666667%;
}
.grid-stack > .grid-stack-item[gs-min-w="33"] {
    min-width: 91.6666666667%;
}
.grid-stack > .grid-stack-item[gs-max-w="33"] {
    max-width: 91.6666666667%;
}
.grid-stack > .grid-stack-item[gs-w="34"] {
    width: 94.4444444444%;
}
.grid-stack > .grid-stack-item[gs-x="34"] {
    left: 94.4444444444%;
}
.grid-stack > .grid-stack-item[gs-min-w="34"] {
    min-width: 94.4444444444%;
}
.grid-stack > .grid-stack-item[gs-max-w="34"] {
    max-width: 94.4444444444%;
}
.grid-stack > .grid-stack-item[gs-w="35"] {
    width: 97.2222222222%;
}
.grid-stack > .grid-stack-item[gs-x="35"] {
    left: 97.2222222222%;
}
.grid-stack > .grid-stack-item[gs-min-w="35"] {
    min-width: 97.2222222222%;
}
.grid-stack > .grid-stack-item[gs-max-w="35"] {
    max-width: 97.2222222222%;
}
.grid-stack > .grid-stack-item[gs-w="36"] {
    width: 100%;
}
.grid-stack > .grid-stack-item[gs-x="36"] {
    left: 100%;
}
.grid-stack > .grid-stack-item[gs-min-w="36"] {
    min-width: 100%;
}
.grid-stack > .grid-stack-item[gs-max-w="36"] {
    max-width: 100%;
}