/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./css/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
/* 3rd party packages */
/* SASS and Global'ish Stuff */
body {
  color: #333;
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: #0D3B66;
}

a:hover {
  text-decoration: none;
}

p,
ul,
ol {
  margin: 0 0 1.65em 0;
}

p,
li {
  line-height: 1.65;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}

.container--narrow {
  max-width: 960px;
}

.section-break {
  border: none;
  border-top: 1px solid #ddd;
  margin: 2.5rem 0;
}

.min-list {
  padding: 0;
  margin: 0;
}

.min-list li {
  list-style: none;
}

.p-top-small {
  padding-top: 1rem;
}

.p-top-large {
  padding-top: 1.6rem;
}

.p-bottom-large {
  padding-bottom: 1.6rem;
}

@media (min-width: 530px) {
  .p-top-large {
    padding-top: 3.5rem;
  }
  .p-bottom-large {
    padding-bottom: 3.5rem;
  }
}
.no-margin {
  margin: 0;
}

.nu {
  text-decoration: none;
}

.nu:hover {
  text-decoration: underline;
}

.t-left {
  text-align: left;
}

.t-right {
  text-align: right;
}

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

.t-small {
  font-size: 0.85rem;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.push-right {
  margin-right: 20px;
}

.container:before,
.container:after,
.group:before,
.group:after {
  content: " ";
  display: table;
}

.container:after,
.group:after {
  clear: both;
}

.hide {
  display: none;
}

/* BEM Blocks */
.remove-favorite {
  display: inline-block;
  transition: all 0.3s;
  color: #999;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 3px;
}

.remove-favorite:hover {
  background-color: #dedede;
}

.page-section {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}
@media (min-width: 530px) {
  .page-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}
.page-section--white {
  background-color: #fff;
}
.page-section--beige {
  background-color: #FAF0CA;
}
.page-section p:last-of-type {
  margin-bottom: 0;
}

.school-logo-text {
  position: relative;
  z-index: 20;
  margin: 0;
  font-size: 1.75rem;
  font-weight: 100;
}

.school-logo-text strong {
  font-weight: 400;
}

.school-logo-text a {
  color: #000000;
  text-decoration: none;
}

.school-logo-text--alt-color a {
  color: #666;
}
.school-logo-text--alt-color a:hover {
  color: #0D3B66;
  text-decoration: underline;
}

.school-logo img {
  max-width: 150px; /* Adjust width as needed */
  height: auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.spinner-loader {
  margin-top: 45px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  border: 0.25rem solid rgba(0, 0, 0, 0.2);
  border-top-color: black;
  animation: spin 1s infinite linear;
}

.c-orange {
  color: #F95738;
}

.c-blue {
  color: #0D3B66;
}

.c-white {
  color: #fff;
}

.c-dark {
  color: #333;
}

.gray {
  color: #999999;
}

.c-yellow {
  color: #ffbd59;
}

.c-black {
  color: #000000;
}

.search-trigger {
  display: none;
  color: #fff;
  position: relative;
  cursor: pointer;
  top: 1px;
  margin-left: 20px;
}
@media (min-width: 960px) {
  .search-trigger {
    display: inline-block;
    top: 6px;
  }
}

.search-trigger:hover {
  opacity: 0.65;
}

.social-icons-list {
  display: flex;
  margin: 0 -8px;
}

.social-icons-list li {
  flex: 1;
  margin: 0 8px;
}

.social-icons-list li a {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 1.25rem;
}

.social-icons-list li a:hover {
  opacity: 0.75;
}

.social-color-facebook {
  background-color: #4862a3;
}

.social-color-twitter {
  background-color: #55acee;
}

.social-color-youtube {
  background-color: #cc1e1f;
}

.social-color-linkedin {
  background-color: #0077b5;
}

.social-color-instagram {
  background-color: #d8226b;
}

.nav-list ul {
  padding: 0;
  margin: 0;
}

.nav-list li {
  list-style: none;
}

.nav-list a {
  font-size: 0.9rem;
  color: #999;
  text-decoration: none;
}

.nav-list a:hover {
  color: #0D3B66;
  text-decoration: underline;
}

.one-half,
.one-third,
.one-fourth,
.one-fifth,
.one-sixth {
  padding-bottom: 1.6rem;
}

@media (min-width: 960px) {
  .row {
    margin-right: -50px;
  }
  .one-half,
  .one-third,
  .two-thirds,
  .one-fourth,
  .one-fifth,
  .one-sixth {
    padding-bottom: 0;
    float: left;
    box-sizing: border-box;
    padding-right: 50px;
  }
  .two-thirds {
    width: 66.66%;
  }
  .one-half {
    width: 50%;
  }
  .one-third {
    width: 33.33%;
  }
  .one-quarter {
    width: 25%;
  }
  .one-fifth {
    width: 20%;
  }
  .one-sixth {
    width: 16.66%;
  }
}
/* Make Top WP Admin Bar Fixed on Mobile */
@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed;
  }
}
/* Seach Form */
.search-form {
  background-color: #dedede;
  padding: 20px;
  text-align: center;
}

.search-form label {
  display: block;
}

.search-form-row {
  display: flex;
}

.search-form .s {
  min-width: 20px;
  flex-basis: auto;
  flex-grow: 1;
  border: none;
  font-family: "Poppins", sans-serif;
  padding: 10px;
}
@media (min-width: 530px) {
  .search-form .s {
    font-size: 1.4rem;
  }
}

.search-submit {
  color: #fff;
  border: none;
  border-radius: 4px;
  outline: none;
  background-color: #0D3B66;
  font-family: "Poppins", sans-serif;
  padding: 0 20px;
  margin-left: 10px;
}

.note-limit-message {
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-out;
  color: #c32929;
  font-weight: bold;
}

.note-limit-message.active {
  visibility: visible;
  opacity: 1;
}

/* Like Box */
.generic-content .like-box {
  float: right;
  font-size: 1rem;
  background-color: #ededed;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  color: red;
  padding: 10px 10px 10px 25px;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 0 30px 30px;
  position: relative;
}

.generic-content .like-box:hover {
  background-color: #dedede;
}

.like-count {
  padding-left: 10px;
}

.like-box .fa-heart-o {
  transition: all 0.35s ease-out;
  position: absolute;
  left: 10px;
}

.like-box .fa-heart {
  left: 10px;
  transition: all 0.4s ease-out;
  position: absolute;
  visibility: hidden;
  transform: scale(0.2);
  opacity: 0;
}

.like-box[data-exists=yes] .fa-heart {
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}

.like-box[data-exists=yes] .fa-heart-o {
  visibility: hidden;
  opacity: 0;
}

/* Customize Login Screen */
body.login {
  background-color: #fff; /* Clean, white background */
  font-family: "Poppins", sans-serif;
}

.login h1 a {
  background-image: url(images/logowhite.f97ffd2f.png); /* Path to your logo file */
  background-size: contain; /* Make the logo fit within the defined area */
  background-repeat: no-repeat; /* Prevent the logo from repeating */
  width: 250px; /* Adjust the width as needed */
  height: 80px; /* Adjust the height as needed */
  display: block;
  margin: 0 auto; /* Center the logo on the page */
  text-indent: -9999px; /* Hide the default WordPress text */
  overflow: hidden;
}

body.login form {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for modern look */
  padding: 20px;
}

body.login form label {
  color: #333;
  font-weight: 500;
}

body.login form input[type=text],
body.login form input[type=password] {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

body.login form input[type=text]:focus,
body.login form input[type=password]:focus {
  border-color: #ffbd59;
  box-shadow: 0 0 5px rgba(255, 189, 89, 0.5);
  outline: none;
}

body.login .button-primary {
  display: inline-block;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
  padding: 12px 24px;
  border: none;
  outline: none;
  background-color: #ffbd59; /* Base yellow */
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

body.login .button-primary:hover {
  background: linear-gradient(#ffbd59, rgb(244.24, 147.1325301205, 0));
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Add hover shadow effect */
}

body.login .button-primary:focus {
  box-shadow: 0 0 8px rgba(255, 189, 89, 0.8); /* Focus ring effect */
}

body.login .privacy-policy-page-link,
body.login #backtoblog a {
  color: #4caf50;
  font-size: 0.9rem;
  text-decoration: none;
}

body.login .privacy-policy-page-link:hover,
body.login #backtoblog a:hover {
  color: #ff4c4c; /* Subtle color change on hover */
}

body.login form .forgetmenot label {
  font-size: 0.9rem;
  color: #333;
}

body.login form .forgetmenot input {
  margin-right: 5px;
}

body.login form .privacy-policy-page-link {
  color: #4caf50;
  font-weight: 600;
  font-size: 0.9rem;
}

body.login form .privacy-policy-page-link:hover {
  color: #ff4c4c;
}

body.login #nav,
body.login #backtoblog {
  text-align: center;
  margin-top: 20px;
}

body.login #nav a,
body.login #backtoblog a {
  color: #4caf50;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
  color: #ff4c4c;
}

.btn {
  display: inline-block;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  font-size: 1.19rem;
  padding: 12px 24px;
  border: none;
  outline: none;
}
.btn--small {
  font-size: 0.88rem;
  padding: 7px 13px;
  font-weight: 300;
}
.btn--with-photo {
  padding-left: 40px;
  position: relative;
}
.btn--orange {
  background-color: #EE964B;
}
.btn--orange:hover {
  background: linear-gradient(#EE964B, rgb(234.75, 108.013803681, 0));
}
.btn--dark-orange {
  background-color: #F95738;
}
.btn--dark-orange:hover {
  background: linear-gradient(#F95738, rgb(198.25, 31.8432642487, 0));
}
.btn--blue {
  background-color: #0D3B66;
}
.btn--blue:hover {
  background: linear-gradient(rgb(17.9117391304, 81.2917391304, 140.5382608696), #0D3B66);
}
.btn--yellow {
  background-color: #ffbd59;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22);
}
.btn--yellow:hover {
  background: linear-gradient(#ffbd59, rgb(244.24, 147.1325301205, 0));
}
.btn--beige {
  background-color: #FAF0CA;
  color: #173f58;
}
.btn--beige:hover {
  background-color: #F4D35E;
}
.btn--gray {
  background-color: #222;
}
.btn--white {
  background-color: #fff;
  color: #173f58;
}
.btn--white:hover {
  background-color: #ddd;
}
.btn--large {
  font-size: 1.3rem;
  padding: 16px 34px;
  border-radius: 7px;
}
@media (min-width: 530px) {
  .btn--large {
    font-size: 1.9rem;
  }
}
.btn--inactive {
  background-color: transparent;
  cursor: default;
  color: #333;
}

/* My Notes */
.edit-note,
.delete-note,
.submit-note {
  font-size: 0.9rem;
  background-color: #eee;
  padding: 8px 16px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 4px;
  cursor: pointer;
}

.submit-note {
  color: #fff;
  border: none;
  background-color: #F95738;
  line-height: 1.65;
}

.submit-note:hover {
  background-color: rgb(221.1658536585, 63.0843169468, 32.8341463415);
}

@media (min-width: 635px) {
  .edit-note,
  .delete-note {
    position: relative;
    top: -12px;
  }
}

.edit-note:hover,
.delete-note:hover {
  background-color: #ddd;
}

.delete-note {
  color: red;
}

.update-note {
  visibility: hidden;
}

.update-note--visible {
  visibility: visible;
}

.note-title-field {
  width: 40%;
  font-size: 1.85rem;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  color: #0D3B66;
  border: 1px solid transparent;
  padding: 7px;
  outline: none;
  position: relative;
  top: 1px;
}
@media (max-width: 400px) {
  .note-title-field {
    width: 100%;
  }
}
@media (min-width: 635px) {
  .note-title-field {
    width: 65%;
    font-size: 3.125rem;
  }
}

.note-body-field {
  color: #333;
  font-family: "Poppins", sans-serif;
  resize: none;
  display: block;
  width: 100%;
  line-height: 1.65;
  font-size: 1.15rem;
  padding: 7px;
  border: 1px solid transparent;
  height: 175px;
  outline: none;
}

.note-active-field {
  border: 1px solid #ddd;
  animation: pulseBorder 0.75s alternate infinite;
}

@keyframes pulseBorder {
  0% {
    border: 1px solid #fff;
  }
  100% {
    border: 1px solid #ccc;
  }
}
/* Create Note */
.create-note {
  background-color: #ddd;
  padding: 20px;
  margin-bottom: 20px;
}

.new-note-title {
  width: 100%;
  padding: 10px;
  font-family: "Poppins", sans-serif;
  border: none;
  margin-bottom: 10px;
  font-size: 1.15rem;
  box-sizing: border-box;
}

.new-note-body {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  padding: 10px;
  font-family: "Poppins", sans-serif;
  border: none;
  margin-bottom: 10px;
  height: 170px;
  font-size: 1.15rem;
  line-height: 1.65;
}

/* Reveal and Hide Fade Transitions */
#my-notes {
  position: relative;
}

#my-notes li {
  transition: all 0.4s ease-out;
  opacity: 1;
}

#my-notes li.fade-out {
  height: 0px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0.5;
}

#my-notes li.fade-in-calc {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
}

.site-header {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px 0;
  /* Animation */
  opacity: 0;
  transform: translateY(-20px); /* Start 20px higher */
  animation: moveDown 0.5s ease forwards;
}
@keyframes moveDown {
  to {
    opacity: 1;
    transform: translateY(0); /* Move to original position */
  }
}
.site-header__avatar {
  position: absolute;
  top: 0;
  left: 0;
}
.site-header__avatar img {
  display: block;
  width: 30px;
  height: 30px;
}
.site-header__menu {
  visibility: hidden;
  position: absolute;
  background-color: rgba(242.45, 242.45, 242.45, 0.95);
  left: 0;
  right: 0;
  top: -20px;
  padding-top: 58px;
  opacity: 0;
  transform: translateY(-20%);
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s ease-out;
  padding-bottom: 20px;
}
.site-header__menu--active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
@media (min-width: 960px) {
  .site-header__menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    position: static;
    background-color: transparent;
    float: right;
    padding-top: 0;
    padding-bottom: 0;
    top: 0;
  }
}
.site-header__search-trigger {
  cursor: pointer;
  color: #ffbd59;
  font-size: 1.2rem;
  position: absolute;
  top: 6px;
  right: 16px;
}
@media (min-width: 530px) {
  .site-header__search-trigger {
    top: 4px;
    font-size: 1.4rem;
  }
}
@media (min-width: 960px) {
  .site-header__search-trigger {
    display: none;
  }
}
.site-header__menu-trigger {
  color: #ffbd59;
  cursor: pointer;
  font-size: 1.2rem;
  position: absolute;
  z-index: 10;
  top: 7px;
  right: 46px;
}
@media (min-width: 530px) {
  .site-header__menu-trigger {
    top: 5px;
    font-size: 1.4rem;
  }
}
@media (min-width: 960px) {
  .site-header__menu-trigger {
    display: none;
  }
}
.site-header__util {
  padding: 0 0 0 20px;
}
@media (min-width: 960px) {
  .site-header__util {
    padding: 0;
    float: right;
  }
}
.site-header__btn {
  margin-right: 20px;
}
@media (min-width: 960px) {
  .site-header__btn {
    float: left;
  }
}
.site-header .btn--with-photo {
  margin-right: 0;
}

.site-footer {
  padding: 2rem 0 3.5rem 0;
  background-color: #000000; /* Solid black background */
  color: #fff; /* Pure white text */
  /* Initial state for animation */
  opacity: 0;
  transform: translateY(20px); /* Start 20px lower */
  animation: moveUp 0.5s ease forwards;
  /* Social Icons Styling */
}
@keyframes moveUp {
  to {
    opacity: 1;
    transform: translateY(0); /* Move to original position */
  }
}
.site-footer p {
  font-size: 0.9rem;
}
.site-footer .headline {
  color: #fff; /* White for headlines */
  margin-bottom: 0.33rem;
}
.site-footer__link {
  color: #fff; /* Pure white for links */
  text-decoration: none;
}
.site-footer__link:hover {
  color: #ffbd59; /* Green on hover for subtle effect */
  text-decoration: underline;
}
.site-footer__inner {
  border-top: 1px solid #444; /* Subtle border for separation */
  padding-top: 3.5rem;
}
.site-footer__logo {
  max-width: 150px; /* Adjust logo size */
  display: block;
  margin: 0 auto;
}
@media (min-width: 960px) {
  .site-footer__logo {
    margin: 0;
  }
}
.site-footer__col-one {
  text-align: center;
}
@media (min-width: 960px) {
  .site-footer__col-one {
    text-align: left;
    width: 33%;
    float: left;
  }
}
.site-footer__col-two {
  text-align: center;
  margin-top: 20px;
}
@media (min-width: 960px) {
  .site-footer__col-two {
    text-align: left;
    width: 33%;
    float: left;
    margin-top: 0;
  }
}
.site-footer__col-four {
  padding-top: 20px;
  width: 85%;
  margin: 0 auto;
  clear: both;
  text-align: center;
}
@media (min-width: 960px) {
  .site-footer__col-four {
    padding-top: 0;
    margin: 0;
    clear: none;
    text-align: left;
    width: 33%;
    float: right;
  }
}
.site-footer__bottom {
  text-align: center;
  padding-top: 2rem;
  font-size: 0.9rem;
  color: #ddd;
}
.site-footer .social-icons-list {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 0;
  margin-top: 30px;
}
.site-footer .social-icons-list li {
  list-style: none;
}
.site-footer .social-icons-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #ddd;
  border-radius: 50%;
  color: #333;
  font-size: 1.2rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.site-footer .social-icons-list a:hover {
  background-color: #ffbd59;
  color: #fff;
}

/* Footer-Integrated Issue Report Button */
.footer-report-button-wrapper {
  text-align: center;
  margin-top: 30px;
}

#issue-report-btn {
  background-color: #ffa500;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 15px;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
  display: inline-block;
}

#issue-report-btn:hover {
  background-color: #e69500;
}

/* Modal Overlay */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Modal Content */
.modal-content {
  background-color: #fff;
  margin: 10% auto; /* Centered */
  padding: 20px;
  border: 2px solid #ffbd59; /* Theme border color */
  width: 90%;
  max-width: 800px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* Close Icon */
.close-modal {
  position: absolute;
  top: 3px;
  right: 15px;
  color: #aaa;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.close-modal:hover {
  color: #000;
}

/* Modal Form Styles */
.modal-content h3 {
  text-align: center;
  color: #333;
  margin-bottom: 15px;
}

.modal-content .form-group {
  margin-bottom: 15px;
}

.modal-content label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  color: #444;
  font-size: 0.95rem;
}

.modal-content input[type=text],
.modal-content input[type=email],
.modal-content textarea,
.modal-content input[type=file],
.modal-content select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
  background-color: #f9f9f9;
}

