*,
*::before,
* ::after {
  box-sizing: border-box;
}

body {
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.6;
  color: #b4b4b4f1;
  background-color: #fefefe;
  background-color: #eeeeee;
  background: url("./img/newgraphs/Logo\ Watermark\ background-17.png")
    no-repeat center center / cover;
  overflow: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

h1,
h2,
a {
  margin: 0;
}

h1 {
  font-size: 2.25rem;
  font-weight: 300;
  color: #ffffff;
}

h2 {
  font-size: 1.3125rem;
}

.form-inputs::placeholder {
  color: #adadadd3;
  font-size: 1rem;
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}

.form-inputs-100 {
  width: 100% !important;
}

.form-inputs {
  width: 85%;

  padding: 1.15em 2.15em;
  font-size: 0.725rem;
  letter-spacing: 1px;
  border: 1px solid #000000;
  margin-bottom: 2rem;
  color: #000000;
  background-color: #ffffff;
  border-radius: 3px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.passwordFormInputs {
  margin-bottom: 0.75em;
}

.passwordContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 0.85em;
  align-items: center;
}

.passwordInfoContainer {
  display: flex;
  justify-content: space-between;
}

.passwordtoggle {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  padding: 0.55em;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  background-color: #ffffff;
  color: #adadad;
  width: 100%;
}

.passwordStrengthList {
  font-size: 0.85rem;
  background-color: #d40f0f;
  width: 100%;
  list-style: circle;
}

.pwItem {
  font-size: 0.8rem;
}

strong {
  color: #ffffff;
  font-weight: 600;
}

.forum-logo {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.forgot-password {
  border: none;
  padding: 1.15em;
  background-color: transparent;
  color: #304e48;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.margin-bottom-0 {
  margin-bottom: 0 !important;
}

.margin-bottom-1em {
  margin-bottom: 1em !important;
}

.action-button {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 1px;
  padding: 1.15em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  width: 100%;
  margin-bottom: 0.95em;
}

.action-button--normal {
  background-color: #175e20;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
}

.action-button--alternative {
  background-color: #ffffff;
  color: #304e48;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19);
}

.landingPageGrid {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template:
    minmax(1em, 1fr) auto 2fr auto minmax(1em, 1fr) / minmax(30px, 0fr)
    minmax(280px, auto) minmax(30px, 0fr);
  grid-template-areas:
    ".. .. .."
    ".. top .."
    ".. center .."
    ".. bottom .."
    ".. .. ..";
}

.alerts {
  color: #58585a;
}

.pageGrid {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template:
    minmax(1em, 1fr) auto 2fr auto minmax(0em, 0fr) / minmax(0px, 0fr)
    minmax(280px, auto) minmax(0px, 0fr);
  grid-template-areas:
    ".. .. .."
    ".. top .."
    ".. center .."
    ".. bottom .."
    ".. .. ..";
}

.landingPage {
  min-height: 100dvh;
  background: url("./img/newgraphs/Red\ Background.png") no-repeat center center /
    cover;
}

.top {
  grid-area: top;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.center {
  grid-area: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.input-helper {
  width: 85%;
}

.button-helper {
  width: 85%;
}

.login-bottom-wrapper {
  min-width: -webkit-fill-available;
  background: url("./img/newgraphs/Dots.png") no-repeat bottom bottom / cover;

  background-color: #95ba3a;
  /* padding: 26px 30px 30px; */
  padding: 0 1em;
  padding-top: 1em;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 2px 6px rgb(0, 0, 0),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19);
}
.homePage-bottom-wrapper {
  min-width: -webkit-fill-available;

  background-color: #ffffff;
  /* padding: 26px 30px 30px; */
  padding: 0 1em;
  padding-top: 1em;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 2px 6px rgb(0, 0, 0),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19);
}

.bottom {
  grid-area: bottom;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  max-height: 200px;
  max-width: 200px;
  margin: 0;
  padding: 0.5em;
  display: block;
}
#splashLogo {
  height: 300px;
  width: 300px;
  margin: 0;
  padding: 0.5em;
  display: block;
}

.registerLogo {
  width: auto;
  height: 150px;
  object-fit: cover;
  align-self: center;
}

.map {
  grid-area: center;
  max-height: 300px;
  max-width: 300px;
  object-fit: cover;
  margin: 0;
  padding: 0;
}
#closeRegisterPageButton {
  margin-bottom: 0.5em;
}

.login-message {
  color: #666666;
  text-align: center;
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
  /* font-weight: 400; */
  font-style: normal;
}

.or-message {
  color: #304e48;
}

.or-message-white {
  color: #666666;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.login-page {
  background: url("./img/newgraphs/Logo\ Watermark\ background-17.png")
    no-repeat center center / cover;
  background-color: #eeeeee;
  overflow: auto;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 100%; /* dit move hom basies regs van die skerm af*/
  transform: translateX(0);
  transition: 0.5s;
  min-height: 100dvh;
}

.login-center-wrapper {
  background-color: #ffffff;
  border-radius: 15px;

  margin-bottom: 1em;
  margin-top: 0.5em;
  width: 90%;
}
.forgot-center-wrapper {
  background-color: #ffffff;
  border-radius: 15px;
  padding: 1em 1.5em;

  width: 100%;
}

.infoModals {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #22212600;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 100%; /* dit move hom basies regs van die skerm af*/
  transform: translateX(0);
  transition: 0.5s;
  min-height: 100dvh;
}

