/*!************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/src/main.scss ***!
  \************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);
/*!****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/src/main.scss (1) ***!
  \****************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);
/*!****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/src/main.scss (2) ***!
  \****************************************************************************************************************/
/**
*
* Testing
*
**/
/**
*
* Testing
*
**/
.container {
  position: relative;
  margin: 0 auto;
  max-width: 100vw;
  width: 100%;
  padding: 0px 25px;
}
@media (min-width: 768px) {
  .container {
    padding: 0px 50px;
    max-width: 1400px;
  }
}
@media (min-width: 1920px) {
  .container {
    padding: 0px;
    max-width: 1400px;
  }
}
.container.full-width-mobile {
  padding: 0px;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
  font-family: "Montserrat", sans-serif;
}

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

a {
  text-decoration: none;
}

ul {
  padding-left: 24px;
}

li {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px; /* Add space for custom arrow */
  background: url("http://cricticalinfo.local/wp-content/uploads/2024/02/shape.svg") no-repeat right center;
  background-size: 15px; /* Adjust the size of your custom arrow */
  background-position: calc(100% - 20px) center;
}

body {
  transition: all 0.35s linear;
  min-height: 100vh;
  height: fit-content;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}
body.open {
  overflow: hidden;
}

h1 {
  font-size: 40px;
  font-style: normal;
  font-weight: 800;
}
@media (min-width: 768px) {
  h1 {
    font-size: 70px;
  }
}

h2 {
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
}
@media (min-width: 768px) {
  h2 {
    line-height: 58px;
    font-size: 48px;
  }
}

h3 {
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
}
@media (min-width: 768px) {
  h3 {
    line-height: 40px;
    font-size: 32px;
  }
}

h4 {
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
}
@media (min-width: 768px) {
  h4 {
    line-height: normal;
    font-size: 26px;
  }
}

h5 {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}
@media (min-width: 768px) {
  h5 {
    line-height: 28px;
    font-size: 20px;
  }
}

h6 {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
}
@media (min-width: 768px) {
  h6 {
    line-height: 28px;
    font-size: 18px;
  }
}

