:root {
  --main-bg-color: #8ebbff;
  --secondary-bg-color: #24293d;
  --third-bg-color: #f4f4fc;
  --main-font-color: #f4f4fc;
  --secondary-font-color: #2f3855;
  --third-font-color: #ff5a43;
  --fourth-font-color: #8ebbff;
  --border-radius-40: 40px;
  --button-size-60: 60px;
  --spacing: 16px;
}

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

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.6;
  color: #b4b4b4f1;
  background-color: #24293d;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}

h1,
h2,
a {
  margin: 0;
}

/* Remove tap highlights/focus rings on mobile buttons */
button,
.action-button,
.cardBtn,
.linkButton,
.navbtn,
.passwordtoggle,
.forgot-password {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  box-shadow: none;
}
button:focus,
button:focus-visible,
.action-button:focus,
.action-button:focus-visible,
.cardBtn:focus,
.cardBtn:focus-visible,
.linkButton:focus,
.linkButton:focus-visible,
.navbtn:focus,
.navbtn:focus-visible,
.passwordtoggle:focus,
.passwordtoggle:focus-visible,
.forgot-password:focus,
.forgot-password:focus-visible {
  outline: none;
  box-shadow: none;
}

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

h2 {
  font-size: 1.3125rem;
}

.form-inputs::placeholder {
  color: #adadadd3;
  font-size: 1rem;
}

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

.form-inputs::placeholder {
  color: var(--secondary-font-color);
}

.form-inputs:focus-visible {
  outline: 4px solid var(--main-bg-color);
}

.form-inputs {
  line-height: unset;
  width: 85.5%;
  padding: 1.15em 3em;
  font-size: 0.725rem;
  letter-spacing: 1px;
  border: 1px solid var(--secondary-bg-color);
  margin-bottom: 2rem;
  color: var(--secondary-font-color);
  background-color: var(--third-bg-color);
  border-radius: var(--border-radius-40);
  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;
  width: 85.5%;
}

.passwordtoggle {
  display: flex;
  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: transparent;
  color: var(--main-font-color);
  width: 85.5%;
}

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

.pwItem {
  font-size: 0.9rem;
}

strong {
  color: var(--secondary-font-color);
  font-weight: 600;
}

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

.forgot-password {
  border: none;
  padding: 1.15em 0em;
  background-color: transparent;
  color: var(--third-font-color);
  font-weight: 500;
  font-style: normal;
  width: 100%;
  text-align: end;
}

.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: var(--main-bg-color);
  color: var(--main-font-color);
  border-radius: var(--border-radius-40);
  height: var(--button-size-60);
  cursor: pointer;
}

.action-button--alternative {
  background-color: var(--main-bg-color);
  color: var(--main-font-color);
  border-radius: var(--border-radius-40);
  height: var(--button-size-60);
  cursor: pointer;
}

.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(0em, 0fr) auto 2fr auto minmax(1em, 1fr) / minmax(0px, 0fr)
    minmax(280px, auto) minmax(0px, 0fr);
  grid-template-areas:
    ".. .. .."
    ".. top .."
    ".. center .."
    ".. bottom .."
    ".. .. ..";
}

.landingPage {
  min-height: 100dvh;
  background-color: var(--secondary-bg-color);
}

.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;
}

.button-helper {
  width: 85%;
}

.homePage-bottom-wrapper {
  min-width: -webkit-fill-available;
  background-color: #ffffff;
  padding: 0 1em;
  padding-top: 1em;
  border-radius: 30px 30px 0 0;
}

.login-small-buttons-spacing {
  display: flex;
  width: 85.5%;
  align-items: center;
}

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

.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;
}

button.action-button.action-button--normal.loginButton {
  background-color: var(--main-bg-color);
  color: var(--main-font-color);
}

button.action-button.action-button--alternative.registerButton {
  background-color: var(--main-bg-color);
  color: var(--main-font-color);
  margin-top: 10px;
}

button.action-button.action-button--alternative.registerButton.navbtn.login-page-specific {
  background-color: var(--main-bg-color);
  color: var(--main-font-color);
}

.landingPageTitle {
  font-size: 14px;
  color: var(--main-font-color);
}

.landing-line {
  display: block;
  background-color: var(--third-bg-color);
  width: 100%;
  height: 2px;
}

#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: var(--main-font-color);
  text-align: center;
  font-size: 24px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  margin-bottom: 0;
}

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

.or-message-white {
  color: var(--main-font-color);
  text-align: center;
}

.login-page {
  /* background: url("./img/newgraphs/poppy_gradient.webp") no-repeat center center /
    cover; */
  background-color: var(--secondary-bg-color);
  overflow: auto;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 100%;
  transform: translateX(0);
  transition: 0.5s;
  min-height: 100dvh;
}

