body {
  font-family: 'Roboto', sans-serif;
  color: #073b4c;
}

header {
  background-color: #118ab2;
  border-bottom: 1px solid #ffd166;
  padding-bottom: 1.5rem;
}

a {
  text-decoration: none;
  margin-top: 2.25rem;
  font-weight: 500;
}

a.trending,
a.watchlist {
  font-size: 1.5rem;
  margin-left: 1.5rem;
  color: white;
  letter-spacing: 0.1rem;
}

#search {
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  border: none;
  outline: none;
  white-space: pre;
  margin-top: 2.25rem;
  margin-left: 1.5rem;
  border-radius: 1.5rem;
  width: 15rem;
  height: 1.5rem;
  text-indent: 0.5rem;
}

input::-webkit-input-placeholder {
  font-size: 1rem;
  letter-spacing: 0.1rem;
}

.magnifying {
  margin-left: 6px;
  margin-top: 4px;
}

.searchContainer {
  border-bottom: 1px solid #ffd166;
}

.searchResultHeader,
.editHeader,
.watchlistHeader,
.trendingHeader {
  font-size: 1rem;
  margin-left: 1.5rem;
}

.searchContainerResult {
  background: #fcfcfc;
  border: 1px solid #073b4c;
  border-radius: 5px;
  width: 50%;
  margin: auto;
  margin-bottom: 1.5rem;
}

.headerRow,
.subHeaderRow,
.companySummary {
  max-width: 90%;
  margin: auto;
  font-size: 0.75rem;
  flex-wrap: nowrap;
}

.subHeaderRow {
  font-size: 1rem;
}

.companySummary {
  font-size: 1rem;
}

.stockSymbol {
  margin-left: 10px;
  margin-right: 10px;
}