p {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

a {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

.mobile-only {
  display: block;
}
@media (min-width: 1200px) {
  .mobile-only {
    display: none;
  }
}

.desktop-only {
  display: none !important;
}
@media (min-width: 1200px) {
  .desktop-only {
    display: block !important;
  }
}

.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  width: 300px;
  background: linear-gradient(to bottom, #2241dd, #09c1f0 50%, #abffd2);
  font-family: "Montserrat", sans-serif;
}
.dashboard-sidebar__top {
  padding-top: 20px;
}
.dashboard-sidebar__top-image {
  padding: 50px 20px;
}
.dashboard-sidebar__top-image img {
  width: 100%;
}
.dashboard-sidebar__bottom {
  border-top: 2px solid white;
  padding-top: 20px;
  padding-bottom: 70px;
}
.dashboard-sidebar__menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dashboard-sidebar__menu-item {
  cursor: pointer;
}
.dashboard-sidebar__menu-item.bottom button {
  color: black;
}
.dashboard-sidebar__menu-item:hover {
  background-color: white;
}
.dashboard-sidebar__menu-item:hover img {
  fill: blue;
}
.dashboard-sidebar__menu-item:hover button {
  color: black;
}
.dashboard-sidebar__menu-item.active {
  background-color: white;
}
.dashboard-sidebar__menu-item.active button {
  color: black;
}
.dashboard-sidebar__menu-item.active img {
  fill: red;
}
.dashboard-sidebar__menu-item div {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dashboard-sidebar__menu-item img {
  width: 30px;
}
.dashboard-sidebar__menu-item button {
  outline: none;
  background: transparent;
  border: none;
  box-shadow: none;
  color: white;
  cursor: pointer;
  font-family: "Montserrat", sans-serif !important;
}

.button {
  display: flex;
  padding: 16px 32px;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  cursor: pointer;
  border-radius: 32px;
  transition: 300ms all ease;
  color: white;
}
.button.primary-blue {
  background-color: #2241dd;
  color: white;
}
.button.width-fit {
  width: fit-content;
}

.form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
  width: 50%;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #C2E7F9;
  outline: 0;
  font-size: 1.3rem;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}
.form__field::placeholder {
  color: transparent;
}
.form__field:placeholder-shown ~ .form__label {
  font-size: 1.3rem;
  cursor: text;
  top: 20px;
}

.form__label {
  position: absolute;
  top: 0;
  display: block;
  font-size: 14px;
  font-weight: bold;
}

.form__required {
  color: red;
  font-size: 12px;
}

.form__field:focus {
  padding-bottom: 6px;
  font-weight: 700;
  border-width: 3px;
  border-image: linear-gradient(to right, #2241dd, #C2E7F9);
  border-image-slice: 1;
}
.form__field:focus ~ .form__label {
  position: absolute;
  top: 0;
  display: block;
  font-size: 1rem;
  color: #2241dd;
  font-weight: 700;
}

.form__field:required, .form__field:invalid {
  box-shadow: none;
}

.referrals-table {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  max-height: 500px;
  margin-bottom: 150px;
}
.referrals-table__table {
  height: 100%;
}
.referrals-table__table-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.referrals-table__table-tab {
  width: fit-content;
  background-color: #2241dd;
  padding: 16px 24px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  color: white;
  cursor: pointer;
}
.referrals-table__table-tab.active {
  background-color: white;
  color: #0A2766;
  box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.15), 10px 0 10px -10px rgba(0, 0, 0, 0.15), -10px 0 10px -10px rgba(0, 0, 0, 0.15); /* Left */
}
.referrals-table__table-tab.active h5 {
  padding-left: 4px;
  border-left: 4px solid #abffd2;
}
.referrals-table__table-main {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding: 20px;
  overflow-y: scroll;
  max-height: 520px;
}
.referrals-table__table-main.full-height {
  height: fit-content;
  max-height: 75vh;
}
.referrals-table__table-content-header {
  display: flex;
  align-items: center;
  padding: 5px 20px;
}
.referrals-table__table-content-header__data.type {
  width: 15%;
}
.referrals-table__table-content-header__data.connection {
  width: 20%;
}
.referrals-table__table-content-header__data.client {
  width: 20%;
}
.referrals-table__table-content-header__data.status {
  width: 15%;
}
.referrals-table__table-content-header__data.referral {
  width: 20%;
}
.referrals-table__table-content-header__data.button {
  width: 10%;
}
.referrals-table__table-content-data {
  display: flex;
  flex-direction: column;
}
.referrals-table__table-content-data__row {
  display: flex;
  align-items: center;
  border: 2px solid #C2E7F9;
  border-bottom: none;
  padding: 5px 20px;
}
.referrals-table__table-content-data__row:last-child {
  border-bottom: 2px solid #C2E7F9;
}
.referrals-table__table-content-data__row-content {
  padding: 15px 0px;
}
.referrals-table__table-content-data__row-content.type {
  width: 15%;
}
.referrals-table__table-content-data__row-content.type div {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: fit-content;
  min-width: 120px;
  font-size: 18px;
  font-weight: bold;
  padding: 12px;
}
.referrals-table__table-content-data__row-content.connection {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 20%;
}
.referrals-table__table-content-data__row-content.connection h4 {
  color: #0A2766;
}
.referrals-table__table-content-data__row-content.connection span {
  font-size: 16px;
}
.referrals-table__table-content-data__row-content.connection img {
  height: 40px;
  border-radius: 50%;
}
.referrals-table__table-content-data__row-content.connection div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.referrals-table__table-content-data__row-content.client {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20%;
}
.referrals-table__table-content-data__row-content.client h4 {
  color: #0A2766;
}
.referrals-table__table-content-data__row-content.client span {
  font-size: 16px;
}
.referrals-table__table-content-data__row-content.status {
  width: 15%;
}
.referrals-table__table-content-data__row-content.referral {
  width: 20%;
}
.referrals-table__table-content-data__row-content.referral span {
  font-size: 16px;
}
.referrals-table__table-content-data__row-content.button {
  width: 10%;
}
.referrals-table__table-content-data__row-content.button a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #abffd2;
  border-radius: 50%;
  padding: 10px;
  width: 40px;
  height: 40px;
}
.referrals-table__table-content-data__row-content.button a img {
  width: 16px;
  object-fit: cover;
}
.referrals-table__table-content.active {
  display: flex;
  align-items: center;
}
.referrals-table__table-content.hidden {
  display: none;
}

#star-rating {
  display: flex;
  flex-direction: column;
  /* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
  /* make hover effect work properly in IE */
  /* hide radio inputs */
  /* set icon padding and size */
  /* add padding and positioning to half star labels */
  /* set default star color */
  /* set color of none icon when unchecked */
  /* if none icon is checked, make it red */
  /* if any input is checked, make its following siblings grey */
  /* make all stars orange on rating group hover */
  /* make hovered input's following siblings grey on hover */
  /* make none icon grey on rating group hover */
  /* make none icon red on hover */
}
#star-rating.disabled .rating__input:hover ~ .rating__label .rating__icon--star,
#star-rating.disabled .rating__input:hover ~ .rating__label--half .rating__icon--star {
  color: inherit !important;
  background-color: inherit !important;
  text-decoration: none !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}