.forgot-center-wrapper {
  width: 100%;
  gap: 25px;
  display: flex;
  flex-direction: column;
}

.password-requirements-title {
  color: var(--secondary-font-color);
}

.password-requirements-button {
  color: var(--main-font-color) !important;
  background-color: var(--main-bg-color) !important;
  border-radius: 32px !important;
  padding: 1em 2em !important;
}

.infoModals {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #00000050;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 100%;
  transform: translateX(0);
  transition: 0.5s;
  min-height: 100dvh;
}

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

.modalInfoContainer {
  border-radius: 32px;
  padding: 2em 1em;
  margin: 1em;
  background-color: var(--third-bg-color);
  color: var(--fourth-font-color);
  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;
  width: 100%;
  display: grid;
  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;
  -ms-overflow-style: none;
}

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

.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;
  display: inline-block;
  font-size: 1.25rem;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
  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%;
}

.headerIcons {
  font-size: 1.15rem;
  color: #fa5f22;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.notificationIcon {
  align-self: center;
  color: #222126;
  color: #dfdfdf;
  margin: 0 0.25em;
}

.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;
}

.headerLogo {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  width: auto;
  height: 130px;
  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;
}

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

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

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

.myApproximateLocationTitle {
  font-size: 1rem;
  color: #ddc41c;
}

.myApproximateLocationIcon {
  font-size: 1.5rem;
  color: #d40f0f;
}

.myApproximateLocation {
  font-size: 0.95rem;
  color: #000000;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.myApproximateLocationContainerv2 {
  text-align: center;
  margin: 1em 0;
  width: 90%;
  max-width: 400px;
  padding: 0 0.5em;
  background-color: #ffffff;
  border-radius: 10px;
}

.myApproximateLocationContainer {
  text-align: center;
  margin: 1em 0;
  width: 90%;
  max-width: 400px;
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.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;
  margin-top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 0em;
  margin: 0;
  background-color: #0000002c;
  border-radius: 30px 30px 0 0;
}

.dots {
  background-image: url("./img/newgraphs/Dots_resized.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #63636305;
  background-blend-mode: multiply;
  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-color: #96ba3a;
  border-radius: 30px 30px 0 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#medicalButton {
  background-color: #004bcc00;
}

.progress-container {
  width: 100%;
  height: 4px;
  background-color: #dddddd00;
  border-radius: 20px;
  outline: none;
  overflow: hidden;
  margin-bottom: 0;
}

#progressBar {
  width: 100%;
  height: 100%;
  width: 0;
  background-color: #d40f0ff3;
  transition: width 0.1s;
}

#panicStatustext {
  color: #ffffff;
  font-size: 0.95rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

i.fa-solid.fa-land-mine-on {
  font-size: 4rem;
}

i.fa-solid.fa-truck-medical {
  font-size: 4rem;
}

.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: #ffffff;
  margin: 0;
  margin-bottom: 0.5em;
}

#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;
  min-width: fit-content;
  background-color: #fe0100;
  background-color: #00000038;
  background-color: #006237;
  text-decoration: none;
  outline: none;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  text-align: center;
}

.filterTabsContainer {
  grid-area: filterTabs;
  overflow: hidden;
  width: 100%;
}

.filterTabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  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;
}

.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;
}

/* request job*/

.jobsPages {
  background-color: #1c1d27;
  position: fixed;
  width: 100%;
  top: 92;
  right: 0;
  bottom: 70;
  left: 100%;
  transform: translateX(0);
  transition: 0.1s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

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

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

.requestedJobsFilterActiveState {
  background-color: #fa5f22;
}

/* menuPage */

.menuPage {
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  right: 100%;
  transform: translateX(0);
  transition: 0.2s;
  min-height: 100dvh;
  z-index: 11;
}

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

.forgotPasswordPage {
  background-color: var(--secondary-bg-color);
  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;
  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;
  width: 100%;
  border-radius: 0 0 15px 15px;
  align-content: center;
}

.notificationsHeaderWrapper {
  background-color: #0c3111;
  display: flex;
  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;
  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: var(--main-font-color);
  min-width: fit-content;
  align-self: center;
}

.span-color-helper {
  color: var(--fourth-font-color);
}

.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-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;
}

.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;
  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;
  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;
  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;
  color: #000000f1;
  display: none;
}

.modalsBackdrop {
  background: rgba(28, 29, 39, 0.418);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1002;
  display: none;
}

.addAngelModalButton {
  margin-bottom: 0.85em;
}

.closeModalButtons {
  background-color: #ffffff59;
  color: #000000;
  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%;
  height: 100%;
  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);
  pointer-events: none;
}

