/* main section */

.mainSection {
  min-height: 100vh;
  padding: 60px 0 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

/* project headers */

.projectHeaders {
  width: 80%;
  display: flex;
  flex-direction: column;
}

.breadCrumb {
  color: #595959;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.breadCrumb a {
  font-weight: 500;
}

.breadCrumb i {
  font-size: 10px;
}

.projectHeaderNames {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.projectName {
  max-width: 1020px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1px;
}

.organizationDetails {
  font-weight: 500;
  color: #595959;
  display: flex;
  align-items: center;
  gap: 20px;
}

.org {
  color: #000;
}

.organization {
  color: #f35163;
}

/* header details */

.headerDetails {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
}

/* header left */

.headerLeft {
  width: 100%;
  flex: 1 1 600px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.headerPicture {
  position: relative;
  width: 100%;
  height: 400px;
  margin-bottom: 10px;
  border-radius: 10px;
  background-color: #ebebec;
  display: flex;
  justify-content: center;
  align-items: center;
}

.headerPicture img {
  height: 100px;
  width: 100px;
}

.headerPicture #map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.aboutProject {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.aboutHeader {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.7px;
}

.aboutContent {
  color: #222b3a;
  letter-spacing: 0.7px;
}

.projectFlags {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.flagHeaders {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #faf5f6;
  cursor: pointer;
}

.flagHeader span {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.7px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.flagHeader .badge {
  min-width: 20px;
  height: 20px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
}

.flagHeader .badge.Red {
  color: #f44336;
  background-color: #fdf2f2;
}

.flagHeader .badge.Yellow {
  color: #ffeb3b;
  background-color: #fdfdea;
}

.flagHeader .badge.Green {
  color: #4caf50;
  background-color: #f3faf7;
}

.flagHeader .badge.Orange {
  color: #f8794b;
  background-color: #fcf0e1;
}

.flagRight {
  height: 25px;
  width: 25px;
  border: 1px solid #ebebec;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flagRight i {
  transition: 0.4s all linear;
}

.flagRight.active i {
  transform: rotate(180deg);
  transition: 0.4s all linear;
}

.flags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.flag {
  position: relative;
  padding: 7px 14px;
  border-radius: 21px;
  background: #faf5f6;
  color: #595959;
  cursor: copy;
}

.flagDescription {
  position: absolute;
  bottom: 35px;
  left: 0;
  width: 100%;
  min-width: 250px;
  max-width: 400px;
  height: fit-content;
  padding: 10px 15px;
  border-radius: 7px;
  background: #fff;
  color: #333;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: none;
  white-space: normal;
  line-height: 1.4;
  z-index: 10;
}

/* Show on hover */
.flag:hover .flagDescription {
  display: block;
}

/* Tooltip arrow */
.flagDescription::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 20px;
  border-width: 8px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.05));
}

/* header right */

.projectsHighlights {
  max-width: 350px;
  height: fit-content;
  flex: 1 1 300px;
  padding: 30px 20px;
  border: 1px solid #ebebec;
  border-radius: 17px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.highlightsHeader {
  font-size: 17px;
  font-weight: 700;
}

.highlights {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.hightlight {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #222b3a;
}

.highlightIcon {
  width: 42px;
  height: 42px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.highlightHeader {
  font-size: 14px;
  font-weight: 600;
}

.highlightDes {
  font-size: 13px;
  color: #595959;
}

.highlightsBottom {
  width: 100%;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.highlightsButton a {
  width: 100%;
  height: 40px;
  border-radius: 7px;
  background: #f35163;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.highlightsButton a:hover {
  background-color: #df495a;
  transform: 0.4s all linear;
}

.highlightsExtra {
  font-size: 13px;
  color: #8f8e8e;
  text-align: center;
}

.highlightsExtra span {
  color: #000;
  font-weight: 600;
  padding: 0 2px;
}

/* divider */
.divider {
  width: 100%;
  height: 1px;
  background-color: #ebebeb;
}

/* project details  */

.projectDetails {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
}

/* details left */

.detailsLeft {
  position: sticky;
  top: 40px;
  height: fit-content;
  max-width: 300px;
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.detailsHeader {
  font-size: 20px;
  font-weight: 700;
}

.detailsTimeline {
  padding-left: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timeline {
  padding-bottom: 30px;
  background: #ffffff;
  position: relative;
  display: flex;
  gap: 20px;
  opacity: 0.7;
  cursor: not-allowed;
}

.timeline.active {
  background: white;
  opacity: 1;
  cursor: pointer;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  height: 70%;
  width: 2.2px;
  background: #bababa;
  z-index: 1;
}

.timeline.active::before {
  background: #6b7280;
}

.timeline:last-child::before {
  width: 0;
}

.timeline .timelineLeft {
  min-width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #bababa;
  color: #bababa;
  background: #fff;
  font-size: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.timeline.active .timelineLeft {
  border: 2px solid #000;
  background: #000;
  color: white;
  font-size: 7px;
}

.timeline .timelineLeft.active {
  background: #58d889;
  color: white;
  border: none;
  font-size: 14px;
}

.timelineDetails {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.timelineHeader {
  font-weight: 600;
  color: #bababa;
}

.timeline.active .timelineHeader {
  color: #000;
}

.timelineDes {
  font-size: 13px;
  color: #d9d9d9;
}

.timeline.active .timelineDes {
  color: #7b7b7b;
}

.detailsDivider {
  position: sticky;
  top: 40px;
  height: 900px;
  width: 1.5px;
  background: #ebebeb;
}

/* <!-- details right --> */

.detailsRight {
  padding-left: 80px;
  flex: 1 1 600px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* <!-- details containers --> */

.detailsContainer {
  padding-bottom: 30px;
  border-bottom: 1px solid #ebebeb;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.containerHeaders {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
  cursor: pointer;
}

.containerHeaders h6 {
  font-weight: 600;
  font-size: 16px;
}

.containerHeaders span {
  font-size: 13px;
  color: #7b7b7b;
}

.toogleIcon {
  height: 30px;
  width: 30px;
  border: 1px solid #ebebeb;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.toogleIcon.active {
  transform: rotate(180deg);
}

/* <!-- location details --> */

.locations {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.location {
  width: 100%;
  padding: 20px 30px;
  border-radius: 12px;
  background: #f8f7fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.locationLeft {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.locationName {
  font-weight: 600;
}

.locationRegion {
  font-size: 13px;
  color: #6b7280;
}

.locationButton span {
  height: 35px;
  width: 110px;
  border-radius: 17px;
  background: #6951f3;
  color: #fff;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.locationButton span:hover {
  background: #5e48da;
  transition: 0.4s all linear;
}

/* <!-- party details  --> */

.parties {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.party {
  padding: 20px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.partyTop {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.partyName {
  font-weight: 600;
}

.partyDistrict {
  font-size: 13px;
  color: #6b7280;
}

.partyButton {
  height: 35px;
  width: 110px;
  border-radius: 17px;
  margin-bottom: 10px;
  background: #000;
  color: #fff;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.partyButton:hover {
  background: #252525;
  transition: 0.4s all linear;
}

/* <!-- document details --> */

.documents,
.benefits,
.metrics {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.document,
.benefit,
.metric {
  width: 100%;
  padding: 20px 30px;
  border-radius: 12px;
  background: #f8f7fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.documentLeft,
.benefitLeft,
.metricLeft {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.documentName,
.benefitName,
.metricName {
  font-weight: 600;
}

.documentType,
.benefitDescription,
.metricDescription {
  font-size: 13px;
  color: #6b7280;
}

.documentButton a,
.benefitButton span,
.metricButton span {
  height: 35px;
  width: 110px;
  border-radius: 17px;
  background: #6951f3;
  color: #fff;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.documentButton a:hover,
.benefitButton span:hover,
.metricButton span:hover {
  background: #5e48da;
  transition: 0.4s all linear;
}

.placeholder {
  width: 100%;
  color: #bababa;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.placeholder i {
  font-size: 20px;
}

.placeholder span {
  font-size: 13px;
}

/* contracts details */

.contracts {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.contract {
  padding: 20px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contractTop {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contractName {
  font-weight: 600;
}

.contractType {
  font-size: 13px;
  color: #6b7280;
}

.contractButton {
  height: 35px;
  width: 110px;
  border-radius: 17px;
  margin-bottom: 10px;
  background: #000;
  color: #fff;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.contractButton:hover {
  background: #252525;
  transition: 0.4s all linear;
}

/* <!-- budgets details  --> */

.budgets,
.milestones,
.transactions {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.budget,
.milestone,
.transaction {
  /* min-width: 250px; */
  padding: 20px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.budgetTop,
.milestoneTop,
.transactionTop {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.budgetTotal,
.milestoneName,
.transactionName {
  font-weight: 600;
}

.budgetHeader,
.milestoneDate,
.transactionTotal {
  font-size: 13px;
  color: #6b7280;
}

.budgetButton,
.milestoneButton,
.transactionButton {
  height: 35px;
  width: 110px;
  border-radius: 17px;
  margin-bottom: 10px;
  background: #6951f3;
  color: #fff;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.transactionButton {
  background: #000;
}

.budgetButton:hover,
.milestoneButton:hover {
  background: #5e48da;
  transition: 0.4s all linear;
}

/* <!-- projects documents section --> */
.documents {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* completions */

.completions,
.environments,
.socials {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.environments,
.socials {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.completion,
.environment,
.social {
  width: 100%;
  padding: 20px 30px;
  border-radius: 12px;
  background: #f8f7fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.completionLeft,
.environmentLeft,
.socialLeft {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.completionName,
.environmentName,
.socialName {
  font-weight: 600;
}

.completionRegion,
.environmentRegion,
.socialRegion {
  font-size: 13px;
  color: #6b7280;
}

ul.environmentRegion {
  list-style-type: disc;
  padding-left: 10px;
}

ul.environmentRegion li {
  word-break: break-all;
}

.completionButton a,
.environmentButton a,
.socialButton span {
  height: 35px;
  width: 110px;
  border-radius: 17px;
  background: #6951f3;
  color: #fff;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.completionButton a:hover,
.environmentButton a:hover,
.socialButton span:hover {
  background: #5e48da;
  transition: 0.4s all linear;
}

/* <!-- projects comments section --> */

.commentSection {
  max-width: 1100px;
  width: 80%;
  padding: 20px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.commentsTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.commentsHeaders {
  width: fit-content;
  line-height: 1.5;
}

.commentsHeaders h6 {
  font-weight: 700;
  font-size: 15px;
}

.commentsHeaders p {
  font-size: 13px;
  color: #595959;
}

.commentsHeaders span {
  color: #000;
  font-weight: 600;
  padding: 0 2px;
}

.commentsFeedback button {
  width: 130px;
  height: 35px;
  background-color: #6951f3;
  color: white;
  border-radius: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.commentsFeedback button:hover {
  background: #5e48da;
  transition: 0.4s all linear;
}

.comments .placeholder {
  align-items: start;
  text-align: left;
  font-size: 14px;
}

.addFeedbackButton {
  color: #5e48da;
  margin-top: 10px;
  font-size: 14px;
}

/* comments */

.comments {
  max-width: 650px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.comment {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.commentTop {
  display: flex;
  align-items: center;
  gap: 15px;
}

.commentInitial {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  font-weight: 700;
  background: #049a66;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.commentName {
  font-weight: 600;
}

.commentDates {
  font-size: 13px;
  color: #6b7280;
}

.commentDes {
  color: #222b3a;
  letter-spacing: 0.7px;
  line-height: normal;
}

.loadMore {
  padding: 10px 0;
}

.loadMore a {
  width: 120px;
  height: 35px;
  border: 1px solid #6951f3;
  color: #6951f3;
  border-radius: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loadMore a:hover {
  color: #fff;
  background: #5e48da;
  transition: 0.4s all linear;
}

/* responsiveness */
@media (max-width: 1400px) {
  .projectName {
    font-size: 32px;
  }

  .detailsRight {
    padding-left: 40px;
  }
}

@media (max-width: 1300px) {
  .headerDetails {
    gap: 40px;
  }

  .projectDetails {
    gap: 40px;
  }

  .detailsLeft {
    max-width: 270px;
  }

  .detailsRight {
    padding-left: 0;
  }
}

@media (max-width: 1200px) {
  .projectName {
    font-size: 30px;
  }

  .projectsHighlights {
    max-width: 100%;
  }

  .highlights {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
  }

  .highlight {
    min-width: 280px;
  }

  .detailsLeft {
    position: relative;
    top: 0;
    max-width: 350px;
  }

  .detailsDivider {
    position: relative;
    top: 0;
    width: 100%;
    height: 1px;
  }
}

@media (max-width: 900px) {
  .mainSection {
    padding: 40px 0 80px;
    gap: 40px;
  }

  .projectHeaders {
    width: 85%;
  }

  .projectName {
    font-size: 28px;
  }

  .projectDetails {
    width: 85%;
  }
}

@media (max-width: 620px) {
  .location {
    flex-wrap: wrap;
  }

  .party,
  .budget {
    width: 100%;
    min-width: 200px;
    flex: 1;
  }
}

@media (max-width: 540px) {
  .projectName {
    font-size: 24px;
  }

  .organizationDetails {
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    font-weight: 400;
  }
  .org {
    display: none;
  }

  .commentsTop {
    flex-wrap: wrap;
  }

  .commentsFeedback a {
    min-width: 130px;
    width: 100%;
  }
}

/* extra */

.modal,
.commentModal,
.successModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modalContent {
  background: white;
  border-radius: 8px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
}

.modalHeader {
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebebec;
}

.modalHeader h6 {
  width: 80%;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.closeModal {
  height: 25px;
  width: 25px;
  border-radius: 5px;
  background: #ebebec;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.modalBody {
  overflow-y: auto;
  padding: 40px;
}

.modalDetails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 30px;
}

.modalDetails1 {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modalDetail {
  display: flex;
  flex-direction: column;
  gap: 5px;
  letter-spacing: 0.4px;
}

.modalDetailName {
  font-size: 15px;
  color: #000;
  font-weight: 600;
}

.modalDetailValue {
  font-size: 13px;
  color: #252525;
}

.modalSeparator {
  height: 1px;
  width: 100%;
  background: #ebebec;
  margin: 20px 0;
}

.modalSubtitle {
  color: #222b3a;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}

.modalFooter {
  padding: 20px 40px;
  border-top: 1px solid #ebebec;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
}

.modalFooter button {
  height: 35px;
  width: 110px;
  border: 2px solid #ebebeb;
  border-radius: 10px;
  color: #585858;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* addittions for comments modal */

.commentModal {
  align-items: flex-start;
  padding-top: 100px;
}

.commentModalHeader {
  padding: 20px 30px;
}

.commentForm {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 20px 0;
}

.commentInputs {
  display: flex;
  flex-wrap: wrap;
  gap: 25px 20px;
  padding: 0 30px;
}

.commentInputs .inputGroup {
  flex: 1 1 250px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.commentInputs .inputGroup {
  font-size: 14px;
  font-weight: 500;
  color: #222b3a;
}

.commentInputs .inputGroup input,
.commentInputs .inputGroup select,
.commentInputs .inputGroup textarea {
  width: 100%;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 5px;
  border: none;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  color: #222b3a;
  resize: none;
}

.commentInputs .inputGroup input:focus,
.commentInputs .inputGroup select:focus,
.commentInputs .inputGroup textarea:focus {
  outline: none;
}

.commentInputs .inputGroup.error {
  color: #f35163;
}

.emailError {
  font-size: 12px;
  color: #f35163;
}

.commentInputs .inputGroup.error input,
.commentInputs .inputGroup.error select,
.commentInputs .inputGroup.error textarea {
  border: 1px solid #f35163;
}

.commentModalFooter {
  padding: 20px 20px 0;
}

.submitError {
  color: #f35163;
  font-size: 13px;
  padding: 0 30px;
}

.modalFooter .submitButton {
  width: fit-content;
  padding: 0 15px;
  background: #6951f3;
  color: white;
  border: none;
}

/* success message */

.successContent {
  position: relative;
  max-width: 400px;
  text-align: center;
  padding: 50px 20px 40px;
  border-radius: 15px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.closeSuccessModal {
  position: absolute;
  top: 15px;
  right: 15px;
  height: 24px;
  width: 24px;
  border-radius: 5px;
  background: #ebebec;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #222b3a;
  cursor: pointer;
}

.successHeader {
  display: flex;
  justify-content: center;
}

.successHeader i {
  font-size: 36px;
  color: #58d889;
}

.successBody {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.successBody h6 {
  font-size: 18px;
  font-weight: 600;
}

.successBody p {
  color: #595959;
}

.successFooter {
  display: flex;
  justify-content: center;
}

.successFooter .okButton {
  width: fit-content;
  height: 40px;
  margin-top: 5px;
  padding: 0 20px;
  background: #049a66;
  color: white;
  border: none;
  border-radius: 23px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.successProgress {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 5px;
  border-radius: 5px;
  background: #049a66;
}

/* animations */

.bounceIn {
  animation: bounceIn 0.5s ease-in-out;
}

.bounceOut {
  animation: bounceOut 0.5s ease-in-out;
}

.progressBar {
  animation: progressBar 4s linear forwards;
}

@keyframes bounceIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes bounceOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0;
  }
}

@keyframes progressBar {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}

.hidden {
  display: none !important;
}