/* grid */
.grid {
    padding: 0px;
    overflow: hidden;
}
 
    
/* grid-row */
.grid .grid-row {
    overflow: hidden;
    margin: 0 -0.25em;
}


/* grid-col */
.grid .grid-row .grid-col {
    float: left;
    width: auto;
    overflow: hidden;
    min-height: 1px;
    padding: 0 0.25em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.grid .grid-row .grid-col[data-cols="1"] {
    width: 4.16666667%;
}

.grid .grid-row .grid-col[data-cols="2"] {
    width: 8.33333334%;
}

.grid .grid-row .grid-col[data-cols="3"] {
    width: 12.5%;
}

.grid .grid-row .grid-col[data-cols="4"] {
    width: 16.6666667%;
}

.grid .grid-row .grid-col[data-cols="5"] {
    width: 20.8333334%;
}

.grid .grid-row .grid-col[data-cols="6"] {
    width: 25%;
}

.grid .grid-row .grid-col[data-cols="7"] {
    width: 29.1666667%;
}

.grid .grid-row .grid-col[data-cols="8"] {
    width: 33.3333334%;
}

.grid .grid-row .grid-col[data-cols="9"] {
    width: 37.5%;
}

.grid .grid-row .grid-col[data-cols="10"] {
    width: 41.6666667%;
}

.grid .grid-row .grid-col[data-cols="11"] {
    width: 45.8333334%;
}

.grid .grid-row .grid-col[data-cols="12"] {
    width: 50%;
}

.grid .grid-row .grid-col[data-cols="13"] {
    width: 54.1666667%;
}

.grid .grid-row .grid-col[data-cols="14"] {
    width: 58.3333334%;
}

.grid .grid-row .grid-col[data-cols="15"] {
    width: 62.5000001%;
}

.grid .grid-row .grid-col[data-cols="16"] {
    width: 66.6666667%;
}

.grid .grid-row .grid-col[data-cols="17"] {
    width: 70.8333334%;
}

.grid .grid-row .grid-col[data-cols="18"] {
    width: 75%;
}

.grid .grid-row .grid-col[data-cols="19"] {
    width: 79.1666667%;
}

.grid .grid-row .grid-col[data-cols="20"] {
    width: 83.3333334%;
}

.grid .grid-row .grid-col[data-cols="21"] {
    width: 87.5000001%;
}

.grid .grid-row .grid-col[data-cols="22"] {
    width: 91.6666667%;
}

.grid .grid-row .grid-col[data-cols="23"] {
    width: 95.8333334%;
}

.grid .grid-row .grid-col[data-cols="24"] {
    width: 100%;
}


/* attr:spacing */
.grid[data-spacing="min"] .grid-row {
    margin: 0px;
}

.grid[data-spacing="min"] .grid-row .grid-col {
    padding: 0px;
}
.grid[data-spacing="small"] .grid-row {
    margin: 0 -0.5em;
}

.grid[data-spacing="small"] .grid-row .grid-col {
    padding: 0 0.5em;
}

.grid[data-spacing="medium"] .grid-row {
    margin: 0 -1em;
}

.grid[data-spacing="medium"] .grid-row .grid-col {
    padding: 0 1em;
}

.grid[data-spacing="large"] .grid-row {
    margin: 0 -1.5em;
}

.grid[data-spacing="large"] .grid-row .grid-col {
    padding: 0 1.5em;
}


/* attr:margin */
.grid[data-margin="small"],
.grid[data-spacing] [data-margin="small"],
.grid [data-margin="small"] {
    margin-top: 1em;
}

.grid[data-margin="medium"],
.grid[data-spacing] [data-margin="medium"],
.grid [data-margin="medium"] {
    margin-top: 2.5em;
}

.grid[data-margin="large"],
.grid[data-spacing] [data-margin="large"],
.grid [data-margin="large"] {
    margin-top: 4em;
}
.grid[data-margin="min"],
.grid[data-spacing] [data-margin="min"],
.grid [data-margin="min"] {
    margin-top: 0px;
}

.grid .grid-row .grid-col[data-cols="55"] {
    width: 23%;
    background-color:#262626;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
}
.grid .grid-row .grid-col[data-cols="66"] {
    width: 23%;
    background-color:gray;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
}
.grid .grid-row .grid-col[data-cols="33"] {
    width: 12.5%;
    background-color:red;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
}
.grid .grid-row .grid-col[data-cols="22"] {
     width: 8.33333334%;
    background-color:red;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
}
.grid .grid-row .grid-col[data-cols="77"] {
    width: 6%;
    background-color:red;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
     min-height: 1.7em;
}
.grid .grid-row .grid-col[data-cols="777"] {
    width: 6%;
    background-color:red;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
     min-height: 1.7em;
}
.grid .grid-row .grid-col[data-cols="333"] {
    width: 12.5%;
    background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 1.7em;
}
.grid .grid-row .grid-col[data-cols="7777"] {
    width: 6%;
    background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 1.7em;
}
.grid .grid-row .grid-col[data-cols="3333"] {
    width: 12.5%;
    background-color:#636363;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
}
.grid .grid-row .grid-col[data-cols="3334"] {
    width: 12.5%;
    background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
}
.grid .grid-row .grid-col[data-cols="tp"] {
    width: 23%;
    background-color:#262626;
    padding: 0 0.55em;
    border-left:1px solid white;
    border-bottom:1px solid white;
   
}
/*  RC4 database   */

.grid .grid-row .grid-col[data-cols="RC4_1"] {
    width: 4.16666667%;
      background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
}

.grid .grid-row .grid-col[data-cols="RC4_2"] {
    width: 8.33333334%;
    background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
}

.grid .grid-row .grid-col[data-cols="RC4_3"] {
    width: 12.5%;
    background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
   
}

.grid .grid-row .grid-col[data-cols="RC4_4"] {
    width: 16.6666667%;
     background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
    color:#fff;
}

.grid .grid-row .grid-col[data-cols="RC4_5"] {
    width: 20.8333334%;
     background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
    color:#fff;
}

.grid .grid-row .grid-col[data-cols="RC4_6"] {
    width: 25%;
    background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
    color:#fff;
}

.grid .grid-row .grid-col[data-cols="RC4_7"] {
    width: 29.1666667%;
    background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
    color:#fff;
}

.grid .grid-row .grid-col[data-cols="RC4_8"] {
    width: 33.3333334%;
    background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
    color:#fff;
}

.grid .grid-row .grid-col[data-cols="RC4_9"] {
    width: 37.5%;
}

.grid .grid-row .grid-col[data-cols="RC4_10"] {
    width: 41.6666667%;
     background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
    color:#fff;
}

.grid .grid-row .grid-col[data-cols="RC4_11"] {
    width: 45.8333334%;
    background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
    color:#fff;
}

.grid .grid-row .grid-col[data-cols="RC4_12"] {
    width: 50%;
    background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
    color:#fff;
}

.grid .grid-row .grid-col[data-cols="RC4_13"] {
    width: 54.1666667%;
}

.grid .grid-row .grid-col[data-cols="RC4_14"] {
    width: 58.3333334%;
}

.grid .grid-row .grid-col[data-cols="RC4_15"] {
    width: 62.5000001%;
}

.grid .grid-row .grid-col[data-cols="RC4_16"] {
    width: 66.6666667%;
}

.grid .grid-row .grid-col[data-cols="RC4_17"] {
    width: 70.8333334%;
}

.grid .grid-row .grid-col[data-cols="RC4_18"] {
    width: 75%;
    background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
    color:#fff;
}

.grid .grid-row .grid-col[data-cols="RC4_19"] {
    width: 79.1666667%;
}

.grid .grid-row .grid-col[data-cols="RC4_20"] {
    width: 83.3333334%;
     background-color:#424242;
    padding: 0 0.55em;
    border-right:3px solid black;
    border-bottom:3px solid black;
    min-height: 2.0em;
    color:#fff;
}

.grid .grid-row .grid-col[data-cols="RC4_21"] {
    width: 87.5000001%;
}

.grid .grid-row .grid-col[data-cols="RC4_22"] {
    width: 91.6666667%;
}

.grid .grid-row .grid-col[data-cols="RC4_23"] {
    width: 95.8333334%;
}

.grid .grid-row .grid-col[data-cols="RC4_24"] {
    width: 100%;
}