@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
button,
.button {
  color: #fff;
  font-size: 16px;
  border-radius: 50px;
  padding-block: 11px;
  transition: 0.3s;
  line-height: 1.5;
}

.button {
  color: #fff;
  font-size: 16px;
  border-radius: 50px;
  padding-block: 11px;
  transition: 0.3s;
  line-height: 1.5;
}

.button__primary {
  background-color: var(--color-primary);
}

.button__primary[disabled] {
  background-color: #999999;
}

.button__transparent {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.button__danger {
  background-color: var(--color-danger);
}

.button__light-blue {
  background-color: var(--color-light-blue);
}

.button__slate-blue {
  background-color: var(--color-slate-blue);
}

.button__primary-transparent {
  background-color: var(--color-light-grey);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background-color: #F6F6FE;
}

.button__fullwidth {
  width: 100%;
}

.button__red {
  background-color: #CC0000;
}

.mepr-form input[type=text], .mepr-form input[type=email], .mepr-form input[type=url], .mepr-form input[type=password], .mepr-form input[type=search], .mepr-form input[type=number], .mepr-form input[type=tel], .mepr-form input[type=range], .mepr-form input[type=date], .mepr-form input[type=month], .mepr-form input[type=week], .mepr-form input[type=time], .mepr-form input[type=datetime], .mepr-form input[type=datetime-local], .mepr-form input[type=color], .mepr-form textarea {
  width: 100%;
  height: auto;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--color-input-bg);
  box-shadow: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.type-filter {
  display: flex;
  gap: 8px;
  margin-left: 16px;
}

.type-filter__wrapper {
  margin: 24px 0;
}

.type-filter input[type=radio] {
  display: none;
}

.type-filter label {
  cursor: pointer;
  margin: 0;
  padding: 11px 30px;
  transition: all 0.3s ease;
}

.type-filter input[type=radio] + label {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.type-filter input[type=radio] + label:hover {
  background-color: rgba(79, 70, 229, 0.1);
}

.type-filter input[type=radio]:checked + label {
  background-color: var(--color-primary);
  color: white;
}

.button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.button.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.checkbox-column {
  text-align: center;
  width: 40px !important;
  display: none;
}

.dataTable th, .dataTable td {
  min-width: 40px !important;
  width: 40px !important;
}

.checkbox-header {
  text-align: center;
  width: 40px !important;
  display: none;
}

#unit.bulk-mode-active .checkbox-column,
.unit-header-table.bulk-mode-active .checkbox-header {
  display: table-cell;
}

.bulk-select-checkbox,
#select-all-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.content__buttons button span {
  font-weight: 500;
}

h1, .h1 {
  font-size: 80px;
  line-height: 1.12;
  font-weight: 500;
}

@media (max-width: 1536px) {
  h1, .h1 {
    font-size: 60px;
  }
}
h2, .h2 {
  font-size: 32px;
  font-weight: 600;
}

h6, .h6 {
  font-size: 24px;
  font-weight: 400;
}

@media (max-width: 1536px) {
  h6, .h6 {
    font-size: 18px;
  }
}
h2, h6,
.h2, .h6 {
  line-height: 1.5;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

body {
  font-family: "Poppins", sans-serif;
}

p {
  color: var(--color-dark);
}

input {
  font-family: "Poppins", sans-serif;
  color: #B3BAC1;
}

.show {
  display: block !important;
}

.hide {
  display: none !important;
}

.text-center {
  text-align: center;
}

.text-start {
  text-align: start;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.container, .container-sm, .container-md {
  width: 100%;
  margin: 0 auto;
}

.container {
  max-width: var(--container-lg);
}

.container-sm {
  max-width: var(--container-sm);
}

.container-md {
  max-width: var(--container-md);
}

.position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container-lg {
  max-width: var(--container-lg);
  margin-inline: auto;
}

.container-md {
  max-width: var(--container-md);
  margin-inline: auto;
}

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

.fixed-center {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
  transform: translate(-50%, -50%);
}

.container-details {
  max-width: 1037px !important;
  width: 100%;
}

.bg-olive-green {
  background-color: var(--color-olive-green);
}

.bg-slate-blue {
  background-color: var(--color-slate-blue);
}

.bg-slate-blue-grey {
  background-color: var(--color-slate-blue-grey);
}

.bg-tawny-brown {
  background-color: var(--color-tawny-brown);
}

.bg-forest-green {
  background-color: var(--color-forest-green);
}

.bg-rust-orange {
  background-color: var(--color-rust-orange);
}

.bg-royal-purple {
  background-color: var(--color-royal-purple);
}

.bg-mint-green {
  background-color: var(--color-mint-green);
}

.bg-peach-yellow {
  background-color: var(--color-peach-yellow);
}

.bg-light-grey {
  background-color: var(--color-light-grey);
}

.grid-col-2 {
  grid-column: span 2;
}

.grid-col-3 {
  grid-column: span 3;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.pointer {
  cursor: pointer;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-bold {
  font-weight: bold;
}

.justify-end {
  justify-content: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.justify-between {
  justify-content: space-between;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-3 {
  margin-top: 3rem;
}

.mt-4 {
  margin-top: 4rem;
}

.mt-5 {
  margin-top: 5rem;
}

.mt-6 {
  margin-top: 6rem;
}

.mt-7 {
  margin-top: 7rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.mb-3 {
  margin-bottom: 3rem;
}

.mb-4 {
  margin-bottom: 4rem;
}

.mb-5 {
  margin-bottom: 5rem;
}

.mb-6 {
  margin-bottom: 6rem;
}

.mb-7 {
  margin-bottom: 7rem;
}

.ml-1 {
  margin-left: 1rem;
}

.ml-2 {
  margin-left: 2rem;
}

.ml-3 {
  margin-left: 3rem;
}

.ml-4 {
  margin-left: 4rem;
}

.ml-5 {
  margin-left: 5rem;
}

.ml-6 {
  margin-left: 6rem;
}

.ml-7 {
  margin-left: 7rem;
}

.mr-1 {
  margin-right: 1rem;
}

.mr-2 {
  margin-right: 2rem;
}

.mr-3 {
  margin-right: 3rem;
}

.mr-4 {
  margin-right: 4rem;
}

.mr-5 {
  margin-right: 5rem;
}

.mr-6 {
  margin-right: 6rem;
}

.mr-7 {
  margin-right: 7rem;
}

:root {
  --container-lg: 1920px;
  --container-md: 1550px;
  --container-sm: 1150px;
  --color-primary: #4F46E5;
  --color-light-blue: #3878D7;
  --color-slate-blue: #585583;
  --color-danger: #CC0000;
  --color-error: #CC0000;
  --color-dark: #2E3338;
  --color-border: #D8DBDF;
  --color-white: #FFFFFF;
  --color-border-dark: #C7CCD1;
  --color-olive-green: #798E57;
  --color-slate-blue-grey: #4E7482;
  --color-charcoal-grey: #2E3338;
  --color-tawny-brown: #8D6850;
  --color-forest-green: #568A66;
  --color-rust-orange: #AF5636;
  --color-royal-purple: #6E4D7C;
  --color-mint-green: #C6F0CC;
  --color-peach-yellow: #FFD48F;
  --color-light-grey: #F1F2F4;
  --color-soft-grey: #F9FAFA;
  --color-charcoal-blue: #17191C;
  --color-pale-lavender: #EBEAFF;
  --color-cool-grey: #B3BAC1;
  --status-background-color: var(--color-light-grey);
  --color-black: #000000;
  --color-olive-green: #798E57;
  --color-brown: #8D6850;
}

.login {
  --container-md: 940px;
  --container-sm: 660px;
}

.pass-updated {
  max-width: 450px;
  width: 100%;
  padding: 24px;
  background-color: var(--color-input-bg);
  border-radius: 12px;
}

.pass-updated p {
  font-size: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-input-border);
}

.pass-updated button {
  width: 100%;
  border-radius: 50px;
}

.form-wrapper {
  padding: 60px;
  margin: 0;
}

@media (max-width: 1200px) {
  .form-wrapper.container-sm {
    max-width: 100%;
  }
}
label {
  display: block;
  text-align: left;
  margin-left: 16px;
  font-size: 12px;
  margin-bottom: 2px;
}

.form__heading {
  margin-bottom: 40px;
  text-align: center;
}

.form__heading p {
  margin-top: 10px;
  font-size: 16px;
}

.form__heading h2 {
  color: var(--color-dark);
  font-weight: 600;
}

.form__group {
  position: relative;
  margin-bottom: 16px;
}

.form__group input {
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--color-input-bg);
}

.form__group input.error {
  border: 1px solid var(--color-error);
  color: var(--color-error);
}

.form__group input.error:focus {
  border: 1px solid var(--color-error);
}

.form__group input::-moz-placeholder {
  color: var(--color-input-border);
  opacity: 0.5;
}

.form__group input::placeholder {
  color: var(--color-input-border);
  opacity: 0.5;
}

.form__group input:focus {
  outline: none;
}

.form__group svg {
  position: absolute;
  top: 36px;
  right: 16px;
  cursor: pointer;
  width: 24px;
  height: 24px;
}

.form__group svg {
  width: 24px;
  height: 24px;
}

.form__group input[type=submit] {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
}

.form__group small {
  font-size: 12px;
  display: none;
  text-align: start;
  margin: 4px 0 0 16px;
}

.form__group small.error-msg {
  display: block;
  color: var(--color-error);
}

.form__btns-wrapper {
  display: flex;
  justify-content: space-between;
  padding-inline: 23px;
  margin-bottom: 24px;
  font-size: 14px;
}

.form__btns-wrapper #form-action-btn {
  width: 18px;
  height: 18px;
  cursor: pointer;
  border-color: var(--color-black);
  padding: 0;
  accent-color: var(--color-primary);
}

.form__btns-wrapper .form-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form__btns-wrapper .form-action-btn svg {
  width: 24px;
  height: 24px;
}

.form ul {
  font-size: 14px;
}

.has-account a {
  color: var(--color-primary);
  cursor: pointer;
  margin-top: -14px;
  font-weight: 600;
}

.has-account a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.mp-hide-pw {
  position: relative;
}

.button.mp-hide-pw {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  width: auto;
  height: 100%;
  align-items: center;
  background: 0 0;
  color: #85929E;
  text-decoration: none;
  padding: 1em 1.4em;
  border: none !important;
  box-shadow: none;
  height: auto;
  height: 100%;
}

.button.mp-hide-pw:hover, .button.mp-hide-pw:active {
  background: 0 0;
  color: #5D6D7E;
  text-decoration: none;
  padding: 1em 1.4em;
  border: none;
  box-shadow: none;
}

.button.mp-hide-pw .dashicons {
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
}

.signup_btn {
  border-radius: 8px;
}

.welcome-banner {
  max-width: var(--container-md);
  width: 100%;
  height: 100%;
  color: var(--color-white);
}

.welcome-banner img {
  width: 100%;
  border-radius: 24px;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.welcome-banner__text {
  max-width: 720px;
  padding-inline: 20px;
  width: 100%;
}

.welcome-banner__text h1 {
  margin: 0 0 32px 0;
}

.background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 1;
}

.password-popup:not(.hide) ~ .login {
  filter: blur(8px);
  pointer-events: none;
}

.social-icons__icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-block: 24px;
}

.social-icons__icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-size: 18px;
  padding: 12px;
  border: 1px solid #E6E8EA;
  border-radius: 8px;
  background-color: #F9FAFA;
  text-decoration: none;
}

.social-icons__icons a:visited {
  color: inherit;
}

.social-icons__icons a svg {
  width: 28px;
  height: 28px;
}

.loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  gap: 24px;
  height: 100%;
  width: 100%;
  background: rgb(255, 255, 255);
  z-index: 1;
}

input {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--color-input-bg);
}

input.error {
  border: 1px solid var(--color-error) !important;
  color: var(--color-error);
}

input.error:focus {
  border: 1px solid var(--color-error);
}

small {
  font-size: 12px;
  display: none;
  text-align: start;
  margin: 4px 0 0 16px;
}

small.error-msg {
  color: var(--color-error);
}

.login {
  max-width: var(--container-lg);
  padding: 24px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 148px;
  height: 100vh;
}

@media (max-width: 1536px) {
  .login {
    gap: 20px;
  }
}
@media (max-width: 1200px) {
  .login {
    flex-direction: column;
  }
}
.login [for=form-action-btn],
.login [for=form-terms-chkbox] {
  margin: 0;
}

.login label span {
  color: var(--color-error);
}

.login [for=form-terms-chkbox] a,
.login .primary-text {
  color: var(--color-primary);
  font-weight: 600;
}

.back-btn {
  top: -10px;
  right: -74px;
}

.back-btn svg {
  width: 32px;
  height: 32px;
}

.mp-form-row.mp-password-strength-area {
  text-align: left;
}

.signIn .form__btns-wrapper {
  padding-inline: 0;
}

a.button__primary {
  margin: 24px auto;
  color: var(--color-white);
}

.verify-account {
  position: relative;
}

.verify-account ul {
  font-size: 14px;
  padding: 12px 36px;
  background-color: #F6F6FE;
  margin: 0;
  margin-bottom: 100px;
  border-radius: 8px;
  list-style-position: inside;
}

.verify-account ul li {
  text-indent: -16px;
}

.verify-account .verify-form-wrapper {
  width: 100%;
  max-width: 660px;
  padding: 60px;
}

.verify-account #verify-account {
  width: 100%;
  border-radius: 8px;
}