.modal-content textarea {
  resize: vertical;
}

.modal-content .modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Modal-specific Buttons */
.issue-modal-cancel-btn,
.issue-modal-submit-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.issue-modal-submit-btn {
  background-color: #4caf50;
  color: #fff;
}

.issue-modal-submit-btn:hover {
  background-color: #43a047;
}

.issue-modal-cancel-btn {
  background-color: #f44336;
  color: #fff;
}

.issue-modal-cancel-btn:hover {
  background-color: #d32f2f;
}

/* Modal Notification Styles */
.modal-notification {
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 4px;
  font-size: 0.9rem;
  text-align: center;
}

.modal-notification.success {
  background-color: #4caf50;
  color: #fff;
}

.modal-notification.error {
  background-color: #f44336;
  color: #fff;
}

/* reCAPTCHA Group */
.recaptcha-group {
  display: flex;
  text-align: center;
  justify-content: center;
  margin-bottom: 15px;
}

.main-navigation {
  padding-top: 2px;
}
.main-navigation ul {
  padding: 0;
  margin: 0;
}
.main-navigation ul:before,
.main-navigation ul:after {
  content: " ";
  display: table;
}
.main-navigation ul:after {
  clear: both;
}
@media (min-width: 960px) {
  .main-navigation {
    float: left;
    margin-right: 20px;
  }
}

.main-navigation li {
  list-style: none;
}
@media (min-width: 960px) {
  .main-navigation li {
    float: left;
    padding-left: 20px;
  }
}

.main-navigation a {
  display: block;
  padding: 10px 20px;
  color: #000000;
  text-decoration: none;
  font-weight: 300;
}
@media (min-width: 960px) {
  .main-navigation a {
    display: inline-block;
    padding: 0;
  }
}

.main-navigation .current-menu-item a,
.main-navigation a:hover {
  color: #ffbd59;
}