.infoModalsOpen {
  transform: translateX(-100%);
}

.modalInfoContainer {
  border: 2px solid #86868600; /* This sets the initial border size */
  border-radius: 8px;
  padding: 2em 1em;
  margin: 1em;
  background-color: #000000;
  width: 95%;
  max-width: 400px;
}

.modalInfoAction {
  display: flex;
  flex-direction: column;
  align-content: center;
  text-align: center;
}

.loginPageOpen {
  transform: translateX(-100%);
}

/* app/home //////////////////////////////////////////////////////////////////////////*/

.appMainGrid {
  min-height: 100dvh;
  height: 100dvh;
  width: 100%;
  display: grid;
  overflow-y: auto;
  grid-template: auto 1fr auto / auto auto auto auto;
  grid-template-areas:
    "header header header header"
    "panicBody panicBody panicBody panicBody"
    "footer footer footer footer";
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.appMainGrid::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

.header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 1em 1em 0;
}

.footer {
  grid-area: footer;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: center;
}

.requestNewJobButtonClass {
  margin-bottom: 0.5em;
  width: 90%;
  max-width: 400px;
}

.menuButton {
  grid-area: menuButton;
  background-color: #fe000000;
  color: #ffffff;
  cursor: pointer;
  background-color: #00000038;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
 0 6px 20px rgba(0, 0, 0, 0.19); */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  display: inline-block;
  font-size: 1.25rem;
  /* letter-spacing: 1px; */
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;

  /* padding: 0.75em 1.5em; */
  padding: 0.25em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
}

#menuButton {
  background-color: #006237;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.15rem;
  margin-left: 80%;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.headerIcons {
  font-size: 1.15rem;
  color: #fa5f22;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.notificationIcon {
  align-self: center;
  color: #222126;
  color: #dfdfdf;
  margin: 0 0.25em;
  text-shadow: -1px -1px 0 #fa5f2200, 1px -1px 0 #fa5f2200, -1px 1px 0 #fa5f2200,
    1px 1px 0 #fa5f2200, 2px 2px 5px #fa5f2200;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
}

.profile-inputs-helper {
  background-color: white !important;
  color: #304e48 !important;
  border: 2px solid #304e48 !important;
}

.profile-inputs-wrapper {
  display: grid;
  gap: 1em;
  justify-items: center;
}
#updatePersonalInformationButton {
  margin-top: 1em;
}
.profileIcon {
  align-self: center;
  color: #222126;
  color: #dfdfdf;
  text-shadow: -1px -1px 0 #fa5f2200, 1px -1px 0 #fa5f2200, -1px 1px 0 #fa5f2200,
    1px 1px 0 #fa5f2200, 2px 2px 5px #fa5f2200;
}

.headerLogo {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  width: auto;
  height: 115px;
  object-fit: cover;
  align-self: center;
}

.appActionButton {
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  letter-spacing: 1px;
  padding: 1.15em;
  border-radius: 5px;

  border: 0;
  cursor: pointer;
  width: 85.5%;
  background-color: #ffffff;
  color: #304e48;
}

.appActionButtonNormal {
  background-color: #175e20;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
}

.panicBody {
  grid-area: panicBody;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.panicBody::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

.myLocationWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  max-width: 400px;
  min-width: -webkit-fill-available;
}

.myApproximateLocationHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6em;
  width: calc(100% + 2.4em);
  margin-top: -1.1em;
  margin-left: -1.2em;
  margin-right: -1.2em;
}

.myApproximateLocationTitle {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  color: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(255, 64, 64, 0.98) 0%,
    rgba(198, 22, 22, 0.95) 100%
  );
  border-radius: 10px 10px 6px 6px;
  padding: 0.75em 1.1em 0.7em;
  text-align: center;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 12px 22px rgba(214, 40, 40, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.myApproximateLocationRow {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
}

.myApproximateLocationIcon {
  font-size: 1.4rem;
  color: #d40f0f;
  margin-top: 0.1em;
}

.myApproximateLocationValue {
  margin: 0;
  font-size: 0.95rem;
  color: #1e1e1e;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
}
.myApproximateLocationContainerv2 {
  text-align: center;
  margin: 1em 0;
  width: 90%;
  max-width: 400px;
  padding: 0 0.5em;
  background-color: #ffffff;

  border-radius: 10px;
  box-shadow: 0 2px 6px rgb(0, 0, 0),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
}

.myApproximateLocationContainer {
  text-align: left;
  margin: 1em 0;
  width: 90%;
  max-width: 400px;
  padding: 0.95em 1em 1.05em;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 255, 255, 0.72)
  );
  border-radius: 16px;
  border: 1px solid rgba(44, 111, 214, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.08);
}

