.main {
  width:70vw;
  background-color:red;
  border: 1px black solid;
}

h3{
  padding-top:10vh;
}

.fourColumn{
  width:23%;
  margin-right: 2%;
  display:inline-block;
  vertical-align: top;
  margin-bottom:40px;
}

.fourColumnEnd {
  margin-right: 0%;
}

.fullbar {
  width:100%;
  height:20px;
  background-color:white;
}

.percentage{
  /* this width needs to be changed depending on the % of the bar to fill */
  width:34%;
  height:30px;
  margin-top:-30px;
  background-color:yellow;
}

.datepicker {
  width:40%;
  background-color: #576573;
  border-radius:100px;
  display:block;
  margin-left: auto;
  margin-right: auto;
  padding: 1%;
}

.datepicker button {
  background-color: white;
  border: 3px #ffffff solid;
  border-radius: 100px;
  color: #000000;
  font-weight: bold;
}

.datepicker button:hover{
  background-color: transparent;
  color: white;
}

.leftArrow {
  float:left;
}

.rightArrow {
  float:right;
  text-align: right;
}

.dateIndicator {
  margin-left:auto;
  margin-right: auto;
  text-align: center;
  padding-bottom: 3px;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.day_summary{  width:100%;
  border-radius: 10px;
  padding:5%;
  border: 4px #576573 solid;
  margin-top:-20px;
  margin-bottom: 20px;}

/* .note_counts {
} */

.leftStatistic {
  width:49.5%;
  display: inline-block;
  text-align:left;
}

.rightStatistic {
  width:50%;
  display: inline-block;
  text-align:right;
}

.statistic {
  font-size:3em;
  /* change font to sans serif typeface */
}

.item {
  width:30%;
  display: inline-block;
  vertical-align: top;
  margin-right:2%;
  margin-top: 1em;
  background-color:#b7b7b7;
  border-radius: 10px;
  padding: 20px;
}

.item button {
  /* new */
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.75em;
  border-radius: 10px;
  border:0;
}

.tweet-list-container label {
  width: 100%;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 4%;
  text-align: center;
  border-radius: 10px;
  vertical-align: center;
  padding-top: 1em;
  border: 2px #576573 solid;
  padding-bottom:1em;
}

.tweet-list-container label select {
  padding: 10px;
  display: inline-block;
  margin-left: 1em;
  margin-bottom: 1em;
  border-radius: 10px;
  border: 0;
  background-color: #576573;
  color: white;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* font-size: 0.5em; */
}

.tweet-list-container label select:hover {
  background-color: #FFB700;
}

.tweet-list-container label select option:hover {
  background-color: #576573;
}

.tweet-list button {
  display: flex;
  width: 100%;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  background-color: #576573;
  color:white;
  border:0;
  margin-top:1em;
}

.tweet-list button:hover {
 background-color: #FFB700;
}

.date-range-instructions {
  width: 100%;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.75em;
  /* text-transform: uppercase; */
  /* letter-spacing: 4%; */
  text-align: center;
  border-radius: 10px;
  vertical-align: center;
  padding: 1em;
  border: 2px #576573 solid;
  margin-bottom: 2em;
}

.clickable-date {
  color:#FFCF06 !important;
  padding-left: 0.5em;
}

.clickable-date:hover {
  color:#E28000 !important;
}

.item_not_displayed {
  width:100%;
  color: black;
  font-family: var(--font-family-Font-2, "Source Serif Pro");
  font-size: 16px;
  font-style: normal;
  font-weight: var(--font-weight-400, 400);
  line-height: var(--line-height-25_2, 25.2px); /* 157.5% */
}


.note{
  width:31%;
  display: inline-block;
  padding:2%;
  vertical-align: top;
  background-color:white;
  border-radius: 10px;
  margin-right:2%;
  overflow-x: hidden;
  color:black !important;
  font-size: 0.75em;
  margin-bottom: 2rem;
}

.note_summary {
  font-style: italic;
  padding-bottom: 5%;
  font-size: 1.25em;
}

.note_timestamp {
  background-color: #D6DBE1;
  margin-bottom:1em;
}

/* .note-divider {
  
} */

.ReactModal__Overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent background */
    z-index: 1000; /* Ensure overlay is above other elements */
  }
  
  /* Modal content */
  .ReactModal__Content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    outline: none;
    z-index: 1001; /* Ensure modal content is above overlay */
    max-width: 1024px;
    max-height: 80vh; /* Set maximum height */
    overflow-y: auto; /* Enable vertical scrolling */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    background-color: #576573;
    border-radius: 4px;
    width:70em;
    color: white;
    padding:5vw;
  }