.todayLow {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.buttonRow {
  width: 90%;
  margin: 1.25rem auto;
}

.readMore {
  display: flex;
  align-items: center;
  border: 1px solid #073b4c;
  border-radius: 5px;
  background-color: white;
  margin-top: 0;
  padding: 5px;
  font-weight: 300;
  color: #073b4c;
}

i.fas.fa-plus-circle {
  color: #06d6a0;
  font-size: 2rem;
}

i.fas.fa-minus-circle {
  color: #ef476f;
  font-size: 2rem;
}

.positive {
  color: #06d6a0;
  font-weight: 500;
}

.negative {
  color: #ef476f;
  font-weight: 500;
}

.watchlistContainer {
  border-bottom: 1px solid #ffd166;
}

.watchlistEntries {
  display: flex;
  justify-content: center;
  width: 90%;
  margin: auto;
}

.watchlistEntryContainer {
  flex-direction: column;
  background-color: #fcfcfc;
  border: 1px solid #073b4c;
  border-radius: 5px;
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.namePriceRow,
.todayRow,
.lowRow,
.highRow {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  justify-content: space-between;
}

.watchlistStockSymbol,
.todayLabel,
.lowLabel {
  margin-bottom: 0;
}

span.stockPrice,
span.stockPercentage,
span.lowPrice {
  margin-left: 10px;
  padding-top: 20px;
}

span.highPrice {
  margin-left: 10px;
}

.modalContainer {
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background-color: #fcfcfc;
  width: 22rem;
  border-radius: 5px;
}

.cancelButton,
.confirmButton {
  padding: 5px;
  margin: 0 10px 10px 10px;
  background-color: #fcfcfc;
  color: #073b4c;
  border: 1px solid #073b4c;
  border-radius: 5px;
}

.confirmButton {
  background-color: #ef476f;
  color: #fcfcfc;
  border: none;
}

.trendingContainer {
  border-bottom: 1px solid #ffd166;
}

.trendingStockEntries {
  width: 90%;
  margin: auto;
}

.trendingEntryContainer {
  width: 45%;
  border: 1px solid #073b4c;
  border-radius: 5px;
  align-items: center;
  margin-bottom: 1rem;
  background-color: #fcfcfc;
}

.columnName {
  display: flex;
  text-align: left;
  justify-content: left;
  font-size: 0.75rem;
  font-weight: 700;
  padding-left: 1.25rem;
}

.columnSymbol {
  display: flex;
  text-align: left;
  justify-content: left;
  padding-left: 2.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.columnPrice {
  display: flex;
  text-align: right;
  justify-content: flex-end;
}

.columnPercentage {
  display: flex;
  text-align: right;
  justify-content: flex-end;
  padding-left: 2rem;
}

.columnIcon {
  display: flex;
  justify-content: flex-end;
  padding-right: 1.25rem;
}

.logo {
  width: 3.25rem;
  height: 3.25rem;
  margin-left: 1rem;
  margin-top: 1rem;
}

h2.noStocks {
  font-size: 1.25rem;
  padding: 0 1.5rem;
  font-weight: 500;
  font-style: italic;
  margin-top: 0;
}

.fa-plus {
  color: #06d6a0;
}

.fa-minus {
  color: #ef476f;
}

.logo:hover,
.fa-plus:hover,
.fa-minus:hover,
.fa-search:hover,
.fa-plus-circle:hover,
.fa-minus-circle:hover {
  cursor: pointer;
}

.watchlistEntryContainer:hover {
  cursor: pointer;
  background-color: #f4f4f4;
}

.trendingEntryContainer:hover,
.readMore:hover {
  background-color: #f4f4f4;
}

.trending:hover,
.watchlist:hover {
  color: #ececec;
}

.watchlistEntryContainer:active {
  transform: translateY(0.25rem);
}

.fa-plus-circle:active,
.fa-minus-circle:active,
.readMore:active,
.logo:active,
.cancelButton:active,
.confirmButton:active,
.trending:active,
.watchlist:active,
.fa-plus:active,
.fa-minus:active {
  transform: translateY(0.1rem);
}

.noResult,
.error,
.loading {
  justify-content: center;
  font-style: italic;
}

@media screen and (max-width: 1250px) {
  .headerRow {
    font-size: 0.7rem;
  }

  .subHeaderRow {
    font-size: 0.8rem;
  }

  .companySummary {
    font-size: 1rem;
  }

  .trendingStockEntries {
    flex-wrap: wrap;
  }

  .trendingEntryContainer {
    width: 100%;
  }

  .columnName {
    font-size: 0.8rem;
  }

  .readMore {
    font-size: 0.8rem;
  }

  .searchContainerResult {
    width: 75%;
  }
}

@media screen and (max-width: 820px) {
  .searchContainerResult {
    width: 80%;
  }
}

@media screen and (max-width: 800px) {
  header {
    background-color: #118ab2;
    padding-bottom: 0;
  }

  a.trending,
  a.watchlist {
    margin-left: 0;
    margin-top: 4.5rem;
    font-size: 1rem;
  }

  a.watchlist {
    margin-left: 1.5rem;
  }

  .desktopHeader {
    display: flex;
    justify-content: center;
  }

  .searchForm {
    padding-bottom: 10px;
    border-top: 1px solid #ffd166;
    min-width: 100%;
    display: flex;
    justify-content: center;
    background-color: #118ab2;
  }

  #search {
    margin-top: 10px;
    margin-left: 0;
  }

  .browse {
    margin-bottom: 0;
    margin-top: 50px;
    margin-left: 0;
  }

  .trending,
  .watchlist {
    margin-top: 4rem;
  }

  .watchlistEntries {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
  }

  .watchlistEntryContainer {
    display: flex;
    justify-content: center;
    width: 150px;
    height: 150px;
    margin-left: 0;
  }

  h2.watchlistStockSymbol,
  span.stockPrice,
  h3.todayLabel,
  span.stockPercentage,
  h3.lowLabel,
  span.lowPrice,
  h3.highLabel,
  span.highPrice {
    font-size: 0.8rem;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 5px;
    margin-left: 0;
  }

  .namePriceRow,
  .todayRow,
  .lowRow,
  .highRow {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .logo {
    margin-top: 3.25rem;
    margin-right: 1.5rem;
    margin-bottom: 10px;
    margin-left: 0;
    width: 2.75rem;
    height: 2.75rem;
  }

  .columnName {
    font-size: 0.75rem;
  }

  i.fas.fa-plus-circle,
  i.fas.fa-minus-circle {
    font-size: 1.5rem;
  }

  .searchContainerResult {
    width: 85%;
  }
}

@media screen and (max-width: 550px) {
  .columnName,
  .trendingStockSymbol,
  .trendingStockPrice,
  .trendingStockPercentage {
    font-size: 0.65rem;
  }

  .headerRow {
    font-size: 0.5rem;
  }

  h2.todayPercentage,
  h2.todayLow,
  h2.todayHigh,
  .companySummary {
    font-size: 1rem;
  }

  .searchContainerResult {
    width: 90%;
  }

  h2.noStocks {
    font-size: 1rem;
  }
}