.myApproximateLocationContainer.panic-active {
  border-color: rgba(214, 40, 40, 0.45);
  box-shadow: 0 16px 28px rgba(214, 40, 40, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

.myApproximateLocationContainer.panic-active-medical {
  border-color: rgba(47, 123, 255, 0.45);
  box-shadow: 0 16px 28px rgba(47, 123, 255, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

.myLocation {
  width: 90%;
  height: 150px;
  object-fit: cover;
  border: solid #58585a59 2px;
  border-radius: 10px;
  margin-bottom: 1em;
}

#map {
  height: 200px;
  width: 200px;
}

.alertButtonsWrapperyu {
  position: relative; /* Set parent as a positioned element */
  margin-top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 0em;
  margin: 0;
  background-color: #0000002c;
  /* background-image: url("./img/newgraphs/Dots.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%; */
  border-radius: 30px 30px 0 0;
  box-shadow: 0 2px 6px rgb(0, 0, 0),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
}
.dots {
  background-image: url("./img/newgraphs/Dots_resized.png"); /* Update this path */
  background-size: cover; /* or try: contain, or 100% 100% */
  background-repeat: no-repeat;
  background-position: center top;
  background-color: rgba(0, 0, 0, 0.05);
  background-blend-mode: soft-light;
  border-radius: 30px 30px 0 0;
  width: 100%;
  padding: 0em;
  margin: 0;
  height: 100%;
}

.alertButtonsWrapper {
  position: relative;
  margin-top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 0em;
  margin: 0;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent),
    #96ba3a;
  /* background-color: #175e20; */
  /* background-image: url("./img/newgraphs/Dots.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%; */

  border-radius: 30px 30px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);

  /* ✨ Glassmorphism magic */
  backdrop-filter: blur(2px); /* Applies the blur */
  -webkit-backdrop-filter: blur(2px); /* For Safari support */

  box-shadow: 0 2px 6px rgb(0, 0, 0), 0 6px 20px rgba(0, 0, 0, 0.19);
}

#medicalButton {
  background-color: #004bcc00;
}
.progress-container {
  width: 88%;
  max-width: 360px;
  height: 8px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  outline: none;
  overflow: hidden;
  margin: 0.25em auto 0.75em;
}

#progressBar {
  width: 100%;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ff3b30, #d40f0f 55%, #ff7a59);
  border-radius: inherit;
  box-shadow: 0 0 12px rgba(212, 15, 15, 0.45);
  transition: width 0.1s linear;
}

#panicStatustext {
  color: #ffffff;
  font-size: 0.95rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45em 1em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#panicStatustext.panic-active {
  background: linear-gradient(180deg, #ff4a4a 0%, #c81616 100%);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 18px rgba(200, 22, 22, 0.35);
}

#panicStatustext.panic-active-medical {
  background: linear-gradient(180deg, #3f8cff 0%, #1f66da 100%);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 18px rgba(31, 102, 218, 0.35);
}

.panicButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.75rem;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  border: 0;
  cursor: pointer;
  height: 3.75em;
  width: 3.75em;
  border-radius: 100%;
  background-color: transparent;
  margin: 0;
  margin-bottom: 0.5em;
  box-shadow: none;
}

#dangerButton {
  background-color: #ff000000;
}

.greenAmbulanceIcon {
  width: 100%;
  height: auto;
  background-color: #004bcc00;
  border-radius: 100%;
  width: 125px;
}

.redAlarmIcon {
  width: 100%;
  height: auto;
  background-color: #ffffff00;
  border-radius: 100%;
  width: 125px;
}

.callButton {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
  padding: 0.5em 0.7em;
  border: 0;
  cursor: pointer;
  color: #ffffff;
  background: linear-gradient(135deg, #0b5a35, #0a3f2a);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  min-width: fit-content;
  text-decoration: none;
  outline: none;
  border-radius: 12px; /* Adjust as needed */
  width: 90%;
  max-width: 400px;
  text-align: center;
}

.filterTabsContainer {
  grid-area: filterTabs;
  overflow: hidden; /* Hide overflow without scrollbars */
  width: 100%; /* Ensure it fits the width of the app */
}

.filterTabs {
  display: flex;
  overflow-x: auto; /* Allow horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
  scroll-behavior: smooth; /* Smooth scrolling */
  padding-bottom: 0.5em;
  padding-top: 0.7em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  border-bottom: 2px solid #58585a91;
}

.filterTabs::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
}

.filterButtons {
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0.5em 1.5em;
  border-radius: 35px;
  border: 0;
  cursor: pointer;
  color: #ffffff;

  min-width: fit-content;
}

.filterButtonsNOMarginRight {
  margin-right: 0;
}

.notActiveFilterState {
  background-color: #bed3cf;
  color: #304e48;
}

.activeFilterState {
  background-color: #fe0100;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
}

/* request job*/

.jobsPages {
  background-color: #1c1d27;
  position: fixed;
  width: 100%;
  top: 92;
  right: 0;
  bottom: 70;
  left: 100%; /* dit move hom basies regs van die skerm af*/
  transform: translateX(0);
  transition: 0.1s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
}

.jobsPages::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
}

.jobsPagesOpen {
  transform: translateX(-100%);
}

.requestedJobsPageOpen {
  transform: translateX(-100%);
}

.requestedJobsFilterActiveState {
  background-color: #fa5f22;
}

/* menuPage */

.menuPage {
  /* background: url("./img/webp/reduced_size_new_image.webp") no-repeat center
    center / cover; */
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  right: 100%; /* dit move hom basies regs van die skerm af*/
  transform: translateX(0);
  transition: 0.2s;
  min-height: 100dvh;
  z-index: 11;
}

.menuPageOpen {
  transform: translateX(100%);
}

.forgotPasswordPage {
  background: url("./img/newgraphs/Logo\ Watermark\ background-17.png")
    no-repeat center center / cover;
  background-color: #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  gap: 0.95em;
}