/* ─── Area-rep bottom sheet ─────────────────────────────────────────── */
.repInfoModal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40vh;
  max-height: 320px;
  background: rgb(255, 255, 255);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transform: translateY(100%);
  transition: transform 0.35s ease;
  z-index: 9999;
}

.repInfoModal.open {
  transform: translateY(0);
}

.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 i {
  color: #1d1d1d;
}

.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;
  overflow-y: auto;
  scrollbar-width: thin;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.categoryContainerv2 {
  height: 70dvh;
  overflow-y: auto;
  scrollbar-width: thin;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  margin: 0.5em 0;
  border: #58585a44 solid 3px;
  padding: 1em 0;
  border-radius: 8px;
}

.categoryContainerv2::-webkit-scrollbar {
  width: 10px;
}

.categoryContainerv2::-webkit-scrollbar-thumb {
  background-color: #58585a;
  border-radius: 6px;
}

.categoryContainerv2::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.tierContainerAnimation {
  display: none;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  opacity: 0;
}

.showTierConatainer {
  display: block;
  transform: translateX(0);
  opacity: 1;
}

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

.categoryContainer::-webkit-scrollbar {
  width: 10px;
}

.categoryContainer::-webkit-scrollbar-thumb {
  background-color: #58585a;
  border-radius: 6px;
}

.categoryContainer::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.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;
  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%;
  display: inline-block;
  align-self: center;
}

#tier1CategoryItemsContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.categoryItemContainer {
  width: 100%;
  padding: 0.5em 0.5em;
  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;
  color: #b4b4b4f1;
  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);
}

/* /////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);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(5px);
}

.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;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.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;
  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;
  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;
  backdrop-filter: blur(10px);
}

.alternativeHeaderv2 {
  grid-area: alternativeHeaderv2;
  display: flex;
  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;
  scrollbar-width: none;
  -ms-overflow-style: none;
  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;
  grid-area: modalNotificationsTags;
  padding: 0.5em;
  width: 100%;
  max-width: 400px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.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;
  display: inline-block;
  border: none;
  display: flex;
}

.eventsButtonClass i {
  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: 10px;
  right: -300px;
  width: auto;
  max-width: 300px;
  padding: 0.5em 1em;
  background-color: #000000ef;
  color: white;
  font-size: 0.85rem;
  border-left: 8px solid #fefefe;
  border-radius: 5px;
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  z-index: 1000;
}

/* When the toast is active */
.toast.active {
  transform: translateX(-300px);
  opacity: 1;
}

.loader {
  position: fixed;
  top: 10px;
  right: -300px;
  width: auto;
  max-width: 300px;
  padding: 0.5em 1em;
  background-color: #000000ef;
  color: white;
  font-size: 0.85rem;
  border-left: 8px solid #fefefe;
  border-radius: 5px;
  opacity: 0;
  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
  z-index: 10000;
}

/* When the toast is active */
.loader.active2 {
  transform: translateX(-300px);
  opacity: 1;
}

.loaderBackdrop {
  background: rgba(6, 23, 207, 0);
  backdrop-filter: blur(0.2px);
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
  z-index: 4000;
}

/* When the toast is active */
.loaderBackdrop.active3 {
  transform: translateX(-100%);
  opacity: 1;
}

/* 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;
  border-radius: 20px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000fb;
  color: rgba(255, 255, 255, 0.808);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  text-align: center;
}

.menuButtonv2 {
  display: inline-block;
  font-size: 0.725rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  padding: 1.15em;
  border: 0;
  cursor: pointer;
  color: #58585a;
  width: 100%;
  background-color: #20202000;
}

.headerText {
  align-self: center;
  width: 100%;
  display: flex;
  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;
}

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

.close-x-button {
  display: flex;
  align-items: center;
  padding: 1em 1em 0;
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}

.close-x-buttonV2 {
  display: flex;
  align-items: center;
  padding: 1em 1em 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: #175e20;
  margin-left: 88%;
}

@media only screen and (min-width: 335px) {
  .appActionButton {
    font-size: 1rem;
  }

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

  .menuButton {
    font-size: 2rem;
  }

  .closePageButtons {
    font-size: 0.85rem;
  }

  .filterButtons {
    font-size: 0.85rem;
    padding: 1em;
    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: 1.1rem;
  }

  .myApproximateLocationIcon {
    font-size: 2rem;
  }

  .myApproximateLocation {
    margin-top: 0;
    font-size: 1.2rem;
  }

  .myApproximateLocationContainer {
    padding: 2em 1em;
  }

  .panicButtons {
    font-size: 1.8rem;
  }

  .callButton {
    font-size: 1.2rem;
  }

  #panicStatustext {
    font-size: 0.85rem;
  }
}