/* full app view */

.app {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
  max-width: 1600px;
  margin: 0 auto;
  
}

a {
  color:black;
}

.timelineSelector {
  font-weight: 500;
}

.margin-left {
  margin-left: 7px;
  padding-bottom: 5px;
}

.green-text {
  color: green;
}

.red-text {
  color: red;
}

ul {
  list-style-type: none;
}

ul li {
  display: flex;
  align-items: center;
}

.top-padding {
  padding-top: 15px;
}

.bottom-padding {
  padding-bottom: 15px;
}

.pd-5-15 {
  padding: 5px 15px;
  /* border-radius: 8px; */
}

.margin-top {
  margin-top: 10px;
}

.margin-bottom {
  margin-bottom: 10px;
}

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

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

.rm-margin-top {
  margin-top: 0px;
}

.rm-margin-bottom {
  margin-bottom: 0px;
}

.rm-margin-left {
  margin-left: 0px;
}

.rm-margin-right {
  margin-right: 0px;
}

.rm-margin-all {
  margin: 0 0;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
  align-items: center;
}

.flex-start {
  justify-content: flex-start;
}

.flex-row {
  width: 90%;
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: space-between;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.block {
  display: block;
}

/* Left sidebar, which contains nav and watchlists */
.sidebarGrid {
  display: flex;
  flex-direction: column;
  overflow: scroll;
}

/* Main view that displays stock info, news, etc */
.mainViewGrid {
  background-color: #f0f0f0;
  padding: 20px 40px;
  overflow: scroll;
}

.navbar {
  height: 80px;
  width: 100%;
  color: white;
}

.sidebar{
  border-left: 3px solid #f0f0f0;
}

.createUserView, .signInView, .watchlistView, .stockSearchView, .mainViewGrid {
  min-height: 100vh !important;
}

.sidebarNewsButton {
  display: flex;
  flex-direction: column;
}

.addWatchlist {
  display: flex;
  flex-direction: column;
}

.stock-input-form, .addWatchlistForm {
  margin: auto;
  display: flex;
  align-items: center;
  padding: 7px;
}

.nav-menu {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px !important;
  color: white;
}

.nav-link, .menu-icon {
  padding: 7px;
  color: #FFF;
  padding-bottom: 2px;
}

.navbar .search-button, div .createUserButton, #addWatchlistButton {
  margin-top:10px;
}

.createAccountFormContainer, .signInFormContainer {
  padding: 20px;
}

.createAccountForm .createUserFormField, .signInForm .signInFormField {
  padding: 7px;
}

.newsImg {
  border-radius: 5px;
  width: 100%;
}

.newsLayout {
  width: 100%;
  height: 100%;
}

.newsList {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.newsArticle:nth-child(1) {
  width: 400px;
  height: 15%;
}

.newsUnavailableLayout {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  flex-wrap: wrap;
}

.loadingNewsBlurb {
  width: 25%;
  height: auto;
  margin: 5px;
}

.loadingNewsBlurb .loadingNewsImg {
  height: 110px;
}

.newsArticle {
  width: 150px;
  height: auto;
  margin: 5px;
}

.mainNews {
  width: 500px;
  height: 400px;
  background-color: red;
  margin: 5px;
}

.articleDesc, .articleDate {
  font-size: 9px;
  margin-top: -10px;
}

.searchItemList {
  padding: 5px 20px;
}

.stockSearchSymbol {
  font-weight: bold;
}

.stockSearchCompanyName {
  color: #aaabac;
}

.searchApiLimit {
  margin: auto;
}

.stockPageLayout {
  width: 100%;
}

.stockPageHeader {
  align-items: flex-end;
}

.stockLogo {
  width: 30px;
}

.chartArea {
  width: 100%;
}

.chartControls {
  display: flex;
  align-content: space-around;
  align-items: flex-end;
  justify-content: space-around;
  min-width: 320px;
  overflow: scroll;
}

.chart {
  width: 100%;
  height: auto;
  padding: 3px;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  margin-top: 10px;
}

.activeTimelineSelector {
  background: #e3e3e3 !important;
  border-radius: 8px !important; 
}

.details {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 15px;
}

.detailRow {
  width: 100%;
  border-left: 1px solid gray;
}

.detailColumn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px;
  margin: 0px 20px;
}

.loadingStockChart {
  width: 100%;
  height: auto;
}

.loadingChart {
  width: 100%;
  height: 125px !important;
  margin: 25px 0;
}

.loadingStockPrice {
  height: 50px !important;
}

.companyFinancialsModule {
  background-color: transparent !important;
}

.watchlistSection {
  display: block;
}

.watchlistItem {
  display: block;
  padding: 12px 25px;
}

.disabledButton {
  pointer-events: none;
}

.earningsCalendarList {
  display: flex;
  flex-wrap: wrap;
}

.calendarItem {
  padding: 0 10px;
  padding-top: 10px;
  border-right: 1px solid rgb(201, 201, 201);
}

.earningsCalendarSection h4 {
  margin-bottom: 0 !important;
  padding-bottom: 5px;
}

.accountSettings, .watchlistSettings, .displaySettings {
  padding: 20px 0px;
}

#standard-search-label {
  margin-top: -20px;
}

/* ================= */
/* ================= */
/* MOBILE VIEW */
/* ================= */
/* ================= */

@media (max-width: 767px) {
  .app {
    flex-direction: column;
    height: auto;
  }

  h1 {
    font-size: 26px;
  }

  .navbar {
    height: 70px;
  }

  .sidebar {
    /* height: 200px; */
    display: none !important;
  }

  .stockPageStockName {
    display: inline;
  }

  #standard-search-label {
    margin-top: -15px;
  }

  .mainViewGrid {
    padding: 10px;
  }

  .margin-left {
    margin-left: 2px;
  }

  .flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .flex-row {
    width: 100% !important;
  }

  .flex-col {
    display: flex;
    flex-direction: column;
  }

  .chart, .indicators, .volumeChart {
    padding: 1px;
  }

  .newsArticle {
    width: 100%;
  }

  .details {
    flex-direction: column;
  }

  ul {
    padding: 0 5px;
  }

  .menuLink {
    margin: 10px 0px;
  }

  .detailRow {
    border-left: none;
    border-bottom: 1px solid gray;
    padding: 10px 0px;
  }

  .stockSearchInput {
    font-size: 30px !important;
  }

  .chartControls {
    justify-content: start;
  }

  .signInForm, .createAccountForm {
    display: flex;
    flex-direction: column;
  }

  /* .MuiDataGrid-root, .MuiDataGrid-cell {
    color: white !important;
  } */
}