.verify-account .text-start .primary-text {
  text-decoration: underline;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  border-bottom: 1px solid var(--color-border);
  background-color: #F1F2F4;
}

.navbar__brand {
  flex-shrink: 0;
  font-size: 0;
  max-width: 340px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1440px) {
  .navbar__brand {
    max-width: 270px;
  }
}
.navbar__search-bar {
  gap: 24px;
  cursor: pointer;
}

.navbar__search-bar input {
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: 8px;
  opacity: 0;
  cursor: default;
  transition: 0.3s;
}

.navbar__search-bar input.active {
  cursor: text;
  opacity: 1;
}

.navbar__items {
  padding-inline: 24px;
  gap: 24px;
}

.navbar__notifications {
  flex-shrink: 0;
  font-size: 0;
}

.navbar__notifications span {
  top: -6px;
  right: -5px;
  width: 20px;
  height: 20px;
  font-size: 10px;
  border-radius: 100px;
  color: var(--color-white);
  background-color: var(--color-primary);
}

.navbar__profile {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.navbar__profile img {
  border-radius: 100%;
  width: 48px;
  height: 48px;
  -o-object-fit: cover;
  object-fit: cover;
}

.navbar__right-col {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.navbar__right-col .content__search {
  width: 100%;
  max-width: 1050px;
}

.navbar__right-col .content__search input {
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  border: none;
  border-radius: 8px;
}

.navbar__right-col .content__search input:placeholder {
  color: #C7CCD1;
  font-weight: 400;
  font-family: inherit;
}

.navbar__right-col .content__search input:focus {
  outline: none;
}

.header-v2 {
  background-color: #F9FAFA;
}

.dashboard-main {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: calc(100vh - 80px);
}

@media (max-width: 1440px) {
  .dashboard-main {
    grid-template-columns: 270px 1fr;
  }
}
.content h1 {
  font-weight: 500;
  font-size: 24px;
  line-height: 100%;
}

.dt-paging button {
  border: 1px solid #B3BAC1 !important;
  border-radius: 12px !important;
}

.dt-paging nav {
  gap: 4px !important;
  display: flex !important;
}

.dt-paging nav button {
  color: #B3BAC1;
}

.dt-paging nav button.current {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border: 1px solid var(--color-primary) !important;
}

.column-search {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.81625 8.69141H9.22375L9.01375 8.48891C9.74875 7.63391 10.1913 6.52391 10.1913 5.31641C10.1913 2.62391 8.00875 0.441406 5.31625 0.441406C2.62375 0.441406 0.441254 2.62391 0.441254 5.31641C0.441254 8.00891 2.62375 10.1914 5.31625 10.1914C6.52375 10.1914 7.63375 9.74891 8.48875 9.01391L8.69125 9.22391V9.81641L12.4413 13.5589L13.5588 12.4414L9.81625 8.69141ZM5.31625 8.69141C3.44875 8.69141 1.94125 7.18391 1.94125 5.31641C1.94125 3.44891 3.44875 1.94141 5.31625 1.94141C7.18375 1.94141 8.69125 3.44891 8.69125 5.31641C8.69125 7.18391 7.18375 8.69141 5.31625 8.69141Z' fill='%23C7CCD1'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: 10px center;
}

#unit_wrapper,
#listings_wrapper {
  display: flex;
  flex-direction: column;
}

#unit_wrapper {
  margin-left: -46px;
  width: 103%;
}

#add-listing {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.agent-name-label {
  font-weight: 500;
  font-size: 16px;
  margin-left: 0;
}

select {
  -webkit-appearance: none;
  overflow: -moz-hidden-unscrollable;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41 0.294922L6 4.87492L10.59 0.294922L12 1.70492L6 7.70492L0 1.70492L1.41 0.294922Z' fill='%232E3338'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: right 22px center;
  display: inline-block;
  position: relative;
  font-family: inherit;
}

#unit-import-popup, #market-research-import-popup {
  max-width: 900px;
}

#unit-import-popup .popup__content p, #market-research-import-popup .popup__content p {
  border-bottom: none;
  margin-bottom: 0;
}

#unit-import-popup .listing-form__group ul, #market-research-import-popup .listing-form__group ul {
  box-shadow: none;
  height: auto;
  opacity: 1;
  visibility: visible;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  border: none;
  transform: none;
  margin-top: 0;
  padding: 0;
}

#unit-import-popup .listing-form__group ul li, #market-research-import-popup .listing-form__group ul li {
  flex-basis: 25%;
  align-items: flex-start;
  border: 1px solid var(--color-border);
  padding: 10px;
}

#unit-import-popup .import-form, #market-research-import-popup .import-form {
  align-items: end;
}