/* Make all text inside the modal blue */
.ReactModal__Content * {
    color: blue;
  }

.ReactModal__Content button {
  color:black !important;
  width:100%;
  border: 0;
  border-radius: 100px;
  background-color: #FFCF06;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.75em;
}

.ReactModal__Content button:hover {
  background-color: #FFB700;
}

.ReactModal__Content h2 {
  /* existing */
  color: white;
  margin-top: 0;
}

/* Modal overlay */
.date_modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent background */
  z-index: 1000; /* Ensure overlay is above other elements */
}

/* Modal content */
.date_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 4px;
  outline: none;
  z-index: 1001; /* Ensure modal content is above overlay */
  max-width: 500px;
  width: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.logo-at-top-of-page {
  padding-bottom:40px;
}

.note_timestamp, .note_summary, .note_divider {
  color:black !important;
}

h2 {
  /* new */
  /* margin-top:5rem; */
}


.notes-stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.note-timing {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  color:#000000;
}

.note-timing img {
  filter: invert(1);
  width:16px !important;
}

.note-timing-leftside{
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-black-solid, #000000);
  font-family: Jost;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.note-timing-rightside {
  color: #000000;
  font-family: Jost;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: right;
  float: right;
}

.tweet {
  margin-left:auto; 
  margin-right:auto;
}

.approved_note_header {
  /* color: var(--color-white-solid, #FFF); */
  font-family: Jost;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.note_for_hidden_tweet {
  /* color: var(--color-white-solid, #FFF); */
  font-family: var(--font-family-Font-2, "Source Serif Pro");
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}

.median {
  padding: 5px;
}

.median_header {
  display: inline-block;
  width: 30%;
}

.median_time {
  display: inline-block;
  width: 69%;
  /* color: #212022; */
}

.median_time_bar {
  background-color: white;
}

.speed_header {
  width: 100%;
  display: block;
  text-align: center;
}

/* Static Page */

.buttonsContainer {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 1em;
}

.buttonsContainer img {
  display:block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10px;
}

.buttonsContainer:hover + img {
  filter: invert(1);
}

.buttonsContainer .buttonsTwo .button {
  width:100%;
  display: block;
  margin-top: 2em;
}

.buttonsThree {
  width:25%;
}

.buttonsTwo {
  width:45%;
}

.buttonsThree, .buttonsContainer .button {
  flex-basis: auto;
  width:25%;
  display: inline-block;
  padding: 10px;
  flex-grow: 1;
  border-radius: 10px;
  background: #576573;
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}

.buttonsThree:hover, .buttonsContainer .button:hover {
  background-color: #FFB700;
  color:black;
}

/* Deep Dive */

.controls label, .post-id label {
  display: flex;
  /* background-color: red; */
  align-items: center;
  justify-content: center;
}

.post-id label {
  margin-bottom: 1em;
}

.controls input, .post-id input {
  border-radius: 5px;
  border: 2px solid #BABABA;
  background: #D9D9D9;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-left: 0.5em;
  flex-grow: 1;
  /* width: 100%; */
}

.search-query, .date-range-picker, .note-id, .controls button {
  width:100%;
  margin-bottom: 1em;
  /* background-color: red; */
}

.controls .search-button {
  border-radius: 10px;
  background: #FFCF06;
  color:#000000;
  border: 0;
  box-shadow: 0;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-bottom: 4em;
}

.controls .search-button:hover {
  background-color: #FFB700;
}

.date-range-picker label {
  width:49%;
  display: inline-flex;
  /* margin-right: 2.3em; */
}

.date-range-picker button {
  display: inline-flex;
}

.dayChanger {
  display: inline-block;
  width:10%;
}

.volume {
  text-align: center;
}

.highcharts-credits {
  display:none;
}

.deepdive_divider{
  width: 100%;
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
  clear: both;
}

.median_time_bar {
  padding-left: 0.5em;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.speed_header, .tweet-list button {
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 5%;
}

.tweet-list button {
  font-size: 0.6em;
}

/* Note Cards */
.note {
  color: #000000;
  overflow:inherit;
}

.note a {
  color: #000000;
}

.note_summary {
  font-style: italic;
  font-size: 1em;
}

.note_summary a {
  color: #000000;
}

.note_for_hidden_tweet a {
  color: #000000;
}

.item_not_displayed a {
  color: #000000;
}

.notecard_title {
  text-transform: uppercase;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: bold;
  color: #000000;
  display: block;
  clear: both;
  margin-top: 10px;
  margin-bottom: 5px;
}

.notecard_votes{
  width: 100%;
  display: block;
  background-color: #D9D9D9;
}

.notecard_votes_upvotes, .notecard_votes_neutral, .notecard_votes_downvotes, .notecard_helpfulness {
  float: left;
  display: inline-flex;
  margin:0;
  padding: 0;
  height: 30px;
}

.notecard_votes_upvotes {
  background-color: #000000;
}

.notecard_votes_neutral {
  background-color:#d9d9d9;
}

.notecard_votes_downvotes {
  background-color:#E28000;
}

.vote_counts {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px 0;
  width: 100%;
  margin-top:1em;
}

.vote_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  margin-top: 10px;
}

.vote_circle {
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.vote_upvote {
  background-color: #000000;
  color: #ffffff;
}

.vote_neutral {
  background-color: #d9d9d9;
  color: #000000;
}

.vote_downvote {
  background-color: #E28000;
  color: #ffffff;
}

.vote_label {
  font-size: 14px;
  text-align: center;
}

.notecard_helpfulness_container {
  position: relative;
  width: 100%;
  margin-bottom: 20px; /* Adjust as needed */
}

.notecard_helpfulness {
  height: 30px; /* Adjust as needed */
  position: relative;
  background-color: #f0f0f0; /* Adjust as needed */
  padding:0.4em;
  /* font-size: em; */
  color: white;
  /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */

}

.notecard_helpfulness_fill_indicator {
  background-color: #ffffff;
  width:3px;
  height:30px;
  position: relative;
  display: inline-block;
  top:-30px;
  left:70%;
}

.helpfulness_indicator, .polarity_indicator {
  position: relative;
  transform: translateX(-58%); /* this is a hack; should be 50%, but the pointer wasn't properly placed. This made it work. */
  top: 10px;
  padding: 5px; 
  color:white;
  background-color: black;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  width:4em;
  height:30px;
  /* line-height: 30px; */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.polarity_indicator {
  top: 40px;
}


.helpfulness_indicator p {
  /* margin-top:-10px; */
  position: absolute;
  width: 85%;
  text-align: center;
}

.helpfulness_indicator:before, .polarity_indicator:before{
	content: '';
	position: absolute;
	top: 0;
	right: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-bottom-color: black;
	border-top: 0;
	margin-right: -10px;
	margin-top: -10px;
}

.note_divider {
  padding-top: 20px; 
  border-bottom: 1px #d9d9d9 solid;
  width: 100%;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  clear: both;
}

.notecard_polarity {
  width: 100%;
  height: 30px;
  background: linear-gradient(
      to left,
      rgb(255, 0, 0) 0%,
      rgb(244, 0, 11) 10%,
      rgb(196, 0, 59) 30%,
      rgb(164, 0, 91) 40%,
      rgb(128, 0, 128) 50%,
      rgb(91, 0, 164) 60%,
      rgb(59, 0, 196) 70%,
      rgb(32, 0, 223) 80%,
      rgb(11, 0, 244) 90%,
      rgb(0, 0, 255) 100%
  );
}

.notecard_polarity {
  position: relative;
  width: 100%;
  height: 30px; /* Adjust as needed */
  background-color: #f0f0f0; /* Adjust as needed */
  margin-bottom: 40px; /* Adjust as needed */
}

.note_button .btn {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
  background-color:transparent;
  border:1px #000000 solid;
  color: #000000;
  text-decoration: none;
}

.note_button .btn:hover{
  background-color: #000000;
  color: #f0f0f0;
}

.notes-stacked-post {
  width:100%;
  padding: 1em;
  padding-left:30%;
  padding-right:30%;
  background-color:#b7b7b7;
  border-radius: 10px;
  font-size: 1em !important;
}

.search-button {
  width: 100%; 
  margin-bottom: 60px;
  box-shadow: 0;
  border: 0;
  padding:10px;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-color: #FFCF06;
}

.search-button:hover {
  background-color: #FFB700;
}

.note-id {
  width:100%;
}

.note-id label {
  width:90%;
  display: inline-block;
}

.note-id label input {
  width:88%;
  margin-left:9%;
  display: inline-block;
}

/* Tutorial */

#note-tutorial-root {
  max-width: 2500px;
}

.tutorialTweetContainer{
  width:100%;
  display: block;
  /* background-color: red; */
}

.tutorialDescription{
  width:54%;
  display: inline-block;
  /* background-color: blue; */
  vertical-align: top;
  margin-left: 5%;
}

.tutorialTweet {
  width:17.75%;
  min-width: 220px;
  overflow: hidden;
  /* background-color: yellow; */
  display: inline-block;
  vertical-align: top;
  min-height: 10vh;
}

.tutorialNotecard {
  display: inline-block;
  width:17.75%;
  vertical-align: top;
  margin-left: 5.5%;
}

.tutorialTweet > div, .tutorialTweet iframe {
  display: block !important;
  width: 100% !important;
}

.twitter-tweet {
  width: 100% !important;
}


.tutorialNotecard .note {
  width:100%;
  padding-bottom: 3em;
  overflow: inherit !important;
}

#algo-01-leftright {
  margin-left: auto;
  margin-right:auto;
}


#tutorial1 {
  width: 54%;
  float: left;
  /* margin-left:2%; */
  margin-left: 5%;
}

#tutorial1 img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-bottom: 2em;
  position: relative;
}