/* PROFILE PAGE------------------------------------------- */

.appProfilePageGrid {
  background-color: #95ba3a;
  background-image: url("./img/newgraphs/Dots_resized.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;

  min-height: 100dvh;
  display: grid;
  grid-template: auto 1fr 2fr / auto;
  grid-template-areas:
    "alternativeHeader"
    "profileHeroSection"
    "profileTypeSections";
  justify-items: center;
}

.profileTypeActiveFilterState {
  background-color: #fa5f2200;
}

.alternativeHeader {
  grid-area: alternativeHeader;
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  background-color: #0c3111;
  border-radius: 0 0 15px 15px;
  max-height: 80px;
}
#closeManageCategoriesPageButton {
  align-self: center;
  margin-left: 1em;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}

#closeTier2PageButton {
  align-self: center;
  margin-left: 1em;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}
#closeTier3PageButton {
  align-self: center;
  margin-left: 1em;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}

#closeRepInfoModal {
  align-self: center;
  margin-left: 1em;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}

.profileHeaderWrapper {
  background-color: #0c3111;
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  border-radius: 0 0 15px 15px;

  align-content: center;
}

.notificationsHeaderWrapper {
  background-color: #0c3111;
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  border-radius: 0 0 15px 15px;
  max-height: 80px;
  align-content: center;
}

.profileHeaderLogo {
  color: #fff;
  padding: 1em 0;
  margin: 0;
  font-size: 1rem;
  letter-spacing: 1;
  font-style: normal;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  justify-self: left;
}
#signOutButton {
  margin-top: 3em;
  background-color: #00000000;
  color: #000000;
}

.closePageButtons {
  margin-right: 1.25em;
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  background-color: #58585a59;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  min-width: fit-content;
  align-self: center;
}
.closePageButtonsV2 {
  margin-right: 1.25em;
  display: inline-block;
  font-size: 0.825rem;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  background-color: #58585a00;
  color: #58585aea;

  min-width: fit-content;
  align-self: center;
}

.sectionCards {
  margin-top: 1em;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;

  border-radius: 20px 20px 20px 20px;
  padding: 1em 0;
  width: 95%;
  min-height: 70%;
  justify-self: center;
  margin-bottom: 0.5em;
}

.sectionCardsV2 {
  background-color: #1c1d2781;
  border: #58585a21 solid 1px;
}

.profileHeroSection {
  width: 50%;
  min-width: -webkit-fill-available;
  /* background: linear-gradient(to left, #ff1f1f, #000000); */
  background-color: #ffffff;
  grid-area: profileHeroSection;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 400px;
  margin-top: 0.5em;
  margin-left: 1.5em;
  margin-right: 1.5em;
  border-radius: 20px 20px 20px 20px;
  /* padding: 1em; */
}

.profileImage {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #616161;
  font-size: 3.85rem;
  color: #fefefe;
  padding: 1em;
  border-radius: 100%;
  width: 60px;
  height: 60px;
  margin-top: 0.5em;
  overflow: hidden;
}

.profileImageElement {
  width: 200px;
  align-self: center;
  justify-self: center;
}

.my-profile-indicator {
  font-size: 1.5rem !important;
  padding: 0 0 15px !important;
}

#linkAreaTitle {
  font-size: 1.25rem !important;
  color: #ffffff;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}

#linkAreaTitleT2 {
  font-size: 1.25rem !important;
  color: #ffffff;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}
#linkAreaTitleT3 {
  font-size: 1.25rem !important;
  color: #ffffff;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}
#repModalTitle {
  font-size: 1.25rem !important;
  color: #ffffff;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}
.profileMainTitles {
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: 300;
  color: #000000;
}

.profileTypeContainer {
  margin-top: 0;
  padding-top: 0;
  display: flex;
  justify-content: space-around;
  align-content: center;
  gap: 0.5em;
  width: 100%;
}

#homePageLogo {
  height: 170px;
  width: 170px;
}

.profileFilterButtons {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0.8em 1em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  width: 20%;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  min-width: fit-content;
}

.profileTypeSections {
  grid-area: profileTypeSections;
  width: 100%;
  max-width: 400px;
  min-width: -webkit-fill-available;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.profilePagesOpen {
  transform: translateX(100%);
}

.profileSectionOpen {
  transform: translateX(100%);
}

.personalProfileFilterActiveState {
  background-color: #fa5f22;
}

#personalProfileFilter {
  margin-top: 0.5em;
}

.sectionFilterContainer {
  text-align: center;
  display: flex;
  padding-top: 0.85em;
  width: 100%;
  height: fit-content;
  align-items: flex-start;
  justify-content: space-evenly;
}

.userInfoFilterActiveState {
  background-color: #fa5f22;
}
.sectionFilterIcons {
  margin-right: 0.5em;
}

.profileContainerStyles {
  text-align: center;
  width: 100%;
}

.containerTitles {
  text-align: left;
}

.hideContainer {
  display: none;
}

.visibleState {
  display: block;
}

.userAngelsSearch {
  padding: 0.75em 0.95em;
  border-radius: 100px;
  border: 1px solid #58585a;
  outline: none;
  margin-top: 1.25em;
  font-size: 0.725rem;
  letter-spacing: 1px;
  border: 1.5px solid #ff723b0a;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3),
    /* Inner shadow for depth */ 2px 2px 5px rgba(0, 0, 0, 0.2); /* Outer shadow for 3D effect */
  border-radius: 8px;
  border-bottom: #04e7f5 solid 2px;
  margin-bottom: 0.95rem;
  width: 95%;
  color: #58585a;
  background-color: #1c1d2700;
}

.myAngelsWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.singleAngelContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.15em 0.75em;
  border-radius: 100px;
  outline: none;
  letter-spacing: 1px;
  border: #464646 solid 1.5px;

  border-radius: 15px; /* Adjust as needed */
  margin-bottom: 0.95rem;
  width: 95%;
  color: #313131;
  background-color: #02020200;
}

.myAngelsLabels {
  color: #000000;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.725rem;
}

.viewAngelsButton {
  display: block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  background-color: #ffffff00;
  color: #000000;

  min-width: fit-content;
}

.addAngelsModal {
  text-align: center;
  padding: 2em 2em;
  margin-top: 1em;
  background-color: #ffffff;
  border: none;
  width: 95%;
  max-width: 400px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1007;
  border: #58585a21 solid 1px;
  border-radius: 20px;
  padding: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  color: #000000f1;

  box-shadow: 0 2px 6px #58585a59,
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  display: none;
}

.modalsBackdrop {
  background: rgba(
    28,
    29,
    39,
    0.418
  ); /* Converted to use the RGBA equivalent */
  backdrop-filter: blur(10px); /*Add a blur effect */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1002;
  display: none; /*Initially hidden */
}

.addAngelModalButton {
  margin-bottom: 0.85em;
}

.closeModalButtons {
  background-color: #ffffff59;
  color: #000000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Text shadow for better readability */
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 1px;
  padding: 1em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  width: 45%;
  max-width: 350px;
  margin-bottom: 0.95em;
}

.manageCategoriesButton {
  width: 85%;
  justify-self: center;
  padding: 1.15em;
  border-radius: 35px;
  border: 0;
  cursor: pointer;
  margin-bottom: 1.25em;
}

#linkCompanyCategoriesButton {
  background-color: #ffffff;
  color: #000000;
  margin-top: 0.5em;
}

.manageCategoriesPage {
  padding: 0;
  background-color: #95ba3a;
  background-image: url("./img/newgraphs/Dots.png");
  background-repeat: repeat;
  background-position: center center;
  background-size: contain;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  transition: 0.5s;
  min-height: 100dvh;
  display: grid;
  grid-template: auto auto 1fr / auto;
  grid-template-areas:
    "alternativeHeader"
    "bodyCategories";
  z-index: 12;
}

.manageCategoriesPageT2 {
  padding: 0;
  background-color: #95ba3a;
  background-image: url("./img/newgraphs/Dots.png");
  background-repeat: repeat;
  background-position: center center;
  background-size: contain;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  transition: 0.5s;
  min-height: 100dvh;
  display: grid;
  grid-template: auto auto 1fr / auto;
  grid-template-areas:
    "alternativeHeader"
    "bodyCategories";
  z-index: 20;
}

.manageCategoriesPageT3 {
  padding: 0;
  background-color: #95ba3a;
  background-image: url("./img/newgraphs/Dots.png");
  background-repeat: repeat;
  background-position: center center;
  background-size: contain;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  transition: 0.5s;
  min-height: 100dvh;
  display: grid;
  grid-template: auto auto 1fr / auto;
  grid-template-areas:
    "alternativeHeader"
    "bodyCategories";
  z-index: 30;
}

.container {
  position: relative;
  width: 100%; /* Adjust as needed */
  height: 100%; /* Adjust as needed */
  background: url("./img/webp/reduced_size_map_background.webp") no-repeat
    center center / cover;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Black tint with 50% opacity */
  pointer-events: none; /* Makes sure this layer is not interactive */
}

/* ─── Area-rep bottom sheet ─────────────────────────────────────────── */
.repInfoModal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0; /* anchor to the bottom edge */
  height: 40vh; /* ≈ 40 % of the viewport height */
  max-height: 320px; /* optional hard cap for tall screens */

  background: rgb(255, 255, 255); /* translucent dark */
  backdrop-filter: blur(12px); /* glass blur effect */
  -webkit-backdrop-filter: blur(12px); /* for Safari support */

  border-radius: 16px 16px 0 0; /* rounded top corners */
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15); /* subtle border for glass look */

  transform: translateY(100%); /* start completely off-screen */
  transition: transform 0.35s ease;
  z-index: 9999;
}

.repInfoModal.open {
  transform: translateY(0); /* slides up 40 % */
}

.repInfoBody {
  padding: 1.5rem;
  font-size: 1rem;
}
.repPhoneLink {
  display: block;
  margin-top: 0.5rem;
  color: #95ba3a;
  text-decoration: none;
  font-weight: 600;
}

.repIconBtn {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 0.5rem;
  font-size: 1.1rem;
  color: #3f3f3f;
}

.repIconBtn:hover .icon {
  color: #1d1d1d;
} /* accent on hover */

.manageCategoriesPageOpen {
  transform: translateY(0);
}

.manageCategoriesPageOpenT2 {
  transform: translateY(0);
}

.manageCategoriesPageOpenT3 {
  transform: translateY(0);
}

.bodyCategories {
  grid-area: bodyCategories;
}

.categoriesPageLabels {
  color: #58585a;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.725rem;
  padding: 0;
}

