.item1 {
  grid-area: header;
  text-align: center;
}


.item2 {
  grid-area: menu;
  text-align: left;
}



.actions {
  grid-area: actions;
  text-align: left;
  background-color: grey
}

.mainTopContent {
  grid-area: mainTop;
  text-align: left;
}

.leftContent {
  grid-area: left;
  background-color: yellow;
  border-style: solid;
  border-color: blue;
  border-width: 0px;
  padding: 0px;
  padding: 2px;
  height: 210px;
}

.middleContent {
  grid-area: middle;
  text-align: left;
}

.rightContent {
  grid-area: right;
  text-align: left;
}

.mainBottomContent {
  grid-area: mainBottom;
  text-align: left;
  padding: 10px;
}


.footer {
  grid-area: footer;
}


.grid-container {
  display: grid;
  grid-template-rows: 40px 50px auto auto auto 30px;

  grid-template-areas:
    'header header header header'
    'menu mainTop mainTop mainTop'
    'actions mainTop mainTop mainTop'
    'actions left middle right'
    'actions mainBottom mainBottom mainBottom'
    'footer footer footer footer';
  grid-template-columns: 200px 150px auto auto;
  grid-gap: 2px;
  padding: 0px;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  /*padding: 5px 5px; */
}




body {
  background-color: tan;
  font-size: 12px;
  width: auto;
}


#autoCrdNme {
  width: auto;
}


#selectCardSet {
  max-width: 30%;
  text-overflow: ellipsis;
}

#cardName {
  font-size: 16px;
}





.deckOptions {
  display: none;
}

.invOptions {
  display: show;
}


.title {
  color: grey;
  font-size: 20px;
  text-align: center;
}