#predictions {
  flex: 4
}

#chart1, #chart2{
  flex: 2;
}


#chart1 .highcharts-background, #chart2 .highcharts-background {
  fill: #b7b7b7b7 !important;
}


/* .modelSection img, */
.lossSection img,
.gradientDescentSection img,
.approvingVotesSection img {
  /* width:120%; */
  margin-top: 2em;
  margin-bottom: 3em;
  margin-left: auto;
  margin-right: auto;
  /* margin-left:-10%; */
}

#polarityImage img {
  width:70% !important;
  margin-left: 15%;
}


.clear {
  clear: both;
}

.topSection, .predictionSection, .errorSection, .modelSection, .lossSection, .gradientDescentSection, .approvingVotesSection, .predictionEquation, .errorEquation {
  display: flex;
  justify-content: space-between; /* Distribute space between items */
  align-items: center; /* Align items to the start of the container */
  flex-direction: row;
}


.explanation {
  display: flex;
  justify-content: center;
  flex-direction: column;
}


#predictionEquationExample svg{
  width: 100%;
}

#lossScoreImage, #gradientDescentImage {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.topSection {  
  border-bottom: 1px solid #ddd; /* Optional: Add a bottom border */
  align-items: flex-start
}

.flex-item {
  flex: 1; /* Allow items to grow and fill the available space */
  margin: 30px; /* Add some margin between items */
}