#star-rating .rating-group {
  display: inline-flex;
}
#star-rating .rating__icon {
  pointer-events: none;
}
#star-rating .rating__input {
  position: absolute !important;
  left: -9999px !important;
}
#star-rating .rating__label {
  cursor: pointer;
  /* if you change the left/right padding, update the margin-right property of .rating__label--half as well. */
  padding: 0 0.1em;
  font-size: 50px;
}
#star-rating .rating__label--half {
  padding-right: 0;
  margin-right: -0.6em;
  z-index: 2;
}
#star-rating .rating__icon--star {
  color: #abffd2;
}
#star-rating .rating__icon--none {
  color: #eee;
}
#star-rating .rating__input--none:checked + .rating__label .rating__icon--none {
  color: red;
}
#star-rating .rating__input:checked ~ .rating__label .rating__icon--star {
  color: #ddd;
}
#star-rating .rating-group:hover .rating__label .rating__icon--star,
#star-rating .rating-group:hover .rating__label--half .rating__icon--star {
  color: #abffd2;
}
#star-rating .rating__input:hover ~ .rating__label .rating__icon--star,
#star-rating .rating__input:hover ~ .rating__label--half .rating__icon--star {
  color: #ddd;
}
#star-rating .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
  color: #eee;
}
#star-rating .rating__input--none:hover + .rating__label .rating__icon--none {
  color: red;
}

.referral-modal__overlay {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
}
.referral-modal__overlay.active {
  visibility: visible;
}