#unit-import-popup .import-form .listing-form__group ul, #market-research-import-popup .import-form .listing-form__group ul {
  box-shadow: none;
  height: auto;
  opacity: 1;
  visibility: visible;
}

#unit-import-popup .import-form .content__buttons a, #market-research-import-popup .import-form .content__buttons a {
  padding: 12px 20px;
  color: var(--color-primary);
}

.single-unit__details table.dataTable {
  border: none;
  width: 100% !important;
}

#edit-unit-popup #save-unit-submit {
  min-width: 116px;
}

.type-filter input[type=radio]:not(:checked) + label:hover {
  background-color: transparent;
  box-shadow: none;
}

table.dataTable tr th:first-child,
table.dataTable tr td:first-child {
  padding-left: 0 !important;
}

table.dataTable tr th:last-child,
table.dataTable tr td:last-child {
  padding-right: 0 !important;
}

#current-agent-name {
  font-weight: 600;
}

input[value=other] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

.popup4 .dropdown-menu label {
  padding-inline: 0 !important;
}

.dropdown-option:last-child {
  border-bottom: none !important;
}

.dropdown-option input[type=radio] {
  width: 20px;
  height: 20px;
}

.dashicons-visibility {
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 6.5C16.29 6.5 19.67 8.63 21.32 12C19.67 15.37 16.29 17.5 12.5 17.5C8.71 17.5 5.33 15.37 3.68 12C5.33 8.63 8.71 6.5 12.5 6.5ZM12.5 4.5C7.5 4.5 3.23 7.61 1.5 12C3.23 16.39 7.5 19.5 12.5 19.5C17.5 19.5 21.77 16.39 23.5 12C21.77 7.61 17.5 4.5 12.5 4.5ZM12.5 9.5C13.88 9.5 15 10.62 15 12C15 13.38 13.88 14.5 12.5 14.5C11.12 14.5 10 13.38 10 12C10 10.62 11.12 9.5 12.5 9.5ZM12.5 7.5C10.02 7.5 8 9.52 8 12C8 14.48 10.02 16.5 12.5 16.5C14.98 16.5 17 14.48 17 12C17 9.52 14.98 7.5 12.5 7.5Z' fill='%232E3338'/%3E%3C/svg%3E%0A");
  width: 24px !important;
  height: 24px !important;
  background-size: cover;
}

.dashicons-visibility::before {
  display: none;
}

select.disable {
  color: #d8dbdf;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
}

table.dataTable {
  width: 100%;
}

.dashboard-main td {
  resize: horizontal;
  overflow: auto;
  white-space: nowrap;
}

.dashboard-main td::-webkit-resizer {
  background: none;
}

div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
  margin-left: 46px;
}

.sidebar {
  width: 340px;
  height: calc(100vh - 80px);
  padding: 24px;
  background-color: #F1F2F4;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 43px;
}

@media (max-width: 1440px) {
  .sidebar {
    width: 270px;
  }
}
.sidebar__menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.sidebar__menu a {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-dark-grey);
  box-sizing: border-box;
}

.sidebar__menu a.active {
  background-color: var(--color-primary);
  border-radius: 12px;
  color: #fff;
}

.sidebar__menu a.active svg path {
  fill: #fff;
}

.sidebar__menu a[href="#"] {
  cursor: not-allowed;
  opacity: 0.5;
}

.sidebar__logout {
  padding: 16px 24px;
}

.sidebar__logout a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-danger);
  font-weight: 500;
}

.dt-container .dt-info {
  color: #9DA6AF !important;
  font-size: 14px !important;
}

.dt-container .dt-info strong {
  color: #000 !important;
}

.content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: auto;
}

.content__title {
  display: inline;
  font-size: 24px;
  font-weight: 500;
}

.content__subtitle {
  font-size: 12px;
  font-weight: 400;
}

.content__search-unit {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid #B3BAC1;
  padding-top: 0;
}

.content__search-unit + .content__search-unit {
  padding-block: 16px;
}

.content__search {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.content__search img {
  top: 45px;
  left: 20px;
}

.content__search label {
  display: block;
  margin-bottom: 8px;
  color: var(--color-charcoal-blue);
}

.content__search input {
  padding: 11px 48px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  max-width: 400px;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.755 14.2549H14.965L14.685 13.9849C15.665 12.8449 16.255 11.3649 16.255 9.75488C16.255 6.16488 13.345 3.25488 9.755 3.25488C6.165 3.25488 3.255 6.16488 3.255 9.75488C3.255 13.3449 6.165 16.2549 9.755 16.2549C11.365 16.2549 12.845 15.6649 13.985 14.6849L14.255 14.9649V15.7549L19.255 20.7449L20.745 19.2549L15.755 14.2549ZM9.755 14.2549C7.26501 14.2549 5.255 12.2449 5.255 9.75488C5.255 7.26488 7.26501 5.25488 9.755 5.25488C12.245 5.25488 14.255 7.26488 14.255 9.75488C14.255 12.2449 12.245 14.2549 9.755 14.2549Z' fill='%23C7CCD1'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: 16px center;
}

.content__search input::-moz-placeholder {
  color: #C7CCD1;
  font-family: "Poppins", serif;
  font-size: 16px;
}

.content__search input::placeholder {
  color: #C7CCD1;
  font-family: "Poppins", serif;
  font-size: 16px;
}

.content__search .button {
  border-radius: 8px;
  padding: 11px 40px;
  display: inline-block;
}

.content__buttons {
  display: flex;
  gap: 8px;
}

.content__buttons button {
  gap: 8px;
  padding: 12px 20px;
}

.content__buttons button span {
  font-weight: 500;
}

.content--upcoming-units-header {
  padding-bottom: 0;
}

.content--upcoming-units-header .content__buttons {
  margin-top: 16px;
}

.content--upcoming-units-header .content__buttons button.btn-link {
  color: var(--color-charcoal-grey);
  border-radius: 0;
  padding: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.content--upcoming-units-header .content__buttons button.btn-link.active {
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 10px;
}

.content--upcoming-units-header .content__buttons {
  gap: 20px;
}

.content__description {
  padding-top: 16px;
  font-size: 12px;
  line-height: 18px;
}

.dt-container .dt-paging.paging_simple_numbers .dt-paging-button {
  font-weight: 400;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 12px !important;
}

.dt-container .dt-paging.paging_simple_numbers .dt-paging-button:hover {
  background: #fff !important;
  color: #B3BAC1 !important;
}

.dt-container .dt-paging.paging_simple_numbers .dt-paging-button.current {
  font-weight: 600;
}

.dt-container .dt-paging.paging_simple_numbers .dt-paging-button.current:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border: 1px solid var(--color-primary) !important;
}

.mp-hide-pw svg {
  position: static;
}

.content-table {
  width: 100%;
}

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

.content-table__unit {
  width: 100%;
  font-size: 14px;
  padding-block: 8px;
  font-weight: 500;
  text-align: center;
  border-radius: 8px;
  background-color: var(--color-pale-lavender);
  color: var(--color-charcoal-blue);
}

.content-table__search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 16px;
}

.content-table__search-unit input {
  padding: 8px 30px;
  max-width: 169px;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8163 10.6914H11.2238L11.0138 10.4889C11.7488 9.63391 12.1913 8.52391 12.1913 7.31641C12.1913 4.62391 10.0088 2.44141 7.31625 2.44141C4.62375 2.44141 2.44125 4.62391 2.44125 7.31641C2.44125 10.0089 4.62375 12.1914 7.31625 12.1914C8.52375 12.1914 9.63375 11.7489 10.4888 11.0139L10.6913 11.2239V11.8164L14.4413 15.5589L15.5588 14.4414L11.8163 10.6914ZM7.31625 10.6914C5.44875 10.6914 3.94125 9.18391 3.94125 7.31641C3.94125 5.44891 5.44875 3.94141 7.31625 3.94141C9.18375 3.94141 10.6913 5.44891 10.6913 7.31641C10.6913 9.18391 9.18375 10.6914 7.31625 10.6914Z' fill='%23C7CCD1'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: 8px center;
  font-size: 12px;
}

.content-table__search-unit input::-moz-placeholder {
  font-family: "Poppins", serif;
}

.content-table__search-unit input::placeholder {
  font-family: "Poppins", serif;
}

.content-table__search-unit img {
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
}

