body {
  flex-direction: column;
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
  /* background-color: #a4d6e0; */
  color: black;
  margin: 0;
}

strong {
  font-weight: 600;
}

/* ======================= */
/* Header Container */
/* ======================= */
/* .headerContainer {
  display: flex;
  position: relative;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  height: 80px;
} */
.headerSection {
  display: flex;
  position: relative;
  align-items: center;
  width: 375px;
  margin: auto;
  padding: 15px;
}

.errorSection {
  display: flex;
  position: relative;
  align-items: center;
  width: 375px;
  margin: auto;
  padding: 15px;
  background-color: rgb(241, 101, 41);
  color: white;
  text-align: center;
}

.logoImage {
  display: flex;
  align-items: flex-end;
  padding-top: 10px;
}

.stats {
  display: flex;
  position: absolute;
  right: 0px;
  top: 30px;
  align-items: center;
  justify-content: center;
}

.stats:hover {
  cursor: pointer;
}

.subMenuContainer{
  display: flex;
  width: 100%;
  flex-direction: row;
}

.subMenuSelected{
  border-bottom-style: solid;
  border-bottom-color: white;
  border-bottom-width: 3px;
  margin-right: 20px;
  font-weight: 500;
  cursor: pointer;
}

.subMenuUnselected{
  margin-right: 20px;
  cursor: pointer;
}

.menuModalSectionShow{
  display: flex;
  flex-direction: column;
  margin-top: 25px;
}

.menuModalSectionHide{
  display: none;
  margin-top: 25px;
}

.aboutInfo{
  width: 320px;
}

.iconPlacement {
  display: flex;
  margin-right: 15px;
  margin-top: 5px;
}

.titleText {
  display: flex;
  align-items: center;
  padding: 10px;
}

.pageTitle {
  text-decoration: none;
  color: black;
  font-size: 1.2rem;
  font-weight: 500;
  padding: 0 5px;
}

.menuContainer {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  padding-top: 20px;
}

.menuSection {
  display: flex;
  position: relative;
  width: 375px;
  margin: auto;
  padding: 15px;
}

.menuOption {
  cursor: pointer;
  display: flex;
  height: 40px;
  flex-grow: 1;
  justify-content: center;
  border-width: 1px;
  border-color: #d2d2d2;
  color: gray;
}

.menuOptionSelected {
  cursor: pointer;
  display: flex;
  height: 40px;
  flex-grow: 1;
  justify-content: center;
  color: black;
  border-bottom-color: #7140ff;
  border-bottom-width: 5px;
  border-bottom-style: solid;
}

.urllist {
  display: flex;
  flex-direction: column;
  background-color: white;
  color: black;
  display: flex;
  width: 100%;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 10px;
}

.urllist:hover {
  cursor: pointer;
}

.icon {
  width: 20px;
  height: 20px;
}

.menuLabel {
  display: flex;
  /* width: 100%; */
  margin-left: 10px;
  justify-content: center;
}

/* ======================= */
/* Body Container */
/* ======================= */
.bodyContainer {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* background-color: #e4ecf6; */
}

.sectionContainerShow {
  display: flex;
  width: 375px;
  margin: auto;
  padding-top: 30px;
  padding-left: 15px;
  padding-right: 15px;
  flex-direction: column;
}

.sectionContainerHidden {
  display: none;
}

.sectionAnswer {
  padding-top: 20px;
}

.optionList {
  padding-top: 20px;
}

.optionListItem {
  display: flex;
  margin-top: 10px;
  height: 100%;
  padding: 10px;
  margin-bottom: 5px;
  border-style: solid;
  border-radius: 10px;
  /* border-color: #cdd4d9; */
  border-width: 1px;
}

.optionListLabel {
  display: flex;
  width: 100%;
}

.voteInput {
  margin-top: 15px;
}

.editIcon {
  display: flex;
  height: 20px;
  width: 20px;
  margin-right: 20px;
  margin-left: 10px;
}

.trashIcon {
  display: flex;
  height: 20px;
  width: 20px;
  margin-right: 20px;
  margin-left: 10px;
}

.trashIconLocalStorage {
  display: flex;
  position: absolute;
  right: 5px;
  height: 20px;
  width: 20px;
  margin-right: 20px;
  margin-left: 10px;
}

.addVote_unsel {
  display: flex;
  justify-content: center;
  bottom: 0px;
  width: 345px;
  margin-top: 15px;
  padding: 15px;
  border-radius: 10px;
  border-style: none;
  background-color: #757575;
  color: white;
}

.addVote_sel {
  display: flex;
  justify-content: center;
  bottom: 0px;
  width: 345px;
  margin-top: 15px;
  padding: 15px;
  border-radius: 10px;
  border-style: none;
  background-color: #4692EB;
  color: white;
}