.referral-modal {
  visibility: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: scroll;
  height: fit-content;
  background-color: white;
  border-radius: 16px;
  z-index: 10;
  padding: 50px;
}
.referral-modal.active {
  visibility: visible;
}
.referral-modal header {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.referral-modal__tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.referral-modal__tabs-tab {
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  font-size: 16px;
  width: fit-content;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  cursor: pointer;
  border-radius: 32px;
  background-color: #C2E7F9;
  color: #2241dd;
}
.referral-modal__tabs-tab.active {
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  cursor: pointer;
  border-radius: 32px;
  background-color: #2241dd;
  color: white;
}
.referral-modal__form form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.referral-modal__form form div {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.referral-modal__form form button {
  display: flex;
  padding: 16px 32px;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  cursor: pointer;
  border-radius: 32px;
  transition: 300ms all ease;
  background-color: #2241dd;
  color: white;
}
.referral-modal__form form select {
  margin: 30px 0px 20px 0px;
}
.referral-modal__form.active {
  display: block;
}
.referral-modal__form.hidden {
  display: none;
}

.events-modal__overlay {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
}
.events-modal__overlay.active {
  visibility: visible;
}

.events-modal {
  visibility: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: scroll;
  height: fit-content;
  background-color: white;
  border-radius: 16px;
  z-index: 10;
  padding: 50px;
}
.events-modal header {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.events-modal.active {
  visibility: visible;
}
.events-modal__form form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
}
.events-modal__form form div {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.events-modal__form form button {
  display: flex;
  padding: 16px 32px;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  cursor: pointer;
  border-radius: 32px;
  transition: 300ms all ease;
  background-color: #2241dd;
  color: white;
}
.events-modal__form form select {
  margin: 10px 0px 5px 0px;
}

.ab-dashboard {
  display: flex;
  height: 100vh;
}
.ab-dashboard__content {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
  padding: 50px;
  overflow-y: scroll;
}
.ab-dashboard__content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ab-dashboard__content-header button {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ab-dashboard__content-header button div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 50%;
  padding: 6px;
}
.ab-dashboard__content-cards {
  display: flex;
  gap: 20px;
}
.ab-dashboard__content-cards-left {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 70%;
}
.ab-dashboard__content-cards-welcome {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #2241dd;
  color: white;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  grid-column: span 2;
}
.ab-dashboard__content-cards-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.ab-dashboard__content-cards-card img {
  width: 60px;
  height: auto;
  object-fit: cover;
}
.ab-dashboard__content-cards-right {
  width: 30%;
}
.ab-dashboard__content-cards-connections {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  height: 100%;
}
.ab-dashboard__content-cards-connections header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ab-dashboard__content-cards-connections header a img {
  width: 20px;
  height: 20px;
}

.ab-events {
  display: flex;
  height: 100vh;
}
.ab-events__content {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
  padding: 50px;
}
.ab-events__content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ab-events__content-header button {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ab-events__content-header button div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 50%;
  padding: 6px;
}
.ab-events__content-cards {
  display: flex;
  gap: 20px;
}
.ab-events__content-cards-left {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 70%;
}
.ab-events__content-cards-welcome {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #2241dd;
  color: white;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  grid-column: span 2;
}
.ab-events__content-cards-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.ab-events__content-cards-card img {
  width: auto;
  height: 80px;
  object-fit: cover;
}
.ab-events__content-cards-right {
  width: 30%;
}
.ab-events__content-cards-connections {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  height: 100%;
}
.ab-events__content-cards-connections header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ab-events__content-cards-connections header a img {
  width: 20px;
  height: 20px;
}
.ab-events__content-referrals {
  display: flex;
  flex-direction: column;
  gap: 50px;
  height: 100%;
}
.ab-events__content-table {
  height: 100%;
}
.ab-events__content-table-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.ab-events__content-table-tab {
  width: fit-content;
  background-color: #2241dd;
  padding: 16px 24px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  color: white;
}
.ab-events__content-table-tab.active {
  background-color: white;
  color: #0A2766;
  box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.15), 10px 0 10px -10px rgba(0, 0, 0, 0.15), -10px 0 10px -10px rgba(0, 0, 0, 0.15); /* Left */
}
.ab-events__content-table-tab.active h5 {
  padding-left: 4px;
  border-left: 4px solid #abffd2;
}
.ab-events__content-table-main {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  height: 80%;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding: 20px;
}
.ab-events__content-table-content.active {
  display: flex;
  align-items: center;
}
.ab-events__content-table-content.hidden {
  background-color: red;
  display: none;
}

.ab-connections {
  display: flex;
  height: 100vh;
}
.ab-connections__content {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
  padding: 50px;
}
.ab-connections__content-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ab-connections__content-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ab-connections__content-header-top button {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ab-connections__content-header-top button div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 50%;
  padding: 6px;
}
.ab-connections__content-header-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 2px solid #C2E7F9;
}
.ab-connections__content-users {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px) {
  .ab-connections__content-users {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1200px) {
  .ab-connections__content-users {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1920px) {
  .ab-connections__content-users {
    grid-template-columns: repeat(5, 1fr);
  }
}
.ab-connections__content-users__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  position: relative;
}
.ab-connections__content-users__card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 16px;
}
.ab-connections__content-users__card-main h3 {
  color: #0A2766;
}
.ab-connections__content-users__card-main-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #0A2766;
  font-size: 14px;
}
.ab-connections__content-users__card-main-referral {
  position: absolute;
  height: 30px;
  width: auto;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.ab-connections__content-users__card-main-avatar {
  border-radius: 50%;
}
.ab-connections__content-users__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid #C2E7F9;
  padding: 20px;
}
.ab-connections__content-users__card-footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ab-connections__content-users__card-footer-links.left a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-connections__content-users__card-footer-links.left img {
  height: 25px;
  cursor: pointer;
}
.ab-connections__content-users__card-footer-links.right a {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ab-connections__content-users__card-footer-links.right img {
  height: 20px;
  cursor: pointer;
}
.ab-connections__content-users__card-footer-links.right span {
  font-weight: 600;
  color: #2241dd;
}

.ab-single-connection {
  display: flex;
  height: 100vh;
}
.ab-single-connection__content {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
  padding: 50px;
}
.ab-single-connection__content-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ab-single-connection__content-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ab-single-connection__content-header-top button {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ab-single-connection__content-header-top button div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 50%;
  padding: 6px;
}
.ab-single-connection__content-header-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 2px solid #C2E7F9;
}
.ab-single-connection__content-header-bottom-links {
  display: flex;
  align-items: center;
  gap: 20px;
  width: fit-content;
  font-size: 22px;
}
.ab-single-connection__content-header-bottom-links a {
  font-weight: 300;
  color: #0A2766;
}
.ab-single-connection__content-header-bottom-links img {
  width: auto;
  height: 10px;
}
.ab-single-connection__content-header-bottom-links span {
  font-weight: bold;
}
.ab-single-connection__content-user {
  display: flex;
  flex-direction: column;
  border: 2px solid #C2E7F9;
}
.ab-single-connection__content-user-top {
  display: flex;
  gap: 50px;
  border-bottom: 2px solid #C2E7F9;
  padding: 25px;
}
.ab-single-connection__content-user-top-left {
  display: flex;
  gap: 25px;
}
.ab-single-connection__content-user-top-left__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.ab-single-connection__content-user-top-left__meta span {
  color: #0A2766;
  font-size: 14px;
}
.ab-single-connection__content-user-top-left img {
  border-radius: 50%;
}
.ab-single-connection__content-user-top-right {
  display: flex;
  justify-content: space-between;
}
.ab-single-connection__content-user-top-right__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.ab-single-connection__content-user-top-right__left img {
  height: 20px;
}
.ab-single-connection__content-user-top-right__left a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #0A2766;
  font-weight: 400;
}
.ab-single-connection__content-user-middle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #C2E7F9;
}
.ab-single-connection__content-user-middle-left, .ab-single-connection__content-user-middle-center, .ab-single-connection__content-user-middle-right {
  display: flex;
  align-items: center;
  padding: 25px;
  gap: 10px;
}
.ab-single-connection__content-user-middle-left div, .ab-single-connection__content-user-middle-center div, .ab-single-connection__content-user-middle-right div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ab-single-connection__content-user-middle img {
  width: 80px;
  height: auto;
  object-fit: cover;
}
.ab-single-connection__content-user-bottom {
  display: flex;
  flex-direction: column;
  padding: 25px;
  gap: 10px;
  color: #0A2766;
}
.ab-single-connection__content-user-bottom span {
  font-size: 14px;
  font-weight: 400;
}