.content-table__data {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.content-table__data-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.content-table__data-wrapper .content-table__unit {
  background-color: var(--color-light-grey);
  font-size: 12px;
  padding: 8px 12px;
  text-align: start;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.content-table__data-wrapper .unit-buttons {
  width: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.content-table__data-wrapper .unit-buttons button {
  background-color: var(--color-light-grey);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  padding: 0;
}

table th:not(:last-child), table td:not(:last-child) {
  min-width: 135px;
  padding-right: 12px;
}

table#market-research th:not(:last-child), table#market-research td:not(:last-child) {
  min-width: 181px;
}

table th, table td {
  padding-bottom: 12px;
}

table .content-table__unit {
  width: 100%;
  font-size: 14px;
  padding: 8px 12px;
  font-weight: 500;
  text-align: center;
  border-radius: 8px;
  background-color: var(--color-pale-lavender);
  color: var(--color-charcoal-blue);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

table .content-table__unit.actions {
  background-color: var(--color-light-grey);
}

table tbody .content-table__unit {
  background-color: var(--status-background-color);
  font-size: 12px;
  text-align: start;
  min-height: 34px;
}

table tbody .unit-buttons {
  width: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

table tbody .unit-buttons button {
  background-color: var(--color-light-grey);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  padding: 0;
}

#unit_wrapper .column-search {
  padding: 8px 8px 8px 30px;
  border: none;
  border-bottom: 1px solid #B3BAC1;
  border-radius: 0;
  font-size: 12px;
  margin-top: 5px;
}

div.dt-container {
  width: 100%;
}

div.dt-container.dt-empty-footer .dt-scroll-body,
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
  border-bottom: none !important;
}

table.dataTable tr > td {
  padding: 6px !important;
}

table.dataTable tr > th {
  padding: 2px 6px !important;
}

.dt-empty-footer > .dt-layout-row:nth-child(1) {
  display: none;
}

.form-container .listing-form__group input::-moz-placeholder, input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=search]::-moz-placeholder {
  color: #D8DBDF !important;
}

.form-container .listing-form__group input::placeholder,
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=number]::placeholder,
input[type=tel]::placeholder,
input[type=url]::placeholder,
input[type=search]::placeholder {
  color: #D8DBDF !important;
}

.dt-paging-button.previous,
.dt-paging-button.next {
  overflow: hidden;
  position: relative;
}

.dt-paging-button.previous::before,
.dt-paging-button.next::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0%;
  left: 0;
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.25002 1.02895C4.95752 0.736445 4.48502 0.736445 4.19252 1.02895L0.750015 4.47145C0.457515 4.76395 0.457515 5.23645 0.750015 5.52895L4.19252 8.97144C4.48502 9.26394 4.95752 9.26394 5.25002 8.97144C5.54252 8.67894 5.54252 8.20645 5.25002 7.91395L2.34001 4.99645L5.25002 2.08645C5.54252 1.79395 5.53502 1.31395 5.25002 1.02895Z' fill='%23B3BAC1'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
}

.dt-paging-button.next::before {
  transform: rotate(180deg);
}

#failure-popup:not(.hide) ~ .dashboard-main #transactions-popup {
  z-index: -1;
  opacity: 0;
  display: none;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  width: 100%;
}

.pagination__info {
  color: var(--color-border-dark);
  font-size: 14px;
}

.pagination__range {
  font-weight: 600;
  color: var(--color-charcoal-blue);
}

.pagination__data {
  gap: 4px;
}

.pagination__page, .pagination__button {
  color: var(--color-cool-grey);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--color-cool-grey);
  transition: 0.3s;
  padding: 0;
}

.pagination__page--active, .pagination__button--active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.pagination__page:hover, .pagination__button:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.pagination__ellipsis {
  color: var(--color-cool-grey);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 28px;
  height: 36px;
}

.popup {
  background-color: #fff;
  max-width: 450px;
  width: 100%;
  padding: 24px;
  border-radius: 12px;
  z-index: 1;
}

.popup__content {
  color: var(--color-dark);
}

.popup__content h2 {
  margin-top: 16px;
}

.popup__content p {
  border-bottom: 1px solid var(--color-border-dark);
  padding-block: 16px;
  font-size: 14px;
}

.popup span {
  display: inline-block;
  border: none;
  padding: 4px 8px;
  margin: 8px 0 12px 0;
  border-radius: 4px;
  font-weight: 600;
  background-color: #F1F2F4;
}

.popup__button-container {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 21px;
}

.popup__button-container button.button__primary {
  font-weight: 600;
}

.popup__button-container button.button__transparent {
  font-weight: 500;
}

.popup__button {
  margin-top: 24px;
  width: 100%;
  padding-block: 11px;
}

.custom-popup {
  background-color: var(--color-white);
  padding: 24px;
  border-radius: 12px;
  z-index: 1;
  position: fixed !important;
  width: 450px;
  max-width: 100%;
}

.custom-popup__content {
  color: var(--color-charcoal-grey);
}

.custom-popup__content h2 {
  margin-top: 16px;
}

.custom-popup__content p {
  border-bottom: 1px solid var(--color-input-border);
  padding-block: 16px;
  font-size: 14px;
  margin-bottom: 0;
}

.custom-popup__content hr {
  margin-bottom: 24px;
}

.custom-popup__button {
  width: 100%;
  border-radius: 50px;
  padding-block: 11px;
}

.custom-popup__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.custom-popup__buttons button {
  width: 195px;
  font-weight: 600;
}

.custom-popup .button__primary-transparent {
  background-color: #fff;
}

#popup-message strong {
  font-size: 18px;
  background: #F1F2F4;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  margin-bottom: 12px;
  display: inline-block;
}

.popup1 {
  background-color: var(--color-white);
  margin-inline: 20px;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
}

.popup1.form-container {
  max-width: 874px;
}

.popup1 .popup1_header {
  background-color: var(--color-slate-blue);
  display: flex;
  justify-content: space-between;
  border-radius: 12px;
  align-items: center;
  padding: 12px 16px;
}

.popup1 .close-btn {
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.popup1 .popup1_header p {
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-white);
  font-size: 20px;
  margin-bottom: 0;
}

.popup1 .form-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 24px;
  gap: 12px;
  max-width: 100%;
  padding: 16px;
  background-color: #F9FAFA;
  border-radius: 12px;
  position: relative;
  margin-bottom: 48px;
}

.popup1 .form-wrapper:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #D8DBDF;
  margin-top: 12px;
  position: absolute;
  bottom: -24px;
  left: 0;
  right: 0;
}

.popup1 .form-field {
  display: flex;
  flex-direction: column;
}

.popup1 .form-field input {
  padding: 16px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  color: #333;
  outline: none;
  transition: border-color 0.3s;
}

.popup1 .form-field input:focus {
  border-color: #007bff;
}

@media (max-width: 600px) {
  .popup1 .form-wrapper {
    grid-template-columns: 1fr;
  }
}
.popup1 .add-icon {
  border-radius: 50%;
  display: flex;
  margin: 24px 0 0 auto;
  justify-content: center;
  align-items: center;
  background-color: #585583;
  width: 36px;
  cursor: pointer;
  box-shadow: 0px 8px 12px 0px rgba(30, 28, 65, 0.3019607843);
  transition: 0.3s ease-in-out;
  height: 36px;
}

.popup1 .add-icon:hover {
  background-color: #333;
}

.popup1 .divider {
  color: #B3BAC1;
  margin-top: 24px;
}

.popup1 .save-btn {
  display: flex;
  justify-content: center;
  background-color: #4F46E5;
  gap: 12px;
  align-items: center;
  border: none;
  margin: 24px 0 0 auto;
  outline: none;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: 16px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  color: var(--color-white);
  font-weight: 500;
  line-height: 1.5;
}

.popup1 .save-btn:hover {
  background-color: #625beb;
}

.popup2 {
  background-color: var(--color-white);
  margin-inline: 20px;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
}

.popup2.form-container {
  max-width: 874px;
}

.popup2 .popup2_header {
  background-color: var(--color-olive-green);
  display: flex;
  justify-content: space-between;
  border-radius: 12px;
  align-items: center;
  padding: 12px 16px;
}

.popup2 .close-btn {
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.popup2 .popup2_header p {
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-white);
  font-size: 20px;
  margin-bottom: 0;
}

.popup2 .form-container {
  width: 100%;
  max-width: 100%;
  padding: 16px;
  background-color: #F9FAFA;
  margin-top: 24px;
  border-radius: 12px;
  box-sizing: border-box;
}

.popup2 .form-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.popup2 .form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.popup2 input[type=text],
.popup2 textarea {
  padding: 16px;
  border: 1px solid #D8DBDF;
  border-radius: 8px;
  font-size: 16px;
  background-color: #f9f9f9;
  resize: none;
  outline: none;
  width: 100%;
}

.popup2 textarea {
  margin-top: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  min-height: 120px;
}

.popup2 textarea::-moz-placeholder {
  color: #d8dbdf;
}

.popup2 textarea::placeholder {
  color: #d8dbdf;
}

@media (max-width: 768px) {
  .popup2 .form-row {
    flex-direction: column;
    gap: 16px;
  }
}
.popup2 .form-field input:focus {
  border-color: #007bff;
}

@media (max-width: 600px) {
  .popup2 .form-container {
    grid-template-columns: 1fr;
  }
}
.popup2 .add-icon {
  border-radius: 50%;
  display: flex;
  margin: 24px 0 0 auto;
  justify-content: center;
  align-items: center;
  background-color: var(--color-olive-green);
  width: 36px;
  cursor: pointer;
  box-shadow: 0px 8px 12px 0px rgba(30, 28, 65, 0.3019607843);
  transition: 0.3s ease-in-out;
  height: 36px;
}

.popup2 .add-icon:hover {
  background-color: #333;
}

.popup2 .divider {
  color: #B3BAC1;
  margin-top: 24px;
}

