.page-content {
  padding: 1rem;
  background-color: #eeeeee;
}

.page-content > .mdl-card {
  width: 100%;
}

.page-content > :not(:first-child) {
  margin-top: 1rem;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  align-items: start;
  padding-top: 10px;
}

.icon-group {
  display: flex;
  justify-content: flex-end;
}

.grains-table {
  width: 100%;
  border: none;
}

.grains-table tr:last-child:hover {
  background-color: inherit;
}

.grains-table tr:last-child td {
  border: none;
  font-weight: 700;
}

.wd-100 {
  width: 100%;
}

.wd-auto {
  width: auto;
}

.text-right {
  text-align: right !important;
}

.mdl-button:hover{
	/*background-color: transparent;*/
	color: rgb(83,109,254);
}

.page-content {
  padding: 1rem;
  background-color: #eeeeee;
}

@media (min-width: 768px) {
  .mdl-layout__drawer-button { 
    display: none;
  }
}

@media (max-width: 767px) {
  .mdl-layout-spacer {
    display: none;
  }

  .mdl-layout__header-row {
    justify-content: space-around;
  }

  .mdl-layout__header-row > .mdl-navigation {
    display: none;
  }
}

.page-content > .mdl-card {
  width: 100%;
}

.page-content > :not(:first-child) {
  margin-top: 1rem;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  align-items: start;
  padding-top: 10px;
}

.icon-group {
  display: flex;
  justify-content: flex-end;
}

.grains-table {
  width: 100%;
  border: none;
}

.grains-table tr:last-child:hover {
  background-color: inherit;
}

.grains-table tr:last-child td {
  border: none;
  font-weight: 700;
}

.wd-100 {
  width: 100%;
}

.wd-auto {
  width: auto;
}

.text-right {
  text-align: right !important;
}

.mdl-button:hover{
	/*background-color: transparent;*/
	color: rgb(83,109,254);
}



Add responsive behavior to app bar
Add responsive behavior to app bar