.ab-single-referral {
  display: flex;
  height: 100vh;
  overflow-y: scroll;
}
.ab-single-referral__content {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
  padding: 50px;
}
.ab-single-referral__content-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ab-single-referral__content-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ab-single-referral__content-header-top-title {
  display: flex;
  align-items: center;
  gap: 25px;
}
.ab-single-referral__content-header-top-title div {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: fit-content;
  min-width: 120px;
  font-size: 18px;
  font-weight: bold;
  padding: 12px;
}
.ab-single-referral__content-header-top button {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ab-single-referral__content-header-top button div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 50%;
  padding: 6px;
}
.ab-single-referral__content-details {
  display: flex;
  gap: 20px;
}
.ab-single-referral__content-details-left {
  display: flex;
  gap: 20px;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  width: 66%;
}
.ab-single-referral__content-details-left-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-single-referral__content-details-left__left img {
  height: 100px;
  border-radius: 50%;
}
.ab-single-referral__content-details-left__right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-single-referral__content-details-left__right-left-userinfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  color: #0A2766;
}
.ab-single-referral__content-details-left__right-left-userinfo img {
  height: 20px;
}
.ab-single-referral__content-details-left__right-left-userinfo a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: #0A2766;
  font-weight: 400;
}
.ab-single-referral__content-details-left__right-left-userinfo-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-weight: bold;
  font-size: 20px;
}
.ab-single-referral__content-details-left__right-right {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #0A2766;
}
.ab-single-referral__content-details-left__right-right-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ab-single-referral__content-details-left__right-right-meta span {
  font-weight: bold;
  font-size: 20px;
}
.ab-single-referral__content-details-left__right-right-meta p {
  font-size: 18px;
  color: #0A2766;
  font-weight: 400;
}
.ab-single-referral__content-details-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  width: 34%;
}
.ab-single-referral__content-details-right-userinfo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-single-referral__content-details-right-userinfo p {
  font-size: 18px;
  color: #0A2766;
  font-weight: 400;
}
.ab-single-referral__content-details-right-userinfo__content {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0px;
  margin: 10px 0px;
  border-top: 2px solid #C2E7F9;
  border-bottom: 2px solid #C2E7F9;
}
.ab-single-referral__content-details-right-userinfo__content-avatar {
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}
.ab-single-referral__content-details-right-userinfo__content-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.ab-single-referral__content-details-right-userinfo__content-meta div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-single-referral__content-details-right-userinfo__content-meta a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #abffd2;
  border-radius: 50%;
  padding: 10px;
  width: 40px;
  height: 40px;
}
.ab-single-referral__content-details-right-userinfo__content-meta a img {
  width: 16px;
  object-fit: cover;
}
.ab-single-referral__content-details-right-userinfo__date {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-single-referral__content-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ab-single-referral__content-steps__card {
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  width: 100%;
}
.ab-single-referral__content-history {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  width: 100%;
}
.ab-single-referral__content-action {
  display: flex;
  gap: 20px;
}
.ab-single-referral__content-action-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  width: 66%;
}
.ab-single-referral__content-action-left-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-single-referral__content-action-left__right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-single-referral__content-action-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  width: 34%;
}
.ab-single-referral__content-action-right-userinfo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-single-referral__content-action-right-userinfo p {
  font-size: 18px;
  color: #0A2766;
  font-weight: 400;
}
.ab-single-referral__content-action-right-userinfo__content {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0px;
  margin: 10px 0px;
  border-top: 2px solid #C2E7F9;
  border-bottom: 2px solid #C2E7F9;
}
.ab-single-referral__content-action-right-userinfo__content-avatar {
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}
.ab-single-referral__content-action-right-userinfo__content-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.ab-single-referral__content-action-right-userinfo__content-meta div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-single-referral__content-action-right-userinfo__content-meta a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #abffd2;
  border-radius: 50%;
  padding: 10px;
  width: 40px;
  height: 40px;
}
.ab-single-referral__content-action-right-userinfo__content-meta a img {
  width: 16px;
  object-fit: cover;
}
.ab-single-referral__content-action-right-userinfo__date {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-single-referral__content-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  text-align: center;
}
.ab-single-referral__content-complete img {
  max-width: 150px;
}
.ab-single-referral__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ab-single-referral__form p {
  font-weight: bold;
  width: 100%;
}
.ab-single-referral__form div {
  width: 100%;
}
.ab-single-referral__form header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ddf4ff;
  padding: 20px;
  border-radius: 16px;
  width: 100%;
}
.ab-single-referral__form header input[type=radio] {
  display: none;
}
.ab-single-referral__form header input[type=radio]:checked + label {
  background-color: #2241dd; /* A darker shade for when checked */
  color: white;
}
.ab-single-referral__form header label {
  display: flex;
  padding: 16px 32px;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  cursor: pointer;
  border-radius: 32px;
  transition: 300ms all ease;
  color: #2241dd;
  background-color: #C2E7F9; /* Replace this with your $primary-blue variable value */
  margin: 5px;
}
.ab-single-referral__form header div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.ab-single-referral__form-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ab-single-referral__form-date input {
  padding: 10px;
}
.ab-single-referral__form-booked, .ab-single-referral__form-decision, .ab-single-referral__form-proposal {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ab-single-referral__form-booked__yes, .ab-single-referral__form-decision__yes, .ab-single-referral__form-proposal__yes {
  flex-direction: column;
}
.ab-single-referral__form-booked__no, .ab-single-referral__form-decision__no, .ab-single-referral__form-proposal__no {
  display: none;
  flex-direction: column;
}
.ab-single-referral__form-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-single-referral__form-comments textarea {
  width: 100%;
}
.ab-single-referral__recent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 2px solid #C2E7F9;
}
.ab-single-referral__recent-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 25px;
}
.ab-single-referral__recent-content-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-single-referral__recent-content-title p {
  color: #2241dd;
}
.ab-single-referral__history {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 2px solid #C2E7F9;
}
.ab-single-referral__history-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: 25px;
}
.ab-single-referral__history-content-title {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ab-single-referral__history-content-title p {
  color: #2241dd;
}

.login {
  display: flex;
  width: 100vw;
  height: 100vh;
}
.login .login__left,
.login .login__right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px;
  flex: 1;
  flex-basis: auto;
  width: 100%;
}
.login .login__left {
  background: linear-gradient(to right, #2241dd, #09c1f0 50%, #abffd2);
}
.login .login__left img {
  max-width: 300px;
}
.login .login__right-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 50px;
}

