/* Styling for Query Cat Page with CSS Grids */

/* Container to responde to navbar */
#body-container {
  margin-top: 92px;
  margin-right: 30px;
}

@media (max-width: 1395px) {
  #body-container {
    margin-top: 125px;
  }
}

@media (max-width: 1100px) {
  #body-container {
    margin-top: 140px;
  }
}

/* The grid container */
.grid-container {
  display: grid;
  font-size: 1.3rem;
  grid-template-columns: 1fr 2fr 2fr;
  grid-template-areas: 
    'search-container search-container search-container' 
    'shop browse-container browse-container'
    'shop mol-box mol-box' 
    'shop mol-box mol-box'
    'shop mol-box mol-box'
    'shop mol-box mol-box'
    'shop mol-box mol-box'
    'footer footer footer';
} 

@media (min-width: 1600px)
{
  .grid-container {
    margin-right: 1.5rem;
  }
}

@media (max-width: 700px)
{
  .grid-container {
    grid-template-columns: 1fr;
  }
}

/* The search header */
.search-container {
  display: grid;
  grid-area: search-container;
  background-color: white;
  margin: 3rem 2rem 0rem 2rem;
  grid-template-areas: 
    'back search-grid'
    'back search-by-structure'
}

#back {
  grid-area: back;
  font-size: 20px;
  font-weight: bold;
  margin: 1rem 0 1rem 0rem;
  padding: 1rem 0rem 0rem 1rem;
  justify-self: start;
  text-align: left;
}

#search-grid {
  grid-area: search-grid;
  justify-self: end;
}

#search-box {
  grid-area: text-box;
}

.chemotype {
  font-size: 18px;
}

#text-box {
  font-size: 18px;
  margin: 1rem 0rem 1rem 0rem;
  padding: 0.5rem;
}

#submit-button {
  width: 100px;
  font-size: 20px;
  margin: 1rem;
  padding: 0.5rem;
  justify-self: end;
}

#search-by-structure {
  grid-area: search-by-structure;
  margin: 1rem 1rem 1rem 0rem;
  font-size: 1.8rem;
  font-weight: bold;
  justify-self: end;
}

/* The browsing container */
.browse-container {
  grid-area: browse-container;
  display: grid;
  background-color: white;
  font-size: 2rem;
  font-weight: bold;
  margin: 0.5rem 2rem 0rem 0rem;
  padding: 0rem 0rem 1rem 1rem;
  grid-template-areas: 
    'currently-browsing currently-browsing matches pages page-navigator';
}

#currently-browsing {
  grid-area: currently-browsing;
}

#matches {
  grid-area: matches;
  justify-self: end;
  font-size: 18px;
  margin: 1rem 0.5rem 1rem 0rem;
}

#pages {
  grid-area: pages;
  justify-self: end;
  font-size: 18px;
  margin: 1rem 0.5rem 1rem 0rem;
}

#page-navigator {
  grid-area: page-navigator;
  justify-self: end;
  font-size: 18px;
  margin: 1rem 0.5rem 1rem 0rem;
}

/* The shopping column */
.shop {
  grid-area: shop;
/*   width: 200px; */
  background-color: white;
  margin: 0.5rem 1rem 1rem 2rem;
  padding: 0rem 0rem 1rem 1rem;
}

#shop-title {
  font-weight: bold;
  font-size: 2rem;
  margin: 1rem 0rem 3rem 0rem;
}

.category-links {
  color: #CB373C;
  font-size: 1.8rem;
  /*! line-height: 2rem; */
  margin-bottom: 25px;
}

.category-links-child {
  color: #CB373C;
  font-size: 1.6rem;
  line-height: 1.5rem;
  margin-bottom: 25px;
  margin-left: 15px;
}

/* Molecule boxes */
.mol-box {
  display: grid;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: 1px solid #C8CED3; 
  font-size: 1.6rem;
  grid-template-areas: 
    'mol-name mol-name mol-name' 
    'mol-image mol-code mol-code' 
    'mol-image cas-number cas-number'
    'mol-image mol-weight mol-weight'
    'mol-image mol-formula mol-formula'
    'mol-image view-prices view-prices';
    grid-template-rows: 70px 40px 40px 1fr 40px;
    grid-template-columns: 2fr 1fr 1fr;
}