.popup2 .save-btn {
  display: flex;
  justify-content: center;
  background-color: #4F46E5;
  gap: 12px;
  align-items: center;
  border: none;
  margin: 24px 0 0 auto;
  outline: none;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: 16px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  color: var(--color-white);
  font-weight: 500;
  line-height: 1.5;
}

.popup2 .save-btn:hover {
  background-color: #625beb;
}

.popup3 {
  background-color: var(--color-white);
  margin-inline: 20px;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
}

.popup3.form-container {
  max-width: 874px;
}

.popup3 .popup3_header {
  background-color: var(--color-slate-blue-grey);
  display: flex;
  justify-content: space-between;
  max-width: 100%;
  border-radius: 12px;
  align-items: center;
  padding: 12px 16px;
}

.popup3 .close-btn {
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.popup3 .popup3_header p {
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-white);
  font-size: 20px;
  margin-bottom: 0;
}

.popup3 .form-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  max-width: 100%;
}

.popup3 .form-box {
  background-color: #F9FAFA;
  border-radius: 12px;
  padding: 16px;
  width: 100%;
  max-width: 401px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.popup3 .divider_box {
  color: #D8DBDF;
  border: 1px solid #D8DBDF;
  margin-block: 12px;
}

.popup3 h2 {
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}

.popup3 .form-group {
  margin-bottom: 12px;
}

.popup3 select,
.popup3 input[type=text],
.popup3 input[type=date] {
  width: 100%;
  padding: 16px;
  border: 1px solid #D8DBDF;
  border-radius: 4px;
  font-size: 16px;
  background-color: #fff;
  box-sizing: border-box;
}

@media (max-width: 910px) {
  .popup3 .form-container {
    flex-direction: column;
    align-items: center;
  }
  .popup3 .popup1 {
    padding: 16px;
  }
  .popup3 .form-box {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .popup3 .popup1 {
    padding: 12px;
  }
  .popup3 .popup3_header p {
    font-size: 18px;
  }
  .popup3 select,
  .popup3 input[type=text] {
    padding: 12px;
    font-size: 14px;
  }
  .popup3 .add-icon {
    width: 32px;
    height: 32px;
    margin: 12px 0 0 auto;
  }
  .popup3 .save-btn {
    padding: 10px 16px;
    font-size: 14px;
  }
}
.popup3 .add-icon {
  border-radius: 50%;
  display: flex;
  margin: 16px 0 0 auto;
  justify-content: center;
  align-items: center;
  background-color: var(--color-slate-blue-grey);
  width: 36px;
  cursor: pointer;
  box-shadow: 0px 8px 12px 0px rgba(37, 70, 82, 0.3019607843);
  transition: 0.3s ease-in-out;
  height: 36px;
}

.popup3 .add-icon:hover {
  background-color: #333;
}

.popup3 .divider_end {
  color: #B3BAC1;
  border: 1px solid #B3BAC1;
  margin-top: 24px;
}

.popup3 .save-btn {
  display: flex;
  justify-content: center;
  background-color: var(--color-primary);
  gap: 12px;
  align-items: center;
  border: none;
  margin: 24px 0 0 auto;
  outline: none;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: 16px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  color: var(--color-white);
  font-weight: 500;
  line-height: 1.5;
}

.popup3 .save-btn:hover {
  background-color: #625beb;
}

.popup4 {
  background-color: var(--color-white);
  margin-inline: 20px;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
}

.popup4.form-container {
  max-width: 950px;
}

.popup4 .popup4_header {
  background-color: var(--color-brown);
  display: flex;
  justify-content: space-between;
  border-radius: 12px;
  align-items: center;
  padding: 12px 16px;
}

.popup4 .close-btn {
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.popup4 .popup4_header p {
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-white);
  font-size: 20px;
  margin-bottom: 0;
}

.popup4 .form-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 16px;
  background-color: #F9FAFA;
  margin-top: 24px;
  border-radius: 12px;
  box-sizing: border-box;
}

.popup4 .form-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.popup4 .form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.popup4 input[type=text],
.popup4 textarea {
  padding: 16px;
  border: 1px solid #D8DBDF;
  border-radius: 8px;
  font-size: 16px;
  background-color: #fff;
  resize: none;
  outline: none;
  width: 100%;
}

.popup4 textarea {
  margin-top: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  min-height: 120px;
}

.popup4 textarea::-moz-placeholder {
  color: #d8dbdf;
}

.popup4 textarea::placeholder {
  color: #d8dbdf;
}

@media (max-width: 768px) {
  .popup4 .form-row {
    flex-direction: column;
    gap: 16px;
  }
}
.popup4 .form-field input:focus {
  border-color: #007bff;
}

@media (max-width: 600px) {
  .popup4 .form-container {
    grid-template-columns: 1fr;
  }
}
.popup4 .add-icon {
  border-radius: 50%;
  display: flex;
  margin: 24px 0 0 auto;
  justify-content: center;
  align-items: center;
  background-color: var(--color-brown);
  width: 36px;
  cursor: pointer;
  box-shadow: 0px 8px 12px 0px rgba(30, 28, 65, 0.3019607843);
  transition: 0.3s ease-in-out;
  height: 36px;
}

.popup4 .add-icon:hover {
  background-color: #333;
}

.popup4 .divider {
  color: #B3BAC1;
  margin-top: 24px;
}

.popup4 .save-btn {
  display: flex;
  justify-content: center;
  background-color: #4F46E5;
  gap: 12px;
  align-items: center;
  border: none;
  margin: 24px 0 0 auto;
  outline: none;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: 16px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  color: var(--color-white);
  font-weight: 500;
  line-height: 1.5;
}

.popup4 .save-btn:hover {
  background-color: #625beb;
}

.popup5 {
  background-color: var(--color-white);
  margin-inline: 20px;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
}

.popup5.form-container {
  max-width: 950px;
}

.popup5 .popup5_header {
  background-color: var(--color-royal-purple);
  display: flex;
  justify-content: space-between;
  border-radius: 12px;
  align-items: center;
  padding: 12px 16px;
}

.popup5 .close-btn {
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.popup5 .popup5_header p {
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-white);
  font-size: 20px;
  margin-bottom: 0;
}

.popup5 .form-container {
  width: 100%;
  max-width: 100%;
  padding: 16px;
  background-color: #F9FAFA;
  margin-top: 24px;
  border-radius: 12px;
  box-sizing: border-box;
}

.popup5 .form-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.popup5 .form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.popup5 input[type=text],
.popup5 textarea {
  padding: 16px;
  border: 1px solid #D8DBDF;
  border-radius: 8px;
  font-size: 16px;
  background-color: #f9f9f9;
  resize: none;
  outline: none;
  width: 100%;
}

.popup5 textarea {
  margin-top: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  min-height: 120px;
}

.popup5 textarea::-moz-placeholder {
  color: #d8dbdf;
}

.popup5 textarea::placeholder {
  color: #d8dbdf;
}

@media (max-width: 768px) {
  .popup5 .form-row {
    flex-direction: column;
    gap: 16px;
  }
}
.popup5 .form-field input:focus {
  border-color: #007bff;
}

@media (max-width: 600px) {
  .popup5 .form-container {
    grid-template-columns: 1fr;
  }
}
.popup5 .add-icon {
  border-radius: 50%;
  display: flex;
  margin: 24px 0 0 auto;
  justify-content: center;
  align-items: center;
  background-color: var(--color-royal-purple);
  width: 36px;
  cursor: pointer;
  box-shadow: 0px 8px 12px 0px rgba(30, 28, 65, 0.3019607843);
  transition: 0.3s ease-in-out;
  height: 36px;
}

.popup5 .add-icon:hover {
  background-color: #333;
}

.popup5 .divider {
  color: #B3BAC1;
  margin-top: 24px;
}

.popup5 .save-btn {
  display: flex;
  justify-content: center;
  background-color: #4F46E5;
  gap: 12px;
  align-items: center;
  border: none;
  margin: 24px 0 0 auto;
  outline: none;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: 16px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  color: var(--color-white);
  font-weight: 500;
  line-height: 1.5;
}

.popup5 .save-btn:hover {
  background-color: #625beb;
}

.calling-notes-popup {
  background-color: var(--color-white);
  margin-inline: 20px;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
}

.calling-notes-popup.form-container {
  max-width: 1200px;
}

.calling-notes-popup .calling-notes-popup_header {
  background-color: var(--color-rust-orange);
  display: flex;
  justify-content: space-between;
  border-radius: 12px;
  align-items: center;
  padding: 12px 16px;
}

.calling-notes-popup .calling-notes-popup_header p {
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-white);
  font-size: 20px;
  margin-bottom: 0;
}

.calling-notes-popup .close-btn {
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.calling-notes-popup .form-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 16px;
  background-color: #F9FAFA;
  margin-top: 24px;
  border-radius: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calling-notes-popup .form-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.calling-notes-popup .form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.calling-notes-popup input[type=text],
.calling-notes-popup input[type=date],
.calling-notes-popup textarea {
  padding: 16px;
  border: 1px solid #D8DBDF;
  border-radius: 8px;
  font-size: 16px;
  background-color: #fff;
  resize: none;
  outline: none;
  width: 100%;
}

.calling-notes-popup input[type=date] {
  background-color: rgba(79, 70, 229, 0.1019607843);
}

.calling-notes-popup textarea::-moz-placeholder {
  color: #d8dbdf;
}

.calling-notes-popup textarea::placeholder {
  color: #d8dbdf;
}

.calling-notes-popup .call-status-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 768px) {
  .calling-notes-popup .form-row {
    flex-direction: column;
    gap: 16px;
  }
}
.calling-notes-popup .form-field input:focus {
  border-color: #007bff;
}