.modalTitles {
  color: #58585a;
  margin-left: 0.5em;
  letter-spacing: 0.9px;
  font-size: 0.725rem;
  padding: 0;
  text-align: center;
}

.categoryContainer {
  height: 90dvh; /* Set a fixed height */
  overflow-y: auto; /* Enable vertical scrolling */
  scrollbar-width: thin; /* Optional: thin scrollbar for Firefox */
  -ms-overflow-style: none; /* Optional: hide scrollbar in IE/Edge */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
  scroll-behavior: smooth; /* Smooth scrolling */
}

.categoryContainerv2 {
  height: 70dvh; /* Set a fixed height */
  overflow-y: auto; /* Enable vertical scrolling */
  scrollbar-width: thin; /* Optional: thin scrollbar for Firefox */
  -ms-overflow-style: none; /* Optional: hide scrollbar in IE/Edge */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
  scroll-behavior: smooth; /* Smooth scrolling */
  margin: 0.5em 0;
  border: #58585a44 solid 3px;
  padding: 1em 0;
  border-radius: 8px;
}

.categoryContainerv2::-webkit-scrollbar {
  width: 10px; /* Optional: width of scrollbar */
}

.categoryContainerv2::-webkit-scrollbar-thumb {
  background-color: #58585a; /* Optional: color of scrollbar thumb */
  border-radius: 6px; /* Optional: rounded scrollbar thumb */
}

.categoryContainerv2::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color for scrollbar track */
}

.tierContainerAnimation {
  display: none;
  transform: translateX(100%); /* Start off-screen */
  transition: transform 0.3s ease-in-out; /* Transition for sliding effect */
  opacity: 0; /* Initially hidden */
}

.showTierConatainer {
  display: block;
  transform: translateX(0); /* Slide into view */
  opacity: 1; /* Fully visible */
}

.tierContainer {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  width: 100%;
  text-align: center;
}

.categoryContainer::-webkit-scrollbar {
  width: 10px; /* Optional: width of scrollbar */
}

.categoryContainer::-webkit-scrollbar-thumb {
  background-color: #58585a; /* Optional: color of scrollbar thumb */
  border-radius: 6px; /* Optional: rounded scrollbar thumb */
}

.categoryContainer::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color for scrollbar track */
}

.categoryFilterButtons {
  text-align: left;
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  background-color: #f1f1f1;
  font-family: "Source Sans Pro", sans-serif;
  padding: 1em 1.5em;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  color: #000000f5;
  letter-spacing: 0.9px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  align-self: center;
  width: 80%;
  max-width: 300px;
  display: inline-block;
}

.childrenCategoryFilterButtons {
  padding: 0.5em 1em;
  border-radius: 35px;
  display: inline-block;
  text-align: center;
  background-color: #ffffffe3;
  box-shadow: none;
  width: 50%;
  /* height: 30px; */
  display: inline-block;
  align-self: center;
}
#tier1CategoryItemsContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.categoryItemContainer {
  width: 100%;
  padding: 0.5em 0.5em;
  /* border-top: #58585a28 solid 1px;
  border-bottom: #58585a44 solid 1px; */
  display: flex;
  align-content: center;
  justify-content: space-between;
}

.categoryCloseButtons {
  margin-top: 0.5em;
  align-self: center;
}

.childrenCategoryModal {
  text-align: center;
  padding: 1em 0;
  background-color: #1919196c;
  border: none;
  width: 90%;
  height: 90dvh;
  max-width: 400px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  border: #58585a21 solid 1px;
  border-radius: 20px;
  padding: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  color: #b4b4b4f1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 6px #58585a59,
    /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19); /* Additional shadow for depth */
  display: none;
  z-index: 3000;
}

.modalTitles {
  color: #bed3cf;
  margin-left: 1em;
  font-size: 0.9rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.closeChildrenCategoryButton {
  margin: 0;
  margin-top: 0.75em;
}

/* Toggle Container */
.toggle-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 0.5em;
  -webkit-tap-highlight-color: transparent;
}

/* Toggle Label */
.toggle-label {
  color: #58585a;
  letter-spacing: 0.9px;
}

/* Hide the default checkbox */
.toggle-input {
  display: none;
}

/* Toggle Switch */
.toggle {
  width: 40px;
  height: 20px;
  background-color: #58585a;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: #ffffffc4;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* Checked State */
.toggle-input:checked + .toggle {
  background-color: #006237;
}

.toggle-input:checked + .toggle::before {
  transform: translateX(20px); /* Move the toggle knob to the right */
}

/* /////NOTIFICATIONS PAGE */

.appNotificationsPageGrid {
  min-height: 100dvh;
  display: grid;
  grid-template: auto auto 1fr / auto;
  grid-template-areas:
    "alternativeHeader"
    "notificationsTags"
    "notificationsContent";
  justify-items: center;
  background: url("./img/newgraphs/Red_Background_resized.png") no-repeat center
    center / cover;
  background-color: #d40f0f;
}

#closeNotificationsButton {
  margin-top: 0.3em;
}

#eventsCloseButton {
  margin-top: 0.3em;
}

.notificationsTags {
  grid-area: notificationsTags;
  padding: 1.25em 0.5em;
  margin-bottom: 0.5em;
  border-bottom: solid px #fefefe;
  border-radius: 8px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  background-color: rgba(43, 43, 43, 0.15); /* Transparent white */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(5px); /* For Safari */
}

