src/styles/global/App.css

.rootContent {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.mainContent {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.sectionBasicInfo {
  width: 100%;
  display: flex;
  background-color: white;
  flex-direction: row;
  justify-content: space-between;
  padding: 2%;
  border-bottom: 1px solid #d1d1d1;
}

.sectionTrafic {
  width: 100%;
  display: flex;
  background-color: white;
  flex-direction: row;
  justify-content: space-between;
  padding: 2%;
}

.sectionBasicInfoOne {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 2%;
  padding-left: 10%;
  padding-right: 10%;
  border-bottom: 1px solid #d1d1d1; /* Add a thin bottom border */
}

.basicInfoLabelsOne {
  background-color: white; /* Change background color to white */
  font-family: "airbnb_semi_bold";
  color: #3e3e3e;
  font-size: 20px;
  width: auto;
  height: 10vh;
  padding: 2%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 20px; /* Add rounded borders */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.footfallLeftWrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 70vh;
  width: 49%;
}

.averageFootfallWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: auto;
  position: sticky;
  color: white;
  font-family: "airbnb_extra_bold";
  font-size: 60px;
}

.averageModeWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: auto;
  color: white;
  font-family: "airbnb_extra_bold";
  font-size: 60px;
}

.averageFootfallWrapperText {
  font-family: "airbnb_light";
  margin-top: 15px;
  margin-left: 10px;
  font-size: 20px;
}

.averageFootfall {
  background: linear-gradient(to bottom, #858585, #000000);
  width: 100%;
  height: 14vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px; /* Add rounded borders */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.parentWidthFootfall {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 10vh;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

.blockInformationBackground {
  background: linear-gradient(to bottom, #4b4b4b, #000000);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 6.5vh;
  border-radius: 14px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.weekDistribution {
  background-color: white; /* Change background color to white */
  width: 100%;
  height: 53vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px; /* Add rounded borders */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.weekDistributionTitle {
  width: 100%;
  height: 4vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "airbnb_extra_bold";
  font-size: 17px;
  background-color: white;
  color: #4b4b4b;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.basicInfoMap {
  background-color: white; /* Change background color to white */
  width: 49%;
  height: 70vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px; /* Add rounded borders */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.modeSection {
  width: 100%;
  display: flex;
  background-color: white; /* Change background color to white */
  flex-direction: row;
  justify-content: space-between;
  padding: 2%;
  border-bottom: 1px solid #d1d1d1; /* Add a thin bottom border */
}

.sectionModeDivider {
  background: linear-gradient(to bottom, #858585, #000000);
  width: 49%;
  height: 14vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px; /* Add rounded borders */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.sectionModeWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  width: auto;
  color: white;
  font-family: "airbnb_extra_bold";
  left: 70%;
  font-size: 60px;
}

.demographicsSection {
  width: 100%;
  display: flex;
  background-color: white; /* Change background color to white */
  flex-direction: row;
  justify-content: space-between;
  padding: 2%;
  border-bottom: 1px solid #d1d1d1; /* Add a thin bottom border */
}

.mainDemoPie {
  background-color: white; /* Change background color to white */
  width: 49%;
  height: 73vh;
  display: flex;
  flex-direction: column;
}

.mainDemoPieTitle {
  width: 100%;
  height: 7vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "airbnb_extra_bold";
  font-size: 20px;
  background-color: white;
  color: #4b4b4b;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.otherDemoPieWrapper {
  width: 49%;
  height: 73vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 20px; /* Add rounded borders */
}

.wordCloud {
  width: 49%;
  height: 32vh;
  border-radius: 20px; /* Add rounded borders */
  background-color: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.menAndWomenPies {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-radius: 20px; /* Add rounded borders */
}

.LegendChart {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-radius: 20px; /* Add rounded borders */
}

.menPie {
  width: 49%;
  height: 33vh;
  border-radius: 20px; /* Add rounded borders */
  background-color: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.womenPie {
  width: 49%;
  height: 33vh;
  border-radius: 20px; /* Add rounded borders */
  background-color: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.blockSection {
  width: 100%;
  height: 80vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 2%;
  border-bottom: 1px solid #d1d1d1; /* Add a thin bottom border */
}

.blockInformation {
  width: 25%;
  height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 20px; /* Add rounded borders */
  background-color: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
  padding-bottom: 10px;
}

.blockSimpleChart {
  width: 73%;
  height: 63vh;
  border-radius: 20px; /* Add rounded borders */
  background-color: pink;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.tripPurposeChart {
  width: 95%;
  height: 63vh;
  border-radius: 20px; /* Add rounded borders */
  padding-bottom: 5%;
}

.blockInformationContent {
  padding: 0.8%;
  padding-right: 5%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  font-family: "airbnb_semi_bold";
  font-size: 20px;
  color: white;
}

@media (max-width: 1200px) {
  .sectionBasicInfoOne {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2%;
    padding-left: 10%;
    padding-right: 10%;
    border-bottom: 1px solid #d1d1d1;
  }
  .basicInfoLabelsOne {
    background-color: white;
    font-family: "airbnb_semi_bold";
    color: #3e3e3e;
    font-size: 12px;
    width: 20%;
    height: 10vh;
    padding: 2%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 20px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  }
}

@media (min-width: 1200px) and (max-width: 1800px) {
  .sectionBasicInfoOne {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2%;
    padding-left: 10%;
    padding-right: 10%;
    border-bottom: 1px solid #d1d1d1;
  }
  .basicInfoLabelsOne {
    background-color: white;
    font-family: "airbnb_semi_bold";
    color: #3e3e3e;
    font-size: 14px;
    width: 20%;
    height: 10vh;
    padding: 2%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 20px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  }
}