@import url("../../../main.css");
@import url("../navigation/navigation.css");
@import url("../footer/footer.css");

#page-content {
  width: 96%;
  background-color: var(--clean-and-serene-white);
  /* padding: 5%; */
  /* display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; */
}

#main-content {
  margin-top: 50px;
  display: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 4%;
}

#service-information-container {
  border-radius: 10px;
  background-color: var(--surrender-white);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 4%;
}

#service-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  margin-bottom: 30px;
  color: var(--stepwork-pencil-lead);
  font-size: var(--l);
  font-weight: 600;
}

#content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 20px;
  gap: 20px;
  background-color: var(--duct-tape-grey-1o);
}

#area-map {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
  height: 100%;
  background-color: var(--surrender-white);
  border-radius: 10px;
}

#area-map path {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

#area-details {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: 800px;
  position: relative;
  gap: 20px;
  padding: 20px;
  background-color: #e8fdee;
  border-radius: 10px;
}

#close-area {
  display: none;
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 1;
  width: 10px;
}

#service-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  flex: 3;
  border-radius: 10px;
  height: 70%;
  width: 100%;
}

#name-area {
  display: flex;
  justify-content: center;
  align-items: center;
}

#name {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--stepwork-pencil-lead);
  font-size: var(--m);
  font-weight: 600;
}

#website-and-meetings {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 50px;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.icon svg {
  /* width: 100%; */
  height: 20px;
}

.icon svg path {
  fill: var(--stepwork-pencil-lead);
}

.text {
  color: var(--stepwork-pencil-lead);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 3;
}

.accent {
  color: var(--ninety-day-red);
}

#website {
  background-color: var(--surrender-white-7o);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  gap: 10px;
  width: 40%;
  height: 100%;
}

#area-meetings {
  background-color: var(--surrender-white-7o);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  gap: 10px;
  width: 40%;
  height: 100%;
}

#description {
  background-color: var(--surrender-white-7o);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  width: calc(80% + 50px);
}

.details {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 3;
}

#chair-and-vice-chair {
  /* background-color: var(--surrender-white-7o); */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 50px;
  /* border-radius: 5px;
  padding: 1%; */
}

#chair {
  background-color: var(--surrender-white-7o);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  gap: 10px;
  width: 40%;
}

#vice-chair {
  background-color: var(--surrender-white-7o);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  gap: 10px;
  width: 40%;
}

#treasurer-and-secretary {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 50px;
}

#treasurer {
  background-color: var(--surrender-white-7o);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  gap: 10px;
  width: 40%;
}

#secretary {
  background-color: var(--surrender-white-7o);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  gap: 10px;
  width: 40%;
}

#hi-and-literature-chair {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 50px;
}

#hi-chair {
  background-color: var(--surrender-white-7o);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  gap: 10px;
  width: 40%;
}

#literature-chair {
  background-color: var(--surrender-white-7o);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  gap: 10px;
  width: 40%;
}

#meeting-lists-and-policy-chair {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 50px;
}

#meeting-lists-chair {
  background-color: var(--surrender-white-7o);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  gap: 10px;
  width: 40%;
}

#policy-chair {
  background-color: var(--surrender-white-7o);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  gap: 10px;
  width: 40%;
}

#website-and-activities-chair {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 50px;
}

#website-chair {
  background-color: var(--surrender-white-7o);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  gap: 10px;
  width: 40%;
}

#activities-chair {
  background-color: var(--surrender-white-7o);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  gap: 10px;
  width: 40%;
}

#archived-reports {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
  width: 100%;
  padding: 10px;
  gap: 5%;
  flex: 1;
  height: 30%;
}

#archive-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  color: var(--stepwork-pencil-lead);
  font-size: var(--m);
  font-weight: 600;
}

#reports {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
  gap: 5%;
  padding: 5%;
  width: 100%;
  background-color: var(--surrender-white-7o);
  gap: 10px;
  padding: 10px;
  border-top: solid 1px var(--surrender-white-7o);
  border-bottom: solid 1px var(--surrender-white-7o);
  border-radius: 10px;
}

.report {
  display: flex;
  justify-content: center;
  background-color: #e8fdee;
  align-items: center;
  border-radius: 10px;
  width: 100%;
  gap: 10px;
}

.report-icon {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.report-details {
  flex: 10;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.report-download {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#service-committee-events {
  background-color: var(--surrender-white);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 4%;
  margin-right: 4%;
  margin-bottom: 150px;
  gap: 2%;
  padding: 2%;
  height: 500px;
}

#calendar-container {
  background-color: var(--duct-tape-grey-3o);
  border-radius: 10px;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 1%;
}

#calendar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 5px;
}

#calendar-legend {
  display: flex;
  background-color: var(--surrender-white);
  justify-content: center;
  align-items: center;
  color: var(--stepwork-pencil-lead);
  font-size: var(--m);
  font-weight: 600;
  border-radius: 5px;
  height: 100%;
  width: 100%;
  flex: 1;
}

#previous-month {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

#legend-text {
  flex: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

#next-month {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

#calendar-body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  flex: 7;
}

#days-of-the-week {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 5px;
  flex: 1;
}

#days-of-the-week div {
  color: var(--surrender-white);
  border-radius: 5px;
  background-color: var(--stepwork-pencil-lead);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.days {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex: 1;
  gap: 5px;
}

.cell {
  border-radius: 5px;
  background-color: var(--surrender-white-5o);
  color: var(--two-or-more-years-5o);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex: 1;
}

.digit {
  /* background-color: #e8fdee; */
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.active {
  background-color: var(--surrender-white);
  color: var(--two-or-more-years);
}

#agenda-container {
  background-color: var(--duct-tape-grey-3o);
  border-radius: 10px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 1%;
}

#agenda {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 5px;
}

#agenda-title {
  background-color: var(--surrender-white);
  display: flex;
  min-height: 15%;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  color: var(--stepwork-pencil-lead);
  font-size: var(--m);
  font-weight: 600;
  width: 100%;
}

#events {
  overflow-y: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  width: 100%;
}

.event {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  min-height: 70px;
  color: var(--stepwork-pencil-lead);
}

.event path {
  fill: var(--stepwork-pencil-lead);
}

.event-name {
  font-size: var(--xs);
  font-weight: 600;
  flex: 1.5;
}

.event-date {
  flex: 1;
  display: flex;
  gap: 5px;
}

.event-time {
  flex: 1;
  display: flex;
  gap: 5px;
}

@media (max-width: 1200px) {
  #content {
    position: relative;
  }

  #area-details {
    position: absolute;
    padding: 50px;
  }

  #close-area {
    display: block;
  }

  #archived-reports {
    margin-top: 20px;
  }
}

@media (max-width: 800px) {
  #service-committee-events {
    flex-direction: column;
    height: max-content;
    gap: 40px;
  }

  #calendar-container {
    height: 700px;
    flex: none;
  }

  /* #column-one {
    flex-direction: row;
  }

  #column-two {
    width: 100%;
  } */

  #agenda-title {
    height: 80px;
  }

  #events {
    height: 400px;
  }
}

@media (max-width: 500px) {
  #service-information-container {
    height: 1300px;
  }

  #content {
    height: 100%;
  }

  #area-details {
    height: 100%;
    padding: 0;
  }

  #calendar-container {
    height: 400px;
  }

  .event {
    font-size: var(--xxs);
    gap: 15px;
  }

  .event-text {
    flex: none;
  }

  .event-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
  }

  .event-name {
    font-size: var(--xxs);
  }
}