@media (max-width: 600px) {
  .calling-notes-popup .form-container {
    grid-template-columns: 1fr;
  }
}
.calling-notes-popup .add-icon {
  border-radius: 50%;
  display: flex;
  margin: 24px 0 0 auto;
  justify-content: center;
  align-items: center;
  background-color: var(--color-brown);
  width: 36px;
  cursor: pointer;
  box-shadow: 0px 8px 12px 0px rgba(30, 28, 65, 0.3019607843);
  transition: 0.3s ease-in-out;
  height: 36px;
}

.calling-notes-popup .add-icon:hover {
  background-color: #333;
}

.calling-notes-popup .divider {
  color: #B3BAC1;
  margin-top: 24px;
}

.calling-notes-popup .save-btn {
  display: flex;
  justify-content: center;
  background-color: #4F46E5;
  gap: 12px;
  align-items: center;
  border: none;
  margin: 24px 0 0 auto;
  outline: none;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: 16px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  color: var(--color-white);
  font-weight: 500;
  line-height: 1.5;
}

.calling-notes-popup .save-btn:hover {
  background-color: #625beb;
}

.calling-notes-popup .form-row:first-child .form-group:last-child {
  width: 342px;
  flex-basis: 95px;
}

.calling-notes-popup textarea {
  height: 145px;
  font-family: inherit;
}

.calling-notes-status {
  border: 1px solid #C7CCD1;
  border-radius: 12px;
  padding: 12px;
  max-width: 342px;
}

.calling-notes-status label[for=call-status] {
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  background-color: #AF5636;
  color: #fff;
  text-align: center;
  padding: 8px 0;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.calling-notes-status .call-status-options {
  background-color: #E6E8EA;
  padding: 12px;
  border-radius: 8px;
  margin-top: 12px;
}

.calling-notes-status .call-status-options label {
  height: 26px;
  background-color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin: 0;
  cursor: pointer;
}

.calling-notes-status .call-status-options label input {
  accent-color: #AF5636;
}

.calling-notes-status .call-status-options .call-status-option-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: #AF5636;
  margin-left: auto;
}

.calling-notes-status .call-status-options label[for=negative] .call-status-option-color {
  background-color: #AF5636;
}

.calling-notes-status .call-status-options label[for=neutral] .call-status-option-color {
  background-color: #F1F2F4;
}

.calling-notes-status .call-status-options label[for=positive] .call-status-option-color {
  background-color: #C6F0CC;
}

.calling-notes-status .call-status-options label[for=mixed] .call-status-option-color {
  background-color: #FFD48F;
}

.new-notification-popup #popup-title {
  font-size: 24px;
  font-weight: 500;
  color: #222;
  margin-bottom: 6px;
}

.new-notification-popup #popup-message {
  font-size: 14px;
  margin-bottom: 20px;
}

.new-notification-popup #popup-message strong {
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin-bottom: 0;
}

.new-notification-popup .custom-popup__buttons {
  justify-content: center;
}

.new-notification-popup .button {
  font-size: 16px;
  font-weight: 500;
  width: 100%;
}

.new-notification-popup .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.new-notification-popup .icon-container .icon {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #F4F3FF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.new-notification-popup .icon-container .icon svg {
  width: 64px;
  height: 64px;
}

.custom-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-toggle {
  width: 100%;
  padding: 16px;
  border: 1px solid #D8DBDF;
  border-radius: 8px;
  font-size: 16px;
  background-color: var(--color-white);
  color: #333;
  text-align: left;
  cursor: pointer;
  position: relative;
  min-height: 56px;
}

.dropdown-toggle::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.333984 0.5L5.33398 5.5L10.334 0.5H0.333984Z' fill='%232E3338'/%3E%3C/svg%3E%0A");
  background-size: 11px 6px;
  background-repeat: no-repeat;
  background-position: center;
  color: #333;
  position: absolute;
  width: 10px;
  height: 5px;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  position: absolute;
}

.dropdown-menu {
  display: none;
  position: absolute;
  width: 100%;
  background-color: #fff;
  border: 1px solid #D8DBDF;
  border-radius: 4px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  overflow-y: auto;
  margin-top: 4px;
}

.dropdown-option {
  border-bottom: 1px solid #ddd;
}

.dropdown-menu label {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  margin-inline: 16px;
}

.dropdown-menu input[type=radio] {
  margin-right: 8px;
  accent-color: var(--color-brown);
}

.custom-dropdown.active .dropdown-menu {
  display: block;
}

button.remove-contact-btn {
  position: absolute;
  right: 0;
  top: -10px;
  padding: 5px;
}

.form-row.person-contact-row {
  position: relative;
  margin-bottom: 15px;
}

.notification-panel {
  width: 100%;
}

.notification-panel h3 {
  color: var(--color-charcoal-grey);
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
}

.notification-panel .notification-panel {
  padding: 24px;
}

.notification-panel nav {
  border-bottom: 1px solid var(--color-cool-grey);
  padding-bottom: 16px;
}

.notification-panel .notifications {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notification-panel .notification-header {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  padding-bottom: 12px;
  transition: 0.3s ease-in-out;
}

.notification-panel .notification-header .unread-count {
  color: #5046e5;
}

.notification-panel .notification-header a:hover {
  text-decoration: underline;
}

.notification-panel .notification-header p {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-charcoal-grey);
  line-height: 24px;
}

.notification-panel .notification-header a {
  text-decoration: none;
  color: var(--color-primary);
}

.notification-panel .notification-container {
  padding: 20px;
  gap: 20px;
  border: 0px 0px 1px 0px;
  opacity: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-soft-grey);
  border-radius: 24px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

.notification-panel .notification-container.unread {
  background: #f9f9ff;
  border-bottom: 1px solid var(--Primary, #4f46e5);
}

.notification-panel .notification-container.unread .icon path {
  fill: #4F46E5;
}

.notification-panel .notification-container:hover {
  background: rgba(79, 70, 229, 0.0509803922);
}

.notification-panel .icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.notification-panel .default-icon,
.notification-panel .hover-icon {
  position: absolute;
  transition: opacity 0.3s ease-in-out;
}

.notification-panel .hover-icon {
  opacity: 0;
}

.notification-panel .notification-container:hover .default-icon {
  opacity: 0;
}

.notification-panel .notification-container:hover .hover-icon {
  opacity: 1;
}

.notification-panel .notification-content {
  flex-grow: 1;
  margin-left: 10px;
}

.notification-panel .notification-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration-line: underline;
  padding-bottom: 6px;
}

.notification-panel .notification-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  padding-bottom: 4px;
}

.notification-panel .time {
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  color: var(--color-charcoal-grey);
}

.notification-panel .menu-container {
  position: relative;
  cursor: pointer;
}

.notification-panel .menu-icon {
  font-size: 24px;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: background 0.3s ease-in-out;
}

.notification-panel .menu-icon:hover {
  background: rgba(0, 0, 0, 0.1);
}

.notification-panel .menu-dropdown {
  position: absolute;
  top: -15px;
  left: -200px;
  background: white;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  pointer-events: none;
  white-space: nowrap;
}

.notification-panel .menu-dropdown.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.notification-panel .menu-dropdown button {
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  color: black;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  gap: 12px;
  padding: 13.5px 12px;
  border-radius: 10px;
  transition: background 0.2s ease-in-out;
  font-weight: 500;
  line-height: 21px;
}

.notification-panel .menu-dropdown button:hover {
  background-color: #f0f0f0;
}

.no-notifications {
  padding: 30px;
  text-align: center;
  color: #666;
  font-style: italic;
}

.linear-gradiant-color {
  height: 50px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
}

.rs-notification {
  position: fixed;
  top: 90px;
  right: 20px;
  z-index: 9999;
  max-width: 400px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  border-left: 4px solid #4F46E5;
  animation: slideIn 0.5s ease-out;
}

.rs-notification-content {
  padding: 15px;
}

.rs-notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.rs-notification-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.rs-notification-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  line-height: 1;
}

.rs-notification-body {
  margin-bottom: 15px;
  color: #555;
  line-height: 1.5;
}

.rs-notification-footer {
  text-align: right;
}

.rs-notification-link {
  display: inline-block;
  padding: 6px 12px;
  background: #4F46E5;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
}

.rs-notification a:visited {
  color: #ffffff;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* Notification pagination styles */
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 25px 0 15px;
}

.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pagination-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-numbers a.active {
  background-color: var(--color-primary);
  color: white;
}

.pagination-arrow {
  color: var(--color-primary);
}

.pagination-numbers a, .pagination-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--color-charcoal-grey);
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
  font-size: 14px;
  font-weight: 500;
}