.mol-name {
  grid-area: mol-name;
  display: table;
  background-color: #F8F8F8;
  /* padding-top: 5px; */
}

.mol-text {
  display: table-cell;
  font-size: 1.7rem;
  font-weight: bolder;
  text-align: center;
  vertical-align: middle;
}

.mol-image {
  grid-area: mol-image;
  margin: auto;
  padding: 10px 10px 30px 10px;
}

.mol-code {
  grid-area: mol-code;
  padding: 15px 5px 10px 1rem;
  margin: 0px 0px 5px 0px;
  font-weight: bold;
}

.cas-number {
  grid-area: cas-number;
  padding: 10px 5px 5px 1rem;
  margin: 0px;
  font-weight: 500;
}

.mol-weight {
  grid-area: mol-weight;
  line-height: 20px;
  padding: 5px 5px 10px 1rem;
  font-weight: 500;
  margin: 0;
}

.mol-formula {
  grid-area: mol-formula;
  line-height: 20px;
  padding: 6px 5px 0px 1rem;
  font-weight: 500;
  margin: 0;
}

.mass {
  grid-area: mass;
  padding: 0 0 2rem 0;
}

.mass p {
  margin: 0.5rem 0 0 1rem;
}

.price p {
  margin: 0.5rem 0 0 1rem;
}

.price {
  grid-area: price;
  padding: 0 0 1rem 0;
}

.view-prices {
  grid-area: view-prices;
  line-height: 20px;
  font-size: 1.8rem;
  padding: 0px 5px 18px 1rem;
}

/* The footer */
.footer {
  grid-area: footer;
  background-color: white;
  font-size: 1.6rem;
  text-align: center;
}

/* Responsive layout break: two columns become one */
@media (max-width: 1100px) and (min-width: 701px)  {
  
 .grid-container  {
  display: grid;
  grid-template-areas: 
    'search-container search-container' 
    'shop browse-container'
    'shop mol-box' 
    'shop mol-box' 
    'shop mol-box' 
    'shop mol-box'
    'shop mol-box'
    'shop mol-box'
    'shop mol-box'
    'shop mol-box'
    'shop mol-box'
    'shop mol-box'
    'footer footer'; 
  grid-template-rows: 90px 90px 1.05fr 1.05fr 1.05fr 1.05fr 1.05fr 1.05fr 1.05fr 1.05fr 1.05fr 1.05fr;
  grid-template-columns: 1fr 3fr;
  }
  
 /* .mol-box {
  display: grid;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: 1px solid #C8CED3; 
  font-size: 1.6rem;
  transform: 0;
  grid-template-areas: 
    'mol-name mol-name mol-name' 
    'mol-image mol-code mol-code' 
    'mol-image cas-number cas-number'
    'mol-image mol-weight mol-weight'
    'mol-image mol-formula mol-formula'
    'mol-details mol-details mol-details';
    grid-template-rows: 70px 40px 40px 1fr 40px;
    grid-template-columns: 1.3fr 0.8fr 1fr;
  } */

  .browse-container {
  grid-area: browse-container;
  display: grid;
  background-color: white;
  font-size: 1rem;
  font-weight: bold;
  margin: 0.5rem 2rem 0rem 0rem;
  padding: 0rem 0rem 0rem 1rem;
  grid-template-areas: 
    'currently-browsing pages'
    'matches page-navigator';
    grid-template-rows: 15px 10px;
  }
  
  .search-container {
  display: grid;
  grid-area: search-container;
  background-color: white;
  margin: 2rem 2rem 0rem 2rem;
  grid-template-areas: 
    'back search-grid'
    'back search-by-structure';
    grid-template-rows: 40px 20px;
}

#search-grid {
  justify-self: end;
  justify-items: end;
}
  
#text-box {
  width: 350px;
  font-size: 15px;
  margin: 1rem 0rem 2rem 0rem;
  padding: 0.5rem;
  justify-self: end;
  justify-items: end;
}
 
#submit-button {
  width: 80px;
  font-size: 15px;
  margin: 0.5rem;
  padding: 0.5rem;
  justify-self: end;
}
  
#search-by-structure {
  grid-area: search-by-structure;
  margin: 1rem 1rem 0rem 0rem;
  font-weight: bold;
  justify-self: end;
}