.notificationsContent {
  grid-area: notificationsContent;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  padding: 0.5em;
  justify-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
}

.singleNotificationContainer {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: flex-start;
  padding: 0.15em 0.75em;
  border-radius: 100px;
  outline: none;
  letter-spacing: 1px;
  border-left: #fefefe solid 4.5px;
  box-shadow: 0 4px 8px rgb(0, 0, 0);
  border-radius: 8px; /* Adjust as needed */
  margin-bottom: 0.95rem;
  width: 95%;
  color: #fefefe;
  background-color: #111111d8;
  width: fit-content;
  cursor: pointer;
  padding-bottom: 0.5em;
}

.singleEventContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.75em 0.75em;
  border-radius: 100px;
  outline: none;
  letter-spacing: 1px;

  border-radius: 8px; /* Adjust as needed */
  margin-bottom: 0.95rem;
  width: 95%;
  color: #000000;
  background-color: #ffffff;
  cursor: pointer;
  max-width: 400px;
}

.myNotificationsLabels {
  color: #000000;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.725rem;
}

.myNotificationsLabelsv3 {
  color: #ffffff;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.725rem;
}
.myNotificationsv3Labels {
  color: #fe0100;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.725rem;
}

.myNotificationsLabelsv2 {
  color: #58585a;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

.myNotificationsText {
  color: #58585a;
  margin-left: 0.5em;
  letter-spacing: 1px;
  font-size: 0.725rem;
}

.loadMoreNotificationsContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

/* Notifications Modal */
.appNotificationsModalGrid {
  min-height: 100dvh;
  display: grid;
  grid-template: auto auto auto 1fr / auto;
  grid-template-areas:
    "alternativeHeaderv2"
    "modalNotificationsTitle"
    "modalNotificationsTags"
    "modalNotificationsContent";
  justify-items: center;
  background: #fefefe; /* Converted to use the RGBA equivalent */
  backdrop-filter: blur(10px); /*Add a blur effect */
}

.alternativeHeaderv2 {
  grid-area: alternativeHeaderv2;
  display: flex;
  align-items: center;
  gap: 0.5em;
  /* padding: 0.5em 0.5em; */
  width: 100%;
}

#newsCloseButton {
  margin-top: 0.2em;
}

.modalNotificationsTitle {
  grid-area: modalNotificationsTitle;
  padding: 0.5em;
  color: #58585a;
  background-color: #ffffff;
  border-radius: 15px;

  margin-bottom: 0.5em;
  margin-top: 2em;
  width: 90%;
}

.modalNotificationsContent {
  grid-area: modalNotificationsContent;
  padding: 0.5em;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
  text-align: left;
  width: 90%;
  font-size: 0.85rem;
  color: #58585a;
  padding: 0.5em;
  color: #58585a;
  background-color: #ffffff;
  border-radius: 15px;
  min-height: 70%;
}

.modalNotificationsTags {
  display: flex;
  overflow: hidden; /* Hide overflow without scrollbars */
  grid-area: modalNotificationsTags;
  padding: 0.5em;

  width: 100%;
  max-width: 400px;

  overflow-x: auto; /* Allow horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
  scroll-behavior: smooth; /* Smooth scrolling */
}

.modalactionLinks {
  background-color: #58585a18;
  min-width: fit-content;
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  color: #ffffff;
}

.eventActions {
  display: flex;
  justify-content: space-between;
}

.notificationActions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.eventActionButtons {
  background-color: #fe0100;
  min-width: fit-content;
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  color: #fefefe;
  border-radius: 35px;
}

.eventsButtonClass {
  font-size: 0.9rem;
  background-color: #00000000;
  color: #353535;
  padding: 0;
  text-align: left;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
  /* letter-spacing: 1px; */
  display: inline-block;
  border: none;
  display: flex;
}

.eventsButtonClass .icon {
  align-self: center;
}

.menuIcon {
  color: #175e20;
  margin-right: 10px;
  font-size: 1.2em;
  align-self: self-start;
}

#sideMenuLogo {
  margin-bottom: 2em;
  height: 170px;
  width: 170px;
}

.infoLink {
  color: #353535;
  text-decoration: none;
}

/* Keep same hover effect as your other buttons if needed */
.eventsButtonClass .infoLink:hover {
  text-decoration: none;
}

.notificationButtons {
  background-color: #00623700;
  min-width: fit-content;
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  display: inline-block;
  color: #000000;
}

.eventTypeTags {
  background-color: #58585a18;
  min-width: fit-content;
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0.5em 0.7em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  color: #fefefe;
}

/* toast message */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(340px, calc(100% - 48px));
  padding: 0.9em 1.1em;
  background: #ffffff;
  color: #1f1f1f;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.98);
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
  z-index: 1000;
}

/* When the toast is active */
.toast.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(340px, calc(100% - 48px));
  padding: 1em 1.1em;
  display: flex;
  align-items: center;
  gap: 0.75em;
  background: #ffffff;
  color: #1f1f1f;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.98);
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
  z-index: 10000;
}

.loader::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  border-top-color: #d40f0f;
  animation: loader-spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* When the toast is active */
.loader.active2 {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.loaderBackdrop {
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(2px);
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 4000;
}

/* When the toast is active */
.loaderBackdrop.active3 {
  opacity: 1;
  pointer-events: auto;
}

.session-expired-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 20000;
}