.pagination-numbers a:hover, .pagination-arrow:hover {
  background-color: rgba(79, 70, 229, 0.05);
  color: var(--color-primary);
}

.pagination-ellipsis {
  margin: 0 4px;
  color: var(--color-charcoal-grey);
}

.notification-toggle-container {
  margin-top: 15px;
  margin-bottom: 20px;
}

.notification-toggle-btn {
  display: inline-block;
  padding: 8px 16px;
  margin-right: 10px;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  color: #374151;
  transition: all 0.2s ease;
}

.notification-toggle-btn:hover {
  text-decoration: none;
  background: #e5e7eb;
  border-color: #9ca3af;
}

.notification-toggle-btn:visited {
  color: #374151;
}

.notification-toggle-btn.active {
  background: #4f46e5;
  color: white;
  border-color: #4f46e5;
}

.notification-toggle-btn.active.active:hover {
  background: #4338ca;
  border-color: #4338ca;
}

@media (max-width: 768px) {
  .notification-toggle-btn {
    display: block;
    margin-right: 0;
    margin-bottom: 10px;
    text-align: center;
  }
}
.form-container {
  border-radius: 8px;
  padding: 20px;
  max-width: var(--container-sm);
  width: 100%;
  margin-inline: auto;
  background-color: #fff;
  max-height: calc(100vh - 100px);
}

.form-container__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.form-container__header > div {
  display: flex;
  gap: 20px;
}

.form-container__header h5 {
  margin: 0;
}

.form-container__header .button {
  width: 18px;
  height: 18px;
}

.form-container .profile-picture {
  width: 180px;
  height: 180px;
  margin-block: 24px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.form-container .profile-picture__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.form-container .profile-picture__overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-container .listing-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
  margin-block: 24px;
  border-radius: 12px;
  background-color: #F9FAFA;
}

.form-container .listing-form__fullwidth {
  grid-column: span 2;
}

.form-container .listing-form__group {
  display: flex;
  flex-direction: column;
}

.form-container .listing-form__group label {
  font-size: 12px;
  margin: 0 0 2px 16px;
  color: black;
}

.form-container .listing-form__group label span {
  color: var(--color-danger);
}

.form-container .listing-form__group img {
  width: 24px;
  height: 24px;
  right: 12px;
  top: 33px;
  cursor: pointer;
}

.form-container .listing-form__group small {
  font-size: 12px;
  margin: 4px 0 0 16px;
}

.form-container .listing-form__group .arrow-down {
  width: 12px;
  height: 12px;
  top: 40px;
  right: 16px;
  transition: 0.3s;
}

.form-container .listing-form__group input,
.form-container .listing-form__group select,
.form-container .listing-form__group textarea {
  padding: 16px;
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1em;
}

.form-container .listing-form__group input::-moz-placeholder, .form-container .listing-form__group select::-moz-placeholder, .form-container .listing-form__group textarea::-moz-placeholder {
  color: #d8dbdf;
}

.form-container .listing-form__group input::placeholder,
.form-container .listing-form__group select::placeholder,
.form-container .listing-form__group textarea::placeholder {
  color: #d8dbdf;
}

.form-container .listing-form__group input:focus::-moz-placeholder, .form-container .listing-form__group select:focus::-moz-placeholder, .form-container .listing-form__group textarea:focus::-moz-placeholder {
  color: var(--color-dark-grey);
}

.form-container .listing-form__group input:focus::placeholder,
.form-container .listing-form__group select:focus::placeholder,
.form-container .listing-form__group textarea:focus::placeholder {
  color: var(--color-dark-grey);
}

.form-container .listing-form__group input:focus, .form-container .listing-form__group input:active, .form-container .listing-form__group input:invalid, .form-container .listing-form__group input:focus-visible, .form-container .listing-form__group input:focus-within,
.form-container .listing-form__group select:focus,
.form-container .listing-form__group select:active,
.form-container .listing-form__group select:invalid,
.form-container .listing-form__group select:focus-visible,
.form-container .listing-form__group select:focus-within,
.form-container .listing-form__group textarea:focus,
.form-container .listing-form__group textarea:active,
.form-container .listing-form__group textarea:invalid,
.form-container .listing-form__group textarea:focus-visible,
.form-container .listing-form__group textarea:focus-within {
  outline-color: var(--color-primary);
}

.form-container .listing-form__group select {
  -webkit-appearance: none;
  overflow: -moz-hidden-unscrollable;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41 0.294922L6 4.87492L10.59 0.294922L12 1.70492L6 7.70492L0 1.70492L1.41 0.294922Z' fill='%232E3338'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: right 22px center;
  display: inline-block;
  position: relative;
}

.form-container .listing-form__group textarea {
  resize: none;
  font-family: "Poppins", serif;
}

.form-container .listing-form__group .input-wrapper {
  grid-column: span 2;
}

.form-container .listing-form__group .add-listing-submit {
  min-width: 120px;
}

.form-container .listing-form__group .dropdown__arrow {
  top: 15px;
  right: 15px;
  width: 12px;
  height: 12px;
  transition: 0.3s;
}

.form-container .listing-form__group .dropdown__arrow.rotate {
  rotate: -180deg;
}

.form-container .listing-form__group .selected-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-container .listing-form__group .selected-status div {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.form-container .listing-form__group .selected-status span {
  font-size: 16px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
}

.form-container .listing-form__group ul {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-top: 4px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
  padding: 16px;
  height: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.form-container .listing-form__group ul.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.form-container .listing-form__group ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding-block: 12px;
}

.form-container .listing-form__group ul li:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.form-container .listing-form__group ul li div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.form-container .listing-form__group ul li div input {
  cursor: pointer;
  width: 24px;
  height: 24px;
}

.form-container .listing-form__group ul li div input:checked {
  accent-color: var(--color-royal-purple);
}

.form-container .listing-form__group ul li div label {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
}

.form-container .listing-form__group ul li .color {
  width: 80px;
  height: 20px;
}

.form-container .listing-form__select {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 20px;
  background-size: 12px;
  cursor: pointer;
}

.form-container__submit-btn {
  display: flex;
  padding-top: 24px;
  gap: 12px;
  border-top: 1px solid var(--color-border);
}

.form-container__submit-btn button {
  border-radius: 100px;
  color: #fff;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.p-page-heading {
  margin-bottom: 1rem;
  font-weight: 500;
  font-size: 24px;
}

.p-page-hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin-bottom: 2rem;
}

.p-page-profile-image {
  margin-bottom: 2rem;
}

.p-page-profile-image img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.p-page-form-row {
  display: flex;
  gap: 2rem;
}

.p-page-form-row.p-page-full-width {
  flex-direction: column;
}

.p-page-form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.p-page-profile-details label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  margin-left: 16px;
}

.p-page-profile-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.p-page-profile-details input, .p-page-profile-details textarea, .p-page-profile-details select {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  padding: 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
  width: 100%;
}

.p-page-popup .p-page-profile-details {
  background-color: #F9FAFA;
  padding: 16px;
}

.p-page-profile-details textarea {
  resize: none;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .p-page-form-row {
    flex-direction: column;
    gap: 1.5rem;
  }
  .p-page-profile-details {
    padding: 1rem;
  }
}
.p-page-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8980392157);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.p-page-popup {
  background: white;
  width: 100%;
  max-width: 1500px;
  border-radius: 12px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.p-page-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 4px 24px;
  border-bottom: 1px solid #e0e0e0;
}

.p-page-popup-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.p-page-popup-content {
  padding-block: 24px;
}

.p-page-profile-image-upload {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 0 2rem;
}

.p-page-profile-image-upload img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-page-image-upload-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
  background-color: rgba(0, 0, 0, 0.5);
}

.p-page-profile-image-upload:hover .p-page-image-upload-icon {
  opacity: 1;
}

.p-page-save-button {
  background: #4F46E5;
  color: white;
  border: none;
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
}

.p-page-save-button:hover {
  background: #4f46e5;
}

.p-page-popup-footer {
  padding-block: 24px 4px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
}

.p-page-required {
  color: #dc2626;
  margin-left: 2px;
}

.p-page-info-box {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  padding: 0.75rem;
  border-radius: 6px;
  background-color: #f8f8f8;
  color: #333;
  width: 100%;
  min-height: 48px;
  display: flex;
}

.p-page-bio-box {
  min-height: 120px;
  white-space: pre-line;
}

/* Password validation styles */
[change-password-popup] {
  max-width: 610px;
}

.p-page-form-group input.valid {
  border-color: #28a745;
  background-color: #f8fff9;
}

.p-page-form-group input.error {
  border-color: #dc3545;
  background-color: #fff8f8;
}

.p-page-form-group .error-msg {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

.p-page-form-group .field-info {
  margin-left: 16px;
  font-size: 12px;
}

.p-page-popup {
  padding-inline: 24px;
  padding-block: 20px;
}

.p-page-popup .p-page-profile-details {
  border-radius: 12px;
}

.single-unit__block--more-prop {
  max-height: 344px;
  overflow-y: auto;
}

.single-unit__block--trans,
.single-unit__block--tenant,
.single-unit__block--person-of-contact {
  max-height: 164px;
  overflow-y: auto;
}

.single-unit__block--listing,
.single-unit__block--details {
  max-height: 265px;
  overflow-y: auto;
}

.calling_notes-header tr th:first-child,
.owner_details-header tr th:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.calling_notes-header tr th:last-child,
.owner_details-header tr th:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.person-of-contact-label-row,
.end-user-label-row,
.more-prop-label-row {
  border-radius: 4px;
}

.single-unit__header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 16px;
  display: flex;
  align-items: flex-end;
  align-items: center;
  gap: 16px;
}