.flex-item svg {
  width:100%;
}

.LHS {
  flex: 4;
  display: flex;
  margin: 0px; 
  justify-content: center;
  align-items: center;
  height: auto;
}

.equalSign {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
  height: auto;
}

.RHS {
  flex: 6;
  display: flex;
  margin: 0px; 
  justify-content: center;
  align-items: center;
  height: auto;
}

.centered-item {
  display: flex;
  justify-content: center;
}

#notecard {
  /* Additional styles for the Notecard div */
  width:100%;
  padding: 0;
}

#tutorialTweet {
  /* Additional styles for the Tweet TutorialTweet div */
}

#noteStatus {
  /* Additional styles for the note status div */
}


/* Remove or adjust conflicting styles */
.tutorialNotecard, .tutorialTweet, .tutorialDescription {
  width: auto; /* Reset width to auto to allow Flexbox to control it */
  display: block; /* Ensure they are block-level elements */
  vertical-align: top; /* Align items to the top */
  margin: 0; /* Reset margin to avoid conflicts */
}

.tutorialNotecard, .noteStatus {
  margin-top: 10px; /* Add margin to the top to match the tweet, which comes with 10px margins */
  margin-bottom: 10px;
}

.chartSection {
  display: flex;
  justify-content: space-between; /* Distribute space between items */
  align-items: flex-start; /* Align items to the start of the container */
  padding: 20px;
  border-bottom: 1px solid #ddd; /* Add a bottom border */
}