#loginform {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.login-username,
.login-password {
  width: 100%;
}

.login-username label,
.login-password label {
  display: none;
}

#user_login,
#user_pass {
  width: 100%;
  position: relative;
  height: 40px;
  outline: none;
  border: none;
  border-bottom: 1px solid #C2E7F9;
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  font-family: "Montserrat", sans-serif;
  color: #0A2766;
}

.login-remember label {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #0A2766;
}

.login-submit input {
  background-color: #2241dd;
}
.login-submit input:hover {
  background-color: #0A2766;
}

.registration {
  display: flex;
  width: 100vw;
  height: 100vh;
}
.registration .registration__left,
.registration .registration__right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px;
  flex: 1;
  flex-basis: auto;
  width: 100%;
}
.registration .registration__left {
  background: linear-gradient(to right, #2241dd, #09c1f0 50%, #abffd2);
}
.registration .registration__left img {
  max-width: 300px;
}

#registrationform {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

#register-username,
#register-password,
#register-email {
  width: 100%;
}

#register-username label,
#register-password label,
#register-email label {
  display: none;
}

#register-username,
#register-password,
#register-email {
  width: 100%;
  position: relative;
  height: 40px;
  outline: none;
  border: none;
  border-bottom: 1px solid #C2E7F9;
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  font-family: "Montserrat", sans-serif;
  color: #0A2766;
}

#register-submit {
  display: flex;
  padding: 20px 60px;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  cursor: pointer;
  border-radius: 16px;
  transition: 300ms all ease;
  color: white;
  background-color: #2241dd;
}