.single-unit__header button, .single-unit__header a {
  padding: 0;
  font-size: 0;
}

.single-unit__header h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  color: var(--color-charcoal-grey);
}

.single-unit__search {
  padding-block: 24px 0;
  border-top: 1px solid #B3BAC1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.single-unit__search-form {
  width: 100%;
  position: relative;
}

.single-unit__search-form::after {
  content: "";
  display: block;
  width: 1px;
  height: 48px;
  background-color: #B3BAC1;
  margin-top: 24px;
  position: absolute;
  bottom: 0;
  right: -12px;
}

.single-unit__search label {
  font-size: 16px;
  color: #17191c;
  margin: 0;
  margin-bottom: 8px;
}

.single-unit__search .search-error {
  color: #e74c3c;
  font-size: 14px;
  margin-top: 8px;
  font-weight: 500;
}

.single-unit__search input {
  border: 1px solid #C7CCD1;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  background-color: #ffffff;
  width: 100%;
}

.single-unit__search-fields {
  display: flex;
  gap: 8px;
}

.single-unit__search button {
  background-color: #4F46E5;
  padding-inline: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.single-unit__search #add-to-listing {
  padding-inline: 20px;
  width: 195px;
  border-radius: 50px;
  height: 50px;
}

.single-unit__search #add-to-listing span {
  flex-shrink: 0;
}

.single-unit__search #delete-unit {
  padding-inline: 20px;
  padding-block: 12px;
  border-radius: 50px;
  height: 50px;
  background-color: #CC0000;
  gap: 8px;
  min-width: 124px;
}

.single-unit__search #add-to-listing {
  gap: 8px;
  width: 185px;
}

.single-unit__name {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 8px;
  border-bottom: 1px solid #B3BAC1;
}

.single-unit__name h3 {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.single-unit__details {
  display: flex;
  gap: 16px;
  padding-block: 16px;
  width: 100%;
}

.single-unit__details + .single-unit__details {
  padding-top: 0;
}

.single-unit__block {
  border: 1px solid #C7CCD1;
  background-color: #F9FAFA;
  padding: 12px;
  border-radius: 12px;
}

.single-unit__block-header {
  display: flex;
  align-content: center;
  gap: 4px;
  margin-bottom: 4px;
}

.single-unit__block-header h3 {
  background: var(--header-color);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding-block: 8px;
  line-height: 1.5;
  text-align: center;
  border-radius: 4px;
  width: 100%;
}

.single-unit__block-header button {
  background: var(--header-color);
  border-radius: 4px;
  height: 40px;
  display: flex;
  align-content: center;
  justify-content: center;
}

.single-unit__block-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid #B3BAC1;
  padding-inline: 0;
}

.single-unit__block-row:last-child {
  border-bottom: none;
}

.single-unit__block-row--header {
  border: none;
  border-radius: 4px;
  margin-bottom: 12px;
  margin-top: 4px;
}

.single-unit__block-row--header.owner_details-header {
  background-color: #E3E3C5;
}

.single-unit__block-row--header.calling_notes-header {
  background-color: #F5E3DC;
}

.single-unit__block-column {
  text-align: left;
  padding-block: 8px;
  padding-inline: 12px;
  font-size: 14px;
}

.single-unit__block-column--status {
  background-color: #C6F0CC;
  width: 100%;
  border-radius: 4px;
  font-weight: 500;
}

.single-unit__block-column .calling-notes-status {
  width: 60px;
  height: 16px;
  background-color: var(--status-background-color);
  border-radius: 4px;
}

.single-unit__block-column.calling_notes-description {
  max-width: 300px;
  white-space: pre-wrap;
  overflow: hidden;
}

.single-unit__block .single-unit__block-row--header .single-unit__block-column {
  font-weight: 500;
}

.single-unit__block--details {
  width: calc(70% - 12px);
  max-height: 265px;
  overflow-y: auto;
}

.single-unit__block--details .single-unit__block-row {
  grid-template-columns: 180px 180px 180px 1fr;
}

.single-unit__block--listing {
  width: calc(30% - 12px);
}

.single-unit__block--listing .single-unit__block-column {
  text-align: center;
}

.single-unit__block--listing .listing-status-label-row {
  background-color: #E6EAE2;
}

.single-unit__block--status {
  width: calc(33.33% - 12px);
}

.single-unit__block--status .single-unit__block-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  border-bottom: 1px solid #C7CCD1;
}

.single-unit__block--status .single-unit__block-row.person-of-contact-label-row {
  background-color: var(--header-2-color);
}

.single-unit__block--status .single-unit__block-row:has(.single-unit__block-column:only-child) {
  grid-template-columns: 1fr;
}

.single-unit__block--status .single-unit__block-column {
  text-align: center;
}

.single-unit__block--trans .single-unit__block-row:last-child {
  border-bottom: none;
}

.single-unit__block--tenant .single-unit__block-row {
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: none;
}

.single-unit__block--tenant .single-unit__block-row.end-user-label-row {
  background-color: #ECE4DF;
}

.single-unit__block--person-of-contact .single-unit__block-row {
  border-bottom: none;
}

.single-unit__block--notes {
  width: 100%;
}

.single-unit__block-comment {
  border: 1px solid #E6E8EA;
  border-radius: 8px;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 12px;
  height: 105px;
  padding: 12px;
  font-size: 14px;
}

.single-unit__block--end .single-unit__block-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: none;
}

.single-unit__block--end .single-unit__block-column {
  border-bottom: 1px solid #C7CCD1;
}

.single-unit__block--end .single-unit__block-column:last-child {
  border-bottom: none;
}

.single-unit__block-row:has(.single-unit__block-column--status) {
  display: grid;
  grid-template-columns: 130px 1fr;
  padding-block: 12px;
}

#owner_details {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#owner_details tbody tr:not(:last-child) {
  border-bottom: 1px solid #B3BAC1;
}

#owner_details td {
  white-space: normal;
}

#owner_details tr td, #owner_details tr th {
  padding: 4px 12px;
}

.single-unit__name-unit-number {
  font-size: 16px;
}

#owner_details_wrapper .dt-layout-table + .dt-layout-row,
#calling_notes_wrapper .dt-layout-table + .dt-layout-row {
  display: none;
}

.page-template-my-listings .content__buttons,
.type-filter {
  background: #F1F2F4;
  border-radius: 50px;
  gap: 0;
}

.page-template-my-listings .content__buttons .button__transparent,
.page-template-my-listings .content__buttons input[type=radio] + label,
.type-filter .button__transparent,
.type-filter input[type=radio] + label {
  background-color: transparent;
  border: none;
  color: #848F9A;
  padding-inline: 44px;
}

.page-template-my-listings .content__buttons .button__transparent span,
.page-template-my-listings .content__buttons input[type=radio] + label span,
.type-filter .button__transparent span,
.type-filter input[type=radio] + label span {
  color: #848F9A;
}

.page-template-my-listings .content__buttons .button__primary,
.page-template-my-listings .content__buttons input[type=radio]:checked + label,
.type-filter .button__primary,
.type-filter input[type=radio]:checked + label {
  color: #fff;
}

.page-template-my-listings .content__buttons .button__primary span,
.page-template-my-listings .content__buttons input[type=radio]:checked + label span,
.type-filter .button__primary span,
.type-filter input[type=radio]:checked + label span {
  color: #fff;
}

.single-unit__details--grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 434px) minmax(0, 412px) 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}

.single-unit__details--grid .single-unit__block {
  width: 100%;
}

.single-unit__details--grid .single-unit__block--trans {
  grid-column: 1/3;
  grid-row: 1/2;
}

.single-unit__details--grid .single-unit__block--more-prop {
  grid-column: 3/-1;
  grid-row: 1/3;
}

.single-unit__details--grid .single-unit__block--more-prop .single-unit__block-row {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  background-color: var(--status-background-color);
}

.single-unit__details--grid .single-unit__block--more-prop .single-unit__block-row.more-prop-label-row {
  background-color: var(--header-2-color);
}

.single-unit__details--grid .single-unit__block--more-prop a {
  color: inherit;
}

.single-unit__details--grid .single-unit__block--tenant {
  grid-column: 1/2;
  grid-row: 2/3;
}

.single-unit__block--database {
  width: 100%;
  margin-top: 16px;
}

.single-unit__block--database .single-unit__block-header h3 {
  background-color: #85193C;
}

.single-unit__block--database .single-unit__block-header button {
  background-color: #85193C;
}

.single-unit div.dt-container div.dt-layout-row {
  margin-block: 0 !important;
}

.listing-status-label-row,
.more-prop-label-row,
.end-user-label-row,
.person-of-contact-label-row {
  font-weight: 500;
}