#currently-browsing {
  grid-area: currently-browsing;
    justify-self: start;
  font-size: 15px;
  margin: 1rem 0.5rem 1rem 0rem;
}

#matches {
  grid-area: matches;
  justify-self: start;
  font-size: 15px;
  margin: 3rem 0.5rem 1rem 0rem;
}

#pages {
  grid-area: pages;
  justify-self: end;
  font-size: 15px;
  margin: 1rem 0.5rem 1rem 0rem;
}

#page-navigator {
  grid-area: page-navigator;
  justify-self: end;
  font-size: 15px;
  margin: 3rem 0.5rem 1rem 0rem;
}
}

/* Responsive layout break: shop column disappears */
@media (max-width: 700px) {
  
.grid-container {
  font-size: 1.3rem;
  display: grid;
  grid-template-areas: 
  'search-container' 
  'browse-container'
  'mol-box'
  'mol-box'
  'mol-box'
  'mol-box'
  'mol-box'
  'footer';
} 
  
  /* .mol-box {
  display: grid;  
  background-color: white;
  width: 100%;
  margin: 0rem 1rem 0rem 1rem;
  grid-template-areas: 
    'mol-name mol-name mol-name' 
    'mol-image mol-code mol-code' 
    'mol-image cas-number cas-number'
    'mol-image mass price'
    'mol-details mol-details mol-details';
} */
  
.shop {
  display: none;
  grid-area: shop;
  background-color: white;
  margin: 0rem 1rem 1rem 2rem;
  padding: 1rem 1rem 1rem 1rem;
}
  
.search-container > * {
  transform: scale(0.8);
}
  
.browse-container > * {
  transform: scale(0.8);
}

.search-container {
  height: inherit;
  width: 100%;
  margin: 1rem 1rem 1rem 1rem;
  grid-row: span 1;
}

#search-grid {
  justify-self: end;
  justify-items: end;
}
  
#text-box {
  width: 200px;
  font-size: 15px;
  margin: -1rem 1rem 1rem 0rem;
  padding: 0.5rem;
  justify-self: end;
  justify-items: end;
}
 
#submit-button {
  width: 100px;
  font-size: 15px;
  margin: 0.5rem;
  padding: 0.5rem;
  justify-self: end;
}
  
#search-by-structure {
  grid-area: search-by-structure;
  margin: 1rem 1rem 1rem 1rem;
  font-weight: bold;
  justify-self: end;
}

.browse-container {
  display: grid;
  margin: 1rem 1rem 1rem 1rem;
}
  
  #currently-browsing {
  grid-area: currently-browsing;
  font-size: 18px;
  margin: 0rem;
}

#matches {
  grid-area: matches;
  justify-self: end;
  font-size: 18px;
  margin: 0rem;
}

#pages {
  grid-area: pages;
  justify-self: end;
  font-size: 18px;
  margin: 0rem;
}

#page-navigator {
  grid-area: page-navigator;
  justify-self: end;
  font-size: 18px;
  margin: 0rem;
}
  .mass {
  grid-area: mass;
  padding: 0 0 1rem 0;
}
}

/* Responsive layout break: all items shrink */
@media (max-width: 400px) {
  
  .grid-container {
    justify-items: center;
    margin-top: 100px;
  }
  
  .grid-container > * {
    transform: scale(0.9);
    align-items: center;
    margin: 0rem 0rem 0rem 0rem;
  }

  #text-box {
    width: 200px;
    font-size: 15px;
    margin: 1rem 1rem 1rem 0rem;
    padding: 0.5rem;
    justify-self: end;
    justify-items: end;
  }
}  

#query_text {
  border: 1px solid #C8CED3; 
  font-family: arial; color: #808080; 
  width: 450px; 
  height: 27px;
  vertical-align: middle;
  margin: 0rem 0rem 1rem 1rem; 
}

@media (max-width: 700px) {
  #query_text
  {
    width: 200px;
    margin: 0rem 0rem 1rem 1rem; 
  }

  #bb-submit {
    margin: 0rem 0rem 1rem 0rem; 
  }
}

#bb-submit {
  margin: 0rem 0rem 1rem 0rem; 
}

#buildingblocks_3 {
  margin: 15rem 0rem 0rem 0rem;
}

@media (min-width: 1100px) {
  #buildingblocks_3 {
    margin: 18rem 0rem 0rem 0rem;
  }
}