.session-expired-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(360px, calc(100% - 48px));
  padding: 1.25em 1.4em 1.1em;
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.98);
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
  z-index: 20001;
}

.session-expired-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.session-expired-modal.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.session-expired-title {
  margin: 0 0 0.5em;
  font-size: 1rem;
  font-weight: 700;
}

.session-expired-message {
  margin: 0 0 1.1em;
  font-size: 0.9rem;
  line-height: 1.45;
}

.session-expired-button {
  width: 100%;
  padding: 0.8em 1.2em;
  border: none;
  border-radius: 10px;
  background: #175e20;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* requestNewJob Menu */
.requestNewJobMenuPage {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #eeeeee;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  transition: 0.5s;
  min-height: 100dvh;
  z-index: 11;
}

.requestNewJobPageOpen {
  transform: translateY(0);
}

.youShallNotPanic {
  position: absolute; /* Allow the element to cover the parent */
  border-radius: 20px;
  top: 0;
  left: 0;
  width: 100%; /* Cover the full width of the parent */
  height: 100%; /* Cover the full height of the parent */
  background-color: #000000fb; /* Optional: set a background with opacity */
  color: rgba(255, 255, 255, 0.808); /* Text color */
  display: none; /* Center the text vertically and horizontally */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10; /* Ensure it stays above other elements */
  text-align: center;
}

.menuButtonv2 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  /* letter-spacing: 1px; */
  padding: 1.15em;
  border: 0;
  cursor: pointer;
  color: #58585a;
  width: 100%;
  background-color: #20202000;
}

.headerText {
  align-self: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
}

#angelInformationAlertButton {
  background-color: #00623700;
  border: none;
}
#personalInformationAlertButton {
  background-color: #00623700;
  border: none;
}

.sideMenuPage {
  display: flex;
  flex-direction: column;

  align-items: left;
  padding: 0.5em 1em;
  width: 85%;
  gap: 1.2em;
  background-color: #ffffff;
  border-right: solid 1px #0000001c;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sideMenuPage::-webkit-scrollbar {
  display: none;
}

button:focus {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.close-x-button {
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}

.close-x-buttonV2 {
  font-size: 1.35rem;
  font-weight: 900;
  color: #175e20;
  margin-left: auto;
  margin-right: 0.25em;
}

.icon.close-x-button,
.icon.close-x-buttonV2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
}

#closeMenuButton,
#closeNotificationsButton,
#eventsCloseButton,
#closeProfileButton,
#newsCloseButton,
#closeManageCategoriesPageButton,
#closeTier2PageButton,
#closeTier3PageButton,
#closeRepInfoModal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
}

/* .padding-right-2em {
  padding-right: 2em;
} */

@media only screen and (min-width: 335px) {
  .appActionButton {
    font-size: 1rem;
  }
  .headerLogo {
    margin-top: 2em;
    margin-bottom: 0.5em;
    width: auto;
    height: 170px;
    object-fit: cover;
    align-self: center;
  }

  .menuButton {
    font-size: 2rem;
  }

  .closePageButtons {
    font-size: 0.85rem;
  }

  .filterButtons {
    font-size: 0.85rem;
    padding: 1em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
      /* Shadow for 3D effect */ 0 6px 20px rgba(0, 0, 0, 0.19);
    display: flex;
    align-items: center;
  }

  .form-inputs {
    font-size: 0.85rem;
  }

  .myAngelsLabels {
    font-size: 0.85rem;
  }

  .viewAngelsButton {
    font-size: 0.85rem;
  }

  .categoriesPageLabels {
    font-size: 0.85rem;
  }

  .modalTitles {
    font-size: 0.85rem;
  }

  .headerIcons {
    font-size: 1.25rem;
  }

  p {
    font-size: 0.85rem;
  }

  .myApproximateLocationTitle {
    font-size: 0.88rem;
  }

  .myApproximateLocationIcon {
    font-size: 1.6rem;
  }

  .myApproximateLocationValue {
    font-size: 1.05rem;
  }

  .myApproximateLocationContainer {
    padding: 1.2em 1.2em 1.35em;
  }

  .panicButtons {
    font-size: 1.8rem;
  }

  .callButton {
    font-size: 1.2rem;
    /* margin-bottom: 1em; */
  }
  #panicStatustext {
    font-size: 0.85rem;
  }
}

@media only screen and (max-height: 655px) {
  .headerLogo {
    height: 100px;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }

  #homePageLogo {
    height: 120px;
    width: 120px;
  }

  #sideMenuLogo {
    height: 120px;
    width: 120px;
    margin-bottom: 1.25em;
  }
}

@media only screen and (max-height: 720px) {
  #homePageLogo {
    height: 140px;
    width: 140px;
  }
}

@media only screen and (max-height: 680px) {
  #homePageLogo {
    height: 120px;
    width: 120px;
  }

  #panicStatustext {
    font-size: 0.8rem;
    padding: 0.35em 0.9em;
    letter-spacing: 0.06em;
  }
}

@media only screen and (max-height: 625px) {
  .panicButtons {
    height: 3.2em;
    width: 3.2em;
  }

  .redAlarmIcon,
  .greenAmbulanceIcon {
    width: 105px;
  }
}

@media only screen and (min-height: 800px) {
  #homePageLogo {
    height: 180px;
    width: 180px;
  }
}