.page-banner {
  /* Animation */
  opacity: 0;
  transform: translateY(-20px); /* Start 20px higher */
  animation: moveDown 0.5s ease forwards;
  background-color: #ffffff;
  padding: 80px 0 40px 0;
  position: relative;
}
@keyframes moveDown {
  to {
    opacity: 1;
    transform: translateY(0); /* Move to original position */
  }
}
@media (min-width: 530px) {
  .page-banner {
    padding: 130px 0 60px 0;
  }
}
.page-banner__content {
  position: relative;
  max-width: 750px;
  z-index: 2;
}
.page-banner__title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 3.6rem;
  margin: 0 0 1rem 0;
  color: #000000;
}
@media (min-width: 530px) {
  .page-banner__title {
    font-size: 3.6rem;
  }
}
.page-banner__bg-image {
  opacity: 0.33;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.page-banner__intro {
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.3;
  color: #000000;
}
@media (min-width: 530px) {
  .page-banner__intro {
    font-size: 1.65rem;
  }
}
.page-banner__intro p {
  margin: 0;
}

.hero-slider {
  position: relative;
  text-align: center;
  margin: 20px auto;
  width: 90%;
  max-width: 800px;
  /* Animation */
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.5s ease forwards;
}
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.hero-slider__title {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 20px;
  font-weight: bold;
  font-family: "Poppins", sans-serif;
}
@media (max-width: 768px) {
  .hero-slider__title {
    font-size: 2rem; /* Reduce font size for smaller screens */
  }
}
@media (max-width: 480px) {
  .hero-slider__title {
    font-size: 1.8rem; /* Further reduction for phone view */
  }
}

.glide__track {
  position: relative;
  overflow: hidden; /* Ensures only one slide is visible at a time */
  width: 100%;
}

.glide__slides {
  display: flex; /* Ensure slides are aligned horizontally */
  transition: transform 0.8s ease-in-out; /* Smooth sliding effect */
}

.hero-slider__slide {
  flex: 0 0 auto; /* Allow slide to adjust to content dynamically */
  width: 100%; /* Ensure the slide fits within the container width */
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  padding: 40px;
  color: #333;
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
  line-height: 1.8;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box; /* Include padding and border in width calculation */
  word-wrap: break-word; /* Force text to wrap within the container */
}
@media (max-width: 768px) {
  .hero-slider__slide {
    padding: 20px; /* Reduce padding for smaller screens */
    font-size: 1rem; /* Reduce font size */
  }
}
@media (max-width: 480px) {
  .hero-slider__slide {
    padding: 15px; /* Further reduce padding for phone view */
    font-size: 0.9rem; /* Further reduce font size */
  }
}

.hero-slider__author {
  font-size: 1rem;
  margin-top: 20px;
  font-weight: bold;
  color: #555;
}
@media (max-width: 768px) {
  .hero-slider__author {
    font-size: 0.9rem; /* Reduce font size for smaller screens */
  }
}
@media (max-width: 480px) {
  .hero-slider__author {
    font-size: 0.8rem; /* Further reduce font size for phone view */
  }
}

.glide__bullets {
  margin-top: 20px;
  text-align: center;
}
@media (max-width: 480px) {
  .glide__bullets {
    margin-top: 15px; /* Reduce margin for phone view */
  }
}

.glide__bullet {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #ddd;
  border-radius: 50%;
  border: none;
  margin: 0 6px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}
.glide__bullet:hover {
  background-color: #ffbd59;
}
.glide__bullet.glide__bullet--active {
  background-color: #ffbd59;
  transform: scale(1.2); /* Slightly enlarge the active bullet */
}

.search-overlay {
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 110;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.96);
  visibility: hidden;
  opacity: 0;
  transform: scale(1.09);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  box-sizing: border-box;
}
.search-overlay p {
  padding-top: 15px;
}
.search-overlay .event-summary p {
  padding-top: 0;
}
.search-overlay .event-summary {
  margin-bottom: 0;
  margin-top: 20px;
}
body.admin-bar .search-overlay {
  top: 32px;
}
.search-overlay__top {
  background-color: rgba(0, 0, 0, 0.12);
}
.search-overlay__icon {
  margin-right: 10px;
  font-size: 1.8rem;
  color: #F95738;
}
@media (min-width: 960px) {
  .search-overlay__icon {
    font-size: 2.5rem;
  }
}
.search-overlay--active {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.search-overlay__section-title {
  margin: 30px 0 1px 0;
  font-weight: 400;
  color: #0D3B66;
  font-size: 2rem;
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
}
.search-overlay__close {
  position: absolute;
  top: 13px;
  right: 16px;
  font-size: 2.1rem;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fff;
  color: #F95738;
  line-height: 0.7;
}
@media (min-width: 530px) {
  .search-overlay__close {
    top: 18px;
    font-size: 2.1rem;
  }
}
@media (min-width: 960px) {
  .search-overlay__close {
    top: 26px;
    font-size: 2.8rem;
  }
}
.search-overlay__close:hover {
  opacity: 1;
}
.search-overlay .one-half {
  padding-bottom: 0;
}

.search-term {
  width: 75%;
  box-sizing: border-box;
  border: none;
  padding: 15px 0;
  margin: 0;
  background-color: transparent;
  font-size: 1rem;
  font-weight: 300;
  outline: none;
  color: #F95738;
}
@media (min-width: 530px) {
  .search-term {
    font-size: 1.5rem;
  }
}
@media (min-width: 960px) {
  .search-term {
    width: 80%;
    font-size: 3rem;
  }
}

.body-no-scroll {
  overflow: hidden;
}

.professor-cards {
  margin: 0;
  padding: 0;
}
.search-overlay .professor-cards {
  padding-top: 21px;
}

.professor-card {
  position: relative;
  display: inline-block;
  width: 200px;
  margin-right: 15px;
  background-color: #F95738;
  overflow: hidden;
}
.search-overlay .professor-card {
  width: 180px;
}
.professor-card__image {
  display: block;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.professor-card:hover .professor-card__image {
  opacity: 0.8;
  transform: scale(1.1) rotate(4deg);
}
.professor-card__name {
  font-weight: 300;
  font-size: 0.9rem;
  position: absolute;
  bottom: 0;
  color: #fff;
  left: 0;
  right: 0;
  padding: 3px 10px;
  background-color: rgba(240.1295853659, 54.4933902439, 18.9704146341, 0.85);
}
.professor-card:hover .professor-card__name {
  background-color: rgba(214.957195122, 45.8943390623, 13.542804878, 0.85);
}
.professor-card__list-item {
  display: inline-block;
  list-style: none;
}

.headline {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
}
.headline--large {
  font-size: 3.6rem;
}
@media (min-width: 530px) {
  .headline--large {
    font-size: 6.25rem;
  }
}
.headline--large-medium {
  font-size: 5rem;
  margin: 0 0 1rem 0;
}
.headline--medium {
  font-size: 1.9rem;
  margin-bottom: 1.9rem;
  margin-top: 1.9rem;
}
@media (min-width: 530px) {
  .headline--medium {
    font-size: 3.125rem;
  }
}
.headline--small-plus {
  font-family: "Poppins", sans-serif;
  font-size: 1.6875rem;
  font-weight: 400;
  margin-bottom: 1.9rem;
}
.headline--small {
  font-size: 1.2rem;
  margin-bottom: 2.9rem;
}
@media (min-width: 530px) {
  .headline--small {
    font-size: 1.6875rem;
  }
}
.headline--smaller {
  font-size: 1.5rem;
}
.headline--tiny {
  font-family: "Poppins", sans-serif;
  font-size: 1.3875rem;
  margin-bottom: 0.25rem;
}
.headline--post-title a {
  color: #0D3B66;
  text-decoration: none;
}
.headline--post-title a:hover {
  text-decoration: underline;
}

.generic-content p,
.generic-content li {
  font-size: 1.15rem;
}
.generic-content blockquote,
.generic-content blockquote p {
  font-size: 1.5rem;
  font-style: italic;
}
.generic-content h1,
.generic-content h2,
.generic-content h3,
.generic-content h4,
.generic-content h5,
.generic-content h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 1rem;
}
.generic-content h1 {
  font-size: 3.6rem;
}
.generic-content h2 {
  font-size: 3.1rem;
}
.generic-content h3 {
  font-size: 2.6rem;
}
.generic-content h4 {
  font-size: 2.1rem;
}
.generic-content h5 {
  font-size: 1.6rem;
}
.generic-content h6 {
  font-size: 1.15rem;
}
@media (min-width: 530px) {
  .generic-content h1 {
    font-size: 6.25rem;
  }
  .generic-content h2 {
    font-size: 5rem;
  }
  .generic-content h3 {
    font-size: 3.125rem;
  }
  .generic-content h4 {
    font-size: 2.4rem;
  }
  .generic-content h5 {
    font-size: 1.9rem;
  }
  .generic-content h6 {
    font-size: 1.15rem;
  }
}

@media (min-width: 960px) {
  .full-width-split {
    display: flex;
    align-items: flex-start;
  }
}
.full-width-split__one {
  flex: 1;
  padding: 1.6rem 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (min-width: 960px) {
  .full-width-split__one {
    padding: 40px;
  }
}
@media (min-width: 960px) {
  .full-width-split__one .full-width-split__inner {
    float: right;
  }
}
.full-width-split__two {
  flex: 1;
  padding: 1.6rem 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (min-width: 960px) {
  .full-width-split__two {
    padding: 40px;
  }
}
@media (min-width: 1350px) {
  .full-width-split__inner {
    width: 610px;
  }
}
.full-width-split__three {
  flex: 1;
  padding: 1.6rem 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (min-width: 960px) {
  .full-width-split__three {
    padding: 40px;
  }
}
@media (min-width: 1350px) {
  .full-width-split__inner {
    width: 610px;
  }
}

.step-card {
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Animation */
  opacity: 0;
  transform: translateX(20px); /* Start 20px to the right */
  animation: moveLeft 0.5s ease forwards;
}
@keyframes moveLeft {
  to {
    opacity: 1;
    transform: translateX(0); /* Move to original position */
  }
}
.step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.step-icon {
  font-size: 2rem;
  color: #ffa500;
  margin-bottom: 10px;
}

.step-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.step-description {
  font-size: 1rem;
  color: #666;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .full-width-split {
    flex-direction: column;
  }
  .step-card {
    margin-bottom: 20px;
  }
}
.event-summary {
  position: relative;
  padding-left: 107px;
  min-height: 77px;
  padding-bottom: 1px;
  margin-bottom: 20px;
}
.event-summary__title a {
  color: #173f58;
}
.event-summary__date {
  text-decoration: none;
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  padding: 14px 0 11px 0;
  color: #FFF;
  border-radius: 50%;
  background-color: #0D3B66;
  width: 80px;
  line-height: 1;
  transition: opacity 0.33s;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.22);
}
.event-summary__date:hover {
  opacity: 0.75;
}
.event-summary__date--beige {
  background-color: #F4D35E;
}
.event-summary__month {
  display: block;
  font-size: 1.5rem;
  font-weight: 300;
  text-transform: uppercase;
}
.event-summary__day {
  display: block;
  font-size: 2.02rem;
  font-weight: 700;
}

.page-links {
  position: relative;
  z-index: 1;
  background-color: #FAF0CA;
  margin: 0 0 40px 0;
}
@media (min-width: 767px) {
  .page-links {
    margin: 0 0 40px 20px;
    width: 300px;
    float: right;
  }
}
.page-links__title {
  margin: 0;
  font-weight: normal;
  text-align: center;
  padding: 20px 0;
  background-color: #0D3B66;
  color: #fff;
}
.page-links__title a {
  color: #fff;
  text-decoration: none;
  background-color: #0D3B66;
}
.page-links li {
  border-top: 1px solid rgb(243.8448275862, 221.5344827586, 136.7551724138);
}
.page-links li:first-child {
  border-top: none;
}
.page-links__active, .page-links .current_page_item {
  text-align: center;
  background-color: rgb(243.5631724138, 229.6535172414, 176.7968275862);
  color: #0D3B66;
  font-weight: bold;
}
.page-links li a {
  display: block;
  text-align: center;
  padding: 17px 10px;
  text-decoration: none;
  color: #0D3B66;
  transition: all 0.3s;
}
.page-links li a:hover {
  color: rgb(9.5408695652, 43.3008695652, 74.8591304348);
  background-color: rgb(241.5931310345, 226.6209931034, 169.7268689655);
}

.acf-map {
  width: 100%;
  height: 400px;
  border: #ccc solid 1px;
  margin: 20px 0;
}

/* fixes potential theme css conflict */
.acf-map img {
  max-width: inherit !important;
}

.link-list li {
  padding: 1rem 0;
  font-size: 1.5rem;
  border-bottom: 1px dotted #DEDEDE;
}
.search-overlay .link-list li {
  font-size: 1.3rem;
}
.link-list li:last-child {
  border-bottom: none;
}
.link-list a {
  color: #F95738;
}

.metabox {
  background-color: #FAF0CA;
  border-radius: 3px;
  padding: 10px 15px;
  display: inline-block;
  margin-bottom: 30px;
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.07);
}
.metabox--position-up {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
}
.metabox--with-home-link {
  padding: 0;
}
.metabox__main {
  padding: 10px 15px 10px 11px;
}
.metabox p {
  margin: 0;
  font-size: 0.9rem;
  color: rgb(166.6064655172, 143.5412715517, 55.8935344828);
}
.metabox a {
  color: rgb(166.6064655172, 143.5412715517, 55.8935344828);
  text-decoration: none;
  font-weight: bold;
}
.metabox a:hover {
  text-decoration: underline;
}
.metabox .metabox__blog-home-link {
  background-color: #0D3B66;
  color: #fff;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 3px 0 0 3px;
  font-weight: normal;
}
.metabox .metabox__blog-home-link:hover {
  text-decoration: none;
  background-color: rgb(10.1173913043, 45.9173913043, 79.3826086957);
}

.post-item {
  border-bottom: 1px dotted #DEDEDE;
  padding-bottom: 1.7rem;
  margin-bottom: 1.7rem;
}
.post-item:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.cashback-container {
  text-align: center;
  background: linear-gradient(to bottom, #ffffff, #f9f9f9);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 750px;
  margin: 0 auto;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  margin-bottom: 50px;
  padding: 20px;
  /* Animation */
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.5s ease forwards;
}
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.cashback-container__header {
  font-size: 2.2rem;
  margin-bottom: 15px;
  color: #222;
  font-weight: 600;
}
.cashback-container__subheader {
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: #444;
  font-weight: 400;
}
.cashback-container__cashback-amount {
  font-size: 3rem;
  color: #4CAF50;
  font-weight: 700;
  margin-bottom: 10px;
}
.cashback-container__nocashback-amount {
  font-size: 2.5rem;
  color: #FF4C4C;
  font-weight: 700;
  margin-bottom: 10px;
}
.cashback-container__listing-price {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333;
  margin-top: 20px;
}
.cashback-container__slider {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 80%;
  height: 12px;
  background: linear-gradient(to right, #ddd, #ffbd59);
  border-radius: 6px;
  outline: none;
  opacity: 0.9;
  transition: opacity 0.2s, background 0.3s ease-in-out;
}
.cashback-container__slider:hover {
  opacity: 1;
  background: linear-gradient(to right, #ddd, #f8ad3e);
}
.cashback-container__slider::-thumb {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 24px;
  height: 24px;
  background: #ff6b6b;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease, transform 0.2s ease;
}
.cashback-container__slider::-thumb:hover {
  background: #ff8b8b;
  transform: scale(1.2);
}
.cashback-container__dropdown {
  width: 35%;
  padding: 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #000000;
  font-family: "Poppins", sans-serif;
  text-align: center;
  -moz-text-align-last: center;
       text-align-last: center;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.2s ease-in-out;
}
.cashback-container__dropdown:hover {
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.2);
}
.cashback-container__dropdown:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.4);
}

p.explanation {
  font-size: 0.8rem;
  color: #666;
  margin-top: 10px;
  font-style: italic;
}

/* Ensure Select2 styles match your theme */
.select2-container--default .select2-selection--multiple {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  line-height: 1.4; /* Adjust height for multiple lines */
  font-size: inherit;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
  padding: 0.4rem;
  font-size: inherit;
}

.cashback-container__slider {
  /* Optional: match the 80% width and center alignment you had before. */
  width: 80%;
  margin: 0 auto;
  /* noUiSlider main container */
  /* The actual track (under the handle). We give it the same rounding. */
  /* The "filled" portion of the slider to the left of the handle. */
  /* The handle (the knob). */
}
.cashback-container__slider .noUi-target {
  height: 12px;
  background: #ddd;
  border-radius: 6px;
  outline: none;
  opacity: 0.9;
  transition: opacity 0.2s, background 0.3s ease-in-out;
}
.cashback-container__slider .noUi-target:hover {
  opacity: 1;
  background: #eee;
}
.cashback-container__slider .noUi-base {
  border-radius: 6px;
}
.cashback-container__slider .noUi-connect {
  background: linear-gradient(to right, #ddd, #ffbd59);
  border-radius: 6px;
}
.cashback-container__slider .noUi-handle {
  width: 24px;
  height: 24px;
  background: #333;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}
.cashback-container__slider .noUi-handle:hover {
  background: #5c5c5c;
  transform: scale(1.2);
}

.member-registration {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #fff;
}
.member-registration .registration-container {
  background: #fff;
  padding: 2rem;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  margin-top: 6rem;
  /* Animation */
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.5s ease forwards;
}
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.member-registration .registration-container .field-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
}
.member-registration .registration-container h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}
.member-registration .registration-container .form-group {
  text-align: center;
  margin-top: 1.5rem;
}
.member-registration .registration-container .form-group a {
  color: #ffbd59;
  text-decoration: none;
}
.member-registration .registration-container .form-group a:hover {
  text-decoration: underline;
  color: #e6ac50;
}
.member-registration .registration-container form .step {
  display: none;
  flex-direction: column;
  /* Additional styling for the reCAPTCHA checkbox group */
  /* Cashback and Commission Sections */
}
.member-registration .registration-container form .step label {
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #444;
}
.member-registration .registration-container form .step input,
.member-registration .registration-container form .step select {
  margin-bottom: 1.2rem;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}
.member-registration .registration-container form .step input:focus,
.member-registration .registration-container form .step select:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0px 0px 5px rgba(255, 189, 89, 0.5);
}
.member-registration .registration-container form .step .recaptcha-group {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.member-registration .registration-container form .step .cashback-section,
.member-registration .registration-container form .step .commission-section {
  display: block;
  padding: 1rem;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.member-registration .registration-container form .step .cashback-section label,
.member-registration .registration-container form .step .commission-section label {
  font-weight: bold;
  color: #333;
}
.member-registration .registration-container form .step .cashback-section .sub-fields,
.member-registration .registration-container form .step .commission-section .sub-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.member-registration .registration-container form .step .cashback-section .sub-fields .form-subgroup,
.member-registration .registration-container form .step .commission-section .sub-fields .form-subgroup {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.member-registration .registration-container form .step .cashback-section .sub-fields .form-subgroup label,
.member-registration .registration-container form .step .commission-section .sub-fields .form-subgroup label {
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #444;
}
.member-registration .registration-container form .step .cashback-section .sub-fields .form-subgroup select,
.member-registration .registration-container form .step .commission-section .sub-fields .form-subgroup select {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #f9f9f9;
  transition: border-color 0.3s;
}
.member-registration .registration-container form .step .cashback-section .sub-fields .form-subgroup select:focus,
.member-registration .registration-container form .step .commission-section .sub-fields .form-subgroup select:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0 0 5px rgba(255, 189, 89, 0.5);
  background-color: #fff;
}
.member-registration .registration-container form .step .cashback-section .sub-fields .form-subgroup select:disabled,
.member-registration .registration-container form .step .commission-section .sub-fields .form-subgroup select:disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
}
.member-registration .registration-container form .step .cashback-section .field-buttons,
.member-registration .registration-container form .step .commission-section .field-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.member-registration .registration-container form .step .cashback-section .field-buttons button,
.member-registration .registration-container form .step .commission-section .field-buttons button {
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #ddd;
  color: #444;
  transition: background-color 0.3s ease;
}
.member-registration .registration-container form .step .cashback-section .field-buttons button:hover,
.member-registration .registration-container form .step .commission-section .field-buttons button:hover {
  background-color: #ccc;
}
.member-registration .registration-container form .step .cashback-section .field-buttons button.edit-btn,
.member-registration .registration-container form .step .commission-section .field-buttons button.edit-btn {
  background-color: #ffa500;
  color: #fff;
}
.member-registration .registration-container form .step .cashback-section .field-buttons button.edit-btn:hover,
.member-registration .registration-container form .step .commission-section .field-buttons button.edit-btn:hover {
  background-color: #e69500;
}
.member-registration .registration-container form .step .cashback-section .field-buttons button.save-btn,
.member-registration .registration-container form .step .commission-section .field-buttons button.save-btn {
  background-color: #4caf50;
  color: #fff;
}
.member-registration .registration-container form .step .cashback-section .field-buttons button.save-btn:hover,
.member-registration .registration-container form .step .commission-section .field-buttons button.save-btn:hover {
  background-color: #43a047;
}
.member-registration .registration-container form .step .cashback-section .field-buttons button.cancel-btn,
.member-registration .registration-container form .step .commission-section .field-buttons button.cancel-btn {
  background-color: #f44336;
  color: #fff;
}
.member-registration .registration-container form .step .cashback-section .field-buttons button.cancel-btn:hover,
.member-registration .registration-container form .step .commission-section .field-buttons button.cancel-btn:hover {
  background-color: #d32f2f;
}
.member-registration .registration-container form .step .cashback-section .field-buttons button.hidden,
.member-registration .registration-container form .step .commission-section .field-buttons button.hidden {
  display: none;
}
.member-registration .registration-container form .step .cashback-section .field-message,
.member-registration .registration-container form .step .commission-section .field-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
}
.member-registration .registration-container form .step .matched-agents-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #444;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  margin-top: 1.5rem;
}
.member-registration .registration-container form .step .matched-agents-count span#agent-count {
  color: #ffbd59;
  font-weight: bold;
  margin-left: 0.5rem;
}
.member-registration .registration-container form .step .hidden {
  display: none;
}
.member-registration .registration-container form .step .password-input-group {
  position: relative;
  margin-bottom: 1rem;
  width: 100%;
}
.member-registration .registration-container form .step .password-input-group input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.5rem;
}
.member-registration .registration-container form .step .password-input-group .toggle-visibility-btn {
  position: absolute;
  right: 0.5rem;
  top: 35%;
  transform: translateY(-50%);
  background: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.member-registration .registration-container form .step .password-input-group .toggle-visibility-btn:hover {
  background-color: #ffffff;
}
.member-registration .registration-container form .step .section-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 1.5rem 0 0.5rem;
  color: #444;
}
.member-registration .registration-container form .step .input-row {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on narrow screens */
  justify-content: space-between;
  gap: 1rem; /* Adds spacing between the two dropdowns */
  margin-bottom: 1.5rem; /* Adds spacing between rows */
}
.member-registration .registration-container form .step .input-group {
  flex: 1; /* Ensures both dropdowns share equal width */
  min-width: 75px; /* Ensures minimum width before wrapping */
}
.member-registration .registration-container form .step .button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
.member-registration .registration-container form .step .button-group button {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.member-registration .registration-container form .step .button-group button.btn-next {
  background: #ffbd59;
  color: white;
}
.member-registration .registration-container form .step .button-group button.btn-next:hover {
  background: #e6ac50;
}
.member-registration .registration-container form .step .button-group button.btn-previous {
  background-color: #ddd;
  color: #444;
}
.member-registration .registration-container form .step .button-group button.btn-previous:hover {
  background-color: #ccc;
}
.member-registration .registration-container form .step .button-group button.btn-submit {
  background: #4caf50;
  color: white;
}
.member-registration .registration-container form .step .button-group button.btn-submit:hover {
  background: #43a047;
}
.member-registration .registration-container form .active {
  display: flex !important;
}

/* Select2 Dropdown Styling */
.select2-container {
  width: 100% !important; /* Ensure dropdown matches input width */
  margin-bottom: 1.2rem;
}

.select2-container .select2-selection--single {
  padding: 0.8rem; /* Match input padding */
  border: 1px solid #ddd; /* Match input border */
  border-radius: 8px; /* Match input border radius */
  box-sizing: border-box; /* Ensure padding and border are included in height */
  display: block !important; /* Ensure full width */
  align-items: center; /* Center content vertically */
  height: auto; /* Let height adjust naturally */
  font-size: 1rem; /* Match input font size */
  transition: border-color 0.3s;
}
.select2-container .select2-selection--single:focus-within {
  border-color: #ffbd59; /* Match focus color */
  outline: none;
  box-shadow: 0px 0px 5px rgba(255, 189, 89, 0.5);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  text-align: center !important; /* Center text */
  padding: 0; /* Reset padding inside the rendered text */
  margin: 0; /* Remove unwanted margins */
  line-height: normal; /* Ensure alignment matches */
  font-size: inherit; /* Inherit font size from the container */
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%; /* Ensure arrow matches the container */
  display: flex;
  align-items: center; /* Center arrow vertically */
  padding: 0 8px; /* Adjust arrow spacing */
}

/* Customize Select2 Dropdown Options */
.select2-container--default .select2-results__option {
  padding: 0.6rem 1rem;
  font-size: 1rem; /* Match input font size */
  color: #444;
  background-color: #ffffff; /* Background for options */
  text-align: center; /* Center text */
}

.select2-container--default .select2-results__option--highlighted {
  background-color: #ffbd59 !important; /* Highlighted option background */
  color: #ffffff !important; /* Highlighted option text */
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  color: #ffbd59; /* Match the theme color */
  font-size: 20px; /* Adjust font size */
  margin-right: 20px; /* Space from the right edge */
  cursor: pointer;
  transition: color 0.3s ease;
  position: absolute; /* Absolute positioning relative to the container */
  right: 10px; /* Position it towards the right inside the box */
  top: 50%; /* Center it vertically */
  transform: translateY(-50%); /* Ensure perfect vertical centering */
  z-index: 2; /* Ensure it appears above the text */
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: #e6ac50; /* Hover color */
}

/* Adjust the multi-select search input */
.select2-container--default .select2-selection--multiple {
  padding: 0.6rem; /* Adjust padding to match input fields */
  border: 1px solid #ddd; /* Match other fields' borders */
  border-radius: 8px; /* Match input border radius */
  box-sizing: border-box;
  display: flex;
  align-items: center; /* Vertically align */
  font-size: 1rem; /* Match input font size */
  transition: border-color 0.3s ease-in-out;
  background-color: #fff; /* Ensure background matches theme */
}

.select2-container--default .select2-selection--multiple:focus-within {
  border-color: #ffbd59; /* Focus color for consistency */
  outline: none;
  box-shadow: 0px 0px 5px rgba(255, 189, 89, 0.5);
}

/* Ensure tags have proper padding and alignment */
.select2-container--default .select2-selection__choice {
  color: #444; /* Text color of selected options */
  background-color: #ffbd59; /* Match the theme color */
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  margin: 0.2rem; /* Spacing between selected tags */
}

/* Adjust the search input field inside multi-select */
.select2-container--default .select2-search--inline .select2-search__field {
  width: auto !important; /* Ensure the search input dynamically adjusts */
  min-width: 250px; /* Set a minimum width to avoid being too small */
  border: none; /* Remove border for consistency */
  margin-left: 0.4rem; /* Space between tags and input */
  padding: 0; /* Remove padding for a clean look */
  font-size: 1rem; /* Match input font size */
  line-height: normal; /* Align with other inputs */
  color: #444; /* Match text color */
}

/* Style the dropdown menu options */
.select2-container--default .select2-results__option {
  padding: 0.6rem 1rem;
  font-size: 1rem;
  color: #444;
  background-color: #fff; /* Background for dropdown */
}

/* Highlighted option styling */
.select2-container--default .select2-results__option--highlighted {
  background-color: #ffbd59 !important; /* Highlighted background */
  color: #fff !important; /* Highlighted text */
}

.error-message {
  color: red;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  display: block;
}

.member-login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #fff;
}
.member-login .login-container {
  background: #fff;
  padding: 2rem;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  max-width: 400px;
  width: 100%;
  margin-top: 6rem;
  /* Animation */
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.5s ease forwards;
}
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.member-login .login-container h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}
.member-login .login-container form {
  /* Single .recaptcha-group used by both login & forgot states */
}
.member-login .login-container form .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.2rem;
  /* Password group to hide/show during forgot mode */
}
.member-login .login-container form .form-group label {
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #444;
}
.member-login .login-container form .form-group input {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}
.member-login .login-container form .form-group input:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0px 0px 5px rgba(255, 189, 89, 0.5);
}
.member-login .login-container form .form-group.password-group .password-input-group {
  position: relative;
  margin-bottom: 1rem;
  width: 100%;
}
.member-login .login-container form .form-group.password-group .password-input-group input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.5rem;
}
.member-login .login-container form .form-group.password-group .password-input-group .toggle-visibility-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.member-login .login-container form .form-group.password-group .password-input-group .toggle-visibility-btn:hover {
  background-color: #ffffff;
}
.member-login .login-container form .recaptcha-group {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.member-login .login-container form .remember-me-group {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.member-login .login-container form .remember-me-group label {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: #444;
  cursor: pointer;
}
.member-login .login-container form .remember-me-group label input {
  margin-right: 0.5rem;
  transform: scale(1.1);
}
.member-login .login-container form .field-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
}
.member-login .login-container form .button-group {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.member-login .login-container form .button-group button {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: #4caf50;
  color: white;
}
.member-login .login-container form .button-group button:hover {
  background: #43a047;
}
.member-login .login-container form .text-center {
  text-align: center;
  margin-top: 1rem;
}
.member-login .login-container form .text-center a {
  color: #ffbd59;
  text-decoration: none;
}
.member-login .login-container form .text-center a:hover {
  text-decoration: underline;
}
.member-login .hidden {
  display: none !important;
}

.login-signup {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #ffffff;
  padding: 2rem;
  /* MEDIA QUERIES */
}
.login-signup .container {
  background-color: #ffffff;
  padding: 2.5rem;
  border-radius: 15px;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
  max-width: 700px;
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  /* Animation */
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.5s ease forwards;
  /* BUTTON GROUP */
}
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.login-signup .container h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #333;
  font-weight: 600;
}
.login-signup .container .description {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #666;
}
.login-signup .container .button-group {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap; /* Let buttons wrap if screen becomes too narrow */
}
.login-signup .container .button-group .btn-option {
  text-decoration: none;
  border: none;
  border-radius: 12px;
  width: 220px; /* Default width on larger screens */
  height: 220px; /* Keep them initially square */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  transform: translateY(0);
  color: #fff;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.login-signup .container .button-group .btn-option .btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login-signup .container .button-group .btn-option .btn-content .icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease;
}
.login-signup .container .button-group .btn-option .btn-content .text {
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.login-signup .container .button-group .btn-option:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}
.login-signup .container .button-group .btn-option.member {
  background: #ffbd59;
}
.login-signup .container .button-group .btn-option.member:hover {
  background: #e6ac50;
}
.login-signup .container .button-group .btn-option.realtor {
  background: #4caf50;
}
.login-signup .container .button-group .btn-option.realtor:hover {
  background: #43a047;
}
@media (max-width: 768px) {
  .login-signup .container .button-group .btn-option {
    /* Let buttons scale dynamically instead of stacking */
    width: 40vw;
    height: 40vw; /* Keep them approximately square */
    max-width: 120px;
    min-width: 100px; /* Prevent them from getting too tiny */
  }
}

.member-dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  background-color: #ffffff;
  padding-top: 100px;
  padding-bottom: 100px;
  /* SIN Input Field */
  /* Save & Edit Buttons */
}
.member-dashboard h1 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
  width: 100%; /* Ensure h2 spans the full width */
  margin: 0 auto;
}
.member-dashboard h1 span {
  color: #ffbd59;
}
.member-dashboard .dashboard-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  max-width: 900px;
  padding-top: 50px;
  justify-content: center;
}
.member-dashboard .dashboard-wrapper .dashboard-container, .member-dashboard .dashboard-wrapper .matching-results-container, .member-dashboard .dashboard-wrapper .other-info-container {
  background: #fff;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  max-width: 900px;
  width: 100%;
  /* Animation */
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.5s ease forwards;
  /* OTP Verification Block Styles */
  /* Styles for the Cancel Transaction and Complete Transaction forms */
  /* For the radio buttons and the "Others" field */
  /* For the file upload field in the complete form */
  /* Button styling (matches your dashboard buttons) */
  /* Submit buttons */
  /* Cancel buttons */
}
.member-dashboard .dashboard-wrapper .dashboard-container h2, .member-dashboard .dashboard-wrapper .matching-results-container h2, .member-dashboard .dashboard-wrapper .other-info-container h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}
.member-dashboard .dashboard-wrapper .dashboard-container h2 span, .member-dashboard .dashboard-wrapper .matching-results-container h2 span, .member-dashboard .dashboard-wrapper .other-info-container h2 span {
  color: #ffbd59;
}
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block {
  background-color: #f9f9f9; /* Matches other card-like sections */
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
  /* Hide arrows for number input in Chrome, Safari, Edge, and Opera */
  /* Hide arrows for number input in Firefox */
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block p, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block p, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block p {
  margin-bottom: 10px;
  color: #333;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .otp-input, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .otp-input, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .otp-input {
  width: 100%;
  max-width: 200px; /* Adjust as desired for your layout */
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
  background-color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .otp-input:focus, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .otp-input:focus, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .otp-input:focus {
  border-color: #ffbd59; /* Matches your highlight color */
  outline: none;
  box-shadow: 0 0 5px rgba(255, 189, 89, 0.5);
  background-color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons {
  display: flex;
  gap: 10px; /* Matches your existing button spacing */
  margin-top: 10px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  /* Inherit existing .action-buttons styling, 
      but you can customize each button color if desired. */
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn {
  background-color: #4caf50; /* green */
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn:hover {
  background-color: #43a047;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn-submit, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn-submit, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn-submit {
  background-color: #ffbd59; /* or #4caf50 if you want them identical */
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn-submit:hover, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn-submit:hover, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn-submit:hover {
  background-color: #f2a025;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn {
  background-color: #4caf50; /* green */
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn:hover {
  background-color: #43a047;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn-submit, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn-submit, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn-submit {
  background-color: #ffbd59; /* or #4caf50 if you want them identical */
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn-submit:hover, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn-submit:hover, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn-submit:hover {
  background-color: #f2a025;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block #otpEmailInput::-webkit-outer-spin-button,
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block #otpEmailInput::-webkit-inner-spin-button, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block #otpEmailInput::-webkit-outer-spin-button,
.member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block #otpEmailInput::-webkit-inner-spin-button, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block #otpEmailInput::-webkit-outer-spin-button,
.member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block #otpEmailInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.member-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block #otpEmailInput, .member-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block #otpEmailInput, .member-dashboard .dashboard-wrapper .other-info-container .otp-verification-block #otpEmailInput {
  -moz-appearance: textfield;
}
.member-dashboard .dashboard-wrapper .dashboard-container .agent-summary-box, .member-dashboard .dashboard-wrapper .matching-results-container .agent-summary-box, .member-dashboard .dashboard-wrapper .other-info-container .agent-summary-box {
  background-color: #f8f9fa; /* Light background for contrast */
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-top: 15px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .summary-number, .member-dashboard .dashboard-wrapper .matching-results-container .summary-number, .member-dashboard .dashboard-wrapper .other-info-container .summary-number {
  color: #28a745; /* Your website's green theme color */
  font-weight: bold;
  font-size: 1.2em;
}
.member-dashboard .dashboard-wrapper .dashboard-container .error-message, .member-dashboard .dashboard-wrapper .matching-results-container .error-message, .member-dashboard .dashboard-wrapper .other-info-container .error-message {
  color: red;
  font-weight: bold;
  text-align: center;
}
.member-dashboard .dashboard-wrapper .dashboard-container .matched-agents-count, .member-dashboard .dashboard-wrapper .matching-results-container .matched-agents-count, .member-dashboard .dashboard-wrapper .other-info-container .matched-agents-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #444;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}
.member-dashboard .dashboard-wrapper .dashboard-container .matched-agents-count span#agent-count, .member-dashboard .dashboard-wrapper .matching-results-container .matched-agents-count span#agent-count, .member-dashboard .dashboard-wrapper .other-info-container .matched-agents-count span#agent-count {
  color: #ffbd59;
  font-weight: bold;
  margin-left: 0.5rem;
}
.member-dashboard .dashboard-wrapper .dashboard-container .agent-card, .member-dashboard .dashboard-wrapper .matching-results-container .agent-card, .member-dashboard .dashboard-wrapper .other-info-container .agent-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
}
.member-dashboard .dashboard-wrapper .dashboard-container .agent-card h3, .member-dashboard .dashboard-wrapper .matching-results-container .agent-card h3, .member-dashboard .dashboard-wrapper .other-info-container .agent-card h3 {
  margin: 0 0 10px;
  font-size: 1.2em;
}
.member-dashboard .dashboard-wrapper .dashboard-container .status-card, .member-dashboard .dashboard-wrapper .matching-results-container .status-card, .member-dashboard .dashboard-wrapper .other-info-container .status-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
}
.member-dashboard .dashboard-wrapper .dashboard-container .status-card h3, .member-dashboard .dashboard-wrapper .matching-results-container .status-card h3, .member-dashboard .dashboard-wrapper .other-info-container .status-card h3 {
  margin: 0 0 10px;
  font-size: 1.2em;
}
.member-dashboard .dashboard-wrapper .dashboard-container .dashboard-card, .member-dashboard .dashboard-wrapper .matching-results-container .dashboard-card, .member-dashboard .dashboard-wrapper .other-info-container .dashboard-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
}
.member-dashboard .dashboard-wrapper .dashboard-container .dashboard-card h3, .member-dashboard .dashboard-wrapper .matching-results-container .dashboard-card h3, .member-dashboard .dashboard-wrapper .other-info-container .dashboard-card h3 {
  margin: 0 0 10px;
  font-size: 1.2em;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons button, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons button, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .accept-btn, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .accept-btn, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .accept-btn {
  background-color: #4caf50;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .accept-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .accept-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .accept-btn:hover {
  background-color: #43a047;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .completetrx-btn, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .completetrx-btn, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .completetrx-btn {
  background-color: #4caf50;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .completetrx-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .completetrx-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .completetrx-btn:hover {
  background-color: #43a047;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .reject-btn, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .reject-btn, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .reject-btn {
  background-color: #f44336;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .reject-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .reject-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .reject-btn:hover {
  background-color: #d32f2f;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .canceltrx-btn, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .canceltrx-btn, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .canceltrx-btn {
  background-color: #f44336;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .canceltrx-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .canceltrx-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .canceltrx-btn:hover {
  background-color: #d32f2f;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .email-verif-btn, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .email-verif-btn, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .email-verif-btn {
  background-color: #4caf50;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .email-verif-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .email-verif-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .email-verif-btn:hover {
  background-color: #43a047;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .phone-verif-btn, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .phone-verif-btn, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .phone-verif-btn {
  background-color: #4caf50;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .phone-verif-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .phone-verif-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .phone-verif-btn:hover {
  background-color: #43a047;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .name-verif-btn, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .name-verif-btn, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .name-verif-btn {
  background-color: #4caf50;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .action-buttons .name-verif-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container .action-buttons .name-verif-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container .action-buttons .name-verif-btn:hover {
  background-color: #43a047;
}
.member-dashboard .dashboard-wrapper .dashboard-container .cancel-form,
.member-dashboard .dashboard-wrapper .dashboard-container .complete-form, .member-dashboard .dashboard-wrapper .matching-results-container .cancel-form,
.member-dashboard .dashboard-wrapper .matching-results-container .complete-form, .member-dashboard .dashboard-wrapper .other-info-container .cancel-form,
.member-dashboard .dashboard-wrapper .other-info-container .complete-form {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: "Roboto", sans-serif;
}
.member-dashboard .dashboard-wrapper .dashboard-container .cancel-form p,
.member-dashboard .dashboard-wrapper .dashboard-container .complete-form p, .member-dashboard .dashboard-wrapper .matching-results-container .cancel-form p,
.member-dashboard .dashboard-wrapper .matching-results-container .complete-form p, .member-dashboard .dashboard-wrapper .other-info-container .cancel-form p,
.member-dashboard .dashboard-wrapper .other-info-container .complete-form p {
  font-size: 1rem;
  color: #333;
  margin-bottom: 10px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .cancel-form label,
.member-dashboard .dashboard-wrapper .dashboard-container .complete-form label, .member-dashboard .dashboard-wrapper .matching-results-container .cancel-form label,
.member-dashboard .dashboard-wrapper .matching-results-container .complete-form label, .member-dashboard .dashboard-wrapper .other-info-container .cancel-form label,
.member-dashboard .dashboard-wrapper .other-info-container .complete-form label {
  font-weight: bold;
  color: #444;
  display: block;
  margin-bottom: 5px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .cancel-form input[type=radio], .member-dashboard .dashboard-wrapper .matching-results-container .cancel-form input[type=radio], .member-dashboard .dashboard-wrapper .other-info-container .cancel-form input[type=radio] {
  margin-right: 5px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .cancel-form .other-reason, .member-dashboard .dashboard-wrapper .matching-results-container .cancel-form .other-reason, .member-dashboard .dashboard-wrapper .other-info-container .cancel-form .other-reason {
  margin-top: 5px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .cancel-form .other-reason input.custom-reason, .member-dashboard .dashboard-wrapper .matching-results-container .cancel-form .other-reason input.custom-reason, .member-dashboard .dashboard-wrapper .other-info-container .cancel-form .other-reason input.custom-reason {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #f9f9f9;
  margin-bottom: 10px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .complete-form input.transaction-pdf, .member-dashboard .dashboard-wrapper .matching-results-container .complete-form input.transaction-pdf, .member-dashboard .dashboard-wrapper .other-info-container .complete-form input.transaction-pdf {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #f9f9f9;
  margin-bottom: 10px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .cancel-form button,
.member-dashboard .dashboard-wrapper .dashboard-container .complete-form button, .member-dashboard .dashboard-wrapper .matching-results-container .cancel-form button,
.member-dashboard .dashboard-wrapper .matching-results-container .complete-form button, .member-dashboard .dashboard-wrapper .other-info-container .cancel-form button,
.member-dashboard .dashboard-wrapper .other-info-container .complete-form button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
  margin-right: 5px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .cancel-form button.cancel-form-submit,
.member-dashboard .dashboard-wrapper .dashboard-container .complete-form button.complete-form-submit, .member-dashboard .dashboard-wrapper .matching-results-container .cancel-form button.cancel-form-submit,
.member-dashboard .dashboard-wrapper .matching-results-container .complete-form button.complete-form-submit, .member-dashboard .dashboard-wrapper .other-info-container .cancel-form button.cancel-form-submit,
.member-dashboard .dashboard-wrapper .other-info-container .complete-form button.complete-form-submit {
  background-color: #4caf50;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .cancel-form button.cancel-form-submit:hover,
.member-dashboard .dashboard-wrapper .dashboard-container .complete-form button.complete-form-submit:hover, .member-dashboard .dashboard-wrapper .matching-results-container .cancel-form button.cancel-form-submit:hover,
.member-dashboard .dashboard-wrapper .matching-results-container .complete-form button.complete-form-submit:hover, .member-dashboard .dashboard-wrapper .other-info-container .cancel-form button.cancel-form-submit:hover,
.member-dashboard .dashboard-wrapper .other-info-container .complete-form button.complete-form-submit:hover {
  background-color: #43a047;
}
.member-dashboard .dashboard-wrapper .dashboard-container .cancel-form button.cancel-form-cancel,
.member-dashboard .dashboard-wrapper .dashboard-container .complete-form button.complete-form-cancel, .member-dashboard .dashboard-wrapper .matching-results-container .cancel-form button.cancel-form-cancel,
.member-dashboard .dashboard-wrapper .matching-results-container .complete-form button.complete-form-cancel, .member-dashboard .dashboard-wrapper .other-info-container .cancel-form button.cancel-form-cancel,
.member-dashboard .dashboard-wrapper .other-info-container .complete-form button.complete-form-cancel {
  background-color: #f44336;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .cancel-form button.cancel-form-cancel:hover,
.member-dashboard .dashboard-wrapper .dashboard-container .complete-form button.complete-form-cancel:hover, .member-dashboard .dashboard-wrapper .matching-results-container .cancel-form button.cancel-form-cancel:hover,
.member-dashboard .dashboard-wrapper .matching-results-container .complete-form button.complete-form-cancel:hover, .member-dashboard .dashboard-wrapper .other-info-container .cancel-form button.cancel-form-cancel:hover,
.member-dashboard .dashboard-wrapper .other-info-container .complete-form button.complete-form-cancel:hover {
  background-color: #d32f2f;
}
.member-dashboard .dashboard-wrapper .dashboard-container .rating-section, .member-dashboard .dashboard-wrapper .matching-results-container .rating-section, .member-dashboard .dashboard-wrapper .other-info-container .rating-section {
  margin-top: 15px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .rating-section p, .member-dashboard .dashboard-wrapper .matching-results-container .rating-section p, .member-dashboard .dashboard-wrapper .other-info-container .rating-section p {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .rating-section .star-rating, .member-dashboard .dashboard-wrapper .matching-results-container .rating-section .star-rating, .member-dashboard .dashboard-wrapper .other-info-container .rating-section .star-rating {
  display: flex;
  justify-content: left;
  gap: 5px;
  margin-bottom: 30px;
  /* When hovering, add the effect to this star and those before it */
  /* When a star is "rated", it stays lit */
}
.member-dashboard .dashboard-wrapper .dashboard-container .rating-section .star-rating .star, .member-dashboard .dashboard-wrapper .matching-results-container .rating-section .star-rating .star, .member-dashboard .dashboard-wrapper .other-info-container .rating-section .star-rating .star {
  font-size: 1.5rem;
  color: #ccc;
  cursor: pointer;
  transition: transform 0.3s ease, color 0.3s ease;
}
.member-dashboard .dashboard-wrapper .dashboard-container .rating-section .star-rating .star.hovered, .member-dashboard .dashboard-wrapper .matching-results-container .rating-section .star-rating .star.hovered, .member-dashboard .dashboard-wrapper .other-info-container .rating-section .star-rating .star.hovered {
  transform: scale(1.1);
  color: #ffbd59;
}
.member-dashboard .dashboard-wrapper .dashboard-container .rating-section .star-rating .star.rated, .member-dashboard .dashboard-wrapper .matching-results-container .rating-section .star-rating .star.rated, .member-dashboard .dashboard-wrapper .other-info-container .rating-section .star-rating .star.rated {
  color: #ffbd59;
  transform: scale(1.1);
}
.member-dashboard .dashboard-wrapper .dashboard-container .rating-section .rating-notification, .member-dashboard .dashboard-wrapper .matching-results-container .rating-section .rating-notification, .member-dashboard .dashboard-wrapper .other-info-container .rating-section .rating-notification {
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 4px;
  font-size: 0.9rem;
  text-align: center;
}
.member-dashboard .dashboard-wrapper .dashboard-container .rating-section .rating-notification.notification.success, .member-dashboard .dashboard-wrapper .matching-results-container .rating-section .rating-notification.notification.success, .member-dashboard .dashboard-wrapper .other-info-container .rating-section .rating-notification.notification.success {
  background-color: #4caf50;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .rating-section .rating-notification.notification.error, .member-dashboard .dashboard-wrapper .matching-results-container .rating-section .rating-notification.notification.error, .member-dashboard .dashboard-wrapper .other-info-container .rating-section .rating-notification.notification.error {
  background-color: #f44336;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .agent-review, .member-dashboard .dashboard-wrapper .matching-results-container .agent-review, .member-dashboard .dashboard-wrapper .other-info-container .agent-review {
  margin-top: 10px;
  border-top: 1px dashed #ccc;
  padding-top: 10px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .agent-review .review-display, .member-dashboard .dashboard-wrapper .matching-results-container .agent-review .review-display, .member-dashboard .dashboard-wrapper .other-info-container .agent-review .review-display {
  padding: 8px;
  background: #f9f9f9;
  border-radius: 4px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .agent-review .review-display .review-content, .member-dashboard .dashboard-wrapper .matching-results-container .agent-review .review-display .review-content, .member-dashboard .dashboard-wrapper .other-info-container .agent-review .review-display .review-content {
  word-wrap: break-word;
  white-space: normal;
}
.member-dashboard .dashboard-wrapper .dashboard-container .agent-review .review-display button.review-edit-btn, .member-dashboard .dashboard-wrapper .matching-results-container .agent-review .review-display button.review-edit-btn, .member-dashboard .dashboard-wrapper .other-info-container .agent-review .review-display button.review-edit-btn {
  margin-top: 5px;
  padding: 4px 8px;
  background-color: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.member-dashboard .dashboard-wrapper .dashboard-container .agent-review .review-edit textarea.review-text, .member-dashboard .dashboard-wrapper .matching-results-container .agent-review .review-edit textarea.review-text, .member-dashboard .dashboard-wrapper .other-info-container .agent-review .review-edit textarea.review-text {
  display: inline-block;
  width: 80%;
  min-height: 80px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
}
.member-dashboard .dashboard-wrapper .dashboard-container .agent-review .review-edit .review-buttons, .member-dashboard .dashboard-wrapper .matching-results-container .agent-review .review-edit .review-buttons, .member-dashboard .dashboard-wrapper .other-info-container .agent-review .review-edit .review-buttons {
  margin-top: 5px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .agent-review .review-edit .review-buttons button, .member-dashboard .dashboard-wrapper .matching-results-container .agent-review .review-edit .review-buttons button, .member-dashboard .dashboard-wrapper .other-info-container .agent-review .review-edit .review-buttons button {
  padding: 4px 8px;
  margin-right: 5px;
  background-color: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.member-dashboard .dashboard-wrapper .dashboard-container .agent-review .review-edit .review-message, .member-dashboard .dashboard-wrapper .matching-results-container .agent-review .review-edit .review-message, .member-dashboard .dashboard-wrapper .other-info-container .agent-review .review-edit .review-message {
  margin-top: 5px;
  font-size: 14px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .agent-review .review-edit .review-message.success, .member-dashboard .dashboard-wrapper .matching-results-container .agent-review .review-edit .review-message.success, .member-dashboard .dashboard-wrapper .other-info-container .agent-review .review-edit .review-message.success {
  color: #3c763d;
}
.member-dashboard .dashboard-wrapper .dashboard-container .agent-review .review-edit .review-message.error, .member-dashboard .dashboard-wrapper .matching-results-container .agent-review .review-edit .review-message.error, .member-dashboard .dashboard-wrapper .other-info-container .agent-review .review-edit .review-message.error {
  color: #a94442;
}
.member-dashboard .dashboard-wrapper .dashboard-container .switch, .member-dashboard .dashboard-wrapper .matching-results-container .switch, .member-dashboard .dashboard-wrapper .other-info-container .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .switch input, .member-dashboard .dashboard-wrapper .matching-results-container .switch input, .member-dashboard .dashboard-wrapper .other-info-container .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.member-dashboard .dashboard-wrapper .dashboard-container .slider, .member-dashboard .dashboard-wrapper .matching-results-container .slider, .member-dashboard .dashboard-wrapper .other-info-container .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}
.member-dashboard .dashboard-wrapper .dashboard-container .slider:before, .member-dashboard .dashboard-wrapper .matching-results-container .slider:before, .member-dashboard .dashboard-wrapper .other-info-container .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.member-dashboard .dashboard-wrapper .dashboard-container input:checked + .slider, .member-dashboard .dashboard-wrapper .matching-results-container input:checked + .slider, .member-dashboard .dashboard-wrapper .other-info-container input:checked + .slider {
  background-color: #4caf50;
}
.member-dashboard .dashboard-wrapper .dashboard-container input:checked + .slider:before, .member-dashboard .dashboard-wrapper .matching-results-container input:checked + .slider:before, .member-dashboard .dashboard-wrapper .other-info-container input:checked + .slider:before {
  transform: translateX(26px);
}
.member-dashboard .dashboard-wrapper .dashboard-container .notification, .member-dashboard .dashboard-wrapper .matching-results-container .notification, .member-dashboard .dashboard-wrapper .other-info-container .notification {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 0.9em;
  transition: opacity 0.3s ease;
}
.member-dashboard .dashboard-wrapper .dashboard-container .notification.success, .member-dashboard .dashboard-wrapper .matching-results-container .notification.success, .member-dashboard .dashboard-wrapper .other-info-container .notification.success {
  background-color: #4caf50;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container .notification.error, .member-dashboard .dashboard-wrapper .matching-results-container .notification.error, .member-dashboard .dashboard-wrapper .other-info-container .notification.error {
  background-color: #f44336;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container form, .member-dashboard .dashboard-wrapper .matching-results-container form, .member-dashboard .dashboard-wrapper .other-info-container form {
  display: flex;
  flex-direction: column;
  /* Cashback and Commission Sections */
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup, .member-dashboard .dashboard-wrapper .other-info-container form .form-group, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup {
  margin-bottom: 1.5rem;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group label, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup label, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group label, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup label, .member-dashboard .dashboard-wrapper .other-info-container form .form-group label, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #444;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container input,
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container select,
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container textarea, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container input,
.member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container select,
.member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container textarea, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container input,
.member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container select,
.member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container textarea, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container input,
.member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container select,
.member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container textarea, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container input,
.member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container select,
.member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container textarea, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container input,
.member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container select,
.member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container textarea {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.3s;
  background-color: #ffffff;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container input:focus,
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container select:focus,
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container textarea:focus, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container input:focus,
.member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container select:focus,
.member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container textarea:focus, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container input:focus,
.member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container select:focus,
.member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container textarea:focus, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container input:focus,
.member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container select:focus,
.member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container textarea:focus, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container input:focus,
.member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container select:focus,
.member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container textarea:focus, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container input:focus,
.member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container select:focus,
.member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container textarea:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0 0 5px rgba(255, 189, 89, 0.5);
  background-color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container input:disabled, .member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container input[readonly],
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container select:disabled,
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container select[readonly],
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container textarea:disabled,
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container textarea[readonly], .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container input:disabled, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container input[readonly],
.member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container select:disabled,
.member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container select[readonly],
.member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container textarea:disabled,
.member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container textarea[readonly], .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container input:disabled, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container input[readonly],
.member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container select:disabled,
.member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container select[readonly],
.member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container textarea:disabled,
.member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container textarea[readonly], .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container input:disabled, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container input[readonly],
.member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container select:disabled,
.member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container select[readonly],
.member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container textarea:disabled,
.member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container textarea[readonly], .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container input:disabled, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container input[readonly],
.member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container select:disabled,
.member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container select[readonly],
.member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container textarea:disabled,
.member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container textarea[readonly], .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container input:disabled, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container input[readonly],
.member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container select:disabled,
.member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container select[readonly],
.member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container textarea:disabled,
.member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container textarea[readonly] {
  background-color: #f0f0f0;
  cursor: not-allowed;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .password-fields, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .password-fields, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .password-fields, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .password-fields, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .password-fields, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .password-fields {
  width: 100%;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .password-fields .password-input-group, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .password-fields .password-input-group, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .password-fields .password-input-group, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .password-fields .password-input-group, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .password-fields .password-input-group, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .password-fields .password-input-group {
  position: relative;
  margin-bottom: 0.5rem;
  width: 100%;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .password-fields .password-input-group input, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .password-fields .password-input-group input, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .password-fields .password-input-group input, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .password-fields .password-input-group input, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .password-fields .password-input-group input, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .password-fields .password-input-group input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.5rem;
  background-color: #ffffff;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .password-fields .password-input-group .toggle-visibility-btn, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .password-fields .password-input-group .toggle-visibility-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .password-fields .password-input-group .toggle-visibility-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .password-fields .password-input-group .toggle-visibility-btn, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .password-fields .password-input-group .toggle-visibility-btn, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .password-fields .password-input-group .toggle-visibility-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .password-fields .password-input-group .toggle-visibility-btn:hover, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .password-fields .password-input-group .toggle-visibility-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .password-fields .password-input-group .toggle-visibility-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .password-fields .password-input-group .toggle-visibility-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .password-fields .password-input-group .toggle-visibility-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .password-fields .password-input-group .toggle-visibility-btn:hover {
  background-color: #ffffff;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button {
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #ddd;
  color: #444;
  transition: background-color 0.3s ease;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button:hover, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button:hover, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button:hover, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button:hover {
  background-color: #ccc;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.edit-btn, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.edit-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.edit-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.edit-btn, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.edit-btn, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.edit-btn {
  background-color: #ffa500;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.edit-btn:hover, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.edit-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.edit-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.edit-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.edit-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.edit-btn:hover {
  background-color: #e69500;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.save-btn, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.save-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.save-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.save-btn, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.save-btn, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.save-btn {
  background-color: #4caf50;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.save-btn:hover, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.save-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.save-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.save-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.save-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.save-btn:hover {
  background-color: #43a047;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.cancel-btn, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.cancel-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.cancel-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.cancel-btn, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.cancel-btn, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.cancel-btn {
  background-color: #f44336;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.cancel-btn:hover, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.cancel-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.cancel-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.cancel-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.cancel-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.cancel-btn:hover {
  background-color: #d32f2f;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.hidden, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.hidden, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.hidden, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.hidden, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.hidden, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.hidden {
  display: none;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-message, .member-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-message, .member-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-message, .member-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-message, .member-dashboard .dashboard-wrapper .other-info-container form .form-group .field-message, .member-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section, .member-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section, .member-dashboard .dashboard-wrapper .other-info-container form .delete-account-section {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section p, .member-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section p, .member-dashboard .dashboard-wrapper .other-info-container form .delete-account-section p {
  margin-bottom: 1rem;
  color: #444;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-initial .delete-account-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-initial .delete-account-btn, .member-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-initial .delete-account-btn {
  background-color: #f44336;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-initial .delete-account-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-initial .delete-account-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-initial .delete-account-btn:hover {
  background-color: #d32f2f;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm, .member-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm, .member-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm {
  margin-top: 1rem;
  width: 100%;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm #delete_account_password, .member-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm #delete_account_password, .member-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm #delete_account_password {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #ffffff;
  box-sizing: border-box;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm #delete_account_password:focus, .member-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm #delete_account_password:focus, .member-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm #delete_account_password:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0 0 5px rgba(255, 189, 89, 0.5);
  background-color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm .field-buttons, .member-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm .field-buttons, .member-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm .field-buttons {
  display: flex;
  gap: 0.5rem;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm .field-buttons .confirm-delete-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm .field-buttons .confirm-delete-btn, .member-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm .field-buttons .confirm-delete-btn {
  background-color: #f44336;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm .field-buttons .confirm-delete-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm .field-buttons .confirm-delete-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm .field-buttons .confirm-delete-btn:hover {
  background-color: #d32f2f;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm .field-buttons .cancel-delete-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm .field-buttons .cancel-delete-btn, .member-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm .field-buttons .cancel-delete-btn {
  background-color: #ddd;
  color: #444;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm .field-buttons .cancel-delete-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm .field-buttons .cancel-delete-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm .field-buttons .cancel-delete-btn:hover {
  background-color: #ccc;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section {
  display: block;
  padding: 1rem;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section label,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section label, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section label,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section label, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section label,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section label {
  font-weight: bold;
  color: #333;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .sub-fields,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .sub-fields, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .sub-fields,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .sub-fields, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .sub-fields,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .sub-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .sub-fields .form-subgroup,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .sub-fields .form-subgroup, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .sub-fields .form-subgroup,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .sub-fields .form-subgroup, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .sub-fields .form-subgroup,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .sub-fields .form-subgroup {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .sub-fields .form-subgroup label,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .sub-fields .form-subgroup label, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .sub-fields .form-subgroup label,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .sub-fields .form-subgroup label, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .sub-fields .form-subgroup label,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .sub-fields .form-subgroup label {
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #444;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .sub-fields .form-subgroup select,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .sub-fields .form-subgroup select, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .sub-fields .form-subgroup select,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .sub-fields .form-subgroup select, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .sub-fields .form-subgroup select,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .sub-fields .form-subgroup select {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #f9f9f9;
  transition: border-color 0.3s;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .sub-fields .form-subgroup select:focus,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .sub-fields .form-subgroup select:focus, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .sub-fields .form-subgroup select:focus,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .sub-fields .form-subgroup select:focus, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .sub-fields .form-subgroup select:focus,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .sub-fields .form-subgroup select:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0 0 5px rgba(255, 189, 89, 0.5);
  background-color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .sub-fields .form-subgroup select:disabled,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .sub-fields .form-subgroup select:disabled, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .sub-fields .form-subgroup select:disabled,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .sub-fields .form-subgroup select:disabled, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .sub-fields .form-subgroup select:disabled,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .sub-fields .form-subgroup select:disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button {
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #ddd;
  color: #444;
  transition: background-color 0.3s ease;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button:hover,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button:hover,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button:hover, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button:hover,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button:hover {
  background-color: #ccc;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.edit-btn,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.edit-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.edit-btn,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.edit-btn, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.edit-btn,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.edit-btn {
  background-color: #ffa500;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.edit-btn:hover,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.edit-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.edit-btn:hover,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.edit-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.edit-btn:hover,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.edit-btn:hover {
  background-color: #e69500;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.save-btn,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.save-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.save-btn,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.save-btn, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.save-btn,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.save-btn {
  background-color: #4caf50;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.save-btn:hover,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.save-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.save-btn:hover,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.save-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.save-btn:hover,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.save-btn:hover {
  background-color: #43a047;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.cancel-btn,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.cancel-btn, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.cancel-btn,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.cancel-btn, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.cancel-btn,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.cancel-btn {
  background-color: #f44336;
  color: #fff;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.cancel-btn:hover,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.cancel-btn:hover, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.cancel-btn:hover,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.cancel-btn:hover, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.cancel-btn:hover,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.cancel-btn:hover {
  background-color: #d32f2f;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.hidden,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.hidden, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.hidden,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.hidden, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.hidden,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.hidden {
  display: none;
}
.member-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-message,
.member-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-message, .member-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-message,
.member-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-message, .member-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-message,
.member-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
}
.member-dashboard .dashboard-wrapper .matching-results-container {
  display: flex;
  flex-direction: column;
}
.member-dashboard .select2-container {
  width: 100% !important;
}
.member-dashboard .hidden {
  display: none !important;
}
.member-dashboard .sin-input {
  width: 100%;
  max-width: 250px;
  padding: 0.8rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  transition: border-color 0.3s ease;
  text-align: center;
  letter-spacing: 2px;
}
.member-dashboard .sin-input:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0 0 5px rgba(255, 189, 89, 0.5);
  background-color: #fff;
}
.member-dashboard .sin-input:disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
}
.member-dashboard .save-sin {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 8px 15px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: #4caf50;
  color: #fff;
}
.member-dashboard .save-sin:hover {
  background-color: #43a047;
}
.member-dashboard .edit-sin, .member-dashboard .cancel-sin, .member-dashboard .start-name-verification {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 8px 15px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: #ffa500;
  color: #fff;
}
.member-dashboard .edit-sin:hover, .member-dashboard .cancel-sin:hover, .member-dashboard .start-name-verification:hover {
  background-color: #e69500;
}

.agent-registration {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #ffffff;
}
.agent-registration .registration-container {
  background: #fff;
  padding: 2rem;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  margin-top: 6rem;
  /* Animation */
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.5s ease forwards;
}
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.agent-registration .registration-container .field-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
}
.agent-registration .registration-container h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}
.agent-registration .registration-container .form-group {
  text-align: center;
  margin-top: 1.5rem;
}
.agent-registration .registration-container .form-group a {
  color: #ffbd59;
  text-decoration: none;
}
.agent-registration .registration-container .form-group a:hover {
  text-decoration: underline;
  color: #e6ac50;
}
.agent-registration .registration-container form .step {
  display: none;
  flex-direction: column;
  /* Additional styling for the reCAPTCHA checkbox group */
  /* Cashback and Commission Sections */
}
.agent-registration .registration-container form .step label {
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #444;
}
.agent-registration .registration-container form .step input,
.agent-registration .registration-container form .step select {
  margin-bottom: 1.2rem;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}
.agent-registration .registration-container form .step input:focus,
.agent-registration .registration-container form .step select:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0px 0px 5px rgba(255, 189, 89, 0.5);
}
.agent-registration .registration-container form .step .recaptcha-group {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.agent-registration .registration-container form .step .cashback-section,
.agent-registration .registration-container form .step .commission-section {
  display: block;
  padding: 1rem;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.agent-registration .registration-container form .step .cashback-section label,
.agent-registration .registration-container form .step .commission-section label {
  font-weight: bold;
  color: #333;
}
.agent-registration .registration-container form .step .cashback-section .sub-fields,
.agent-registration .registration-container form .step .commission-section .sub-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.agent-registration .registration-container form .step .cashback-section .sub-fields .form-subgroup,
.agent-registration .registration-container form .step .commission-section .sub-fields .form-subgroup {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.agent-registration .registration-container form .step .cashback-section .sub-fields .form-subgroup label,
.agent-registration .registration-container form .step .commission-section .sub-fields .form-subgroup label {
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #444;
}
.agent-registration .registration-container form .step .cashback-section .sub-fields .form-subgroup select,
.agent-registration .registration-container form .step .commission-section .sub-fields .form-subgroup select {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #f9f9f9;
  transition: border-color 0.3s;
}
.agent-registration .registration-container form .step .cashback-section .sub-fields .form-subgroup select:focus,
.agent-registration .registration-container form .step .commission-section .sub-fields .form-subgroup select:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0 0 5px rgba(255, 189, 89, 0.5);
  background-color: #fff;
}
.agent-registration .registration-container form .step .cashback-section .sub-fields .form-subgroup select:disabled,
.agent-registration .registration-container form .step .commission-section .sub-fields .form-subgroup select:disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
}
.agent-registration .registration-container form .step .cashback-section .field-buttons,
.agent-registration .registration-container form .step .commission-section .field-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.agent-registration .registration-container form .step .cashback-section .field-buttons button,
.agent-registration .registration-container form .step .commission-section .field-buttons button {
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #ddd;
  color: #444;
  transition: background-color 0.3s ease;
}
.agent-registration .registration-container form .step .cashback-section .field-buttons button:hover,
.agent-registration .registration-container form .step .commission-section .field-buttons button:hover {
  background-color: #ccc;
}
.agent-registration .registration-container form .step .cashback-section .field-buttons button.edit-btn,
.agent-registration .registration-container form .step .commission-section .field-buttons button.edit-btn {
  background-color: #ffa500;
  color: #fff;
}
.agent-registration .registration-container form .step .cashback-section .field-buttons button.edit-btn:hover,
.agent-registration .registration-container form .step .commission-section .field-buttons button.edit-btn:hover {
  background-color: #e69500;
}
.agent-registration .registration-container form .step .cashback-section .field-buttons button.save-btn,
.agent-registration .registration-container form .step .commission-section .field-buttons button.save-btn {
  background-color: #4caf50;
  color: #fff;
}
.agent-registration .registration-container form .step .cashback-section .field-buttons button.save-btn:hover,
.agent-registration .registration-container form .step .commission-section .field-buttons button.save-btn:hover {
  background-color: #43a047;
}
.agent-registration .registration-container form .step .cashback-section .field-buttons button.cancel-btn,
.agent-registration .registration-container form .step .commission-section .field-buttons button.cancel-btn {
  background-color: #f44336;
  color: #fff;
}
.agent-registration .registration-container form .step .cashback-section .field-buttons button.cancel-btn:hover,
.agent-registration .registration-container form .step .commission-section .field-buttons button.cancel-btn:hover {
  background-color: #d32f2f;
}
.agent-registration .registration-container form .step .cashback-section .field-buttons button.hidden,
.agent-registration .registration-container form .step .commission-section .field-buttons button.hidden {
  display: none;
}
.agent-registration .registration-container form .step .cashback-section .field-message,
.agent-registration .registration-container form .step .commission-section .field-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
}
.agent-registration .registration-container form .step .matched-members-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #444;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  margin-top: 1.5rem;
}
.agent-registration .registration-container form .step .matched-members-count span#member-count {
  color: #ffbd59;
  font-weight: bold;
  margin-left: 0.5rem;
}
.agent-registration .registration-container form .step .hidden {
  display: none;
}
.agent-registration .registration-container form .step .password-input-group {
  position: relative;
  margin-bottom: 1rem;
  width: 100%;
}
.agent-registration .registration-container form .step .password-input-group input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.5rem;
}
.agent-registration .registration-container form .step .password-input-group .toggle-visibility-btn {
  position: absolute;
  right: 0.5rem;
  top: 35%;
  transform: translateY(-50%);
  background: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.agent-registration .registration-container form .step .password-input-group .toggle-visibility-btn:hover {
  background-color: #ffffff;
}
.agent-registration .registration-container form .step .section-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 1.5rem 0 0.5rem;
  color: #444;
}
.agent-registration .registration-container form .step .input-row {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on narrow screens */
  justify-content: space-between;
  gap: 1rem; /* Adds spacing between the two dropdowns */
  margin-bottom: 1.5rem; /* Adds spacing between rows */
}
.agent-registration .registration-container form .step .input-group {
  flex: 1; /* Ensures both dropdowns share equal width */
  min-width: 75px; /* Ensures minimum width before wrapping */
}
.agent-registration .registration-container form .step .button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
.agent-registration .registration-container form .step .button-group button {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.agent-registration .registration-container form .step .button-group button.btn-next {
  background: #ffbd59;
  color: white;
}
.agent-registration .registration-container form .step .button-group button.btn-next:hover {
  background: #e6ac50;
}
.agent-registration .registration-container form .step .button-group button.btn-previous {
  background-color: #ddd;
  color: #444;
}
.agent-registration .registration-container form .step .button-group button.btn-previous:hover {
  background-color: #ccc;
}
.agent-registration .registration-container form .step .button-group button.btn-submit {
  background: #4caf50;
  color: white;
}
.agent-registration .registration-container form .step .button-group button.btn-submit:hover {
  background: #43a047;
}
.agent-registration .registration-container form .active {
  display: flex !important;
}

.agent-login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #fff;
}
.agent-login .login-container {
  background: #fff;
  padding: 2rem;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  max-width: 400px;
  width: 100%;
  margin-top: 6rem;
  /* Animation */
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.5s ease forwards;
}
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.agent-login .login-container h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}
.agent-login .login-container form {
  /* reCAPTCHA checkbox area */
}
.agent-login .login-container form .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.2rem;
  /* Password group hides if user toggles to forgot password */
}
.agent-login .login-container form .form-group label {
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #444;
}
.agent-login .login-container form .form-group input {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}
.agent-login .login-container form .form-group input:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0px 0px 5px rgba(255, 189, 89, 0.5);
}
.agent-login .login-container form .form-group.password-group .password-input-group {
  position: relative;
  margin-bottom: 1rem;
  width: 100%;
}
.agent-login .login-container form .form-group.password-group .password-input-group input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.5rem;
}
.agent-login .login-container form .form-group.password-group .password-input-group .toggle-visibility-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.agent-login .login-container form .form-group.password-group .password-input-group .toggle-visibility-btn:hover {
  background-color: #ffffff;
}
.agent-login .login-container form .recaptcha-group {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}
.agent-login .login-container form .remember-me-group {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.agent-login .login-container form .remember-me-group label {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: #444;
  cursor: pointer;
}
.agent-login .login-container form .remember-me-group label input {
  margin-right: 0.5rem;
  transform: scale(1.1);
}
.agent-login .login-container form .field-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
}
.agent-login .login-container form .button-group {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.agent-login .login-container form .button-group button {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: #4caf50;
  color: white;
}
.agent-login .login-container form .button-group button:hover {
  background: #43a047;
}
.agent-login .login-container form .text-center {
  text-align: center;
  margin-top: 1rem;
}
.agent-login .login-container form .text-center a {
  color: #ffbd59;
  text-decoration: none;
}
.agent-login .login-container form .text-center a:hover {
  text-decoration: underline;
}
.agent-login .hidden {
  display: none !important;
}

.agent-dashboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  background-color: #ffffff;
  padding-top: 100px;
  padding-bottom: 100px;
}
.agent-dashboard h1 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
  width: 100%; /* Ensure h2 spans the full width */
  margin: 0 auto;
}
.agent-dashboard h1 span {
  color: #ffbd59;
}
.agent-dashboard .dashboard-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  max-width: 900px;
  padding-top: 50px;
  justify-content: center;
}
.agent-dashboard .dashboard-wrapper .dashboard-container, .agent-dashboard .dashboard-wrapper .matching-results-container, .agent-dashboard .dashboard-wrapper .other-info-container {
  background: #fff;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  max-width: 900px;
  width: 100%;
  /* Animation */
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.5s ease forwards;
  /* OTP Verification Block Styles */
  /* Styles for the Cancel Transaction and Complete Transaction forms */
  /* For the radio buttons and the "Others" field */
  /* For the file upload field in the complete form */
  /* Button styling (matches your dashboard buttons) */
  /* Submit buttons */
  /* Cancel buttons */
  /* Styling the agent rating section */
  /* Title styling */
  /* Description styling */
  /* Highlight for average rating */
  /* Total ratings styling */
}
.agent-dashboard .dashboard-wrapper .dashboard-container h2, .agent-dashboard .dashboard-wrapper .matching-results-container h2, .agent-dashboard .dashboard-wrapper .other-info-container h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}
.agent-dashboard .dashboard-wrapper .dashboard-container h2 span, .agent-dashboard .dashboard-wrapper .matching-results-container h2 span, .agent-dashboard .dashboard-wrapper .other-info-container h2 span {
  color: #ffbd59;
}
.agent-dashboard .dashboard-wrapper .dashboard-container h4, .agent-dashboard .dashboard-wrapper .matching-results-container h4, .agent-dashboard .dashboard-wrapper .other-info-container h4 {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}
.agent-dashboard .dashboard-wrapper .dashboard-container h4 span, .agent-dashboard .dashboard-wrapper .matching-results-container h4 span, .agent-dashboard .dashboard-wrapper .other-info-container h4 span {
  color: #ffbd59;
}
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block {
  background-color: #f9f9f9; /* Matches other card-like sections */
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
  /* Hide arrows for number input in Chrome, Safari, Edge, and Opera */
  /* Hide arrows for number input in Firefox */
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block p, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block p, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block p {
  margin-bottom: 10px;
  color: #333;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .otp-input, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .otp-input, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .otp-input {
  width: 100%;
  max-width: 200px; /* Adjust as desired for your layout */
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
  background-color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .otp-input:focus, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .otp-input:focus, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .otp-input:focus {
  border-color: #ffbd59; /* Matches your highlight color */
  outline: none;
  box-shadow: 0 0 5px rgba(255, 189, 89, 0.5);
  background-color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons {
  display: flex;
  gap: 10px; /* Matches your existing button spacing */
  margin-top: 10px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  /* Inherit existing .action-buttons styling, 
      but you can customize each button color if desired. */
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn {
  background-color: #4caf50; /* green */
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn:hover {
  background-color: #43a047;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn-submit, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn-submit, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn-submit {
  background-color: #ffbd59; /* or #4caf50 if you want them identical */
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn-submit:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn-submit:hover, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.email-verif-btn-submit:hover {
  background-color: #f2a025;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn {
  background-color: #4caf50; /* green */
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn:hover {
  background-color: #43a047;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn-submit, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn-submit, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn-submit {
  background-color: #ffbd59; /* or #4caf50 if you want them identical */
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn-submit:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn-submit:hover, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block .otp-form .action-buttons button.phone-verif-btn-submit:hover {
  background-color: #f2a025;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block #otpEmailInput::-webkit-outer-spin-button,
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block #otpEmailInput::-webkit-inner-spin-button, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block #otpEmailInput::-webkit-outer-spin-button,
.agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block #otpEmailInput::-webkit-inner-spin-button, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block #otpEmailInput::-webkit-outer-spin-button,
.agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block #otpEmailInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .otp-verification-block #otpEmailInput, .agent-dashboard .dashboard-wrapper .matching-results-container .otp-verification-block #otpEmailInput, .agent-dashboard .dashboard-wrapper .other-info-container .otp-verification-block #otpEmailInput {
  -moz-appearance: textfield;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .member-summary-box, .agent-dashboard .dashboard-wrapper .matching-results-container .member-summary-box, .agent-dashboard .dashboard-wrapper .other-info-container .member-summary-box {
  background-color: #f8f9fa; /* Light background for contrast */
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-top: 15px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .summary-number, .agent-dashboard .dashboard-wrapper .matching-results-container .summary-number, .agent-dashboard .dashboard-wrapper .other-info-container .summary-number {
  color: #28a745; /* Your website's green theme color */
  font-weight: bold;
  font-size: 1.2em;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .error-message, .agent-dashboard .dashboard-wrapper .matching-results-container .error-message, .agent-dashboard .dashboard-wrapper .other-info-container .error-message {
  color: red;
  font-weight: bold;
  text-align: center;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .matched-members-count, .agent-dashboard .dashboard-wrapper .matching-results-container .matched-members-count, .agent-dashboard .dashboard-wrapper .other-info-container .matched-members-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #444;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .matched-members-count span#member-count, .agent-dashboard .dashboard-wrapper .matching-results-container .matched-members-count span#member-count, .agent-dashboard .dashboard-wrapper .other-info-container .matched-members-count span#member-count {
  color: #ffbd59;
  font-weight: bold;
  margin-left: 0.5rem;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .member-card, .agent-dashboard .dashboard-wrapper .matching-results-container .member-card, .agent-dashboard .dashboard-wrapper .other-info-container .member-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .member-card h3, .agent-dashboard .dashboard-wrapper .matching-results-container .member-card h3, .agent-dashboard .dashboard-wrapper .other-info-container .member-card h3 {
  margin: 0 0 10px;
  font-size: 1.2em;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .status-card, .agent-dashboard .dashboard-wrapper .matching-results-container .status-card, .agent-dashboard .dashboard-wrapper .other-info-container .status-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .status-card h3, .agent-dashboard .dashboard-wrapper .matching-results-container .status-card h3, .agent-dashboard .dashboard-wrapper .other-info-container .status-card h3 {
  margin: 0 0 10px;
  font-size: 1.2em;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .dashboard-card, .agent-dashboard .dashboard-wrapper .matching-results-container .dashboard-card, .agent-dashboard .dashboard-wrapper .other-info-container .dashboard-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .dashboard-card h3, .agent-dashboard .dashboard-wrapper .matching-results-container .dashboard-card h3, .agent-dashboard .dashboard-wrapper .other-info-container .dashboard-card h3 {
  margin: 0 0 10px;
  font-size: 1.2em;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons button, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons button, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons .accept-btn, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons .accept-btn, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons .accept-btn {
  background-color: #4caf50;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons .accept-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons .accept-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons .accept-btn:hover {
  background-color: #43a047;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons .completetrx-btn, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons .completetrx-btn, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons .completetrx-btn {
  background-color: #4caf50;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons .completetrx-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons .completetrx-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons .completetrx-btn:hover {
  background-color: #43a047;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons .reject-btn, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons .reject-btn, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons .reject-btn {
  background-color: #f44336;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons .reject-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons .reject-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons .reject-btn:hover {
  background-color: #d32f2f;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons .canceltrx-btn, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons .canceltrx-btn, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons .canceltrx-btn {
  background-color: #f44336;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons .canceltrx-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons .canceltrx-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons .canceltrx-btn:hover {
  background-color: #d32f2f;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons .email-verif-btn, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons .email-verif-btn, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons .email-verif-btn {
  background-color: #4caf50;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons .email-verif-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons .email-verif-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons .email-verif-btn:hover {
  background-color: #43a047;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons .phone-verif-btn, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons .phone-verif-btn, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons .phone-verif-btn {
  background-color: #4caf50;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .action-buttons .phone-verif-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .action-buttons .phone-verif-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container .action-buttons .phone-verif-btn:hover {
  background-color: #43a047;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .cancel-form,
.agent-dashboard .dashboard-wrapper .dashboard-container .complete-form, .agent-dashboard .dashboard-wrapper .matching-results-container .cancel-form,
.agent-dashboard .dashboard-wrapper .matching-results-container .complete-form, .agent-dashboard .dashboard-wrapper .other-info-container .cancel-form,
.agent-dashboard .dashboard-wrapper .other-info-container .complete-form {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: "Roboto", sans-serif;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .cancel-form p,
.agent-dashboard .dashboard-wrapper .dashboard-container .complete-form p, .agent-dashboard .dashboard-wrapper .matching-results-container .cancel-form p,
.agent-dashboard .dashboard-wrapper .matching-results-container .complete-form p, .agent-dashboard .dashboard-wrapper .other-info-container .cancel-form p,
.agent-dashboard .dashboard-wrapper .other-info-container .complete-form p {
  font-size: 1rem;
  color: #333;
  margin-bottom: 10px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .cancel-form label,
.agent-dashboard .dashboard-wrapper .dashboard-container .complete-form label, .agent-dashboard .dashboard-wrapper .matching-results-container .cancel-form label,
.agent-dashboard .dashboard-wrapper .matching-results-container .complete-form label, .agent-dashboard .dashboard-wrapper .other-info-container .cancel-form label,
.agent-dashboard .dashboard-wrapper .other-info-container .complete-form label {
  font-weight: bold;
  color: #444;
  display: block;
  margin-bottom: 5px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .cancel-form input[type=radio], .agent-dashboard .dashboard-wrapper .matching-results-container .cancel-form input[type=radio], .agent-dashboard .dashboard-wrapper .other-info-container .cancel-form input[type=radio] {
  margin-right: 5px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .cancel-form .other-reason, .agent-dashboard .dashboard-wrapper .matching-results-container .cancel-form .other-reason, .agent-dashboard .dashboard-wrapper .other-info-container .cancel-form .other-reason {
  margin-top: 5px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .cancel-form .other-reason input.custom-reason, .agent-dashboard .dashboard-wrapper .matching-results-container .cancel-form .other-reason input.custom-reason, .agent-dashboard .dashboard-wrapper .other-info-container .cancel-form .other-reason input.custom-reason {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #f9f9f9;
  margin-bottom: 10px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .complete-form input.transaction-pdf, .agent-dashboard .dashboard-wrapper .matching-results-container .complete-form input.transaction-pdf, .agent-dashboard .dashboard-wrapper .other-info-container .complete-form input.transaction-pdf {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #f9f9f9;
  margin-bottom: 10px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .cancel-form button,
.agent-dashboard .dashboard-wrapper .dashboard-container .complete-form button, .agent-dashboard .dashboard-wrapper .matching-results-container .cancel-form button,
.agent-dashboard .dashboard-wrapper .matching-results-container .complete-form button, .agent-dashboard .dashboard-wrapper .other-info-container .cancel-form button,
.agent-dashboard .dashboard-wrapper .other-info-container .complete-form button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
  margin-right: 5px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .cancel-form button.cancel-form-submit,
.agent-dashboard .dashboard-wrapper .dashboard-container .complete-form button.complete-form-submit, .agent-dashboard .dashboard-wrapper .matching-results-container .cancel-form button.cancel-form-submit,
.agent-dashboard .dashboard-wrapper .matching-results-container .complete-form button.complete-form-submit, .agent-dashboard .dashboard-wrapper .other-info-container .cancel-form button.cancel-form-submit,
.agent-dashboard .dashboard-wrapper .other-info-container .complete-form button.complete-form-submit {
  background-color: #4caf50;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .cancel-form button.cancel-form-submit:hover,
.agent-dashboard .dashboard-wrapper .dashboard-container .complete-form button.complete-form-submit:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .cancel-form button.cancel-form-submit:hover,
.agent-dashboard .dashboard-wrapper .matching-results-container .complete-form button.complete-form-submit:hover, .agent-dashboard .dashboard-wrapper .other-info-container .cancel-form button.cancel-form-submit:hover,
.agent-dashboard .dashboard-wrapper .other-info-container .complete-form button.complete-form-submit:hover {
  background-color: #43a047;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .cancel-form button.cancel-form-cancel,
.agent-dashboard .dashboard-wrapper .dashboard-container .complete-form button.complete-form-cancel, .agent-dashboard .dashboard-wrapper .matching-results-container .cancel-form button.cancel-form-cancel,
.agent-dashboard .dashboard-wrapper .matching-results-container .complete-form button.complete-form-cancel, .agent-dashboard .dashboard-wrapper .other-info-container .cancel-form button.cancel-form-cancel,
.agent-dashboard .dashboard-wrapper .other-info-container .complete-form button.complete-form-cancel {
  background-color: #f44336;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .cancel-form button.cancel-form-cancel:hover,
.agent-dashboard .dashboard-wrapper .dashboard-container .complete-form button.complete-form-cancel:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .cancel-form button.cancel-form-cancel:hover,
.agent-dashboard .dashboard-wrapper .matching-results-container .complete-form button.complete-form-cancel:hover, .agent-dashboard .dashboard-wrapper .other-info-container .cancel-form button.cancel-form-cancel:hover,
.agent-dashboard .dashboard-wrapper .other-info-container .complete-form button.complete-form-cancel:hover {
  background-color: #d32f2f;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .switch, .agent-dashboard .dashboard-wrapper .matching-results-container .switch, .agent-dashboard .dashboard-wrapper .other-info-container .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .switch input, .agent-dashboard .dashboard-wrapper .matching-results-container .switch input, .agent-dashboard .dashboard-wrapper .other-info-container .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .slider, .agent-dashboard .dashboard-wrapper .matching-results-container .slider, .agent-dashboard .dashboard-wrapper .other-info-container .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .slider:before, .agent-dashboard .dashboard-wrapper .matching-results-container .slider:before, .agent-dashboard .dashboard-wrapper .other-info-container .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.agent-dashboard .dashboard-wrapper .dashboard-container input:checked + .slider, .agent-dashboard .dashboard-wrapper .matching-results-container input:checked + .slider, .agent-dashboard .dashboard-wrapper .other-info-container input:checked + .slider {
  background-color: #4caf50;
}
.agent-dashboard .dashboard-wrapper .dashboard-container input:checked + .slider:before, .agent-dashboard .dashboard-wrapper .matching-results-container input:checked + .slider:before, .agent-dashboard .dashboard-wrapper .other-info-container input:checked + .slider:before {
  transform: translateX(26px);
}
.agent-dashboard .dashboard-wrapper .dashboard-container .notification, .agent-dashboard .dashboard-wrapper .matching-results-container .notification, .agent-dashboard .dashboard-wrapper .other-info-container .notification {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 0.9em;
  transition: opacity 0.3s ease;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .notification.success, .agent-dashboard .dashboard-wrapper .matching-results-container .notification.success, .agent-dashboard .dashboard-wrapper .other-info-container .notification.success {
  background-color: #4caf50;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .notification.error, .agent-dashboard .dashboard-wrapper .matching-results-container .notification.error, .agent-dashboard .dashboard-wrapper .other-info-container .notification.error {
  background-color: #f44336;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container #agent-rating-container, .agent-dashboard .dashboard-wrapper .matching-results-container #agent-rating-container, .agent-dashboard .dashboard-wrapper .other-info-container #agent-rating-container {
  text-align: center; /* Center align the content */
  padding: 20px;
  background: #f9f9f9; /* Light background */
  border: 1px solid #ddd; /* Add a border */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  max-width: 400px; /* Limit the container width */
  margin: 20px auto; /* Center it horizontally with auto margins */
}
.agent-dashboard .dashboard-wrapper .dashboard-container #agent-rating-container h3, .agent-dashboard .dashboard-wrapper .matching-results-container #agent-rating-container h3, .agent-dashboard .dashboard-wrapper .other-info-container #agent-rating-container h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container #agent-rating-container p, .agent-dashboard .dashboard-wrapper .matching-results-container #agent-rating-container p, .agent-dashboard .dashboard-wrapper .other-info-container #agent-rating-container p {
  font-size: 1rem;
  color: #555;
  margin: 10px 0;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .star-rating-container, .agent-dashboard .dashboard-wrapper .matching-results-container .star-rating-container, .agent-dashboard .dashboard-wrapper .other-info-container .star-rating-container {
  text-align: center;
  margin-bottom: 20px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .star-rating, .agent-dashboard .dashboard-wrapper .matching-results-container .star-rating, .agent-dashboard .dashboard-wrapper .other-info-container .star-rating {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .star, .agent-dashboard .dashboard-wrapper .matching-results-container .star, .agent-dashboard .dashboard-wrapper .other-info-container .star {
  width: 32px;
  height: 32px;
  background-color: #ffbd59; /* Star color */
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Adds shadow for a 3D effect */
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .star.glossy, .agent-dashboard .dashboard-wrapper .matching-results-container .star.glossy, .agent-dashboard .dashboard-wrapper .other-info-container .star.glossy {
  background: linear-gradient(135deg, #ffdd73, #ffbd59);
}
.agent-dashboard .dashboard-wrapper .dashboard-container .star.glossy:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .star.glossy:hover, .agent-dashboard .dashboard-wrapper .other-info-container .star.glossy:hover {
  transform: scale(1.2); /* Slightly enlarges the star on hover */
  background: linear-gradient(135deg, #ffeb99, #ffbd59); /* Lighter gloss effect */
}
.agent-dashboard .dashboard-wrapper .dashboard-container .star.half, .agent-dashboard .dashboard-wrapper .matching-results-container .star.half, .agent-dashboard .dashboard-wrapper .other-info-container .star.half {
  background: linear-gradient(90deg, #ffbd59 50%, #ccc 50%);
}
.agent-dashboard .dashboard-wrapper .dashboard-container .star.half:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .star.half:hover, .agent-dashboard .dashboard-wrapper .other-info-container .star.half:hover {
  transform: scale(1.2);
  background: linear-gradient(90deg, #ffeb99 50%, #ddd 50%);
}
.agent-dashboard .dashboard-wrapper .dashboard-container .star.empty, .agent-dashboard .dashboard-wrapper .matching-results-container .star.empty, .agent-dashboard .dashboard-wrapper .other-info-container .star.empty {
  background-color: #ccc;
}
.agent-dashboard .dashboard-wrapper .dashboard-container .star.empty:hover, .agent-dashboard .dashboard-wrapper .matching-results-container .star.empty:hover, .agent-dashboard .dashboard-wrapper .other-info-container .star.empty:hover {
  transform: scale(1.1); /* Smaller hover effect for empty stars */
  background-color: #ddd; /* Slightly change color on hover */
}
.agent-dashboard .dashboard-wrapper .dashboard-container #agent-rating-container .average-rating, .agent-dashboard .dashboard-wrapper .matching-results-container #agent-rating-container .average-rating, .agent-dashboard .dashboard-wrapper .other-info-container #agent-rating-container .average-rating {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin: 5px 0;
}
.agent-dashboard .dashboard-wrapper .dashboard-container #agent-rating-container .total-reviews, .agent-dashboard .dashboard-wrapper .matching-results-container #agent-rating-container .total-reviews, .agent-dashboard .dashboard-wrapper .other-info-container #agent-rating-container .total-reviews {
  font-size: 0.9rem;
  color: #777;
  margin-top: 5px;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form, .agent-dashboard .dashboard-wrapper .matching-results-container form, .agent-dashboard .dashboard-wrapper .other-info-container form {
  display: flex;
  flex-direction: column;
  /* Cashback and Commission Sections */
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .matched-members-count, .agent-dashboard .dashboard-wrapper .matching-results-container form .matched-members-count, .agent-dashboard .dashboard-wrapper .other-info-container form .matched-members-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #444;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .matched-members-count span#member-count, .agent-dashboard .dashboard-wrapper .matching-results-container form .matched-members-count span#member-count, .agent-dashboard .dashboard-wrapper .other-info-container form .matched-members-count span#member-count {
  color: #ffbd59;
  font-weight: bold;
  margin-left: 0.5rem;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup {
  margin-bottom: 1.5rem;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group label, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup label, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group label, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup label, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group label, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #444;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container input,
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container select,
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container textarea, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container input,
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container select,
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container textarea, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container input,
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container select,
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container textarea, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container input,
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container select,
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container textarea, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container input,
.agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container select,
.agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container textarea, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container input,
.agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container select,
.agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container textarea {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.3s;
  background-color: #ffffff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container input:focus,
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container select:focus,
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container textarea:focus, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container input:focus,
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container select:focus,
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container textarea:focus, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container input:focus,
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container select:focus,
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container textarea:focus, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container input:focus,
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container select:focus,
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container textarea:focus, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container input:focus,
.agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container select:focus,
.agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container textarea:focus, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container input:focus,
.agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container select:focus,
.agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container textarea:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0 0 5px rgba(255, 189, 89, 0.5);
  background-color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container input:disabled, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container input[readonly],
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container select:disabled,
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container select[readonly],
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container textarea:disabled,
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container textarea[readonly], .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container input:disabled, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container input[readonly],
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container select:disabled,
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container select[readonly],
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container textarea:disabled,
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container textarea[readonly], .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container input:disabled, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container input[readonly],
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container select:disabled,
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container select[readonly],
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container textarea:disabled,
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container textarea[readonly], .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container input:disabled, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container input[readonly],
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container select:disabled,
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container select[readonly],
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container textarea:disabled,
.agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container textarea[readonly], .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container input:disabled, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container input[readonly],
.agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container select:disabled,
.agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container select[readonly],
.agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container textarea:disabled,
.agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container textarea[readonly], .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container input:disabled, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container input[readonly],
.agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container select:disabled,
.agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container select[readonly],
.agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container textarea:disabled,
.agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container textarea[readonly] {
  background-color: #f0f0f0;
  cursor: not-allowed;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .password-fields, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .password-fields, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .password-fields, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .password-fields, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .password-fields, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .password-fields {
  width: 100%;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .password-fields .password-input-group, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .password-fields .password-input-group, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .password-fields .password-input-group, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .password-fields .password-input-group, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .password-fields .password-input-group, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .password-fields .password-input-group {
  position: relative;
  margin-bottom: 0.5rem;
  width: 100%;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .password-fields .password-input-group input, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .password-fields .password-input-group input, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .password-fields .password-input-group input, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .password-fields .password-input-group input, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .password-fields .password-input-group input, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .password-fields .password-input-group input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.5rem;
  background-color: #ffffff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .password-fields .password-input-group .toggle-visibility-btn, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .password-fields .password-input-group .toggle-visibility-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .password-fields .password-input-group .toggle-visibility-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .password-fields .password-input-group .toggle-visibility-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .password-fields .password-input-group .toggle-visibility-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .password-fields .password-input-group .toggle-visibility-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .password-fields .password-input-group .toggle-visibility-btn:hover, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .password-fields .password-input-group .toggle-visibility-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .password-fields .password-input-group .toggle-visibility-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .password-fields .password-input-group .toggle-visibility-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .password-fields .password-input-group .toggle-visibility-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .password-fields .password-input-group .toggle-visibility-btn:hover {
  background-color: #ffffff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button {
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #ddd;
  color: #444;
  transition: background-color 0.3s ease;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button:hover, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button:hover {
  background-color: #ccc;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.edit-btn, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.edit-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.edit-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.edit-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.edit-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.edit-btn {
  background-color: #ffa500;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.edit-btn:hover, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.edit-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.edit-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.edit-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.edit-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.edit-btn:hover {
  background-color: #e69500;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.save-btn, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.save-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.save-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.save-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.save-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.save-btn {
  background-color: #4caf50;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.save-btn:hover, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.save-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.save-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.save-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.save-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.save-btn:hover {
  background-color: #43a047;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.cancel-btn, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.cancel-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.cancel-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.cancel-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.cancel-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.cancel-btn {
  background-color: #f44336;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.cancel-btn:hover, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.cancel-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.cancel-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.cancel-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.cancel-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.cancel-btn:hover {
  background-color: #d32f2f;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-container .field-buttons button.hidden, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-container .field-buttons button.hidden, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-container .field-buttons button.hidden, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-container .field-buttons button.hidden, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-container .field-buttons button.hidden, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-container .field-buttons button.hidden {
  display: none;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .payment-details-btn, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .payment-details-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .payment-details-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .payment-details-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .payment-details-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .payment-details-btn {
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #ddd;
  color: #444;
  transition: background-color 0.3s ease;
  background-color: #ffa500;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .payment-details-btn:hover, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .payment-details-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .payment-details-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .payment-details-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .payment-details-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .payment-details-btn:hover {
  background-color: #e69500;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .form-group .field-message, .agent-dashboard .dashboard-wrapper .dashboard-container form .form-subgroup .field-message, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-group .field-message, .agent-dashboard .dashboard-wrapper .matching-results-container form .form-subgroup .field-message, .agent-dashboard .dashboard-wrapper .other-info-container form .form-group .field-message, .agent-dashboard .dashboard-wrapper .other-info-container form .form-subgroup .field-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section, .agent-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section, .agent-dashboard .dashboard-wrapper .other-info-container form .delete-account-section {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section p, .agent-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section p, .agent-dashboard .dashboard-wrapper .other-info-container form .delete-account-section p {
  margin-bottom: 1rem;
  color: #444;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-initial .delete-account-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-initial .delete-account-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-initial .delete-account-btn {
  background-color: #f44336;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-initial .delete-account-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-initial .delete-account-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-initial .delete-account-btn:hover {
  background-color: #d32f2f;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm, .agent-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm, .agent-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm {
  margin-top: 1rem;
  width: 100%;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm #delete_account_password, .agent-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm #delete_account_password, .agent-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm #delete_account_password {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #ffffff;
  box-sizing: border-box;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm #delete_account_password:focus, .agent-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm #delete_account_password:focus, .agent-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm #delete_account_password:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0 0 5px rgba(255, 189, 89, 0.5);
  background-color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm .field-buttons, .agent-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm .field-buttons, .agent-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm .field-buttons {
  display: flex;
  gap: 0.5rem;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm .field-buttons .confirm-delete-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm .field-buttons .confirm-delete-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm .field-buttons .confirm-delete-btn {
  background-color: #f44336;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm .field-buttons .confirm-delete-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm .field-buttons .confirm-delete-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm .field-buttons .confirm-delete-btn:hover {
  background-color: #d32f2f;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm .field-buttons .cancel-delete-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm .field-buttons .cancel-delete-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm .field-buttons .cancel-delete-btn {
  background-color: #ddd;
  color: #444;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .delete-account-section .delete-account-confirm .field-buttons .cancel-delete-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .delete-account-section .delete-account-confirm .field-buttons .cancel-delete-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .delete-account-section .delete-account-confirm .field-buttons .cancel-delete-btn:hover {
  background-color: #ccc;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section {
  display: block;
  padding: 1rem;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section label,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section label, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section label,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section label, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section label,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section label {
  font-weight: bold;
  color: #333;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .sub-fields,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .sub-fields, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .sub-fields,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .sub-fields, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .sub-fields,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .sub-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .sub-fields .form-subgroup,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .sub-fields .form-subgroup, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .sub-fields .form-subgroup,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .sub-fields .form-subgroup, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .sub-fields .form-subgroup,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .sub-fields .form-subgroup {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .sub-fields .form-subgroup label,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .sub-fields .form-subgroup label, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .sub-fields .form-subgroup label,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .sub-fields .form-subgroup label, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .sub-fields .form-subgroup label,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .sub-fields .form-subgroup label {
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #444;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .sub-fields .form-subgroup select,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .sub-fields .form-subgroup select, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .sub-fields .form-subgroup select,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .sub-fields .form-subgroup select, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .sub-fields .form-subgroup select,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .sub-fields .form-subgroup select {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #f9f9f9;
  transition: border-color 0.3s;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .sub-fields .form-subgroup select:focus,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .sub-fields .form-subgroup select:focus, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .sub-fields .form-subgroup select:focus,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .sub-fields .form-subgroup select:focus, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .sub-fields .form-subgroup select:focus,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .sub-fields .form-subgroup select:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0 0 5px rgba(255, 189, 89, 0.5);
  background-color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .sub-fields .form-subgroup select:disabled,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .sub-fields .form-subgroup select:disabled, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .sub-fields .form-subgroup select:disabled,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .sub-fields .form-subgroup select:disabled, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .sub-fields .form-subgroup select:disabled,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .sub-fields .form-subgroup select:disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button {
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #ddd;
  color: #444;
  transition: background-color 0.3s ease;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button:hover,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button:hover,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button:hover,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button:hover {
  background-color: #ccc;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.edit-btn,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.edit-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.edit-btn,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.edit-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.edit-btn,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.edit-btn {
  background-color: #ffa500;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.edit-btn:hover,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.edit-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.edit-btn:hover,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.edit-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.edit-btn:hover,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.edit-btn:hover {
  background-color: #e69500;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.save-btn,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.save-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.save-btn,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.save-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.save-btn,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.save-btn {
  background-color: #4caf50;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.save-btn:hover,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.save-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.save-btn:hover,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.save-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.save-btn:hover,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.save-btn:hover {
  background-color: #43a047;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.cancel-btn,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.cancel-btn, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.cancel-btn,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.cancel-btn, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.cancel-btn,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.cancel-btn {
  background-color: #f44336;
  color: #fff;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.cancel-btn:hover,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.cancel-btn:hover, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.cancel-btn:hover,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.cancel-btn:hover, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.cancel-btn:hover,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.cancel-btn:hover {
  background-color: #d32f2f;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-buttons button.hidden,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-buttons button.hidden, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-buttons button.hidden,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-buttons button.hidden, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-buttons button.hidden,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-buttons button.hidden {
  display: none;
}
.agent-dashboard .dashboard-wrapper .dashboard-container form .cashback-section .field-message,
.agent-dashboard .dashboard-wrapper .dashboard-container form .commission-section .field-message, .agent-dashboard .dashboard-wrapper .matching-results-container form .cashback-section .field-message,
.agent-dashboard .dashboard-wrapper .matching-results-container form .commission-section .field-message, .agent-dashboard .dashboard-wrapper .other-info-container form .cashback-section .field-message,
.agent-dashboard .dashboard-wrapper .other-info-container form .commission-section .field-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
}
.agent-dashboard .dashboard-wrapper .matching-results-container {
  display: flex;
  flex-direction: column;
}
.agent-dashboard .select2-container {
  width: 100% !important;
}
.agent-dashboard .hidden {
  display: none !important;
}

#signwell-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
}
#signwell-overlay .signwell-container {
  position: relative;
  width: 90%;
  height: 90%;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
}
#signwell-overlay .signwell-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}
#signwell-overlay .signwell-container .signwell-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 1rem;
  cursor: pointer;
  z-index: 10000;
  transition: background-color 0.3s ease;
}
#signwell-overlay .signwell-container .signwell-close-btn:hover {
  background-color: #d32f2f;
}

.agent-profile-picture {
  margin: 20px 0;
  /* Hide the file input (triggered via button) */
}
.agent-profile-picture label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}
.agent-profile-picture .current-profile-picture {
  margin-bottom: 10px;
}
.agent-profile-picture .current-profile-picture img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.agent-profile-picture input[type=file] {
  display: none;
}
.agent-profile-picture button {
  padding: 8px 16px;
  background-color: #ffa500;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 20px;
  margin-bottom: 10px;
}
.agent-profile-picture button:hover {
  background-color: #e69500;
}

/* Crop modal styles */
#crop-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.crop-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

#crop-modal img {
  max-width: 100%;
  max-height: 80vh;
}

#crop-modal button {
  margin: 10px;
  padding: 8px 16px;
  background-color: #ffa500;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#crop-modal button:hover {
  background-color: #e69500;
}

.profile-message {
  margin-top: 10px;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 4px;
  display: none;
}
.profile-message.success {
  background-color: #dff0d8;
  color: #3c763d;
}
.profile-message.error {
  background-color: #f2dede;
  color: #a94442;
}

.agent-bio {
  margin: 20px 0;
}
.agent-bio label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}
.agent-bio .bio-display {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f9f9f9;
  margin-bottom: 10px;
}
.agent-bio .bio-display button {
  margin-top: 10px;
  padding: 6px 12px;
  background-color: #ffa500;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.agent-bio .bio-display button:hover {
  background-color: #e69500;
}
.agent-bio .bio-display #bio-content {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.agent-bio .bio-edit textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px;
  border: 1px solid #ffffff;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
}
.agent-bio .bio-edit .bio-actions {
  margin-top: 10px;
}
.agent-bio .bio-edit .bio-actions button {
  padding: 8px 16px;
  margin-right: 10px;
  background-color: #ffa500;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.agent-bio .bio-edit .bio-actions button:hover {
  background-color: #e69500;
}
.agent-bio .bio-message {
  margin-top: 10px;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 4px;
  display: none;
}
.agent-bio .bio-message.success {
  background-color: #dff0d8;
  color: #3c763d;
}
.agent-bio .bio-message.error {
  background-color: #f2dede;
  color: #a94442;
}

.verification-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  background-color: #ffffff;
  padding: 2rem;
}
.verification-page h1 {
  font-size: 2.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
}
.verification-page p {
  font-size: 1.1rem;
  color: #666;
  text-align: center;
  margin-bottom: 1.5rem;
}
.verification-page a {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #4caf50;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  font-weight: bold;
  margin-top: 1rem;
}
.verification-page a:hover {
  background-color: #43a047;
}
.verification-page .notification {
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  text-align: center;
  font-size: 1rem;
}
.verification-page .notification.success {
  background-color: #4caf50;
  color: #fff;
}
.verification-page .notification.error {
  background-color: #f44336;
  color: #fff;
}

.password-reset {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #fff;
}
.password-reset .reset-container {
  background: #fff;
  padding: 2rem;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  max-width: 400px;
  width: 100%;
  margin-top: 6rem;
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.5s ease forwards;
}
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.password-reset .reset-container h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}
.password-reset .reset-container form .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.2rem;
}
.password-reset .reset-container form .form-group label {
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #444;
}
.password-reset .reset-container form .form-group input {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}
.password-reset .reset-container form .form-group input:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0px 0px 5px rgba(255, 189, 89, 0.5);
}
.password-reset .reset-container form .form-group .password-input-group {
  position: relative;
  margin-bottom: 1rem;
  width: 100%;
}
.password-reset .reset-container form .form-group .password-input-group input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.5rem;
}
.password-reset .reset-container form .form-group .password-input-group .toggle-visibility-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.password-reset .reset-container form .form-group .password-input-group .toggle-visibility-btn:hover {
  background-color: #ffffff;
}
.password-reset .reset-container form .field-message {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
}
.password-reset .reset-container form .button-group {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.password-reset .reset-container form .button-group button {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: #4caf50;
  color: white;
}
.password-reset .reset-container form .button-group button:hover {
  background: #43a047;
}
.password-reset .reset-container form .text-center {
  text-align: center;
  margin-top: 1rem;
}
.password-reset .reset-container form .text-center a {
  color: #ffbd59;
  text-decoration: none;
}
.password-reset .reset-container form .text-center a:hover {
  text-decoration: underline;
}
.password-reset .hidden {
  display: none !important;
}

.agent-search {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #ffffff;
  /* Spinner Animation */
}
.agent-search .search-container {
  background: #fff;
  padding: 2rem;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  max-width: 1200px;
  width: 100%;
  margin-top: 6rem;
  /* Conditional sections */
  /* Sorting and Clear Filters */
  /* Loading Spinner */
  /* Results Grid */
  /* Pagination */
}
.agent-search .search-container h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}
.agent-search .search-container .form-group {
  margin-bottom: 1.2rem;
  text-align: center;
}
.agent-search .search-container .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #444;
}
.agent-search .search-container .form-group input,
.agent-search .search-container .form-group select {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
}
.agent-search .search-container .form-group input:focus,
.agent-search .search-container .form-group select:focus {
  border-color: #ffbd59;
  outline: none;
  box-shadow: 0px 0px 5px rgba(255, 189, 89, 0.5);
}
.agent-search .search-container .form-group p.explanation {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.5rem;
}
.agent-search .search-container .estimated-property-slider-container {
  text-align: center;
  margin-bottom: 20px;
}
.agent-search .search-container .estimated-property-slider-container h3 {
  font-size: 1rem;
  color: #333;
  margin-bottom: 10px;
}
.agent-search .search-container .estimated-property-slider-container .estimated-slider {
  width: 80%;
  margin: 0 auto;
}
.agent-search .search-container .estimated-property-slider-container .estimated-slider .noUi-target {
  height: 12px;
  background: linear-gradient(to right, #ddd, #ffbd59);
  border-radius: 6px;
  opacity: 0.9;
  transition: opacity 0.2s, background 0.3s ease-in-out;
}
.agent-search .search-container .estimated-property-slider-container .estimated-slider .noUi-target:hover {
  opacity: 1;
  background: linear-gradient(to right, #ddd, #f8ad3e);
}
.agent-search .search-container .estimated-property-slider-container .estimated-slider .noUi-base {
  border-radius: 6px;
}
.agent-search .search-container .estimated-property-slider-container .estimated-slider .noUi-connect {
  background: linear-gradient(to right, #ddd, #ffbd59);
  border-radius: 6px;
}
.agent-search .search-container .estimated-property-slider-container .estimated-slider .noUi-handle {
  width: 24px;
  height: 24px;
  background: #333;
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}
.agent-search .search-container .estimated-property-slider-container .estimated-slider .noUi-handle:hover {
  background: #5c5c5c;
  transform: scale(1.1);
}
.agent-search .search-container .estimated-property-slider-container .estimated-property-value {
  font-size: 1rem;
  font-weight: bold;
  color: #4caf50;
  margin-top: 10px;
}
.agent-search .search-container .cashback-section,
.agent-search .search-container .listing-fee-section,
.agent-search .search-container .general-section {
  display: block;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.agent-search .search-container .cashback-section label,
.agent-search .search-container .listing-fee-section label,
.agent-search .search-container .general-section label {
  font-weight: bold;
  color: #333;
}
.agent-search .search-container .cashback-section.hidden,
.agent-search .search-container .listing-fee-section.hidden,
.agent-search .search-container .general-section.hidden {
  display: none;
}
.agent-search .search-container .hidden {
  display: none;
}
.agent-search .search-container .form-group:last-of-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.agent-search .search-container .form-group:last-of-type label {
  display: none;
}
.agent-search .search-container .form-group:last-of-type select {
  width: auto;
}
.agent-search .search-container .form-group:last-of-type #clear-filters {
  background: none;
  border: none;
  color: #ffbd59;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
}
.agent-search .search-container #search-loading {
  text-align: center;
  margin-bottom: 1rem;
}
.agent-search .search-container #search-loading .spinner {
  border: 4px solid #eee;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}
.agent-search .search-container #agent-results .results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}
.agent-search .search-container #agent-results .agent-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  position: relative;
}
.agent-search .search-container #agent-results .agent-card .bookmark-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
}
.agent-search .search-container #agent-results .agent-card .bookmark-btn.active {
  color: #e67e22;
}
.agent-search .search-container #agent-results .agent-card img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 0.5rem;
}
.agent-search .search-container #agent-results .agent-card h3 {
  font-size: 1.1rem;
  margin: 0.5rem 0;
}
.agent-search .search-container #agent-results .agent-card .rating {
  font-size: 0.9rem;
  color: #f1c40f;
  margin: 0.25rem 0;
}
.agent-search .search-container #agent-results .agent-card .meta {
  font-size: 0.85rem;
  color: #555;
  margin: 0.25rem 0;
}
.agent-search .search-container #agent-results .agent-card .desc {
  font-size: 0.9rem;
  color: #333;
  margin: 0.5rem 0;
}
.agent-search .search-container #agent-results .agent-card .view-details-btn {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.agent-search .search-container #agent-results .agent-card .view-details-btn {
  background: #3498db;
  color: #fff;
}
.agent-search .search-container #agent-results .agent-card .view-details-btn:hover {
  background: #2980b9;
}
.agent-search .search-container #agent-results .agent-card .estimated-cashback {
  font-size: 1rem;
  color: #4caf50;
  margin-top: 5px;
}
.agent-search .search-container #agent-results .agent-card .estimated-commission {
  font-size: 1rem;
  color: #4caf50;
  margin-top: 5px;
}
.agent-search .search-container .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
  /* Next/Previous buttons as buttons */
  /* Page numbers as clickable links (non-buttons) */
}
.agent-search .search-container .pagination button.page-btn {
  padding: 0.3rem 0.6rem;
  border: none;
  border-radius: 4px;
  background: #ffbd59;
  color: #fff;
  cursor: pointer;
  margin: 0 0.25rem;
}
.agent-search .search-container .pagination button.page-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
}
.agent-search .search-container .pagination a.page-link {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  margin: 0 0.25rem;
  text-decoration: none;
  color: #ffbd59;
  transition: background 0.3s, color 0.3s;
  cursor: pointer;
}
.agent-search .search-container .pagination a.page-link:hover {
  background: #ffbd59;
  color: #fff;
}
.agent-search .search-container .pagination span.page-link.current {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  margin: 0 0.25rem;
  background: #ffbd59;
  color: #fff;
  border: 1px solid #ffbd59;
  border-radius: 4px;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* agent-details.scss */
.agent-details {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 1rem; /* Top/bottom and horizontal padding */
  background-color: #ffffff;
}
.agent-details .agent-details-container {
  background: #fff;
  padding: 2rem;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  width: 100%;
  max-width: 900px; /* Matches your member dashboard container */
  margin: 2rem auto; /* Centered with auto margins */
  /* Sub-container: Agent Header */
  /* Sub-container: Agent Rating */
  /* Sub-container: Agent Contact Info */
  /* Sub-container: Agent Info (Locations & Languages) */
  /* Sub-container: Agent Financial Details */
  /* Sub-container: Agent Bio */
  /* NEW: Sub-container: Agent Reviews */
  /* Sub-container: Agent Actions */
  /* Sub-container: Agent Actions */
}
.agent-details .agent-details-container .agent-header {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on narrow screens */
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.agent-details .agent-details-container .agent-header .agent-photo-container {
  flex-shrink: 0;
  margin: 0 auto; /* Center the photo container horizontally */
  text-align: center; /* Ensure contents (the image) are centered */
}
.agent-details .agent-details-container .agent-header .agent-photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 3px solid #3498db;
  display: inline-block;
}
.agent-details .agent-details-container .agent-header .agent-basic-info {
  flex: 1 1 100%; /* Force full width on narrow screens */
}
.agent-details .agent-details-container .agent-header .agent-basic-info .agent-name {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
  white-space: normal;
  word-wrap: break-word;
}
.agent-details .agent-details-container .agent-header .agent-basic-info .agent-designation {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 0.5rem;
  white-space: normal;
  word-wrap: break-word;
}
.agent-details .agent-details-container .agent-header .agent-basic-info .agent-brokerage {
  font-size: 1.1rem;
  color: #777;
  white-space: normal;
  word-wrap: break-word;
}
.agent-details .agent-details-container .agent-header .agent-basic-info .brokerage-address {
  font-size: 1rem;
  color: #666;
  white-space: normal;
  word-wrap: break-word;
}
.agent-details .agent-details-container .agent-rating {
  text-align: center;
  margin-bottom: 1rem;
  margin-top: 2rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
.agent-details .agent-details-container .agent-rating .rating-value {
  font-size: 1.2rem;
  color: #f1c40f;
  font-weight: bold;
}
.agent-details .agent-details-container .agent-rating .total-ratings {
  font-size: 0.9rem;
  color: #666;
}
.agent-details .agent-details-container .agent-contact-info {
  text-align: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}
.agent-details .agent-details-container .agent-contact-info p {
  font-size: 1rem;
  color: #555;
  margin: 0.3rem 0;
}
.agent-details .agent-details-container .agent-info {
  text-align: center;
  margin-bottom: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.agent-details .agent-details-container .agent-info p {
  font-size: 1rem;
  color: #444;
  margin: 0.3rem 0;
}
.agent-details .agent-details-container .agent-financial {
  text-align: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}
.agent-details .agent-details-container .agent-financial p {
  font-size: 1rem;
  color: #333;
  margin: 0.3rem 0;
}
.agent-details .agent-details-container .agent-bio {
  margin-bottom: 1.5rem;
}
.agent-details .agent-details-container .agent-bio h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 0.5rem;
}
.agent-details .agent-details-container .agent-bio p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  white-space: normal;
  word-wrap: break-word;
}
.agent-details .agent-details-container .agent-reviews {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
}
.agent-details .agent-details-container .agent-reviews h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 0.5rem;
  text-align: center;
}
.agent-details .agent-details-container .agent-reviews .reviews-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.agent-details .agent-details-container .agent-reviews .reviews-list li.review-item {
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
}
.agent-details .agent-details-container .agent-reviews .reviews-list li.review-item .review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.agent-details .agent-details-container .agent-reviews .reviews-list li.review-item .review-header .reviewer-name {
  font-weight: bold;
  color: #555;
}
.agent-details .agent-details-container .agent-reviews .reviews-list li.review-item .review-header .review-rating {
  color: #f1c40f;
}
.agent-details .agent-details-container .agent-reviews .reviews-list li.review-item .review-body {
  font-size: 1rem;
  color: #666;
  margin-top: 0.5rem;
  white-space: normal;
  word-wrap: break-word;
}
.agent-details .agent-details-container .agent-reviews .reviews-list li.review-item .review-date {
  font-size: 0.8rem;
  color: #999;
  margin-top: 0.3rem;
  text-align: right;
}
.agent-details .agent-details-container .agent-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}
.agent-details .agent-details-container .agent-actions a.back-link {
  text-decoration: none;
  color: #3498db;
  font-size: 1rem;
  transition: color 0.3s ease;
}
.agent-details .agent-details-container .agent-actions a.back-link:hover {
  color: #2980b9;
}
.agent-details .agent-details-container .agent-actions button.connect-btn,
.agent-details .agent-details-container .agent-actions button.disabled-connect-btn {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.agent-details .agent-details-container .agent-actions button.connect-btn {
  background-color: #3498db;
  color: #fff;
}
.agent-details .agent-details-container .agent-actions button.connect-btn:hover {
  background-color: #2980b9;
}
.agent-details .agent-details-container .agent-actions button.disabled-connect-btn {
  background-color: #b0b0b0;
  color: #fff;
  cursor: not-allowed;
}
.agent-details .agent-details-container .agent-actions-alt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.agent-details .agent-details-container .agent-actions-alt a.back-link-alt {
  text-decoration: none;
  color: #3498db;
  font-size: 1rem;
  transition: color 0.3s ease;
}
.agent-details .agent-details-container .agent-actions-alt a.back-link-alt:hover {
  color: #2980b9;
}
.agent-details .agent-details-container .agent-actions-alt button.connect-btn-alt,
.agent-details .agent-details-container .agent-actions-alt button.disabled-connect-btn-alt {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.agent-details .agent-details-container .agent-actions-alt button.connect-btn-alt {
  background-color: #3498db;
  color: #fff;
}
.agent-details .agent-details-container .agent-actions-alt button.connect-btn-alt:hover {
  background-color: #2980b9;
}
.agent-details .agent-details-container .agent-actions-alt button.disabled-connect-btn-alt {
  background-color: #b0b0b0;
  color: #fff;
  cursor: not-allowed;
}
.agent-details .agent-details-container .star-rating-container {
  text-align: center;
  border-top: 1px solid #ddd;
  margin-bottom: 1.5rem;
}
.agent-details .agent-details-container .star-rating {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.agent-details .agent-details-container .star {
  width: 32px;
  height: 32px;
  background-color: #ffbd59;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.agent-details .agent-details-container .star.glossy {
  background: linear-gradient(135deg, #ffdd73, #ffbd59);
}
.agent-details .agent-details-container .star.glossy:hover {
  transform: scale(1.2);
  background: linear-gradient(135deg, #ffeb99, #ffbd59);
}
.agent-details .agent-details-container .star.half {
  background: linear-gradient(90deg, #ffbd59 50%, #ccc 50%);
}
.agent-details .agent-details-container .star.half:hover {
  transform: scale(1.2);
  background: linear-gradient(90deg, #ffeb99 50%, #ddd 50%);
}
.agent-details .agent-details-container .star.empty {
  background-color: #ccc;
}
.agent-details .agent-details-container .star.empty:hover {
  transform: scale(1.1);
  background-color: #ddd;
}
.agent-details .agent-details-container .average-rating {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin-top: 10px;
}
.agent-details .agent-details-container .total-reviews {
  font-size: 0.9rem;
  color: #777;
  margin-top: 5px;
}
.agent-details .agent-details-container .rating-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Adjust spacing as needed */
}
.agent-details .agent-details-container .rating-numbers p {
  margin: 0; /* Remove default paragraph margins */
  font-size: 1rem;
  color: #555;
}
.agent-details .agent-details-container .agent-bio h2 {
  text-align: center;
}
.agent-details .agent-details-container .review-star-rating {
  display: flex;
  gap: 5px;
}
.agent-details .agent-details-container .agent-reviews .review-star-rating .star {
  width: 24px; /* Smaller than the 32px used for overall ratings */
  height: 24px;
}

.confirm-connect-btn {
  padding: 0.6rem 1.2rem;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-align: center;
  display: inline-block;
  margin-top: 1rem;
}

.confirm-connect-btn:hover {
  background-color: #2980b9;
}

/* Media query for small screens */
@media (max-width: 768px) {
  .agent-details-container {
    padding: 1.5rem;
    margin: 1rem;
  }
  .agent-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .agent-header .agent-basic-info {
    width: 100%;
  }
}
/* submit-member-details.scss */
.submit-member-details {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #ffffff;
}
.submit-member-details .form-container {
  background: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  width: 100%;
  margin: 1rem auto;
  /* Animation */
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.5s ease forwards;
}
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.submit-member-details .form-container h1 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1rem;
  color: #333;
}
.submit-member-details .form-container p {
  text-align: center;
  font-size: 1rem;
  color: #555;
}
.submit-member-details .form-container form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Bank Details: Ensure proper vertical spacing */
}
.submit-member-details .form-container form .form-group {
  display: flex;
  flex-direction: column;
}
.submit-member-details .form-container form .form-group label {
  font-weight: bold;
  color: #333;
  margin-bottom: 0.3rem;
}
.submit-member-details .form-container form .form-group input[type=text],
.submit-member-details .form-container form .form-group input[type=email],
.submit-member-details .form-container form .form-group input[type=date],
.submit-member-details .form-container form .form-group input[type=file] {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
}
.submit-member-details .form-container form .bank-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.submit-member-details .form-container form .bank-details .bank-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.submit-member-details .form-container form .bank-details .bank-field label {
  font-weight: normal;
  font-size: 0.9rem;
  color: #555;
}
.submit-member-details .form-container form .bank-details .bank-field input {
  padding: 0.5rem;
  font-size: 0.9rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.submit-member-details .form-container form .checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.submit-member-details .form-container form .checkbox-group input[type=checkbox] {
  width: 18px;
  height: 18px;
}
.submit-member-details .form-container form .checkbox-group label {
  margin: 0;
  font-size: 0.9rem;
  color: #333;
}
.submit-member-details .form-container form .small-text {
  font-size: 0.8rem;
  color: #777;
  margin-top: 0.3rem;
}
.submit-member-details .form-container form .submit-btn {
  padding: 0.8rem;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.submit-member-details .form-container form .submit-btn:hover {
  background-color: #2980b9;
}
.submit-member-details .form-container .form-message {
  text-align: center;
  margin-top: 1rem;
  font-size: 1rem;
  color: #f44336;
}
.submit-member-details .form-container .success-image {
  text-align: center;
}
.submit-member-details .form-container .success-image img {
  max-width: 150px;
  margin: 0 auto;
}
.submit-member-details .form-container .success-message {
  text-align: center;
  font-size: 1.2rem;
  color: #4caf50;
  margin-top: 1rem;
}

/* real-estate-agents.scss */
/* -------------------------------------------------- */
/*                   Entry Animation                  */
/* -------------------------------------------------- */
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* -------------------------------------------------- */
/*             Main Page Container & Centering        */
/* -------------------------------------------------- */
.agent-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 100px;
  padding-bottom: 100px;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.5s ease forwards;
  /* -------------------------------------------------- */
  /*                Hero/Banner Section                 */
  /* -------------------------------------------------- */
  /* -------------------------------------------------- */
  /*              Button Styles (Call-to-Actions)       */
  /* -------------------------------------------------- */
  /* -------------------------------------------------- */
  /*          Benefits Section ("Why Agents Love")      */
  /* -------------------------------------------------- */
  /* -------------------------------------------------- */
  /*              How It Works Section                  */
  /* -------------------------------------------------- */
  /* -------------------------------------------------- */
  /*                   FAQ Section                      */
  /* -------------------------------------------------- */
  /* -------------------------------------------------- */
  /*               Call-to-Action Section               */
  /* -------------------------------------------------- */
}
.agent-page .container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}
.agent-page .agent-banner {
  background-color: #ffffff;
  color: #fff;
  padding: 4rem 1rem;
  text-align: center;
}
.agent-page .agent-banner__title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1rem;
}
.agent-page .agent-banner__subtitle {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 2rem;
}
.agent-page .btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  transition: background 0.3s;
  /* Yellow variant; ideal for "Sign Up Now" buttons */
}
.agent-page .btn--large {
  font-size: 1.2rem;
}
.agent-page .btn--primary {
  background-color: #ffbd59;
  color: #fff;
}
.agent-page .btn--primary:hover {
  background-color: #f2a025;
}
.agent-page .btn--yellow {
  background-color: #ffbd59;
  color: #fff;
}
.agent-page .btn--yellow:hover {
  background-color: #f2a025;
}
.agent-page .agent-benefits {
  margin: 3rem 0;
  text-align: center;
}
.agent-page .agent-benefits h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #333;
}
.agent-page .agent-benefits .benefit-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.agent-page .agent-benefits .benefit-item {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  flex: 1 1 280px;
  max-width: 280px;
  text-align: left;
}
.agent-page .agent-benefits .benefit-item .benefit-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
}
.agent-page .agent-benefits .benefit-item h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #333;
}
.agent-page .agent-benefits .benefit-item p {
  font-size: 1rem;
  color: #555;
}
.agent-page .agent-howitworks {
  margin: 3rem 0;
  text-align: center;
}
.agent-page .agent-howitworks h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #333;
}
.agent-page .agent-howitworks .howitworks-steps {
  list-style: none;
  padding: 0;
}
.agent-page .agent-howitworks .howitworks-steps li {
  margin-bottom: 2rem;
}
.agent-page .agent-howitworks .howitworks-steps li h3 {
  font-size: 1.5rem;
  color: #3498db;
  margin-bottom: 0.5rem;
}
.agent-page .agent-howitworks .howitworks-steps li p {
  font-size: 1rem;
  color: #555;
}
.agent-page .agent-faq {
  margin: 3rem 0;
}
.agent-page .agent-faq h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}
.agent-page .agent-faq .faq-item {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.agent-page .agent-faq .faq-item h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #333;
}
.agent-page .agent-faq .faq-item p {
  font-size: 1rem;
  color: #555;
}
.agent-page .agent-cta {
  margin: 3rem 0;
  text-align: center;
  padding: 2rem;
}
.agent-page .agent-cta h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 1rem;
}
.agent-page .agent-cta p {
  font-size: 1.2rem;
  color: #555;
  margin-bottom: 2rem;
}

/* -------------------------------------------------- */
/*                 Responsive Adjustments             */
/* -------------------------------------------------- */
@media (max-width: 768px) {
  .agent-page {
    padding: 1rem;
  }
  .agent-banner {
    padding: 2rem 1rem;
  }
  .agent-banner__title {
    font-size: 2rem;
  }
  .agent-banner__subtitle {
    font-size: 1.2rem;
  }
  .agent-benefits .benefit-list {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}

/*# sourceMappingURL=style-index.css.map*/