.gen5pageWrapper{width:100%;padding:20px 6px 0 6px;text-align:center;margin:0 auto 0 auto;text-transform:capitalize;}
.gen5wrapper { 
    width:100%;
  display: grid; 
  grid-template-columns: repeat(5, 1fr); 
  grid-auto-rows: 36px;
  font-size:0.8em;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align:left;
}
.gen3wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 36px;
    font-size: 0.7em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: left;
}
[class^="s"] {padding-left:6px;}
[class^="d"] {padding-left:6px;}
.item {background-color:bisque;}
.line-breeding {display:none;}
.bolded {font-weight:bold; background-color:coral !important;}
.s1 {display: inline-grid; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 17; background-color:#ececec; border:1px dotted black; align-items: center;}
.d1 {display: inline-grid; grid-column-start: 1; grid-column-end: 2; grid-row-start: 17; grid-row-end: 33; background-color:#fff; border:1px dotted black; align-items: center;}
.s21 {display: inline-grid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 9; background-color:#ececec; border:1px dotted black; align-items: center;}
.d21 {display: inline-grid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 9; grid-row-end: 17; background-color:#fff; border:1px dotted black; align-items: center;}
.s22 {display: inline-grid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 17; grid-row-end: 25; background-color:#ececec; border:1px dotted black; align-items: center;}
.d22 {display: inline-grid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 25; grid-row-end: 33; background-color:#fff; border:1px dotted black; align-items: center;}
.s31 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 5; background-color:#ececec; border:1px dotted black; align-items: center;}
.d31 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 5; grid-row-end: 9; background-color:#fff; border:1px dotted black; align-items: center;}
.s32 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 9; grid-row-end: 13; background-color:#ececec; border:1px dotted black; align-items: center;}
.d32 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 13; grid-row-end: 17; background-color:#fff; border:1px dotted black; align-items: center;}
.s33 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 17; grid-row-end: 21; background-color:#ececec; border:1px dotted black; align-items: center;}
.d33 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 21; grid-row-end: 25; background-color:#fff; border:1px dotted black; align-items: center;}
.s34 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 25; grid-row-end: 29; background-color:#ececec; border:1px dotted black; align-items: center;}
.d34 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 29; grid-row-end: 33; background-color:#fff; border:1px dotted black; align-items: center;}
.s41 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; background-color:#ececec; border:1px dotted black; align-items: center;}
.d41 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 3; grid-row-end: 5; background-color:#fff; border:1px dotted black; align-items: center;}
.s42 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 5; grid-row-end: 7; background-color:#ececec; border:1px dotted black; align-items: center;}
.d42 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 7; grid-row-end: 9; background-color:#fff; border:1px dotted black; align-items: center;}
.s43 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 9; grid-row-end: 11; background-color:#ececec; border:1px dotted black; align-items: center;}
.d43 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 11; grid-row-end: 13; background-color:#fff; border:1px dotted black; align-items: center;}
.s44 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 13; grid-row-end: 15; background-color:#ececec; border:1px dotted black; align-items: center;}
.d44 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 15; grid-row-end: 17; background-color:#fff; border:1px dotted black; align-items: center;}
.s45 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 17; grid-row-end: 19; background-color:#ececec; border:1px dotted black; align-items: center;}
.d45 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 19; grid-row-end: 21; background-color:#fff; border:1px dotted black; align-items: center;}
.s46 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 21; grid-row-end: 23; background-color:#ececec; border:1px dotted black; align-items: center;}
.d46 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 23; grid-row-end: 25; background-color:#fff; border:1px dotted black; align-items: center;}
.s47 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 25; grid-row-end: 27; background-color:#ececec; border:1px dotted black; align-items: center;}
.d47 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 27; grid-row-end: 29; background-color:#fff; border:1px dotted black; align-items: center;}
.s48 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 29; grid-row-end: 31; background-color:#ececec; border:1px dotted black; align-items: center;}
.d48 {display: inline-grid; grid-column-start: 4; grid-column-end: 5; grid-row-start: 31; grid-row-end: 33; background-color:#fff; border:1px dotted black; align-items: center;}
.s51 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d51 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s52 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d52 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s53 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d53 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s54 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d54 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s55 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d55 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s56 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d56 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s57 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d57 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s58 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d58 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s59 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d59 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s510 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d510 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s511 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d511 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s512 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d512 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s513 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d513 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s514 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d514 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s515 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d515 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items: center;}
.s516 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#ececec; border:1px dotted black; align-items: center;}
.d516 {display: inline-grid; grid-column-start: 5; grid-column-end: 6; background-color:#fff; border:1px dotted black; align-items:}
.hypo-cell{
    text-align: left!important;
}

.s1-3 {display: inline-grid; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 5; background-color:#ececec; border:1px dotted black; align-items: center;}
.d1-3 {display: inline-grid; grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 9; background-color:#fff; border:1px dotted black; align-items: center;}
.s21-3 {display: inline-grid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; background-color:#ececec; border:1px dotted black; align-items: center;}
.d21-3 {display: inline-grid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 5; background-color:#fff; border:1px dotted black; align-items: center;}
.s22-3 {display: inline-grid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 5; grid-row-end: 7; background-color:#ececec; border:1px dotted black; align-items: center;}
.d22-3 {display: inline-grid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 7; grid-row-end: 9; background-color:#fff; border:1px dotted black; align-items: center;}
.s31-3 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; background-color:#ececec; border:1px dotted black; align-items: center;}
.d31-3 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; background-color:#fff; border:1px dotted black; align-items: center;}
.s32-3 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; background-color:#ececec; border:1px dotted black; align-items: center;}
.d32-3 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; background-color:#fff; border:1px dotted black; align-items: center;}
.s33-3 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; background-color:#ececec; border:1px dotted black; align-items: center;}
.d33-3 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; background-color:#fff; border:1px dotted black; align-items: center;}
.s34-3 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; background-color:#ececec; border:1px dotted black; align-items: center;}
.d34-3 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; background-color:#fff; border:1px dotted black; align-items: center;}

@media only screen and (min-width: 576px) {
    .gen5wrapper { 
    width:100%;
  display: grid; 
  grid-template-columns: repeat(5, 1fr); 
  grid-auto-rows: 30px;
  font-size:0.7em;
}
}

@media only screen and (min-width: 768px) {
    .gen5wrapper {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: 24px;
        font-size: 0.7em;
    }

        }

@media only screen and (min-width: 992px) {
    .gen5pageWrapper{width:60%;}
    .gen5wrapper {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: 18px;
        font-size: 0.8em;
        margin-top:20px;
    }
    .line-breeding {display:block; font-size:0.8em;}
    .gen3wrapper {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 36px;
        font-size: 0.8em;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        text-align: left;
    }
        }