.chartIntro {
  border-top: 1px solid #ddd;
  padding-top: 20px;
}

.verticalFlex {
  display: flex;
  flex-direction: column; /* Change the direction to column */
  align-items: flex-start; /* Align items to the start of the container */
}

/* Deepdive Controls */
.clickable-date {
  cursor: pointer;
  color: blue; /* Change color to indicate it's clickable */
  text-decoration: underline; /* Underline to indicate it's clickable */
}

.no-space {
  line-height: 1; /* Adjust line height as needed */
  margin: 0; /* Remove margin if necessary */
}

.highcharts-container {
  overflow-y: auto; /* Enable vertical scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  touch-action: pan-y; /* Allow vertical scrolling while preserving tooltips */
}

/* MOBILE STYLES */

@media screen and (max-width: 900px) 
  /* and (-webkit-min-device-pixel-ratio: 2) */ { 
    .main {
      width:70vw;
    }
    
    .fourColumn{
      width:100%;
      margin-right: 0%;
    }
    
    .datepicker {
      width:80%;
    }
    
    .leftStatistic {
      width:100%;
    }
    
    .rightStatistic {
      width:100%;
    }
    
    /* .statistic {
      font-size:3em;
    }
     */
    .item {
      width:100%;
      margin-right:0%;
    }
    
    
    
    .tweet-list-container label {
      width: 100%;
      display: block;
    }
    
    .tweet-list-container label select {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    
    .note{
      width:100%;
      margin-right:0%;
    }

    .notes-stacked-post {
      width:100%;
      padding: 1em;
      padding-left:1em;
      padding-right:1em;
      background-color:#b7b7b7;
      border-radius: 10px;
      font-size: 1em !important;
    }
    
    .notecard_title {
      margin-top:0;
      margin-bottom:1em;
    }

    .median_header {
      width: 100%;
    }
    
    .median_time {
      width: 100%;
    }
    
    .buttonsThree {
      width:100%;
    }
    
    .buttonsTwo {
      width:100%;
    }
    
    .buttonsThree, .buttonsContainer .button {
      width:100%;
    }
    
    .date-range-picker label {
      width:49%;
    }

    .dayChanger {
      width:10%;
    }
    
    .tutorialDescription{
      width:100%;
      margin-left: 0%;
    }
    
    .tutorialTweet {
      width:100%;
    }
    
    .tutorialNotecard {
      width:90%;
      margin-left: 0%;
    }

    .flex-item {
      flex: 0 0 100%;
      margin-left: 0;
    }

    .flex-item svg {
      width:100%;
    }
    

    .topSection, .predictionSection, .errorSection, .modelSection, .lossSection, .gradientDescentSection, .chartSection, .predictionEquation, .errorEquation {
      flex-direction: column;
    }
}