.editContainer {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.inputEdit {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
  padding: 5px;
}

.editInput {
  width: 100%;
  border-radius: 5px;
  border-width: 1px;
  border-color: #cdd4d9;
  /* height: 30px; */
}

.acceptEdit {
  display: flex;
  height: 30px;
  color: white;
}

.editButton {
  margin-left: 5px;
}

.cancelButton {
  margin-left: 5px;
}

.dateContainer {
  padding-top: 20px;
  width: 345px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin: auto
}

.monthAndYearContainer {
  width: 340px;
  height: 70px;
  display: flex;
  flex-direction: row;
  background-color: #7140ff;
  border-radius: 15px;
  color: white;
  padding: 10px;
}

.monthAndDate {
  display: flex;
  flex-direction: column;
  width: 140px;
  align-items: center;
  justify-content: center;
}

.previousMonth,
.nextMonth {
  display: flex;
  align-items: center;
}

.monthLabel {
  font-size: 1.2rem;
  width: 45px;
  text-align: center;
  margin: auto;
}

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

.yearLabel {
  font-size: 1.2rem;
  width: 105px;
  text-align: center;
  margin: auto;
}

.next,
.prev {
  font-size: 1.5rem;
  width: 35px;
  text-align: center;
  cursor: pointer;
}

.increase,
.decrease {
  font-size: 1.5rem;
  width: 20px;
  text-align: center;
  cursor: pointer;
}

.yearInputContainer {
  width: 145px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

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

.weekDayLabelsContainer {
  width: 345px;
  display: flex;
  align-items: center;
  text-align: center;
  margin: auto;
  justify-content: center;
}

.weekDayLabels {
  width: calc(265px/7);
  margin: 5px;
  padding: 5px;
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
}

.rowContainer {
  width: 345px;
  display: flex;
  align-items: center;
  margin: auto
}

.dateNumberContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.previousDays,
.nextDays {
  width: calc(265px/7);
  margin: 5px;
  padding: 5px;
  text-align: center;
  color: gray;
  border-style: solid;
  border-width: 1px;
  border-color: #dedede;
  height: 35px;
}

.dateLabels {
  position: relative;
  height: 35px;
  width: calc(265px/7);
  margin: 5px;
  padding: 5px;
  text-align: center;
  color: black;
  font-weight: 500;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-color: #dedede;
}

.dateLabels:hover {
  background-color: rgb(185, 229, 255);
}

.today {
  border-style: solid;
  border-color: #4692EB;
  border-width: 3px;
}

.dateSelected {
  background-color: #05425c;
  color: white;
}

.dateExists {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  background-color: rgb(222, 85, 18);
  font-size: 0.5rem;
  color: white;
}

.dateExistsHighest {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  background-color: rgb(90, 171, 26);
  font-size: 0.5rem;
  color: white;
}

.shareChannelButton {
  display: flex;
  width: 100%;
  margin-top: 10px;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.whatsAppColours {
  background-color: #4ec55f;
}

.whatsAppColours:hover {
  cursor: pointer;
}

.fbColours {
  background-color: #1974e4;
}

.fbColours:hover {
  cursor: pointer;
}

.goToURL {
  background-color: rgb(237, 125, 77);
}

.goToURL:hover {
  cursor: pointer;
}

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

.shareIcon {
  color: white;
  font-size: 1.5rem;
  padding: 10px;
}

.buttonLabel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  color: white;
}

.shareModal {
  background-color: #7140ff;
  color: white;
  border-radius: 20px;
}



.questionURL {
  display: flex;
  width: 100%;
  font-weight: 500;
}

.urlLabel {
  font-size: 0.8rem;
}

/* *************** */
/* Ideas */
/* *************** */
.existingIdeaItem {
  display: flex;
  background-color: #249cff;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: #cdd4d9;
  width: 100%;
  flex-direction: column;
  padding: 10px;
  margin-bottom: 10px;
  color: white;
}

.ideaItemSection {
  display: flex;
  width: 100%;
  position: relative;
  justify-content: space-between;
  margin-bottom: 5px;
}

.ideaOwner {
  display: flex;
  font-size: 0.7rem;
}

.ideaVotes{
  font-size: 0.6rem;
}

/* ======================= */
/* Footer Container */
/* ======================= */
.footerContainer {
  display: flex;
  margin: auto;
  width: 375px;
  bottom: 30px;
  padding: 15px;
  justify-content: center;
}

.shareButtonSection {
  display: flex;
  width: 100%;
  align-items: center;
}

.shareButton {
  display: flex;
  justify-content: center;
  bottom: 0px;
  width: 340px;
  margin: auto;
  padding: 10px;
  border-radius: 15px;
  border-style: none;
  background-color: #7140ff;
  color: white;
}

/* ======================= */
/* Stats modal */
/* ======================= */
.statsTotalNumber {
  display: flex;
  justify-content: space-between;
}

.respondentNumber {
  font-size: 2rem;
  padding-bottom: 5px;
}

.respondentCounts {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  width: 120px;
  border-right: solid white 1px;
  padding-right: 20px;
}

.statsModalSection {
  margin-bottom: 5px;
}

.statsModalTitle{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.respondentList{
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;
}


.dateRow{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  width: 315px;;
  color: black;
  border-radius: 5px;
  background-color: white;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
}

.ideaRow{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  width: 315px;;
  color: black;
  border-radius: 5px;
  background-color: white;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
}

.showListOfRespondentsOff{
  display: none;
}

.showListOfRespondentsOn{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  width: 315px;;
  color: black;
  border-radius: 5px;
  background-color: white;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
}