body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

body {
  margin: 0;
  font-family: "Arial", sans-serif;
}

.App {
  text-align: left;
  background-color: #fff;
  min-height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.App-header {
  background-color: #282c34;
  padding: 20px;
  color: white;
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 15px;
}

.nav-links li {
  display: inline;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.logo {
  float: left;
  font-size: 1.5em;
  font-weight: bold;
}

.hero {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px 20px;
  background-color: #fff;
  color: #7b336e;
}

.hero h1 {
  font-size: 3em;
  margin: 0.5em 0;
}

.hero p {
  font-size: 1.5em;
  margin: 0.5em 0;
  font-weight: 700;
}

.cta-button {
  padding: 10px 20px;
  font-size: 1em;
  color: white;
  background-color: #61dafb;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 20px;
}

.cta-button:hover {
  background-color: #21a1f1;
}

.App-footer {
  background-color: #282c34;
  color: white;
  padding: 10px;
  font-size: 0.8em;
}

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: inherit;
}

input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-text-fill-color: inherit !important;
}

.signin-container {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.signin-frame-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  margin-top: 12%;
}

.input-container {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 15px;
  transition: border-color 0.3s, background-color 0.3s;
}

.form-group {
  padding: 0px 0px 0px 0px !important;
}

.heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

input:-webkit-autofill {
  background-color: transparent;
  color: #333 !important;
  box-shadow: 0 0 0 30px white inset !important;
}

input:-webkit-autofill::first-line {
  color: #883979 !important;
  border: none !important;
}

.heading h3 {
  color: #000;
  text-align: center;
  font-family: Poppins;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.heading p {
  color: #000;

  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.691px;
  margin: 0;
}

.signin-form {
  display: flex;
  padding: 60px;
  justify-content: center;
  align-items: center;

  border-radius: 12px;
  background: #fff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
}

.form-box {
  display: flex;
  width: 498px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  border-radius: 12px;
  background: #fff;
}

.form-input-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.custom-select-container {
  display: flex;
  height: 46px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 6px;
  border: 1px solid #999;
  border: 1px solid var(--Neutrals-Neutral-07, #999);
  background: #ffff;
  transition: border-color 0.3s;
}
.dark-mode .custom-select-container {
  background-color: #2d1227;
}

.custom-select-container:hover {
  border-color: #d459bc;
  transition: 0.6s;
}

.custom-select-container:focus-within {
  border-color: #d459bc;
  transition: 0.6s;
}

.custom-select-container.filled {
  border-color: #883979;
  color: #b3b3b3;
}

.dark-mode .custom-select-container.filled {
  border-color: white;
}

.dark-mode .custom-option {
  background-color: transparent;
}

.custom-select-span.filled-text {
  color: #b3b3b3;

  transition: color 0.6s;
}

.custom-select {
  display: flex;
  width: 478px;
  justify-content: space-between;
  align-items: center;
  color: #333;
  transition: color 0.3s;
}

.custom-select-container:hover .custom-select span,
.custom-select-container:focus-within .custom-select span {
  color: #883979;
  transition: 0.6s;
}

.signin-btn {
  display: flex;
  height: 46px;
  width: 100%;
  padding: 11px 0px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 6px;
  border: 1px solid #883979;
  background: white;
}

.signin-btn1-text {
  color: #883979;
  color: var(--Primary-Primary---01, #883979);
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.form-actions {
  align-self: stretch;
}

.form-actions h4 {
  color: #000;
  text-align: center;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.512px;
  margin: 0;
}

.form-options1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.form-group1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}

.input-frame {
  width: 100%;
  padding: 0 10px;
  background: white;
  border: 1px solid #999999;
  border-radius: 6px;
  display: flex;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  height: 46px;
  position: relative;
}

.input-with-icon {
  width: 100%;
  display: flex;
  align-items: center;
}

.signin-form input[type="email"],
.signin-form input[type="password"] {
  width: 100%;
  border: none !important;
  outline: none !important;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  color: #883979;
  background: transparent;
  box-sizing: border-box;
}
.dark-mode .signin-form input[type="email"],
.dark-mode .signin-form input[type="password"] {
  color: #b3b3b3;
}

.signin-form .input-frame:hover,
.signin-form .input-frame:focus-within {
  border-color: #883979;
  outline: none;
  transition: 0.6s;
}

.signin-form input[type="email"]:hover::placeholder,
.signin-form input[type="password"]:hover::placeholder {
  color: #883979;
  transition: 0.6s;
}

.signin-form input[type="email"]:focus::placeholder,
.signin-form input[type="password"]:focus::placeholder {
  color: #883979;
  transition: 0.6s;
}

.input-with-icon:hover .input-icon,
.input-with-icon:focus-within .input-icon {
  color: #883979;
  transition: color 0.3s;
  transition: 0.6s;
}

.input-icon {
  color: #b3b3b3;
  transition: color 0.3s;
}

.signin-form input[type="email"]:not(:placeholder-shown),
.signin-form input[type="password"]:not(:placeholder-shown),
.signin-form input[type="text"]:not(:placeholder-shown) {
  border-color: #883979 !important;
}

.custom-select-span:not(:placeholder-shown) {
  color: #883979;
  border-color: #883979;
}
.dark-mode .custom-select-span:not(:placeholder-shown) {
  color: #b3b3b3;
}

.custom-select-span:focus {
  color: #883979;
}

.signin-form input[type="email"]:focus,
.signin-form input[type="password"]:focus,
.signin-form input[type="text"]:focus {
  color: #883979;
}

.signin-form input[type="email"]:not(:placeholder-shown) + .input-icon,
.signin-form input[type="password"]:not(:placeholder-shown) + .input-icon,
.signin-form input[type="text"]:not(:placeholder-shown) + .input-icon {
  color: #883979;
}

.signin-form input[type="email"]:focus::placeholder,
.signin-form input[type="password"]:focus::placeholder,
.signin-form input[type="email"]:not(:placeholder-shown)::placeholder,
.signin-form input[type="password"]:not(:placeholder-shown)::placeholder,
.signin-form input[type="text"]:not(:placeholder-shown)::placeholder {
  color: #883979;
}

.input-frame {
  display: flex;
  height: 46px;
  width: 498px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 6px;
  border: 1px solid white;
  background: #fff;
  border: 1px solid #b3b3b3;
}
.dark-mode .input-frame {
  background-color: #2d1227;
}
.input-frame.filled {
  border-color: #883979;
}
.dark-mode .input-frame.filled {
  border-color: white;
  color: white;
}

/* .input-with-icon input::placeholder {
    color: #883979;
  } */

.input-icon.icon-filled {
  color: #883979;
  border-color: #883979;
}

.select-role-container.role-selected {
  border-color: #883979;
}

.custom-select-container {
  position: relative;
  width: 496px;
  gap: 12px;
}

.custom-select {
  width: 496px;
  height: 46px;
  font-size: 16px;
  color: #333;
  background-color: #fff;

  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-options {
  position: absolute;
  width: 100%;
  top: calc(100% + 5px);
  left: -1px !important;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  z-index: 10;
  text-align: left;
  border: 1px solid #7b376e;
}
.dark-mode .custom-options {
  background-color: #1e0419;
  border: 1px solid #ccc;
  color: white;
}
.custom-options li:hover {
  background-color: #7b376e !important;
  color: white !important;
}
.dark-mode .custom-options li {
  color: white !important;
}
.custom-option {
  padding: 10px;
  cursor: pointer;
  position: relative;
}

.custom-option {
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.custom-option:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 1%;
  width: 98%;
  border-bottom: 1px solid #7b376e;
}

.custom-option:hover {
  background-color: #7b376e;
}

/* .custom-options:hover,
.custom-options:focus {
  border-color: #7b376e;
  box-shadow: 0 0 8px rgba(123, 55, 110, 0.2);
} */

.custom-select {
  display: flex;
  width: 478px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  height: 25px;
  background-color: #ffffff;
}
.dark-mode .custom-select {
  background-color: #2d1227;
}

.input-frame.filled .input-with-icon .input-icon.error-icon {
  color: red !important;
}

.input-frame.error-border,
.input-with-icon.error-border {
  border-color: #ff4d4f !important;
}

.input-icon.error-icon {
  color: #ff4d4f !important;
}

.signin-password-visibility-toggle.error-icon .visi {
  color: #ff4d4f !important;
}

.signin-form input[type="email"].error-border,
.signin-form input[type="password"].error-border {
  color: #ff4d4f !important;
}

.error-text {
  margin: 0px;
  margin-top: -10px;
  padding: 0px;
  margin-bottom: -18px;
  padding: 8px 0px 24px 0px;
  position: sticky;
  font-size: 16px;
  color: red;
  white-space: nowrap;
  font-family: "Open Sans", sans-serif;
  align-self: baseline;
}

.error-text-email {
  margin: 0px;
  margin-top: -10px;
  padding: 0px;
  margin-bottom: -18px;
  padding: 12px 0px 24px 0px;
  position: sticky;
  font-size: 16px;
  color: red;
  white-space: nowrap;
  font-family: "Open Sans", sans-serif;
}

.dark-mode .error-text,
.error-text-email {
  color: red !important;
}

.custom-select-span {
  color: #999;
  color: var(--Neutrals-Neutral-07, #999);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.512px;
}

.signin-dropdown-arrow {
  display: inline-block;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
  color: #b3b3b3;
}

.signin-dropdown-arrow.open {
  transform: rotate(-180deg);
}

/* .error-border {
  border: 1px solid red;
} */

.remember-me-checkbox {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.remember-me-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
}

.remember-me {
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap: 8px; */
}

.remember-me span {
  color: #000;

  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.512px;
}

.checkbox-icon {
  font-size: 24px;
  cursor: pointer;
  color: #b3b3b3;
  margin-right: 8px;
  transition: color 0.3s ease;
}

.remember-me-checkbox:hover .checkbox-icon,
.remember-me-checkbox:focus .checkbox-icon {
  color: #883979;
}

.remember-me-checkbox.active .checkbox-icon {
  color: #883979;
}

.form-options1 .forgot-password-link {
  text-decoration: none;
}

.forgot-password-link {
  color: blue;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.512px;
  cursor: pointer;
}

.signin-btn {
  color: white;
  background-color: #883979;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.signin-btn:hover {
  background-color: #7b376e;
  transition: 0.6s;
}

.signin-btn1:hover {
  background-color: #883979;
  color: white;
  transition: 0.6s;
}

.form-actions h4 {
  color: #000;
  text-align: center;

  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.512px;
}

.signin-btn1 {
  display: flex;
  width: 498px;
  height: 46px;

  justify-content: center;
  background-color: #fff;
  align-items: center;
  align-self: stretch;
  border-radius: 6px;
  border: solid 1px;

  color: #883979;

  color: var(--Primary-Primary---01, #883979);

  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.signin-container.dark-mode {
  background-color: #1e0419;
}

.signin-form.dark-mode {
  background-color: #2d1227;
}

.form-box.dark-mode {
  background-color: #2d1227;
}

.signin-container.dark-mode h3,
.signin-container.dark-mode p {
  color: #fff;
}

.form-options1.dark-mode span,
.form-options1.dark-mode a {
  color: #e6e6e6;
}

.form-actions.dark-mode h4 {
  color: #e6e6e6;
}

.form-actions.dark-mode .signin-btn1 {
  background-color: transparent;
  border: #e6e6e6 1px solid;
  color: #e6e6e6;
}

.dark-mode .signin-dark-mode-toggle {
  background-color: #2d1227;
  color: #b3b3b3;
}

.signin-dark-mode-toggle {
  bottom: 35%;
}

.signin-dark-mode-toggle .dark-mode img {
  width: 19px;
}

.signin-dark-mode-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #f3f3f3;
  border: none;
  /* color: black; */
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.6s;
}

.signin-dark-mode-toggle .lightSun {
  width: 25px !important;
  height: 25px !important;
  color: white !important;
}

.signin-dark-mode-toggle .darkMoon {
  width: 25px !important;
  height: 25px !important;
  color: black !important;
}

.signin-password-visibility-toggle {
  position: absolute;
  background: none;
  border: none;
  position: absolute;
  right: 10px;
  padding-top: 1px;
  padding-top: 5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  align-items: center;
  color: #b3b3b3;
}

.signin-password-visibility-toggle:hover {
  color: #883979;
  transition: color 0.6s;
}

.signin-password-visibility-toggle img {
  width: 24px;
  height: 24px;
}

.dark-mode .signin-password-visibility-toggle img {
  color: #2d1227;
}

.signin-btn:disabled {
  background-color: #d3d3d3;
  color: #a9a9a9;
  cursor: not-allowed;
  border: 1px solid #a9a9a9;
}

.dark-mode .signin-dark-mode-toggle:hover {
  background-color: #883979;
}

.input-with-icon {
  position: relative;
}

.input-frame.filled .input-with-icon .input-icon {
  color: #7b376e;
}
.dark-mode .input-frame.filled .input-with-icon .input-icon {
  color: #b3b3b3;
}

/* Responsive */
@media (min-width: 320px) and (max-width: 740px) {
  .signin-container {
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding-top: 20px;
  }

  .signin-dark-mode-toggle {
    width: 54px;
    height: 54px;
    top: 580px;
  }

  .signin-frame-container {
    gap: 0px;
  }

  .checkbox-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .lightSun {
    width: 15px !important;
    height: 15px !important;
  }

  .darkMoon {
    width: 15px !important;
    height: 15px !important;
    color: #000;
  }

  .signin-frame h3 {
    font-size: 20px;
    text-align: center;
    margin: 0;
  }

  .signin-frame p {
    font-size: 12px;
    text-align: center;
    line-height: 18px;
    gap: 50px;
  }

  .heading {
    gap: 8px;
    width: 272px;
  }

  .signin-password-visibility-toggle {
    right: -5px;
  }

  .visi {
    width: 20px !important;
    height: 20px !important;
  }

  .form-group1 {
    gap: 8px;
  }

  .signin-form {
    margin-top: 20px;
    width: 272px;
    height: 315px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px;
  }

  .signin-form .signin-form-box {
    width: 248px;
    margin: 30px 16px;
  }

  input:-webkit-autofill {
    background-color: transparent;
    color: #333 !important;
    box-shadow: 0 0 0 30px white inset !important;
    height: 42px;
  }

  input:-webkit-autofill::first-line {
    color: #883979 !important;
    border: none !important;
  }

  /* .signin-form input{
        background-color: transparent;
        font-size: 12px;
    } */

  .form-box {
    width: 248px;

    gap: 0px;
  }

  .signin-form input[type="email"],
  .signin-form #password {
    width: 248px;
    height: 32px;
    font-size: 12px;
    padding: 10px 10px 10px 28px;
    background-color: transparent !important;
    box-sizing: border-box;

    border-radius: 8px;
  }

  .form-input-box {
    gap: 0px;
  }

  .custom-option {
    font-size: 12px;
    padding: 5px;
  }

  .remember-me-checkbox {
    margin-right: -4px;
    padding: 0px;
  }

  .signin-form .input-icon {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    width: 20px;
  }

  .custom-select-span {
    margin-left: 5%;
  }

  .signin-btn,
  .signin-btn1 {
    width: 248px;
    height: 34px;
    font-size: 12px;

    border-radius: 8px;
  }

  .signin-btn {
    margin-top: 5%;
  }

  .signin-btn:hover {
    background: linear-gradient(0deg, #883979, #883979),
      linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    background-blend-mode: overlay;
  }

  .remember-me span {
    font-size: 10px;
    line-height: 16px;
  }

  .forgot-password-link {
    font-size: 10px;
  }

  .custom-select-container,
  .custom-select {
    width: 246px;
    height: 34px;
    gap: 0px;
  }

  .custom-select-span {
    font-size: 12px;
  }

  .input-frame {
    width: 248px;
    height: 34px;
  }

  .signin-dropdown-arrow {
    margin-right: 8px;
  }

  .form-actions h4 {
    font-size: 10px;
  }

  .signin-form .form-group {
    margin-bottom: 16px;
    width: 100%;
    height: 34px;
    position: relative;
  }

  /* .signin-form .error-text {
    font-size: 12px;
    color: red;
    text-align: left;
    margin-top: 5px;
  } */
  .form-group1 .error-text {
    font-size: 12px;
    color: #e74c3c;
    text-align: left;
    margin-bottom: -30px;
    font-weight: bold;
  }

  .form-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
  }

  .form-actions h4 {
    margin: 10px 0;
  }

  .signin-input-with-icon .password-visibility-toggle img {
    width: 20px;
    height: 20px;
    padding-bottom: 12px;
  }

  .dark-mode-toggle {
    bottom: 20%;
  }

  .error-text {
    font-size: 6px !important;
    top: 10px;
  }

  .error-text-email {
    font-size: 6px !important;
    font: inherit;
    margin-top: -15px !important;
    padding: 0px;
    left: 14px;
    margin: 0px;
    margin-left: 0px;
    margin-left: 10px;
    text-align: left !important;
  }
}

@media (min-width: 741px) and (max-width: 1200px) {
  .signin-container {
    padding: 0 20px;

    display: flex;
    justify-content: center;
  }

  .error-text {
    font-size: 10px !important;
  }

  .error-text-email {
    font-size: 10px !important;
  }

  .signin-frame {
    margin: 40px auto;

    padding: 25px;

    width: 90%;

    max-width: 600px;
  }

  .signin-frame h3 {
    font-size: 29px;
  }

  .signin-frame p {
    font-size: 16px;
  }

  .signin-frame input[type="email"],
  .signin-frame input[type="password"],
  .signin-frame input[type="text"],
  .signin-btn,
  .signin-btn1 {
    font-size: 15px;
  }

  .dark-mode-toggle {
    bottom: 2%;
  }
}

.signin-container .dark-mode :-webkit-autofill,
.signin-container .dark-mode input:-webkit-autofill:hover,
.signin-container .dark-mode input:-webkit-autofill:focus,
.signin-container .dark-mode input:-webkit-autofill:active {
  box-shadow: 0 0 0px 1000px transparent inset !important;
  -webkit-text-fill-color: #b3b3b3;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: white;
}

.acceptterms {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
  align-self: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.success-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.success-popup-content {
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  padding: 20px 40px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease-in-out;
  width: 400px;
  height: 250px;
}

.dark-mode .success-popup-content {
  background-color: #1e0419;
}

.icon {
  margin-bottom: 15px;
}

.icon svg {
  fill: green;
}

.success-popup-content h2 {
  color: #333;
  margin-bottom: 10px;
  font-family: Poppins;
  font-size: 40px;
  font-weight: 500;
  line-height: 60px;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dark-mode .success-popup-content h2 {
  color: white;
}
.dark-mode .success-popup-content p {
  color: white;
}
.success-popup-content p {
  color: #666;
  margin: 0;
  font-family: Open Sans;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.0288em;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.success-check-icon {
  position: relative;
  left: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  background-color: green;
  border-radius: 100%;
  color: white;
}

@keyframes fadeIn {
  from {
    opacity: 1;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  padding: 20px 40px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease-in-out;
  width: 400px;
  height: 250px;
}

.dark-mode .popup-content {
  background-color: #1e0419;
}

.icon {
  margin-bottom: 15px;
}

.icon svg {
  fill: red;
}

.popup-content h2 {
  color: #333;
  margin-bottom: 10px;
  font-family: Poppins;
  font-size: 40px;
  font-weight: 500;
  line-height: 60px;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dark-mode .popup-content h2 {
  color: white;
}
.popup-content p {
  color: #666;
  margin: 0;
  font-family: Open Sans;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.0288em;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dark-mode .popup-content p {
  color: white;
}

.check-icon {
  position: relative;
  left: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  background-color: red;
  border-radius: 100%;
  color: white;
}

@keyframes fadeIn {
  from {
    opacity: 1;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.Doctor-dashboard {
  width: 100%;
  height: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(/static/media/bg.b8637adb17db611a82bc.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 200px;
}

.dark-mode .Doctor-dashboard {
  background-image: url(/static/media/bgdark.3915cd3767a0a72ba2a3.png);
}
.dashboard-container {
  margin: 30px 60px 15px 60px;
  position: relative;
  gap: 50px;
}

.dark-mode .menu-options {
  background-color: #2d1227;
}

.dark-mode.Doctor-dashboard {
  background-color: #1e0419;
  color: #e0e0e0;
}
.dark-mode .dashboard-container {
  background-color: transparent;
  /* border-radius: 12px; */
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
}

.dashboard-container-box {
  width: 1081px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex-shrink: 0;
}

.card {
  display: flex;
  width: 249px;
  height: 372px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: #fff;
  background: var(--Primary-Base-White, #fff);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.dark-mode .card {
  background: #2d1227;
}

.menu-options {
  align-self: stretch;
  height: 324px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
}

.menu-item {
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
  color: #808080;
  background: none;
  border: none;
  padding: 11px 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s, color 0.3s;
  width: 100%;
}

.menu-item.active {
  background-color: #883979;
  color: white;
}

.menu-item:hover {
  background-color: #883979;
  color: white;
}
.menu-item.cases {
  width: 201px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.menu-item.patients {
  padding-left: 59px;
  padding-right: 63px;
}

.menu-item.reports {
  padding-left: 61px;
  padding-right: 64px;
}

.menu-item.assistance {
  padding-left: 47px;
  padding-right: 52px;
}

.menu-item.chat {
  padding-left: 37px;
  padding-right: 43px;
}

.graph-title {
  left: 0;
  top: 0;
  position: absolute;
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}

.graph-chart {
  width: 527px;
  height: 324px;
  left: 0;
  top: 48px;
  position: absolute;
  background: white;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.dark-mode .graph-chart {
  background: #2d1227;
}

.overview-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.overview-title {
  position: absolute;
  left: 0;
  top: 0;
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}

.dark-mode .overview-title {
  color: #e6e6e6;
}
.card-container {
  width: 249px;
  height: 324px;
  position: absolute;
  left: 0;
  top: 48px;
  background: white;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dark-mode .card-container {
  background: #2d1227;
}

.search-dashboard-wrapper {
  width: 1081px;
  height: 550px;
  flex-shrink: 0;
  margin: 15px 60px 30px 60px;
}

.cases-graph-data-box {
  width: 804px;
  height: 372px;
  flex-shrink: 0;
  display: flex;
}
.Container1 {
  display: flex;
  align-items: center;
  gap: 28px;
  align-self: stretch;
  width: 1081px;
}

.Cases-container1 {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.Cases-container2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.Main-Content1 {
  width: 804px;
  height: 372px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.Main-Content2 {
  width: 1081px;
  height: 550px;
  flex-shrink: 0;
}

.Graphdata-boxx {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 28px;
}

.graph-title {
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px; /* 150% */
  letter-spacing: 0.48px;
  text-align: left;
}

.dark-mode .graph-title {
  color: #e6e6e6;
}

.doctor-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: -25px;
}

.doctor-title h1 {
  font-size: 24px;
  color: #7e3a89;
  font-weight: bold;
  font-family: "Arial", sans-serif;
  text-align: center;
}

.doctor-title span {
  flex: 0 0 50px;
  height: 1px;
  background-color: #7e3a89;
}

/*.footer-container {
    display: inline-flex;
    padding: 16px 60px;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: 648px;
}*/
.footer-container-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #fff;
  z-index: 999;
}

.dark-mode .footer-container-box {
  background-color: #1e0419;
}
.dark-mode .footer-info-date,
.footer-timezone-text {
  color: #e6e6e6;
}

.dark-mode .footer-info-time {
  color: #e6e6e6;
}

.dark-mode .footer-timezone-select {
  color: #e6e6e6;
}

.footer-left-section,
.footer-right-section {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 60px;
}

.footer-icon-button {
  width: 30px;
  height: 30px;
  padding: 5px;
  background: #f3f3f3;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-icon-button:hover {
  background: #883979;
  color: #ffffff !important;
}
.footer-icon-button.active {
  background: #883979;
  color: #ffffff;
}

.dark-mode .footer-icon-button:hover {
  background: #ad499a;
}
.dark-mode .footer-icon-button.active {
  background: #ad499a;
}

.dark-mode .footer-icon-button {
  background-color: #1e0419;
}

.dark-mode .footer-icon-button img {
  filter: invert(1);
}

.footer-icon-background {
  width: 24px;
  height: 24px;
  position: relative;
}

.footer-icon {
  width: 19px;
  height: 19px;

  left: 2.5px;
  top: 2.5px;
}

.footer-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-info-text {
  display: flex;
  gap: 6px;
}

.footer-info-date,
.footer-info-time,
.footer-timezone-text {
  color: black;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  white-space: nowrap;
}

.footer-timezone {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-timezone-select {
  background: none;
  border: none;
  color: black;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  cursor: pointer;
  width: 140px;
}
.dark-mode .footer-timezone-select {
  background-color: #1e0419;
}
.dark-mode .footer-timezone-select option {
  color: white;
}

.footer-timezone-icon {
  width: 20px;
  height: 20px;
  position: relative;
  transform: rotate(-90deg);
  transform-origin: 0 0;
}

.footer-arrow {
  width: 6.71px;
  height: 11.31px;
  position: absolute;
  left: 8.35px;
  top: 6.35px;
  background: black;
}
.custom-dropdown-wrapper-timeZone {
  position: relative;
  width: 100%;
}

.custom-dropdown-timeZone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #883979;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}
.dark-mode .custom-dropdown-timeZone {
  color: #f3f3f3;
}

.custom-dropdown span {
  font-size: 16px;
  color: #333;
}

.dropdown-icon {
  font-size: 12px;
  color: #883979;
}

.custom-dropdown-options-timeZone {
  position: absolute;
  top: -920%;
  left: 0;
  max-height: 400px;
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden;
  width: 110%;
  margin-top: 10px;
  padding: 0;
  list-style: none;
  border: 1px solid #883979;
  background-color: #fff;
  border-radius: 5px;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Hide scrollbar for all browsers */
  scrollbar-width: none; /* Firefox */
}
.custom-dropdown-options-timeZone::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Edge */
}

.custom-dropdown-option-timeZone {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  color: #333;
}

.custom-dropdown-option-timeZone:hover {
  background-color: #883979;
  color: #fff;
}

.header-container {
  width: 100%;
  height: 80px;
  position: sticky;
  top: 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}
.header-container.dark-mode {
  background-color: #1e0419;
  color: white;
}

.greeting-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 60px 16px 60px;
}

.greeting-container-box {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;


}

.dark-mode .greeting-text {
  color: white;
}

.greeting-text {
  color: #000;
  color: var(--Primary-Base-Black, #000);

  font-family: "Open Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  /* 150% */
  letter-spacing: 0.691px;
}

.avatar-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.avatar {
  width: 38px;
  height: 38px;
  background: #e6e6e6;
  border-radius: 50%;
}

.avatar img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.dropdown-icon {
  width: 24px;
  height: 24px;
  position: relative;
  margin-left: 8px;
  cursor: pointer;
}

.dropdown-arrow {
  width: 6.71px;
  height: 11.31px;
  position: absolute;
  top: 8px;
  left: -6px;
  transition: transform 0.2s ease;
}

.notification-dropdown {
  position: absolute;
  margin-top: 10px;
  top: 80px;
  right: 0;
  padding-top: 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  width: 500px;
  height: 404px;
  z-index: 1000;
  right: 120px;
  /* padding: 20px; */

  display: flex;
  flex-direction: column;
  /* gap: 32px; */
}

.notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 10;
}
.drop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  transition: opacity 0.5s ease-in-out;
}

.notification-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 444px;
  height: 80px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  font-size: 20px;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #d0d0d0;
  font-weight: 600;
  color: #b5b5b5;
  cursor: pointer;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.close-button-appointments {
  position: absolute;
  top: 20px;
  right: 36px;
  z-index: 999;
  width: 24px;
  height: 24px;

  border-radius: 50%;
  font-size: 20px;
  font-weight: bolder;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close-button:hover {
  background-color: #f8d7da;
  color: #721c24;
}
.notification-image .circle-image {
  width: 66px;
  height: 66px;
  top: 48px;
  left: 24px;
  margin-top: 12px;
  margin-left: 12px;
  margin-bottom: 12px;
  border-radius: 50%;
  margin-right: 10px;
  align-items: flex-start;
}

.notification-item:last-child {
  margin-bottom: 22px;
}

/* .notification-item:hover {
  background-color: #f0f0f0;
} */
.notification-title {
  font-family: Open Sans;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
}

.notification-time {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
  letter-spacing: 0.032em;
  text-align: left;
  color: #808080;
  margin-bottom: 10px;
}
.clear-all {
  text-align: right;
  font-family: Open Sans;
  margin-right: 24px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  color: #b8b8b8;
}

.clear-all:hover {
  cursor: pointer;
}

.dark-mode .dropdown-arrow {
  color: #f0f0f0;
}

.header-dropdown-menu {
  position: absolute;
  top: 90px;
  right: 168px;
  background: white;
  border: 1px solid #b3b3b3;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  width: 288px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border-radius: 8px 0px 8px 8px;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: transparent;
  overflow: hidden;
  pointer-events: auto;
  /* padding: 0 16px 0px 16px; */
}

.dropdown-item-logout {
  padding: 10px;
  color: black;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  width: 256px;
  padding: 16px 0px;
  text-align: left;
}
.dark-mode .header-dropdown-menu {
  background-color: #2d1227;
  border: solid 1px #b8b8b8;
  box-shadow: 0 0 0 1px #1e0419;
  color: white;
}

.dropdown-item {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  padding: 16px 10px 16px 0px;
  pointer-events: auto;
  letter-spacing: 0.032em;
  text-align: left;
  position: relative;
  color: black;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  /* border-bottom: 1px solid #e6e6e6;
    display: inline-block;
    width: 89%;
    margin-left: 16px; */
  transition: background 0.2s, color 0.2s;
}

.dropdown-item .margin-left {
  margin-left: 16px;
}

.dropdown-item:not(:last-child)::after {
  content: "";
  display: block;
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid #b3b3b3;
  position: absolute;
  bottom: 0;
  left: 5%;
}

.header-dropdown-menu .dropdown-item:first-child {
  position: relative; /* Ensures the pseudo-element is positioned within this container */
}

.header-dropdown-menu .dropdown-item:first-child::after {
  content: "";
  display: block;
  width: 90%; /* Adjust width as needed for shorter line */
  margin: 0 auto;
  border-bottom: 1px solid #b3b3b3; /* Line color */
  position: absolute;
  bottom: 0; /* Positions the line at the bottom of the dropdown-item */
  left: 5%; /* Centers the line */
}

.dropdown-item:hover::after {
  border-bottom-color: #883979;
}

.dark-mode .dropdown-item {
  color: white;
}

.dark-mode .margin-left-logout {
  color: red;
  margin-left: 16px;
}

.margin-left-logout {
  color: red;
  margin-left: 16px;
}

.dropdown-item:hover {
  background: #883979;
  box-sizing: border-box;
  color: #e6e6e6;
  border-radius: 0px 0px 0px 0px;
  border-width: 1px 0 0 0;
}

.dark-mode .dropdown-item:hover {
  background: #ad499a;
}

.logo-container img {
  width: 150px;
  height: auto;
  padding: 16px 60px 16px 60px;
  cursor: pointer;
}

.dark-mode .logo-container {
  color: #faf3f3;
}
.icon-button-container {
  display: flex;
  gap: 15px;
}

.icon-button {
  width: 38px;
  height: 38px;
  background: #f3f3f3;

  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
}

.icon-button .notiIcon {
  transition: color 0.2s;
}

.icon-button:hover {
  background-color: #883979;
  color: white;
}

.icon-button .notiIcon:focus {
  background-color: #883979;
}

.icon-button:focus {
  background: #ad499a;
  outline: none;
  box-shadow: 0 0 0 3px rgba(173, 73, 154, 0.4);
}

.icon-button img {
  width: 24px;
  height: 24px;
}
/*
.icon-button img {
  filter: invert(0); 
}

.dark-mode .icon-button img {
  color: pink; 
} */

.dark-mode .icon-button {
  background: #2d1227;
}

.dark-mode .icon-button:hover {
  background: #ad499a;
}

.dark-mode .toggle-button {
  background-color: white !important;
}
.light-mode .icon-button svg {
  fill: black;
}

/* Dark mode: White icons */
.dark-mode .icon-button svg {
  fill: white;
}

.logout-dropdown {
  color: red;
  border-bottom: none;
}

/* .logout-dropdown:hover{
  color: white !important;
}


.margin-left-logout:hover{
  color: white;
} */

.logout-dropdown:hover,
.logout-dropdown:hover .margin-left-logout {
  color: white;
}

.doctor-dashboard-progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 0px;
  z-index: 9999;
}

.doctor-dashboard-progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
  z-index: 9999;
}

.dark-mode .notification-dropdown {
  background-color: #2d1227;
  color: white;
}

.dark-mode .notification-dropdown .notification-title {
  color: white;
}
.doctor-dashboard-progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 0px;
  z-index: 999;
}

.doctor-dashboard-progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
}

@media (max-width: 768px) {
  .greeting-text {
    font-size: 20px;
    line-height: 30px;
    width: 150px;
  }
}

@media (max-width: 480px) {
  .greeting-text {
    font-size: 18px;
    line-height: 28px;
    width: 130px;
  }
}

.appointment-dropdown {
  position: absolute;
  margin-top: 10px;
  top: 50%;
  bottom: 50%;
  padding-top: 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  width: 1081px;
  height: 750px;
  z-index: 1000;
  left: 50%;
  right: 50%;
  padding: 1%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ccc #fff;
  overflow-x: hidden;
}

.appointment-header {
  color: black;
}

.appointment-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1048px;
  height: 42px;
  background-color: #f9f5f8;
  border-radius: 2px;
}

.table-header-appointment {
  color: #883979 !important;
  text-align: center !important;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.table-header-appointment {
  flex: 1 1;
  color: #883979 !important;
}

.table-appointment-body-row {
  padding-left: 60px;
  width: 1021px;
  height: 42px;
  font-size: 14px;
}

.table-data {
  text-align: center !important;
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-left: 30px;
}

.table-title,
.table-date-time,
.table-symptoms {
  text-align: start;
  padding-left: 29px;

  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.table-buttons {
  display: flex;
}
.table-symptoms {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.table-symptoms:hover::after {
  content: attr(data-full-text);
  position: absolute;
  left: 0;
  top: -30px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
  white-space: normal;
  max-width: 200px;
  overflow-wrap: break-word;
}

.reject-button,
.accept-button {
  width: 70px;
  height: 25px;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.table-buttons .accepted-button {
  background-color: #ad499a;
  color: white;
  width: 70px;
  height: 25px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  line-height: 15px;
  font-size: 12px;
  transition: opacity 0.2s ease-in-out;
}

.reject-text {
  color: red;
  font-size: 12px;
  cursor: pointer;
  font-weight: bold;
  margin-left: 10px;
}

.table-buttons .accepted-button:hover {
  opacity: 0.8;
}

.accepted-button,
.rejected-button {
  width: 100%;
  height: 25px;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.accepted-button {
  color: #33bb39;
}

.rejected-button {
  color: red;
}

.table-buttons {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: 7px;
}

.reject-button {
  color: red;
  border: none;
}

.reject-button:hover {
  color: red;
  background-color: white;
}

.appoint-align-id {
  position: relative;
  left: -14px;
}

.appoint-align-t {
  position: relative;
  left: -50px;
}

.appoint-align-DT {
  position: relative;
  left: -34px;
}

.appoint-align-sy {
  position: relative;
  left: -34px;
}

.appoint-align-st {
  position: relative;
  left: -61px;
}

/* Button container */
.appointment-btn-header {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 30px;
  margin-top: 20px;
  margin-left: 5px;
  margin-right: 14px;
}

.appoint-btn-header {
  flex: 1 1;
  padding: 15px 82px;
  border: 2px solid transparent;
  border-radius: 8px;
  border: 1px solid #883979;
  font-size: 16px;
  margin-left: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  color: #883979;
  background-color: transparent;
}

.appoint-btn-header:hover {
  background-color: #f5f5f5;
  color: #883979;
  border-color: #883979;
}

.appoint-btn-header.selected {
  border-color: #800080;
  color: #ffffff;
  background-color: #883979;
}

.appointment-title {
  font-family: Poppins;
  font-weight: 600;
  font-size: 28px;
  display: flex;
  justify-content: center;
}

.dark-mode .appointment-dropdown {
  background-color: #1e0419;
  border-color: #1e0419;
}

.dark-mode .appointment-header-row {
  background-color: #883979;
}

.dark-mode .appointment-title {
  color: white;
}

.new-notification-symbol {
  width: 10px;
  height: 10px;
  background-color: #32cd32;
  position: absolute;
  z-index: 1000;
  border-radius: 100%;
  right: 0px;
  top: 0px;
}

.mainNotificationContainer {
  width: 350px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 16px;
  position: fixed;
  top: 90px;
  right: 100px;
  border: 1px solid #ddd;
}

.dark-mode .mainNotificationContainer {
  background-color: #1e0419;
}

.headerNotificationBox {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
  color: black;
  font-family: "Open Sans";
  margin-top: 0px;
}

.notification-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 250px;
  overflow-y: auto;
}

.notification-item-header {
  color: black;
  padding: 20px;
  background-color: #f9fafb;
  border-radius: 6px;
  margin-bottom: 8px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  height: 10px;
  gap: 10px;
  font-size: 14px;
  font-family: "Poppins";
  font-weight: 500;
}
.notification-title {
  color: black;
}
.dark-mode .notification-title {
  color: white;
}

.dark-mode .notification-item-header {
  background-color: transparent;
  border: 1px solid #7e3a89;
  color: #fff;
}

.notification-item:last-child {
  margin-bottom: 0;
}

.notification-icon {
  width: 24px;
  height: 24px;
  background-color: #60a5fa;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.no-notifications {
  color: #6b7280;
  text-align: center;
  padding: 10px;
}

.notification-message {
  font-size: 16px;
  font-weight: 500;
}

.notification-date {
  font-size: 12px;
  color: gray;
  margin-top: 2px;
}

.search-patient-container {
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  display: inline-flex;
}
.search-patient-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.search-patient-box {
  width: 894px;
  height: 46px;
  transition: border-color 0.3s ease;
  background: white;
  border: 1px solid #cccccc;
  border-radius: 8px;
  overflow: hidden;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.search-patient-box:hover {
  border: 1px solid #883979;
}

.search-patient-box.filled {
  border-color: #883979;
}

.dark-mode .search-patient-box {
  background: transparent;
  border: 1px solid #cccccc !important;
}

.search-patient-content {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  display: inline-flex;
}

.search-patient-icon {
  width: 44px;
  height: 44px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-patient-icon-inner {
  width: 17.19px;
  height: 17.19px;
  left: 3.4px;
  top: 3.38px;
  position: absolute;
}

.search-patient-icon img {
  width: 24px;
  height: 24px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.search-patient-placeholder {
  color: rgba(0, 0, 0, 0.2);
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  word-wrap: break-word;
}

.search-patient-add-button {
  padding: 9px 16px 9px 16px;
  background: #2585e0;
  border-radius: 8px;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  display: flex;
  cursor: pointer;
  width: 150px;
}
.search-patient-add-button:hover {
  background: linear-gradient(0deg, #2585e0, #2585e0),
    linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  background-blend-mode: overlay;
}

.search-patient-add-button.disabled {
  background: grey;
}

.search-patient-add-content {
  align-self: stretch;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.search-patient-add-icon {
  width: 28px;
  height: 28px;
  position: relative;
}

.search-patient-add-icon-inner {
  width: 15.17px;
  height: 15.17px;
  left: 6.42px;
  top: 6.42px;
  position: absolute;
}

.search-patient-add-text {
  color: white;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  word-wrap: break-word;
}

.search-input-box {
  width: 675px;
}

.pagination-button {
  background-color: #ccc;
  color: #fff;
  border: none;

  border-radius: 50%;
  cursor: pointer;

  flex-shrink: 0;
  transition: background-color 0.3s ease;
  padding: 0;
  margin: 15px 24px 15px 24px;
}

.pagination-button:disabled {
  background-color: grey;
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination-button img {
  width: 24px;
  height: 24px;
  position: relative;
  top: 2.5px;
}
.pagination-button:hover {
  background-color: #fcf4fb;
}
.pagination-button:first-of-type {
  color: #b3b3b3;
  background: #883979;
}

.pagination-button:last-of-type {
  background-color: #883979;
}
svg.MuiSvgIcon-root.MuiSvgIcon-fontSizeMedium.css-qf5xn0-MuiSvgIcon-root {
  margin-top: 2px;
}

.pagination-number {
  color: #333333;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .pagination-number {
  color: #e6e6e6;
}

.dark-mode .pagination-button:first-of-type {
  background-color: #1e0419;
}

/* Disabled button style */
/* .pagination-button:disabled {
    background-color: #ffffff; 
    cursor: not-allowed; 
    } */

.pagination .page-number {
  font-size: 16px;
  font-weight: bold;
}

.pagination-controls-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-data-container {
  display: flex;
  width: 1079px;
  height: 308px;
  padding: 30px 0px 29px 0px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.no-data-container img {
  width: 300px;
  height: 249px;
  flex-shrink: 0;
}

.patient-table-header {
  height: 42px;
  background: white;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  padding: 8px 20px;
  align-items: center;
  color: #000;
  color: var(--Primary-Base-Black, #000);

  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.512px;
}

.dark-mode .patient-table-header {
  background-color: #1e0419;
  color: #ccc;
}

.FN,
.LN,
.PN,
.DR,
.TR {
  position: relative;
}

.FN {
  right: 19px;
}

.LN {
  right: 8px;
}

.PN {
  left: 51px;
}

.DR {
  right: -8px;
}

.TR {
  right: -100px;
}

.patients-pagi {
  margin-top: 25px;
}
/* Header cell with dropdown */
.sp-header-cell {
  position: relative;
  display: flex;
  align-items: center;
}

.sp-dropdown-icon svg {
  color: #ccc !important; /* Light grey by default */
  transition: color 0.2s ease;
}

.sp-dropdown-icon.active svg {
  color: #000 !important; /* Black when active */
}

.sp-dropdown-icon.dark svg {
  color: #501242 !important; /* Black when active */
}

.patient-form-container {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(158, 158, 158, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 1000;
}

.blood-group-select {
  width: 100%;
  height: 50px;
  border: 1px solid #a0a0a0;
  border-radius: 10px;
  color: #cccccc;
  padding: 0px 0px 0px 8px;
  background-color: transparent;
  font-size: smaller;
  display: flex;
  justify-content: space-between;
}

option {
  color: black;
}

.patient-form-city-select {
  width: 100%;
  height: 50px;
  border: 1px solid #a0a0a0;
  border-radius: 10px;
  color: #cccccc;
  padding: 0px 0px 0px 8px;
  background-color: transparent;
  font-size: smaller;
}

.patient-form-city-select.filled {
  border-color: #883979;
  color: #883979;
}

.blood-group-select.filled {
  color: #883979;
  border: 1px solid #883979;
}
.dark-mode .patient-form-container {
  background-color: #1e0419;
  background: rgba(158, 158, 158, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.form-content {
  background: white;

  padding: 20px;

  border-radius: 10px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

input {
  background-color: transparent;
  color: white;
  border: 1px solid #ccc;
}

.dark-mode :-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode input:-webkit-autofill:active {
  box-shadow: 0 0 0px 1000px transparent inset !important;
  -webkit-text-fill-color: white;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: white;
}

.dark-mode input:focus {
  background-color: transparent;
  outline: none;
  border-color: #aaa;
}

.patient-form {
  /* position: absolute;
  top: 50px; */
  width: 1017px;
  /*height: 760px;*/
  display: flex;
  flex-direction: column;
  gap: 48px;
  flex-shrink: 0;
  margin: 0 auto;
  /* margin-bottom: 55px; */
  padding: 32px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@media (max-width: 800px) {
  .patient-form {
    width: 90%;
    padding: 16px;
    max-height: 700px;
  }
}

.dark-mode .patient-form {
  background-color: #2d1227;
  border: none;
}

input,
button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
}

.dark-mode #gender {
  color: #b3b3b3;
  background-color: #1e0419;
}
.dark-mode #dob {
  color: white;
}

.dark-mode .patient-form-input.filled {
  color: white;
}

.dark-mode .country-code-dropdown {
  color: white;
}

.dark-mode #dob {
  background-color: #1e0419;
}

.slide-indicator {
  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
}

.slide-indicator-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  margin: 0px 30px 0px 0px;
}

#gender {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  padding: 0px 0px 0px 8px;
  background-color: #fff;
  color: #883979;
}

.circle {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #bbb;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  z-index: 2;
}

.circle1 {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border: 2px solid #883979;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-indicator-item.active .circle {
  background-color: #883979;
}
.slide-label {
  display: none;
}
.slide-indicator-item.active .slide-label {
  display: inline;
  margin-left: 10px;
  font-size: 14px;
  color: #333;
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: Poppins;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.slide-indicator-box {
  display: flex;
  position: relative;
}

::placeholder {
  color: #b3b3b3;
}

.slide-indicator-item::after {
  content: "";
  position: relative;
  top: 50%;
  right: -15px;

  width: 71px;

  height: 1px;

  background-color: #e6e6e6;

  z-index: 1;
}

.slide-indicator-item.active::after {
  background-color: #bbb;
}

.slide-indicator-item:last-child::after {
  display: none;
}

.form-buttons-container {
  display: flex;
  justify-content: space-between;
}

.clear-button {
  background-color: #f44336;
  color: white;
}

.nav-form-buttons {
  display: flex;
  gap: 10px;
}

.button {
  padding: 10px 20px;

  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease;
}

.back-button {
  border: 1px solid #b3b3b3;
  color: #b3b3b3;
}

.button:disabled {
  background-color: #9e9e9e;
  cursor: not-allowed;
}

/* .button:hover:not(:disabled) {
  background-color: blue;
} */

.clr-form-button {
  display: flex;
}

.patient-container-box-fields {
  display: flex;
  width: 1017px;
  flex-direction: column;
  align-items: center;
  /* gap: 32px; */
}

.patient-form-row {
  display: flex;
  /* flex-direction: column; */
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  width: 100%;
}
.row-3 {
  flex-direction: column;
}

.patient-form-group {
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  width: 100%;
  /* gap: 12px; */
  color: #000000;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  /* line-height: 30px; */
  letter-spacing: 0.024em;
  text-align: left;
  margin-top: 15px;
}

.dark-mode .patient-form-group {
  color: #e6e6e6;
}

.patient-container-box-fields input[type="tel"],
.patient-container-box-fields input[type="email"],
.patient-container-box-fields input[type="text"],
.patient-container-box-fields input[type="date"],
.patient-address-form input[type="text"],
.patient-container-box-fields #gender[type="gender"] {
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.512px;
  width: 97%;
  height: 46px;
  border-radius: 8px;
  padding: 0px 0px 0px 12px;
}

.dark-mode .patient-container-box-fields input[type="tel"],
.dark-mode .patient-container-box-fields input[type="email"],
.dark-mode .patient-container-box-fields input[type="text"],
.dark-mode .patient-container-box-fields input[type="date"],
.dark-mode .patient-address-form input[type="text"],
.dark-mode .patient-container-box-fields #gender[type="gender"] {
  background-color: transparent;
  color: white;
}
/* .patient-container-box-fields input[type="tel"] {
  color: #883979;
} */

.dark-mode .patient-container-box-fields input[type="date"] {
  color: white;
}

#placeOfBirth {
  width: 98.5%;
}

#dob {
  width: 93%;
}

#problem-slide {
  display: flex;
}

.form-group2 {
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  width: 494px;
  gap: 12px;
}

.form-label {
  align-self: stretch;
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  text-align: left;
}

.dark-mode .form-label {
  color: #e6e6e6;
}

.form-group2 .input-field {
  width: 1017px;
  padding: 10px 12px;
  border: 1px solid #a0a0a0;
  border-radius: 8px;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  color: rgba(0, 0, 0, 0.8);
}

.full-width {
  width: 100%;
}

.contact-info-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
}

.contact-input {
  width: 100%;
}

.patient-address-form {
  display: flex;
  flex-direction: column;
  /* gap: 32px; */
}

.contact-section {
  margin-bottom: 15px;
}

.contact-label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.contact-input {
  position: relative;
}

.contact-placeholder {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.contact-placeholder:focus {
  border-color: #007bff;
  outline: none;
}

.icon-container {
  position: absolute;
  right: 10px;
  top: 50%;

  transform: translateY(-50%);

  cursor: pointer;
}

.select-container {
  position: relative;
}

.select-container select {
  width: 100%;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 4px;

  font-size: 16px;

  -webkit-appearance: none;

          appearance: none;

  background-size: 12px;
}

.input-group {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.dark-mode .exit-icon {
  color: white;
}

.input-label {
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  margin-bottom: 8px;
}

#address1,
#address2 {
  width: 98.5% !important;
}

.input-field-full {
  width: 100%;
  height: 163px;
  align-self: stretch;
}

.lengthReferal {
  width: 1002px !important;
  color: #999;
  color: var(--Neutrals-Neutral-07, #999);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.512px;
  border: none;
  width: 97%;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #a0a0a0;
  padding: 0px 0px 0px 12px;
}
.lengthReferal.filled {
  border: 1px solid #883979;
  color: #883979;
}
.paymentWidth {
  width: 470px;
}

.notes {
  margin-top: 10px;
  height: 163px;
  width: 1010px !important;
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  margin: 0px !important;
}
.notes.filled {
  border: 1px solid #883979;
  color: #883979;
}

.dark-mode .notes {
  background-color: transparent;
}

.contact-input-select-container {
  display: flex;
  padding: 10px 12px;
  justify-content: center;
  align-items: flex-start;
  gap: 922px;
  align-self: stretch;
}

.slide-content-3 {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.form-group3 {
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  width: 500px;
  justify-content: center;
  gap: 12px;
}

.form-row3 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  align-items: center;
  gap: 30px;
}

.form-group4 {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
}

.input-field4 {
  width: 100%;
  height: 46px;
  align-self: stretch;
  border-radius: 6px;
  border: 1px solid #999;
  border: 1px solid var(--Neutrals-Neutral-07, #999);
}

.exit-icon {
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: pointer;
  font-size: 24px;
  color: #333;
  font-size: 32px;
  width: 32px !important;
  height: 32px !important;
}

.patient-payment-input-container {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  gap: 20px;
}

.patient-payment-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
}

.patient-payment-field {
  width: 494px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.patient-payment-label {
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  text-align: justify;
}

.dark-mode .patient-payment-label {
  color: #e6e6e6;
}

.patient-payment-input {
  padding: 0px 12px;
  height: 46px;
  border-radius: 8px;
  border: 1px #a0a0a0 solid;
}
.dark-mode .patient-payment-input {
  background-color: transparent;
}

.patient-payment-type-label,
.patient-payment-amount-label {
  font-weight: 600;
  margin-bottom: 8px;
  color: #000000;

  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
}

.dark-mode .patient-payment-type-label {
  color: #e6e6e6;
}

.patient-payment-type-select {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  border: 1px solid #a0a0a0;
  color: #b3b3b3;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.512px;
  padding-left: 10px;
}
.patient-payment-type-select.filled {
  color: #883979;
  border: 1px solid #883979;
}
.dark-mode .patient-payment-type-select {
  background-color: transparent;
}

.patient-payment-type-select:focus {
  border-color: #007bff;
}

.patient-payment-amount-container {
  margin-top: 20px;
}

.patient-payment-amount-input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  color: #555;
  outline: none;
  transition: border-color 0.3s ease;
}

.patient-payment-amount-input:focus {
  border-color: #007bff;
}

.dropdown-container {
  position: relative;
}

.dropdown-container select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.required {
  color: red;
  margin-right: 2px;
}

.gender-dropdownIcon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
}

.credit-card-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: left;
  grid-gap: 20px;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 30px 0px;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
}

.input-field {
  border: 1px solid #b3b3b3;
  width: 494px;
}

.dark-mode .input-field {
  background-color: transparent;
}

.patient-form-input {
  padding: 0px 12px;
  border: 1px solid #a0a0a0;
  border-radius: 8px;
  height: 46px;
  width: 97%;
}
.patient-form-input.filled {
  border: 1px solid #883979;
}
.patient-form-textbox {
  border: 1px solid #a0a0a0;
  color: #b3b3b3;
}
.patient-form-textbox.filled {
  color: #883979;
  border: 1px solid #883979;
}
.dark-mode .patient-form-textbox {
  background-color: #2d1227 !important;
}
.patient-form-textbox:hover,
.patient-form-input:hover,
.blood-group-select:hover,
.patient-form-city-select:hover,
.lengthReferal:hover,
.notes:hover {
  border: 1px solid #883979;
}
.dark-mode .patient-form-group label {
  color: white;
}
.dark-mode .lengthReferal {
  background-color: #2d1227 !important;
}
.patient-payment-input input::-webkit-outer-spin-button,
.patient-payment-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.payment-placeholder {
  width: 459px;
  height: 34px;
  color: #b3b3b3;
}

.error-phone {
  color: red;
  font-size: 10px !important;
  margin-top: 4px !important;
  position: relative !important;
  font-weight: bold;
}

.primaryC-width {
  width: 1017px !important;
}

.patient-gaps {
  gap: 1px !important;
}
.patient-form-textbox {
  width: 97% !important;
}
.custom-dropdown-gender {
  background: white;
  border: 1px solid #ccc;
  padding: 8px;
  cursor: pointer;
  text-align: left;
  position: relative;
  font-family: Poppins;
  font-weight: 400 !important;
  font-size: 14px !important;
  border-radius: 8px;
  height: 30px;
  display: flex;
  align-items: center;
  display: flex;
  justify-content: space-between;
  /* justify-content: center; */
}

.custom-dropdown-blood {
  background: white;
  border: 1px solid #ccc;
  padding: 8px;
  cursor: pointer;
  text-align: left;
  position: relative;
  font-family: Poppins;
  font-weight: 400 !important;
  font-size: 14px !important;
  border-radius: 8px;
  height: 30px;
  display: flex;
  align-items: center;
  width: 470px;
  /* justify-content: center; */
}
.custom-dropdown-blood1 {
  background: white;
  color: #b3b3b3;
  border: 1px solid #b3b3b3;
  padding: 8px;
  cursor: pointer;
  text-align: left;
  position: relative;
  font-family: Poppins;
  font-weight: 400 !important;
  font-size: 14px !important;
  border-radius: 8px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 998px;
  /* justify-content: center; */
}
.custom-dropdown-blood2 {
  border: 1px solid #ccc;
  color: #b3b3b3;
  padding: 8px;
  cursor: pointer;
  text-align: left;
  position: relative;
  font-family: Poppins;
  font-weight: 400 !important;
  font-size: 14px !important;
  border-radius: 8px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 475px;
  /* justify-content: center; */
}
.custom-dropdown-blood1:hover,
.custom-dropdown-blood1:focus {
  border: 1px solid #883979;
}
.dark-mode .custom-dropdown-blood {
  background-color: #2d1227;
}
.dark-mode .custom-dropdown-blood1 {
  background-color: #2d1227;
}
.custom-dropdown-blood-menu::-webkit-scrollbar {
  width: 8px;
  border-radius: 100px;
}
.custom-dropdown-blood1-menu::-webkit-scrollbar {
  width: 8px;
  border-radius: 100px;
}
.custom-dropdown-blood-menu::-webkit-scrollbar-thumb {
  background-color: #883979;
  border-radius: 100px;
}
.custom-dropdown-blood1-menu::-webkit-scrollbar-thumb {
  background-color: #883979;
  border-radius: 100px;
}
.custom-dropdown-blood-menu::-webkit-scrollbar-track {
  background: transparent;
}
.custom-dropdown-blood1-menu::-webkit-scrollbar-track {
  background: transparent;
}
.custom-dropdown-blood-menu::-webkit-scrollbar-thumb:hover {
  background-color: #883979;
}
.custom-dropdown-blood1-menu::-webkit-scrollbar-thumb:hover {
  background-color: #883979;
}

.custom-dropdown-blood1.filled {
  border: 1px solid #883979;
  color: #883979;
}
.custom-dropdown-blood2.filled {
  border: 1px solid #883979;
  color: #883979;
}

.custom-dropdown-gender-menu {
  width: 495px;
  position: absolute;
  top: 100%;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  border-radius: 8px;
  font-family: Poppins;
  font-weight: 400 !important;
  font-size: 14px !important;
}
.custom-dropdown-blood-menu {
  position: absolute;
  top: 100%;
  width: 490px;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  border-radius: 8px;
  font-family: Poppins;
  font-weight: 400 !important;
  font-size: 14px !important;
}

.custom-dropdown-case-menu {
  position: absolute;
  top: 100%;
  width: 123%;
  background-color: #2d1227;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  border-radius: 8px;
  font-family: Poppins;
  font-weight: 400 !important;
  font-size: 14px !important;
}
.custom-dropdown-blood1-menu {
  position: absolute;
  top: 100%;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  border-radius: 8px;
  font-family: Poppins;
  font-weight: 400 !important;
  font-size: 14px !important;
}
.dark-mode .custom-dropdown-gender-menu {
  background-color: #2d1227;
  color: white;
}
.dark-mode .custom-dropdown-blood-menu {
  background-color: #2d1227;
  color: white;
}
.dark-mode .custom-dropdown-blood1-menu {
  background-color: #2d1227;
  color: white;
}
.custom-dropdown-gender-item {
  padding: 8px;
  cursor: pointer;
  text-align: left;
}
.custom-dropdown-blood-item {
  padding: 8px;
  cursor: pointer;
  text-align: left;
  background-color: white;
}

.custom-dropdown-patient-item {
  width: 100%;
}
.custom-dropdown-blood1-item {
  padding: 8px;
  cursor: pointer;
  text-align: left;
}

.custom-dropdown-gender-item:hover {
  background: #883979;
  color: white;
}

.custom-dropdown-blood-item:hover {
  background: #883979;
  color: white;
}
.custom-dropdown-blood1-item:hover {
  background: #883979;
  color: white;
}
.patient-form-group label {
  font-size: 14px;
  font-weight: 400 !important;
  font-family: Poppins !important;
}
.country-code-dropdown1 {
  position: relative;
  width: 400px;
}
.custom-dropdown-blood {
  color: #b3b3b3;
}
.custom-option:hover {
  color: white;
}
.dark-mode .custom-option {
  color: white;
}

.alert-limit-exceed-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.alert-limit-exceed-popup-container {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.alert-limit-exceed-popup-icon {
  color: #e53935;
  margin-bottom: 16px;
}

.alert-limit-exceed-popup-icon svg {
  width: 48px;
  height: 48px;
  fill: #e53935;
}

.alert-limit-exceed-popup-title {
  color: #e53935;
  font-size: 24px;
  font-weight: bold;
}

.alert-limit-exceed-popup-message {
  color: #333;
  font-size: 16px;
  margin-bottom: 24px;
  line-height: 1.5;
}

.alert-limit-exceed-popup-actions {
  display: flex;
  justify-content: start;
  gap: 16px;
}

.alert-limit-exceed-popup-admin-button {
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.alert-limit-exceed-popup-admin-button:hover {
  background-color: #883979;
}

.alert-limit-exceed-popup-cancel-button {
  background-color: transparent;
  color: #883979;
  border: 1px solid #883979;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.alert-limit-exceed-popup-cancel-button:hover {
  background-color: #ffcbf5
  
}

.dashboard-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex-direction: column;
  gap: 30px;
}
.dark-mode .cases-container {
  background-color: #2d1227;
  border: none;
  box-shadow: 0 0 0 1px #2d1227;
}

.dark-mode .case-title {
  color: #e6e6e6;
}

.dark-mode .case-count {
  color: #e6e6e6;
}

.dashboard-header {
  width: 1081px;
  height: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.action-bar {
  width: 1081px;
  height: 46px;
  position: absolute;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.button.add-patient {
  width: 157px;
  height: 46px;
  background: #2585e0;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.button.add-patient:hover {
  background: #0e5ea9;
}

.add-patient.disabled:hover {
  background: grey;
}
.add-patient.disabled {
  background: grey;
}

.button-content {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.icon-wrapper {
  width: 28px;
  height: 28px;
  position: relative;
}

.icon {
  position: absolute;
  right: 18px;
}

th:nth-child(4),
td:nth-child(4) {
  text-align: left;
}

td:nth-child(4) {
  text-align: left !important;
}

.button-label {
  color: white;
  font-size: 16px;
  font-family: "Poppins";
  font-weight: 500;
}

.tbTime {
  position: relative;
  right: -59px;
}

.tdTime {
  position: relative;
  right: -59px;
}

.search-input {
  width: 894px;
  height: 46px;
  background: white;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid white;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  border-color: #883979;
}

.search-input.filled {
  border-color: #883979;
}

.dark-mode .search-input {
  background-color: transparent;
  border: 1px solid #cccccc !important;
  color: #ad499a;
}

.dark-mode .search-input:focus {
  border: 1px solid #ad499a !important;
}

.input-content {
  display: flex;
  align-items: center;
  gap: 1px;
}

.search-icon {
  width: 17.19px;
  height: 17.19px;
  position: absolute;
  top: 3.38px;
  left: 3.4px;
  color: #b3b3b3;
}
.inputWidth {
  width: 715px;
}
input:focus {
  outline: none;
  box-shadow: none;
  border-color: currentColor;
  border-color: initial;
}

input {
  color: #883979;
  color: var(--Neutrals-Neutral-07, #883979);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  line-height: 26px;
  padding: 5px;
  /* 162.5% */
  letter-spacing: 0.512px;
  border: none;
  background-color: transparent;
}

.statistics-overview {
  width: 1080px;
  height: 124px;
  position: relative;
  top: 76px;
  display: flex;
  justify-content: space-between;
  gap: 28px;
}

.patient-table {
  width: 1081px;
  height: 680px;
  display: flex;
  flex-direction: column;
  /* gap: 25px; */
  margin-bottom: 25px;
}

.table {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.table-header {
  text-align: left;
  height: 42px;
  background: white;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  align-items: center;
  color: #000;
  color: var(--Primary-Base-Black, #000);

  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.032em;
}

.dark-mode .table-header th {
  color: #e6e6e6 !important;
  /* color:  #E6E6E6; */
}
.dark-mode .table-header {
  background-color: #1e0419;
}

.table-body {
  display: flex;
  flex-direction: column;
  gap: 12px;

  justify-content: center;
}

.table-row {
  height: 42px;
  /* background: white; */
  border-radius: 6px;
  display: flex;

  justify-content: space-between;
  padding: 0 20px;
  color: #1a1a1a;
  align-items: center;
  font-size: 16px;
  font-family: "Open Sans";
  font-weight: 600;
  text-align: left;
  line-height: 26px;
}
.dark-mode .table-row {
  color: #e6e6e6;
  background-color: transparent;
}

.table-row .table-cell {
  flex: 1 1;
  flex: 1 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  text-align: left;

  overflow: hidden;

  white-space: nowrap;

  justify-content: flex-start;

  align-items: center;

  text-align: left;
  overflow: hidden;

  white-space: nowrap;
}

.table-row:nth-child(even) {
  background: #f9f9f9;

  background: #fcf3fa;
}

.dark-mode .table-row:nth-child(even) {
  background-color: #501242;
}

.status {
  color: #000;
  color: var(--Primary-Base-Black, #000);
  padding: 8px 143px 8px 0px;

  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.512px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 143px 8px 0px;

  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.512px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-button-stats {
  width: 160px;
  height: 90px;

  padding: 16px 65px 16px 24px;
  border-radius: 12px;
  border: none;
  border: none;
}

.statistics-overview button {
  border-radius: 12px;
  border: none;
  padding: 0;
}

.header-button.active,
.cases-container.active {
  background-color: #883979;
  color: white;
}

.cases-container.active .case-title,
.cases-container.active .case-count,
.cases-container.active .percentage-text,
.cases-container.active .comparison-text {
  color: white;
}

.cases-container {
  padding-top: 16px;
  padding-bottom: 18px;
  padding-left: 24px;
  padding-right: 65px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
.dark-mode .cases-container {
  border: none;
}

.cases-info {
  width: 160px;
  align-self: stretch;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.dark-mode .cases-info {
  border: none;
}

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

.case-title {
  align-self: stretch;
  color: black;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  word-wrap: break-word;
}

.case-count {
  align-self: stretch;
  color: black;
  font-size: 28px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  word-wrap: break-word;
  text-align: left;
}

.percentage-comparison {
  align-self: stretch;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  width: 200px;
}

.percentage-box {
  width: 24px;
  height: 24px;
}

.percentage-text {
  color: #883979;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

.comparison-text {
  color: #767676;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: 30px;
  gap: 24px;
}
.searchpagination {
  font-size: small;
  color: blue;
}

.pagination button {
  background-color: #883979;
  border: none;
  position: relative;
  border-radius: 50%;
  cursor: pointer;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: background-color 0.3s ease;
}

.pagination button img {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 4px;
  left: 5px;
  height: 24px;
  position: absolute;
  top: 4px;
  left: 5px;
}

.pagination button:hover {
  background-color: #883979;
  background-color: #883979;
}

.pagination-button:disabled {
  background-color: white !important;
  cursor: not-allowed;
}

.pagination .page-number {
  font-size: 16px;

  font-weight: bold;

  font-size: 16px;

  font-weight: bold;
}

.cell-date {
  padding-left: 30px;
}

.cell-status {
  padding-left: 170px;
}

.cell-status.in-progress {
  color: #ffa500;

  color: #ffa500;
}

.cell-status.new-case {
  color: #007bff;

  color: #007bff;
}

.cell-status.closed {
  color: red;
}

.searchpagination {
  margin-top: 2px;
}

.pathology-sort-label {
  /* margin-right: 2px; */
  height: 41px;
  padding-top: 29px;
  font-size: 10px;
  color: black;
}

.dark-mode .pathology-sort-label {
  color: white;
}

.sort-dropdown {
  background-color: transparent;
}

.dark-mode .sort-dropdown {
  color: white;
}

.page-input {
  width: 10px;
  padding: 0px !important;
  margin: 0px !important;
}
.th-flex {
  position: relative;
  display: flex;
  align-items: center;
}

.sort-icon {
  margin-left: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

.th-date-time {
  position: relative;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  width: 55%;
}

.date-time-icon {
  display: flex;
  margin-right: 1.5rem;
  margin-top: 2.8px;
  justify-content: center;
}

.time-text {
  text-align: right;
  width: 20%;
}

.status-dropdown {
  position: absolute;
  top: 68%;
  border-radius: 8px;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000;
  list-style: none;
  width: 200px;
  text-align: left;
}

.status-item {
  padding: 5px 10px;
  cursor: pointer;
}

.status-item.selected {
  background-color: #f0f0f0;
}
.status-item.dark-selected {
  background-color: #501242;
}
.no-data-img {
  height: 250px;
  width: 250px;
  position: relative;
  left: 400px;
}

.clickable-row {
  cursor: pointer;
}

.case-id-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.priority-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.no-records-animation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.arrow-drop-down {
  transform: rotate(90deg);
}

.addcase-form-container {
  width: 100%;
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(158, 158, 158, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 1000;
}

.dark-mode .addcase-form-container {
  background-color: #1e0419;
  background: rgba(158, 158, 158, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.form-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.addcase-form-box {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
}
.addcase-form {
  padding: 32px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: auto;
  /* margin-bottom: 58px; */
}
.dark-mode .addcase-form {
  background-color: #2d1227;
}
.medical-case-reg-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.medical-case-reg-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
}
.medical-case-reg-field {
  width: 494px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.medical-case-reg-field1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.medical-case-reg-field2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.medical-case-reg-label {
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  text-align: justify;
  margin: 0;
}
.dark-mode .medical-case-reg-label {
  color: white;
  font-weight: 400;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  line-height: 30px;
  text-align: justify;
}
.medical-case-reg-input {
  padding: 0px 12px;
  border: 1px solid #a0a0a0;
  border-radius: 8px;
  height: 46px;
}
.medical-case-reg-input1 {
  padding: 0px 12px;
  border: 1px solid #a0a0a0;
  border-radius: 8px;
  height: 46px;
  width: 117%;
  display: flex;
  align-items: center;
}
.medical-case-reg-input.filled {
  border: 1px solid #b3b3b3;
}
.medical-case-reg-textbox {
  width: 100%;
  height: 44px;
  border: none;
  outline: none;
  color: #883979;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  padding: 0px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.512px;
  border-radius: 8px;
}
.medical-case-reg-textbox.filled {
  color: #883979;
}
.dark-mode .medical-case-reg-textbox {
  color: white;
  background-color: transparent;
}

input,
button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
}

.input-height {
  height: 46px;
}

.medical-case-reg-input-select option {
  color: black;
}

.medical-case-reg-input-select.filled {
  color: #883979;
}

.medical-case-reg-textarea {
  width: 100% !important;
  border: none !important;
  margin: 0px !important;
  height: 44px;
  padding: 0px;
  outline: none;
  color: rgba(0, 0, 0, 0.2);
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
}

.medical-case-reg-textarea.filled {
  color: #883979;
}

.medical-case-reg-textarea input-height.filled {
  color: #883979;
}

.dark-mode .medical-case-reg-textarea {
  color: #cccccc;
  background-color: transparent;
}
.medical-case-reg-input2 {
  padding: 0px 12px;
  border-radius: 8px;
  border: 1px #a0a0a0 solid;
}
.medical-case-reg-input1 {
  padding: 0px 12px;
  border-radius: 8px;
  border: 1px #a0a0a0 solid;
}

.medical-case-reg-input2.filled {
  border: 1px #b3b3b3 solid;
}
.medical-case-reg-input1.filled {
  border: 1px #b3b3b3 solid;
}

.sample-collection-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sample-collection-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
}
.sample-collection-field {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1;
}
.sample-collection-label {
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
}
.sample-collection-input {
  width: 100%;
  height: 46px;
  border-radius: 8px;
  border: 1px #a0a0a0 solid;
  padding: 10px;
  font-family: "Open Sans", sans-serif;
  color: rgba(0, 0, 0, 0.8);
  font-size: 16px;
  outline: none;
}
.case-payment-container {
  width: 100%;
  height: 100%;
  padding: 10px 6px 10px 12px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px #a0a0a0 solid;
  display: inline-flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.case-payment-label {
  color: rgba(0, 0, 0, 0.2);
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  word-wrap: break-word;
}
.case-payment-dropdown {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.case-payment-select {
  width: 150px;
  height: 36px;
  border: 1px solid #a0a0a0;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #000;
  padding: 4px;
  background-color: #fff;
  cursor: pointer;
}
.addcaseform-buttons-container {
  width: 1017px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
}
.addcase-button-clear-button {
  padding: 10px 50px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #2585e0;
  border: 1px solid var(--Secondary-Secondary-01, #2585e0);
  color: #2585e0;
  color: var(--Secondary-Secondary-01, #2585e0);
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 144.444% */
  letter-spacing: 0.576px;
}

.addcase-button-clear-button:hover {
  background-color: #2585e0;
  color: white;
}

.dark-mode .addcase-button-clear-button {
  background: transparent;
  border: 1px solid #2585e0;
  border: 1px solid var(--Secondary-Secondary-01, #2585e0);
  color: #2585e0;
  color: var(--Secondary-Secondary-01, #2585e0);
}
.nav-form-buttons {
  display: flex;
  gap: 10px;
}
.addcase-button-back-button {
  display: flex;
  width: 146px;
  padding: 10px 0px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #2585e0;
  border: 1px solid var(--Secondary-Secondary-01, #2585e0);
  color: #883979;
  color: var(--Primary-Primary---01, #883979);
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 144.444% */
  letter-spacing: 0.576px;
}

.addcase-button-back-button:hover {
  background-color: #883979;
  color: white;
}

.dark-mode .addcase-button-back-button {
  background-color: transparent;
  border: 1px solid white;
  border: 1px solid var(--Secondary-Secondary-01, white);
  color: #cccccc;
  color: var(--Primary-Primary---01, #cccccc);
}
.addcase-button-next-button {
  display: flex;
  width: 146px;
  padding: 10px 0px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background: #883979;
  border-radius: 8px;
  border: 1px solid #883979;
  border: 1px solid var(--Primary-Primary---01, #883979);
  background: var(--Primary-Primary---01, #883979);
  color: #e6e6e6;
  color: var(--Neutrals-Neutral-10, #e6e6e6);
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 144.444% */
  letter-spacing: 0.576px;
}

.addcase-button-next-button:hover {
  background: linear-gradient(0deg, #883979, #883979),
    linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  background-blend-mode: overlay;
}

.button:disabled {
  background-color: #9e9e9e;
  cursor: not-allowed;
}
/*
  .button:hover:not(:disabled) {
  background-color: #45a049;
  } */
.clr-form-button {
  display: flex;
}
.slide-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-bottom: 20px; */
  position: relative;
}
.slide-indicator-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  /*margin: 0 10px;*/
  /* Spacing between indicators */
}
.circle {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #e6e6e6;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1a1a1a;
  font-weight: 700;
  z-index: 2;
  font-size: 11px;
}
.circle1 {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border: 2px solid #883979;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-indicator-item.active .circle {
  background-color: #883979;
  color: #e6e6e6;
  height: 42px;
  width: 42px;
  font-size: 16px;
}
.slide-label {
  display: none;
}
/* .dark-mode .slide-indicator {
  background-color: white;
  } */
.slide-indicator-item.active .slide-label {
  display: inline;
  margin-left: 10px;
  font-size: 14px;
  color: #333;
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: Poppins;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.dark-mode .slide-indicator-item.active .slide-label {
  color: white;
}
.addcase-slide-indicator-box {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  flex-shrink: 0;
}
.addcase-slide-indicator-box .addcase-exit-icon {
  font-size: 32px;
}
.slide-indicator-item::after {
  content: "";
  position: relative;
  top: 50%;
  right: -15px;
  width: 71px;
  height: 1px;
  background-color: #bbb;
  z-index: 1;
}
.slide-indicator-item.active::after {
  background-color: #bbb;
}
.slide-indicator-item:last-child::after {
  display: none;
}
.medical-case-reg-container3 {
  display: flex;
  width: 1017px;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.medical-case-reg-container3 select {
  width: 100%;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #a0a0a0;
  color: #999;
  color: var(--Neutrals-Neutral-07, #999);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.512px;
  padding: 0px 10px 0px 10px;
}

.medical-case-reg-container3.filled select {
  color: #883979;
}

.dark-mode .medical-case-reg-container3 select {
  color: #cccccc;
  background-color: transparent;
}
.addcase-clr-form-button {
  display: flex;
  gap: 40px;
}
.medical-case-reg-textbox option {
  padding: 8px;
  font-size: 16px;
  color: #333;
}
.medical-case-reg-textbox option[selected] {
  background-color: #e0e0e0;
  font-weight: bold;
}
.medical-case-reg-textbox option:hover {
  background-color: #f0f0f0;
}

.country-code-select {
  width: 100%;
  overflow-y: auto;
  max-height: 176px;
  height: 44px;
  display: block;
  border: none;
  outline: none;
  color: #883979;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  padding: 0px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.512px;
  border-radius: 8px;
}

.dark-mode .country-code-select {
  background-color: transparent;
  color: white !important;
}
.country-code-select option {
  padding: 8px;
  font-size: 16px;
  color: #333;
}
.country-code-select.filled {
  color: #883979;
}
.country-code-dropdown {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
}

.credit-card-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: left;
  grid-gap: 18px;
  gap: 18px;
  font-size: 20px;
}

.medical-case-reg-textarea::-webkit-outer-spin-button,
.medical-case-reg-textarea::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
  text-align: left;
  display: block;
}

/* .input-error {
  border: 1px solid red;

} */

.popup-addcase {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 1000;
  text-align: center;
  animation: fadeIn 0.3s ease-in-out;
  opacity: 1;
}

.popup-content-addcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.popup-tick-addcase {
  font-size: 40px;
  color: green;
  margin-bottom: 10px;
}

.popup-addcase p {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

@keyframes fadeIn {
  from {
    opacity: 1;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 800px) {
  .addcase-form {
    width: 90%;
    padding: 16px;
    max-height: 700px;
  }
}
.medical-case-reg-input:hover,
.medical-case-reg-input1:hover,
.medical-case-reg-input2:hover {
  border: 1px solid #883979;
}
.country-code-dropdown {
  position: relative;
  width: 80px;
}

.custom-dropdown-code {
  background: white;
  border: 1px solid #883979;
  padding: 11px;
  width: 40px;
  border-left: 0px;
  border-bottom: 0px;
  border-top: 0px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
}
.dark-mode .custom-dropdown-code,
.dark-mode .custom-dropdown-code-menu {
  background-color: #2d1227;

  color: white;
}

.custom-dropdown-code-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: scroll;
  z-index: 10;
  border-radius: 8px;
  margin-top: 5px;
  margin-left: -6px;
  font-size: 14px;
}
.custom-dropdown-code-menu::-webkit-scrollbar {
  width: 8px;
  border-radius: 100px;
}
.custom-dropdown-code-menu::-webkit-scrollbar-thumb {
  background-color: #883979;
  border-radius: 100px;
}
.custom-dropdown-code-menu::-webkit-scrollbar-track {
  background: transparent;
}
.custom-dropdown-code-menu::-webkit-scrollbar-thumb:hover {
  background-color: #883979;
}

.custom-dropdown-code-item {
  padding: 8px;
  cursor: pointer;
  text-align: center;
}

.custom-dropdown-code-item:hover {
  background: #883979;
  color: white;
}
.custom-dropdown-patient-menu {
  position: absolute;
  top: 111%;
  left: 440px;
  width: 120%;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  border-radius: 8px;
  font-family: Poppins;
  font-weight: 400 !important;
  font-size: 14px !important;
}


.Procedure-box{
  position: absolute;
  top: 660px;
  width: 500px;
  
}
.SampleLocation-box{
  position: absolute;
  top: 640px;
  width: 500px;
 
}
.addcase-upload {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.addcase-upload h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.addcase-upload-size {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.addcase-upload-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px dashed #883979;
  border-radius: 8px;
  cursor: pointer;
  color: #883979;
  width: fit-content;
}

.addcase-upload-button:hover {
  background-color: rgba(136, 57, 121, 0.05);
}

.addcase-upload-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.addcase-upload-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.addcase-upload-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  padding: 4px;
  display: flex;
  align-items: center;
}

.addcase-upload-remove:hover {
  color: #883979;
}

.addcase-upload-icon {
  display: flex;
  align-items: center;
}
.custom-dropdown-collect {
  position: relative;
  width: 100%;
}

.custom-options {
  max-height: 200px;
  overflow: scroll;
}

.custom-dropdown-control-panel {
  position: relative;
  top: 5px;
  width: 100%;
}
.custom-dropdown-addcase {
  position: relative;
  width: 100%;
}

.custom-dropdown-selected-collect {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
  width: 474px;
}

.dark-mode .custom-dropdown-selected-collect {
  background-color: transparent;
  color: white;
}
.custom-dropdown-selected-control-panel {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  width: 283px;
  height: 15px;
  color: #ccc;
}

.dark-mode .custom-dropdown-selected-control-panel {
  border: 1px solid #883979;
  background-color: transparent;
  color: #fff;
}

.custom-dropdown-selected-addcase {
  padding: 10px 0px;
  cursor: pointer;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
}

.custom-dropdown-menu {
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

.custom-dropdown-item {
  padding: 10px;
  cursor: pointer;
}

.custom-dropdown-item:hover {
  background-color: #f0f0f0;
}

.custom-dropdown-selected-collect-text {
  color: grey;
}
.custom-dropdown-selected-collect-text.selected {
  color: #883979;
}

.custom-options-menu {
  max-height: 200px;
  overflow: scroll;
  list-style-type: none;
  position: absolute;
  left: -13px;
  top: 100%;
  width: 105%;
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  background-color: #ffffff;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.custom-dropdown-selected-collect.filled {
  border: 1px solid #883979;
}
.custom-dropdown-selected-control-panel.filled {
  color: #883979;
}
.dark-mode .custom-dropdown-selected-control-panel.filled {
  color: #fff;
}


.content-wrapper {
  background: #ffffff;
  position: relative;
  width: 100%;
  height: 100%;
  gap: 0px;
  border-radius: 12px;
}
.dark-mode .content-wrapper {
  background-color: #2d1227;
}

.table-layout {
  padding: 40px 2px 0px 60px;
  padding-top: 10px;
  overflow-x: auto;
}
.logs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 8px;
}
.logs-table-body {
  display: block;
  max-height: 165px;
  overflow-y: auto;
}
.logs-table thead,
.logs-table-body tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.logs-table-body::-webkit-scrollbar {
  width: 10px;
}

.logs-table-body::-webkit-scrollbar-thumb {
  background-color: purple;
  border-radius: 10px;
  height: 60px;
}

.logs-table-body::-webkit-scrollbar-thumb:hover {
  background-color: #800080; /* Purple */
}

.logs-table-body::-webkit-scrollbar-track {
  background: transparent;
}

.appointment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 8px;
}
.appointment-table-body {
  display: block;
  max-height: 165px;
  overflow-y: auto;}
  
.appointment-table thead,
.appointment-table-body tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.appointment-table-body::-webkit-scrollbar {
  width: 10px;
}

.appointment-table-body::-webkit-scrollbar-thumb {
  background-color: purple;
  border-radius: 10px;
  height: 60px;
}

.appointment-table-body::-webkit-scrollbar-thumb:hover {
  background-color: #800080; /* Purple */
}

.appointment-table-body::-webkit-scrollbar-track {
  background: transparent;
}

.edit-case-detail-box {
  display: block;
  max-height: 250px;
  overflow-y: auto;
}

.edit-case-detail-box::-webkit-scrollbar {
  width: 10px;
}

.edit-case-detail-box::-webkit-scrollbar-thumb {
  background-color: purple;
  border-radius: 10px;
  height: 40px;
}

.edit-case-detail-box::-webkit-scrollbar-thumb:hover {
  background-color: #800080; /* Purple */
}

.edit-case-detail-box::-webkit-scrollbar-track {
  background: transparent;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0px 0;
  font-size: 18px;
  table-layout: fixed;
}

tbody {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  color: #000000;
}

.status {
  position: relative;
  right: 34px;
  display: flex;
  justify-content: center;
  color: #1a1a1a;
  font-family: Open Sans;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
}

th,
td {
  text-align: left;
}
.dark-mode td {
  color: #ececec;
}

.dark-mode td {
  background-color: transparent !important;
}

th {
  color: black !important;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
}

th,
td {
  width: 25%;
}

.dark-mode th {
  color: white !important;
}

tbody tr:nth-child(odd) {
  background-color: transparent;
}

tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.1);
}

tbody tr:hover {
  cursor: pointer;
}

table {
  margin-left: auto;
  margin-right: auto;
}

.inprogress-td {
  position: relative !important;
  right: -44px !important;
}

.cases-pagination-button {
  background-color: #ccc;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: background-color 0.3s ease;
  padding: 0;
  margin: 15px 24px 15px 24px;
}

.cases-pagination-button img {
  width: 24px;
  height: 24px;
  position: relative;
  top: 2.5px;
}

.cases-pagination-button:last-of-type {
  background-color: #883979;
}

.cases-pagination-number {
  color: #333333;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .cases-pagination-number {
  color: #e6e6e6;
}

.dark-mode .cases-pagination-button:first-of-type {
  background-color: #1e0419;
}

.dark-mode .cases-pagination-button:last-of-type {
  background: #ad499a;
}

.sorting-error-alert {
  position: fixed;
  right: -400px;
  bottom: 3.5rem;
  display: flex;
  align-items: center;

  border-radius: 8px;
  padding: 10px 16px;
  max-width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: right 0.5s ease-in-out;
  z-index: 9999;
}

.sorting-error-alert.show {
  right: 20px;
}

.sorting-icon-wrapper {
  border-radius: 50%;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  cursor: pointer;
}

.sorting-error-text {
  color: #d32f2f;
  font-weight: 500;
}

.graph-container {
  width: 527px;
  height: 361px;
  flex-shrink: 0;
  position: relative;
}

.graph-container.dark-mode {
  background-color: #2d1227;
}

.dark-mode .timeframe-buttons button {
  background-color: #2d1227;
  color: #e6e6e6;
}

.dark-mode .timeframe-buttons button:hover{
  background-color: #2d1227;
  color: #e6e6e6;
}

.dark-mode .timeframe-buttons button.active {
  background-color: #2d1227;
}

.timeframe-buttons {
  display: flex;
  justify-content: right;
  align-items: end;
  padding-top: 20px;
  padding-right: 20px !important;
  padding-left: 20px;
}

.timeframe-buttons button {
  background-color: #fff;
  border: none;
  font-family: Open Sans;
  /* padding: 10px 10px;
  margin: 0 5px; */
  cursor: pointer;
  font-size: 12px;
  border-radius: 4px;
  /* transition: background-color 0.3s; */
  color: rgba(0, 0, 0, 0.25);
}

.timeframe-buttons button.active {
  background-color: #fff;
  color: #883979;
}

.dark-mode .timeframe-buttons button.active{
  color: #AD499A;
}

.timeframe-buttons button:hover {
  background-color: #fff;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.graph-bar {
  height: 260px !important;
  width: 510px !important;
  padding-bottom: 40px;
  padding-left: 4px;
  padding-right: 14px;
  color: #000;
}

.chart-container .chartjs-render-monitor {
  width: 100% !important;
  height: auto !important;
}

.chart-container .chartjs-scale {
  color: #666;
  font-size: 12px;
}

.chart-container .chartjs-axis-labels {
  color: #682b2b;
  font-size: 12px;
}


.chart-container .chartjs-bar {
  width: 7px;
  background-color: #883979 !important;
  border: 1px solid #883979 !important;
  border-radius: 4px;
}


.chart-container .chartjs-bar:hover {
  background-color: #b06292 !important;
}
.patient-graph-container {
  width: 799px !important;
  height: 372px !important;

  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: white;
}
.patient-graph-container-box {
  width: 100%;
  height: 318px;
  /* padding-right: 30px; */
  background-color: #fff;
  border-radius: 12px;
  background: #fff;
  background: var(--Primary-Base-White, #fff);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

.graph-margin{
  margin-left: -10px;
}

.dark-mode .patient-graph-container-box {
  background-color: #2d1227;
}
.patient-graph-title {
  align-self: stretch;
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  text-align: justify;
}
.timeframe-buttons-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.total-case-title {
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  padding: 26px;
}

.dark-mode .total-case-title {
  color: #e6e6e6;
}





.patient-graph-container {
  width: 527px;
  height: 361px;
  flex-shrink: 0;
  position: relative;
}

.graph-container.dark-mode {
  background-color: #2d1227;
}

.dark-mode .timeframe-buttons-patient button {
  background-color: #2d1227;
  color: #e6e6e6;
}

.dark-mode .timeframe-buttons-patient button.active {
  background-color: #2d1227;
}

.timeframe-buttons-patient {
  display: flex;
  justify-content: right;
  align-items: end;
  padding-top: 10px;
  padding-right: 20px !important;
  padding-left: 20px;
}

.timeframe-buttons-patient button {
  background-color: #fff;
  border: none;
  font-family: Open Sans;
  cursor: pointer;
  font-size: 12px;
  border-radius: 4px;
  /* transition: background-color 0.3s; */
  color: rgba(0, 0, 0, 0.25);
}

.timeframe-buttons-patient button.active {
  background-color: #fff;
  color: #883979;
}

.dark-mode .timeframe-buttons-patient button.active {
  color: #ad499a;
}

.timeframe-buttons-patient button:hover {
  background-color: #fff;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.graph-bar {
  height: 260px !important;
  width: 510px !important;
  padding-bottom: 40px;
  padding-left: 4px;
  padding-right: 14px;
  color: #000;
}

.chart-container .chartjs-render-monitor {
  width: 100% !important;
  height: auto !important;
}

.chart-container .chartjs-scale {
  color: #666;
  font-size: 12px;
}

.chart-container .chartjs-axis-labels {
  color: #682b2b;
  font-size: 12px;
}

.chart-container .chartjs-bar {
  width: 7px;
  background-color: #883979 !important;
  border: 1px solid #883979 !important;
  border-radius: 4px;
}

.chart-container .chartjs-bar:hover {
  background-color: #b06292 !important;
}

.patienttab-graph-container {
  width: 799px !important;
  height: 318px !important;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background-color: white;
}
.patienttab-graph-container-box {
  width: 100%;
  height: 318px;
  padding-right: 30px;
  background-color: #fff;
  border-radius: 12px;
  background: #fff;
  background: var(--Primary-Base-White, #fff);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

.graph-margin {
  margin-left: -10px;
}

.dark-mode .patient-graph-container-box {
  background-color: #2d1227;
}
.patient-graph-title {
  align-self: stretch;
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  text-align: justify;
}
.timeframe-buttons-patient-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.total-case-title {
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  padding: 26px;
}

.dark-mode .total-case-title {
  color: #e6e6e6;
}

#root
  > div:nth-child(1)
  > div:nth-child(4)
  > div:nth-child(2)
  > div:nth-child(2)
  > div:nth-child(1)
  > div:nth-child(2)
  > div:nth-child(1)
  > canvas:nth-child(2) {
  margin-top: -86px;
  height: 218px !important;
  max-height: 218px;
  width: 766px !important;
  max-width: 796px;
  border-color: rgba(255, 255, 255, 1);
}

.dark-mode .patienttab-graph-container {
  background-color: #2d1227;
}

.patienttab-graph-bar {
  height: 258px !important;
  width: 97% !important;
}

.dark-mode .timeframe-buttons-patient button {
  background-color: #2d1227;
  color: #e6e6e6;
}

.dark-mode .timeframe-buttons-patient button.active {
  background-color: #2d1227;
}

.timeframe-buttons-patient {
  display: flex;
  justify-content: right;
  align-items: end;
  padding-top: 20px;
  padding-right: 20px !important;
  padding-left: 20px;
  gap: 20px;
}

.timeframe-buttons-patient button {
  background-color: #fff;
  border: none;
  font-family: Open Sans;
  /* padding: 10px 10px;
    margin: 0 5px; */
  cursor: pointer;
  font-size: 12px;
  border-radius: 4px;
  /* transition: background-color 0.3s; */
  color: rgba(0, 0, 0, 0.25);
}

.timeframe-buttons-patient button.active {
  background-color: #fff;
  color: #883979;
}

.dark-mode .timeframe-buttons-patient button.active {
  color: #ad499a;
}

.timeframe-buttons-patient button:hover {
  background-color: #fff;
}

.repo-graph-container {
    flex: 1 1;
    width: 822px;
    height: 324px;
    position: relative;
  
  }
  
  .lab-graph-container.dark-mode {
    background-color: #2D1227;
  
  }
  
  .Report-title {
    width: 146px;
    height:16px;
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: Open Sans;
  font-size: 13px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  padding: 20px 40px 20px 31px;
  }
  
  .dark-mode .Report-title {
    color: #E6E6E6;
  }


  .title-label-repo {
    color: #000;
    color: var(--Primary-Base-Black, #000);
    font-family: Open Sans;
    font-size: 13px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0.032em;
    text-align: left;
    }
    
    .dark-mode .title-label-repo {
      color: #E6E6E6;
    }

  
  .report-timeframe-buttons-container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }
  
  .timeframe-buttons {
    margin-bottom: 20px;
    padding-right: 48px !important;
  
  }
  
  .timeframe-buttons button {
    margin: 0 5px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  
  }
  
  .timeframe-buttons .active {
    background-color: #883979;
    color: white;
  }
  
  .dark-mode .timeframe-buttons button {
    background-color: #2D1227;
    color: #E6E6E6;
    ;
  }
  
  .dark-mode .timeframe-buttons .active {
    background-color: #2D1227;
  }
  
  
  .report-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  
  }
  
  .colors-box {
    width: 17px; 
    height: 12px; 
    margin-right: 10px; 
    border-radius: 2px; 
  }
  
  .cases-box-repo {
    background-color:#883979;
    ; 
  }
  
  .reports-box-repo {
    background-color: #2585E0;
    ; 
  }
  
  .repo-graph-line {
    height: 260px !important;
    width: 510px !important;
    padding-bottom: 4px;
    padding-left: 4px;
    padding-right: 14px;
    color: #000;
  
  }
  
  .report-canvas-container {
    width: 748px !important; 
    height: 225px;
    padding-left: 27px; 
    padding: 0px 26px;
  }
  
  .error {
    color: red;
    font-weight: bold;
  }
.Report-graph-container { 
    width: 822px;
    height: 324px;
    position: relative;
}

.Report-graph-container.dark-mode {
    background-color: #2D1227;

}

.Report-graph-title {
    left: 0;
    top: 0;
    position: absolute;
    color: black;
    font-size: 20px;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0.48px;
    word-wrap: break-word;
}

.Report-graph-title {
    color: #000;
    color: var(--Primary-Base-Black, #000);

    /* Desktop Fonts/Body/Body Semi Bold/Body 2 SemiBold */
    font-family: "Open Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    /* 150% */
    letter-spacing: 0.48px;
    text-align: left;
}

.dark-mode .Report-graph-title {
    color: #E6E6E6;
}


.Report-graph-chart {
    width: 98%;
    height: 100%;
    position: absolute;
    top: 48px;
    background: white;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
}

.dark-mode .Report-graph-chart{
    background-color: #2D1227;
}
.hospital-search-cases {
  width: 100%;
  position: relative;
}

.search-bar-header {
  width: 100%;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-title {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  text-align: left;
  color: black;
}

.dark-mode .header-title {
  color: #e6e6e6;
}

.search-bar-container-report {
  width: 1018px;
  height: 46px;
  background: white;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s ease;
  border: 1px solid transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
}
.search-bar-container-report.filled {
  border-color: #883979 !important;
}

.dark-mode .search-bar-container-report {
  background-color: transparent;
  border: 1px solid #883979;
}
.search-bar-container-report:focus-within {
  border-color: #883979;
}

.dark-mode .search-bar-container-hospital {
  border: 1px solid #ccc;
  background-color: transparent;
}

.hospital-search-icon {
  width: 24px;
  height: 24px;
  padding-left: 5px;
  color: #b3b3b3;
}

.search-input {
  flex-grow: 1;

  outline: none;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  color: rgba(0, 0, 0, 0.2);
}

.sort-container {
  display: inline-flex;
  padding: 4px 4px 4px 4px;
  width: 157px;
  height: 46px;
  justify-content: center;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  align-items: center;
  gap: 8px;
  background-color: #fff;
  border-radius: 8px;
}
.sort-label {
  color: black;
  font-size: 16px;
  justify-content: center;
  font-family: "Open Sans", sans-serif;
  margin-right: 4px;
  height: 41px;
  padding-top: 20px;
}

.sort-icon-container {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
  display: flex;
  align-items: center;
  display: flex;
  justify-content: center;
}

.sort-icon {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.table-header {
  background-color: #fff;
}

.table-body {
  background-color: transparent;
}

.pagination-controls {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.pagination-controls button {
  margin: 0 10px;
  padding: 5px 10px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.pagination-controls button:disabled {
  background-color: #c0c0c0;
  cursor: not-allowed;
}

.pagination-controls span {
  align-self: center;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
}

.table-header th {
  padding: 0;
  border: 0;
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.no-data-image {
  display: flex;
  align-items: center;
  margin-top: 40px;
}

.sort-container {
  position: relative;
  display: inline-block;
}

.sort-container {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dropdown-menu button {
  width: 100%;
  padding: 8px 16px;
  border: none;
  background-color: white;
  text-align: left;
  cursor: pointer;
}

.dropdown-menu.dark-mode {
  background-color: transparent;
  color: white;
  border: 1px solid white;
}

.dropdown-menu.dark-mode button {
  background-color: transparent;
  color: white;
}

.dropdown-menu.dark-mode button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.report-icon-sort {
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
  display: flex;
  align-items: center;
  margin-left: -0.4rem;
}

/* .tech-chat-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000080;
  backdrop-filter: blur(40px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
} */

.tech-chat-container {
  display: flex;
  flex-direction: column;
  width: 900px;
  max-height: 730px;
  height: auto;
  position: absolute;
  gap: 0px;
  border-radius: 12px;
  opacity: 1;
  background: #ffffff;
  box-shadow: 0px 0px 5px 0px #00000033;
  overflow-y: auto;
  /* z-index: 999999999; */
}

.dark-mode .tech-chat-container {
  background: #2d1227;
}

.tech-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  position: relative;
  border-radius: 12px 12px 0px 0px;
  border-bottom: 2px solid #b3b3b3;
}

.dark-mode .tech-chat-header {
  border-bottom: 2px solid #883979;
}

.dark-mode .tech-chat-header {
  background: #1e0419;
  box-shadow: 0px 1px 1px 0px #00000040;
}

.tech-header-profile {
  display: flex;
}

.tech-header-avatar {
  width: 40px;
  height: 40px;
  background-color: #e5e7eb;
  border-radius: 50%;
}

.tech-header-info {
  margin-left: 12px;
  display: flex;
  align-items: center;
}

.tech-header-name {
  font-weight: 600;
  color: #111827;
}

.dark-mode .tech-header-name {
  color: #e6e6e6;
}

/* .tech-online-indicator {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  margin-left: 8px;
} */

.tech-close-button {
  position: absolute;
  top: 50px;
  right: 400px;
  font-size: 24px;
  color: white;
  border: none;
  cursor: pointer;
  width: 42px;
  height: 42px;
  padding: 9.36px;
}

.tech-date-divider {
  display: flex;
  justify-content: center;
  margin: 20px 0 60px;
}

.tech-date-divider span {
  color: #808080;
  font-size: 16px;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.tech-messages-container {
  flex: 1 1;
  padding: 0 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tech-message-wrapper {
  display: flex;
  align-items: flex-start;
}

.tech-message-sent {
  justify-content: flex-end;
}

.tech-message-received {
  justify-content: flex-start;
}

.tech-message-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.tech-message-sent .tech-message-avatar {
  margin-left: 8px;
}

.tech-message-received .tech-message-avatar {
  margin-right: 8px;
}

.tech-message-content {
  display: flex;
  flex-direction: column;
}

.tech-message-info {
  display: contents;
  margin-bottom: 4px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.tech-sender-name {
  font-size: 14px;
  color: #374151;
}

.tech-message-time {
  font-size: 14px;
  color: #6b7280;
  margin-left: 8px;
  text-align: right;
}

.tech-message-bubble {
  padding: 12px;
  border-radius: 8px;
  max-width: 400px;
}

.tech-sent-bubble {
  background: #883979;
}

.tech-received-bubble {
  background: #e6e6e6;
}

.dark-mode .tech-received-bubble {
  background: #88306880;
}

.tech-sent-bubble p {
  color: #ffffff;
}

.tech-received-bubble p {
  color: #000000;
}

.tech-message-bubble p {
  /* color: #1a1a1a; */
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  margin: 0;
  padding: 0px;
}

.dark-mode .tech-message-bubble p {
  color: #e6e6e6;
}

.tech-message-input-container {
  padding: 16px;
  display: flex;
  border-top: 1px solid #e6e6e6;
}

.dark-mode .tech-message-input-container {
  border-top: 1px solid #666666;
}
.tech-message-input {
  flex: 1 1;
  padding: 8px;
  border-radius: 8px;
  color: #333333;
  outline: none;
}

.tech-message-input-attach {
  display: flex;
  align-items: center;
  width: 100%;
}

.dark-mode .tech-message-input {
  background: #2d1227;
  color: white;
}

.tech-message-input::placeholder {
  color: #6b7280;
}

.tech-send-button {
  margin-left: 16px;
  padding: 8px 32px;
  background: #883979;

  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .tech-send-button {
  background: #ad499a;
}
@media (min-width: 1201px) {
  .tech-chat-container {
    max-width: 800px;
  }

  .tech-chat-header {
    padding: 1.5rem;
  }

  .tech-messages-container {
    padding: 1.5rem;
    gap: 1.5rem;
  }

  .tech-message-bubble {
    font-size: 1.1rem;
    padding: 10px;
  }

  .tech-message-input-container {
    /* padding: 1.5rem; */
  }

  .tech-message-input {
    font-size: 1rem;
  }

  .tech-send-button {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }
}

.typing-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background-color: #ccc;
  border-radius: 50%;
  animation: typing 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.chat-patient-graph-container {
    
    margin: 0 ;
    padding: 0;
    gap:8px;
    
  }
  
   
  .chat-patient-graph-title {
    font-size: 28px;
    font-weight: 500;
    padding-bottom: 30px;
    text-align: left;
    font-family: poppins;
  }
  .dark-mode .patient-graph-title{
    color: #E6E6E6;
  }
  
  .chat-patient-graph-container-box-faq {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: none; 
    box-shadow: none;
    
  }
  

  .faq-margin{
    margin-top: 60px;
  }
  .faq-text{
    padding: 0px;
    font-size: 20px;
    font-family: Open Sans;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.024em;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
  
  
  .faq-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  }
  
  .faq-question {
    display: flex;
    height: 35px;
    align-items: center;
    justify-content: space-between;
     cursor: pointer;
    font-weight: 600;
    transition: box-shadow 0.2s;
    background-color: white;
   border-radius: 8px;
   padding: 13px;
   padding-left: 30px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .dark-mode .faq-question {
    background: linear-gradient(0deg, #501242, #501242),
                linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  }


  
  .question-text {
 
    font-family: Open Sans;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0.024em;
    text-align: left;

  }
  
  .faq-arrow {
    font-size: 24px;
    color: #555;
    line-height: 1;
  }
  
  .faq-answer {
    background-color: white;
    margin-top: 10px;
    padding: 13px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: left;
    padding-left: 30px;
  
}
.dark-mode .faq-answer{
  background: #6c0354 ;
}
  
  .answer-text {

    font-family: Open Sans;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0.024em;
    text-align: left;
    color: #883979;

    
  }

  .dark-mode .answer-text{
    color: #E6E6E6 ;
  }
  .faq-arrow {
    font-size: 24px;
    color: #555;
  }
  
.chat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  pointer-events: none;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  transition: opacity 0.5s ease-in-out;
  z-index: 999;
}

.chat-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.chat-container {
  position: fixed;
  bottom: 80px;
  left: 135px;
  width: 481px;
  height: 565px;
  background-color: white;
  border-radius: 8px 8px 8px 0px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  /* border: 1px solid #e5e7eb; */
  display: flex;
  flex-direction: column;
  animation: closeChat 0.5s ease-out forwards;
  animation: openChat 0.5s ease-out forwards;
  z-index: 1000;
  animation-duration: 0.5s;
  pointer-events: auto;
}

.chat-left-aligned {
  align-self: flex-start;
}

.speech-bubble {
  background-color: transparent;
  border-radius: 10px;
  padding: 4px;
  /* position: relative; */
}

.speech-bubble:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 0;
  /* border-left: 10px solid transparent; */
  border-right: 14px solid transparent;
  border-top: 8px solid #ffffff;
  bottom: -8px;
  left: 7.5px;
  transform: translateX(-50%);
  z-index: 9999;
}

.dark-mode .speech-bubble {
  background-color: transparent;
  /* position: relative; */
  padding: 4px;
}

.dark-mode .speech-bubble:after {
  border-top: 8px solid #1e0419;
  border-right: 14px solid transparent;
  width: 1px;
  height: 0;
  bottom: -8px;
  left: 7.5px;
  transform: translateX(-50%);
}

@keyframes openChat {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes closeChat {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.dark-mode .chat-container {
  background: #1e0419;
}

.chat-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #b3b3b3;
  background-color: white;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  border-radius: 8px 8px 0px 0px;
}

.dark-mode .chat-list-header {
  background: transparent;
  color: white;
}

.header-left {
  display: flex;
  align-items: center;
}

.chat-close-button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  font-size: 24px;
  color: #6b7280;
}

.dark-mode .chat-close-button {
  color: #ffffff;
}

.search-bar {
  padding: 10px 0px 0px 14px;
}

.search-bar input {
  width: 385px;
  padding: 12px;
  border-radius: 8px;
  /* border: 1px solid #e0e0e0; */
  outline: none;
  font-size: 14px;
  color: #888;
}

.chatbox-search {
  padding-left: 0 !important;
}

.dark-mode .search-bar input {
  /* background: #2d1227; */
}

.search-bar .MuiFormControl-root .MuiInputBase-adornedStart {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding-left: 9px;
}

.dark-mode .search-bar .MuiFormControl-root .MuiInputBase-adornedStart {
  border-width: 1px;
  border-style: solid;
  border-color: #b3b3b3;
}

.dark-mode
  .MuiInputBase-adornedStart
  .MuiInputAdornment-outlined
  .MuiSvgIcon-root {
  color: #b3b3b3;
}

/* .chat-list-container .chat-item,
.chat-conversation-container .message {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
  cursor: pointer;
  margin: 0 12px; 
  box-sizing: border-box; 
} */

.chat-items-scrollable {
  max-height: 620px;
  overflow-y: auto;
}

/* Optional: Add a custom scrollbar style */
.chat-items-scrollable::-webkit-scrollbar {
  width: 4px; /* Set the width of the scrollbar */
  height: 20px;
}

.chat-items-scrollable::-webkit-scrollbar-thumb {
  background-color: #883979;
  border-radius: 4px;
}

.chat-items-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: #662b5b;
}
.chat-list-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.chat-list-container .chat-item,
.chat-conversation-container .message {
  display: flex;
  align-items: center;
  padding: 20px 12px 20px 14px;
  position: relative;
  cursor: pointer;
}

.chat-list-container .chat-item::after,
.chat-conversation-container .message::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  border-bottom: 1px solid #e0e0e0;
}

/* .chat-list-container{
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.chat-list-container-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 9999;
} */

.dark-mode .message {
  border: 1px solid #b3b3b3;
}

.profile-pic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.chat-info,
.header-left {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.chat-name {
  color: #333;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .chat-name {
  color: #e6e6e6;
}

.dark-mode .chat-time {
  color: #cccccc;
}

.chat-time {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.chat-time,
.date-separator,
.online-status {
  font-size: 14px;
  color: #888;
}

.online-status {
  color: green;
  margin-left: 5px;
}

.message-container {
  padding: 10px;
}

.message.received .message-content,
.message.sent {
  background-color: #f0f0f0;
  border-radius: 10px;
  padding: 10px;
  margin: 5px 0;
  font-size: 14px;
  color: #333;
}

.message.sent {
  align-self: flex-end;
  background-color: #e6dfff;
  border-radius: 10px;
}

.message-content {
  display: inline-block;
}

.message-input {
  display: flex;
  align-items: center;
  padding: 10px;
  border-top: 1px solid #e0e0e0;
}

.message-input input {
  flex: 1 1;
  padding: 8px;
  /* border: 1px solid #e0e0e0; */
  border-radius: 20px;
  outline: none;
  font-size: 14px;
  color: #888;
}

.attach-button,
.send-button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 0 10px;
  color: #888;
}

.send-button {
  color: #6a0dad;
  font-weight: bold;
}

.chat-list-header-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-date-divider {
  color: #808080;
  font-size: 16px;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.032em;
  margin: 20px 0px;
  text-align: center;
}

.chat-message-info-sent {
  flex-direction: row-reverse;
  gap: 10px;
}

.chat-messages-container {
  flex: 1 1;
  padding: 0 16px 10px 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
}

.chat-message-wrapper {
  display: flex;
  align-items: flex-start;
}

.chat-message-sent {
  justify-content: flex-end;
}

.chat-message-received {
  justify-content: flex-start;
}

.chat-message-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.chat-message-sent .chat-message-avatar {
  margin-left: 8px;
}

.chat-message-received .chat-message-avatar {
  margin-right: 8px;
}

.chat-message-content {
  display: flex;
  flex-direction: column;
}

.chat-message-info {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.chat-sender-name {
  font-size: 14px;
  color: #374151;
}

.chat-message-time {
  font-size: 14px;
  color: #6b7280;
  margin-left: 8px;
}

.chat-message-bubble {
  padding: 12px;
  border-radius: 0px 10px 10px 10px;
  max-width: 75%;
  word-wrap: break-word;
  /* border: 0.5px solid #a0a0a080; */
}

.chat-sent-bubble {
  background: #883979;
  border-radius: 10px 0px 10px 10px;
  color: white;
  align-self: end;
}

.dark-mode .chat-sent-bubble {
  background: #eaacde33;
}

.chat-received-bubble {
  background: #e6e6e6;
  /* border: 1px solid #A0A0A080; */
  color: black;
}

.dark-mode .chat-received-bubble {
  background: #883979;
}

.hidden .chat-message-received .chat-received-bubble {
  color: #000000;
  transform: translatex(0px) translatey(0px);
}

.hidden .chat-received-bubble p {
  color: #000000;
}

.chat-message-bubble p {
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.024em;
  text-align: left;
  color: white;
  padding: 0px;
  margin: 0;
}

.dark-mode .chat-message-bubble p {
  color: #fff;
}

.chat-message-input-container {
  padding: 16px;
  display: flex;
  border-top: 1px solid #b3b3b3;
}

.chat-message-input {
  flex: 1 1;
  padding: 8px;
  color: #883979;
}
.dark-mode .chat-message-input {
  color: #fff;
}

.chat-message-input-attach {
  display: flex;
  align-items: center;
  width: 100%;
  /* border: 1px solid #b3b3b3; */
  border-radius: 8px;
}

.chat-message-input::placeholder {
  color: #6b7280;
}

.dark-mode .chat-message-input-attach {
  color: white;
}

.chat-send-button {
  margin-left: 16px;
  padding: 8px 32px;
  background: #883979;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .chat-send-button {
  background: #883979;
}

.dark-mode .chat-message-search {
  color: #e6e6e6;
}

.edit-patient-info-cases-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: antiquewhite;
}

.edit-cases-information-details-container {
  font-family: Arial, sans-serif;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: #8839790d;
}

.edit-cases-information-details-title {
  position: relative;
  right: 380px;
  top: 20px;
  color: #8e44ad;
  font-weight: 600;
  font-size: 24px;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.edit-cases-information-details-content {
  gap: 20px;
  width: 100%;
  padding-left: 30px;
}

.edit-cases-information-details-row {
  display: flex;
  flex-wrap: wrap;
  gap: 70px;
  padding-bottom: 20px;
}

.edit-cases-information-details-row:last-child {
  border-bottom: none;
}

.edit-cases-information-details-section {
  flex: 1 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.edit-cases-information-details-label {
  font-size: 16px;
  color: #666;
  margin-bottom: 5px;
  line-height: 26px;
}

.edit-cases-information-details-value {
  position: relative;
  color: #1a1a1a;
  max-width: 250px; /* Set the maximum width of the container */
  white-space: nowrap; /* Prevent the text from wrapping to the next line */
  overflow: hidden; /* Hide overflowing text */
  text-overflow: ellipsis; /* Show ellipsis (...) for overflowing text */
  cursor: pointer;
}

.pencil-icon {
  display: inline-block;
  margin-left: 5px;
  cursor: pointer;
  vertical-align: middle;
}

.dark-mode .pencil-icon {
  color: white;
}

input {
  font-size: 16px;
  padding: 5px;
  /* width: 260px; */
  /* border: 1px solid #ccc; */
  border-radius: 4px;
}

@media (max-width: 768px) {
  .edit-cases-information-details-row {
    flex-direction: column;
  }
}

.section-patient-info {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;

  gap: 2px;
}

.section-patient-info-label {
  color: #666666;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  word-wrap: break-word;
}

.section-patient-info-value {
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}
.update-button-update {
  width: 80px;
  height: 42px;
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}
.line-1 {
  border: 1px solid #ffffff;
  margin-right: 32px;
}
.line-2 {
  border: 1px solid #883979;
  margin-right: 32px;
}

.edit-edit-box-container {
  display: flex;
  flex-direction: row;
}

.save-button {
  padding: 10px 64px;
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin: 10px;
}

.save-button:hover {
  background-color: #2d1227;
}

.register-footer-button {
  position: relative;
  left: 320px;
}

.save-button.modified {
  background-color: #2585e0;
}

.save-button.saved {
  background-color: #8bc34a;
}


.version-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); 
  pointer-events: none; 
  -webkit-backdrop-filter: blur(1px); 
          backdrop-filter: blur(1px);
  pointer-events: none; 
  transition: opacity 0.5s ease-in-out;
  z-index: 999; 
}

.version-overlay.open {
  opacity: 1; 
  pointer-events: all;
}

.version-popup {
  background-color: white;
  border-radius: 8px 8px 8px 8px;
  padding: 20px;
  width: 267px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: fixed;
  bottom: 75px;
  right: 362px;
  z-index: 1000;
  animation-duration: 0.5s;
  pointer-events: auto;
}

.dark-mode .version-popup {
  background: #1e0419;
}

.version-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.dark-mode .version-close-btn {
  color: #ffffff;
}

.version-popup h2 {
  margin: 0;
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 600;
  line-height: 19.07px;
  letter-spacing: 0.0288em;
}

.dark-mode .version-popup h2 {
  color: #ffffff;
}

.version-popup p {
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.0288em;
}

.dark-mode .version-popup p {
  color: #ffffff;
}


@keyframes fadeIn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}


@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}


.version-popup.fade-in {
  animation-name: fadeIn;
  animation-fill-mode: forwards;
}


.version-popup.fade-out {
  animation-name: fadeOut;
  animation-fill-mode: forwards;
}

.version-speech-bubble {
  background-color: transparent;
  border-radius: 10px;
  padding: 4px;

}

.version-speech-bubble:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 8px solid #ffffff;
  bottom: -8px;
  left: 148.5px;
  transform: translateX(-50%);
  z-index: 9999;
}

.dark-mode .version-speech-bubble {
  background-color: transparent;
  /* position: relative; */
  padding: 4px;
}

.dark-mode .version-speech-bubble:after {
  border-top: 8px solid #1e0419;
  border-right: 14px solid transparent;
  width: 1px;
  height: 0;
  bottom: -8px;
  left: 7.5px;
  transform: translateX(-50%);
}


.about-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  pointer-events: none;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  transition: opacity 0.5s ease-in-out;
  z-index: 999;
}

.about-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.about-popup {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  width: 188px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: fixed;
  bottom: 80px;
  right: 340px;
  z-index: 1000;
  animation-duration: 0.5s;
  pointer-events: auto;
}

.dark-mode .about-popup {
  background: #1e0419;
}


@keyframes fadeIn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}


.about-popup.fade-in {
  animation-name: fadeIn;
  animation-fill-mode: forwards;
}


.about-popup.fade-out {
  animation-name: fadeOut;
  animation-fill-mode: forwards;
}


.about-close-btn:hover,
.about-close-btn:focus {
  color: #ff4a4a;
}

.about-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.about-popup h2 {
  margin: 0;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 21.79px;
  letter-spacing: 0.0288em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.about-popup div {
  display: flex;
  align-items: center;
  height: 45px;
}

.whatsapp-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.reach-out-button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

/* .reach-out-button:hover {
  background-color: #0056b3;
} */

.about-speech-bubble {
  background-color: transparent;
  border-radius: 10px;
  /* padding: 4px; */
  height: 0px !important;
  /* position: relative; */
}


.about-speech-bubble:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 8px solid #ffffff;
  bottom: -8px;
  left: 112.5px;
  transform: translateX(-50%);
  z-index: 9999;
}

.dark-mode .about-speech-bubble{
  background-color: transparent;
  /* position: relative; */
  padding: 4px;
}

.dark-mode .about-speech-bubble:after{
  border-top: 8px solid #1E0419;
  border-right: 14px solid transparent;
  width: 1px;
  height: 0;
  bottom: -8px;
  left: 7.5px;
  transform: translateX(-50%);
}


.req-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;

}

.req-modal-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  max-width: 1081px;
  height: 760px;
  width: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 999999 !important;
  animation: fadeIn 0.3s ease-in-out;
  outline: solid 1px #2d1227 !important;
}
@media (max-width: 800px) {
  .req-modal-content {
    padding: 3px;
  }
}

.dark-mode .req-modal-content {
  background-color: #1e0419;
}

.req-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
}
.dark-mode .req-modal-header {
  border-bottom: 1px solid rgb(51, 50, 50);
}

.req-modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px;
}

.requestForm-close-btn {
  position: relative;
  font-size: 2rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
  margin-top: -20px;
  margin-right: 0px;
}

.request-form-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}

.request-form-row div {
  flex: 1 1;
}

.full-name-label {
  display: block;
  font-size: 20px;
  margin-bottom: 12px;
  color: black;
  font-weight: 600;
  letter-spacing: 0.24em;
  letter-spacing: 1px;
  font-family: "Open Sans";
  text-align: left !important;
  margin-top: 10px;
}
.dark-mode .label {
  color: #ddd;
}

.req-input,
.req-select {
  width: 100%;
  padding: 14px 15px 14px 15px;
  font-size: 16px;

  /* border: 1px solid #91007c; */
  border-radius: 5px;
  outline: none;
  box-sizing: border-box;
  line-height: 0px;
  color: #883979;
}

.request-form-row .req-input {
  border: 1px solid #91007c;
  border-radius: 8px;
}
.dark-mode .request-form-row .req-input {
  border: 1px solid #b3b3b3;
  color: white;
}

.dark-mode .request-form-row .req-input:focus {
  border-color: #ad499a;
}

.dark-mode .request-form-row .req-input:hover {
  border-color: #ad499a;
}

.dark-mode .full-name-label {
  color: #ffffff;
}

.req-input:focus,
select:focus,
textarea:focus {
  border-color: #ad499a;
}
.dark-mode .request-form-row1 select:focus,
.dark-mode .request-form-row1 select:hover {
  background-color: transparent !important;
}

.book-btn,
.clear-btn {
  padding: 10px 15px;
  font-size: 0.9rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

.book-btn {
  background: #ad499a;
  color: #fff;
}

.book-btn:hover {
  background: #008026;
}

.clear-btn {
  background: #e9ecef;
  color: #333;
}

.clear-btn:hover {
  background: #d6d8db;
}

@keyframes fadeIn {
  from {
    opacity: 1;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 576px) {
  .request-form-row {
    flex-direction: column;
    gap: 10px;
  }

  .req-modal-content {
    padding: 15px;
  }
}
.request-form-row1 textarea {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  width: 97% !important;
  padding: 10px;
  position: relative;
  left: -119px;
  color: #ad499a;
  font-size: 16px;
  margin-bottom: 20px;
}
textarea {
  height: 100px;
  resize: none;
}
.form-row1 label {
  display: block !important;
  font-size: 1.3rem !important;
  margin-bottom: 5px !important;
  color: #555 !important;
  text-align: left !important;
}
.req-modal-content button {
  font-size: 13px !important;
}
.dark-mode .request-form-row1 textarea {
  background-color: transparent !important;
  color: white;
}
.dark-mode .request-form-row1 .req-select {
  background-color: transparent !important;
  color: #b3b3b3;
}

.dark-mode .request-form-row1 .req-select:focus {
  color: #ad499a;
}
.dark-mode .request-form-row1 select option {
  background-color: transparent !important;
  color: black;
}
.dark-mode .requestForm-close-btn {
  color: #fff !important;
}

.dark-mode .req-modal-header h2 {
  color: #fff !important;
}


.contact-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.contact-content {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  width: 600px;
  max-width: 90%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  margin-bottom: 60px;
}

.dark-mode .contact-content {
  background-color: #1e0419;
}

.contact-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.contact-header h2 {
  margin: 0;
}

.rof-close-btn {
  background: none;
  border: none;
  color: black;
  font-size: 40px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 8px;
  right: 30px;
}

.dark-mode .rof-close-btn {
  color: white;
}

.contact-form-row {
  display: flex;
  flex-direction: column;
  /* gap: 12px; */
  margin-bottom: 16px;
}

.contact-form-row div {
  flex: 1 1;
}

.reach-message-textarea {
  width: 570px !important;
  height: 100px;
  border: 1px solid #b3b3b3;
  color: #883979;
  border-radius: 8px;
  padding: 12px !important;
  resize: none;
  font-size: 16px;
  margin: 2px;
}

.dark-mode .reach-message-textarea {
  background: #2d1227;
  color: #ad499a;
  border-color: #b3b3b3;
}

.reachof-label {
  text-align: left;
  color: black;
}

.dark-mode .reachof-label {
  color: #fff;
}
.reach-input-field {
  /* width: 98% !important;
  height: 46px; */
  border-radius: 8px;
  border: 1px solid #b3b3b3;
  font-size: 16px;
  /* margin: 2px; */
  padding: 10px 15px 10px 15px;
  color: #883979;
}

.dark-mode .reach-input-field:focus {
  border-color: #ad499a;
  color: #ad499a;
}

.footer-about-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.reach-submit-btn {
  background-color: #883979;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

.reach-clear-btn {
  background-color: #ccc;
  color: black;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  /* margin-right: 15px; */
}

.reach-submit-btn:hover {
  background-color: #711d65;
}

.reach-clear-btn:hover {
  background-color: #aaa;
}

.form-row-flex {
  display: flex;
}

.rofstar {
  color: red;
}


.full-name-label {
  display: block;
  font-size: 20px;
  margin-bottom: 12px;
  color: black;
  font-weight: 600;
  letter-spacing: 1px;
  letter-spacing: 1px;
  font-family: "Open Sans";
  text-align: left !important;
  margin-top: 10px;
}

.announcement-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  pointer-events: none;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  transition: opacity 0.5s ease-in-out;
  z-index: 999;
}


.announcement-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.announcement-slider {
  position: fixed;
  top: 80px;
  left: -320px;
  background-color: #fff;
  padding: 20px;
  width: 320px;
  height: 618px;
  overflow-y: auto;
  z-index: 1000;
  animation-duration: 0.5s;
  pointer-events: auto;
}

@keyframes slide-in {
  0% {
    left: -320px;
    visibility: visible;
  }
  100% {
    left: 0;
  }
}

@keyframes slide-out {
  0% {
    left: 0;
  }
  100% {
    left: -320px;
  }
}

.announcement-slider.slide-in {
  visibility: visible;
  animation: slide-in 0.5s ease-in-out forwards;
}

.announcement-slider.slide-out {
  animation: slide-out 0.5s ease-in-out forwards;
}

@media only screen and (min-width: 1201px) {
  .announcement-slider {
    height: 100%;
    max-height: 1014px;
  }
}

.dark-mode .announcement-slider {
  background: #1e0419;
}

.announcement-close-btn {
  position: relative;
  left: 300px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.dark-mode .announcement-close-btn {
  color: white;
}


.announcement-card {
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  /* border: 1px solid #1e0419; */
  box-shadow: 0px 0px 4px 0px #00000040;
  text-align: left;
}

.dark-mode .announcement-card {
  background: #2d1227;
}

.announcement-category {
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-bottom: 5px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  gap: 10px;
}

.announcement-dot {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
  margin-right: 8px;
}

.announcement-category-name {
  font-weight: 600;

}

.dark-mode .announcement-category-name{
  color: white;
}

.announcement-title {
  font-weight: bold;
  color: #333;
  margin: 0;
  font-family: Open Sans;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.0288em;
  text-align: left;
}

.dark-mode .announcement-title {
  color: #ffffff;
}


.announcement-description {
  font-size: 14px;
  margin-top: 8px;
}

.dark-mode .announcement-description {
  color: #ffffff;
}

.Editform-container {
  width: 100%;
  height: 2413px;
  flex-shrink: 0;
  background-image: url(/static/media/editbg.63ea9780d56551bae04c.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;

  flex-direction: column;
  align-items: center;
}
.dark-mode .Editform-container {
  background-image: url(/static/media/bgdark.3915cd3767a0a72ba2a3.png);
  background-color: #2d1227;
}

.Editformcase-container {
  width: 1081px;
  height: 2550px;
  flex-shrink: 0;

  padding: 30px 60px;
}

.dark-mode .Editformcase-container {
  /* background-image: url("../../../../img/dashboard/bgdark.png");
  background-color: #2d1227; */
}
.editform-section1 {
  width: 1081px;
  height: 0;
  flex-shrink: 0;

  display: flex;
  flex-direction: column;
  gap: 30px;
}
.edit-cases-card {
  width: 1081px;
  height: 60px;
  flex-shrink: 0;
}
.edit-menu-options {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 11px;
}
.edit-menu-item {
  display: flex;
  width: 171px;
  height: 60px;
  padding: 15px 53px 15px 55px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;

  background: #fff;

  background: var(--Primary-Base-White, #fff);
  cursor: pointer;

  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  border: none;
}

.dark-mode .edit-menu-item {
  background-color: #2d1227;
  color: #e6e6e6;
}
.edit-menu-item.active {
  border-radius: 8px;
  background: #883979;
  background: var(--Primary-Primary---01, #883979);
  color: #fff;
}

.editform-section1-header {
  width: 1081px;
  height: 36px;
  flex-shrink: 0;
}
.edit-case-details-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 1081px;
  height: 36px;
  flex-shrink: 0;
}
.edit-case-label {
  color: #999;
  color: var(--Neutrals-Neutral-07, var(--Primary-Base-Black, #999));

  font-family: "Open Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.691px;
}

.dark-mode .edit-case-label {
  color: #e6e6e6;
}
.edit-case-value {
  color: #000;
  color: var(--Primary-Base-Black, #000);

  font-family: "Open Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.691px;
}

.dark-mode .edit-case-value {
  color: #cccccc;
}
.edit-case-render-content {
  width: 1081px;
  height: 338px;
  flex-shrink: 0;
}

.edit-case-details {
  width: 100%;
  height: 100%;
  position: relative;
}

.edit-case-details-background {
  width: 1081px;
  height: 318px;
  left: 0;
  top: 52px;
  position: relative;
  background: white;
  border-radius: 12px;
  margin-bottom: 60px;
}

.dark-mode .edit-case-details-background {
  background-color: #2d1227;
  color: #cccccc;
}

.edit-case-details-status {
  width: 474px;
  height: 46px;
  /* padding: 8px 16px; */
  left: 227px;
  top: 82px;
  position: absolute;
  background: #ffe2e2;
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.dark-mode .edit-case-details-status {
  background-color: #501242;
}

.edit-case-details-status-text {
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}
.dark-mode .edit-case-details-status-text {
  color: #e6e6e6;
}

.edit-case-details-image {
  width: 145px;
  height: 145px;
  left: 50px;
  top: 0;
  position: absolute;
  background: linear-gradient(0deg, #d9d9d9 0%, #d9d9d9 100%);
  border-radius: 91.5px;
}

.edit-case-details-info {
  width: 969px;
  height: 140px;
  left: 56px;
  top: 168px;
  position: absolute;
  margin-top: 20px;
}

.edit-case-details-close-icon {
  width: 24px;
  height: 24px;
  left: 1041px;
  top: 9px;
  position: absolute;
}

.edit-case-details-close-icon-inner {
  width: 13.31px;
  height: 13.31px;
  left: 5.35px;
  top: 59.35px;
  position: absolute;
}

.top-css {
  top: 6px !important;
}

.dark-mode .edit-inner-box {
  color: white;
}

.dark-mode .edit-case-details-close-icon-inner {
  color: white;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.background-box {
  width: 1081px;
  height: 252px;
  /* position: absolute;*/
  background: white;
  border-radius: 12px;
}

.edit-case-detail-box {
  width: 1014px;
  height: 210px;
  position: absolute;
  top: 56px;
  left: 56px;
}

.close-button {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 16px;
}

.edit-inner-box {
  width: 13.31px;
  height: 13.31px;
  position: absolute;
  left: 8.35px;
  top: 9.35px;
}

.edit-case-details-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edit-case-detail-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 33%;
  padding-bottom: 12px;
  gap: 2px;
}

.menu-scan-edit-case-details-close-icon {
  width: 24px;
  height: 24px;
  left: 1041px;
  top: 10px;
  position: absolute;
}

.edit-case-about-label {
  color: #666666;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .edit-case-about-label {
  color: #cccccc;
}

.edit-case-about-value {
  color: #1a1a1a;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.dark-mode .edit-case-about-value {
  color: #e6e6e6;
}

.menu-edit-case-details-close-icon-inner {
  width: 13.31px;
  height: 13.31px;
  left: 5.35px;
  top: 5.35px;
  position: absolute;
}

.edit-case-payment-status,
.edit-case-payment-mode {
  width: 124px;
  height: 58px;
  position: absolute;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2px;
  display: inline-flex;
}

.edit-case-payment-status {
  left: 0;
  top: 0;
}

.edit-case-payment-mode {
  left: 424px;
  top: 0;
}

.edit-case-payment-label {
  color: #666666;
  font-size: 16px;
  font-family: "Open Sans";
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  word-wrap: break-word;
}
.dark-mode .edit-case-payment-label {
  color: #cccccc;
}

.edit-case-payment-value {
  font-size: 20px;
  font-family: "Open Sans";
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}
.dark-mode .edit-case-payment-value {
  color: #e6e6e6;
}

.edit-case-payment-value.edit-case-payment-status .edit-case-payment-value {
  color: #33bb39;
}

.edit-case-payment-download {
  width: 194px;
  height: 42px;
  position: absolute;
  left: 775px;
  top: 0;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.edit-case-payment-text {
  color: black;
  font-size: 16px;
  font-family: "Poppins";
  font-weight: 500;
  word-wrap: break-word;
}
.dark-mode .edit-case-payment-text {
  color: #e6e6e6;
}

.edit-case-payment-icon {
  width: 42px;
  height: 42px;

  background-color: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dark-mode .edit-case-payment-icon {
  background-color: #1e0419;
}

.dark-mode .edit-case-details-close-icon-inner img {
  color: #cccccc;
}

.edit-case-payment-icon-inner {
  width: 24px;
  height: 24px;
  display: flex;
}

.dark-mode .edit-case-payment-icon-inner {
  color: white;
}

.edit-case-details-background-payment {
  height: 170px;
  align-self: stretch;
  background-color: #fff;
  border-radius: 8px;
}
.dark-mode .edit-case-details-background-payment {
  background-color: #2d1227;
}

.edit-case-details-info-payment {
  width: 964px;
  height: 170px;
  left: 56px;
  top: 60px;
  position: absolute;
}
.edit-case-details-close-icon-payment {
  width: 24px;
  height: 24px;
  left: 1041px;
  top: 0px;
  position: absolute;
}

.editformcase-section3 {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.Editform-container {
  width: 100%;
  height: 3200px;
}

.editform-section3 {
  width: 100%;
  flex-shrink: 0;
  background-color: #fff;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  transition: margin-top 0.3s ease;
}

.edit-cases-information-details-container {
  display: flex;
  flex-direction: column;
  gap: 35px;
  justify-content: center;
  align-items: center;
}
.dark-mode .edit-cases-information-details-container {
  background-color: #2d1227;
}

.edit-cases-information-details-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 58px;
  flex-shrink: 0;
}

.edit-cases-information-details-content {
  display: flex;
  flex-direction: column;
}

.edit-cases-information-details-title {
  color: #883979;
  color: var(--Primary-Primary---01, #883979);
  font-family: Poppins;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.edit-cases-information-details-label {
  color: #666;
  color: var(--Neutrals-Neutral-05, #666);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.512px;
}

.dark-mode .edit-cases-information-details-label {
  color: #cccccc;
}
.edit-cases-information-details-value {
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
}

.dark-mode .edit-cases-information-details-value {
  color: #e6e6e6;
}

.editform-section3 {
  transition: margin-top 0.3s ease;
}

.menu-scan-container {
  position: relative;
  width: 100%;
  height: 350px;
  position: relative;
  background: white;
  border-radius: 12px;
  overflow: hidden;
}

.menu-scan-content {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin: 20px;
}

.menu-scan-wrapper {
  display: flex;
  gap: 10px;
  overflow: hidden;
}

.scan-menu-item {
  width: 239.2px;
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}
.scan-menu-item-box {
  align-self: stretch;
  height: 240px;

  border-radius: 12px;
  background-color: #fafafa;
}

.scan-menu-item-title {
  align-self: stretch;
  color: black;
  font-size: 24px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.69px;
  word-wrap: break-word;
}
.scan-menu-nav-button-left {
  position: relative;
  right: 516px;
  width: 36px;
  height: 209px;
  bottom: 135px;
  transform: translateY(-50%);
  background-color: #e9e9e9;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
  font-size: 24px;
  transition: background-color 0.3s ease;
}

.scan-menu-nav-button-right {
  position: relative;
  left: 516px;
  width: 36px;
  height: 209px;
  bottom: 135px;
  transform: translateY(-50%);
  background-color: #e9e9e9;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
  font-size: 24px;
  transition: background-color 0.3s ease;
}

.scan-menu-nav-button:disabled {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
  opacity: 0.5;
}

.edit-menu-item:hover {
  background-color: #883979;
  color: white;
}

.scan-menu-nav-button:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.7);
}
.case-logs-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 12px;
}

.log-edit-case-details-close-icon {
  width: 24px;
  height: 24px;
  left: 1450px;
  top: 280px;
  position: absolute;
}

.log-edit-case-details-close-icon-inner {
  width: 13.31px;
  height: 13.31px;
  left: 5.35px;
  top: 5.35px;
  position: absolute;
}

.case-logs-table {
  width: 1081px;
  height: 236px;
  overflow-y: auto;
  border-radius: 12px;
}

.case-log-heading th {
  text-align: left;
  color: #ad499a;
}

.case-logs-table td {
  text-align: left;
}

.pay-edit-case-details-close-icon {
  width: 24px;
  height: 24px;
  left: 1450px;
  top: 280px;
  position: absolute;
}

.pay-edit-case-details-close-icon-inner {
  width: 13.31px;
  height: 13.31px;
  left: 5.35px;
  top: 5.35px;
  position: absolute;
}

/* Case chat */
.editform-case-chat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .editform-case-chat {
  color: #e6e6e6;
}

.editform-case-chat-icon {
  height: 58px;
  width: 58px;
  background-color: #ffffff;
  border-radius: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark-mode .editform-case-chat-icon {
  background: #2d1227;
}

.phone-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.tab-container {
  width: 100%;
  height: 100%;

  border-radius: 8px;
  background-color: #fff;
}

.tab-header {
  width: 1081px;
  height: 80px;
  display: flex;
  top: 0;
}

.tab-item {
  padding: 22px 51px;
  background-color: transparent;
  color: black;
  justify-content: center;
  align-items: center;
  display: flex;
  cursor: pointer;
}
.dark-mode .tab-item {
  background-color: #1e0419;
  color: #fff;
}

.tab-item.active {
  background-color: #883979 !important;
  color: white;
}

.tab-text {
  font-size: 24px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  color: black;
}

.tab-item.active .tab-text {
  font-weight: 400;
  color: white;
}

.tab-content {
  width: 100%;
  height: 100%;

  left: 38px;
  top: 118px;
}

.next-button-container {
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  background: #8839790d;
}

.next-button {
  padding: 9px 18.5px;
  margin: 10px;
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
}

.next-button-icon {
  position: relative;
  top: 2px;
  padding: 10px;
}

.next-button:hover {
  background-color: #a14e9c;
}

.develop-tab {
  overflow: hidden;
}
.dark-mode .develop-tab {
  background-color: #2d1227;
}

.tab-item.highlight {
  background-color: #a14e9c;
  color: white;
}

.tab-item.active {
  /* Style for the active tab */
}

.next-button.disabled {
  background-color: #666666;
  color: #fff;
  cursor: not-allowed;
  /* opacity: 0.6; Add a fade effect */
}

.tab-hover-details {
  position: absolute;
  /* bottom: 100px; /* Position the box above the tab */
  /* left: 50%; Center it horizontally */
  transform: translateX(-50%);
  transform: translateY(-60px);
  border: 1px solid #ccc;
  color: black;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  z-index: 10;
}

.dark-mode .tab-hover-details {
  color: #fff;
}

.sample-collection-forms {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background: #8839790d;
  text-align: left;
  width: 1081px;
  padding: 0px !important;
}
.dark-mode .sample-collection-forms {
  background-color: #2d1227;
}

.sample-collection-forms-container-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 35px;
  margin: 38px;
}

.sampleHeight {
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.sample-collection-container-box1 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 30px;
}

.sample-collection-form {
  width: 494px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  display: flex;
}

.sample-collection-title {
  align-self: stretch;
  color: black;
  font-size: 24px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.69px;
  word-wrap: break-word;
}
.dark-mode .sample-collection-title {
  color: #e6e6e6;
}

.sample-collection-dropdown {
  padding: 10px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px #cccccc solid;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #b3b3b3;
}
.sample-collection-dropdown.filled {
  border: 1px #883979 solid;
  color: #883979;
}

.dark-mode .sample-collection-dropdown {
  background-color: #2d1227;
}

.sample-collection-select {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: white;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  color: #b3b3b3;
  -webkit-appearance: none;
          appearance: none;
  outline: none;
}
.sample-collection-select.filled {
  color: #883979;
  border: none;
}

.dark-mode .sample-collection-select {
  background-color: #2d1227;
}

.sample-collection-select:focus {
  border-color: #666;
}

.sample-collection-icon {
  width: 22px;
  height: 22px;
  position: relative;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;

  top: 25px;
}

.sample-collection-arrow {
  width: 22px;
  height: 22px;
  transform: rotate(-90deg);
}

.sample-collection-tab-menu {
  width: 100%;
  height: 100%;
  flex-direction: column;
  display: flex;
  gap: 20px;
}

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

.tabs {
  width: 168px;
  height: 26px;
  padding: 10px 0px;
  background: white;
  justify-content: center;
  align-items: center;
  display: flex;
  cursor: pointer;
  flex-grow: 1;
  color: black;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  text-align: center;
  transition: background 0.3s;
}
.dark-mode .tabs {
  background-color: #1e0419;
  color: #e6e6e6;
}

.tabs.active {
  background: #883979;
  color: white;
}

/* .tabs:hover {
  background: #f0f0f0;
} */

.tab-contentss {
  padding: 20px;
  background: white;
  border: 1px solid #cccccc;
  border-radius: 8px;
}

.sample-collection-submit-btn {
  padding: 10px 64px;
  background-color: #808080;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin: 10px;
}

.collect-footer-button {
  display: flex;
  position: relative;
  left: 582px;
  align-items: baseline;
}





.sample-collection-container-box-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Adjust spacing between fields */
}

.patient-form-group-extra {
  flex: 1 1; /* Ensures equal width distribution */
  min-width: 200px; /* Prevents shrinking too much */
  max-width: calc(50% - 10px); /* Ensures two fields per row */
  display: flex;
  flex-direction: column;
}


select option {
  background: #f0f0f0;
  color: #333;
  padding: 8px;
  font-size: 14px;
}

/* Hover effect (Firefox only) */
select option:hover {
  background: #e0e0e0;
}
.ai-llm img{

  width: '20px';
  height: '20px';
  position: 'relative';
  top: '-45px';
  right: '-428px';
  cursor: 'pointer';

}

/* @keyframes borderAnimation {
  0% {
    background-position: '0 0, 100% 0, 100% 100%, 0 100%';
  }
  100% {
    background-position: '100% 0, 100% 100%, 0 100%, 0 0';
  }
} */

@keyframes runBorder {
  0% { background-position: '0 0, 100% 0, 100% 100%, 0 100%'; }
  100% { background-position: '100% 0, 100% 100%, 0 100%, 0 0'; }
}



@keyframes runTop {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes runRight {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
@keyframes runBottom {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
@keyframes runLeft {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}
.sample-collection-container-box {
  width: 100%;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
}

.sample-collection-develop-container-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 50px;
}

.sample-integrity-section-container {
  display: flex;
  flex-direction: row;

  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  gap: 30px;
}
.header {
  align-self: stretch;
  color: black;
  font-size: 24px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0.69px;
  word-wrap: break-word;
}

.sample-section-box {
  display: flex;
  gap: 17px;
  text-align: left;
}

.dark-mode .sample-section-box {
  color: #666666;
}

.verification-section {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}

.verification-item {
  align-self: stretch;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

.dark-mode .verification-item{
  color: white;
}

.checkbox-input {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid #cccccc;
}

.verification-text {
  color: #1a1a1a;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}

.dark-mode .verification-text {
  color: #e6e6e6;
}

.sample-integrity-section {
  height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}

.sample-integrity-title {
  align-self: stretch;
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}

.select-box {
  padding: 10px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #cccccc;
  justify-content: center;
  align-items: flex-start;
  display: inline-flex;
  width: 494px;
  color: #b3b3b3;
}
.select-box.filled {
  color: #883979;
  border: 1px solid #883979;
}
.dark-mode .select-box {
  background-color: #2d1227;
  color: white;
}

.dropdown-select {
  width: 100%;
  padding: 8px;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  color: #333;
  border: 1px solid #cccccc;
  border-radius: 8px;
  background: white;
}

.dropdown-select option {
  color: black;
  width: 100%;
}

.develop-container {
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
  padding: 0 38px;
  background: #8839790d;
}

.dark-mode .develop-container {
  background-color: #2d1227;
}

.develop-header-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
}

.title {
  color: black;
  font-size: 24px;
  font-family: "Open Sans";
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0.69px;
  word-wrap: break-word;
  text-align: left;
}

.dark-mode .title {
  color: #e6e6e6;
}

.checkbox {
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 4px;
  border: 1px #cccccc solid;
}

.integrity-check-section {
  display: flex;
  flex-direction: column;
}

.integrity-check-title {
  color: black;
  font-size: 20px;
  font-family: "Open Sans";
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
  text-align: left;
}

.dark-mode .integrity-check-title {
  color: white;
}

.select-placeholder {
  color: #cccccc;
  font-size: 16px;
  font-family: "Open Sans";
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  word-wrap: break-word;
}

.arrow-container {
  width: 22px;
  height: 22px;
  position: relative;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.arrow {
  width: 6.15px;
  height: 10.37px;
  background: #cccccc;
}

.transport-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}

.transport-header {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.dark-mode .transport-header{
  color: white;
}

.transport-text {
  color: black;
  font-size: 20px;
  font-family: "Open Sans";
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}

.dark-mode .transport-text {
  color: white;
}

.sample-transportation-title {
  color: black;
  font-size: 24px;
  font-family: "Open Sans";
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0.69px;
  word-wrap: break-word;
}

.dark-mode .sample-transportation-title {
  color: #e6e6e6;
}

.transport-media-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.transport-media,
.temperature-control {
  width: 494px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}

.media-title {
  color: black;
  font-size: 20px;
  font-family: "Open Sans";
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
  text-align: left;
}

.dark-mode .media-title {
  color: white;
}

.duration-section {
  height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}

.duration-title {
  color: black;
  font-size: 20px;
  font-family: "Open Sans";
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}

.duration-select-box {
  padding: 10px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #cccccc;
  justify-content: center;
  align-items: flex-start;
  display: inline-flex;
  width: 494px;
  padding: 0;
}

.preparation-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
}

.preparation-title {
  color: black;
  font-size: 24px;
  font-family: "Open Sans";
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0.69px;
  word-wrap: break-word;
}

.samples-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.sample-selection {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 30px;
}

.sample-title {
  color: black;
  font-size: 20px;
  font-family: "Open Sans";
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}

.dark-mode .sample-title {
  color: white;
}

.samples-selection-box-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 30px;
}

.tissue-develop-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}

.tissue-develop-item-container {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 16px;
}

.tissue-develop-checkbox {
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 4px;
  border: 1px #cccccc solid;
}

.tissue-develop-item-text {
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.48px;
}

.tissue-develop-section-container {
  align-self: stretch;
  display: flex;

  align-items: center;
}

.tissue-develop-section {
  width: 494px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
}

.tissue-develop-section-title {
  align-self: stretch;
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
}

.tissue-develop-select-container {
  padding: 10px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px #cccccc solid;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 405px;
}

.tissue-develop-select-text {
  color: #cccccc;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
}

.tissue-develop-arrow-container {
  width: 22px;
  height: 22px;
  position: relative;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.tissue-develop-arrow {
  width: 6.15px;
  height: 10.37px;
  background: #cccccc;
}

.staining-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}

.staining-header {
  height: 114px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
}

.staining-title {
  align-self: stretch;
  color: black;
  font-size: 24px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0.69px;
  word-wrap: break-word;
}

.staining-select-container {
  padding: 10px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px #cccccc solid;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  gap: 405px;
}

.staining-select-text {
  color: #cccccc;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  word-wrap: break-word;
}

.staining-arrow-container {
  width: 22px;
  height: 22px;
  position: relative;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.staining-arrow {
  width: 6.15px;
  height: 10.37px;
  background: #cccccc;
}

.staining-type-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px #cccccc solid;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.staining-type-text {
  color: #cccccc;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  word-wrap: break-word;
}

.additional-tests-section {
  width: 100%;

  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
}

.additional-tests-header {
  align-self: stretch;
  color: black;
  font-size: 24px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0.69px;
  word-wrap: break-word;
}

.additional-tests-list {
  align-self: stretch;
  height: 138px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}

.additional-tests-item-container {
  align-self: stretch;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 98px;
}

.additional-tests-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

.checkbox {
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 4px;
  border: 1px #cccccc solid;
}

.additional-tests-item-text {
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}

.additional-tests-type-container {
  height: 92px;
  padding: 10px 957px 56px 10px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px #cccccc solid;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.additional-tests-type-text {
  color: #cccccc;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  word-wrap: break-word;
}

.additional-tests-checkboxes {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
}

.dark-mode .additional-tests-checkboxes {
  color: #e6e6e6;
}
.develop-input-field {
  width: 471px;
  /* height: 46px; */
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  color: black;
  margin-left: 0 !important;
  padding: 8px 10px;
  background-color: white;
}
.develop-input-field:focus,
.develop-input-field:not(:placeholder-shown) {
  border-color: #883979;
}

.transport-control-section textarea {
  width: 494px !important;
  resize: none;
}

.staining-type-section textarea {
  width: 1005px !important;
  height: 92px;
}

.dark-mode .develop-input-field {
  background-color: #2d1227;
  color: white;
}

.dark-mode .develop-input-field {
  background-color: #2d1227;
}

.save-button {
  padding: 10px 64px;
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin: 10px;
}

.save-button:hover {
  background-color: #2d1227;
}

.develop-footer-button {
  position: relative;
  left: 661px;
  padding-bottom: 20px;
}

.additional-tests-checkboxes label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.additional-tests-checkboxes textarea {
  width: 1005px !important;
  height: 92px;
}

.additional-tests-checkboxes-boxes {
  display: flex;
  justify-content: space-between;
}

.scan-container-sample {
  padding-top: 10px;
  padding-left: 10px;
  width: 100%;
  height: 810px;
  position: relative;
  background: #8839790d;
  border-radius: 12px;
  overflow-y: hidden;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.scan-container-sample::-webkit-scrollbar {
  width: 8px;
  border-radius: 100px;
}

.scan-container-sample::-webkit-scrollbar-thumb {
  background-color: #883979;
  border-radius: 100px;
}

.scan-container-sample::-webkit-scrollbar-track {
  background: transparent;
}

.scan-container-sample::-webkit-scrollbar-thumb:hover {
  background-color: #883979;
}


.scan-container-sample {
  scrollbar-width: thin;
  scrollbar-color: #883979 #f0f0f0;
}

.dark-mode .scan-container-sample {
  background-color: #1E0419;
}

.background-box {
  width: 1081px;
  height: 286px;
  left: 0;
}

.scan-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.item {
  width: 239.2px;
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}

.item-box {
  align-self: stretch;
  height: 240px;

  border-radius: 12px;
  background-color: #d9d9d9;
  background-size: cover;
  background-repeat: no-repeat;
}

.item-title {
  align-self: stretch;
  color: black;
  font-size: 24px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.69px;
  word-wrap: break-word;
  text-align: left;
}

.footer-scan {
  display: flex;
  /* justify-content: flex-end; */
  align-items: center;
  width: 100%;
  padding-left: 38px;
  padding-top: 24px;
  margin: 10px;
}

.footer-buttons {
  display: flex;
  gap: 16px;
}

.upload-button,
.new-scan-button {
  padding: 8px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  width: 150px;
  margin: 10px;
}

.upload-button {
  border: 1px #883979 solid;
  color: #883979;

  font-weight: 600;
}

.new-scan-button {
  background: #2585e0;
  color: white;
}

.next-analyze {
  padding: 9px 19.5px;
  background: #883979;
  border-radius: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.next-text {
  color: white;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  word-wrap: break-word;
}

.arrow-icon {
  width: 28px;
  height: 28px;
  position: relative;
  transform: rotate(-180deg);
  background: white;
}

.arrow-icon::before {
  content: "";
  width: 7.83px;
  height: 13.19px;
  position: absolute;
  left: 9.74px;
  top: 7.4px;
  background: white;
}

.scan-content {
  padding: 10px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin: 20px;
}

.item-thumbnail {
  width: 239.2px;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.scan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-wrap: wrap;
  grid-gap: 16px;
  gap: 16px;
}

.upload-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.upload-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0000001a;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-popup-content {
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 418px;
  height: 254px;
}

.file-info {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  background: #f2f2f2;
}

.file-info img {
  width: 60px;
  height: 60px;
  margin: 0px 10px;
}

.file-details {
  text-align: left;
}

.fileInfo-name {
  color: #000000;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 27.24px;
  letter-spacing: 0.0288em;
  text-align: left;
}

.file-details p {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  letter-spacing: 0.0288em;
  text-align: left;
  color: #000000;
  margin: 10px;
  padding: 0;
}

.progress-container {
  margin-bottom: 1.5rem;
}

.upload-progress-bar {
  height: 16px;
  background-color: #f0f0f0;
  border-radius: 100px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #883979;

  transition: width 0.3s ease-in-out;
}

.status {
  text-align: right;
  font-size: 0.875rem;
  color: #666;
}

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

.popup-actions button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  width: 184px;
  height: 46px;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.popup-actions button:first-child {
  border: 1px solid #883979;

  color: #883979;
}

.popup-actions button:last-child {
  border: 1px solid #eb1f2e;
  color: #eb1f2e;
}

.popup-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.popup-buttons .upload-btn {
  padding: 10px 15px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.popup-buttons .upload-btn:hover {
  background: #45a049;
}

.popup-buttons .upload-btn:disabled {
  background: #a5d6a7;
  cursor: not-allowed;
}

.popup-buttons .cancel-btn {
  padding: 10px 15px;
  background: #f44336;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.popup-buttons .cancel-btn:hover {
  background: #e53935;
}

.device-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.device-popup-content {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  width: 500px;
  max-width: 90%;
  position: relative;
  height: auto;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.device-popup-content::-webkit-scrollbar {
  width: 6px;
  border-radius: 100px;
}

.device-popup-content::-webkit-scrollbar-thumb {
  background-color: #883979;
  border-radius: 100px;
}

.device-popup-content::-webkit-scrollbar-track {
  background: transparent;
}

.device-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}


.back-button,
.close-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}


.back-button:hover,
.close-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.device-popup-main {
  margin-top: auto;
  width: 100%;
}

.add-device-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: #FFE6FA;
  color: #883979;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s;
  width: 547px;
  /* margin: 0; */
  margin-left: -23px;
}

.add-device-button:hover {
  background-color: #FFD6F0;
}

.device-form-container {
  position: relative;
  background: white;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  width: 100%;
}

.device-form-container.show {
  opacity: 1;
  visibility: visible;
}

.device-popup-content.hide {
  opacity: 0;
  visibility: hidden;
}

.tab-buttons {
  display: flex;
  gap: 16px;
  /* margin-bottom: 24px; */
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 8px;
}

.tab-button {
  padding: 8px 24px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
  color: #666;
}

.tab-button.active {
  border-bottom-color: #883979;
  color: #883979;
}

.newscan-form-content {
  flex: 1 1;
  /* padding: 16px 0; */
}

.device-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f3f3f3;
}

.devices-list-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 8px;
}

.devices-list-items::-webkit-scrollbar {
  width: 6px;
  border-radius: 100px;
}

.devices-list-items::-webkit-scrollbar-thumb {
  background-color: #883979;
  border-radius: 100px;
}

.devices-list-items::-webkit-scrollbar-track {
  background: transparent;
}

.devices-list-items::-webkit-scrollbar-thumb:hover {
  background-color: #883979;
}

.devices-list-items {
  scrollbar-width: thin;
  scrollbar-color: #883979 transparent;
  margin-bottom: 20px;
}

.device-list-item-title {
  margin: 0;
  font-family: Poppins;
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;

}

.devices-list-title {
  font-family: Poppins;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;

}

.newscan-connectbtn {
  background-color: #883979;
  padding: 7px 12px;
  color: white;
  border-radius: 8px;
  font-family: Poppins;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;

}

.newscan-wan-form {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.newscan-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.newscan-device-input {
  flex: 1 1;
  padding: 6px;
  /* border: 1px solid #e0e0e0; */
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  background: white;
}

.newscan-check-button, .newscan-connect-button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background: #883979;
  color: white;
  font-weight: 500;
  cursor: pointer;
  min-width: 100px;
}

.newscan-save-button {
  width: 100%;
  padding: 12px;
  border: 1px solid #883979;
  border-radius: 8px;
  background: transparent;
  color: #883979;
  font-weight: 500;
  cursor: pointer;
}

/* .newscan-status-section {
  margin: 20px 0;
} */

.newscan-status-text {
  font-size: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.newscan-status-value {
  font-weight: 500;
}

.newscan-status-value.idle {
  color: #883979;
}

.newscan-status-value.scanning {
  color: #2196F3;
}

.newscan-control-buttons {
  display: flex;
  gap: 10px;
}

.newscan-calibrate-button, .newscan-standby-button {
  flex: 1 1;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  color: #666;
  font-weight: 500;
  cursor: pointer;
}

.newscan-scan-controls {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

.newscan-begin-button, .newscan-pause-button, .newscan-abort-button {
  flex: 1 1;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.newscan-begin-button {
  background: #4CAF50;
  color: white;
}

.newscan-begin-button:disabled {
  background: #A5D6A7;
  cursor: not-allowed;
}

.newscan-pause-button {
  background: #2196F3;
  color: white;
}

.newscan-pause-button:disabled {
  background: #90CAF9;
  cursor: not-allowed;
}

.newscan-abort-button {
  background: #F44336;
  color: white;
}

.newscan-scan-info {
  background: #F8F8F8;
  padding: 20px;
  border-radius: 8px;
}

.newscan-scan-details {
  margin-bottom: 20px;
}

.newscan-scan-details p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
}

.newscan-progress-section {
  margin-top: 10px;
}

.newscan-progress-label {
  margin-bottom: 8px;
  color: #666;
}

.newscan-progress-bar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.newscan-progress-fill {
  height: 100%;
  background: #883979;
  transition: width 0.3s ease;
}

.newscan-qr-label-button {
  padding: 12px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  margin-top: auto;
}

.newscan-wan-top-form{
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.newscan-lan-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* padding: 20px; */
  width: 100%;
}

.newscan-lan-top-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.newscan-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.newscan-device-input {
  flex: 1 1;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
}

.newscan-port-input {
  width: 100px;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
}

.newscan-check-button,
.newscan-connect-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #8b4c8c;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.newscan-check-button:hover,
.newscan-connect-button:hover {
  background-color: #703971;
}

.newscan-save-button {
  padding: 8px 16px;
  border: 1px solid #8b4c8c;
  border-radius: 4px;
  background-color: white;
  color: #8b4c8c;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  width: fit-content;
}

.newscan-save-button:hover {
  background-color: #8b4c8c;
  color: white;
}

.newscan-status-section {
  margin: 20px 0;
}

.newscan-status-text {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.newscan-status-value {
  font-weight: 500;
}

.newscan-status-value.idle {
  color: #666;
}

.newscan-status-value.scanning {
  color: #2196f3;
}

.newscan-control-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.newscan-calibrate-button,
.newscan-standby-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: #333;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.newscan-calibrate-button:hover,
.newscan-standby-button:hover {
  background-color: #e0e0e0;
}

.newscan-scan-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.newscan-begin-button,
.newscan-pause-button,
.newscan-abort-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.newscan-begin-button {
  background-color: #4caf50;
  color: white;
}

.newscan-begin-button:hover {
  background-color: #388e3c;
}

.newscan-begin-button.active {
  background-color: #388e3c;
}

.newscan-pause-button {
  background-color: #ff9800;
  color: white;
}

.newscan-pause-button:hover {
  background-color: #f57c00;
}

.newscan-abort-button {
  background-color: #f44336;
  color: white;
}

.newscan-abort-button:hover {
  background-color: #d32f2f;
}

.newscan-scan-info {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.newscan-scan-details {
  margin-bottom: 15px;
}

.newscan-scan-details p {
  margin: 5px 0;
  font-size: 14px;
}

.newscan-progress-section {
  margin-top: 10px;
}

.newscan-progress-label {
  font-size: 14px;
  margin-bottom: 5px;
}

.newscan-progress-bar {
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.newscan-progress-fill {
  height: 100%;
  background-color: #8b4c8c;
  transition: width 0.3s ease;
}

.newscan-qr-label-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #2196f3;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
  width: fit-content;
}

.newscan-qr-label-button:hover {
  background-color: #1976d2;
}

/* Disabled state styles */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Tab styles */
.tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.tab-button.active {
  background-color: #8b4c8c;
  color: white;
}

.tab-button:hover {
  background-color: #e0e0e0;
}

.tab-button.active:hover {
  background-color: #703971;
}
/* .scan-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: white;
    border-radius: 12px;
    overflow: hidden;
} */

.background-box {
  width: 1081px;
  height: 286px;
  left: 0;
}
.scan-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.item {
  width: 239.2px;
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}

/* Item-box */
/* .item-box {
  align-self: stretch; 
  height: 240px; 
  border-radius: 12px; 
} */

/* .item-title {
  align-self: stretch; 
  color: black;
  font-size: 24px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.69px;
  word-wrap: break-word;
} */

/* .footer-scan {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
} */

.footer-buttons {
  display: flex;
  gap: 16px;
}

/* .upload-button,
.new-scan-button {
  padding: 8px; 
  border-radius: 8px; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  word-wrap: break-word;
}

.upload-button {
  border: 1px #883979 solid; 
  color: #883979; 
} */

.delete-icon {
  width: 28px;
  height: 28px;
  position: relative;
  top: 75px;
  color: red;
  border: 1px solid red;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.icon img {
  padding-left: 18px;
  padding-right: 2px;
}

/* .slide-detail-container-box {
  display: flex;
  justify-content: flex-end;
} */

.next-text {
  color: white;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  word-wrap: break-word;
}

.arrow-icon {
  width: 28px;
  height: 28px;
  position: relative;
  transform: rotate(-180deg);
  background: white;
}

.arrow-icon::before {
  content: "";
  width: 7.83px;
  height: 13.19px;
  position: absolute;
  left: 9.74px;
  top: 7.4px;
  background: white;
}

.slide-background {
  width: 238px;
  height: 210px;
  background-size: cover;
  background: #d9d9d9;
  border-radius: 12px;
}

/* .scan-content {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin: 20px;
} */

.item-thumbnail {
  width: 239.2px;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.analyze-buttons {
  background: #8839790d;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 12px;
}

.second-opinion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px;
  width: 100%;
  border-radius: 8px;
}

.second-opinion-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #883979;
  width: 168px;
  height: 100%;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  font-weight: 500;
}

.second-opinion-btn-sec {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #883979;
  width: 168px;
  height: 46px;
  border-radius: 8px;
  color: #883979;
  font-size: 16px;
  font-weight: 500;
}

.dark-mode .second-opinion-btn-sec {
  color: #fff;
}

.second-opinion-label {
  color: #883979;
}

.dark-mode .analyze-buttons {
  background-color: #2d1227;
}

.arrow-slide {
  position: relative;
  top: 3px;
  left: 8px;
}

.AnalzeCardsMain {
  /* height: 930px; */
  overflow-x: hidden;
  overflow-y: scroll;
}

.slide-container-main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.dark-mode .slide-container-main {
  color: white;
}

.next-button-report {
  margin-top: 10px;
  height: 46px;
  width: 130px;
  padding: 8px 18.5px;
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
}

.next-button-report-icon {
  position: relative;
  top: 2px;
  padding: 10px;
}

.next-button-report:hover {
  background-color: #a14e9c;
}


.confirmation-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000080;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.confirmation-popup-content {
  background: #ffffff;
  padding: 20px;
  width: 578px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.confirmation-popup-message {
  font-family: Poppins;
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #1a1a1a;
  margin-bottom: 40px;
}

.confirmation-popup-buttons {
  display: flex;
  justify-content: space-between;
  height: 56px;
  width: 540px;
}

.confirmation-cancel-button {
  background-color: white;
  color: #e53935;
  border: 1px solid #e53935;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  width: 49%;
  font-family: Poppins;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.confirmation-cancel-button:hover {
  background: #f44336;
  color: white;
}

.confirmation-confirm-button {
  background: #883979;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  width: 49%;
  font-family: Poppins;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.confirmation-confirm-button:hover {
  background: #4a148c;
}

.second-opinion-button {
  text-align: center;
  margin-top: 20px;
}

.second-opinion-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #2585e0;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.second-opinion-btn:hover {
  background-color: #1e73b8;
}

.conclude-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 526px;
  height: auto;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

.conclude-popup-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.conclude-heading {
  margin: 0;
  font-size: 24px;
}

.conclude-textarea {
  width: 462px !important;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
  margin-left: 0px !important;
}

.conclude-submit-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.conclude-submit-btn:hover {
  background-color: #883979;
}

.conclude-close-btn {
  position: absolute;
  background: none;
  border: none;
  font-size: 24px;
  color: #333;
  cursor: pointer;
  align-self: flex-end;
}

.conclude-close-btn:hover {
  color: #e74c3c;
}

.slide-card {
  height: 242px;
  position: relative;
  background: #8839790d;
  overflow: hidden;
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.dark-mode .slide-card {
  background-color: #2d1227;
}

.slide-background {
  width: 238px;
  height: 210px;
  background-size: cover;
  background: #d9d9d9;
  border-radius: 12px;
}

.slide-detail-container-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
}

.slide-detail-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.slide-detail {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2px;
  width: 50%;
}

.slide-detail-label {
  color: #666666;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
}

.slide-detail-value {
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
}

.dark-mode .slide-detail-value {
  color: #e6e6e6;
}

.analyze-button-container {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  /* margin-top: 16px; */
}

.analyze-button {
  padding: 8px;
  background: #883979;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  cursor: pointer;
}

.analyze-button.disabled {
  background: grey;
  cursor: not-allowed;
}

.dark-mode .analyze-button {
  border-color: #e6e6e6;
}

.analyze-button-label {
  color: white;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}

.analyze-button:hover{
  background-color: #531648;
}

.close-case-button {
  padding: 8px;
  background: white;
  color: red;
  border: 1px solid #eb1f2e;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.close-case-button:hover{
  background-color: red;
  color: white;
}

.dark-mode .close-case-button {
  background-color: transparent;
  color: white;
}

.dark-mode .close-case-button:hover{
  background-color: red;
}

.icon {
  width: 24px;
  height: 24px;
}

.slide-report-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* min-height: 100vh; */
  padding: 20px;
  background-color: #ffffff;
  background-color: var(--background-color, #ffffff);
}

.dark-mode .slide-report-container{
  background-color: #2d1227;
}

.report-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
}

.pdf-canvas {
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000080;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-container {
  background: #ffffff;
  padding: 20px;
  width: 578px;
  height: 418px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-title {
  font-family: Poppins;
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  text-align: center;
}

.assign-container {
  margin: 40px 0px;
  display: flex;
  flex-direction: column;
  width: 518px;
}

.assign-button,
.assign-select,
.or-text {
  font-family: Poppins;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.assign-button {
  background: #883979;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  font-weight: 500;
}

.or-text {
  color: #000000;
}

.assign-select {
  width: 100%;
  padding: 8px;
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  margin-bottom: 20px;
  color: #b3b3b3;
  text-align: left;
}

.assign-select:disabled {
  border-color: darkgrey;
  background-color: lightgray;
  cursor: not-allowed;
}

.popup-buttons {
  display: flex;
  justify-content: space-between;
  height: 56px;
}

.cancel-button {
  background-color: white;
  color: #e53935;
  border: 1px solid #e53935;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  width: 49%;
  font-family: Poppins;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.assign-submit-button {
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  width: 49%;
  font-family: Poppins;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.cancel-button:hover {
  background-color: #fce4e4;
}

.submit-button:hover {
  background-color: #357ae8;
}

.disabled-message {
  color: gray;
  font-size: 0.9em;
  margin-top: 1rem;
}

.submit-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
.assign-popup-role-selection-wrapper {
  position: relative;
  width: 496px;
  display: inline-block;
}

.assign-popup-role-dropdown-container {
  position: relative;
  width: 100%;
}

.assign-popup-role-selector {
  font-size: 16px;
  color: #883979;
  border: 1px solid #883979;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 20px;
}
.assign-popup-role-selector.disabled {
  background-color: grey;
  border: none;
  color: #fff;
  cursor: not-allowed;
}
.assign-popup-role-selector.disabled:hover {
  background-color: grey;
}

.assign-popup-role-selector:hover {
  background-color: #f8f8f8;
}

.assign-popup-role-dropdown-arrow {
  transition: transform 0.3s ease;
}

.assign-popup-role-dropdown-arrow.open {
  transform: rotate(180deg);
}

.assign-popup-role-dropdown-options {
  position: absolute;

  width: 516px;
  background: #fff;
  border: 1px solid #883979;
  border-radius: 4px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}

.assign-popup-role-dropdown-option {
  padding: 10px;
  font-size: 16px;
  color: #883979;
  cursor: pointer;
  text-align: left; /* Left-align text */
  border-bottom: 1px solid #ddd;
  transition: background 0.3s ease;
}

.assign-popup-role-dropdown-option:hover {
  background: #883979;
  color: #ddd;
}

.case-scan-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: #8839790d;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dark-mode .scan-container {
  background-color: #2d1227;
}
.background-box {
  width: 1081px;
  height: 286px;
  left: 0;
}
.dark-mode .background-box {
  background-color: #2d1227;
}

.scan-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.item {
  width: 239.2px;
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}

.item-box {
  align-self: stretch;
  height: 240px;

  border-radius: 12px;
  background-color: #d9d9d9;
}

.item-title {
  align-self: stretch;
  color: black;
  font-size: 24px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.69px;
  word-wrap: break-word;
  text-align: left;
}
.dark-mode .item-title {
  color: #d9d9d9;
}

.footer-scan {
  display: flex;
  /* justify-content: flex-end; */
  align-items: center;
  width: 100%;
  padding-left: 38px;
  padding-top: 24px;
}

.footer-buttons {
  display: flex;
  gap: 16px;
}

.upload-button,
.new-scan-button {
  padding: 8px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  word-wrap: break-word;
  width: 150px;
}

.upload-button {
  border: 1px #883979 solid;
  color: #883979;

  font-weight: 600;
}

.upload-button:hover {
  background-color: #883979;
  color: #e6e6e6;
}

.dark-mode .upload-button {
  border-color: #e6e6e6;
  color: #e6e6e6;
}

.new-scan-button {
  background: #2585e0;
  color: white;
}

.next-analyze {
  padding: 9px 19.5px;
  background: #883979;
  border-radius: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.next-text {
  color: white;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  word-wrap: break-word;
}

.arrow-icon {
  width: 28px;
  height: 28px;
  position: relative;
  transform: rotate(-180deg);
  background: white;
}

.arrow-icon::before {
  content: "";
  width: 7.83px;
  height: 13.19px;
  position: absolute;
  left: 9.74px;
  top: 7.4px;
  background: white;
}

.scan-content {
  /* width: 100%; */
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin: 40px 60px 40px 60px;
}

.item-thumbnail {
  width: 239.2px;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.scan-button {
  background: #883979;
  border: none;
  color: #ffffff;
  font-size: 1.5em;
  width: 36px;
  height: 130px;
  position: absolute;
  top: 119px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.scan-button.prev {
  left: 0;
  border-radius: 0px 10px 10px 0px;
}

.scan-button.next {
  right: 0;
  border-radius: 10px 0px 0px 10px;
}

.scan-button:disabled {
  background: #b3b3b3;
  color: black;
}

.dark-mode .appointment-table-header{
    color: white !important;
}

.dark-mode .appointment-table-row{
    background-color: transparent !important;
}

.colorGreen{
    color: green;
}


.case-chat-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #89898980;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.dark-mode .case-chat-popup-overlay {
  background: rgba(255, 255, 255, 0.1);
}

.case-chat-container {
  display: flex;
  width: 700px;
  height: 700px;
  gap: 0px;
  border-radius: 12px;
  opacity: 1;
  background: #ebebeb;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
}

.dark-mode .case-chat-container {
  background: #2d1227;
}

.case-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  position: relative;
  background-color: white;
  border-radius: 8px 8px 0px 0px;
}

.dark-mode .case-chat-header {
  background: #1e0419;
}

.case-header-profile {
  display: flex;
}

.case-header-avatar {
  width: 40px;
  height: 40px;
  background-color: #e5e7eb;
  border-radius: 50%;
}

.case-header-info {
  margin-left: 12px;
  display: flex;
  align-items: center;
}

.case-header-name {
  font-weight: 600;
  color: #111827;
}

.dark-mode .case-header-name {
  color: #e6e6e6;
}

.case-online-indicator {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  margin-left: 8px;
}

.case-close-button {
  position: relative;
  left: 335px;
  top: -319px;
  font-size: 24px;
  color: black;
  border: none;
  z-index: 9999;
  cursor: pointer;
  width: 42px;
  height: 42px;
  padding: 9.36px;
}

.dark-mode .case-close-button {
  color: #fff;
}

.case-date-divider {
  display: flex;
  justify-content: center;
  margin: 20px 0 60px;
}

.case-date-divider span {
  color: #808080;
  font-size: 16px;
  font-family: Open Sans;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .case-date-divider span {
  color: #e6e6e6;
}

.case-messages-container {
  flex: 1 1;
  padding: 0 16px 10px 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
}

.case-message-wrapper {
  display: flex;
  align-items: flex-start;
}

.case-message-sent {
  justify-content: flex-end;
}

.case-message-received {
  justify-content: flex-start;
}

.case-message-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.case-message-sent .case-message-avatar {
  margin-left: 8px;
}

.case-message-received .case-message-avatar {
  margin-right: 8px;
}

.case-message-content {
  display: flex;
  flex-direction: column;
}

.case-message-info {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.received-msg-info {
  flex-direction: row-reverse;
  gap: 10px;
}

.case-sender-name {
  font-size: 14px;
  color: #374151;
}

.case-message-time {
  font-size: 14px;
  color: #6b7280;
  margin-left: 8px;
}

.case-message-bubble {
  padding: 12px;
  border-radius: 0px 10px 10px 10px;
  max-width: 75%;
  /* border: 0.5px solid #a0a0a080; */
}

.case-sent-bubble {
  background: #883979;
  border-radius: 10px 0px 10px 10px;
  color: white !important;
  align-self: end;
}

.dark-mode .case-sent-bubble {
  background: #eaacde33;
}

.case-received-bubble {
  background: #e6e6e6;
  /* border: 1px solid #A0A0A080; */
  color: black;
}

.dark-mode .case-received-bubble {
  background: #883979;
}

.hidden .case-message-received .case-received-bubble {
  color: #000000;
  transform: translatex(0px) translatey(0px);
}

.hidden .case-received-bubble p {
  color: #000000;
}

.case-message-bubble p {
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.024em;
  text-align: left;
  padding: 0px;
  margin: 0;
}

.dark-mode .case-message-bubble p {
  color: #e6e6e6;
}

.case-message-input-container {
  padding: 16px;
  display: flex;
  align-items: center;
  border-top: 1px solid #b3b3b3;
}

.case-message-input {
  flex: 1 1;
  padding: 8px;
  color: #883979;
}

.dark-mode .case-message-input {
  color: white;
}

/* Change color on hover */
/* .case-message-input-attach:hover {
  color: #883979;
  border: 1px solid #883979;
  }
  
  .case-message-input-attach:focus {
  color: #883979;
  border: 1px solid #883979;
  
  } */

.case-message-input-attach {
  display: flex;
  align-items: center;
  width: 100%;
  /* border: 1px solid #b3b3b3; */
  border-radius: 8px;
}

.case-message-input::placeholder {
  color: #6b7280;
}

.case-send-button {
  margin-left: 16px;
  padding: 8px 32px;
  background: #883979;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .case-send-button {
  background: #883979;
  border: 1px solid #ad499a;
}

.dark-mode .case-message-search {
  color: #e6e6e6;
}


.home-btn-link,
.back-btn-link,
.forward-btn-link {
  position: fixed;
  z-index: 1000;
  height: 170px;
}

.home-btn-link {
  height: 76px;
  gap: 28px;
}

.home-btn-link {
  left: 0;
  width: 4px;
  display: flex;
  justify-content: center;
}
.back-btn-link {
  left: 0;
  width: 4px;
  display: flex;
  padding-top: 1px;
  justify-content: center;
}

.forward-btn-link {
  right: 0;
  width: 4px;
  display: flex;
  justify-content: center;
}

.nav-button {
  top: 204px;
  width: 4px;
  /* height: 180px; */
  border-radius: 0px 12px 12px 0px;
  background-color: #b3b3b3;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transform-origin: left;
  text-align: center;
  transform: scaleX(0.9);
  transition: background-color 0.3s ease, transform 0.5s ease;
}

.forward-btn-link .nav-button {
  border-radius: 12px 0px 0px 12px; 
  transform-origin: right; 
}

.nav-button:hover {
  transform: scaleX(1.5); 
}

.nav-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  width: 0.2px;
}

.dark-mode .nav-button {
  background-color: #333;
}

.dark-mode .nav-button {
  background-color: #88397980;
}
@media (min-width: 1201px) {

  .home-btn-link {
    top: 109px;
    height: 76px;
  }

  .back-btn-link {
    top: 204px;
  }

  .forward-btn-link {
    top: 204px;
  }
}

@media (min-width: 741px) and (max-width: 1200px) {
  .home-btn-link {
    top: 100px;
    
  }

  .back-btn-link {
    top: 204px; 
    height: 180px;
  }

  .forward-btn-link {
    top: 204px; 
  }
}

@media (max-width: 740px) {
  .home-btn-link {
    top: 100px; 
    height: 50px;
  }

  .back-btn-link {
    top: 180px; 
    height: 100px;
  }

  .forward-btn-link {
    top: 180px; 
    height: 100px;
  }
}
.hospital-dashboard {
    width: 1201px;
    height: 1172px;
}

.hospital-dashboard-section1 {
    display: flex;
    flex-direction: row;
    gap: 30px;
}


.hospital-dashboard-donut {
    width: 249px;
    height: 304px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #FFF;
    background: var(--Primary-Base-White, #FFF);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.20);
}

.hospital-dashboard-graph {
    width: 804px;
    height: 304px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #FFF;
    background: var(--Primary-Base-White, #FFF);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.20);
}


.hospital-graph-container {
  width: 100% !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.canvas-container {
  width: 750px;
  height: 200px;
}

.hospital-timeframe-buttons {
  margin-bottom: 20px;
  padding-left: 528px;
}

.hospital-timeframe-buttons button {
  margin: 0 5px;
  padding: 10px;
  cursor: pointer;
}

.hospital-timeframe-buttons .active {
  color: #883979;
}

.dark-mode .hospital-timeframe-buttons .active {
  color: #883979;
}

.dark-mode .hospital-timeframe-buttons button {
  color: #e6e6e6;
}

.error {
  color: red;
  /* font-weight: bold; */
  font-size: 10px;
}

.error-phone {
  color: red;
  font-size: 10px;
  margin-top: 54px;
  position: absolute;
}

.hospital-search-cases {
  width: 100%;
  position: relative;
}

.search-bar-header {
  width: 100%;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-title {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  text-align: left;
  color: black;
}

.dark-mode .header-title {
  color: #e6e6e6;
}

.search-bar-container-hospital {
  width: 779px;
  height: 46px;
  background: white;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);

  border-radius: 8px;
  display: flex;
  align-items: center;
}

.dark-mode .search-bar-container-hospital {
  border: 1px solid #ccc;
  background-color: transparent;
}

.hospital-search-icon {
  width: 24px;
  height: 24px;
  padding-left: 5px;
  color: #b3b3b3;
}

.search-input {
  flex-grow: 1;

  outline: none;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  color: rgba(0, 0, 0, 0.2);
}
.search-input:hover {
  border: 1px solid #883979;
  cursor: pointer;
}

.sort-container {
  display: inline-flex;
  padding: 4px 4px 4px 4px;
  width: 140px;
  /* height: 46px; */
  justify-content: center;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  align-items: center;
  gap: 8px;
  background-color: #fff;
  padding: 5px !important;
  border-radius: 8px;
}
.sort-label {
  color: black;
  font-size: 16px;
  justify-content: center;
  font-family: "Open Sans", sans-serif;
  margin-right: 4px;
  height: 41px;
  padding-top: 20px;
}

.sort-icon-container {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
  display: flex;
  align-items: center;
  display: flex;
  justify-content: center;
}

.sort-icon {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.table-header {
  background-color: #fff;
}

.table-body {
  background-color: transparent;
}

.table-row {
  /* transition: background-color 0.2s; */
}

.table-row:hover {
  /* background-color: #f9f9f9; */
}

.pagination-controls {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.pagination-controls button {
  margin: 0 10px;
  padding: 5px 10px;
  border: none;
  background-color: #007bff;

  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.pagination-controls button:disabled {
  background-color: #c0c0c0;

  cursor: not-allowed;
}

.pagination-controls span {
  align-self: center;

  font-size: 16px;

  font-family: "Open Sans", sans-serif;
}

.table-header th {
  padding: 0;
  border: 0;
}


.DonutChart_donut-chart-wrapper__5k8yB {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 249px;
  height: 324px;
  flex-shrink: 0;
  gap: 44px;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  ;
}
/*
.donut-chart-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 249px;
height: 324px;
flex-shrink: 0;
gap: 44px;
align-items: center;
}*/

.DonutChart_donut-chart-container__d8suP {
  
  position: relative;
  background: white;
  width: 171px;
  height: 171px;
  flex-shrink: 0;
  margin-top: 40px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.DonutChart_dark-mode__S1RoQ .DonutChart_donut-chart-container__d8suP{
  background-color: #2D1227;
}

.DonutChart_donut-chart-wrapper__5k8yB.DonutChart_dark-mode__S1RoQ {
  
  background-color: #2D1227;
}

.DonutChart_dark-mode__S1RoQ .DonutChart_donut-chart-legend__tGsxB {
  background-color: #2D1227;
}

.DonutChart_dark-mode__S1RoQ .DonutChart_donut-chart-legend__tGsxB .DonutChart_legend-text__ToShD {
  color:#CCCCCC;
  ;
}


.DonutChart_donut-chart-legend__tGsxB {
  width: 217px;
  height: 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
  flex-shrink: 0;
  background-color: white;
}

.DonutChart_donut-chart-legend__tGsxB .DonutChart_legend-item__i1\+Fi {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 4px;
}

.DonutChart_donut-chart-legend__tGsxB .DonutChart_legend-color-box__rfwKO {
  width: 17px;
  height: 12px;
  border-radius: 2px;
}

.DonutChart_donut-chart-legend__tGsxB .DonutChart_legend-text__ToShD {
  color: black;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  letter-spacing: 0.38px;
  word-wrap: break-word;
}
.DonutChart_chart-title__Hznu- {
  font-size: 20px;
  margin-bottom: 18px;
  text-align: left;
  color: #333;
}

.DonutChart_dark-mode__S1RoQ .DonutChart_chart-title__Hznu- {
  color: #fff;
}
.LineGraph_graph-container__JAiUG {
  width: 527px;
  height: 324px;
  flex-shrink: 0;
  position: relative;
}

.LineGraph_graph-container__JAiUG.LineGraph_dark-mode__unR9h{
  background-color:#2D1227;
  
}

.LineGraph_dark-mode__unR9h .LineGraph_timeframe-buttons__czfgB button{
  background-color:#2D1227;
  color:#E6E6E6;
  ;
}

.LineGraph_dark-mode__unR9h .LineGraph_timeframe-buttons__czfgB button.LineGraph_active__-FOCC{
  background-color:#2D1227;
}

.LineGraph_timeframe-buttons__czfgB {
  display: flex;
  justify-content: right;
  align-items: end;
  padding-top: 20px;
  padding-left: 20px;
}

.LineGraph_timeframe-buttons__czfgB button {
  background-color: #fff;
  border: none;
  font-family: Open Sans;
  /* padding: 10px 10px;
  margin: 0 5px; */
  cursor: pointer;
  font-size: 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
  color: rgba(0, 0, 0, 0.25);
}

.LineGraph_timeframe-buttons__czfgB button.LineGraph_active__-FOCC {
  background-color: #fff;
  color: #883979;
}

.LineGraph_timeframe-buttons__czfgB button:hover {
  background-color: #fff;
}

.LineGraph_chart-container__uAaTY {
  position: relative;
  width: 100%;
  height: 100%;
}

.LineGraph_graph-bar__xwut2 {
  height: 260px !important;
  width: 510px !important;
  padding-bottom: 4px;
  padding-left: 4px;
  padding-right: 14px;
  color: #000;
  
}

.LineGraph_chart-container__uAaTY .LineGraph_chartjs-render-monitor__ZIOty {
  width: 100% !important; 
  height: auto !important; 
}

.LineGraph_chart-container__uAaTY .LineGraph_chartjs-scale__37RnM {
  color: #666;
  font-size: 12px;
}

.LineGraph_chart-container__uAaTY .LineGraph_chartjs-axis-labels__SxFNT {
  color: #682b2b;
  font-size: 12px;
}

.LineGraph_chart-container__uAaTY .LineGraph_chartjs-bar__lr9hR {
  width: 7px;
  background-color: #883979 !important;
  border: 1px solid #883979 !important; 
  border-radius: 4px;
}

.LineGraph_chart-container__uAaTY .LineGraph_chartjs-bar__lr9hR:hover {
  background-color: #b06292 !important;
}


.LineGraph_patient-graph-container__xw03K {
  width: 799px;
  height: 372px;

  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-right: 0px;
  margin-top: 15px;
  
}
.LineGraph_patient-graph-container-box__9ywJK {
  width: 100%;
  height: 318px;
  background-color: #fff;
  border-radius: 12px;
  background: #fff;
  background: var(--Primary-Base-White, #fff);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  padding-right: 0px;
  padding-bottom: 23px;
}

.LineGraph_patient-inner-container__Njmf2{
  width: 746px;
  height: 266px;
  margin: 0 auto;
}

.LineGraph_patient-graph-container-box__9ywJK.LineGraph_dark-mode__unR9h{
  background-color:#2D1227;
  
}

.LineGraph_patient-graph-title__Ve7gv.LineGraph_dark-mode__unR9h {
  color: #E6E6E6;
}

.LineGraph_total-case-title__nVtvC.LineGraph_dark-mode__unR9h {
  color: #E6E6E6;
}

.LineGraph_patient-graph-title__Ve7gv {
  align-self: stretch;
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  text-align: justify;
}
.LineGraph_timeframe-buttons-container__UnSUz {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}
.LineGraph_total-case-title__nVtvC {
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  padding: 20px;
}
.LineGraph_custom-legend-container__IjgN1 {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.LineGraph_legend-item__vIt8m {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.LineGraph_color-box-cases__Y8ZUP,
.LineGraph_color-box-reports__uhy0b {
  width: 17px;
  height: 12px;
  border-radius: 2px;
}

.LineGraph_color-box-cases__Y8ZUP {
  background-color: #883979;
}

.LineGraph_color-box-reports__uhy0b {
  background-color: #288FF0;
}
.LineGraph_custom-labels__Pz8BD {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}

.LineGraph_custom-label__DZMRi {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #333;
}

.LineGraph_color-box__yXaZZ {
  width: 17px;
  height: 12px;
  margin-right: 5px;
  border-radius: 2px;
}
.LineGraph_dark-mode__unR9h .LineGraph_custom-label__DZMRi {
  color: #E6E6E6;
}
.patient-dashboard {
  width: 100%;
  height: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(/static/media/bg.b8637adb17db611a82bc.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 100px;
  gap: 0px;
  opacity: 1;
  width: 100%;
  height: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(/static/media/bg.b8637adb17db611a82bc.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 100px;
  gap: 0px;
  opacity: 1;
}

.dark-mode .patient-dashboard {
  background-image: url(/static/media/bgdark.3915cd3767a0a72ba2a3.png);
  background-color: #1e0419;
  color: #e0e0e0;
  background-image: url(/static/media/bgdark.3915cd3767a0a72ba2a3.png);
  background-color: #1e0419;
  color: #e0e0e0;
}

.Patient-dashboard-container {
  margin: 30px 60px 15px 60px;
  position: relative;
  width: 1081px;
  height: Hug (767px) px;
  left: 110px;
  gap: 30px;
  opacity: 1;
  margin: 30px 60px 15px 60px;
  position: relative;
  width: 1081px;
  height: Hug (767px) px;
  left: 110px;
  gap: 30px;
  opacity: 1;
}

.dark-mode .Patient-dashboard-container {
  background-color: none;


}

.Patient-container-box {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex-shrink: 0;
  align-items: center;
  width: 80%;
  max-width: 1081px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex-shrink: 0;
  align-items: center;
  width: 80%;
  max-width: 1081px;
  height: auto;
}
.fab {
  position: absolute;
  bottom: -15px;
  right: 145px;
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.edit-cases-card {
  width: 1081px;
  height: 60px;
  justify-content: center;
  align-items: center;
  width: 1081px;
  height: 60px;
  justify-content: center;
  align-items: center;
}

.edit-menu-options {
  width: 1081px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 11px;
  width: 1081px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 11px;
}

.p-menu-item {
  width: 249px;
  height: 55px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background-color: transparent;
  cursor: pointer;
  font-family: "Open Sans";
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.48px;
  border: 1px solid #883979;
}

.dark-mode .p-menu-item {
  background-color: transparent;
  color: #e6e6e6;
  background-color: transparent;
  color: #e6e6e6;
}

.p-menu-item.active {
  border-radius: 8px;
  background: #883979;
  color: #fff;
  display: flex;
  width: 249px;
  height: 55px;
  padding: 15px 53px 15px 55px;
  border-radius: 8px;
  background: #883979;
  color: #fff;
  display: flex;
  width: 249px;
  height: 55px;
  padding: 15px 53px 15px 55px;
}

.dark-mode .p-menu-item.active {
  color: #e6e6e6;
  background-color: #883979;
  color: #e6e6e6;
  background-color: #883979;
}

/* Profile css */
.Patient-details {
  display: flex;
  width: 1021px;
  height: 252px;
  margin-top: 30px;
  margin-left: 30px;
  gap: 20px;
}

.dark-mode .Patient-details {
  background-color: #2d1227;
  background-color: #2d1227;
}

.Patient-details-image {
  width: 214px;
  height: 252px;
  top: 30px;
  left: 30px;
  gap: 0px;
  border-radius: 8px;
  opacity: 1;
  width: 214px;
  height: 252px;
  top: 30px;
  left: 30px;
  gap: 0px;
  border-radius: 8px;
  opacity: 1;
}

.details-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 777px;
  height: 252px;
  top: 30px;
  left: 274px;

  opacity: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 777px;
  height: 252px;
  top: 30px;
  left: 274px;

  opacity: 1;
}

.details-row {
  width: 777px;
  height: 58px;
  display: flex;
  align-items: center;
  width: 777px;
  height: 58px;
  display: flex;
  align-items: center;
}

.details-row2 {
  width: 461px;
  height: 58px;
  display: flex;
  align-items: center;
  margin-top: 25px;
  width: 461px;
  height: 58px;
  display: flex;
  align-items: center;
  margin-top: 25px;
}

.details-row3 {
  width: 123px;
  height: 58px;
  display: flex;
  align-items: center;
  margin-top: 25px;
  width: 123px;
  height: 58px;
  display: flex;
  align-items: center;
  margin-top: 25px;
}

.detail-column {
  width: 110px;
  height: 58px;
  gap: 2px;
  width: 110px;
  height: 58px;
  gap: 2px;
}

.detail-column2 {
  gap: 2px;
  width: 110px;
  height: 58px;
  margin-left: 250px;
  gap: 2px;
  width: 110px;
  height: 58px;
  margin-left: 250px;
}

.detail-column3 {
  gap: 2px;
  width: 108px;
  height: 58px;
  margin-left: 200px;
  gap: 2px;
  width: 108px;
  height: 58px;
  margin-left: 200px;
}

.detail-column4 {
  width: 123px;
  height: 58px;
  gap: 2px;
  width: 123px;
  height: 58px;
  gap: 2px;
}

.detail-column5 {
  gap: 2px;
  width: 125px;
  height: 58px;
  margin-left: 281px;
  gap: 2px;
  width: 125px;
  height: 58px;
  margin-left: 236px;
}
.detail-column6 {
  width: 123px;
  height: 58px;
  gap: 2px;
  width: 123px;
  height: 58px;
  gap: 2px;
}

.detail-column7 {
  gap: 2px;
  width: 110px;
  height: 58px;
  margin-left: 336px;
  gap: 2px;
  width: 110px;
  height: 58px;
  margin-left: 240px;
}

.button-column3 {
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
  gap: 2px;
  margin-left: 300px;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
  gap: 2px;
  margin-left: 300px;
}

.custom-button {
  width: 78px;
  height: 36px;
  position: absolute;
  top: 325px;
  left: 849px;
  border: 1px solid #883979;
  border-radius: 8px;
  background-color: transparent;
  width: 78px;
  height: 36px;
  position: absolute;
  top: 325px;
  left: 805px;
  border: 1px solid #883979;
  border-radius: 8px;
  background-color: transparent;
}

.custom-button:hover{
  background-color: #883979;
color: white;
}


.dark-mode .custom-button {
  border: 1px solid white;
  border: 1px solid white;
}

.button-text {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 500;
  /* color: #883979; */
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 500;
  /* color: #883979; */
}

.dark-mode .button-text {
  color: white;
}

.custom-button2 {
  width: 114px;
  height: 36px;
  top: 30px;
  left: 30px;
  border: 1px solid #883979;
  border-radius: 8px;
  background-color: #883979;
  .custom-button2 {
    width: 114px;
    height: 36px;
    top: 30px;
    left: 30px;
    border: 1px solid #883979;
    border-radius: 8px;
    background-color: #883979;
  }

  .button-text2 {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: white;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: white;
  }

  .dark-mode .button-text2 {
    color: white;
  }
  color: white;
}

.doctor-info-row2 {
  width: 556px;
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  width: 556px;
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.doctor-info-row3 {
  margin-top: 67px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 67px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edit-case-about-label {
  color: #666666;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.032em;
  text-align: left;
  color: #666666;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .edit-case-about-label {
  color: #cccccc;
  color: #cccccc;
}

.edit-case-about-value {
  color: #1a1a1a;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.024em;
  text-align: left;
  color: #1a1a1a;
  font-family: Open Sans;
  font-size: 20px;
  width: 200px;
  font-weight: 600;
  letter-spacing: 0.024em;
  text-align: left;
}

.dark-mode .edit-case-about-value {
  color: #e6e6e6;
  color: #e6e6e6;
}

/* Divider Line */
.divider-line {
  border: 1px solid #b3b3b3;
  width: 1021px;
  margin-top: 40px;
  margin-left: 30px;
  border: 1px solid #b3b3b3;
  width: 1021px;
  margin-top: 40px;
  margin-left: 30px;
}

/* .................................................. */
/* Doctor's Information Section */
.doctor-info-section {
  width: 573px;
  margin-top: 34px;
  margin-left: 30px;
}

.doctor-info-header {
  color: #1a1a1a;
  font-family: Open Sans;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.0288em;
  text-align: left;
  color: #1a1a1a;
  font-family: Open Sans;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.0288em;
  text-align: left;
}

.dark-mode .doctor-info-header {
  color: white;
  color: white;
}

.doctor-info-content {
  width: 573px;
  margin-top: 20px;
}

.doctor-info-row {
  width: 556px;
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 556px;
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.doctor-info-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 33%;
  padding-bottom: 12px;
  gap: 2px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 33%;
  padding-bottom: 12px;
  gap: 10px;
}

.doctor-info-label {
  color: #666666;
  color: #666666;
}

.dark-mode .doctor-info-label {
  color: white;
  color: white;
}

.doctor-info-value {
  color: #1a1a1a;
  font-weight: 600;
  color: #1a1a1a;
  font-weight: 600;
}

.dark-mode .doctor-info-value {
  color: white;
  color: white;
}

/* ........................... */

.about-case-contents {
  width: 1081px;
  height: 682px;
  top: 30px;
  left: 30px;
  gap: 0px;
  opacity: 1;
  background: white;
  padding-top: 20px;
  border-radius: 12px;
}

.dark-mode .about-case-contents {
  background: #2d1227;
}

.case-content {
  width: 1081px;
  height: 682px;
  top: 30px;
  left: 30px;
  gap: 0px;
  opacity: 1;
  background: transparent;
  border-radius: 12px;
  
}
/* ........................................................ */

/* other css 


.container {
    width: 100%;
    height: 100%;
    position: relative;
}

.background-box {
    width: 1081px;
    height: 252px;
    background: white;
    border-radius: 12px;
}

.edit-case-detail-box {
    width: 969px;
    height: 140px;
    position: absolute;
    top: 56px;
    left: 56px;
}
.edit-inner-box {
    width: 13.31px;
    height: 13.31px;
    position: absolute;
    left: 5.35px;
    top: 5.35px;
}

*/

.patient-question {
  width: 1081px;
  height: 636px;
  background-color: transparent;
  width: 1081px;
  height: 636px;
  background-color: transparent;
}

footer {
  margin-top: auto;
  margin-top: auto;
}



/* ........................................................ */

/* Patientdetails-view */

.patientdetails-contents {
  width: 1081px;
  margin: 0 auto; /* Center the container horizontally */
  padding: 24px; /* Add padding on all sides */
  background-color: #ffffff; /* White background for readability */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Optional subtle shadow for depth */
  display: flex;
  flex-direction: column;
  gap: 16px; /* Space between internal elements */
}

.dark-mode .patientdetails-contents{
  background-color: #2d1227;
}

.case-background {
  position: relative;
  display: flex;
  justify-content: center; /* Center .case-content horizontally */
  align-items: center;     /* Center .case-content vertically if needed */
  padding: 50px 50px 50px 42px;           /* Adjust padding as needed to position the .case-content well within the gradient */

  background-size: cover;  /* Ensures the background covers the whole area */
  min-height: 76vh;       /* Full viewport height for the gradient background */
}

.pdetails-regi{
  position: relative;
  right: 20px;
  width: 250px;
}

.pdetails-regid{
  position: relative;
  right: 20px;
  width: 250px;
}

.pdetails-blgroup{
  margin-left: 236px;
}

.pddetails-adddress{
  position: relative;
  left: 32px;
}

.patientdetails-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
 
}

.patientdetails-title h1 {
  font-size: 24px;
  color: #7e3a89;
  font-weight: bold;
  font-family: "Arial", sans-serif;
  text-align: center;
  white-space: nowrap;
}

.patientdetails-title span {
  flex: 0 0 50px;
  height: 1px;
  background-color: #7e3a89;
}

/*.footer-container {
    display: inline-flex;
    padding: 16px 60px;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: 648px;
}*/
.footer-container-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #fff;
}

.dark-mode .footer-container-box {
  background-color: #1e0419;
}
.dark-mode .footer-info-date,
.footer-timezone-text {
  color: #e6e6e6;
}

.dark-mode .footer-info-time {
  color: #e6e6e6;
}

.dark-mode .footer-timezone-select {
  color: #e6e6e6;
}

.footer-left-section,
.footer-right-section {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 60px;
}

.footer-icon-button {
  width: 30px;
  height: 30px;
  padding: 5px;
  background: #f3f3f3;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
footer-icon-button:hover {
  background-color: #883979;
  color: #ffffff !important;
}

.footer-icon-button.filled {
  background-color: #883979 !important;
}

.footer-icon-button.filled .footer-icon svg {
  color: #ffffff !important;
}
.dark-mode .footer-icon-button.filled {
  background-color: #ad499a !important;
}
.dark-mode .footer-icon-button .footer-icon svg {
  color: #ffffff;
}

.dark-mode .footer-icon-button:hover {
  background-color: #ad499a;
}
.dark-mode .footer-icon-button {
  background-color: #1e0419;
  color: white;
}

.dark-mode .footer-icon-button img {
  filter: invert(1);
}

.footer-icon-background {
  width: 24px;
  height: 24px;
  position: relative;
}

.footer-icon {
  width: 19px;
  height: 19px;

  left: 2.5px;
  top: 2.5px;
}

.footer-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-info-text {
  display: flex;
  gap: 6px;
}

.footer-info-date,
.footer-info-time,
.footer-timezone-text {
  color: black;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  white-space: nowrap;
}

.footer-timezone {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-timezone-select {
  background: none;
  border: none;
  color: black;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  cursor: pointer;
  width: 140px;
}
.dark-mode .footer-timezone-select {
  background-color: #1e0419;
  color: #e6e6e6;
}

.footer-timezone-icon {
  width: 20px;
  height: 20px;
  position: relative;
  transform: rotate(-90deg);
  transform-origin: 0 0;
}

.footer-arrow {
  width: 6.71px;
  height: 11.31px;
  position: absolute;
  left: 8.35px;
  top: 6.35px;
  background: black;
}

.version-popup {
  background-color: white;
  border-radius: 8px 8px 8px 8px;
  padding: 20px;
  width: 267px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: fixed;
  bottom: 75px;
  right: 362px;
  z-index: 1000;
  animation-duration: 0.5s;
  pointer-events: auto;
}

.chatus-patient-graph-container {
  margin: 0;
  padding: 0;
  gap: 8px;
  width: 1081px;
  height: 490px;
}

.text {
  color: red;
  z-index: 1000;
}

.chatus-patient-graph-title {
  margin-top: 10px;
  font-family: Poppins;
  font-size: 28px;
  font-weight: 500;
  line-height: 42px;
  text-align: center;
}

.dark-mode .patient-graph-title {
  color: #e6e6e6;
}

.chatus-patient-graph-container-box-faq {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: transparent;
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
}

.faq-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.faq-question {
  display: flex;
  height: 35px;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 500;
  transition: box-shadow 0.2s;
  background-color: white;
  border-radius: 8px;
  padding: 13px;
  padding-left: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dark-mode .faq-question {
  background: linear-gradient(0deg, #501242, #501242),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.question-text {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
}

.faq-arrow {
  font-size: 24px;
  color: #555;
  line-height: 1;
}

.faq-answer {
  background-color: white;
  margin-top: 10px;
  padding: 13px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: left;
  padding-left: 30px;
}

.dark-mode .faq-answer {
  background: #6c0354;
}

.answer-text {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  color: #883979;
}

.dark-mode .answer-text {
  color: #e6e6e6;
}

.faq-arrow {
  font-size: 24px;
  color: #555;
}

.patientDB-reports{
    position: relative;
    right: -71px;
}

.patientDB-date{
    position: relative;
    left: 0;
}

.patientDB-status{
    position: relative;
    left: 0;
}

.patientDB-doctor{
    position: relative;
    left: 0;
}

.patientDB-docname{
    position: relative;
    left: 8px;
}

.patientDB-rate {
    position: relative;
    left: 20px;
}

.rate-doctor-btn {
    background: none;
    border: none;
    color: #1976d2;
    cursor: pointer;
    font-size: 16px;
    /* padding: 5px 10px; */
    transition: color 0.3s ease;
    white-space: nowrap;
    margin: 0;
    display: block;
    font-family: open sans;
}

.rate-doctor-btn:hover:not(:disabled) {
    color: #1565c0;
}

.rate-doctor-btn:disabled {
    color: #666;
    cursor: default;
    position: relative;
    left: 2px;
}

.rating-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.rating-popup {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.rating-popup h3 {
    margin: 0 0 20px 0;
    text-align: center;
    color: black;
    font-family: poppins;
    font-weight: 400;
}

.rating-stars {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.rating-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.rating-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.rating-buttons button:first-child {
    background-color: #f0f0f0;
    color: #333;
}

.rating-buttons button:last-child {
    background-color: #1976d2;
    color: white;
}

.rating-buttons button:hover {
    opacity: 0.9;
}

.patientDB-payments{
    position: relative;
    left: 50px;
}

.patientDB-payview{
    position: relative;
    left: 0;
    color: #B3B3B3;
    cursor: pointer;
}

.dark-mode .patientDB-payview button{
    color: white;
}

.patientDB-stcall{
    position: relative;
    left: 4px;
    color: #FF8C1A;
}

.dark-mode .patientDB-stcall{
    color: #FF8C1A;
}

.patientDB-paystatus{
    position: relative;
    left: 60px;
    width: 282px;
    color: #EB1F2E;
}

.dark-mode .patientDB-paystatus{
    color: #EB1F2E;
}

.patientDB-downdate{
    position: relative;
    left: 0;
}

.patientdb-table{
    margin-top: 0px;
    width: 100%;
    border-collapse: collapse;
}

.patientdb-table th,
.patientdb-table td {
    padding: 8px;
    text-align: left;
}

.patientDB-pagi[data-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

/* New pagination styles */
.pagination-controls-cases-patient {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

.pagination-btn-cases-patient {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    border: none;
    background-color: #8B3888;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    padding: 0;
}

.pagination-btn-cases-patient svg {
    width: 24px;
    height: 24px;
}

.pagination-btn-cases-patient:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-indicator-cases-patient {
    font-size: 16px;
    color: #333;
    margin: 0 10px;
}

.dark-mode .page-indicator-cases-patient {
    color: #fff;
}

.dark-mode .pagination-btn-cases-patient {
    background-color: #8B3888;
    color: white;
}


/* .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;

.modal-content {
  width: 1081px;
  height: 645px;
  background-color: #fff;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;

.modal-content h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.modal-content label {
  font-size: 16px;
  margin-bottom: 8px;
  display: block;
}

/* .modal-content input {
  width: 494px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #883979;
  padding: 10px;
  margin-bottom: 16px;
  font-size: 16px;
} */
/* .modal-content textarea {
  width: 1017px;
  height: 166px;
  border-radius: 8px;
  border: 1px solid #B3B3B3;
  padding: 10px;
  margin-bottom: 16px;
  font-size: 16px;
} */

.modal-content-appointment-form button {
  width: 146px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #883979;
  font-size: 16px;
  padding: 10px;
  cursor: pointer;
}

.modal-content-appointment-form .clear-btn-appointment-form {
  position: absolute;
  top: 631px;
  left: 32px;
  background-color: #fff;
  color: #883979;
  border-color: #883979;
}

.modal-content-appointment-form .add-appointment-btn-appointment-form {
  position: absolute;
  top: 631px;
  left: 903px;
  background-color: #883979;
  color: white;
  border-color: #883979;
}

.modal-content-appointment-form button:hover {
  opacity: 0.8;
}
.modal-content-appointment-form {
  width: 1081px;
  height: 645px;
  background-color: #fff;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  flex-wrap: wrap;
}

.form-row-appointment-form {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.form-row-appointment-form label {
  font-size: 20px;
  margin-bottom: 8px;
  font: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-align: left;
}
.form1-row1-appointment-form label {
  font-size: 20px;
  margin-bottom: 8px;
  font: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-align: left;
}

.form-row-appointment-form input {
  width: 494px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #883979;
  padding: 10px;
  font-size: 16px;
}

.clear-btn-appointment-form {
  position: absolute;
  top: 631px;
  left: 32px;
  width: 146px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #883979;
  background-color: #fff;
  color: #883979;
}

.book-btn-appointment-form {
  position: absolute;
  top: 631px;
  right: 32px;
  width: 146px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #883979;
  background-color: #883979;
  color: #fff;
}

.modal-overlay-appointment-form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.modal-overlay-appointment-form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
/* 
.modal-content {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  width: 600px;
  max-width: 90%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
} */
/* 
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
} */

.close-btn-appointment-form {
  background: none;
  border: none;
  color: black;
  font-size: 40px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 39.13px;
  right: 39.13px;
}
/* 
.form-row1 {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.form-row div {
  flex: 1;
} */
.symptoms-textarea {
  position: absolute;
  width: 1054px !important;
  height: 166px;
  border: 1px solid #b3b3b3 !important;
  right: 32px !important;
  border-radius: 8px;
  padding: 12px !important;
  resize: none;
}
/* 
.form-row1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
} */
/* .symptoms-textarea {
  width: 1017px !important;
} */ */



.modal-overlay-appointment-form {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content-appointment-form {
  width: 1081px;
  height: 645px;
  background-color: #fff;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.dark-mode .modal-content-appointment-form {
  background: #2d1227;
}

.modal-content-appointment-form h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.modal-content-appointment-form label {
  font-size: 16px;
  margin-bottom: 8px;
  display: block;
}

/* .modal-content input {
  width: 494px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #883979;
  padding: 10px;
  margin-bottom: 16px;
  font-size: 16px;
} */
/* .modal-content textarea {
  width: 1017px;
  height: 166px;
  border-radius: 8px;
  border: 1px solid#B3B3B3;
  padding: 10px;
  margin-bottom: 16px;
  font-size: 16px;
} */

.modal-content-appointment-form button {
  width: 146px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #883979;
  font-size: 16px;
  padding: 10px;
  cursor: pointer;
}

.modal-content-appointment-form .clear-btn-appointment-form {
  position: absolute;
  top: 631px;
  left: 32px;
  background-color: #fff;
  color: #883979;
  border-color: #883979;
}

.modal-content-appointment-form .add-appointment-btn-appointment-form {
  position: absolute;
  top: 631px;
  left: 903px;
  background-color: #883979;
  color: white;
  border-color: #883979;
}

.modal-content-appointment-form button:hover {
  opacity: 0.8;
}
.modal-content-appointment-form {
  width: 1081px;
  height: 645px;
  background-color: #fff;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.form-row-appointment-form {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.form-row-appointment-form label {
  font-size: 20px;
  margin-bottom: 8px;
  font: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-align: left;
}
.form1-row1-appointment-form label {
  font-size: 20px;
  margin-bottom: 8px;
  font: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-align: left;
}

.dark-mode .form1-row1-appointment-form label {
  color: #ffffff;
}

.form-row-appointment-form input {
  width: 494px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #cccccc;
  padding: 10px;
  font-size: 16px;
}

.form-row-appointment-form input:focus {
  border-color: #883979;
  color: #883979;
}

.form-row-appointment-form input:not(:placeholder-shown) {
  border-color: #883979;
  color: #883979;
}

.dark-mode .form-row-appointment-form input:not(:placeholder-shown) {
  border-color: #883979;
  color: white;
}

.clear-btn-appointment-form {
  position: absolute;
  top: 631px;
  left: 32px;
  width: 146px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #883979;
  background-color: #fff;
  color: #883979;
}

.book-btn-appointment-form {
  position: absolute;
  top: 631px;
  right: 32px;
  width: 146px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #883979;
  background-color: #883979;
  color: #fff;
}
.modal-overlay-appointment-form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.modal-overlay-appointment-form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
/* 
.modal-content {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  width: 600px;
  max-width: 90%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
} */
/* 
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
} */

.close-btn-appointment-form {
  background: none;
  border: none;
  color: black;
  font-size: 40px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 39.13px;
  right: 39.13px;
}

.dark-mode .close-btn-appointment-form{
  color: white;
}
/* 
.form-row1 {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.form-row div {
  flex: 1;
} */
.symptoms-textarea {
  position: absolute;
  width: 1054px !important;
  height: 166px;
  border: 1px solid #883979 !important;
  color: #883979;
  right: 32px !important;
  border-radius: 8px;
  padding: 12px !important;
  resize: none;
  font-size: 16px;
}

.dark-mode .symptoms-textarea {
  background: #2d1227;
  color: white;
}

/* 
.form-row1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
} */
/* .symptoms-textarea {
  width: 1017px !important;
} */

.appointment-input-container {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.input-group {
  display: flex;
  flex-direction: column;
  margin-left: 26px;
}

.input-field {
  width: 216px !important;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 20px;
}

.select-appoin {
  padding: 16px 16px 16px 8px;
  width: 518px;
  border-radius: 8px;
}

.case-dropdown-patient {
  padding: 16px 16px 16px 10px;
  width: 519px;
  border-radius: 8px;
  border: 1px solid #883979;
  color: #883979;
}

.dark-mode .case-dropdown-patient {
  background: #2d1227;
  border-color: #883979;
  color: white;
}
/* 
.modal-overlay-appointment-form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}


.modal-content-appointment-form {
  background: #ffffff;
  width: 80%;
  max-width: 600px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  animation: fadeIn 0.3s ease-out;
}


.modal-header-appointment-form {
  background: #007bff;
  color: #ffffff;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header-appointment-form h2 {
  margin: 0;
  font-size: 20px;
}


.close-btn-appointment-form {
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.close-btn-appointment-form:hover {
  background: rgba(255, 255, 255, 0.2);
}


form {
  padding: 20px;
}

.form-row-appointment-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 15px;
}

.form-row-appointment-form > div {
  flex: 0 0 48%;
  margin-bottom: 10px;
}

.label-appointment-form {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.input-group-appointment-form {
  margin-bottom: 15px;
}

.input-field {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.input-field:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
}

textarea.symptoms-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  resize: none;
}

textarea.symptoms-textarea:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
}

select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}


.book-btn-appointment-form {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.book-btn-appointment-form:hover {
  background-color: #0056b3;
}

.clear-btn-appointment-form {
  background-color: #6c757d;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 10px;
}

.clear-btn-appointment-form:hover {
  background-color: #5a6268;
}


.loading-indicator {
  text-align: center;
  padding: 20px;
  font-size: 16px;
}


.error-message {
  color: red;
  text-align: center;
  padding: 20px;
  font-size: 16px;
  font-weight: bold;
}


@keyframes fadeIn {
  from {
    opacity: 1;
    transform: translateY(-10%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
} */

.appoistat{
    position: relative;
    right: -55px;
}

.aporvedstats{
    position: relative;
    right: -55px;
    text-align: left !important;
}

.status-accepted {
    color: #33BB39 !important; /* Green for accepted */
}

.status-rejected {
    color: #EB1F2E !important; /* Red for rejected */
}

.status-pending {
    color: #FF8C1A !important; /* Orange for pending */
}

.dark-mode .aporvedstats{
    color: #33BB39;
}

.dark-mode .status-accepted {
    color: #33BB39 !important;
}

.dark-mode .status-rejected {
    color: #EB1F2E !important;
}

.dark-mode .status-pending {
    color: #FF8C1A !important;
}

.appodocname{
    position: relative;
    right: -32px;
    text-align: left !important;
}

.tbdocname{
    position: relative;
    right: -32px;
}

.appodate{
    position: relative;
    right: -5px;
}

.tbdate{
    position: relative;
    right: -5px;
}

.appoiTable{
    margin-top: 0px;
}

.pagination-controls-patient-appointment {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

.pagination-btn-patient-appointment {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    border: none;
    background-color: #8B3888;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    padding: 0;
}

.pagination-btn-patient-appointment svg {
    width: 24px;
    height: 24px;
}

.pagination-btn-patient-appointment:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-indicator-patient-appointment {
    font-size: 16px;
    color: #333;
    margin: 0 10px;
}

.dark-mode .page-indicator-patient-appointment {
    color: #fff;
}

.dark-mode .pagination-btn-patient-appointment {
    background-color: #8B3888;
    color: white;
}
.LabTechnician-dashboard {
  width: 100%;
  height: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(/static/media/bg.b8637adb17db611a82bc.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 100px;
  
}
.dark-mode .LabTechnician-dashboard {
  background-image: url(/static/media/bgdark.3915cd3767a0a72ba2a3.png);
  background-color: #1E0419;
  color: #e0e0e0; 

}


.lab-technician-dashboard-container {
  margin: 30px 60px 15px 60px;
  position: relative;
  gap: 50px;
}

.dark-mode .lab-technician-dashboard-container {
  background-color: transparent; 

  
}

.lab-dashboard-container-box {
  width: 1081px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex-shrink: 0;
}
.lab-Main-Content1 {
  width: 804px;
  height: 372px;
  flex-shrink: 0;
}

.lab-Graphdata-boxx {
  display: flex;
  flex-direction: row;
  width: 1081px; 
  height: 361px;
  gap: 28px;
}



.lab-overview-container {
  flex: 0 0 249px; 
  height: 324px;
  position: relative;
  margin-right: 10px; 
}


.lab-overview-title {
  position: absolute;
  left: 0;
  top: 0;
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}

.dark-mode .lab-overview-title{
  color: #E6E6E6;
}

.lab-card-container {
  width: 249px;
  height: 324px;
  position: absolute;
  left: 0;
  top: 48px;
  background: white;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;

}
.dark-mode .lab-card-container {
  background-color: #2D1227;
}


.lab-graph-title {
  left: 0;
  top: 0;
  position: absolute;
  color: black;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}

.lab-graph-title {
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px; 
  letter-spacing: 0.48px;
  text-align: left;
}

.dark-mode .lab-graph-title{
  color: #E6E6E6;
}

.lab-graph-chart {
  width: 794px; 
  height: 324px;
  position: absolute;
  top: 48px;
  background: white;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
}

.dark-mode .lab-graph-chart {
  background-color: #2D1227;
}


footer {
  margin-top: auto;
}

.pathology-dashboard-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.pathology-dashboard-title h1 {
  font-size: 24px;
  color: #7e3a89;
  font-weight: bold;
  font-family: "Arial", sans-serif;
  text-align: center;
}

.pathology-dashboard-title span {
  flex: 0 0 50px;
  height: 1px;
  background-color: #7e3a89;
}








.header-container {
  width: 100%;
  height: 80px;
  position: sticky;
  top: 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}
.header-container.dark-mode {
  background-color: #1e0419;
  color: white;
}

.greeting-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 60px 16px 60px;
}

.greeting-container-box {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}

.dark-mode .greeting-text {
  color: white;
}

.greeting-text {
  color: #000;
  color: var(--Primary-Base-Black, #000);

  font-family: "Open Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  /* 150% */
  letter-spacing: 0.691px;
}

.avatar-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.avatar {
  width: 38px;
  height: 38px;
  background: #e6e6e6;
  border-radius: 50%;
}

.avatar img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.dropdown-icon {
  width: 24px;
  height: 24px;
  position: relative;
  margin-left: 8px;
  cursor: pointer;
}

.dropdown-arrow {
  width: 6.71px;
  height: 11.31px;
  position: absolute;
  top: 8px;
  left: -6px;
  transition: transform 0.2s ease;
  display: flex;
  align-items: center; /* Keeps it centered */
  justify-content: center; /* Ensures it stays in place */

}

.dropdown-arrow.open {
  transform: rotate(180deg);
}

.notification-dropdown {
  position: absolute;
  margin-top: 10px;
  top: 80px;
  right: 0;
  padding-top: 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  width: 500px;
  height: 380px;
  z-index: 1000;
  right: 120px;
  /* padding: 10px; */
  display: flex;
  flex-direction: column;
  /* gap: 32px; */
}

.notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 10;
}
.drop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  transition: opacity 0.5s ease-in-out;
}

.notification-item {
  position: relative;
  display: flex;
  align-items: center;
  /* padding-top: 8px; */
  margin-top: 20px;
  margin-left: 24px;
  margin-right: 24px;
  font-size: 20px;

  font-weight: 600;
  color: #d6d4d4;
  cursor: pointer;
  /* border-bottom: 1px solid; */
}
.notification-image .circle-image {
  width: 62px;
  height: 62px;
  top: 48px;
  left: 24px;
  gap: 0px;
  opacity: 1;
  margin-bottom: 10px;
  border-radius: 50%;
  margin-right: 10px;
  align-items: flex-start;
}

.notification-item:last-child {
  margin-bottom: 22px;
}

/* .notification-item:hover {
    background-color: #f0f0f0;
  } */
.notification-title {
  margin-top: 12px;
  font-family: Open Sans;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
}
.close-button {
  position: absolute;
  top: -12px;
  right: 12px;
  width: 26px;
  z-index: 999;
  height: 26px;
  background-color: #e6e6e6;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  font-size: 12px;
  color: #000000;
  font-weight: bolder;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.close-button:hover {
  background-color: #7d7d7d;
  color: #2c2b2b;
}
.notification-time {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
  letter-spacing: 0.032em;
  text-align: left;
  color: #808080;
  margin-bottom: 22px;
}
.clear-all {
  text-align: right;
  font-family: Open Sans;
  margin-right: 24px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  color: #b8b8b8;
}

.clear-all:hover {
  cursor: pointer;
}
.dark-mode .dropdown-arrow {
  color: #f0f0f0;
}


.header-dropdown-menu {
  position: absolute;
  top: 90px;
  right: 168px;
  background: white;
  border: 1px solid #b3b3b3;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  width: 288px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border-radius: 8px 0px 8px 8px;
  border-top: 1px solid transparent;
  overflow: hidden;
  pointer-events: auto;
  /* padding: 0 16px 0px 16px; */
}

.dropdown-item-logout {
  padding: 10px;
  color: black;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  width: 256px;
  padding: 16px 0px;

  text-align: left;
}
.dark-mode .header-dropdown-menu {
  background-color: #2d1227;
  border: solid 1px #b8b8b8;
  box-shadow: 0 0 0 1px #1e0419;
  color: white;
}

.dropdown-item {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  padding: 16px 10px 16px 0px;
  pointer-events: auto;
  letter-spacing: 0.032em;
  text-align: left;
  position: relative;
  color: black;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  /* border-bottom: 1px solid #e6e6e6;
  display: inline-block;
  width: 89%;
  margin-left: 16px; */
  transition: background 0.2s, color 0.2s;
}

.dropdown-item .margin-left {
  margin-left: 16px;
}

.dropdown-item:not(:last-child)::after {
  content: "";
  display: block;
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid #b3b3b3;
  position: absolute;
  bottom: 0;
  left: 5%;
}

.dropdown-item:hover::after {
  border-bottom-color: #883979;
}

.dark-mode .dropdown-item {
  color: white;
}

.dark-mode .margin-left-logout {
  color: red;
  margin-left: 16px;
}

.margin-left-logout {
  color: red;
  margin-left: 16px;
}

.dropdown-item:hover {
  background: #883979;
  box-sizing: border-box;
  color: #e6e6e6;
  border-radius: 0px 0px 0px 0px;
  border-width: 1px 0 0 0;
  border-style: solid;
}

.dark-mode .dropdown-item:hover {
  background: #ad499a;
}

.logo-container img {
  width: 150px;
  height: auto;
  padding: 16px 60px 16px 60px;
}

.dark-mode .logo-container {
  color: #faf3f3;
}

.icon-button-container {
  display: flex;
  gap: 15px;
}

.icon-button {
  width: 38px;
  height: 38px;
  background: #f3f3f3;

  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
}

.icon-button .notiIcon {
  transition: color 0.2s;
}

.icon-button:hover {
  background-color: #883979;
  color: white;
}

.icon-button .notiIcon:focus {
  background-color: #883979;
}

.icon-button:focus {
  background: #ad499a;
  outline: none;
  box-shadow: 0 0 0 3px rgba(173, 73, 154, 0.4);
}

.icon-button img {
  width: 24px;
  height: 24px;
}
/*
  .icon-button img {
    filter: invert(0); 
  }
  
  .dark-mode .icon-button img {
    color: pink; 
  } */

.dark-mode .icon-button {
  background: #2d1227;
}

.dark-mode .icon-button:hover {
  background: #ad499a;
}

.dark-mode .toggle-button {
  background-color: white !important;
}
.light-mode .icon-button svg {
  fill: black;
}

.dark-mode .icon-button svg {
  fill: white;
}

.logout-dropdown {
  color: red;
  border-bottom: none;
}

/* .logout-dropdown:hover{
    color: white !important;
  }
  
  
  .margin-left-logout:hover{
    color: white;
  } */

.logout-dropdown:hover,
.logout-dropdown:hover .margin-left-logout {
  color: white;
}

.doctor-dashboard-progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 0px;
  z-index: 9999;
}

.doctor-dashboard-progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
  z-index: 9999;
}

.dark-mode .notification-dropdown {
  background-color: #2d1227;
  color: white;
}

.dark-mode .notification-dropdown .notification-title {
  color: white;
}

.doctor-dashboard-progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 0px;
  z-index: 999;
}

.doctor-dashboard-progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
}

@media (max-width: 768px) {
  .greeting-text {
    font-size: 20px;
    line-height: 30px;
    width: 150px;
  }
}

@media (max-width: 480px) {
  .greeting-text {
    font-size: 18px;
    line-height: 28px;
    width: 130px;
  }
}


.donut-chart-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  gap: 30px;
  align-items: center;
  background-color: white;
  overflow: hidden;
}

.donut-chart-container {
  position: relative;
  background: white;
  height: calc(100vh - 70px);

  width: 89%;
  height: 188px;
  flex-shrink: 0;
  margin-top: 30px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 10;
}

.dark-mode .donut-chart-container {
  background-color: #2d1227;
}

.donut-chart-wrapper.dark-mode {
  background-color: #2d1227;
}

.dark-mode .donut-chart-legend {
  background-color: #2d1227;
}

.dark-mode .donut-chart-legend .legend-text {
  color: white;
}

.donut-chart-legend {
  width: 217px;
  height: 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
  flex-shrink: 0;
  background-color: white;
}

.donut-chart-legend .legend-item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 4px;
}

.donut-chart-legend .legend-item-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 1px;
}

.donut-chart-legend .legend-color-box {
  width: 94px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 32px;
  position: relative;
  text-align: center;
}
.donut-chart-legend .legend-color-box-3 {
  width: 109px;
  height: 24px;
  display: flex;
  justify-content: center;
  margin-left: 50px;
  border-radius: 32px;
  position: relative;
  text-align: center;
}

.donut-chart-legend .legend-text {
  color: white;

  text-transform: capitalize;
  position: absolute;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.donut-chart-legend .legend-text-3 {
  color: white;
  margin-left: 49px;
  text-transform: capitalize;
  position: absolute;
  font-family: Open Sans;
  font-size: 11px;
  font-weight: 600;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.lab-graph-container {
  flex: 1 1;
  width: 822px;
  height: 324px;
  position: relative;

}

.lab-graph-container.dark-mode {
  background-color: #2D1227;

}

.total-Report-title {
color: #000;
color: var(--Primary-Base-Black, #000);
font-family: Open Sans;
font-size: 13px;
font-weight: 500;
line-height: 26px;
letter-spacing: 0.032em;
text-align: left;
margin-left: 32px;
}

.dark-mode .total-Report-title {
  color: #E6E6E6;
}

.lab-timeframe-buttons-container {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}

.timeframe-buttons {
  margin-bottom: 20px;
  padding-right: 48px !important;

}

.timeframe-buttons button {
  margin: 0 5px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;

}

.timeframe-buttons .active {
  background-color: #883979;
  color: white;
}

.dark-mode .timeframe-buttons button {
  background-color: #2D1227;
  color: #E6E6E6;
  ;
}

.dark-mode .timeframe-buttons .active {
  background-color: #2D1227;
}


.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

}

.color-box {
  width: 17px; 
  height: 12px; 
  border-radius: 2px; 
}

.cases-box {
  background-color: #E07AB0; 
}

.reports-box {
  background-color: #4C9FF0; 
}

.graph-line {
  height: 260px !important;
  width: 510px !important;
  padding-bottom: 4px;
  padding-left: 4px;
  padding-right: 14px;
  color: #000;

}

.lab-canvas-container {
  width: 748px !important; 
  height: 250px;
  padding-left: 28px; 
 
}

.error {
  color: red;
  font-weight: bold;
}
.lab-tech-dashboard {
  width: 100%;
  position: relative;
}

.lab-search-bar-header {
  width: 100%;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-title {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  text-align: left;
  color: black;
}

.dark-mode .header-title {
  color: #e6e6e6;
}

.search-bar-container-lab {
  width: 779px;
  height: 46px;
  background: white;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.lab-search-icon {
  width: 24px;
  height: 24px;
  padding-left: 5px;
  color: #b3b3b3;
}

.lab-search-input {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  color: rgba(0, 0, 0, 0.2);
}

.sort-container {
  display: inline-flex;
  padding: 0px !important;
  width: 140px;
  height: 40px;
  justify-content: space-between;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  align-items: center;
  gap: 8px;
  background-color: white;
  color: white;

  border-radius: 8px;
}

.dark-mode .sort-container {
  border: 1px solid #883979;
  background-color: transparent;
}

.sort-label {
  color: black;
  font-size: 16px;
  justify-content: center;
  font-family: "Open Sans", sans-serif;
  margin-right: 4px;
  height: 41px;
  padding-top: 15px;
  padding-left: 8px !important;
}

.dark-mode .sort-label {
  color: white;
}

.sort-icon-container {
  width: 28px;
  height: 30px;
  transform: rotate(-90deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.sort-icon {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.lab-table-header {
  text-align: left;
  height: 42px;
  background: white;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  align-items: center;
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.032em;
}

.dark-mode .lab-table-header th {
  color: #e6e6e6;
}

.dark-mode .lab-table-header {
  background-color: #1e0419;
}

tbody {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  color: #000000;
}

.lab-status {
  display: flex;
  justify-content: center;
  color: #1a1a1a;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
}

/* .pagination-controls-box button {
  margin: 0 10px;
  padding: 5px 10px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
} */

table {
  margin-left: auto;
  margin-right: auto;
}

.inprogress-td {
  position: relative;
  right: -70px;
}

.pagination-button {
  background-color: #ccc;
  color: #fff;
  border: none;

  border-radius: 50%;
  cursor: pointer;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: background-color 0.3s ease;
  padding: 0;
  margin: 15px 24px 15px 24px;
}

.pagination-button img {
  width: 24px;
  height: 24px;
  position: relative;
  top: 2.5px;
}

.pagination-button:hover {
  /* background-color: #fcf4fb; */
  /* Darker blue on hover */
}

.pagination-button:first-of-type {
  /* background-color: #f6f6f6; */
}

.pagination-button:last-of-type {
  background-color: #883979;
}

.pagination-number {
  color: #333333;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .pagination-number {
  color: #e6e6e6;
}

.dark-mode .pagination-button:first-of-type {
  background-color: #883979;
}

.dark-mode .pagination-button:last-of-type {
  background: #ad499a;
}

.pagination .page-number {
  font-size: 16px;
  font-weight: bold;
}

.pagination-controls-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sort-container {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 157px;
  height: 46px;
  padding: 0px !important;
}
.sortable-header {
  position: relative;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  background: white;
  z-index: 100;
  padding: 4px;
  border-radius: 6px;
  font-size: 14px;
}
.dropdown-menu div {
  padding: 6px 12px;
  cursor: pointer;
}
.dropdown-menu div:hover {
  background-color: #f0e0f3;
}
.pathology-sort-label-date {
  font-size: 14px;
  color: #b3b3b3;
  margin-bottom: 0px;
  padding-left: 10px;
  font-weight: 400;
}
.table-header > th {
  position: relative;
}
.custom-dropdown-pathologist {
  width: 60%;
  border-radius: 8px;
  background-color: #ffffff;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.custom-selected {
  color: #333333;
  font-size: 14px;
}
.dark-mode .custom-selected {
  background-color: #2d1227;
  color: #aeadad;
}

.custom-options {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  background-color: #ffffff;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.custom-options li {
  padding: 10px;
  font-size: 14px;
  color: #333333;
  cursor: pointer;
  border-radius: 10px;
}

.custom-options li:hover {
  background-color: #f5f5f5;
}

.pathology-graph-container {
    width: 788px;
    height: 282px;
    flex-shrink: 0;
    position: relative;
  }
  
  .graph-container.dark-mode {
    background-color: #2d1227;
  }
  
  .dark-mode .timeframe-buttons button {
    background-color: #2d1227;
    color: #e6e6e6;
  }
  
  .dark-mode .timeframe-buttons button.active {
    background-color: #2d1227;
  }

  .timeframe-buttons {
    display: flex;
    justify-content: right;
    align-items: end;
    padding-top: 20px;
    padding-right: 20px !important;
    padding-left: 20px;
  }
  
  .timeframe-buttons button {
    background-color: #fff;
    border: none;
    font-family: Open Sans;
    /* padding: 10px 10px;
    margin: 0 5px; */
    cursor: pointer;
    font-size: 12px;
    border-radius: 4px;
    /* transition: background-color 0.3s; */
    color: rgba(0, 0, 0, 0.25);
  }
  
  .timeframe-buttons button.active {
    background-color: #fff;
    color: #883979;
  }
  
  .dark-mode .timeframe-buttons button.active{
    color: #AD499A;
  }
  
  .timeframe-buttons button:hover {
    background-color: #fff;
  }

  .chart-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .pathology-graph-bar {
    height: 230px !important;
    width: 759px !important;
    padding-bottom: 40px;
    padding-left: 4px;
    padding-right: 14px;
    color: #000;
    box-sizing: content-box !important;
  }
  
  .chart-container .chartjs-render-monitor {
    width: 100% !important;
    height: auto !important;
  }
  

  .chart-container .chartjs-scale {
    color: #666;
    font-size: 12px;
  }
  

  .chart-container .chartjs-axis-labels {
    color: #682b2b;
    font-size: 12px;
  }

  .chart-container .chartjs-bar {
    width: 7px;
    background-color: #883979 !important;
    border: 1px solid #883979 !important;
    border-radius: 4px;
  }
  

  .chart-container .chartjs-bar:hover {
    background-color: #b06292 !important;
  }

  .patient-graph-container {
    width: 799px !important;
    height: 372px !important;
  
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .patient-graph-container-box {
    width: 100%;
    height: 318px;
    /* padding-right: 30px; */
    background-color: #fff;
    border-radius: 12px;
    background: #fff;
    background: var(--Primary-Base-White, #fff);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  }
  
  .graph-margin{
    margin-left: -10px;
  }
  
  .dark-mode .patient-graph-container-box {
    background-color: #2d1227;
  }
  .patient-graph-title {
    align-self: stretch;
    color: #000;
    color: var(--Primary-Base-Black, #000);
    font-family: "Open Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0.48px;
    text-align: justify;
  }
  .timeframe-buttons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .total-case-title {
    color: #000;
    color: var(--Primary-Base-Black, #000);
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: 0.032em;
    text-align: left;
    padding: 26px;
  }
  
  .dark-mode .total-case-title {
    color: #e6e6e6;
  }  
.error-dashboard {
  width: 100%;
  height: 120vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(/static/media/bg.b8637adb17db611a82bc.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 200px;
}

.error-container h2 {
  color: #883979;
  font-family: Poppins;
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  margin-bottom: 30px;
  text-align: center;
}

.error-image {
  width: 891px;
  height: 855.99px;

  background-image: url("/static/media/404%20Error.c54faa2aa2c61c1e90fc.png");
}

/* * {
  margin: 0;
  padding: 0;
  z-index: 999999;
} */
#background {
  position: relative;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.308);
  overflow-y: scroll;
}
#popup-container {
  width: 751px;
  height: 853px;
  top: 50px;
  left: 550px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 8px;
  opacity: 1;
  position: relative;
  z-index: 9999999;
  overflow: hidden;
}
#popup-title {
  width: 100%;
  height: 50px;
  background: #91007c 0% 0% no-repeat padding-box;
  border-radius: 8px 8px 0px 0px;
  opacity: 1;
}
#closebtn {
  height: 28px;
  width: 28px;
  float: right;
  margin: -18px 17px 0 0;
}
#title-text {
  padding: 14px 0 10px 20px;
  width: 196px;
  height: 30px;
  text-align: left;
  font: normal normal normal 25px/30px Lato;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
}
#popup-details {
  width: 546px;
  height: 703px;
  margin: 60px 0 0 95px;
  position: absolute;
}

.details-div {
  margin-bottom: 20px;
  display: flex;
  position: relative;
}
.details-div-img {
  margin-bottom: 20px;
  display: flex;
  position: relative;
}
.details-div-img img {
  /* margin-left:-75%;
  margin-top:-80%;
  margin-bottom:-50%; */
  width: 100%;
}
.details-div p {
  font: normal normal normal 17px/21px Lato;
  letter-spacing: 0px;
  /* color: #707070;  */
  opacity: 1;
  padding: 5px 0 0 0px;
}
.field {
  border: 1px solid var(--unnamed-color-c740a9);
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #c740a9;
  opacity: 1;
  position: relative;
  width: 60%;
  height: 40px;
  padding-left: 15px;
}
#fullname {
  left: 15%;
}
#featname {
  left: 90px;
}
#birth {
  height: 40px;
  width: 186px;
  padding-left: 15px;
  border: 1px solid var(--unnamed-color-c740a9);
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #c740a9;
  opacity: 1;
  position: absolute;
  left: 184px;
  text-transform: uppercase;
}
#gender-m {
  left: 185px;
  position: absolute;
  color: black;
  width: 203px;
  height: 40px;
  justify-content: space-between;
  padding: 10px 0 0 0;
}
#gender-f {
  left: 285px;
  position: absolute;
  color: black;
  width: 203px;
  height: 40px;
  justify-content: space-between;
  padding: 10px 0 0 0;
}
#address {
  left: 125px;
  height: 67px;
}
#tot {
  left: 114px;
  height: 67px;
}
#height {
  left: 135px;
}
#weight {
  left: 131px;
}
#email1 {
  left: 141px;
}
#email {
  left: 145px;
}
#number {
  left: 69px;
}
#conditions {
  left: 40px;
  height: 67px;
  flex-wrap: wrap;
}
input[type="textarea"] {
  left: 5px;
}
textarea {
  margin-left: 120px;
  /* border: 1px solid #91007c; */
  width: 60% !important;
  border-radius: 10px;
}
#cancel-btn {
  margin-top: 71px;
  margin-left: 30%;
  width: 79px;
  height: 31px;
  color: var(--unnamed-color-c740a9);
  text-align: center;
  font: normal normal normal 20px/24px Lato;
  letter-spacing: 0px;
  color: #c740a9;
  opacity: 1;
  border: 1px solid var(--unnamed-color-c740a9);
  background: #ffffff 0% 0% no-repeat padding-box;
  border: 1px solid #c740a9;
  border-radius: 4px;
}
#save-btn {
  margin-top: 71px;
  margin-left: 10%;
  width: 79px;
  height: 33px;
  position: absolute;
  background: var(--unnamed-color-c740a9) 0% 0% no-repeat padding-box;
  background: #c740a9 0% 0% no-repeat padding-box;
  border-radius: 4px;
  opacity: 1;
  border: none;
  text-align: center;
  text-decoration: none;
  font: normal normal normal 20px/24px Lato;
  letter-spacing: 0px;
  color: #ffffff;
}

#uploadSubmit {
  margin-top: 71px;
  margin-left: 55px;
  /* width: 79px; */
  height: 33px;
  background: #c740a9;
  color: white;
  padding: 2px;
}

@media only screen and (max-width: 600px) {
  #background {
    width: 751px;
    height: 853px;
  }
  #popup-container {
    width: 751px;
    height: 853px;
    top: 0;
    left: 0;
    background: #ffffff 0% 0% no-repeat padding-box;
    border-radius: 8px;
    opacity: 1;
    position: relative;
    z-index: 999999;
  }
}

.tooltip {
  z-index: 9999999999999999999;
}

.PopupOne,
.popupOneComment,
.PopupOneEdit,
.popupOneFeedback,
.PopupOneInfo {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  z-index: 999999 !important;
}

.PopupTwo,
.popupTwoComment,
.PopupTwoEdit,
.popupTwoFeedback,
.PopupTwoInfo {
  margin-left: 30%;
  margin-top: 20px;
  display: inline-block;
  width: 39%;

  border-radius: 10px;
  background-color: white;
  z-index: 999999;
}

.PopupThree,
.popupThreeComment,
.PopupThreeEdit,
.popupThreeFeedback,
.PopupThreeInfo {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  opacity: 0.5;
  filter: blur(2px);
  -webkit-filter: blur(2px);
  background-color: black;
}

.PopupZero,
.popupZeroComment,
.PopupZeroEdit,
.popupZeroFeedback,
.PopupZeroInfo {
  display: none;
}

#popupDetails {
  margin: 15px;
  margin-top: 50px;
}

#popupForm {
  display: none;
}
.popupTwoFeedback {
  z-index: 999999 !important;
}

.containerLoader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62vh;
  /* background-color: #ededed; */
}

.loader {
  max-width: 3rem;
  width: 100%;
  height: auto;
  stroke-linecap: round;
}

.containerLoader2 {
  background-color: white !important;
  opacity: 5 !important;
  padding: 10px;
}

.loader2Main {
  opacity: 0.8;
  background-color: black;
  z-index: 99999999999;
}
.containerLoader2 > div {
  color: black;
}
circle {
  fill: none;
  stroke-width: 10;
  animation-name: preloader;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform-origin: 170px 170px;
  will-change: transform;
}
circle:nth-of-type(1) {
  stroke-dasharray: 550;
}
circle:nth-of-type(2) {
  stroke-dasharray: 500;
}
circle:nth-of-type(3) {
  stroke-dasharray: 450;
}
circle:nth-of-type(4) {
  stroke-dasharray: 300;
}
circle:nth-of-type(1) {
  animation-delay: -0.15s;
}
circle:nth-of-type(2) {
  animation-delay: -0.3s;
}
circle:nth-of-type(3) {
  animation-delay: -0.45s;
}
circle:nth-of-type(4) {
  animation-delay: -0.6s;
}

@keyframes preloader {
  50% {
    transform: rotate(360deg);
  }
}

:root,
:host {
  --ol-background-color: white;
  --ol-accent-background-color: #F5F5F5;
  --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
  --ol-partial-background-color: rgba(255, 255, 255, 0.75);
  --ol-foreground-color: #333333;
  --ol-subtle-foreground-color: #666666;
  --ol-brand-color: #00AAFF;
}

.ol-box {
  box-sizing: border-box;
  border-radius: 2px;
  border: 1.5px solid white;
  border: 1.5px solid var(--ol-background-color);
  background-color: rgba(255, 255, 255, 0.75);
  background-color: var(--ol-partial-background-color);
}

.ol-mouse-position {
  top: 8px;
  right: 8px;
  position: absolute;
}

.ol-scale-line {
  background: rgba(255, 255, 255, 0.75);
  background: var(--ol-partial-background-color);
  border-radius: 4px;
  bottom: 8px;
  left: 8px;
  padding: 2px;
  position: absolute;
}

.ol-scale-line-inner {
  border: 1px solid #666666;
  border: 1px solid var(--ol-subtle-foreground-color);
  border-top: none;
  color: #333333;
  color: var(--ol-foreground-color);
  font-size: 10px;
  text-align: center;
  margin: 1px;
  will-change: contents, width;
  transition: all 0.25s;
}

.ol-scale-bar {
  position: absolute;
  bottom: 8px;
  left: 8px;
}

.ol-scale-bar-inner {
  display: flex;
}

.ol-scale-step-marker {
  width: 1px;
  height: 15px;
  background-color: #333333;
  background-color: var(--ol-foreground-color);
  float: right;
  z-index: 10;
}

.ol-scale-step-text {
  position: absolute;
  bottom: -5px;
  font-size: 10px;
  z-index: 11;
  color: #333333;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 rgba(255, 255, 255, 0.75), 0 1.5px rgba(255, 255, 255, 0.75), 1.5px 0 rgba(255, 255, 255, 0.75), 0 -1.5px rgba(255, 255, 255, 0.75);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-text {
  position: absolute;
  font-size: 12px;
  text-align: center;
  bottom: 25px;
  color: #333333;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 rgba(255, 255, 255, 0.75), 0 1.5px rgba(255, 255, 255, 0.75), 1.5px 0 rgba(255, 255, 255, 0.75), 0 -1.5px rgba(255, 255, 255, 0.75);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-singlebar {
  position: relative;
  height: 10px;
  z-index: 9;
  box-sizing: border-box;
  border: 1px solid #333333;
  border: 1px solid var(--ol-foreground-color);
}

.ol-scale-singlebar-even {
  background-color: #666666;
  background-color: var(--ol-subtle-foreground-color);
}

.ol-scale-singlebar-odd {
  background-color: white;
  background-color: var(--ol-background-color);
}

.ol-unsupported {
  display: none;
}

.ol-viewport,
.ol-unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ol-viewport canvas {
  all: unset;
  overflow: hidden;
}

.ol-viewport {
  touch-action: pan-x pan-y;
}

.ol-selectable {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

.ol-grabbing {
  cursor: grabbing;
}

.ol-grab {
  cursor: move;
  cursor: grab;
}

.ol-control {
  position: absolute;
  background-color: rgba(128, 128, 128, 0.25);
  background-color: var(--ol-subtle-background-color);
  border-radius: 4px;
}

.ol-zoom {
  top: .5em;
  left: .5em;
}

.ol-rotate {
  top: .5em;
  right: .5em;
  transition: opacity .25s linear, visibility 0s linear;
}

.ol-rotate.ol-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s linear, visibility 0s linear .25s;
}

.ol-zoom-extent {
  top: 4.643em;
  left: .5em;
}

.ol-full-screen {
  right: .5em;
  top: .5em;
}

.ol-control button {
  display: block;
  margin: 1px;
  padding: 0;
  color: #666666;
  color: var(--ol-subtle-foreground-color);
  font-weight: bold;
  text-decoration: none;
  font-size: inherit;
  text-align: center;
  height: 1.375em;
  width: 1.375em;
  line-height: .4em;
  background-color: white;
  background-color: var(--ol-background-color);
  border: none;
  border-radius: 2px;
}

.ol-control button::-moz-focus-inner {
  border: none;
  padding: 0;
}

.ol-zoom-extent button {
  line-height: 1.4em;
}

.ol-compass {
  display: block;
  font-weight: normal;
  will-change: transform;
}

.ol-touch .ol-control button {
  font-size: 1.5em;
}

.ol-touch .ol-zoom-extent {
  top: 5.5em;
}

.ol-control button:hover,
.ol-control button:focus {
  text-decoration: none;
  outline: 1px solid #666666;
  outline: 1px solid var(--ol-subtle-foreground-color);
  color: #333333;
  color: var(--ol-foreground-color);
}

.ol-zoom .ol-zoom-in {
  border-radius: 2px 2px 0 0;
}

.ol-zoom .ol-zoom-out {
  border-radius: 0 0 2px 2px;
}

.ol-attribution {
  text-align: right;
  bottom: .5em;
  right: .5em;
  max-width: calc(100% - 1.3em);
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
}

.ol-attribution a {
  color: #666666;
  color: var(--ol-subtle-foreground-color);
  text-decoration: none;
}

.ol-attribution ul {
  margin: 0;
  padding: 1px .5em;
  color: #333333;
  color: var(--ol-foreground-color);
  text-shadow: 0 0 2px white;
  text-shadow: 0 0 2px var(--ol-background-color);
  font-size: 12px;
}

.ol-attribution li {
  display: inline;
  list-style: none;
}

.ol-attribution li:not(:last-child):after {
  content: " ";
}

.ol-attribution img {
  max-height: 2em;
  max-width: inherit;
  vertical-align: middle;
}

.ol-attribution button {
  flex-shrink: 0;
}

.ol-attribution.ol-collapsed ul {
  display: none;
}

.ol-attribution:not(.ol-collapsed) {
  background: rgba(255, 255, 255, 0.75);
  background: var(--ol-partial-background-color);
}

.ol-attribution.ol-uncollapsible {
  bottom: 0;
  right: 0;
  border-radius: 4px 0 0;
}

.ol-attribution.ol-uncollapsible img {
  margin-top: -.2em;
  max-height: 1.6em;
}

.ol-attribution.ol-uncollapsible button {
  display: none;
}

.ol-zoomslider {
  top: 4.5em;
  left: .5em;
  height: 200px;
}

.ol-zoomslider button {
  position: relative;
  height: 10px;
}

.ol-touch .ol-zoomslider {
  top: 5.5em;
}

.ol-overviewmap {
  left: 0.5em;
  bottom: 0.5em;
}

.ol-overviewmap.ol-uncollapsible {
  bottom: 0;
  left: 0;
  border-radius: 0 4px 0 0;
}

.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {
  display: block;
}

.ol-overviewmap .ol-overviewmap-map {
  border: 1px solid #666666;
  border: 1px solid var(--ol-subtle-foreground-color);
  height: 150px;
  width: 150px;
}

.ol-overviewmap:not(.ol-collapsed) button {
  bottom: 0;
  left: 0;
  position: absolute;
}

.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
  display: none;
}

.ol-overviewmap:not(.ol-collapsed) {
  background: rgba(128, 128, 128, 0.25);
  background: var(--ol-subtle-background-color);
}

.ol-overviewmap-box {
  border: 1.5px dotted #666666;
  border: 1.5px dotted var(--ol-subtle-foreground-color);
}

.ol-overviewmap .ol-overviewmap-box:hover {
  cursor: move;
}

.ol-overviewmap .ol-viewport:hover {
  cursor: pointer;
}

:root,
:host {
  --ol-background-color: white;
  --ol-accent-background-color: #f5f5f5;
  --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
  --ol-partial-background-color: rgba(255, 255, 255, 0.75);
  --ol-foreground-color: #333333;
  --ol-subtle-foreground-color: #666666;
  --ol-brand-color: #00aaff;
}

.ol-box {
  box-sizing: border-box;
  border-radius: 2px;
  border: 1.5px solid white;
  border: 1.5px solid var(--ol-background-color);
  background-color: rgba(255, 255, 255, 0.75);
  background-color: var(--ol-partial-background-color);
}

.ol-mouse-position {
  top: 8px;
  right: 8px;
  position: absolute;
}

.ol-scale-line {
  background: rgba(255, 255, 255, 0.75);
  background: var(--ol-partial-background-color);
  border-radius: 4px;
  bottom: 8px;
  left: 8px;
  padding: 2px;
  position: absolute;
}

.ol-scale-line-inner {
  border: 1px solid #666666;
  border: 1px solid var(--ol-subtle-foreground-color);
  border-top: none;
  color: #333333;
  color: var(--ol-foreground-color);
  font-size: 10px;
  text-align: center;
  margin: 1px;
  will-change: contents, width;
  transition: all 0.25s;
}

.ol-scale-bar {
  position: absolute;
  bottom: 8px;
  left: 8px;
}

.ol-scale-bar-inner {
  display: flex;
}

.ol-scale-step-marker {
  width: 1px;
  height: 15px;
  background-color: #333333;
  background-color: var(--ol-foreground-color);
  float: right;
  z-index: 10;
}

.ol-scale-step-text {
  position: absolute;
  bottom: -5px;
  font-size: 10px;
  z-index: 11;
  color: #333333;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 rgba(255, 255, 255, 0.75),
    0 1.5px rgba(255, 255, 255, 0.75),
    1.5px 0 rgba(255, 255, 255, 0.75),
    0 -1.5px rgba(255, 255, 255, 0.75);
  text-shadow: -1.5px 0 var(--ol-partial-background-color),
    0 1.5px var(--ol-partial-background-color),
    1.5px 0 var(--ol-partial-background-color),
    0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-text {
  position: absolute;
  font-size: 12px;
  text-align: center;
  bottom: 25px;
  color: #333333;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 rgba(255, 255, 255, 0.75),
    0 1.5px rgba(255, 255, 255, 0.75),
    1.5px 0 rgba(255, 255, 255, 0.75),
    0 -1.5px rgba(255, 255, 255, 0.75);
  text-shadow: -1.5px 0 var(--ol-partial-background-color),
    0 1.5px var(--ol-partial-background-color),
    1.5px 0 var(--ol-partial-background-color),
    0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-singlebar {
  position: relative;
  height: 10px;
  z-index: 9;
  box-sizing: border-box;
  border: 1px solid #333333;
  border: 1px solid var(--ol-foreground-color);
}

.ol-scale-singlebar-even {
  background-color: #666666;
  background-color: var(--ol-subtle-foreground-color);
}

.ol-scale-singlebar-odd {
  background-color: white;
  background-color: var(--ol-background-color);
}

.ol-unsupported {
  display: none;
}

.ol-viewport,
.ol-unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ol-viewport canvas {
  all: unset;
  overflow: hidden;
}

.ol-viewport {
  touch-action: pan-x pan-y;
}

.ol-selectable {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

.ol-grabbing {
  cursor: grabbing;
}

.ol-grab {
  cursor: move;
  cursor: grab;
}

.ol-control {
  position: absolute;
  /* background-color: var(--ol-subtle-background-color); */
  background-color: transparent;
  border-radius: 4px;
}

.ol-zoom {
  top: 0.5em;
  left: 0.5em;
}

.ol-rotate {
  top: 0.5em;
  right: 0.5em;
  width: 20px;
  /* 
  transition: opacity .25s linear, visibility 0s linear; */
  visibility: hidden;
}

.ol-rotate.ol-hidden {
  opacity: 1;
  visibility: hidden;
  transition: opacity 0.25s linear, visibility 0s linear 0.25s;
}

.ol-zoom-extent {
  top: 4.643em;
  left: 0.5em;
}

.ol-full-screen {
  right: 0.5em;
  top: 0.5em;
  /* box-shadow: 5px 5px 5px rgb(0, 0, 0); */
}

.ol-control button {
  display: block;
  margin: 1px;
  padding: 0;
  color: #666666;
  color: var(--ol-subtle-foreground-color);
  font-weight: bold;
  text-decoration: none;
  font-size: inherit;
  text-align: center;
  height: 1.375em;
  width: 1.75em;
  line-height: 0.4em;
  background-color: white;
  background-color: var(--ol-background-color);
  border: none;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.ol-control button::-moz-focus-inner {
  border: none;
  padding: 0;
}

.ol-zoom-extent button {
  line-height: 1.4em;
}

.ol-compass {
  display: block;
  font-weight: normal;
  will-change: transform;
}

.ol-touch .ol-control button {
  font-size: 1.5em;
}

.ol-touch .ol-zoom-extent {
  top: 5.5em;
}

.ol-control button:hover,
.ol-control button:focus {
  text-decoration: none;
  outline: 1px solid #666666;
  outline: 1px solid var(--ol-subtle-foreground-color);
  color: #333333;
  color: var(--ol-foreground-color);
}

.ol-zoom .ol-zoom-in {
  border-radius: 50%;
  width: 45px;
  height: 45px;
  position: relative;
  top: 175px;
  /* box-shadow: 5px 5px 5px rgb(79, 79, 79); */
}

.ol-zoom .ol-zoom-out {
  border-radius: 50%;
  width: 45px;
  height: 45px;
  position: relative;
  top: 380px;
  /* box-shadow: 5px 5px 5px rgb(79, 79, 79); */
  z-index: 0;
}

.ol-attribution {
  text-align: right;
  bottom: 0.5em;
  right: 0.5em;
  max-width: calc(100% - 1.3em);
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
}

.ol-attribution a {
  color: #666666;
  color: var(--ol-subtle-foreground-color);
  text-decoration: none;
}

.ol-attribution ul {
  margin: 0;
  padding: 1px 0.5em;
  color: #333333;
  color: var(--ol-foreground-color);
  text-shadow: 0 0 2px white;
  text-shadow: 0 0 2px var(--ol-background-color);
  font-size: 12px;
}

.ol-attribution li {
  display: inline;
  list-style: none;
}

.ol-attribution li:not(:last-child):after {
  content: " ";
}

.ol-attribution img {
  max-height: 2em;
  max-width: inherit;
  vertical-align: middle;
}

.ol-attribution button {
  flex-shrink: 0;
}

.ol-attribution.ol-collapsed ul {
  display: none;
}

.ol-attribution:not(.ol-collapsed) {
  background: rgba(255, 255, 255, 0.75);
  background: var(--ol-partial-background-color);
}

.ol-attribution.ol-uncollapsible {
  bottom: 0;
  right: 0;
  border-radius: 4px 0 0;
}

.ol-attribution.ol-uncollapsible img {
  margin-top: -0.2em;
  max-height: 1.6em;
}

.ol-attribution.ol-uncollapsible button {
  display: none;
}

.ol-zoomslider {
  top: 14.5em;
  left: 1.85em;
  height: 200px;
  width: 0px;
  background-color: #fff;
  box-shadow: 2px 5px 12px rgb(79, 79, 79);
}

.ol-control .ol-zoomslider {
  background-color: #333333;
}

.ol-zoomslider button {
  position: relative;
  height: 10px;
  right: 25px;
  width: 50px;
  background-color: #333333;
  border-radius: 8px;
}

.ol-touch .ol-zoomslider {
  top: 5.5em;
}

.ol-overviewmap.ol-uncollapsible {
  bottom: 0;
  left: 100px;
  border-radius: 0 4px 0 0;
}

.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {
  display: block;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 25px;
}

.ol-overviewmap .ol-overviewmap-map {
  border: 1px solid #666666;
  border: 1px solid var(--ol-subtle-foreground-color);
  height: 225px;
  width: 300px;
}

.ol-overviewmap:not(.ol-collapsed) button {
  bottom: 0;
  left: 0;
  position: absolute;
  width: 25px;
  /* visibility: hidden;

} */
}

.ol-overviewmap-map {
  box-shadow: 5px 5px 5px rgb(107, 107, 107);
}

.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
  display: none;
}

.ol-overviewmap:not(.ol-collapsed) {
  background: transparent;
}

.ol-overviewmap-box {
  border: 1.5px dotted #666666;
  border: 1.5px dotted var(--ol-subtle-foreground-color);
}

.ol-overviewmap .ol-overviewmap-box:hover {
  cursor: move;
}

.ol-overviewmap .ol-viewport:hover {
  cursor: pointer;
}

.ol-control {
  /* Control styles */

  border-radius: 4px;
  padding: 5px;
}

.ol-zoom {
  /* Zoom control specific styles */
  /* Your custom styles here */
}

.ol-overviewmap {
  /* Overview map control styles */
  /* Your custom styles here */
  height: 200px;
  width: 200px;
  left: 2em !important;
  bottom: 9em;
}

.draw {
  display: flex;
  gap: 30px;
  position: absolute;
  bottom: 40px;
}

.inn {
  width: 140px;
}

.zoom-info {
  position: absolute;
  right: 130px;
  top: 35px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.zoom-info li {
  list-style: none;
  /* height: 10px; */
  min-width: 10%;
  padding: 10px;
  text-align: center;
  color: black;
  border-radius: 10px;
  background: #fff;
  margin: 1px;
  margin-left: -4px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.ModifiedViewButton {
  position: absolute;
  color: rgb(72, 72, 72);
  background-color: white;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  top: 78px;
  z-index: 999999;
  right: 15px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.ModifiedViewButton:hover{
  background-color: #883979;
  color: white;
}

#map-wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
}

#map1-container,
#map2-container {
  flex: 1 1;
  height: 100%;
}

.split-view #map1-container {
  width: 50%;
}

.split-view #map2-container {
  width: 50%;
}

.toolbar {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 5px;
}

.toolbar-2 {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 50px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.SplitViewButton {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 5px;
}

#map-wrapper.split-view #map2-container {
  display: block;
}

.VisibilityIcon {
  box-shadow: 0px 80px 50px -30px rgba(0, 0, 0, 0.15);
  border-radius: 100px;
  padding: 5px;
}

 .draw-type-select {
   list-style: none;

   font-family: Open Sans;
   font-size: 16px;
   font-weight: 400;
   line-height: 26px;
   letter-spacing: 0.032em;
   text-align: left;
   position: relative;
   -webkit-appearance: none;
           appearance: none;
   border: 0;
   width: 100%;
   background-color: white;
   color: black;
   cursor: pointer;
   padding: 0;

 }
 .draw-select {
   background-color: palevioletred;
 }


 .draw-select-measure {
   list-style: none;

   font-family: Open Sans;
   font-size: 16px;
   font-weight: 400;
   line-height: 26px;
   letter-spacing: 0.032em;
   text-align: left;
   position: relative;

   -webkit-appearance: none;

           appearance: none;
   border: 0;
   width: 100%;
   padding: 0;

 }

 .draw-select-measure option {
   padding: 8px;
   font-size: 14px;
   background-color: #fff;
   color: #333;
   cursor: pointer;
 }


 .draw-select-measure {


   font-size: 14px;
   font-family: Arial, sans-serif;
   border-radius: 4px;

   background-color: #ffffff;
   color: #333;
   cursor: pointer;


 }


 .draw-select-measure:focus {

   outline: none;

 }

 .draw-select-measure option {
   padding: 8px;
   font-size: 14px;
   background-color: #fff;
   color: #333;
   cursor: pointer;

 }

 .draw-select-measure option:hover {
   background-color: #f0f8ff;
 }

.sub1.colorM .control input[type="range"],
.sub1.colorM input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 140px;
  height: 6px;
  background: #D9D9D9;
  border-radius: 5px;
  outline: none;
}

.sub1.colorM .control input[type="range"]::-webkit-slider-thumb,
.sub1.colorM input[type="range"]::-webkit-slider-thumb,
.sub1.colorM .control input[type="range"]::-moz-range-thumb,
.sub1.colorM input[type="range"]::-moz-range-thumb {
  width: 8px;
  height: 28px;
  background-color: #2c4b22;
  cursor: pointer;
  border-radius: 5px;
}
  
 .sub1.colorM #color_resetset {

   cursor: pointer;
   font-weight: bold;
   text-align: center;
   padding: 8px;
   background-color: #883979;
   border: 1px solid #e0e0e0;
   border-radius: 5px;
   transition: background-color 0.3s, color 0.3s;
 }

 .sub1.colorM #color_reset:hover {
   background-color: #883979;
   color: #fff;
 }

.sub1 li {
  color: black !important;
}

 .ol-layer {
  z-index: 9999999 !important;
}

body {
  margin: 0;
  padding: 0;
}

.nav1 {
  height: 50px;

  /* color: white; */
  display: flex;
  justify-content: left;
  align-items: flex-start;
  /* width: 100%; */
  /* width: 1250px; */
  cursor: pointer;
  position: absolute;
  bottom: 40px;
  /* left:400px; */
  margin: 0px;
  gap: 20px;
  /* border: 3px solid white; */
  /* bottom: 28px; */
}

.nav2 {
  height: 50px;

  /* color: white; */
  display: flex;
  justify-content: left;
  align-items: flex-start;
  /* width: 100%; */
  cursor: pointer;
  position: fixed;

  margin: 0px;
  gap: 20px;
  /* border: 3px solid white; */
  top: 39px;
  /* left: 80px; */
}

.nav2 li {
  list-style: none;
  /* height: 10px; */
  min-width: 10%;
  padding: 10px;
  text-align: center;
  color: black;
  border-radius: 10px;
  box-shadow: 5px 5px 10px gray;
  background: #fff;
  margin: 1px;
  margin-left: -4px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.nav1 li {
  list-style: none;
  /* height: 10px; */
  min-width: 10%;
  width: auto;
  padding: 10px;
  text-align: center;
  color: black;
  box-shadow: 5px 5px 10px gray;
  border-radius: 10px;
  background: #fff;
  margin: 1px;
  margin-left: -4px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
}

.nav1:hover{
  color: white;
}

.dropdown-options-AI li {
  list-style: none;
  /* height: 10px; */
  min-width: 10%;
  padding: 10px;
  text-align: center;
  color: black;
  border-radius: 0px !important;
  background: #fff;
  margin: 1px;
  margin-left: -4px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.dropdown-options-IA li {
  list-style: none;
  /* height: 10px; */
  min-width: 10%;
  padding: 10px;
  text-align: center;
  color: black;
  border-radius: 0px !important;
  background: #fff;
  margin: 1px;
  margin-left: -4px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}


.dropdown-options-annotations li {
  list-style: none;
  /* height: 10px; */
  min-width: 10%;
  padding: 10px;
  text-align: center;
  color: black;
  border-radius: 0px !important;
  background: #fff;
  margin: 1px;
  margin-left: -4px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.dropdown-options-measure li {
  list-style: none;
  /* height: 10px; */
  min-width: 10%;
  padding: 10px;
  text-align: center;
  color: black;
  border-radius: 0px !important;
  background: #fff;
  margin: 1px;
  margin-left: -4px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.dropdown-options-imagefilter li {
  list-style: none;
  /* height: 10px; */
  min-width: 10%;
  padding: 10px;
  text-align: center;
  color: black;
  border-radius: 0px !important;
  background: #fff;
  margin: 1px;
  margin-left: -4px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.nav1 > li {
  margin: 1px;
  /* border: 3px solid rgb(212, 212, 212); */
}

.nav1 li:hover {
  background-color: #883979;
  /* color: white; */
}

.mainNavList:hover{
  color: white !important;
}

.colorM li:hover {
  background-color: white;
  color: black;
}

.in {
  position: relative;
  padding: 0px;
}

.sub1 {
  /* display: none; */
  position: absolute;
  /* height: 220px; */
  /* width: 100px; */
  background-color: #fff;
  /* color: white; */
  bottom: 115%;
  left: -24px;
  padding: 0px 0px 0px 5px;
  cursor: pointer;
  color: black;
}

.sub1 > li {
  min-width: 160px;
  border-radius: 0px;
}

.in:hover > .sub1 {
  display: block;
  /* background-color: blue; */
}

.in:hover > .sub2 {
  display: block;
}

.sub2 {
  display: none;
  position: absolute;
  /* height: 200px; */
  min-width: 100px;
  background-color: white;
  /* color: white; */
  bottom: 0px;
  left: 100px;
  padding: 0px 0px 0px 5px;
  cursor: pointer;
}

.nav3 {
  height: 50px;

  /* color: white; */
  display: flex;
  justify-content: left;
  align-items: flex-start;
  /* width: 100%; */
  cursor: pointer;
  position: sticky;
  bottom: 30px;
  left: 0px;
  margin: 0px;
  gap: 30px;
  /* border: 3px solid white; */
  bottom: 28px;
}

.nav3 li {
  list-style: none;
  /* height: 10px; */
  min-width: 10%;
  padding: 10px;
  text-align: center;
  color: black;
  border-radius: 10px;
  background: #fff;
  margin: 1px;
  margin-left: -4px;

  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.view-card {
  position: absolute;
  width: 258px;
  height: 465px;
  border-radius: 12px;
  background-color: #f4f4f4;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-top: -565px;
  margin-left: 85px;
  z-index: 10;
}

.close-icon {
  position: absolute;
  top: 16px;
  left: 227px;
  width: 24px;
  height: 24px;
  font-size: 24px;
  cursor: pointer;
  color: #555;
  text-align: center;
  line-height: 24px;
}

.profile-frame {
  height: 491px;
  width: 243px;
  text-align: left;
  margin-left: 16px;
  /* margin-top: 40px; */
  margin-top: -35px;
}

.profile-picture {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #d9d9d9;
  /* background-image: url("https://thispersondoesnotexist.com/"); */
  background-image: url(/static/media/Icon.d17ec6de68c96474a09f.svg);
  background-size: cover;
  background-position: center;
}

.profile-details {
  width: 125px;
  height: 350px;
  margin-top: 15px;
}

.profile-row {
  width: 260px;
  margin-bottom: 20px;
}

.profile-label {
  margin: 8px 0;
  color: #666666;
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.profile-value {
  color: #1b1313;
  min-width: 10%;
  text-align: center;
  border-radius: 10px;
  margin: 1px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
}

.inn {
  width: 165px;
}

/* CSS for centering the form */
.center-form-container {
  display: flex;
  /* justify-content: center;  */
  /* align-items: center;  */
  /* height: 100vh; */
  /* position: absolute; */
  /* bottom: -100px;
  right: 50px; */
}

.screenshot-form {
  display: flex;
  width: 900px;
  /* Set a width for the form */
  padding: 20px;
  height: 500px;
  background-color: #f9f9f9;
  /* Light background for contrast */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 250px;
  right: 50%;
  transform: translateX(50%);
  gap: 30px;
}

.screenshot-form img {
  width: 500px;
  height: 500px;
}

.Observation-button {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
}

.Inputboxx {
  width: 300px;
  height: 290px;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
  text-align: left;
  vertical-align: top;
  overflow: auto;
  resize: none; /* Prevent resizing if necessary */
  border-radius: 4px;
}

.Observation-box {
  display: flex;
  flex-direction: column;
}

.observation-submit {
  width: 180px;
  height: 38px;

  padding: 10px;
  gap: 0px;
  border-radius: 8px;
  opacity: 1;
  background: #883979;
  color: #fff;

  cursor: pointer;
}

.remarks-heading {
  color: black !important;
}

.remarks {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.overlay-observation {
  width: 100%;
  height: 100vh;
  background-color: #883979;
}
.exit-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.Inputboxx {
  width: 360px !important;
  height: 290px;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box; /* Ensures padding is included in the width/height */
  text-align: left; /* Aligns text to the left */
  vertical-align: top !important; /* Aligns the content vertically to the top */
  overflow: auto; /* Adds scrollbars if content overflows */
  margin-left: 0px !important;
}

/* Specific styling for this textarea */
.observation-textarea {
  width: 300px;
  height: 390px;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
  text-align: left;
  vertical-align: top;
  overflow: auto;
  resize: none; /* Prevent resizing if necessary */
  border-radius: 4px;
}

.Observation-box {
  display: flex;
  flex-direction: column;
}

.observation-submit {
  width: 124px;
  height: 38px;

  padding: 10px;
  gap: 0px;
  border-radius: 8px;
  opacity: 0px;
  background: #883979;
  color: #fff;
  /* margin-top: 32px; */
  cursor: pointer;
}
.remarks {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 400;
  line-height: 19.07px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-bottom: 10px;
}
.arr {
  display: flex;
  margin: 1px;
  width: 45px;
  height: 45px;
  border-radius: 50px;
  margin-top: 0px;
  margin-left: 0px;
  background-color: #ad499a;
  color: white;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: sticky;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 1000;
}

.navigation1 {
  height: 50px;
  display: flex;
  justify-content: left;
  align-items: left;
  width: 100%;
  cursor: pointer;
  margin: 0;
  gap: 20px;
  position: fixed;
  top: 39px;
  left: -100%;
  transition: transform 0.5s ease;
}

.navigation1 li {
  list-style: none;
  min-width: 10%;
  padding: 10px;
  color: black;
  border-radius: 10px;
  background: #bbb6b6;
  margin: 1px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
}
.nevigation1 {
  display: flex;
  gap: 20px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  left: -100%;
  transition: transform 0.5s ease;
  transform: translateX(-100%);
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

.nav2 {
  display: flex;
  align-items: center;
}

.nevigation1.show {
  transform: translateX(0);
  opacity: 1;
}
.arr1 {
  display: flex;
  margin: 1px;
  width: 45px;
  height: 45px;
  border-radius: 50px;
  margin-top: 0px;
  margin-left: -20px;
  background-color: #ad499a;
  color: white;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: sticky;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 1000;
}

.navigation2 {
  height: 50px;
  display: flex;
  justify-content: left;
  align-items: left;
  width: 100%;
  cursor: pointer;
  margin: 0;
  gap: 20px;
  position: fixed;
  top: 39px;
  left: -100%;
  transition: transform 0.5s ease;
}

.navigation2 li {
  list-style: none;
  min-width: 10%;
  padding: 10px;
  color: black;
  border-radius: 10px;
  background: #bbb6b6;
  margin: 1px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
}
.nevigation2 {
  display: flex;
  gap: 20px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  left: -100%;
  transition: transform 0.5s ease;
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
  opacity 0.4s ease-in-out;
  opacity: 0;
}

.Observation-button:hover{
  color: white;
}

.nav1 {
  display: flex;
  align-items: center;
}

.nevigation2.show {
  transform: translateX(0);
  opacity: 1;
}

.nevigation2 li {
  box-shadow: #333;
}

.google-icons-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.google-icon {
  font-size: 45px;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer; /* Add pointer cursor for hover effect */
  transition: transform 0.3s ease; /* Smooth hover effect */
}

.google-icon:hover {
  transform: scale(1.2); /* Slight zoom effect on hover */
  background-color: rgba(0, 0, 0, 0.1); /* Add a subtle background on hover */
}

.profile-card-container {
  position: relative;
  width: 267px;
  height: 560px;
  border-radius: 12px;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  font-size: 24px;
  cursor: pointer;
  color: #555;
  text-align: center;
  line-height: 24px;
}

.profile-details {
  flex-direction: column;
  gap: 15px;
}

.profile-row {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.profile-label {
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.profile-value {
  color: #555;
}

/* Active state styles */
.arr.active,
.arr1.active {
  background-color: #883979 !important;
  color: white !important;
}

/* Default (inactive) state styles */
.arr:not(.active),
.arr1:not(.active) {
  background-color: #ffffff;
  color: black;
}

/* Box shadow for inactive state */
.arr:not(.active),
.arr1:not(.active) {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* Styling the icons */
.arr i,
.arr1 i {
  font-size: 1.2rem;
}

/* viewerTab.css */
#map-wrapper.capture-mode {
  filter: brightness(1) contrast(1)
    saturate(1) hue-rotate(0deg)
    invert(0);
  filter: brightness(var(--brightness, 1)) contrast(var(--contrast, 1))
    saturate(var(--saturate, 1)) hue-rotate(var(--hue, 0deg))
    invert(var(--invert, 0));
  transform: translateZ(0); /* Prevent rendering issues */
  background-color: #fff; /* Ensure clean background */
}

.overlay-observation {
  width: 100vw;
  height: 100vh;
  position: absolute;
  bottom: -40px;
  left: -86px;

  background-color: rgba(85, 85, 85, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}





/* Add to your viewerTab.css */

/* Dot dot dot animation */
.loading-dots {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 20px;
}

.loading-dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 3px;
  background-color: #3498db;
  border-radius: 50%;
  opacity: 0;
  animation: dotAnimation 1.5s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
  animation-delay: 0s;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.3s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes dotAnimation {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}



.observation-generate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Adjust spacing between image and text */
  padding: 10px 16px;
  background: linear-gradient(327.56deg, #58C2E2 -17.73%, #E75CC4 79.66%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.observation-generate:hover {
  background-color: #883979;
}

.observation-generate img {
  width: 20px; /* Adjust size */
  height: 20px;
}


.button-box{

display: flex;
flex-direction: row;
gap: 10px;
padding: 20px;




}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

.headImageViewer {
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
  position: fixed;
  top: 0px;
  z-index: 9;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.sidebarLeft {
  position: absolute;
  top: 0px;
  left: 0px;
}

.sidebarRight {
  position: absolute;
  top: 0px;
  right: 0px;
}

.ViewerNavBar {
  display: flex;
  flex-direction: row;
  background-color: rgb(219, 219, 219);
  position: fixed;
  bottom: 0px;
  width: 100%;
}

.map {
  margin-left: 10%;
  width: 100%;
  height: 400px;
}
.map {
  background: #009afa;
}
.wrapper {
  position: relative;
}
#progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  box-shadow: 0px 0px 3px 5px #c740a9;
  width: 0;
  transition: width 250ms;
}

.ViewerNavBar > div {
  margin: 10px;
}

.downloadToImg > label {
  width: 100px;
}

.map {
  background: #d9d9d9;

  margin: 0 auto;
}

#img-1 {
  display: none;
}
.code {
  background-color: darkorchid;
  padding: 1%;
  margin: 0% 5px;
  border-radius: 8px;
  border: none;
  color: #fff;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.in-1 {
  margin-right: 20px;
  position: absolute;
  /* float: right; */
  right: 0px;
  padding: 10px;
  background-color: darkorchid;
  color: #fff;
  border: none;
  border-radius: 10px;
}
#btns {
  text-align: center;
}

#color_reset:hover {
  background-color: #3498db;
}

#imageViewerMain {
  display: flex;
}

#map1 {
  width: 100%;
  z-index: 99999 !important;
}
.google-icons-vertical {
  position: fixed;
  top: 40%;
  right: 15px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999999;
  
}

.google-icon {
  font-size: 45px;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  text-align: center;
  line-height: 45px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  z-index: 9999999;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0px 25px 80px rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.google-icon:hover {
  background-color: #883979;
  color: white;
  transform: scale(1.1);
}

.google-icons-vertical {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 10px;
}

.google-icon {
  cursor: pointer;
  font-size: 32px;
}
.google-icons-vertical {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 10px;
}

.google-icon {
  cursor: pointer;
  font-size: 32px;
  padding: 5px;
}

.popupp {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 999999;
}

.popupp-content {
  text-align: center;
}

.popupp-actions {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}

.buttonn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.buttonn:hover {
  background-color: #0056b3;
}

.buttonn:last-child {
  background-color: #dc3545;
}

.buttonn:last-child:hover {
  background-color: #a71d2a;
}

.swipe-container {
  z-index: 1000000;
}

.popupp-done {
  width: 412px;
  height: 136px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background-color: white;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.drop-overlay-imageviewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  transition: opacity 0.5s ease-in-out;
  z-index: 9999999;
}

.popupp-content-done {
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  text-align: center;
  color: #000;
  position: relative;
  top: -10px;
}
.popupp-content-done p {
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  text-align: center;
  color: #000;
}

.popupp-actions-done {
  margin-top: 16px;
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 0 24px;
}

.buttonn-done {
  width: 180px;
  height: 38px;
  border-radius: 8px;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  line-height: 38px;
}

.buttonn-done:first-of-type {
  border: 1px solid #883979;
  background-color: white;
  color: #883979;
  transition: all 0.3s ease;
}

.buttonn-done:first-of-type:hover {
  background-color: #883979;
  color: white;
}

.buttonn-done:last-of-type {
  background-color: #883979;
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.buttonn-done:last-of-type:hover {
  background-color: #6a2b61;
}

@media (max-width: 768px) {
  .popupp-done {
    width: 90%;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
  }

  .buttonn-done {
    width: 45%;
    margin: 0 2.5%;
  }
}

.popupp-restore {
  width: 412px;
  height: 136px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background-color: white;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.popupp-content-restore {
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  text-align: center;
  color: #000;
  position: relative;
  top: -10px;
}
.popupp-content-restore p {
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  text-align: center;
  color: #000;
}

.popupp-actions-restore {
  margin-top: 16px;
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 0 24px;
}

.buttonn-restore {
  width: 180px;
  height: 38px;
  border-radius: 8px;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  line-height: 38px;
}

.buttonn-restore:first-of-type {
  border: 1px solid #883979;
  background-color: white;
  color: #883979;
  transition: all 0.3s ease;
}

.buttonn-restore:first-of-type:hover {
  background-color: #883979;
  color: white;
}

.buttonn-restore:last-of-type {
  background-color: #883979;
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.buttonn-restore:last-of-type:hover {
  background-color: #6a2b61;
}

@media (max-width: 768px) {
  .popupp-done {
    width: 90%;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
  }

  .buttonn-restore {
    width: 45%;
    margin: 0 2.5%;
  }
}

.image-filter-modal-my {
  position: relative;
  display: inline-block;
}

.draw-type-select:focus {
  outline: none;
  border-color: #007bff;
}

.main-select {
  z-index: 1;
}

.sub-dropdown-container {
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 10;
}

.sub-select {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
  cursor: pointer;
}

.ai-algorithm-container {
  position: relative;
  display: inline-block;
}

.draw-select-measure-div {
  position: relative;
}

.draw-select-measure-dropup {
  -webkit-appearance: none;
          appearance: none;
  border: 0px;
  border-radius: 0px;
  background: none;
  outline: none;
  padding: 10px 14px;
  font-size: 18px;
  cursor: pointer;
  width: 150px;
  text-align: left;
}


.draw-select-measure-dropup option {
  background: #ffffff;
  background-color: white;
  color: #000000; 
  padding: 12px;
  border: none;
  border-radius: 0px;
  border-color: white;
  width: 100%;
}

.draw-select-measure-dropup option:hover {
  background-color: #883979;
  color: #ffffff; 
  border-radius: 0px; 
}

.draw-select-measure-dropup option:focus {
  background: #6b2b5b;
  color: #ffffff;
  border-radius: 0px;
}

.dropdown-button {
  font-size: 1rem;
  cursor: pointer;
  color: black;
  border: none;
  border-radius: 4px;
}

.dropdown-button:hover {
  background-color: transparent;
  color: white;
}

.dropdown-options {
  position: absolute;
  bottom: 150%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: -5px;
  background-color: transparent;
  border-radius: 4px;
  z-index: 1000;
}

.dropdown-options-measure {
  position: absolute;
  bottom: 110%;
  left: 28%;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: -5px;
  background-color: transparent;
  z-index: 1000;
}

.dropdown-options-AI {
  position: absolute;
  bottom: 150%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0px;
  margin-left: -5px;
  background-color: transparent;
  z-index: 1000;
}

.dropdown-options-IA {
  width: 140px !important;
  position: absolute;
  bottom: 170%;
  left: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 0px;
  margin-left: -5px;
  background-color: transparent;
  z-index: 1000;
  width: 300px;
}

.dropdown-options-imagefilter {
  position: absolute;
  bottom: 110%;
  left: 56.5%;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 0px;
  margin-left: -5px;
  background-color: transparent;
  z-index: 1000;
  width: 150px;
}

.dropdown-options-annotations {
  position: absolute;
  bottom: 110%;
  left: 132px;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 0px;
  margin-left: -5px;
  background-color: transparent;
  z-index: 1000;
  width: 140px;
}

.dropdown-option-ia {
  padding: 0.5rem;
  width: 150px;
  left: -5px;
  bottom: 20%;
  border-radius: 0px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dropdown-option-ai {
  padding: 0.5rem;
  width: 300px;
  left: 0px;
  border-radius: 0px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dropdown-option {
  padding: 0.5rem;
  width: 110px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dropdown-option-imagefilter {
  padding: 0.5rem;
  width: 110px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dropdown-option:hover {
  background-color: #e0e0e0;
}

.submenu {
  position: absolute;
  left: 135px;
  top: 0;
  display: none;
  list-style: none;
  padding: 0.5rem;
  margin: 0;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.dropdown-option:hover .submenu {
  display: block;
}

.sub-option {
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sub-option:hover {
  background-color: #007bff;
  color: white;
}

.sub-option.selected {
  background-color: #0056b3;
  color: white;
}

.ai-img {
  position: absolute;
  z-index: 999999;
  right: 10px;
  bottom: 25px;
}
.ai-picture {
  z-index: 999999;
  border-radius: 90%;
  background-color: transparent;
  width: 70px;
  height: 70px;
}

.popupp-bookmark {
  position: absolute;
  z-index: 9999999999;
  right: 60px;
  top: 89px;
}

.popupp-content-bookmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  z-index: 99999999;
  background-color: #fff;
}

.exit-icon-observation{
  width: 24px;
  height: 24px;
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}

.buttonn-bookmark {
  background-color: #1976d2;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-top: 10px;
  border-radius: 4px;
  cursor: pointer;
}

.buttonn-bookmark:hover {
  background-color: #155a9a;
}

.error {
  color: red;
  font-weight: bold;
}

.observations-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 650px; /* Adjust height as needed */
  max-width: 750px;
  scrollbar-width: thin;
  scrollbar-color: #883979 #f3f3f3; /* Thumb color and track color */
}

/* For Webkit browsers (Chrome, Edge, Safari) */
.observations-container::-webkit-scrollbar {
  width: 8px;
}

.observations-container::-webkit-scrollbar-track {
  background: #f3f3f3;
  border-radius: 10px;
}

.observations-container::-webkit-scrollbar-thumb {
  background-color: #883979;
  border-radius: 10px;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.observations-container::-webkit-scrollbar-thumb:hover {
  background-color: #6b2b5c; /* Darker shade on hover */
}


.observation-item {
  display: flex;
  align-items: center;
  gap: 16px; 
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
}

.remarks-section {
  flex: 1 1; 
  flex: 1 1; 
}

.image-section img {
  width: 300px;
  height: 300px;
  border-radius: 4px;
  object-fit: cover; 
  background-color: #6b2b5b;
}

.lockicon-imageviewer {
  color: black;
  width: 32px;
  height: 32px;
}

.messageboxMain-imageViewer {
  width: 470px;
  height: 100px;
  background-color: #883979;
  position: absolute;
  right: 86px;
  top: 24px;
  border-radius: 12px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 20px;
  font-weight: 400;
}

.messageboxMain-diagonalIcon {
  position: absolute;
  right: 52px;
  top: 30px;
  transform: rotate(-35deg);
}

.lockIcon-box {
  width: 25px;
  height: 25px;
  background-color: white;
  position: absolute;
  right: 20px;
  top: 20px;
  color: white;
  border-radius: 12px;
  padding: 2px;
  color: black;
}

.OpenlockIcon {
  position: absolute;
  right: 23px;
  top: 125px;
  z-index: 999999;
  background-color: transparent;
  width: 25px;
  height: 25px;
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.lockIcon-box:hover{
  background-color: #883979;
  color: white;
}

.lockIcon-box:hover .lockicon-imageviewer {
  color: white;
}

.LockOpenIconMain {
  color: black;
  z-index: 999999;
  box-shadow: 0px 80px 50px -30px rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  background-color: white;
  padding: 5px;
}

.LockOpenIconMain:hover{
  background-color: #883979;
  color: white;
}

.lockScreenBiggerIcon {
  position: absolute;
  left: 46%;
  bottom: 50%;
  transform: translate(-50%, -50%);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.LockedTitle{
  font-weight: 1000;
  color: #474747;
  font-size: 24px;
}

@keyframes slideIn {
  from {
    transform: translateY(50px);
    opacity: 1; 
  }
  to {
    transform: translateY(0); 
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(50px);
    opacity: 1;
  }
}

.lockScreenBiggerIcon-imageViewer {
  animation: slideIn 0.5s ease-out;
}

.slideIn {
  animation: slideIn 0.5s ease-out forwards;
}

.slideOut {
  animation: slideOut 0.5s ease-out forwards;
}

.nevigation2 li:hover  {
color: white;
}

.mainNavList:hover {
  color: white;
}
/*!
 * Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
.fa{font-family:"Font Awesome 6 Free";font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:900;font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-regular,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;display:var(--fa-display,inline-block);font-style:normal;font-feature-settings:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-brands:before,.fa-regular:before,.fa-solid:before,.fa:before,.fab:before,.far:before,.fas:before{content:var(--fa)}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(2em*-1);left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:2em;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:.1em;border-radius:var(--fa-border-radius,.1em);border:.08em solid #eee;border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:.2em .25em .15em;padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:.3em;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:.3em;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{animation-name:fa-beat;animation-delay:0s;animation-delay:var(--fa-animation-delay,0s);animation-direction:normal;animation-direction:var(--fa-animation-direction,normal);animation-duration:1s;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:ease-in-out;animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-name:fa-bounce;animation-delay:0s;animation-delay:var(--fa-animation-delay,0s);animation-direction:normal;animation-direction:var(--fa-animation-direction,normal);animation-duration:1s;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:cubic-bezier(.28,.84,.42,1);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{animation-name:fa-fade;animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:cubic-bezier(.4,0,.6,1);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{animation-delay:0s;animation-delay:var(--fa-animation-delay,0s);animation-direction:normal;animation-direction:var(--fa-animation-direction,normal);animation-duration:1s;animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{animation-name:fa-beat-fade;animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:cubic-bezier(.4,0,.6,1);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{animation-name:fa-flip;animation-delay:0s;animation-delay:var(--fa-animation-delay,0s);animation-direction:normal;animation-direction:var(--fa-animation-direction,normal);animation-duration:1s;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:ease-in-out;animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-name:fa-shake;animation-duration:1s;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:linear;animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{animation-delay:0s;animation-delay:var(--fa-animation-delay,0s);animation-direction:normal;animation-direction:var(--fa-animation-direction,normal)}.fa-spin{animation-name:fa-spin;animation-duration:2s;animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:linear;animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-name:fa-spin;animation-direction:normal;animation-direction:var(--fa-animation-direction,normal);animation-duration:1s;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:infinite;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:steps(8);animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{animation-delay:-1ms;animation-duration:1ms;animation-iteration-count:1;transition-delay:0s;transition-duration:0s}}@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(1.25);transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-bounce{0%{transform:scale(1) translateY(0)}10%{transform:scale(1.1,.9) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{transform:scale(.9,1.1) translateY(-.5em);transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{transform:scale(1.05,.95) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{transform:scale(1) translateY(-.125em);transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{transform:scale(1) translateY(0)}to{transform:scale(1) translateY(0)}}@keyframes fa-fade{50%{opacity:.4;opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-beat-fade{0%,to{opacity:.4;opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}50%{opacity:1;transform:scale(1.125);transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-flip{50%{transform:rotate3d(0,1,0,-180deg);transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-shake{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}8%,24%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%,to{transform:rotate(0deg)}}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(0);transform:rotate(var(--fa-rotate-angle,0))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:auto;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff;color:var(--fa-inverse,#fff)}

.fa-0{--fa:"\30";--fa--fa:"\30\30"}.fa-1{--fa:"\31";--fa--fa:"\31\31"}.fa-2{--fa:"\32";--fa--fa:"\32\32"}.fa-3{--fa:"\33";--fa--fa:"\33\33"}.fa-4{--fa:"\34";--fa--fa:"\34\34"}.fa-5{--fa:"\35";--fa--fa:"\35\35"}.fa-6{--fa:"\36";--fa--fa:"\36\36"}.fa-7{--fa:"\37";--fa--fa:"\37\37"}.fa-8{--fa:"\38";--fa--fa:"\38\38"}.fa-9{--fa:"\39";--fa--fa:"\39\39"}.fa-fill-drip{--fa:"\f576";--fa--fa:"\f576\f576"}.fa-arrows-to-circle{--fa:"\e4bd";--fa--fa:"\e4bd\e4bd"}.fa-chevron-circle-right,.fa-circle-chevron-right{--fa:"\f138";--fa--fa:"\f138\f138"}.fa-at{--fa:"\40";--fa--fa:"\40\40"}.fa-trash-alt,.fa-trash-can{--fa:"\f2ed";--fa--fa:"\f2ed\f2ed"}.fa-text-height{--fa:"\f034";--fa--fa:"\f034\f034"}.fa-user-times,.fa-user-xmark{--fa:"\f235";--fa--fa:"\f235\f235"}.fa-stethoscope{--fa:"\f0f1";--fa--fa:"\f0f1\f0f1"}.fa-comment-alt,.fa-message{--fa:"\f27a";--fa--fa:"\f27a\f27a"}.fa-info{--fa:"\f129";--fa--fa:"\f129\f129"}.fa-compress-alt,.fa-down-left-and-up-right-to-center{--fa:"\f422";--fa--fa:"\f422\f422"}.fa-explosion{--fa:"\e4e9";--fa--fa:"\e4e9\e4e9"}.fa-file-alt,.fa-file-lines,.fa-file-text{--fa:"\f15c";--fa--fa:"\f15c\f15c"}.fa-wave-square{--fa:"\f83e";--fa--fa:"\f83e\f83e"}.fa-ring{--fa:"\f70b";--fa--fa:"\f70b\f70b"}.fa-building-un{--fa:"\e4d9";--fa--fa:"\e4d9\e4d9"}.fa-dice-three{--fa:"\f527";--fa--fa:"\f527\f527"}.fa-calendar-alt,.fa-calendar-days{--fa:"\f073";--fa--fa:"\f073\f073"}.fa-anchor-circle-check{--fa:"\e4aa";--fa--fa:"\e4aa\e4aa"}.fa-building-circle-arrow-right{--fa:"\e4d1";--fa--fa:"\e4d1\e4d1"}.fa-volleyball,.fa-volleyball-ball{--fa:"\f45f";--fa--fa:"\f45f\f45f"}.fa-arrows-up-to-line{--fa:"\e4c2";--fa--fa:"\e4c2\e4c2"}.fa-sort-desc,.fa-sort-down{--fa:"\f0dd";--fa--fa:"\f0dd\f0dd"}.fa-circle-minus,.fa-minus-circle{--fa:"\f056";--fa--fa:"\f056\f056"}.fa-door-open{--fa:"\f52b";--fa--fa:"\f52b\f52b"}.fa-right-from-bracket,.fa-sign-out-alt{--fa:"\f2f5";--fa--fa:"\f2f5\f2f5"}.fa-atom{--fa:"\f5d2";--fa--fa:"\f5d2\f5d2"}.fa-soap{--fa:"\e06e";--fa--fa:"\e06e\e06e"}.fa-heart-music-camera-bolt,.fa-icons{--fa:"\f86d";--fa--fa:"\f86d\f86d"}.fa-microphone-alt-slash,.fa-microphone-lines-slash{--fa:"\f539";--fa--fa:"\f539\f539"}.fa-bridge-circle-check{--fa:"\e4c9";--fa--fa:"\e4c9\e4c9"}.fa-pump-medical{--fa:"\e06a";--fa--fa:"\e06a\e06a"}.fa-fingerprint{--fa:"\f577";--fa--fa:"\f577\f577"}.fa-hand-point-right{--fa:"\f0a4";--fa--fa:"\f0a4\f0a4"}.fa-magnifying-glass-location,.fa-search-location{--fa:"\f689";--fa--fa:"\f689\f689"}.fa-forward-step,.fa-step-forward{--fa:"\f051";--fa--fa:"\f051\f051"}.fa-face-smile-beam,.fa-smile-beam{--fa:"\f5b8";--fa--fa:"\f5b8\f5b8"}.fa-flag-checkered{--fa:"\f11e";--fa--fa:"\f11e\f11e"}.fa-football,.fa-football-ball{--fa:"\f44e";--fa--fa:"\f44e\f44e"}.fa-school-circle-exclamation{--fa:"\e56c";--fa--fa:"\e56c\e56c"}.fa-crop{--fa:"\f125";--fa--fa:"\f125\f125"}.fa-angle-double-down,.fa-angles-down{--fa:"\f103";--fa--fa:"\f103\f103"}.fa-users-rectangle{--fa:"\e594";--fa--fa:"\e594\e594"}.fa-people-roof{--fa:"\e537";--fa--fa:"\e537\e537"}.fa-people-line{--fa:"\e534";--fa--fa:"\e534\e534"}.fa-beer,.fa-beer-mug-empty{--fa:"\f0fc";--fa--fa:"\f0fc\f0fc"}.fa-diagram-predecessor{--fa:"\e477";--fa--fa:"\e477\e477"}.fa-arrow-up-long,.fa-long-arrow-up{--fa:"\f176";--fa--fa:"\f176\f176"}.fa-burn,.fa-fire-flame-simple{--fa:"\f46a";--fa--fa:"\f46a\f46a"}.fa-male,.fa-person{--fa:"\f183";--fa--fa:"\f183\f183"}.fa-laptop{--fa:"\f109";--fa--fa:"\f109\f109"}.fa-file-csv{--fa:"\f6dd";--fa--fa:"\f6dd\f6dd"}.fa-menorah{--fa:"\f676";--fa--fa:"\f676\f676"}.fa-truck-plane{--fa:"\e58f";--fa--fa:"\e58f\e58f"}.fa-record-vinyl{--fa:"\f8d9";--fa--fa:"\f8d9\f8d9"}.fa-face-grin-stars,.fa-grin-stars{--fa:"\f587";--fa--fa:"\f587\f587"}.fa-bong{--fa:"\f55c";--fa--fa:"\f55c\f55c"}.fa-pastafarianism,.fa-spaghetti-monster-flying{--fa:"\f67b";--fa--fa:"\f67b\f67b"}.fa-arrow-down-up-across-line{--fa:"\e4af";--fa--fa:"\e4af\e4af"}.fa-spoon,.fa-utensil-spoon{--fa:"\f2e5";--fa--fa:"\f2e5\f2e5"}.fa-jar-wheat{--fa:"\e517";--fa--fa:"\e517\e517"}.fa-envelopes-bulk,.fa-mail-bulk{--fa:"\f674";--fa--fa:"\f674\f674"}.fa-file-circle-exclamation{--fa:"\e4eb";--fa--fa:"\e4eb\e4eb"}.fa-circle-h,.fa-hospital-symbol{--fa:"\f47e";--fa--fa:"\f47e\f47e"}.fa-pager{--fa:"\f815";--fa--fa:"\f815\f815"}.fa-address-book,.fa-contact-book{--fa:"\f2b9";--fa--fa:"\f2b9\f2b9"}.fa-strikethrough{--fa:"\f0cc";--fa--fa:"\f0cc\f0cc"}.fa-k{--fa:"\4b";--fa--fa:"\4b\4b"}.fa-landmark-flag{--fa:"\e51c";--fa--fa:"\e51c\e51c"}.fa-pencil,.fa-pencil-alt{--fa:"\f303";--fa--fa:"\f303\f303"}.fa-backward{--fa:"\f04a";--fa--fa:"\f04a\f04a"}.fa-caret-right{--fa:"\f0da";--fa--fa:"\f0da\f0da"}.fa-comments{--fa:"\f086";--fa--fa:"\f086\f086"}.fa-file-clipboard,.fa-paste{--fa:"\f0ea";--fa--fa:"\f0ea\f0ea"}.fa-code-pull-request{--fa:"\e13c";--fa--fa:"\e13c\e13c"}.fa-clipboard-list{--fa:"\f46d";--fa--fa:"\f46d\f46d"}.fa-truck-loading,.fa-truck-ramp-box{--fa:"\f4de";--fa--fa:"\f4de\f4de"}.fa-user-check{--fa:"\f4fc";--fa--fa:"\f4fc\f4fc"}.fa-vial-virus{--fa:"\e597";--fa--fa:"\e597\e597"}.fa-sheet-plastic{--fa:"\e571";--fa--fa:"\e571\e571"}.fa-blog{--fa:"\f781";--fa--fa:"\f781\f781"}.fa-user-ninja{--fa:"\f504";--fa--fa:"\f504\f504"}.fa-person-arrow-up-from-line{--fa:"\e539";--fa--fa:"\e539\e539"}.fa-scroll-torah,.fa-torah{--fa:"\f6a0";--fa--fa:"\f6a0\f6a0"}.fa-broom-ball,.fa-quidditch,.fa-quidditch-broom-ball{--fa:"\f458";--fa--fa:"\f458\f458"}.fa-toggle-off{--fa:"\f204";--fa--fa:"\f204\f204"}.fa-archive,.fa-box-archive{--fa:"\f187";--fa--fa:"\f187\f187"}.fa-person-drowning{--fa:"\e545";--fa--fa:"\e545\e545"}.fa-arrow-down-9-1,.fa-sort-numeric-desc,.fa-sort-numeric-down-alt{--fa:"\f886";--fa--fa:"\f886\f886"}.fa-face-grin-tongue-squint,.fa-grin-tongue-squint{--fa:"\f58a";--fa--fa:"\f58a\f58a"}.fa-spray-can{--fa:"\f5bd";--fa--fa:"\f5bd\f5bd"}.fa-truck-monster{--fa:"\f63b";--fa--fa:"\f63b\f63b"}.fa-w{--fa:"\57";--fa--fa:"\57\57"}.fa-earth-africa,.fa-globe-africa{--fa:"\f57c";--fa--fa:"\f57c\f57c"}.fa-rainbow{--fa:"\f75b";--fa--fa:"\f75b\f75b"}.fa-circle-notch{--fa:"\f1ce";--fa--fa:"\f1ce\f1ce"}.fa-tablet-alt,.fa-tablet-screen-button{--fa:"\f3fa";--fa--fa:"\f3fa\f3fa"}.fa-paw{--fa:"\f1b0";--fa--fa:"\f1b0\f1b0"}.fa-cloud{--fa:"\f0c2";--fa--fa:"\f0c2\f0c2"}.fa-trowel-bricks{--fa:"\e58a";--fa--fa:"\e58a\e58a"}.fa-face-flushed,.fa-flushed{--fa:"\f579";--fa--fa:"\f579\f579"}.fa-hospital-user{--fa:"\f80d";--fa--fa:"\f80d\f80d"}.fa-tent-arrow-left-right{--fa:"\e57f";--fa--fa:"\e57f\e57f"}.fa-gavel,.fa-legal{--fa:"\f0e3";--fa--fa:"\f0e3\f0e3"}.fa-binoculars{--fa:"\f1e5";--fa--fa:"\f1e5\f1e5"}.fa-microphone-slash{--fa:"\f131";--fa--fa:"\f131\f131"}.fa-box-tissue{--fa:"\e05b";--fa--fa:"\e05b\e05b"}.fa-motorcycle{--fa:"\f21c";--fa--fa:"\f21c\f21c"}.fa-bell-concierge,.fa-concierge-bell{--fa:"\f562";--fa--fa:"\f562\f562"}.fa-pen-ruler,.fa-pencil-ruler{--fa:"\f5ae";--fa--fa:"\f5ae\f5ae"}.fa-people-arrows,.fa-people-arrows-left-right{--fa:"\e068";--fa--fa:"\e068\e068"}.fa-mars-and-venus-burst{--fa:"\e523";--fa--fa:"\e523\e523"}.fa-caret-square-right,.fa-square-caret-right{--fa:"\f152";--fa--fa:"\f152\f152"}.fa-cut,.fa-scissors{--fa:"\f0c4";--fa--fa:"\f0c4\f0c4"}.fa-sun-plant-wilt{--fa:"\e57a";--fa--fa:"\e57a\e57a"}.fa-toilets-portable{--fa:"\e584";--fa--fa:"\e584\e584"}.fa-hockey-puck{--fa:"\f453";--fa--fa:"\f453\f453"}.fa-table{--fa:"\f0ce";--fa--fa:"\f0ce\f0ce"}.fa-magnifying-glass-arrow-right{--fa:"\e521";--fa--fa:"\e521\e521"}.fa-digital-tachograph,.fa-tachograph-digital{--fa:"\f566";--fa--fa:"\f566\f566"}.fa-users-slash{--fa:"\e073";--fa--fa:"\e073\e073"}.fa-clover{--fa:"\e139";--fa--fa:"\e139\e139"}.fa-mail-reply,.fa-reply{--fa:"\f3e5";--fa--fa:"\f3e5\f3e5"}.fa-star-and-crescent{--fa:"\f699";--fa--fa:"\f699\f699"}.fa-house-fire{--fa:"\e50c";--fa--fa:"\e50c\e50c"}.fa-minus-square,.fa-square-minus{--fa:"\f146";--fa--fa:"\f146\f146"}.fa-helicopter{--fa:"\f533";--fa--fa:"\f533\f533"}.fa-compass{--fa:"\f14e";--fa--fa:"\f14e\f14e"}.fa-caret-square-down,.fa-square-caret-down{--fa:"\f150";--fa--fa:"\f150\f150"}.fa-file-circle-question{--fa:"\e4ef";--fa--fa:"\e4ef\e4ef"}.fa-laptop-code{--fa:"\f5fc";--fa--fa:"\f5fc\f5fc"}.fa-swatchbook{--fa:"\f5c3";--fa--fa:"\f5c3\f5c3"}.fa-prescription-bottle{--fa:"\f485";--fa--fa:"\f485\f485"}.fa-bars,.fa-navicon{--fa:"\f0c9";--fa--fa:"\f0c9\f0c9"}.fa-people-group{--fa:"\e533";--fa--fa:"\e533\e533"}.fa-hourglass-3,.fa-hourglass-end{--fa:"\f253";--fa--fa:"\f253\f253"}.fa-heart-broken,.fa-heart-crack{--fa:"\f7a9";--fa--fa:"\f7a9\f7a9"}.fa-external-link-square-alt,.fa-square-up-right{--fa:"\f360";--fa--fa:"\f360\f360"}.fa-face-kiss-beam,.fa-kiss-beam{--fa:"\f597";--fa--fa:"\f597\f597"}.fa-film{--fa:"\f008";--fa--fa:"\f008\f008"}.fa-ruler-horizontal{--fa:"\f547";--fa--fa:"\f547\f547"}.fa-people-robbery{--fa:"\e536";--fa--fa:"\e536\e536"}.fa-lightbulb{--fa:"\f0eb";--fa--fa:"\f0eb\f0eb"}.fa-caret-left{--fa:"\f0d9";--fa--fa:"\f0d9\f0d9"}.fa-circle-exclamation,.fa-exclamation-circle{--fa:"\f06a";--fa--fa:"\f06a\f06a"}.fa-school-circle-xmark{--fa:"\e56d";--fa--fa:"\e56d\e56d"}.fa-arrow-right-from-bracket,.fa-sign-out{--fa:"\f08b";--fa--fa:"\f08b\f08b"}.fa-chevron-circle-down,.fa-circle-chevron-down{--fa:"\f13a";--fa--fa:"\f13a\f13a"}.fa-unlock-alt,.fa-unlock-keyhole{--fa:"\f13e";--fa--fa:"\f13e\f13e"}.fa-cloud-showers-heavy{--fa:"\f740";--fa--fa:"\f740\f740"}.fa-headphones-alt,.fa-headphones-simple{--fa:"\f58f";--fa--fa:"\f58f\f58f"}.fa-sitemap{--fa:"\f0e8";--fa--fa:"\f0e8\f0e8"}.fa-circle-dollar-to-slot,.fa-donate{--fa:"\f4b9";--fa--fa:"\f4b9\f4b9"}.fa-memory{--fa:"\f538";--fa--fa:"\f538\f538"}.fa-road-spikes{--fa:"\e568";--fa--fa:"\e568\e568"}.fa-fire-burner{--fa:"\e4f1";--fa--fa:"\e4f1\e4f1"}.fa-flag{--fa:"\f024";--fa--fa:"\f024\f024"}.fa-hanukiah{--fa:"\f6e6";--fa--fa:"\f6e6\f6e6"}.fa-feather{--fa:"\f52d";--fa--fa:"\f52d\f52d"}.fa-volume-down,.fa-volume-low{--fa:"\f027";--fa--fa:"\f027\f027"}.fa-comment-slash{--fa:"\f4b3";--fa--fa:"\f4b3\f4b3"}.fa-cloud-sun-rain{--fa:"\f743";--fa--fa:"\f743\f743"}.fa-compress{--fa:"\f066";--fa--fa:"\f066\f066"}.fa-wheat-alt,.fa-wheat-awn{--fa:"\e2cd";--fa--fa:"\e2cd\e2cd"}.fa-ankh{--fa:"\f644";--fa--fa:"\f644\f644"}.fa-hands-holding-child{--fa:"\e4fa";--fa--fa:"\e4fa\e4fa"}.fa-asterisk{--fa:"\2a";--fa--fa:"\2a\2a"}.fa-check-square,.fa-square-check{--fa:"\f14a";--fa--fa:"\f14a\f14a"}.fa-peseta-sign{--fa:"\e221";--fa--fa:"\e221\e221"}.fa-header,.fa-heading{--fa:"\f1dc";--fa--fa:"\f1dc\f1dc"}.fa-ghost{--fa:"\f6e2";--fa--fa:"\f6e2\f6e2"}.fa-list,.fa-list-squares{--fa:"\f03a";--fa--fa:"\f03a\f03a"}.fa-phone-square-alt,.fa-square-phone-flip{--fa:"\f87b";--fa--fa:"\f87b\f87b"}.fa-cart-plus{--fa:"\f217";--fa--fa:"\f217\f217"}.fa-gamepad{--fa:"\f11b";--fa--fa:"\f11b\f11b"}.fa-circle-dot,.fa-dot-circle{--fa:"\f192";--fa--fa:"\f192\f192"}.fa-dizzy,.fa-face-dizzy{--fa:"\f567";--fa--fa:"\f567\f567"}.fa-egg{--fa:"\f7fb";--fa--fa:"\f7fb\f7fb"}.fa-house-medical-circle-xmark{--fa:"\e513";--fa--fa:"\e513\e513"}.fa-campground{--fa:"\f6bb";--fa--fa:"\f6bb\f6bb"}.fa-folder-plus{--fa:"\f65e";--fa--fa:"\f65e\f65e"}.fa-futbol,.fa-futbol-ball,.fa-soccer-ball{--fa:"\f1e3";--fa--fa:"\f1e3\f1e3"}.fa-paint-brush,.fa-paintbrush{--fa:"\f1fc";--fa--fa:"\f1fc\f1fc"}.fa-lock{--fa:"\f023";--fa--fa:"\f023\f023"}.fa-gas-pump{--fa:"\f52f";--fa--fa:"\f52f\f52f"}.fa-hot-tub,.fa-hot-tub-person{--fa:"\f593";--fa--fa:"\f593\f593"}.fa-map-location,.fa-map-marked{--fa:"\f59f";--fa--fa:"\f59f\f59f"}.fa-house-flood-water{--fa:"\e50e";--fa--fa:"\e50e\e50e"}.fa-tree{--fa:"\f1bb";--fa--fa:"\f1bb\f1bb"}.fa-bridge-lock{--fa:"\e4cc";--fa--fa:"\e4cc\e4cc"}.fa-sack-dollar{--fa:"\f81d";--fa--fa:"\f81d\f81d"}.fa-edit,.fa-pen-to-square{--fa:"\f044";--fa--fa:"\f044\f044"}.fa-car-side{--fa:"\f5e4";--fa--fa:"\f5e4\f5e4"}.fa-share-alt,.fa-share-nodes{--fa:"\f1e0";--fa--fa:"\f1e0\f1e0"}.fa-heart-circle-minus{--fa:"\e4ff";--fa--fa:"\e4ff\e4ff"}.fa-hourglass-2,.fa-hourglass-half{--fa:"\f252";--fa--fa:"\f252\f252"}.fa-microscope{--fa:"\f610";--fa--fa:"\f610\f610"}.fa-sink{--fa:"\e06d";--fa--fa:"\e06d\e06d"}.fa-bag-shopping,.fa-shopping-bag{--fa:"\f290";--fa--fa:"\f290\f290"}.fa-arrow-down-z-a,.fa-sort-alpha-desc,.fa-sort-alpha-down-alt{--fa:"\f881";--fa--fa:"\f881\f881"}.fa-mitten{--fa:"\f7b5";--fa--fa:"\f7b5\f7b5"}.fa-person-rays{--fa:"\e54d";--fa--fa:"\e54d\e54d"}.fa-users{--fa:"\f0c0";--fa--fa:"\f0c0\f0c0"}.fa-eye-slash{--fa:"\f070";--fa--fa:"\f070\f070"}.fa-flask-vial{--fa:"\e4f3";--fa--fa:"\e4f3\e4f3"}.fa-hand,.fa-hand-paper{--fa:"\f256";--fa--fa:"\f256\f256"}.fa-om{--fa:"\f679";--fa--fa:"\f679\f679"}.fa-worm{--fa:"\e599";--fa--fa:"\e599\e599"}.fa-house-circle-xmark{--fa:"\e50b";--fa--fa:"\e50b\e50b"}.fa-plug{--fa:"\f1e6";--fa--fa:"\f1e6\f1e6"}.fa-chevron-up{--fa:"\f077";--fa--fa:"\f077\f077"}.fa-hand-spock{--fa:"\f259";--fa--fa:"\f259\f259"}.fa-stopwatch{--fa:"\f2f2";--fa--fa:"\f2f2\f2f2"}.fa-face-kiss,.fa-kiss{--fa:"\f596";--fa--fa:"\f596\f596"}.fa-bridge-circle-xmark{--fa:"\e4cb";--fa--fa:"\e4cb\e4cb"}.fa-face-grin-tongue,.fa-grin-tongue{--fa:"\f589";--fa--fa:"\f589\f589"}.fa-chess-bishop{--fa:"\f43a";--fa--fa:"\f43a\f43a"}.fa-face-grin-wink,.fa-grin-wink{--fa:"\f58c";--fa--fa:"\f58c\f58c"}.fa-deaf,.fa-deafness,.fa-ear-deaf,.fa-hard-of-hearing{--fa:"\f2a4";--fa--fa:"\f2a4\f2a4"}.fa-road-circle-check{--fa:"\e564";--fa--fa:"\e564\e564"}.fa-dice-five{--fa:"\f523";--fa--fa:"\f523\f523"}.fa-rss-square,.fa-square-rss{--fa:"\f143";--fa--fa:"\f143\f143"}.fa-land-mine-on{--fa:"\e51b";--fa--fa:"\e51b\e51b"}.fa-i-cursor{--fa:"\f246";--fa--fa:"\f246\f246"}.fa-stamp{--fa:"\f5bf";--fa--fa:"\f5bf\f5bf"}.fa-stairs{--fa:"\e289";--fa--fa:"\e289\e289"}.fa-i{--fa:"\49";--fa--fa:"\49\49"}.fa-hryvnia,.fa-hryvnia-sign{--fa:"\f6f2";--fa--fa:"\f6f2\f6f2"}.fa-pills{--fa:"\f484";--fa--fa:"\f484\f484"}.fa-face-grin-wide,.fa-grin-alt{--fa:"\f581";--fa--fa:"\f581\f581"}.fa-tooth{--fa:"\f5c9";--fa--fa:"\f5c9\f5c9"}.fa-v{--fa:"\56";--fa--fa:"\56\56"}.fa-bangladeshi-taka-sign{--fa:"\e2e6";--fa--fa:"\e2e6\e2e6"}.fa-bicycle{--fa:"\f206";--fa--fa:"\f206\f206"}.fa-rod-asclepius,.fa-rod-snake,.fa-staff-aesculapius,.fa-staff-snake{--fa:"\e579";--fa--fa:"\e579\e579"}.fa-head-side-cough-slash{--fa:"\e062";--fa--fa:"\e062\e062"}.fa-ambulance,.fa-truck-medical{--fa:"\f0f9";--fa--fa:"\f0f9\f0f9"}.fa-wheat-awn-circle-exclamation{--fa:"\e598";--fa--fa:"\e598\e598"}.fa-snowman{--fa:"\f7d0";--fa--fa:"\f7d0\f7d0"}.fa-mortar-pestle{--fa:"\f5a7";--fa--fa:"\f5a7\f5a7"}.fa-road-barrier{--fa:"\e562";--fa--fa:"\e562\e562"}.fa-school{--fa:"\f549";--fa--fa:"\f549\f549"}.fa-igloo{--fa:"\f7ae";--fa--fa:"\f7ae\f7ae"}.fa-joint{--fa:"\f595";--fa--fa:"\f595\f595"}.fa-angle-right{--fa:"\f105";--fa--fa:"\f105\f105"}.fa-horse{--fa:"\f6f0";--fa--fa:"\f6f0\f6f0"}.fa-q{--fa:"\51";--fa--fa:"\51\51"}.fa-g{--fa:"\47";--fa--fa:"\47\47"}.fa-notes-medical{--fa:"\f481";--fa--fa:"\f481\f481"}.fa-temperature-2,.fa-temperature-half,.fa-thermometer-2,.fa-thermometer-half{--fa:"\f2c9";--fa--fa:"\f2c9\f2c9"}.fa-dong-sign{--fa:"\e169";--fa--fa:"\e169\e169"}.fa-capsules{--fa:"\f46b";--fa--fa:"\f46b\f46b"}.fa-poo-bolt,.fa-poo-storm{--fa:"\f75a";--fa--fa:"\f75a\f75a"}.fa-face-frown-open,.fa-frown-open{--fa:"\f57a";--fa--fa:"\f57a\f57a"}.fa-hand-point-up{--fa:"\f0a6";--fa--fa:"\f0a6\f0a6"}.fa-money-bill{--fa:"\f0d6";--fa--fa:"\f0d6\f0d6"}.fa-bookmark{--fa:"\f02e";--fa--fa:"\f02e\f02e"}.fa-align-justify{--fa:"\f039";--fa--fa:"\f039\f039"}.fa-umbrella-beach{--fa:"\f5ca";--fa--fa:"\f5ca\f5ca"}.fa-helmet-un{--fa:"\e503";--fa--fa:"\e503\e503"}.fa-bullseye{--fa:"\f140";--fa--fa:"\f140\f140"}.fa-bacon{--fa:"\f7e5";--fa--fa:"\f7e5\f7e5"}.fa-hand-point-down{--fa:"\f0a7";--fa--fa:"\f0a7\f0a7"}.fa-arrow-up-from-bracket{--fa:"\e09a";--fa--fa:"\e09a\e09a"}.fa-folder,.fa-folder-blank{--fa:"\f07b";--fa--fa:"\f07b\f07b"}.fa-file-medical-alt,.fa-file-waveform{--fa:"\f478";--fa--fa:"\f478\f478"}.fa-radiation{--fa:"\f7b9";--fa--fa:"\f7b9\f7b9"}.fa-chart-simple{--fa:"\e473";--fa--fa:"\e473\e473"}.fa-mars-stroke{--fa:"\f229";--fa--fa:"\f229\f229"}.fa-vial{--fa:"\f492";--fa--fa:"\f492\f492"}.fa-dashboard,.fa-gauge,.fa-gauge-med,.fa-tachometer-alt-average{--fa:"\f624";--fa--fa:"\f624\f624"}.fa-magic-wand-sparkles,.fa-wand-magic-sparkles{--fa:"\e2ca";--fa--fa:"\e2ca\e2ca"}.fa-e{--fa:"\45";--fa--fa:"\45\45"}.fa-pen-alt,.fa-pen-clip{--fa:"\f305";--fa--fa:"\f305\f305"}.fa-bridge-circle-exclamation{--fa:"\e4ca";--fa--fa:"\e4ca\e4ca"}.fa-user{--fa:"\f007";--fa--fa:"\f007\f007"}.fa-school-circle-check{--fa:"\e56b";--fa--fa:"\e56b\e56b"}.fa-dumpster{--fa:"\f793";--fa--fa:"\f793\f793"}.fa-shuttle-van,.fa-van-shuttle{--fa:"\f5b6";--fa--fa:"\f5b6\f5b6"}.fa-building-user{--fa:"\e4da";--fa--fa:"\e4da\e4da"}.fa-caret-square-left,.fa-square-caret-left{--fa:"\f191";--fa--fa:"\f191\f191"}.fa-highlighter{--fa:"\f591";--fa--fa:"\f591\f591"}.fa-key{--fa:"\f084";--fa--fa:"\f084\f084"}.fa-bullhorn{--fa:"\f0a1";--fa--fa:"\f0a1\f0a1"}.fa-globe{--fa:"\f0ac";--fa--fa:"\f0ac\f0ac"}.fa-synagogue{--fa:"\f69b";--fa--fa:"\f69b\f69b"}.fa-person-half-dress{--fa:"\e548";--fa--fa:"\e548\e548"}.fa-road-bridge{--fa:"\e563";--fa--fa:"\e563\e563"}.fa-location-arrow{--fa:"\f124";--fa--fa:"\f124\f124"}.fa-c{--fa:"\43";--fa--fa:"\43\43"}.fa-tablet-button{--fa:"\f10a";--fa--fa:"\f10a\f10a"}.fa-building-lock{--fa:"\e4d6";--fa--fa:"\e4d6\e4d6"}.fa-pizza-slice{--fa:"\f818";--fa--fa:"\f818\f818"}.fa-money-bill-wave{--fa:"\f53a";--fa--fa:"\f53a\f53a"}.fa-area-chart,.fa-chart-area{--fa:"\f1fe";--fa--fa:"\f1fe\f1fe"}.fa-house-flag{--fa:"\e50d";--fa--fa:"\e50d\e50d"}.fa-person-circle-minus{--fa:"\e540";--fa--fa:"\e540\e540"}.fa-ban,.fa-cancel{--fa:"\f05e";--fa--fa:"\f05e\f05e"}.fa-camera-rotate{--fa:"\e0d8";--fa--fa:"\e0d8\e0d8"}.fa-air-freshener,.fa-spray-can-sparkles{--fa:"\f5d0";--fa--fa:"\f5d0\f5d0"}.fa-star{--fa:"\f005";--fa--fa:"\f005\f005"}.fa-repeat{--fa:"\f363";--fa--fa:"\f363\f363"}.fa-cross{--fa:"\f654";--fa--fa:"\f654\f654"}.fa-box{--fa:"\f466";--fa--fa:"\f466\f466"}.fa-venus-mars{--fa:"\f228";--fa--fa:"\f228\f228"}.fa-arrow-pointer,.fa-mouse-pointer{--fa:"\f245";--fa--fa:"\f245\f245"}.fa-expand-arrows-alt,.fa-maximize{--fa:"\f31e";--fa--fa:"\f31e\f31e"}.fa-charging-station{--fa:"\f5e7";--fa--fa:"\f5e7\f5e7"}.fa-shapes,.fa-triangle-circle-square{--fa:"\f61f";--fa--fa:"\f61f\f61f"}.fa-random,.fa-shuffle{--fa:"\f074";--fa--fa:"\f074\f074"}.fa-person-running,.fa-running{--fa:"\f70c";--fa--fa:"\f70c\f70c"}.fa-mobile-retro{--fa:"\e527";--fa--fa:"\e527\e527"}.fa-grip-lines-vertical{--fa:"\f7a5";--fa--fa:"\f7a5\f7a5"}.fa-spider{--fa:"\f717";--fa--fa:"\f717\f717"}.fa-hands-bound{--fa:"\e4f9";--fa--fa:"\e4f9\e4f9"}.fa-file-invoice-dollar{--fa:"\f571";--fa--fa:"\f571\f571"}.fa-plane-circle-exclamation{--fa:"\e556";--fa--fa:"\e556\e556"}.fa-x-ray{--fa:"\f497";--fa--fa:"\f497\f497"}.fa-spell-check{--fa:"\f891";--fa--fa:"\f891\f891"}.fa-slash{--fa:"\f715";--fa--fa:"\f715\f715"}.fa-computer-mouse,.fa-mouse{--fa:"\f8cc";--fa--fa:"\f8cc\f8cc"}.fa-arrow-right-to-bracket,.fa-sign-in{--fa:"\f090";--fa--fa:"\f090\f090"}.fa-shop-slash,.fa-store-alt-slash{--fa:"\e070";--fa--fa:"\e070\e070"}.fa-server{--fa:"\f233";--fa--fa:"\f233\f233"}.fa-virus-covid-slash{--fa:"\e4a9";--fa--fa:"\e4a9\e4a9"}.fa-shop-lock{--fa:"\e4a5";--fa--fa:"\e4a5\e4a5"}.fa-hourglass-1,.fa-hourglass-start{--fa:"\f251";--fa--fa:"\f251\f251"}.fa-blender-phone{--fa:"\f6b6";--fa--fa:"\f6b6\f6b6"}.fa-building-wheat{--fa:"\e4db";--fa--fa:"\e4db\e4db"}.fa-person-breastfeeding{--fa:"\e53a";--fa--fa:"\e53a\e53a"}.fa-right-to-bracket,.fa-sign-in-alt{--fa:"\f2f6";--fa--fa:"\f2f6\f2f6"}.fa-venus{--fa:"\f221";--fa--fa:"\f221\f221"}.fa-passport{--fa:"\f5ab";--fa--fa:"\f5ab\f5ab"}.fa-thumb-tack-slash,.fa-thumbtack-slash{--fa:"\e68f";--fa--fa:"\e68f\e68f"}.fa-heart-pulse,.fa-heartbeat{--fa:"\f21e";--fa--fa:"\f21e\f21e"}.fa-people-carry,.fa-people-carry-box{--fa:"\f4ce";--fa--fa:"\f4ce\f4ce"}.fa-temperature-high{--fa:"\f769";--fa--fa:"\f769\f769"}.fa-microchip{--fa:"\f2db";--fa--fa:"\f2db\f2db"}.fa-crown{--fa:"\f521";--fa--fa:"\f521\f521"}.fa-weight-hanging{--fa:"\f5cd";--fa--fa:"\f5cd\f5cd"}.fa-xmarks-lines{--fa:"\e59a";--fa--fa:"\e59a\e59a"}.fa-file-prescription{--fa:"\f572";--fa--fa:"\f572\f572"}.fa-weight,.fa-weight-scale{--fa:"\f496";--fa--fa:"\f496\f496"}.fa-user-friends,.fa-user-group{--fa:"\f500";--fa--fa:"\f500\f500"}.fa-arrow-up-a-z,.fa-sort-alpha-up{--fa:"\f15e";--fa--fa:"\f15e\f15e"}.fa-chess-knight{--fa:"\f441";--fa--fa:"\f441\f441"}.fa-face-laugh-squint,.fa-laugh-squint{--fa:"\f59b";--fa--fa:"\f59b\f59b"}.fa-wheelchair{--fa:"\f193";--fa--fa:"\f193\f193"}.fa-arrow-circle-up,.fa-circle-arrow-up{--fa:"\f0aa";--fa--fa:"\f0aa\f0aa"}.fa-toggle-on{--fa:"\f205";--fa--fa:"\f205\f205"}.fa-person-walking,.fa-walking{--fa:"\f554";--fa--fa:"\f554\f554"}.fa-l{--fa:"\4c";--fa--fa:"\4c\4c"}.fa-fire{--fa:"\f06d";--fa--fa:"\f06d\f06d"}.fa-bed-pulse,.fa-procedures{--fa:"\f487";--fa--fa:"\f487\f487"}.fa-shuttle-space,.fa-space-shuttle{--fa:"\f197";--fa--fa:"\f197\f197"}.fa-face-laugh,.fa-laugh{--fa:"\f599";--fa--fa:"\f599\f599"}.fa-folder-open{--fa:"\f07c";--fa--fa:"\f07c\f07c"}.fa-heart-circle-plus{--fa:"\e500";--fa--fa:"\e500\e500"}.fa-code-fork{--fa:"\e13b";--fa--fa:"\e13b\e13b"}.fa-city{--fa:"\f64f";--fa--fa:"\f64f\f64f"}.fa-microphone-alt,.fa-microphone-lines{--fa:"\f3c9";--fa--fa:"\f3c9\f3c9"}.fa-pepper-hot{--fa:"\f816";--fa--fa:"\f816\f816"}.fa-unlock{--fa:"\f09c";--fa--fa:"\f09c\f09c"}.fa-colon-sign{--fa:"\e140";--fa--fa:"\e140\e140"}.fa-headset{--fa:"\f590";--fa--fa:"\f590\f590"}.fa-store-slash{--fa:"\e071";--fa--fa:"\e071\e071"}.fa-road-circle-xmark{--fa:"\e566";--fa--fa:"\e566\e566"}.fa-user-minus{--fa:"\f503";--fa--fa:"\f503\f503"}.fa-mars-stroke-up,.fa-mars-stroke-v{--fa:"\f22a";--fa--fa:"\f22a\f22a"}.fa-champagne-glasses,.fa-glass-cheers{--fa:"\f79f";--fa--fa:"\f79f\f79f"}.fa-clipboard{--fa:"\f328";--fa--fa:"\f328\f328"}.fa-house-circle-exclamation{--fa:"\e50a";--fa--fa:"\e50a\e50a"}.fa-file-arrow-up,.fa-file-upload{--fa:"\f574";--fa--fa:"\f574\f574"}.fa-wifi,.fa-wifi-3,.fa-wifi-strong{--fa:"\f1eb";--fa--fa:"\f1eb\f1eb"}.fa-bath,.fa-bathtub{--fa:"\f2cd";--fa--fa:"\f2cd\f2cd"}.fa-underline{--fa:"\f0cd";--fa--fa:"\f0cd\f0cd"}.fa-user-edit,.fa-user-pen{--fa:"\f4ff";--fa--fa:"\f4ff\f4ff"}.fa-signature{--fa:"\f5b7";--fa--fa:"\f5b7\f5b7"}.fa-stroopwafel{--fa:"\f551";--fa--fa:"\f551\f551"}.fa-bold{--fa:"\f032";--fa--fa:"\f032\f032"}.fa-anchor-lock{--fa:"\e4ad";--fa--fa:"\e4ad\e4ad"}.fa-building-ngo{--fa:"\e4d7";--fa--fa:"\e4d7\e4d7"}.fa-manat-sign{--fa:"\e1d5";--fa--fa:"\e1d5\e1d5"}.fa-not-equal{--fa:"\f53e";--fa--fa:"\f53e\f53e"}.fa-border-style,.fa-border-top-left{--fa:"\f853";--fa--fa:"\f853\f853"}.fa-map-location-dot,.fa-map-marked-alt{--fa:"\f5a0";--fa--fa:"\f5a0\f5a0"}.fa-jedi{--fa:"\f669";--fa--fa:"\f669\f669"}.fa-poll,.fa-square-poll-vertical{--fa:"\f681";--fa--fa:"\f681\f681"}.fa-mug-hot{--fa:"\f7b6";--fa--fa:"\f7b6\f7b6"}.fa-battery-car,.fa-car-battery{--fa:"\f5df";--fa--fa:"\f5df\f5df"}.fa-gift{--fa:"\f06b";--fa--fa:"\f06b\f06b"}.fa-dice-two{--fa:"\f528";--fa--fa:"\f528\f528"}.fa-chess-queen{--fa:"\f445";--fa--fa:"\f445\f445"}.fa-glasses{--fa:"\f530";--fa--fa:"\f530\f530"}.fa-chess-board{--fa:"\f43c";--fa--fa:"\f43c\f43c"}.fa-building-circle-check{--fa:"\e4d2";--fa--fa:"\e4d2\e4d2"}.fa-person-chalkboard{--fa:"\e53d";--fa--fa:"\e53d\e53d"}.fa-mars-stroke-h,.fa-mars-stroke-right{--fa:"\f22b";--fa--fa:"\f22b\f22b"}.fa-hand-back-fist,.fa-hand-rock{--fa:"\f255";--fa--fa:"\f255\f255"}.fa-caret-square-up,.fa-square-caret-up{--fa:"\f151";--fa--fa:"\f151\f151"}.fa-cloud-showers-water{--fa:"\e4e4";--fa--fa:"\e4e4\e4e4"}.fa-bar-chart,.fa-chart-bar{--fa:"\f080";--fa--fa:"\f080\f080"}.fa-hands-bubbles,.fa-hands-wash{--fa:"\e05e";--fa--fa:"\e05e\e05e"}.fa-less-than-equal{--fa:"\f537";--fa--fa:"\f537\f537"}.fa-train{--fa:"\f238";--fa--fa:"\f238\f238"}.fa-eye-low-vision,.fa-low-vision{--fa:"\f2a8";--fa--fa:"\f2a8\f2a8"}.fa-crow{--fa:"\f520";--fa--fa:"\f520\f520"}.fa-sailboat{--fa:"\e445";--fa--fa:"\e445\e445"}.fa-window-restore{--fa:"\f2d2";--fa--fa:"\f2d2\f2d2"}.fa-plus-square,.fa-square-plus{--fa:"\f0fe";--fa--fa:"\f0fe\f0fe"}.fa-torii-gate{--fa:"\f6a1";--fa--fa:"\f6a1\f6a1"}.fa-frog{--fa:"\f52e";--fa--fa:"\f52e\f52e"}.fa-bucket{--fa:"\e4cf";--fa--fa:"\e4cf\e4cf"}.fa-image{--fa:"\f03e";--fa--fa:"\f03e\f03e"}.fa-microphone{--fa:"\f130";--fa--fa:"\f130\f130"}.fa-cow{--fa:"\f6c8";--fa--fa:"\f6c8\f6c8"}.fa-caret-up{--fa:"\f0d8";--fa--fa:"\f0d8\f0d8"}.fa-screwdriver{--fa:"\f54a";--fa--fa:"\f54a\f54a"}.fa-folder-closed{--fa:"\e185";--fa--fa:"\e185\e185"}.fa-house-tsunami{--fa:"\e515";--fa--fa:"\e515\e515"}.fa-square-nfi{--fa:"\e576";--fa--fa:"\e576\e576"}.fa-arrow-up-from-ground-water{--fa:"\e4b5";--fa--fa:"\e4b5\e4b5"}.fa-glass-martini-alt,.fa-martini-glass{--fa:"\f57b";--fa--fa:"\f57b\f57b"}.fa-square-binary{--fa:"\e69b";--fa--fa:"\e69b\e69b"}.fa-rotate-back,.fa-rotate-backward,.fa-rotate-left,.fa-undo-alt{--fa:"\f2ea";--fa--fa:"\f2ea\f2ea"}.fa-columns,.fa-table-columns{--fa:"\f0db";--fa--fa:"\f0db\f0db"}.fa-lemon{--fa:"\f094";--fa--fa:"\f094\f094"}.fa-head-side-mask{--fa:"\e063";--fa--fa:"\e063\e063"}.fa-handshake{--fa:"\f2b5";--fa--fa:"\f2b5\f2b5"}.fa-gem{--fa:"\f3a5";--fa--fa:"\f3a5\f3a5"}.fa-dolly,.fa-dolly-box{--fa:"\f472";--fa--fa:"\f472\f472"}.fa-smoking{--fa:"\f48d";--fa--fa:"\f48d\f48d"}.fa-compress-arrows-alt,.fa-minimize{--fa:"\f78c";--fa--fa:"\f78c\f78c"}.fa-monument{--fa:"\f5a6";--fa--fa:"\f5a6\f5a6"}.fa-snowplow{--fa:"\f7d2";--fa--fa:"\f7d2\f7d2"}.fa-angle-double-right,.fa-angles-right{--fa:"\f101";--fa--fa:"\f101\f101"}.fa-cannabis{--fa:"\f55f";--fa--fa:"\f55f\f55f"}.fa-circle-play,.fa-play-circle{--fa:"\f144";--fa--fa:"\f144\f144"}.fa-tablets{--fa:"\f490";--fa--fa:"\f490\f490"}.fa-ethernet{--fa:"\f796";--fa--fa:"\f796\f796"}.fa-eur,.fa-euro,.fa-euro-sign{--fa:"\f153";--fa--fa:"\f153\f153"}.fa-chair{--fa:"\f6c0";--fa--fa:"\f6c0\f6c0"}.fa-check-circle,.fa-circle-check{--fa:"\f058";--fa--fa:"\f058\f058"}.fa-circle-stop,.fa-stop-circle{--fa:"\f28d";--fa--fa:"\f28d\f28d"}.fa-compass-drafting,.fa-drafting-compass{--fa:"\f568";--fa--fa:"\f568\f568"}.fa-plate-wheat{--fa:"\e55a";--fa--fa:"\e55a\e55a"}.fa-icicles{--fa:"\f7ad";--fa--fa:"\f7ad\f7ad"}.fa-person-shelter{--fa:"\e54f";--fa--fa:"\e54f\e54f"}.fa-neuter{--fa:"\f22c";--fa--fa:"\f22c\f22c"}.fa-id-badge{--fa:"\f2c1";--fa--fa:"\f2c1\f2c1"}.fa-marker{--fa:"\f5a1";--fa--fa:"\f5a1\f5a1"}.fa-face-laugh-beam,.fa-laugh-beam{--fa:"\f59a";--fa--fa:"\f59a\f59a"}.fa-helicopter-symbol{--fa:"\e502";--fa--fa:"\e502\e502"}.fa-universal-access{--fa:"\f29a";--fa--fa:"\f29a\f29a"}.fa-chevron-circle-up,.fa-circle-chevron-up{--fa:"\f139";--fa--fa:"\f139\f139"}.fa-lari-sign{--fa:"\e1c8";--fa--fa:"\e1c8\e1c8"}.fa-volcano{--fa:"\f770";--fa--fa:"\f770\f770"}.fa-person-walking-dashed-line-arrow-right{--fa:"\e553";--fa--fa:"\e553\e553"}.fa-gbp,.fa-pound-sign,.fa-sterling-sign{--fa:"\f154";--fa--fa:"\f154\f154"}.fa-viruses{--fa:"\e076";--fa--fa:"\e076\e076"}.fa-square-person-confined{--fa:"\e577";--fa--fa:"\e577\e577"}.fa-user-tie{--fa:"\f508";--fa--fa:"\f508\f508"}.fa-arrow-down-long,.fa-long-arrow-down{--fa:"\f175";--fa--fa:"\f175\f175"}.fa-tent-arrow-down-to-line{--fa:"\e57e";--fa--fa:"\e57e\e57e"}.fa-certificate{--fa:"\f0a3";--fa--fa:"\f0a3\f0a3"}.fa-mail-reply-all,.fa-reply-all{--fa:"\f122";--fa--fa:"\f122\f122"}.fa-suitcase{--fa:"\f0f2";--fa--fa:"\f0f2\f0f2"}.fa-person-skating,.fa-skating{--fa:"\f7c5";--fa--fa:"\f7c5\f7c5"}.fa-filter-circle-dollar,.fa-funnel-dollar{--fa:"\f662";--fa--fa:"\f662\f662"}.fa-camera-retro{--fa:"\f083";--fa--fa:"\f083\f083"}.fa-arrow-circle-down,.fa-circle-arrow-down{--fa:"\f0ab";--fa--fa:"\f0ab\f0ab"}.fa-arrow-right-to-file,.fa-file-import{--fa:"\f56f";--fa--fa:"\f56f\f56f"}.fa-external-link-square,.fa-square-arrow-up-right{--fa:"\f14c";--fa--fa:"\f14c\f14c"}.fa-box-open{--fa:"\f49e";--fa--fa:"\f49e\f49e"}.fa-scroll{--fa:"\f70e";--fa--fa:"\f70e\f70e"}.fa-spa{--fa:"\f5bb";--fa--fa:"\f5bb\f5bb"}.fa-location-pin-lock{--fa:"\e51f";--fa--fa:"\e51f\e51f"}.fa-pause{--fa:"\f04c";--fa--fa:"\f04c\f04c"}.fa-hill-avalanche{--fa:"\e507";--fa--fa:"\e507\e507"}.fa-temperature-0,.fa-temperature-empty,.fa-thermometer-0,.fa-thermometer-empty{--fa:"\f2cb";--fa--fa:"\f2cb\f2cb"}.fa-bomb{--fa:"\f1e2";--fa--fa:"\f1e2\f1e2"}.fa-registered{--fa:"\f25d";--fa--fa:"\f25d\f25d"}.fa-address-card,.fa-contact-card,.fa-vcard{--fa:"\f2bb";--fa--fa:"\f2bb\f2bb"}.fa-balance-scale-right,.fa-scale-unbalanced-flip{--fa:"\f516";--fa--fa:"\f516\f516"}.fa-subscript{--fa:"\f12c";--fa--fa:"\f12c\f12c"}.fa-diamond-turn-right,.fa-directions{--fa:"\f5eb";--fa--fa:"\f5eb\f5eb"}.fa-burst{--fa:"\e4dc";--fa--fa:"\e4dc\e4dc"}.fa-house-laptop,.fa-laptop-house{--fa:"\e066";--fa--fa:"\e066\e066"}.fa-face-tired,.fa-tired{--fa:"\f5c8";--fa--fa:"\f5c8\f5c8"}.fa-money-bills{--fa:"\e1f3";--fa--fa:"\e1f3\e1f3"}.fa-smog{--fa:"\f75f";--fa--fa:"\f75f\f75f"}.fa-crutch{--fa:"\f7f7";--fa--fa:"\f7f7\f7f7"}.fa-cloud-arrow-up,.fa-cloud-upload,.fa-cloud-upload-alt{--fa:"\f0ee";--fa--fa:"\f0ee\f0ee"}.fa-palette{--fa:"\f53f";--fa--fa:"\f53f\f53f"}.fa-arrows-turn-right{--fa:"\e4c0";--fa--fa:"\e4c0\e4c0"}.fa-vest{--fa:"\e085";--fa--fa:"\e085\e085"}.fa-ferry{--fa:"\e4ea";--fa--fa:"\e4ea\e4ea"}.fa-arrows-down-to-people{--fa:"\e4b9";--fa--fa:"\e4b9\e4b9"}.fa-seedling,.fa-sprout{--fa:"\f4d8";--fa--fa:"\f4d8\f4d8"}.fa-arrows-alt-h,.fa-left-right{--fa:"\f337";--fa--fa:"\f337\f337"}.fa-boxes-packing{--fa:"\e4c7";--fa--fa:"\e4c7\e4c7"}.fa-arrow-circle-left,.fa-circle-arrow-left{--fa:"\f0a8";--fa--fa:"\f0a8\f0a8"}.fa-group-arrows-rotate{--fa:"\e4f6";--fa--fa:"\e4f6\e4f6"}.fa-bowl-food{--fa:"\e4c6";--fa--fa:"\e4c6\e4c6"}.fa-candy-cane{--fa:"\f786";--fa--fa:"\f786\f786"}.fa-arrow-down-wide-short,.fa-sort-amount-asc,.fa-sort-amount-down{--fa:"\f160";--fa--fa:"\f160\f160"}.fa-cloud-bolt,.fa-thunderstorm{--fa:"\f76c";--fa--fa:"\f76c\f76c"}.fa-remove-format,.fa-text-slash{--fa:"\f87d";--fa--fa:"\f87d\f87d"}.fa-face-smile-wink,.fa-smile-wink{--fa:"\f4da";--fa--fa:"\f4da\f4da"}.fa-file-word{--fa:"\f1c2";--fa--fa:"\f1c2\f1c2"}.fa-file-powerpoint{--fa:"\f1c4";--fa--fa:"\f1c4\f1c4"}.fa-arrows-h,.fa-arrows-left-right{--fa:"\f07e";--fa--fa:"\f07e\f07e"}.fa-house-lock{--fa:"\e510";--fa--fa:"\e510\e510"}.fa-cloud-arrow-down,.fa-cloud-download,.fa-cloud-download-alt{--fa:"\f0ed";--fa--fa:"\f0ed\f0ed"}.fa-children{--fa:"\e4e1";--fa--fa:"\e4e1\e4e1"}.fa-blackboard,.fa-chalkboard{--fa:"\f51b";--fa--fa:"\f51b\f51b"}.fa-user-alt-slash,.fa-user-large-slash{--fa:"\f4fa";--fa--fa:"\f4fa\f4fa"}.fa-envelope-open{--fa:"\f2b6";--fa--fa:"\f2b6\f2b6"}.fa-handshake-alt-slash,.fa-handshake-simple-slash{--fa:"\e05f";--fa--fa:"\e05f\e05f"}.fa-mattress-pillow{--fa:"\e525";--fa--fa:"\e525\e525"}.fa-guarani-sign{--fa:"\e19a";--fa--fa:"\e19a\e19a"}.fa-arrows-rotate,.fa-refresh,.fa-sync{--fa:"\f021";--fa--fa:"\f021\f021"}.fa-fire-extinguisher{--fa:"\f134";--fa--fa:"\f134\f134"}.fa-cruzeiro-sign{--fa:"\e152";--fa--fa:"\e152\e152"}.fa-greater-than-equal{--fa:"\f532";--fa--fa:"\f532\f532"}.fa-shield-alt,.fa-shield-halved{--fa:"\f3ed";--fa--fa:"\f3ed\f3ed"}.fa-atlas,.fa-book-atlas{--fa:"\f558";--fa--fa:"\f558\f558"}.fa-virus{--fa:"\e074";--fa--fa:"\e074\e074"}.fa-envelope-circle-check{--fa:"\e4e8";--fa--fa:"\e4e8\e4e8"}.fa-layer-group{--fa:"\f5fd";--fa--fa:"\f5fd\f5fd"}.fa-arrows-to-dot{--fa:"\e4be";--fa--fa:"\e4be\e4be"}.fa-archway{--fa:"\f557";--fa--fa:"\f557\f557"}.fa-heart-circle-check{--fa:"\e4fd";--fa--fa:"\e4fd\e4fd"}.fa-house-chimney-crack,.fa-house-damage{--fa:"\f6f1";--fa--fa:"\f6f1\f6f1"}.fa-file-archive,.fa-file-zipper{--fa:"\f1c6";--fa--fa:"\f1c6\f1c6"}.fa-square{--fa:"\f0c8";--fa--fa:"\f0c8\f0c8"}.fa-glass-martini,.fa-martini-glass-empty{--fa:"\f000";--fa--fa:"\f000\f000"}.fa-couch{--fa:"\f4b8";--fa--fa:"\f4b8\f4b8"}.fa-cedi-sign{--fa:"\e0df";--fa--fa:"\e0df\e0df"}.fa-italic{--fa:"\f033";--fa--fa:"\f033\f033"}.fa-table-cells-column-lock{--fa:"\e678";--fa--fa:"\e678\e678"}.fa-church{--fa:"\f51d";--fa--fa:"\f51d\f51d"}.fa-comments-dollar{--fa:"\f653";--fa--fa:"\f653\f653"}.fa-democrat{--fa:"\f747";--fa--fa:"\f747\f747"}.fa-z{--fa:"\5a";--fa--fa:"\5a\5a"}.fa-person-skiing,.fa-skiing{--fa:"\f7c9";--fa--fa:"\f7c9\f7c9"}.fa-road-lock{--fa:"\e567";--fa--fa:"\e567\e567"}.fa-a{--fa:"\41";--fa--fa:"\41\41"}.fa-temperature-arrow-down,.fa-temperature-down{--fa:"\e03f";--fa--fa:"\e03f\e03f"}.fa-feather-alt,.fa-feather-pointed{--fa:"\f56b";--fa--fa:"\f56b\f56b"}.fa-p{--fa:"\50";--fa--fa:"\50\50"}.fa-snowflake{--fa:"\f2dc";--fa--fa:"\f2dc\f2dc"}.fa-newspaper{--fa:"\f1ea";--fa--fa:"\f1ea\f1ea"}.fa-ad,.fa-rectangle-ad{--fa:"\f641";--fa--fa:"\f641\f641"}.fa-arrow-circle-right,.fa-circle-arrow-right{--fa:"\f0a9";--fa--fa:"\f0a9\f0a9"}.fa-filter-circle-xmark{--fa:"\e17b";--fa--fa:"\e17b\e17b"}.fa-locust{--fa:"\e520";--fa--fa:"\e520\e520"}.fa-sort,.fa-unsorted{--fa:"\f0dc";--fa--fa:"\f0dc\f0dc"}.fa-list-1-2,.fa-list-numeric,.fa-list-ol{--fa:"\f0cb";--fa--fa:"\f0cb\f0cb"}.fa-person-dress-burst{--fa:"\e544";--fa--fa:"\e544\e544"}.fa-money-check-alt,.fa-money-check-dollar{--fa:"\f53d";--fa--fa:"\f53d\f53d"}.fa-vector-square{--fa:"\f5cb";--fa--fa:"\f5cb\f5cb"}.fa-bread-slice{--fa:"\f7ec";--fa--fa:"\f7ec\f7ec"}.fa-language{--fa:"\f1ab";--fa--fa:"\f1ab\f1ab"}.fa-face-kiss-wink-heart,.fa-kiss-wink-heart{--fa:"\f598";--fa--fa:"\f598\f598"}.fa-filter{--fa:"\f0b0";--fa--fa:"\f0b0\f0b0"}.fa-question{--fa:"\3f";--fa--fa:"\3f\3f"}.fa-file-signature{--fa:"\f573";--fa--fa:"\f573\f573"}.fa-arrows-alt,.fa-up-down-left-right{--fa:"\f0b2";--fa--fa:"\f0b2\f0b2"}.fa-house-chimney-user{--fa:"\e065";--fa--fa:"\e065\e065"}.fa-hand-holding-heart{--fa:"\f4be";--fa--fa:"\f4be\f4be"}.fa-puzzle-piece{--fa:"\f12e";--fa--fa:"\f12e\f12e"}.fa-money-check{--fa:"\f53c";--fa--fa:"\f53c\f53c"}.fa-star-half-alt,.fa-star-half-stroke{--fa:"\f5c0";--fa--fa:"\f5c0\f5c0"}.fa-code{--fa:"\f121";--fa--fa:"\f121\f121"}.fa-glass-whiskey,.fa-whiskey-glass{--fa:"\f7a0";--fa--fa:"\f7a0\f7a0"}.fa-building-circle-exclamation{--fa:"\e4d3";--fa--fa:"\e4d3\e4d3"}.fa-magnifying-glass-chart{--fa:"\e522";--fa--fa:"\e522\e522"}.fa-arrow-up-right-from-square,.fa-external-link{--fa:"\f08e";--fa--fa:"\f08e\f08e"}.fa-cubes-stacked{--fa:"\e4e6";--fa--fa:"\e4e6\e4e6"}.fa-krw,.fa-won,.fa-won-sign{--fa:"\f159";--fa--fa:"\f159\f159"}.fa-virus-covid{--fa:"\e4a8";--fa--fa:"\e4a8\e4a8"}.fa-austral-sign{--fa:"\e0a9";--fa--fa:"\e0a9\e0a9"}.fa-f{--fa:"\46";--fa--fa:"\46\46"}.fa-leaf{--fa:"\f06c";--fa--fa:"\f06c\f06c"}.fa-road{--fa:"\f018";--fa--fa:"\f018\f018"}.fa-cab,.fa-taxi{--fa:"\f1ba";--fa--fa:"\f1ba\f1ba"}.fa-person-circle-plus{--fa:"\e541";--fa--fa:"\e541\e541"}.fa-chart-pie,.fa-pie-chart{--fa:"\f200";--fa--fa:"\f200\f200"}.fa-bolt-lightning{--fa:"\e0b7";--fa--fa:"\e0b7\e0b7"}.fa-sack-xmark{--fa:"\e56a";--fa--fa:"\e56a\e56a"}.fa-file-excel{--fa:"\f1c3";--fa--fa:"\f1c3\f1c3"}.fa-file-contract{--fa:"\f56c";--fa--fa:"\f56c\f56c"}.fa-fish-fins{--fa:"\e4f2";--fa--fa:"\e4f2\e4f2"}.fa-building-flag{--fa:"\e4d5";--fa--fa:"\e4d5\e4d5"}.fa-face-grin-beam,.fa-grin-beam{--fa:"\f582";--fa--fa:"\f582\f582"}.fa-object-ungroup{--fa:"\f248";--fa--fa:"\f248\f248"}.fa-poop{--fa:"\f619";--fa--fa:"\f619\f619"}.fa-location-pin,.fa-map-marker{--fa:"\f041";--fa--fa:"\f041\f041"}.fa-kaaba{--fa:"\f66b";--fa--fa:"\f66b\f66b"}.fa-toilet-paper{--fa:"\f71e";--fa--fa:"\f71e\f71e"}.fa-hard-hat,.fa-hat-hard,.fa-helmet-safety{--fa:"\f807";--fa--fa:"\f807\f807"}.fa-eject{--fa:"\f052";--fa--fa:"\f052\f052"}.fa-arrow-alt-circle-right,.fa-circle-right{--fa:"\f35a";--fa--fa:"\f35a\f35a"}.fa-plane-circle-check{--fa:"\e555";--fa--fa:"\e555\e555"}.fa-face-rolling-eyes,.fa-meh-rolling-eyes{--fa:"\f5a5";--fa--fa:"\f5a5\f5a5"}.fa-object-group{--fa:"\f247";--fa--fa:"\f247\f247"}.fa-chart-line,.fa-line-chart{--fa:"\f201";--fa--fa:"\f201\f201"}.fa-mask-ventilator{--fa:"\e524";--fa--fa:"\e524\e524"}.fa-arrow-right{--fa:"\f061";--fa--fa:"\f061\f061"}.fa-map-signs,.fa-signs-post{--fa:"\f277";--fa--fa:"\f277\f277"}.fa-cash-register{--fa:"\f788";--fa--fa:"\f788\f788"}.fa-person-circle-question{--fa:"\e542";--fa--fa:"\e542\e542"}.fa-h{--fa:"\48";--fa--fa:"\48\48"}.fa-tarp{--fa:"\e57b";--fa--fa:"\e57b\e57b"}.fa-screwdriver-wrench,.fa-tools{--fa:"\f7d9";--fa--fa:"\f7d9\f7d9"}.fa-arrows-to-eye{--fa:"\e4bf";--fa--fa:"\e4bf\e4bf"}.fa-plug-circle-bolt{--fa:"\e55b";--fa--fa:"\e55b\e55b"}.fa-heart{--fa:"\f004";--fa--fa:"\f004\f004"}.fa-mars-and-venus{--fa:"\f224";--fa--fa:"\f224\f224"}.fa-home-user,.fa-house-user{--fa:"\e1b0";--fa--fa:"\e1b0\e1b0"}.fa-dumpster-fire{--fa:"\f794";--fa--fa:"\f794\f794"}.fa-house-crack{--fa:"\e3b1";--fa--fa:"\e3b1\e3b1"}.fa-cocktail,.fa-martini-glass-citrus{--fa:"\f561";--fa--fa:"\f561\f561"}.fa-face-surprise,.fa-surprise{--fa:"\f5c2";--fa--fa:"\f5c2\f5c2"}.fa-bottle-water{--fa:"\e4c5";--fa--fa:"\e4c5\e4c5"}.fa-circle-pause,.fa-pause-circle{--fa:"\f28b";--fa--fa:"\f28b\f28b"}.fa-toilet-paper-slash{--fa:"\e072";--fa--fa:"\e072\e072"}.fa-apple-alt,.fa-apple-whole{--fa:"\f5d1";--fa--fa:"\f5d1\f5d1"}.fa-kitchen-set{--fa:"\e51a";--fa--fa:"\e51a\e51a"}.fa-r{--fa:"\52";--fa--fa:"\52\52"}.fa-temperature-1,.fa-temperature-quarter,.fa-thermometer-1,.fa-thermometer-quarter{--fa:"\f2ca";--fa--fa:"\f2ca\f2ca"}.fa-cube{--fa:"\f1b2";--fa--fa:"\f1b2\f1b2"}.fa-bitcoin-sign{--fa:"\e0b4";--fa--fa:"\e0b4\e0b4"}.fa-shield-dog{--fa:"\e573";--fa--fa:"\e573\e573"}.fa-solar-panel{--fa:"\f5ba";--fa--fa:"\f5ba\f5ba"}.fa-lock-open{--fa:"\f3c1";--fa--fa:"\f3c1\f3c1"}.fa-elevator{--fa:"\e16d";--fa--fa:"\e16d\e16d"}.fa-money-bill-transfer{--fa:"\e528";--fa--fa:"\e528\e528"}.fa-money-bill-trend-up{--fa:"\e529";--fa--fa:"\e529\e529"}.fa-house-flood-water-circle-arrow-right{--fa:"\e50f";--fa--fa:"\e50f\e50f"}.fa-poll-h,.fa-square-poll-horizontal{--fa:"\f682";--fa--fa:"\f682\f682"}.fa-circle{--fa:"\f111";--fa--fa:"\f111\f111"}.fa-backward-fast,.fa-fast-backward{--fa:"\f049";--fa--fa:"\f049\f049"}.fa-recycle{--fa:"\f1b8";--fa--fa:"\f1b8\f1b8"}.fa-user-astronaut{--fa:"\f4fb";--fa--fa:"\f4fb\f4fb"}.fa-plane-slash{--fa:"\e069";--fa--fa:"\e069\e069"}.fa-trademark{--fa:"\f25c";--fa--fa:"\f25c\f25c"}.fa-basketball,.fa-basketball-ball{--fa:"\f434";--fa--fa:"\f434\f434"}.fa-satellite-dish{--fa:"\f7c0";--fa--fa:"\f7c0\f7c0"}.fa-arrow-alt-circle-up,.fa-circle-up{--fa:"\f35b";--fa--fa:"\f35b\f35b"}.fa-mobile-alt,.fa-mobile-screen-button{--fa:"\f3cd";--fa--fa:"\f3cd\f3cd"}.fa-volume-high,.fa-volume-up{--fa:"\f028";--fa--fa:"\f028\f028"}.fa-users-rays{--fa:"\e593";--fa--fa:"\e593\e593"}.fa-wallet{--fa:"\f555";--fa--fa:"\f555\f555"}.fa-clipboard-check{--fa:"\f46c";--fa--fa:"\f46c\f46c"}.fa-file-audio{--fa:"\f1c7";--fa--fa:"\f1c7\f1c7"}.fa-burger,.fa-hamburger{--fa:"\f805";--fa--fa:"\f805\f805"}.fa-wrench{--fa:"\f0ad";--fa--fa:"\f0ad\f0ad"}.fa-bugs{--fa:"\e4d0";--fa--fa:"\e4d0\e4d0"}.fa-rupee,.fa-rupee-sign{--fa:"\f156";--fa--fa:"\f156\f156"}.fa-file-image{--fa:"\f1c5";--fa--fa:"\f1c5\f1c5"}.fa-circle-question,.fa-question-circle{--fa:"\f059";--fa--fa:"\f059\f059"}.fa-plane-departure{--fa:"\f5b0";--fa--fa:"\f5b0\f5b0"}.fa-handshake-slash{--fa:"\e060";--fa--fa:"\e060\e060"}.fa-book-bookmark{--fa:"\e0bb";--fa--fa:"\e0bb\e0bb"}.fa-code-branch{--fa:"\f126";--fa--fa:"\f126\f126"}.fa-hat-cowboy{--fa:"\f8c0";--fa--fa:"\f8c0\f8c0"}.fa-bridge{--fa:"\e4c8";--fa--fa:"\e4c8\e4c8"}.fa-phone-alt,.fa-phone-flip{--fa:"\f879";--fa--fa:"\f879\f879"}.fa-truck-front{--fa:"\e2b7";--fa--fa:"\e2b7\e2b7"}.fa-cat{--fa:"\f6be";--fa--fa:"\f6be\f6be"}.fa-anchor-circle-exclamation{--fa:"\e4ab";--fa--fa:"\e4ab\e4ab"}.fa-truck-field{--fa:"\e58d";--fa--fa:"\e58d\e58d"}.fa-route{--fa:"\f4d7";--fa--fa:"\f4d7\f4d7"}.fa-clipboard-question{--fa:"\e4e3";--fa--fa:"\e4e3\e4e3"}.fa-panorama{--fa:"\e209";--fa--fa:"\e209\e209"}.fa-comment-medical{--fa:"\f7f5";--fa--fa:"\f7f5\f7f5"}.fa-teeth-open{--fa:"\f62f";--fa--fa:"\f62f\f62f"}.fa-file-circle-minus{--fa:"\e4ed";--fa--fa:"\e4ed\e4ed"}.fa-tags{--fa:"\f02c";--fa--fa:"\f02c\f02c"}.fa-wine-glass{--fa:"\f4e3";--fa--fa:"\f4e3\f4e3"}.fa-fast-forward,.fa-forward-fast{--fa:"\f050";--fa--fa:"\f050\f050"}.fa-face-meh-blank,.fa-meh-blank{--fa:"\f5a4";--fa--fa:"\f5a4\f5a4"}.fa-parking,.fa-square-parking{--fa:"\f540";--fa--fa:"\f540\f540"}.fa-house-signal{--fa:"\e012";--fa--fa:"\e012\e012"}.fa-bars-progress,.fa-tasks-alt{--fa:"\f828";--fa--fa:"\f828\f828"}.fa-faucet-drip{--fa:"\e006";--fa--fa:"\e006\e006"}.fa-cart-flatbed,.fa-dolly-flatbed{--fa:"\f474";--fa--fa:"\f474\f474"}.fa-ban-smoking,.fa-smoking-ban{--fa:"\f54d";--fa--fa:"\f54d\f54d"}.fa-terminal{--fa:"\f120";--fa--fa:"\f120\f120"}.fa-mobile-button{--fa:"\f10b";--fa--fa:"\f10b\f10b"}.fa-house-medical-flag{--fa:"\e514";--fa--fa:"\e514\e514"}.fa-basket-shopping,.fa-shopping-basket{--fa:"\f291";--fa--fa:"\f291\f291"}.fa-tape{--fa:"\f4db";--fa--fa:"\f4db\f4db"}.fa-bus-alt,.fa-bus-simple{--fa:"\f55e";--fa--fa:"\f55e\f55e"}.fa-eye{--fa:"\f06e";--fa--fa:"\f06e\f06e"}.fa-face-sad-cry,.fa-sad-cry{--fa:"\f5b3";--fa--fa:"\f5b3\f5b3"}.fa-audio-description{--fa:"\f29e";--fa--fa:"\f29e\f29e"}.fa-person-military-to-person{--fa:"\e54c";--fa--fa:"\e54c\e54c"}.fa-file-shield{--fa:"\e4f0";--fa--fa:"\e4f0\e4f0"}.fa-user-slash{--fa:"\f506";--fa--fa:"\f506\f506"}.fa-pen{--fa:"\f304";--fa--fa:"\f304\f304"}.fa-tower-observation{--fa:"\e586";--fa--fa:"\e586\e586"}.fa-file-code{--fa:"\f1c9";--fa--fa:"\f1c9\f1c9"}.fa-signal,.fa-signal-5,.fa-signal-perfect{--fa:"\f012";--fa--fa:"\f012\f012"}.fa-bus{--fa:"\f207";--fa--fa:"\f207\f207"}.fa-heart-circle-xmark{--fa:"\e501";--fa--fa:"\e501\e501"}.fa-home-lg,.fa-house-chimney{--fa:"\e3af";--fa--fa:"\e3af\e3af"}.fa-window-maximize{--fa:"\f2d0";--fa--fa:"\f2d0\f2d0"}.fa-face-frown,.fa-frown{--fa:"\f119";--fa--fa:"\f119\f119"}.fa-prescription{--fa:"\f5b1";--fa--fa:"\f5b1\f5b1"}.fa-shop,.fa-store-alt{--fa:"\f54f";--fa--fa:"\f54f\f54f"}.fa-floppy-disk,.fa-save{--fa:"\f0c7";--fa--fa:"\f0c7\f0c7"}.fa-vihara{--fa:"\f6a7";--fa--fa:"\f6a7\f6a7"}.fa-balance-scale-left,.fa-scale-unbalanced{--fa:"\f515";--fa--fa:"\f515\f515"}.fa-sort-asc,.fa-sort-up{--fa:"\f0de";--fa--fa:"\f0de\f0de"}.fa-comment-dots,.fa-commenting{--fa:"\f4ad";--fa--fa:"\f4ad\f4ad"}.fa-plant-wilt{--fa:"\e5aa";--fa--fa:"\e5aa\e5aa"}.fa-diamond{--fa:"\f219";--fa--fa:"\f219\f219"}.fa-face-grin-squint,.fa-grin-squint{--fa:"\f585";--fa--fa:"\f585\f585"}.fa-hand-holding-dollar,.fa-hand-holding-usd{--fa:"\f4c0";--fa--fa:"\f4c0\f4c0"}.fa-chart-diagram{--fa:"\e695";--fa--fa:"\e695\e695"}.fa-bacterium{--fa:"\e05a";--fa--fa:"\e05a\e05a"}.fa-hand-pointer{--fa:"\f25a";--fa--fa:"\f25a\f25a"}.fa-drum-steelpan{--fa:"\f56a";--fa--fa:"\f56a\f56a"}.fa-hand-scissors{--fa:"\f257";--fa--fa:"\f257\f257"}.fa-hands-praying,.fa-praying-hands{--fa:"\f684";--fa--fa:"\f684\f684"}.fa-arrow-right-rotate,.fa-arrow-rotate-forward,.fa-arrow-rotate-right,.fa-redo{--fa:"\f01e";--fa--fa:"\f01e\f01e"}.fa-biohazard{--fa:"\f780";--fa--fa:"\f780\f780"}.fa-location,.fa-location-crosshairs{--fa:"\f601";--fa--fa:"\f601\f601"}.fa-mars-double{--fa:"\f227";--fa--fa:"\f227\f227"}.fa-child-dress{--fa:"\e59c";--fa--fa:"\e59c\e59c"}.fa-users-between-lines{--fa:"\e591";--fa--fa:"\e591\e591"}.fa-lungs-virus{--fa:"\e067";--fa--fa:"\e067\e067"}.fa-face-grin-tears,.fa-grin-tears{--fa:"\f588";--fa--fa:"\f588\f588"}.fa-phone{--fa:"\f095";--fa--fa:"\f095\f095"}.fa-calendar-times,.fa-calendar-xmark{--fa:"\f273";--fa--fa:"\f273\f273"}.fa-child-reaching{--fa:"\e59d";--fa--fa:"\e59d\e59d"}.fa-head-side-virus{--fa:"\e064";--fa--fa:"\e064\e064"}.fa-user-cog,.fa-user-gear{--fa:"\f4fe";--fa--fa:"\f4fe\f4fe"}.fa-arrow-up-1-9,.fa-sort-numeric-up{--fa:"\f163";--fa--fa:"\f163\f163"}.fa-door-closed{--fa:"\f52a";--fa--fa:"\f52a\f52a"}.fa-shield-virus{--fa:"\e06c";--fa--fa:"\e06c\e06c"}.fa-dice-six{--fa:"\f526";--fa--fa:"\f526\f526"}.fa-mosquito-net{--fa:"\e52c";--fa--fa:"\e52c\e52c"}.fa-file-fragment{--fa:"\e697";--fa--fa:"\e697\e697"}.fa-bridge-water{--fa:"\e4ce";--fa--fa:"\e4ce\e4ce"}.fa-person-booth{--fa:"\f756";--fa--fa:"\f756\f756"}.fa-text-width{--fa:"\f035";--fa--fa:"\f035\f035"}.fa-hat-wizard{--fa:"\f6e8";--fa--fa:"\f6e8\f6e8"}.fa-pen-fancy{--fa:"\f5ac";--fa--fa:"\f5ac\f5ac"}.fa-digging,.fa-person-digging{--fa:"\f85e";--fa--fa:"\f85e\f85e"}.fa-trash{--fa:"\f1f8";--fa--fa:"\f1f8\f1f8"}.fa-gauge-simple,.fa-gauge-simple-med,.fa-tachometer-average{--fa:"\f629";--fa--fa:"\f629\f629"}.fa-book-medical{--fa:"\f7e6";--fa--fa:"\f7e6\f7e6"}.fa-poo{--fa:"\f2fe";--fa--fa:"\f2fe\f2fe"}.fa-quote-right,.fa-quote-right-alt{--fa:"\f10e";--fa--fa:"\f10e\f10e"}.fa-shirt,.fa-t-shirt,.fa-tshirt{--fa:"\f553";--fa--fa:"\f553\f553"}.fa-cubes{--fa:"\f1b3";--fa--fa:"\f1b3\f1b3"}.fa-divide{--fa:"\f529";--fa--fa:"\f529\f529"}.fa-tenge,.fa-tenge-sign{--fa:"\f7d7";--fa--fa:"\f7d7\f7d7"}.fa-headphones{--fa:"\f025";--fa--fa:"\f025\f025"}.fa-hands-holding{--fa:"\f4c2";--fa--fa:"\f4c2\f4c2"}.fa-hands-clapping{--fa:"\e1a8";--fa--fa:"\e1a8\e1a8"}.fa-republican{--fa:"\f75e";--fa--fa:"\f75e\f75e"}.fa-arrow-left{--fa:"\f060";--fa--fa:"\f060\f060"}.fa-person-circle-xmark{--fa:"\e543";--fa--fa:"\e543\e543"}.fa-ruler{--fa:"\f545";--fa--fa:"\f545\f545"}.fa-align-left{--fa:"\f036";--fa--fa:"\f036\f036"}.fa-dice-d6{--fa:"\f6d1";--fa--fa:"\f6d1\f6d1"}.fa-restroom{--fa:"\f7bd";--fa--fa:"\f7bd\f7bd"}.fa-j{--fa:"\4a";--fa--fa:"\4a\4a"}.fa-users-viewfinder{--fa:"\e595";--fa--fa:"\e595\e595"}.fa-file-video{--fa:"\f1c8";--fa--fa:"\f1c8\f1c8"}.fa-external-link-alt,.fa-up-right-from-square{--fa:"\f35d";--fa--fa:"\f35d\f35d"}.fa-table-cells,.fa-th{--fa:"\f00a";--fa--fa:"\f00a\f00a"}.fa-file-pdf{--fa:"\f1c1";--fa--fa:"\f1c1\f1c1"}.fa-bible,.fa-book-bible{--fa:"\f647";--fa--fa:"\f647\f647"}.fa-o{--fa:"\4f";--fa--fa:"\4f\4f"}.fa-medkit,.fa-suitcase-medical{--fa:"\f0fa";--fa--fa:"\f0fa\f0fa"}.fa-user-secret{--fa:"\f21b";--fa--fa:"\f21b\f21b"}.fa-otter{--fa:"\f700";--fa--fa:"\f700\f700"}.fa-female,.fa-person-dress{--fa:"\f182";--fa--fa:"\f182\f182"}.fa-comment-dollar{--fa:"\f651";--fa--fa:"\f651\f651"}.fa-briefcase-clock,.fa-business-time{--fa:"\f64a";--fa--fa:"\f64a\f64a"}.fa-table-cells-large,.fa-th-large{--fa:"\f009";--fa--fa:"\f009\f009"}.fa-book-tanakh,.fa-tanakh{--fa:"\f827";--fa--fa:"\f827\f827"}.fa-phone-volume,.fa-volume-control-phone{--fa:"\f2a0";--fa--fa:"\f2a0\f2a0"}.fa-hat-cowboy-side{--fa:"\f8c1";--fa--fa:"\f8c1\f8c1"}.fa-clipboard-user{--fa:"\f7f3";--fa--fa:"\f7f3\f7f3"}.fa-child{--fa:"\f1ae";--fa--fa:"\f1ae\f1ae"}.fa-lira-sign{--fa:"\f195";--fa--fa:"\f195\f195"}.fa-satellite{--fa:"\f7bf";--fa--fa:"\f7bf\f7bf"}.fa-plane-lock{--fa:"\e558";--fa--fa:"\e558\e558"}.fa-tag{--fa:"\f02b";--fa--fa:"\f02b\f02b"}.fa-comment{--fa:"\f075";--fa--fa:"\f075\f075"}.fa-birthday-cake,.fa-cake,.fa-cake-candles{--fa:"\f1fd";--fa--fa:"\f1fd\f1fd"}.fa-envelope{--fa:"\f0e0";--fa--fa:"\f0e0\f0e0"}.fa-angle-double-up,.fa-angles-up{--fa:"\f102";--fa--fa:"\f102\f102"}.fa-paperclip{--fa:"\f0c6";--fa--fa:"\f0c6\f0c6"}.fa-arrow-right-to-city{--fa:"\e4b3";--fa--fa:"\e4b3\e4b3"}.fa-ribbon{--fa:"\f4d6";--fa--fa:"\f4d6\f4d6"}.fa-lungs{--fa:"\f604";--fa--fa:"\f604\f604"}.fa-arrow-up-9-1,.fa-sort-numeric-up-alt{--fa:"\f887";--fa--fa:"\f887\f887"}.fa-litecoin-sign{--fa:"\e1d3";--fa--fa:"\e1d3\e1d3"}.fa-border-none{--fa:"\f850";--fa--fa:"\f850\f850"}.fa-circle-nodes{--fa:"\e4e2";--fa--fa:"\e4e2\e4e2"}.fa-parachute-box{--fa:"\f4cd";--fa--fa:"\f4cd\f4cd"}.fa-indent{--fa:"\f03c";--fa--fa:"\f03c\f03c"}.fa-truck-field-un{--fa:"\e58e";--fa--fa:"\e58e\e58e"}.fa-hourglass,.fa-hourglass-empty{--fa:"\f254";--fa--fa:"\f254\f254"}.fa-mountain{--fa:"\f6fc";--fa--fa:"\f6fc\f6fc"}.fa-user-doctor,.fa-user-md{--fa:"\f0f0";--fa--fa:"\f0f0\f0f0"}.fa-circle-info,.fa-info-circle{--fa:"\f05a";--fa--fa:"\f05a\f05a"}.fa-cloud-meatball{--fa:"\f73b";--fa--fa:"\f73b\f73b"}.fa-camera,.fa-camera-alt{--fa:"\f030";--fa--fa:"\f030\f030"}.fa-square-virus{--fa:"\e578";--fa--fa:"\e578\e578"}.fa-meteor{--fa:"\f753";--fa--fa:"\f753\f753"}.fa-car-on{--fa:"\e4dd";--fa--fa:"\e4dd\e4dd"}.fa-sleigh{--fa:"\f7cc";--fa--fa:"\f7cc\f7cc"}.fa-arrow-down-1-9,.fa-sort-numeric-asc,.fa-sort-numeric-down{--fa:"\f162";--fa--fa:"\f162\f162"}.fa-hand-holding-droplet,.fa-hand-holding-water{--fa:"\f4c1";--fa--fa:"\f4c1\f4c1"}.fa-water{--fa:"\f773";--fa--fa:"\f773\f773"}.fa-calendar-check{--fa:"\f274";--fa--fa:"\f274\f274"}.fa-braille{--fa:"\f2a1";--fa--fa:"\f2a1\f2a1"}.fa-prescription-bottle-alt,.fa-prescription-bottle-medical{--fa:"\f486";--fa--fa:"\f486\f486"}.fa-landmark{--fa:"\f66f";--fa--fa:"\f66f\f66f"}.fa-truck{--fa:"\f0d1";--fa--fa:"\f0d1\f0d1"}.fa-crosshairs{--fa:"\f05b";--fa--fa:"\f05b\f05b"}.fa-person-cane{--fa:"\e53c";--fa--fa:"\e53c\e53c"}.fa-tent{--fa:"\e57d";--fa--fa:"\e57d\e57d"}.fa-vest-patches{--fa:"\e086";--fa--fa:"\e086\e086"}.fa-check-double{--fa:"\f560";--fa--fa:"\f560\f560"}.fa-arrow-down-a-z,.fa-sort-alpha-asc,.fa-sort-alpha-down{--fa:"\f15d";--fa--fa:"\f15d\f15d"}.fa-money-bill-wheat{--fa:"\e52a";--fa--fa:"\e52a\e52a"}.fa-cookie{--fa:"\f563";--fa--fa:"\f563\f563"}.fa-arrow-left-rotate,.fa-arrow-rotate-back,.fa-arrow-rotate-backward,.fa-arrow-rotate-left,.fa-undo{--fa:"\f0e2";--fa--fa:"\f0e2\f0e2"}.fa-hard-drive,.fa-hdd{--fa:"\f0a0";--fa--fa:"\f0a0\f0a0"}.fa-face-grin-squint-tears,.fa-grin-squint-tears{--fa:"\f586";--fa--fa:"\f586\f586"}.fa-dumbbell{--fa:"\f44b";--fa--fa:"\f44b\f44b"}.fa-list-alt,.fa-rectangle-list{--fa:"\f022";--fa--fa:"\f022\f022"}.fa-tarp-droplet{--fa:"\e57c";--fa--fa:"\e57c\e57c"}.fa-house-medical-circle-check{--fa:"\e511";--fa--fa:"\e511\e511"}.fa-person-skiing-nordic,.fa-skiing-nordic{--fa:"\f7ca";--fa--fa:"\f7ca\f7ca"}.fa-calendar-plus{--fa:"\f271";--fa--fa:"\f271\f271"}.fa-plane-arrival{--fa:"\f5af";--fa--fa:"\f5af\f5af"}.fa-arrow-alt-circle-left,.fa-circle-left{--fa:"\f359";--fa--fa:"\f359\f359"}.fa-subway,.fa-train-subway{--fa:"\f239";--fa--fa:"\f239\f239"}.fa-chart-gantt{--fa:"\e0e4";--fa--fa:"\e0e4\e0e4"}.fa-indian-rupee,.fa-indian-rupee-sign,.fa-inr{--fa:"\e1bc";--fa--fa:"\e1bc\e1bc"}.fa-crop-alt,.fa-crop-simple{--fa:"\f565";--fa--fa:"\f565\f565"}.fa-money-bill-1,.fa-money-bill-alt{--fa:"\f3d1";--fa--fa:"\f3d1\f3d1"}.fa-left-long,.fa-long-arrow-alt-left{--fa:"\f30a";--fa--fa:"\f30a\f30a"}.fa-dna{--fa:"\f471";--fa--fa:"\f471\f471"}.fa-virus-slash{--fa:"\e075";--fa--fa:"\e075\e075"}.fa-minus,.fa-subtract{--fa:"\f068";--fa--fa:"\f068\f068"}.fa-chess{--fa:"\f439";--fa--fa:"\f439\f439"}.fa-arrow-left-long,.fa-long-arrow-left{--fa:"\f177";--fa--fa:"\f177\f177"}.fa-plug-circle-check{--fa:"\e55c";--fa--fa:"\e55c\e55c"}.fa-street-view{--fa:"\f21d";--fa--fa:"\f21d\f21d"}.fa-franc-sign{--fa:"\e18f";--fa--fa:"\e18f\e18f"}.fa-volume-off{--fa:"\f026";--fa--fa:"\f026\f026"}.fa-american-sign-language-interpreting,.fa-asl-interpreting,.fa-hands-american-sign-language-interpreting,.fa-hands-asl-interpreting{--fa:"\f2a3";--fa--fa:"\f2a3\f2a3"}.fa-cog,.fa-gear{--fa:"\f013";--fa--fa:"\f013\f013"}.fa-droplet-slash,.fa-tint-slash{--fa:"\f5c7";--fa--fa:"\f5c7\f5c7"}.fa-mosque{--fa:"\f678";--fa--fa:"\f678\f678"}.fa-mosquito{--fa:"\e52b";--fa--fa:"\e52b\e52b"}.fa-star-of-david{--fa:"\f69a";--fa--fa:"\f69a\f69a"}.fa-person-military-rifle{--fa:"\e54b";--fa--fa:"\e54b\e54b"}.fa-cart-shopping,.fa-shopping-cart{--fa:"\f07a";--fa--fa:"\f07a\f07a"}.fa-vials{--fa:"\f493";--fa--fa:"\f493\f493"}.fa-plug-circle-plus{--fa:"\e55f";--fa--fa:"\e55f\e55f"}.fa-place-of-worship{--fa:"\f67f";--fa--fa:"\f67f\f67f"}.fa-grip-vertical{--fa:"\f58e";--fa--fa:"\f58e\f58e"}.fa-hexagon-nodes{--fa:"\e699";--fa--fa:"\e699\e699"}.fa-arrow-turn-up,.fa-level-up{--fa:"\f148";--fa--fa:"\f148\f148"}.fa-u{--fa:"\55";--fa--fa:"\55\55"}.fa-square-root-alt,.fa-square-root-variable{--fa:"\f698";--fa--fa:"\f698\f698"}.fa-clock,.fa-clock-four{--fa:"\f017";--fa--fa:"\f017\f017"}.fa-backward-step,.fa-step-backward{--fa:"\f048";--fa--fa:"\f048\f048"}.fa-pallet{--fa:"\f482";--fa--fa:"\f482\f482"}.fa-faucet{--fa:"\e005";--fa--fa:"\e005\e005"}.fa-baseball-bat-ball{--fa:"\f432";--fa--fa:"\f432\f432"}.fa-s{--fa:"\53";--fa--fa:"\53\53"}.fa-timeline{--fa:"\e29c";--fa--fa:"\e29c\e29c"}.fa-keyboard{--fa:"\f11c";--fa--fa:"\f11c\f11c"}.fa-caret-down{--fa:"\f0d7";--fa--fa:"\f0d7\f0d7"}.fa-clinic-medical,.fa-house-chimney-medical{--fa:"\f7f2";--fa--fa:"\f7f2\f7f2"}.fa-temperature-3,.fa-temperature-three-quarters,.fa-thermometer-3,.fa-thermometer-three-quarters{--fa:"\f2c8";--fa--fa:"\f2c8\f2c8"}.fa-mobile-android-alt,.fa-mobile-screen{--fa:"\f3cf";--fa--fa:"\f3cf\f3cf"}.fa-plane-up{--fa:"\e22d";--fa--fa:"\e22d\e22d"}.fa-piggy-bank{--fa:"\f4d3";--fa--fa:"\f4d3\f4d3"}.fa-battery-3,.fa-battery-half{--fa:"\f242";--fa--fa:"\f242\f242"}.fa-mountain-city{--fa:"\e52e";--fa--fa:"\e52e\e52e"}.fa-coins{--fa:"\f51e";--fa--fa:"\f51e\f51e"}.fa-khanda{--fa:"\f66d";--fa--fa:"\f66d\f66d"}.fa-sliders,.fa-sliders-h{--fa:"\f1de";--fa--fa:"\f1de\f1de"}.fa-folder-tree{--fa:"\f802";--fa--fa:"\f802\f802"}.fa-network-wired{--fa:"\f6ff";--fa--fa:"\f6ff\f6ff"}.fa-map-pin{--fa:"\f276";--fa--fa:"\f276\f276"}.fa-hamsa{--fa:"\f665";--fa--fa:"\f665\f665"}.fa-cent-sign{--fa:"\e3f5";--fa--fa:"\e3f5\e3f5"}.fa-flask{--fa:"\f0c3";--fa--fa:"\f0c3\f0c3"}.fa-person-pregnant{--fa:"\e31e";--fa--fa:"\e31e\e31e"}.fa-wand-sparkles{--fa:"\f72b";--fa--fa:"\f72b\f72b"}.fa-ellipsis-v,.fa-ellipsis-vertical{--fa:"\f142";--fa--fa:"\f142\f142"}.fa-ticket{--fa:"\f145";--fa--fa:"\f145\f145"}.fa-power-off{--fa:"\f011";--fa--fa:"\f011\f011"}.fa-long-arrow-alt-right,.fa-right-long{--fa:"\f30b";--fa--fa:"\f30b\f30b"}.fa-flag-usa{--fa:"\f74d";--fa--fa:"\f74d\f74d"}.fa-laptop-file{--fa:"\e51d";--fa--fa:"\e51d\e51d"}.fa-teletype,.fa-tty{--fa:"\f1e4";--fa--fa:"\f1e4\f1e4"}.fa-diagram-next{--fa:"\e476";--fa--fa:"\e476\e476"}.fa-person-rifle{--fa:"\e54e";--fa--fa:"\e54e\e54e"}.fa-house-medical-circle-exclamation{--fa:"\e512";--fa--fa:"\e512\e512"}.fa-closed-captioning{--fa:"\f20a";--fa--fa:"\f20a\f20a"}.fa-hiking,.fa-person-hiking{--fa:"\f6ec";--fa--fa:"\f6ec\f6ec"}.fa-venus-double{--fa:"\f226";--fa--fa:"\f226\f226"}.fa-images{--fa:"\f302";--fa--fa:"\f302\f302"}.fa-calculator{--fa:"\f1ec";--fa--fa:"\f1ec\f1ec"}.fa-people-pulling{--fa:"\e535";--fa--fa:"\e535\e535"}.fa-n{--fa:"\4e";--fa--fa:"\4e\4e"}.fa-cable-car,.fa-tram{--fa:"\f7da";--fa--fa:"\f7da\f7da"}.fa-cloud-rain{--fa:"\f73d";--fa--fa:"\f73d\f73d"}.fa-building-circle-xmark{--fa:"\e4d4";--fa--fa:"\e4d4\e4d4"}.fa-ship{--fa:"\f21a";--fa--fa:"\f21a\f21a"}.fa-arrows-down-to-line{--fa:"\e4b8";--fa--fa:"\e4b8\e4b8"}.fa-download{--fa:"\f019";--fa--fa:"\f019\f019"}.fa-face-grin,.fa-grin{--fa:"\f580";--fa--fa:"\f580\f580"}.fa-backspace,.fa-delete-left{--fa:"\f55a";--fa--fa:"\f55a\f55a"}.fa-eye-dropper,.fa-eye-dropper-empty,.fa-eyedropper{--fa:"\f1fb";--fa--fa:"\f1fb\f1fb"}.fa-file-circle-check{--fa:"\e5a0";--fa--fa:"\e5a0\e5a0"}.fa-forward{--fa:"\f04e";--fa--fa:"\f04e\f04e"}.fa-mobile,.fa-mobile-android,.fa-mobile-phone{--fa:"\f3ce";--fa--fa:"\f3ce\f3ce"}.fa-face-meh,.fa-meh{--fa:"\f11a";--fa--fa:"\f11a\f11a"}.fa-align-center{--fa:"\f037";--fa--fa:"\f037\f037"}.fa-book-dead,.fa-book-skull{--fa:"\f6b7";--fa--fa:"\f6b7\f6b7"}.fa-drivers-license,.fa-id-card{--fa:"\f2c2";--fa--fa:"\f2c2\f2c2"}.fa-dedent,.fa-outdent{--fa:"\f03b";--fa--fa:"\f03b\f03b"}.fa-heart-circle-exclamation{--fa:"\e4fe";--fa--fa:"\e4fe\e4fe"}.fa-home,.fa-home-alt,.fa-home-lg-alt,.fa-house{--fa:"\f015";--fa--fa:"\f015\f015"}.fa-calendar-week{--fa:"\f784";--fa--fa:"\f784\f784"}.fa-laptop-medical{--fa:"\f812";--fa--fa:"\f812\f812"}.fa-b{--fa:"\42";--fa--fa:"\42\42"}.fa-file-medical{--fa:"\f477";--fa--fa:"\f477\f477"}.fa-dice-one{--fa:"\f525";--fa--fa:"\f525\f525"}.fa-kiwi-bird{--fa:"\f535";--fa--fa:"\f535\f535"}.fa-arrow-right-arrow-left,.fa-exchange{--fa:"\f0ec";--fa--fa:"\f0ec\f0ec"}.fa-redo-alt,.fa-rotate-forward,.fa-rotate-right{--fa:"\f2f9";--fa--fa:"\f2f9\f2f9"}.fa-cutlery,.fa-utensils{--fa:"\f2e7";--fa--fa:"\f2e7\f2e7"}.fa-arrow-up-wide-short,.fa-sort-amount-up{--fa:"\f161";--fa--fa:"\f161\f161"}.fa-mill-sign{--fa:"\e1ed";--fa--fa:"\e1ed\e1ed"}.fa-bowl-rice{--fa:"\e2eb";--fa--fa:"\e2eb\e2eb"}.fa-skull{--fa:"\f54c";--fa--fa:"\f54c\f54c"}.fa-broadcast-tower,.fa-tower-broadcast{--fa:"\f519";--fa--fa:"\f519\f519"}.fa-truck-pickup{--fa:"\f63c";--fa--fa:"\f63c\f63c"}.fa-long-arrow-alt-up,.fa-up-long{--fa:"\f30c";--fa--fa:"\f30c\f30c"}.fa-stop{--fa:"\f04d";--fa--fa:"\f04d\f04d"}.fa-code-merge{--fa:"\f387";--fa--fa:"\f387\f387"}.fa-upload{--fa:"\f093";--fa--fa:"\f093\f093"}.fa-hurricane{--fa:"\f751";--fa--fa:"\f751\f751"}.fa-mound{--fa:"\e52d";--fa--fa:"\e52d\e52d"}.fa-toilet-portable{--fa:"\e583";--fa--fa:"\e583\e583"}.fa-compact-disc{--fa:"\f51f";--fa--fa:"\f51f\f51f"}.fa-file-arrow-down,.fa-file-download{--fa:"\f56d";--fa--fa:"\f56d\f56d"}.fa-caravan{--fa:"\f8ff";--fa--fa:"\f8ff\f8ff"}.fa-shield-cat{--fa:"\e572";--fa--fa:"\e572\e572"}.fa-bolt,.fa-zap{--fa:"\f0e7";--fa--fa:"\f0e7\f0e7"}.fa-glass-water{--fa:"\e4f4";--fa--fa:"\e4f4\e4f4"}.fa-oil-well{--fa:"\e532";--fa--fa:"\e532\e532"}.fa-vault{--fa:"\e2c5";--fa--fa:"\e2c5\e2c5"}.fa-mars{--fa:"\f222";--fa--fa:"\f222\f222"}.fa-toilet{--fa:"\f7d8";--fa--fa:"\f7d8\f7d8"}.fa-plane-circle-xmark{--fa:"\e557";--fa--fa:"\e557\e557"}.fa-cny,.fa-jpy,.fa-rmb,.fa-yen,.fa-yen-sign{--fa:"\f157";--fa--fa:"\f157\f157"}.fa-rouble,.fa-rub,.fa-ruble,.fa-ruble-sign{--fa:"\f158";--fa--fa:"\f158\f158"}.fa-sun{--fa:"\f185";--fa--fa:"\f185\f185"}.fa-guitar{--fa:"\f7a6";--fa--fa:"\f7a6\f7a6"}.fa-face-laugh-wink,.fa-laugh-wink{--fa:"\f59c";--fa--fa:"\f59c\f59c"}.fa-horse-head{--fa:"\f7ab";--fa--fa:"\f7ab\f7ab"}.fa-bore-hole{--fa:"\e4c3";--fa--fa:"\e4c3\e4c3"}.fa-industry{--fa:"\f275";--fa--fa:"\f275\f275"}.fa-arrow-alt-circle-down,.fa-circle-down{--fa:"\f358";--fa--fa:"\f358\f358"}.fa-arrows-turn-to-dots{--fa:"\e4c1";--fa--fa:"\e4c1\e4c1"}.fa-florin-sign{--fa:"\e184";--fa--fa:"\e184\e184"}.fa-arrow-down-short-wide,.fa-sort-amount-desc,.fa-sort-amount-down-alt{--fa:"\f884";--fa--fa:"\f884\f884"}.fa-less-than{--fa:"\3c";--fa--fa:"\3c\3c"}.fa-angle-down{--fa:"\f107";--fa--fa:"\f107\f107"}.fa-car-tunnel{--fa:"\e4de";--fa--fa:"\e4de\e4de"}.fa-head-side-cough{--fa:"\e061";--fa--fa:"\e061\e061"}.fa-grip-lines{--fa:"\f7a4";--fa--fa:"\f7a4\f7a4"}.fa-thumbs-down{--fa:"\f165";--fa--fa:"\f165\f165"}.fa-user-lock{--fa:"\f502";--fa--fa:"\f502\f502"}.fa-arrow-right-long,.fa-long-arrow-right{--fa:"\f178";--fa--fa:"\f178\f178"}.fa-anchor-circle-xmark{--fa:"\e4ac";--fa--fa:"\e4ac\e4ac"}.fa-ellipsis,.fa-ellipsis-h{--fa:"\f141";--fa--fa:"\f141\f141"}.fa-chess-pawn{--fa:"\f443";--fa--fa:"\f443\f443"}.fa-first-aid,.fa-kit-medical{--fa:"\f479";--fa--fa:"\f479\f479"}.fa-person-through-window{--fa:"\e5a9";--fa--fa:"\e5a9\e5a9"}.fa-toolbox{--fa:"\f552";--fa--fa:"\f552\f552"}.fa-hands-holding-circle{--fa:"\e4fb";--fa--fa:"\e4fb\e4fb"}.fa-bug{--fa:"\f188";--fa--fa:"\f188\f188"}.fa-credit-card,.fa-credit-card-alt{--fa:"\f09d";--fa--fa:"\f09d\f09d"}.fa-automobile,.fa-car{--fa:"\f1b9";--fa--fa:"\f1b9\f1b9"}.fa-hand-holding-hand{--fa:"\e4f7";--fa--fa:"\e4f7\e4f7"}.fa-book-open-reader,.fa-book-reader{--fa:"\f5da";--fa--fa:"\f5da\f5da"}.fa-mountain-sun{--fa:"\e52f";--fa--fa:"\e52f\e52f"}.fa-arrows-left-right-to-line{--fa:"\e4ba";--fa--fa:"\e4ba\e4ba"}.fa-dice-d20{--fa:"\f6cf";--fa--fa:"\f6cf\f6cf"}.fa-truck-droplet{--fa:"\e58c";--fa--fa:"\e58c\e58c"}.fa-file-circle-xmark{--fa:"\e5a1";--fa--fa:"\e5a1\e5a1"}.fa-temperature-arrow-up,.fa-temperature-up{--fa:"\e040";--fa--fa:"\e040\e040"}.fa-medal{--fa:"\f5a2";--fa--fa:"\f5a2\f5a2"}.fa-bed{--fa:"\f236";--fa--fa:"\f236\f236"}.fa-h-square,.fa-square-h{--fa:"\f0fd";--fa--fa:"\f0fd\f0fd"}.fa-podcast{--fa:"\f2ce";--fa--fa:"\f2ce\f2ce"}.fa-temperature-4,.fa-temperature-full,.fa-thermometer-4,.fa-thermometer-full{--fa:"\f2c7";--fa--fa:"\f2c7\f2c7"}.fa-bell{--fa:"\f0f3";--fa--fa:"\f0f3\f0f3"}.fa-superscript{--fa:"\f12b";--fa--fa:"\f12b\f12b"}.fa-plug-circle-xmark{--fa:"\e560";--fa--fa:"\e560\e560"}.fa-star-of-life{--fa:"\f621";--fa--fa:"\f621\f621"}.fa-phone-slash{--fa:"\f3dd";--fa--fa:"\f3dd\f3dd"}.fa-paint-roller{--fa:"\f5aa";--fa--fa:"\f5aa\f5aa"}.fa-hands-helping,.fa-handshake-angle{--fa:"\f4c4";--fa--fa:"\f4c4\f4c4"}.fa-location-dot,.fa-map-marker-alt{--fa:"\f3c5";--fa--fa:"\f3c5\f3c5"}.fa-file{--fa:"\f15b";--fa--fa:"\f15b\f15b"}.fa-greater-than{--fa:"\3e";--fa--fa:"\3e\3e"}.fa-person-swimming,.fa-swimmer{--fa:"\f5c4";--fa--fa:"\f5c4\f5c4"}.fa-arrow-down{--fa:"\f063";--fa--fa:"\f063\f063"}.fa-droplet,.fa-tint{--fa:"\f043";--fa--fa:"\f043\f043"}.fa-eraser{--fa:"\f12d";--fa--fa:"\f12d\f12d"}.fa-earth,.fa-earth-america,.fa-earth-americas,.fa-globe-americas{--fa:"\f57d";--fa--fa:"\f57d\f57d"}.fa-person-burst{--fa:"\e53b";--fa--fa:"\e53b\e53b"}.fa-dove{--fa:"\f4ba";--fa--fa:"\f4ba\f4ba"}.fa-battery-0,.fa-battery-empty{--fa:"\f244";--fa--fa:"\f244\f244"}.fa-socks{--fa:"\f696";--fa--fa:"\f696\f696"}.fa-inbox{--fa:"\f01c";--fa--fa:"\f01c\f01c"}.fa-section{--fa:"\e447";--fa--fa:"\e447\e447"}.fa-gauge-high,.fa-tachometer-alt,.fa-tachometer-alt-fast{--fa:"\f625";--fa--fa:"\f625\f625"}.fa-envelope-open-text{--fa:"\f658";--fa--fa:"\f658\f658"}.fa-hospital,.fa-hospital-alt,.fa-hospital-wide{--fa:"\f0f8";--fa--fa:"\f0f8\f0f8"}.fa-wine-bottle{--fa:"\f72f";--fa--fa:"\f72f\f72f"}.fa-chess-rook{--fa:"\f447";--fa--fa:"\f447\f447"}.fa-bars-staggered,.fa-reorder,.fa-stream{--fa:"\f550";--fa--fa:"\f550\f550"}.fa-dharmachakra{--fa:"\f655";--fa--fa:"\f655\f655"}.fa-hotdog{--fa:"\f80f";--fa--fa:"\f80f\f80f"}.fa-blind,.fa-person-walking-with-cane{--fa:"\f29d";--fa--fa:"\f29d\f29d"}.fa-drum{--fa:"\f569";--fa--fa:"\f569\f569"}.fa-ice-cream{--fa:"\f810";--fa--fa:"\f810\f810"}.fa-heart-circle-bolt{--fa:"\e4fc";--fa--fa:"\e4fc\e4fc"}.fa-fax{--fa:"\f1ac";--fa--fa:"\f1ac\f1ac"}.fa-paragraph{--fa:"\f1dd";--fa--fa:"\f1dd\f1dd"}.fa-check-to-slot,.fa-vote-yea{--fa:"\f772";--fa--fa:"\f772\f772"}.fa-star-half{--fa:"\f089";--fa--fa:"\f089\f089"}.fa-boxes,.fa-boxes-alt,.fa-boxes-stacked{--fa:"\f468";--fa--fa:"\f468\f468"}.fa-chain,.fa-link{--fa:"\f0c1";--fa--fa:"\f0c1\f0c1"}.fa-assistive-listening-systems,.fa-ear-listen{--fa:"\f2a2";--fa--fa:"\f2a2\f2a2"}.fa-tree-city{--fa:"\e587";--fa--fa:"\e587\e587"}.fa-play{--fa:"\f04b";--fa--fa:"\f04b\f04b"}.fa-font{--fa:"\f031";--fa--fa:"\f031\f031"}.fa-table-cells-row-lock{--fa:"\e67a";--fa--fa:"\e67a\e67a"}.fa-rupiah-sign{--fa:"\e23d";--fa--fa:"\e23d\e23d"}.fa-magnifying-glass,.fa-search{--fa:"\f002";--fa--fa:"\f002\f002"}.fa-ping-pong-paddle-ball,.fa-table-tennis,.fa-table-tennis-paddle-ball{--fa:"\f45d";--fa--fa:"\f45d\f45d"}.fa-diagnoses,.fa-person-dots-from-line{--fa:"\f470";--fa--fa:"\f470\f470"}.fa-trash-can-arrow-up,.fa-trash-restore-alt{--fa:"\f82a";--fa--fa:"\f82a\f82a"}.fa-naira-sign{--fa:"\e1f6";--fa--fa:"\e1f6\e1f6"}.fa-cart-arrow-down{--fa:"\f218";--fa--fa:"\f218\f218"}.fa-walkie-talkie{--fa:"\f8ef";--fa--fa:"\f8ef\f8ef"}.fa-file-edit,.fa-file-pen{--fa:"\f31c";--fa--fa:"\f31c\f31c"}.fa-receipt{--fa:"\f543";--fa--fa:"\f543\f543"}.fa-pen-square,.fa-pencil-square,.fa-square-pen{--fa:"\f14b";--fa--fa:"\f14b\f14b"}.fa-suitcase-rolling{--fa:"\f5c1";--fa--fa:"\f5c1\f5c1"}.fa-person-circle-exclamation{--fa:"\e53f";--fa--fa:"\e53f\e53f"}.fa-chevron-down{--fa:"\f078";--fa--fa:"\f078\f078"}.fa-battery,.fa-battery-5,.fa-battery-full{--fa:"\f240";--fa--fa:"\f240\f240"}.fa-skull-crossbones{--fa:"\f714";--fa--fa:"\f714\f714"}.fa-code-compare{--fa:"\e13a";--fa--fa:"\e13a\e13a"}.fa-list-dots,.fa-list-ul{--fa:"\f0ca";--fa--fa:"\f0ca\f0ca"}.fa-school-lock{--fa:"\e56f";--fa--fa:"\e56f\e56f"}.fa-tower-cell{--fa:"\e585";--fa--fa:"\e585\e585"}.fa-down-long,.fa-long-arrow-alt-down{--fa:"\f309";--fa--fa:"\f309\f309"}.fa-ranking-star{--fa:"\e561";--fa--fa:"\e561\e561"}.fa-chess-king{--fa:"\f43f";--fa--fa:"\f43f\f43f"}.fa-person-harassing{--fa:"\e549";--fa--fa:"\e549\e549"}.fa-brazilian-real-sign{--fa:"\e46c";--fa--fa:"\e46c\e46c"}.fa-landmark-alt,.fa-landmark-dome{--fa:"\f752";--fa--fa:"\f752\f752"}.fa-arrow-up{--fa:"\f062";--fa--fa:"\f062\f062"}.fa-television,.fa-tv,.fa-tv-alt{--fa:"\f26c";--fa--fa:"\f26c\f26c"}.fa-shrimp{--fa:"\e448";--fa--fa:"\e448\e448"}.fa-list-check,.fa-tasks{--fa:"\f0ae";--fa--fa:"\f0ae\f0ae"}.fa-jug-detergent{--fa:"\e519";--fa--fa:"\e519\e519"}.fa-circle-user,.fa-user-circle{--fa:"\f2bd";--fa--fa:"\f2bd\f2bd"}.fa-user-shield{--fa:"\f505";--fa--fa:"\f505\f505"}.fa-wind{--fa:"\f72e";--fa--fa:"\f72e\f72e"}.fa-car-burst,.fa-car-crash{--fa:"\f5e1";--fa--fa:"\f5e1\f5e1"}.fa-y{--fa:"\59";--fa--fa:"\59\59"}.fa-person-snowboarding,.fa-snowboarding{--fa:"\f7ce";--fa--fa:"\f7ce\f7ce"}.fa-shipping-fast,.fa-truck-fast{--fa:"\f48b";--fa--fa:"\f48b\f48b"}.fa-fish{--fa:"\f578";--fa--fa:"\f578\f578"}.fa-user-graduate{--fa:"\f501";--fa--fa:"\f501\f501"}.fa-adjust,.fa-circle-half-stroke{--fa:"\f042";--fa--fa:"\f042\f042"}.fa-clapperboard{--fa:"\e131";--fa--fa:"\e131\e131"}.fa-circle-radiation,.fa-radiation-alt{--fa:"\f7ba";--fa--fa:"\f7ba\f7ba"}.fa-baseball,.fa-baseball-ball{--fa:"\f433";--fa--fa:"\f433\f433"}.fa-jet-fighter-up{--fa:"\e518";--fa--fa:"\e518\e518"}.fa-diagram-project,.fa-project-diagram{--fa:"\f542";--fa--fa:"\f542\f542"}.fa-copy{--fa:"\f0c5";--fa--fa:"\f0c5\f0c5"}.fa-volume-mute,.fa-volume-times,.fa-volume-xmark{--fa:"\f6a9";--fa--fa:"\f6a9\f6a9"}.fa-hand-sparkles{--fa:"\e05d";--fa--fa:"\e05d\e05d"}.fa-grip,.fa-grip-horizontal{--fa:"\f58d";--fa--fa:"\f58d\f58d"}.fa-share-from-square,.fa-share-square{--fa:"\f14d";--fa--fa:"\f14d\f14d"}.fa-child-combatant,.fa-child-rifle{--fa:"\e4e0";--fa--fa:"\e4e0\e4e0"}.fa-gun{--fa:"\e19b";--fa--fa:"\e19b\e19b"}.fa-phone-square,.fa-square-phone{--fa:"\f098";--fa--fa:"\f098\f098"}.fa-add,.fa-plus{--fa:"\2b";--fa--fa:"\2b\2b"}.fa-expand{--fa:"\f065";--fa--fa:"\f065\f065"}.fa-computer{--fa:"\e4e5";--fa--fa:"\e4e5\e4e5"}.fa-close,.fa-multiply,.fa-remove,.fa-times,.fa-xmark{--fa:"\f00d";--fa--fa:"\f00d\f00d"}.fa-arrows,.fa-arrows-up-down-left-right{--fa:"\f047";--fa--fa:"\f047\f047"}.fa-chalkboard-teacher,.fa-chalkboard-user{--fa:"\f51c";--fa--fa:"\f51c\f51c"}.fa-peso-sign{--fa:"\e222";--fa--fa:"\e222\e222"}.fa-building-shield{--fa:"\e4d8";--fa--fa:"\e4d8\e4d8"}.fa-baby{--fa:"\f77c";--fa--fa:"\f77c\f77c"}.fa-users-line{--fa:"\e592";--fa--fa:"\e592\e592"}.fa-quote-left,.fa-quote-left-alt{--fa:"\f10d";--fa--fa:"\f10d\f10d"}.fa-tractor{--fa:"\f722";--fa--fa:"\f722\f722"}.fa-trash-arrow-up,.fa-trash-restore{--fa:"\f829";--fa--fa:"\f829\f829"}.fa-arrow-down-up-lock{--fa:"\e4b0";--fa--fa:"\e4b0\e4b0"}.fa-lines-leaning{--fa:"\e51e";--fa--fa:"\e51e\e51e"}.fa-ruler-combined{--fa:"\f546";--fa--fa:"\f546\f546"}.fa-copyright{--fa:"\f1f9";--fa--fa:"\f1f9\f1f9"}.fa-equals{--fa:"\3d";--fa--fa:"\3d\3d"}.fa-blender{--fa:"\f517";--fa--fa:"\f517\f517"}.fa-teeth{--fa:"\f62e";--fa--fa:"\f62e\f62e"}.fa-ils,.fa-shekel,.fa-shekel-sign,.fa-sheqel,.fa-sheqel-sign{--fa:"\f20b";--fa--fa:"\f20b\f20b"}.fa-map{--fa:"\f279";--fa--fa:"\f279\f279"}.fa-rocket{--fa:"\f135";--fa--fa:"\f135\f135"}.fa-photo-film,.fa-photo-video{--fa:"\f87c";--fa--fa:"\f87c\f87c"}.fa-folder-minus{--fa:"\f65d";--fa--fa:"\f65d\f65d"}.fa-hexagon-nodes-bolt{--fa:"\e69a";--fa--fa:"\e69a\e69a"}.fa-store{--fa:"\f54e";--fa--fa:"\f54e\f54e"}.fa-arrow-trend-up{--fa:"\e098";--fa--fa:"\e098\e098"}.fa-plug-circle-minus{--fa:"\e55e";--fa--fa:"\e55e\e55e"}.fa-sign,.fa-sign-hanging{--fa:"\f4d9";--fa--fa:"\f4d9\f4d9"}.fa-bezier-curve{--fa:"\f55b";--fa--fa:"\f55b\f55b"}.fa-bell-slash{--fa:"\f1f6";--fa--fa:"\f1f6\f1f6"}.fa-tablet,.fa-tablet-android{--fa:"\f3fb";--fa--fa:"\f3fb\f3fb"}.fa-school-flag{--fa:"\e56e";--fa--fa:"\e56e\e56e"}.fa-fill{--fa:"\f575";--fa--fa:"\f575\f575"}.fa-angle-up{--fa:"\f106";--fa--fa:"\f106\f106"}.fa-drumstick-bite{--fa:"\f6d7";--fa--fa:"\f6d7\f6d7"}.fa-holly-berry{--fa:"\f7aa";--fa--fa:"\f7aa\f7aa"}.fa-chevron-left{--fa:"\f053";--fa--fa:"\f053\f053"}.fa-bacteria{--fa:"\e059";--fa--fa:"\e059\e059"}.fa-hand-lizard{--fa:"\f258";--fa--fa:"\f258\f258"}.fa-notdef{--fa:"\e1fe";--fa--fa:"\e1fe\e1fe"}.fa-disease{--fa:"\f7fa";--fa--fa:"\f7fa\f7fa"}.fa-briefcase-medical{--fa:"\f469";--fa--fa:"\f469\f469"}.fa-genderless{--fa:"\f22d";--fa--fa:"\f22d\f22d"}.fa-chevron-right{--fa:"\f054";--fa--fa:"\f054\f054"}.fa-retweet{--fa:"\f079";--fa--fa:"\f079\f079"}.fa-car-alt,.fa-car-rear{--fa:"\f5de";--fa--fa:"\f5de\f5de"}.fa-pump-soap{--fa:"\e06b";--fa--fa:"\e06b\e06b"}.fa-video-slash{--fa:"\f4e2";--fa--fa:"\f4e2\f4e2"}.fa-battery-2,.fa-battery-quarter{--fa:"\f243";--fa--fa:"\f243\f243"}.fa-radio{--fa:"\f8d7";--fa--fa:"\f8d7\f8d7"}.fa-baby-carriage,.fa-carriage-baby{--fa:"\f77d";--fa--fa:"\f77d\f77d"}.fa-traffic-light{--fa:"\f637";--fa--fa:"\f637\f637"}.fa-thermometer{--fa:"\f491";--fa--fa:"\f491\f491"}.fa-vr-cardboard{--fa:"\f729";--fa--fa:"\f729\f729"}.fa-hand-middle-finger{--fa:"\f806";--fa--fa:"\f806\f806"}.fa-percent,.fa-percentage{--fa:"\25";--fa--fa:"\25\25"}.fa-truck-moving{--fa:"\f4df";--fa--fa:"\f4df\f4df"}.fa-glass-water-droplet{--fa:"\e4f5";--fa--fa:"\e4f5\e4f5"}.fa-display{--fa:"\e163";--fa--fa:"\e163\e163"}.fa-face-smile,.fa-smile{--fa:"\f118";--fa--fa:"\f118\f118"}.fa-thumb-tack,.fa-thumbtack{--fa:"\f08d";--fa--fa:"\f08d\f08d"}.fa-trophy{--fa:"\f091";--fa--fa:"\f091\f091"}.fa-person-praying,.fa-pray{--fa:"\f683";--fa--fa:"\f683\f683"}.fa-hammer{--fa:"\f6e3";--fa--fa:"\f6e3\f6e3"}.fa-hand-peace{--fa:"\f25b";--fa--fa:"\f25b\f25b"}.fa-rotate,.fa-sync-alt{--fa:"\f2f1";--fa--fa:"\f2f1\f2f1"}.fa-spinner{--fa:"\f110";--fa--fa:"\f110\f110"}.fa-robot{--fa:"\f544";--fa--fa:"\f544\f544"}.fa-peace{--fa:"\f67c";--fa--fa:"\f67c\f67c"}.fa-cogs,.fa-gears{--fa:"\f085";--fa--fa:"\f085\f085"}.fa-warehouse{--fa:"\f494";--fa--fa:"\f494\f494"}.fa-arrow-up-right-dots{--fa:"\e4b7";--fa--fa:"\e4b7\e4b7"}.fa-splotch{--fa:"\f5bc";--fa--fa:"\f5bc\f5bc"}.fa-face-grin-hearts,.fa-grin-hearts{--fa:"\f584";--fa--fa:"\f584\f584"}.fa-dice-four{--fa:"\f524";--fa--fa:"\f524\f524"}.fa-sim-card{--fa:"\f7c4";--fa--fa:"\f7c4\f7c4"}.fa-transgender,.fa-transgender-alt{--fa:"\f225";--fa--fa:"\f225\f225"}.fa-mercury{--fa:"\f223";--fa--fa:"\f223\f223"}.fa-arrow-turn-down,.fa-level-down{--fa:"\f149";--fa--fa:"\f149\f149"}.fa-person-falling-burst{--fa:"\e547";--fa--fa:"\e547\e547"}.fa-award{--fa:"\f559";--fa--fa:"\f559\f559"}.fa-ticket-alt,.fa-ticket-simple{--fa:"\f3ff";--fa--fa:"\f3ff\f3ff"}.fa-building{--fa:"\f1ad";--fa--fa:"\f1ad\f1ad"}.fa-angle-double-left,.fa-angles-left{--fa:"\f100";--fa--fa:"\f100\f100"}.fa-qrcode{--fa:"\f029";--fa--fa:"\f029\f029"}.fa-clock-rotate-left,.fa-history{--fa:"\f1da";--fa--fa:"\f1da\f1da"}.fa-face-grin-beam-sweat,.fa-grin-beam-sweat{--fa:"\f583";--fa--fa:"\f583\f583"}.fa-arrow-right-from-file,.fa-file-export{--fa:"\f56e";--fa--fa:"\f56e\f56e"}.fa-shield,.fa-shield-blank{--fa:"\f132";--fa--fa:"\f132\f132"}.fa-arrow-up-short-wide,.fa-sort-amount-up-alt{--fa:"\f885";--fa--fa:"\f885\f885"}.fa-comment-nodes{--fa:"\e696";--fa--fa:"\e696\e696"}.fa-house-medical{--fa:"\e3b2";--fa--fa:"\e3b2\e3b2"}.fa-golf-ball,.fa-golf-ball-tee{--fa:"\f450";--fa--fa:"\f450\f450"}.fa-chevron-circle-left,.fa-circle-chevron-left{--fa:"\f137";--fa--fa:"\f137\f137"}.fa-house-chimney-window{--fa:"\e00d";--fa--fa:"\e00d\e00d"}.fa-pen-nib{--fa:"\f5ad";--fa--fa:"\f5ad\f5ad"}.fa-tent-arrow-turn-left{--fa:"\e580";--fa--fa:"\e580\e580"}.fa-tents{--fa:"\e582";--fa--fa:"\e582\e582"}.fa-magic,.fa-wand-magic{--fa:"\f0d0";--fa--fa:"\f0d0\f0d0"}.fa-dog{--fa:"\f6d3";--fa--fa:"\f6d3\f6d3"}.fa-carrot{--fa:"\f787";--fa--fa:"\f787\f787"}.fa-moon{--fa:"\f186";--fa--fa:"\f186\f186"}.fa-wine-glass-alt,.fa-wine-glass-empty{--fa:"\f5ce";--fa--fa:"\f5ce\f5ce"}.fa-cheese{--fa:"\f7ef";--fa--fa:"\f7ef\f7ef"}.fa-yin-yang{--fa:"\f6ad";--fa--fa:"\f6ad\f6ad"}.fa-music{--fa:"\f001";--fa--fa:"\f001\f001"}.fa-code-commit{--fa:"\f386";--fa--fa:"\f386\f386"}.fa-temperature-low{--fa:"\f76b";--fa--fa:"\f76b\f76b"}.fa-biking,.fa-person-biking{--fa:"\f84a";--fa--fa:"\f84a\f84a"}.fa-broom{--fa:"\f51a";--fa--fa:"\f51a\f51a"}.fa-shield-heart{--fa:"\e574";--fa--fa:"\e574\e574"}.fa-gopuram{--fa:"\f664";--fa--fa:"\f664\f664"}.fa-earth-oceania,.fa-globe-oceania{--fa:"\e47b";--fa--fa:"\e47b\e47b"}.fa-square-xmark,.fa-times-square,.fa-xmark-square{--fa:"\f2d3";--fa--fa:"\f2d3\f2d3"}.fa-hashtag{--fa:"\23";--fa--fa:"\23\23"}.fa-expand-alt,.fa-up-right-and-down-left-from-center{--fa:"\f424";--fa--fa:"\f424\f424"}.fa-oil-can{--fa:"\f613";--fa--fa:"\f613\f613"}.fa-t{--fa:"\54";--fa--fa:"\54\54"}.fa-hippo{--fa:"\f6ed";--fa--fa:"\f6ed\f6ed"}.fa-chart-column{--fa:"\e0e3";--fa--fa:"\e0e3\e0e3"}.fa-infinity{--fa:"\f534";--fa--fa:"\f534\f534"}.fa-vial-circle-check{--fa:"\e596";--fa--fa:"\e596\e596"}.fa-person-arrow-down-to-line{--fa:"\e538";--fa--fa:"\e538\e538"}.fa-voicemail{--fa:"\f897";--fa--fa:"\f897\f897"}.fa-fan{--fa:"\f863";--fa--fa:"\f863\f863"}.fa-person-walking-luggage{--fa:"\e554";--fa--fa:"\e554\e554"}.fa-arrows-alt-v,.fa-up-down{--fa:"\f338";--fa--fa:"\f338\f338"}.fa-cloud-moon-rain{--fa:"\f73c";--fa--fa:"\f73c\f73c"}.fa-calendar{--fa:"\f133";--fa--fa:"\f133\f133"}.fa-trailer{--fa:"\e041";--fa--fa:"\e041\e041"}.fa-bahai,.fa-haykal{--fa:"\f666";--fa--fa:"\f666\f666"}.fa-sd-card{--fa:"\f7c2";--fa--fa:"\f7c2\f7c2"}.fa-dragon{--fa:"\f6d5";--fa--fa:"\f6d5\f6d5"}.fa-shoe-prints{--fa:"\f54b";--fa--fa:"\f54b\f54b"}.fa-circle-plus,.fa-plus-circle{--fa:"\f055";--fa--fa:"\f055\f055"}.fa-face-grin-tongue-wink,.fa-grin-tongue-wink{--fa:"\f58b";--fa--fa:"\f58b\f58b"}.fa-hand-holding{--fa:"\f4bd";--fa--fa:"\f4bd\f4bd"}.fa-plug-circle-exclamation{--fa:"\e55d";--fa--fa:"\e55d\e55d"}.fa-chain-broken,.fa-chain-slash,.fa-link-slash,.fa-unlink{--fa:"\f127";--fa--fa:"\f127\f127"}.fa-clone{--fa:"\f24d";--fa--fa:"\f24d\f24d"}.fa-person-walking-arrow-loop-left{--fa:"\e551";--fa--fa:"\e551\e551"}.fa-arrow-up-z-a,.fa-sort-alpha-up-alt{--fa:"\f882";--fa--fa:"\f882\f882"}.fa-fire-alt,.fa-fire-flame-curved{--fa:"\f7e4";--fa--fa:"\f7e4\f7e4"}.fa-tornado{--fa:"\f76f";--fa--fa:"\f76f\f76f"}.fa-file-circle-plus{--fa:"\e494";--fa--fa:"\e494\e494"}.fa-book-quran,.fa-quran{--fa:"\f687";--fa--fa:"\f687\f687"}.fa-anchor{--fa:"\f13d";--fa--fa:"\f13d\f13d"}.fa-border-all{--fa:"\f84c";--fa--fa:"\f84c\f84c"}.fa-angry,.fa-face-angry{--fa:"\f556";--fa--fa:"\f556\f556"}.fa-cookie-bite{--fa:"\f564";--fa--fa:"\f564\f564"}.fa-arrow-trend-down{--fa:"\e097";--fa--fa:"\e097\e097"}.fa-feed,.fa-rss{--fa:"\f09e";--fa--fa:"\f09e\f09e"}.fa-draw-polygon{--fa:"\f5ee";--fa--fa:"\f5ee\f5ee"}.fa-balance-scale,.fa-scale-balanced{--fa:"\f24e";--fa--fa:"\f24e\f24e"}.fa-gauge-simple-high,.fa-tachometer,.fa-tachometer-fast{--fa:"\f62a";--fa--fa:"\f62a\f62a"}.fa-shower{--fa:"\f2cc";--fa--fa:"\f2cc\f2cc"}.fa-desktop,.fa-desktop-alt{--fa:"\f390";--fa--fa:"\f390\f390"}.fa-m{--fa:"\4d";--fa--fa:"\4d\4d"}.fa-table-list,.fa-th-list{--fa:"\f00b";--fa--fa:"\f00b\f00b"}.fa-comment-sms,.fa-sms{--fa:"\f7cd";--fa--fa:"\f7cd\f7cd"}.fa-book{--fa:"\f02d";--fa--fa:"\f02d\f02d"}.fa-user-plus{--fa:"\f234";--fa--fa:"\f234\f234"}.fa-check{--fa:"\f00c";--fa--fa:"\f00c\f00c"}.fa-battery-4,.fa-battery-three-quarters{--fa:"\f241";--fa--fa:"\f241\f241"}.fa-house-circle-check{--fa:"\e509";--fa--fa:"\e509\e509"}.fa-angle-left{--fa:"\f104";--fa--fa:"\f104\f104"}.fa-diagram-successor{--fa:"\e47a";--fa--fa:"\e47a\e47a"}.fa-truck-arrow-right{--fa:"\e58b";--fa--fa:"\e58b\e58b"}.fa-arrows-split-up-and-left{--fa:"\e4bc";--fa--fa:"\e4bc\e4bc"}.fa-fist-raised,.fa-hand-fist{--fa:"\f6de";--fa--fa:"\f6de\f6de"}.fa-cloud-moon{--fa:"\f6c3";--fa--fa:"\f6c3\f6c3"}.fa-briefcase{--fa:"\f0b1";--fa--fa:"\f0b1\f0b1"}.fa-person-falling{--fa:"\e546";--fa--fa:"\e546\e546"}.fa-image-portrait,.fa-portrait{--fa:"\f3e0";--fa--fa:"\f3e0\f3e0"}.fa-user-tag{--fa:"\f507";--fa--fa:"\f507\f507"}.fa-rug{--fa:"\e569";--fa--fa:"\e569\e569"}.fa-earth-europe,.fa-globe-europe{--fa:"\f7a2";--fa--fa:"\f7a2\f7a2"}.fa-cart-flatbed-suitcase,.fa-luggage-cart{--fa:"\f59d";--fa--fa:"\f59d\f59d"}.fa-rectangle-times,.fa-rectangle-xmark,.fa-times-rectangle,.fa-window-close{--fa:"\f410";--fa--fa:"\f410\f410"}.fa-baht-sign{--fa:"\e0ac";--fa--fa:"\e0ac\e0ac"}.fa-book-open{--fa:"\f518";--fa--fa:"\f518\f518"}.fa-book-journal-whills,.fa-journal-whills{--fa:"\f66a";--fa--fa:"\f66a\f66a"}.fa-handcuffs{--fa:"\e4f8";--fa--fa:"\e4f8\e4f8"}.fa-exclamation-triangle,.fa-triangle-exclamation,.fa-warning{--fa:"\f071";--fa--fa:"\f071\f071"}.fa-database{--fa:"\f1c0";--fa--fa:"\f1c0\f1c0"}.fa-mail-forward,.fa-share{--fa:"\f064";--fa--fa:"\f064\f064"}.fa-bottle-droplet{--fa:"\e4c4";--fa--fa:"\e4c4\e4c4"}.fa-mask-face{--fa:"\e1d7";--fa--fa:"\e1d7\e1d7"}.fa-hill-rockslide{--fa:"\e508";--fa--fa:"\e508\e508"}.fa-exchange-alt,.fa-right-left{--fa:"\f362";--fa--fa:"\f362\f362"}.fa-paper-plane{--fa:"\f1d8";--fa--fa:"\f1d8\f1d8"}.fa-road-circle-exclamation{--fa:"\e565";--fa--fa:"\e565\e565"}.fa-dungeon{--fa:"\f6d9";--fa--fa:"\f6d9\f6d9"}.fa-align-right{--fa:"\f038";--fa--fa:"\f038\f038"}.fa-money-bill-1-wave,.fa-money-bill-wave-alt{--fa:"\f53b";--fa--fa:"\f53b\f53b"}.fa-life-ring{--fa:"\f1cd";--fa--fa:"\f1cd\f1cd"}.fa-hands,.fa-sign-language,.fa-signing{--fa:"\f2a7";--fa--fa:"\f2a7\f2a7"}.fa-calendar-day{--fa:"\f783";--fa--fa:"\f783\f783"}.fa-ladder-water,.fa-swimming-pool,.fa-water-ladder{--fa:"\f5c5";--fa--fa:"\f5c5\f5c5"}.fa-arrows-up-down,.fa-arrows-v{--fa:"\f07d";--fa--fa:"\f07d\f07d"}.fa-face-grimace,.fa-grimace{--fa:"\f57f";--fa--fa:"\f57f\f57f"}.fa-wheelchair-alt,.fa-wheelchair-move{--fa:"\e2ce";--fa--fa:"\e2ce\e2ce"}.fa-level-down-alt,.fa-turn-down{--fa:"\f3be";--fa--fa:"\f3be\f3be"}.fa-person-walking-arrow-right{--fa:"\e552";--fa--fa:"\e552\e552"}.fa-envelope-square,.fa-square-envelope{--fa:"\f199";--fa--fa:"\f199\f199"}.fa-dice{--fa:"\f522";--fa--fa:"\f522\f522"}.fa-bowling-ball{--fa:"\f436";--fa--fa:"\f436\f436"}.fa-brain{--fa:"\f5dc";--fa--fa:"\f5dc\f5dc"}.fa-band-aid,.fa-bandage{--fa:"\f462";--fa--fa:"\f462\f462"}.fa-calendar-minus{--fa:"\f272";--fa--fa:"\f272\f272"}.fa-circle-xmark,.fa-times-circle,.fa-xmark-circle{--fa:"\f057";--fa--fa:"\f057\f057"}.fa-gifts{--fa:"\f79c";--fa--fa:"\f79c\f79c"}.fa-hotel{--fa:"\f594";--fa--fa:"\f594\f594"}.fa-earth-asia,.fa-globe-asia{--fa:"\f57e";--fa--fa:"\f57e\f57e"}.fa-id-card-alt,.fa-id-card-clip{--fa:"\f47f";--fa--fa:"\f47f\f47f"}.fa-magnifying-glass-plus,.fa-search-plus{--fa:"\f00e";--fa--fa:"\f00e\f00e"}.fa-thumbs-up{--fa:"\f164";--fa--fa:"\f164\f164"}.fa-user-clock{--fa:"\f4fd";--fa--fa:"\f4fd\f4fd"}.fa-allergies,.fa-hand-dots{--fa:"\f461";--fa--fa:"\f461\f461"}.fa-file-invoice{--fa:"\f570";--fa--fa:"\f570\f570"}.fa-window-minimize{--fa:"\f2d1";--fa--fa:"\f2d1\f2d1"}.fa-coffee,.fa-mug-saucer{--fa:"\f0f4";--fa--fa:"\f0f4\f0f4"}.fa-brush{--fa:"\f55d";--fa--fa:"\f55d\f55d"}.fa-file-half-dashed{--fa:"\e698";--fa--fa:"\e698\e698"}.fa-mask{--fa:"\f6fa";--fa--fa:"\f6fa\f6fa"}.fa-magnifying-glass-minus,.fa-search-minus{--fa:"\f010";--fa--fa:"\f010\f010"}.fa-ruler-vertical{--fa:"\f548";--fa--fa:"\f548\f548"}.fa-user-alt,.fa-user-large{--fa:"\f406";--fa--fa:"\f406\f406"}.fa-train-tram{--fa:"\e5b4";--fa--fa:"\e5b4\e5b4"}.fa-user-nurse{--fa:"\f82f";--fa--fa:"\f82f\f82f"}.fa-syringe{--fa:"\f48e";--fa--fa:"\f48e\f48e"}.fa-cloud-sun{--fa:"\f6c4";--fa--fa:"\f6c4\f6c4"}.fa-stopwatch-20{--fa:"\e06f";--fa--fa:"\e06f\e06f"}.fa-square-full{--fa:"\f45c";--fa--fa:"\f45c\f45c"}.fa-magnet{--fa:"\f076";--fa--fa:"\f076\f076"}.fa-jar{--fa:"\e516";--fa--fa:"\e516\e516"}.fa-note-sticky,.fa-sticky-note{--fa:"\f249";--fa--fa:"\f249\f249"}.fa-bug-slash{--fa:"\e490";--fa--fa:"\e490\e490"}.fa-arrow-up-from-water-pump{--fa:"\e4b6";--fa--fa:"\e4b6\e4b6"}.fa-bone{--fa:"\f5d7";--fa--fa:"\f5d7\f5d7"}.fa-table-cells-row-unlock{--fa:"\e691";--fa--fa:"\e691\e691"}.fa-user-injured{--fa:"\f728";--fa--fa:"\f728\f728"}.fa-face-sad-tear,.fa-sad-tear{--fa:"\f5b4";--fa--fa:"\f5b4\f5b4"}.fa-plane{--fa:"\f072";--fa--fa:"\f072\f072"}.fa-tent-arrows-down{--fa:"\e581";--fa--fa:"\e581\e581"}.fa-exclamation{--fa:"\21";--fa--fa:"\21\21"}.fa-arrows-spin{--fa:"\e4bb";--fa--fa:"\e4bb\e4bb"}.fa-print{--fa:"\f02f";--fa--fa:"\f02f\f02f"}.fa-try,.fa-turkish-lira,.fa-turkish-lira-sign{--fa:"\e2bb";--fa--fa:"\e2bb\e2bb"}.fa-dollar,.fa-dollar-sign,.fa-usd{--fa:"\24";--fa--fa:"\24\24"}.fa-x{--fa:"\58";--fa--fa:"\58\58"}.fa-magnifying-glass-dollar,.fa-search-dollar{--fa:"\f688";--fa--fa:"\f688\f688"}.fa-users-cog,.fa-users-gear{--fa:"\f509";--fa--fa:"\f509\f509"}.fa-person-military-pointing{--fa:"\e54a";--fa--fa:"\e54a\e54a"}.fa-bank,.fa-building-columns,.fa-institution,.fa-museum,.fa-university{--fa:"\f19c";--fa--fa:"\f19c\f19c"}.fa-umbrella{--fa:"\f0e9";--fa--fa:"\f0e9\f0e9"}.fa-trowel{--fa:"\e589";--fa--fa:"\e589\e589"}.fa-d{--fa:"\44";--fa--fa:"\44\44"}.fa-stapler{--fa:"\e5af";--fa--fa:"\e5af\e5af"}.fa-masks-theater,.fa-theater-masks{--fa:"\f630";--fa--fa:"\f630\f630"}.fa-kip-sign{--fa:"\e1c4";--fa--fa:"\e1c4\e1c4"}.fa-hand-point-left{--fa:"\f0a5";--fa--fa:"\f0a5\f0a5"}.fa-handshake-alt,.fa-handshake-simple{--fa:"\f4c6";--fa--fa:"\f4c6\f4c6"}.fa-fighter-jet,.fa-jet-fighter{--fa:"\f0fb";--fa--fa:"\f0fb\f0fb"}.fa-share-alt-square,.fa-square-share-nodes{--fa:"\f1e1";--fa--fa:"\f1e1\f1e1"}.fa-barcode{--fa:"\f02a";--fa--fa:"\f02a\f02a"}.fa-plus-minus{--fa:"\e43c";--fa--fa:"\e43c\e43c"}.fa-video,.fa-video-camera{--fa:"\f03d";--fa--fa:"\f03d\f03d"}.fa-graduation-cap,.fa-mortar-board{--fa:"\f19d";--fa--fa:"\f19d\f19d"}.fa-hand-holding-medical{--fa:"\e05c";--fa--fa:"\e05c\e05c"}.fa-person-circle-check{--fa:"\e53e";--fa--fa:"\e53e\e53e"}.fa-level-up-alt,.fa-turn-up{--fa:"\f3bf";--fa--fa:"\f3bf\f3bf"}
.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host,:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(/static/media/fa-brands-400.fdbb558523a380307689.woff2) format("woff2"),url(/static/media/fa-brands-400.26b80c8830bebf340211.ttf) format("truetype")}.fa-brands,.fab{font-weight:400}.fa-monero{--fa:"\f3d0"}.fa-hooli{--fa:"\f427"}.fa-yelp{--fa:"\f1e9"}.fa-cc-visa{--fa:"\f1f0"}.fa-lastfm{--fa:"\f202"}.fa-shopware{--fa:"\f5b5"}.fa-creative-commons-nc{--fa:"\f4e8"}.fa-aws{--fa:"\f375"}.fa-redhat{--fa:"\f7bc"}.fa-yoast{--fa:"\f2b1"}.fa-cloudflare{--fa:"\e07d"}.fa-ups{--fa:"\f7e0"}.fa-pixiv{--fa:"\e640"}.fa-wpexplorer{--fa:"\f2de"}.fa-dyalog{--fa:"\f399"}.fa-bity{--fa:"\f37a"}.fa-stackpath{--fa:"\f842"}.fa-buysellads{--fa:"\f20d"}.fa-first-order{--fa:"\f2b0"}.fa-modx{--fa:"\f285"}.fa-guilded{--fa:"\e07e"}.fa-vnv{--fa:"\f40b"}.fa-js-square,.fa-square-js{--fa:"\f3b9"}.fa-microsoft{--fa:"\f3ca"}.fa-qq{--fa:"\f1d6"}.fa-orcid{--fa:"\f8d2"}.fa-java{--fa:"\f4e4"}.fa-invision{--fa:"\f7b0"}.fa-creative-commons-pd-alt{--fa:"\f4ed"}.fa-centercode{--fa:"\f380"}.fa-glide-g{--fa:"\f2a6"}.fa-drupal{--fa:"\f1a9"}.fa-jxl{--fa:"\e67b"}.fa-dart-lang{--fa:"\e693"}.fa-hire-a-helper{--fa:"\f3b0"}.fa-creative-commons-by{--fa:"\f4e7"}.fa-unity{--fa:"\e049"}.fa-whmcs{--fa:"\f40d"}.fa-rocketchat{--fa:"\f3e8"}.fa-vk{--fa:"\f189"}.fa-untappd{--fa:"\f405"}.fa-mailchimp{--fa:"\f59e"}.fa-css3-alt{--fa:"\f38b"}.fa-reddit-square,.fa-square-reddit{--fa:"\f1a2"}.fa-vimeo-v{--fa:"\f27d"}.fa-contao{--fa:"\f26d"}.fa-square-font-awesome{--fa:"\e5ad"}.fa-deskpro{--fa:"\f38f"}.fa-brave{--fa:"\e63c"}.fa-sistrix{--fa:"\f3ee"}.fa-instagram-square,.fa-square-instagram{--fa:"\e055"}.fa-battle-net{--fa:"\f835"}.fa-the-red-yeti{--fa:"\f69d"}.fa-hacker-news-square,.fa-square-hacker-news{--fa:"\f3af"}.fa-edge{--fa:"\f282"}.fa-threads{--fa:"\e618"}.fa-napster{--fa:"\f3d2"}.fa-snapchat-square,.fa-square-snapchat{--fa:"\f2ad"}.fa-google-plus-g{--fa:"\f0d5"}.fa-artstation{--fa:"\f77a"}.fa-markdown{--fa:"\f60f"}.fa-sourcetree{--fa:"\f7d3"}.fa-google-plus{--fa:"\f2b3"}.fa-diaspora{--fa:"\f791"}.fa-foursquare{--fa:"\f180"}.fa-stack-overflow{--fa:"\f16c"}.fa-github-alt{--fa:"\f113"}.fa-phoenix-squadron{--fa:"\f511"}.fa-pagelines{--fa:"\f18c"}.fa-algolia{--fa:"\f36c"}.fa-red-river{--fa:"\f3e3"}.fa-creative-commons-sa{--fa:"\f4ef"}.fa-safari{--fa:"\f267"}.fa-google{--fa:"\f1a0"}.fa-font-awesome-alt,.fa-square-font-awesome-stroke{--fa:"\f35c"}.fa-atlassian{--fa:"\f77b"}.fa-linkedin-in{--fa:"\f0e1"}.fa-digital-ocean{--fa:"\f391"}.fa-nimblr{--fa:"\f5a8"}.fa-chromecast{--fa:"\f838"}.fa-evernote{--fa:"\f839"}.fa-hacker-news{--fa:"\f1d4"}.fa-creative-commons-sampling{--fa:"\f4f0"}.fa-adversal{--fa:"\f36a"}.fa-creative-commons{--fa:"\f25e"}.fa-watchman-monitoring{--fa:"\e087"}.fa-fonticons{--fa:"\f280"}.fa-weixin{--fa:"\f1d7"}.fa-shirtsinbulk{--fa:"\f214"}.fa-codepen{--fa:"\f1cb"}.fa-git-alt{--fa:"\f841"}.fa-lyft{--fa:"\f3c3"}.fa-rev{--fa:"\f5b2"}.fa-windows{--fa:"\f17a"}.fa-wizards-of-the-coast{--fa:"\f730"}.fa-square-viadeo,.fa-viadeo-square{--fa:"\f2aa"}.fa-meetup{--fa:"\f2e0"}.fa-centos{--fa:"\f789"}.fa-adn{--fa:"\f170"}.fa-cloudsmith{--fa:"\f384"}.fa-opensuse{--fa:"\e62b"}.fa-pied-piper-alt{--fa:"\f1a8"}.fa-dribbble-square,.fa-square-dribbble{--fa:"\f397"}.fa-codiepie{--fa:"\f284"}.fa-node{--fa:"\f419"}.fa-mix{--fa:"\f3cb"}.fa-steam{--fa:"\f1b6"}.fa-cc-apple-pay{--fa:"\f416"}.fa-scribd{--fa:"\f28a"}.fa-debian{--fa:"\e60b"}.fa-openid{--fa:"\f19b"}.fa-instalod{--fa:"\e081"}.fa-files-pinwheel{--fa:"\e69f"}.fa-expeditedssl{--fa:"\f23e"}.fa-sellcast{--fa:"\f2da"}.fa-square-twitter,.fa-twitter-square{--fa:"\f081"}.fa-r-project{--fa:"\f4f7"}.fa-delicious{--fa:"\f1a5"}.fa-freebsd{--fa:"\f3a4"}.fa-vuejs{--fa:"\f41f"}.fa-accusoft{--fa:"\f369"}.fa-ioxhost{--fa:"\f208"}.fa-fonticons-fi{--fa:"\f3a2"}.fa-app-store{--fa:"\f36f"}.fa-cc-mastercard{--fa:"\f1f1"}.fa-itunes-note{--fa:"\f3b5"}.fa-golang{--fa:"\e40f"}.fa-kickstarter,.fa-square-kickstarter{--fa:"\f3bb"}.fa-grav{--fa:"\f2d6"}.fa-weibo{--fa:"\f18a"}.fa-uncharted{--fa:"\e084"}.fa-firstdraft{--fa:"\f3a1"}.fa-square-youtube,.fa-youtube-square{--fa:"\f431"}.fa-wikipedia-w{--fa:"\f266"}.fa-rendact,.fa-wpressr{--fa:"\f3e4"}.fa-angellist{--fa:"\f209"}.fa-galactic-republic{--fa:"\f50c"}.fa-nfc-directional{--fa:"\e530"}.fa-skype{--fa:"\f17e"}.fa-joget{--fa:"\f3b7"}.fa-fedora{--fa:"\f798"}.fa-stripe-s{--fa:"\f42a"}.fa-meta{--fa:"\e49b"}.fa-laravel{--fa:"\f3bd"}.fa-hotjar{--fa:"\f3b1"}.fa-bluetooth-b{--fa:"\f294"}.fa-square-letterboxd{--fa:"\e62e"}.fa-sticker-mule{--fa:"\f3f7"}.fa-creative-commons-zero{--fa:"\f4f3"}.fa-hips{--fa:"\f452"}.fa-css{--fa:"\e6a2"}.fa-behance{--fa:"\f1b4"}.fa-reddit{--fa:"\f1a1"}.fa-discord{--fa:"\f392"}.fa-chrome{--fa:"\f268"}.fa-app-store-ios{--fa:"\f370"}.fa-cc-discover{--fa:"\f1f2"}.fa-wpbeginner{--fa:"\f297"}.fa-confluence{--fa:"\f78d"}.fa-shoelace{--fa:"\e60c"}.fa-mdb{--fa:"\f8ca"}.fa-dochub{--fa:"\f394"}.fa-accessible-icon{--fa:"\f368"}.fa-ebay{--fa:"\f4f4"}.fa-amazon{--fa:"\f270"}.fa-unsplash{--fa:"\e07c"}.fa-yarn{--fa:"\f7e3"}.fa-square-steam,.fa-steam-square{--fa:"\f1b7"}.fa-500px{--fa:"\f26e"}.fa-square-vimeo,.fa-vimeo-square{--fa:"\f194"}.fa-asymmetrik{--fa:"\f372"}.fa-font-awesome,.fa-font-awesome-flag,.fa-font-awesome-logo-full{--fa:"\f2b4"}.fa-gratipay{--fa:"\f184"}.fa-apple{--fa:"\f179"}.fa-hive{--fa:"\e07f"}.fa-gitkraken{--fa:"\f3a6"}.fa-keybase{--fa:"\f4f5"}.fa-apple-pay{--fa:"\f415"}.fa-padlet{--fa:"\e4a0"}.fa-amazon-pay{--fa:"\f42c"}.fa-github-square,.fa-square-github{--fa:"\f092"}.fa-stumbleupon{--fa:"\f1a4"}.fa-fedex{--fa:"\f797"}.fa-phoenix-framework{--fa:"\f3dc"}.fa-shopify{--fa:"\e057"}.fa-neos{--fa:"\f612"}.fa-square-threads{--fa:"\e619"}.fa-hackerrank{--fa:"\f5f7"}.fa-researchgate{--fa:"\f4f8"}.fa-swift{--fa:"\f8e1"}.fa-angular{--fa:"\f420"}.fa-speakap{--fa:"\f3f3"}.fa-angrycreative{--fa:"\f36e"}.fa-y-combinator{--fa:"\f23b"}.fa-empire{--fa:"\f1d1"}.fa-envira{--fa:"\f299"}.fa-google-scholar{--fa:"\e63b"}.fa-gitlab-square,.fa-square-gitlab{--fa:"\e5ae"}.fa-studiovinari{--fa:"\f3f8"}.fa-pied-piper{--fa:"\f2ae"}.fa-wordpress{--fa:"\f19a"}.fa-product-hunt{--fa:"\f288"}.fa-firefox{--fa:"\f269"}.fa-linode{--fa:"\f2b8"}.fa-goodreads{--fa:"\f3a8"}.fa-odnoklassniki-square,.fa-square-odnoklassniki{--fa:"\f264"}.fa-jsfiddle{--fa:"\f1cc"}.fa-sith{--fa:"\f512"}.fa-themeisle{--fa:"\f2b2"}.fa-page4{--fa:"\f3d7"}.fa-hashnode{--fa:"\e499"}.fa-react{--fa:"\f41b"}.fa-cc-paypal{--fa:"\f1f4"}.fa-squarespace{--fa:"\f5be"}.fa-cc-stripe{--fa:"\f1f5"}.fa-creative-commons-share{--fa:"\f4f2"}.fa-bitcoin{--fa:"\f379"}.fa-keycdn{--fa:"\f3ba"}.fa-opera{--fa:"\f26a"}.fa-itch-io{--fa:"\f83a"}.fa-umbraco{--fa:"\f8e8"}.fa-galactic-senate{--fa:"\f50d"}.fa-ubuntu{--fa:"\f7df"}.fa-draft2digital{--fa:"\f396"}.fa-stripe{--fa:"\f429"}.fa-houzz{--fa:"\f27c"}.fa-gg{--fa:"\f260"}.fa-dhl{--fa:"\f790"}.fa-pinterest-square,.fa-square-pinterest{--fa:"\f0d3"}.fa-xing{--fa:"\f168"}.fa-blackberry{--fa:"\f37b"}.fa-creative-commons-pd{--fa:"\f4ec"}.fa-playstation{--fa:"\f3df"}.fa-quinscape{--fa:"\f459"}.fa-less{--fa:"\f41d"}.fa-blogger-b{--fa:"\f37d"}.fa-opencart{--fa:"\f23d"}.fa-vine{--fa:"\f1ca"}.fa-signal-messenger{--fa:"\e663"}.fa-paypal{--fa:"\f1ed"}.fa-gitlab{--fa:"\f296"}.fa-typo3{--fa:"\f42b"}.fa-reddit-alien{--fa:"\f281"}.fa-yahoo{--fa:"\f19e"}.fa-dailymotion{--fa:"\e052"}.fa-affiliatetheme{--fa:"\f36b"}.fa-pied-piper-pp{--fa:"\f1a7"}.fa-bootstrap{--fa:"\f836"}.fa-odnoklassniki{--fa:"\f263"}.fa-nfc-symbol{--fa:"\e531"}.fa-mintbit{--fa:"\e62f"}.fa-ethereum{--fa:"\f42e"}.fa-speaker-deck{--fa:"\f83c"}.fa-creative-commons-nc-eu{--fa:"\f4e9"}.fa-patreon{--fa:"\f3d9"}.fa-avianex{--fa:"\f374"}.fa-ello{--fa:"\f5f1"}.fa-gofore{--fa:"\f3a7"}.fa-bimobject{--fa:"\f378"}.fa-brave-reverse{--fa:"\e63d"}.fa-facebook-f{--fa:"\f39e"}.fa-google-plus-square,.fa-square-google-plus{--fa:"\f0d4"}.fa-web-awesome{--fa:"\e682"}.fa-mandalorian{--fa:"\f50f"}.fa-first-order-alt{--fa:"\f50a"}.fa-osi{--fa:"\f41a"}.fa-google-wallet{--fa:"\f1ee"}.fa-d-and-d-beyond{--fa:"\f6ca"}.fa-periscope{--fa:"\f3da"}.fa-fulcrum{--fa:"\f50b"}.fa-cloudscale{--fa:"\f383"}.fa-forumbee{--fa:"\f211"}.fa-mizuni{--fa:"\f3cc"}.fa-schlix{--fa:"\f3ea"}.fa-square-xing,.fa-xing-square{--fa:"\f169"}.fa-bandcamp{--fa:"\f2d5"}.fa-wpforms{--fa:"\f298"}.fa-cloudversify{--fa:"\f385"}.fa-usps{--fa:"\f7e1"}.fa-megaport{--fa:"\f5a3"}.fa-magento{--fa:"\f3c4"}.fa-spotify{--fa:"\f1bc"}.fa-optin-monster{--fa:"\f23c"}.fa-fly{--fa:"\f417"}.fa-square-bluesky{--fa:"\e6a3"}.fa-aviato{--fa:"\f421"}.fa-itunes{--fa:"\f3b4"}.fa-cuttlefish{--fa:"\f38c"}.fa-blogger{--fa:"\f37c"}.fa-flickr{--fa:"\f16e"}.fa-viber{--fa:"\f409"}.fa-soundcloud{--fa:"\f1be"}.fa-digg{--fa:"\f1a6"}.fa-tencent-weibo{--fa:"\f1d5"}.fa-letterboxd{--fa:"\e62d"}.fa-symfony{--fa:"\f83d"}.fa-maxcdn{--fa:"\f136"}.fa-etsy{--fa:"\f2d7"}.fa-facebook-messenger{--fa:"\f39f"}.fa-audible{--fa:"\f373"}.fa-think-peaks{--fa:"\f731"}.fa-bilibili{--fa:"\e3d9"}.fa-erlang{--fa:"\f39d"}.fa-x-twitter{--fa:"\e61b"}.fa-cotton-bureau{--fa:"\f89e"}.fa-dashcube{--fa:"\f210"}.fa-42-group,.fa-innosoft{--fa:"\e080"}.fa-stack-exchange{--fa:"\f18d"}.fa-elementor{--fa:"\f430"}.fa-pied-piper-square,.fa-square-pied-piper{--fa:"\e01e"}.fa-creative-commons-nd{--fa:"\f4eb"}.fa-palfed{--fa:"\f3d8"}.fa-superpowers{--fa:"\f2dd"}.fa-resolving{--fa:"\f3e7"}.fa-xbox{--fa:"\f412"}.fa-square-web-awesome-stroke{--fa:"\e684"}.fa-searchengin{--fa:"\f3eb"}.fa-tiktok{--fa:"\e07b"}.fa-facebook-square,.fa-square-facebook{--fa:"\f082"}.fa-renren{--fa:"\f18b"}.fa-linux{--fa:"\f17c"}.fa-glide{--fa:"\f2a5"}.fa-linkedin{--fa:"\f08c"}.fa-hubspot{--fa:"\f3b2"}.fa-deploydog{--fa:"\f38e"}.fa-twitch{--fa:"\f1e8"}.fa-flutter{--fa:"\e694"}.fa-ravelry{--fa:"\f2d9"}.fa-mixer{--fa:"\e056"}.fa-lastfm-square,.fa-square-lastfm{--fa:"\f203"}.fa-vimeo{--fa:"\f40a"}.fa-mendeley{--fa:"\f7b3"}.fa-uniregistry{--fa:"\f404"}.fa-figma{--fa:"\f799"}.fa-creative-commons-remix{--fa:"\f4ee"}.fa-cc-amazon-pay{--fa:"\f42d"}.fa-dropbox{--fa:"\f16b"}.fa-instagram{--fa:"\f16d"}.fa-cmplid{--fa:"\e360"}.fa-upwork{--fa:"\e641"}.fa-facebook{--fa:"\f09a"}.fa-gripfire{--fa:"\f3ac"}.fa-jedi-order{--fa:"\f50e"}.fa-uikit{--fa:"\f403"}.fa-fort-awesome-alt{--fa:"\f3a3"}.fa-phabricator{--fa:"\f3db"}.fa-ussunnah{--fa:"\f407"}.fa-earlybirds{--fa:"\f39a"}.fa-trade-federation{--fa:"\f513"}.fa-autoprefixer{--fa:"\f41c"}.fa-whatsapp{--fa:"\f232"}.fa-square-upwork{--fa:"\e67c"}.fa-slideshare{--fa:"\f1e7"}.fa-google-play{--fa:"\f3ab"}.fa-viadeo{--fa:"\f2a9"}.fa-line{--fa:"\f3c0"}.fa-google-drive{--fa:"\f3aa"}.fa-servicestack{--fa:"\f3ec"}.fa-simplybuilt{--fa:"\f215"}.fa-bitbucket{--fa:"\f171"}.fa-imdb{--fa:"\f2d8"}.fa-deezer{--fa:"\e077"}.fa-raspberry-pi{--fa:"\f7bb"}.fa-jira{--fa:"\f7b1"}.fa-docker{--fa:"\f395"}.fa-screenpal{--fa:"\e570"}.fa-bluetooth{--fa:"\f293"}.fa-gitter{--fa:"\f426"}.fa-d-and-d{--fa:"\f38d"}.fa-microblog{--fa:"\e01a"}.fa-cc-diners-club{--fa:"\f24c"}.fa-gg-circle{--fa:"\f261"}.fa-pied-piper-hat{--fa:"\f4e5"}.fa-kickstarter-k{--fa:"\f3bc"}.fa-yandex{--fa:"\f413"}.fa-readme{--fa:"\f4d5"}.fa-html5{--fa:"\f13b"}.fa-sellsy{--fa:"\f213"}.fa-square-web-awesome{--fa:"\e683"}.fa-sass{--fa:"\f41e"}.fa-wirsindhandwerk,.fa-wsh{--fa:"\e2d0"}.fa-buromobelexperte{--fa:"\f37f"}.fa-salesforce{--fa:"\f83b"}.fa-octopus-deploy{--fa:"\e082"}.fa-medapps{--fa:"\f3c6"}.fa-ns8{--fa:"\f3d5"}.fa-pinterest-p{--fa:"\f231"}.fa-apper{--fa:"\f371"}.fa-fort-awesome{--fa:"\f286"}.fa-waze{--fa:"\f83f"}.fa-bluesky{--fa:"\e671"}.fa-cc-jcb{--fa:"\f24b"}.fa-snapchat,.fa-snapchat-ghost{--fa:"\f2ab"}.fa-fantasy-flight-games{--fa:"\f6dc"}.fa-rust{--fa:"\e07a"}.fa-wix{--fa:"\f5cf"}.fa-behance-square,.fa-square-behance{--fa:"\f1b5"}.fa-supple{--fa:"\f3f9"}.fa-webflow{--fa:"\e65c"}.fa-rebel{--fa:"\f1d0"}.fa-css3{--fa:"\f13c"}.fa-staylinked{--fa:"\f3f5"}.fa-kaggle{--fa:"\f5fa"}.fa-space-awesome{--fa:"\e5ac"}.fa-deviantart{--fa:"\f1bd"}.fa-cpanel{--fa:"\f388"}.fa-goodreads-g{--fa:"\f3a9"}.fa-git-square,.fa-square-git{--fa:"\f1d2"}.fa-square-tumblr,.fa-tumblr-square{--fa:"\f174"}.fa-trello{--fa:"\f181"}.fa-creative-commons-nc-jp{--fa:"\f4ea"}.fa-get-pocket{--fa:"\f265"}.fa-perbyte{--fa:"\e083"}.fa-grunt{--fa:"\f3ad"}.fa-weebly{--fa:"\f5cc"}.fa-connectdevelop{--fa:"\f20e"}.fa-leanpub{--fa:"\f212"}.fa-black-tie{--fa:"\f27e"}.fa-themeco{--fa:"\f5c6"}.fa-python{--fa:"\f3e2"}.fa-android{--fa:"\f17b"}.fa-bots{--fa:"\e340"}.fa-free-code-camp{--fa:"\f2c5"}.fa-hornbill{--fa:"\f592"}.fa-js{--fa:"\f3b8"}.fa-ideal{--fa:"\e013"}.fa-git{--fa:"\f1d3"}.fa-dev{--fa:"\f6cc"}.fa-sketch{--fa:"\f7c6"}.fa-yandex-international{--fa:"\f414"}.fa-cc-amex{--fa:"\f1f3"}.fa-uber{--fa:"\f402"}.fa-github{--fa:"\f09b"}.fa-php{--fa:"\f457"}.fa-alipay{--fa:"\f642"}.fa-youtube{--fa:"\f167"}.fa-skyatlas{--fa:"\f216"}.fa-firefox-browser{--fa:"\e007"}.fa-replyd{--fa:"\f3e6"}.fa-suse{--fa:"\f7d6"}.fa-jenkins{--fa:"\f3b6"}.fa-twitter{--fa:"\f099"}.fa-rockrms{--fa:"\f3e9"}.fa-pinterest{--fa:"\f0d2"}.fa-buffer{--fa:"\f837"}.fa-npm{--fa:"\f3d4"}.fa-yammer{--fa:"\f840"}.fa-btc{--fa:"\f15a"}.fa-dribbble{--fa:"\f17d"}.fa-stumbleupon-circle{--fa:"\f1a3"}.fa-internet-explorer{--fa:"\f26b"}.fa-stubber{--fa:"\e5c7"}.fa-telegram,.fa-telegram-plane{--fa:"\f2c6"}.fa-old-republic{--fa:"\f510"}.fa-odysee{--fa:"\e5c6"}.fa-square-whatsapp,.fa-whatsapp-square{--fa:"\f40c"}.fa-node-js{--fa:"\f3d3"}.fa-edge-legacy{--fa:"\e078"}.fa-slack,.fa-slack-hash{--fa:"\f198"}.fa-medrt{--fa:"\f3c8"}.fa-usb{--fa:"\f287"}.fa-tumblr{--fa:"\f173"}.fa-vaadin{--fa:"\f408"}.fa-quora{--fa:"\f2c4"}.fa-square-x-twitter{--fa:"\e61a"}.fa-reacteurope{--fa:"\f75d"}.fa-medium,.fa-medium-m{--fa:"\f23a"}.fa-amilia{--fa:"\f36d"}.fa-mixcloud{--fa:"\f289"}.fa-flipboard{--fa:"\f44d"}.fa-viacoin{--fa:"\f237"}.fa-critical-role{--fa:"\f6c9"}.fa-sitrox{--fa:"\e44a"}.fa-discourse{--fa:"\f393"}.fa-joomla{--fa:"\f1aa"}.fa-mastodon{--fa:"\f4f6"}.fa-airbnb{--fa:"\f834"}.fa-wolf-pack-battalion{--fa:"\f514"}.fa-buy-n-large{--fa:"\f8a6"}.fa-gulp{--fa:"\f3ae"}.fa-creative-commons-sampling-plus{--fa:"\f4f1"}.fa-strava{--fa:"\f428"}.fa-ember{--fa:"\f423"}.fa-canadian-maple-leaf{--fa:"\f785"}.fa-teamspeak{--fa:"\f4f9"}.fa-pushed{--fa:"\f3e1"}.fa-wordpress-simple{--fa:"\f411"}.fa-nutritionix{--fa:"\f3d6"}.fa-wodu{--fa:"\e088"}.fa-google-pay{--fa:"\e079"}.fa-intercom{--fa:"\f7af"}.fa-zhihu{--fa:"\f63f"}.fa-korvue{--fa:"\f42f"}.fa-pix{--fa:"\e43a"}.fa-steam-symbol{--fa:"\f3f6"}:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(/static/media/fa-regular-400.4f6a2dabee9c092d09b9.woff2) format("woff2"),url(/static/media/fa-regular-400.05fdd87be89f7f8f0a1e.ttf) format("truetype")}.fa-regular,.far{font-weight:400}:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(/static/media/fa-solid-900.83a538a018a9e44b023a.woff2) format("woff2"),url(/static/media/fa-solid-900.ad1782c70927ebc5bc87.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(/static/media/fa-brands-400.fdbb558523a380307689.woff2) format("woff2"),url(/static/media/fa-brands-400.26b80c8830bebf340211.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(/static/media/fa-solid-900.83a538a018a9e44b023a.woff2) format("woff2"),url(/static/media/fa-solid-900.ad1782c70927ebc5bc87.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(/static/media/fa-regular-400.4f6a2dabee9c092d09b9.woff2) format("woff2"),url(/static/media/fa-regular-400.05fdd87be89f7f8f0a1e.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/static/media/fa-solid-900.83a538a018a9e44b023a.woff2) format("woff2"),url(/static/media/fa-solid-900.ad1782c70927ebc5bc87.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/static/media/fa-brands-400.fdbb558523a380307689.woff2) format("woff2"),url(/static/media/fa-brands-400.26b80c8830bebf340211.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(/static/media/fa-regular-400.4f6a2dabee9c092d09b9.woff2) format("woff2"),url(/static/media/fa-regular-400.05fdd87be89f7f8f0a1e.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(/static/media/fa-v4compatibility.c3ea317a0f10f201597f.woff2) format("woff2"),url(/static/media/fa-v4compatibility.fa86b3c85e77abbd2ebd.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}
.tissue-form-container {
  width: 360px;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tissue-form-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #000;
}

.tissue-form-dropdown {
  width: 360px;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  color: black;
}

.tissue-form-dropdown::placeholder {
  color: black;
}

.tissue-form-input {
  width: 340px;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}

.tissue-form-dropdown:focus,
.tissue-form-input:focus {
  border-color: #883979;
}
/* Container for each checkbox */
.tissue-form-checkbox {
  display: flex;
  align-items: center; /* Align checkbox and label vertically */
  margin-bottom: 10px; /* Add spacing between checkboxes */
}

/* Input checkbox styling */
.tissue-checkbox {
  width: 16px;
  height: 16px;
  margin-right: 8px; /* Space between checkbox and label */
  cursor: pointer;
  -webkit-appearance: auto;
          appearance: auto; /* Ensure default browser appearance */
}

/* Checkbox label styling */
.tissue-checkbox-label {
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.tissue-form-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.tissue-btn {
  width: 48%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.tissue-reset-btn {
  background-color: white;
  border-color: #883979;
  border: solid 1px;
  color: #883979;
}

.tissue-submit-btn {
  background-color: #883979;
  color: #fff;
}

.tissue-btn:hover {
  opacity: 0.9;
}






.tissue-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tissue-form-exit {
  background: none;
  border: none;
  font-size: 1.0rem;
  cursor: pointer;
  color: #333;
}

.tissue-form-exit:hover {
  color: #ff4d4d;
}

.task-card-container {
  position: absolute;
  bottom: 100px;
  right: 25px;
  width: 317px;
  height: 227px;
  background-color: #ffffff;
  z-index: 9999999;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  font-family: Arial, sans-serif;
  color: #333;
}

.task-card-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 18px;
  font-weight: bold;
  color: #666;
  cursor: pointer;
}

.task-card-details {
  margin-bottom: 16px;
}

.task-card-row {
  display: flex;
  justify-content: space-between;
  /* margin: 6px 0; */
}

.task-card-label {
  font-weight: 600;
}

.task-card-value {
  font-weight: 400;
}

.task-card-progress-container {
  position: relative;
  height: 8px;
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.task-card-progress-bar {
  height: 100%;
  background-color: #6c63ff;
}

.task-card-progress-text {
  position: absolute;
  top: -20px;
  right: 0;
  font-size: 12px;
  color: #333;
  font-weight: 500;
}

.result-card-container-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 219px;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 16px;
  font-family: Arial, sans-serif;
  margin: 20px;
  z-index: 999999;
}

/* Header for the card */
.result-card-title-header {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 12px;
  color: #333;
}

/* Container for all the option rows */
.result-card-options-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Individual option row */
.result-card-option-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #555;
}

/* Label for options */
.result-card-option-label {
  font-weight: 600;
  color: #444;
}

.result-card-option-value {
  color: #777;
}

.result-card-button {
  width: 100%;
  margin-top: 16px;
  background-color: #883979;
  color: white;
  font-size: 12px;
  padding: 8px 12px;
  border: solid 1px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.result-card-button-overlay {
  width: 100%;
  margin-top: 16px;
  background-color: white;
  color: #883979;
  font-size: 12px;
  padding: 8px 12px;
  border: solid 1px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.confirmation-box-card {
  width: 421px;
  height: 136px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: Arial, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.confirmation-box-text {
  font-size: 16px;
  color: #333333;
  margin-bottom: 24px;
  font-weight: 500;
}

.confirmation-box-buttons-wrapper {
  display: flex;
  gap: 12px;
}

.confirmation-box-button-no {
  width: 180px;
  height: 32px;
  border: 1px solid #a35294;
  border-radius: 8px;
  background-color: #ffffff;
  color: #a35294;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.confirmation-box-button-no:hover {
  background-color: #f9f1f6;
}

.confirmation-box-button-yes {
  width: 180px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background-color: #a35294;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.confirmation-box-button-yes:hover {
  background-color: #843b76;
}

.report-card-container {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #f5f5f5;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  padding: 10%;
  /* z-index: 9999; */
}

.report-card-icon {
  background-color: #9b4f96;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.report-card-checkmark {
  color: #fff;
  font-size: 36px;
  font-weight: bold;
}

.report-card-message {
  font-size: 24px;
  color: #4a4a4a;
  text-align: center;
  font-weight: 500;
}

.faq-img-container {
  width: 600px;
  height: auto;
  left: 800px;
  top: 40px;
  position: relative;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999999;
}

.faq-img-title {
  border-bottom: 1px solid #ddd;
  margin-top: 10px;
  font-family: Poppins;
  font-size: 20px;
  font-weight: 500;
  line-height: 42px;
  text-align: center;
}

.faq-img-content {
  width: 600px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: transparent;
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
}

.faq-img-question {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 500;
  transition: box-shadow 0.2s;
  background-color: white;
  border-radius: 8px;
  padding: 13px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.faq-question-text {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
}

.faq-img-answer {
  background-color: white;
  margin-top: 10px;
  padding: 13px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: left;
  padding-left: 30px;
}

.faq-answer-text {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  color: #883979;
}

.faq-form-exit {
  position: absolute;
  right: 10px;

}
/* Premium Chat Container */
.premium-case-chat-container {
  display: flex;
  flex-direction: column;
  max-height: 700px;
  width: 600px;
  background-color: #f8f9fa;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
    "Helvetica Neue", sans-serif;
}

.case-chat-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #89898980;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}
/* Header */
.premium-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  /* background: linear-gradient(135deg, #6e8efb, #a777e3); */
  background: linear-gradient(115deg, #e71aa2, #edaae7);
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.premium-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.premium-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #d8dae2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.premium-header-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.premium-status {
  margin: 0;
  font-size: 12px;
  opacity: 0.8;
}

.premium-header-right {
  display: flex;
  gap: 8px;
}

.premium-header-button {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.premium-header-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Messages Container */
.premium-messages-container {
  flex: 1 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f0f2f5;

  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f0f2f5;
}

.premium-messages-container::-webkit-scrollbar {
  width: 6px;
}

.premium-messages-container::-webkit-scrollbar-track {
  background: #f0f2f5;
}

.premium-messages-container::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 3px;
}

/* Date Divider */
.premium-date-divider {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  position: relative;
}

.premium-date-divider span {
  background-color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  color: #65676b;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 1;
}

.premium-date-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #e4e6eb;
  z-index: 0;
}

/* Message Styles */
.premium-message-wrapper {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.premium-message-sent {
  align-items: flex-end;
}

.premium-message-received {
  align-items: flex-start;
}

.premium-message-content {
  max-width: 70%;
}

.premium-message-sender {
  font-size: 12px;
  color: #65676b;
  margin-bottom: 4px;
  padding-left: 8px;
}

.premium-message-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  line-height: 1.4;
  position: relative;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.premium-sent-bubble {
  background-color: #007aff;
  color: white;
  border-top-right-radius: 4px;
}

.premium-received-bubble {
  background-color: white;
  color: #050505;
  border-top-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.premium-message-time {
  display: block;
  font-size: 10px;
  margin-top: 4px;
  text-align: right;
  opacity: 0.7;
}

.premium-sent-bubble .premium-message-time {
  color: rgba(255, 255, 255, 0.7);
}

.premium-received-bubble .premium-message-time {
  color: rgba(0, 0, 0, 0.5);
}

/* Input Container */
.premium-input-container {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: white;
  border-top: 1px solid #e4e6eb;
}

.premium-input-tools {
  display: flex;
  gap: 4px;
  margin-right: 12px;
}

.premium-tool-button {
  background: transparent;
  border: none;
  color: #65676b;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.premium-tool-button:hover {
  background-color: #f0f2f5;
}

.premium-input-wrapper {
  flex: 1 1;
  background-color: #f0f2f5;
  border-radius: 20px;
  padding: 8px 16px;
}

.premium-message-input {
  width: 100%;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  max-height: 120px;
  line-height: 1.4;
  height: auto;
}

.premium-send-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  /* background-color: #007aff; */
  color: rgb(51, 49, 49);
  margin-left: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.premium-send-button:disabled {
  background-color: #e4e6eb;
  color: #bcc0c4;
  cursor: not-allowed;
}

.premium-send-icon,
.premium-mic-icon {
  font-size: 20px;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.premium-message-wrapper {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  padding: 8px 16px;
  background-color: white;
  border-radius: 18px;
  margin-left: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.typing-dot {
  width: 8px;
  height: 8px;
  background-color: #007aff;
  border-radius: 50%;
  margin: 0 2px;
  animation: typingAnimation 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
  animation-delay: 0s;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingAnimation {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
}

.case-close-buttonn {
  position: relative;
  left: 335px;
  top: -319px;
  font-size: 24px;
  color: black;
  border: none;
  z-index: 9999;
  cursor: pointer;
  width: 42px;
  height: 42px;
  padding: 9.36px;
}

.content-container {
  display: flex;
  /* width: 100%; */
  flex-direction: column;
  align-items: center;
  /* gap: 64px; */

  background: #f2f2f2;
}

.section-intro-section {
  display: flex;
  width: 100%;
  max-width: 1320px;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  margin: 0 60px;
  max-width: calc(
    1320px - 120px
  );
  width: calc(100% - 120px);
}

.intro-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  /* margin-top: 64px; */
  margin-bottom: 64px;
}

.intro-title {
  align-self: stretch;
  text-align: left;
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: Poppins;
  font-size: 68px;
  font-weight: 600;
  line-height: 88px;
  margin: 0;
}

.intro-description {
  width: 100%;
  max-width: 446px;
  color: #000;
  color: var(--Primary-Base-Black, #000);
  font-family: "Open Sans";
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.48px;
  margin: 0;
  text-align: left;
}

.intro-images {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  gap: 28px;
  align-items: center;
  width: 100%;
  margin-top: -170px;
  align-items: flex-end;
}

.intro-image1 {
  background-repeat: no-repeat;
  border-radius: 12px;
  width: 100%;
  height: auto;
  /* max-width: 600px; */
  min-height: 300px;
  background-size: cover;
  background-image: url(/static/media/Rectangle34.65e1b03b01bca639421a.png);
}

.intro-image2 {
  background-repeat: no-repeat;
  border-radius: 12px;
  width: 100%;
  height: auto;
  max-width: 570px;
  background-size: cover;
  background-image: url(/static/media/Rectangle33.c4991941f3d5c3fcd365.png);
}

.features-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  /* align-items: center; */
  gap: 36px;
  max-width: 1320px;
  margin: 0 60px;
  max-width: calc(
    1320px - 120px
  );
  width: calc(100% - 120px);
}

.features-title {
  align-self: stretch;
  color: #000;
  color: var(--Primary-Base-Black, #000);
  text-align: center;

  font-family: Poppins;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.features-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* gap: 28px; */
  width: 100%;
}

.features-container1 {
  display: flex;
  flex-direction: row;
  gap: 28px;
  width: 100%;
  /* align-items: center; */
  align-self: stretch;
  text-align: left;
}
.features-container2 {
  display: flex;
  flex-direction: row;
  gap: 28px;
  width: 100%;
  /* align-items: center; */
  align-self: stretch;
  text-align: left;
}

.feature-card {
  background: #d9d9d9;
  border-radius: 12px;
  width: 100%;
  /* max-width: 590px;  */
  background-repeat: no-repeat;
  background-size: cover;
  height: 312px;
  position: relative;
  background-image: url(/static/media/Rectangle36.3ea4c4e8c1912ce6bad8.png);
}

.feature-card-2 {
  background: #d9d9d9;
  border-radius: 12px;
  width: 49%;
  /* max-width: 590px;  */
  background-repeat: no-repeat;
  background-size: cover;
  height: 312px;
  position: relative;
  background-image: url(/static/media/Feature-4.5eee9839a30e782d4a65.png);
}

.feature-card-3 {
  background: #d9d9d9;
  border-radius: 12px;
  width: 49%;
  /* max-width: 590px;  */
  background-repeat: no-repeat;
  background-size: cover;
  height: 312px;
  position: relative;
  background-image: url(/static/media/Rectangle-5.6b9709b92b8da6520d79.png);
}

.feature-card-4 {
  background: #d9d9d9;
  border-radius: 12px;
  width: 49%;
  /* max-width: 590px;  */
  background-repeat: no-repeat;
  background-size: cover;
  height: 312px;
  position: relative;
  background-image: url(/static/media/Rectangle-6.47d98f2c31ecc0be3e95.png);
}

.feature-card-title {
  /* position: absolute; */
  top: 28px;
  left: 28px;
  font-size: 28px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: black;
}

.feature-card-icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  padding: 7px;
  background-color: #e6e6e6;
  border-radius: 50%;
  cursor: pointer;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-card-icon-box {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.feature-card-icon-box img {
  object-fit: contain;
  transform: rotate(90deg);
}
.disclaimer {
  width: 100%;
  max-width: 1320px;
  color: #393939;
  font-family: "Open Sans";
  font-size: 18px;
  line-height: 28px;
  text-align: left;
  margin: 0 60px;
  max-width: calc(
    1201px - 120px
  );
  width: calc(100% - 120px);
}


.home .dark-mode {
  background-color: #2d1227;
  color: #e0e0e0;
}

.dark-mode .intro-title {
  color: #e6e6e6;
}

.dark-mode .intro-description {
  color: #d9d9d9;
}

.dark-mode .features-title {
  color: #e6e6e6;
}

.dark-mode .disclaimer {
  color: #e6e6e6;
}

@media (min-width: 1201px) {

  .content-container,
  .features-container,
  .section-intro-section {
    width: 100%;
  }
  .content-container {
    gap: 64px;
  }
  .intro-content {
    margin-top: 64px;
  }

  .intro-description {
    margin: 0 60px;
  }

  .intro-images {
    justify-content: center;
    /* margin: 0 60px; */
  }
  .intro-image1 {
    width: 526.5px;
    height: 322px;
    gap: 0px;
    border-radius: 12px 0px 0px 0px;
    opacity: 1;
    margin-top: 143px;
  }
  .intro-image2 {
    width: 526.5px;
    height: 465px;
    gap: 0px;
    border-radius: 12px 0px 0px 0px;
    opacity: 1;
  }

  .feature-card {
    width: 526.5px;
    height: 312px;
    gap: 0px;
    border-radius: 12px;
    opacity: 1;
  }

  .features-section {
    gap: 28px;
  }

  .intro-title {
    font-family: Poppins;
    font-size: 68px;
    font-weight: 600;
    line-height: 88px;
    text-align: left;
    margin: 0 60px;
  }

  .features-container1 {
    margin: 0 60px;
  }
  .features-container2 {
    margin: 0 60px;
  }
  .features-title {
    font-family: Poppins;
    font-size: 40px;
    font-weight: 600;
    line-height: 60px;
    text-align: center;
  }

  .feature-card-title {
    font-family: Poppins;
    font-size: 24px;
    font-weight: 600;
    line-height: 42px;
    text-align: left;
    margin-left: 0px;
    margin-top: 24px;
    min-height: 84px;
    margin-right: 30px;
    word-wrap: break-word;
  }

  .intro-description {
    line-height: 32px;
    font-family: Open Sans;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.024em;
    text-align: left;
  }
  .disclaimer {
    font-family: Open Sans;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.024em;
    text-align: left;

    margin-bottom: 64px;
  }

  .disclaimer-section {
    text-align: right;
  }
}
@media (min-width: 741px) and (max-width: 1200px) {
  .section-intro-section {
    margin-left: 32px;
    margin-right: 32px;
    width: calc(100% - 64px);
  }

  .content-container {
    gap: 40px;
  }
  .features-container {
    margin-left: 32px;
    margin-right: 32px;
    width: calc(100% - 64px);
    margin-top: 0px;
  }
  .disclaimer {
    margin-left: 32px;
    margin-right: 32px;
    width: calc(100% - 64px);
  }

  .intro-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 100%;
  }

  .intro-title {
    width: 100%;
    text-align: left;
    font-size: 52px;
    line-height: 72px;
    margin: 0;
  }

  .intro-description {
    width: 100%;
    max-width: 442px;
    font-size: 16px;
    line-height: 26px;
    font-family: "Open Sans", sans-serif;
    margin: 0;
    text-align: left;
  }

  .intro-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px;
    /* align-items: flex-end; */
    width: 100%;
    padding-top: 110px;
    position: static;
  }

  .intro-image1 {
    width: calc(50% - 14px);
    max-width: none;
    min-height: 200px;
    background-size: cover;
    background-position: center;
  }

  .intro-image2 {
    width: calc(50% - 14px);
    max-width: none;
    min-height: 252px;
    background-size: cover;
    background-position: center;
    display: block;
  }

  .features-container1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 28px;
    gap: 28px;
    width: 100%;
    align-items: left;
    align-self: stretch;
  }
  .features-container2 {
    display: flex;
    flex-direction: row;
    gap: 28px;
    width: 100%;
    align-items: left;
    align-self: stretch;
  }

  .features-section {
    gap: 24px;
  }

  .feature-card {
    background: #d9d9d9;
    border-radius: 12px;
    align-items: left;
    max-width: 590px;
    background-size: cover;
    height: 195px;
    position: relative;
    background-image: url(/static/media/Rectangle36.3ea4c4e8c1912ce6bad8.png);
  }

  .feature-card-title {
    /* position: absolute; */
    text-align: left;
    top: 28px;
    margin-left: 0px;
    margin-top: 16px;
    left: 28px;
    font-size: 18px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    line-height: 27px;
    color: black;
  }

  .feature-card-icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 28px;
    height: 28px;
    padding: 7px;
    background: #e6e6e6;
    border-radius: 50%;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .feature-card-icon-box {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }

  .feature-card-icon-box img {
    object-fit: contain;
    transform: rotate(90deg);
  }

  .features-title {
    width: 100%;
    font-size: 28px;
    text-align: center;
    line-height: 42px;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
  }

  .features-container1,
  .features-container2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    gap: 24px;
    justify-content: space-between;
  }

  .feature-card {
    width: auto;
    height: auto;
    min-height: 195px;
    background-size: cover;
    background-position: center;
  }

  .feature-card-2 {
    width: auto;
    height: auto;
    min-height: 195px;
  }

  .feature-card-3 {
    width: auto;
    height: auto;
    min-height: 195px;
  }

  .feature-card-4 {
    width: auto;
    height: auto;
    min-height: 195px;
  }

  .feature-card-title {
    font-size: 20px;
    line-height: 30px;
    font-family: "Poppins", sans-serif;
    min-height: 60px;
  }

  .disclaimer {
    font-size: 16px;
    line-height: 26px;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    height: 390px;
    overflow-y: auto;
    margin-left: 32px;
    width: 677px;
    margin-right: 32px;
    width: calc(100% - 64px);
    margin-bottom: 40px;
  }

  .view-more-btn {
    display: none;
  }
}

@media (min-width: 320px) and (max-width: 740px) {
  .content-container {
    display: block;
    color: #000;
    width: 100%;
  }

  .section-intro-section,
  .features-container {
    margin: 0 24px;
    width: calc(100% - 48px);
    padding: 0;
  }

  .intro-content {
    width: 100%;
    margin-bottom: 0;
    margin-top: 32px;
  }

  .intro-title {
    font-size: 22px;
    line-height: 33px;
    font-weight: 600;
    width: 100%;
    max-width: none;
    margin: 0 24px;
    width: calc(100% - 48px);
  }

  .intro-description {
    font-size: 12px;
    max-width: none;
    line-height: 18px;
    font-weight: 400;
    letter-spacing: 2.4;
    width: 100%;
    margin: 0 24px;
    width: calc(100% - 48px);
    margin-bottom: 16px;
  }

  .intro-images {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    margin: 0 24px;
    width: calc(100% - 48px);
  }

  .intro-image1 {
    background-size: cover;
    min-height: 200px;
    width: 100%;
  }

  .intro-image2 {
    display: none;
  }

  .features-container {
    margin-top: 22px;
    gap: 10px;
  }

  .features-title {
    font-size: 18px;
    line-height: 27px;
    width: 100%;
    text-align: center;
    margin: 0 24px;
    width: calc(100% - 48px);
  }

  .features-container1,
  .features-container2 {
    flex-direction: column;
    width: 100%;
    gap: 16px;
    margin-bottom: 16px;
    margin: 0 24px;
    width: calc(100% - 48px);
  }

  .feature-card {
    width: 100%;
    height: auto;
    min-height: 193.5px;
    background-size: cover;
  }

  .feature-card-2 {
    width: auto;
    height: auto;
    min-height: 193.5px;
    margin-bottom: 16px;
  }

  .feature-card-3 {
    width: auto;
    height: auto;
    min-height: 193.5px;
  }

  .feature-card-4 {
    width: auto;
    height: auto;
    min-height: 193.5px;
  }

  .feature-card-title {
    font-size: 14px;
    line-height: 21px;
    margin-left: 0px;
    margin-top: 16px;
    text-align: left;
    min-height: 50px;
  }

  .feature-card-icon {
    bottom: 16px;
    right: 16px;
    width: 10px;
    height: 10px;
  }

  .feature-card-icon-box {
    width: 20px;
    height: 20px;
  }
  .feature-card-icon-box img {
    height: 12px;
    width: 7px;
  }

  .view-more-btn {
    background-color: transparent;
    border: 1px solid #2585e0;
    color: #2585e0;
    border-radius: 40px;
    padding: 10px 20px;
    margin-top: 12px;
    margin-bottom: 32px;
    font-size: 16px;
    display: block;
    cursor: pointer;
    transition: all 0.3s ease;
    width: fit-content;
    font-weight: semi-bold;
  }

  .disclaimer {
    font-family: "Open Sans", sans-serif;
    margin: 0 24px;
    padding: 0 0 32px 0;
    font-size: 12px;
    line-height: 18px;
    width: calc(100% - 48px);
  }
}


/* open-sans-300normal - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src:
    local('Open Sans Light '),
    local('Open Sans-Light'),
    url(/static/media/open-sans-latin-300.b871ad6e5cbe2a1c8c73.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/open-sans-latin-300.38bcfba2c37aac23453f.woff) format('woff'); /* Modern Browsers */
}

/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 300;
  src:
    local('Open Sans Light italic'),
    local('Open Sans-Lightitalic'),
    url(/static/media/open-sans-latin-300italic.b45d9997b704ab3daad1.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/open-sans-latin-300italic.3ab0502d6136886180cd.woff) format('woff'); /* Modern Browsers */
}

/* open-sans-400normal - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src:
    local('Open Sans Regular '),
    local('Open Sans-Regular'),
    url(/static/media/open-sans-latin-400.f57a62e9efddf6ace18b.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/open-sans-latin-400.347639ec49f4b2884a96.woff) format('woff'); /* Modern Browsers */
}

/* open-sans-400italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src:
    local('Open Sans Regular italic'),
    local('Open Sans-Regularitalic'),
    url(/static/media/open-sans-latin-400italic.bb915319f59c02c348a6.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/open-sans-latin-400italic.56bdf84751634e8deaff.woff) format('woff'); /* Modern Browsers */
}

/* open-sans-600normal - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src:
    local('Open Sans SemiBold '),
    local('Open Sans-SemiBold'),
    url(/static/media/open-sans-latin-600.9526470852428b4340ed.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/open-sans-latin-600.7e06644bbdc83069cec8.woff) format('woff'); /* Modern Browsers */
}

/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src:
    local('Open Sans SemiBold italic'),
    local('Open Sans-SemiBolditalic'),
    url(/static/media/open-sans-latin-600italic.cc4bf5b2955147801c02.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/open-sans-latin-600italic.8d513ad94829ef391cd1.woff) format('woff'); /* Modern Browsers */
}

/* open-sans-700normal - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src:
    local('Open Sans Bold '),
    local('Open Sans-Bold'),
    url(/static/media/open-sans-latin-700.92425c623934facef057.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/open-sans-latin-700.f24f4bcef8a4a0eb6345.woff) format('woff'); /* Modern Browsers */
}

/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src:
    local('Open Sans Bold italic'),
    local('Open Sans-Bolditalic'),
    url(/static/media/open-sans-latin-700italic.2a0783bd1c6c1469558b.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/open-sans-latin-700italic.e961bdb476db6860f20f.woff) format('woff'); /* Modern Browsers */
}

/* open-sans-800normal - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src:
    local('Open Sans ExtraBold '),
    local('Open Sans-ExtraBold'),
    url(/static/media/open-sans-latin-800.1666787ea3ff3941e764.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/open-sans-latin-800.8ab0bbdd48f276f4ba56.woff) format('woff'); /* Modern Browsers */
}

/* open-sans-800italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-display: swap;
  font-weight: 800;
  src:
    local('Open Sans ExtraBold italic'),
    local('Open Sans-ExtraBolditalic'),
    url(/static/media/open-sans-latin-800italic.b5bc26612cdf4d47affd.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/open-sans-latin-800italic.3d3bd0835c258f5bd0bc.woff) format('woff'); /* Modern Browsers */
}


/* poppins-100normal - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 100;
  src:
    local('Poppins Thin '),
    local('Poppins-Thin'),
    url(/static/media/poppins-latin-100.ab66112cac2ca46d6cf8.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-100.9eef15e6adb5c1840e4b.woff) format('woff'); /* Modern Browsers */
}

/* poppins-100italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-display: swap;
  font-weight: 100;
  src:
    local('Poppins Thin italic'),
    local('Poppins-Thinitalic'),
    url(/static/media/poppins-latin-100italic.16e9e4a7edd1deb307b6.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-100italic.4eb0979cc92f081697d9.woff) format('woff'); /* Modern Browsers */
}

/* poppins-200normal - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 200;
  src:
    local('Poppins Extra Light '),
    local('Poppins-Extra Light'),
    url(/static/media/poppins-latin-200.7f0cadcc9081ce094690.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-200.6661712e99d1f44c5696.woff) format('woff'); /* Modern Browsers */
}

/* poppins-200italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-display: swap;
  font-weight: 200;
  src:
    local('Poppins Extra Light italic'),
    local('Poppins-Extra Lightitalic'),
    url(/static/media/poppins-latin-200italic.d1d463232bc816f6fdff.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-200italic.b12214af6124a2b0f2e6.woff) format('woff'); /* Modern Browsers */
}

/* poppins-300normal - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src:
    local('Poppins Light '),
    local('Poppins-Light'),
    url(/static/media/poppins-latin-300.82a53579cedb4011592d.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-300.8583fb076895d267edef.woff) format('woff'); /* Modern Browsers */
}

/* poppins-300italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-display: swap;
  font-weight: 300;
  src:
    local('Poppins Light italic'),
    local('Poppins-Lightitalic'),
    url(/static/media/poppins-latin-300italic.e62b386ee4c170e8982d.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-300italic.aea0270e651bfbf3428e.woff) format('woff'); /* Modern Browsers */
}

/* poppins-400normal - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src:
    local('Poppins Regular '),
    local('Poppins-Regular'),
    url(/static/media/poppins-latin-400.5b8f3ba886526963a788.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-400.c14093cee8c440c1884e.woff) format('woff'); /* Modern Browsers */
}

/* poppins-400italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src:
    local('Poppins Regular italic'),
    local('Poppins-Regularitalic'),
    url(/static/media/poppins-latin-400italic.15597034a671c979d13e.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-400italic.b7d6c86bf88de93565a3.woff) format('woff'); /* Modern Browsers */
}

/* poppins-500normal - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src:
    local('Poppins Medium '),
    local('Poppins-Medium'),
    url(/static/media/poppins-latin-500.dc16a3592fdb61b620cc.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-500.ff86872bdc62f119cb70.woff) format('woff'); /* Modern Browsers */
}

/* poppins-500italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src:
    local('Poppins Medium italic'),
    local('Poppins-Mediumitalic'),
    url(/static/media/poppins-latin-500italic.fbe8f8786ac1a355d1d0.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-500italic.3dda6a60aa4d2acc26d9.woff) format('woff'); /* Modern Browsers */
}

/* poppins-600normal - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src:
    local('Poppins SemiBold '),
    local('Poppins-SemiBold'),
    url(/static/media/poppins-latin-600.e49343f0bcfb860280ab.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-600.8c4516c52b9adc821643.woff) format('woff'); /* Modern Browsers */
}

/* poppins-600italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src:
    local('Poppins SemiBold italic'),
    local('Poppins-SemiBolditalic'),
    url(/static/media/poppins-latin-600italic.5530d5745f61ad5a084b.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-600italic.8c85f26b213a50aaf21d.woff) format('woff'); /* Modern Browsers */
}

/* poppins-700normal - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src:
    local('Poppins Bold '),
    local('Poppins-Bold'),
    url(/static/media/poppins-latin-700.9690ce6275ddc5645cfa.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-700.eb23bc4e632c6270a7f6.woff) format('woff'); /* Modern Browsers */
}

/* poppins-700italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src:
    local('Poppins Bold italic'),
    local('Poppins-Bolditalic'),
    url(/static/media/poppins-latin-700italic.bd8a2d380294e07559f8.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-700italic.2c2e5a89b894602cb374.woff) format('woff'); /* Modern Browsers */
}

/* poppins-800normal - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src:
    local('Poppins ExtraBold '),
    local('Poppins-ExtraBold'),
    url(/static/media/poppins-latin-800.8314fda16443ec0fff15.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-800.2923e77ee4131a6bdf85.woff) format('woff'); /* Modern Browsers */
}

/* poppins-800italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-display: swap;
  font-weight: 800;
  src:
    local('Poppins ExtraBold italic'),
    local('Poppins-ExtraBolditalic'),
    url(/static/media/poppins-latin-800italic.5b40529f4fd710573bc9.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-800italic.a7db6fce9e81a0a878af.woff) format('woff'); /* Modern Browsers */
}

/* poppins-900normal - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src:
    local('Poppins Black '),
    local('Poppins-Black'),
    url(/static/media/poppins-latin-900.52f874769ced349a3130.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-900.b71e24fd507f1d04de00.woff) format('woff'); /* Modern Browsers */
}

/* poppins-900italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-display: swap;
  font-weight: 900;
  src:
    local('Poppins Black italic'),
    local('Poppins-Blackitalic'),
    url(/static/media/poppins-latin-900italic.babad407b7e5b94a7e3a.woff2) format('woff2'), /* Super Modern Browsers */
    url(/static/media/poppins-latin-900italic.623b100a2c3d97062e94.woff) format('woff'); /* Modern Browsers */
}


.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  background-color: #fff;
  margin: 0px;
  width: auto;
  height: 99.54px;
  /* border-bottom: 2px solid rgba(0, 0, 0, 0.025); */
  /* box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25); */
  transition: background-color 0.3s, color 0.3s;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.greeting-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 60px 16px 60px;
}

.greeting-container-box {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.dark-mode .greeting-text-newheader {
  color: white;
}

.greeting-text-newheader {
  color: #000;
  color: var(--Primary-Base-Black, #000);

  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
  /* 150% */
  letter-spacing: 0.691px;
}

.avatar-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.avatar {
  width: 28px;
  height: 28px;
  background: #e6e6e6;
  border-radius: 50%;
}

.avatar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.dropdown-icon {
  width: 20px;
  height: 24px;
  position: relative;
  margin-left: 15px;
  cursor: pointer;
}

.dropdown-arrow {
  width: 6.71px;
  height: 11.31px;
  position: absolute;
  top: 8px;
  left: -14px;
  transition: transform 0.2s ease;
}
.progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 99.54px;
  z-index: 999;
}

.progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
}

.logo img {
  width: 216px;
  height: 60px;
  margin: 50px;
  margin-bottom: 18px;
  margin-top: 18px;
}

.nav-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 60px;
}

.nav-links-2 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: calc(100%);
  align-items: flex-start;
}

.nav-links-2 li {
  display: inline;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

/* Navigation Link Styles */
.nav-links-2 a {
  color: black;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links-2 a:hover {
  color: #883979;
}

.nav ul {
  /* padding-left: 0; */
  margin-left: 0;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 44px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-links li {
  display: inline;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.nav-links a {
  color: black;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #883979;
}

.hamburger {
  display: none;
  margin-right: 18px;
}

.signinbtn {
  background-color: #7b376e;
  color: white;
  border: none;
  border-radius: 60px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  height: 36px;
  display: flex;
  padding: 6px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.signinbtn:hover {
  background-color: #6a2d5a;
}
/* btn-link .nav-button {
  width: 4px;
  height: 180px;
  top: 204px;
  left: 1197px;
  gap: 0px;
  border-radius: 12px 0px 0px 12px;
  opacity: 1;
  } */

.mode-toggle {
  top: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: white;

  border: none;
  color: #120505;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.header .mode-toggle:hover {
  background-color: #7b376e;
}

.darkMoon {
  color: white !important;
}

.lightSun {
  color: black !important;
}

.lightSun:hover {
  color: white !important;
}

.mode-text {
  margin-left: 24px;
  font-family: "Poppins", sans-serif;
  line-height: 18px;
  margin-right: 8px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.mode-toggle img {
  height: 24px;
  width: 24px;
}
.mode-text {
  display: none;
}

.header.dark-mode .hamburger {
  color: #fff;
}

.header.dark-mode .nav-links a {
  color: #fff;
}

.header.dark-mode {
  background-color: #1e0419;
  color: #fff;
}

.header.dark-mode .nav-links a:hover {
  color: #ad499a;
}

.header.dark-mode .progress-bar {
  background-color: #8e5c8e;
}

.header.dark-mode .mode-toggle {
  background-color: #2d1227;
  color: white;
}

.header.dark-mode .mode-toggle:hover {
  background-color: #7b376e;
}

.dark-mode .header-header-dropdown-menu {
  background-color: #2d1227;
  border: solid 1px #b8b8b8;
  box-shadow: 0 0 0 1px #1e0419;
  color: white;
}

.top-dropdown {
  top: 80px;
  right: -5px;
}

@media (max-width: 1200px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
    height: auto;
    padding: 10px;
    position: relative;
    z-index: 1;
  }
  .progress-bar-container {
    top: 70px;
  }

  .nav-links .clrhome {
    color: #883979;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
  }

  .logo {
    display: flex;
    align-items: center;

    /* margin-left: 12px;   */
  }

  .logo img {
    width: 196px;
    height: 54px;
    margin: 0%;
    margin-left: 12px;
    position: absolute;
    left: 24px;
    top: 18px;
    z-index: 1;
  }

  .hamburger {
    display: block;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin-right: 27px;
    cursor: pointer;
    z-index: 2;
    color: inherit;
  }

  .nav-container {
    flex-direction: column;
    margin: 10px 0;
    width: 100%;
  }

  .nav {
    flex-direction: column;
    gap: 10px;
    margin: 0;
    width: 100%;
    align-items: end;
    margin-bottom: 14px;
  }

  .nav-links {
    display: none;
    padding-top: 24px;
    flex-direction: column;
    gap: 24px;
    width: calc(100% - 48px);
    align-items: flex-start;
    margin: 0 24px;
  }

  .nav.open .nav-links {
    display: flex;
  }

  .signinbtn {
    width: 100%;
    padding: 8px 0;
    font-size: 16px;
    background: none;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    color: inherit;
    font-weight: 500;
  }

  .signinbtn:hover {
    background: none;
  }

  .mode-text {
    display: inline;
    margin-left: 90px;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    margin-right: 8px;
    font-weight: 600;
    font-size: 16px;
  }

  .mode-toggle img {
    height: 20px;
    background-color: #ebebeb;
    border-radius: 50%;
    border: none;
    width: 24px;
    height: 24px;
    padding: 3.55px 3.53px 3.5px 3.53px;
    gap: 0px;
    opacity: 1;
  }

  .nav ul {
    padding-left: 0px;
    margin-left: 0px;
  }
}

@media (max-width: 740px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    height: auto;
    position: relative;
    z-index: 1;
  }

  .nav-links .clrhome {
    color: #883979;
    font-size: 12px;
    font-family: "Poppins", sans-serif;
  }

  .logo {
    display: flex;
    align-items: center;
    /* margin-left: 24px; */
  }

  .logo img {
    width: 120px;
    height: 40px;
    margin: 0%;
    position: absolute;
    left: 24px;
    /* top: 10px;  */
    z-index: 1;
  }

  .hamburger {
    display: block;
    font-size: 24px;
    margin-left: 300px;
    margin-right: 18px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
  }

  .nav-container {
    flex-direction: column;
    margin: 10px 0;
    width: 100%;
  }
  .nav {
    flex-direction: column;
    gap: 10px;
    margin: 0%;
  }

  .nav ul {
    padding-left: 15px;
    margin-left: 0px;
  }

  .nav-links {
    display: none;
    /* padding-top: 24px; */
    flex-direction: column;
    gap: 0px;
    width: 100%;
    align-items: flex-start;
    margin: 0;
  }

  .nav-links-2 li {
    display: inline;
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 500;
  }

  .nav-links-2 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: calc(100%);
    align-items: flex-start;
    padding-left: 15px;
  }

  .link-class {
    margin-left: -15px;
  }

  .margin-left-profile {
    margin-left: -15px;
  }

  .nav-container.open {
    left: 0;
  }

  .nav-links a {
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    margin-left: 15px;
    gap: 28px;
    width: 141px;
    height: 24px;
  }

  .greeting-text-newheader {
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    margin-left: 15px;
    gap: 28px;
    width: 80px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .signinbtn {
    width: 100%;
    display: contents;
    padding: 8px 0;
    font-size: 13px;
    background: none;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    color: inherit;
    font-weight: 500;
    margin-left: 10px;
  }

  .mode-toggle {
    display: flex;
    align-items: center;
    background-color: transparent;
    cursor: pointer;
    margin-left: 12px;
  }

  .mode-toggle img {
    height: 18px;
  }

  .mode-toggle img {
    height: 20px;
    background-color: #ebebeb;
    border-radius: 50%;
    border: none;
    width: 18px;
    height: 18px;
    padding: 3.55px 3.53px 3.5px 3.53px;
    gap: 0px;
    opacity: 1;
  }
  .mode-text {
    display: inline;
    margin-left: 68px;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    margin-right: 8px;
    font-weight: 600;
    font-size: 12px;
  }
}

@media (min-width: 1201px) {
  .mode-toggle {
    background-color: #f3f3f3;
  }
}

.footer {
  background-color: #ffffff;
  padding: 49px 60px 20px 60px;
  color: #333;
}

.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.5fr;
  grid-gap: 75px;
  gap: 75px;
  max-width: 100%;
  margin: 0 auto;
}

.footer-section {
  min-width: 172px;
  text-align: left;
}

.company-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer .footer-container .company-info .footer-logo {
  /* max-width: 180px; */
  /* padding-top: 15px; */
}

.company-info p {
  /* font-size: 16px; */
  /* font-weight: 400;
    line-height: 26px; */
}

.company-info h2 {
  color: #7b376e;
  font-size: 24px;
}

.footer-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #7b376e;
  font-family: "Poppins", sans-serif;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

.footer-section ul li {
  margin-bottom: 10px;
}

.footer-section ul li a {
  text-decoration: none;
  color: #333;
}

.social-icons {
  display: flex;
  gap: 10px;
}

.social-icons a img {
  max-width: 24px;
  /* height: auto; */
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
  width: 100%;
}

address {
  font-style: normal;
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
}

.dark-mode .footer {
  background-color: #1e0419;
}

.dark-mode .footer-section h3 {
  color: #ad499a;
}

.dark-mode .company-info p {
  color: #e6e6e6;
}

.dark-mode .social-icons a img {
  fill: green;
}

.dark-mode .footer-section ul li a {
  color: #e6e6e6;
}

.dark-mode address {
  color: #e6e6e6;
}

.dark-mode .footer-bottom {
  color: #e6e6e6;
}

.dark-mode .footer-section ul.dropdown-content {
  background-color: #1e0419;
  color: #e6e6e6;
}
.dark-mode .footer-section.open address {
  background-color: #1e0419;
  color: #e6e6e6;
}

@media (max-width: 740px) {
  .footer-container {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .footer {
    padding: 24px 24px 18px 24px;
  }

  .footer-section {
    margin: 0 24px;
    position: relative;
    width: calc(100% - 48px);
    width: 100%;
    text-align: left;
    /* margin-bottom: 20px; */
    border-top: 1px solid #ffffff;
    /* padding-top: 20px; */
  }

  .footer-section h3 {
    font-size: 14px;
    margin: 0;
    padding: 1.5px;
    color: #7b376e;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-section h3::after {
    font-size: 12px;
    transition: transform 0.3s ease;
  }

  .footer-section.open h3::after {
    transform: rotate(180deg);
  }

  .footer-section ul,
  .footer-section address {
    display: none;
    position: relative;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    /* border: 1px solid #ccc;
        border-top: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
    z-index: 1;
    /* padding: 10px; */
    margin: 0;
    font-family: "Open Sans", sans-serif;
  }

  .footer-section.open ul {
    display: block;
  }
  .footer-section.open address {
    display: ruby;
  }

  .dropdown-content {
    display: block;
    position: relative;
    left: 0;
    top: 100%;
    background: white;
    /* box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);  */
    z-index: 1000;
  }

  .dropdown-content li,
  .dropdown-content a,
  .dropdown-content address {
    color: #333;
    font-size: 12px;
    line-height: 1.8;
    text-decoration: none;
  }
  .footer-section.open ul,
  .footer-section.open address {
    font-size: 12px;
  }

  .company-info {
    /* margin-bottom: 20px; */
    width: 100%;
  }

  .company-info-text {
    font-size: 10px;
    line-height: 16px;
    text-align: justify;
    line-height: 1.6;
    margin: 0 0 10px;
    font-family: Open Sans;
    font-weight: 400;
    letter-spacing: 0.032em;
    color: #000000;
  }

  .social-icons {
    margin-top: 8px;
    display: flex;
    gap: 15px;
    justify-content: center;
  }

  .footer-bottom {
    text-align: center;
    margin-top: 32px;
    font-size: 10px;
    line-height: 16px;
    color: #666;
    width: 100%;
    width: calc(100% - 48px);
    /* padding: 0 24px; */
    box-sizing: border-box;
    margin-left: 26px;
    margin-right: 47px;
    white-space: nowrap;
  }

  .social-icons a img {
    height: 17.43px;
  }

  .logo-and-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 17.43px;
    margin-bottom: 15.96px;
    width: 100%;
  }

  .footer-logo {
    margin-right: auto;
    height: 29.04px;
    top: 24px;
    left: 24px;
    padding: 3.29px 0px 0px 0px;
    gap: 3.7px;
    opacity: 1;
  }
}

/*@media (min-width: 741px) and (max-width: 1200px) {
    .footer-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    }
    
    .footer-section {
    text-align: left;
    }
    
    }*/

@media (min-width: 741px) and (max-width: 1200px) {
  .footer-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin: 0;
    width: 100%;
  }

  .footer {
    padding: 32px 32px 32px 32px;
  }
  .logo-and-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    width: 100%;
  }

  .footer-logo {
    width: 196px;
    height: 54px;
    margin-right: auto;
  }

  .social-icons {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-left: auto;
  }

  .social-icons img {
    width: 30px;
    height: 30px;
  }

  .company-info-text {
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
    margin-top: 10px;
    width: 342px;
  }

  .footer-section {
    position: relative;
    width: 100%;
    text-align: left;
    /* margin-bottom: 20px; */
    border-top: 1px solid #ffffff;
    /* padding-top: 20px; */
  }

  .social-icons a {
    margin-left: 10px;
  }

  .footer-section h3 {
    font-size: 22px;
    margin: 0;
    padding: 10px 0;
    color: #7b376e;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-section h3::after {
    font-size: 12px;
    transition: transform 0.3s ease;
  }

  .footer-section.open h3::after {
    transform: rotate(180deg);
  }

  .footer-section ul,
  .footer-section address {
    display: none;
    position: relative;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    /* border: 1px solid #ccc;
        border-top: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
    z-index: 1;
    /* padding: 10px; */
    margin: 0;
    font-family: "Open Sans", sans-serif;
  }

  .footer-section.open ul {
    display: block;
  }
  .footer-section.open address {
    display: ruby;
  }

  .dropdown-content {
    display: none;
    position: relative;
    left: 0;
    top: 100%;
    background: white;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  */
    z-index: 1000;
    /* padding: 10px; */
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 26px;
  }

  .dropdown-content li,
  .dropdown-content a,
  .dropdown-content address {
    color: #333;
    font-size: 16px;
    line-height: 1.8;
    text-decoration: none;
  }
  .dropdown-content address {
    display: ruby;
  }

  .footer-bottom {
    text-align: center;
    margin-top: 20px;
  }
}

@media (min-width: 1201px) {
  .footer {
    padding: 30px 60px 16px 60px;
    color: #333;
  }
  .company-info .footer-logo {
    padding-top: 15px;
  }

  .footer-logo {
    height: 54px;
    width: 196px;
  }

  .expand-icon {
    display: none;
  }
  .social-icons {
    gap: 24px;
    margin-top: 24px;
  }
  .company-info-text {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.032em;
    text-align: left;
  }
}

.patient-dashboard {
  width: 100%;
  height: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(/static/media/bg.b8637adb17db611a82bc.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 100px;
  gap: 0px;
  opacity: 1;
}

.dark-mode .patient-dashboard {
  background-image: url(/static/media/bgdark.3915cd3767a0a72ba2a3.png);
  background-color: #1e0419;
  color: #e0e0e0;
}

.Patient-dashboard-container {
  margin: 30px 60px 15px 60px;
  position: relative;
  width: 970px;
  height: 767px;
  left: 110px;
  gap: 30px;
  opacity: 1;
}

.dark-mode .Patient-dashboard-container {
  background-color: transparent;
}

.Patient-container-box {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex-shrink: 0;
  align-items: center;
  width: 80%;
  max-width: 1081px;
  height: auto;
}

.fab {
  position: fixed;
  bottom: 80px;
  right: 15px;
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
}

.edit-cases-card {
  width: 1081px;
  height: 60px;
  justify-content: center;
  align-items: center;
}

.edit-menu-options {
  width: 1081px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 11px;
}

.p-menu-item {
  width: 272px;
  height: 55px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background-color: transparent;
  cursor: pointer;
  font-family: "Open Sans";
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.48px;
  border: 1px solid #883979;
}

.dark-mode .p-menu-item {
  background-color: transparent;
  color: #e6e6e6;
}

.p-menu-item.active {
  border-radius: 8px;
  background: #883979;
  color: #fff;
  display: flex;
  width: 249px;
  height: 55px;
  padding: 15px 8px 15px 8px;
}

.dark-mode .p-menu-item.active {
  color: #e6e6e6;
  background-color: #883979;
}

.Profile-details {
  display: flex;
  width: 1021px;
  height: 252px;
  margin-top: 30px;
  margin-left: 30px;
  gap: 20px;
}

.dark-mode .Profile-details {
  background-color: #1e0419;
}

.Profile-details-image {
  width: 214px;
  height: 252px;
  top: 30px;
  left: 30px;
  gap: 0px;
  border-radius: 8px;
  opacity: 1;
}

.profile-details-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 777px;
  height: 252px;
  top: 30px;
  left: 274px;
  opacity: 1;
}

.profile-details-row {
  width: 777px;
  height: 58px;
  display: flex;
  align-items: center;
}

.prof_details-row {
  width: 1000px;
  height: 58px;
  display: flex;
  align-items: center;
  margin-top: 18px;
  margin-left: 25px;
}

.Avai_details-row {
  width: 1000px;
  height: 58px;
  display: flex;
  align-items: center;
  margin-top: 18px;
  margin-left: 25px;
}

.Metrics_details-row {
  width: 900px;
  height: 58px;
  display: flex;
  align-items: center;
  margin-top: 18px;
  margin-left: 25px;
}

.profile-details-row2 {
  margin-top: 25px;
  width: 795px;
  height: 58px;
  display: flex;
  align-items: center;
}

.profile-details-row3 {
  width: 777px;
  height: 58px;
  display: flex;
  align-items: center;
  margin-top: 25px;
}
.profile-details-row4 {
  width: 777px;
  height: 58px;
  display: flex;
  align-items: center;
  margin-top: 25px;
  margin-left: 30px;
}

.profile-detail-column {
  width: 110px;
  height: 58px;
  gap: 2px;
}

.profile-detail-column2 {
  gap: 2px;
  width: 110px;
  height: 58px;
  margin-left: 250px;
}

.profile-detail-column3 {
  gap: 2px;
  width: 110px;
  height: 58px;
  margin-left: 192px;
}

.profile-detail-column-spec {
  gap: 2px;
  width: 110px;
  height: 58px;
  margin-left: 172px;
}

.profile-detail-column4 {
  width: 123px;
  height: 58px;
  gap: 2px;
}

.profile-detail-column5 {
  gap: 2px;
  width: 125px;
  height: 58px;
  margin-left: 236px;
}

.profile-detail-column6 {
  width: 123px;
  height: 58px;
  gap: 2px;
}

.profile-detail-column7 {
  gap: 2px;
  width: 140px;
  height: 58px;
  margin-left: 240px;
}

.profile-detail-column-address {
  width: 200px;
  height: 58px;
  gap: 2px;
}

.profile-button-column3 {
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
  gap: 2px;
  margin-left: 300px;
}

.profile-custom-button {
  width: 78px;
  height: 36px;
  position: absolute;
  top: 430px;
  left: 849px;
  border: 1px solid #883979;
  border-radius: 8px;
  background-color: transparent;
}

.profile-custom-button2 {
  width: 78px;
  height: 36px;
  position: absolute;
  top: 230px;
  left: 849px;
  border: 1px solid #883979;
  border-radius: 8px;
  background-color: transparent;
}

.profile-custom-button:hover {
  background-color: #883979;
  color: white;
}

.dark-mode .profile-custom-button {
  border: 1px solid white;
}

.profile-button-text {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.dark-mode .profile-button-text {
  color: white;
}

.profile-edit-case-about-label {
  color: #666666;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .profile-edit-case-about-label {
  color: #cccccc;
}

.profile-edit-case-about-value {
  text-align: left;
  color: #1a1a1a;
  font-family: Open Sans;
  font-size: 20px;
  width: 200px;
  font-weight: 600;
  letter-spacing: 0.024em;
  text-align: left;
}

.dark-mode .profile-edit-case-about-value {
  color: #e6e6e6;
}

.profile-edit-case-about-value2 {
  color: #1a1a1a;
  font-family: Open Sans;
  font-size: 20px;
  width: 200px;
  font-weight: 600;
  letter-spacing: 0.024em;
  text-align: left;
}

.dark-mode .profile-edit-case-about-value2 {
  color: #e6e6e6;
}

.profile-edit-case-about-value-address {
  text-align: left;
  color: #1a1a1a;
  font-family: Open Sans;
  font-size: 20px;
  width: 500px;
  font-weight: 600;
  letter-spacing: 0.024em;
  text-align: left;
}

.dark-mode .profile-edit-case-about-value-address {
  color: #e6e6e6;
}

.profile-edit-case-about-label2 {
  color: #666666;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .profile-edit-case-about-label2 {
  color: #cccccc;
}

.profile-edit-case-about-label3 {
  color: #666666;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.032em;
  text-align: left;
}

.dark-mode .profile-edit-case-about-label3 {
  color: #cccccc;
}

.about-case-contents {
  width: 1081px;
  height: 682px;
  top: 30px;
  left: 30px;
  gap: 0px;
  opacity: 1;
  background: white;
  padding-top: 20px;
  border-radius: 12px;
}

.dark-mode .about-case-contents {
  background: #2d1227;
}

.profile-case-content {
  width: 1097px;
  height: 400px;
  top: 30px;
  left: 30px;
  gap: 0px;
  opacity: 1;
  background: white;
  border-radius: 12px;
}

.dark-mode .profile-case-content {
  background-color: #1e0419;
}

.details-info {
  display: flex;
  flex-direction: column;
  width: 777px;
  height: 252px;
  top: 30px;
  left: 274px;
  opacity: 1;
  gap: 10px;
}

.prof-info {
  width: 1200px;
  height: 252px;
  top: 30px;
  left: 274px;
  opacity: 1;
  gap: 10px;
  margin-left: 15px;
}

.detail-column-exp {
  width: 110px;
  height: 58px;
  gap: 2px;
}
.detail-column-qua {
  gap: 2px;
  width: 110px;
  height: 58px;
  margin-left: 300px;
}
.detail-column-aff {
  gap: 2px;
  width: 108px;
  height: 58px;
  margin-left: 200px;
}

.detail-column-Availibility {
  width: 110px;
  height: 58px;
  gap: 2px;
}
.detail-column-work {
  gap: 2px;
  width: 125px;
  height: 58px;
  margin-left: 100px;
}

.detail-column-cases {
  width: 130px;
  height: 58px;
  gap: 2px;
}
.detail-column-num {
  gap: 2px;
  width: 200px;
  height: 58px;
  margin-left: 250px;
}
.detail-column-rating {
  gap: 2px;
  width: 200px;
  height: 58px;
  margin-left: 200px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.switch input {
  opacity: 1;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #883979;
}

input:checked + .slider:before {
  transform: translateX(14px);
}

.working-hours {
  display: flex;
  gap: 8px;
  position: absolute;
}

.working-hours-input {
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

footer {
  margin-top: auto;
}

.admin-dashboard {
  width: 100%;
  height: 1725px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 200px;
}

.dark-mode .admin-dashboard {
  background-color: #411d39;
}

.amount {
  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 13.62px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.admin-title {
  display: flex;
  align-items: flex-start;
  justify-content: left;
  gap: 10px;
  white-space: nowrap;
}

.admin-title h1 {
  color: #7e3a89;
  font-family: Poppins;
  font-size: 22px;
  font-weight: 600;
  line-height: 33px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dark-mode .admin-title h1 {
  color: #ad499a;
}

.admin-title span {
  flex: 0 0 50px;
  height: 1px;
  background-color: #7e3a89;
}

.admin-dashboard-container {
  margin: 30px 60px 15px 20px;
  position: relative;
  gap: 50px;
}

.admin-dashboard-title-container {
  display: flex;
  gap: 425px;
  align-items: center;
}

.admin-button-group {
  display: flex;
  gap: 10px;
  z-index: 100;
}

.period-button {
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
  color: #b0b0b0;
  font-weight: normal;
  transition: color 0.2s, font-weight 0.2s;
}

.period-button.active {
  color: #6a1b9a;
  font-weight: bold;
}

.adminComponents {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.dark-mode .adminComponents {
  background-color: #411d39;
}

.dark-mode .admin-dashboard-container {
  background-color: transparent;
}

.admin-dashboard-container-box {
  width: 1081px;
  height: 100%;
  display: flex;
  gap: 28px;
  flex-shrink: 0;
}

.admin-dashboard-container-box-2 {
  width: 805px;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.admin-Container1 {
  display: flex;
  gap: 28px;
  align-self: stretch;
  width: 1081px;
  height: 340px;
}

.admin-card {
  display: flex;
  width: 249px;
  height: 1084px;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: #f6f6f6;
  overflow: hidden;
}

.dark-mode .admin-card {
  background-color: #1e0419;
}

.admin-menu-options {
  height: 324px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  padding-top: 16px;
}

.admin-menu-item {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
  background: white;
  border: none;
  padding: 11px 20px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s, color 0.3s;
  width: 100%;
}

.dark-mode .admin-menu-item {
  background-color: #2d1227;
  color: #f8f8f8;
}

.admin-menu-item.active {
  background-color: #883979;
  color: white;
}

.admin-menu-item:hover {
  background-color: #883979;
  color: white;
}

.admin-menu-item.cases {
  width: 201px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.admin-menu-item.patients {
  padding-left: 59px;
  padding-right: 63px;
}

.admin-menu-item.reports {
  padding-left: 61px;
  padding-right: 64px;
}

.admin-menu-item.assistance {
  padding-left: 47px;
  padding-right: 52px;
}

.admin-menu-item.chat {
  padding-left: 37px;
  padding-right: 43px;
}

.admin-card-container {
  margin-top: 16px;
  width: 272px;
  height: 223px;
  left: 0;
  top: 48px;
  background: #f8f8f8;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dark-mode .admin-card-container {
  background-color: #2d1227;
}

@media (max-width: 1201px) {
  .admin-card-container {
    max-width: 272px;
  }
}

.admin-card-patient {
  border-radius: 10px;
  padding: 18px;
  max-height: 223px;
  max-width: 300px;
  width: 100%;
}

.dark-mode .admin-card-patient {
  background-color: #2d1227;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  color: #4a4a4a;
}

.dropdown-indicator1 {
  color: #d32f2f;
  font-size: 12px;
  margin-right: 20px;
}

.dropdown-indicator-donut {
  color: #d32f2f;
  font-size: 12px;
  margin-left: 150px;
}

.card-content {
  text-align: center;
  padding-left: 10px;
}

.card-content h1 {
  color: #000000;
  font-size: 48px;
  font-weight: bold;
  margin: 10px 0;
  font-family: Open Sans;
  font-size: 64px;
  font-weight: 600;
  line-height: 60px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dark-mode .card-content h1 {
  color: #fff;
}

.card-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.active-patients {
  background: #883979;
  color: #fff;
  font-size: 14px;
  width: 140px;
  height: 26px;
  position: relative;
  top: 0px;
  left: 0px;
  padding: 6px 16px;
  gap: 8px;
  border-radius: 100px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.new-admissions {
  background: #1976d2;
  color: #fff;
  font-size: 13px;
  width: 140px;
  height: 26px;
  top: 0px;
  left: 0px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 100px;
  border: 1px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.admin-overview-title {
  text-align: left;
  color: #666666;
  font-size: 16px;
  font-family: poppins;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}

.dark-mode .admin-overview-title {
  color: #e6e6e6;
}

.admin-graph-container {
  width: 561px;
  height: 223px;
  flex-shrink: 0;
  position: relative;
  background-color: #f8f8f8;
  border-radius: 8px;
}
.dark-mode .admin-graph-container {
  background-color: #2d1227;
}

@media (max-width: 1201px) {
  .admin-graph-container {
    width: 561px;
  }
.dark-mode .admin-graph-container {
  background-color: #2d1227;
  }
}

.earnings-container {
  padding: 20px;
}

.earnings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.earnings-header h2 {
  font-size: 18px;
  font-weight: bold;
  color: #4a4a4a;
}

.period-buttons {
  display: flex;
  gap: 10px;
}

.period-button {
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
  color: #b0b0b0;
  font-weight: normal;
  transition: color 0.2s, font-weight 0.2s;
}

.period-button.active {
  color: #883979;
  font-weight: bold;
}

.earnings-card {
  margin-top: 16px;
  border-radius: 10px;
  padding: 20px;
}

.dark-mode .earnings-card {
  background-color: #2d1227;
}

.card-patients-header {
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #4a4a4a;
  font-family: Poppins;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dark-mode .card-patients-header {
  color: #e5e5e5;
}

.card-header {
  margin-bottom: 47px;
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #4a4a4a;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dark-mode .card-header {
  color: #ffffff;
}

.dark-mode .card-header1 {
  color: #ffffff;
}

.card-header1 {
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #4a4a4a;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

.chart-container-earnings {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 10px;
}

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

.amount {
  font-size: 14px;
  color: #4a4a4a;
}

.dark-mode .amount {
  color: #f0f0f0;
}

.bar {
  width: 30px;
  background: #883979;
  border-radius: 10px;
  margin-top: 6px;
}

.label {
  font-size: 12px;
  color: #4a4a4a;
  margin-top: 5px;
}

.admin-graph {
  display: flex;
  gap: 16px;
}

@media (max-width: 1201px) {
  .admin-graph {
    gap: 16px;
  }
}

.admin-total {
  max-width: 804px;
  display: flex;
  text-align: left;
  gap: 28px;
}

.admin-total-cases,
.admin-closed-cases,
.admin-new-cases,
.admin-inprogress-cases {
  width: 148px;
  height: 125px;
  border-radius: 12px;
  padding: 16px;
  background-color: #f8f8f8;
}

.case-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.active-dot {
  background-color: #883979;
}

.closed-dot {
  background-color: #f39c12;
}

.legend-text {
  font-size: 14px;
  color: #333;
}

.dark-mode .legend-text {
  color: #f0f0f0;
}

.total-tiles {
  gap: 28px;
  display: flex;
}

.admin-total-cases {
  background-color: #fcfffc;
}

.admin-closed-cases {
  background-color: #fff8f9;
}

.admin-new-cases {
  background-color: #fcfffc;
}

.admin-inprogress-cases {
  background-color: #fff8f9;
}

.admin-total-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-total-circle {
  background-color: #e1ffe3;
  display: flex;
  justify-content: center;
  border-radius: 100%;
  width: 28px;
  height: 28px;
  align-items: center;
}

.total-num {
  margin-top: 5px;
}

.admin-cases-percent {
  position: relative;
  top: 56px;
}

.admin-summary-header-for-h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #666666;
  margin-bottom: 16px;
}

.admin-expenses-summary-title {
  margin: 0;
  padding: 0;
}

.dark-mode .admin-expenses-summary-title {
  color: #f6f6f6;
}

.admin-cases-overview-title {
  margin-right: 95px;
}

.dark-mode .admin-cases-overview-title {
  color: #ffffff;
}

.admin-summary-row {
  align-items: flex-start;
}

.admin-summary-card {
  background: #f8f8f8;
  border-radius: 10px;
  padding: 15px;
  width: 531px;
  height: 350px;
  gap: 0px;
  border-radius: 16px;
}

.dark-mode .admin-summary-card {
  background-color: #2d1227;
}

.admin-summary-cases-card {
  flex: 1 1;
  margin-left: 20px;
  background: #f8f8f8;
  border-radius: 10px;
  padding: 15px;
  width: 260px;
  height: 350px;
  gap: 0px;
  border-radius: 16px;
}

.dark-mode .admin-summary-cases-card {
  background-color: #2d1227;
}

.admin-staff-card {
  position: relative;
  background: #f8f8f8;
  border-radius: 10px;
  padding: 1.5rem;
  width: 1260px !important;
  height: 406px;
  gap: 0px;
  border-radius: 16px;
}

.dark-mode .admin-staff-card {
  background-color: #2d1227;
  color: #f0f0f0;
}

.admin-usage-card {
  background: #f8f8f8;
  border-radius: 10px;
  padding: 15px;
  padding-top: 0px;
  width: 300px;
  height: 183px;
  gap: 0px;
  border-radius: 16px;
  overflow-y: auto;
}

.dark-mode .admin-usage-card {
  background-color: #2d1227;
}

.admin-usage-card::-webkit-scrollbar {
  width: 8px;
  border-radius: 100px;
}

.admin-usage-card::-webkit-scrollbar-thumb {
  background-color: #883979;
  border-radius: 100px;
}

.admin-usage-card::-webkit-scrollbar-track {
  background: transparent;
}

.admin-usage-card::-webkit-scrollbar-thumb:hover {
  background-color: #883979;
}

.admin-summary-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  margin-bottom: 16px;
  margin-top: 10px;
}

.admin-currency-dropdown {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0.5rem;
}

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

.admin-bar-group {
  display: flex;
  gap: 1rem;
}

.admin-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 5px;
}

.admin-navigation {
  display: flex;
  gap: 0.5rem;
}

.admin-nav-btn {
  background: #6e44ff;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.admin-checked-in {
  color: #28a745;
}

.admin-attendance-list {
  list-style: none;
  padding: 0;
}
.admin-attendance-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.admin-status-dot {
  background: #28a745;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.usage {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.admin-usage-summary {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
}

.slides-heading {
  font-family: Open Sans;
  font-size: 10px;
  font-weight: 400;
  line-height: 13.62px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  background-color: #ffebd6;
  padding: 4px 16px;
  border-radius: 8px;
  margin-top: 1px;
  color: #b6610b;
}

.admin-summary-card-usage {
  margin-top: 80px;
  background: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  width: 400px;
  height: 175px;
}

.admin-usage-box {
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
  flex: 1 1;
}

.dark-mode .admin-usage-box {
  color: #f6f6f6;
}

.admin-usage-box h3 {
  margin-left: 15px;
  font-family: Open Sans;
  font-size: 36px;
  font-weight: 600;
  line-height: 49.03px;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-top: 5px;
}

.admin-usage-box + .admin-usage-box {
  margin-left: 1rem;
}

@media (max-width: 768px) {
  .admin-summary-row {
    flex-direction: column;
  }

  .admin-usage-box + .admin-usage-box {
    margin-left: 0;
    margin-top: 1rem;
  }
}

.arrow-buttons-container {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: end;
  padding: 16px;
}

.arrow-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.arrow-button span {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.arrow-button:hover {
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
  background-color: #f0f0f0;
}

.arrow-button:active {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #f0f0f0;
}

.expenses-summary {
  display: flex;
  flex-direction: row;
}

.earnings-summary {
  display: flex;
  flex-direction: row;
}

.cloned-overview {
  background: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  width: 388px;
  text-align: left;
}

.admin-summary-row {
  display: flex;
  align-items: flex-start;
  width: 849px;
}

.dropdown-indicator2 {
  position: relative;
}

.dropdown-curr-button {
  border: 1px solid #ccc;
  background: #883979;
  cursor: pointer;
  width: 66px;
  height: 24px;
  padding: 4px 4px 4px 4px;
  gap: 8px;
  border-radius: 100px;
  font-family: Open Sans;
  font-size: 12px;
  color: #b0b0b0;
  font-weight: 400;
  text-align: center;
  line-height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dropdown-curr-menu {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100px;
  background: transparent;
  z-index: 1000;
}

.dropdown-curr-item {
  max-width: 66px;
  height: 24px;
  margin-bottom: 3px;
  border: 1px solid #ccc;
  background: #e6e6e6;
  cursor: pointer;
  text-align: center;
  line-height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: 8px;
  border-radius: 100px;
  font-family: Open Sans;
  font-size: 12px;
  color: black;
  font-weight: 400;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dropdown-curr-item:hover {
  background-color: #883979;
  color: whitesmoke;
}

.staff-container {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.staff-title {
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-align: left;
}

.staff-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.staff-card {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10px 15px;
  border-radius: 10px;
}

.dark-mode .staff-card {
  background-color: #1e0419;
}

.staff-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover;
  width: 46px;
  height: 46px;
  top: 8px;
  left: 8px;
  gap: 0px;
  border-radius: 10px;
  opacity: 1;
}

.staff-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.staff-info-dashboard h4 {
  margin: 0;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dark-mode .staff-info-dashboard h4 {
  color: #f0f0f0;
}

.staff-info-dashboard span {
  color: gray;
  font-family: Open Sans;
  font-size: 10px;
  font-weight: 400;
  line-height: 13.62px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.staff-role {
  background: #883979;
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.9rem;
  margin-left: 30px;
}

.staff-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  width: 90%;
  position: absolute;
  bottom: 20px;
}

.prev-button,
.next-button {
  font-size: 0.9rem;
}
.prev-staff-button,
.next-staff-button {
  outline: none;
  border: none;
  background: none;
}

.active-staff-label {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  font-family: Open Sans;
  font-size: 15px;
  font-weight: 400;
  line-height: 16.34px;
  text-align: right;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.dark-mode .active-staff-label {
  color: #f5f5f5;
}

.arrow-circle1 {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}
.arrow-circle2 {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.dark-mode .arrow-circle2 {
  background-color: #1e0419;
  color: #f5f5f5;
  border: 1px solid #1e0419;
}

.arrow-circle1:hover,
.arrow-circle2:hover {
  background-color: #883979;
  color: white;
}

.arrow-circle1 svg {
  font-size: 14px;
}
.arrow-circle2 svg {
  font-size: 14px;
}

.admin-summary-row.admin-summary-column {
  margin-left: 20px;
}
.admin-summary-header-for-h3-2 {
  margin-top: 30px;
  display: flex;
  align-items: center;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;

  color: #666666;
  margin-bottom: 16px; /* Adjust margin below header */
}
.dark-mode .admin-summary-header-for-h3-2 {
  color: #f8f8f8;
}
span.admin-usage-overview-title {
  margin-left: 486px;
}
.admin-expenses-staff-title {
  margin: 0;
  padding: 0;
}

.admin-cases-usage-title {
  margin-left: 530px;
}
/* anouncement */

.announcement-header {
  font-family: Poppins;
  color: #4d4d4d;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dark-mode .announcement-header {
  color: #f8f8f8;
}

.announcement-admin-table {
  border-collapse: collapse;
  width: 100%;
  overflow-y: auto;
}

.table-anounce-header,
.table-anounce-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}
.table-anounce-column-mid {
  margin-left: 5px;
}

.table-anounce-header {
  font-weight: bold;
  color: #883979; /* Purple tone for header text */
  margin-right: 30px;
  margin-left: 5px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.table-anounce-cell {
  font-size: 12px;
  font-weight: 400;
  line-height: 13.62px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.dark-mode .table-anounce-cell {
  color: #f8f8f8;
}
.dark-mode .table-anounce-cell-mid {
  color: #f8f8f8;
}
.table-anounce-cell-mid {
  flex: 2 1; /* Allow this cell more space if needed */
  text-align: left !important; /* Force left alignment */
  overflow: hidden; /* Prevent overflowing content */
  text-overflow: ellipsis; /* Handle long text gracefully */
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  line-height: 13.62px;
  margin-left: 68px;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.table-anounce-row:last-child {
  border-bottom: none;
}

.admin-summary-column {
  display: flex;
  flex-direction: column;
}

.permissions-container {
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 804px;
  height: 900px;
  top: 120px;
  left: 337px;
  gap: 0px;
  border-radius: 12px;
  opacity: 1;
  padding-top: 15px;
}
.permission-header {
  display: flex;
  margin-left: 16px;
  margin-top: 15px;
  height: 36px;
  background-color: #ffffff;
  gap: 18px;
  top: 16px;
  left: 16px;
  padding: 8px 16px 7px 16px;
  border-radius: 12px;
}
.dark-mode .permission-header {
  background-color: #2d1227;
}
.permission-btn {
  background-color: #fff; /* White background for contrast */
  cursor: pointer;
  color: #000000;
  transition: all 0.3s ease; /* Smooth hover effect */
  top: 8px;
  left: 16px;
  /* padding: 6px 16px 6px 16px; */
  gap: 8px;
  border-radius: 8px;
  border: none;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dark-mode .permission-btn {
  background-color: #2d1227;
  border: 1px solid white;
  color: white;
}
.permission-btn.active {
  background-color: #883979; /* Active background color */
  color: white; /* Active text color */
  width: 86px;
  height: 33px;
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
}

/* Hover Effect */
.permission-btn:hover {
  background-color: #883979; /* Change background color on hover */
  color: #fff; /* Change text color to white on hover */
  width: 86px;
  height: 33px;
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
}

.permission-btn2 {
  background-color: #fff; /* White background for contrast */

  height: 40px;
  cursor: pointer;
  color: #883979; /* Text color */
  border: 1px solid #883979;
  transition: all 0.3s ease; /* Smooth hover effect */
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  transition: background-color 0.3s, color 0.3s;
}

/* Hover Effect */
.permission-btn2:hover {
  background-color: #883979; /* Change background color on hover */
  color: #fff; /* Change text color to white on hover */
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
}
.permission-btn2.active-btn {
  background-color: #883979;
  color: white;
}

.modify-permissions-button {
  width: 213px;
  height: 46px;
  margin-left: 24px;
  margin-top: 10px;
  gap: 8px;
  opacity: 1;
  display: flex;
  border: 1px solid #883979;
  border-radius: 8px;
  background-color: transparent;
}

.modify-button-text {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: 0.024em;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
  text-align: center;
}

.super-permissions-card {
  display: flex;
  flex-direction: column;
  width: 849px;
  height: 683px;
  margin-top: 0px;
  margin-left: 0px;
  gap: 0px;
  border-radius: 12px;
  background-color: #f8f8f8;
  padding-bottom: 20px;
}
.dark-mode .permissions-card {
  background-color: #1e0419;
}

.permission-doctor-info {
  display: flex;
  align-items: center;
}

.permission-doctor-info {
  display: flex;
  margin-bottom: 20px;
}

.permission-doctor-labels {
  display: flex;
  margin-left: 15px;
  gap: 10px;
}

.permission-doctor-section {
  display: flex;
  flex-direction: column;
  margin-right: 100px;
}

.permission-doctor-section2 {
  display: flex;
  flex-direction: column;
  margin-left: 100px;
}

.permission-doctor-label {
  color: #666666;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.permission-doctor-value {
  color: #1a1a1a;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.permission-doctor-avatar {
  background-color: #ccc;
  margin-right: 15px;
  width: 77px;
  height: 83px;
  margin-top: 24px;
  margin-left: 24px;
  gap: 0px;
  border-radius: 10px;
  opacity: 1;
}

.permissions-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-left: 20px;
}

.permission-item {
  display: flex;
  justify-content: space-between;
}
.dark-mode .permission-label {
  color: #fff;
}

.permission-label {
  font-family: Poppins;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.permission-checkbox {
  -webkit-appearance: auto;
          appearance: auto;
  margin-right: 20px;
  width: 21px;
  height: 21px;
  border: 2px solid #000000;
}
.permissions-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  margin-right: 16px;
}

.admin-save-button,
.admin-reset-button {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  cursor: pointer;
  width: 72px;
  height: 40px;
  top: 614px;
  left: 668px;
  padding: 7px 12px 10px 14px;
  gap: 8px;
  border-radius: 8px;
}

.admin-save-button {
  background-color: #883979;
  color: white;
  margin-right: 10px;
  margin-top: 0px;
}

.admin-reset-button {
  background-color: #ffffff;
  color: #883979;
  border-color: #883979;
}
.dark-mode .admin-reset-button {
  background-color: #2d1227;
  border: 1px solid #fff;
  color: #fff;
}

.admin-save-button:hover {
  background-color: #541446;
}

.admin-save-button:disabled {
  background-color: #ccc;
  color: #fff;
}

.admin-reset-button:hover {
  background-color: #883979;
  color: white;
}

.permission-container {
  width: 840px;
  height: 782px; /* Adjust height based on content */
  margin: 0px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: scroll;
  overflow-x: hidden;
  border-radius: 12px;
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.permission-container::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
  border-radius: 100px; /* Rounded scrollbar */
}

.permission-container::-webkit-scrollbar-thumb {
  background-color: #883979; /* Scrollbar thumb color */
  border-radius: 100px; /* Rounded scrollbar thumb */
}

.permission-container::-webkit-scrollbar-track {
  background: transparent; /* Scrollbar track color */
}

.permission-container::-webkit-scrollbar-thumb:hover {
  background-color: #883979; /* Darker color on hover */
}

.permission-search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0px;
  margin-left: 0px;
  margin-top: 10px;
}

.permission-search-input {
  width: 384px !important;
  height: 38px !important;
  padding: 0px 8px 0px 8px !important;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0 8px;
  margin: 0px;
}

.search-dropdown {
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0 8px;
}

.individual-section {
  width: 800px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 8px;
  background-color: white;
}
.dark-mode .super-individual-section {
  background-color: #2d1227;
  border: 1px solid #808080;
  color: white;
}

.dark-mode .individual-section {
  background-color: #2d1227;
  border: 1px solid #808080;
  color: white;
}

.individual-image {
  width: 46px;
  height: 46px;
  border-radius: 10px;
}

.individual-info {
  flex-grow: 1;
}

.individual-name {
  font-size: 12px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  color: #000;
}
.dark-mode .super-individual-name {
  color: white;
}

.individual-date {
  font-size: 10px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  color: #666666;
}

.dropdown-toggle {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  cursor: pointer;
}

.dropdown-content-permission {
  width: 800px;
  height: 640px;
  border: 1px solid #dfdfdf;
  border-radius: 12px;
  margin-top: 10px;
  padding: 8px;
  background-color: #fff;
}
.search-dropdown .option1 {
  margin-top: 10px;
}
/* Style the dropdown container */
.search-dropdown {
  background-color: #f8f9fa; /* Light background */
  border: 1px solid #ced4da; /* Light gray border */
  border-radius: 5px; /* Rounded corners */
  padding: 5px; /* Inner spacing */
  color: #495057; /* Text color */
  font-size: 16px; /* Font size */
  outline: none;
  width: 150px; /* Adjust width */
  cursor: pointer;
}

/* Add hover effect */
.search-dropdown:hover,
.search-dropdown:active {
  background-color: white;
  color: #883979;
}

/* Style the options */
.search-dropdown option {
  background-color: #ffffff; /* White background for options */
  color: #495057; /* Text color */
  padding: 10px; /* Inner spacing for better readability */
  font-size: 16px; /* Font size */
  margin-top: 20px !important;
}

/* Highlight selected option */
.search-dropdown option:checked {
  background-color: #a6a6a6; /* Highlighted background */
  color: #ffffff; /* White text for selected option */
}
.search-dropdown option {
  margin-top: 20px; /* Add spacing between options and dropdown */
  padding: 10px; /* Adjust for better option spacing */
  font-size: 16px; /* Ensure options are readable */
  background-color: #f8f9fa; /* Option background color */
  color: #333; /* Option text color */
}
/* Container */
.dropdown-container-search {
  position: relative;
  width: 94px;
  height: 46px;
}

/* Dropdown toggle button */
.search-dropdown {
  width: 130%;
  padding: 10px;
  font-size: 15px;
  font-weight: 400;
  font-family: poppins;
  background-color: transparent;
  border: 1px solid #b3b3b3;
  cursor: pointer;
  height: 21px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  color: black;

  /* padding-bottom: 12 !important; */
}
.dark-mode .search-dropdown {
  background-color: #1e0419;
}
.dark-mode .super-search-dropdown {
  background-color: #1e0419;
  color: #b3b3b3;
  border: 1px solid #b3b3b3;
}

.dark-mode .search-dropdown {
  background-color: transparent;
  color: white;
}

/* Dropdown options */
.search-dropdown-options {
  position: absolute;
  top: 100%; /* Below the dropdown */
  left: 0;
  margin-top: 12px; /* Ensure spacing between dropdown and options */
  width: 142px;
  border-radius: 8px;
  border: 1px solid #883979;
  background-color: #ffffff;
  list-style: none;
  padding: 0;
  z-index: 1000;
  color: #883979;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.dark-mode .super-search-dropdown-options {
  background-color: #1e0419;
  border: 1px solid #883979;
  color: white;
}
.dark-mode .search-dropdown-options {
  background-color: #1e0419;
  border: 1px solid #883979;
  color: white;
}

.search-dropdown-options li {
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 400;
  font-family: poppins;
  border-bottom: 1px solid #b3b3b3;
}

.search-dropdown:hover {
  border-color: #883979;
  cursor: pointer;
}

.search-dropdown-options li:hover {
  border-color: #883979;
  cursor: pointer;
}
.dropdown-icon-search {
  margin-left: 54px; /* Adjust spacing as needed */
  margin-top: 0px;
  display: flex;
  align-items: center;
}

.permission-reset-button {
  background-color: #666666;
}

.permission-save-button,
.permission-reset-button {
  padding: 8px 16px 8px 16px;
  cursor: pointer;
  gap: 10px;
  border-radius: 8px;
  color: white;
}

.permission-save-button {
  margin-right: 10px;
  background-color: #883979;
}
.permission-save-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
.permissions-card {
  border-radius: 12px;
  padding-bottom: 20px;
  background-color: #f8f8f8;
  width: 845px;
}
.dark-mode .individual-name {
  color: white;
}
.dark-mode .dropdown-content-permission {
  background-color: #2d1227;
}

.control-panel-container {
  background: #f8f8f8;
  width: 849px;

  top: 120px;
  left: 337px;
  gap: 0px;
  border-radius: 12px;
  opacity: 1;
  padding-bottom: 20px;
  padding-top: 1px;
  margin-top: 20px;
}
.dark-mode .control-panel-container {
  background-color: #1e0419;
}
.dark-mode .control-panel-header-row {
  background-color: #2d1227;
}
.dark-mode .control-panel-patient-reg-label {
  color: #ffffff;
}

.dark-mode .control-panel-type-of-fields {
  color: #ffffff;
}
.dark-mode .control-panel-enable-disable {
  color: #ffffff;
}

.dark-mode .control-panel-label {
  color: #ffffff;
}

.dark-mode .control-panel-field-type {
  color: #ffffff;
}
.dark-mode .control-panel-section h4 {
  color: #ffffff;
}

.dark-mode .control-panel-admin-hub-main {
  background-color: #2d1227;
}

.control-panel-admin-hub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}

.control-panel-admin-hub-main {
  /* width: 470px; */
  height: 55px;
  top: 161px;
  left: 326px;
  padding: 8px 15px 8px 15px;
  gap: 8px;
  border-radius: 8px;
  padding-top: 15px;
  opacity: 1;
  background: #f8f8f8;
}

.control-panel-admin-hub-title {
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.0288em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
}

.control-panel-tabs {
  width: 706px;
  height: 46px;
  top: 96px;
  left: 32px;
  gap: 20px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
}

.control-panel-tab-button {
  width: 225px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #883979;
  color: #883979;
  opacity: 1;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  padding: 0px;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.control-panel-tab-button.active {
  background-color: #883979;
  color: white;
}

.control-panel-section h4 {
  font-family: poppins;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-left: 32px;
}

.control-panel-header-row {
  display: flex;
  justify-content: space-between;

  padding: 0px 15px;
  margin-bottom: 16px;
  margin-left: 32px;

  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  width: 769px;
  height: 42px;
  top: 61px;
  left: 16.5px;
  gap: 0px;
  border-radius: 8px;
  opacity: 1;
  background: #fcf3fa;
  display: flex;
}

.control-panel-patient-reg-label {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.control-panel-type-of-fields {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-left: 75px;
}
.control-panel-enable-disable {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-right: 45px;
}

.control-panel-basic-info {
  text-align: left;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
  margin-left: 44px;
}

.control-panel-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 44px;
  margin-right: 44px;
  margin-top: 10px;
}

.control-panel-label {
  flex: 1 1;
  text-align: left;
  padding-left: 8px;
  font-size: 14px;
  font-weight: 400;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.control-panel-field-type {
  flex: 1 1;
  text-align: center;
  font-family: poppins;
  font-size: 13px;
}

.control-panel-toggle-container {
  flex: 1 1;
  text-align: center;
}

.control-panel-dividerline {
  width: 797px;
  height: 0px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 6px;
  gap: 0px;
  border: 0.5px solid transparent;
  opacity: 1;
  border: 0.5px solid #883979;
}

.control-panel-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  left: 100px;
}

.control-panel-switch input {
  opacity: 1;
  width: 0;
  height: 0;
}

.control-panel-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.control-panel-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .control-panel-slider {
  background-color: #883979;
}

input:checked + .control-panel-slider:before {
  transform: translateX(14px);
}

.controlpanel-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  margin-right: 100px;
}

.save-button-control {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  cursor: pointer;
  width: 72px;
  height: 40px;
  top: 614px;
  left: 668px;
  padding: 7px 12px 10px 14px;
  gap: 8px;
  border-radius: 8px;
}

.save-button-control {
  background-color: #883979;
  color: white;
  margin-right: 10px;
}

.save-button-control:hover {
  background-color: #682d5d;
}

/* infor icon--------------------------------- */
.control-info-icon-container {
  position: relative;
  display: inline-block;
}

.control-info-icon {
  cursor: pointer;
  color: black;
  margin-left: 10px;
}

/* .control-info-icon-container {
  position: relative;
  top: 337px;
  left: 1010px;
}

.control-info-icon-container1 {
  position: absolute;
  top: 370px;
  left: 1020px;
} */

.control-info-floating-box {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -150px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-icon-container:hover .control-info-floating-box {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-round-info-icon {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.control-payments-admin-switch input:disabled + .payments-admin-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}

.control-info-floating-box1 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-icon-container1:hover .control-info-floating-box1 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-round-info-icon1 {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.control-panel-switch input:disabled + .control-panel-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}

/* infor icon--------------------------------- */
.app-control-info-icon-container {
  position: relative;
  display: inline-block;
}

.app-control-info-icon {
  cursor: pointer;
  color: black;
  margin-left: 10px;
}

.app-control-info-icon-container {
  position: absolute;
  top: 298px;
  left: 1010px;
}

.app-control-info-icon-container1 {
  position: absolute;
  top: 330px;
  left: 1020px;
}

.app-control-info-floating-box {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.app-control-info-icon-container:hover .app-control-info-floating-box {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.app-control-round-info-icon {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.control-payments-admin-switch input:disabled + .payments-admin-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}

.app-control-info-floating-box1 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.app-control-info-icon-container1:hover .app-control-info-floating-box1 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.app-control-round-info-icon1 {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.control-panel-switch input:disabled + .control-panel-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}

/* infor icon--------------------------------- */
.case-control-info-icon-container {
  position: relative;
  display: inline-block;
}

.case-control-info-icon {
  cursor: pointer;
  color: black;
  margin-left: 10px;
}

.case-control-info-icon-container {
  position: absolute;
  top: 433px;
  left: 1010px;
}

.case-control-info-icon-container1 {
  position: absolute;
  top: 465px;
  left: 1020px;
}

.control-info-icon-container2 {
  position: absolute;
  top: 659px;
  left: 1020px;
}

.control-info-icon-container3 {
  position: absolute;
  top: 815px;
  left: 1020px;
}

.control-info-icon-container4 {
  position: absolute;
  top: 775px;
  left: 1020px;
}

.control-info-icon-container5 {
  position: absolute;
  top: 895px;
  left: 1020px;
}

.control-info-icon-container6 {
  position: absolute;
  top: 975px;
  left: 1020px;
}

.case-control-info-floating-box {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-floating-box2 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-floating-box3 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-floating-box4 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-floating-box5 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-floating-box6 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.case-control-info-icon-container:hover .case-control-info-floating-box {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.case-control-round-info-icon {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.control-payments-admin-switch input:disabled + .payments-admin-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}

.case-control-info-floating-box1 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.case-control-info-icon-container1:hover .case-control-info-floating-box1 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-info-icon-container2:hover .control-info-floating-box2 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-info-icon-container3:hover .control-info-floating-box3 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-info-icon-container4:hover .control-info-floating-box4 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-info-icon-container5:hover .control-info-floating-box5 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-info-icon-container6:hover .control-info-floating-box6 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.case-control-round-info-icon1 {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.control-panel-switch input:disabled + .control-panel-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}
.control-panel-toggle-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px; /* Adjust spacing as needed */
}

.control-info-icon-container {
  position: absolute;
  right: -40px; /* Adjust position to align next to the toggle */
  top: 50%; /* Center vertically */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  cursor: help;
  z-index: 99;
}

.control-info-floating-box {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(0%);
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  z-index: 100;
}

.control-info-icon-container:hover .control-info-floating-box {
  display: block;
}
.control-info-icon-container {
  display: flex;
  align-items: center;
  position: relative; /* Position relative to the toggle container */
  margin-left: 8px; /* Adjust spacing as needed */
  cursor: help; /* Display a help cursor */
  width: 41px !important;
  left: 120px !important;
  top: 13px !important;
}

.control-info-icon {
  font-size: 16px; /* Adjust icon size as needed */
  color: #666; /* Adjust icon color */
}

.control-info-floating-box {
  display: none;
  position: absolute;
  top: 100%;
  left: -150px !important;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  z-index: 100;
}

.control-info-icon-container:hover .control-info-floating-box {
  display: block; /* Show on hover */
}

.control-panel-registration-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.control-panel-registration-modal {
  background: #f8f8f8;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dark-mode .control-panel-registration-modal {
  background-color: #1e0419;
}

.first-column {
  display: flex;
  gap: 16px;
}

.control-panel-registration-modal h2 {
  margin-bottom: 20px;
  font-family: Poppins;
  font-size: 22px;
  font-weight: 500;
  line-height: 33px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dark-mode .control-panel-registration-modal h2 {
  color: #fff;
}

.dark-mode .controlpanel-label {
  color: #fff;
}

.control-panel-registration-add-modal {
  margin-bottom: 15px;
}

.controlpanel-input-add-modal {
  width: 300px;
  padding: 8px;
  background-color: #ffffff;
  border-radius: 8px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  border: white;
  color: #ccc;
}

.controlpanel-input:hover {
  border: 1px solid #883979;
  cursor: pointer;
}

.dark-mode .controlpanel-input {
  background-color: transparent !important;
  border: 1px solid #883979;
  color: white;
}

.dark-mode .controlpanel-input::placeholder {
  color: white;
}

.dark-mode .controlpanel-input:focus {
  background-color: transparent;
  border: 1px solid #883979;
}

.control-panel-registration-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.control-panel-registration-submit-button {
  background-color: #883979;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.control-panel-registration-submit-button:hover {
  background-color: #6b2d60;
  cursor: pointer;
}

.control-panel-registration-close-button {
  background-color: #ccc;
  color: #000;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.control-panel-registration-close-button:hover {
  background-color: #cececeab;
  cursor: pointer;
}

.control-panel-registration-open-modal-button {
  background-color: #6c63ff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* Main Container */
.super-feedback-container {
  width: 835px;
  height: 375px;
  position: relative;
  top: 0px;
  left: 0px;
  border-radius: 16px;
  background-color: #f8f8f8;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dark-mode .super-feedback-container {
  background-color: #1e0419;
}
.dark-mode .super-description {
  color: #ffffff;
}
.dark-mode .super-select-title {
  color: #ffffff;
}
.dark-mode .super-select-dropdown {
  background-color: #1e0419;
  color: #ccc;
}
.dark-mode .super-textarea {
  background-color: #1e0419;
  color: #e9e9e9;
}

/* Description Section */
.super-description {
  width: 711px;
  height: 56px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  color: black;
}

/* Select Section */
.super-select-section {
  width: 380px;
  height: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.super-select-title {
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
}

.super-select-dropdown {
  height: 40px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  outline: none;
  cursor: pointer;
}

/* Textarea Section */
.super-textarea-section {
  position: relative;
  width: 787px;
  height: 80px;
}

.super-textarea {
  position: absolute;
  width: 770px !important;
  height: 100%;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  resize: none;
  outline: none;
  margin-left: 0px;
}

.super-attachment-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 20px;
  cursor: pointer;
}

/* Submit Button */
.super-submit-button {
  width: 79px;
  height: 39px;
  border-radius: 8px;
  border: none;
  background-color: #883979;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  transition: background-color 0.3s ease;
  padding: 8px 12px;
}

.super-submit-button:hover {
  background-color: #772f68;
}

.super-select-section {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 250px;
}

.super-select-title {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 500;
}

.super-select-dropdown-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.super-select-placeholder {
  font-size: 14px;
  color: #888;
}

.super-select-selected-text {
  color: #333;
  font-weight: 500;
}

.super-select-arrow {
  transition: transform 0.3s ease-in-out;
}

.super-select-arrow-rotate {
  transform: rotate(180deg);
}

.super-select-options-container {
  position: absolute;
  top: 120%;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.super-select-option-item {
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

.super-select-option-item:hover {
  background-color: #772f68;
  color: #ccc;
}
.dark-mode .super-select-dropdown-container{
  background-color: #1e0419;
}
.dark-mode .super-select-options-container{
  background-color: #1e0419;
}
.dark-mode .super-select-selected-text{
  color: white;
}

/* General Container Styling */
.announcement-form-container {
  width: 804px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: "Open Sans", sans-serif;
  margin-bottom: 10px;
  background-color: #f8f8f8;
}
.dark-mode .announcement-form-container {
  background-color: #1e0419;
  color: #fff;
}
.dark-mode .announcement-form-header {
  background-color: #2d1227;
}
.dark-mode .announcement-form-header-btn,
.dark-mode .announcement-form-group label {
  color: #fff;
}
.dark-mode .announcement-form-input,
.dark-mode .description-input,
.dark-mode .announcement-form-input-time {
  background-color: #1e0419;
}
/* .dark-mode .dark-mode .announcement-form-input-time {
  background-color: #1e0419;
} */
.dark-mode .announcement-form-container {
  background-color: #1e0419;
}

.dark-mode .announcement-form-container {
  background-color: #1e0419;
}

/* Header Buttons */
.announcement-form-header {
  display: flex;
  justify-content: start;
  background-color: white;
  width: 263px;
  height: 50px;
  top: 24px;
  left: 24px;
  padding: 8px 16px 8px 16px;
  gap: 8px;
  border-radius: 8px;
  margin-top: 20px;
}

.announcement-form-header-btn {
  width: 146px;
  padding: 12px 15px;
  margin: 0 5px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;

  transition: all 0.3s ease;
}

.announcement-form-header-btn:hover {
  background-color: #883979;
  color: white;
}

.announcement-form-header-btn-active {
  background-color: #883979;
  color: white;
}

/* Form Layout */
.announcement-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.announcement-form-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.announcement-form-group {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.announcement-form-group label {
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.announcement-form-input:focus {
  outline: none;
  border-color: #883979;
}

.announcement-form-textarea {
  resize: none;
  height: 100px;
}

.announcement-form-submit-btn {
  display: inline-block;
  width: 146px;
  padding: 12px;
  font-size: 16px;
  color: white;
  background-color: #883979;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease;
}

.announcement-form-submit-div {
  display: flex;
  justify-content: end;
}

.announcement-form-submit-btn:hover {
  background-color: #6e2c62;
}

.announcement-form-input,
.announcement-form-textarea {
  width: 357px;
  height: 46px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-top: 5px;
}

.announcement-form-input {
  padding: 0px 8px !important;
  width: 371px;
  height: 46px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-top: 5px;
  background-color: #fff;
}
.announcement-form-input option[value=""] {
  color: gray;
}

.announcement-form-input option:not([value=""]) {
  padding: 0px !important;
  background-color: white;
  color: #883979;
  font-family: open Sans;
}

.announcement-form-input-time {
  width: 173px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
  margin-top: 5px;
  color: #b3b3b3;
}
.view-more-btn-admin {
  font-family: Poppins;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #666666;
  margin-left: 730px;
  margin-bottom: 10px;
}

.view-more-btn-admin:hover {
  color: purple;
  cursor: pointer;
}

.announcement-form-input::placeholder {
  padding-left: 5px;
}

.description-input {
  border: 1px solid #ddd !important;
  width: 787px !important;
  margin-left: 0px !important;
  border-radius: 10px !important;
}

.description-input::placeholder {
  padding: 10px;
  font-family: "Open Sans", sans-serif;
}

.announcement-container-box {
  position: absolute;
  width: 809px;
  height: 554px;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(
    -50%,
    -50%
  ); /* Adjust for the element's own dimensions */
  border-radius: 16px;
  background-color: #f8f8f8; /* Add a background to make it visible */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
  padding: 20px;
  z-index: 1000; /* Ensure it stays above other elements */
  display: flex;
  flex-direction: column;
  opacity: 1; /* Set initial opacity to fully visible */
  gap: 0px;
  overflow: auto;
  transition: opacity 0.3s ease-in-out; /* Smooth fade-in effect */
  align-items: center;
}
.announcement-container-box-main {
  height: 100%;
  width: 100%;
  background-color: transparent;
}

.announcement-container-all {
  width: 100%;
  flex: 1 1; /* Ensures it takes all remaining space */
  overflow-y: scroll; /* Adds vertical scroll when content exceeds height */
  padding-right: 10px; /* Prevents content from overlapping the scrollbar */
}

.announcement-container-all::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
  border-radius: 100px; /* Rounded scrollbar */
}

.announcement-container-all::-webkit-scrollbar-thumb {
  background-color: #883979; /* Scrollbar thumb color */
  border-radius: 100px; /* Rounded scrollbar thumb */
}

.announcement-container-all::-webkit-scrollbar-track {
  background: transparent; /* Scrollbar track color */
}

.announcement-container-all::-webkit-scrollbar-thumb:hover {
  background-color: #883979; /* Darker color on hover */
}

.announcement-container-box.hidden {
  opacity: 1;
}
.close-button-all-announcements-modify {
  margin-left: 800px;
  margin-top: -8px;
  cursor: pointer;
}
.heading-of-update {
  margin-bottom: -19px;
  margin-left: 10px;
}
.announcement-modal-overlay {
  position: fixed; /* Make the overlay cover the whole screen */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex; /* Enable flexbox for centering */
  align-items: center; /* Center vertically */
  /* justify-content: center; */
  z-index: 1000; /* Ensure it appears above other content */
}
/*  */
.announcement-custom-dropdown-container {
  position: relative;
  width: 100%;
  max-width: 372px;
  margin-right: 23px;
}

.announcement-custom-dropdown-button {
  background-color: white;
  padding: 10px;
  width: 97%;
  height: 25px;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.dark-mode .announcement-custom-dropdown-button {
  border: 1px solid #b3b3b3;
  background-color: #1e0419;
  color: #b3b3b3 !important;
}
.dark-mode .announcement-custom-dropdown-button:hover {
  border-color: #883979;
}

.announcement-custom-dropdown-menu {
  position: absolute;
  width: 102%;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}
.dark-mode .announcement-custom-dropdown-menu {
  background-color: #1e0419;
  color: #fff;
  border-color: #6e2c62;
}

.announcement-custom-dropdown-item {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0s ease-in-out;
}

.announcement-custom-dropdown-item:hover {
  background-color: #6e2c62;
  color: #f8f8f8;
}
.dark-mode .announcement-custom-dropdown-container label {
  color: white !important;
}
.announcement-custom-dropdown-role-container {
  position: relative;
  width: 100%;
  max-width: 372px;
}

.announcement-custom-dropdown-role-button {
  background-color: white;
  padding: 10px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

.announcement-custom-dropdown-role-menu {
  position: absolute;
  width: 102%;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.announcement-custom-dropdown-role-item {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.announcement-custom-dropdown-role-item:hover {
  background-color: #f2f2f2;
}

.admin-announcements-card-container {
  width: 406px;
  /* height: 241px; */
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
  background-color: #fff;
}

.dark-mode .admin-announcements-card-container {
  background-color: #2d1227;
  border: 1px solid #808080;
}
.dark-mode .announcement-form-input-time2 {
  background-color: #1e0419;
}
.dark-mode .admin-announcements-card-modify {
  color: #ad499a;
}

.admin-announcements-card-header {
  display: flex;

  font-family: Poppins;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.admin-announcements-card-details {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.admin-announcements-card-description {
  margin-top: 10px;
  font-size: 14px;
}

.admin-announcements-card-description p {
  margin: 4px 0 0;
}

.admin-announcements-card-modify {
  width: 73px;
  height: 30px;
  top: 195px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #883979;
  margin-right: 250px;
  margin-top: 14px;
}

.admin-announcements-card-modify:hover {
  background-color: #8b4577; /* Adjust hover color */
  color: #fff;
}

.announcement-container-all {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: space-between;
}
.strong-grey {
  color: #9b9999;
}

.bold-black {
  font-weight: bold;
  color: black;
}
.margin-sides {
  margin-left: 0px;
  margin-right: 70px;
}
.category-margin {
  margin-right: 80px;
}

/* .modify-announcement-container {
  width: 835px;
  top: 50.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 24px;
  background-color: #f8f8f8;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: 9999;
}

.announcement-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2); 
  backdrop-filter: blur(8px); 
  -webkit-backdrop-filter: blur(8px); 
  z-index: 9998; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.modify-announcement-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.modify-announcement-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modify-announcement-row {
  display: flex;
  gap: 16px;
  width: 100%;
}

.modify-announcement-label {
  display: block;
  width: 47%;
  font-size: 14px;
  color: #333;
}

.modify-announcement-select,
.modify-announcement-input,
.modify-announcement-textarea {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  height: 40px;
  padding: 0px !important;
}

.modify-announcement-textarea {
  height: 100px;
  width: 800px !important;
  margin-left: 0px !important;
}

.modify-announcement-submit {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.modify-announcement-submit:hover {
  background-color: #45a049;
}

.close-button-annoucements-modify {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  z-index: 999;
  height: 26px;
  background-color: #e6e6e6;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  font-size: 12px;
  color: #000000;
  font-weight: bolder;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.modify-announcement-option{
  appearance: none;
} */

/* CSS for Modify Announcement Modal */

.modify-announcement-container {
  width: 800px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 16px;
  background-color: #ffffff;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: 9999;
  font-family: "Arial", sans-serif;
  background-color: #f8f8f8;
}

.announcement-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  /* width: 100vw;
  height: 100vh; */
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 9999999;
}

.modify-announcement-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #000000;
}

.modify-announcement-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.modify-announcement-row {
  display: flex;
  gap: 16px;
  width: 100%;
}

.modify-announcement-label {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 8px;
}

.modify-announcement-select,
.modify-announcement-input1 {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  color: #333333;
  margin-top: 15px;
  background-color: white;
}

.modify-announcement-input1[placeholder],
.modify-announcement-textarea[placeholder] {
  color: #bbbbbb;
}

.modify-announcement-textarea {
  width: 794px !important;
  height: 120px;
  resize: none;
  display: flex;
  margin-top: 15px;
  margin-left: 0px;
}

.modify-announcement-submit {
  background-color: #4caf50;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  align-self: flex-end;
  font-weight: 500;
}

.modify-announcement-submit:hover {
  background-color: #43a047;
}

.close-button-annoucements-modify {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.close-button-annoucements-modify:hover {
  background-color: #e0e0e0;
}

.modify-announcement-option {
  -webkit-appearance: none;
          appearance: none;
}
.dark-mode .modify-announcement-input1 {
  background-color: #1e0419;
  border-color: #b3b3b3;
  color: #b3b3b3 !important;
}
.modify-announcement-input1 {
  margin-top: 2px;
  height: 25px !important;
  padding-top: 2px;
  padding-bottom: 2px;
}
.modify-announcement-input {
  margin-top: 2px;
}
.modify-second-line-input {
  position: relative;
  left: 25px;
  display: flex;
  flex-direction: row;
  gap: 30px;
  width: 484px;
}
.modify-announcement-input {
  width: 200px;
}

/* 
.algorithm-container {
  background: #F8F8F8;
  width: 849px;
  max-width: 900px;
  margin: 20px auto;
  font-family: "Open Sans", sans-serif;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #333;
}


.algorithm-section {
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.section-title {
  color: #883979;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}


.header-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-weight: bold;
  background-color: #fcf3fa;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  color: black;
}

.header-label {
  font-size: 14px;
  color: #000000;
}


.divider {
  height: 2px;
  background: #e8d6e7;
  margin: 20px 0;
}


.category-section {
  margin-top: 15px;
}

.category-title {
  color: #883979;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: start;
  padding-left: 16px;
}


.algorithm-row {
  padding-left: 25px;
  width:730px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.algorithm-name {
  font-size: 14px;
  color: #555;
  padding-left: 16px;
}


.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #883979;
}

input:checked + .slider:before {
  transform: translateX(14px);
} */

/* General Container */
.super-algorithm-container {
  background: #f8f8f8;
  width: 849px;
  max-width: 900px;
  margin: 20px auto;
  font-family: "Open Sans", sans-serif;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #333;
  position: relative;
  top: 60px;
}
.dark-mode .super-algorithm-section {
  background-color: #1e0419;
}

.dark-mode .super-header-row {
  background-color: #1e0419;
}
.dark-mode .super-algorithm-section {
  background-color: #1e0419;
}
.dark-mode .super-header-label {
  color: #fff;
}
.dark-mode .super-algorithm-name {
  color: #fff;
}
.dark-mode .super-top-section {
  background-color: #1e0419;
}
.dark-mode .super-top-button {
  color: #ffffff;
}

/* Section Styles */
.super-algorithm-section {
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.super-section-title {
  color: #883979;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Header Row */
.super-header-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-weight: bold;
  background-color: #fcf3fa;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  color: black;
}

.super-header-label {
  font-size: 14px;
  color: #000000;
}

/* Divider Between Sections */
.super-divider {
  height: 2px;
  background: #e8d6e7;
  margin: 20px 0;
}

/* Category Styles */
.super-category-section {
  margin-top: 15px;
}

.super-category-title {
  color: #883979;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: start;
  padding-left: 16px;
}

/* Algorithm Row */
.super-algorithm-row {
  padding-left: 25px;
  width: 730px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.super-algorithm-name {
  font-size: 14px;
  color: #555;
  padding-left: 16px;
}

/* Toggle Switch */
.super-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.super-switch input {
  display: none;
}

.super-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 20px;
}

.super-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .super-slider {
  background-color: #883979;
}

input:checked + .super-slider:before {
  transform: translateX(14px);
}
/* Top Section Styles */
.super-top-section {
  width: 395px;
  height: 43px;
  position: absolute;
  top: 58px;
  left: 275px;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  background-color: #f8f8f8;
  padding: 8px;
}

.super-top-button {
  width: 188px;
  height: 39px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.super-top-button.active {
  background-color: #883979;
  color: white;
}

/* Update Button Styles */
.super-update-button {
  width: 79px;
  height: 39px;
  position: absolute;
  top: 471px;
  left: 732px;
  border-radius: 8px;
  border: none;
  background-color: #883979;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.super-update-button:hover {
  background-color: #632a58;
}

.admin-main-container {
  width: 835px;
  background-color: #f8f8f8;
  border-radius: 16px;
  padding: 24px;
  box-sizing: border-box;
}
.dark-mode .admin-main-container {
  background-color: #1e0419;
}
.dark-mode .admin-records-list {
  background-color: #2d1227;
}
.dark-mode .admin-records-section h3 {
  color: #fff;
}
.dark-mode .admin-record-item {
  background-color: #2d1227;
  color: #fff;
}

.dark-mode .recordslogs-search-bar {
  background-color: #1e0419;
}
.dark-mode .admin-logs-table {
  background-color: #2d1227;
}
.dark-mode .admin-logs-table tbody tr:nth-child(odd) {
  background-color: #2d1227;
}
.dark-mode .admin-logs-table tbody tr:nth-child(even) {
  background-color: #1e0419;
}

.dark-mode .admin-logs-table th {
  background-color: #1e0419;
}
.dark-mode .admin-header h2 {
  color: #fff;
}

.admin-header h2 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}

.admin-records-section h3 {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-left: 16px;
  margin-bottom: 8px;
}

.admin-records-list {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 175px;
}

.admin-record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 8px 16px;
}

.admin-view-button {
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
}

.admin-logs-section h3 {
  font-size: 18px;
  margin-top: 24px;
  margin-bottom: 8px;
}

.admin-logs-table {
  width: 100%;
  border-spacing: 0;
  margin-bottom: 16px;
}

.admin-logs-table th:nth-child(1),
.admin-logs-table td:nth-child(1) {
  width: 8%;
  /* Smaller width for the S.No column */
}

.admin-logs-table th:nth-child(3),
.admin-logs-table td:nth-child(3) {
  width: 45%;
  /* Larger width for the Date & Time column */
}

.admin-logs-table th:nth-child(2),
.admin-logs-table td:nth-child(2) {
  width: 23%;
}

.admin-log-row {
  height: 50px;
  /* Ensures each row has a height of 46px */
}

.admin-logs-table th:nth-child(5),
.admin-logs-table td:nth-child(5) {
  width: 35%;
}

.admin-logs-table th {
  text-align: left;
  background-color: #f8f8f8;
  padding: 8px 16px;
}

.admin-logs-table td {
  padding: 8px 15px;
}

.admin-log-row.admin-row-0 {
  background-color: #ffffff;
}

.admin-log-row.admin-row-1 {
  background-color: #f8f8f8;
}

.admin-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.admin-pagination-prev {
  background-color: white;
  color: black;
  border: none;
  border-radius: 100px;
  width: 32px;
  height: 32px;
  padding: 8px 12px;
  cursor: pointer;
  padding: 10px;
}

.admin-pagination-next {
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 100px;
  width: 32px;
  height: 32px;
  padding: 8px 12px;
  cursor: pointer;
  padding: 10px;
}

.admin-pagination-prev:hover {
  background-color: #883979;
  color: white;
}

.admin-pagination-info {
  font-size: 14px;
  color: #000;
}

.recordslogs-search-bar {
  width: 400px;
  background-color: #ffffff;
  border: 1px solid white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0px 8px;
}

.recordslogs-search-input {
  width: 100%;
  border-radius: 8px;
  font-size: 14px;
}

.recordslogs-search-bar:hover {
  border-color: #883979;
}

.patientrecords-tb-container {
    padding: 20px;
  }
  
  .patientrecords-tb-heading {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #5e5e5e;
  }
  
  .patientrecords-tb {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Arial', sans-serif;
  }
  
  .patientrecords-tb-thead {
    background-color: #f9f9f9;
  }
  
  .patientrecords-tb-header-row {
    border-bottom: 1px solid #ddd;
  }
  
  .patientrecords-tb-header-cell {
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: #8a8a8a;
    padding: 12px 8px;
  }
  
  .patientrecords-tb-body .patientrecords-tb-row {
    background-color: #fff;
    transition: background-color 0.3s ease;
  }
  
  .patientrecords-tb-body .patientrecords-tb-row:nth-child(odd) {
    background-color: #f7f7f7;
  }
  
  .patientrecords-tb-body .patientrecords-tb-row:hover {
    background-color: #f3f3f3;
  }
  
  .patientrecords-tb-cell {
    font-size: 14px;
    color: #3e3e3e;
    padding: 12px 8px;
    text-align: left;
  }
  
  .patientrecords-tb-download-btn {
    background-color: #883979;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
  }
  
  .patientrecords-tb-download-btn:hover {
    background-color: #6937d6;
  }
  
  .patientrecords-tb-remove-btn {
    background-color: #f8d7da;
    color: #d9534f;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
  }
  
  .patientrecords-tb-remove-btn:hover {
    background-color: #f4b0b5;
  }

  .MuiDialog-root .MuiPaper-elevation .MuiDialogContent-root{
    z-index:9999999;
   }
   
   /* Mui dialog container */
   .MuiDialog-root .MuiDialog-container{
    z-index:999999;
   }
   
   .MuiDialog-root.MuiModal-root  {
  z-index: 99999999;
  }
   
.header-container {
  width: 100%;
  height: 80px;
  position: sticky; /* Use sticky positioning */
  top: 0; /* Stick to the top */
  background: #f8f8f8; /* Header background */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99999; /* Keep it above other elements */
}
.dark-mode .header-container {
  background-color: #1e0419 !important; /* Dark mode background color */
  color: white; /* Text color in dark mode */
}
.dark-mode .greeting-text{
  color: black;
}
/* Greeting Section */
.greeting-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 60px 16px 60px;
}

.greeting-container-box-admin {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  background-color: white;
  height: 46px;
  /* width: 145px; */
  padding: 0px 12px;
  border-radius: 8px;
  margin-right: 15px;
}

.dark-mode .greeting-text {
  color: white; /* White text in dark mode */
}
.dark-mode .greeting-container-box-admin{
  background-color: #2D1227;
}

.greeting-text {
  color: #000;
  color: var(--Primary-Base-Black, #000);

  /* Desktop Fonts/Body/Body Regular/Body 1 Regular */
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;

  /* 150% */
  letter-spacing: 0.691px;
}

.avatar-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.avatar-admin {
  width: 38px;
  height: 38px;
  /* background: #e6e6e6; */
  border-radius: 50%;
}

.avatar-admin img {
  width: 42px;
  height: 38px;
  border-radius: 50%;
}

.dropdown-icon {
  width: 24px;
  height: 24px;
  position: relative;
  margin-left: 8px;
  cursor: pointer; /* Optional: add pointer to indicate it's clickable */
}

.dropdown-arrow {
  width: 6.71px;
  height: 11.31px;
  position: absolute;
  top: 8px;
  left: -6px;
  transition: transform 0.2s ease; /* Smooth transition */
}

/*notification dropdown*/
.notification-dropdown {
  position: absolute;
  margin-top: 10px;
  top: 80px;
  right: 0;
  padding-top: 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  width: 500px;
  height: 404px;
  z-index: 1000;
  right: 120px;
  /* padding: 20px; */
  /* Allow scrolling if content exceeds height */
  display: flex; /* Change: Use flexbox for vertical alignment */
  flex-direction: column; /* Change: Stack items vertically */
  /* gap: 32px; */
}

.notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 10;
}
.drop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent black */
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  transition: opacity 0.5s ease-in-out; /* Fade-in transition */
}

.notification-item {
  position: relative;
  display: flex; /* Change: Added to align items in a row */
  align-items: center;
  width: 444px; /* Set the width */
  height: 80px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  font-size: 20px;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #d0d0d0;
  font-weight: 600;
  color: #b5b5b5;
  cursor: pointer;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.close-button-appointments {
  position: absolute;
  top: 20px;
  right: 36px;
  z-index: 999; /* Ensure the button is on top of other elements */
  width: 24px;
  height: 24px;

  border-radius: 50%;
  font-size: 20px;
  font-weight: bolder;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close-button:hover {
  background-color: #f8d7da;
  color: #721c24;
}
.notification-image .circle-image {
  width: 66px;
  height: 66px;
  top: 48px;
  left: 24px;
  margin-top: 12px;
  margin-left: 12px;
  margin-bottom: 12px;
  border-radius: 50%;
  margin-right: 10px;
  align-items: flex-start;
}

.notification-item:last-child {
  margin-bottom: 22px;
}

/* .notification-item:hover {
  background-color: #f0f0f0;
} */
.notification-title {
  font-family: Open Sans;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
}

.notification-time {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
  letter-spacing: 0.032em;
  text-align: left;
  color: #808080;
  margin-bottom: 10px;
}
.clear-all {
  text-align: right; /* Align text to the right */
  font-family: Open Sans;
  margin-right: 24px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  color: #b8b8b8;
}

.clear-all:hover {
  cursor: pointer;
}
/*notification dropdown end */

.dark-mode .dropdown-arrow {
  color: #f0f0f0;
}

/* Dropdown Menu */
.header-dropdown-menu-admin {
  position: absolute;
  top: 90px;
  right: 168px;
  background: white;
  border: 1px solid #b3b3b3;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  width: 288px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border-radius: 8px 0px 8px 8px;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: transparent;
  overflow: hidden;
  pointer-events: auto;
  /* padding: 0 16px 0px 16px; */
}

.dropdown-item-logout {
  padding: 10px;
  color: black;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  width: 256px;
  padding: 16px 0px;

  text-align: left;
}
.dark-mode .header-dropdown-menu {
  background-color: #2d1227;
  border: solid 1px #b8b8b8;
  box-shadow: 0 0 0 1px #1e0419;
  color: white;
}

.dropdown-item {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  padding: 16px 10px 16px 0px;
  pointer-events: auto;
  letter-spacing: 0.032em;
  text-align: left;
  position: relative; /* Position for pseudo-element */
  color: black;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  /* border-bottom: 1px solid #e6e6e6;
    display: inline-block;
    width: 89%;
    margin-left: 16px; */
  transition: background 0.2s, color 0.2s;
}

/* Margin for Text */
.dropdown-item .margin-left {
  margin-left: 16px; /* Only affects the text content */
}

.dropdown-item:not(:last-child)::after {
  content: "";
  display: block;
  width: 90%; /* Adjust width as needed for shorter line */
  margin: 0 auto;
  border-bottom: 1px solid #b3b3b3; /* Line color */
  position: absolute;
  bottom: 0;
  left: 5%; /* Centers the line */
}

.dropdown-item:hover::after {
  border-bottom-color: #883979; /* New color on hover */
}

.dark-mode .dropdown-item {
  color: white; /* White text in dark mode */
  background-color: #1e0419;
}

.dark-mode .margin-left-logout {
  color: red;
  margin-left: 16px;
}

.margin-left-logout {
  color: red;
  margin-left: 16px;
}

.dropdown-item:hover {
  background: #883979;
  box-sizing: border-box;
  color: #e6e6e6;
  border-radius: 0px 0px 0px 0px;
  border-width: 1px 0 0 0;
}

.dark-mode .dropdown-item:hover {
  background: #ad499a;
}

/* Logo Section */
.logo-container img {
  width: 150px;
  /* Adjust width as per your requirement */
  height: auto;
  padding: 16px 60px 16px 60px;
}

.dark-mode .logo-container {
  color: #faf3f3;
}
/* Icon Buttons Section */
.icon-button-container {
  display: flex;
  gap: 15px;
}

.icon-button {
  width: 38px;
  height: 38px;

  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
}

.icon-button .notiIcon {
  transition: color 0.2s; /* Optional: smooth transition for color change */
}

.icon-button:hover {
  background-color: #883979;
  color: white;
}

.icon-button .notiIcon:focus {
  background-color: #883979;
}

.icon-button:focus {
  background: #ad499a;
  outline: none; /* Removes default focus outline */
  box-shadow: 0 0 0 3px rgba(173, 73, 154, 0.4); /* Adds a soft focus ring */
}

.icon-button img {
  width: 24px;
  height: 24px;
}
/*
.icon-button img {
  filter: invert(0); 
}

.dark-mode .icon-button img {
  color: pink; 
} */

.dark-mode .icon-button {
  background: #2d1227;
}

.dark-mode .icon-button:hover {
  background: #ad499a;
}

.dark-mode .toggle-button {
  background-color: white !important;
}
.light-mode .icon-button svg {
  fill: black;
}

/* Dark mode: White icons */
.dark-mode .icon-button svg {
  fill: white;
}

.logout-dropdown {
  color: red;
  border-bottom: none;
}

/* .logout-dropdown:hover{
  color: white !important;
}


.margin-left-logout:hover{
  color: white;
} */

/* This will apply the white color to the text when you hover over .logout-dropdown */
.logout-dropdown:hover,
.logout-dropdown:hover .margin-left-logout {
  color: white;
}

/* Progress Bar Styles */
.doctor-dashboard-progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 0px;
  z-index: 9999;
}

.doctor-dashboard-progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
  z-index: 9999;
}

.dark-mode .notification-dropdown {
  background-color: #2d1227;
  color: white;
}

.dark-mode .notification-dropdown .notification-title {
  color: white;
}

/* Progress Bar Styles */
.doctor-dashboard-progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 0px;
  z-index: 999;
}

.doctor-dashboard-progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
}

@media (max-width: 768px) {
  .greeting-text {
    font-size: 20px; /* Slightly smaller font size */
    line-height: 30px; /* Adjust line-height accordingly */
    width: 150px;
  }
}

/* Media query for small screens (e.g., mobile phones) */
@media (max-width: 480px) {
  .greeting-text {
    font-size: 18px; /* Smaller font size for mobile */
    line-height: 28px; /* Adjust line-height accordingly */
    width: 130px;
  }
}

.appointment-dropdown {
  position: absolute;
  margin-top: 10px;
  top: 50%;
  bottom: 50%;
  padding-top: 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  width: 1081px;
  height: 750px;
  z-index: 1000;
  left: 50%;
  right: 50%;
  padding: 1%;
  transform: translate(-50%, -50%); /* padding: 10px; */
  /* Allow scrolling if content exceeds height */
  display: flex; /* Change: Use flexbox for vertical alignment */
  flex-direction: column; /* Change: Stack items vertically */
  overflow-y: auto; /* Enable vertical scrolling if content exceeds */
  scrollbar-width: thin; /* For Firefox: make scrollbar thinner */
  scrollbar-color: #ccc #fff; /* For Firefox: custom scrollbar colors */
  overflow-x: hidden;
}

.appointment-header {
  color: black;
}

.appointment-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1048px;
  height: 42px;
  background-color: #f9f5f8; /* Background color for the header row */
  border-radius: 2px;
}

.table-header-appointment {
  /* background-color: #f9f5f8; */
  color: #883979 !important;
  text-align: center !important;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.table-header-appointment {
  flex: 1 1;
  color: #883979 !important;
}

.table-appointment-body-row {
  padding-left: 60px;
  width: 1021px;
  height: 42px;
  font-size: 14px;
}

.table-data {
  text-align: center !important;
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-left: 30px;
}

.table-title,
.table-date-time,
.table-symptoms {
  text-align: start;
  padding-left: 29px;

  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.table-buttons {
  display: flex;
}
.table-symptoms {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding-left: 72px;
}

.table-symptoms:hover::after {
  content: attr(data-full-text);
  position: absolute;
  left: 0;
  top: -30px; /* Adjust the tooltip's vertical position */
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
  white-space: normal;
  max-width: 200px; /* Tooltip max width */
  overflow-wrap: break-word;
}

.reject-button,
.accept-button {
  width: 70px;
  height: 25px;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.table-buttons .accepted-button {
  background-color: #ad499a;
  color: white;
  width: 70px;
  height: 25px;
  border: none;
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  line-height: 15px;
  font-size: 12px;
  transition: opacity 0.2s ease-in-out;
}

.reject-text {
  color: red;
  font-size: 12px;
  cursor: pointer;
  font-weight: bold;
  margin-left: 10px;
}

.table-buttons .accepted-button:hover {
  opacity: 0.8;
}

.accepted-button,
.rejected-button {
  width: 100%;
  height: 25px;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.accepted-button {
  color: #33bb39;
}

.rejected-button {
  color: red;
}

.table-buttons {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: 7px;
  margin-left: 62px;
}

.reject-button {
  color: red;
  border: none;
}

.reject-button:hover {
  color: red;
  background-color: white;
}

.appoint-align-id {
  position: relative;
  left: -14px;
}

.appoint-align-t {
  position: relative;
  left: -20px;
}

.appoint-align-DT {
  position: relative;
  left: 16px;
}

.appoint-align-sy {
  position: relative;
  left: 35px;
}

.appoint-align-st {
  position: relative;
  left: 15px;
}

/* Button container */
.appointment-btn-header {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 30px;
  margin-top: 20px;
  margin-left: 5px;
  margin-right: 14px;
}

.appoint-btn-header {
  flex: 1 1;
  padding: 15px 82px;
  border: 2px solid transparent;
  border-radius: 8px;
  border: 1px solid #883979;
  font-size: 16px;
  margin-left: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  color: #883979;
  background-color: transparent;
}

.appoint-btn-header:hover {
  background-color: #f5f5f5;
  color: #883979;
  border-color: #883979;
}

/* Active button styles */
.appoint-btn-header.selected {
  border-color: #800080;
  color: #ffffff;
  background-color: #883979;
}

.appointment-title {
  font-family: Poppins;
  font-weight: 600;
  font-size: 28px;
  display: flex;
  justify-content: center;
}

.dark-mode .appointment-dropdown {
  background-color: #1e0419;
  border-color: #1e0419;
}

.dark-mode .appointment-header-row {
  background-color: #883979;
}

.dark-mode .appointment-title {
  color: white;
}

/*.footer-container {
    display: inline-flex;
    padding: 16px 60px;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: 648px;
}*/
.footer-container-box {
  /* Sticky footer */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #f8f8f8;

  z-index: 999;
}

.dark-mode .footer-container-box {
  background-color: #1e0419;
}
.dark-mode .footer-info-date,
.footer-timezone-text {
  color: #e6e6e6;
}

.dark-mode .footer-info-time {
  color: #e6e6e6;
}

.dark-mode .footer-timezone-select {
  color: #e6e6e6;
}

.footer-left-section,
.footer-right-section {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 60px; /* Reduce padding for left and right sections */
}

.footer-icon-button {
  width: 30px; /* Reduce button size */
  height: 30px; /* Reduce button size */
  padding: 5px; /* Reduce padding */
  background: #f3f3f3;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-icon-button:hover {
  background: #883979;
  color: #ffffff !important;
}
.footer-icon-button.active {
  background: #883979;
  color: #ffffff;
}

.dark-mode .footer-icon-button:hover {
  background: #ad499a;
}
.dark-mode .footer-icon-button.active {
  background: #ad499a;
}

.dark-mode .footer-icon-button {
  background-color: #1e0419;
}

.dark-mode .footer-icon-button img {
  filter: invert(1);
}

.footer-icon-background {
  width: 24px;
  height: 24px;
  position: relative;
}

.footer-icon {
  width: 19px;
  height: 19px;

  left: 2.5px;
  top: 2.5px;
}

.footer-info {
  display: flex;
  align-items: center;
  gap: 12px; /* Reduce the gap */
}

.footer-info-text {
  display: flex;
  gap: 6px; /* Reduce the gap */
}

.footer-info-date,
.footer-info-time,
.footer-timezone-text {
  color: black;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  white-space: nowrap;
}

.footer-timezone {
  display: flex;
  align-items: center;
  gap: 6px; /* Reduce the gap */
}

.footer-timezone-select {
  background: none;
  border: none;
  color: black;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  cursor: pointer;
  width: 140px;
}
.dark-mode .footer-timezone-select {
  background-color: #1e0419;
}
.dark-mode .footer-timezone-select option {
  color: white;
}

.footer-timezone-icon {
  width: 20px; /* Reduce icon size */
  height: 20px; /* Reduce icon size */
  position: relative;
  transform: rotate(-90deg);
  transform-origin: 0 0;
}

.footer-arrow {
  width: 6.71px;
  height: 11.31px;
  position: absolute;
  left: 8.35px;
  top: 6.35px;
  background: black;
}
.custom-dropdown-wrapper-timeZone {
  position: relative;
  width: 100%;
}

.custom-dropdown-timeZone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  padding-right: 40px;
  padding-left: 0px;
  border: 0px solid #883979;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}

.custom-dropdown span {
  font-size: 16px;
  color: #333;
}

.dropdown-icon {
  font-size: 12px;
  color: #883979;
}

.custom-dropdown-options-timeZone {
  position: absolute;
  top: -920%;
  left: 0;
  max-height: 400px;
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden;
  width: 100%;
  margin-top: 10px;
  padding: 0;
  list-style: none;
  border: 1px solid #883979;
  background-color: #fff;
  border-radius: 5px;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Hide scrollbar for all browsers */
  scrollbar-width: none; /* Firefox */
}
.custom-dropdown-options-timeZone::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Edge */
}


.custom-dropdown-option-timeZone {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  color: #333;
}

.custom-dropdown-option-timeZone:hover {
  background-color: #883979;
  color: #fff;
}
.dark-mode .about-popup {
  color: white;
}

.cases-records-tb-container {
  padding: 20px;
}


.dark-mode .cases-records-tb-container{
  background-color: #2d1227;
}

.cases-records-tb-heading {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #5e5e5e;
}

.cases-records-tb {
  width: 100%;
  border-collapse: collapse;
  font-family: "Arial", sans-serif;
}
.dark-mode .cases-records-tb-row,
.dark-mode .cases-records-tb-header-row,
.dark-mode .caserecords-tb-row,
.dark-mode .caserecords-tb-header-row,
.dark-mode .modify-announcement-container {
  background-color: #1e0419 !important;
}
.dark-mode .modify-announcement-container {
  background-color: #1e0419 !important;
  border: 1px solid #ccc !important;
}
.dark-mode .modify-announcement-title,
.dark-mode .close-button-annoucements-modify,
.dark-mode .modify-announcement-label {
  color: white;
}
.dark-mode .modify-announcement-select,
.dark-mode .modify-announcement-input,
.dark-mode .modify-announcement-textarea {
  background-color: #1e0419 !important;
  border: 1px solid #b3b3b3 !important;
  color: #b3b3b3 !important;
}
.cases-records-tb-thead {
  background-color: #f9f9f9;
}

.cases-records-tb-header-row {
  border-bottom: 1px solid #ddd;
}

.cases-records-tb-header-cell {
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: #8a8a8a;
  padding: 12px 8px;
}

.cases-records-tb-body .cases-records-tb-row {
  background-color: #fff;
  transition: background-color 0.3s ease;
}

.cases-records-tb-body .cases-records-tb-row:nth-child(odd) {
  background-color: #f7f7f7;
}

.cases-records-tb-body .cases-records-tb-row:hover {
  background-color: #f3f3f3;
}

.cases-records-tb-cell {
  font-size: 14px;
  color: #3e3e3e;
  padding: 12px 8px;
  text-align: left;
}

.cases-records-tb-download-btn {
  background-color: #883979;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.cases-records-tb-download-btn:hover {
  background-color: #6937d6;
}

.cases-records-tb-remove-btn {
  background-color: #f8d7da;
  color: #d9534f;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.cases-records-tb-remove-btn:hover {
  background-color: #f4b0b5;
}
.modify-announcement-submit {
  background-color: #883979 !important;
}
.dark-mode .admin-announcements-card-modify:hover {
  color: white;
}

.caserecords-tb-container {
    padding: 20px;
  }

  .dark-mode .caserecords-tb-container{
    background-color: #2d1227;
  }
  
  .caserecords-tb-heading {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #5e5e5e;
  }
  
  .caserecords-tb {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Arial', sans-serif;
  }
  
  .caserecords-tb-thead {
    background-color: #f9f9f9;
  }
  
  .caserecords-tb-header-row {
    border-bottom: 1px solid #ddd;
  }
  
  .caserecords-tb-header-cell {
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: #8a8a8a;
    padding: 12px 8px;
  }
  
  .caserecords-tb-body .caserecords-tb-row {
    background-color: #fff;
    transition: background-color 0.3s ease;
  }
  
  .caserecords-tb-body .caserecords-tb-row:nth-child(odd) {
    background-color: #f7f7f7;
  }
  
  .caserecords-tb-body .caserecords-tb-row:hover {
    background-color: #f3f3f3;
  }
  
  .caserecords-tb-cell {
    font-size: 14px;
    color: #3e3e3e;
    padding: 12px 8px;
    text-align: left;
  }
  
  .caserecords-tb-download-btn {
    background-color: #883979;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
  }
  
  .caserecords-tb-download-btn:hover {
    background-color: #6937d6;
  }
  
  .caserecords-tb-remove-btn {
    background-color: #f8d7da;
    color: #d9534f;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
  }
  
  .caserecords-tb-remove-btn:hover {
    background-color: #f4b0b5;
  }
  




  .loaderr {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    /* border-radius: 50%; */
    width: 24px;
    height: 24px;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
.role-selection-wrapper {
  position: relative;
  width: 496px;
  display: inline-block;
}

.role-dropdown-container {
  position: relative;
  width: 100%;
}

.role-selector {
  height: 6px;
  font-size: 16px;
  color: #883979;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.derk-mode .landing-contact-v2-phone-code,
.dark-mode .landing-contact-dropdown-list{
  background-color: #1E0419 !important;
  color: white;
}
.landing-contact-dropdown-list{
  width: 400px !important;
}
.landing-contact-dropdown-list::-webkit-scrollbar {
  width: 8px; 
  border-radius: 100px; 
}

.landing-contact-dropdown-list::-webkit-scrollbar-thumb {
  background-color: #883979; 
  border-radius: 100px; 
}

.landing-contact-dropdown-list::-webkit-scrollbar-track {
  background: transparent;
}

.landing-contact-dropdown-list::-webkit-scrollbar-thumb:hover {
  background-color: #883979; 
}
.dark-mode .landing-contact-dropdown-item{
  color: white;
}
.landing-contact-dropdown-item:hover{
  background-color: #732370 !important;
  color: white;
}
.dark-mode .role-selector{
  color: white;
}
.role-placeholder{
  color: #ccc;
}
.role-placeholder role-selected-text{
  color:#732370;
}

.role-selector:valid {
  color: #883979;
}

.role-selected-text {
  color: #883979;
}

.dark-mode .role-selected-text {
  color: white;
}

.role-placeholder {
  flex-grow: 1;
}

.role-dropdown-icon {
  transition: transform 0.3s ease;
}

.role-arrow-rotate {
  transform: rotate(180deg);
}

.role-options-container {
  position: absolute;
  width: 390px;
  max-height: 200px;
  overflow: scroll;
  overflow-x: hidden;
  margin-top: 80px;
  background-color: #fff;
  border: 1px solid #7b376e;
  border-radius: 8px;
  z-index: 9999;
  text-align: left;
  box-shadow: 0 0 8px rgba(123, 55, 110, 0.2);
  padding-bottom: 0px;
}
.role-options-container::-webkit-scrollbar {
  width: 8px; 
  border-radius: 100px; 
}

.role-options-container::-webkit-scrollbar-thumb {
  background-color: #883979; 
  border-radius: 100px; 
}

.role-options-container::-webkit-scrollbar-track {
  background: transparent;
}

.role-options-container::-webkit-scrollbar-thumb:hover {
  background-color: #883979; 
}
.dark-mode .role-options-container{
  background-color: #1E0419;
  color: white !important;
  border-color: white;
}
.dark-mode .role-option-item{
  color: white;
}
.inactive-section{
  height: 280px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.inactive-section::-webkit-scrollbar {
  width: 8px; 
  border-radius: 100px; 
}

.inactive-section::-webkit-scrollbar-thumb {
  background-color: #883979; 
  border-radius: 100px; 
}

.inactive-section::-webkit-scrollbar-track {
  background: transparent;
}

.inactive-section::-webkit-scrollbar-thumb:hover {
  background-color: #883979; 
}

.role-option-item {
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  transition: background-color 0.3s ease;
  position: relative;
}

.role-option-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 1%;
  width: 98%;
  border-bottom: 1px solid #7b376e;
}

.role-option-item:hover {
  background-color: #7b376e;
  color: white;
  border-radius: 5px;
}

.role-error-text {
  color: red;
  font-size: 14px;
  margin-top: 5px;
}

.manage-staff-container {
  font-family: Arial, sans-serif;
  padding: 0px;
}

.manage-staff-header-and-stats {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  width: 804px;
  height: 235px;
  top: 120px;
  left: 337px;
  padding: 24px 24px 10px 24px;
  gap: 24px;
  border-radius: 12px;
  background-color: #f8f8f8;
}
.dark-mode .manage-staff-header-and-stats {
  background-color: #1e0419;
}

/* Header */
.manage-staff-header {
  display: flex;
  margin-top: 15px;
  height: 48px;
  background-color: #ffffff;
  gap: 24px;
  width: 225px;
  top: 16px;
  left: 16px;
  padding: 8px 16px 7px 16px;
  border-radius: 12px;
}

.dark-mode .manage-staff-header {
  background-color: #2d1227;
}

.manage-staff-stat-box1 p,
.manage-staff-stat-box2 p,
.manage-staff-stat-box3 p {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  margin-top: -20px;
  text-align: left;
  margin-left: 60px;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;

  color: #000000;
}
.manage-staff-stat-box1 h2,
.manage-staff-stat-box2 h2,
.manage-staff-stat-box3 h2 {
  margin-left: 12px;
  margin-top: 16px;
  font-family: Open Sans;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.024em;
  text-align: left;
  font-family: Open Sans;
  line-height: 54.47px;
}

.error {
  color: red;
}

.second-part-manage {
  width: 849px;
}

.dark-mode .header-btn {
  background-color: #2d1227;
}
.header-btn {
  background-color: #fff;
  height: 46px;
  cursor: pointer;
  color: #883979;
  transition: all 0.3s ease;
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
  border: none;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.header-btn.active {
  background-color: #883979;
  color: white; 
  width: 86px;
  height: 43px;
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
}


.header-btn:hover {
  background-color: #883979;
  color: #fff;
  width: 86px;
  height: 43px;
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
}

.dark-mode .header-btn2 {
  background-color: #411d39;
}

.header-btn2 {
  background-color: #fff;

  height: 40px;
  cursor: pointer;
  color: #883979;
  border: 1px solid #883979;
  transition: all 0.3s ease;
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  transition: background-color 0.3s, color 0.3s;
}


.header-btn2:hover {
  background-color: #883979;
  color: #fff;
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
}
.header-btn2.active-btn {
  background-color: #883979;
  color: white;
}

/* Stats Section */
.manage-staff-stats {
  display: flex;

  gap: 32px;
}

.manage-staff-stat-box1,
.manage-staff-stat-box2,
.manage-staff-stat-box3 {
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  width: 251px;
  height: 126px;
  top: 80px;
  left: 16px;
  gap: 0px;
  border-radius: 16px;

  background-color: #fff;
}
.manage-staff-stat-box1:hover {
  background-color: #ffe6fa;
  transform: scale(1.05);
}
.manage-staff-stat-box2:hover {
  background-color: #e9ffea;
  transform: scale(1.05);
}
.manage-staff-stat-box3:hover {
  background-color: #dceaf8;
  transform: scale(1.05);
}

.manage-staff-stat-box1.active {
  background-color: #ffe6fa;
}
.manage-staff-stat-box2.active {
  background-color: #e9ffea;
}

.manage-staff-stat-box3.active {
  background-color: #dceaf8;
}

.dark-mode .manage-staff-stat-box1,
.dark-mode .manage-staff-stat-box2,
.dark-mode .manage-staff-stat-box3 {
  background-color: #2d1227;
  color: #fff;
}

.dark-mode .manage-staff-stat-box1 p,
.dark-mode .manage-staff-stat-box2 p,
.dark-mode .manage-staff-stat-box3 p {
  color: #fff;
}
/* .dark-mode .manage-staff-stat-box1:hover,
.dark-mode .manage-staff-stat-box2:hover,
.dark-mode .super-manage-staff-stat-box2 :hover {
  background-color: #732370;

} */

icon-manage1 {
  width: 16px;
  height: 16px;
  padding: 4.69px 2.31px;
  position: relative;
  top: 0; /* Adjust this if needed */
  left: 0; /* Adjust this if needed */
}

.icon-wrapper-bg1 {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffe6fa;
  border-radius: 50%;
  position: relative;
  top: 16px;
  left: 16px;
}
.icon-wrapper-bg2 {
  width: 32px;
  height: 32px;
  display: flex;
  margin-right: -40px;
  justify-content: center;
  align-items: center;
  background-color: #e9ffea;
  border-radius: 50%;
  position: relative;
  top: 16px;
  left: 16px;
}
.icon-wrapper-bg3 {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #deedff;
  border-radius: 50%;
  position: relative;
  top: 16px;
  left: 16px;
}

.icon-wrapper-bg4 {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff2e9;
  border-radius: 50%;
  position: relative;
  top: 16px;
  left: 16px;
}
/* Search Bar */
.search-and-names-section {
  margin-top: 20px;
}

.search-bar-manage {
  display: flex;
  margin-bottom: 16px;
}
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input-manage {
  width: 384px;
  height: 36px;
  top: 230px;
  left: 16px;
  padding-left: 28px;
  gap: 0px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.sort-dropdown-inside {
  height: calc(100% - 10px);
  padding: 5px;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  color: #777;
  position: absolute;
  right: 10px;
}
/* Search Icon */
.staff-search-icon {
  margin-left: 5px;
  margin-top: 13px;
  position: absolute;
  right: 10px; /* Align icon to the right */
  font-size: 15px;
  color: #b3b3b3;
  pointer-events: none; /* Ensure it doesn't block input interactions */
}
/* Staff List */
.staff-list-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
}

.manage-staff-list {
  width: 100%;
  display: grid;

  grid-template-columns: repeat(2, 1fr);
}
.staff-list {
  width: 100%;
  display: grid;
}

.staff-list-pagination {
  display: flex;
}

.staff-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;

  width: 382px;
  height: 62px;
  top: 16px;
  left: 16px;
  gap: 0px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.dark-mode .staff-item{
  background-color: #1e0419;
}
.dark-mode .staff-name-manage{
  color: white;
}
.dark-mode .total-staff-p-overlay{
  background-color: #1e0419;
  color: white;
  border: 1px solid white;
}
.staff-info {
  display: flex;
}

.staff-avatar {
  margin-left: 10px;
  width: 46px;
  height: 46px;
  top: 8px;
  left: 8px;
  gap: 0px;
  border-radius: 10px;
  opacity: 1;
}

.staff-name-manage {
  margin-left: 10px;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 0px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.staff-date-manage {
  margin-left: 10px;
  font-size: 12px;
  color: #666666;
  font-family: Open Sans;
  font-size: 10px;
  font-weight: 400;
  line-height: 13.62px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.edit-button-manage {
  margin-right: 10px;
  width: 42px;
  height: 22px;
  top: 20px;
  left: 332px;
  padding: 4px 12px 4px 12px;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #883979;
  color: #883979;
  font-family: Open Sans;
  font-size: 10px;
  font-weight: 400;
  line-height: 13.62px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  cursor: pointer;
}
.edit-button-manage:hover {
  background-color: #883979;
  color: #e9ffea;
}

.dashboard-main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

.overview,
.traffic,
.active-report,
.storage-report {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.storage-report {
  width: 388px;
  height: 262px;
  margin-top: 20px;
}
.traffic h3,
.active-report h3 {
  margin-top: 0px;
  font-family: Open Sans;
  font-size: 18px;
  font-weight: 600;
  line-height: 21.79px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.overview h3 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.overview {
  width: 388px;
  height: 262px;
  top: 383px;
  left: 337px;
  gap: 0px;
}
.manage-staff-donut-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;

  background-color: #fff;
  border-radius: 10px;
  max-height: 1000px;
}

.manage-staff-header2 {
  display: flex;
  margin-top: 15px;
  height: 48px;
  background-color: #ffffff;
  gap: 24px;
  border-radius: 12px;
}

.dark-mode .manage-staff-header2 {
  background-color: #411d39;
}
.manage-staff-form {
  min-height: 340px;

  border-radius: 16px;
  opacity: 1;

  background-color: #f8f8f8;
  padding: 20px;

  margin-top: 20px;
}

.dark-mode .manage-staff-form {
  background-color: #1e0419;
}
.manage-staff-form-disable {
  height: 150px;

  border-radius: 16px;
  opacity: 1;

  background-color: #f8f8f8;
  padding: 20px;

  margin-top: 20px;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group-manage {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.form-group-manage .form-input :hover {
  border: 1px solid #8a2b83;
}

.form-group-manage label {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 500;
}
.dark-mode .form-group-manage label {
  color: #ffffff;
}

.form-input {
  background-color: #fff;
  padding: 10px;
  color: #883979;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 14px;
  width: 370px;
}
.dark-mode .form-input {
  background-color: #1e0419;
  color: white;
}

.form-input-staff {
  background-color: #fff;
  padding: 10px;
  color: #b3b3b3;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 14px;
  width: 390px;
}

.dark-mode .form-input-staff {
  background-color: #1e0419;
}
.form-input-tel {
  background-color: #fff;
  padding: 10px;
  color: #883979;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 14px;
  width: 317px;
}
.dark-mode .form-input-tel {
  background-color: #1e0419;
}

.form-input-managing-type {
  background-color: #fff;
  padding: 10px;
  width: 372px;
  color: #883979;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 14px;
}
.form-input-managing-type1 {
  background-color: #fff;
  padding: 10px;
  width: 372px;
  color: #883979;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 14px;
}
.dark-mode .form-input-managing-type1 {
  background-color: #1e0419;
  color: white;
}
.dark-mode .form-input-managing-type1:hover {
  border: 1px solid #883979;
 
}

.dark-mode .form-input-managing-type {
  background-color: #1e0419;
  color: white;
}

.form-input-managing-type-gender {
  background-color: #fff;
  padding: 10px;
  width: 373px;
  color: #b3b3b3;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 14px;
}
.dark-mode .form-input-managing-type-gender {
  background-color: #1e0419;
}
/* Hover effect */
.form-input:hover,
.form-input-managing-type:hover,
.form-input-managing-type-gender:hover {
  border-color: purple !important;
  cursor: pointer;
 
}
/* #dob.form-input{
  color: #ccc;
}
#dob.form-input:valid{
  color: #883979;
} */
select#role {
  height: 47px;
}
.phone-input-container {
  display: flex;
  align-items: center;
  /* padding: 0px 12px; */
  border-radius: 8px;
  border: 1px solid white;
  height: 46px;
  background-color: #fff;
}
.dark-mode .phone-input-container {
  background-color: #1e0419;
  border: 1px solid white;
}

.phone-country-code-dropdown select {
  width: 70px;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
}
.country-code-select2 {
  width: 100%;
  overflow-y: auto;
  max-height: 176px;
  height: 44px;
  display: block;
  border: none;
  outline: none;
  background-color: #e6e6e6;
  font-size: 13px;
  font-family: "Open Sans", sans-serif;
  padding: 0px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.512px;
  border-radius: 8px;
  padding: 9px;
}
.dark-mode .country-code-select2 {
  background-color: #411d39;
  color: #b3b3b3;
  border-right: 1px solid #411d39;
}

.phone-number-input {
  flex: 2 1;
  border: none;
  outline: none;
  font-size: 14px;
}

.phone-input-wrapper {
  display: flex;
  gap: 10px;
}

.phone-code {
  width: 70px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.phone-input {
  flex: 1 1;
}

.add-role-btn {
  background-color: #883979;
  color: #883979;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #883979;
}
.dark-mode .add-role-btn {
  background-color: #666666;
  color: #ffffff;
}

.add-role-btn:hover {
  background-color: #732370;
  color: white;
}

.form-input-manage {
  padding: 10px;
  text-transform: uppercase;
  border-radius: 8px;
  font-size: 14px;
  color: #b3b3b3;
  background-color: #fff; 
}

.SubmitButton-AddStaff {
  display: flex;
  justify-content: end;
}

.search-and-sort {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.manage-staff-search-input {
  background: #ffffff;
  width: 340px;
  height: 32px;
  border-radius: 8px;
  font-family: Poppins;
  font-size: 12px;
  border: 1px solid #b3b3b3;
}

.manage-staff-search-input:hover {
  border-color: #883979;
  cursor: pointer;
}

.sort-dropdown {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.manage-staff-hospital-list {
  display: flex;
  flex-direction: column;
  overflow-y: scroll !important;
  height: 340px;
}

.manage-staff-hospital-list::-webkit-scrollbar {
  width: 8px;
  border-radius: 100px;
}

.manage-staff-hospital-list::-webkit-scrollbar-thumb {
  background-color: #883979;
  border-radius: 100px;
}

.manage-staff-hospital-list::-webkit-scrollbar-track {
  background: transparent;
}

.manage-staff-hospital-list::-webkit-scrollbar-thumb:hover {
  background-color: #883979;
}

.manage-staff-hospital-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 8px;
}

.manage-staff-hospital-avatar {
  width: 40px;
  height: 40px;
  background-color: #e0e0e0;
  border-radius: 50%;
  margin-right: 15px;
}

.manage-staff-hospital-details {
  display: flex;
  gap: 20px;
}

.manage-staff-hospital-name {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}
.dark-mode .manage-staff-hospital-name {
  color: #fff;
}

.manage-staff-hospital-role {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.manage-staff-hospital-disable-date {
  flex: 1 1;
  font-size: 14px;
  color: #666;
  text-align: right;
  margin-right: 20px;
}

.enable-button {
  padding: 8px 12px;
  border: 1px solid #883979;
  border-radius: 4px;
  color: #883979;
  font-weight: bold;
  cursor: pointer;
}

.staff-img {
  width: 41px;
}
.dark-mode .super-form-input-managing-type{
  background-color: #1E0419 !important;
}
.dark-mode .form-input {
  background-color: #1e0419;
  color: white !important;
}
.custom-date-icon{
  margin-top: -36px;
  margin-left: 356px;
}

.total-staff-p-container.total-staff-p-open {
    position: relative;
  }
  
  .total-staff-p-container.total-staff-p-open::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    z-index: 99999;
  }
  
  .total-staff-p-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 320px;
    width: 620px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 100000;
  }
  
  .total-staff-p-header {
    display: flex;
    justify-content: space-between;
  }
  
  .total-staff-p-title {
    font-family: Poppins;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;    
    color: #883979;
    margin-top: 2px;
  }
  
  .total-staff-p-close-icon {
    cursor: pointer;
    font-size: 24px;
  }
  
  .total-staff-p-profile {
    display: flex;
    align-items: center;
    gap: 30px;
  }
  
  .total-staff-p-avatar {
    width: 100px;
    height: 100px;
    background: #ccc;
    border-radius: 50%;
  }
  
  .total-staff-p-details {
    display: flex;
    width: 402px;
    justify-content: space-between;
  }
  
  .total-staff-p-info-row,
  .total-staff-p-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  
  .total-staff-p-label {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #666666;
  }
  
  .total-staff-p-value {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 21.79px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    
  }
  
  .total-staff-p-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 32px;
    gap: 32px;
    margin-top: 10px;
  }
  
  .total-staff-p-divider {
    margin: 24px 0;
    border: none;
    border-top: 1px solid #ddd;
  }
  
  .total-staff-p-button {
    background: #6a1b9a;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
  }
  
  .total-staff-p-view {
    position: relative;
    right: 2.5px;
    bottom: 1px;
  }
  
/* .super-payment-container {
  background: #fff;
  width: 880px;
  height: 1343px;
  top: 120px;
  left: 337px;
  gap: 0px;
  border-radius: 12px;
  opacity: 1;
}

.super-payment-admin-hub {
  display: flex;
  flex-direction: column;
  margin-left: 0px;
  margin-bottom: 15px;
}

.super-payment-admin-hub-title {
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.0288em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #883979;
}

.super-payment-tabs {
  width: 780px;
  height: 46px;
  top: 96px;
  left: 32px;
  gap: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.super-payment-tab-button {
  width: 225px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #883979;
  color: #883979;
  opacity: 1;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  padding: 0px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.super-payment-tab-button.active {
  background-color: #883979;
  color: white;
}

.super-payment-section-title {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-left: 0px;
}

.super-payment-header-row {
  display: flex;
  margin-right: 32px;
  justify-content: space-between;
  padding: 0px 15px;
  height: 42px;
  margin-left: 0px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  background-color: #FCF3FA;
  border-radius: 8px;
}

.super-payment-header-row2 {
  display: flex;
  margin-right: 32px;
  justify-content: space-between;
  padding: 0px 15px;
  margin-top: 32px;
  height: 42px;
  margin-left: 0px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  background-color: #FCF3FA;
  border-radius: 8px;
}

.super-payment-patient-reg-label {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  padding-top: 6px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.super-payment-enable-disable {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  padding-top: 6px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-right: 45px;
}

.super-payment-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 0px;
  margin-top: 10px;
  padding-bottom: 10px;
}

.super-payment-label {
  flex: 1;
  text-align: left;
  padding-left: 8px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  width: 400px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.super-payment-field-type {
  flex: 1;
  text-align: center;
}

.super-payment-toggle-container {
  flex: 1;
  text-align: right;
  margin-right: 40px;
}

.super-payment-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.super-payment-switch input {
  opacity: 1;
  width: 0;
  height: 0;
}

.super-payment-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.super-payment-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked+.super-payment-slider {
  background-color: #883979;
}

input:checked+.super-payment-slider:before {
  transform: translateX(14px);
}

.super-payment-dropdown {
  position: relative;
  cursor: pointer;
  width: 24px;
  height: 24px;
  margin-top: 7px;
}

.super-dropdown-icon-payment {

  position: relative;
  cursor: pointer;
} */

.payments-admin-container {
  background: #f8f8f8;
  width: 849px;
  max-width: 900px;
  margin: 20px auto;
  font-family: "Open Sans", sans-serif;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #333;
  position: relative;
  top: 60px;
  height: 534px;
}

/* Section Styles */
.payments-admin-section {
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  top: 65px;
  width: 811px;
}

.payments-admin-section-title {
  color: #883979;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Header Row */
.payments-admin-header-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-weight: bold;
  background-color: #fcf3fa;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  color: black;
}

.payments-admin-header-label {
  font-size: 14px;
  color: #000000;
}

/* Divider Between Sections */
.payments-admin-divider {
  height: 2px;
  background: #e8d6e7;
  margin: 20px 0;
}

/* Category Styles */
.payments-admin-category-section {
  margin-top: 15px;
}
.dark-mode .payments-admin-category-section {
  background-color: #1e0419;
  padding: 0px;
}
.dark-mode .payments-admin-top-section {
  background-color: #1e0419;
}
.dark-mode .payments-admin-top-button {
  color: #fff;
}
.dark-mode .payments-admin-algorithm-name {
  color: #fff;
}

.payments-admin-category-title {
  color: #883979;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: start;
  padding-left: 16px;
}
.payments-admin-search-bar {
  margin-bottom: 20px;
  padding: 6px 12px;
  border: 1px solid black;
  width: 340px;
  border-radius: 8px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.payments-admin-search-bar:hover {
  background-color: lightgrey;
}

.dark-mode .admindb-payments-table-header-row {
  background-color: #1e0419;
}

.dark-mode .admindb-payments-table-header {
  background-color: #1e0419;
}
.dark-mode .admindb-payments-table-cell {
  background-color: #2d1227 !important;
}
.dark-mode .admindb-payments-table {
  background-color: #2d1227 !important;
}
.dark-mode .admindb-payments-table-cell-button {
  background-color: #2d1227 !important;
}
.dark-mode .payments-admin-sort-dropdown {
  background-color: #1e0419;
  color: #cbcbcb;
  border: 1px solid #f8f8f8;
}

.dark-mode .payments-admin-section {
  background-color: #1e0419;
}

.dark-mode .payments-admin-search-bar {
  border: 1px solid #f8f8f8;
}

.payments-admin-search-bar:hover {
  border-color: #883979;
  cursor: pointer;
}
/* .form-input:hover,
.form-input-managing-type:hover */

/* Algorithm Row */
.payments-admin-algorithm-row {
  padding-left: 25px;
  width: 730px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.payments-admin-algorithm-name {
  font-size: 14px;
  color: #555;
  padding-left: 16px;
}

/* Toggle Switch */
.payments-admin-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.payments-admin-switch input {
  display: none;
}

.payments-admin-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 20px;
}

.payments-admin-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .payments-admin-slider {
  background-color: #883979;
}

input:checked + .payments-admin-slider:before {
  transform: translateX(14px);
}
/* Top Section Styles */
.payments-admin-top-section {
  width: 395px;
  height: 43px;
  position: absolute;
  top: 58px;
  left: 275px;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  background-color: #f8f8f8;
  padding: 8px;
}

.payments-admin-top-button {
  width: 188px;
  height: 39px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.payments-admin-top-button.active {
  background-color: #883979;
  color: white;
}

/* Update Button Styles */
.payments-admin-update-button {
  width: 79px;
  height: 39px;
  position: relative;
  top: 485px !important;
  left: 766px !important;
  border-radius: 8px;
  border: none;
  background-color: #883979;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.payments-admin-update-button:hover {
  background-color: #612956;
}

/* infor icon--------------------------------- */
.info-icon-container {
  position: relative;
  display: inline-block;
}

.info-icon {
  cursor: pointer;
  color: black;
  margin-left: 10px;
}

.info-icon-container {
  position: absolute;
  top: 75px;
  left: 750px;
}

.info-icon-container1 {
  position: absolute;
  top: 110px;
  left: 760px;
}

.info-floating-box {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 0; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.info-icon-container:hover .info-floating-box {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.round-info-icon {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.payments-admin-switch input:disabled + .payments-admin-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}

.info-floating-box1 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.info-icon-container1:hover .info-floating-box1 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.round-info-icon1 {
  top: 240px;
  left: 800px;
  z-index: 999;
}

.Attendance-container {
  background: #f8f8f8;
  width: 849px;
  height: auto;
  top: 120px;
  left: 337px;
  gap: 0px;
  border-radius: 12px;
  opacity: 1;
  padding-bottom: 20px;
  padding-top: 20px;
}
.dark-mode .Attendance-container {
  background-color: #1e0419;
}
.dark-mode .attendance-topbtn {
  background-color: #2d1227;
  color: #f4f4f4;
}
.dark-mode .Attendance-checked-btn {
  color: #f4f4f4;
}
.dark-mode .names-list {
  background-color: #1e0419;
}
.dark-mode .names-list-sections {
  background-color: #2d1227;
}

.Attendance-admin-hub {
  display: flex;
  flex-direction: column;
  margin-left: 32px;
}

.Attendance-admin-hub-title {
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.0288em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
}

.Attendance-card {
  display: flex;
  flex-direction: column;
  width: 787px;
  height: 255px;
  margin-left: 32px;
  gap: 0px;
  border-radius: 10px;
  opacity: 1;
  box-shadow: 0px 0px 4px 0px #00000040;
  margin-top: 25px;
  background-color: white;
}

.Attendance-card2 {
  display: flex;
  flex-direction: column;
  width: 787px;
  height: 255px;
  margin-left: 32px;
  gap: 0px;
  border-radius: 10px;
  opacity: 1;
  box-shadow: 0px 0px 4px 0px #00000040;
  margin-top: 30px;
  background-color: white;
}

.Attendance-card3 {
  display: flex;
  flex-direction: column;
  width: 787px;
  height: 210px;
  margin-left: 32px;
  gap: 0px;
  border-radius: 10px;
  opacity: 1;
  box-shadow: 0px 0px 4px 0px #00000040;
  margin-top: 30px;
  background-color: white;
}

.Attendance-dividerline {
  width: 692px;
  height: 0px;
  margin-top: 10px;

  margin-left: 24px;
  gap: 0px;
  border-width: 0.5px;
  border-style: solid;
  border-color: transparent;
  opacity: 1;
  border: 1px solid #e6e6e6;
}

.Attendance-label-con {
  text-align: center;
  margin-top: 24px;
  height: 27px;
  top: 24px;
  left: 24px;
  gap: 20px;
  opacity: 1;
  display: flex;
  flex-direction: row;
}

.Attendance-basic-info-btn {
  color: #808080;
  margin-left: 30px;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  padding-top: 5px;
}

.Attendance-checked-btn {
  color: black;
  margin-left: 10px;
  font-family: poppins;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0.032em;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  padding-top: 5px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 6px 24px 6px 24px;
}

.Attendance-checked-btn:active {
  background-color: #883979;
}

.Attendance-checked-btn:focus {
  background-color: #883979;
  outline: none;
  color: white;
  border-radius: 8px;
  font-weight: 500;
}

.Attendance-Streak-btn {
  color: #808080;
  margin-left: 10px;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  padding-top: 5px;
  width: 285px;
}

.Attendance-on-leave-btn {
  color: #808080;
  margin-left: 10px;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-right: 80px;
}

.Attendance-active-btn {
  color: #808080;
  margin-left: 24px;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  padding: 0px;
}

.Attendance-Stafflist-btn {
  color: #883979;
  margin-left: 10px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-right: 80px;
  width: 479px;
}

.Attendance-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 44px;
  margin-top: 14px;
}

.Attendance-data-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 44px;
  margin-top: 28px;
}

.Attendance-label {
  flex: 1 1;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.Attendance-field-type {
  flex: 1 1;
  text-align: center;
}

.Attendance-button {
  width: 55px;
  height: 20px;
  gap: 8px;
  background-color: #f8f8f8;

  opacity: 1;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.Attendance-arrow-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.Attendance-arrow-button span {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.Attendance-button1 {
  width: 55px;
  height: 20px;
  gap: 8px;
  background-color: #f8f8f8;

  opacity: 1;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.Attendance-arrow-button1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.Attendance-arrow-button1 span {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.attendance-topbtn {
  background-color: #ffffff;
  width: 490px;
  padding: 5px;
  margin-left: 32px;
  border-radius: 8px;
}

.attendance-search-input {
  width: 340px !important;
  padding: 0px 8px 0px 8px !important;
  height: 40px;
  border: 1px solid #b3b3b3;
  margin-left: 19px;
  color: #883979 !important;
}
.attendance-search-input:hover {
  border: 1px solid #883979;
  cursor: pointer;
}

.admindb-table-container {
  width: 100%;
  overflow: auto;
  max-height: 710px;
}


.admindb-table-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.admindb-table-container::-webkit-scrollbar-thumb {
  background-color: #883979;
  border-radius: 4px;
}

.admindb-table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}


.admindb-payments-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
}

.admindb-payments-table-header {
  text-align: left;
  padding: 10px 15px;
  background-color: #f4f4f4;
  color: #333333;

  font-family: poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.admindb-payments-table-row {
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}

.admindb-payments-table-row:hover {
  background-color: #f9f9f9;
}

.admindb-payments-table-cell {
  padding: 15px;
  text-align: left;
  color: black;
  font-family: Open Sans;
  font-size: 15px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.admindb-payments-table-cell-button {
  position: relative;
  left: 12px;
}

.admindb-download-button {
  background-color: #883979;
  color: #ffffff;
  border: none;
  padding: 8px 12px;
  border-radius: 100px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.admindb-download-button:hover {
  background-color: #732d91;
}

.admindb-payments-table-row:nth-child(odd) {
  background-color: #ffffff;
}

.admindb-payments-table-row:nth-child(even) {
  background-color: #f9f9f9;
}
.Attendance-btn-active {
  background-color: #883979; /* Example active color */
  color: #fff; /* Make text white for contrast */
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
}
.attendance-names-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

.names-list {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  gap: 15px;
}

.pagination-controls-admin {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.pagination-btn1 {
  background-color: #f6f6f6;
  color: #b3b3b3;
  border-radius: 50%;
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-right: 10px;
  padding-right: 1px;
}
.pagination-btn2 {
  background-color: #883979;
  color: #ffffff;
  border-radius: 50%;
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 10px;
}

.pagination-btn1:hover {
  background-color: #883979;
  color: white;
}
.dark-mode .admin-attendance-card-style{
  background-color: #2D1227 !important;
}
.dark-mode .super-attendance-name{
  color: white;
}

.announcement-custom-dropdown-button {
  color: #b3b3b3; /* Default color */
  transition: color 0.3s ease-in-out;
}

.announcement-custom-dropdown-button.selected {
  color: #883979; /* Color when an option is selected */
}

.doctor-form-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black */
  z-index: 999; /* Place it behind the modal */
}

.Doctor-form-container-new {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* Place it above the overlay */
  background: none;
  padding: 0px;
  border-radius: 10px;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
}

.dark-mode .Doctor-form-container-new {
  background-color: #1e0419;
  background: rgba(158, 158, 158, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.Doctor-form-new {
  position: relative;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 955px;
  height: 700px;
  top: 32px;
  left: 60px;
  gap: 0px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin: 0 auto;
  border-radius: 8px;
  position: static;
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.doctor-admin-hub-container {
  display: flex; /* Aligns the image and text side by side */
  align-items: center; /* Vertically centers the content */
  gap: 16px; /* Adds space between the image and the text */
  position: relative; /* To handle positioning within the container */
}

.doctor-admin-hub-image {
  width: 70px;
  height: 70px;
  background-color: #d9d9d9; /* Background color for the image section */
  border-radius: 100%; /* Makes the image circular */
  position: relative;
  top: 0px;
  left: 0px;
}

.doctor-admin-hub-title-new {
  font-size: 24px;
  font-weight: bold;
  margin: 0; /* Removes default margin */
}

.circle-new {
  display: inline-block; /* To ensure it occupies space */
  width: 34px; /* Example size */
  height: 4px;
}

.green {
  background-color: #4caf50;
}

.red {
  background-color: #f44336;
}

.orange {
  background-color: #ff9800;
}

.dark-mode .Doctor-form-new {
  background-color: #2d1227;
}

.Doctor-admin-hub-new {
  display: flex;
  flex-direction: row;
  margin-left: 30px;
  margin-top: 20px;
  width: 1000px;
}

.Doctor-admin-hub-title-new {
  font-family: Open Sans;
  font-size: 25px;
  font-weight: 700;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
  margin-top: 0px;
  width: 850px;
}

.addcase-exit-icon-new {
  position: absolute;
  width: 32px;
  height: 0px;
  align-items: center;
  gap: 0px;
  opacity: 1;
  display: flex;
  margin-left: 445px !important;
  margin-top: 2px !important;
  position: fixed;
  z-index: 10000;
  /* left: 94px; */
}

.doctor-date-container-new {
  display: flex;
  align-items: flex-end;
  gap: 40px;
}

.doctor-date-new {
  width: 494px;
  height: 88px;
  margin-top: 10px;
  margin-left: 30px;
  gap: 5px;
  opacity: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.doctor-date-title-new {
  width: 494px;
  height: 30px;
  gap: 0px;
  opacity: 1;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.date-picker-new {
  border-radius: 4px;
  width: 420px;
  height: 28px;
  gap: 0px;
  border-radius: 8px;
  color: #e0e0e0;
  opacity: 1;
  border: 1px solid #b3b3b3;
}

.attend-color-new {
  display: flex;
  width: 250px;
  height: 30px;
  flex-direction: row;
  top: 536px;
  left: 275px;
}
.attend-color-new {
  width: 483px;
  height: 27px;
  position: relative; /* Required to apply top and left properties */
  top: 455px;
  left: 230px;
  /* opacity: 1; */
}

.attend-present-new {
  width: 150px;
  height: 27px;
  gap: 8px;
  opacity: 1;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 400;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.attend-present2-new {
  width: 150px;
  height: 27px;
  gap: 8px;
  opacity: 1;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 400;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 15px;
}

.circle-atten-new {
  width: 28px;
  height: 4px;
  background-color: green;
  border-radius: 8px;
  margin-left: 5px;
  opacity: 1;
  display: flex;
  align-items: flex-end;
}

.circle-atten2-new {
  width: 28px;
  height: 4px;
  background-color: red;
  border-radius: 8px;
  margin-left: 5px;
  opacity: 1;
}

.circle-atten3-new {
  width: 28px;
  height: 4px;
  background-color: #ff8c1a;
  border-radius: 8px;
  margin-left: 5px;
  opacity: 1;
}

.Attendace-summary-title-new {
  width: 229px;
  height: 27px;
  font-family: Open Sans;
  font-size: 19px;
  font-weight: 700;
  line-height: 27.24px;
  margin-left: 30px;
  margin-top: 10px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
  gap: 0px;
  opacity: 1;
}

/* .Attendance-summary-new {
  width: 550px;
  height: 72px;
  margin-top: 25px;
  margin-left: 76px;
  gap: 0px;
  opacity: 1;
  display: flex;
  flex-direction: row;
} */

.Attendance-summary-new {
  width: 864px;
  height: 24px;
  display: flex; /* Ensures the child elements are arranged in a row */
  gap: 44px; /* Space between the child elements */
  font-size: 18px; /* Font size */
  font-weight: 400; /* Font weight */
  font-family: "Open Sans", sans-serif; /* Font family */
  color: black; /* Text color */
  white-space: nowrap; /* Prevents text from breaking into a new line */
  overflow: hidden; /* Ensures overflow text is hidden */
  text-overflow: ellipsis; /* Adds ellipsis (...) if the text overflows */
  margin-left: 24px;
}

.attendance-table-new {
  width: 864px;
  border-collapse: collapse; /* Ensures table borders collapse neatly */
  margin-left: 10px;
  margin-top: 4px;
}

.attendance-summary-row {
  height: 24px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  color: black;
}

.attendance-cell {
  padding: 0 22px; /* Adds horizontal space between cells */
  white-space: nowrap; /* Prevents text from wrapping */
  text-align: left; /* Aligns text to the left */
}

.Attendance-summary2-new {
  width: 550px;
  height: 72px;

  margin-left: 76px;
  gap: 0px;
  opacity: 1;
  display: flex;
  flex-direction: row;
}

.workingday-new {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.workday-new {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  width: 246px;
  height: 27px;
  margin-left: 55px;
  opacity: 1;
}

.Doctor-card-new {
  margin-top: 4px;
  margin-left: 30px;
  width: 890px;
  height: 495px;
  border-radius: 12px;
  opacity: 1;
  border: 1px solid #dcdcdc;
  /* box-shadow: 0px 4px 30px 0px #0000002E; */
}

.calendar-new {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 10px;
  gap: 10px;
  padding: 20px;
  width: 856px;
  height: 395px;
  gap: 0px;
  opacity: 1;
  margin-top: -50px;
}

.calendar-cell-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 115px;
  text-align: center;
}

.calendar-header-new {
  text-align: center;
  color: #883979;
  font-family: poppins;
  font-size: 20px;
  font-weight: 500;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  margin-top: 35px;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.date-new {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 400;
  line-height: 35.41px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.circle-new {
  display: inline-block; /* To ensure it occupies space */
  width: 34px;
  height: 4px;
  border-radius: 8px;
  margin-top: 5px;
}

.green-new {
  background-color: #4caf50;
}

.red-new {
  background-color: #f44336;
}

.orange-new {
  background-color: #ff9800;
}
/* Ensure responsiveness below 1244px */
@media screen and (min-width: 1204px) {
  .Doctor-form-container-new {
    width: 65%;
    max-width: 955px;
    height: auto; /* Allow content to dictate height */
    overflow-y: auto;
  }

  .calendar-cell-new {
    font-size: 0.8rem;
    padding: 3px;
  }

  .attendance-summary-row {
    font-size: 0.75rem;
  }
}

.doctor-month-container-new {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  justify-content: end;
  margin-right: 50px;
}

.doctor-month-new {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

/* Main Container */
.main-container-professional-development {
  width: 804px;
  /* height: 885px; */
  position: absolute;
  top: auto;
  left: auto;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 32px;
  box-sizing: border-box;
  padding-bottom: 200px;
}
.dark-mode .main-container-professional-development {
  background-color: #1e0419;
}
.dark-mode .video-title-professional-development {
  color: #fff;
}
.dark-mode .header-professional-development-row {
  background-color: #1e0419;
  color: #fff;
}
.dark-mode .header-professional-development-column {
  color: #fff;
}
.dark-mode .input-section-professional-development {
  background-color: #1e0419;
  color: #fff;
}

/* Header */
.header-professional-development {
  font-size: 24px;
  color: #883979;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin-bottom: 40px;
  text-align: left;
}

/* Header Row */
.header-professional-development-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 740px;
  height: 42px;
  border-radius: 8px;
  background-color: #fcf3fa;
  padding: 0 16px;
  box-sizing: border-box;
  margin-bottom: 32px;
}

.header-professional-development-column {
  font-size: 16px;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  color: black;
}

/* Content Section */
.content-section-professional-development {
  /* display: flex;
  flex-direction: column;
  gap: 16px; */
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 15px;
  gap: 15px;
  max-width: 800px; /* Adjust width for a cleaner layout */
  margin: auto;
  max-height: 500px; /* Adjust height based on your layout */
  overflow-y: auto;
  padding-right: 10px; /* Space for scrollbar */
}

/* .content-section-professional-development::-webkit-scrollbar {
  width: 8px;
  border-radius: 25px;
}

.content-section-professional-development::-webkit-scrollbar-thumb {
  background-color: #883979;
  border-radius: 8px;
}

.content-section-professional-development::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 8px;
}

.content-section-professional-development {
  scrollbar-color: #883979 #f1f1f1;
  scrollbar-width: thin;
  border-radius: 8px;
} */
.content-section-professional-development::-webkit-scrollbar {
  width: 8px; 
  border-radius: 100px; 
}

.content-section-professional-development::-webkit-scrollbar-thumb {
  background-color: #883979; 
  border-radius: 100px; 
}

.content-section-professional-development::-webkit-scrollbar-track {
  background: transparent;
}

.content-section-professional-development::-webkit-scrollbar-thumb:hover {
  background-color: #883979; 
}

/* Content Row */
.content-professional-development-row {
  /* display: flex;
  align-items: center;
  gap: 85px; */
  display: grid;
  grid-template-columns: 130px 1fr 130px 80px 30px; /* Adjusted for proper alignment */
  align-items: center;
  background: #fff;
  padding: 10px 15px;
  border-radius: 8px;
}

/* Video Section */
.video-section-professional-development {
  width: 149px;
  height: 78px;
  border-radius: 8px;
  background-color: #d8d8d8; /* Placeholder background */
  position: relative;
}

/* Video Title */
.video-title-professional-development {
  font-size: 12px;
  font-weight: 600;
  font-family: "poppins";
  color: black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px; /* Adjust width as needed */
  display: inline-block;
  cursor: pointer;
}

/* Input Section */
.input-section-professional-development {
  width: 116px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 4px;
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
}

/* Toggle Button */
.toggle-button-professional-development-ai {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: white; /* Placeholder background */
  border: 0px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px;
  cursor: pointer;
  /* transition: background-color 0.3s; */
}

.toggle-button-professional-development:hover {
  background-color: transparent;
}
.input-section-professional-development {
  width: 116px;
  height: 26px;
  border-radius: 4px;
  padding: 2px;
  font-size: 12px;
}

.train-staff-upload {
  width: 141px;
  height: 40px;
  top: 0px;
  left: 284px;
  position: relative;
  padding: 8px 16px 8px 16px;
  gap: 8px;
  border-radius: 8px;
  border-width: 1px 0 0 0;
  border-style: solid;
  opacity: 1;
  color: #883979;
  background: white;
  border: 1px solid #883979;
}
.train-staff-upload:hover {
  cursor: pointer;
  background-color: #672e5c;
}
.dark-mode .train-staff-upload{
  background-color: #1e0419;
  border-color: white;
}

.super-switch {
  display: flex;
  justify-content: center;
}
.video-title-professional-development {
  margin-left: 50px;
}
.input-section-professional-development {
  margin-left: -90px;
}

.choose-video {
  position: relative;
  left: -145px;
  top: 12px;
}

.ts-upload-h2 {
  font-family: poppins;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: -10px;
}

.ts-upload-p {
  font-family: poppins;
  font-size: 16px;
  font-weight: 400;
}

.confirm-button-vupload-y {
  background-color: #883979;
  padding: 8px 65px;
  color: white;
  cursor: pointer;
  font-family: poppins;
  transition: background-color 0.6s ease, transform 0.4s ease;
}

.confirm-button-vupload-y:hover {
  background-color: #712864;
  color: white;
}

.cancel-button-vupload-n {
  background-color: white;
  border: 1px solid #eb1f2e;
  padding: 8px 65px;
  cursor: pointer;
  margin-left: 42px;
  font-family: poppins;
  transition: background-color 0.6s ease, transform 0.4s ease;
}

.cancel-button-vupload-n:hover {
  background-color: #eb1f2e;
  border: 1px solid #eb1f2e;
  color: white;
}
/* Dropdown Container */
.dropdown-section-professional-development {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Dropdown Button */
.dropdown-container-professional-development {
  display: flex;
  height: 10px;
  width: 90px;
  align-items: center;
  justify-content: space-between;
  background: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease-in-out;
  margin-left: -90px;
}

/* .dropdown-container-professional-development:hover {
  background: #eaeaea;
} */
.dark-mode .dropdown-container-professional-development{
  background-color: #1e0419;
  color: white;
}
.dark-mode .dropdown-options-container-professional-development{
  background-color: #1e0419;
  color: white;
}

/* Placeholder Text */
.dropdown-placeholder-professional-development {
  color: #888;
}
.dark-mode .dropdown-placeholder-professional-development {
  color: white;
}

.dropdown-selected-text-professional-development {
  color: #333;
  font-weight: 500;
}

/* Dropdown Arrow */
.dropdown-arrow-icon-professional-development {
  transition: transform 0.3s ease-in-out;
}

.dropdown-arrow-rotate-professional-development {
  transform: rotate(180deg);
}

/* Dropdown Options */
.dropdown-options-container-professional-development {
  position: absolute;
  top: 100%;
  margin-right: 50px;
  width: 112px;
  font-size: 12px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  margin-left: -90px;
}

.dropdown-option-item-professional-development {
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

.dropdown-option-item-professional-development:hover {
  background: #712864;
  color: #ccc;
}

/* Ensure dropdown options are visible */
.dropdown-options-container-professional-development {
  display: block;
}
.dark-mode .content-professional-development-row{
  background-color: #2D1227;
}




.delete-video-button {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.delete-video-button:hover {
  transform: scale(1.1);
}

/* Updated Modal Styles */
.modal-overlay-professional-development {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content-professional-development {
  background: white;
  padding: 20px;
  border-radius: 12px;
  width: 380px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-close-button-professional-development {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.modal-close-button-professional-development:hover {
  transform: scale(1.1);
}

/* File Upload Step */
.file-upload-container-professional-development {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.upload-text-professional-development {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 24px;
}

.selected-file-info-professional-development {
  display: flex;
  align-items: center;
  width: 94%;
  padding: 12px;
  background: #FCF3FA;
  border-radius: 8px;
  margin: 16px 0;
}

.proceed-button {
  background-color: #883979;
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  border: none;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.proceed-button:hover {
  background-color: #712864;
}

.proceed-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.upload-icon-professional-development {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  border-radius: 50%;
  background-color: #FCF3FA;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.upload-icon-professional-development svg {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.upload-icon-professional-development circle {
  transform-origin: center;
}

.upload-icon-professional-development path {
  transform-origin: center;
  stroke-width: 2;
}

/* Title Input Step */
.title-input-container-professional-development {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.enter-title-text-professional-development {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
  align-self: flex-start;
}

.title-input-professional-development {
  width: 90%;
  padding: 12px 19px;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  margin-bottom: 0px;
  outline: none;
}

.title-input-professional-development:focus {
  border-color: #883979;
}

.file-icon-professional-development {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  color: #883979;
}

.file-name-professional-development {
  flex: 1 1;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.remove-file-professional-development {
  cursor: pointer;
  color: #666;
  font-size: 20px;
  padding: 0 8px;
}

/* Upload Progress */
.upload-progress-container-professional-development {
  text-align: center;
  padding: 24px 0;
}

.upload-progress-title-professional-development {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 32px;
}

.progress-bar-professional-development {
  width: 100%;
  height: 8px;
  background-color: #F0F0F0;
  border-radius: 100px;
  overflow: hidden;
  margin: 24px 0;
}

.progress-fill-professional-development {
  height: 100%;
  background-color: #883979;
  transition: width 0.3s ease;
  border-radius: 100px;
}

.progress-text-professional-development {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* Dark Mode */
.dark-mode .modal-content-professional-development {
  background-color: #1e0419;
}

.dark-mode .upload-text-professional-development,
.dark-mode .enter-title-text-professional-development,
.dark-mode .upload-progress-title-professional-development,
.dark-mode .progress-text-professional-development,
.dark-mode .file-name-professional-development {
  color: white;
}

.dark-mode .title-input-professional-development {
  background-color: #2D1227;
  border-color: #4D2D47;
  color: white;
}

.dark-mode .selected-file-info-professional-development {
  background-color: #2D1227;
}

.dark-mode .progress-bar-professional-development {
  background-color: #2D1227;
}

.choose-file-button-professional-development {
  background-color: #883979;
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  border: none;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, #883979, #712864);
  box-shadow: 0 2px 4px rgba(136, 57, 121, 0.2);
}

.choose-file-button-professional-development:hover {
  background-image: linear-gradient(to right, #712864, #5E2152);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(136, 57, 121, 0.3);
}

.strip-chart-container-avg {
  width: 239px;
  height: 172px;
  background-color: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.strip-chart-title-avg {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.strip-chart-columns-avg {
  display: flex;
  justify-content: start;
  padding-left: 16px;
  width: 100%;
  height: 100%;
  gap: 48px;
}

.strip-chart-column-avg {
  position: relative;
  display: flex;
  justify-content: start;
  height: 100%;
  gap: 48px;
}

.strip-chart-stripes-avg {
  display: flex;
  flex-direction: column-reverse;
  height: 107px;
  justify-content: flex-start;
  width: 58px;
}

.strip-stripe-avg {
  height: 2px !important;
  width: 58px;
  border-radius: 100px;
  background-color: #ddd;
  margin-bottom: 5px;

}

.strip-chart-tooltip-avg {
  font-size: 14px;
  font-weight: bold;
}

.strip-chart-label-avg {
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  font-family: "Open Sans";
  width: 82px;
  transform: translateX(-10px);
}

.strip-floating-card-avg {
  position: absolute;
  top: 0px;
  left: 46px;
  width: fit-content;
  height: fit-content;
  padding: 8px 16px;
  background-color: #f9f9f9;
  border-radius: 10px 10px 10px 0;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.dark-mode .super-strip-floating-card-avg{
  background-color: #AD499A;
  color: white;
}
.dark-mode .super-strip-amount-avg{
  color: white;
} 
.dark-mode .super-strip-description-avg{
  color: white;
}
.strip-amount-avg {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.strip-description-avg {
  font-size: 10px;
  color: #555;
  display: flex;
  text-align: start;
  width: 100%;
  margin: 0;
}

/* Main container */
.financial-matrices-main-container {
  position: relative;
  width: 561px;
  height: 341px;
  top: 0px;
  left: 0px;
  background-color: #f8f8f8;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dark-mode .financial-matrices-main-container {
  background-color: #2d1227;
  color: #fff;
}
.dark-mode .super-financial-matrices-main-container{
  background-color: #2D1227;
  color: white;
}

/* Small section in the top-right */
.financial-matrices-usd-container {
  position: absolute;
  width: 66px;
  height: 24px;
  top: 16px;
  left: 449px;
  background-color: #883979;
  border-radius: 100px;
  padding: 4px 12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: "Poppins", sans-serif;
}

/* Vertical line */
.financial-matrices-vertical-line {
  position: absolute;
  height: 252px;
  width: 1px;
  top: 69px;
  left: 280px;
  background-color: #c6c6c6;
}

/* Left section */
.financial-matrices-left-section {
  position: absolute;
  text-align: center;
  left: 40px;
  top: 135px;
}

.financial-matrices-left-section .title {
  position: absolute;
  top: 69px;
  left: 97px;
  font-size: 20px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #000000;
}

.financial-matrices-left-section .subtitle {
  position: absolute;
  top: 345px !important;
  left: 97px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  color: #000000;
}

/* Right section */
.financial-matrices-right-section {
  position: absolute;
  text-align: center;
  left: 320px;
  top: 135px;
}

.financial-matrices-right-section .title {
  position: absolute;
  top: 69px;
  left: 374px;
  font-size: 20px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #000000;
}

.financial-matrices-right-section .subtitle {
  position: absolute;
  top: 315px;
  left: 374px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  color: #000000;
}
.dark-mode .super-financial-matrices-title1{
  color: white;
}
.dark-mode .super-financial-matrices-title2{
  color: white;
}
.financial-matrices-title1{
  font-size: 20px;
  font-weight: 400;
  font-family: poppins;
  top: 69px;
  left: 97px;
  color: #000000;
  position: absolute;
}
.financial-matrices-title2 {
  font-size: 20px;
  font-weight: 400;
  font-family: poppins;
  top: 69px;
  left: 374px;
  color: #000000;
  position: absolute;
}

.analytics-data-chart-main-container {
  width: 272px;
  height: 285px;
  position: absolute;
  top: 35px;
  left: 0px;
  border-radius: 16px;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.dark-mode .analytics-data-chart-main-container {
  background-color: #2d1227;
  color: #fff;
}

.analytics-data-chart-dropdown-section {
  width: 68px;
  height: 24px;
  border: 1px solid black;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  font-size: 14px;
  margin-left: 158px;
}

.dark-mode .analytics-data-chart-dropdown-section {
  background-color: #883979;
  color: #fff;
}

.analytics-data-chart-dropdown-section:hover {
  background-color: #883979;
  color: #f8f8f8;
}

.analytics-data-chart-dropdown-section select {
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
}

.analytics-data-chart-bar-graph-section {
  margin-top: 25px;
  width: 100%;
  height: 200px;
}
.recharts-legend-item.legend-item-0 {
  display: none;
}

.analytics-software-usage-main-container {
  width: 272px;
  height: 341px;
  position: absolute;
  top: 35px;
  left: 0px;
  background-color: #f8f8f8;
  border-radius: 16px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  box-sizing: border-box;
}
.dark-mode .analytics-software-usage-main-container {
  background-color: #2d1227;
  color: #fff;
}

.analytics-software-usage-title-section {
  font-size: 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  color: black;
  position: absolute;
  top: 16px;
  left: 16px;
}

.dark-mode .analytics-software-usage-title-section{
  color: white;
}

.analytics-software-usage-dropdown-section {
  position: absolute;
  top: 16px;
  left: 194px;
  width: 62px;
  height: 24px;
  border: 1px solid #883979;
  border-radius: 4px;
  color: #883979;
}

.analytics-software-usage-dropdown-section select {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  color: #883979;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  background: transparent;
  padding-left: 8px;
  cursor: pointer;
}

.analytics-software-usage-donut-chart-section {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto 0;
}

.analytics-software-usage-floating-label {
  position: absolute;
  width: 49px;
  height: 21px;
  background-color: #ffe2f9;
  border: 1px solid #d694c9;
  color: #883979;
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.analytics-software-usage-legend-section {
  position: absolute;
  top: 294px;
  left: 62px;
  width: 147px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.analytics-software-usage-legend-item {
  display: flex;
  align-items: center;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: black;
}

.dark-mode .analytics-software-usage-legend-item{
  color: white;
}

.analytics-software-usage-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.analytics-patients-metrics-container {
  width: 561px;
  height: 341px;
  position: absolute;
  top: 30px;
  left: 0px;
  background-color: #f8f8f8;
  border-radius: 16px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  box-sizing: border-box;
}
.dark-mode .analytics-patients-metrics-container {
  background-color: #2d1227;
  color: #fff;
}

.analytics-patients-metrics-title {
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  color: black;
  position: absolute;
  top: 16px;
  left: 16px;
}

.analytics-patients-metrics-table-container {
  position: absolute;
  top: 50px;
  left: 16px;
  width: 530px;
  height: 280px;
  overflow-y: auto;
}

.analytics-admin-table {
  width: 100%;
  border-collapse: collapse;
}

.analytics-admin-head .analytics-admin-th {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: black;
  padding-bottom: 8px;
}

.analytics-admin-body .analytics-admin-td {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  color: black;
  padding: 8px 0;
}

.analytics-admin-body .analytics-admin-tr {
  border-bottom: 1px solid transparent;
}

.analytics-admin-body .analytics-admin-tr:last-child {
  border-bottom: none;
}

.patient-metrices-new-container {
  width: 548px;
  height: 280px;
  position: absolute;
  top: 0px;
  left: 10px;
  border-radius: 16px;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.dark-mode .patient-metrices-new-container {
  background-color: #2d1227;
}
.dark-mode .patient-metrices-new-title,
.dark-mode .patient-metrices-new-value,
.dark-mode .patient-metrices-new-subtitle {
  color: white;
}

.patient-metrices-new-title {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: black;
}

.patient-metrices-new-section {
  width: 143px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  justify-content: center;
  gap: 2px;
  position: absolute;
}

.patient-metrices-new-section-left {
  top: 72px;
  left: 100px;
}

.patient-metrices-new-section-right {
  top: 72px;
  left: 324px;
}
.patient-metrices-new-section-center {
  top: 72px;
  left: 213px;
}

.patient-metrices-new-subtitle {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  text-align: center;
  white-space: nowrap;
}

.patient-metrices-new-value {
  font-family: "Open Sans", sans-serif;
  font-size: 52px;
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0px;
  margin-bottom: 0px;
  padding: 20px;
  background-color: #dcdcdc;
  border-radius: 8px;
}


.patient-metrices-new-value-minutes {
  font-family: "Open Sans", sans-serif;
  font-size: 52px;
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0px;
  margin-bottom: 0px;
  padding: 20px;
  background-color: #dcdcdc;
  border-radius: 8px;
  width: 55px;
}


.patient-metrices-new-divider {
  width: 110px;
  height: 1px;
  background-color: #e6e6e6;
  position: absolute;
  top: 155px;
  left: 220px;
  transform: rotate(-90deg);
}

.financial-metrics-new-container {
  width: 549px;
  height: 341px;
  position: absolute;
  top: 37px;
  left: 0px;
  border-radius: 16px;
  background-color: #f8f8f8;
  padding: 16px;
  box-sizing: border-box;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.dark-mode .financial-metrics-new-container{
  background-color: #2d1227;
}
.dark-mode .financial-metrics-new-title,
.dark-mode .financial-metrics-new-revenue,
.dark-mode .financial-metrics-new-label span{
  color: white;
}

.financial-metrics-new-title {
  font-size: 14px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: black;
  position: absolute;
  top: 16px;
  left: 16px;
}

.financial-metrics-new-subtitle {
  font-size: 10px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #808080;
  position: absolute;
  top: 36px;
  left: 16px;
}
.dark-mode .financial-metrics-new-container h3{
  color: white !important;
}
.financial-metrics-new-revenue {
  font-size: 30px;
  font-weight: 700;
  font-family: "Open Sans", sans-serif;
  color: black;
  position: absolute;
  top: 62px;
  left: 16px;
}

.financial-metrics-new-indicator {
  width: 66px;
  height: 24px;
  position: absolute;
  top: 16px;
  left: 467px;
  border-radius: 12px;
  background-color: #883979;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 400;
  color: white;
  font-family: "Poppins", sans-serif;
}

.financial-metrics-new-graph {
  width: 481px;
  height: 160px;
  position: absolute;
  top: 143px;
  left: 52px;
}

.financial-metrics-new-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
}

.financial-metrics-new-label-earned {
  width: 58px;
  height: 18px;
  position: absolute;
  top: 311px;
  left: 194px;
}

.financial-metrics-new-label-spent {
  width: 58px;
  height: 18px;
  position: absolute;
  top: 311px;
  left: 304px;
}

.financial-metrics-new-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.financial-metrics-new-circle-earned {
  background-color: #883979;
}

.financial-metrics-new-circle-spent {
  background-color: #2585e0;
}

.analytics-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
  padding: 20px;
  box-sizing: border-box;
  top: -100px;
  left: -50px;
  z-index: -1;
}
.dark-mode .super-admin-area-main-container-analytics {
  background-color: #351e30;
}

.analytics-section {
  position: absolute;
}

.analytics-title {
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  color: #666666;
  margin-bottom: 10px;
}

.dark-mode .analytics-title {
  color: white;
}

.top-performers {
  /* max-width: 900px; */
  margin: auto;
  width: 80%;
  /* background: white; */
  border-radius: 10px;
  padding: 20px;
  position: absolute;
  top: 900px;
  left: 320px;
  z-index: -1;
}

.performers-dark {
  background-color: #2d1227;
}

h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}
.h2-dark {
  color: white;
}

.performers-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  width: fit-content;
}

.performer-card {
  background: #fafafa;
  border-radius: 10px;
  padding: 15px;
  width: 350px;
  height: 90px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.card-dark {
  background-color: #1e0419 !important;
  color: white;
}
.performer-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 2rem;
  height: 100%;
}
.performer-info > div {
  display: flex;
  gap: 2rem;
  width: 100%;
  height: 35px;
}
.performer-info > div > p {
  width: fit-content;
  align-self: center;
}
.performer-info > div > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* border: 1px solid black; */
}
.cases-div {
  display: flex;
}
.cases-div > p {
  margin-left: 1rem;
}
.name {
  font-weight: bold;
  margin: 0;
  font-size: 16px;
}

.up {
  color: green;
  font-weight: bold;
}

.down {
  color: red;
  font-weight: bold;
}

.rank {
  position: absolute;
  top: 10px;
  right: 10px;
  background: purple;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.rank-dark {
  background: #5c2a5c;
  color: white;
}
@media only screen and (min-width: 1201) and (max-width: 1340) {
  .performers-grid {
    justify-content: flex-start;
    width: 100%;
  }
  .top-performers {
    width: 80%;
  }
}

.dark-mode .top-performance-title {
  color: white;
}

/* Container for the Donut Chart */
.global-donut-chart-container {
  position: relative; /* Ensures child elements are positioned relative to this container */
  width: 240px;
  height: 240px; /* Adjust height as per your layout */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floating Label 1 */
.global-donut-chart-floating-label1 {
  position: absolute; /* Absolute positioning to align with the chart */
  top: 20px; /* Adjust to match donut chart placement */
  left: 40px; /* Adjust to center on the segment */
  width: 48px;
  height: 48px;
  background-color: #ffffff;
  color: #883979;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for floating effect */
  z-index: 10; /* Ensure it appears above the donut chart */
}

/* Floating Label 2 */
.global-donut-chart-floating-label2 {
  position: absolute; /* Absolute positioning to align with the chart */
  top: 126px; /* Adjust to match donut chart placement */
  left: 138px; /* Adjust to center on the segment */
  width: 48px;
  height: 48px;
  background-color: #ffffff;
  color: #ff8c1a;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px !important;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for floating effect */
  z-index: 10; /* Ensure it appears above the donut chart */
}
.super-global-donut-chart-floating-label1{
  font-size: 12px;
}
/* Popup container */

.version-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent black */
  pointer-events: none; /* Disable interaction */
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  pointer-events: none; /* Default: disable interaction */
  transition: opacity 0.5s ease-in-out;
  z-index: 999; /* Ensure it covers the background */
}

/* When the popup is open, make the overlay visible */
.version-overlay.open {
  opacity: 1; /* Make the overlay fully visible */
  pointer-events: all; /* Enable interaction */
}

.version-popup {
  background-color: white;
  border-radius: 8px 8px 8px 8px;
  padding: 20px;
  width: 267px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: fixed;
  bottom: 75px;
  right: 353px;
  z-index: 1000; /* Higher than the overlay */
  animation-duration: 0.5s;
  pointer-events: auto; /* Allow interaction */
}

.dark-mode .version-popup {
  background: #1e0419;
}

/* Close button */
.version-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.dark-mode .version-close-btn {
  color: #ffffff;
}

/* Popup heading and paragraph */
.version-popup h2 {
  margin: 0;
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 600;
  line-height: 19.07px;
  letter-spacing: 0.0288em;
}

.dark-mode .version-popup h2 {
  color: #ffffff;
}

.version-popup p {
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.0288em;
}

.dark-mode .version-popup p {
  color: #ffffff;
}

/* Fade-in animation */
@keyframes fadeIn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Fade-out animation */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Add fade-in effect */
.version-popup.fade-in {
  animation-name: fadeIn;
  animation-fill-mode: forwards;
}

/* Add fade-out effect */
.version-popup.fade-out {
  animation-name: fadeOut;
  animation-fill-mode: forwards;
}

.version-speech-bubble {
  background-color: none;
  border-radius: 10px;
  padding: 4px;
  /* position: relative; */
}

.version-speech-bubble:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 8px solid #ffffff;
  bottom: -8px;
  left: 148.5px;
  transform: translateX(-50%);
  z-index: 9999;
}

.dark-mode .version-speech-bubble {
  background-color: none;
  /* position: relative; */
  padding: 4px;
}

.dark-mode .version-speech-bubble:after {
  border-top: 8px solid #1e0419;
  border-right: 14px solid transparent;
  width: 1px;
  height: 0;
  bottom: -8px;
  left: 7.5px;
  transform: translateX(-50%);
}
.version-container {
  background-color: #f7f7f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  font-family: Arial, sans-serif;
  color: #333;
}

.version-header {
  text-align: center;
  margin-bottom: 16px;
}

.version-title {
  font-size: 16px;
  font-weight: bold;
  color: #663399;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  /* text-align: left; */
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.version-info {
  display: flex;
  margin-bottom: 12px;
  width: 285px;
  height: 58px;
  position: relative;
  left: -8px;
  top: 0px;
  /* top: 957px;
left: 765px; */
  gap: 25px;
  border-radius: 12px;
  opacity: 1;
  background-color: #f0f0f0;
  justify-content: center;
  align-items: center;
}
.dark-mode .version-info {
  background-color: #1e0419;
}

.version-details,
.version-date {
  text-align: left;
}

.version-label {
  font-size: 12px;
  color: #888;
  margin: 0;
  font-family: Poppins;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.version-value {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin: 0;
  font-family: Poppins;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.version-updated {
  font-size: 12px;
  color: #888;
  text-align: center;
  margin-bottom: 16px;
  font-family: Poppins;
  font-size: 10px;
  font-style: italic;
  font-weight: 400;
  line-height: 15px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.version-features {
  font-size: 12px;
  line-height: 1.5;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.version-features p {
  margin: 8px 0;
}

/* Popup container */
.about-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent black */
  pointer-events: none; /* Disable interaction */
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  transition: opacity 0.5s ease-in-out; /* Fade-in transition */
  z-index: 999;
}

/* When the popup is open, make the overlay visible */
.about-overlay.open {
  opacity: 1; /* Make the overlay fully visible */
  pointer-events: all; /* Enable interaction */
}

.about-popup {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  width: 188px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: fixed;
  bottom: 80px;
  right: 340px;
  z-index: 1000; /* Ensure it’s above the overlay */
  animation-duration: 0.5s;
  pointer-events: auto; /* Allow interaction with the popup */
}

.dark-mode .about-popup {
  background: #1e0419;
}

/* Fade-in animation */
@keyframes fadeIn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Fade-out animation */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Apply fade-in effect */
.about-popup.fade-in {
  animation-name: fadeIn;
  animation-fill-mode: forwards;
}

/* Apply fade-out effect */
.about-popup.fade-out {
  animation-name: fadeOut;
  animation-fill-mode: forwards;
}

/* Close button */
.about-close-btn:hover,
.about-close-btn:focus {
  color: #ff4a4a;
}

.about-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* Popup heading and paragraph */
.about-popup h2 {
  margin: 0;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 21.79px;
  letter-spacing: 0.0288em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.about-popup div {
  display: flex;
  align-items: center;
  height: 45px;
}

.whatsapp-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.reach-out-button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

/* .reach-out-button:hover {
  background-color: #0056b3;
} */

.about-speech-bubble {
  background-color: transparent;
  border-radius: 10px;
  /* padding: 4px; */
  height: 0px !important;
  /* position: relative; */
}


.about-speech-bubble:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 8px solid #ffffff;
  bottom: -8px;
  left: 112.5px;
  transform: translateX(-50%);
  z-index: 9999;
}

.dark-mode .about-speech-bubble{
  background-color: transparent;
  padding: 4px;
}

.dark-mode .about-speech-bubble:after{
  border-top: 8px solid #1E0419;
  border-right: 14px solid transparent;
  width: 1px;
  height: 0;
  bottom: -8px;
  left: 7.5px;
  transform: translateX(-50%);
}

/* Overlay styling */
.req-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999 !important;
}

/* Modal content styling */
.req-modal-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  max-width: 1081px;
  height: 760px;
  width: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 999999 !important;
  animation: fadeIn 0.3s ease-in-out;
  outline: solid 1px #2d1227 !important;
}
@media (max-width: 800px) {
  .req-modal-content {
    padding: 3px;
  }
}

.dark-mode .req-modal-content {
  background-color: #1e0419;
}

/* Header styling */
.req-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
}
.dark-mode .req-modal-header {
  border-bottom: 1px solid rgb(51, 50, 50);
}

.req-modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px;
  font-family: poppins;
  font-weight: 600;
}

.requestForm-close-btn {
  position: relative;
  font-size: 2rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
  margin-top: -20px;
  margin-right: 0px;
}

/* Form styling */
.request-form-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}

.request-form-row div {
  flex: 1 1;
}

.full-name-label {
  display: block;
  font-size: 20px;
  margin-bottom: 12px;
  color: black;
  font-weight: 600;
  letter-spacing: 0.24em;
  letter-spacing: 1px;
  font-family: "Open Sans";
  text-align: left !important;
  margin-top: 10px;
}
.dark-mode .label {
  color: #ddd;
}

.req-input,
.req-select {
  width: 100%;
  padding: 14px 15px 14px 15px;
  font-size: 16px;

  /* border: 1px solid #91007c; */
  border-radius: 5px;
  outline: none;
  box-sizing: border-box;
  line-height: 0px;
  color: #883979;
}

.request-form-row .req-input {
  border: 1px solid #91007c;
  border-radius: 8px;
}
.dark-mode .request-form-row .req-input {
  border: 1px solid #b3b3b3;
  color: white;
}

.dark-mode .request-form-row .req-input:focus {
  border-color: #ad499a;
}

.dark-mode .request-form-row .req-input:hover {
  border-color: #ad499a;
}

.dark-mode .full-name-label {
  color: #ffffff;
}

.req-input:focus,
select:focus,
textarea:focus {
  border-color: #ad499a;
}
.dark-mode .request-form-row1 select:focus,
.dark-mode .request-form-row1 select:hover {
  background-color: transparent !important; /* Highlight the border on hover or focus */
}

/* Buttons styling */
.book-btn,
.clear-btn {
  padding: 10px 15px;
  font-size: 0.9rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

.book-btn {
  background: #ad499a;
  color: #fff;
}

.book-btn:hover {
  background: #883979;
}

.clear-btn {
  background: #e9ecef;
  color: #333;
}

.clear-btn:hover {
  background: #d6d8db;
}

/* Animation for modal */
@keyframes fadeIn {
  from {
    opacity: 1;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive styling */
@media (max-width: 576px) {
  .request-form-row {
    flex-direction: column;
    gap: 10px;
  }

  .req-modal-content {
    padding: 15px;
  }
}
.request-form-row1 textarea {
  display: flex !important; /* Apply flexbox layout */
  flex-direction: column !important; /* Align children (label and textarea) in a column */
  gap: 15px !important;
  width: 97% !important;
  padding: 10px;
  position: relative;
  color: #ad499a;
  font-size: 16px;
  margin-bottom: 20px;
}
textarea {
  height: 100px;
  resize: none;
}
.form-row1 label {
  display: block !important;
  font-size: 1.3rem !important;
  margin-bottom: 5px !important;
  color: #555 !important;
  text-align: left !important;
}
.req-modal-content button {
  font-size: 13px !important;
}
.dark-mode .request-form-row1 textarea {
  background-color: transparent !important;
  color: white;
}
.dark-mode .request-form-row1 .req-select {
  background-color: transparent !important;
  color: #b3b3b3;
}

.dark-mode .request-form-row1 .req-select:focus {
  color: #ad499a;
}
.dark-mode .request-form-row1 select option {
  background-color: transparent !important;
  color: black;
}
.dark-mode .requestForm-close-btn {
  color: #fff !important;
}

.dark-mode .req-modal-header h2 {
  color: #fff !important;
}

/* Container for the entire slider */
.announcement-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent black */
  pointer-events: none; /* Disable interaction */
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px); /* Blur the background */
  transition: opacity 0.5s ease-in-out; /* Fade-in transition */
  z-index: 999;
}

/* When the slider is visible, make the overlay visible */
.announcement-overlay.open {
  opacity: 1; /* Make the overlay fully visible */
  pointer-events: all; /* Enable interaction */
}

.announcement-slider {
  position: fixed;
  top: 80px;
  left: -320px;
  background-color: #fff;
  padding: 20px;
  width: 320px;
  height: 618px;
  overflow-y: auto;
  z-index: 1000; /* Higher than the overlay */
  animation-duration: 0.5s;
  pointer-events: auto; /* Allow interaction */
}

@keyframes slide-in {
  0% {
    left: -320px;
    visibility: visible;
  }
  100% {
    left: 0;
  }
}

@keyframes slide-out {
  0% {
    left: 0;
  }
  100% {
    left: -320px;
  }
}

.announcement-slider.slide-in {
  visibility: visible;
  animation: slide-in 0.5s ease-in-out forwards;
}

.announcement-slider.slide-out {
  animation: slide-out 0.5s ease-in-out forwards;
}

@media only screen and (min-width: 1201px) {
  .announcement-slider {
    height: 100%;
    max-height: 1014px;
  }
}

.dark-mode .announcement-slider {
  background: #1e0419;
}

/* Close button */
.announcement-close-btn {
  position: relative;
  left: 300px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.dark-mode .announcement-close-btn {
  color: white;
}

/* Individual announcement card */
.announcement-card {
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  /* border: 1px solid #1e0419; */
  box-shadow: 0px 0px 4px 0px #00000040;
  text-align: left;
}

.dark-mode .announcement-card {
  background: #2d1227;
}

/* Category section */
.announcement-category {
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-bottom: 5px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.032em;
  gap: 10px;
}

/* Small dot in the category */
.announcement-dot {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
  margin-right: 8px;
}

.announcement-category-name {
  font-weight: 600;
  font-family: poppins;
}

/* Title of the announcement */
.announcement-title {
  color: black;
  margin: 0;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.0288em;
  text-align: left;
}

.dark-mode .announcement-title {
  color: #ffffff;
}

/* Description of the announcement */
.announcement-description {
  font-size: 16px;
  margin-top: 8px;
  font-family: Open Sans;
}

.dark-mode .announcement-description {
  color: #ffffff;
}

.super-main-container {
  width: 835px;

  margin: 0px auto;
  border-radius: 16px;
  background-color: #f8f8f8;
  padding: 24px;
}
.dark-mode .super-main-container {
  background-color: #1e0419;
}
.dark-mode .super-data-table th {
  background-color: #1e0419;
}
.dark-mode .super-data-table tr:nth-child(odd) {
  background-color: #2d1227;
}
.dark-mode .super-data-table tr:nth-child(even) {
  background-color: #1e0419;
}
.dark-mode .super-full-export {
  color: #ff8c1a !important;
}
.dark-mode .super-selective-export {
  color: #ad499a !important;
}

.super-data-table {
  width: 100%;
  border-collapse: separate; /* Use 'separate' to allow spacing between rows */
  border-spacing: 0 20px; /* Adds a vertical gap of 20px between rows */
}

.super-data-table thead {
  margin-bottom: 20px; /* Adds a 40px gap below the heading row */
}

.super-data-table tbody tr {
  height: 46px; /* Sets the height of each row */
}

.super-data-table tbody {
  position: relative;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  color: #000000;
  margin-left: 0px;
}

.super-data-table th {
  text-align: left;
  font-weight: bold;
}

.super-data-table td {
  width: auto;
  padding: 8px 16px;
}

.super-data-table tr {
  border-radius: 8px;
}

.super-data-table tr:nth-child(odd) {
  background-color: #ffffff;
}

.super-data-table tr:nth-child(even) {
  background-color: #f8f8f8;
}

.super-full-export {
  color: #ff8c1a;
  cursor: pointer;
}

.super-selective-export {
  color: #883979;
  cursor: pointer;
}

.super-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9998;
}

.super-popup {
  width: 578px;
  height: 229px;
  border-radius: 12px;
  background-color: #ffffff;
  padding: 24px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.super-popup-title {
  font-size: 30px;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  margin-bottom: 16px;
  margin-top: 0px;
  align-items: center;
  justify-content: center;
}

.super-input-section {
  display: flex;
  flex-direction: column; /* Align children vertically */
  align-items: flex-start;
  gap: 15px;
}

.super-input-row {
  display: flex;
  align-items: center; /* Aligns input and button on the same level */
  width: 100%; /* Ensures full width */
  gap: 10px; /* Space between input and button */
}

.super-input-title {
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
}

.super-input {
  width: 357px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #b3b3b3;
  padding: 8px;
}

.super-send-button {
  width: 94px;
  height: 48px;
  background-color: #883979;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.super-export-popup-close-button {
  position: relative;
  top: -6px;
  right: -560px;
  background: transparent;
  border: none;
  font-size: 30px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
}

.super-export-popup-close-button:hover {
  color: #ff0000;
}

.super-input-dropdown {
  display: flex;
  flex-direction: column;
  position: relative;
}

.dropdownList-super {
  position: absolute;
  top: 40px;
  background-color: white;
  padding: 0px;
  width: 357px;
  height: auto;
  border-radius: 8px;
  border: 1px solid #883979;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column; /* Set direction to column for rows */
  row-gap: 10px; /* Add gap between rows */
}
.dropdownList-super li {
  font-size: 16px;
  display: flex;
  font-family: Poppins;
}

.dropdownList-super li:hover {
  background-color: #883979;
  color: #f8f8f8;
  font-size: 16px;
  display: flex;
  row-gap: 10px;
}
.dropdownList-super ul {
  margin: 0px;
}

.super-admin-subscription-container {
  width: 834px;
  height: 349px;
  background-color: #f8f8f8;
  border-radius: 16px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  position: absolute;
  top: 152px;
  left: 270px;
}
.dark-mode .super-admin-subscription-container {
  background-color: #1e0419;
}

.super-admin-subscription-sliding-section {
  display: flex;
  gap: 10px;
  width: 1242px;
  height: 247px;
  padding: 10px;
}

.super-admin-subscription-card {
  width: 398px;
  height: 247px;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.super-admin-subscription-card-pro {
  border: 1px solid #fcd9f5;
  background-color: #fcd9f5;
}

.super-admin-subscription-card-professional {
  border: 1px solid #883979;
  background-color: #fff;
}

.super-admin-subscription-card-basic {
  border: 1px solid #883979;
  background-color: #fff;
}

.super-admin-subscription-title {
  font-size: 16px;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  color: #883979;
  margin: 0;
}

.super-admin-subscription-amount {
  font-size: 24px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  color: #000;
  margin: 0;
}
.dark-mode .super-admin-subscription-amount {
  color: white;
}

.super-admin-subscription-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.super-admin-subscription-button {
  width: 158px;
  height: 30px;
  border-radius: 8px;
  background-color: #883979;
  color: #fff;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.super-admin-subscription-forward-button,
.super-admin-subscription-backward-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #883979;
  position: absolute;
  top: 295px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.super-admin-subscription-forward-button {
  left: 780px;
}

.super-admin-subscription-backward-button {
  left: 720px;
}
.super-admin-subscription-sliding-section {
  display: flex;
  width: 300%; /* Three cards */
  transition: transform 0.5s ease-in-out;
}

.super-admin-subscription-card {
  /* flex: 1 0 33%; Each card takes full width */
  box-sizing: border-box;
}
.dark-mode .super-admin-subscription-card {
  background-color: #2d1227;
  color: white;
}

.super-admin-subscription-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 32px;
  gap: 32px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.super-admin-subscription-card-free {
  width: 381px;
  height: 449px;
  border-radius: 12px;
  border: 1px solid #d6d6d6;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
  font-family: inherit;
  display: flex;
  flex-direction: column;
}

.super-admin-subscription-card-free .expiry-banner {
  background: #fdeaea;
  color: #b71c1c;
  padding: 14px 20px;
  font-family: Inter;
  font-weight: 500;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0%;
}

.super-admin-subscription-card-free .card-body {
  padding: 24px 20px 20px 20px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.super-admin-subscription-card-free .plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: Poppins;
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  margin-top: 10px;
  margin-right: 10px;
}

.super-admin-subscription-card-free .plan-name {
  color: #9c27b0;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}

.super-admin-subscription-card-free .plan-price {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
}

.super-admin-subscription-card-free .current-plan-btn {
  font-family: Poppins;
  font-weight: 500;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0%;
  width: 83;
  height: 19;
  top: 48px;
  left: 282px;
  border-radius: 2px;
  gap: 8px;
  border-width: 1px;
  padding-top: 2px;
  padding-right: 10px;
  padding-bottom: 2px;
  padding-left: 10px;
  border: 1px solid #0c8e13;
  background: #ecffed;
  color: #0c8e13;
}

.super-admin-subscription-card-free hr {
  margin: 18px 0;
  border: none;
  border-top: 1px solid #eee;
}

.super-admin-subscription-card-free ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.super-admin-subscription-card-free li {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  font-family: Open Sans;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
}

.super-admin-subscription-card-free .feature-check {
  margin-right: 10px;
  color: #43a047;
  font-size: 20px;
}

.super-admin-subscription-card-free .cta-btn {
  align-self: flex-end;
  width: 100%;
  background: #666666;
  color: #fff;
  padding: 6px 0;
  font-weight: 600;
  font-size: 18px;
  border: none;
  border-radius: 12px;
  margin-top: 0px;
  cursor: pointer;
  font-family: Poppins;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  height: 32px;
}

.cta-btn:hover {
  background: #3c96c9;
}

.view-more-line {
  background: #3c96c9;
  font-size: 12px;
  padding: 5px;
  border-radius: 20px;
  color: #fff;
  margin-bottom: -20px;
  margin-top: 10px;
}

.queue-main-container {
  width: 105%;
  /* height: 100%; */
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.queue-tabs-wrapper {
  width: 100%;
  display: flex;
  background-color: #f5f5f5;
}

.queue-tab-button {
  padding: 15px 30px;
  background-color: transparent;
  color: #333;
  justify-content: center;
  align-items: center;
  display: flex;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.dark-mode .queue-tab-button {
  color: white;
}

.queue-tab-active {
  background-color: #883979;
  color: white !important;
  border-radius: 8px 8px 0 0;
}

.queue-content-area {
  padding: 20px;
}

.queue-filters-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
}

.queue-search-wrapper {
  flex: 1 1;
  max-width: 400px;
  position: relative;
}

.queue-search-field {
  width: 100%;
  padding-left: 35px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23999\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"M21 21l-4.35-4.35\"/></svg>");
  background-repeat: no-repeat;
  background-position: 10px center;
}

.queue-sort-wrapper {
  width: 150px;
  margin-left: 15px;
}

.queue-sort-select {
  width: 100%;
  padding: 10px;
  padding-right: 30px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23999\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6 6-6\"/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.dark-mode .queue-main-container {
  background-color: #1e1e1e;
}

.dark-mode .queue-tabs-wrapper {
  background-color: #2d2d2d;
}

.dark-mode .queue-search-field,
.dark-mode .queue-sort-select {
  background-color: #333;
  color: white;
  border-color: #444;
}

.queue-pagination-container{
  justify-content: center;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 15px;
  letter-spacing: 0.5px;
  font-family: poppins;
  align-items: center;
  gap: 10px;
}

.queue-pagination-arrow-button{
  width: 32px;
height: 32px;
background-color: #883979;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

.queue-pagination-arrow-button:hover{
  background-color: #6b2d5d;
}
.queue-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 300px;
    text-align: center;
}

.queue-loading-container p {
    margin-top: 10px;
    color: #666;
    font-size: 14px;
}

.queue-data-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    background-color: #fff;
    /* padding: 20px; */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.queue-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    margin-top: 10px;
}

.queue-data-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.queue-data-table td {
    padding: 14px 16px;
    font-size: 12px;
    background: #fafafa;
    /* border-bottom: 1px solid #eee; */
    /* border-radius: 8px; */
    font-weight: 500;
    color: #333;
}

.queue-data-row {
    background-color: #fff;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.queue-data-row:hover {
    background-color: #f7f7f7;
}

.queue-data-table td:nth-child(1),
.queue-data-table th:nth-child(1) {
    width: 8%;
}

.queue-data-table td:nth-child(2),
.queue-data-table th:nth-child(2) {
    width: 22%;
    white-space: normal;
    word-break: break-word;
}

.queue-data-table td:nth-child(3),
.queue-data-table th:nth-child(3) {
    width: 20%;
    white-space: normal;
    word-break: break-word;
}

.queue-data-table td:nth-child(4),
.queue-data-table th:nth-child(4) {
    width: 15%;
}

.queue-data-table td:nth-child(5),
.queue-data-table th:nth-child(5) {
    width: 12%;
}

.queue-data-table td:nth-child(6),
.queue-data-table th:nth-child(6) {
    width: 18%;
    text-align: left;
}

.queue-progress-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 20px;
    height: 12px;
    position: relative;
    overflow: hidden;
}

.queue-progress-bar {
    height: 100%;
    background-color: #883979;
    border-radius: 20px;
    transition: width 0.3s ease;
}

.queue-actions-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.queue-stop-button,
.queue-delete-button {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    width: 44;
height: 24;
border-radius: 4px;
border-width: 1px;

}

.queue-stop-button {
    background-color: #2196F3;
    color: #fff;
}

.queue-delete-button {
    border: 1px solid #f44336;
    color: #f44336;
}

.queue-delete-button:hover{
    background-color: #f44336;
    color: #fff;
}

.queue-stop-button:hover {
    background-color: #0b7dda;
}

.queue-delete-button:hover {
    background-color: #d32f2f;
}

.queue-tabs {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.queue-tab {
    padding: 8px 20px;
    border-radius: 24px;
    font-weight: 500;
    font-size: 14px;
    background: #f0f0f0;
    cursor: pointer;
    transition: 0.3s;
    color: #333;
}

.queue-tab.active {
    background: #883979;
    color: #fff;
}
.queue-search-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.queue-search-input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    width: 220px;
}

.queue-dropdown {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    -webkit-appearance: none;
            appearance: none;
    cursor: pointer;
}

.password-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  background-color: #f0f0f0;
}

.password-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  width: 618px;
  height: 289px;
  gap: 0px;
  border-radius: 16px;
}

.password-title {
  font-family: Poppins;
  font-size: 22px;
  font-weight: 500;
  line-height: 33px;
}

.password-form {
  display: flex;
  flex-direction: column;
  width: 498px;
  padding: 0;
  gap: 10px;
}

.password-email-input {
  font-size: 16px;
  height: 46px;
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  padding: 0px 0px 0px 5px;
}
.password-name-input {
  font-size: 16px;
  height: 46px;
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  padding: 0px 0px 0px 5px;
}

.password-submit-button {
  width: 100%;
  height: 46px;
  font-size: 1rem;
  background: #666666;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.password-submit-button.disabled {
  background: #666666;
  cursor: not-allowed;
}

.password-submit-button.active {
  background: #883979;
  cursor: pointer;
}

.password-error {
  color: #eb1f2e;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
}


.password-consent {
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #333;
  flex-direction: row;
}

.Checkbox-consent input{
  width: 36px;
  height: 26px;
  accent-color: #007bff; /* Optional: sets the checkbox color */
  cursor: pointer;

}

.newpassword-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  background-color: #f0f0f0;
}

.newpassword-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  width: 618px;
  height: 359px;
  gap: 0px;
  border-radius: 16px;
  box-shadow: 0px 0px 6px 0px #00000040;
}

.newpassword-title {
  font-family: Poppins;
  font-size: 22px;
  font-weight: 500;
  line-height: 33px;
  text-align: left;
}

.newpassword-form {
  display: flex;
  flex-direction: column;
  width: 498px;
  gap: 24px;
}

.newpassword-email-input {
  font-size: 16px;
  height: 46px;
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  padding: 0px 0px 0px 5px;
}

.newpassword-submit-button {
  width: 100%;
  height: 46px;
  font-size: 1rem;
  background: #883979;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* .newpassword-submit-button.disabled {
  background: #666666;
  cursor: not-allowed;
}

.newpassword-submit-button.active {
  background: #883979;
  cursor: pointer;
} */

.landing-hero {
  position: relative;
  text-align: center;
  overflow: hidden;
  height: 440px;
}

.meshes {
  width: 100%;
  display: flex;
  justify-content: space-between;

  gap: clamp(80px, 10vw, 645px);

  position: relative;
}

.mesh-gradient-1,
.mesh-gradient-2 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
}

.mesh-gradient-1 {
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(136, 57, 121, 0.3), transparent);
  top: 5px;
  left: calc(50% - 440px);
  z-index: -1;
}

.mesh-gradient-2 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(218, 112, 214, 0.3), transparent);
  top: 180px;
  left: calc(50% + 350px);
  z-index: -1;
  transform: translateX(-50%);
}

@media (min-width: 1201px) {
  .landing-contact-v2-input,
  .landing-contact-v2-textarea {
    /* width: 100%; */
    background-color: white !important;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid white;
    box-sizing: border-box;
    padding: 10px 40px 9px 12px;
    border-radius: 8px;
    font-family: Poppins;
    transition: border 0.3s ease, color 0.3s ease;
    margin: 0px !important;
  }
  .landing-contact-v2-title {
    font-family: Poppins;

    font-weight: 500;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    order: 0;

    font-size: 24px;
  }

  .landing-contact-v2-label {
    display: block;
    font-family: Poppins;

    font-weight: 500;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin-bottom: 16px;
    font-size: 16px;
  }

  .landing-start {
    margin-top: 40px;
  }
  .features-latency-v2 {
    width: 560px;
  }

  /* Scalability Section */
  .features-scalability-v2 {
    width: 560px;
  }
  .features-speed-v2 {
    background-color: #333333;
    grid-column: span 2;
    width: 560px;
  }
  .landing-contact-v2-input,
  .landing-contact-v2-textarea {
    width: 563px !important;
  }

  .features-scalability-heading-v2 {
    font-family: Poppins;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin-top: 10px;
  }

  .features-scalability-text-v2 {
    font-family: Open Sans;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
  .features-latency-heading-v2 {
    font-family: Poppins;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin-top: 10px;
  }

  .features-latency-text-v2 {
    font-family: Open Sans;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
  .features-speed-heading-v2 {
    margin-top: 10px;
    font-family: Poppins;
    font-size: 32px;
    font-weight: 600;
    line-height: 48px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
  .about-v2-divider {
    display: flex;
  }

  .features-speed-text-v2 {
    font-family: Open Sans;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
  .features-container-v2 {
    width: 1137px;
    max-width: 1200px;
    margin: 50px auto;
    text-align: center;
  }

  /* Features Grid */
  .features-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    gap: 20px;
    display: flex;
  }

  .features-box-v2 {
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    color: white;
    margin-left: 24px;
  }

  .mesh-gradient-1 {
    left: calc(50% - 380px); /* Adjust gap dynamically for smaller screens */
  }

  .mesh-gradient-2 {
    top: 150px;
    left: calc(50% + 250px); /* Adjust gap dynamically for smaller screens */
  }

  /* About Section */
  .about-v2 {
    margin: 0px 34px 0px 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4rem;
    padding: 2rem;
    background: #f8f8f8;
    border-radius: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .about-content-v2 h2 {
    font-family: Poppins;
    font-size: 28px;
    font-weight: 600;
    line-height: 42px;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin-bottom: 1rem;
  }

  .about-content-v2 p {
    color: #555;
    margin-bottom: 1.5rem;
    font-family: Open Sans;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .pricing-v2 p {
    font-family: Open Sans;
    font-size: 18px;
    font-weight: 400;
    line-height: 24.51px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #555;
    margin-bottom: 2rem;
  }

  .pricing-cards-v2-deck {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
  }

  .pricing-card-v2 {
    padding: 24px 54px 24px 54px;
    border-radius: 16px;
    border: 1px solid #808080;
    text-align: center;
    width: 252px;
    max-width: 300px;
    cursor: pointer;
  }

  .pricing-card-v2 .pricing-card-v2-category {
    font-family: Poppins;
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin: 0px;
  }

  .pricing-card-v2 .pricing-card-v2-category-price {
    font-family: Poppins;
    font-size: 48px;
    font-weight: 500;
    line-height: 72px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin: 0px;
  }

  .pricing-card-v2 ul {
    list-style-type: none;
    font-family: Open Sans;
    font-size: 18px;
    font-weight: 400;
    line-height: 24.51px;
    letter-spacing: 0.02em;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;

    margin: 0 0 32px -40px;
    color: #555;
    font-size: 18px;
  }

  .pricing-card-v2 ul li {
    font-family: Open Sans;
    font-size: 18px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 0.02em;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #000000;
  }

  .card-btn-v2 {
    padding: 0.8rem 1.5rem;
    background: #883979;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  /* Left Form Section */
  .landing-contact-v2-form-section {
    flex: 1 1;
    padding: 32px 0px 32px 32px;
  }
  .landing-contact-v2-address {
    background-color: white;
    padding: 32px 32px 32px 32px;
    gap: 0px;
    border-radius: 16px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 417px;
    margin-top: 35px;
  }

  .getaquote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 446px;
    height: 63px;
    padding: 8px 14px 8px 14px;
    gap: 16px;
    border-radius: 100px;
    box-shadow: 0px 0px 4px 0px #00000040;
  }

  .planquestion {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: 0.02em;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .quotebtn {
    width: 202px;
    height: 47px;
    padding: 10px 24px 10px 24px;
    gap: 8px;
    border-radius: 100px;
    border: none;
    font-family: Poppins;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: 0.02em;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    background-color: #2585e0;
    color: white;
    cursor: pointer;
  }
  .landing-contact-v2-phone-input {
    width: 449px;
  }
  .about-btn-v2 {
    padding: 0.8rem 1.5rem;
    border: 1px solid #883979;
    background-color: transparent;
    color: #883979;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.4s ease;
  }
  .landing-contact-v2-wrapper {
    display: flex;
  }
  .pricing-card-v2 .pricing-card-v2-category-price-month {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 21.79px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #808080;
    margin-top: -10px;
  }
}

@media (max-width: 740px) {
  .mesh-gradient-1,
  .mesh-gradient-2 {
    display: none;
  }
  .about-pricing-v2 {
    font-family: Arial, sans-serif;
  }
}

@media (min-width: 741px) and (max-width: 1200px) {
  .landing-contact-v2-input,
  .landing-contact-v2-textarea {
    /* width: 100%; */
    background-color: white;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid white;
    box-sizing: border-box;
    padding: 10px 40px 9px 12px;
    border-radius: 8px;
    font-family: Poppins;
    transition: border 0.3s ease, color 0.3s ease;
    margin: 0px !important;
  }
  .landing-contact-v2-title {
    font-family: Poppins;

    font-weight: 500;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    order: 0;

    font-size: 20px;
  }

  .landing-contact-v2-label {
    display: block;
    font-family: Poppins;

    font-weight: 500;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin-bottom: 16px;
    font-size: 14px;
  }
  .hero-p {
    margin-left: 100px;
    margin-right: 100px;
  }
  .mesh-gradient-1 {
    left: calc(50% - 250px); /* Adjust gap dynamically for smaller screens */
  }

  .mesh-gradient-2 {
    top: 150px;
    left: calc(50% + 240px); /* Adjust gap dynamically for smaller screens */
  }

  .features-row-v2 {
    margin-right: 24px;
  }
  .features-latency-heading-v2 {
    font-family: Poppins;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #e6e6e6;
    margin-left: 24px;
  }
  .features-scalability-heading-v2 {
    font-family: Poppins;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #1a1a1a;
    margin-left: 24px;
  }
  .about-image-v2 img {
    width: 280px;
    height: 322px;
    top: 24px;
    left: 352px;
    gap: 0px;
    border-radius: 16px;
  }
  .features-latency-text-v2 {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #e6e6e6;
    margin-left: 24px;
    margin-right: 24px;
  }
  .about-v2 {
    margin: 0px 24px 0px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4rem;
    padding: 2rem;
    background: #f8f8f8;
    border-radius: 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .features-container-v2 {
    max-width: 741px;
    margin: 50px auto;
    text-align: center;
  }
  .features-speed-heading-v2 {
    margin-left: 24px;
    font-family: Poppins;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
  .features-scalability-text-v2 {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #1a1a1a;
    margin-left: 24px;
    margin-right: 24px;
  }

  /* Title */
  .features-title-v2 {
    margin-left: 250px;
    font-family: Poppins;
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .landing-hero {
    position: relative;
    text-align: center;
    overflow: hidden;
    /* width: 741px; */
    height: 550px;
  }
  .features-speed-v2 {
    background-color: #333333;
    grid-column: span 2;
    width: 338px;
    height: 404px;
    top: 76px;
    left: 24px;
    gap: 0px;
    border-radius: 16px;
    margin-left: 24px;
  }

  .features-latency-v2 {
    width: 339px;
    height: 194px;
    top: 76px;
    left: 378px;
    gap: 0px;
    border-radius: 16px;
  }
  .features-scalability-v2 {
    width: 339px;
    height: 194px;
    top: 286px;
    left: 378px;
    gap: 0px;
    border-radius: 16px 0px 0px 0px;
    border: 1px 0px 0px 0px;
    opacity: 1;
  }
  .features-v2 {
    gap: 16px;
  }

  .features-speed-text-v2 {
    margin-left: 24px;
    margin-right: 24px;
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #e6e6e6;
  }

  .about-content-v2 h2 {
    font-family: Poppins;
    font-size: 28px;
    font-weight: 500;
    line-height: 42px;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin-bottom: 1rem;
  }
  .about-content-v2 p {
    color: #555;
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin-bottom: 16px;
  }
  .pricing-card-v2 {
    width: 220px;
    height: 286px;
    top: 160px;
    left: 24px;

    padding: 16px 18px 16px 18px;
    border-radius: 16px;
    border: 1px solid #808080;
    text-align: center;
    width: 252px;
    max-width: 300px;
    cursor: pointer;
  }

  .pricing-card-v2 ul {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.02em;
    margin: 0 0 32px -40px;
    color: #000000;
    list-style-type: none;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin: 0 0 32px -40px;
    color: #555;
    font-size: 18px;
  }
  .pricing-card-v2 ul li {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.02em;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #000000;
  }
  .pricing-v2-heading {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #666666;
  }
  .pricing-v2 p {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
  .pricing-card-v2 .pricing-card-v2-category {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin: 0px;
  }
  .pricing-card-v2 .pricing-card-v2-category-price-month {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 21.79px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #808080;
    margin-top: -10px;
  }

  .pricing-card-v2-category-price {
    font-family: Poppins;
    font-size: 24px;
    margin-bottom: 3px;
    margin-top: 10px;
    font-weight: 500;
    line-height: 36px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
  .card-btn-v2 {
    font-family: Poppins;
    font-size: 10px;
    font-weight: 300;
    line-height: 18px;
    letter-spacing: 0.02em;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    background: #883979;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 183px;
    height: 34px;
    top: 236px;
    left: 34px;
    padding: 8px;
    gap: 8px;
    border-radius: 8px;
  }
  .pricing-cards-v2-deck {
    margin-left: 24px;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 32px;
    margin-right: 24px;
  }

  .getaquote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 356px;
    height: 49px;
    padding: 8px 14px 8px 14px;
    gap: 10px;
    border-radius: 100px;
    box-shadow: 0px 0px 4px 0px #00000040;
  }
  .about-v2-divider {
    display: flex;
  }
  .landing-contact-v2-input,
  .landing-contact-v2-textarea {
    width: 314px !important;
  }
  .landing-contact-v2-phone-input {
    width: 204px;
  }
  .planquestion {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0.02em;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .quotebtn {
    width: 168px;
    height: 37px;
    padding: 5px 24px 14px 24px;
    gap: 8px;
    border-radius: 100px;
    border: none;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: 0.02em;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    background-color: #2585e0;
    color: white;
    cursor: pointer;
  }
  .landing-contact-v2-form-section {
    max-width: 314px;
    padding: 20px 0px 20px 20px;
  }
  .landing-contact-v2-details-section {
    margin-left: 29px;
  }
  .landing-contact-v2-address {
    background-color: white;
    padding: 16px 16px 16px 16px;
    gap: 0px;
    border-radius: 16px;
    height: 434px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 301px;
    margin-top: 35px;
    margin-right: 29px;
  }
  .about-btn-v2 {
    padding: 0.8rem 1.5rem;
    border: 1px solid #883979;
    background-color: transparent;
    color: #883979;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.4s ease;
  }
  .landing-contact-v2-wrapper {
    display: flex;
  }
  .about-pricing-v2 {
    font-family: Arial, sans-serif;
    padding: 2rem;
  }
}

.landing-start {
  gap: 8px;
  border-radius: 8px;
  opacity: 1;
  background-color: #883979;
  padding: 8px 24px 8px 24px;
  border: none;
}

.landing-start:hover {
  background: linear-gradient(0deg, #883979, #883979),
    linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
}

.landing-page-p-btn {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: white;
  padding: 0px;
  margin: 0px;
}

.hero-h1 {
  font-family: Poppins;
  font-size: 48px;
  font-weight: 500;
  line-height: 72px;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.hero-p {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.51px;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #666666;
}

.features-h1-v2 {
  font-family: Poppins;
  font-size: 28px;
  font-weight: 600;
  line-height: 42px;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

/* Title */
.features-title-v2 {
  font-size: 28px;
  margin-bottom: 32px;
}

/* Features Grid */
.features-v2 {
  /* display: grid;
      grid-template-columns: 1fr 1fr; */
  /* gap: 20px; */
  display: flex;
}

.features-box-v2 {
  /* border-radius: 10px; */
  /* padding: 20px; */
  text-align: left;
  color: white;
  /* margin-left: 24px; */
}

.features-row-v2 {
  gap: 20px;
  display: flex;
  flex-direction: column;
}

/* Speed Section */
.features-speed-v2 {
  background-color: #333333;
  grid-column: span 2;
  /* width: 560px; */
}

/* Latency Section */
.features-latency-v2 {
  background-color: #89377d;
  /* width: 560px; */
}

/* Scalability Section */
.features-scalability-v2 {
  background-color: #ffffff;
  border: 1px solid #ddd;
  color: #333;
  /* width: 560px; */
}

/* .about-pricing-v2 {
  font-family: Arial, sans-serif;
  padding: 2rem;
} */

.about-v2-divider {
  max-width: 1140px;
  /* display: flex; */
  justify-content: space-between;
  align-items: center;
}

.about-content-v2 {
  gap: 0px;
  margin-right: 25px;
}

.about-btn-v2:hover {
  background-color: #883979;
  color: white;
}

.about-image-v2 img {
  /* max-width: 100%; */
  border-radius: 16px;
}

/* Pricing Section */
.pricing-v2 {
  text-align: center;
}

.pricing-v2 h2 {
  font-family: Poppins;
  font-size: 28px;
  font-weight: 600;
  line-height: 42px;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-bottom: 1rem;
}

.pricing-card-v2:hover {
  background-color: #883979;
  color: white;
  transition: 0.4s;
}

.pricing-card-v2:hover .card-btn-v2 {
  background-color: white; /* Change background to white */
  color: #883979; /* Change text to purple */
  transition: 0.4s;
}

.pricing-card-v2:hover ul li {
  color: white;
}
.pricing-card-v2:hover .pricing-card-v2-category-price-month {
  color: white;
}

.getaquote {
  display: flex;
  align-items: center;
}

/* contact us */
.landing-contact-v2-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
  box-sizing: border-box;
  margin-bottom: 55px;
}

.landing-contact-v2-wrapper {
  /* display: flex; */
  justify-content: center;
  align-items: center;
  max-width: 1137px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.landing-contact-v2-input-group {
  margin-bottom: 32px;
}

.landing-contact-v2-input:hover,
.landing-contact-v2-textarea:hover,
.landing-contact-v2-phone-input:hover,
.landing-contact-dropdown-list:hover {
  border-color: #883979;
}

.landing-contact-v2-input:focus,
.landing-contact-v2-textarea:focus,
.landing-contact-v2-phone-input:focus {
  outline: none;
  border-color: #883979;
  color: #883979;
}

.landing-contact-v2-input:valid,
.landing-contact-v2-textarea:valid,
.landing-contact-v2-phone-input:valid {
  /* border-color: #883979; */
  color: #883979;
}

.landing-contact-v2-textarea {
  resize: none;
}

.landing-contact-v2-submit-btn {
  background-color: #3b82f6;
  color: white;
  border: none;
  padding: 8px 24px 8px 24px;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: poppins;
  transition: background-color 0.4s ease;
}

.landing-contact-v2-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.landing-contact-v2-submit-btn:hover {
  background-color: #2563eb;
}

.landing-contact-v2-details-section {
  /* padding: 32px; */
  background-color: #f7f7f7;
  box-sizing: border-box;
}

.landing-contact-v2-image-placeholder {
  width: 100%;
  height: 221px;
  background-color: #ddd;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.landing-contact-v2-image-placeholder iframe {
  width: 100%;
  height: 100%;
  border: none;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.landing-contact-v2-info-item {
  display: flex;
  align-items: center;
}

.landing-contact-v2-info-icon {
  font-size: 1.5rem;
  margin-right: 1rem;
  color: #3b82f6;
  width: 44px;
  height: 44px;
  background-color: #f7f7f7;
  border-radius: 100%;
  display: flex;
  justify-content: center;
}

.landing-contact-icon {
  width: 18px;
}

.landing-contact-v2-info-title {
  color: #9333ea;
  margin: 0;
  padding-bottom: 2px;
  font-family: Poppins;

  font-weight: 500;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.landing-contact-v2-info-text {
  font-family: Poppins;

  font-weight: 400;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #333;
  margin: 0;
}

.landing-contact-v2-phone-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.landing-contact-v2-phone-code {
  cursor: pointer;
  color: #333;
  font-size: 14px;
  display: flex;
  align-items: center;
  background-color: #f1f1f1;
  padding: 8px;
  border-radius: 6px 0 0 6px;
  align-items: center;
}
.dark-mode .landing-contact-v2-phone-code {
  background-color: #2d1227;
  border: 1px solid white;
  color: #f0f0f0;
  height: 30px;
  border-right: none;
}

.landing-contact-arrow-icon {
  margin-left: 1px;
  transition: transform 0.3s ease;
}

.landing-contact-arrow-icon.open {
  transform: rotate(180deg);
}

.landing-contact-dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 150px;
  overflow-y: auto;
  padding: 0;
  margin: 4px 0 0 0;
  list-style: none;
  font-family: poppins;
  border: 1px solid white;
  transition: border 0.3s ease, color 0.3s ease;
}

.landing-contact-dropdown-item {
  padding: 10px 12px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
}

.landing-contact-dropdown-item:hover {
  background-color: #f0f0f0;
}

.landing-contact-v2-phone-input {
  background-color: white !important;
  border: 1px solid white;
  /* width: 449px; */
  outline: none;
  font-size: 14px;
  color: #333;
  flex: 1 1;
  padding: 10px 40px 9px 12px;
  border-radius: 0 6px 6px 0;
  font-family: poppins;
  transition: border 0.3s ease, color 0.3s ease;
}

.landing-contact-v2-phone-input::placeholder {
  color: #aaa;
}

.getaqoutesection {
  display: flex;
  justify-content: center;
  margin-bottom: 85px;
}

@media (min-width: 321px) and (max-width: 740px) {
  .hero-h1 {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin-left: 20px;
    margin-top: -5px;
  }
  .landing-page {
    min-width: 341px;
  }
  .hero-p {
    font-family: Open Sans;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;

    margin-left: 60px;
    margin-right: 40px;
  }
  .landing-start {
    width: 97px;
    height: 27px;
    padding: 6px 0px 6px 0px;
    gap: 8px;
    border-radius: 8px;
    margin-top: 10px;
    margin-left: 10px;
  }
  .landing-page-p-btn {
    font-family: Poppins;
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .features-row-v2 {
    max-width: 341px;
    display: flex;
    flex-direction: row;
    margin-left: 26px;
    /* Align Latency and Scalability side by side */
    gap: 16px;
    margin-right: 16px;
  }
  .landing-contact-v2-input,
  .landing-contact-v2-textarea {
    width: 280px !important;
  }
  /* .landing-contact-v2-phone-input {
    width: 204px;
  } */
  .features-latency-heading-v2 {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    width: 49px;
    height: 18px;
    top: 285px;
    left: 32px;
    margin-left: 16px;
  }
  .features-scalability-heading-v2 {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin-left: 16px;
  }
  .landing-hero img {
    display: none;
  }
  .about-image-v2 img {
    width: 280px;
    height: 322px;
    top: 24px;
    left: 352px;
    gap: 0px;
    border-radius: 16px;
    display: none;
  }
  .features-latency-text-v2 {
    width: 104px;
    height: 116px;
    top: 311px;
    left: 32px;
    margin-left: 16px;
    font-family: Open Sans;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
  .about-v2 {
    background-color: #f8f8f8;
    margin-left: 16px;
    margin-top: 36px;
    /* width: 288px; */
    height: 221px;
    top: 16px;
    left: 16px;
    padding: 16px;
    gap: 0px;
    border-radius: 24px;
    margin-right: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .features-container-v2 {
    max-width: 341px;
    margin: auto;
    text-align: center;
  }
  .features-speed-heading-v2 {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin-left: 16px;
  }
  .features-scalability-text-v2 {
    font-family: Open Sans;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    width: 104px;
    height: 116px;
    top: 311px;
    left: 184px;

    color: #1a1a1a;
    margin-left: 16px;
    margin-right: 24px;
  }

  /* Title */
  .features-title-v2 {
    margin-left: 120px;
    font-family: Poppins;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .landing-hero {
    position: relative;
    text-align: center;
    overflow: hidden;
    /* width: 341px; */
    margin-top: 40px;
    height: 200px;
  }
  .features-speed-v2 {
    margin-left: 25px;
    align-self: stretch; /* Ensures Speed takes full width */
    text-align: center;
    background-color: #333333;
    width: 288px;
    height: 203px;
    top: 50px;
    left: 16px;
    gap: 0px;
    border-radius: 16px;
  }

  .features-latency-v2 {
    width: 136px;
    height: 174px;
    top: 269px;
    left: 168px;
    gap: 0px;
    border-radius: 16px;
  }
  .features-scalability-v2 {
    width: 136px;
    height: 174px;
    top: 269px;
    left: 168px;
    gap: 0px;
    border-radius: 16px;
  }
  .features-v2 {
    gap: 16px;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
  }

  .features-speed-text-v2 {
    font-family: Open Sans;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    width: 256px;
    height: 144px;
    top: 92px;
    left: 32px;
    margin-left: 16px;
  }

  .about-content-v2 h2 {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
  .about-content-v2 p {
    color: #555;
    font-family: Open Sans;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;

    top: 42px;
    left: 16px;
  }
  .pricing-card-v2 {
    width: 184px;
    height: 255px;
    top: 656px;
    left: 68px;
    gap: 0px;
    border-radius: 16px;
    border: 1px;
    margin-bottom: 16px;
    border: 1px solid #808080;
    text-align: center;

    cursor: pointer;
  }

  .pricing-card-v2 ul {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.02em;
    margin: 0 0 32px -40px;
    color: #000000;
    list-style-type: none;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin: 0 0 32px -40px;
    color: #555;
    font-size: 18px;
  }
  .pricing-card-v2 ul li {
    font-family: Open Sans;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.02em;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #000000;
    margin-bottom: 3px;
  }
  .pricing-v2-heading {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #666666;
  }
  .pricing-v2 p {
    font-family: Open Sans;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;

    height: 48px;
    top: 42px;
    left: 16px;

    margin-bottom: 24px;
  }
  .pricing-v2-heading {
    /* margin-left: 20px; */
  }

  .pricing-card-v2 .pricing-card-v2-category {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin: 0px;
    margin-top: 16px;
  }

  .pricing-card-v2-category-price {
    font-family: Poppins;
    font-size: 20px;
    margin-bottom: 3px;
    margin-top: 0px;
    font-weight: 500;
    line-height: 36px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
  .card-btn-v2 {
    font-family: Poppins;
    font-size: 8px;
    font-weight: 400;
    line-height: 12px;
    letter-spacing: 0.02em;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;

    background: #883979;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;

    height: 28px;
    top: 236px;
    left: 34px;
    padding: 8px;
    gap: 8px;
    border-radius: 8px;
    margin-top: -70px;
    margin-bottom: 40px;
  }

  .pricing-card-v2 ul {
    margin-top: -40px;
    margin-bottom: 3px;
  }
  .pricing-cards-v2-deck {
    margin-left: 68px;
    /* margin-top: -40px; */
    justify-content: center;
    gap: 15px;
    margin-bottom: 32px;
    margin-right: 68px;
    display: inline-table;
  }

  .getaquote {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 216px;
    height: 102px;

    top: 943px;
    left: 52px;
    padding: 16px 24px 16px 24px;
    gap: 12px;
    border-radius: 16px;

    box-shadow: 0px 0px 4px 0px #00000040;
  }
  .planquestion {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0.02em;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .quotebtn {
    width: 168px;
    height: 37px;
    padding: 5px 24px 14px 24px;
    gap: 8px;
    border-radius: 100px;
    border: none;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: 0.02em;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    background-color: #2585e0;
    color: white;
    cursor: pointer;
  }
  .landing-contact-v2-wrapper {
    border-radius: 24px;
    display: flex;
    flex-direction: column; /* Ensures the children are stacked vertically */
  }
  .landing-contact-v2-form-section {
    order: 0;
    max-width: 314px;
    padding: 20px 20px 20px 20px;
    height: 622px;
    top: 16px;
    left: 16px;
    gap: 0px;
    border-radius: 24px 24px 24px 24px;
  }
  .landing-contact-v2-details-section {
    margin-left: 29px;
    order: -1;
    border-radius: 24px;
  }
  .landing-contact-v2-address {
    background-color: white;
    padding: 16px 16px 16px 16px;
    gap: 0px;
    border-radius: 16px;
    height: 434px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 256px;
    margin-top: 35px;
    margin-right: 29px;
  }

  .features-latency-v2,
  .features-scalability-v2 {
    text-align: left;
  }
  .features-scalability-v2 {
    border-color: 1px solid #e6e6e6;
  }
  .about-btn-v2 {
    width: 125px;
    height: 27px;
    border: 1px solid #883979;
    background-color: transparent;
    color: #883979;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.4s ease;
    margin-top: -10px;
    font-family: Poppins;
    font-size: 10px;
    font-weight: 500;
    line-height: 15px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }
  .pricing-card-v2-category-price-month {
    margin-right: 40px;
  }
  .about-pricing-v2 {
    font-family: Arial, sans-serif;
    padding: 16px;
  }
  .landing-contact-v2-submit-btn {
    width: Hug (85px) px;
    height: Hug (27px) px;
    top: 879px;
    left: 16px;
    padding: 6px 24px 6px 24px;
    gap: 8px;
    border-radius: 8px;
    opacity: 1;
  }
  .pricing-v2 h2 {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .landing-contact-v2-title {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 500;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    order: 0;
  }

  .landing-contact-v2-input-group {
    margin-bottom: 32px;
  }

  .landing-contact-v2-label {
    display: block;
    font-family: Poppins;
    font-size: 10px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin-bottom: 16px;
  }

  .landing-contact-v2-input,
  .landing-contact-v2-textarea {
    /* width: 100%; */
    background-color: white;
    margin: 0px !important;
    font-size: 10px;
    font-weight: 400;
    border: 1px solid white;
    box-sizing: border-box;
    padding: 10px 40px 9px 12px;
    border-radius: 8px;
    font-family: Poppins;
    transition: border 0.3s ease, color 0.3s ease;
  }
  .landing-contact-v2-phone-input {
    font-size: 10px;
    width: 170px;
  }
  .landing-contact-v2-phone-code {
    font-size: 10px;
  }
  .landing-contact-v2-info-title {
    font-size: 10px;
  }

  .landing-contact-v2-info-text {
    font-size: 12px;
  }
  .pricing-card-v2 .pricing-card-v2-category-price-month {
    font-family: Open Sans;
    font-size: 10px;
    font-weight: 400;
    line-height: 21.79px;
    text-align: center;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #808080;
    margin-top: -10px;
    margin-left: 40px;
  }
}


.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  background-color: #fff;
  margin: 0px;
  width: auto;
  height: 99.54px;
  /* border-bottom: 2px solid rgba(0, 0, 0, 0.025); */
  /* box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25); */
  transition: background-color 0.3s, color 0.3s;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 99.54px;
  z-index: 999;
}

.progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
}

.logo img {
  width: 216px;
  height: 60px;
  margin: 60px;
  margin-bottom: 18px;
  margin-top: 18px;
}

.nav-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 60px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 44px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-links li {
  display: inline;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.nav-links a {
  color: black;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #883979;
}

.hamburger {
  display: none;
  margin-right: 18px;
}

.signinbtn {
  background-color: #7b376e;
  color: white;
  border: none;
  border-radius: 60px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  height: 36px;
  display: flex;
  padding: 6px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.signinbtn:hover {
  background-color: #6a2d5a;
}
/* btn-link .nav-button {
width: 4px;
height: 180px;
top: 204px;
left: 1197px;
gap: 0px;
border-radius: 12px 0px 0px 12px;
opacity: 1;
} */

.mode-toggle {
  top: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: white;

  border: none;
  color: #120505;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.header .mode-toggle:hover {
  background-color: #7b376e;
}

.darkMoon {
  color: white !important;
}

.lightSun {
  color: black !important;
}

.lightSun:hover {
  color: white !important;
}

.mode-text {
  margin-left: 24px;
  font-family: "Poppins", sans-serif;
  line-height: 18px;
  margin-right: 8px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.mode-toggle img {
  height: 24px;
  width: 24px;
}
.mode-text {
  display: none;
}
.header.dark-mode .hamburger {
  color: #fff;
}

.header.dark-mode .nav-links a {
  color: #fff;
}

.header.dark-mode {
  background-color: #1e0419;
  color: #fff;
}

.header.dark-mode .nav-links a:hover {
  color: #ad499a;
}

.header.dark-mode .progress-bar {
  background-color: #8e5c8e;
}

.header.dark-mode .mode-toggle {
  background-color: #2d1227;
  color: white;
}

.header.dark-mode .mode-toggle:hover {
  background-color: #7b376e;
}

@media (max-width: 1200px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
    height: auto;
    padding: 10px;
    position: relative;
    z-index: 1;
  }
  .progress-bar-container {
    top: 70px;
  }

  .nav-links .clrhome {
    color: #883979;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
  }

  .logo {
    display: flex;
    align-items: center;

    /* margin-left: 12px;   */
  }

  .logo img {
    width: 196px;
    height: 54px;
    margin: 0%;
    margin-left: 12px;
    position: absolute;
    left: 24px;
    top: 18px;
    z-index: 1;
  }

  .hamburger {
    display: block;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin-right: 27px;
    cursor: pointer;
    z-index: 2;
    color: inherit;
  }

  .nav-container {
    flex-direction: column;
    margin: 10px 0;
    width: 100%;
  }

  .nav {
    flex-direction: column;
    gap: 10px;
    margin: 0;
    width: 100%;
    align-items: end;
    margin-bottom: 14px;
  }

  .nav-links {
    display: none;
    padding-top: 24px;
    flex-direction: column;
    gap: 24px;
    width: calc(100% - 48px);
    align-items: flex-start;
    margin: 0 24px;
  }

  .nav.open .nav-links {
    display: flex;
  }

  .signinbtn {
    width: 100%;
    padding: 8px 0;
    font-size: 16px;
    background: none;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    font-weight: 500;
  }

  .signinbtn:hover {
    background: none;
  }

  .mode-text {
    display: inline;
    margin-left: 90px;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    margin-right: 8px;
    font-weight: 600;
    font-size: 16px;
  }

  .mode-toggle img {
    height: 20px;
    background-color: #ebebeb;
    border-radius: 50%;
    border: none;
    width: 24px;
    height: 24px;
    padding: 3.55px 3.53px 3.5px 3.53px;
    gap: 0px;
    opacity: 1;
  }
}

@media (max-width: 740px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    height: auto;
    position: relative;
    z-index: 1;
  }

  .nav-links .clrhome {
    color: #883979;
    font-size: 12px;
    font-family: "Poppins", sans-serif;
  }

  .logo {
    display: flex;
    align-items: center;
    /* margin-left: 24px; */
  }

  .logo img {
    width: 120px;
    height: 40px;
    margin: 0%;
    position: absolute;
    left: 24px;
    /* top: 10px;  */
    z-index: 1;
  }

  .hamburger {
    display: block;
    font-size: 24px;
    margin-left: 300px;
    margin-right: 18px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
  }

  .nav-container {
    flex-direction: column;
    margin: 10px 0;
    width: 100%;
  }
  .nav {
    flex-direction: column;
    gap: 10px;
    margin: 0%;
  }

  .nav-links {
    display: none;
    /* padding-top: 24px; */
    flex-direction: column;
    gap: 0px;
    width: 100%;
    align-items: flex-start; 
    margin: 0;
  }

  .nav-container.open {
    left: 0;
  }

  .nav-links a {
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    margin-left: 15px;
    gap: 28px;
    width: 141px;
    height: 24px;
  }

  .signinbtn {
    width: 100%;
    display: contents;
    padding: 8px 0;
    font-size: 13px;
    background: none;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    color: inherit;
    font-weight: 500;
    margin-left: 10px;
  }

  .mode-toggle {
    display: flex;
    align-items: center;
    background-color: transparent;
    cursor: pointer;
    margin-left: 12px;
  }

  .mode-toggle img {
    height: 18px;
  }

  .mode-toggle img {
    height: 20px;
    background-color: #ebebeb;
    border-radius: 50%;
    border: none;
    width: 18px;
    height: 18px;
    padding: 3.55px 3.53px 3.5px 3.53px;
    gap: 0px;
    opacity: 1;
  }
  .mode-text {
    display: inline;
    margin-left: 68px; /* margin*/
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    margin-right: 8px;
    font-weight: 600;
    font-size: 12px;
  }
}

@media (min-width: 1201px) {
  .mode-toggle {
    background-color: #f3f3f3;
  }
}

.footer {
  background-color: #ffffff;
  padding: 49px 60px 20px 60px;
  color: #333;
}

.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.5fr;
  grid-gap: 75px;
  gap: 75px;
  max-width: 100%;
  margin: 0 auto;
}

.footer-section {
  min-width: 172px;
  text-align: left;
}

.company-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer .footer-container .company-info .footer-logo {
  /* max-width: 180px; */
  /* padding-top: 15px; */
}

.company-info p {
  /* font-size: 16px; */
  /* font-weight: 400;
  line-height: 26px; */
}

.company-info h2 {
  color: #7b376e;
  font-size: 24px;
}

.footer-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #7b376e;
  font-family: "Poppins", sans-serif;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

.footer-section ul li {
  margin-bottom: 10px;
}

.footer-section ul li a {
  text-decoration: none;
  color: #333;
}

.social-icons {
  display: flex;
  gap: 10px;
}

.social-icons a img {
  max-width: 24px;
  /* height: auto; */
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
  width: 100%;
}

address {
  font-style: normal;
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
}

.dark-mode .footer {
  background-color: #1e0419;
}

.dark-mode .footer-section h3 {
  color: #ad499a;
}

.dark-mode .company-info p {
  color: #e6e6e6;
}

.dark-mode .social-icons a img {
  fill: green;
}

.dark-mode .footer-section ul li a {
  color: #e6e6e6;
}

.dark-mode address {
  color: #e6e6e6;
}

.dark-mode .footer-bottom {
  color: #e6e6e6;
}

.dark-mode .footer-section ul.dropdown-content {
  background-color: #1e0419;
  color: #e6e6e6;
}
.dark-mode .footer-section.open address {
  background-color: #1e0419;
  color: #e6e6e6;
}

.footer-p{
font-family: Open Sans;
}

.dark-mode .footer-p{
  color: white  ;
}

@media (min-width: 320px) and (max-width: 740px) {
.footer-p{
  font-size: 10px;
}

  .footer-container {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .footer {
    padding: 24px 24px 18px 24px;
  }

  .footer-section {
    margin: 0 24px;
    position: relative;
    width: calc(100% - 48px);
    width: 100%;
    text-align: left;
    /* margin-bottom: 20px; */
    border-top: 1px solid #ffffff;
    /* padding-top: 20px; */
  }

  .footer-section h3 {
    font-size: 14px;
    margin: 0;
    padding: 1.5px;
    color: #7b376e;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-section h3::after {
    font-size: 12px;
    transition: transform 0.3s ease;
  }

  .footer-section.open h3::after {
    transform: rotate(180deg);
  }

  .footer-section ul,
  .footer-section address {
    display: none;
    position: relative;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    /* border: 1px solid #ccc;
      border-top: none;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
    z-index: 1;
    /* padding: 10px; */
    margin: 0;
    font-family: "Open Sans", sans-serif;
  }

  .footer-section.open ul {
    display: block;
  }
  .footer-section.open address {
    display: ruby;
  }

  .dropdown-content {
    display: block;
    position: relative;
    left: 0;
    top: 100%;
    background: white;
    /* box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);  */
    z-index: 1000;
  }

  .dropdown-content li,
  .dropdown-content a,
  .dropdown-content address {
    color: #333;
    font-size: 12px;
    line-height: 1.8;
    text-decoration: none;
  }
  .footer-section.open ul,
  .footer-section.open address {
    font-size: 12px;
  }

  .company-info {
    /* margin-bottom: 20px; */
    width: 100%;
  }

  .company-info-text {
    font-size: 10px;
    line-height: 16px;
    text-align: justify;
    line-height: 1.6;
    margin: 0 0 10px;
    font-family: Open Sans;
    font-weight: 400;
    letter-spacing: 0.032em;
    color: #000000;
  }

  .social-icons {
    margin-top: 8px;
    display: flex;
    gap: 15px;
    justify-content: center;
  }

  .footer-bottom {
    text-align: center;
    margin-top: 32px;
    font-size: 10px;
    line-height: 16px;
    color: #666;
    width: 100%;
    width: calc(100% - 48px);
    /* padding: 0 24px; */
    box-sizing: border-box;
    margin-left: 26px;
    margin-right: 47px;
    white-space: nowrap;
  }

  .social-icons a img {
    height: 17.43px;
  }

  .logo-and-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 17.43px;
    margin-bottom: 15.96px;
    width: 100%;
  }

  .footer-logo {
    margin-right: auto;
    height: 29.04px;
    top: 24px;
    left: 24px;
    padding: 3.29px 0px 0px 0px;
    gap: 3.7px;
    opacity: 1;
  }
}

/*@media (min-width: 741px) and (max-width: 1200px) {
  .footer-container {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  }
  
  .footer-section {
  text-align: left;
  }
  
  }*/

@media (min-width: 741px) and (max-width: 1200px) {
  .footer-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin: 0;
    width: 100%;
  }

  .footer {
    padding: 32px 32px 32px 32px;
  }

  .logo-and-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    width: 100%;
  }

  .footer-logo {
    width: 196px;
    height: 54px;
    margin-right: auto;
  }

  .social-icons {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-left: auto;
  }

  .social-icons img {
    width: 30px;
    height: 30px;
  }

  .company-info-text {
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
    margin-top: 10px;
    width: 342px;
  }
  .footer-section {
    position: relative;
    width: 100%;
    text-align: left;
    /* margin-bottom: 20px; */
    border-top: 1px solid #ffffff;
    /* padding-top: 20px; */
  }

  .social-icons a {
    margin-left: 10px;
  }

  .footer-section h3 {
    font-size: 22px;
    margin: 0;
    padding: 10px 0;
    color: #7b376e;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-section h3::after {
    font-size: 12px;
    transition: transform 0.3s ease;
  }

  .footer-section.open h3::after {
    transform: rotate(180deg);
  }

  .footer-section ul,
  .footer-section address {
    display: none;
    position: relative;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    /* border: 1px solid #ccc;
      border-top: none;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
    z-index: 1;
    /* padding: 10px; */
    margin: 0;
    font-family: "Open Sans", sans-serif;
  }

  .footer-section.open ul {
    display: block;
  }
  .footer-section.open address {
    display: ruby;
  }

  .dropdown-content {
    display: none;
    position: relative;
    left: 0;
    top: 100%;
    background: white;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  */
    z-index: 1000;
    /* padding: 10px; */
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 26px;
  }

  .dropdown-content li,
  .dropdown-content a,
  .dropdown-content address {
    color: #333;
    font-size: 16px;
    line-height: 1.8;
    text-decoration: none;
  }
  .dropdown-content address {
    display: ruby;
  }

  .footer-bottom {
    text-align: center;
    margin-top: 20px;
  }
}

@media (min-width: 1201px) {
  .footer {
    padding: 30px 60px 16px 60px;
    color: #333;
  }
  .company-info .footer-logo {
    padding-top: 15px;
  }

  .footer-logo {
    height: 54px;
    width: 196px;
  }

  .expand-icon {
    display: none;
  }
  .social-icons {
    gap: 24px;
    margin-top: 24px;
  }
  .company-info-text {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.032em;
    text-align: left;
  }
}

/* .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  background-color: #f8f8f8;
  margin: 0px;
  width: auto;
  height: auto;
  transition: background-color 0.3s, color 0.3s;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 99.54px;
  z-index: 999;
}

.progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
}

.logo img {
  width: 157px;
  height: 60px;
  margin: 40px;
  margin-bottom: 18px;
  margin-top: 20px;
}

.nav-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 60px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 44px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-links li {
  display: inline;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.nav-links a {
  color: black;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #883979;
}

.hamburger {
  display: none;
  margin-right: 18px;
}

.signinbtn {
  background-color: #7b376e;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  height: 36px;
  display: flex;
  padding: 6px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.signinbtn:hover {
  background-color: #6a2d5a;
}

.mode-toggle {
  top: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: white;
  border: none;
  color: #120505;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.header .mode-toggle:hover {
  background-color: #7b376e;
}

.darkMoon {
  color: white !important;
}

.lightSun {
  color: black !important;
}

.lightSun:hover {
  color: white !important;
}

.mode-text {
  margin-left: 24px;
  font-family: "Poppins", sans-serif;
  line-height: 18px;
  margin-right: 8px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.mode-toggle img {
  height: 24px;
  width: 24px;
}

.mode-text {
  display: none;
}

.header.dark-mode .hamburger {
  color: #fff;
}

.header.dark-mode .nav-links a {
  color: #fff;
}

.header.dark-mode {
  background-color: #1e0419;
  color: #fff;
}

.header.dark-mode .nav-links a:hover {
  color: #ad499a;
}

.header.dark-mode .progress-bar {
  background-color: #8e5c8e;
}

.header.dark-mode .mode-toggle {
  background-color: #2d1227;
  color: white;
}

.header.dark-mode .mode-toggle:hover {
  background-color: #7b376e;
}

@media (min-width: 741px) and (max-width: 1200px) {
  .header {
    height: 80px;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    z-index: 1;
  }
  .progress-bar-container {
    top: 70px;
  }
  .nav-links .clrhome {
    color: #883979;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
  }
  .logo {
    display: flex;
    align-items: center;
  }
  .logo img {
    width: 196px;
    height: 54px;
    margin: 0%;
    margin-left: 12px;
    position: absolute;
    left: 24px;
    top: 18px;
    z-index: 1;
  }
  .hamburger {
    display: block;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin-right: 27px;
    z-index: 2;
    color: inherit;
  }
  .nav-container {
    flex-direction: column;
    margin: 10px 0;
    width: 100%;
  }
  .nav {
    flex-direction: column;
    gap: 10px;
    margin: 0;
    width: 100%;
    align-items: end;
    margin-bottom: 14px;
  }
  .nav-links {
    display: none;
    padding-top: 24px;
    flex-direction: column;
    gap: 24px;
    width: calc(100% - 48px);
    align-items: flex-start;
    margin: 0 24px;
  }
  .nav.open .nav-links {
    display: flex;
    align-items: flex-end;
  }
  .signinbtn {
    width: 100%;
    padding: 8px 0;
    font-size: 16px;
    background: none;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    font-weight: 500;
  }
  .signinbtn:hover {
    background: none;
  }
  .mode-text {
    display: inline;
    margin-left: 90px;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    margin-right: 8px;
    font-weight: 600;
    font-size: 16px;
  }
  .mode-toggle img {
    height: 20px;
    background-color: #ebebeb;
    border-radius: 50%;
    border: none;
    width: 24px;
    height: 24px;
    padding: 3.55px 3.53px 3.5px 3.53px;
    opacity: 1;
  }
}

@media (min-width: 321px) and (max-width: 740px) {
  .header {
    height: 80px;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    z-index: 1;
  }
  .nav-links .clrhome {
    color: #883979;
    font-size: 12px;
    font-family: "Poppins", sans-serif;
  }
  .logo {
    display: flex;
    align-items: center;
  }
  .logo img {
    width: 120px;
    height: 40px;
    margin: 0%;
    position: absolute;
    left: 24px;
    top: 20px;
    z-index: 1;
    margin-top: -10px;
  }
  .hamburger {
    display: block;
    font-size: 24px;
    margin-left: 300px;
    margin-right: 18px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
  }
  .nav-container {
    flex-direction: column;
    margin: 10px 0;
    width: 100%;
  }
  .nav {
    flex-direction: column;
    width: 100%;
    margin: 0%;
    justify-content: space-between;
    gap: 100px;
    align-items: end;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0px;
    width: 100%;
    align-items: flex-start;
    margin: 0;
  }
  .nav-container.open {
    left: 0;
  }
  .nav-links a {
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    margin-left: 15px;
    gap: 28px;
    width: 141px;
    height: 24px;
  }
  .signinbtn {
    width: 100%;
    display: contents;
    padding: 8px 0;
    font-size: 13px;
    background: none;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    color: inherit;
    font-weight: 500;
    margin-left: 10px;
  }
  .mode-toggle {
    display: flex;
    align-items: center;
    background-color: transparent;
    cursor: pointer;
    margin-left: 12px;
  }
  .mode-toggle img {
    height: 18px;
  }
  .mode-toggle img {
    height: 20px;
    background-color: #ebebeb;
    border-radius: 50%;
    border: none;
    width: 18px;
    height: 18px;
    padding: 3.55px 3.53px 3.5px 3.53px;
    opacity: 1;
  }
  .mode-text {
    display: inline;
    margin-left: 68px;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    margin-right: 8px;
    font-weight: 600;
    font-size: 12px;
  }
}

@media (min-width: 1201px) {
  .mode-toggle {
    background-color: #f3f3f3;
  }
  .header {
    height: 80px;
  }
} */
/* General Header Styles */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  background-color: #f8f8f8;
  margin: 0px;
  width: auto;
  height: 99.54px;
  /* border-bottom: 2px solid rgba(0, 0, 0, 0.025); */
  /* box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25); */
  transition: background-color 0.3s, color 0.3s;
  position: sticky;
  top: 0; /* Stick to the top of the viewport */
  z-index: 1000; /* Ensure it stays above other elements */
}

/* Progress Bar Styles */
.progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 99.54px;
  z-index: 999;
}

.progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
}

/* Logo Styles */
.logo img {
  width: 216px;
  height: 60px;
  margin: 60px;
  margin-bottom: 18px;
  margin-top: 18px;
}

/* Navigation Container Styles */
.nav-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Navigation Styles */
.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 60px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 35px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-links li {
  display: inline;
  font-family: Poppins, sans-serif;
  font-weight: 500;
}

.LastSigninAIButton {
  height: 40px;
}

/* Navigation Link Styles */
.nav-links a {
  color: black;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #883979;
}

.hamburger {
  display: none;
  margin-right: 18px;
  transition: transform 0.4s ease-in-out;
}
.hamburger-icon {
  display: inline-block;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* Transition Effect */
.hamburger-icon.open {
  transform: rotate(180deg); /* Rotate the icon when open */
}

/* Sign In Button Styles */
.signinbtnAI {
  background-color: #7b376e;
  color: white;
  border: none;
  border-radius: 60px;
  cursor: pointer;

  transition: background-color 0.3s ease;

  display: flex;
  padding: 6px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.signinbtnAI:hover {
  background-color: #6a2d5a;
}
/* btn-link .nav-button {
width: 4px;
height: 180px;
top: 204px;
left: 1197px;
gap: 0px;
border-radius: 12px 0px 0px 12px;
opacity: 1;
} */

/* Mode Toggle Button Styles */
.mode-toggle {
  top: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: white;

  border: none;
  color: #120505;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.header .mode-toggle:hover {
  background-color: #7b376e;
}

.darkMoon {
  color: white !important;
}

.lightSun {
  color: black !important;
}

.lightSun:hover {
  color: white !important;
}

.mode-text {
  margin-left: 24px;
  font-family: "Poppins", sans-serif;
  line-height: 18px;
  margin-right: 8px;
  font-weight: 600;
  font-size: 14px; /* Adjust the size as needed */
  white-space: nowrap;
}

.mode-toggle img {
  height: 24px;
  width: 24px;
}
.mode-text {
  display: none;
}

/* Dark Mode Specific Styles */

.header.dark-mode .hamburger {
  color: #fff; /* Set the hamburger icon color to white */
}

.header.dark-mode .nav-links a {
  color: #fff;
}

.header.dark-mode {
  background-color: #1e0419;
  color: #fff;
}

.header.dark-mode .nav-links a:hover {
  color: #ad499a;
}

.header.dark-mode .progress-bar {
  background-color: #8e5c8e;
}

.header.dark-mode .mode-toggle {
  background-color: #2d1227;
  color: white;
}

.header.dark-mode .mode-toggle:hover {
  background-color: #7b376e;
}

/* Responsive Styles for Medium Screens */
@media (max-width: 1200px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
    height: auto;
    padding: 10px;
    position: relative;
    z-index: 1;
  }
  .progress-bar-container {
    top: 70px; /* Adjust the top position for medium screens */
  }

  .nav-links .clrhome {
    color: #000000;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
  }
  .nav-links .clrhome:hover {
    color: #883979;
  }

  .nav-links .clrhome:hover {
    color: #6a2d5a;
  }

  .logo {
    display: flex;
    align-items: center;

    /* margin-left: 12px;   */
  }

  .logo img {
    width: 196px;
    height: 54px;
    margin: 0%;
    margin-left: 12px;
    position: absolute;
    left: 24px;
    top: 18px;
    z-index: 1;
  }

  .hamburger {
    display: block;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin-right: 27px;
    cursor: pointer;
    z-index: 2;
    color: inherit;
  }

  .nav-container {
    flex-direction: column;
    margin: 10px 0;
    width: 100%;
  }

  .nav {
    flex-direction: column;
    gap: 10px;
    margin: 0;
    width: 100%;
    align-items: end;
    margin-bottom: 14px;
  }

  .nav-links {
    display: none;
    padding-top: 24px;
    flex-direction: column;
    gap: 24px;
    width: calc(100% - 48px); /* Full width minus left and right margins */
    align-items: flex-start;
    margin: 0 24px; /* Add left and right margins */
  }

  .nav.open .nav-links {
    display: flex;
  }

  .signinbtn {
    width: 100%;
    padding: 8px 0;
    font-size: 16px;
    background: none;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    font-weight: 500;
  }

  .signinbtn:hover {
    background: none;
  }

  .mode-text {
    display: inline;
    margin-left: 90px;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    margin-right: 8px;
    font-weight: 600;
    font-size: 16px; /* Adjust the size as needed */
  }

  .mode-toggle img {
    height: 20px;
    background-color: #ebebeb;
    border-radius: 50%;
    border: none;
    width: 24px;
    height: 24px;
    padding: 3.55px 3.53px 3.5px 3.53px;
    gap: 0px;
    opacity: 1;
  }
}

/* Responsive Styles for Small Screens */
@media (max-width: 740px) {
  .signinbtnAI {
    background-color: #7b376e;
    color: white;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s ease;
    height: 26px;
    display: flex;
    margin-top: -30px;
    padding: 6px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .header {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    height: auto;
    position: relative;
    z-index: 1;
  }

  .nav-links .clrhome {
    color: #000000;
    font-size: 12px;
    font-family: "Poppins", sans-serif;
  }
  .nav-links .clrhome:hover {
    color: #883979;
  }

  .logo {
    display: flex;
    align-items: center;
    /* margin-left: 24px; */
  }

  .logo img {
    width: 120px;
    height: 40px;
    margin: 0%;
    position: absolute;
    left: 24px;
    /* top: 10px;  */
    z-index: 1;
  }

  .hamburger {
    display: block;
    font-size: 24px;
    margin-left: 300px;
    margin-right: 18px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
  }

  .nav-container {
    flex-direction: column;
    margin: 10px 0;
    width: 100%;
  }
  .nav {
    flex-direction: column;
    gap: 10px;
    margin: 0%;
  }

  .nav-links {
    display: none;
    /* padding-top: 24px; */
    flex-direction: column;
    gap: 0px;
    width: 100%;
    align-items: flex-start; /* Align links to the left */
    margin: 0;
  }

  .nav-container.open {
    left: 0;
  }

  .nav-links a {
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    margin-left: 15px;
    gap: 28px;
    width: 141px;
    height: 24px;
  }

  .signinbtn {
    width: 100%;
    display: contents;
    padding: 8px 0;
    font-size: 13px;
    background: none;
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    color: inherit;
    font-weight: 500;
    margin-left: 10px;
  }

  .mode-toggle {
    display: flex;
    align-items: center;
    background-color: transparent;
    cursor: pointer;
    margin-left: 12px;
  }

  .mode-toggle img {
    height: 18px;
  }

  .mode-toggle img {
    height: 20px;
    background-color: #ebebeb;
    border-radius: 50%;
    border: none;
    width: 18px;
    height: 18px;
    padding: 3.55px 3.53px 3.5px 3.53px;
    gap: 0px;
    opacity: 1;
  }
  .mode-text {
    display: inline;
    margin-left: 68px; /* margin*/
    font-family: "Poppins", sans-serif;
    line-height: 18px;
    margin-right: 8px;
    font-weight: 600;
    font-size: 12px; /* Adjust the size as needed */
  }
}

@media (min-width: 1201px) {
  .signinbtnAI {
    background-color: #7b376e;
    color: white;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    height: 36px;
    display: flex;
    padding: 6px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .mode-toggle {
    background-color: #f3f3f3;
  }
  .nav-links li {
    display: inline;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 500;
  }
}

@media (min-width: 1201px) {
  .learnmoresection {
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .learnmoremodel-p {
    font-family: Open Sans;
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #666666;
  }

  .learnmore-h1 {
    font-family: Poppins;
    font-size: 32px;
    font-weight: 500;
    line-height: 48px;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .learnmore-model1 {
    width: 1137px;
  }

  .learnmore-model1-imgs {
    display: flex;
    gap: 24px;
    margin-left: 200px;
  }

  .model1img-description-title {
    font-family: Open Sans;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 21.79px;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .model1img-description {
    align-items: left;
    text-align: left;
    margin-bottom: 98px;
  }

  .model1img-description-head {
    font-family: Poppins;
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    margin-bottom: 0px;
  }

  .model1img-description-p {
    font-family: Open Sans;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #666666;
  }
}
@media (min-width: 741px) and (max-width: 1200px) {
  .learnmoresection {
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .learnmoremodel-p {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
    color: #666666;
  }

  .learnmore-h1 {
    font-family: Poppins;
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;

    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .learnmore-model1 {
    width: 693px;
    height: 950px;
  }
  .model1-img1 img {
    width: 279px;
    height: 230px;
    top: 298px;
    left: 82px;
    gap: 0px;
    border-radius: 8px;
    opacity: 1;
  }
  .model1-img2 img {
    width: 279px;
    height: 230px;
    top: 298px;
    left: 82px;
    gap: 0px;
    border-radius: 8px;
    opacity: 1;
  }

  .learnmore-model1-imgs {
    margin-top: 32px;
    display: flex;
    gap: 18px;
    margin-left: 62px;
  }

  .model1img-description-title {
    font-family: Open Sans;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 21.79px;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .model1img-description {
    align-items: left;
    text-align: left;
    margin-bottom: 98px;
  }

  .model1img-description-head {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .model1img-description-p {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;

    color: #666666;
  }
}
@media (min-width: 321px) and (max-width: 740px) {
  .learnmoresection {
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .learnmoremodel-p {
    font-family: Open Sans;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;

    color: #666666;
  }

  .learnmore-h1 {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 500;

    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .learnmore-model1 {
    width: 310px;
    height: 592px;
  }
  .model1-img1 img {
    width: 140px;
    height: 92px;
    top: 242px;
    left: 16px;
    gap: 0px;
    border-radius: 8px;
  }
  .model1-img2 img {
    width: 140px;
    height: 92px;
    top: 242px;
    left: 16px;
    gap: 0px;
    border-radius: 8px;
  }

  .learnmore-model1-imgs {
    display: flex;
    gap: 9px;
    margin-left: 6px;
  }

  .model1img-description-title {
    font-family: Open Sans;
    font-size: 10px;
    font-style: italic;
    font-weight: 400;
    line-height: 13.62px;

    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .model1img-description {
    align-items: left;
    text-align: left;
    margin-bottom: 98px;
  }

  .model1img-description-head {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  .model1img-description-p {
    font-family: Open Sans;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;

    color: #666666;
  }
}

.super-admin-dashboard {
  width: 100%;
  height: 1800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-image: url("../../../img/dashboard/bg.png"); */
  background-size: cover; /* Make background image cover the entire area */
  background-position: center; /* Center the background image */
  background-repeat: no-repeat; /* Prevent background image from repeating */
  padding-bottom: 200px; /*Avoid any overlaping of content due to footer*/
}

.dark-mode .super-admin-dashboard {
  /* background-image: url("../../../img/dashboard/bgdark.png"); */
  background-color: #351e30;
}
.super-amount {
  font-family: "Open Sans", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 13.62px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-admin-title {
  display: flex;
  align-items: flex-start;
  justify-content: left;
  gap: 10px; /* Space between text and lines */
  white-space: nowrap;
  /* margin-left: 276px; */
}

.super-admin-title h1 {
  color: #7e3a89; /* Purple color */
  font-family: Poppins;
  font-size: 22px;
  font-weight: 600;
  line-height: 33px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-admin-title span {
  flex: 0 0 50px;
  height: 1px;
  background-color: #7e3a89;
}

.super-admin-dashboard-container {
  margin: 30px 60px 15px 20px;
  position: relative;
  gap: 50px;
}
.super-admin-dashboard-title-container {
  display: flex;
  gap: 350px;
  align-items: center;
}

.super-admin-button-group {
  display: flex;
  gap: 10px;
  z-index: 99;
}

.super-period-button {
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
  color: #b0b0b0;
  font-weight: normal;
  transition: color 0.2s, font-weight 0.2s;
}

.super-period-button.active {
  color: #6a1b9a;
  font-weight: bold;
}

.super-adminComponents {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.super-dark-mode .admin-dashboard-container {
  background-color: transparent; 
}

.super-admin-dashboard-container-box {
  width: 1081px;
  height: 100%;
  display: flex;
  gap: 28px;
  flex-shrink: 0;
}

.super-admin-dashboard-container-box-2 {
  width: 805px;
  height: 100%;
  display: flex;
  flex-direction: column;

  flex-shrink: 0;
}

.super-admin-Container1 {
  display: flex;
  /* align-items: center; */
  gap: 28px;
  align-self: stretch;
  width: 1081px;
  height: 340px;
  /* height: 1081px; */
}

.super-admin-card {
  display: flex;
  width: 249px;
  height: 1068px;
  flex-direction: column;

  align-items: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: #f6f6f6;
  /* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); */
  overflow: hidden;
  padding-top: 10px;
}
.dark-mode .super-admin-card {
  background-color: #1e0419;
}
.super-admin-menu-options {
  height: 324px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;

  /* padding: 24px; */
}

/* Individual menu button styling */
.super-admin-menu-item {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
  background: white;
  border: none;
  padding: 11px 20px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s, color 0.3s;
  width: 100%;
}

/* Active button styling */
.super-admin-menu-item.active {
  background-color: #883979;
  color: white;
}
.dark-mode .super-admin-menu-item.active {
  background-color: #883979;
  color: white;
}

.dark-mode .super-admin-menu-item {
  background-color: #2d1227;
  color: white;
}

/* Hover effect for buttons */
.super-admin-menu-item:hover {
  background-color: #883979;
  color: white;
}

/* Specific padding for different buttons */
.super-admin-menu-item.cases {
  width: 201px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.super-admin-menu-item.patients {
  padding-left: 59px;
  padding-right: 63px;
}

.super-admin-menu-item.reports {
  padding-left: 61px;
  padding-right: 64px;
}

.super-admin-menu-item.assistance {
  padding-left: 47px;
  padding-right: 52px;
}

.super-admin-menu-item.chat {
  padding-left: 37px;
  padding-right: 43px;
}

/* Card container style */
.super-admin-card-container {
  margin-top: 16px;
  width: 272px;
  height: 223px;
  /* position: absolute; */
  left: 0;
  top: 48px;
  background: #f8f8f8;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Added padding for spacing */
}
.dark-mode .super-admin-card-container {
  background-color: #2d1227;
}

@media (max-width: 1201px) {
  .super-admin-card-container {
    max-width: 272px;
  }
}

/* patient overview*/
.super-admin-card-patient {
  border-radius: 10px;
  padding: 18px;
  max-height: 223px;
  max-width: 300px;
  width: 100%;
}

.super-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  color: #4a4a4a;
}

.super-dropdown-indicator1 {
  color: #d32f2f;
  font-size: 12px;
  margin-right: 20px;
}

.super-dropdown-indicator-donut {
  color: #d32f2f;
  font-size: 12px;
  margin-left: 150px;
}

.super-card-content {
  text-align: center;
  padding-left: 10px;
}

.super-card-content h1 {
  color: #000000;
  font-size: 48px;
  font-weight: bold;
  margin: 10px 0;
  font-family: Open Sans;
  font-size: 64px;
  font-weight: 600;
  line-height: 60px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.dark-mode .super-card-content h1 {
  color: white !important;
}

.super-card-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.super-active-patients {
  background: #883979;
  color: #fff;
  font-size: 14px;
  width: 177px;
  height: 26px;
  position: relative; /* Ensure correct positioning */
  top: 0px;
  left: 0px;
  padding: 6px 16px;
  gap: 8px;
  border-radius: 100px;
  border: 1px solid transparent; /* Adjusted to ensure proper border visibility */
  display: flex; /* Add flexbox */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Optionally center content horizontally */
  text-align: center; /* Ensure text alignment */
}

.super-new-admissions {
  background: #1976d2;
  color: #fff;
  font-size: 14px;
  width: 177px;
  height: 26px;
  top: 0px;
  left: 0px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 100px;
  border: 1px;
  position: relative;
  display: flex; /* Add flexbox */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Optionally center content horizontally */
  text-align: center; /* Ensure text alignment */
}

/* Title style */
.super-admin-overview-title {
  text-align: left;
  color: #666666;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.48px;
  word-wrap: break-word;
}
/*earnings*/
.super-admin-graph-container {
  width: 561px;
  height: 223px;
  flex-shrink: 0;
  position: relative;
  background-color: #f8f8f8;
  border-radius: 8px;
}
.dark-mode .super-admin-graph-container {
  background-color: #2d1227;
}

@media (max-width: 1201px) {
  .super-admin-graph-container {
    width: 561px;
  }
}

.super-earnings-container {
  padding: 20px;
}

.super-earnings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.super-earnings-header h2 {
  font-size: 18px;
  font-weight: bold;
  color: #4a4a4a;
}

.super-period-buttons {
  display: flex;
  gap: 10px;
}

.super-period-button {
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
  color: #b0b0b0;
  font-weight: normal;
  transition: color 0.2s, font-weight 0.2s;
}

.super-period-button.active {
  color: #883979;
  font-weight: bold;
}

.super-earnings-card {
  margin-top: 16px;
  border-radius: 10px;
  padding: 20px;
}
.dark-mode .super-earnings-card {
  background-color: #2d1227;
  border: 2px solid #2d1227;
  padding-bottom: 0px;
}
.super-card-patients-header {
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #4a4a4a;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.dark-mode .super-card-patients-header {
  color: white;
}
.dark-mode .super-analytics-data-chart-dropdown-section select {
  color: #883979;
}
.super-card-header {
  margin-bottom: 47px;
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #4a4a4a;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.dark-mode .super-card-header {
  color: white;
}

.super-card-header1 {
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #4a4a4a;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}
.dark-mode .super-card-header1 {
  color: white;
}
.super-chart-container-earnings {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 10px;
}

.super-chart-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.super-amount {
  font-size: 14px;
  color: #4a4a4a;
}
.dark-mode .super-amount {
  color: white;
}

.super-bar {
  width: 30px;
  background: #883979;
  border-radius: 10px;
  margin-top: 6px;
}

.super-label {
  font-size: 12px;
  color: #4a4a4a;
  margin-top: 5px;
}

.super-admin-graph {
  display: flex;
  gap: 16px;
}

@media (max-width: 1201px) {
  .super-admin-graph {
    gap: 16px;
  }
}

.super-admin-total {
  max-width: 804px;
  display: flex;
  text-align: left;
  gap: 28px;
}

.super-admin-total-cases,
.super-admin-closed-cases,
.super-admin-new-cases,
.super-admin-inprogress-cases {
  width: 148px;
  height: 125px;
  border-radius: 12px;
  padding: 16px;
  background-color: #f8f8f8;
}

.super-case-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 9px;
}

.super-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.super-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.super-active-dot {
  background-color: #883979; /* Color for Active Cases */
}

.super-closed-dot {
  background-color: #f39c12; /* Color for Closed Cases */
}

.super-legend-text {
  font-size: 14px;
  color: #333; /* Adjust color to match your design */
}
.dark-mode .super-legend-text {
  color: white;
}

.super-total-tiles {
  gap: 28px;
  display: flex;
}

.super-admin-total-cases {
  background-color: #fcfffc;
}

.super-admin-closed-cases {
  background-color: #fff8f9;
}

.super-admin-new-cases {
  background-color: #fcfffc;
}

.super-admin-inprogress-cases {
  background-color: #fff8f9;
}

.super-admin-total-heading {
  display: flex;
  justify-content: space-between;

  align-items: center;
}

.super-admin-total-circle {
  background-color: #e1ffe3;
  display: flex;
  justify-content: center;
  border-radius: 100%;
  width: 28px;
  height: 28px;
  align-items: center;
}

.super-total-num {
  margin-top: 5px;
}

.super-admin-cases-percent {
  position: relative;
  top: 56px;
}
.super-admin-summary-header-for-h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #666666;
  margin-bottom: 16px; /* Adjust margin below header */
}

.super-admin-expenses-summary-title {
  margin: 0;
  padding: 0;
}

.super-admin-cases-overview-title {
  margin-right: 96px;
}

.super-admin-summary-row {
  align-items: flex-start;
}

.super-admin-summary-card {
  /* flex: 1; */
  background: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 15px;
  width: 531px;
  height: 350px;
  gap: 0px;
  border-radius: 16px;
}
.dark-mode .super-admin-summary-card {
  background-color: #2d1227;
}
.super-admin-summary-cases-card {
  flex: 1 1;
  margin-left: 20px;
  background: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 15px;
  width: 260px;
  height: 350px;
  gap: 0px;
  border-radius: 16px;
}
.dark-mode .super-admin-summary-cases-card {
  background-color: #2d1227;
}
.super-admin-staff-card {
  /* flex: 1; */
  position: relative;
  background: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;

  width: 1260px !important;
  height: 406px;
  gap: 0px;
  border-radius: 16px;
}
.dark-mode .super-admin-staff-card {
  background-color: #2d1227;
}
.super-admin-usage-card {
  /* flex: 1; */
  background: #f8f8f8;
  border-radius: 10px;
  padding: 15px;
  padding-top: 0px;
  width: 300px;
  height: 183px;
  gap: 0px;
  border-radius: 16px;
  overflow-y: auto;
}
.dark-mode .super-admin-usage-card {
  background-color: #2d1227;
}
.super-admin-usage-card::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
  border-radius: 100px; /* Rounded scrollbar */
}

.super-admin-usage-card::-webkit-scrollbar-thumb {
  background-color: #883979; /* Scrollbar thumb color */
  border-radius: 100px; /* Rounded scrollbar thumb */
}

.super-admin-usage-card::-webkit-scrollbar-track {
  background: transparent; /* Scrollbar track color */
}

.super-admin-usage-card::-webkit-scrollbar-thumb:hover {
  background-color: #883979; /* Darker color on hover */
}
.super-admin-summary-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px; /* Add a 30px gap between headings */
  margin-bottom: 16px;
  margin-top: 20px;
}

.super-admin-currency-dropdown {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0.5rem;
}

.super-admin-summary-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.super-admin-bar-group {
  display: flex;
  gap: 1rem;
}

.super-admin-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 5px;
}

.super-admin-navigation {
  display: flex;
  gap: 0.5rem;
}

.super-admin-nav-btn {
  background: #6e44ff;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.super-admin-checked-in {
  color: #28a745;
}

.super-admin-attendance-list {
  list-style: none;
  padding: 0;
}

.super-admin-attendance-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.super-admin-status-dot {
  background: #28a745;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.super-usage {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.super-admin-usage-summary {
  margin-top: -30px;
  display: flex;
  justify-content: space-between;
}
.super-admin-summary-card-usage {
  margin-top: 80px;
  background: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  width: 400px;
  height: 175px;
}

.super-admin-usage-box {
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
  flex: 1 1;
  overflow-wrap: normal;
  white-space: nowrap;
  gap: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-usage-summary {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
}

.super-admin-usage-box h3 {
  margin-left: 15px;
  font-family: Open Sans;
  font-size: 36px;
  font-weight: 600;
  line-height: 49.03px;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-top: -5px;
}

.super-admin-usage-box + .super-admin-usage-box {
  margin-left: 1rem;
}

@media (max-width: 768px) {
  .super-admin-summary-row {
    flex-direction: column;
  }

  .super-admin-usage-box + .super-admin-usage-box {
    margin-left: 0;
    margin-top: 1rem;
  }
}

.super-arrow-buttons-container {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: end;
  padding: 16px;
}

.super-arrow-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.super-arrow-button span {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.super-arrow-button:hover {
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
  background-color: #f0f0f0;
}

.super-arrow-button:active {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #f0f0f0;
}

.super-expenses-summary {
  display: flex;
  flex-direction: row;
}

.super-earnings-summary {
  display: flex;
  flex-direction: row;
}

.super-cloned-overview {
  background: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  width: 388px;
  text-align: left;
}

.super-admin-summary-row {
  display: flex;
  align-items: flex-start;
  width: 849px;
}
/*currency dropdown*/
.super-dropdown-indicator2 {
  position: relative;
}

.super-dropdown-curr-button {
  border: 1px solid #ccc;
  background: #883979;
  cursor: pointer;
  width: 66px;
  height: 24px;
  padding: 4px 4px 4px 4px;
  gap: 8px;
  border-radius: 100px;
  font-family: Open Sans;
  font-size: 12px;
  color: #b0b0b0;
  font-weight: 400;
  text-align: center; /* Center text horizontally */
  line-height: 24px; /* Align text vertically */
  display: flex;
  justify-content: center; /* Horizontally center the text */
  align-items: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-dropdown-curr-menu {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100px;
  background: transparent;
  z-index: 1000;
}

.super-dropdown-curr-item {
  max-width: 66px;
  height: 24px;
  margin-bottom: 3px;
  border: 1px solid #ccc;
  background: #e6e6e6;
  cursor: pointer;
  text-align: center; /* Center text horizontally */
  line-height: 24px; /* Align text vertically */
  display: flex;
  justify-content: center; /* Horizontally center the text */
  align-items: center;
  padding: 0px;
  gap: 8px;
  border-radius: 100px;
  font-family: Open Sans;
  font-size: 12px;
  color: black;
  font-weight: 400;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-dropdown-curr-item:hover {
  background-color: #883979;
  color: whitesmoke;
}

.super-staff-container {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.super-staff-title {
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-align: left;
}

.super-staff-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.super-staff-card {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10px 15px;
  border-radius: 10px;
}
.dark-mode .super-staff-card {
  background-color: #1e0419;
}

.super-staff-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover;
  width: 46px;
  height: 46px;
  top: 8px;
  left: 8px;
  gap: 0px;
  border-radius: 10px;
  opacity: 1;
}

.super-staff-details {
  display: flex;

  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.super-staff-info-dashboard h4 {
  margin: 0;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-staff-info-dashboard span {
  color: gray;
  font-family: Open Sans;
  font-size: 10px;
  font-weight: 400;
  line-height: 13.62px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-staff-role {
  background: #883979;
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.9rem;
  margin-left: 30px;
}

.super-staff-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  width: 90%;
  position: absolute;
  bottom: 20px;
}

.super-prev-button,
.super-next-button {
  font-size: 0.9rem;
}
.super-prev-staff-button,
.super-next-staff-button {
  outline: none;
  border: none;
  background: none;
}

.super-active-staff-label {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  font-family: Open Sans;
  font-size: 15px;
  font-weight: 400;
  line-height: 16.34px;
  text-align: right;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.dark-mode .super-active-staff-label {
  color: white;
}
.dark-mode .recharts-layer.recharts-cartesian-axis.recharts-xAxis.xAxis {
  color: white; /* White color in dark mode */
}
.super-arrow-circle1 {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}
.super-arrow-circle2 {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.super-arrow-circle2:hover {
  background-color: #883979;
  color: white;
  cursor: pointer;
}

.super-arrow-circle1 svg {
  font-size: 14px;
}
.super-arrow-circle2 svg {
  font-size: 14px;
}

.super-admin-summary-row.admin-summary-column {
  margin-left: 20px;
}
.super-admin-summary-header-for-h3-2 {
  margin-top: 30px;
  display: flex;
  align-items: center;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;

  color: #666666;
  margin-bottom: 16px; /* Adjust margin below header */
}
span.super-admin-usage-overview-title {
  margin-left: 505px;
}
.super-admin-expenses-staff-title {
  margin: 0;
  padding: 0;
}

.super-admin-cases-usage-title {
  margin-left: 530px;
}
/* anouncement */

.super-announcement-header {
  font-family: Poppins;
  color: #4d4d4d;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-announcement-admin-table {
  border-collapse: collapse;
  width: 100%;
  overflow-y: auto;
}

.super-table-anounce-header,
.super-table-anounce-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.super-table-anounce-header {
  font-weight: bold;
  color: #883979; /* Purple tone for header text */
  margin-right: 30px;
  margin-left: 5px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-table-anounce-cell {
  font-size: 12px;
  font-weight: 400;
  line-height: 13.62px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-table-anounce-row:last-child {
  border-bottom: none;
}

.super-admin-summary-column {
  display: flex;
  flex-direction: column;
}

.super-permissions-container {
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 804px;
  height: 900px;
  top: 120px;
  left: 337px;
  gap: 0px;
  border-radius: 12px;
  opacity: 1;
  padding-top: 15px;
}
.super-permission-header {
  display: flex;
  margin-left: 16px;
  margin-top: 15px;

  height: 36px;
  background-color: #ffffff;
  gap: 18px;

  top: 16px;
  left: 16px;
  padding: 8px 16px 7px 16px;

  border-radius: 12px;
}
.dark-mode .super-permission-header {
  background-color: #2d1227;
}
.super-permission-btn {
  background-color: #fff; /* White background for contrast */
  cursor: pointer;
  color: #000000;
  transition: all 0.3s ease; /* Smooth hover effect */
  top: 8px;
  left: 16px;
  /* padding: 6px 16px 6px 16px; */
  gap: 8px;
  border-radius: 8px;
  border: none;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.dark-mode .super-permission-btn {
  background-color: #2d1227;
  color: white;
}
.super-permission-btn.active {
  background-color: #883979; /* Active background color */
  color: white; /* Active text color */
  width: 86px;
  height: 33px;
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
}

/* Hover Effect */
.super-permission-btn:hover {
  background-color: #883979; /* Change background color on hover */
  color: #fff; /* Change text color to white on hover */
  width: 86px;
  height: 33px;
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
}

.super-permission-btn2 {
  background-color: #fff; /* White background for contrast */

  height: 40px;
  cursor: pointer;
  color: #883979; /* Text color */
  border: 1px solid #883979;
  transition: all 0.3s ease; /* Smooth hover effect */
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  transition: background-color 0.3s, color 0.3s;
}

/* Hover Effect */
.super-permission-btn2:hover {
  background-color: #883979; /* Change background color on hover */
  color: #fff; /* Change text color to white on hover */
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
}
.super-permission-btn2.active-btn {
  background-color: #883979;
  color: white;
}

.super-modify-permissions-button {
  width: 213px;
  height: 46px;
  margin-left: 24px;
  margin-top: 10px;
  gap: 8px;
  opacity: 1;
  display: flex;
  border: 1px solid #883979;
  border-radius: 8px;
  background-color: transparent;
}

.super-modify-button-text {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: 0.024em;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
  text-align: center;
}

.super-permissions-card {
  display: flex;
  flex-direction: column;
  width: 849px;
  height: 683px;
  margin-top: 0px;
  margin-left: 0px;
  gap: 0px;
  border-radius: 12px;
  background-color: #f8f8f8;
}
.dark-mode .super-permissions-card {
  background-color: #1e0419;
  color: white;
}

.super-permission-doctor-info {
  display: flex;
  align-items: center;
}

.super-permission-doctor-info {
  display: flex;
  margin-bottom: 20px;
}

.super-permission-doctor-labels {
  display: flex;
  margin-left: 15px;
  gap: 10px;
}

.super-permission-doctor-section {
  display: flex;
  flex-direction: column;
  margin-right: 100px;
}

.super-permission-doctor-section2 {
  display: flex;
  flex-direction: column;
  margin-left: 100px;
}

.super-permission-doctor-label {
  color: #666666;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-permission-doctor-value {
  color: #1a1a1a;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-permission-doctor-avatar {
  background-color: #ccc;
  margin-right: 15px;
  width: 77px;
  height: 83px;
  margin-top: 24px;
  margin-left: 24px;
  gap: 0px;
  border-radius: 10px;
  opacity: 1;
}

.super-permissions-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-left: 20px;
}

.super-permission-item {
  display: flex;
  justify-content: space-between;
}

.super-permission-label {
  font-family: Poppins;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.dark-mode .super-permission-label {
  color: white;
}
.super-permission-checkbox {
  -webkit-appearance: auto;
          appearance: auto;
  margin-right: 20px;
  width: 21px;
  height: 21px;
  border: 2px solid #000000;
}
.super-permissions-actions {
  display: flex;
  justify-content: flex-end;
  margin-right: 16px;
}

.super-save-button,
.super-reset-button {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  cursor: pointer;
  width: 72px;
  height: 40px;
  top: 614px;
  left: 668px;
  padding: 7px 12px 10px 14px;
  gap: 8px;
  border-radius: 8px;
}

.super-save-button {
  background-color: #883979;
  color: white;
  margin-right: 10px;
}

.super-save-button:disabled {
  background-color: #ccc;
  color: #fff;
  cursor: not-allowed;
}

.super-reset-button {
  background-color: #ffffff;
  color: #883979;
  border-color: #883979;
}
.dark-mode .super-reset-button {
  background-color: #2d1227;
  border: 1px solid #883979;
}

.super-save-button:hover {
  background-color: #541b4a;
}
.super-save-button:disabled {
  background-color: #ccc;
  color: #fff;
  cursor: not-allowed;
}

.super-reset-button:hover {
  background-color: #883979;
  color: white;
}

.super-permission-container {
  width: 830px;
  height: 800px; /* Adjust height based on content */
  margin: 0px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.super-permission-container::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
  border-radius: 100px; /* Rounded scrollbar */
}

.super-permission-container::-webkit-scrollbar-thumb {
  background-color: #883979; /* Scrollbar thumb color */
  border-radius: 100px; /* Rounded scrollbar thumb */
}

.super-permission-container::-webkit-scrollbar-track {
  background: transparent; /* Scrollbar track color */
}

.super-permission-container::-webkit-scrollbar-thumb:hover {
  background-color: #883979; /* Darker color on hover */
}

.super-search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0px;
  margin-left: 15px;
  margin-top: 10px;
}

.super-permission-search-input {
  width: 384px !important;
  height: 38px !important;
  padding: 0px 8px 0px 8px !important;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0 8px;
  margin: 0px;
}

.super-search-dropdown {
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0 8px;
}

.super-individual-section {
  width: 800px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 8px;
  background-color: white;
}

.super-individual-image {
  width: 46px;
  height: 46px;
  border-radius: 10px;
}

.super-individual-info {
  flex-grow: 1;
}

.super-individual-name {
  font-size: 12px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  color: #000;
}

.super-individual-date {
  font-size: 10px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  color: #666666;
}

.super-dropdown-toggle {
  width: 94px;
  height: 40px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  cursor: pointer;
}

.super-dropdown-content-permission {
  width: 800px;
  height: 590px;
  border: 1px solid #dfdfdf;
  border-radius: 12px;
  margin-top: 10px;
  padding: 8px;
  background-color: #fff;
}
.super-search-dropdown .option1 {
  margin-top: 10px;
}
/* Style the dropdown container */
.super-search-dropdown {
  background-color: #f8f9fa; /* Light background */
  border: 1px solid #ced4da; /* Light gray border */
  border-radius: 5px; /* Rounded corners */
  padding: 5px; /* Inner spacing */
  color: #495057; /* Text color */
  font-size: 16px; /* Font size */
  outline: none;
  width: 150px; /* Adjust width */
  cursor: pointer;
}

/* Add hover effect */
.super-search-dropdown:hover {
  background-color: #e9ecef; /* Slightly darker background */
}

/* Style the options */
.super-search-dropdown option {
  background-color: #ffffff; /* White background for options */
  color: #495057; /* Text color */
  padding: 10px; /* Inner spacing for better readability */
  font-size: 16px; /* Font size */
  margin-top: 20px !important;
}

/* Highlight selected option */
.super-search-dropdown option:checked {
  background-color: #a6a6a6; /* Highlighted background */
  color: #ffffff; /* White text for selected option */
}
.super-search-dropdown option {
  margin-top: 20px; /* Add spacing between options and dropdown */
  padding: 10px; /* Adjust for better option spacing */
  font-size: 16px; /* Ensure options are readable */
  background-color: #f8f9fa; /* Option background color */
  color: #333; /* Option text color */
}
/* Container */
.super-dropdown-container-search {
  position: relative;
  width: 80px;
  height: 46px;
}

/* Dropdown toggle button */
.super-search-dropdown {
  width: 125%;
  padding: 10px;
  font-size: 15px;
  font-weight: 400;
  font-family: poppins;
  background-color: white;
  border: 1px solid #883979;
  cursor: pointer;
  height: 16px;
  margin-top: 4px;
  display: flex;
  align-items: center;

  /* padding-bottom: 12 !important; */
}

/* Dropdown options */
.super-search-dropdown-options {
  position: absolute;
  top: 100%; /* Below the dropdown */
  left: 0;
  margin-top: 12px; /* Ensure spacing between dropdown and options */
  width: 125%;
  border-radius: 8px;
  border: 1px solid #883979;
  background-color: #ffffff;
  list-style: none;
  padding: 0;
  z-index: 1000;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.super-search-dropdown-options li {
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 400;
  font-family: poppins;
}

.super-search-dropdown-options li:hover {
  background-color: #e6e6e6;
  color: #fff;
}
.super-dropdown-icon-search {
  margin-left: 34px; /* Adjust spacing as needed */
  margin-top: 0px;
  display: flex;
  align-items: center;
}

.super-permission-reset-button{
  background-color: #666666;
}

.super-permission-save-button,
.super-permission-reset-button{
  padding: 8px 16px 8px 16px;
  cursor: pointer;
  gap: 10px;
  border-radius: 8px;
  color: white;
}

.super-permission-save-button{
  margin-right: 10px;
  background-color: #883979;
}

.super-control-panel-container {
  background: #f8f8f8;
  width: 849px;
  padding-bottom: 20px;
  top: 120px;
  left: 337px;
  gap: 0px;
  border-radius: 12px;
  opacity: 1;
}
.dark-mode .super-control-panel-container {
  background-color: #1e0419;
  color: white;
}
.super-control-panel-admin-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.super-control-panel-admin-hub-title {
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.0288em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
}

.super-control-panel-tabs {
  width: 706px;
  height: 46px;
  top: 96px;
  left: 32px;
  gap: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.super-control-panel-tab-button {
  width: 225px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #883979;
  color: #883979;
  opacity: 1;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  padding: 0px;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.super-control-panel-tab-button.active {
  background-color: #883979;
  color: white;
}

.super-control-panel-section-title {
  font-family: poppins;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-left: 32px;
}

.super-control-panel-header-row {
  display: flex;
  justify-content: space-between;

  padding: 0px 15px;
  margin-bottom: 16px;
  margin-left: 32px;

  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.dark-mode .control-panel-header-row {
  background-color: #2d1227;
}
.control-panel-header-row {
  display: flex;
  align-items: center;
  /* justify-content: center; */
}
.super-control-panel-patient-reg-label {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-control-panel-type-of-fields {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-left: 75px;
}
.super-control-panel-enable-disable {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-right: 45px;
}

.super-control-panel-basic-info {
  text-align: left;
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #808080;
  margin-left: 44px;
}

.super-control-panel-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 44px;
  margin-top: 10px;
}

.super-control-panel-label {
  flex: 1 1;
  text-align: left;
  padding-left: 8px;
  font-size: 14px;
  font-weight: 400;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.super-control-panel-field-type {
  flex: 1 1;
  text-align: center;
}

.super-control-panel-toggle-container {
  flex: 1 1;
  text-align: center;
}

.super-control-panel-dividerline {
  width: 797px;
  height: 0px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 6px;
  gap: 0px;
  border: 0.5px solid transparent;
  opacity: 1;
  border: 0.5px solid #883979;
}

.super-control-panel-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.super-control-panel-switch input {
  opacity: 1;
  width: 0;
  height: 0;
}

.super-control-panel-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.super-control-panel-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .super-control-panel-slider {
  background-color: #883979;
}

input:checked + .super-control-panel-slider:before {
  transform: translateX(14px);
}

.super-controlpanel-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  margin-right: 100px;
}

.super-save-button-control {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  cursor: pointer;
  width: 72px;
  height: 40px;
  top: 614px;
  left: 668px;
  padding: 7px 12px 10px 14px;
  gap: 8px;
  border-radius: 8px;
}

.super-save-button-control {
  background-color: #666666;
  color: white;
  margin-right: 10px;
}

/* infor icon--------------------------------- */
.control-info-icon-container {
  position: relative;
  display: inline-block;
}

.control-info-icon {
  cursor: pointer;
  color: black;
  margin-left: 10px;
}

.control-info-icon-container {
  position: absolute;
  top: 338px;
  left: 1010px;
}

.control-info-icon-container1 {
  position: absolute;
  top: 376px;
  left: 1020px;
}

.control-info-icon-container2 {
  position: absolute;
  top: 643px;
  left: 1020px;
}

.control-info-icon-container3 {
  position: absolute;
  top: 756px;
  left: 1020px;
}

.control-info-icon-container4 {
  position: absolute;
  top: 794px;
  left: 1020px;
}

.control-info-icon-container5 {
  position: absolute;
  top: 870px;
  left: 1020px;
}

.control-info-icon-container6 {
  position: absolute;
  top: 945px;
  left: 1020px;
}

.control-info-floating-box {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-floating-box2 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-floating-box3 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-floating-box4 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-floating-box5 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-floating-box6 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-icon-container:hover .control-info-floating-box {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-round-info-icon {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.control-payments-admin-switch input:disabled + .payments-admin-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}

.control-info-floating-box1 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.control-info-icon-container1:hover .control-info-floating-box1 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-round-info-icon1 {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.control-panel-switch input:disabled + .control-panel-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}

/* infor icon--------------------------------- */
.app-control-info-icon-container {
  position: relative;
  display: inline-block;
}

.app-control-info-icon {
  cursor: pointer;
  color: black;
  margin-left: 10px;
}

.app-control-info-icon-container {
  position: absolute;
  top: 298px;
  left: 1010px;
}

.app-control-info-icon-container1 {
  position: absolute;
  top: 330px;
  left: 1020px;
}

.app-control-info-floating-box {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.app-control-info-icon-container:hover .app-control-info-floating-box {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.app-control-round-info-icon {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.control-payments-admin-switch input:disabled + .payments-admin-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}

.app-control-info-floating-box1 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.app-control-info-icon-container1:hover .app-control-info-floating-box1 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.app-control-round-info-icon1 {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.control-panel-switch input:disabled + .control-panel-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}

/* infor icon--------------------------------- */
.case-control-info-icon-container {
  position: relative;
  display: inline-block;
}

.case-control-info-icon {
  cursor: pointer;
  color: black;
  margin-left: 10px;
}

.case-control-info-icon-container {
  position: absolute;
  top: 452px;
  left: 1010px;
}

.case-control-info-icon-container1 {
  position: absolute;
  top: 489px;
  left: 1020px;
}

.case-control-info-floating-box {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.case-control-info-icon-container:hover .case-control-info-floating-box {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.case-control-round-info-icon {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.control-payments-admin-switch input:disabled + .payments-admin-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}

.case-control-info-floating-box1 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 1; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.case-control-info-icon-container1:hover .case-control-info-floating-box1 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-info-icon-container2:hover .control-info-floating-box2 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-info-icon-container3:hover .control-info-floating-box3 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-info-icon-container4:hover .control-info-floating-box4 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-info-icon-container5:hover .control-info-floating-box5 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.control-info-icon-container6:hover .control-info-floating-box6 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.case-control-round-info-icon1 {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.control-panel-switch input:disabled + .control-panel-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}

.control-panel-registration-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.control-panel-registration-modal {
  background: #f8f8f8;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dark-mode .control-panel-registration-modal {
  background-color: #1e0419;
}

.first-column {
  display: flex;
  gap: 16px;
}

.control-panel-registration-modal h2 {
  margin-bottom: 20px;
  font-family: Poppins;
  font-size: 22px;
  font-weight: 500;
  line-height: 33px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.dark-mode .control-panel-registration-modal h2 {
  color: #fff;
}

.dark-mode .controlpanel-label {
  color: #fff;
}

.control-panel-registration-add-modal {
  margin-bottom: 15px;
}

.controlpanel-input-add-modal {
  width: 300px;
  padding: 8px;
  background-color: #ffffff;
  border-radius: 8px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  border: white;
  color: #ccc;
}

.controlpanel-input:hover {
  border: 1px solid #883979;
  cursor: pointer;
}

.dark-mode .controlpanel-input {
  background-color: transparent !important;
  border: 1px solid #883979;
  color: white;
}

.dark-mode .controlpanel-input::placeholder {
  color: white;
}

.dark-mode .controlpanel-input:focus {
  background-color: transparent;
  border: 1px solid #883979;
}

.control-panel-registration-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.control-panel-registration-submit-button {
  background-color: #883979;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.control-panel-registration-submit-button:hover {
  background-color: #6b2d60;
  cursor: pointer;
}

.control-panel-registration-close-button {
  background-color: #ccc;
  color: #000;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.control-panel-registration-close-button:hover {
  background-color: #cececeab;
  cursor: pointer;
}

.control-panel-registration-open-modal-button {
  background-color: #6c63ff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* Main Container */
.super-feedback-container {
  width: 835px;
  height: 375px;
  position: relative;
  top: 0px;
  left: 0px;
  border-radius: 16px;
  background-color: #f8f8f8;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dark-mode .super-feedback-container {
  background-color: #1E0419;
  color: white;
}

.dark-mode .super-description {
  color: white;
}

.dark-mode .super-select-title {
  color: white;
}

.dark-mode .super-textarea {
  background-color: #1E0419;
  border: 1px solid #ccc;
}

.dark-mode .super-select-dropdown {
  background-color: #1E0419;
  border: 1px solid #ccc;
}

.dark-mode .super-select-dropdown option {
  color: white;
}

/* Description Section */
.super-description {
  width: 711px;
  height: 56px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  color: black;
}

/* Select Section */
.super-select-section {
  width: 380px;
  height: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.super-select-title {
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
}

.super-select-dropdown {
  height: 40px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  outline: none;
  cursor: pointer;
}

/* Textarea Section */
.super-textarea-section {
  position: relative;
  width: 787px;
  height: 80px;
}

.super-textarea {
  position: absolute;
  width: 770px !important;
  height: 100%;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  resize: none;
  outline: none;
  margin-left: 0px;
}

.super-attachment-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 20px;
  cursor: pointer;
}

/* Submit Button */
.super-submit-button {
  width: 79px;
  height: 39px;
  border-radius: 8px;
  border: none;
  background-color: #883979;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  transition: background-color 0.3s ease;
}

.super-submit-button:hover {
  background-color: #772f68;
}

.dark-mode .super-select-dropdown .dark-mode .input-section-professional-development option {
  color: #ccc !important;
}

.dark-mode .super-select-dropdown {
  color: white !important;
}
/* General Container Styling */
.announcement-form-container {
  width: 804px;
  /* margin: 0 auto; */
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #f8f8f8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: "Open Sans", sans-serif;
  margin-bottom: 10px;
}
.dark-mode .announcement-form-container {
  background-color: #1e0419;
  border: 0px;
}

.announcement-form-input:hover,
.announcement-form-input-time:hover,
.description-input:hover {
  border-color: purple; /* Change border color on hover */
  cursor: pointer; /* Change cursor to pointer */
}
.announcement-form-group-time label {
  color: black; /* Default label color */
}
.view-more-btn {
  font-size: 12px; /* Small button size */
  padding: 5px 10px; /* Small padding */
  border-radius: 15px; /* Round border */
  border: 1px solid purple; /* Border color */
  background-color: transparent; /* Transparent background */
  color: purple; /* Text color */
  cursor: pointer; /* Pointer cursor */
  transition: all 0.3s ease; /* Smooth hover effect */
}

.view-more-btn:hover {
  background-color: purple; /* Purple background on hover */
  color: white; /* White text on hover */
  border-color: purple; /* Consistent border on hover */
}

/* Header Buttons */
.announcement-form-header {
  display: flex;
  align-items: center;
  gap: 10px; /* Space between buttons */
  margin-bottom: 20px;
}
.dark-mode .announcement-form-header {
  background-color: #2d1227;
}
.dark-mode .announcement-form-header-btn {
  color: white;
}
.dark-mode .heading-of-update {
  color: white;
}
.dark-mode .view-more-btn-admin {
  color: #b3b3b3;
}
/* Base button styling */
.announcement-form-header-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  background-color: transparent;
  color: black;
  transition: all 0.3s ease;
}
.announcement-form-header-btn:hover {
  background-color: #883979; /* Purple background */
  color: white;
}

.announcement-form-header-btn-active {
  background-color: #883979;
  color: white;
}

/* Form Layout */
.announcement-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}

.announcement-form-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.announcement-form-group {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.announcement-form-group label {
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}
.dark-mode .announcement-form-group label {
  color: #ffffff;
}
.announcement-form-input:focus {
  outline: none;
  border-color: #883979;
}
.dark-mode .announcement-form-input {
  background-color: #1e0419;
  border: 1px solid #b3b3b3;
  color: white;
}
.dark-mode .announcement-form-input-time {
  background-color: #1e0419;
  border: 1px solid #b3b3b3;
  color: #b3b3b3 !important;
}
.dark-mode .announcement-form-input-time2 {
  background-color: #1e0419;
  border: 1px solid #b3b3b3;
  color: #b3b3b3 !important;
}
.dark-mode .description-input {
  background-color: #1e0419;
  border: 1px solid #b3b3b3 !important;
  color: white;
}
.announcement-form-textarea {
  resize: none;
  height: 100px;
}

.announcement-form-submit-btn {
  display: inline-block;
  width: 146px;
  padding: 12px;
  font-size: 16px;
  color: white;
  background-color: #883979;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease;
}

.announcement-form-submit-div {
  display: flex;
  justify-content: end;
}

.announcement-form-submit-btn:hover {
  background-color: #6e2c62;
}

.announcement-form-textarea {
  width: 382px;
  height: 46px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  margin-top: 5px;
  color: #b3b3b3;
}
.announcement-form-input option[value=""] {
  color: gray;
}

.announcement-form-input option:not([value=""]) {
  padding: 0px !important;
  background-color: white;
  color: #883979;
  font-family: open Sans;
}

.announcement-form-input-time {
  width: 173px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
  margin-top: 5px;
  color: #b3b3b3;
  margin-right: 20px;
}
.announcement-form-input-time2 {
  width: 173px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
  margin-top: 5px;
  color: #b3b3b3;
  margin-right: 10px;
}
.announcement-form-input::placeholder {
  padding-left: 5px;
}

.description-input {
  border: 1px solid #ddd !important;
  width: 787px !important;
  margin-left: 0px !important;
  border-radius: 10px !important;
  font-size: 14px;
}

.description-input:hover {
  border-color: #883979;
}

.description-input::placeholder {
  padding: 10px;
  font-family: "Open Sans", sans-serif;
}
.announcement-form-description:hover {
  border-color: #883979;
}
.heading-of-update {
  margin-bottom: -19px;
  margin-left: 10px;
}
.announcement-container-box {
  top: 50%;
}
.dark-mode .announcement-container-box {
  background-color: #1e0419;
  border: 1px solid #808080;
  color: white;
}
.dark-mode .close-button-all-announcements-modify {
  color: white;
}
.dark-mode .announcement-container-box h3 {
  color: white;
}

.admin-announcements-card-container {
  width: 359px;
  /* height: 241px; */
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
  background-color: #fff;
  margin-bottom: 16px;
}
.dark-mode .admin-announcements-card-container{
  background-color: #2D1227;
  border: 1px solid #808080;
}

.admin-announcements-card-header {
  display: flex;
  margin-right: 30px;
  justify-content: space-between;
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
strong {
  color: #9b9999;
  font-family: Poppins;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.admin-announcements-card-details {
  display: flex;
  justify-content: space-between;
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.admin-announcements-card-description1 {
  margin-top: 10px;
  font-size: 14px;
}

.admin-announcements-card-description1 p {
  margin: 4px 0 0;
}

.admin-announcements-card-modify {
  width: 73px;
  height: 30px;
  top: 195px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #883979;
  margin-right: 250px;
}

.admin-announcements-card-modify:hover {
  background-color: #8b4577; /* Adjust hover color */
  color: #fff;
}

.announcement-container-all {
  width: 100%;
  max-height: 740px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: space-between;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}

.strong-grey {
  color: grey;
}

.bold-black {
  font-weight: bold;
  color: black;
}
.margin-sides {
  margin-left: 0px;
  margin-right: 82px;
}
.category-margin {
  margin-right: 80px;
}
.dark-mode .category-margin{
  color: white;
}
.dark-mode .margin-sides{
  color: white;
}
.dark-mode .margin-sides p{
  color: white;
}
.dark-mode .admin-announcements-card-details{
  color: white;
}
.dark-mode .admin-announcements-card-description1{
  color: white;
}
.dark-mode .admin-announcements-card-modify{
  color:#883979;
}
.modify-announcement-container {
  width: 825px;
  height: 560px;
  top: 50.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 24px;
  background-color: #f8f8f8;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: 99;
}

.modify-announcement-title {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;

  margin-bottom: 20px;
}

.modify-announcement-form {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modify-announcement-row {
  display: flex;
  gap: 26px;
  width: 100%;
}

.modify-announcement-label {
  display: block;

  color: #333;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.modify-announcement-select,
.modify-announcement-input,
.modify-announcement-textarea {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  color: #b3b3b3;
}
.modify-announcement-select:hover,
.modify-announcement-input:hover,
.modify-announcement-textarea:hover {
  border-color: purple; /* Change border color to purple */
  cursor: pointer; /* Change cursor to pointer */
}

.modify-announcement-input {
  margin-top: 14px;
  height: 22px;
}

.modify-announcement-textarea {
  height: 100px;
  width: 790px !important;
  margin-left: 0px !important;
}

.modify-announcement-submit {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.modify-announcement-submit:hover {
  background-color: #45a049;
}

.close-button-annoucements-modify {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  z-index: 999;
  height: 26px;

  font-size: 12px;
  color: #000000;
  font-weight: bolder;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* General Container */
.super-algorithm-container {
  background: #f8f8f8;
  width: 849px;
  max-width: 900px;
  margin: 20px auto;
  font-family: "Open Sans", sans-serif;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #333;
  position: relative;
  top: 60px;
}

/* Section Styles */
.super-algorithm-section {
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.super-section-title {
  color: #883979;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Header Row */
.super-header-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-weight: bold;
  background-color: #fcf3fa;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  color: black;
}

.super-header-label {
  font-size: 14px;
  color: #000000;
}

/* Divider Between Sections */
.super-divider {
  height: 2px;
  background: #e8d6e7;
  margin: 20px 0;
}

/* Category Styles */
.super-category-section {
  margin-top: 15px;
}

.super-category-title {
  color: #883979;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: start;
  padding-left: 16px;
}

/* Algorithm Row */
.super-algorithm-row {
  padding-left: 25px;
  width: 730px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.super-algorithm-name {
  font-size: 14px;
  color: #555;
  padding-left: 16px;
}

/* Toggle Switch */
.super-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.super-switch input {
  display: none;
}

.super-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 20px;
}

.super-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .super-slider {
  background-color: #883979;
}

input:checked + .super-slider:before {
  transform: translateX(14px);
}
/* Top Section Styles */
.super-top-section {
  width: 395px;
  height: 43px;
  position: absolute;
  top: 58px;
  left: 275px;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  background-color: #f8f8f8;
  padding: 8px;
}
.dark-mode .super-top-section{
  background-color: #2D1227;
}
.dark-mode .super-top-button {
  color: white;
}
.dark-mode .super-algorithm-section{
  background-color: #2D1227;
  border-radius: 0px !important;
}
.dark-mode .super-header-row{
  background-color: #2D1227;
  color: white;
}
.dark-mode .super-header-label,
.dark-mode .super-algorithm-name{
  color: white;
}
.super-top-button {
  width: 188px;
  height: 39px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.super-top-button.active {
  background-color: #883979;
  color: white;
}

/* Update Button Styles */
.super-update-button {
  width: 79px;
  height: 39px;
  position: absolute;
  top: 454px;
  left: 770px;
  border-radius: 8px;
  border: none;
  background-color: #883979;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.super-update-button:hover {
  background-color: #682b5d;
}

.super-admin-main-container {
  width: 835px;
  background-color: #f8f8f8;
  border-radius: 16px;
  padding: 24px;
  box-sizing: border-box;
}
.dark-mode .admin-main-container{
  background-color: #1E0419;
}

.super-admin-header h2 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}
.dark-mode .admin-header h2{
  color: white;
}
.super-admin-records-section h3 {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-left: 16px;
  margin-bottom: 8px;
}
.dark-mode .admin-records-section h3{
  color: #CCCCCC;
}
.super-admin-records-list {
  display: flex;
  flex-direction: column;
  background-color: white;
}
.dark-mode .admin-records-list{
  background-color: #2D1227;
}
.dark-mode .admin-record-item{
  background-color: #2D1227;
}
.super-admin-record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 8px 16px;
}
.dark-mode .admin-record-item{
  color: #CCCCCC;
}
.super-admin-view-button {
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
}

.super-admin-logs-section h3 {
  font-size: 18px;
  margin-top: 24px;
  margin-bottom: 8px;
}

.super-admin-logs-table {
  width: 100%;
  border-spacing: 0;
  margin-bottom: 16px;
}

.super-admin-logs-table th {
  text-align: left;
  background-color: #f8f8f8;
  padding: 8px 16px;
}

.super-admin-logs-table td {
  padding: 8px 15px;
}

.super-admin-log-row.admin-row-0 {
  background-color: #ffffff;
}

.super-admin-log-row.admin-row-1 {
  background-color: #f8f8f8;
}

.super-admin-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.super-admin-pagination-prev {
  background-color: white;
  color: black;
  border: none;
  border-radius: 100px;
  width: 32px;
  height: 32px;
  padding: 8px 12px;
  cursor: pointer;
  padding: 10px;
}
.super-admin-pagination-next {
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 100px;
  width: 32px;
  height: 32px;
  padding: 8px 12px;
  cursor: pointer;
  padding: 10px;
}

.super-admin-pagination-prev:hover {
  background-color: #883979;
  color: white;
}

.super-admin-pagination-info {
  font-size: 14px;
  color: #000;
}
.super-admin-logs-table th:nth-child(1),
.super-admin-logs-table td:nth-child(1) {
  width: 8%; /* Smaller width for the S.No column */
}

.super-admin-logs-table th:nth-child(3),
.super-admin-logs-table td:nth-child(3) {
  width: 45%; /* Larger width for the Date & Time column */
}

.super-admin-logs-table th:nth-child(2),
.super-admin-logs-table td:nth-child(2) {
  width: 23%;
}
.dark-mode .admin-pagination-info{
  color: white;
}
.dark-mode .admin-logs-section h3{
  color: white;
}

.super-admin-log-row {
  height: 50px; /* Ensures each row has a height of 46px */
}

.super-admin-logs-table th:nth-child(5),
.super-admin-logs-table td:nth-child(5) {
  width: 35%;
}
.dark-mode .recordslogs-search-bar{
  background-color: #2D1227;
}
.dark-mode .admin-logs-table th{
  background-color: #1E0419;
}
.dark-mode .admin-logs-table tr{
  background-color: #1E0419;
}





.admin-view-button{
  position: absolute;
  right: 10px;
}
.patientrecords-tb-container {
    padding: 20px;
  }

  .dark-mode .patientrecords-tb-container{
    background-color: #2d1227;
  }
  
  .patientrecords-tb-heading {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #5e5e5e;
  }
  
  .patientrecords-tb {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Arial', sans-serif;
  }
  
  .patientrecords-tb-thead {
    background-color: #f9f9f9;
  }
  
  .patientrecords-tb-header-row {
    border-bottom: 1px solid #ddd;
  }
  
  .patientrecords-tb-header-cell {
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: #8a8a8a;
    padding: 12px 8px;
  }
  
  .patientrecords-tb-body .patientrecords-tb-row {
    background-color: #fff;
    transition: background-color 0.3s ease;
  }
  
  .patientrecords-tb-body .patientrecords-tb-row:nth-child(odd) {
    background-color: #f7f7f7;
  }
  
  .patientrecords-tb-body .patientrecords-tb-row:hover {
    background-color: #f3f3f3;
  }
  
  .patientrecords-tb-cell {
    font-size: 14px;
    color: #3e3e3e;
    padding: 12px 8px;
    text-align: left;
  }
  
  .patientrecords-tb-download-btn {
    background-color: #883979;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
  }
  
  .patientrecords-tb-download-btn:hover {
    background-color: #6937d6;
  }
  
  .patientrecords-tb-remove-btn {
    background-color: #f8d7da;
    color: #d9534f;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
  }
  
  .patientrecords-tb-remove-btn:hover {
    background-color: #f4b0b5;
  }
.super-header-container {
  width: 100%;
  height: 80px;
  position: sticky; /* Use sticky positioning */
  top: 0; /* Stick to the top */
  background: #f8f8f8; /* Header background */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99999; /* Keep it above other elements */
}
.super-header-container.dark-mode {
  background-color: #1e0419; /* Dark mode background color */
  color: white; /* Text color in dark mode */
}

/* Greeting Section */
.super-greeting-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 60px 16px 60px;
  gap: 20px;
}

.super-greeting-container-box {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  background-color: white;
  height: 46px;
  width: 200px;
  padding: 0px 12px;
  border-radius: 8px;
}
.dark-mode .super-greeting-container-box {
  background-color: #2d1227;
}

.dark-mode .super-greeting-text {
  color: white; /* White text in dark mode */
}

.super-greeting-text {
  color: #000;
  color: var(--Primary-Base-Black, #000);

  /* Desktop Fonts/Body/Body Regular/Body 1 Regular */
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;

  /* 150% */
  letter-spacing: 0.691px;
}

.super-avatar-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.super-avatar {
  width: 38px;
  height: 38px;
  /* background: #e6e6e6; */
  border-radius: 50%;
}

.super-avatar img {
  width: 42px;
  height: 38px;
  border-radius: 50%;
}

.super-dropdown-icon {
  width: 24px;
  height: 24px;
  position: relative;
  margin-left: 8px;
  cursor: pointer; /* Optional: add pointer to indicate it's clickable */
}

.super-dropdown-arrow {
  width: 6.71px;
  height: 11.31px;
  position: absolute;
  top: 8px;
  left: -6px;
  transition: transform 0.2s ease; /* Smooth transition */
}

/*notification dropdown*/
.super-notification-dropdown {
  position: absolute;
  margin-top: 10px;
  top: 80px;
  right: 0;
  padding-top: 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  width: 500px;
  height: 404px;
  z-index: 1000;
  right: 120px;
  /* padding: 20px; */
  /* Allow scrolling if content exceeds height */
  display: flex; /* Change: Use flexbox for vertical alignment */
  flex-direction: column; /* Change: Stack items vertically */
  /* gap: 32px; */
}

.super-notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 10;
}
.super-drop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent black */
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  transition: opacity 0.5s ease-in-out; /* Fade-in transition */
}

.super-notification-item {
  position: relative;
  display: flex; /* Change: Added to align items in a row */
  align-items: center;
  width: 444px; /* Set the width */
  height: 80px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  font-size: 20px;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #d0d0d0;
  font-weight: 600;
  color: #b5b5b5;
  cursor: pointer;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.super-close-button-appointments {
  position: absolute;
  top: 20px;
  right: 36px;
  z-index: 999; /* Ensure the button is on top of other elements */
  width: 24px;
  height: 24px;

  border-radius: 50%;
  font-size: 20px;
  font-weight: bolder;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.super-close-button:hover {
  background-color: #f8d7da;
  color: #721c24;
}
.super-notification-image .super-circle-image {
  width: 66px;
  height: 66px;
  top: 48px;
  left: 24px;
  margin-top: 12px;
  margin-left: 12px;
  margin-bottom: 12px;
  border-radius: 50%;
  margin-right: 10px;
  align-items: flex-start;
}

.super-notification-item:last-child {
  margin-bottom: 22px;
}

/* .notification-item:hover {
  background-color: #f0f0f0;
} */
.super-notification-title {
  font-family: Open Sans;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
}

.super-notification-time {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
  letter-spacing: 0.032em;
  text-align: left;
  color: #808080;
  margin-bottom: 10px;
}
.super-clear-all {
  text-align: right; /* Align text to the right */
  font-family: Open Sans;
  margin-right: 24px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  color: #b8b8b8;
}

.super-clear-all:hover {
  cursor: pointer;
}
/*notification dropdown end */

.dark-mode .super-dropdown-arrow {
  color: #f0f0f0;
}

/* Dropdown Menu */
.super-header-dropdown-menu {
  position: absolute;
  top: 90px;
  right: 168px;
  background: white;
  border: 1px solid #b3b3b3;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  width: 288px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border-radius: 8px 0px 8px 8px;
  border-width: 0 0 0 0; /* Correct shorthand for border-width */
  border-style: solid; /* Specify the border style */
  border-color: currentColor;
  border-color: initial; /* Optional: specify border color */
  overflow: hidden;
  pointer-events: auto;
  /* padding: 0 16px 0px 16px; */
}

.super-dropdown-item-logout {
  padding: 10px;
  color: black;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  width: 256px;
  padding: 16px 0px;

  text-align: left;
}
.dark-mode .super-header-dropdown-menu {
  background-color: #2d1227;
  border: solid 1px #b8b8b8;
  box-shadow: 0 0 0 1px #1e0419;
  color: white;
}

.super-dropdown-item {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  padding: 16px 10px 16px 16px;
  pointer-events: auto;
  letter-spacing: 0.032em;
  text-align: left;
  position: relative; /* Position for pseudo-element */
  color: black;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  /* border-bottom: 1px solid #e6e6e6;
    display: inline-block;
    width: 89%;
    margin-left: 16px; */
  transition: background 0.2s, color 0.2s;
}

/* .super-dropdown-item .margin-left {
  margin-left: 16px;
} */

.super-dropdown-item:not(:last-child)::after {
  content: "";
  display: block;
  width: 90%; /* Adjust width as needed for shorter line */
  margin: 0 auto;
  border-bottom: 1px solid #b3b3b3; /* Line color */
  position: absolute;
  bottom: 0;
  left: 5%; /* Centers the line */
}

.super-dropdown-item:hover::after {
  border-bottom-color: #883979; /* New color on hover */
}

.dark-mode .super-dropdown-item {
  color: white; /* White text in dark mode */
}

.dark-mode .super-margin-left-logout {
  color: red;
}

.super-margin-left-logout {
  color: red;
  margin-left: 0px;
}

.super-dropdown-item:hover {
  background: #883979;
  box-sizing: border-box;
  color: #e6e6e6;
  border-radius: 0px 0px 0px 0px;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: currentColor;
  border-color: initial;
}

.dark-mode .super-dropdown-item:hover {
  background: #ad499a;
}

/* Logo Section */
.super-logo-container img {
  width: 150px;
  /* Adjust width as per your requirement */
  height: auto;
  padding: 16px 60px 16px 60px;
}

.dark-mode .super-logo-container {
  color: #faf3f3;
}
/* Icon Buttons Section */
.super-icon-button-container {
  display: flex;
  gap: 15px;
}

.super-icon-button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
  position: relative;
}

.super-icon-button .super-notiIcon {
  transition: color 0.2s; /* Optional: smooth transition for color change */
}

.super-icon-button:hover {
  background-color: #883979;
  color: white;
}

.super-icon-button .super-notiIcon:focus {
  background-color: #883979;
}

.super-icon-button:focus {
  background: #ad499a;
  outline: none; /* Removes default focus outline */
  box-shadow: 0 0 0 3px rgba(173, 73, 154, 0.4); /* Adds a soft focus ring */
}

.super-icon-button img {
  width: 24px;
  height: 24px;
}
/*
.icon-button img {
  filter: invert(0); 
}

.dark-mode .icon-button img {
  color: pink; 
} */

.dark-mode .super-icon-button {
  background: #2d1227;
}

.super-dark-mode .icon-button:hover {
  background: #ad499a;
}

.dark-mode .super-toggle-button {
  background-color: white !important;
}
.light-mode .super-icon-button svg {
  fill: black;
}

/* Dark mode: White icons */
.dark-mode .super-icon-button svg {
  fill: white;
}

.super-logout-dropdown {
  color: red;
  border-bottom: none;
}

/* .logout-dropdown:hover{
  color: white !important;
}


.margin-left-logout:hover{
  color: white;
} */

/* This will apply the white color to the text when you hover over .logout-dropdown */
.super-logout-dropdown:hover,
.super-logout-dropdown:hover .super-margin-left-logout {
  color: white;
}

/* Progress Bar Styles */
.super-doctor-dashboard-progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 0px;
  z-index: 9999;
}

.super-doctor-dashboard-progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
  z-index: 9999;
}

.dark-mode .super-notification-dropdown {
  background-color: #2d1227;
  color: white;
}

.dark-mode .super-notification-dropdown .super-notification-title {
  color: white;
}

/* Progress Bar Styles */
.super-doctor-dashboard-progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 0px;
  z-index: 999;
}

.super-doctor-dashboard-progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
}

@media (max-width: 768px) {
  .super-greeting-text {
    font-size: 20px; /* Slightly smaller font size */
    line-height: 30px; /* Adjust line-height accordingly */
    width: 150px;
  }
}

/* Media query for small screens (e.g., mobile phones) */
@media (max-width: 480px) {
  .super-greeting-text {
    font-size: 18px; /* Smaller font size for mobile */
    line-height: 28px; /* Adjust line-height accordingly */
    width: 130px;
  }
}

.super-appointment-dropdown {
  position: absolute;
  margin-top: 10px;
  top: 50%;
  bottom: 50%;
  padding-top: 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  width: 1081px;
  height: 750px;
  z-index: 1000;
  left: 50%;
  right: 50%;
  padding: 1%;
  transform: translate(-50%, -50%); /* padding: 10px; */
  /* Allow scrolling if content exceeds height */
  display: flex; /* Change: Use flexbox for vertical alignment */
  flex-direction: column; /* Change: Stack items vertically */
  overflow-y: auto; /* Enable vertical scrolling if content exceeds */
  scrollbar-width: thin; /* For Firefox: make scrollbar thinner */
  scrollbar-color: #ccc #fff; /* For Firefox: custom scrollbar colors */
  overflow-x: hidden;
}

.super-appointment-header {
  color: black;
}

.super-appointment-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1048px;
  height: 42px;
  background-color: #f9f5f8; /* Background color for the header row */
  border-radius: 2px;
}

.super-table-header-appointment {
  /* background-color: #f9f5f8; */
  color: #883979 !important;
  text-align: center !important;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-table-header-appointment {
  flex: 1 1;
  color: #883979 !important;
}

.super-table-appointment-body-row {
  padding-left: 60px;
  width: 1021px;
  height: 42px;
  font-size: 14px;
}

.super-table-data {
  text-align: center !important;
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-left: 30px;
}

.super-table-title,
.super-table-date-time,
.super-table-symptoms {
  text-align: start;
  padding-left: 29px;

  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-table-buttons {
  display: flex;
}
.super-table-symptoms {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.super-table-symptoms:hover::after {
  content: attr(data-full-text);
  position: absolute;
  left: 0;
  top: -30px; /* Adjust the tooltip's vertical position */
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
  white-space: normal;
  max-width: 200px; /* Tooltip max width */
  overflow-wrap: break-word;
}

.super-reject-button,
.super-accept-button {
  width: 70px;
  height: 25px;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.super-table-buttons .super-accepted-button {
  background-color: #ad499a;
  color: white;
  width: 70px;
  height: 25px;
  border: none;
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  line-height: 15px;
  font-size: 12px;
  transition: opacity 0.2s ease-in-out;
}

.super-reject-text {
  color: red;
  font-size: 12px;
  cursor: pointer;
  font-weight: bold;
  margin-left: 10px;
}

.super-table-buttons .super-accepted-button:hover {
  opacity: 0.8;
}

.super-accepted-button,
.super-rejected-button {
  width: 100%;
  height: 25px;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.super-accepted-button {
  color: #33bb39;
}

.super-rejected-button {
  color: red;
}

.super-table-buttons {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: 7px;
}

.super-reject-button {
  color: red;
  border: none;
}

.super-reject-button:hover {
  color: red;
  background-color: white;
}

.super-appoint-align-id {
  position: relative;
  left: -14px;
}

.super-appoint-align-t {
  position: relative;
  left: -50px;
}

.super-appoint-align-DT {
  position: relative;
  left: -34px;
}

.super-appoint-align-sy {
  position: relative;
  left: -34px;
}

.super-appoint-align-st {
  position: relative;
  left: -61px;
}

/* Button container */
.super-appointment-btn-header {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 30px;
  margin-top: 20px;
  margin-left: 5px;
  margin-right: 14px;
}

.super-appoint-btn-header {
  flex: 1 1;
  padding: 15px 82px;
  border: 2px solid transparent;
  border-radius: 8px;
  border: 1px solid #883979;
  font-size: 16px;
  margin-left: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  color: #883979;
  background-color: transparent;
}

.super-appoint-btn-header:hover {
  background-color: #f5f5f5;
  color: #883979;
  border-color: #883979;
}

/* Active button styles */
.super-appoint-btn-header.selected {
  border-color: #800080;
  color: #ffffff;
  background-color: #883979;
}

.super-appointment-title {
  font-family: Poppins;
  font-weight: 600;
  font-size: 28px;
  display: flex;
  justify-content: center;
}

.dark-mode .super-appointment-dropdown {
  background-color: #1e0419;
  border-color: #1e0419;
}

.dark-mode .super-appointment-header-row {
  background-color: #883979;
}

.dark-mode .super-appointment-title {
  color: white;
}
/* .super-margin-left1{
  margin-left: 17px;
} */

/*.footer-container {
    display: inline-flex;
    padding: 16px 60px;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: 648px;
}*/
.super-footer-container-box {
  /* Sticky footer */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #f8f8f8;

  z-index: 999;
}

.dark-mode .super-footer-container-box {
  background-color: #1e0419;
}
.dark-mode .super-footer-info-date,
.super-footer-timezone-text {
  color: #e6e6e6;
}

.dark-mode .super-footer-info-time {
  color: #e6e6e6;
}

.dark-mode .super-footer-timezone-select {
  color: #e6e6e6;
}

.super-footer-left-section,
.super-footer-right-section {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 60px; /* Reduce padding for left and right sections */
}

.super-footer-icon-button {
  width: 30px; /* Reduce button size */
  height: 30px; /* Reduce button size */
  padding: 5px; /* Reduce padding */
  background: #f3f3f3;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}



.super-footer-icon-button:hover {
  background: #883979;
  color: #ffffff !important;
}
.super-footer-icon-button.active {
  background: #883979;
  color: #ffffff;
}

.dark-mode .super-footer-icon-button:hover {
  background: #ad499a;
}
.dark-mode .super-footer-icon-button.active {
  background: #ad499a;
}

.dark-mode .super-footer-icon-button {
  background-color: #1e0419;
}

.dark-mode .super-footer-icon-button img {
  filter: invert(1);
}

.super-footer-icon-background {
  width: 24px;
  height: 24px;
  position: relative;
}

.super-footer-icon {
  width: 19px;
  height: 19px;

  left: 2.5px;
  top: 2.5px;
}

.dark-mode .super-footer-icon{
  color: white;
}

.super-footer-info {
  display: flex;
  align-items: center;
  gap: 12px; /* Reduce the gap */
}

.super-footer-info-text {
  display: flex;
  gap: 6px; /* Reduce the gap */
}

.super-footer-info-date,
.super-footer-info-time,
.super-footer-timezone-text {
  color: black;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  white-space: nowrap;
}

.super-footer-timezone {
  display: flex;
  align-items: center;
  gap: 6px; /* Reduce the gap */
}

.super-footer-timezone-select {
  background: none;
  border: none;
  color: black;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  cursor: pointer;
  width: 140px;
}
.dark-mode .super-footer-timezone-select {
  background-color: #1e0419;
}
.dark-mode .super-footer-timezone-select option {
  color: white;
}

.super-footer-timezone-icon {
  width: 20px; /* Reduce icon size */
  height: 20px; /* Reduce icon size */
  position: relative;
  transform: rotate(-90deg);
  transform-origin: 0 0;
}

.super-footer-arrow {
  width: 6.71px;
  height: 11.31px;
  position: absolute;
  left: 8.35px;
  top: 6.35px;
  background: black;
}
.custom-dropdown-wrapper-timeZone {
  position: relative;
  width: 100%;
}

.custom-dropdown-timeZone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  padding-right: 40px;
  padding-left: 0px;
  border: 0px solid #883979;
  border-radius: 5px;
  background-color: #f8f8f8;
  cursor: pointer;
}
.dark-mode .custom-dropdown-timeZone {
  background-color: #1e0419;
}

.custom-dropdown span {
  font-size: 16px;
  color: #333;
}

.dropdown-icon {
  font-size: 12px;
  color: #883979;
}

.custom-dropdown-options-timeZone {
  position: absolute;
  top: -920%;
  left: 0;
  max-height: 400px;
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden;
  width: 100%;
  margin-top: 10px;
  padding: 0;
  list-style: none;
  border: 1px solid #883979;
  background-color: #fff;
  border-radius: 5px;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Hide scrollbar for all browsers */
  scrollbar-width: none; /* Firefox */
}
.custom-dropdown-options-timeZone::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Edge */
}

.custom-dropdown-option-timeZone {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  color: #333;
}
.dark-mode .custom-dropdown-option-timeZone {
  background-color: #1e0419;
  color: white;
}

.custom-dropdown-option-timeZone:hover {
  background-color: #883979;
  color: #fff;
}
.dark-mode .super-about-popup  {
  color: white;
}
.dark-mode .super-select-dropdown-container{
  background-color: #1e0419;
}
.dark-mode .super-select-options-container{
  background-color: #1e0419;
}
.dark-mode .super-select-selected-text{
  color: white;
}

/* Container */
.super-manage-staff-container {
  font-family: Arial, sans-serif;
  padding: 0px;
}

/* Header and Stats Combined Container */
.super-manage-staff-header-and-stats {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  width: 804px;
  height: 235px;
  top: 120px;
  left: 337px;
  padding: 24px 24px 10px 24px;
  gap: 24px;
  border-radius: 12px;
  background-color: #f8f8f8;
}
.dark-mode .landing-contact-v2-phone-code {
  background-color: #1e0419 !important;
}
.dark-mode .super-manage-staff-header-and-stats {
  background-color: #1e0419;
}
.dark-mode .super-header-btn {
  background-color: #1e0419;
  color: white;
}
/* Header */
.super-manage-staff-header {
  display: flex;

  margin-top: 15px;

  height: 48px;
  background-color: #ffffff;
  gap: 24px;

  width: 325px;

  top: 16px;
  left: 16px;
  padding: 8px 16px 7px 16px;

  border-radius: 12px;
}
.dark-mode .super-manage-staff-header {
  background-color: #2d1227;
}
.dark-mode .super-manage-staff-header2 {
  background-color: #2d1227;
}
.super-manage-staff-stat-box1 p,
.super-manage-staff-stat-box2 p,
.super-manage-staff-stat-box3 p {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  margin-top: -20px;
  text-align: left;
  margin-left: 60px;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;

  color: #000000;
}
.super-manage-staff-stat-box1 h2,
.super-manage-staff-stat-box2 h2,
.super-manage-staff-stat-box3 h2 {
  margin-left: 12px;
  margin-top: 16px;
  font-family: Open Sans;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.024em;
  text-align: left;
  font-family: Open Sans;
  line-height: 54.47px;
}

.super-error {
  color: red;
}

.super-second-part-manage {
  width: 849px;
}
.inactive-section {
  height: 280px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.inactive-section::-webkit-scrollbar {
  width: 8px;
  border-radius: 100px;
}

.inactive-section::-webkit-scrollbar-thumb {
  background-color: #883979;
  border-radius: 100px;
}

.inactive-section::-webkit-scrollbar-track {
  background: transparent;
}

.inactive-section::-webkit-scrollbar-thumb:hover {
  background-color: #883979;
}
.super-header-btn {
  background-color: #fff; /* White background for contrast */

  height: 46px;
  cursor: pointer;
  color: #883979; /* Text color */
  transition: all 0.3s ease; /* Smooth hover effect */
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
  border: none;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.super-header-btn.active {
  background-color: #883979; /* Active background color */
  color: white; /* Active text color */
  width: 86px;
  height: 43px;
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
}

/* Hover Effect */
.super-header-btn:hover {
  background-color: #883979; /* Change background color on hover */
  color: #fff; /* Change text color to white on hover */
  width: 86px;
  height: 43px;
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
}

.super-header-btn2 {
  background-color: #fff; /* White background for contrast */

  height: 40px;
  cursor: pointer;
  color: #883979; /* Text color */
  border: 1px solid #883979;
  transition: all 0.3s ease; /* Smooth hover effect */
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  transition: background-color 0.3s, color 0.3s;
  white-space: nowrap;
}
.dark-mode .super-header-btn2 {
  background-color: #2d1227;
  border: 1px solid #883979;
  color: #883979;
}

/* Hover Effect */
.super-header-btn2:hover {
  background-color: #883979; /* Change background color on hover */
  color: #fff; /* Change text color to white on hover */
  top: 8px;
  left: 16px;
  padding: 6px 16px 6px 16px;
  gap: 8px;
  border-radius: 8px;
}
.super-header-btn2.active-btn {
  background-color: #883979;
  color: white;
}

/* Stats Section */
.super-manage-staff-stats {
  display: flex;

  gap: 32px;
}

.super-manage-staff-stat-box1,
.super-manage-staff-stat-box2,
.super-manage-staff-stat-box3 {
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  width: 251px;
  height: 126px;
  top: 80px;
  left: 16px;
  gap: 0px;
  border-radius: 16px;

  background-color: #fff;
}
.dark-mode .super-manage-staff-stat-box1,
.dark-mode .super-manage-staff-stat-box2 {
  background-color: #2d1227;
  color: white;
}
.dark-mode .super-manage-staff-stat-box3 {
  background-color: #2d1227;
  color: white;
}
.super-manage-staff-stat-box1:hover {
  background-color: #ffe6fa;
  transform: scale(1.05);
}
.dark-mode .super-manage-staff-stat-box1:hover,
.dark-mode .super-manage-staff-stat-box2:hover,
.dark-mode .super-manage-staff-stat-box3:hover {
  transform: scale(1.05);
  background-color: #732370;
}
.super-manage-staff-stat-box3:hover,
.super-manage-staff-stat-box2:hover {
  /* background-color: #dceaf8; */
  transform: scale(1.05);
}

.super-manage-staff-stat-box1.active {
  background-color: #ffe6fa;
}
.super-manage-staff-stat-box2.active {
  background-color: #e9ffea;
}

.super-manage-staff-stat-box3.active {
  background-color: #fff2e9;
}
.dark-mode .super-manage-staff-stat-box1.active {
  background-color: #732370;
}
.dark-mode .super-manage-staff-stat-box2.active {
  background-color: #732370;
}

.dark-mode .super-manage-staff-stat-box3.active {
  background-color: #732370;
}

icon-manage1 {
  width: 16px;
  height: 16px;
  padding: 4.69px 2.31px;
  position: relative;
  top: 0; /* Adjust this if needed */
  left: 0; /* Adjust this if needed */
}

.super-icon-wrapper-bg1 {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffe6fa;
  border-radius: 50%;
  position: relative;
  top: 16px;
  left: 16px;
}
.super-icon-wrapper-bg2 {
  width: 32px;
  height: 32px;
  display: flex;
  margin-right: -40px;
  justify-content: center;
  align-items: center;
  background-color: #e9ffea;
  border-radius: 50%;
  position: relative;
  top: 16px;
  left: 16px;
}
.super-icon-wrapper-bg3 {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #deedff;
  border-radius: 50%;
  position: relative;
  top: 16px;
  left: 16px;
}
/* Search Bar */
.super-search-and-names-section {
  margin-top: 20px;
}

.super-search-bar-manage {
  display: flex;
  margin-bottom: 16px;
}
.super-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.super-search-input-manage {
  width: 384px;
  height: 36px;
  top: 230px;
  left: 16px;
  padding-left: 28px;
  gap: 0px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.super-sort-dropdown-inside {
  height: calc(100% - 10px);
  padding: 5px;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  color: #777;
  position: absolute;
  right: 10px;
}
/* Search Icon */
.super-search-icon {
  margin-left: 5px;
  margin-top: 13px;
  position: absolute;
  right: 10px; /* Align icon to the right */
  font-size: 15px;
  color: #b3b3b3;
  pointer-events: none; /* Ensure it doesn't block input interactions */
}
/* Staff List */
.super-staff-list-container {
  display: flex;
  justify-content: space-between;
}

.super-staff-list {
  width: 100%;
}

.super-staff-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;

  width: 382px;
  height: 62px;
  top: 16px;
  left: 16px;
  gap: 0px;
  border-radius: 12px;
  border: 1px solid #dfdfdf;
}

.super-staff-info {
  display: flex;
}

.super-staff-avatar {
  margin-left: 10px;
  width: 46px;
  height: 46px;
  top: 8px;
  left: 8px;
  gap: 0px;
  border-radius: 10px;
  opacity: 1;
}

.super-staff-name-manage {
  margin-left: 10px;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 0px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-staff-date-manage {
  margin-left: 10px;
  font-size: 12px;
  color: #666666;
  font-family: Open Sans;
  font-size: 10px;
  font-weight: 400;
  line-height: 13.62px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-edit-button-manage {
  margin-right: 10px;
  width: 42px;
  height: 22px;
  top: 20px;
  left: 332px;
  padding: 4px 12px 4px 12px;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #883979;
  color: #883979;
  font-family: Open Sans;
  font-size: 10px;
  font-weight: 400;
  line-height: 13.62px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  cursor: pointer;
}
.super-edit-button-manage:hover {
  background-color: #883979;
  color: #e9ffea;
}

.super-dashboard-main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

.super-overview,
.super-traffic,
.super-active-report,
.super-storage-report {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.super-storage-report {
  width: 388px;
  height: 262px;
  margin-top: 20px;
}
.super-traffic h3,
.super-active-report h3 {
  margin-top: 0px;
  font-family: Open Sans;
  font-size: 18px;
  font-weight: 600;
  line-height: 21.79px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-overview h3 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.super-overview {
  width: 388px;
  height: 262px;
  top: 383px;
  left: 337px;
  gap: 0px;
}
.super-manage-staff-donut-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;

  background-color: #fff;
  border-radius: 10px;
  max-height: 1000px;
}
.dark-mode .manage-staff-header2 {
  background-color: #361e30;
}
.dark-mode .header-btn2 {
  background-color: #361e30;
  color: #732370;
  border: 1px solid #732370;
}
.header-btn2 active-btn {
  background-color: #732370 !important;
  color: white !important;
}
.dark-mode .manage-staff-form-disable {
  background-color: #1e0419;
}
.dark-mode .add-role-btn {
  background-color: #1e0419;
}
.dark-mode .country-code-select2 {
  background-color: #1e0419;
  color: white;
}
.dark-mode .manage-staff-form,
.dark-mode .phone-input-container,
.dark-mode .form-input-manage {
  background-color: #1e0419;
  border: 1px solid white;
}
.dark-mode .form-group-manage label {
  color: white;
}
.super-manage-staff-header2 {
  display: flex;

  margin-top: 15px;

  height: 48px;
  background-color: #ffffff;
  gap: 24px;

  width: 668px;

  top: 16px;
  left: 16px;
  padding: 8px 16px 7px 16px;

  border-radius: 12px;
}

.super-manage-staff-form {
  min-height: 340px;
  border-radius: 16px;
  opacity: 1;
  background-color: #f8f8f8;
  padding: 20px;
  margin-top: 20px;
}

.dark-mode .super-manage-staff-form {
  background-color: #1e0419;
}
.super-manage-staff-form-disable {
  height: 150px;

  border-radius: 16px;
  opacity: 1;

  background-color: #f8f8f8;
  padding: 20px;

  margin-top: 20px;
}

.super-form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.super-form-group-manage {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.super-form-group-manage label {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: 500;
}

.super-form-input {
  background-color: #fff;
  padding: 10px;
  color: #b3b3b3;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 14px;
}
.super-form-input-managing-type {
  background-color: #fff;
  padding: 10px;
  color: #b3b3b3;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 14px;
}
.dark-mode .super-form-input-managing-type {
  background-color: #2d1227;
  border: 1px solid white;
  color: white;
}
.dark-mode .form-input {
  border: 1px solid white;
  color: white;
}
.dark-mode .form-input-tel {
  border: 1px solid white;
  color: white;
}
.dark-mode .landing-contact-v2-phone-code {
  border: 1px solid white;
  color: white;
}
.dark-mode .form-input-staff {
  border: 1px solid white;
  color: white;
}
.super-phone-input-container {
  display: flex;
  align-items: center;
  /* padding: 0px 12px; */
  border-radius: 8px;
  height: 46px;
  background-color: #fff;
}

.super-phone-country-code-dropdown select {
  width: 70px;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
}
.super-country-code-select2 {
  width: 100%;
  overflow-y: auto;
  max-height: 176px; /* Height for 4 options (4 * 44px each) */
  height: 44px;
  display: block;
  border: none;
  outline: none;
  background-color: #e6e6e6;
  font-size: 13px;
  font-family: "Open Sans", sans-serif;
  padding: 0px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.512px;
  border-radius: 8px;
  padding: 9px;
}

.super-phone-number-input {
  flex: 2 1;
  border: none;
  outline: none;
  font-size: 14px;
}

.super-phone-input-wrapper {
  display: flex;
  gap: 10px;
}

.super-phone-code {
  width: 70px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.super-phone-input {
  flex: 1 1;
}

.super-add-role-btn {
  background-color: #8a2b83;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.super-add-role-btn:hover {
  background-color: #732370;
}

.super-form-input-manage {
  padding: 10px;
  text-transform: uppercase;
  border-radius: 8px;
  font-size: 14px;
  color: #b3b3b3; /* Ensure text color is consistent */
  background-color: #fff; /* Neutral background color */
}

.super-SubmitButton-AddStaff {
  display: flex;
  justify-content: end;
}
.search-and-sort {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.manage-staff-search-input {
  background: #ffffff;
  width: 340px;
  height: 32px;
  border-radius: 8px;
  font-family: Poppins;
  font-size: 12px;
  border: 1px solid #b3b3b3;
}

.dark-mode .manage-staff-search-input {
  background-color: #2d1227;
}
.dark-mode .manage-staff-search-input {
  background-color: #1e0419;
}
.dark-mode .manage-staff-hospital-item {
  background-color: #2d1227;
  color: white;
}
.manage-staff-search-input:hover {
  border-color: #883979;
  cursor: pointer;
}

.sort-dropdown {
  width: 82px;
  height: 42px;
  top: 24px;
  left: 380px;
  gap: 0px;
  border-radius: 8px;
  border: 1px solid #b3b3b3;
  background-color: white;
  border-color: #b3b3b3;
  color: #b3b3b3;
}

.form-input-tel:hover {
  border-color: #883979;
  cursor: pointer;
}
.sort-dropdown:hover {
  border-color: #883979;
  cursor: pointer;
}

.manage-staff-hospital-list {
  display: flex;
  flex-direction: column;
}

.manage-staff-hospital-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 8px;
}
.dark-mode .manage-staff-hospital-item {
  background-color: #2d1227;
}

.manage-staff-hospital-avatar {
  width: 40px;
  height: 40px;
  background-color: #e0e0e0;
  border-radius: 50%;
  margin-right: 15px;
}

.manage-staff-hospital-details {
  display: flex;
  gap: 20px;
}

.manage-staff-hospital-name {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.manage-staff-hospital-role {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.manage-staff-hospital-disable-date {
  flex: 1 1;
  font-size: 14px;
  color: #666;
  text-align: right;
  margin-right: 20px;
}

.enable-button {
  padding: 8px 12px;
  border: 1px solid #883979;
  border-radius: 4px;
  color: #883979;
  font-weight: bold;
  cursor: pointer;
}
/* Common styles for input fields */
.super-form-input,
.super-form-input-managing-type,
.form-input-manage {
  /* border: 1px solid #ccc; */
  padding: 8px;
  border-radius: 4px;
  transition: border-color 0.3s ease, color 0.3s ease;
  color: #000; /* Default text color */
}

/* Change border and text color on hover */
.super-form-input:hover,
.super-form-input-managing-type:hover,
.phone-number-input:hover,
.form-input-manage:hover,
.manage-staff-search-input:hover,
.permission-search-input:hover,
.payments-admin-search-bar:hover,
.description-input:hover,
.modify-announcement-textarea:hover,
.modify-announcement-input1:hover,
.admin-announcements-card-description1:hover,
.add-super-admin-input:hover,
.add-super-admin-input-phone:hover {
  border: 1px solid #883979;
  color: #883979;
}

/* Maintain border color when the input is focused */
.super-form-input:focus,
.super-form-input-managing-type:focus,
.phone-number-input:focus,
.form-input-manage:focus,
.manage-staff-search-input:focus,
.permission-search-input:focus,
.payments-admin-search-bar:focus,
.description-input:focus,
.modify-announcement-textarea:focus,
.modify-announcement-input1:focus,
.admin-announcements-card-description1:focus,
.add-super-admin-input:focus,
.add-super-admin-input-phone:focus {
  outline: none;
  border-color: #883979;
  color: #883979;
}

/* Maintain border color when the input has a value */
/* .super-form-input:not(:placeholder-shown),
.super-form-input-managing-type:not(:placeholder-shown),
.phone-number-input:not(:placeholder-shown),
.form-input-manage:not(:placeholder-shown),
.manage-staff-search-input:not(:placeholder-shown),
.permission-search-input:not(:placeholder-shown),
.payments-admin-search-bar:not(:placeholder-shown),
.attendance-search-input:not(:placeholder-shown),
.super-textarea:not(:placeholder-shown),
.super-select-dropdown:not(:placeholder-shown),
.announcement-form-input:not(:placeholder-shown),
.announcement-form-input-time:not(:placeholder-shown),
.description-input:not(:placeholder-shown),
#announcement-form-description:not(:placeholder-shown),
.modify-announcement-select:not(:placeholder-shown),
.modify-announcement-input1:not(:placeholder-shown),
.modify-announcement-input:not(:placeholder-shown),
.modify-announcement-textarea:not(:placeholder-shown),
.admin-announcements-card-description1:not(:placeholder-shown),
.add-super-admin-input:not(:placeholder-shown),
.add-super-admin-input-phone:not(:placeholder-shown) {
} */

/* Dropdown specific styles */
.landing-contact-dropdown-item:hover {
  cursor: pointer;
}
/* .dark-mode .super-form-input-managing-type{
  background-color: #1E0419;
} */

/* .super-payment-container {
  background: #fff;
  width: 880px;
  height: 1343px;
  top: 120px;
  left: 337px;
  gap: 0px;
  border-radius: 12px;
  opacity: 1;
}

.super-payment-admin-hub {
  display: flex;
  flex-direction: column;
  margin-left: 0px;
  margin-bottom: 15px;
}

.super-payment-admin-hub-title {
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.0288em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #883979;
}

.super-payment-tabs {
  width: 780px;
  height: 46px;
  top: 96px;
  left: 32px;
  gap: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.super-payment-tab-button {
  width: 225px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid #883979;
  color: #883979;
  opacity: 1;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  padding: 0px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.super-payment-tab-button.active {
  background-color: #883979;
  color: white;
}

.super-payment-section-title {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-left: 0px;
}

.super-payment-header-row {
  display: flex;
  margin-right: 32px;
  justify-content: space-between;
  padding: 0px 15px;
  height: 42px;
  margin-left: 0px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  background-color: #FCF3FA;
  border-radius: 8px;
}

.super-payment-header-row2 {
  display: flex;
  margin-right: 32px;
  justify-content: space-between;
  padding: 0px 15px;
  margin-top: 32px;
  height: 42px;
  margin-left: 0px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  background-color: #FCF3FA;
  border-radius: 8px;
}

.super-payment-patient-reg-label {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  padding-top: 6px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.super-payment-enable-disable {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  padding-top: 6px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-right: 45px;
}

.super-payment-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 0px;
  margin-top: 10px;
  padding-bottom: 10px;
}

.super-payment-label {
  flex: 1;
  text-align: left;
  padding-left: 8px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  width: 400px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.super-payment-field-type {
  flex: 1;
  text-align: center;
}

.super-payment-toggle-container {
  flex: 1;
  text-align: right;
  margin-right: 40px;
}

.super-payment-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.super-payment-switch input {
  opacity: 1;
  width: 0;
  height: 0;
}

.super-payment-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.super-payment-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked+.super-payment-slider {
  background-color: #883979;
}

input:checked+.super-payment-slider:before {
  transform: translateX(14px);
}

.super-payment-dropdown {
  position: relative;
  cursor: pointer;
  width: 24px;
  height: 24px;
  margin-top: 7px;
}

.super-dropdown-icon-payment {

  position: relative;
  cursor: pointer;
} */

.payments-admin-container {
  background: #f8f8f8;
  width: 849px;
  max-width: 900px;
  margin: 20px auto;
  font-family: "Open Sans", sans-serif;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #333;
  position: relative;
  top: 60px;
  height: 534px;
}

/* Section Styles */
.payments-admin-section {
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  top: 65px;
  background-color: #f3f3f3;
  z-index: 99;
}

.payments-admin-section-title {
  color: #883979;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Header Row */
.payments-admin-header-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-weight: bold;
  background-color: #fcf3fa;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  color: black;
}

.payments-admin-header-label {
  font-size: 14px;
  color: #000000;
}

/* Divider Between Sections */
.payments-admin-divider {
  height: 2px;
  background: #e8d6e7;
  margin: 20px 0;
}

/* Category Styles */
.payments-admin-category-section {
  margin-top: 15px;
}

.payments-admin-category-title {
  color: #883979;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: start;
  padding-left: 16px;
}

/* Algorithm Row */
.payments-admin-algorithm-row {
  padding-left: 25px;
  width: 780px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.payments-admin-algorithm-name {
  font-size: 14px;
  color: #555;
  padding-left: 16px;
}
.dark-mode .payments-admin-algorithm-name{
  color: white;
}

/* Toggle Switch */
.payments-admin-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.payments-admin-switch input {
  display: none;
}

.payments-admin-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 20px;
}
.payments-admin-search-bar:hover {
  border-color: #883979;
  cursor: pointer;
}
.payments-admin-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .payments-admin-slider {
  background-color: #883979;
}

input:checked + .payments-admin-slider:before {
  transform: translateX(14px);
}
/* Top Section Styles */
.payments-admin-top-section {
  width: 395px;
  height: 43px;
  position: absolute;
  top: 58px;
  left: 275px;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  background-color: #f8f8f8;
  padding: 8px;
}
.dark-mode .payments-admin-top-section{
  background-color: #2D1227;
  color: white;
}
.dark-mode .payments-admin-search-bar{
  border: 1px solid #883979;
  color: #883979;

}
.dark-mode .payments-admin-sort-dropdown{
  background-color: #2D1227;
  color: #B3B3B3;
  border-color: #883979;
}
.dark-mode .admindb-payments-table-header{
  background-color: #2D1227;
}
.dark-mode .admindb-payments-table-row{
  background-color: #2D1227;
}
.payments-admin-top-button {
  width: 188px;
  height: 39px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
.dark-mode .payments-admin-top-button{
  color: white;
}

.payments-admin-top-button.active {
  background-color: #883979;
  color: white;
}

/* Update Button Styles */
.payments-admin-update-button {
  width: 79px;
  height: 39px;
  position: absolute;
  top: 492px;
  left: 1048px !important;
  border-radius: 8px;
  border: none;
  background-color: #883979;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.payments-admin-update-button:hover {
  background-color: #6c2d60;
}
.super-admin-profile-edit-button:hover{
  background-color: #883979;
  color: white;
}
.dark-mode .super-admin-profile-edit-button{
  background-color: #1E0419;
  color: white;
  border: 1px solid #883979;
}
.dark-mode .super-admin-profile-edit-button:hover{
  background-color: #6c2d60 !important;
}
.super-margin-left{
  padding-left: 0px;
}

/* infor icon--------------------------------- */
.info-icon-container {
  position: relative;
  display: inline-block;
}

.info-icon {
  cursor: pointer;
  color: black;
  margin-left: 10px;
}

.info-icon-container {
  position: absolute;
  top: 70px;
  left: 795px;
}

.info-icon-container1 {
  position: absolute;
  top: 114px;
  left: 805px;
}

.info-floating-box {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 0; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.info-icon-container:hover .info-floating-box {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.round-info-icon {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.payments-admin-switch input:disabled + .payments-admin-slider {
  cursor: not-allowed;
  opacity: 0.5; /* Dim the slider */
}

.info-floating-box1 {
  position: absolute;
  width: 305px;
  height: 66px;
  top: -85px; /* Adjust based on your layout */
  left: -315px; /* Adjust based on your layout */
  gap: 0px;
  border-radius: 8px 8px 0px 8px;
  opacity: 0; /* Initially hidden */
  background-color: #883979;
  color: white;
  padding: 10px;
  transition: opacity 0.3s ease; /* Smooth fade-in */
  pointer-events: none; /* Prevent unintended hover interactions */
  z-index: 1000;
}

.info-icon-container1:hover .info-floating-box1 {
  opacity: 1; /* Makes it visible on hover */
  pointer-events: auto;
}

.round-info-icon1 {
  top: 240px;
  left: 800px;
  z-index: 999;
}
.dark-mode .info-icon-container svg,
.dark-mode .info-icon-container1 svg,
.dark-mode .super-select-dropdown option{
  color: white;
}
.dark-mode .payments-admin-sort-dropdown option{
  color: #ccc;
}
.super-Attendance-container {
  background: #f8f8f8;
  width: 849px;
  height: 916px;
  top: 120px;
  left: 337px;
  gap: 0px;
  border-radius: 12px;
  opacity: 1;
}
.dark-mode .Attendance-container {
  background-color: #1e0419;
  color: white;
}

.super-Attendance-admin-hub {
  display: flex;
  flex-direction: column;
  margin-left: 32px;
}
.attendance-names-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

.super-Attendance-admin-hub-title {
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0.0288em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
}

.super-Attendance-card {
  display: flex;
  flex-direction: column;
  width: 787px;
  height: 255px;
  margin-left: 32px;
  gap: 0px;
  border-radius: 10px;
  opacity: 1;
  box-shadow: 0px 0px 4px 0px #00000040;
  margin-top: 25px;
  background-color: white;
}

.super-Attendance-card2 {
  display: flex;
  flex-direction: column;
  width: 787px;
  height: 255px;
  margin-left: 32px;
  gap: 0px;
  border-radius: 10px;
  opacity: 1;
  box-shadow: 0px 0px 4px 0px #00000040;
  margin-top: 30px;
  background-color: white;
}

.super-Attendance-card3 {
  display: flex;
  flex-direction: column;
  width: 787px;
  height: 210px;
  margin-left: 32px;
  gap: 0px;
  border-radius: 10px;
  opacity: 1;
  box-shadow: 0px 0px 4px 0px #00000040;
  margin-top: 30px;
  background-color: white;
}

.super-Attendance-dividerline {
  width: 692px;
  height: 0px;
  margin-top: 10px;

  margin-left: 24px;
  gap: 0px;
  border: 0.5px solid transparent;
  opacity: 1;
  border: 1px solid #e6e6e6;
}

.super-Attendance-label-con {
  text-align: center;
  margin-top: 24px;
  height: 27px;
  top: 24px;
  left: 24px;
  gap: 20px;
  opacity: 1;
  display: flex;
  flex-direction: row;
}

.super-Attendance-basic-info-btn {
  color: #808080;
  margin-left: 30px;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  padding-top: 5px;
}

.super-Attendance-checked-btn {
  color: #808080;
  margin-left: 10px;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  padding-top: 5px;
}

.super-Attendance-Streak-btn {
  color: #808080;
  margin-left: 10px;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  padding-top: 5px;
  width: 285px;
}
.super-Attendance-on-leave-btn {
  color: #808080;
  margin-left: 10px;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-right: 80px;
}
.super-Attendance-active-btn {
  color: #808080;
  margin-left: 24px;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  padding: 0px;
}

.super-Attendance-btn-active {
  color: #883979;
  font-size: 16px;
  font-weight: 600;
}

.super-Attendance-Stafflist-btn {
  color: #883979;
  margin-left: 10px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  margin-right: 80px;
  width: 479px;
}

.super-Attendance-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 44px;
  margin-top: 14px;
}

.super-Attendance-data-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 44px;
  margin-top: 28px;
}

.super-Attendance-label {
  flex: 1 1;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-Attendance-field-type {
  flex: 1 1;
  text-align: center;
}

.super-Attendance-button {
  width: 55px;
  height: 20px;
  gap: 8px;
  background-color: #f8f8f8;

  opacity: 1;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-Attendance-arrow-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.super-Attendance-arrow-button span {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}
.super-Attendance-button1 {
  width: 55px;
  height: 20px;
  gap: 8px;
  background-color: #f8f8f8;

  opacity: 1;
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 600;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-Attendance-arrow-button1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.dark-mode .attendance-topbtn {
  background-color: #2d1227;
}
.dark-mode .super-attendance-card {
  background-color: #2d1227 !important;
  border-radius: 8px !important;
}
.dark-mode .super-attedance-name {
  color: white;
}
/* .super-attendance-card{
    border-radius: 12px;
  } */
.dark-mode .Attendance-checked-btn {
  color: white;
}
.super-Attendance-arrow-button1 span {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}
attendance-topbtn {
  background-color: #ffffff;
  width: 490px;
  padding: 5px;
  margin-left: 32px;
  border-radius: 8px;
}

.super-attendance-search-input {
  width: 340px !important;
  padding: 0px 8px 0px 8px !important;
  height: 40px;
  border: 1px solid #b3b3b3;
  margin-left: 19px;
  color: #883979 !important;
}

.super-admindb-table-container {
  width: 100%;
  overflow-x: auto;
}

.super-admindb-payments-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
}

.super-admindb-payments-table-header {
  text-align: left;
  padding: 10px 15px;
  background-color: #f4f4f4;
  color: #333333;

  font-family: poppins;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-admindb-payments-table-row {
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}

.super-admindb-payments-table-row:hover {
  background-color: #f9f9f9;
}

.super-admindb-payments-table-cell {
  padding: 15px;
  text-align: left;
  color: black;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.admindb-payments-table-cell-button {
  position: relative;
  left: 0px;
}

.admindb-download-button {
  background-color: #883979;
  color: #ffffff;
  border: none;
  padding: 8px 12px;
  border-radius: 100px;
  font-size: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 11px;
}

.super-admindb-download-button:hover {
  background-color: #732d91;
}

.super-admindb-payments-table-row:nth-child(odd) {
  background-color: #ffffff;
}

.super-admindb-payments-table-row:nth-child(even) {
  background-color: #f9f9f9;
}
.super-Attendance-btn-active {
  background-color: #883979; /* Example active color */
  color: #fff; /* Make text white for contrast */
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
}

.super-doctor-form-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent black */
  z-index: 999; /* Place it behind the modal */
}

.super-Doctor-form-container-new {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* Place it above the overlay */
  background: none;
  padding: 0px;
  border-radius: 10px;
}

.dark-mode .super-Doctor-form-container-new {
  background-color: #1e0419;
  background: rgba(158, 158, 158, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.super-Doctor-form-new {
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 955px;
  height: 700px;
  top: 32px;
  left: 60px;
  gap: 0px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  position: static;
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.super-doctor-admin-hub-container {
  display: flex; /* Aligns the image and text side by side */
  align-items: center; /* Vertically centers the content */
  gap: 16px; /* Adds space between the image and the text */
  position: relative; /* To handle positioning within the container */
}

.super-doctor-admin-hub-image {
  width: 70px;
  height: 70px;
  background-color: #D9D9D9; /* Background color for the image section */
  border-radius: 100%; /* Makes the image circular */
  position: relative;
  top: 0px;
  left: 0px;
}

.super-doctor-admin-hub-title-new {
  font-size: 24px;
  font-weight: bold;
  margin: 0; /* Removes default margin */
}

.super-circle-new {
  display: inline-block; /* To ensure it occupies space */
  width: 34px; /* Example size */
  height: 4px;
}

.green {
  background-color: #4caf50;
}

.red {
  background-color: #f44336;
}

.orange {
  background-color: #ff9800;
}



.dark-mode .super-Doctor-form-new {
  background-color: #2d1227;
}

.super-Doctor-admin-hub-new {
  display: flex;
  flex-direction: row;
  margin-left: 30px;
  margin-top: 20px;
  width: 1000px;
 

}

.super-Doctor-admin-hub-title-new {
  font-family: Open Sans;
  font-size: 25px;
  font-weight: 700;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
  margin-top: 0px;
  width: 850px;
}

.super-addcase-exit-icon-new {
  width: 32px;
  height: 0px;
  align-items: center;
  gap: 0px;
  opacity: 1;
  display: flex;
  margin-left: 335px;
  margin-top: 20px;
  position: relative;
  z-index: 10000;
}

.super-doctor-date-container-new {
  display: flex;
  align-items: flex-end;
  gap: 40px;

}

.super-doctor-date-new {
  width: 494px;
  height: 88px;
  margin-top: 10px;
  margin-left: 30px;
  gap: 5px;
  opacity: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}


.super-doctor-date-title-new {
  width: 494px;
  height: 30px;
  gap: 0px;
  opacity: 1;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}


.super-date-picker-new {

  border-radius: 4px;
  width: 420px;
  height: 40px;
  gap: 0px;
  border-radius: 8px;
  color: #e0e0e0;
  opacity: 1;
  border: 1px solid #B3B3B3
}

.super-attend-color-new {
  display: flex;
  width: 250px;
  height: 30px;
  flex-direction: row;
  top: 536px;
  left: 275px;

}
.super-attend-color-new {
  width: 483px;
  height: 27px;
  position: relative; /* Required to apply top and left properties */
  top: 385px;
  left: 230px;
  /* opacity: 1; */
}


.super-attend-present-new {
  width: 150px;
  height: 27px;
  gap: 8px;
  opacity: 1;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 400;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  display: flex;
  flex-direction: row;
  align-items: center;

}

.super-attend-present2-new {
  width: 150px;
  height: 27px;
  gap: 8px;
  opacity: 1;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 400;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 15px;

}


.super-circle-atten-new {
  width: 34px;
  height: 4px;
  background-color: green;
  /* border-radius: 50%; */
  margin-left: 5px;
  opacity: 1;
  display: flex;
  align-items: flex-end;
}

.super-circle-atten2-new {
  width: 34px;
  height: 4px;
  background-color: red;
  /* border-radius: 50%; */
  margin-left: 5px;
  opacity: 1;
}

.super-circle-atten3-new {
  width: 34px;
  height: 4px;
  background-color: orangered;
  /* border-radius: 50%; */
  margin-left: 5px;
  opacity: 1;
}


.super-Attendace-summary-title-new {
  width: 229px;
  height: 27px;
  font-family: Open Sans;
  font-size: 19px;
  font-weight: 700;
  line-height: 27.24px;
  margin-left: 30px;
  margin-top: 10px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
  gap: 0px;
  opacity: 1;

}

/* .Attendance-summary-new {
  width: 550px;
  height: 72px;
  margin-top: 25px;
  margin-left: 76px;
  gap: 0px;
  opacity: 1;
  display: flex;
  flex-direction: row;
} */

.super-Attendance-summary-new {
  width: 864px;
  height: 24px;
  display: flex; /* Ensures the child elements are arranged in a row */
  gap: 44px; /* Space between the child elements */
  font-size: 18px; /* Font size */
  font-weight: 400; /* Font weight */
  font-family: 'Open Sans', sans-serif; /* Font family */
  color: black; /* Text color */
  white-space: nowrap; /* Prevents text from breaking into a new line */
  overflow: hidden; /* Ensures overflow text is hidden */
  text-overflow: ellipsis; /* Adds ellipsis (...) if the text overflows */
  margin-left: 24px;
}

.super-attendance-table-new {
  width: 864px;
  border-collapse: collapse; /* Ensures table borders collapse neatly */
  margin-left: 10px;
  margin-top: 4px;
}

.super-attendance-summary-row {
  height: 24px;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;
  color: black;
}

.super-attendance-cell {
  padding: 0 22px; /* Adds horizontal space between cells */
  white-space: nowrap; /* Prevents text from wrapping */
  text-align: left; /* Aligns text to the left */
}



.super-Attendance-summary2-new {
  width: 550px;
  height: 72px;

  margin-left: 76px;
  gap: 0px;
  opacity: 1;
  display: flex;
  flex-direction: row;
}

.super-workingday-new {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;

}

.super-workday-new {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  width: 246px;
  height: 27px;
  margin-left: 55px;
  opacity: 1;

}

.super-Doctor-card-new {

  margin-top: 4px;
  margin-left: 30px;
  width: 890px;
  height: 425px;
  border-radius: 12px;
  opacity: 1;
  border: 1px solid #DCDCDC
  /* box-shadow: 0px 4px 30px 0px #0000002E; */

}

.super-calendar-new {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 10px;
  gap: 10px;
  padding: 20px;
  width: 856px;
  height: 370px;
  gap: 0px;
  opacity: 1;
  margin-top: -50px;

}

.super-calendar-cell-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 115px;
  text-align: center;
}

.super-calendar-header-new {
  text-align: center;
  color: #883979;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 700;
  line-height: 27.24px;
  letter-spacing: 0.032em;
  margin-top: 35px;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;

}

.super-date-new {

  font-family: Open Sans;
  font-size: 22px;
  font-weight: 600;
  line-height: 35.41px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}


.super-circle-new {
    display: inline-block; /* To ensure it occupies space */
  width: 34px;
  height: 4px;
  /* border-radius: 50%; */
  margin-top: 5px;
}

.green-new {
  background-color: #4caf50;
}

.red-new {
  background-color: #f44336;
}

.orange-new {
  background-color: #ff9800;
}
/* Ensure responsiveness below 1244px */
@media screen and (min-width: 1204px) {
  .super-Doctor-form-container-new {
    width: 80%;
    height: auto; /* Allow content to dictate height */
    overflow-y: auto;
  }

  .super-calendar-cell-new {
    font-size: 0.8rem;
    padding: 3px;
  }

  .super-attendance-summary-row {
    font-size: 0.75rem;
  }
}


/* Main Container */
.super-main-container-professional-development {
  width: 804px;
  height: 780px;
  position: absolute;
  top: auto;
  left: auto;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 32px;
  box-sizing: border-box;
}
.dark-mode .super-main-container-professional-development {
  background-color: #1e0419;
}
.dark-mode .header-professional-development-row {
  background-color: #1e0419;
  color: white;
}
.dark-mode .header-professional-development-column {
  color: white;
}
.dark-mode .video-title-professional-development {
  color: white;
}
.dark-mode .input-section-professional-development {
  background-color: #1e0419;
  border: 1px solid #883979;
  color: #883979;
}
.dark-mode .k1 {
  color: #883979;
}
.dark-mode .super-slider {
  background-color: #883979;
}

/* Header */
.super-header-professional-development {
  font-size: 24px;
  color: #883979;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin-bottom: 40px;
  text-align: left;
}

/* Header Row */
.super-header-professional-development-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 740px;
  height: 42px;
  border-radius: 8px;
  background-color: #fcf3fa;
  padding: 0 16px;
  box-sizing: border-box;
  margin-bottom: 32px;
}

.super-header-professional-development-column {
  font-size: 16px;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  color: black;
}

/* Content Section */
.super-content-section-professional-development {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 15px;
  gap: 15px;
  max-width: 800px; /* Adjust width for a cleaner layout */
  margin: auto;
  height: 100%; /* Adjust height based on your layout */
  overflow-y: auto;
  padding-right: 10px;
}

/* Content Row */
.super-content-professional-development-row {
  display: grid;
  grid-template-columns: 130px 1fr 130px 80px 30px; /* Adjusted for proper alignment */
  align-items: center;
  background: #fff;
  padding: 10px 15px;
  border-radius: 8px;
}

/* Video Section */
.super-video-section-professional-development {
  width: 149px;
  height: 78px;
  border-radius: 8px;
  background-color: #d8d8d8; /* Placeholder background */
  position: relative;
}

/* Video Title */
.super-video-title-professional-development {
  font-size: 12px;
  font-weight: 600;
  font-family: "poppins";
  color: black;
}

/* Input Section */
.super-input-section-professional-development {
  width: 116px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 4px;
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
}

/* Toggle Button */
.super-toggle-button-professional-development-ai {
  width: 48px;
  height: 40px;
  border-radius: 100%;
  background-color: white; /* Placeholder background */
  border: 0px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px;
  cursor: pointer;
  /* transition: background-color 0.3s; */
}

.super-toggle-button-professional-development:hover {
  background-color: transparent;
}
.super-input-section-professional-development {
  width: 116px;
  height: 26px;
  border-radius: 4px;
  padding: 2px;
  font-size: 12px;
}

.train-staff-upload {
  width: 141px;
  height: 40px;
  top: 114px;
  left: 605px;
  position: relative;
  padding: 8px 16px 8px 16px;
  gap: 8px;
  border-radius: 8px;
  border-top: 1px;
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  opacity: 1;
  color: #883979;
  background: white;
  border: 1px solid #883979;
}

.train-staff-upload:hover {
  color: white;
}
.video-title-professional-development {
  margin-left: 50px;
}
.input-section-professional-development {
  margin-left: -90px;
}

/* Dropdown Container */
.dropdown-section-professional-development {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Dropdown Button */
.dropdown-container-professional-development {
  display: flex;
  height: 10px;
  width: 90px;
  align-items: center;
  justify-content: space-between;
  background: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease-in-out;
  margin-left: -90px;
}

/* .dropdown-container-professional-development:hover {
  background: #eaeaea;
} */

/* Placeholder Text */
.dropdown-placeholder-professional-development {
  color: #888;
}

.dropdown-selected-text-professional-development {
  color: #333;
  font-weight: 500;
}

/* Dropdown Arrow */
.dropdown-arrow-icon-professional-development {
  transition: transform 0.3s ease-in-out;
}

.dropdown-arrow-rotate-professional-development {
  transform: rotate(180deg);
}

/* Dropdown Options */
.dropdown-options-container-professional-development {
  position: absolute;
  top: 100%;
  margin-right: 50px;
  width: 112px;
  font-size: 12px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  margin-left: -90px;
}

.dropdown-option-item-professional-development {
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

.dropdown-option-item-professional-development:hover {
  background: #712864;
  color: #ccc;
}

/* Ensure dropdown options are visible */
.dropdown-options-container-professional-development {
  display: block;
}

/* Updated Modal Styles */
.modal-overlay-professional-development {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content-professional-development {
  background: white;
  padding: 20px;
  border-radius: 12px;
  width: 380px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-close-button-professional-development {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.modal-close-button-professional-development:hover {
  transform: scale(1.1);
}

/* File Upload Step */
.file-upload-container-professional-development {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.upload-text-professional-development {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 24px;
}

.selected-file-info-professional-development {
  display: flex;
  align-items: center;
  width: 90%;
  padding: 12px;
  background: #fcf3fa;
  border-radius: 8px;
  margin: 16px 0;
}

.proceed-button {
  background-color: #883979;
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  border: none;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.proceed-button:hover {
  background-color: #712864;
}

.proceed-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.upload-icon-professional-development {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  border-radius: 50%;
  background-color: #fcf3fa;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.upload-icon-professional-development svg {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.upload-icon-professional-development circle {
  transform-origin: center;
}

.upload-icon-professional-development path {
  transform-origin: center;
  stroke-width: 2;
}

/* Title Input Step */
.title-input-container-professional-development {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.enter-title-text-professional-development {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
  align-self: flex-start;
}

.title-input-professional-development {
  width: 90%;
  padding: 12px 19px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  margin-bottom: 0px;
  outline: none;
}

.title-input-professional-development:focus {
  border-color: #883979;
}

.file-icon-professional-development {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  color: #883979;
}

.file-name-professional-development {
  flex: 1 1;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.remove-file-professional-development {
  cursor: pointer;
  color: #666;
  font-size: 20px;
  padding: 0 8px;
}

/* Upload Progress */
.upload-progress-container-professional-development {
  text-align: center;
  padding: 24px 0;
}

.upload-progress-title-professional-development {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 32px;
}

.progress-bar-professional-development {
  width: 100%;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 100px;
  overflow: hidden;
  margin: 24px 0;
}

.progress-fill-professional-development {
  height: 100%;
  background-color: #883979;
  transition: width 0.3s ease;
  border-radius: 100px;
}

.progress-text-professional-development {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.choose-file-button-professional-development {
  background-color: #883979;
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  border: none;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: linear-gradient(to right, #883979, #712864);
  box-shadow: 0 2px 4px rgba(136, 57, 121, 0.2);
}

.choose-file-button-professional-development:hover {
  background-image: linear-gradient(to right, #712864, #5e2152);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(136, 57, 121, 0.3);
}

/* Dark Mode */
.dark-mode .modal-content-professional-development {
  background-color: #1e0419;
}

.dark-mode .upload-text-professional-development,
.dark-mode .enter-title-text-professional-development,
.dark-mode .upload-progress-title-professional-development,
.dark-mode .progress-text-professional-development,
.dark-mode .file-name-professional-development {
  color: white;
}

.dark-mode .title-input-professional-development {
  background-color: #2d1227;
  border-color: #4d2d47;
  color: white;
}

.dark-mode .selected-file-info-professional-development {
  background-color: #2d1227;
}

.dark-mode .progress-bar-professional-development {
  background-color: #2d1227;
}

.super-strip-chart-container-avg {
  width: 239px;
  height: 172px;
  background-color: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.super-strip-chart-title-avg {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.super-strip-chart-columns-avg {
  display: flex;
  justify-content: start;
  padding-left: 16px;
  width: 100%;
  height: 100%;
  gap: 48px;
}

.super-strip-chart-column-avg {
  position: relative;
  display: flex;
  justify-content: start;
  height: 100%;
  gap: 48px;
}

.super-strip-chart-stripes-avg {
  display: flex;
  flex-direction: column-reverse;
  height: 107px;
  justify-content: flex-start;
  width: 58px;
}

.super-strip-stripe-avg {
  height: 2px !important;
  width: 58px;
  border-radius: 100px;
  background-color: #ddd;
  margin-bottom: 5px;

}

.super-strip-chart-tooltip-avg {
  font-size: 14px;
  font-weight: bold;
}

.super-strip-chart-label-avg {
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  font-family: "Open Sans";
  width: 82px;
  transform: translateX(-10px);
}

.super-strip-floating-card-avg {
  position: absolute;
  top: 0px;
  left: 46px;
  width: fit-content;
  height: fit-content;
  padding: 8px 16px;
  background-color: #f9f9f9;
  border-radius: 10px 10px 10px 0;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.super-strip-amount-avg {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.super-strip-description-avg {
  font-size: 10px;
  color: #555;
  display: flex;
  text-align: start;
  width: 100%;
  margin: 0;
}

/* Main container */
.super-financial-matrices-main-container {
  position: relative;
  width: 561px;
  height: 341px;
  top: 0px;
  left: 0px;
  background-color: #F8F8F8;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.super-financial-matrices-usd-container {
  position: absolute;
  width: 66px;
  height: 24px;
  top: 16px;
  left: 449px;
  background-color: #883979;
  border-radius: 100px;
  padding: 4px 12px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: 'Poppins', sans-serif;
}

/* Vertical line */
.super-financial-matrices-vertical-line {
  position: absolute;
  height: 252px;
  width: 1px;
  top: 69px;
  left: 280px;
  background-color: #C6C6C6;
}

/* Left section */
.super-financial-matrices-left-section {
  position: absolute;
  text-align: center;
  left: 40px;
  top: 135px;
}

.super-financial-matrices-left-section .title {
  position: absolute;
  top: 69px;
  left: 97px;
  font-size: 20px;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
  color: #000000;
}

.super-financial-matrices-left-section .subtitle {
  position: absolute;
  top: 345px !important;
  left: 97px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  color: #000000;
}

/* Right section */
.super-financial-matrices-right-section {
  position: absolute;
  text-align: center;
  left: 320px;
  top: 135px;
}

.super-financial-matrices-right-section .title {
  position: absolute;
  top: 69px;
  left: 374px;
  font-size: 20px;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
  color: #000000;
}

.super-financial-matrices-right-section .subtitle {
  position: absolute;
  top: 315px;
  left: 374px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  color: #000000;
}
.super-financial-matrices-title1{
  font-size: 20px;
  font-weight: 400;
  font-family: poppins;
  top: 69px;
  left: 97px;
  color: #000000;
  position: absolute;
}
.super-financial-matrices-title2{
  font-size: 20px;
  font-weight: 400;
  font-family: poppins;
  top: 69px;
  left: 374px;
  color: #000000;
  position: absolute;
}
.super-analytics-data-chart-main-container {
  width: 272px;
  height: 285px;
  position: absolute;
  top: 35px;
  left: 0px;
  border-radius: 16px;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.dark-mode .super-analytics-data-chart-main-container {
  background-color: #2d1227;
  color: white;
}
.dark-mode .super-analytics-data-chart-dropdown-section {
  border: 1px solid #883979;
  color: #883979;
}
.super-analytics-data-chart-dropdown-section {
  width: 42px;
  height: 24px;
  border: 1px solid black;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  font-size: 14px;
  margin-left: auto;
}

.super-analytics-data-chart-dropdown-section select {
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
}

.super-analytics-data-chart-bar-graph-section {
  margin-top: 10px;
  width: 100%;
  height: 200px;
}
.recharts-legend-item.legend-item-0 {
  display: none;
}

.super-analytics-software-usage-main-container {
  width: 272px;
  height: 341px;
  position: absolute;
  top: 35px;
  left: 0px;
  background-color: #f8f8f8;
  border-radius: 16px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  box-sizing: border-box;
}
.dark-mode .super-analytics-software-usage-main-container{
  background-color: #2D1227;
  color: white;
}
.dark-mode .super-analytics-software-usage-title-section{
  color: white;
}
.super-analytics-software-usage-title-section {
  font-size: 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  color: black;
  position: absolute;
  top: 16px;
  left: 16px;
}

.super-analytics-software-usage-dropdown-section {
  position: absolute;
  top: 16px;
  left: 194px;
  width: 62px;
  height: 24px;
  border: 1px solid #883979;
  border-radius: 4px;
  color: #883979;
}

.super-analytics-software-usage-dropdown-section select {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  color: #883979;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  background: transparent;
  padding-left: 8px;
  cursor: pointer;
}

.super-analytics-software-usage-donut-chart-section {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto 0;
}

.super-analytics-software-usage-floating-label {
  position: absolute;
  width: 49px;
  height: 21px;
  background-color: #ffe2f9;
  border: 1px solid #d694c9;
  color: #883979;
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.super-analytics-software-usage-legend-section {
  position: absolute;
  top: 294px;
  left: 62px;
  width: 147px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.super-analytics-software-usage-legend-item {
  display: flex;
  align-items: center;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: black;
}
.dark-mode .super-analytics-software-usage-legend-item {
  color: white;
}
.super-analytics-software-usage-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.super-analytics-patients-metrics-container {
  width: 561px;
  height: 341px;
  position: absolute;
  top: 30px;
  left: 0px;
  background-color: #f8f8f8;
  border-radius: 16px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  box-sizing: border-box;
}
.dark-mode .super-analytics-patients-metrics-container{
  background-color: #2D1227;
  color: white;
}
.super-analytics-patients-metrics-title {
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  color: black;
  position: absolute;
  top: 16px;
  left: 16px;
}
.dark-mode .super-analytics-patients-metrics-title{
  color: white;
}
.super-analytics-patients-metrics-table-container {
  position: absolute;
  top: 50px;
  left: 16px;
  width: 530px;
  height: 280px;
  overflow-y: auto;
}
.super-analytics-patients-metrics-table-container::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
  border-radius: 100px; /* Rounded scrollbar */
}

.super-analytics-patients-metrics-table-container::-webkit-scrollbar-thumb {
  background-color: #883979; /* Scrollbar thumb color */
  border-radius: 100px; /* Rounded scrollbar thumb */
}

.super-analytics-patients-metrics-table-container::-webkit-scrollbar-track {
  background: transparent; /* Scrollbar track color */
}

.super-analytics-patients-metrics-table-container::-webkit-scrollbar-thumb:hover {
  background-color: #883979; /* Darker color on hover */
}

.super-analytics-admin-table {
  width: 100%;
  border-collapse: collapse;
}

.super-analytics-admin-head .super-analytics-admin-th {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  color: black;
  padding-bottom: 8px;
}

.super-analytics-admin-body .super-analytics-admin-td {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  color: black;
  padding: 8px 0;
}
.dark-mode .super-analytics-admin-body .super-analytics-admin-td{
  color: white;
}
.super-analytics-admin-body .super-analytics-admin-tr {
  border-bottom: 1px solid transparent;
}

.super-analytics-admin-body .super-analytics-admin-tr:last-child {
  border-bottom: none;
}

.patient-metrices-new-container {
  width: 548px;
  height: 280px;
  position: absolute;
  top: 0px;
  left: 10px;
  border-radius: 16px;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.dark-mode .patient-metrices-new-container {
  background-color: #2d1227;
}

.dark-mode .patient-metrices-new-value
{
  color: black;
}
.dark-mode .patient-metrices-new-subtitle {
  color: white;
}
.dark-mode .patient-metrices-new-title{
  color:white; 
}

.patient-metrices-new-title {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: black;
}

.patient-metrices-new-section {
  width: 143px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  justify-content: center;
  gap: 2px;
  position: absolute;
}

.patient-metrices-new-section-left {
  top: 72px;
  left: 100px;
}

.patient-metrices-new-section-right {
  top: 72px;
  left: 324px;
}
.patient-metrices-new-section-center {
  top: 72px;
  left: 213px;
}

.patient-metrices-new-subtitle {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  text-align: center;
  white-space: nowrap;
}

.patient-metrices-new-value {
  font-family: "Open Sans", sans-serif;
  font-size: 52px;
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0px;
  margin-bottom: 0px;
  padding: 20px;
  background-color: #dcdcdc;
  border-radius: 8px;
}


.patient-metrices-new-value-minutes {
  font-family: "Open Sans", sans-serif;
  font-size: 52px;
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0px;
  margin-bottom: 0px;
  padding: 20px;
  background-color: #dcdcdc;
  border-radius: 8px;
  width: 55px;
}


.patient-metrices-new-divider {
  width: 110px;
  height: 1px;
  background-color: #e6e6e6;
  position: absolute;
  top: 155px;
  left: 220px;
  transform: rotate(-90deg);
}

.financial-metrics-new-container {
  width: 549px;
  height: 341px;
  position: absolute;
  top: 37px;
  left: 0px;
  border-radius: 16px;
  background-color: #f8f8f8;
  padding: 16px;
  box-sizing: border-box;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.dark-mode .financial-metrics-new-container{
  background-color: #2d1227;
}
.dark-mode .financial-metrics-new-title,
.dark-mode .financial-metrics-new-revenue,
.dark-mode .financial-metrics-new-label span{
  color: white;
}

.financial-metrics-new-title {
  font-size: 14px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: black;
  position: absolute;
  top: 16px;
  left: 16px;
}

.financial-metrics-new-subtitle {
  font-size: 10px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #808080;
  position: absolute;
  top: 36px;
  left: 16px;
}

.financial-metrics-new-revenue {
  font-size: 30px;
  font-weight: 700;
  font-family: "Open Sans", sans-serif;
  color: black;
  position: absolute;
  top: 62px;
  left: 16px;
}

.financial-metrics-new-indicator {
  width: 66px;
  height: 24px;
  position: absolute;
  top: 16px;
  left: 467px;
  border-radius: 12px;
  background-color: #883979;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 400;
  color: white;
  font-family: "Poppins", sans-serif;
}

.financial-metrics-new-graph {
  width: 481px;
  height: 160px;
  position: absolute;
  top: 143px;
  left: 52px;
}

.financial-metrics-new-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
}

.financial-metrics-new-label-earned {
  width: 58px;
  height: 18px;
  position: absolute;
  top: 311px;
  left: 194px;
}

.financial-metrics-new-label-spent {
  width: 58px;
  height: 18px;
  position: absolute;
  top: 311px;
  left: 304px;
}

.financial-metrics-new-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.financial-metrics-new-circle-earned {
  background-color: #883979;
}

.financial-metrics-new-circle-spent {
  background-color: #2585e0;
}

.super-admin-area-main-container-analytics {
  width: 531px;
  height: 33px;
  top: 19px;
  left: 277px;
  gap: 529px;
  /* opacity: 1; */
  background-color: #fff;
  position: absolute;
  z-index: 9;
  color: #883979;
  font-family: Poppins;
  font-size: 22px;
  font-weight: 600;
  line-height: 33px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  white-space: nowrap;
  word-break: keep-all;
}
.dark-mode .super-admin-area-main-container-analytics {
  background-color: #351e30;
}
.super-analytics-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
  padding: 20px;
  box-sizing: border-box;
  top: -100px;
  left: -50px;
  z-index: -1;
}

.super-analytics-section {
  position: absolute;
}

.super-analytics-title {
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  color: #666666;
  margin-bottom: 10px;
}
.dark-mode .super-analytics-title {
  color: #cccccc;
}

.top-performers {
  /* max-width: 900px; */
  margin: auto;
  width: 80%;
  /* background: white; */
  border-radius: 10px;
  padding: 20px;
  position: absolute;
  top: 900px;
  left: 320px;
  z-index: -1;
}

.dark-mode .performer-card {
  background: #2d1227;
  color: white;
}

h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
  width: 90%;
}
.h2-dark {
  color: white;
}

.performers-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2rem;
  width: fit-content;
}

.performer-card {
  background: #fafafa;
  border-radius: 10px;
  padding: 15px;
  width: 350px;
  height: 90px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.card-dark {
  background-color: #1e0419 !important;
  color: white;
}
.performer-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 2rem;
  height: 100%;
}
.performer-info > div {
  display: flex;
  gap: 1rem;
  width: 100%;
  height: 35px;
}
.performer-info > div > p {
  width: fit-content;
  align-self: center;
  font-size: 14px;
  font-weight: 500;
  font-family: poppins;
}
.performer-info > div > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* border: 1px solid black; */
}
.cases-div {
  display: flex;
}
.cases-div > p {
  margin-left: 1rem;
}
.name {
  font-weight: bold;
  margin: 0;
  font-size: 16px;
}

.up {
  color: green;
  font-weight: bold;
}

.down {
  color: red;
  font-weight: bold;
}

.rank {
  position: absolute;
  top: 10px;
  right: 10px;
  background: purple;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.rank-dark {
  background: #5c2a5c;
  color: white;
}
@media only screen and (min-width: 1201) and (max-width: 1340) {
  .performers-grid {
    justify-content: flex-start;
    width: 100%;
  }
  .top-performers {
    width: 80%;
  }
}

/* Container for the Donut Chart */
.super-global-donut-chart-container {
  position: relative; /* Ensures child elements are positioned relative to this container */
  width: 240px;
  height: 240px; /* Adjust height as per your layout */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floating Label 1 */
.super-global-donut-chart-floating-label1 {
  position: absolute; /* Absolute positioning to align with the chart */
  top: 20px; /* Adjust to match donut chart placement */
  left: 40px; /* Adjust to center on the segment */
  width: 48px;
  height: 48px;
  background-color: #ffffff;
  color: #883979;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for floating effect */
  z-index: 10; /* Ensure it appears above the donut chart */
}

/* Floating Label 2 */
.super-global-donut-chart-floating-label2 {
  position: absolute; /* Absolute positioning to align with the chart */
  top: 126px; /* Adjust to match donut chart placement */
  left: 138px; /* Adjust to center on the segment */
  width: 48px;
  height: 48px;
  background-color: #ffffff;
  color: #ff8c1a;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for floating effect */
  z-index: 10; /* Ensure it appears above the donut chart */
}

/* Popup container */

.super-version-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent black */
  pointer-events: none; /* Disable interaction */
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  pointer-events: none; /* Default: disable interaction */
  transition: opacity 0.5s ease-in-out;
  z-index: 999; /* Ensure it covers the background */
}

/* When the popup is open, make the overlay visible */
.super-version-overlay.open {
  opacity: 1; /* Make the overlay fully visible */
  pointer-events: all; /* Enable interaction */
}

.super-version-popup {
  background-color: white;
  border-radius: 8px 8px 8px 8px;
  padding: 20px;
  width: 267px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: fixed;
  bottom: 75px;
  right: 362px;
  z-index: 1000; /* Higher than the overlay */
  animation-duration: 0.5s;
  pointer-events: auto; /* Allow interaction */
}

.dark-mode .super-version-popup {
  background: #1e0419;
}

/* Close button */
.super-version-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.dark-mode .super-version-close-btn {
  color: #ffffff;
}

/* Popup heading and paragraph */
.super-version-popup h2 {
  margin: 0;
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 600;
  line-height: 19.07px;
  letter-spacing: 0.0288em;
}

.dark-mode .super-version-popup h2 {
  color: #ffffff;
}

.super-version-popup p {
  font-family: Open Sans;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.0288em;
}

.dark-mode .super-version-popup p {
  color: #ffffff;
}

/* Fade-in animation */
@keyframes fadeIn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Fade-out animation */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Add fade-in effect */
.super-version-popup.fade-in {
  animation-name: fadeIn;
  animation-fill-mode: forwards;
}

/* Add fade-out effect */
.super-version-popup.fade-out {
  animation-name: fadeOut;
  animation-fill-mode: forwards;
}

.super-version-speech-bubble {
  background-color: none;
  border-radius: 10px;
  padding: 4px;
  /* position: relative; */
}

.super-version-speech-bubble:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 8px solid #ffffff;
  bottom: -8px;
  left: 148.5px;
  transform: translateX(-50%);
  z-index: 9999;
}

.dark-mode .super-version-speech-bubble {
  background-color: none;
  /* position: relative; */
  padding: 4px;
}

.dark-mode .super-version-speech-bubble:after {
  border-top: 8px solid #1e0419;
  border-right: 14px solid transparent;
  width: 1px;
  height: 0;
  bottom: -8px;
  left: 7.5px;
  transform: translateX(-50%);
}

/* Popup container */
.super-about-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent black */
  pointer-events: none; /* Disable interaction */
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  transition: opacity 0.5s ease-in-out; /* Fade-in transition */
  z-index: 999;
}

/* When the popup is open, make the overlay visible */
.super-about-overlay.open {
  opacity: 1; /* Make the overlay fully visible */
  pointer-events: all; /* Enable interaction */
}

.super-about-popup {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  width: 188px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: fixed;
  bottom: 80px;
  right: 340px;
  z-index: 1000; /* Ensure it’s above the overlay */
  animation-duration: 0.5s;
  pointer-events: auto; /* Allow interaction with the popup */
}

.dark-mode .super-about-popup {
  background: #1e0419;
}

/* Fade-in animation */
@keyframes fadeIn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Fade-out animation */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Apply fade-in effect */
.super-about-popup.fade-in {
  animation-name: fadeIn;
  animation-fill-mode: forwards;
}

/* Apply fade-out effect */
.super-about-popup.fade-out {
  animation-name: fadeOut;
  animation-fill-mode: forwards;
}

/* Close button */
.super-about-close-btn:hover,
.super-about-close-btn:focus {
  color: #ff4a4a;
}

.super-about-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

/* Popup heading and paragraph */
.super-about-popup h2 {
  margin: 0;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 21.79px;
  letter-spacing: 0.0288em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.super-about-popup div {
  display: flex;
  align-items: center;
  height: 45px;
}

.super-whatsapp-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.super-reach-out-button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

/* .reach-out-button:hover {
  background-color: #0056b3;
} */

.super-about-speech-bubble {
  background-color: none;
  border-radius: 10px;
  /* padding: 4px; */
  height: 0px !important;
  /* position: relative; */
}


.super-about-speech-bubble:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 8px solid #ffffff;
  bottom: -8px;
  left: 112.5px;
  transform: translateX(-50%);
  z-index: 9999;
}

.dark-mode .super-about-speech-bubble{
  background-color: none;
  /* position: relative; */
  padding: 4px;
}

.dark-mode .super-about-speech-bubble:after{
  border-top: 8px solid #1E0419;
  border-right: 14px solid transparent;
  width: 1px;
  height: 0;
  bottom: -8px;
  left: 7.5px;
  transform: translateX(-50%);
}

/* Overlay styling */
.super-req-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001 !important;
}

/* Modal content styling */
.super-req-modal-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  max-width: 1081px;
  height: 760px;
  width: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1000 !important;
  animation: fadeIn 0.3s ease-in-out;
  outline: solid 1px #2d1227 !important;
}
@media (max-width: 800px) {
  .super-req-modal-content {
    padding: 3px;
  }
}

.dark-mode .super-req-modal-content {
  background-color: #1e0419;
}

/* Header styling */
.super-req-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
}
.dark-mode .super-req-modal-header {
  border-bottom: 1px solid rgb(51, 50, 50);
}

.super-req-modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px;
}

.super-requestForm-close-btn {
  position: relative;
  font-size: 2rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
  margin-top: -20px;
  margin-right: 0px;
}

/* Form styling */
.super-request-form-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}

.super-request-form-row div {
  flex: 1 1;
}

.super-full-name-label {
  display: block;
  font-size: 20px;
  margin-bottom: 12px;
  color: black;
  font-weight: 600;
  letter-spacing: 2.4%;
  letter-spacing: 1px;
  font-family: "Open Sans";
  text-align: left !important;
  margin-top: 10px;
}
.dark-mode .super-label {
  color: #ddd;
}

.super-req-input,
.super-req-select {
  width: 100%;
  padding: 14px 15px 14px 15px;
  font-size: 16px;

  /* border: 1px solid #91007c; */
  border-radius: 5px;
  outline: none;
  box-sizing: border-box;
  line-height: 0px;
  color: #883979;
}

.super-request-form-row .super-req-input {
  border: 1px solid #91007c;
  border-radius: 8px;
}
.dark-mode .super-request-form-row .super-req-input {
  border: 1px solid #b3b3b3;
  color: white;
}

.dark-mode .super-request-form-row .super-req-input:focus {
  border-color: #ad499a;
}

.dark-mode .super-request-form-row .super-req-input:hover {
  border-color: #ad499a;
}

.dark-mode .super-full-name-label {
  color: #ffffff;
}

.super-req-input:focus,
select:focus,
textarea:focus {
  border-color: #ad499a;
}
.dark-mode .super-request-form-row1 select:focus,
.dark-mode .super-request-form-row1 select:hover {
  background-color: transparent !important; /* Highlight the border on hover or focus */
}

/* Buttons styling */
.super-book-btn,
.super-clear-btn {
  padding: 10px 15px;
  font-size: 0.9rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

.super-book-btn {
  background: #ad499a;
  color: #fff;
}

.super-book-btn:hover {
  background: #008026;
}

.super-clear-btn {
  background: #e9ecef;
  color: #333;
}

.super-clear-btn:hover {
  background: #d6d8db;
}

/* Animation for modal */
@keyframes fadeIn {
  from {
    opacity: 1;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive styling */
@media (max-width: 576px) {
  .super-request-form-row {
    flex-direction: column;
    gap: 10px;
  }

  .super-req-modal-content {
    padding: 15px;
  }
}
.super-request-form-row1 textarea {
  display: flex !important; /* Apply flexbox layout */
  flex-direction: column !important; /* Align children (label and textarea) in a column */
  gap: 15px !important;
  width: 97% !important;
  padding: 10px;
  position: relative;
  color: #ad499a;
  font-size: 16px;
  margin-bottom: 20px;
}
textarea {
  height: 100px;
  resize: none;
}
.super-form-row1 label {
  display: block !important;
  font-size: 1.3rem !important;
  margin-bottom: 5px !important;
  color: #555 !important;
  text-align: left !important;
}
.super-req-modal-content button {
  font-size: 13px !important;
}
.dark-mode .super-request-form-row1 textarea {
  background-color: transparent !important;
  color: white;
}
.dark-mode .super-request-form-row1 .super-req-select {
  background-color: transparent !important;
  color: #b3b3b3;
}

.dark-mode .super-request-form-row1 .super-req-select:focus {
  color: #ad499a;
}
.dark-mode .super-request-form-row1 select option {
  background-color: transparent !important;
  color: black;
}
.dark-mode .super-requestForm-close-btn {
  color: #fff !important;
}

.dark-mode .super-req-modal-header h2 {
  color: #fff !important;
}

/* Container for the entire slider */
.super-announcement-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent black */
  pointer-events: none; /* Disable interaction */
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px); /* Blur the background */
  transition: opacity 0.5s ease-in-out; /* Fade-in transition */
  z-index: 999;
}

/* When the slider is visible, make the overlay visible */
.super-announcement-overlay.open {
  opacity: 1; /* Make the overlay fully visible */
  pointer-events: all; /* Enable interaction */
}

.super-announcement-slider {
  position: fixed;
  top: 80px;
  left: -320px;
  background-color: #fff;
  padding: 20px;
  width: 320px;
  height: 618px;
  overflow-y: auto;
  z-index: 1000; /* Higher than the overlay */
  animation-duration: 0.5s;
  pointer-events: auto; /* Allow interaction */
}

@keyframes slide-in {
  0% {
    left: -320px;
    visibility: visible;
  }
  100% {
    left: 0;
  }
}

@keyframes slide-out {
  0% {
    left: 0;
  }
  100% {
    left: -320px;
  }
}

.super-announcement-slider.slide-in {
  visibility: visible;
  animation: slide-in 0.5s ease-in-out forwards;
}

.super-announcement-slider.slide-out {
  animation: slide-out 0.5s ease-in-out forwards;
}

@media only screen and (min-width: 1201px) {
  .super-announcement-slider {
    height: 100%;
    max-height: 1014px;
  }
}

.dark-mode .super-announcement-slider {
  background: #1e0419;
}

/* Close button */
.super-announcement-close-btn {
  position: relative;
  left: 300px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.dark-mode .super-announcement-close-btn {
  color: white;
}

/* Individual announcement card */
.super-announcement-card {
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  /* border: 1px solid #1e0419; */
  box-shadow: 0px 0px 4px 0px #00000040;
  text-align: left;
}

.dark-mode .super-announcement-card {
  background: #2d1227;
}

/* Category section */
.super-announcement-category {
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-bottom: 5px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.032em;
  gap: 10px;
}

/* Small dot in the category */
.super-announcement-dot {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
  margin-right: 8px;
}

.super-announcement-category-name {
  font-weight: bold;
}

/* Title of the announcement */
.super-announcement-title {
  font-weight: bold;
  color: #333;
  margin: 0;
  font-family: Open Sans;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0.0288em;
  text-align: left;
}

.dark-mode .super-announcement-title {
  color: #ffffff;
}

/* Description of the announcement */
.super-announcement-description {
  font-size: 14px;
  margin-top: 8px;
}

.dark-mode .super-announcement-description {
  color: #ffffff;
}

.super-main-container {
  width: 835px;

  margin: 0px auto;
  border-radius: 16px;
  background-color: #f8f8f8;
  padding: 24px;
}
.dark-mode .super-main-container{
  background-color: #1E0419;
}

.super-data-table {
  width: 100%;
  border-collapse: separate; /* Use 'separate' to allow spacing between rows */
  border-spacing: 0 20px; /* Adds a vertical gap of 20px between rows */
}

.super-data-table thead {
  margin-bottom: 20px; /* Adds a 40px gap below the heading row */
}

.super-data-table tbody tr {
  height: 46px; /* Sets the height of each row */
}

.super-data-table tbody {
  position: relative;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  color: #000000;
  margin-left: 0px;
}

.super-data-table th {
  text-align: left;
  font-weight: bold;
}

.super-data-table td {
  width: auto;
  padding: 8px 16px;
}

.super-data-table tr {
  border-radius: 8px;
}
.dark-mode .super-data-table tr {
  background-color: #1E0419 !important;
  border: 0px solid black !important;
}
.super-data-table tr:nth-child(odd) {
  background-color: #ffffff;
}
.dark-mode .super-data-table tr:nth-child(odd){
  background-color: #2D1227;
}

.super-data-table tr:nth-child(even) {
  background-color: #f8f8f8;
}
.dark-mode .super-data-table tr:nth-child(even) {
  background-color: #1E0419;
}
.super-full-export {
  color: #ff8c1a;
  cursor: pointer;
}

.super-selective-export {
  color: #883979;
  cursor: pointer;
}

.super-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9998;
}

.super-popup {
  width: 578px;
  height: 229px;
  border-radius: 12px;
  background-color: #ffffff;
  padding: 24px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.super-popup-title {
  font-size: 30px;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  margin-bottom: 16px;
  margin-top: 0px;
  align-items: center;
  justify-content: center;
}

.super-input-section {
  display: flex;
  flex-direction: column; /* Align children vertically */
  align-items: flex-start;
  gap: 15px;
}

.super-input-row {
  display: flex;
  align-items: center; /* Aligns input and button on the same level */
  width: 100%; /* Ensures full width */
  gap: 10px; /* Space between input and button */
}

.super-input-title {
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
}

.super-input {
  width: 357px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #b3b3b3;
  padding: 8px;
}

.super-send-button {
  width: 94px;
  height: 48px;
  background-color: #883979;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.super-export-popup-close-button {
  position: relative;
  top: -6px;
  right: -560px;
  background: transparent;
  border: none;
  font-size: 30px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
}

.super-export-popup-close-button:hover {
  color: #ff0000;
}

.super-input-dropdown {
  display: flex;
  flex-direction: column;
  position: relative;
}

.dropdownList-super {
  position: absolute;
  top: 40px;
  background-color: white;
  padding: 10px;
  width: 357px;
  height: auto;
  border-radius: 8px;
  border: 1px solid #883979;
  padding: 8px;
  list-style: none;
  cursor: pointer;
}
.dropdownList-super li:hover{
  background-color: #883979;
  color: #f8f8f8;
}
.dropdownList-super ul{
  margin: 0px;
}
.dark-mode .super-popup{
  background-color: #1E0419;
  border: 1px solid #b3b3b3;
}
.dark-mode .super-popup-title,
.dark-mode .super-export-popup-close-button,
.dark-mode .super-input-title
{
  color: white;
}
.dark-mode .MuiDialogContent-root,
.dark-mode .patientrecords-tb-thead,
.dark-mode .patientrecords-tb-row,
.dark-mode .super-control-panel-registration-modal,
.dark-mode .super-dropdown-content-permission{
  background-color: #1E0419 !important;
}
.dark-mode .super-control-panel-registration-modal{
  border: 1px solid #b3b3b3;
}
.add-super-admin-container {
  position: absolute;
  width: 834px;
  height: 400px;
  margin: 56px auto;
  border-radius: 16px;
  background-color: #f8f8f8;
  padding: 24px;
  box-sizing: border-box;
  top: 236px;
  left: 277px;
}

.dark-mode .add-super-admin-title{
  color: white;
}
.dark-mode .add-super-admin-container {
  background-color: #1e0419;
  color: white;
}

.add-super-admin-input-section {
  position: absolute;
  width: 380px;
}

.add-super-admin-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}
.dark-mode .add-super-admin-label {
  color: #ffffff;
}

.add-super-admin-input {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: none;
  background-color: #ffffff;
  padding: 8px;
  box-sizing: border-box;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.dark-mode .add-super-admin-input {
  background-color: #1e0419;
  border: 1px solid white;
  color: white;
}

.add-super-admin-phone-container {
  display: flex;
}

.add-super-admin-country-code {
  height: 40px;
  width: 80px;
  border-radius: 8px 0 0 8px;
  border: none;
  background-color: #ffffff;
  padding: 8px;
  box-sizing: border-box;
}
.dark-mode .add-super-admin-country-code {
  background-color: #1e0419;
  border: 1px solid white;
  color: white;
}

.add-super-admin-input-phone {
  flex: 1 1;
  height: 40px;
  border-radius: 0 8px 8px 0;
  background-color: #ffffff;
  padding: 8px;
  box-sizing: border-box;
}
.dark-mode .add-super-admin-input-phone {
  background-color: #1e0419;
  border: 1px solid white;
  color: white;
}

.add-super-admin-button {
  position: absolute;
  top: 336px;
  left: 687px;
  background-color: #8a2b83;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}
.add-super-admin-button:hover {
  background-color: #53174f;
}

.add-super-admin-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.add-super-admin-popup {
  width: 526px;
  height: 305px;
  border-radius: 16px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.add-super-admin-popup-title {
  font-size: 24px;
  color: #333;
}
.add-super-admin-dropdown {
  width: 40px;
  padding: 10px;
  /* border: 1px solid #ccc; */
  height: 19px;
  border-radius: 5px 0px 0px 5px;
  background-color: white;
  cursor: pointer;
  position: relative;
}
.dark-mode .add-super-admin-dropdown {
  background-color: #1e0419;
  color: #fff;
  border: 1px solid white;
}
.add-super-admin-dropdown-menu {
  position: absolute;
  width: 377px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 8px;
  z-index: 10;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.add-super-admin-dropdown-menu2 {
  position: absolute;
  width: 377px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 5px;
  z-index: 10;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.add-super-admin-dropdown-menu3 {
  position: absolute;
  width: 377px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 5px;
  z-index: 10;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 240px;
  overflow: scroll;
}

.add-super-admin-dropdown-item {
  padding: 10px;
  cursor: pointer;
}

.add-super-admin-dropdown-item:hover {
  background-color: #8a2b83;
  color: white;
}
.dark-mode .add-super-admin-dropdown-menu {
  background-color: #1e0419;
}
.dark-mode .add-super-admin-dropdown-menu2 {
  background-color: #1e0419;
}

.dark-mode .add-super-admin-dropdown-menu3 {
  background-color: #1e0419;
}

.enable-superadmin-container {
  position: absolute;
  width: 834px;
  /* height: 400px; */
  margin: 56px auto;
  border-radius: 16px;
  background-color: #f8f8f8;
  padding: 24px;
  box-sizing: border-box;
  top: 236px;
  left: 277px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dark-mode .enable-superadmin-container{
  background-color: #1E0419;
}

.enable-superadmin-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #883979;
  border-radius: 8px;
  padding: 8px;
  /* background-color: #883979; */
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
}

.enable-superadmin-profile {
  margin-right: 16px;
}

.enable-superadmin-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.enable-superadmin-details {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.enable-superadmin-name {
  font-weight: bold;
  margin: 0;
  position: relative;
  top: 15px;
  right: 150px;
  font-family: Open Sans;
font-size: 16px;
font-weight: 400;
line-height: 21.79px;
text-align: left;
text-underline-position: from-font;
-webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none;
}

.dark-mode .enable-superadmin-name{
  color: white;
}




.enable-superadmin-disabled {
  color: #666;
}
.dark-mode .enable-superadmin-disabled{
  color:white;
}

.enable-superadmin-button {
  background-color: white;
  color: #883979;
  border: 1px solid #883979;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.dark-mode .enable-superadmin-button{
  background-color: #1E0419;
  border: 1px solid #883979;
  color: #883979;
}

.enable-superadmin-button:hover {
  background-color: #883979;
  color: white;
}

.super-admin-subscription-container {
  width: 834px;
  height: 349px;
  background-color: #f8f8f8;
  border-radius: 16px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  position: absolute;
  top: 152px;
  left: 270px;
}

.dark-mode .super-admin-subscription-container {
  background-color: #1e0419;
}

.super-admin-subscription-sliding-section {
  display: flex;
  gap: 10px;
  width: 1242px;
  height: 247px;
  padding: 10px;
}

.super-admin-subscription-card {
  width: 398px;
  height: 247px;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.super-admin-subscription-card-pro {
  border: 1px solid #fcd9f5;
  background-color: #fcd9f5;
}

.super-admin-subscription-card-professional {
  border: 1px solid #883979;
  background-color: #fff;
}

.super-admin-subscription-card-basic {
  border: 1px solid #883979;
  background-color: #fff;
}

.super-admin-subscription-title {
  font-size: 16px;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  color: #883979;
  margin: 0;
}

.super-admin-subscription-amount {
  font-size: 24px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  color: #000;
  margin: 0;
}

.dark-mode .super-admin-subscription-amount {
  color: white;
}

.super-admin-subscription-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.super-admin-subscription-button {
  width: 158px;
  height: 30px;
  border-radius: 8px;
  background-color: #883979;
  color: #fff;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.super-admin-subscription-forward-button,
.super-admin-subscription-backward-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #883979;
  position: absolute;
  top: 295px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.super-admin-subscription-forward-button {
  left: 780px;
}

.super-admin-subscription-backward-button {
  left: 720px;
}

.super-admin-subscription-sliding-section {
  display: flex;
  width: 300%;
  /* Three cards */
  transition: transform 0.5s ease-in-out;
}

.super-admin-subscription-card {
  /* flex: 1 0 33%; Each card takes full width */
  box-sizing: border-box;
}

.dark-mode .super-admin-subscription-card {
  background-color: #2d1227;
  color: white;
}

.super-admin-subscription-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 32px;
  gap: 32px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.super-admin-subscription-card-free {
  width: 381px;
  height: 449px;
  border-radius: 12px;
  border: 1px solid #d6d6d6;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
  font-family: inherit;
  display: flex;
  flex-direction: column;
}

.dark-mode .super-admin-subscription-card-free{
  background-color: #2d1227;
  color: white;
}

.super-admin-subscription-card-free .expiry-banner {
  background: #fdeaea;
  color: #b71c1c;
  padding: 14px 20px;
  font-family: Inter;
  font-weight: 500;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0%;
  font-family: open sans;
  width: 100%;
  text-align: center;
}

.super-admin-subscription-card-free .card-body {
  padding: 24px 20px 20px 20px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.super-admin-subscription-card-free .plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: Poppins;
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  margin-top: 10px;
  margin-right: 10px;
}

.super-admin-subscription-card-free .plan-name {
  color: #9c27b0;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
}

.super-admin-subscription-card-free .plan-price {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
}

.super-admin-subscription-card-free .current-plan-btn {
  font-family: Poppins;
  font-weight: 500;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0%;
  width: 83;
  height: 19;
  top: 48px;
  left: 282px;
  border-radius: 2px;
  gap: 8px;
  border-width: 1px;
  padding-top: 2px;
  padding-right: 10px;
  padding-bottom: 2px;
  padding-left: 10px;
  border: 1px solid #0c8e13;
  background: #ecffed;
  color: #0c8e13;
}

.super-admin-subscription-card-free hr {
  margin: 18px 0;
  border: none;
  border-top: 1px solid #eee;
}

.super-admin-subscription-card-free ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.super-admin-subscription-card-free li {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  font-family: Open Sans;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
}

.super-admin-subscription-card-free .feature-check {
  margin-right: 10px;
  color: #43a047;
  font-size: 20px;
}

.super-admin-subscription-card-free .cta-btn {
  align-self: flex-end;
  width: 100%;
  background: #666666;
  color: #fff;
  padding: 6px 0;
  font-weight: 600;
  font-size: 18px;
  border: none;
  border-radius: 12px;
  margin-top: 0px;
  cursor: pointer;
  font-family: Poppins;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  height: 32px;
}

.view-more-line {
  background: #873979;
  font-size: 12px;
  padding: 12px;
  border-radius: 20px;
  color: #fff;
  margin-bottom: -20px;
  margin-top: 10px;
  cursor: pointer;
}
.super-admin-area-main-container {
  width: 850px;
  height: 33px;
  top: 19px;
  left: 277px;
  gap: 529px;
  /* opacity: 1; */
  background-color: #fff;
  position: absolute;
  z-index: 9;
  color: #883979;
  font-family: Poppins;
  font-size: 22px;
  font-weight: 600;
  line-height: 33px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.dark-mode .super-admin-area-main-container {
  background-color: #351e30;
}

.super-admin-area-section {
  /* width: 404px; */
  height: 52px;
  position: absolute;
  top: 73px;
  left: 273px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
}
.dark-mode .super-admin-area-section {
  background-color: #2d1227;
}
.super-admin-area-tab {
  width: 216px;
  height: 36px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
}

.super-admin-area-tab.super-active {
  background-color: #883979;
  color: #ffffff;
}

.super-admin-area-tab:not(.super-active) {
  background-color: #f8f8f8;
  color: #000000;
}
.dark-mode .super-admin-area-tab {
  background-color: #2d1227;
  color: white;
}
.dark-mode .super-admin-area-tab.super-active {
  background-color: #883979;
  color: #ffffff;
}

.super-admin-area-title {
  font-size: 16px;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
  color: #000000;
  position: absolute;
  top: 142px;
  left: 277px;
}
.dark-mode .super-admin-area-title {
  color: white;
}
.super-admin-area-button-section {
  width: 609px;
  height: 40px;
  display: flex;
  gap: 16px;
  margin-top: 80px;
  margin-left: 327px;
  position: relative;
  left: -324px;
  top: 82px;
}

.super-admin-area-action-button {
  height: 40px;
  border: 1px solid #883979;
  border-radius: 8px;
  cursor: pointer;
  background-color: #ffffff;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  padding: 0 16px;
}
.dark-mode .super-admin-area-action-button {
  background-color: #351e30;
  border: 1px solid #883979;
  color: white;
}

.super-admin-area-action-button:hover,
.super-admin-area-action-button:focus {
  background-color: #883979 !important;
  color: #ffffff;
}

.super-admin-area-active-component {
  margin-top: 92px;
  padding: 10px;
  background: transparent;
}
.super-active-button {
  background-color: #883979;
  color: #fff;
  border: none;
}
.super-admin-area-action-button.super-active {
  background-color: #883979;
  color: #ffffff;
}
.add-super-admin-input:hover,
.add-super-admin-input-phone:hover {
  border-color: #883979;
}
.dark-mode .add-super-admin-input option {
  color: white !important;
}
.add-super-admin-input option {
  max-height: 400px !important;
  overflow-y: scroll;
}

.superadmin-consent {
    margin-top: 50px;
    padding: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    background-color: #f8f8f8;
}

.superadmin-consent-title {
    margin-bottom: 24px;
    font-family: poppins;
}

.superadmin-consent-title h1 {
    font-size: 24px;
    color: #333;
    font-family: poppins;
}

.consent-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.consent-option {
    margin-bottom: 16px;
}

/* Override Material UI styles if needed */
.consent-option .MuiFormControlLabel-root {
    align-items: flex-start;
}

.consent-option .MuiFormControlLabel-label {
    font-size: 14px;
    line-height: 1.5;
}

.consent-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.learn-more-btn {
    margin-right: 8px !important;
}

.learn-more-btn {
    padding: 8px 16px;
    background-color: transparent;
    color: #883979;
    border: 0.5px solid #883979;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.learn-more-btn:hover {
    background-color: #883979;
    color: white;
}

.confirm-consent-btn {
    padding: 8px 16px;
    background-color: #883979;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.confirm-consent-btn:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.7;
}

.learn-more-btn:hover,
.confirm-consent-btn:hover {
    opacity: 0.9;
}

/* Learn More Popup Styles */
.learn-more-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.learn-more-popup {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  width: 80%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.learn-more-popup h2 {
  margin-top: 0;
  color: #333;
  font-size: 20px;
  margin-bottom: 16px;
}

.learn-more-content {
  margin-bottom: 20px;
}

.learn-more-content p {
  margin-bottom: 16px;
  line-height: 1.6;
  color: #555;
}

.close-popup-btn {
  padding: 8px 16px;
  background-color: #882979;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  float: right;
}

.close-popup-btn:hover {
  opacity: 0.9;
}

.dark-mode .superadmin-consent-title h1{
  color: white;
}

.dark-mode .superadmin-consent{
  background-color: #2d1227;
}

.dark-mode .consent-option .MuiFormControlLabel-label{
    color: white;
}

.dark-mode .learn-more-popup{
    background-color: #02273C;
}

.dark-mode .learn-more-popup h2{
    color: white;
}
.dark-mode .learn-more-content p{
  color: white;
}
.queue-main-container {
  width: 105%;
  /* height: 100%; */
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.queue-tabs-wrapper {
  width: 100%;
  display: flex;
  background-color: #f5f5f5;
}

.queue-tab-button {
  padding: 15px 30px;
  background-color: transparent;
  color: #333;
  justify-content: center;
  align-items: center;
  display: flex;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.dark-mode .queue-tab-button {
  color: white;
}

.queue-tab-active {
  background-color: #883979;
  color: white !important;
  border-radius: 8px 8px 0 0;
}

.queue-content-area {
  padding: 20px;
}

.queue-filters-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
}

.queue-search-wrapper {
  flex: 1 1;
  max-width: 400px;
  position: relative;
}

.queue-search-field {
  width: 100%;
  padding-left: 35px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23999\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"M21 21l-4.35-4.35\"/></svg>");
  background-repeat: no-repeat;
  background-position: 10px center;
}

.queue-sort-wrapper {
  width: 150px;
  margin-left: 15px;
}

.queue-sort-select {
  width: 100%;
  padding: 10px;
  padding-right: 30px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23999\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6 6-6\"/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.dark-mode .queue-main-container {
  background-color: #1e0419;
}

.dark-mode .queue-tabs-wrapper {
  background-color: #2d1227;
}

.dark-mode .queue-search-field,
.dark-mode .queue-sort-select {
  background-color: #1e0419;
  color: white;
  border-color: #883979;
}

.queue-pagination-container{
  justify-content: center;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 15px;
  letter-spacing: 0.5px;
  font-family: poppins;
  align-items: center;
  gap: 10px;
}

.queue-pagination-arrow-button{
  width: 32px;
height: 32px;
background-color: #883979;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

.queue-pagination-arrow-button:hover{
  background-color: #6b2d5d;
}
.queue-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 300px;
    text-align: center;
}

.queue-loading-container p {
    margin-top: 10px;
    color: #666;
    font-size: 14px;
}

.queue-data-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    background-color: #fff;
    /* padding: 20px; */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.queue-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    margin-top: 10px;
}

.queue-data-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.queue-data-table td {
    padding: 14px 16px;
    font-size: 13px;
    background: #fafafa;
    /* border-bottom: 1px solid #eee; */
    /* border-radius: 8px; */
    font-weight: 500;
    color: #333;
}

.queue-data-row {
    background-color: #fafafa;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.dark-mode .queue-data-row{
    background-color: #1e0419;
}
/* 
.queue-data-row:hover {
    background-color: #f7f7f7;
} */

.queue-data-table td:nth-child(1),
.queue-data-table th:nth-child(1) {
    width: 8%;
}

.queue-data-table td:nth-child(2),
.queue-data-table th:nth-child(2) {
    width: 18%;
}

.queue-data-table td:nth-child(3),
.queue-data-table th:nth-child(3) {
    width: 18%;
}

.queue-data-table td:nth-child(4),
.queue-data-table th:nth-child(4) {
    width: 15%;
}

.queue-data-table td:nth-child(5),
.queue-data-table th:nth-child(5) {
    width: 12%;
}

.queue-data-table td:nth-child(6),
.queue-data-table th:nth-child(6) {
    width: 18%;
    text-align: left;
}

.queue-progress-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 20px;
    height: 12px;
    position: relative;
    overflow: hidden;
}

.queue-progress-bar {
    height: 100%;
    background-color: #883979;
    border-radius: 20px;
    transition: width 0.3s ease;
}

.queue-actions-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.queue-stop-button,
.queue-delete-button {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    width: 44;
height: 24;
border-radius: 4px;
border-width: 1px;

}

.queue-stop-button {
    background-color: #2196F3;
    color: #fff;
}

.queue-delete-button {
    border: 1px solid #f44336;
    color: #f44336;
}

.queue-delete-button:hover{
    background-color: #f44336;
    color: #fff;
}

.queue-stop-button:hover {
    background-color: #0b7dda;
}

.queue-delete-button:hover {
    background-color: #d32f2f;
}

.queue-tabs {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.queue-tab {
    padding: 8px 20px;
    border-radius: 24px;
    font-weight: 500;
    font-size: 14px;
    background: #f0f0f0;
    cursor: pointer;
    transition: 0.3s;
    color: #333;
}

.queue-tab.active {
    background: #883979;
    color: #fff;
}
.queue-search-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.queue-search-input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    width: 220px;
}

.queue-dropdown {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    -webkit-appearance: none;
            appearance: none;
    cursor: pointer;
}

.dark-mode .queue-data-container{
    background-color: #2d1227;
    color: white;
}

.dark-mode .queue-data-table td{
    color: white;
}

.super-admin-setting-main-container1{
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
  position: absolute; /* Required for centering within a viewport */
  top: 140px; /* Move to the vertical center */
  left: 50%; /* Move to the horizontal center */
  transform: translate(-50%, -50%); /* Adjust to center the element */
  width: 100%; /* Optional: Adjust width to fit content */
  max-width: 1121px; /* Adjust width based on your design */
  padding: 20px; /* Add spacing */

}
.super-admin-setting-main-title{
  width: 92px;
  position: absolute;
height: 33px;
top: 50px;
left: 40px;
gap: 0px;
opacity: 0px;
font-family: Poppins;
font-size: 22px;
font-weight: 600;
line-height: 33px;
text-align: left;
text-underline-position: from-font;
-webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none;
color: #883979;

}
.super-admin-setting-container {
  width: 486px;
  height: 39px;
  margin-top: 80px;
  border-radius: 8px;
  background-color: #F8F8F8;
  display: flex;
  gap: 8px;
  padding: 8px;
  position: relative;
  left:-300px;
}

.super-admin-setting-header{
  border: none;
  width: 162px;
  height: 39px;
  border-radius: 8px;
  background-color: #F8F8F8;
  font-size: 14px;
  font-family: Poppins, sans-serif;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.super-admin-setting-button{
  border: none;
  width: 162px;
  height: 39px;
  border-radius: 8px;
  background-color: #F8F8F8;
  font-size: 18px;
  font-family: Poppins, sans-serif;
  cursor: pointer;
  padding-left: 30px;
  padding-right: 30px;
  justify-content: center;
  margin-left: 3px;
}

.super-admin-setting-header .super-admin-setting-button.active {
  background-color: #883979;
  color: #fff;
}

.super-admin-setting-notifications-section,
.super-admin-setting-preferences-section,
.super-admin-setting-security-section {
  width: 1121px;
  margin-top: 24px;
  margin-left: 40px;
  border-radius: 24px;
  background-color: #F8F8F8;
  padding: 16px;
  position: absolute;
  top: 150px;
  padding-bottom: 30px;
  height: 1050px;
}


.super-admin-setting-notification-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.super-admin-setting-title {
  font-size: 16px;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  color: #000;
}

.super-admin-setting-subtitle {
  font-size: 12px;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
  color: #666666;
  margin-top: 8px;
}

.super-admin-setting-toggle {
  cursor: pointer;
}

.super-admin-setting-form-row {
  display: flex;
  gap: 48px;
  margin-bottom: 16px;
}

.super-admin-setting-input {
  width: 450px;
  height: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.super-admin-setting-input label {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
  color: #000;
}

.super-admin-setting-input select {
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
}
.super-admin-setting-input {
  font-family: "Poppins", sans-serif;
}

label {
  font-size: 14px;
  font-weight: bold;
  color: #444;
  margin-bottom: 8px;
  display: block;
}

.custom-dropdown-wrapper {
  position: relative;
  width: 100%;
}

.custom-dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #883979;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}

.custom-dropdown span {
  font-size: 16px;
  color: #333;
}

.dropdown-icon {
  font-size: 12px;
  color: #883979;
}

.custom-dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  max-height: 300px;
  overflow-y: scroll; /* Enable vertical scrolling */
  width: 64.5%;
  margin-top: 10px;
  padding: 0;
  list-style: none;
  border: 1px solid #883979;
  background-color: #fff;
  border-radius: 5px;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Hide scrollbar for all browsers */
  scrollbar-width: none; /* Firefox */
}
.custom-dropdown-options::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Edge */
}


.custom-dropdown-option {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  color: #333;
}

.custom-dropdown-option:hover {
  background-color: #883979;
  color: #fff;
}
.super-admin-setting-main-save-btn {
  width: 65px; /* Hug width */
  height: 30px; /* Hug height */
  position: absolute; /* Needed to apply top and left */
  top: 570px;
  left: 1045px;
  padding: 8px 16px; /* Padding values */
  gap: 8px; /* Gap between child elements (if any) */
  border-radius: 8px; /* Rounded corners for the top-left */
  border-width: 1px; /* Border only at the top */
  border-style: solid; /* Border style (default: solid) */
  opacity: 1; /* Fully transparent */
  background-color: #883979; /* Background color */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  z-index: 1;
}
.super-admin-setting-main-save-btn1 {
  width: 65px; /* Hug width */
  height: 30px; /* Hug height */
  position: absolute; /* Needed to apply top and left */
  top: 1000px !important;
  left: 1045px;
  padding: 8px 16px; /* Padding values */
  gap: 8px; /* Gap between child elements (if any) */
  border-radius: 8px; /* Rounded corners for the top-left */
  border-width: 1px; /* Border only at the top */
  border-style: solid; /* Border style (default: solid) */
  opacity: 1; /* Fully transparent */
  background-color: #883979; /* Background color */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  
}

.super-admin-setting-main-save-btn3 {
  width: 65px; /* Hug width */
  height: 30px; /* Hug height */
  position: absolute; /* Needed to apply top and left */
  top: 262px;
  left: 1045px;
  padding: 8px 16px; /* Padding values */
  gap: 8px; /* Gap between child elements (if any) */
  border-radius: 8px; /* Rounded corners for the top-left */
  border-width: 1px; /* Border only at the top */
  border-style: solid; /* Border style (default: solid) */
  opacity: 1; /* Fully transparent */
  background-color: #883979; /* Background color */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  
}

.super-admin-setting-main-save-btn2 {
  width: 65px; /* Hug width */
  height: 30px; /* Hug height */
  position: absolute; /* Needed to apply top and left */
  top: 380px;
  left: 1045px;
  padding: 8px 16px; /* Padding values */
  gap: 8px; /* Gap between child elements (if any) */
  border-radius: 8px; /* Rounded corners for the top-left */
  border-width: 1px; /* Border only at the top */
  border-style: solid; /* Border style (default: solid) */
  opacity: 1; /* Fully transparent */
  background-color: #883979; /* Background color */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  
}

.subheading-setting-1{
  width: Fixed (1,021px)px;
height: Hug (30px)px;
top: 38px;
left: 30px;
gap: 0px;
display: flex;
justify-content: space-between;
opacity: 0px;
margin-bottom: 24px;
}


.subheading-setting-2{
  width: 1021px;
  height: 30px;
  top: 602px;
  left: 30px;
  gap: 0px;
  display: flex;
  justify-content: space-between;
  opacity: 0px;
  margin-bottom: 24px;
}

.App-Notification{
font-family: Poppins;
font-size: 22px;
font-weight: 500;
line-height: 30px;
letter-spacing: 0.024em;
text-align: left;
text-underline-position: from-font;
-webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none;
color:#883979;
}

.doctor-super-admin-setting-notification-item{
position: relative;
width: 1085px;
height: Hug (30px)px;
left: 20px;
gap: 0px;
display: flex;
justify-content: space-between;
opacity: 0px;
}




/* ChangePasswordPopup.css */

.change-password-popup-overlay {
  position: fixed;
  top: 00;
  left: 0;
  width: 100%;
  height: 100vh;
  /* background: rgba(0, 0, 0, 0.5); */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.change-password-popup-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  font-family: poppins;
  font-weight: 400;
}

.change-password-popup-container h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 24px;
  text-align: center;
  font-family: poppins;
  font-weight: 400;
}

.change-password-form-group {
  margin-bottom: 15px;
}

.change-password-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-family: poppins;
  font-weight: 400;
}

.change-password-form-group input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.change-password-form-actions {
  display: flex;
  justify-content: space-between;
}

.change-password-form-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.change-password-form-actions button[type="submit"] {
  background-color: #883979;
  color: white;
}

.change-password-form-actions button[type="button"] {
  background-color: #f44336;
  color: white;
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper input {
  width: 100%;
  padding-right: 35px;
}

.password-input-wrapper span {
  position: absolute;
  right: 10px;
  cursor: pointer;
  font-size: 18px;
  color: #666;
}

.password-input-wrapper span:hover {
  color: #333;
}

.change-password-message {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #fff; /* Adjust to match your theme */
  background: #ff4d4f; /* Red for error */
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.change-password-message.success {
  background: #28a745; /* Green for success */
}


.error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

.lottie-container-cp {
  width: 24px; 
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.super-admin-profile-main-title{
  width: 220px;
  position: absolute;
height: 33px;
top: 104px;
left: 45%;
gap: 0px;
opacity: 1;
font-family: Poppins;
font-size: 22px;
font-weight: 600;
line-height: 33px;
text-align: left;
text-underline-position: from-font;
-webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none;
color:#883979;
align-items: center;
justify-content: center;

}
.super-admin-profile-container {
  width: 1080px;

  margin: 70px auto 0;
  background: #F8F8F8;
  border-radius: 24px;
  opacity: 1;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dark-mode .super-admin-profile-container,
.dark-mode .super-admin-setting-container,
.dark-mode .super-admin-setting-button,
.dark-mode .super-admin-setting-header {
  background-color: #1E0419;
  color:white;
}

.super-admin-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.super-admin-profile-image {
  width: 214px;
  height: 252px;
  background: #f0f0f0;
  border-radius: 8px;
}

.super-admin-profile-details {
  flex: 1 1;
  margin-left: 20px;
}

.super-admin-profile-details h3,
.super-admin-profile-details p {
  margin: 0;
  font-size: 18px;
  font-family: Poppins;
  font-weight: 400;
}

.super-admin-profile-meta {
  display: flex;
  flex-direction: row;
  gap: 206px;
  position: relative;
  left: -210px;
}
.style1{
  font-family: Poppins;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  text-underline-offset: 2px;
  -webkit-text-decoration-skip: "none";
          text-decoration-skip: "none";
  color: #666666;
}
.style2{
  font-size: 20px !important;
  color: black;
}

.super-admin-profile-meta h4,
.super-admin-profile-meta p {
  margin: 0;
  font-size: 14px;
  font-family: Poppins;
  font-weight: 400;

}
.super-admin-profile-meta h4{
  margin-left: 10px;
}
.super-admin-profile-meta p{
  margin-left: 10px;
}
.dark-mode .style2{
  color: #fff;
}

.super-admin-profile-divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: 24px 0;
}

.super-admin-profile-divider2 {
  border: none;
  border-top: 1px solid #ddd;
  margin: 24px 0;
}

.super-admin-profile-section {
  margin-bottom: 20px;
}

.super-admin-profile-section p {
  width: 443px;
  font-family: Poppins;
}

.super-admin-profile-section h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #883979;
  font-family: Poppins;
  font-weight: 400;
}

.super-admin-profile-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Ensure columns distribute evenly */
  grid-gap: 70px 16px;
  gap: 70px 16px; /* Consistent spacing between grid items */
  max-width: 1080px; /* Limit the grid width to fit the container */
  margin: 0 auto; /* Center align the grid */
  box-sizing: border-box; /* Ensure padding/margin do not cause overflow */
}

/* .super-admin-profile-info-grid > :nth-child(3n) {
  margin-left: 180px; 
}
.super-admin-profile-info-grid > :nth-child(3n-1) {
  margin-left: 80px;
} */



.super-admin-profile-info-grid h5 {
  margin: 0;
  font-size: 14px;
  color: #666;
  font-family: Poppins;
  font-weight: 400;
}

.super-admin-profile-info-grid p {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  font-family: Poppins;
  font-weight: 400;
}

.super-admin-profile-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  font-family: Poppins;
}

.super-admin-profile-edit-button,
.super-admin-profile-save-button {
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: Poppins;
}

.super-admin-profile-edit-button {
  background: #888;
  color: #fff;
  font-family: Poppins;
}

.super-admin-profile-save-button {
  background: #883979;
  color: #fff;
  font-family: Poppins;
}

.camera-img{
  width: 35px;
  background-color: rgb(136, 57, 121);
  position: relative;
  top: 165px;
  left: 149px;
  align-items: initial;
  height: 32px;
  padding: 2px;
  border-radius: 100%;
}

.camera-imgicon{
  margin-left: 5px;
  margin-top: 4px;
  color: white;
}
.line-input-container {
  position: relative;
  width: 300px;
}
.line-input-container-address {
  position: relative;
  width: 600px;
}

.line-input {
  width: 70%;
  border: none;
  border-bottom: 2px solid #555;
  background: transparent;
  font-size: 16px;
  padding: 5px 0;
  outline: none;
}

.line-input:focus {
  border-bottom: 2px solid #883979; /* Change to a highlight color when focused */
}

.line-input::placeholder {
  color: #999; /* Style for the placeholder text */
}
.icon-pencil {
  font-size: 20px;
  color: #555;
  cursor: pointer;
}

.icon-pencil:hover {
  color: #883979; /* Change color on hover */
}
.super-admin-profile-main-title{
  width: 220px;
  position: absolute;
height: 33px;
top: 104px;
left: 45%;
gap: 0px;
opacity: 1;
font-family: Poppins;
font-size: 22px;
font-weight: 600;
line-height: 33px;
text-align: left;
text-underline-position: from-font;
-webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none;
color:#883979;
align-items: center;
justify-content: center;

}
.super-admin-profile-container {
  width: 1080px;
  margin: 70px auto 0;
  background: #F8F8F8;
  border-radius: 24px 0 0 0;
  opacity: 1;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.super-admin-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.super-admin-profile-image {
  width: 211px;
  height: 182px;
  background: #e0e0e0;
  border-radius: 8px;
}

.super-admin-profile-details {
  flex: 1 1;
  margin-left: 20px;
}

.super-admin-profile-details h3,
.super-admin-profile-details p {
  margin: 0;
  font-size: 18px;
  font-family: Poppins;
  font-weight: 400;
}

.super-admin-profile-meta1 {
  display: flex;
  flex-direction: row;
  gap: 206px;
  position: relative;
  left: -158px;
}
.style1{
  font-family: Poppins;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 24px;
  text-align: "left";
  text-underline-offset: from-font;
  -webkit-text-decoration-skip: "none";
          text-decoration-skip: "none";
  color: #666666;
  margin-bottom: -18px;
}
.style2{
  font-size: 20px !important;
  color: black;
}

.super-admin-profile-meta h4,
.super-admin-profile-meta p {
  margin: 0;
  font-size: 14px;
  font-family: Poppins;
  font-weight: 400;

}
.super-admin-profile-meta h4{
  margin-left: 10px;
}
.super-admin-profile-meta p{
  margin-left: 10px;
}

.super-admin-profile-divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: 24px 0;
}

.super-admin-profile-divider2 {
  border: none;
  border-top: 1px solid #ddd;
  margin: 24px 0;
}

.super-admin-profile-section {
  margin-bottom: 20px;
}

.super-admin-profile-section p {
  width: 443px;
  font-family: Poppins;
}

.super-admin-profile-section h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #883979;
  font-family: Poppins;
  font-weight: 400;
}

.super-admin-profile-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Ensure columns distribute evenly */
  grid-gap: 16px;
  gap: 16px; /* Consistent spacing between grid items */
  max-width: 1080px; /* Limit the grid width to fit the container */
  margin: 0 auto; /* Center align the grid */
  box-sizing: border-box; /* Ensure padding/margin do not cause overflow */
}

/* .super-admin-profile-info-grid > :nth-child(3n) {
  margin-left: 180px; 
}
.super-admin-profile-info-grid > :nth-child(3n-1) {
  margin-left: 80px;
} */



.super-admin-profile-info-grid h5 {
  margin: 0;
  font-size: 14px;
  color: #666;
  font-family: Poppins;
  font-weight: 400;
}

.super-admin-profile-info-grid p {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  font-family: Poppins;
  font-weight: 400;
}

.super-admin-profile-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  font-family: Poppins;
}

.super-admin-profile-edit-button,
.super-admin-profile-save-button {
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: Poppins;
}

.super-admin-profile-edit-button {
  background: #888;
  color: #fff;
  font-family: Poppins;
}

.super-admin-profile-save-button {
  background: #883979;
  color: #fff;
  font-family: Poppins;
}

.supercamera-img{
  width: 35px;
  background-color: rgb(136, 57, 121);
  position: relative;
  top: 165px;
  left: 149px;
  align-items: initial;
  height: 32px;
  padding: 2px;
  border-radius: 100%;
}

.supercamera-imgicon{
  margin-left: 5px;
  margin-top: 4px;
  color: white;
}
.line-input-container {
  position: relative;
  width: 300px;
}
.line-input-container-address {
  position: relative;
  width: 600px;
}

.line-input {
  width: 70%;
  border: none;
  border-bottom: 2px solid #555;
  background: transparent;
  font-size: 16px;
  padding: 5px 0;
  outline: none;
}

.line-input:focus {
  border-bottom: 2px solid #883979; /* Change to a highlight color when focused */
}

.line-input::placeholder {
  color: #999; /* Style for the placeholder text */
}
.icon-pencil {
  font-size: 20px;
  color: #555;
  cursor: pointer;
}

.icon-pencil:hover {
  color: #883979; /* Change color on hover */
}

.doctor-super-admin-setting-main-title {
  width: 277px;
  position: absolute;
  height: 33px;
  top: 30px;
  left: 37%;
  gap: 0px;
  opacity: 1;
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;
  line-height: 33px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center the lines and text */
  justify-content: center; /* Horizontally center everything */
  gap: 16px; /* Space between the lines and the title */
}

.security-setting-title-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.line {
  content: "";
  display: block;
  width: 100px; /* Line width */
  height: 2px; /* Line thickness */
  background-color: #883979; /* Line color */
}

.doctor-super-admin-setting-container {
  width: 788px;
  height: 39px;
  position: relative;
  left: -200px;
  margin-top: 80px;
  margin-left: 40px;
  border-radius: 8px;
  background-color: transparent;
  display: flex;
  gap: 8px;
  padding: 8px;
  justify-content: center;
  align-items: center;
}
.doctor-super-admin-setting-main-container1 {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
  position: absolute; /* Required for centering within a viewport */
  top: 164px; /* Move to the vertical center */
  left: 50%; /* Move to the horizontal center */
  transform: translate(-50%, -50%); /* Adjust to center the element */
  width: 100%; /* Optional: Adjust width to fit content */
  max-width: 1121px; /* Adjust width based on your design */
  padding: 20px; /* Add spacing */
}

.doctor-super-admin-setting-header {
  border: none;
  width: 804px;
  height: 39px;
  border-radius: 8px;
  font-size: 14px;
  font-family: Poppins, sans-serif;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.doctor-super-admin-setting-button {
  border: none;
  width: 250px;
  height: 55px;
  border-radius: 8px;
  font-size: 20px;
  font-family: Poppins, sans-serif;
  cursor: pointer;
  padding-left: 30px;
  padding-right: 30px;
  justify-content: center;
  margin-left: 3px;
  border: 1px solid #883979;
}

.doctor-super-admin-setting-header .doctor-super-admin-setting-button.active {
  background-color: #883979;
  color: #fff;
}

.doctor-super-admin-setting-notifications-section,
.doctor-super-admin-setting-preferences-section,
.doctor-super-admin-setting-security-section {
  width: 1121px;
  margin-top: 24px;
  margin-left: 10px;
  position: absolute;
  top: 160px;
  border-radius: 24px;
  background-color: #f8f8f8;
  padding: 16px;
}

.doctor-super-admin-setting-notification-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.doctor-super-admin-setting-title {
  font-size: 20px;
  font-weight: 500;
  font-family: "Open Sans", sans-serif;
  color: #000;
  cursor: pointer;
}

.doctor-super-admin-setting-subtitle {
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #666666;
  margin-top: 8px;
}

.doctor-super-admin-setting-toggle {
  cursor: pointer;
}

.doctor-super-admin-setting-form-row {
  display: flex;
  gap: 48px;
  margin-bottom: 16px;
}

.doctor-super-admin-setting-input {
  width: 450px;
  height: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doctor-super-admin-setting-input label {
  font-size: 20px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #000;
}

.doctor-super-admin-setting-input select {
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
}
.super-admin-setting-input {
  font-family: "Poppins", sans-serif;
}

label {
  font-size: 14px;
  font-weight: bold;
  color: #444;
  margin-bottom: 8px;
  display: block;
}

.custom-dropdown-wrapper {
  position: relative;
  width: 100%;
}

.custom-dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #883979;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}

.custom-dropdown span {
  font-size: 16px;
  color: #333;
}

.dropdown-icon {
  font-size: 12px;
  color: #883979;
}

.custom-dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 64.5%;
  margin-top: 10px;
  padding: 0;
  list-style: none;
  border: 1px solid #883979;
  background-color: #fff;
  border-radius: 5px;
  z-index: 10;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.custom-dropdown-option {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  color: #333;
}

.custom-dropdown-option:hover {
  background-color: #883979;
  color: #fff;
}
.dark-mode .outer-container-settings {
  background-image: url(/static/media/Background-darkGradient.6a4f30fd05ef58b7c2e1.png);
  background-color: #300928;
  background-size: cover;
  width: 100%;
  height: 1200px;
  background-repeat: repeat; /* Repeats the image */
}

.super-admin-setting-wrapper {
  background-color: white; /* Adjust color as needed */
  min-height: 1500px; /* Ensures it covers at least the full viewport height */
  display: flex;
  flex-direction: column;
}

.dark-mode .super-admin-setting-wrapper{
  background-color: #300928;
  background-repeat: no-repeat; /* Repeats the image */
  background-size: auto;
}

.dark-mode .change-password-popup-container{
  background-color: #300928;
  color: white;
}

.dark-mode .change-password-form-group label{
  color: white;
}
.doctor-super-admin-setting-main-title {
  width: 277px;
  position: absolute;
  height: 33px;
  top: 30px;
  left: 37%;
  gap: 0px;
  opacity: 1;
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;
  line-height: 33px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center the lines and text */
  justify-content: center; /* Horizontally center everything */
  gap: 16px; /* Space between the lines and the title */
}
.dark-mode .doctor-super-admin-setting-main-title {
  color: #ffffff;
}

.line {
  content: "";
  display: block;
  width: 100px; /* Line width */
  height: 2px; /* Line thickness */
  background-color: #883979; /* Line color */
}
.dark-mode .line {
  background-color: #ffffff;
}

.doctor-super-admin-setting-container {
  width: 788px;
  height: 39px;
  position: relative;
  left: -200px;
  margin-top: 80px;
  margin-left: 40px;
  border-radius: 8px;
  background-color: transparent;
  display: flex;
  gap: 8px;
  padding: 8px;
  justify-content: center;
  align-items: center;
}
.doctor-super-admin-setting-main-container1 {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
  position: absolute; /* Required for centering within a viewport */
  top: 164px; /* Move to the vertical center */
  left: 50%; /* Move to the horizontal center */
  transform: translate(-50%, -50%); /* Adjust to center the element */
  width: 100%; /* Optional: Adjust width to fit content */
  max-width: 1121px; /* Adjust width based on your design */
  padding: 20px; /* Add spacing */
}

.doctor-super-admin-setting-header {
  border: none;
  width: 804px;
  height: 39px;
  border-radius: 8px;
  font-size: 14px;
  font-family: Poppins, sans-serif;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.doctor-super-admin-setting-button {
  border: none;
  width: 250px;
  height: 55px;
  border-radius: 8px;
  font-size: 20px;
  font-family: Poppins, sans-serif;
  cursor: pointer;
  padding-left: 30px;
  padding-right: 30px;
  justify-content: center;
  margin-left: 3px;
  border: 1px solid #883979;
}
.dark-mode .doctor-super-admin-setting-button {
  border: 1px solid #ffffff;
  color: #ffffff;
}

.doctor-super-admin-setting-header .doctor-super-admin-setting-button.active {
  background-color: #883979;
  color: #fff;
}

.doctor-super-admin-setting-notifications-section,
.doctor-super-admin-setting-preferences-section,
.doctor-super-admin-setting-security-section {
  width: 1121px;
  margin-top: 24px;
  margin-left: 0px;
  position: absolute;
  top: 160px;
  border-radius: 24px;
  background-color: #f8f8f8;
  padding: 16px;
  /* padding-bottom: 115px; */
}
.dark-mode .doctor-super-admin-setting-notifications-section,
.dark-mode .doctor-super-admin-setting-preferences-section,
.dark-mode .doctor-super-admin-setting-security-section {
  background-color: #1e0419;
}

.doctor-super-admin-setting-notification-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.doctor-super-admin-setting-title {
  font-size: 20px;
  font-weight: 500;
  font-family: "Open Sans", sans-serif;
  color: #000;
}
.dark-mode .doctor-super-admin-setting-title {
  color: #fff;
}

.doctor-super-admin-setting-subtitle {
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #666666;
  margin-top: 8px;
}
.dark-mode .doctor-super-admin-setting-subtitle {
  color: #b3b3b3;
}

.doctor-super-admin-setting-toggle {
  cursor: pointer;
}

.doctor-super-admin-setting-form-row {
  display: flex;
  gap: 48px;
  margin-bottom: 16px;
}

.doctor-super-admin-setting-input {
  width: 450px;
  height: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doctor-super-admin-setting-input label {
  font-size: 20px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #000;
}

.doctor-super-admin-setting-input select {
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
}
.dark-mode .outer-container-settings {
  background-image: url(/static/media/Background-darkGradient.6a4f30fd05ef58b7c2e1.png);
  background-color: #300928;
  width: 100%;
  height: 1000px;
  background-repeat: repeat; /* Ensures the image repeats */
}
.outer-container-settings {
  height: 1200px;
}
.save-button  {
  height: 44px;
}
.save-button:hover{
  background-color: #883979 !important;
}
.dark-mode .edit-case-details-close-icon{
  color: white !important;
}
.next-button disabled{
  margin-top: 14px !important;
}
.dark-mode .additional-tests-checkboxes-boxes label{
  color: white;
}
.dark-mode .scan-content-sample{
  color: white;
}
.collect-footer-button{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-right: 490px;
}
.sample-collection-submit-btn save-button,
.next-button{
  margin-top: 0px;
}
.dark-mode .scan-content,
.dark-mode .table-layout{
  color: white;
}
.dark-mode .close-button{
  background-color: #1e0419;
}
.dark-mode .edit-case-payment-icon{
  background-color: #fff;
}
.super-admin-setting-main-container1 {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
  position: absolute; /* Required for centering within a viewport */
  top: 140px; /* Move to the vertical center */
  left: 50%; /* Move to the horizontal center */
  transform: translate(-50%, -50%); /* Adjust to center the element */
  width: 100%; /* Optional: Adjust width to fit content */
  max-width: 1121px; /* Adjust width based on your design */
  padding: 20px; /* Add spacing */
}
.super-admin-setting-main-title {
  width: 92px;
  position: absolute;
  height: 33px;
  top: 50px;
  left: 40px;
  gap: 0px;
  opacity: 1;
  font-family: Poppins;
  font-size: 22px;
  font-weight: 600;
  line-height: 33px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
}
.super-admin-setting-container {
  width: 486px;
  height: 39px;
  margin-top: 80px;
  border-radius: 8px;
  background-color: #f8f8f8;
  display: flex;
  gap: 8px;
  padding: 8px;
  position: relative;
  left: -300px;
}

.super-admin-setting-header {
  border: none;
  width: 162px;
  height: 39px;
  border-radius: 8px;
  background-color: #f8f8f8;
  font-size: 14px;
  font-family: Poppins, sans-serif;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.super-admin-setting-button {
  border: none;
  width: 162px;
  height: 39px;
  border-radius: 8px;
  background-color: #f8f8f8;
  font-size: 18px;
  font-family: Poppins, sans-serif;
  cursor: pointer;
  padding-left: 30px;
  padding-right: 30px;
  justify-content: center;
  margin-left: 3px;
}

.super-admin-setting-header .super-admin-setting-button.active {
  background-color: #883979;
  color: #fff;
}

.super-admin-setting-notifications-section,
.super-admin-setting-preferences-section,
.super-admin-setting-security-section {
  width: 1121px;
  margin-top: 24px;
  margin-left: 40px;
  border-radius: 24px;
  background-color: #f8f8f8;
  padding: 16px;
  position: absolute;
  top: 150px;
  padding-bottom: 30px;
  height: 1050px;
}

.super-admin-setting-notification-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.super-admin-setting-title {
  font-size: 16px;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  color: #000;
}

.super-admin-setting-subtitle {
  font-size: 12px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #666666;
  margin-top: 8px;
}

.super-admin-setting-toggle {
  cursor: pointer;
}

.super-admin-setting-form-row {
  display: flex;
  gap: 48px;
  margin-bottom: 16px;
}

.super-admin-setting-input {
  width: 450px;
  height: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.super-admin-setting-input label {
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #000;
}
.dark-mode .super-admin-setting-input label {
  color: #f8f8f8;
}

.super-admin-setting-input select {
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
}
.super-admin-setting-input {
  font-family: "Poppins", sans-serif;
}

label {
  font-size: 14px;
  font-weight: 600;
  color: black;
  margin-bottom: 8px;
  display: block;
}

.custom-dropdown-wrapper {
  position: relative;
  width: 100%;
}

.custom-dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #883979;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}
.dark-mode .custom-dropdown {
  border: 1px solid #b3b3b3;
  background-color: #1e0419;
  color: #b3b3b3;
}

.custom-dropdown span {
  font-size: 16px;
  color: #333;
}
.dark-mode .custom-dropdown span {
  color: #b3b3b3;
}

.dropdown-icon {
  font-size: 12px;
  color: #883979;
}

.custom-dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  max-height: 300px;
  overflow-y: scroll; /* Enable vertical scrolling */
  width: 64.5%;
  margin-top: 10px;
  padding: 0;
  list-style: none;
  border: 1px solid #883979;
  background-color: #fff;
  border-radius: 5px;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Hide scrollbar for all browsers */
  scrollbar-width: none; /* Firefox */
}
.custom-dropdown-options::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Edge */
}

.custom-dropdown-option {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  color: #333;
}
.dark-mode .custom-dropdown-option {
  background-color: #1e0419;
  color: #b3b3b3;
}

.custom-dropdown-option:hover {
  background-color: #883979;
  color: #fff;
}
.super-admin-setting-main-save-btn {
  width: 65px; /* Hug width */
  height: 30px; /* Hug height */
  position: absolute; /* Needed to apply top and left */
  top: 570px;
  left: 1045px;
  padding: 8px 16px; /* Padding values */
  gap: 8px; /* Gap between child elements (if any) */
  border-radius: 8px; /* Rounded corners for the top-left */
  border-width: 1px; /* Border only at the top */
  border-style: solid; /* Border style (default: solid) */
  opacity: 1; /* Fully transparent */
  background-color: #883979; /* Background color */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.super-admin-setting-main-save-btn1 {
  width: 65px; /* Hug width */
  height: 30px; /* Hug height */
  position: absolute; /* Needed to apply top and left */
  top: 960px;
  left: 1045px;
  padding: 8px 16px; /* Padding values */
  gap: 8px; /* Gap between child elements (if any) */
  border-radius: 8px; /* Rounded corners for the top-left */
  border-width: 1px; /* Border only at the top */
  border-style: solid; /* Border style (default: solid) */
  opacity: 1; /* Fully transparent */
  background-color: #883979; /* Background color */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.super-admin-setting-main-save-btn3 {
  width: 65px; /* Hug width */
  height: 30px; /* Hug height */
  position: absolute; /* Needed to apply top and left */
  top: 262px;
  left: 1045px;
  padding: 8px 16px; /* Padding values */
  gap: 8px; /* Gap between child elements (if any) */
  border-radius: 8px; /* Rounded corners for the top-left */
  border-width: 1px; /* Border only at the top */
  border-style: solid; /* Border style (default: solid) */
  opacity: 1; /* Fully transparent */
  background-color: #883979; /* Background color */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.super-admin-setting-main-save-btn2 {
  width: 65px; /* Hug width */
  height: 30px; /* Hug height */
  position: absolute; /* Needed to apply top and left */
  top: 380px;
  left: 1045px;
  padding: 8px 16px; /* Padding values */
  gap: 8px; /* Gap between child elements (if any) */
  border-radius: 8px; /* Rounded corners for the top-left */
  border-width: 1px; /* Border only at the top */
  border-style: solid; /* Border style (default: solid) */
  opacity: 1; /* Fully transparent */
  background-color: #883979; /* Background color */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.subheading-setting-1 {
  width: 1021px;
  height: 30px;
  top: 38px;
  left: 30px;
  gap: 0px;
  display: flex;
  justify-content: space-between;
  opacity: 1;
  margin-bottom: 24px;
}

.subheading-setting-2 {
  width: 1021px;
  height: 30px;
  top: 602px;
  left: 30px;
  gap: 0px;
  display: flex;
  justify-content: space-between;
  opacity: 1;
  margin-bottom: 24px;
}
.App-Notification {
  font-family: Poppins;
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #883979;
}
.doctor-super-admin-setting-notification-item {
  position: relative;
  width: 1085px;
  height: 30px;
  left: 20px;
  gap: 0px;
  display: flex;
  justify-content: space-between;
  opacity: 1;
}

.billing-container {
  font-family: Arial, sans-serif;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
  margin-bottom: 50px;
}
.dark-mode .billing-container {
  background-color: #3d1a36;
}

.billing-main-container {
  background-image: url(/static/media/bg.b8637adb17db611a82bc.png);
  margin-bottom: -20px;
  background-repeat: no-repeat;
  background-size: cover;
}
.dark-mode .billing-main-container {
  background-color: #3d1a36;
  background-image: none;
}

/* Header */
.billing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.billing-title {
  font-size: 24px;
  font-weight: bold;
  color: #883979;
}

/* Time Filter Buttons */
.billing-filters {
  display: flex;
  gap: 0px;
}

.billing-filter-button {
  padding: 8px 15px;
  /* border: 1px solid #5a3e6f; */
  color: #b0b0b0;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.billing-filter-button.active {
  /* background: #5a3e6f; */
  color: #883979;
}

/* .billing-filter-button:hover {
    background: rgba(90, 62, 111, 0.2);
} */

/* Metrics Section */
.billing-metrics {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  height: 300px;
  margin-bottom: 70px;
}

.billing-metrics .billing-expenses {
  flex: 2 1;
  width: 400px;
  border: 1px solid #f8f8f8;
}
.dark-mode .billing-metrics .billing-expenses {
  background-color: #1e0419;
  border: 2px solid #1e0419;
}

.billing-metrics .billing-status {
  flex: 1 1;
}

.billing-expenses,
.billing-status {
  flex: 1 1;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 300px;
}

.billing-expenses-title,
.billing-status-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #883979;
}

/* Filters & Tabs */
.billing-filters {
  position: relative;
  display: flex;
  margin: 20px 0;
  align-items: center;
  flex-wrap: wrap;
  justify-content: end;
  top: -50px;
  right: 0px;
}

.billing-tabs {
  display: flex;
  gap: 70px;
}

.billing-tab {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;

  font-size: 16px;
  cursor: pointer;
  padding-bottom: 5px;
  /* border-bottom: 2px solid transparent; */
  color: #883979;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 147px;
}

.billing-tab-active {
  border-bottom: 2px solid #883979;
  font-weight: bold;
}

.billing-tab:hover {
  color: #883979;
}

/* Search & Sort */
.billing-search-sort {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.billing-search {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  transition: border 0.3s;
  width: 300px;
  height: 24px;
  background-color: white;
}

.dark-mode .billing-search {
  background-color: #3d1a36;
}
.billing-search:hover {
  border: 1px solid #883979;
  cursor: pointer;
}

.billing-search:focus {
  border: 1px solid #883979;
}

.billing-sort-button {
  background: transparent;
  color: #ccc;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  font-family: poppins;
  font-size: 16px;
}

.billing-sort-button:hover {
  background: #883979;
}

/* Table */
.billing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: -10px;
}

.billing-table-head {
  background: #f4f1f9;
}

.billing-table-row {
  transition: background 0.2s;
  border-radius: 24px;
}
.dark-mode .billing-table-row {
  background-color: #3d1a36;
}

.billing-table-row:nth-child(even) {
  background: #f9f9f9;
}

.dark-mode .billing-table-row:nth-child(even) {
  background-color: #2d1227;
}

.billing-table-header {
  padding: 12px;
  text-align: left;
  font-weight: bold;
  color: #883979;
}

.billing-table-cell {
  padding: 12px;
  color: #883979;
}
.billing-table-cell button {
  position: relative;
  right: 0px;
}

.billing-table-row:hover {
  background: rgba(90, 62, 111, 0.1);
}

/* View Button */
.billing-view-button {
  /* background: #883979; */
  color: #883979;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #883979;
  cursor: pointer;
  transition: background 0.3s;
  margin-left: 10px;
  margin-top: 10px;
}

.billing-view-button:hover {
  background: #883979;
  color: white;
}

/* Pagination */
.billing-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  gap: 10px;
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  padding-bottom: 70px;
  top: 100%;
}

.billing-pagination-prev,
.billing-pagination-next {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #5a3e6f;
  transition: color 0.3s;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: 1px solid #b3b3b3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.billing-pagination-prev:hover,
.billing-pagination-next:hover {
  color: white;
  background-color: #883979;
}

.billing-pagination-text {
  font-size: 14px;
  color: #883979;
}

.billing-sort {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  gap: 20px;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .billing-metrics {
    flex-direction: column;
  }
  .billing-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .billing-tabs {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .billing-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .billing-filters {
    flex-direction: column;
    gap: 15px;
  }
  .billing-metrics {
    gap: 10px;
  }
}
.billing-expenses-chart {
  margin-top: 40px;
}
.dropdown-menu {
  position: absolute;
  z-index: 99999;
  top: 130%;
  left: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  padding: 0px 0;
  width: 127px;
  text-align: left;
  border: 1px solid #883979;
}

.dropdown-menu button {
  width: 100%;
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
}

.dropdown-menu button:hover {
  background-color: #f0f0f0;
}
.billing-sort-dropdown {
  position: relative;
  margin-bottom: 10px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  color: #ccc;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  font-family: poppins;
  font-size: 16px;
}

.dark-mode .billing-sort-dropdown {
  background-color: #3d1a36;
}
.billing-sort-dropdown:hover {
  border: 1px solid #883979;
  cursor: pointer;
}

.billing-sort-dropdown button {
  position: relative;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  color: #ccc;
  border-radius: 5px;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  font-family: poppins;
  font-size: 16px;
}
.billing-sort-dropdown li {
  color: black;
  border-radius: 5px;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  font-family: poppins;
  font-size: 16px;
  gap: 10px;
}
.billing-sort-dropdown ul {
  margin: 0px;
  padding: 0; /* Ensures no extra spacing */
  list-style: none; /* Removes bullet points */
}
.billing-sort-dropdown li:hover {
  color: white;
  background-color: #883979;
}
.billing-tab-active {
  color: #5a3e6f; /* Active tab color */
  width: 147px;
  height: 20px;
}

/* .billing-underline {
    width: 50px;
    height: 2px;
    background-color: #883979;
  }
   */
.billing-tab:not(.billing-tab-active) .billing-underline {
  display: none; /* Hides underline when tab is not active */
}

.billing-graph-container {
  border-radius: 10px;
  height: 300px;
}

.billing-graph-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #883979;
}

.billing-graph-chart {
  width: 750px;
  height: 200px;
  margin-left: -20px;
}

.billing-no-data {
  text-align: center;
  color: #888;
  font-size: 14px;
}

.currency-dropdown {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.currency-dropdown label {
  font-size: 16px;
  margin-right: 10px;
  color: #883979;
}

.currency-dropdown select {
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid #883979;
  background-color: #fff;
  color: #883979;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.currency-dropdown select:hover {
  background-color: #f4f4f4;
}

.billing-analytics-software-usage-main-container {
  width: 388px;
  height: 341px;
  position: relative;
  top: 0px;
  left: 0px;
  background-color: #f8f8f8;
  border-radius: 16px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  box-sizing: border-box;
}

.dark-mode .billing-analytics-software-usage-main-container {
  background-color: #1e0419;
}

.billing-analytics-software-usage-title-section {
  font-size: 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  color: black;
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: row;
  gap: 296px;
}
.dark-mode .billing-analytics-software-usage-title-section {
  color: white;
}

.billing-analytics-software-usage-dropdown-section {
  position: absolute;
  top: 16px;
  left: 194px;
  width: 62px;
  height: 24px;
  border: 1px solid #883979;
  border-radius: 4px;
  color: #883979;
}

.billing-analytics-software-usage-dropdown-section select {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  color: #883979;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  background: transparent;
  padding-left: 8px;
  cursor: pointer;
}

.billing-analytics-software-usage-donut-chart-section {
  position: absolute;
  width: 200px;
  height: 200px;
  margin: 50px auto 0;
  padding-left: 0px;
  top: 40px;
}

.billing-analytics-software-usage-floating-label {
  position: absolute;
  width: 23px;
  height: 21px;
  background-color: white;
  border: 1px solid #d694c9;
  color: #883979;
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

.billing-analytics-software-usage-legend-section {
  position: absolute;
  top: 130px;
  left: 260px;
  width: 147px;
  display: flex;
  flex-direction: column;
}

.billing-analytics-software-usage-legend-item {
  display: flex;
  align-items: center;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: black;
}

.billing-analytics-software-usage-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.billing-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.billing-popup-container {
  width: 751px;
  height: 620px;
  background: white;
  border-radius: 16px;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 20px;
  padding-bottom: 0;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow-y: auto; /* Add vertical scroll when needed */
}

.dark-mode .billing-popup-container {
  background-color: #1e0419;
  color: #ffffff;
}

.billing-popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
}
.dark-mode .billing-popup-close {
  color: #fffcfc;
}

.billing-popup-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 25px;
}

.billing-popup-row {
  display: flex;
  justify-content: space-between;
}

.billing-popup-field1 {
  display: flex;
  flex-direction: column;
  width: 30%;
}

.dark-mode .billing-popup-field1 {
  background-color: #1e0419;
}

.billing-popup-field1 label {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
}
.dark-mode .billing-popup-field1 label {
  color: #9b9999;
}

.billing-popup-field1 input,
.billing-popup-field1 select,
.billing-popup-field1 ul {
  font-size: 16px;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #883979;
  background: #f9f9f9;
}

.billing-popup-field1 input {
  width: 83%;
}

.billing-popup-field {
  display: flex;
  flex-direction: column;
  width: 30%;
}

.billing-popup-field label {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.dark-mode .billing-popup-field label {
  color: #9b9999;
}

.billing-popup-field span,
.billing-popup-field input,
.billing-popup-field select {
  font-size: 16px;
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.79px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;

  /* border-radius: 4px;
  border: 1px solid #883979;
  background: #f9f9f9; */
}

.billing-popup-field input {
  width: 100%;
}

.billing-popup-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 15px;
}

.billing-popup-update,
.billing-popup-download {
  padding: 8px 15px;
  border-radius: 5px;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

.billing-popup-edit {
  padding: 8px 15px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  color: #007bff;
  background-color: white;
  border: 1px solid #007bff;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.dark-mode .billing-popup-edit {
  background: #1e0419;
}

.billing-popup-edit:hover {
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.billing-popup-update {
  background: #883979;
  color: white;
}
.billing-popup-update:hover {
  background-color: #632958;
  cursor: pointer;
}

.billing-popup-download {
  background: green;
  border: 1px solid #ccc;
  color: white;

  position: relative;
  left: 377px;
  width: 196px;
}
.billing-popup-download:hover {
  cursor: pointer;
}

.billing-popup-download:disabled {
  background-color: #fffcfc;
  color: #888;
  cursor: not-allowed;
  opacity: 0.6;
}
.dark-mode .billing-popup-download:disabled {
  background-color: #1e0419;
  color: #fdfdfd;
}
.billing-popup-dropdown {
  position: relative;
  width: 100%;
  cursor: pointer;
}

.billing-popup-dropdown-selected {
  background: #f9f9f9;
  border: 1px solid #883979;
  padding: 5px;
  border-radius: 4px;
  font-size: 14px;
  text-align: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 183px;
}

.billing-popup-dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 86%;
  background: white;
  border: 1px solid #883979;
  /* border-top: none; */
  /* border-radius: 16px; */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
  margin-top: 10px;
}

.billing-popup-dropdown-option {
  padding: 8px;
  font-size: 14px;
  color: #333;
  background: white;
}

.billing-popup-dropdown-option:hover {
  background: #883979;
  color: aliceblue;
}
/* .billing-popup-up-icon{
  position: relative;
  right: -70px;
  border: 0px !important;
}
.billing-popup-down-icon{
  position: relative;
  right: -70px;
  border: 0px !important;
} */
.billing-popup-up-icon,
.billing-popup-down-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  transition: transform 0.2s ease-in-out;
}

.billing-popup-dropdown.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.dark-mode .billing-popup-dropdown.disabled {
  background-color: #1e0419;
}
.billing-popup-dropdown:hover {
  cursor: pointer;
}

.billing-popup-field1 input:read-only {
  background-color: #f0f0f0;
  color: #888;
  cursor: not-allowed;
  opacity: 0.5;
}
.dark-mode .billing-popup-field1 input:read-only {
  background-color: #1e0419;
  border: 1px solid #883979;
  color: white;
}

.billing-popup-field1 input {
  background-color: white;
  color: black;
  opacity: 1;
}

.dark-mode .billing-popup-field1 input {
  background-color: white;
  color: white;
  opacity: 1;
}

.billing-popup-divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 20px 0;
  width: 100%;
}

.additional-charges-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}

.additional-charges-form {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: flex-end;
}

.additional-charges-field {
  display: flex;
  flex-direction: column;
  flex: 1 1;
}

.additional-charges-field label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.additional-charges-field input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.add-charge-button {
  background-color: #8e44ad;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 20px;
  cursor: pointer;
  height: 38px;
}

.add-charge-button:disabled {
  background-color: #d1b3e1;
  cursor: not-allowed;
}

.additional-charges-table {
  width: 100%;
  overflow-x: auto;
}

.additional-charges-table table {
  width: 100%;
  border-collapse: collapse;
}

.additional-charges-table th,
.additional-charges-table td {
  padding: 4px;
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.additional-charges-table th {
  background-color: #f9f9f9;
  font-weight: 600;
}

.charge-actions {
  display: flex;
  gap: 5px;
}

.edit-charge-button,
.delete-charge-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.edit-charge-button:disabled,
.delete-charge-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.no-charges {
  text-align: center;
  color: #888;
  padding: 20px 0;
}

@media (min-width: 1201px) {
  .main-profile-container {
    position: absolute; /* Or fixed if you want it to stay centered even when scrolling */
    width: 1033px;
    height: 715px;
    top: 225%; /* Center vertically */
    left: -15%; /* Center horizontally */
    margin-left: 0;
    transform: translateX(
      -50%
    ); /* Offset by 50% of its own width and height to center */
    border-radius: 12px;
    opacity: 1; /* Updated from 0px to make it visible */
    background: #ffffff;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}

.main-profile-container {
  position: absolute; /* Or fixed if you want it to stay centered even when scrolling */
  width: 1033px;
  height: 715px;
  top: 225%; /* Center vertically */
  left: -15%; /* Center horizontally */
  margin-left: 400px;
  transform: translateX(
    -50%
  ); /* Offset by 50% of its own width and height to center */
  border-radius: 12px;
  opacity: 1; /* Updated from 0px to make it visible */
  background: #ffffff;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mainprofilebg {
  background-image: url(/static/media/Background-darkGradient.6a4f30fd05ef58b7c2e1.png);
  height: 100%;
  background-size: cover;
  width: 100%;
  background-repeat: repeat; /* Repeats the image */
  background-size: cover;
  height: 1200px;
  width: 100%;
}

.dark-mode .mainprofilebg {
  background-color: #1e0419;
}

.dark-mode .main-profile-container {
  background-color: #1e0419;
}
.dark-mode .main-profile-info-value {
  color: white;
}
.dark-mode .main-profile-details-value,
.dark-mode .main-profile-metrics-value {
  color: #efefef;
}

.main-profile-section-title {
  font-size: 20px;
  color: #883979;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: left;
}

.main-profile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.main-profile-image-placeholder img{
  width: 214px;
  height: 252px;
  background: #f0f0f0;
  border-radius: 8px;
  
}

.main-profile-info-column p,
.main-profile-details-grid p,
.main-profile-metrics-grid p {
  margin: 0;
}

.main-profile-info-label,
.main-profile-details-label,
.main-profile-metrics-label {
  font-size: 14px;
  color: #8c8c8c;
}
.main-profile-info-label {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  padding-left: 5px;
}
.main-profile-info-value,
.main-profile-details-value,
.main-profile-metrics-value {
  font-size: 18px;
  color: #1a1a1a;
}
.main-profile-info-value {
  margin-right: 100px;

  font-family: Open Sans;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #1a1a1a;
  padding-left: 5px;
}
.main-profile-input-text-rule {
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #000;
  width: 180px;
}

.main-profile-details-value {
  font-family: Open Sans;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  color: #1a1a1a;
}

.main-profile-professional-details,
.main-profile-metrics {
  margin-top: 16px;
}

.main-profile-info-column p {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.main-profile-edit-button {
  text-align: right;
  margin-top: 16px;
}

.main-profile-edit-button button {
  padding: 6px 24px;
  background: white;
  border: 1px solid #883979;
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  top: 42px;
  color: #883979;
  font-family: poppins;
}

.main-profile-edit-button button:hover {
  background-color: #883979;
  color: white;
}

.separating-line1 {
  position: absolute;
  width: 1025px;
  height: 1px;
  top: 375px;
  left: 24px;
  gap: 0px;
  border: 1px;
  opacity: 1;
  background: #8c8c8c;
}
.separating-line2 {
  position: absolute;
  width: 1025px;
  height: 1px;
  top: 525px;
  left: 25px;
  gap: 0px;
  border: 1px;
  opacity: 1;
  background: #8c8c8c;
}
.address-box {
  top: 385px;
  left: 30px;
  gap: 2px;
  opacity: 1;
}
.address-box p {
  display: flex;
  flex-direction: column;
}
.main-profile-info-row1 {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 66px;
  left: 268px;
  gap: 120px;
}
.main-profile-info-row1 p {
  display: flex;
  flex-direction: column;
  width: 190px;
}
.main-profile-info-row2 {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 171px;
  left: 268px;
  gap: 120px;
}
.main-profile-info-row2 p {
  display: flex;
  flex-direction: column;
  width: 193px;
}
.main-profile-info-row3 {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 265px;
  left: 268px;
  gap: 226px;
}
.availability-input-main {
  width: 140px;
}
.main-profile-info-row3 p {
  display: flex;
  flex-direction: column;
}
.main-profile-details-grid {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 440px;
  left: 25px;
  gap: 263px;
  text-align: left;
}
.main-profile-details-grid p {
  display: flex;
  flex-direction: column;
}
.main-profile-metrics-grid {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 586px;
  left: 25px;
  gap: 245px;
  text-align: left;
}
.main-profile-metrics-grid p {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.main-profile-section-title-metrics {
  font-size: 20px;
  color: #883979;
  font-weight: 600;
  margin-bottom: 16px;
  margin-top: 65px;
  text-align: left;
}
.main-header1 {
  position: absolute;
  width: 406px;
  height: 36px;
  top: 106px;
  left: 50%; /* Centers horizontally relative to the viewport */
  transform: translateX(-50%); /* Adjusts to center based on its own width */
  gap: 0px;
  border: none; /* If you don't want a border, use `none` */
  opacity: 1; /* Valid opacity value */
  color: #883979;
  font-size: 24px;
  font-weight: 600;
  font-family: Poppins, sans-serif; /* Always include a fallback font */
  text-align: center; /* Ensures text inside is centered */
}
.btn-setting {
  width: Hug (178px) px;
  height: Hug (36px) px;
  top: 740px;
  left: 969px;
  padding: 6px 24px 6px 24px;
  gap: 8px;
  border-radius: 8px 0px 0px 0px;
  border: 1px 0px 0px 0px;
  opacity: 1;
  display: flex;
  flex-direction: row;
  gap: 20px;
  position: absolute;
  left: 900px;
}

.video-tutorial-container {
  width: 100%;
  margin: 0px;
  background-image: url(/static/media/bg.b8637adb17db611a82bc.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  /* Ensures it takes full viewport height */
  height: auto;
  /* Allows it to expand as needed */
}

.tutorial-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tutorial-title h1 {
  font-size: 24px;
  color: #7e3a89;
  font-weight: bold;
  font-family: "Arial", sans-serif;
  text-align: center;
}

.tutorial-title span {
  flex: 0 0 50px;
  height: 1px;
  background-color: #7e3a89;
}

.video-tutorial-content {
  display: flex;
  /* margin: 40px; */
}

.video-list {
  display: inline;
  width: 272px;
  position: relative;
  left: 45px;
  padding-bottom: 72px;
  border-right: 1px solid #c5c5c5c5;
}

.video-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 24px;
}

.video-header-1 {
  font-family: Poppins;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.0288em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.video-seperator {
  border: 1px solid #c5c5c5;
  margin-right: 20px;
}

.video-thumbnail {
  background: #a9a9a9;
  width: 249px;
  height: 120px;
  border-radius: 12px;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.video-frame {
  background: transparent;
  width: 509px;
  height: 375px;
  margin-top: 50px;
  border-radius: 16px;
}

.video-duration {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6c6c6c;
  font-family: Poppins;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.video-box {
  position: relative;
  /* top: 267px;
  left: 337px; */
  border-radius: 16px;
  height: 375px;
}

.video-display {
  height: 200px;
  position: relative;
  left: 70px;
  max-width: 804px;
  border-radius: 16px;
}

.video-dropdown-container {
  position: relative;
  width: 120px;
}

.video-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  background-color: white;
}

/* Hover Effect */
.video-dropdown-header:hover {
  border-color: #883979;
}

/* When dropdown is open */
.video-dropdown-container.active
  .video-dropdown-header
  .video-dropdown-selected {
  border-color: #883979;
  color: #883979;
}

.video-dropdown-selected {
  color: #757575;
  font-size: 10px;
  font-family: "Poppins";
}

.video-dropdown-icon {
  color: #757575;
  font-size: 20px;
}

.video-dropdown-menu {
  position: absolute;
  width: 100%;
  margin-top: 4px;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.video-dropdown-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 12px;
  color: black;
  font-family: Open Sans;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032em;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.video-dropdown-item:hover {
  background-color: #f5f5f5;
}

.video-dropdown-divider {
  border: 0;
  height: 1px;
  background-color: #6a1b9a;
  margin: 0;
  margin-top: 10px;
  margin-bottom: -10px;
}

.video-list {
  max-height: 620px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #883979 #f1f1f1;
}

.video-list::-webkit-scrollbar {
  width: 5px;
}

.video-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.video-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

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

.video-title {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.video-heading {
  font-family: Poppins;
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  text-align: left;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.header-container {
  width: 100%;
  height: 80px;
  position: sticky;
  top: 0;
  background: #f3f3f3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}
.header-container.dark-mode {
  background-color: #1e0419;
  color: white;
}

.greeting-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 60px 16px 60px;
}

.greeting-container-box {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}

.dark-mode .greeting-text {
  color: white;
}

.greeting-text {
  color: #000;
  color: var(--Primary-Base-Black, #000);

  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  /* 150% */
  letter-spacing: 0.691px;
}

.avatar-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.avatar {
  width: 38px;
  height: 38px;
  background: #e6e6e6;
  border-radius: 50%;
}

.avatar img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.dropdown-icon {
  width: 24px;
  height: 24px;
  position: relative;
  margin-left: 8px;
  cursor: pointer;
}

.dropdown-arrow {
  width: 6.71px;
  height: 11.31px;
  position: absolute;
  top: 15px;
  left: 1px;
  transition: transform 0.5s ease;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}


.notification-dropdown {
  position: absolute;
  margin-top: 10px;
  top: 80px;
  right: 0;
  padding-top: 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  width: 481px;
  height: 314px;
  z-index: 1000;
  right: 120px;
  /* padding: 10px; */
  display: flex;
  flex-direction: column;
  /* gap: 32px; */
}

.notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 10;
}
.drop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  transition: opacity 0.5s ease-in-out;
  z-index: 99;
}

.notification-item {
  display: flex;
  align-items: center;
  /* padding-top: 8px; */
  margin-top: 16px;
  margin-left: 24px;
  margin-right: 24px;
  font-size: 20px;

  font-weight: 600px;
  color: #333;
  cursor: pointer;
  border-bottom: 1px solid #b3b3b3;
}
.notification-image .circle-image {
  width: 62px;
  height: 62px;
  top: 48px;
  left: 24px;
  gap: 0px;
  opacity: 1;
  margin-bottom: 16px;
  border-radius: 50%;
  margin-right: 10px;
  align-items: left;
}

.notification-item:last-child {
  border-bottom: none;
  margin-bottom: 22px;
}

/* .notification-item:hover {
    background-color: #f0f0f0;
  } */
.notification-title {
  font-family: Open Sans;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.024em;
  text-align: left;
}

.notification-time {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
  letter-spacing: 0.032em;
  text-align: left;
  color: #808080;
  margin-bottom: 22px;
}
.clear-all {
  text-align: right;
  font-family: Open Sans;
  margin-right: 24px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.34px;
  letter-spacing: 0.032em;
  color: #b8b8b8;
}

.clear-all:hover {
  cursor: pointer;
}

.dark-mode .dropdown-arrow {
  color: #f0f0f0;
}
.header-dropdown-menu {
  position: absolute;
  top: 94px;
  right: 160px;
  background: white;
  border: 1px solid #b3b3b3;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  width: 288px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border-radius: 8px 0px 8px 8px;
  border: 1px 0px 0px 0px;
  overflow: hidden;
  pointer-events: auto;
  /* padding: 0 16px 0px 16px; */
}

.dropdown-item-logout {
  padding: 10px;
  color: black;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  width: 256px;
  padding: 16px 0px;

  text-align: left;
}
.dark-mode .header-dropdown-menu {
  background-color: #2d1227;
  border: solid 1px #b8b8b8;
  box-shadow: 0 0 0 1px #1e0419;
  color: white;
}

.dropdown-item {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 400;
  padding: 16px 10px 16px 0px;
  pointer-events: auto;
  letter-spacing: 0.032em;
  text-align: left;
  position: relative;
  color: black;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  /* border-bottom: 1px solid #e6e6e6;
      display: inline-block;
      width: 89%;
      margin-left: 16px; */
  transition: background 0.2s, color 0.2s;
}
.dropdown-item .margin-left {
  margin-left: 16px;
}

.dropdown-item:not(:last-child)::after {
  content: "";
  display: block;
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid #b3b3b3;
  position: absolute;
  bottom: 0;
  left: 5%;
}

.dropdown-item:hover::after {
  border-bottom-color: #883979;
}

.dark-mode .dropdown-item {
  color: white;
}

.dark-mode .margin-left-logout {
  color: red;
  margin-left: 16px;
}

.margin-left-logout {
  color: red;
  margin-left: 16px;
}

.dropdown-item:hover {
  background: #883979;
  box-sizing: border-box;
  color: #e6e6e6;
  border-radius: 0px 0px 0px 0px;
  border: 1px 0px 0px 0px;
}

.dark-mode .dropdown-item:hover {
  background: #ad499a;
}

.logo-container img {
  width: 150px;
  height: auto;
  padding: 16px 60px 16px 60px;
}

.dark-mode .logo-container {
  color: #faf3f3;
}
.icon-button-container {
  display: flex;
  gap: 15px;
}

.icon-button {
  width: 38px;
  height: 38px;
  background: #f3f3f3;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
  position: relative;
}

.icon-button .notiIcon {
  transition: color 0.2s;
}

.icon-button:hover {
  background-color: #883979;
  color: white;
}

.icon-button .notiIcon:focus {
  background-color: #883979;
}

.icon-button:focus {
  background: #ad499a;
  outline: none;
  box-shadow: 0 0 0 3px rgba(173, 73, 154, 0.4);
}

.icon-button img {
  width: 24px;
  height: 24px;
}
/*
  .icon-button img {
    filter: invert(0); 
  }
  
  .dark-mode .icon-button img {
    color: pink; 
  } */

.dark-mode .icon-button {
  background: #2d1227;
}

.dark-mode .icon-button:hover {
  background: #ad499a;
}

.dark-mode .toggle-button {
  background-color: white !important;
}
.light-mode .icon-button svg {
  fill: black;
}

.dark-mode .icon-button svg {
  fill: white;
}

.logout-dropdown {
  color: red;
  border-bottom: none;
}

/* .logout-dropdown:hover{
    color: white !important;
  }
  
  
  .margin-left-logout:hover{
    color: white;
  } */
.logout-dropdown:hover,
.logout-dropdown:hover .margin-left-logout {
  color: white;
}

.doctor-dashboard-progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 0px;
  z-index: 9999;
}

.doctor-dashboard-progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
  z-index: 9999;
}

.dark-mode .notification-dropdown {
  background-color: #2d1227;
  color: white;
}

.dark-mode .notification-dropdown .notification-title {
  color: white;
}

.doctor-dashboard-progress-bar-container {
  width: 100%;
  height: 3px;
  margin: 0;
  margin-top: 0px;
  position: static;
  top: 0px;
  z-index: 999;
}

.doctor-dashboard-progress-bar {
  height: 100%;
  background-color: #883979;
  transition: width 0.4s ease;
  padding: 0;
}

@media (max-width: 768px) {
  .greeting-text {
    font-size: 20px;
    line-height: 30px;
    width: 150px;
  }
}

@media (max-width: 480px) {
  .greeting-text {
    font-size: 18px;
    line-height: 28px;
    width: 130px;
  }
}

.main-profile-container {
  position: fixed;
  width: 1033px;
  height: 848px;
  /* top: 172px; */

  margin-left: 230px;
  gap: 0px;
  border-radius: 12px;
  opacity: 1;
  background: #ffffff;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateX(-50%);
}

.main-profile-section-title {
  font-size: 20px;
  color: #883979;
  font-weight: 600;
  margin-bottom: 16px;
}

.main-profile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.main-profile-image-placeholder {
  width: 214px;
  height: 252px;
  background: #f0f0f0;
  border-radius: 8px;
}

.main-profile-info-column p,
.main-profile-details-grid p,
.main-profile-metrics-grid p {
  margin: 0;
}

.main-profile-info-label,
.main-profile-details-label,
.main-profile-metrics-label {
  font-size: 16px;
  color: #8c8c8c;
}

.main-profile-info-value,
.main-profile-details-value,
.main-profile-metrics-value {
  font-size: 20px;
  color: #000000;
  font-weight: 500;
}

.main-profile-professional-details,
.main-profile-metrics {
  margin-top: 16px;
}

.main-profile-info-column p {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.main-profile-edit-button {
  text-align: right;
  margin-top: 16px;
}

.main-profile-edit-button button {
  padding: 8px 16px;
  background: #883979;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.separating-line1 {
  position: absolute;
  width: 1021px;
  height: 1px;
  top: 440px;
  left: 30px;
  gap: 0px;
  border: 1px;
  opacity: 1;
  background: #8c8c8c;
}
.separating-line2 {
  position: absolute;
  width: 1021px;
  height: 1px;
  top: 601px;
  left: 30px;
  gap: 0px;
  border: 1px;
  opacity: 1;
  background: #8c8c8c;
}
.address-box {
  top: 385px;
  left: 30px;
  gap: 2px;
  opacity: 1;
}
.address-box p {
  display: flex;
  flex-direction: column;
}
.main-profile-info-row1 {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 66px;
  left: 268px;
  /* gap: 226px; */
}
.main-profile-info-row1 p {
  display: flex;
  flex-direction: column;
}
.main-profile-info-row2 {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 171px;
  left: 268px;
  /* gap: 209px; */
}
.main-profile-info-row2 p {
  display: flex;
  flex-direction: column;
}
.main-profile-info-row3 {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 265px;
  left: 268px;
  /* gap: 226px; */
}
.main-profile-info-row3 p {
  display: flex;
  flex-direction: column;
}
.main-profile-details-grid {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 451px;
  left: 25px;
  gap: 363px;
}
.main-profile-details-grid p {
  display: flex;
  flex-direction: column;
}
.main-profile-metrics-grid {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 670px;
  left: 25px;
  gap: 363px;
}
.main-profile-metrics-grid p {
  display: flex;
  flex-direction: column;
}
.main-profile-section-title-metrics {
  font-size: 20px;
  color: #883979;
  font-weight: 600;
  margin-bottom: 16px;
  margin-top: 73px;
}
.main-header1 {
  position: absolute;
  width: 406px;
  height: 36px;
  /* top: 106px;
  left: 398px; */
  margin-left: 50px;
  gap: 0px;
  border: 1px solid transparent;
  opacity: 1;
  color: #883979;
  font-size: 24px;
  font-weight: 600;
  font-family: Poppins;
}

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: inherit;
}

input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-text-fill-color: inherit !important;
}

.FA-container {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.FA-frame-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  margin-top: 12%;
}

.input-container {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 15px;
  transition: border-color 0.3s, background-color 0.3s;
}

.form-group {
  padding: 0px 0px 0px 0px !important;
}

.heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

input:-webkit-autofill {
  background-color: transparent;
  color: #333 !important;
  box-shadow: 0 0 0 30px white inset !important;
}

input:-webkit-autofill::first-line {
  color: #883979 !important;
  border: none !important;
}

.heading h3 {
  color: #000;
  text-align: center;
  font-family: Poppins;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.heading p {
  color: #000;

  font-family: "Open Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.691px;
  margin: 0;
}

.FA-form {
  display: flex;
  padding: 60px;
  justify-content: center;
  align-items: center;
  gap: 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
}

.form-box {
  display: flex;
  width: 498px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  border-radius: 12px;
  background: #fff;
}

.form-input-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.custom-select-container {
  display: flex;
  height: 46px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 6px;
  border: 1px solid #999;
  border: 1px solid var(--Neutrals-Neutral-07, #999);
  background: #ffff;
  transition: border-color 0.3s;
}
.dark-mode .custom-select-container {
  background-color: #2d1227;
}

.custom-select-container:hover {
  border-color: #d459bc;
  transition: 0.6s;
}

.custom-select-container:focus-within {
  border-color: #d459bc;
  transition: 0.6s;
}

.custom-select-container.filled {
  border-color: #883979;
  color: #b3b3b3;
}

.dark-mode .custom-select-container.filled {
  border-color: white;
}

.dark-mode .custom-option {
  background-color: transparent;
}

.custom-select-span.filled-text {
  color: #b3b3b3;

  transition: color 0.6s;
}

.custom-select {
  display: flex;
  width: 478px;
  justify-content: space-between;
  align-items: center;
  color: #333;
  transition: color 0.3s;
}

.custom-select-container:hover .custom-select span,
.custom-select-container:focus-within .custom-select span {
  color: #883979;
  transition: 0.6s;
}

.FA-btn {
  display: flex;
  height: 46px;
  width: 100%;
  padding: 11px 0px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 6px;
  border: 1px solid #883979;
  background: white;
}

.FA-btn1-text {
  color: #883979;
  color: var(--Primary-Primary---01, #883979);
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.form-actions {
  align-self: stretch;
}

.form-actions h4 {
  color: #000;
  text-align: center;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.512px;
  margin: 0;
}

.form-options1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.form-group1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}

.input-frame {
  width: 100%;
  padding: 0 10px;
  background: white;
  border: 1px solid #999999;
  border-radius: 6px;
  display: flex;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  height: 46px;
  position: relative;
}

.input-with-icon {
  width: 100%;
  display: flex;
  align-items: center;
}

.FA-form input[type="email"],
.FA-form input[type="password"] {
  width: 100%;
  border: none !important;
  outline: none !important;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.51px;
  color: #883979;
  background: transparent;
  box-sizing: border-box;
}
.dark-mode .FA-form input[type="email"],
.dark-mode .FA-form input[type="password"] {
  color: #b3b3b3;
}

.FA-form .input-frame:hover,
.FA-form .input-frame:focus-within {
  border-color: #883979;
  outline: none;
  transition: 0.6s;
}

.FA-form input[type="email"]:hover::placeholder,
.FA-form input[type="password"]:hover::placeholder {
  color: #883979;
  transition: 0.6s;
}

.FA-form input[type="email"]:focus::placeholder,
.FA-form input[type="password"]:focus::placeholder {
  color: #883979;
  transition: 0.6s;
}

.input-with-icon:hover .input-icon,
.input-with-icon:focus-within .input-icon {
  color: #883979;
  transition: color 0.3s;
  transition: 0.6s;
}

.input-icon {
  color: #b3b3b3;
  transition: color 0.3s;
}

.FA-form input[type="email"]:not(:placeholder-shown),
.FA-form input[type="password"]:not(:placeholder-shown),
.FA-form input[type="text"]:not(:placeholder-shown) {
  border-color: #883979 !important;
}

.custom-select-span:not(:placeholder-shown) {
  color: #883979;
  border-color: #883979;
}
.dark-mode .custom-select-span:not(:placeholder-shown) {
  color: #b3b3b3;
}

.custom-select-span:focus {
  color: #883979;
}

.FA-form input[type="email"]:focus,
.FA-form input[type="password"]:focus,
.FA-form input[type="text"]:focus {
  color: #883979;
}

.FA-form input[type="email"]:not(:placeholder-shown) + .input-icon,
.FA-form input[type="password"]:not(:placeholder-shown) + .input-icon,
.FA-form input[type="text"]:not(:placeholder-shown) + .input-icon {
  color: #883979;
}

.FA-form input[type="email"]:focus::placeholder,
.FA-form input[type="password"]:focus::placeholder,
.FA-form input[type="email"]:not(:placeholder-shown)::placeholder,
.FA-form input[type="password"]:not(:placeholder-shown)::placeholder,
.FA-form input[type="text"]:not(:placeholder-shown)::placeholder {
  color: #883979;
}

.input-frame {
  display: flex;
  height: 46px;
  width: 498px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 6px;
  border: 1px solid white;
  background: #fff;
  border: 1px solid #b3b3b3;
}
.dark-mode .input-frame {
  background-color: #2d1227;
}
.input-frame.filled {
  border-color: #883979;
}
.dark-mode .input-frame.filled {
  border-color: white;
  color: white;
}

/* .input-with-icon input::placeholder {
    color: #883979;
  } */

.input-icon.icon-filled {
  color: #883979;
  border-color: #883979;
}

.select-role-container.role-selected {
  border-color: #883979;
}

.custom-select-container {
  position: relative;
  width: 496px;
  gap: 12px;
}

.custom-select {
  width: 496px;
  height: 46px;
  font-size: 16px;
  color: #333;
  background-color: #fff;

  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-options {
  position: absolute;
  width: 100%;
  top: calc(100% + 5px);
  left: -1px !important;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  z-index: 10;
  text-align: left;
  border: 1px solid #7b376e;
}
.dark-mode .custom-options {
  background-color: #1e0419;
  border: 1px solid #ccc;
  color: white;
}
.custom-options li:hover {
  background-color: #7b376e !important;
  color: white !important;
}
.dark-mode .custom-options li {
  color: white !important;
}
.custom-option {
  padding: 10px;
  cursor: pointer;
  position: relative;
}

.custom-option {
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.custom-option:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 1%;
  width: 98%;
  border-bottom: 1px solid #7b376e;
}

.custom-option:hover {
  background-color: #7b376e;
}

/* .custom-options:hover,
.custom-options:focus {
  border-color: #7b376e;
  box-shadow: 0 0 8px rgba(123, 55, 110, 0.2);
} */

.custom-select {
  display: flex;
  width: 478px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  height: 25px;
  background-color: #ffffff;
}
.dark-mode .custom-select {
  background-color: #2d1227;
}

.input-frame.filled .input-with-icon .input-icon.error-icon {
  color: red !important;
}

.input-frame.error-border,
.input-with-icon.error-border {
  border-color: #ff4d4f !important;
}

.input-icon.error-icon {
  color: #ff4d4f !important;
}

.FA-password-visibility-toggle.error-icon .visi {
  color: #ff4d4f !important;
}

.FA-form input[type="email"].error-border,
.FA-form input[type="password"].error-border {
  color: #ff4d4f !important;
}

.error-text {
  margin: 0px;
  margin-top: -10px;
  padding: 0px;
  margin-bottom: -18px;
  padding: 8px 0px 24px 0px;
  position: sticky;
  font-size: 16px;
  color: red;
  white-space: nowrap;
  font-family: "Open Sans", sans-serif;
  align-self: baseline;
}

.error-text-email {
  margin: 0px;
  margin-top: -10px;
  padding: 0px;
  margin-bottom: -18px;
  padding: 12px 0px 24px 0px;
  position: sticky;
  font-size: 16px;
  color: red;
  white-space: nowrap;
  font-family: "Open Sans", sans-serif;
}

.dark-mode .error-text,
.error-text-email {
  color: red !important;
}

.custom-select-span {
  color: #999;
  color: var(--Neutrals-Neutral-07, #999);
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.512px;
}

.FA-dropdown-arrow {
  display: inline-block;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
  color: #b3b3b3;
}

.FA-dropdown-arrow.open {
  transform: rotate(-180deg);
}

/* .error-border {
  border: 1px solid red;
} */

.remember-me-checkbox {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.remember-me-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
}

.remember-me {
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap: 8px; */
}

.remember-me span {
  color: #000;

  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.512px;
}

.checkbox-icon {
  font-size: 24px;
  cursor: pointer;
  color: #b3b3b3;
  margin-right: 8px;
  transition: color 0.3s ease;
}

.remember-me-checkbox:hover .checkbox-icon,
.remember-me-checkbox:focus .checkbox-icon {
  color: #883979;
}

.remember-me-checkbox.active .checkbox-icon {
  color: #883979;
}

.form-options1 .forgot-password-link {
  text-decoration: none;
}

.forgot-password-link {
  color: blue;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.512px;
  cursor: pointer;
}

.FA-btn {
  color: white;
  background-color: #883979;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.FA-btn:hover {
  background-color: #7b376e;
  transition: 0.6s;
}

.FA-btn1:hover {
  background-color: #883979;
  color: white;
  transition: 0.6s;
}

.form-actions h4 {
  color: #000;
  text-align: center;

  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 162.5% */
  letter-spacing: 0.512px;
}

.FA-btn1 {
  display: flex;
  width: 498px;
  height: 46px;

  justify-content: center;
  background-color: #fff;
  align-items: center;
  align-self: stretch;
  border-radius: 6px;
  border: solid 1px;

  color: #883979;

  color: var(--Primary-Primary---01, #883979);

  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.FA-container.dark-mode {
  background-color: #1e0419;
}

.FA-form.dark-mode {
  background-color: #2d1227;
}

.form-box.dark-mode {
  background-color: #2d1227;
}

.FA-container.dark-mode h3,
.FA-container.dark-mode p {
  color: #fff;
}

.form-options1.dark-mode span,
.form-options1.dark-mode a {
  color: #e6e6e6;
}

.form-actions.dark-mode h4 {
  color: #e6e6e6;
}

.form-actions.dark-mode .FA-btn1 {
  background-color: transparent;
  border: #e6e6e6 1px solid;
  color: #e6e6e6;
}

.dark-mode .FA-dark-mode-toggle {
  background-color: #2d1227;
  color: #b3b3b3;
}

.FA-dark-mode-toggle {
  bottom: 35%;
}

.FA-dark-mode-toggle .dark-mode img {
  width: 19px;
}

.FA-dark-mode-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #f3f3f3;
  border: none;
  /* color: black; */
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.6s;
}

.FA-dark-mode-toggle .lightSun {
  width: 25px !important;
  height: 25px !important;
  color: white !important;
}

.FA-dark-mode-toggle .darkMoon {
  width: 25px !important;
  height: 25px !important;
  color: black !important;
}

.FA-password-visibility-toggle {
  position: absolute;
  background: none;
  border: none;
  position: absolute;
  right: 10px;
  padding-top: 1px;
  padding-top: 5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  align-items: center;
  color: #b3b3b3;
}

.FA-password-visibility-toggle:hover {
  color: #883979;
  transition: color 0.6s;
}

.FA-password-visibility-toggle img {
  width: 24px;
  height: 24px;
}

.dark-mode .FA-password-visibility-toggle img {
  color: #2d1227;
}

.FA-btn:disabled {
  background-color: #d3d3d3;
  color: #a9a9a9;
  cursor: not-allowed;
  border: 1px solid #a9a9a9;
}

.dark-mode .FA-dark-mode-toggle:hover {
  background-color: #883979;
}

.input-with-icon {
  position: relative;
}

.input-frame.filled .input-with-icon .input-icon {
  color: #7b376e;
}
.dark-mode .input-frame.filled .input-with-icon .input-icon {
  color: #b3b3b3;
}

/* Responsive */
@media (min-width: 320px) and (max-width: 740px) {
  .FA-container {
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding-top: 20px;
  }

  .FA-dark-mode-toggle {
    width: 54px;
    height: 54px;
    top: 580px;
  }

  .FA-frame-container {
    gap: 0px;
  }

  .checkbox-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .lightSun {
    width: 15px !important;
    height: 15px !important;
  }

  .darkMoon {
    width: 15px !important;
    height: 15px !important;
    color: #000;
  }

  .FA-frame h3 {
    font-size: 20px;
    text-align: center;
    margin: 0;
  }

  .FA-frame p {
    font-size: 12px;
    text-align: center;
    line-height: 18px;
    gap: 50px;
  }

  .heading {
    gap: 8px;
    width: 272px;
  }

  .FA-password-visibility-toggle {
    right: -5px;
  }

  .visi {
    width: 20px !important;
    height: 20px !important;
  }

  .form-group1 {
    gap: 8px;
  }

  .FA-form {
    margin-top: 20px;
    width: 272px;
    height: 315px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px;
  }

  .FA-form .FA-form-box {
    width: 248px;
    margin: 30px 16px;
  }

  input:-webkit-autofill {
    background-color: transparent;
    color: #333 !important;
    box-shadow: 0 0 0 30px white inset !important;
    height: 42px;
  }

  input:-webkit-autofill::first-line {
    color: #883979 !important;
    border: none !important;
  }

  /* .FA-form input{
        background-color: transparent;
        font-size: 12px;
    } */

  .form-box {
    width: 248px;

    gap: 0px;
  }

  .FA-form input[type="email"],
  .FA-form #password {
    width: 248px;
    height: 32px;
    font-size: 12px;
    padding: 10px 10px 10px 28px;
    background-color: transparent !important;
    box-sizing: border-box;

    border-radius: 8px;
  }

  .form-input-box {
    gap: 0px;
  }

  .custom-option {
    font-size: 12px;
    padding: 5px;
  }

  .remember-me-checkbox {
    margin-right: -4px;
    padding: 0px;
  }

  .FA-form .input-icon {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    width: 20px;
  }

  .custom-select-span {
    margin-left: 5%;
  }

  .FA-btn,
  .FA-btn1 {
    width: 248px;
    height: 34px;
    font-size: 12px;

    border-radius: 8px;
  }

  .FA-btn {
    margin-top: 5%;
  }

  .FA-btn:hover {
    background: linear-gradient(0deg, #883979, #883979),
      linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    background-blend-mode: overlay;
  }

  .remember-me span {
    font-size: 10px;
    line-height: 16px;
  }

  .forgot-password-link {
    font-size: 10px;
  }

  .custom-select-container,
  .custom-select {
    width: 246px;
    height: 34px;
    gap: 0px;
  }

  .custom-select-span {
    font-size: 12px;
  }

  .input-frame {
    width: 248px;
    height: 34px;
  }

  .FA-dropdown-arrow {
    margin-right: 8px;
  }

  .form-actions h4 {
    font-size: 10px;
  }

  .FA-form .form-group {
    margin-bottom: 16px;
    width: 100%;
    height: 34px;
    position: relative;
  }

  /* .FA-form .error-text {
    font-size: 12px;
    color: red;
    text-align: left;
    margin-top: 5px;
  } */
  .form-group1 .error-text {
    font-size: 12px;
    color: #e74c3c;
    text-align: left;
    margin-bottom: -30px;
    font-weight: bold;
  }

  .form-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
  }

  .form-actions h4 {
    margin: 10px 0;
  }

  .FA-input-with-icon .password-visibility-toggle img {
    width: 20px;
    height: 20px;
    padding-bottom: 12px;
  }

  .dark-mode-toggle {
    bottom: 20%;
  }

  .error-text {
    font-size: 6px !important;
    top: 10px;
  }

  .error-text-email {
    font-size: 6px !important;
    font: inherit;
    margin-top: -15px !important;
    padding: 0px;
    left: 14px;
    margin: 0px;
    margin-left: 0px;
    margin-left: 10px;
    text-align: left !important;
  }
}

@media (min-width: 741px) and (max-width: 1200px) {
  .FA-container {
    padding: 0 20px;

    display: flex;
    justify-content: center;
  }

  .error-text {
    font-size: 10px !important;
  }

  .error-text-email {
    font-size: 10px !important;
  }

  .FA-frame {
    margin: 40px auto;

    padding: 25px;

    width: 90%;

    max-width: 600px;
  }

  .FA-frame h3 {
    font-size: 29px;
  }

  .FA-frame p {
    font-size: 16px;
  }

  .FA-frame input[type="email"],
  .FA-frame input[type="password"],
  .FA-frame input[type="text"],
  .FA-btn,
  .FA-btn1 {
    font-size: 15px;
  }

  .dark-mode-toggle {
    bottom: 2%;
  }
}

.FA-container .dark-mode :-webkit-autofill,
.FA-container .dark-mode input:-webkit-autofill:hover,
.FA-container .dark-mode input:-webkit-autofill:focus,
.FA-container .dark-mode input:-webkit-autofill:active {
  box-shadow: 0 0 0px 1000px transparent inset !important;
  -webkit-text-fill-color: #b3b3b3;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: white;
}

.acceptterms {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.07px;
  align-self: center;
  text-underline-position: from-font;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.FA-heading h3 {
  margin: 0 0 8px 0;
}

.FA-heading p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.FA-container.dark-mode .FA-heading p {
  color: #bbb;
}

.FA-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.FA-label {
  font-weight: bold;
  margin-bottom: 4px;
}

.FA-otp-input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.FA-container.dark-mode .FA-otp-input {
  background-color: #333;
  border: 1px solid #555;
  color: #eee;
}

.FA-verify-button {
  padding: 10px;
  font-size: 16px;
  background-color: #883979;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.FA-verify-button:disabled {
  background-color: #999;
  cursor: not-allowed;
}

.FA-verify-button:not(:disabled):hover {
  background-color: #883979;
}

.FA-loader {
  margin-top: 10px;
  height: 50px;
  width: 50px;
  align-self: center;
}

.FA-dark-mode-toggle {
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}


/*# sourceMappingURL=main.7c39abb6.css.map*/