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

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-SemiBold.eot");
  src:
    url("../fonts/DMSans-SemiBold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/DMSans-SemiBold.woff2") format("woff2"),
    url("../fonts/DMSans-SemiBold.woff") format("woff"),
    url("../fonts/DMSans-SemiBold.ttf") format("truetype"),
    url("../fonts/DMSans-SemiBold.svg#DMSans-SemiBold") format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Medium.eot");
  src:
    url("../fonts/DMSans-Medium.eot?#iefix") format("embedded-opentype"),
    url("../fonts/DMSans-Medium.woff2") format("woff2"),
    url("../fonts/DMSans-Medium.woff") format("woff"),
    url("../fonts/DMSans-Medium.ttf") format("truetype"),
    url("../fonts/DMSans-Medium.svg#DMSans-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Bold.eot");
  src:
    url("../fonts/DMSans-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/DMSans-Bold.woff2") format("woff2"),
    url("../fonts/DMSans-Bold.woff") format("woff"),
    url("../fonts/DMSans-Bold.ttf") format("truetype"),
    url("../fonts/DMSans-Bold.svg#DMSans-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Medium.eot");
  src:
    url("../fonts/Geist-Medium.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Geist-Medium.woff2") format("woff2"),
    url("../fonts/Geist-Medium.woff") format("woff"),
    url("../fonts/Geist-Medium.ttf") format("truetype"),
    url("../fonts/Geist-Medium.svg#Geist-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Regular.eot");
  src:
    url("../fonts/Geist-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Geist-Regular.woff2") format("woff2"),
    url("../fonts/Geist-Regular.woff") format("woff"),
    url("../fonts/Geist-Regular.ttf") format("truetype"),
    url("../fonts/Geist-Regular.svg#Geist-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-SemiBold.eot");
  src:
    url("../fonts/Geist-SemiBold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Geist-SemiBold.woff2") format("woff2"),
    url("../fonts/Geist-SemiBold.woff") format("woff"),
    url("../fonts/Geist-SemiBold.ttf") format("truetype"),
    url("../fonts/Geist-SemiBold.svg#Geist-SemiBold") format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Bold.eot");
  src:
    url("../fonts/Geist-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Geist-Bold.woff2") format("woff2"),
    url("../fonts/Geist-Bold.woff") format("woff"),
    url("../fonts/Geist-Bold.ttf") format("truetype"),
    url("../fonts/Geist-Bold.svg#Geist-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Light.eot");
  src:
    url("../fonts/Geist-Light.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Geist-Light.woff2") format("woff2"),
    url("../fonts/Geist-Light.woff") format("woff"),
    url("../fonts/Geist-Light.ttf") format("truetype"),
    url("../fonts/Geist-Light.svg#Geist-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #1c2c1c;
  --color-secondary: #111110;
  --color-bg-theme: #f3f0e5;
  --color-yellow: #e3e219;
  --color-text: #505050;
  --off-white: #fcfcf5;
  --Grays-600: #595854;
  --Cream: #f3f0e5;
  --Colors-Green: #34c759;
}

body {
  font-family: "Geist", "DM Sans", sans-serif;
  font-weight: 400;
  background-color: var(--color-bg-theme);
  color: var(--color-text);
  line-height: 1.4;
  overflow-x: hidden;
  word-break: break-word;
}

.container {
  max-width: 100%;
  padding: 0 30px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "DM Sans", sans-serif;
  color: var(--color-secondary);
  margin: 0 0 0.5em 0;
  line-height: 1.2;
}

h1 {
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-secondary);
}

.heading-1 {
  font-size: 48px;
}

h2 {
  font-size: 32px;
  font-weight: 600;
}

h3 {
  font-size: 24px;
  font-weight: 600;
}

h4 {
  font-size: 20px;
  font-weight: 600;
}

h5 {
  font-size: 18px;
  font-weight: 600;
}

h6 {
  font-size: 16px;
  font-weight: 600;
}

p {
  font-family: "Geist", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.text-yellow {
  color: var(--color-yellow);
}

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

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

a {
  text-decoration: none;
  color: var(--color-secondary);
  font-size: 16px;
  line-height: 1;
}

.d-flex {
  display: flex;
  flex-wrap: wrap;
}

.flex-column {
  flex-direction: column;
}

.h-full {
  height: 100%;
}

.w-full {
  width: 100% !important;
  max-width: 100% !important;
}

.flex-1 {
  flex: 1;
}

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

.justify-center {
  justify-content: center !important;
}

.justify-end {
  justify-content: end !important;
}

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

.g-1 {
  gap: 1rem;
}

.g-2 {
  gap: 16px 32px;
}

.p-24 {
  padding: 24px;
}

form label {
  color: var(--color-secondary);
  font-size: 16px;
  line-height: 1;
}

input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]) {
  width: 100%;
  height: 45px;
  padding: 12px 16px 12px 44px;
  border: 1px solid #d9d6cc;
  border-radius: 8px;
  font-size: 16px;
}

.btn-primary {
  border-radius: 8px;
  padding: 8px 14px;
  font-family: "DM Sans";
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  border: 0;
  box-shadow: 0px 1px 1px 0px #00000040;
  display: inline-block;
}

.btn-primary:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-with-arrow {
  position: relative;
  background-color: #fff;
  padding: 17px 46px 17px 24px;
  border-radius: 8px;
  display: inline-block;
  color: var(--color-primary);
}

.btn-with-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 17px;
  height: 17px;
  background-image: url(../../images/ArrowUpRight-green.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(-50%);
}

.btn-yellow {
  background: #e3e219;
  color: #1c2c1c;
  font-family: "DM Sans";
  font-size: 16px;
  padding: 17px;
  display: inline-block;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
}

.btn-yellow:hover {
  background-color: #e3ea25;
}

.input-icon {
  position: absolute;
  top: 50%;
  left: 26px;
  transform: translate(-50%, -50%);
}

.form-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-secondary);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.form-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--color-yellow);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.form-row input[type="checkbox"]:checked {
  background-image: unset;
  background: transparent;
}

.green-btn-with-arrow,
.green-btn-download-btn {
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 8px;
  padding: 7px 37px 7px 14px;
  font-family: "DM Sans";
  font-weight: 500;
  font-size: 14px;
  border: 0;
  display: inline-block;
  position: relative;
  text-align: left;
  line-height: 1.2;
  box-shadow: 0px 1px 1px 0px #00000040;
  border: 1px solid transparent;
}

.green-btn-download-btn:hover {
  background-color: #243424;
}

.file-grid .green-btn-download-btn {
  border-radius: 5px;
}

.card-btn {
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 8px;
  padding: 7px 37px 7px 14px;
  font-family: "DM Sans";
  font-weight: 500;
  font-size: 14px;
  border: 0;
  display: inline-block;
  position: relative;
  text-align: left;
  line-height: 1.2;
  box-shadow: 0px 1px 1px 0px #00000040;
  border: 1px solid transparent;
}

.green-btn-with-arrow::before,
.green-btn-download-btn::before,
.card-btn:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate(-50%, -50%);
}

.green-btn-with-arrow::before {
  background-image: url(../../images/ArrowUpRight.svg);
}

.green-btn-download-btn::before {
  background-image: url(../../images/download-Icons.svg);
}

.green-btn-with-arrow:hover,
.green-btn:not(.welcome-page .green-btn):hover {
  background-color: #243424;
}

.delete-btn::before {
  background-image: url(../../images/Trash.svg);
}

.all-file-button,
.filterbar-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Login page */

.slider-items-wrapper {
  position: relative;
  padding-bottom: 106%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  padding: 44px;
  height: 100%;
}

.form-slider-section {
  height: calc(100vh - 34px);
  position: relative;
}

.slider-items-wrapper::before {
  position: absolute;
  content: "";
  background: linear-gradient(to bottom, #1a2c1a00 0%, #1a2c1a 100%);
  width: 100%;
  height: 75%;
  left: 0;
  bottom: 0;
}

.form-slider-section .slick-track,
.form-slider-section .slick-list {
  height: 100%;
}

.form-slider-section .slick-list {
  border-radius: 20px;
}

.admin-container {
  padding: 0 15px;
  margin-inline: auto;
}

.form-row-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding-block: 17px;
}

.form-images {
  max-width: 66.2%;
  width: 100%;
}

.form-data {
  max-width: 33%;
  width: 100%;
  padding: 63px 61px;
}

.form-desc h2 {
  font-size: 32px;
  margin-bottom: 24px;
  font-weight: 500;
}

.form-data .form-data-top-desc {
  text-align: center;
  margin-bottom: 40px;
}

.form-logo {
  margin-bottom: 97px;
}

.forgot-pswd a {
  text-decoration: solid;
  text-decoration-color: var(--color-yellow);
  text-decoration-line: underline;
}

.form-wrapper .form-row {
  margin-bottom: 16px;
  position: relative !important;
}

.remember-me-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 8px;
  justify-content: space-between;
}

.form-btn {
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 8px;
  padding: 17px 24px;
  font-family: "DM Sans";
  font-weight: 500;
  font-size: 16px;
  border: 0;
  display: block;
  position: relative;
  width: 100%;
  text-align: left;
  line-height: 1;
}

.form-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 17px;
  height: 17px;
  background-image: url(../../images/ArrowUpRight.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate(-50%, -50%);
}

.form-btn:hover {
  background-color: #243424;
}

.form-btn-wrapper {
  padding-top: 8px;
}

/* Login: full-card loader while POST is in flight */
.form-data.login-form-loading {
  position: relative;
}

.form-data.login-form-loading .timer-loader-bg {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 100;
}

.form-data.login-form-loading .timer-loader-bg:before {
  z-index: 101;
}

.form-data.login-form-loading .timer-loader {
  z-index: 102;
}

.form-images-bottom-desc :is(h2, p) {
  color: #f3f0e5;
}

.dummy-logo-text {
  font-size: 35px;
  color: #fff;
}

.form-images-bottom-desc {
  padding-bottom: 20px;
  position: relative;
  z-index: 9;
}

.form-copyright {
  text-align: center;
  max-width: 90%;
  margin-inline: auto;
  width: 100%;
}

.form-data-inner {
  width: 100%;
}

/*  */
.slick-dots {
  display: flex;
  padding-left: 40px;
  bottom: 35px;
}

.slick-dots li button:before {
  display: none;
}

.slick-dots li {
  width: auto;
  height: auto;
  margin: 0 5px;
}

.slick-dots .slick-active button {
  background-color: var(--color-yellow);
  width: 65px;
}

.slick-dots li button {
  background-color: #fff;
  width: 15px;
  height: 10px;
  border-radius: 10px;
}

.form-images-bottom-desc p {
  font-size: 18px;
  margin-bottom: 24px;
}

.form-images-bottom-desc h2 {
  font-size: 40px;
  margin-bottom: 24px;
}

.form-desc p {
  line-height: 1.4;
}

.slick-dotted.slick-slider {
  margin-bottom: 0px;
}

/* Hide the native radio */
.form-row input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-secondary);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.form-row input[type="radio"]:checked {
  background-color: transparent;
}

.form-row input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--color-yellow);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

#remember-me:hover {
  border-color: var(--color-primary);
}

.view,
.edit {
  cursor: pointer;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.form-logo svg path,
.form-logo svg #Path {
  fill: var(--color-primary);
}

.form-wrapper input[type="email"] {}

.validation-error-msg {
  color: #bf0101;
  margin: 24px 0 18px;
  font-family: Geist;
}

.popupform-wrapper .validation-error-msg {
  margin: 0;
}

/* Login page end */

/* -------------- Invoice-design ------------- */
.invoice-wrapper {
  width: 80%;
  margin: auto;
  padding: 37px 32px 27px;
}

.invoice-head {
  display: block !important;
  position: relative;
  margin-bottom: 20px;
}

.invoice-head img {
  max-width: 85px;
  height: auto;
  float: right;
}

.invoice-section {
  position: relative;
}

.invoice-section::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 207px;
  height: 365px;
  background-image: url(../../images/pdf-bg-shape.svg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  background-position: bottom -90px left;
}

.invoice-head::after {
  content: "";
  display: block;
  clear: both;
}

.invoice-head h1 {
  float: left;
  margin-bottom: 0;
  font-family: "DM Sans";
  font-weight: 700;
  font-size: 25px;
  color: #333;
}

.invoice-section .invoice-id {
  color: #111110;
}

.invoice-section h3,
.invoice-section th {
  font-size: 15px;
  font-family: "Geist";
  font-weight: 700;
}

.invoice-section p,
.invoice-section td {
  font-size: 13px;
  line-height: 1;
  color: #333;
}

.invoice-billing-col-data h3 {
  margin-bottom: 8px;
  font-family: "DM Sans";
  font-weight: 700;
}

.invoice-billing-col-data p {
  font-family: "DM Sans";
  font-weight: 500;
}

.invoice-id {
  font-family: "Geist";
  font-weight: 500;
  color: var(--color-secondary);
}

.invoice-billing-detail {
  margin-top: 30px;
}

.invoice-billing-detail p {
  font-family: "DM Sans";
  margin-bottom: 0;
  color: #333333;
}

.invoice-billing-row {
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}

.invoice-billing-row p {
  display: inline-block;
  vertical-align: top;
}

.invoice-billing-row p:nth-child(2) {
  font-weight: 700;
  color: #333333;
}

.invoice-billing-address {
  margin-top: 30px;
  display: block;
  justify-content: space-between;
}

.invoice-billing-col {
  float: left;
  width: 48%;
}

.invoice-billing-address::after {
  content: "";
  display: block;
  clear: both;
}

.invoice-billing-address p {
  margin-bottom: 8px;
}

.invoice-billing-col-data {
  margin-top: 16px;
}

.invoice-table {
  margin-top: 47px;
  border: 1px solid #e7e7e7;
  background: #fff;
  border-radius: 12px;
  padding: 20px 20px 15px;
  color: #333;
}

.invoice-table table {
  width: 100%;
  border-collapse: collapse;
}

.invoice-table th {
  text-align: left;
  padding-bottom: 8px;
  font-size: 15px;
  border-bottom: 1px solid #dbdbdb;
}

.invoice-table td {
  padding: 10px 0;
  border-bottom: 1px solid #dbdbdb;
  vertical-align: top;
  font-family: "Geist";
  font-weight: 400;
}

.invoice-table tr.subtotal td,
.invoice-table tr.vat td {
  font-weight: 500;
  padding-top: 15px;
}

.invoice-table tr.vat td {
  border: none;
  padding-top: 21px;
}

.invoice-table tr.total td {
  font-weight: 700;
  padding-top: 15px;
  font-size: 15px;
}

.invoice-table td:last-child,
.invoice-table th:last-child {
  text-align: right;
}

.invoice-table tr.total td {
  border: none;
  padding-top: 25px;
}

.invoice-payment {
  margin-top: 37px;
}

.invoice-payment-notes {
  margin-top: 30px;
}

.invoice-thankyou-msg {
  margin-top: 47px;
  padding: 12px 20px 17px;
  background-color: #f3f0e5;
  border-radius: 20px;
}

body:has(.invoice-section) {
  background-color: #fcfcf5;
}

.invoice-payment-notes h3,
.invoice-thankyou-msg h3 {
  margin-bottom: 12px;
  color: #333;
}

.invoice-payment-notes p {
  line-height: 1.5;
}

.invoice-thankyou-msg p {
  margin-bottom: 10px;
}

/* ------------ Invoice-design End ------------ */

/* ------------ Onboardign - Welcome to Virtalent Start ------------ */
.welcome-form-images {
  /* max-width: calc(50% - 40px);  */
  max-width: min(690px, 47vw);
  width: 100%;
  height: calc(100vh - 34px);
  overflow: hidden;
  border-radius: 20px;
}

.welcome-form-data {
  position: relative;
  /* max-width: calc(42% - 40px); */
  width: 100%;
  padding: 56px 88px 20px 0;
  display: flex;
  flex: 1;
  margin-inline: auto;
}

.Welcome-sidebar-image {
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.welcome-to-dash {
  background-image: url(../../images/Onboardign-Welcome-to-Virtalent.png);
}

.welcome-items-wrapper {
  padding: 48px 44px;
}

.welcome-form-data-inner {
  align-content: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
}

.welcome-bottom-sec {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: var(--color-primary);
  padding: 55px 35px 59px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 2vw, 28px);
  flex-wrap: wrap;
}

.welcome-sidebar-data {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.welcome-bottom-logo {
  display: flex;
  align-items: end;
  justify-content: center;
  height: 100%;
  flex: 1;
}

.welcome-row-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding-block: 17px;
  gap: 82px;
}

.welcome-video-box {
  margin-top: clamp(20px, 2.7vw, 40px);
}

.video-thumb {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  display: block;
  cursor: pointer;
  margin-inline: auto;
  height: 340px;
  max-width: 566px;
  width: 100%;
}

.video-thumb img {
  height: 100%;
  object-fit: cover;
  object-position: top;
  width: 100%;
  display: block;
}

.play-btn {
  display: none;
  width: 60px;
  height: 60px;
  background: var(--color-yellow);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.play-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent var(--color-primary);
  transform: translate(-50%, -50%);
}

.welcome-form-data-content {
  align-self: center;
  height: 100%;
  width: 100%;
}

.welcome-data-top-content {
  text-align: center;
}

.welcome-data-top-content {
  max-width: 39vw;
  margin-inline: auto;
}

.intro-dash-wrapper .welcome-data-top-content p {
  font-size: 20px;
}

.skip-steps {
  position: absolute;
  top: 0;
  right: 0;
}

.skip-steps a {
  color: #707070;
}

.progress-bar {
  height: 4px;
  border-radius: 8px;
  background-color: #e7e7e7;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--color-primary);
  transition: width 0.3s ease-in-out;
  border-radius: inherit;
}

.welcome-data-top-content h1 {
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -2.37px;
}

.welcome-data-top-content p {
  font-size: 20px;
  padding: 0 14px;
  line-height: 1.4;
}

.welcome-btn {
  max-width: 250px;
  width: 100%;
  margin-inline: auto;
}

.welcome-bottom-content {
  margin-top: clamp(20px, 2.7vw, 25px);
  text-align: center;
}

.follow-founder-video {
  margin-block: 3.5vh 3vh;
}

.welcome-content-progress {
  margin: clamp(30px, 3.5vw, 50px) 0 clamp(20px, 2.7vw, 40px);
}

.welcome-form-data-content .form-copyright p {
  color: #707070;
}

.welcome-bottom-logo img {
  width: 100%;
}

/* ------------ Onboardign - Welcome to Virtalent End ------------ */
.welcome-bottom-content p {
  color: var(--color-secondary);
  font-size: 20px;
}

/* -------------Onboardign - Introduction to Dash -----------------*/
body:has(.white-bg) {
  background-color: #fff;
}

body:has(.bg-off-white) {
  background-color: #fcfcf5;
}

.intro-to-dash {
  background-image: url(../../images/source_Depositphotos.png);
}

.profile-wrapper {
  position: relative;
  max-width: 240px;
  width: 100%;
  margin: clamp(1rem, 5vh, 98px) auto;
}

.profile-wrapper::before {
  position: absolute;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23c9c9c9' stroke-width='1' stroke-dasharray='5 5' rx='10' ry='10'/%3E%3C/svg%3E");
  height: 134px;
  width: 321px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 10px;
}

/* Dashed background shapes */

.dashed-box-left {
  left: -70px;
}

.dashed-box-right {
  right: -70px;
}

/* Plus buttons */
.plus-btn {
  position: absolute;
  width: 38px;
  height: 38px;
  background: #eeef2b;
  color: #000;
  font-size: 26px;
  font-weight: bold;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.plus-left {
  left: -52px;
  top: 75px;
  height: 27px;
  width: 27px;
  border-radius: 3px;
}

.plus-left svg {
  height: 13px;
  width: 13px;
}

.plus-right {
  right: -16px;
  top: auto;
  height: 63px;
  width: 63px;
  bottom: 30px;
}

.plus-right svg {
  height: 32px;
  width: 32px;
}

/* White card */
.profile-card {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  padding: 26px 22px;
  text-align: center;
  border: 1px solid #e7e7e7;
}

.profile-image-box {
  background: #f3f0e5;
  padding: 13px 34px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.profile-svg {
  width: 120px;
  height: 120px;
}

.profile-lines-wrapper {
  max-width: 122px;
  width: 100%;
}

.line {
  height: 6px;
  background: #e6e6e6;
  border-radius: 4px;
}

.line.small {
  width: 66%;
}

.line.medium {
  margin-bottom: 10px;
}


/* -------------Onboardign - Introduction to Dash End -------------*/

/* ------------- Onboardign - 4 --------------*/
.Onboardign-4 {
  background-image: url(../../images/onboarding-3.png);
}

.onboardign-monthly-plan {
  background-image: url(../../images/image-18.jpg);
}

.customer-service-wrapper {
  max-width: 321px;
  padding: 40px 35px;
  width: 100%;
  margin: auto;
  position: relative;
  margin: clamp(1rem, 6vh, 98px) auto;
}

.customer-service-wrapper::before {
  position: absolute;
  content: "";
  /* background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='321' height='224' viewBox='0 0 321 224' fill='none'%3E%3Crect x='0.5' y='0.5' width='320' height='223' rx='9.5' stroke='%23C9C9C9' stroke-dasharray='5%205' /%3E%3C/svg%3E") no-repeat center center; */
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  border: 1px dashed #c9c9c9;
}

.customer-details {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 80%;
}

.customer-details.customer-details-bottom {
  bottom: -30px;
  left: 18%;
}

.customer-details.customer-details-top {
  top: -30px;
  right: 18%;
}

.customer-service-wrapper .customer-auth-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.customer-details {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e7e7e7;
  padding: 8px;
  border-radius: 8px;
  gap: 8px;
  max-width: 80%;
  margin-inline: auto;
  max-width: 50%;
  width: 100%;
}

.customer-details.customer-details-top img {
  height: 33px;
  width: 33px;
  min-width: 33px;
}

.customer-details p {
  margin-bottom: 0;
  font-size: 14px;
  font-family: "Geist";
  color: var(--color-secondary);
}

.customer-auth-details span {
  color: #595854;
  font-size: 10px;
  font-family: "Geist";
}

.remaining-balance-box {
  background-color: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  padding: 14px 20px 19px 26px;
}

.remaining-icon-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.timer-icon {
  height: 30px;
  width: 30px;
  background: #e3e219;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remaining-icon-box p {
  color: #1a2c1a;
  font-size: 12px;
  font-family: "DM Sans";
  font-weight: 600;
}

.remaining-progress-bar {
  height: 4px;
  border-radius: 8px;
  background-color: #e7e7e7;
  overflow: hidden;
}

.remaining-progress-fill {
  height: 100%;
  background-color: var(--color-yellow);
  transition: width 0.3s ease-in-out;
  border-radius: inherit;
}

.remaining-balance-bottom h3 {
  font-family: "DM Sans";
  font-weight: 500;
  font-size: 27px;
  color: var(--color-secondary);
  margin: 16px 0 0;
}

.remaining-balance-bottom p {
  color: #595854;
  font-size: 10px;
  font-family: "Geist";
}

/* ------------- Onboardign - 4 End --------------*/

/* --------- Client dashboard ------------*/
.left-side-content li {
  list-style-type: none;
}

.profile-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
}

body:has(.offwhite-bg) {
  background-color: #fcfcf5;
}

.sidebar {
  max-width: clamp(200px, 19.5%, 350px);
  width: 100%;
  background-color: #fcfcf5;
  position: fixed;
  overflow: auto;
  height: 100%;
  background-image: url(../../images/sidebar-bg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom -170px center;
  border-right: 1px solid #e7e7e7;
  transition: transform 0.3s ease;
  z-index: 999;
}

.sidebar-menu-head {
  color: var(--color-primary, #1C2C1C);
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  margin-bottom: 24px;
}

.intro-dash-wrapper .settings-btn--topup {
  cursor: default;
}

.sidebar-logo {
  padding: 32px 24px 30px;
  height: 95px;
  border-bottom: 1px solid #e7e7e7;
}

.sidebar-wrapper {
  height: calc(100% - 95px);
  overflow: auto;
  padding: 31px 43px 60px 24px;
}

.sidebar li {
  list-style-type: none;
  font-family: "DM Sans";
  font-weight: 500;
  font-size: 16px;
  color: #707070;
}

.sidebar-dash-nav ul li a {
  color: #707070;
}

.sidebar-list-menu {
  margin-bottom: 16px;
  cursor: pointer;
}

.sidebar-top {
  flex: 1;
}

.sidebar-dash-nav {
  margin-top: 10px;
}

.nav-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 16px;
  border-radius: 5px;
  position: relative;
}

.nav-submenu li {
  padding: 10px 16px;
  position: relative;
}

:is(.nav-submenu li, .nav-menu-with-icon) a::before {
  position: absolute;
  content: "";
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.nav-menu-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.nav-submenu li a {
  width: 100%;
  display: inline-block;
}

:is(.nav-submenu li, .nav-list):hover {
  background-color: var(--Grays-50, #f3f0e5);
}

.sidebar-dash-nav>ul>li.active>.nav-list span {
  width: 100%;
}

.sidebar-dash-nav ul li.active .nav-list {
  background-color: var(--color-primary);
  color: #fff;
}

.sidebar-dash-nav ul>li.active>.nav-list a {
  color: #fff;
  display: block;
}

.sidebar-wrapper .sidebar-dash-nav ul>li.sidebar-list-menu .nav-menu-with-icon a {
  flex: 1;
}

.sidebar-dash-nav ul li.active svg:not(.angle-icon) path {
  stroke: #e3e219;
}

.sidebar-dash-nav ul li.active .billing-menu svg:not(.angle-icon) path {
  stroke: unset;
}

.sidebar-dash-nav ul li.active .billing-menu svg:not(.angle-icon) path {
  fill: #e3e219;
}

.sidebar-dash-nav ul li svg.angle-icon.open-arrow {
  stroke: #fff;
  rotate: 180deg;
}

.sidebar-dash-nav ul li.active svg.angle-icon path {
  stroke: #fff;
}

.sidebar-chat {
  margin-top: 60px;
  margin-left: 18px;
  min-height: 60px;
  height: 60px;
  width: 60px;
  min-width: 60px;
  background: var(--color-primary);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: relative;
}

.chat-count {
  position: absolute;
  top: 0;
  right: -10px;
  outline: 5px solid #fff;
  color: #fff;
  background: #e41919;
  height: 23px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.sidebar-bottom-list {
  margin-top: 65px;
}

ul.nav-submenu {
  margin: 16px 32px 0;
  display: none;
}

.sidebar-dash-nav .submenu-active a {
  color: var(--color-primary);
  font-weight: 600;
}

/* left-side-content */
.left-side-content {
  max-width: calc(100% - clamp(200px, 19.5%, 350px));
  margin-left: auto;
}

.client-dashboard-main input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]) {
  width: auto;
  border-radius: 5px;
}

.client-dashboard-main .client_header input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]) {
  width: 100%;
  border-radius: 5px;
  padding: 10px 16px 10px 50px;
  box-shadow: 0px 2px 7px 0px #00000014;
  color: #707070;
  font-family: "DM Sans";
  font-weight: 400;
  font-size: 16px;
}

.header-content-left {
  max-width: 426px;
  width: 100%;
}

.input-search-wrapper {
  position: relative;
}

.input-search-wrapper input:is(:focus, :focus-visible) {
  outline: none;
}

.input-search-wrapper img {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  width: 24px;
  object-fit: contain;
}

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

.header-right,
.header-profile-dropdown {
  display: flex;
  align-items: center;
}

.profile-img {
  height: 55px;
  width: 55px;
  min-width: 55px;
  outline: 3px solid #fff;
  border-radius: 50%;
}

.profile-desc p {
  margin: 0;
}

.alert {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: #FFF;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
  padding: 8px 16px;
}

.alert a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert span {
  color: #1A2C1A;
  text-align: center;
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

.alert img {
  height: clamp(15px, 2vw, 20px);
  width: clamp(15px, 2vw, 20px);
}

.header-right {
  gap: 18px;
}

.header-right:has() .profile-img {
  height: 56px;
  width: 56px;
  outline: 3px solid #fff;
  border-radius: 50%;
}

.profile-desc {
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-desc p {
  font-family: "DM Sans";
  color: var(--color-primary);
  font-weight: 500;
  font-size: 18px;
}

.profile-desc span {
  font-weight: 400;
  font-size: 14px;
  color: #707070;
}

.client-header-wrapper {
  padding: 12px 13px 0px 14px;
  border-bottom: 1px solid #e7e7e7;
}

.dash-profile-wrapper.active {
  position: relative;
  background: #fcfcf5;
  padding: 13px 4px;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  box-shadow: 0px 2px 7px 0px #00000014;
}

.dash-profile-wrapper {
  position: relative;
  padding: 13px 4px;
  border: 1px solid transparent;
}

.profile-menu {
  position: absolute;
  background: inherit;
  top: auto;
  right: 0;
  width: 100%;
  border-radius: 0 0 10px 10px;
  padding: 30px 13px 16px;
  list-style: none;
  display: none;
  border-bottom: 1px solid #e7e7e7;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.08);
  z-index: 99;
}

.profile-menu::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 78%;
  background: #e7e7e7;
  left: 13px;
  top: 16px;
}

.profile-menu li {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 8px;
}

.profile-menu .logout {
  margin: 0;
}

.profile-menu li a {
  font-family: "DM Sans";
  font-weight: 500;
  color: var(--color-secondary);
}

.profile-menu li a:hover {
  color: var(--Grays-600);
}

.profile-menu li:not(.logout, .info):has(a:hover) svg path {
  stroke: var(--Grays-600);
}

.profile-menu li.info:has(a:hover) svg path {
  fill: var(--Grays-600);
}

.profile-menu li.logout a:hover {
  color: rgb(228, 25, 25);
}

.welcome-banner.task-banner,
.welcome-banner.client-dash-first-banner,
.welcome-banner.banner-bg-sec {
  background: url(../../images/banner-bg.svg) no-repeat right / contain #fcfcf5;
  background-color: #fcfcf5;
}

body .admin-banner {
  background-image: url(../../images/admin-banner-bg.svg);
  background-size: auto 100%;
  background-position: right;
}

.welcome-banner {
  background: url(../../images/new-image.svg) no-repeat right / cover;
  padding: 35px 40px 35px;
  box-shadow: 0px 2px 7px 0px #00000014;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fcfcf5;
  background-size: 848px 180%;
  background-position: right 0px top -133px;
  min-height: 240px;
}

.welcome-banner h6:not(.banner-check-wrapper h6) {
  font-size: 18px;
}

.banner-btn-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 25px;
}

.banner-top-content h1 {
  margin-bottom: 15px;
  font-weight: 600;
}

.banner-top-content h2:not(.va-banner-timer-running h2) {
  font-weight: 400;
}

.banner-top-content:has(.va-banner-timer-running) .banner-top-content h2 {
  margin-bottom: 30px;
}

.banner-top-content p {
  line-height: 1.3;
}

.banner-top-content {
  margin-bottom: 40px;
}

.client-dash-first-banner .banner-top-content {
  margin-bottom: 80px;
}

.banner-top-content.timer-active {
  margin-bottom: 30px;
}

.client-dash-first-banner .banner-top-content.banner-top-content.timer-active {
  margin-bottom: 0px;
}

.banner-btn {
  font-family: "DM Sans", sans-serif;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  color: #1a2c1a;
  line-height: 1;
  padding: 14px 25px 14px 45px;
  border: 1px solid transparent;
  max-width: 213px;
  width: 100%;
  display: inline-block;
  position: relative;
  text-align: center;
  transition: background-color 0.2s ease;
  box-shadow: 0px 1px 1px 0px #00000040;
  cursor: pointer;
}

.banner-btn span {
  position: relative;
}

.banner-btn span::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 50%;
  left: -18px;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.add-btn span::before {
  background: url(../../images/PlusCircle.svg) no-repeat center center;
}

.save-btn span::before {
  background: url(../../images/ArrowCircleDown.svg) no-repeat center center;
}

.switch-plan span::before {
  background: url(../../images/GearSix.svg) no-repeat center center/contain;
}

.cancle-btn span::before {
  background: url(../../images/cancel-arrow.svg) no-repeat center center;
}

.btn-pdf span::before {
  background: url(../../images/FilePdf.svg) no-repeat center center;
}

.exel-btn span::before {
  background: url(../../images/FileXls.svg) no-repeat center center;
}

.timer-btn span::before {
  background: url(../../images/Timer.svg) no-repeat center center/contain;
}

.stripe-btn span::before {
  background: url(../../images/StripeLogo.svg) no-repeat center center;
}

.download-btn span::before {
  background: url(../../images/download-yellow-bg.svg) no-repeat center center;
}

.download-btn.green-btn span::before {
  background: url(../../images/Dowload-yellow.svg) no-repeat center center;
}

.back-btn span::before {
  background: url(../../images/button-ArrowLeft.svg) no-repeat center center;
}

.next-btn span::before {
  background: url(../../images/ArrowRight.svg) no-repeat center center;
}

.cancle-btn.yellow-bg span:before {
  filter: brightness(0.1);
}

.confirm-btn span::before {
  background: url(../../images/CheckCircle.svg) no-repeat center center;
}

.btn-va-user span::before {
  background: url(../../images/UserCirclePlus.svg) no-repeat center center;
}

.btn-plus span::before {
  background: url(../../images/user-round-plus.svg) no-repeat center center;
}

.submit-btn span::before {
  background: url(../../images/CheckCircle.svg) no-repeat center center;
}

.btn-export span::before {
  background: url(../../images/Export.svg) no-repeat center center;
}

.change-btn span::before {
  background: url(../../images/ArrowsLeftRight.svg) no-repeat center center;
}

.edit-btn span::before {
  background: url(../../images/PencilSimpleLine.svg) no-repeat center center;
}

.update-btn span::before {
  background: url(../../images/ArrowsClockwise.svg) no-repeat center center/contain;
}

.dark-bg.add-btn span::before {
  background: url(../../images/plus-circle-white.svg) no-repeat center center;
}

.yellow-bg.btn-export span::before {
  background: url(../../images/Export-green.svg) no-repeat center center;
}

.dark-bg {
  background-color: var(--color-secondary);
  color: #fff;
}

.white-btn {
  background-color: #fff;
  color: var(--color-primary);
  border: 1px solid #dbdbdb;
}

.white-btn:not(.welcome-page .white-btn):hover {
  border: 1px solid var(--Virtalent-Green, #1c2c1c);
  background: var(--Neutral-White, #fff);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
  color: var(--color-secondary);
}

.yellow-bg {
  background-color: var(--color-yellow);
  color: #1a2c1a;
}

.green-btn {
  background-color: var(--color-primary);
  color: #fff;
}

.yellow-bg:hover {
  background-color: #e3ea25;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
}

.banner-btn.archive-btn:hover {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
}

.dark-bg:hover {
  background-color: #262624;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
}

.banner-btn.archive-btn span::before {
  background: url(../../images/Archive.svg) no-repeat center center;
}

.yellow-bg.archive-btn span::before {
  background: url(../../images/Archive-black.svg) no-repeat center center;
}

.charcoal-btn {
  background-color: var(--color-secondary);
  color: #ffffff;
}

.times-sheet-wrapper:has(.custom-pagination) {
  padding-bottom: 75px;
}

.custom-pagination {
  position: absolute;
  width: 100%;
  bottom: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  bottom: 37px;
}

.dash-container {
  padding: 24px 14px 30px 14px;
}

.task-banner h5 {
  padding-top: 4px;
  color: #1c2c1c;
}

.event-content-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(244px, 1fr));
  gap: 32px;
  margin-top: 32px;
}

.event-content-card {
  background-color: #fcfcf5;
  padding: 25px 32px 32px;
  box-shadow: 0px 2px 7px 0px #00000014;
  border-radius: 10px;
  overflow: hidden;
}

.event-top-icon {
  background-color: var(--color-yellow);
  border-radius: 10px;
  height: 44px;
  width: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.event-card-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 27px;
}

.event-card-bottom {
  margin-top: 32px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px;
}

.event-card-bottom h4 {
  margin-bottom: 8px;
  font-family: "Geist";
  color: var(--color-secondary);
  font-weight: 500;
}

.event-card-bottom p {
  color: #73716c;
  font-size: 14px;
  font-family: "Geist";
}

.event-mid-section h2 {
  font-size: 48px;
  margin-bottom: 0;
  line-height: 1;
  color: var(--color-secondary);
}

.event-calandar-card .event-card-bottom {
  margin-top: 14px;
}

.event-calandar-card .event-card-top {
  margin-bottom: 18px;
}

.event-content-wrapper .progress-bar {
  height: 6px;
}

.event-btn a {
  border-radius: 5px;
  padding: 8px 37px 8px 14px;
  font-family: "DM Sans";
  font-weight: 500;
  font-size: 14px;
  border: 1px solid transparent;
  box-shadow: 0px 1px 1px 0px #00000040;
}

.button-small {
  font-weight: 500;
  font-size: 14px;
  padding: 8px 37px 8px 14px;
  border-radius: 5px;
}

.event-btn .btn-with-arrow::after {
  width: 14px;
  height: 14px;
}

.event-calandar-card .event-card-bottom h4 {
  color: #505050;
  margin-bottom: 0;
}

.client-last-col {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.client-coach-right {
  max-width: 129px;
  width: 100%;
}

.client-coach-left-col {
  flex: 1;
  padding: 18px 18px 18px 22px;
}

.client-coach-left-col :is(.btn-primary, .green-btn-with-arrow) {
  border-radius: 5px;
}

.client-coach-wrapper {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.client-coach-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}

.client-coach-top-sec h5 {
  font-weight: 500;
  font-family: "Geist";
}

.client-last-col p {
  font-size: 14px;
  margin-bottom: 13px;
}

.client-coach-top-sec {
  margin-bottom: 20px;
}

.client-coach-left-col .white-btn {
  border-color: transparent;
}

.client-coach-left-col .white-btn:hover {
  border: 1px solid var(--Virtalent-Green, #1c2c1c);
}

.news-update-section {
  padding: 28px 24px;
  background-color: #fcfcf5;
  box-shadow: 0px 2px 7px 0px #00000014;
  border-radius: 10px;
  margin-top: 32px;
}

.btn-with-arrow.white-btn:hover {
  border-radius: 5px;
  border: 1px solid var(--Virtalent-Green, #1c2c1c);
  background: var(--Neutral-White, #fff);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
}

.news-update-section h6 {
  color: var(--color-secondary);
  margin-bottom: 6px;
}

.news-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  margin-top: 30px;
}

.news-card-content {
  padding: 17px 16px;
}

.news-card-content p {
  font-size: 14px;
}

.news-card-image-wrapper {
  position: relative;
  padding-bottom: 55.7%;
}

.news-card-image-wrapper img {
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.news-card-items {
  background-color: #f3f0e5;
  max-width: calc(25% - 26.5px);
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 2px 4.8px 0px #00000026;
  transition: all 0.3s ease;
  overflow: hidden;
}

.news-card-items::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  content: "";
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}

.news-card-items:hover::before {
  -webkit-animation: circle 0.75s;
  animation: circle 0.75s;
}

.news-card-items:hover {
  transform: translateY(-5px);
}

.news-card-content :is(h6 a, p) {
  color: var(--color-secondary);
}

.news-card-content h6 a:hover {
  color: #000;
}

.news-card-wrapper {
  position: relative;
}

.news-card-content a::before {
  position: absolute;
  inset: 0;
  z-index: 9;
  content: "";
}

.mobile-menu,
.memu-close {
  display: none;
}

.mobile-menu span {
  display: block;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.bg-body-overlay-mobile {
  display: none;
}

.mobile-search {
  display: none;
}

/* Tab section */
.tab-section-main {
  margin-top: 32px;
}

.tab-list-wrapper,
.client-file-tab,
.popup-tab {
  background-color: var(--off-white);
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0px 2px 7px 0px #00000014;
}

.client-tab-content-menu {
  display: none;
}

.client-tab-content-menu.active {
  display: block;
}

.tabbing-list,
.client-file-tab-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tabbing-list-menu,
.client-file-tab-menu {
  cursor: pointer;
  background: transparent;
  flex: 1;
  text-align: center;
  border-radius: 5px;
  border: 1px solid transparent;
}

.tabbing-list-menu a,
.client-file-tab-menu a {
  color: var(--color-primary);
  font-family: "DM Sans";
  font-size: 16px;
  font-weight: 500;
  display: block;
  padding: 14px 15px;
}

.tabbing-list-menu.active,
.client-file-tab-menu.active {
  box-shadow: 0px 1px 1px 0px #00000040;
  background-color: var(--color-primary);
}

.tabbing-list-menu.active a,
.client-file-tab-menu.active a {
  color: var(--color-yellow);
}

.tabbing-list-menu a:not(.tabbing-list-menu.active a):hover {
  color: var(--color-text);
}

.tab-content-section {
  margin-top: 32px;
}

.current-task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(244px, 1fr));
  gap: 35px 33px;
}

.current-task-items {
  background: #fcfcf5;
  border-radius: 10px;
  padding: 24px;
  position: relative;
}

.va-assignees-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}


.va-more-toggle {
  cursor: pointer;
}

.va-more-popup {
  position: absolute;
  background: #fff;
  padding: 10px 13px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  border-radius: 10px;
  right: 10px;
  transform: translateY(20px);
  display: none;
  z-index: 10;
}

.va-more-wrapper.open .va-more-popup {
  display: block;
}

.va-more-popup .export-card:not(:last-child) {
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #b7aaaa75;
}

.export-profile-desc p,
.admin-report-client-desc p {
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  margin-bottom: 0;
}

.export-profile-desc span {
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  vertical-align: middle;
}

.current-task-items,
.section-padding {
  background: #fcfcf5;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0px 2px 7px 0px #00000014;
}

.current-card-top {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.current-card-icon {
  height: 44px;
  width: 44px;
  background-color: #e3e219;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.export-card {
  display: flex;
  align-items: center;
  gap: 8px;
}

.export-profile-img {
  height: 33px;
  width: 33px;
  min-width: 33px;
  outline: 2px solid #f3f0e5;
  border-radius: 50%;
  overflow: hidden;
}

.export-profile-img img {
  width: 100%;
}

.export-profile-desc p {
  font-weight: 400;
  color: #0d0d0c;
  font-size: 14px;
  line-height: 120%;
  margin-bottom: 0;
}

.export-profile-desc span {
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  vertical-align: middle;
  color: #595854;
}

.tab-card-head h3 {
  color: var(--color-primary);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 33px;
}

.tab-card-head p {
  color: var(--Grays-600);
}

.tab-card-head {
  margin-bottom: 33px;
}

.current-task-items .green-btn-with-arrow {
  border-radius: 5px;
}

.current-task-items .green-btn-with-arrow:hover {
  background-color: #243424;
}

.current-task-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.current-card-bottom {
  flex: 1;
  display: flex;
  align-items: end;
}

.times-sheet-wrapper {
  background-color: #fcfcf5;
  box-shadow: 0px 2px 7px 0px #00000014;
  padding: 32px;
  border-radius: 10px;
  position: relative;
}

.filter-input-wrapper label,
.filterbar-wrapper label {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-secondary);
  margin-right: 14px;
  font-family: "DM Sans";
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.filter-bar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.filter-input-wrapper :is(input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]),
  select) {
  height: 45px;
  border-radius: 5px;
  padding: 8px 20px 8px 16px;
  border-width: 1px;
  border: 1px solid #d9d6cc;
  color: #73716c;
  font-size: 16px;
  width: 165px;
  -webkit-appearance: none;
  font-family: "Geist";
  background: url("../../images/select-arrow.svg") no-repeat right 13px center;
  background-size: 14px 8px;
  background-color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.filter-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  -webkit-appearance: none;
  cursor: pointer;
}

.filter-input-wrapper input[type="date"] {
  text-transform: uppercase;
}

.filter-input-wrapper input[type="date"]::placeholder {
  text-transform: uppercase;
}

.time-sheet-table {
  width: 100%;
  overflow-x: auto;
}

.time-sheet-table table {
  width: 100% !important;
  border-collapse: collapse;
  font-size: 15px;
  color: #2d2d2d;
}

.common-data-table thead tr th {
  width: auto !important;
}

.table-common-width thead tr th:nth-child(-n + 5) {
  width: 19% !important;
}

.table-common-width thead tr th:nth-child(6) {
  width: 5% !important;
}

.time-sheet-table thead th {
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 12px 10px 0px;
  color: var(--color-secondary);
}

.time-sheet-table tbody td {
  padding: 9px 20px 9px 0px;
  border-bottom: 1px solid #c9c9c9;
  color: var(--color-secondary);
  font-size: 14px;
}

td.dataTables_empty {
  padding: 30px 0 !important;
  font-size: 20px !important;
}

table.dataTable:has(tbody td.dataTables_empty) thead>tr>th.sorting_asc {
  padding-right: 50px;
}

.user-profile-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-profile-wrapper img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.action-col {
  width: 40px;
  text-align: right;
}

.action-icon {
  width: 22px;
  cursor: pointer;
}

.sendtask-popup {
  max-width: 546px;
  width: 100%;
  margin: auto;
}

.add-expense-wrapper {
  max-width: 958px;
  width: 100%;
  margin: auto;
}

.add-expense-wrapper .va-insurance-drag {
  margin-inline: auto;
}

#managePopup,
.changeplan-popup {
  padding: 10px;
}

.manage-task-popup {
  max-width: 738px;
  width: 100%;
  margin: auto;
}

.popup-body {
  background: #f3f0e5;
  padding: 48px;
  border-radius: 10px;
}

.poup-logo {
  text-align: center;
  margin-bottom: 32px;
}

.popup-body h2 {
  color: var(--color-secondary);
  text-align: center;
}

.popup-body p:not(.popupform-wrapper p):not(.export-card p) {
  text-align: center;
  color: var(--color-secondary);
}

.popup-body h2+p {
  font-size: 18px;
}

.popupform-wrapper,
.add-sundry-expense-note {
  margin-top: 32px;
}

.add-sundry-expense-note p {
  text-align: left !important;
  margin-bottom: 23px;
}

.add-sundry-expense-note ul {
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--color-secondary);
}

.add-sundry-date-wrapper {
  max-width: 67%;
  gap: 24px;
}

.add-sundry-expense-note h5 {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 32px;
  position: relative;
}

.form-group label:not(.toggle label),
.client_for_our_records .va-form-row .form-group.form-col>label:not(.input-group label),
.admin-additional_hours-row>label {
  display: block;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 500;
}

.client_for_our_records .va-form-row .form-group.form-col>label:not(.input-group label) {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-secondary);
}

.client_for_our_records input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]) {
  font-size: 16px;
}

.form-group select {
  display: block;
  width: 100%;
  padding-block: 0;
  -webkit-appearance: none;
  background-image: url(../../images/green-downicon.svg);
  background-repeat: no-repeat;
  background-position: right 13px center;
}

.form-group select::is(:focus, :focus-visible) {
  outline: none;
}

.fancybox__container :focus {
  outline: none !important;
}

.form-input {
  border: 1px solid #d9d6cc;
  height: 45px;
  padding: 13px 16px;
  border-radius: 5px;
  width: 100% !important;
  font-family: "DM Sans";
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: var(--color-secondary);
}

.form-input::placeholder {
  /* color: #A19F9B; */
  color: #595854;
}

.popupform-wrapper .form-input::placeholder {
  color: #73716C;
}

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

:is(.form-group, .input-with-icon) img {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translate(50%, -50%);
  height: 20px;
  width: 20px;
  object-fit: contain;
}

.form-group:has(textarea) img {
  top: 13px;
  transform: unset;
  left: 16px;
}

.popupform-wrapper textarea {
  height: 166px;
  display: block;
  padding-left: 44px;
}

.form-button-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}

.popup-box.fancybox__content {
  background: unset;
  position: unset;
}

.fancybox__slide {
  position: relative;
}

.popup-box {
  width: 100%;
  height: auto;
}

.fancybox__content>.carousel__button.is-close {
  top: 30px;
  right: 50px;
}

.fancybox__container.is-animated:has(.popup-box) .fancybox__backdrop {
  background: var(--color-primary) !important;
}

.manage-task-top-heading {
  text-align: center;
  margin-bottom: 24px;
}

.manage-task-top-heading h2 {
  margin-bottom: 10px;
  line-height: 1;
}

.change-plan-popup .manage-task-top-heading h2,
.timer-popup h2 {
  margin-bottom: 24px;
}

.timer-popup p {
  margin-bottom: 32px;
}

.popup-cmn-top-head p {
  color: #111110;
}

.popup-cmn-top-head h2 {
  font-weight: 700;
}

.changepplan-popup-box {
  background-color: #fff;
  box-shadow: 0px 2px 7px 0px #00000014;
  padding: 23px 32px;
  border-radius: 10px;
  margin-bottom: 24px;
  border: 1px solid transparent;
}

.changepplan-popup-box.active {
  background-color: #f3f0e5;
  border: 1px solid #1c2c1c;
}

.changepplan-popup-box.disabled {
  opacity: 0.5;
}

.change-plan-popup {
  background-color: #fcfcf5;
}

.change-plan-popup .change-plan-wrapper .plan-bottom-data p {
  color: var(--Grays-600, #595854);
}

.changeplan-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  margin-bottom: 24px;
}

.changeplan-head h3 {
  margin: 0;
  flex: 1;
}

.plan-bottom-data {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.plan-bottom-data :is(p, span) {
  margin: 0;
  font-size: 14px;
  line-height: 1;
  color: #595854;
}

.popup-box.fancybox__content {
  padding: 10px;
}

.banner-overview-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  align-items: center;
  justify-content: space-between;
}

.banner-left-content {
  flex: 1;
}

.banner-right-content {
  flex: 0 0 460px;
}

.hours-log {
  background: #f3f0e5;
  border-radius: 10px;
  padding: 15px 32px;
  max-width: 311px;
  width: 100%;
  border: 1px solid #1a2c1a12;
}

.hours-log-top h6 {
  color: var(--color-primary);
  margin-bottom: 0;
}

.hours-log-top {
  display: flex;
  align-items: center;
  gap: 12px 24px;
  margin-bottom: 24px;
}

.hours-log-bottom h2 {
  margin-bottom: 8px;
  line-height: 1.2;
}

.hours-log-bottom p {
  font-size: 14px;
}

.team-card-wrapper,
.admin-opp-available-vas-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.teams-card-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
}

.teams-card-banner .welcome-banner {
  max-width: 66.9%;
  width: 100%;
  margin: 0;
  background-size: 1028px 180%;
}

:where(.admin-opp-available .admin-opp-available-vas-card,
  .banner-card-wrapper, .team-card, .file-card, .grid-items,
  .tab-profile-wrapper, .va-accout-share-note-sec, .va-conact-list,
  .va-about-content) {
  border-radius: 10px;
  background: #FCFCF5;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.08);
}

.banner-card-wrapper {
  max-width: 31.28%;
  width: 100%;
}

.top-banner-left-content p {
  color: var(--color-text);
  font-family: "Geist";
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
}

.top-banner-card-btn a {
  border-radius: 5px;
}

.top-banner-card:has(.no-image) {
  height: 100%;
}

.top-banner-card:has(.no-image) .top.banner-img,
.event-content-wrapper .client-coach-right:has(.no-image) {
  background: #1c2c1c36;
  height: 100%;
  max-width: 156px;
}

.top-banner-card:has(.no-image) .top.banner-img img {
  width: 100%;
}

.top-banner-card-details h4 {
  margin-bottom: 16px;
  color: var(--color-primary);
}

.top-banner-card {
  display: flex;
}

.top-banner-left-content {
  padding: 34px 24px 36px;
  max-width: calc(100% - 136px);
  width: 100%;
}

.top.banner-img {
  max-width: 136px;
  width: 100%;
  max-height: 240px;
  border-radius: 9px;
}

.top.banner-img img {
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  width: 100%;
  height: 240px;
}

/* --------tab teams card ------*/
.team-card {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  overflow: hidden;
}

.team-card-left {
  max-width: 212px;
  width: 100%;
  display: flex;
}

.team-card-left:has(.no-image) {
  background: #1c2c1c36;
}

.team-right-wrapper {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 16px;
}

.team-left-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 75%;
  width: 100%;
  padding-right: 30px;
  position: relative;
}

.team-left-wrapper::before {
  content: "";
  position: absolute;
  right: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: #e7e7e7;
}

.team-card-left img,
.va-conact-list-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  max-width: 24%;
  width: 100%;
  padding: 15px 32px 24px 25px;
}

.view-profile-btn a {
  width: 100%;
  max-width: 213px;
  text-align: center;
  font-weight: 500;
}

.view-profile-btn {
  margin-top: 15px;
}

.team-card-center {
  padding: 23px 0 15px 23px;
  flex: 1;
}

.team-info-row :is(a, span, p) {
  color: var(--Charcoal, #111110);
  font-family: "Geist";
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
}

.team-info-row a:hover {
  text-decoration: underline;
}

.top-banner-card-btn {
  margin-top: 10px;
}

.team-card-name {
  font-weight: 500;
  margin-bottom: 8px;
}

.team-card-role {
  font-family: "Geist";
  font-weight: 400;
}

.team-card-desc p,
.team-card-list li {
  color: var(--Charcoal, #111110);
  font-size: 14px;
  line-height: 140%;
}

.team-card-desc {
  margin: 24px 0;
  padding-right: 20px;
}

.team-card-list ul {
  columns: 150px 3;
  column-gap: 12px;
  list-style-type: disc;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  padding: 0;
  margin: 0;
}

.team-card-list ul .more-skills::before {
  display: none;
}

.team-card-list ul .more-skills-text {
  cursor: pointer;
}

.all-tasks-popup ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 25px;
}

.team-card-list ul li {
  break-inside: avoid;
  margin-bottom: 10px;
  padding: 0px 0px;
  position: relative;
  padding-left: 15px;
}

.team-card-list ul li::before {
  position: absolute;
  height: 5px;
  width: 5px;
  content: "";
  left: 0;
  background-color: var(--color-secondary);
  border-radius: 50%;
  top: 7px;
}

.team-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ------------- tab teams card end ----------------------*/

/* ---- Tab-4 file --- */
.file-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 25px 32px;
}

.file-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  gap: 24px;
  padding: 24px 32px;
  max-width: calc(33.3% - 21.33px);
  width: 100%;
}

.file-top-data {
  display: flex;
  align-items: center;
  gap: 10px 24px;
}

.file-icon {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: #f3f0e5;
  border-radius: 8px;
  background: var(--Cream, #f3f0e5);
}

.mb-0 {
  margin-bottom: 0 !important;
}

.pr-0{
  padding-right: 0 !important;
}

.d-none {
  display: none;
}

.mt-0 {
  margin-top: 0 !important;
}

.file-card p {
  color: #595854;
  line-height: 1.1;
  font-size: 14px;
}

.file-drop-area {
  margin-top: 32px;
  width: 100%;
  padding: 77px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 2px dashed var(--Grays-300, #a6a49c);
  background: #fcfcf5;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.08);
}

.file-drop-content {
  text-align: center;
}

.file-drop-icon {
  width: 48px;
  height: 48px;
  background: var(--color-yellow);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px;
}

.file-drop-content h3 {
  color: var(--color-primary);
  font-weight: 500;
  line-height: 120%;
}

.file-drop-area.drag-active {
  border-color: var(--color-yellow);
  background: #fffbd0;
}

.filter-btn-banner-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 25px 32px;
}

.filter-btn-banner-wrapper .banner-btn {
  place-self: end;
}

.additional-service-grid .current-card-top {
  margin-bottom: 25px;
  color: var(--color-primary);
}

.additional-service-grid h4 {
  color: var(--color-primary);
  margin-bottom: 16px;
}

.additional-service-grid p {
  font-size: 14px;
}

.additional-service-grid .tab-card-head,
.announcement-custom-modal h6 {
  margin-bottom: 16px;
}

/* ---- Tab-4 file ---*/
.toast {
  width: 350px;
  padding: 24px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0px 2px 7px 0px #00000014;
  display: flex;
  gap: 13px;
  opacity: 0;
  transform: translateY(-20px);
  animation: slideDown 0.35s ease-out forwards;
  font-family: "Geist", sans-serif;
  margin-bottom: 10px;
  position: relative;
}

.toast-success {
  background-color: #294629;
}

.toast-error {
  background-color: #632222;
}

.toast-info {
  background-color: #3493E0;
}

.toast-icon {
  margin-top: 1px;
}

.toast-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-right: 20px;
}

.toast-title {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 11px;
  font-weight: 700;
  font-family: "DM Sans";
  color: #ffffff;
}

.toast-message {
  font-family: "Geist";
  font-weight: 400;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: 0%;
  color: #fff;
}

.toast-close-btn {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  position: absolute;
  top: 10px;
  right: 10px;
}

/* Tab section end */

/* --- Client billing start ---*/
.toggle {
  position: relative;
  display: inline-block;
}

.toggle__input,
.step-form-section-form .toggle input[type="checkbox"] {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 99;
  opacity: 0;
  cursor: pointer;
}

.toggle__label {
  display: block;
  width: 58px;
  height: 32px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 5px;
  border: 1px solid var(--Grays-100, #d9d6cc);
  background: var(--Neutral-White, #fff);
}

.toggle__label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 24px;
  height: 24px;
  transition: left 0.3s ease;
  border-radius: 3px;
  background: var(--Grays-100, #d9d6cc);
  transform: translateY(-50%);
}

.toggle__input:checked+.toggle__label::after {
  left: 32px;
  background-color: var(--color-primary);
}

.banner-check-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.bill-payment-detail .banner-check-wrapper {
  align-items: flex-start;
}

.bill-payment-detail .banner-check-wrapper h6 {
  color: var(--color-secondary, #111110);
  font-family: "Geist";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  margin-bottom: 16px;
}

.bill-payment-detail .banner-check-wrapper p {
  color: var(--color-text);
  font-family: "Geist";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  text-align: left;
}

.banner-check-wrapper h6 {
  margin-bottom: 0;
}

.grid-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(244px, 1fr));
  gap: 32px;
}

.Email-server-configuration .grid-three {
  gap: 24px 32px;
}

.grid-items {
  padding: 24px 32px;
  align-self: stretch;
  gap: 8px;
}

.grid-items,
.slider-items-wrapper,
.form-data,
.welcome-form-data-content,
.sidebar-wrapper,
.top-banner-left-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.billing-card,
.client_edit-assign_team .meeting-card-wrapper {
  margin-top: 32px;
}

.bill-curent-plan {
  display: flex;
  align-items: center;
  gap: 24px;
}

.card-info {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
}

.bill-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  margin-bottom: 9px;
}

.billing-card {
  color: #1a2c1a;
}

.billing-card .progress-bar {
  margin-bottom: 12px;
}

.bill-card-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bill-card-bottom :is(h4, h2, p) {
  font-family: "Geist";
}

.bill-card-bottom p {
  font-size: 14px;
  color: var(--Grays-600, #595854);
}

.billing-card .bill-price {
  font-weight: 400;
  color: var(--Grays-600, #595854);
}

.bill-card-bottom h2 {
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 7px;
}

.bill-card-bottom h2 span {
  font-size: 30px;
}

.bill-card-bottom .toggle .toggle__input {
  width: auto;
}

.settings-box {
  width: 100%;
  background: #fcfcf5;
  border-radius: 10px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
  padding: 17px 24px;
  margin-top: 32px;
  box-sizing: border-box;
}

.section-space {
  margin-top: 32px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 15px 24px;
  width: 100%;
}

.settings-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  height: 45px;
  flex: 1;
  background: #fff;
  border: 1px solid #d9d6cc;
  border-radius: 5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  font-family: "DM Sans";
  justify-content: center;
  transition: background 0.2s ease-in-out;
}

.settings-btn:not(.intro-dash-wrapper .settings-btn--topup):hover {
  background-color: var(--color-yellow);
}

.settings-icon {
  width: 24px;
}

.settings-text {
  font-size: 16px;
  font-weight: 500;
  color: #1a2c1a;
  line-height: 100%;
}

.invoice-summary-table .filter-input-wrapper :is(input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]),
  select) {
  min-width: 120px;
  width: auto;
}

.current-plan-popup {
  display: flex;
  max-width: 750px;
  width: 100%;
  padding: 64px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: auto;
  border-radius: 10px;
  background: #fcfcf5;
}

.plan-info-wrapper {
  width: 100%;
  display: flex;
  padding: 40px;
  flex-direction: column;
  gap: 24px;
  align-self: stretch;
  border-radius: 10px;
  background: var(--Cream, #f3f0e5);
}

.current-plan-popup .form-button-group,
.bill-payment-detail .form-button-group {
  width: 100%;
}

.curr-plan-top-head {
  text-align: center;
}

.curr-plan-top-head h2 {
  margin-bottom: 20px;
  line-height: 1;
}

.plan-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.info-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.info-item span {
  color: var(--Charcoal, #111110);
  font-family: "Geist";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.info-item .info-value {
  font-weight: 500;
}

/* ---  Client billing end --- */
/* --------- Client dashboard end ------------*/

/* ------------------------------
   SELECT2 MAIN INPUT STYLING
--------------------------------- */
.select2-container .select2-selection--multiple {
  border: 1px solid #d9d6cc !important;
  height: auto !important;
  min-height: 45px !important;
  padding: 8px 45px 8px 16px !important;
  border-radius: 5px !important;
  font-family: "DM Sans";
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #73716c;
  display: flex !important;
  align-items: center !important;
  background: #fff;
  position: relative;
  box-sizing: border-box;
}

.select2-container.select2-container--open .select2-selection--multiple {
  padding-bottom: 16px !important;
}

.select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 !important;
  margin: 0 !important;
}

.select2-results {
  padding-block: 8px;
  border-top: 1px solid #e7e7e7;
}

/* ------------------------------
   CUSTOM DROPDOWN ARROW
--------------------------------- */
.select2-container .select2-selection--multiple:after {
  content: "";
  background-image: url("../../images/green-downicon.svg");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Hide Select2 default arrow */
.select2-container--default .select2-selection--multiple .select2-selection__arrow {
  display: none !important;
}

/* ------------------------------
   SELECTED TAG STYLE
--------------------------------- */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #f5f3eb !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: "DM Sans";
  font-size: 16px;
  box-shadow: 0 0 0 1px #e6e3da inset;

  color: var(--Charcoal, #111110);
  text-align: center;

  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  margin-top: 0;
  line-height: 120%;
  margin-left: 0;
}

button.select2-selection__clear {
  display: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: 0px !important;
  color: #333 !important;
  font-size: 0px !important;
  font-weight: 300 !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  background-image: url(../../images/X.svg);
  background-repeat: no-repeat;

  position: relative;
  display: inline-block !important;
  height: 16px;
  width: 16px;
  display: inline-block;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 0 !important;
}

.select2-container .select2-selection--single:after {
  content: "";
  background-image: url("../../images/green-downicon.svg");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  display: none;
}

.select2-container .select2-selection--single {
  height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid #d9d6cc;
  border-radius: 5px;
  padding-left: 10px;
}

/* ------------------------------
   PLACEHOLDER STYLE
--------------------------------- */
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: #73716c !important;
  font-family: "DM Sans";
}

/* ------------------------------
   DROPDOWN LIST STYLING
--------------------------------- */
.select2-container--default .select2-results__option {
  padding: 8px 12px;
  font-family: "DM Sans";
  font-size: 15px;
  color: #333;
  position: relative;
}

.select2-container--default .select2-results__option--highlighted {
  background: transparent !important;
  color: var(--color-secondary) !important;
  font-weight: 300;
}

.view-detail .export-profile-img {
  height: 41px;
  width: 41px;
  min-width: 41px;
  outline: 0;
}

.view-detail .export-profile-desc p {
  color: var(--color-secondary);
  font-family: "Geist";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.view-detail .export-profile-desc span {
  color: var(--Grays-600, #595854);
  font-family: "Geist";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

.view-detail .export-card {
  margin-top: 32px;
}

.view-detail .form-group.create-task-desc {
  margin: 32px 0 32px !important;
}

.view-detail .form-group {
  margin-bottom: 16px;
}

.bill-payment-detail {
  display: flex;
  padding: 48px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  align-self: stretch;
  border-radius: 10px;
  background: #fcfcf5;
  max-width: 546px;
  margin: auto;
}

.bill-hours-detail {
  background: #f3f0e5;
}

.bill-note-wrapper {
  display: flex;
  padding: 32px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 25px;
  align-self: stretch;
  border-radius: 10px;
  background: var(--Cream, #f3f0e5);
}

.bill-hours-detail {
  max-width: 670px;
}

.bill-payment-detail p {
  color: var(--color-secondary);
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
}

.bill-note-wrapper p {
  flex: 1;
  color: var(--color-text);
  text-align: left;
}

.bill-info-icon {
  width: 18px;
  min-width: 18px;
  height: 18px;
}

.bill-info-icon img {
  width: 100%;
  object-fit: contain;
}

.billing-popup-main {
  justify-content: center;
}

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

.billing-card-popup .poup-logo {
  margin-bottom: 95px;
}

.manage-hour-count {
  columns: 2 100px;
  column-gap: 30px;
  width: 100%;
}

.manage-hour-count .count-btn {
  display: block;
  width: 100%;
  break-inside: avoid;
  color: var(--Charcoal, #111110);
  font-family: Geist;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  text-align: left;
  padding: 16px;
  margin-bottom: 15px;
  border-radius: 5px;
  background: #fcfcf5;
  border: 0;
  cursor: pointer;
}

.manage-hour-count .count-btn:is(.active, :hover) {
  background-color: var(--color-primary);
  color: #e3e219;
  border-radius: 5px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
}

.hours-wrapper {
  width: 100%;
  border-radius: 10px;
  background: var(--Cream, #f3f0e5);
  padding: 40px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 24px;
}

.hours-wrapper form {
  width: 100%;
}

.bill-payment-detail form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bill-hours-detail .hours-wrapper {
  padding-top: 25px;
}

.bill-payment-detail .form-group {
  margin-bottom: 0;
  width: 100%;
}

.add-user-from-wrapper .hours-wrapper {
  margin-top: 8px;
}

.payment-modal-top {
  text-align: center;
}

.payment-modal-top h2 {
  margin-bottom: 24px;
}

.add-user-form-invoide {
  flex: 1;
  text-align: left;
}

.overflow-wrapper {
  overflow-y: auto;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.overflow-wrapper::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.profile-wrapper-title {
  margin-bottom: 34px;
}

.tab-profile-wrapper {
  padding: 32px 32px 64px;
}

.file-profile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  width: 100%;
}

.profile-info-form {
  width: 100%;
  max-width: calc(46.55% - 16px);
  border-radius: 10px;
  border: 1px solid #e7e7e7;
  background: var(--Cream, #f3f0e5);
  padding: 34px 73px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-info-upload {
  width: 100%;
  max-width: calc(52.7% - 16px);
  border-radius: 10px;
  border: 1px solid #e7e7e7;
  background: var(--Cream, #f3f0e5);
  padding: 26px 32px;
}

.profile-info-upload .file-drop-area {
  margin-top: 25px;
  border-radius: 4.272px;
  border: 0.427px dashed var(--Grays-300, #a6a49c);
  background: #fcfcf5;
  padding: 28px 32px;
}

.profile-info-upload .file-drop-icon {
  height: 44px;
  width: 44px;
}

.profile-info-upload .file-drop-content h5 {
  margin-bottom: 8px;
  color: #1a2c1a;
  text-align: center;
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}

.profile-info-upload .file-drop-content span {
  color: var(--Grays-600, #595854);
  text-align: center;
  font-family: "DM Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.profile-info-upload .profile-img {
  margin-inline: auto;
  width: 73px;
  height: 75px;
}

.tab-profile-wrapper .form-group {
  margin-bottom: 24px;
}

.tab-profile-wrapper .form-group:last-child {
  margin-bottom: 0;
}

.profile-save-btn {
  margin-top: 64px;
  text-align: right;
}

.coming-soon-parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  padding: 20px;
}

.coming-soon-parent h1 {
  font-size: 3rem;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.coming-soon-parent h3 {
  margin: 30px 0;
}

.coming-soon-parent img {
  height: auto;
  width: 320px;
  mix-blend-mode: darken;
}

.event-item-wrapper {
  border-radius: 10px;
  background-color: #fff;
  background: #fff;
  position: relative;
  border-radius: 8px;
  border: 1px solid #c3c3c3;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 34px 24px;
  width: 100%;
}

.event-item-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../../images/calender-bg.svg) no-repeat right / contain;
  opacity: 0.7;
  pointer-events: none;
}

.event-slider-icon {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid #c3c3c3;
}

.event-slider-desc h5 {
  color: var(--color-secondary);
  font-family: "DM Sans";
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 3px;
}

.event-slider-desc p {
  color: var(--color-secondary);
  font-family: "Geist";
  font-size: 14px;
  font-weight: 300;
  line-height: 120%;
}

.event-slider-main {
  margin-top: 23px;
}

.event-slider-main .slick-list {
  padding: 0 10% 0 0 !important;
  margin: 0 -8px;
}

.event-slider-main .slick-slide {
  margin: 0 8px;
}

.event-slider-main .slick-arrow {
  border-radius: 5px;
  border: 1px solid #e7e7e7;
  background: #fff;
  display: flex;
  width: 32px;
  height: 32px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  top: -35px;
}

.event-slider-main .slick-prev {
  left: auto;
  right: 40px;
}

.event-slider-main .slick-arrow::before {
  position: absolute;
  content: "";
  top: 50%;
  right: auto;
  left: 50%;
  width: 16px;
  height: 16px;
  background-image: url(../../images/slider-Arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate(-50%, -50%);
}

.event-slider-main .slick-arrow:hover {
  background-color: var(--color-primary);
}

.event-slider-main .slick-arrow:hover::before {
  background-image: url(../../images/sliderArrowRight.svg);
}

.event-slider-main .slick-next {
  right: 0;
}

.event-slider-main .slick-prev:hover:before {
  transform: translate(-50%, -50%) rotate(180deg);
}

.event-slider-main .slick-next:not(:hover)::before {
  transform: translate(-50%, -50%) rotate(180deg);
}

.event-content-card.card-with-bg {
  position: relative;
  display: flex;
  gap: 28px;
  flex-direction: column;
  overflow: hidden;
  justify-content: space-between;
  background: url(../../images/your-community.png) no-repeat center/cover;
}

.card-bg-top-sec {
  z-index: 9;
}

.event-content-card.card-with-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.34) 50%,
      rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.card-bg-top-sec :is(h3, p) {
  color: #fff;
}

.event-content-card.card-with-bg .btn-with-arrow {
  padding: 13px 46px 13px 24px;
  font-size: 14px;
}

.card-bg-top-sec p {
  font-size: 18px;
}

.my-client-bill .event-card-top {
  margin: 0px 0 8px;
}

.my-client-bill .event-card-bottom {
  margin: 10px 0 0;
}

.my-client-bill h3 {
  margin-bottom: 6px;
}

.client-profile-name {
  display: flex;
  width: 22px;
  min-width: 22px;
  height: 22px;
  justify-content: center;
  align-items: center;
  border-radius: 99px;
  background: #111110;
}

.client-profile-name p {
  color: #fcfcf5;
  font-family: Geist;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.filter-bar label {
  font-weight: 600;
  color: var(--color-secondary);
}

.va-dash-table table tr td:nth-child(1) {
  width: 230px;
}

.va-dash-table table tr td:nth-child(2) {
  width: 230px;
}

.va-dash-table table tr td:nth-child(3) {
  width: 210px;
}

.va-dash-table table tr td:nth-child(4) {
  width: 270px;
}

.va-dash-table table tr td:nth-child(5) {
  width: 137px;
}

.welcome-detail-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 58px;

  .banner-top-content {
    margin-bottom: 24px;
  }

  .export-card {
    margin-bottom: 16px;
  }
}

.detail-banner-left {
  /* flex: 0 0 49%; */
  flex: 1;
}

.banner-chat-box {
  flex: 0 0 460px;
}

.banner-chat-card {
  display: flex;
  border-radius: 10px;
  background: var(--Cream, #f3f0e5);
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 336px;
  width: 100%;
  /* margin-left: auto; */
}

.banner-chat-img {
  /* height: auto; */
  height: 158px;
  max-width: 109px;
  width: 100%;
}

.banner-chat-img img {
  height: 100%;
  object-fit: cover;
  width: 100%;
  border-radius: 9px;
  display: block;
}

.banner-chat-desc {
  padding: 18px 12px 18px 23px;
  max-width: calc(100% - 109px);
  flex: 1;
}

.banner-chat-desc :is(h4, h5) {
  color: var(--color-secondary);
  margin-bottom: 8px;
  line-height: 120%;
  font-style: normal;
}

.banner-chat-desc h5 {
  font-weight: 500;
}

.banner-chat-desc h4 {
  font-weight: 600;
}

.banner-chat-desc p {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
  margin-bottom: 10px;
}

.va-task-grid :is(.current-card-top, h3, .tab-card-head) {
  margin-bottom: 21px;
}

.va-task-btn-group {
  gap: 16px;
  align-items: center;
  margin-top: auto;
}

.va-task-btn-group .white-btn {
  max-width: 100px;
  width: 100%;
}

.va-client-detail-tab .tabbing-list-menu:not(.tabbing-list-menu.active):not(.tabbing-list-menu:last-child) a {
  border-right: 1px solid #e7e7e7;
}

.va-optional-select h5 {
  margin-bottom: 16px;
}

.va-optional-select p {
  margin-bottom: 24px;
  color: var(--color-secondary);
}

.timer-count-wrapper {
  padding: 24px;
  border-radius: 10px;
  background: #fcfcf5;
}

span.timer-count-num {
  color: var(--color-secondary);
  font-family: "DM Sans";
  font-size: 32px;
  font-weight: 700;
  line-height: 100%;
}

.popupform-wrapper:has(.timer-count-wrapper),
.service-email-list ul {
  margin-top: 24px;
}


.form-group:has(.timer-count-wrapper) {
  margin-bottom: 24px;
}

.va-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.va-form-row .form-col {
  flex: 1;
  margin-bottom: 0;
}

.va-form-row,
.step-form-upload-files {
  margin-bottom: 32px;
}

/* Input */
.va-form-row .input-group {
  position: relative;
}

.va-form-row .input-group label {
  position: absolute;
  top: 50%;
  left: 00px;
  transform: translateY(-50%);
  width: 100%;
  padding-left: 44px;
  pointer-events: none;
}

.va-form-row .input-group input:focus+label,
.va-form-row .input-group input:valid+label {
  display: none;
}

.va-form-row input[type="date"]::-webkit-calendar-picker-indicator,
.va-form-row input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.va-form-row input[type="date"]::-ms-clear,
.va-form-row input[type="time"]::-ms-clear {
  display: none;
}

.va-form-row input[type="date"],
.va-form-row input[type="time"] {
  appearance: textfield;
}

.va-form-row input[type="date"]::-webkit-calendar-picker-indicator,
.va-form-row input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.va-form-row input[type="date"],
.va-form-row input[type="time"] {
  color: transparent;
  caret-color: transparent;
}

:is(.view-detail .form-input,
  .view-detail .form-input::placeholder,
  .view-detail textarea.select2-search__field::placeholder,
  .va-form-row .form-col label,
  .va-form-row input[type="date"]:valid:not(:focus),
  .va-form-row input[type="time"]:valid:not(:focus)),
.date-and-time {
  font-family: "Geist";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.va-form-row .form-col:has(input[type="date"], input[type="time"]) label,
.va-form-row input[type="date"]:valid:not(:focus),
.va-form-row input[type="time"]:valid:not(:focus),
.date-and-time {
  color: var(--Grays-500, #73716C);
}


.va-form-row input[type="date"]:valid,
.va-form-row input[type="time"]:valid {
  color: var(--color-secondary) !important;
  caret-color: #000;
}


input[type="time"]:required:invalid::-webkit-datetime-edit {
  color: transparent;
}

input[type="time"]:focus::-webkit-datetime-edit,
input[type="date"]:focus::-webkit-datetime-edit {
  color: var(--Grays-500, #73716c) !important;
}

.timesheet-addtime-wrapper .form-group:has(.timer-count-wrapper) h5,
.timesheet-addtime-wrapper .timer-count-wrapper {
  margin-bottom: 16px;
}

.timesheet-addtime-wrapper .form-group:has(.timer-count-wrapper) p {
  font-weight: 400;
}

.timesheet-addtime-wrapper .form-group:has(.timer-count-wrapper) h5 {
  font-weight: 500;
}

.timesheet-addtime-wrapper .form-group:has(.timer-count-wrapper) p,
.timesheet-addtime-wrapper .form-group:has(.timer-count-wrapper) h5 {
  font-family: "Geist";
  color: var(--color-secondary);
}

.timesheet-addtime-wrapper .form-group:has(.timer-count-wrapper) {
  margin-bottom: 32px;
}

.timesheet-addtime-wrapper textarea {
  height: 113px;
}

#va-timesheet-AddTime h2 {
  margin-bottom: 24px;
}

.popupform-wrapper.timesheet-addtime-wrapper,
.credit_additional_hours .popupform-wrapper {
  margin-top: 32px;
}

.dataTables_paginate .paginate_button:not(.previous):not(.next) {
  display: none !important;
}

.dataTables_info {
  text-align: center;
  color: var(--color-secondary);
  font-family: "DM Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.dataTables_info strong {
  font-weight: 700;
}

.dataTables_wrapper div.dataTables_info {
  padding: 0 !important;
  white-space: nowrap;
}

.pagination .paginate_button.previous,
.pagination .paginate_button.next {
  position: absolute;
  bottom: -2px;
  cursor: pointer;
}

.pagination .paginate_button:is(.next, .previous) a {
  font-size: 0;
}

.pagination .paginate_button:is(.next, .previous)::before {
  position: absolute;
  content: "";
  background-image: url(../../images/data-arrow-right.svg);
  background-size: contain;
  height: 20px;
  width: 20px;
}

.pagination .paginate_button.next::before {
  right: 0;
}

.pagination .paginate_button.next {
  right: 32px;
}

.pagination .paginate_button.previous::before {
  left: 0;
}

.pagination .paginate_button.previous {
  left: 32px;
}

.pagination .paginate_button.previous::before {
  transform: rotate(180deg);
}

.paginate_button.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.va-accout-share-note-sec {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.va-accout-share-note-sec h5 {
  margin-bottom: 0;
}

.va-share-note-desc textarea {
  border-radius: 10px;
  border: 1px solid var(--Grays-100, #d9d6cc);
  background: var(--Neutral-White, #fff);
  padding: 35px 25px 35px 37px;
  height: 283px;
  resize: none;
  width: 100%;
  text-align: left;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.va-share-note-desc p {
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.share-noter-button {
  text-align: right;
}

.va-contact-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.va-conact-list {
  display: flex;
  overflow: hidden;
}

.va-conact-list-connect {
  max-width: max-content;
  width: 100%;
  gap: 15px 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.va-conact-list-items {
  display: flex;
  align-items: center;
  gap: 8px;
}

.va-conact-list-desc h2 {
  margin-bottom: 8px;
  font-size: 40px;
  line-height: 1;
}

.va-conact-list-desc p {
  color: var(--Grays-500, #73716c);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.va-conact-list-img {
  max-width: 212px;
  width: 100%;
  display: flex;
  /* max-height: 157px;
  height: 100%;*/
}

.va-cotact-right-desc {
  flex: 1;
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  align-items: center;
  column-gap: 75px;
  padding: 40px;
  width: 100%;
}

.va-conact-list-desc {
  border-right: 1px solid #e7e7e7;
  padding-right: 30px;
}

.va-conact-list-items a {
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
}

.va-conact-list-items a:hover {
  color: var(--color-primary);
}

.va-conact-list-items:has(a:hover) svg path {
  stroke: var(--color-primary);
}

.va-opportunities-cards .bill-card-top {
  margin-bottom: 0;
}

:is(.va-opportunities-cards .grid-items, .vas-info-block) {
  gap: 32px;
}

.va-opportunities-cards .grid-items:has(.toggle) .bill-card-bottom {
  gap: 20px;
}

.va-opportunities-cards .grid-items h2 {
  margin-bottom: 0;
}

.va-opportunities-cards .bill-card-bottom {
  gap: 31px;
}

.grid-items .available {
  color: #027a48;
}

.grid-items .not-available {
  color: #b42318;
}

.va-about-content .va-about-top-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.va-about-top-data h4 {
  margin-bottom: 0;
}

.va-about-you-card p {
  color: var(--color-secondary);
  line-height: 1.4;
}

.va-about-content {
  padding: 32px;
}

.va-about-content-btn {
  gap: 24px;
}

.va-about-you-card-wrapper {
  margin-top: 25px;
}

.va-about-you-card {
  display: flex;
  gap: 50px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #c9c9c9;
  padding-right: 50px;
}

.va-Overview-role-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-block: 30px;
  gap: 15px;
}

.va-overview-middle-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  width: 100%;
  max-width: 72%;
}

.va-overview-last-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
}

.va-about-you-card h6 {
  margin: 0;
}

.va-about-you-image {
  border-radius: 10px 0 0 10px;
  overflow: hidden;
  background: lightgray;
  /* height: 161px; */
  max-width: 137px;
  width: 100%;
}

.admin-about-card-wrapper .va-about-you-image {
  height: unset;
}

.admin-about-card-wrapper .va-about-you-card {
  align-items: unset;
}

.admin-about-card-wrapper .va-overview-middle-content {
  max-width: 58%;
}

.team-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.va-previous-client-name p {
  color: #707070;
  font-size: 14px;
  line-height: 120%;
}

.va-previous-client {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  flex-wrap: wrap;
  gap: 15px;
  max-width: min(100%, 890px);
  margin-bottom: 32px;
}

.va-client-skill-main {
  padding-top: 32px;
  border-top: 1px solid #c9c9c9;
}

.va-client-skill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
  justify-content: space-between;
  /*max-width: min(100%, 986px);*/
  width: 100%;
}

.va-previous-client-section h5,
.Email-server-configuration h5 {
  margin-bottom: 24px;
}

.va-client-skill-list li {
  color: #707070;
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
  list-style: disc;
}

:is(.va-client-skill-list, .service-email-list) ul {
  padding-left: 20px;
}

.va-client-skill-list li::marker {
  font-size: 14px;
}

.va-opportunities-cards:has(input:checked) .available {
  display: block;
}

.va-opportunities-cards:has(input:checked) .not-available {
  display: none;
}

.va-opportunities-cards:has(input:not(:checked)) .available {
  display: none;
}

.va-opportunities-cards:has(input:not(:checked)) .not-available,
.admin-form-communication textarea {
  display: block;
}

.va-client-skill-list h6,
.vas-info-block-items h6 {
  margin-bottom: 16px;
}

.va-edit-your-profile {
  width: 100%;
  background-color: transparent;
  position: unset;
}

.va-Edit-profile-container h2 {
  text-align: left;
  margin-bottom: 32px;
}

.va-Edit-profile-container {
  max-width: 1304px;
  width: 100%;
  margin: auto;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.va-Edit-profile-form-group {
  margin-bottom: 32px;
}

.va-Edit-profile-form-group input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]) {
  width: auto;
  padding-inline: 10px;
}

.va-Edit-profile-form-group input,
.va-Edit-profile-form-group textarea,
.va-Edit-profile-card select {
  width: 100%;
  padding: 12px;
  border: 1px solid #d9d6cc;
  color: var(--color-secondary, #111110);
  font-family: Geist;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  border-radius: 5px;
  background: #fff;
}

.va-Edit-profile-form-group textarea:not(.admin-form-communication textarea) {
  min-height: 166px;
  resize: none;

}

.va-Edit-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.va-Edit-profile-card {
  padding: 16px;
}

.va-Edit-profile-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.va-Edit-profile-card h6 {
  margin-bottom: 24px;
}

.va-Edit-profile-tags {
  list-style: none;
  padding: 0;
  margin-top: 24px;
}

.va-Edit-profile-tags li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: var(--color-secondary, #111110);
  font-family: "Geist";
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

.va-Edit-profile-tags span {
  cursor: pointer;
  color: red;
}

.item-delete img {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
}

.va-Edit-profile-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 30px;
}

.select2-results__option {
  color: var(--color-secondary, #111110);
  font-family: "DM Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
  padding-inline: 0px !important;
}

.select2-container--open .select2-selection {
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.select2-dropdown {
  border-left: 1px solid #d9d6cc !important;
  border-right: 1px solid #d9d6cc !important;
  border-bottom: 1px solid #d9d6cc !important;
  border-top: 0 !important;
  padding: 0 16px;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  background-image: none !important;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  content: "";
  display: inline-block;
  margin-left: 8px;
  width: 21px;
  bottom: auto;
  opacity: 0.6;
  right: auto;
  height: 21px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23111110'%3E%3Cpath d='M17.293 20.293a1 1 0 0 1 1.414 0L23 24.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 0-1.414Z'/%3E%3Cpath d='M23 13a1 1 0 0 1 1 1v12a1 1 0 1 1-2 0V14a1 1 0 0 1 1-1ZM5 16a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1ZM5 8a1 1 0 0 1 1-1h17a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1ZM5 24a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Z'/%3E%3C/g%3E%3C/svg%3E");
  transform: rotate3d(1, 0, 0, 175deg);
}

.times-sheet-wrapper:has(.va-banking-wrapper) {
  padding-bottom: 86px;
}

table.dataTable thead th.sorting_asc::after {
  transform: rotate(0deg);
  opacity: 0.9;
}

.va-banking-wrapper {
  margin-top: 39px;
  justify-content: space-between;
  align-items: self-start;
  gap: 30px 48px;
}

.va-banking-wrapper-inner {
  border-radius: 10px;
  border: 1px solid #c9c9c9;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.va-bank-sec {
  padding: 28px 39px;
  max-width: calc(58% - 24px);
}

.va-insurance-sec {
  padding: 28px 34px;
  max-width: calc(42% - 24px);
}

.va-banking-inner-sec {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.va-banking-wrapper :is(h2, p, h5, h6) {
  margin: 0;
}

.va-banking-btn .btn {
  padding: 13px 46px 13px 24px;
  font-size: 14px;
}

:is(.no-input-padding, .va-manage-bank-popup) input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]):not([type="date"]),
.no-input-padding textarea {
  padding: 8px 16px;
}

.va-manage-detail-wrapper {
  max-width: 958px;
  width: 100%;
  margin-inline: auto;
}

.va-manage-detail-wrapper :is(h2, p),
.va-manage-detail-wrapper .popup-body p {
  text-align: left;
}

.va-manage-detail-wrapper h2 {
  margin-bottom: 32px;
}

.va-manage-detail-wrapper .popup-body :is(p, li) {
  color: var(--color-secondary, #111110);
  font-family: "Geist";
  font-size: 18px;
  font-weight: 400;
  line-height: 120%;
}

.va-manage-detail-wrapper ul {
  margin: 0 0 24px 30px;
}

.va-manage-detail-wrapper h5 {
  margin: 24px 0;
}

.popup-light-bg {
  border-radius: 10px;
  background: #fcfcf5;
}

.va-insurance-renew-detail {
  background: #f3f0e5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 27px;
  padding: 32px;
  border-radius: 10px;
  margin-top: 32px;
}

.va-manage-detail-wrapper .va-insurance-renew-detail p {
  color: #505050;
  font-family: Geist;
  font-size: 18px;
  font-weight: 400;
  line-height: 120%;
  flex: 1;
}

.bill-info-icon {
  flex: 0 0 18px;
}

.va-insurance-drag {
  border-radius: 4.84px;
  border: 0.484px dashed #73716c;
  background: #f3f0e5;
  max-width: 564px;
  width: 100%;
  display: flex;
  padding: 18.129px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  transition: all 0.25s ease;
}

.va-manage-detail-wrapper .va-insurance-drag-text :is(span, p) {
  font-family: "DM Sans";
  margin-bottom: 0;
}

.va-manage-detail-wrapper .va-insurance-drag-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insurance-drag-icon {
  border-radius: 8px;
  background: #e3e219;
  width: 45px;
  min-width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.va-manage-detail-wrapper .form-button-group {
  justify-content: flex-end;
}

.admin-note-card-item {
  gap: 20px;
  justify-content: space-between;
  width: 100%;
}

.admin-note-card-wrapper {
  margin-top: 24px;
  display: flex;
  padding: 24px;
  gap: 53px 20px;
  flex-direction: column;
}

.admin-note-card-img {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--Cream, #f3f0e5);
}

.admin-note-mid-content {
  flex: 1;
}

.va-admin-edit-link {
  flex: 0 0 44px;
}

.view-expance-popup .form-group label:not(.toggle label) {
  margin-bottom: 10px;
  color: var(--color-secondary) !important;
  font-size: 16px;
  font-weight: 500 !important;
}

.view-expance-popup .form-group .form-input::placeholder,
.view-expance-popup .form-group .form-input,
.view-expance-popup .va-form-row .date-input {
  color: var(--color-secondary) !important;
  line-height: 1.2;
  font-weight: 400;
  font-size: 14px;
}

.view-expance-popup :is(.va-form-row, .form-group) {
  margin-bottom: 10px;
}

.view-expance-popup input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]):not([type="date"]):not(.date-input) {
  padding: 12px 16px 12px 16px;
}

.va-form-text-area {
  position: relative;
}

.admin-place-and-date-wrapper,
.payble-wrapper {
  gap: 8px;
}

.admin-place-and-date {
  gap: 4px;
}

.admin-note-mid-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-note-mid-content :is(p, h5) {
  margin-bottom: 0;
  font-family: "Geist";
}

.admin-note-mid-content p,
.admin-place-and-date h6 {
  font-size: 14px;
  line-height: 120%;
  font-family: "Geist";
}

.va-admin-edit-link a {
  color: #3493e0;
  font-family: "Geist";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}

.va-admin-row {
  max-width: calc(67% - 16px);
  width: 100%;
}

.va-admin-col-wrapper {
  gap: 32px;
}

.va-your-start {
  max-width: calc(33% - 16px);
  width: 100%;
}

.va-your-start-top-wrapper .btn-with-arrow::after {
  right: 12px;
}

.va-your-start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 100%, 9vw), 1fr));
  gap: 24px;
  margin-top: 24px;
}

.va-your-card-item {
  display: flex;
  padding: 24px;
  flex-direction: column;
  gap: 2px;
  border-radius: 10px;
  background: var(--Cream, #f3f0e5);
}

.va-your-card-item p {
  color: var(--color-secondary, #111110);
  font-family: "DM Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 120%;
}

.va-your-card-item h2 {
  color: var(--Charcoal, #111110);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
}

.client-edit-notes textarea {
  height: 222px;
  color: var(--color-secondary);
}

.client-edit-notes .admin-place-and-date-wrapper {
  margin-bottom: 32px;
  gap: 15px 32px;
}

.client-edit-notes .admin-place-and-date-wrapper p {
  color: var(--color-secondary);
}

.client-edit-notes .admin-place-and-date-wrapper .admin-place-and-date {
  gap: 8px;
}

/* Step form design */
.stepform_container {
  width: 100%;
}

.stepform_progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin-bottom: 32px;
  padding: 16px 24px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 5px;
  background: var(--Off-White, #fcfcf5);
}

.stepform_progress-btn {
  padding-bottom: 10px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: #707070;
  text-align: center;
  font-family: "DM Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
}

.step-form-popup h2 {
  text-align: left;
  line-height: 1;
}

.stepform_form {
  position: relative;
}

.stepform_panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}

.stepform_panel.js-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.stepform_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.stepform_progress-btn.js-active {
  color: var(--color-secondary);
}

/* Animation */
.stepform_panel[data-animation="fade"].js-active {
  animation: fadeIn 0.4s ease;
}

.step-form-popup {
  max-width: 883px;
  width: 100%;
  margin-inline: auto;
}

button.stepform_progress-btn::before {
  position: absolute;
  content: "";
  background: #d9d6cc;
  height: 4px;
  width: 100%;
  left: 0;
  bottom: 0;
}

.stepform_progress-btn.js-active::before {
  background: var(--color-yellow);
}

.step-form-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.step-form-column {
  flex: 1;
}

.step-form-section h5,
.create-custom-task h5 {
  margin-bottom: 32px;
  font-weight: 500;
}

.step-form-section :is(.form-group, .changepplan-popup-box, .va-form-row) {
  margin-bottom: 16px;
}

.step-form-section :is(.changepplan-popup-box, .form-group):last-child {
  margin-bottom: 0;
}

.step-form-section .form-row {
  margin-bottom: 32px;
}

.step-form-popup .popupform-wrapper textarea {
  height: 142px;
}

.step-form-popup .form-button-group {
  justify-content: flex-end;
}

.stepform_form textarea.select2-search__field::placeholder {
  color: var(--Grays-600, #595854);
}

.stepform_form textarea.select2-search__field {
  margin: 0 !important;
}

.stepform_form .changeplan-head {
  margin-bottom: 0;
}

.stepform_form .changeplan-head h4 {
  margin: 0;
  flex: 1;
}

.stepform_form .changepplan-popup-box {
  padding: 15px 24px;
}

.customer-assign-input-group input {
  font-family: "DM Sans";
  font-size: 16px;
  font-weight: 500;
}

.readonly {
  border-radius: 5px;
  background: var(--Grays-100, #d9d6cc);
}

.step-form-popup .tax-and-payment-col .form-group:has(textarea:not(.select2-search__field)) {
  flex: 1;
}

.step-form-popup .tax-and-payment-col textarea {
  height: 100%;
  resize: none;
}

.stepform_wrapper .file-drop-area {
  padding: 32px 18px;
}

.stepform_wrapper .file-drop-content p {
  color: var(--Grays-600, #595854);
  font-family: "DM Sans";
  font-size: 14px;
  line-height: 120%;
}

.stepform_wrapper .file-drop-content h6 {
  font-weight: 500;
  line-height: 1;
}

.stepform_wrapper .file-drop-icon {
  height: 45px;
  width: 45px;
}

.step-form-image-uplod .file-drop-area,
.admin_account_deactivate .bill-note-wrapper {
  margin-top: 0;
}

.admin_account_deactivate .bill-note-wrapper {
  align-items: flex-start;
}

.stepform-users-details,
.admin-form-communication .va-form-row {
  gap: 24px;
}

.half-column {
  flex: 1;
}

.step-form-items {
  margin-bottom: 32px;
}

.create-custom-task .form-group :is(input, textarea) {
  font-size: 16px;
}

.create-custom-task .form-group textarea {
  height: 72px;
  resize: none;
}

/* ===== SINGLE SELECT ONLY ===== */

/* Placeholder color (when no value selected) */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--Grays-600, #595854);
}

/* Selected value color */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #333;
}

.step-form-popup .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-secondary);
}

/* Optional: focus state */
.select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered {
  color: var(--color-secondary);
}

.select2-container--default .select2-results__option--selected {
  background-color: transparent;
}

.step-form-add-users .stepform_buttons {
  margin-top: 0;
  justify-content: end;
  gap: 10px 24px;
  flex: 0 0 65%;
}

.full-column {
  width: 100%;
}

.popupform-wrapper .input-group input:is(.date-and-time):is(:disabled, [readonly])~label {
  display: none;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #fff;
}

input:disabled,
textarea:disabled {
  background-color: #fff;
  color: #73716c;
}

:is(input, textarea):disabled::placeholder {
  color: #73716c;
}

.step-form-last h5 {
  margin-bottom: 24px;
}

.step-form-check-content {
  flex: 1;
}

.step-form-check-wrapper {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 10px;
  background: var(--Off-White, #fcfcf5);
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.08);
}

.step-form-check-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.step-form-check-items h6 {
  margin-bottom: 8px;
}

.step-form-check-content p {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.step-form-check-box {
  width: 24px;
  height: 24px;
}

.step-form-check-box input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 5px;
  border: 1px solid var(--Grays-100, #d9d6cc);
  background: var(--Neutral-White, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* CHECKED STATE */
.step-form-check-box input[type="checkbox"]:checked {
  background-image: url("../../images/check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.step-form-content-items:not(:last-child) {
  margin-bottom: 32px;
}

.step-form-last {
  overflow-y: auto;
  max-height: clamp(250px, 25vw, 650px);
}

.create-custom-task {
  margin-top: 32px;
}

.no-image:not(.team-card-left img):not(.top.banner-img .no-image):not(.client-coach-right img):not(.banner-chat-box .banner-chat-img img) {
  object-fit: contain !important;
}

.toast.toast-error {
  width: 365px;
}

.admin-current-client-table {
  width: 100%;
  table-layout: fixed;
}

.admin-current-client-table th:nth-child(1),
.admin-current-client-table td:nth-child(1) {
  width: clamp(200px, 26vw, 195px);
}

.admin-current-client-table th:nth-child(3),
.admin-current-client-table td:nth-child(3) {
  width: clamp(220px, 26vw, 218px);
}

.admin-current-client-table .btn-with-arrow {
  padding-block: 14px;
}

.admin-current-client-table .time-sheet-table thead th {
  padding-right: 45px;
  vertical-align: top;
}

.view-more-team {
  gap: 3px;
}

span.view-more-count {
  color: var(--Info, #3493e0);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

.view-more-team {
  position: relative;
  cursor: pointer;
}

.view-more-count {
  margin-left: 6px;
  font-size: 12px;
  color: #2563eb;
}

/* Popup */
.view-more-popup {
  position: fixed;
  width: max-content;
  max-width: 220px;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  display: none;
  z-index: 9999;
  height: max-content;
  border-radius: 8px;
  box-shadow:
    0 4px 105.4px 0 rgba(0, 0, 0, 0.12),
    0 2px 4.8px 0 rgba(0, 0, 0, 0.15);
}

.view-more-popup:before {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  bottom: -5px;
  background-color: #fff;
}

.view-more-popup {
  display: none;
}

/* Active state */
.view-more-team.active .view-more-popup {
  display: block;
}

.view-more-popup-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.view-more-popup .user-profile-wrapper img {
  width: 22px;
  height: 22px;
}

.view-more-popup .user-profile-wrapper:hover {
  background: #f8fafc;
}

:is(.view-more-popup .user-profile-wrapper span,
  .vas-info-block li,
  .admin-opp-available-content p) {
  color: var(--color-secondary, #111110);
  font-family: Geist;
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
}

.client-dash-user-status,
.availability-status {
  position: relative;
  padding-left: 16px;
}

.client-dash-user-status::before,
.availability-status::before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.client-dash-user-status.no-traffic::before,
.availability-status.availability::before {
  background-color: var(--Colors-Green, #34c759);
}

.client-dash-user-status.full-traffic::before,
.availability-status.not-availability::before {
  background-color: #ea8e25;
}

.client-dash-user-status.medium-traffic::before {
  background-color: #2c81ff;
}

.admin-current-client-table .filter-bar {
  margin-bottom: 48px;
}

.delete-popup .popupform-wrapper {
  margin-top: 0;
}

.delete-popup .modal-actions {
  margin-top: 35px;
}

.account-helth {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-radius: 5px;
  border: 1px solid #e7e7e7;
  background: var(--Cream, #f3f0e5);
  position: relative;
}

.account-helth-top {
  padding: 4px;
  position: absolute;
  left: 11px;
  top: -12px;
  border-radius: 5px;
  background: #ea8e25;
}

.account-helth h6 {
  color: var(--color-primary, #1c2c1c);
  font-family: "DM Sans";
  font-size: 14px !important;
  font-weight: 700;
  line-height: 120%;
  margin-bottom: 0;
}

:is(.account-helth, .account-helth-top) p {
  font-family: "DM Sans";
  color: var(--color-secondary);
}

.account-helth p {
  font-size: 14px;
}

.account-helth-top p {
  font-size: 10px;
}

.admin-banner-left {
  flex: 1;
}

.admin-banner-right {
  flex: 0 0 301px;
}

.account-helth {
  max-width: 140px;
  width: 100%;
}

.helth-status {
  position: relative;
  padding-left: 14px;
}

.helth-status::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.helthy-traffic::before,
.helth-status-paid::before {
  background-color: #34c759;
}

.medium-traffic::before {
  background-color: #2c81ff;
}

.low-traffic::before,
.helth-status-processing::before {
  background-color: #ea8e25;
}

.very-low-traffic::before,
.helth-status-failed::before {
  background-color: #B42318;
}

.action-col .helth-status {
  color: var(--color-secondary);
}

.industries-wrapper {
  gap: 8px;
  max-width: 210px;
  width: 100%;
}

.industries-logo {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1px solid #e7e7e7;
  background: #fff;
}

.industries-wrapper p {
  color: var(--Grays-900, #0d0d0c);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.admin-banner-left .banner-top-content {
  margin-bottom: 16px;
}

.custom-modal {
  background: var(--color-primary) !important;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: auto;
  padding: 50px 20px;
}

.custom-modal:not(.announcement-custom-modal) .popup-body {
  padding: 32px;
}

.custom-modal .sendtask-popup {
  max-width: 746px;
  width: 100%;
}

.announcement-custom-modal .sendtask-popup {
  max-width: 546px;
}

.client_team_update_status {
  max-width: 615px;
  width: 100%;
  margin-inline: auto;
}

.custom-modal:not(.announcement-custom-modal) .popup-body *:not(button) {
  font-size: revert !important;
  color: revert !important;
  background: unset !important;
}

.admin-items-first-col {
  padding: 0 !important;
}

.admin-coach-right {
  gap: 32px;
  padding: 30px 24px;
}

.admin-coach-left {
  display: flex;
}

.admin-coach-left img {
  width: 100%;
}

.admin-account-grid .event-card-top {
  margin-bottom: 0px;
  gap: 5px;
  align-items: center;
}

.admin-account-grid .bill-curent-plan {
  gap: 16px;
}

.files-loader {
  display: block;
  width: 100%;
}

.files-loader img {
  mix-blend-mode: darken;
  height: 75px;
  width: 75px;
  margin-inline: auto;
  display: block;
}

.admin-event-bottom {
  gap: 8px;
}

.admin-event-bottom h4 {
  color: var(--Grays-600, #595854);
  font-family: Geist;
  font-weight: 400;
}

.admin-event-bottom p {
  color: var(--Grays-600, #595854);
  font-family: Geist;
  font-size: 14px;
}

.admin-event-bottom h2 {
  margin-bottom: 0;
  font-size: 40px;
  font-weight: 500;
}

.admin-event-bottom h2 span {
  font-size: 30px;
}

.status-paid h6 {
  color: #027a48;
  font-size: 14px;
}

.status-unpaid h6 {
  color: #f00;
  font-size: 14px;
}

.admin-table-icon {
  display: flex;
}

.admin-table-icon img {
  cursor: pointer;
}

.admin-account-status-btn .btn {
  font-size: 16px;
  color: var(--Off-White, #fcfcf5);
  font-family: "DM Sans";
  font-weight: 500;
  line-height: 1.2;
  border-radius: 5px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
  padding: 13px 37px 13px 16px;
}

.deactivate-account {
  background: #b42318;
}

.deactivate-account:hover {
  background: #b42218f1;
}

.admin-account-status-btn {
  gap: 10px 24px;
}

.admin-tab-section-main .tab-list-wrapper .tabbing-list li {
  flex: auto;
}

.admin-tab-section-main .tab-list-wrapper .tabbing-list {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.admin-tab-section-main .tab-list-wrapper .tabbing-list-menu.active {
  padding-inline: 10px;
}

.plan-change-table .action-col {
  width: 85px;
}

.onboard-login-box {
  padding: 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 8.197px;
  background: var(--Neutral-White, #fff);
  box-shadow: 0 1.639px 5.738px 0 rgba(0, 0, 0, 0.08);
  z-index: 9;
  position: relative;
}

.no-arrow-btn {
  font-size: 12px;
  line-height: 1;
  padding: 7px 19px;
  font-weight: 400;
}

.onboarad-login-content .event-card-bottom {
  margin-top: 0;
}

.onboarad-login-content {
  position: relative;
  max-width: 363px;
  width: 100%;
  margin-inline: auto;
  padding: 24px 36px;
  margin: clamp(1rem, 6vh, 98px) auto;
}

.onboarad-login-content .event-top-icon:not(.login-box-right-icon):not(.login-box-left-icon) {
  height: 36px;
  width: 36px;
  border-radius: 6.558px;
}

.onboarad-login-content .welcome-data-top-content {
  margin-bottom: clamp(30px, 7vh, 80px);
}

.onboard-botton-paragraph {
  margin-top: clamp(10px, 3.5vh, 40px);
}

.onboard-botton-paragraph p {
  color: #505050;
}

.onboarad-login-content::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  border: 1px dashed #c9c9c9;
}

.login-box-left-icon {
  position: absolute;
  left: 0;
  height: 27px;
  width: 27px;
  bottom: 44px;
  transform: translateX(-50%);
  border-radius: 5px;
}

.login-box-right-icon {
  position: absolute;
  right: 0;
  height: 55px;
  width: 55px;
  transform: translate(50%, -50%);
  top: 50%;
  border-radius: 8px;
}

.fw-mid {
  font-weight: 500;
}

.login-box-left-icon img {
  height: 13px;
  width: 13px;
}

.login-box-right-icon img {
  height: 30px;
  width: 30px;
}

.obboarding-icon-box {
  border-radius: 10px;
  border: 0.798px solid #e7e7e7;
  background: var(--Neutral-White, #fff);
  padding: 18px;
}

.onboarding-hours-acc-wrapper>p {
  text-align: center;
  margin-bottom: 24px;
  color: var(--color-secondary);
}

.onboarding-mid-box-wrapper {
  max-width: 374px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 17px;
  border-radius: 10px;
  border: 1px dashed #c9c9c9;
}


.no-arrrow-btn {
  padding: 14px 26px;
  border-radius: 5px;
  display: inline-block;
}

.obboarding-icon-box p {
  flex: 1;
  text-align: left;
}

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

.yellow-text {
  color: var(--color-yellow);
}

.onboard-automatic-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  position: relative;
}

.onboard-automatic-wrapper {
  max-width: 321px;
  width: 100%;
  margin: clamp(1rem, 4vh, 60px) auto;
}

.welcome-data-top-content {
  margin-bottom: 24px;
}

.onboarding-hours-last-dec {
  margin-bottom: clamp(20px, 2.7vw, 30px);
  margin-inline: auto;
  text-align: center;
}

.onboarding-hours-last-dec p {
  color: var(--color-secondary);
  font-weight: 500;
  font-size: 20px;
}

.monthly-plan-step .event-top-icon {
  background-color: #1a2c1a;
}

.onboarding-mid-box-wrapper .obboarding-icon-box p {
  color: var(--color-secondary);
}

.read-hour-box-inner {
  border-radius: 10px;
  border: 0.798px solid #e7e7e7;
  background: var(--Neutral-White, #fff);
  padding: 9px 9px 15px;
  max-width: 240px;
  width: 100%;
  margin: auto;
  position: relative;
}

.rolled-hours-btn {
  border-radius: 5px;
  background: var(--Cream, #f3f0e5);
  color: #000;
  font-family: Geist;
  font-size: 16.889px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  max-width: 221px;
  width: 100%;
  display: block;
  text-align: center;
  padding: 18px;
  margin-bottom: 9px;
  margin-inline: auto;
}

.rolled-thed {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.rolled-tr {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.rolled-td {
  border: 1px solid #e7e7e7;
  padding: 5px 7px;
  height: 26px;
}

.rolled-thed .rolled-td {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  height: 15px;
}

.rolled-tr:last-child .rolled-td {
  height: 15px;
}

.rolled-tbody .rolled-td {
  border-right: 0;
  border-bottom: 0;
}

.rolled-td:first-child {
  border-left: 0;
}

.hour-box img {
  height: 21px;
  width: 21px;
  aspect-ratio: 1/1;
  object-fit: contain;
}

.hour-box {
  height: 100%;
  display: flex;
  align-items: center;
}

.read-hour-box-wrapper {
  max-width: 321px;
  width: 100%;
  margin: clamp(1rem, 5vh, 65px) auto;
  position: relative;
}

.read-hour-box-wrapper::before {
  position: absolute;
  content: "";
  border-radius: 10px;
  border: 1px dashed #c9c9c9;
  width: 100%;
  height: 160px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.rolled-box-top-icon {
  position: absolute;
  left: -16px;
  top: 22%;
  height: 27px;
  width: 27px;
  border-radius: 4px;
}

.rolled-box-top-icon img,
.payble-wrapper img {
  width: 20px;
  height: 20px;
}

.rolled-box-bottom-icon {
  height: 64px;
  width: 63px;
  border-radius: 9px;
  position: absolute;
  right: -32px;
  bottom: 0;
}

.rolled-box-bottom-icon img {
  width: 39px;
  height: 39px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.onboard-automatic-inner::before {
  position: absolute;
  content: "";
  border-radius: 10px;
  border: 1px dashed #C9C9C9;
  height: calc(100% - 46px);
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

.onboard-step-flexible {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.welcome-data-top-content {
  margin-top: auto;
}

.screen-9 {
  background-image: url(../../images/screen-9.png);
}

.onboard-card-left ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.onboard-card-left h5 {
  color: #1A2C1A;
  font-family: "DM Sans";
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}

.onboard-card-left h6 {
  color: #1A2C1A;
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}

.onboard-card-left li :is(a, span) {
  color: #000;
  font-family: Geist;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.onboard-right img {
  border-radius: 7px;
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.onboard-step-card {
  border-radius: 8.475px;
  background: var(--Cream, #F3F0E5);
}

.onboard-card-left {
  padding: 15px 15px 23px 11px;
  max-width: calc(100% - 115px);
  width: 100%;
}

.onboard-right {
  max-width: 115px;
  width: 100%;
  height: 177px;
}

.onboard-card-section-wrapper {
  max-width: 318px;
  width: 100%;
  border-radius: 10px;
  border: 0.798px solid #E7E7E7;
  background: var(--Neutral-White, #FFF);
  padding: 10px;
  margin: auto;
}

.onboard-card-border-wrapper {
  border-radius: 10px;
  border: 1px dashed #C9C9C9;
  padding: 37px 45px;
  margin: clamp(1rem, 4vh, 60px) auto;
  position: relative;
  max-width: 410px;
  width: 100%;
}

.help-center-btn {
  border-radius: 8.826px;
  background: var(--Virtalent-Green, #1C2C1C);
  max-width: 235px;
  width: 100%;
  display: inline-flex;
  padding: 11px 17px;
  color: var(--Off-White, #FCFCF5);
  font-family: "DM Sans";
  font-size: 17px;
  font-weight: 500;
  line-height: 100%;
  align-items: center;
  gap: 8px;
}

.onboard-help-center-wrapper {
  width: 100%;
  text-align: center;
}

.check-help-center-border {
  border-radius: 10px;
  border: 1px dashed #C9C9C9;
  max-width: 326px;
  width: 100%;
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(1rem, 4vh, 40px) auto;
  position: relative;
}

.question-btn {
  background: var(--Neon, #E3E219);
  position: absolute;
}

.question-btn.top {
  display: flex;
  width: 41px;
  height: 41px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  top: 0;
  right: 30px;
  transform: translateY(-50%);
}

.question-btn.left {
  display: flex;
  width: 33px;
  height: 33px;
  padding: 8.913px;
  justify-content: center;
  align-items: center;
  gap: 8.913px;
  border-radius: 5px;
  left: 0;
  transform: translate(-50%, 0);
  top: 50px;
}

.question-btn.bottom {
  display: flex;
  width: 29px;
  height: 29px;
  padding: 7.833px;
  justify-content: center;
  align-items: center;
  gap: 7.833px;
  border-radius: 4px;
  bottom: 0;
  transform: translateY(50%);
  right: 50px;
}

.screen-2 {
  background-image: url(../../images/screen-02.png);
}

.screen-2-swap-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px 32px;
  border-radius: 13.431px;
  border: 1.081px solid #E7E7E7;
  background: var(--Neutral-White, #FFF);
  width: 274px;
  height: 134px;
  margin: auto;
}

.screen-2-border-sec {
  max-width: 415px;
  width: 100%;
  border-radius: 11.862px;
  border: 1.186px dashed #C9C9C9;
  padding: 42px 71px;
  margin: auto;
  position: relative;
}

.screen-2-icon {
  position: absolute;
  background-color: var(--color-yellow);
}

.currency-icon {
  display: flex;
  width: 58px;
  height: 58px;
  padding: 13.182px;
  justify-content: center;
  align-items: center;
  gap: 13.182px;
  top: 28px;
  right: 0;
  border-radius: 10.545px;
  transform: translateX(50%);
}

.check-icon {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  left: 0;
  bottom: 32px;
  transform: translateX(-50%);
}

.thankyou-page,
.center-align {
  justify-content: center;
}

.thankyou-page .screen-2-swap-icon {
  margin: unset;
  margin-inline: auto;
}

:is(.thankyou-page, .center-align) .welcome-data-top-content {
  margin-top: unset;
}

.thankyou-page p strong {
  display: block;
  margin-top: 25px;
}

.onboard-export-wrapper {
  border-radius: 13.431px;
  border: 1.081px solid #E7E7E7;
  background: var(--Neutral-White, #FFF);
  padding: 32px 30px;
  max-width: 274px;
  margin: auto;
}

.export-card-border {
  border-radius: 11.862px;
  border: 1.186px dashed #C9C9C9;
  max-width: 415px;
  padding: 47px 50px;
  width: 100%;
  margin: auto;
}

.relclaim-btn {
  padding: 9px;
  display: inline-flex;
  height: 38px;
  padding: 9px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  border: 0.805px solid #E7E7E7;
  background: var(--Neutral-White, #FFF);
  position: absolute;
}

.relclaim-btn p {
  margin-bottom: 0;
}

.relclaim-btn.top {
  top: 0;
  right: 40px;
  transform: translateY(-50%);
}

.relclaim-btn.bottom {
  bottom: 0;
  left: 30px;
  transform: translateY(50%);
}

.export-card-border {
  position: relative;
}

.reclaim-check-btn {
  background-color: var(--color-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.reclaim-check-btn.left {
  width: 44px;
  height: 44px;
  padding: 10px;
  gap: 10px;
  border-radius: 8px;
  left: 0;
  transform: translateX(-50%);
  top: 42px;
}

.reclaim-check-btn.right {
  width: 58px;
  height: 58px;
  padding: 13.182px;
  gap: 13.182px;
  border-radius: 10.545px;
  transform: translateX(50%);
  right: 0;
  bottom: 45px;
}

.reclaim-check-btn.right img {
  height: 31px;
  width: 31px;
}

.onboard-export-wrapper .export-profile-img {
  height: 52px;
  width: 52px;
  object-fit: contain;
}

.onboard-export-wrapper .export-profile-desc p {
  color: var(--color-secondary, #111110);
  font-family: "Geist";
  font-size: 22px;
  font-weight: 400;
  line-height: 120%;
}

.onboard-export-wrapper .export-profile-desc span {
  color: var(--Grays-600, #595854);
  font-family: "Geist";
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
}

.center-align .export-card-border {
  margin: clamp(1rem, 4vh, 50px) auto;
}

.last-screen {
  background-image: url(../../images/letsgo-screen.png);
}

.last-screen .welcome-sidebar-data {
  justify-content: space-evenly;
  align-items: center;
}

.onboard-lets-go-icon {
  display: flex;
  width: 119px;
  height: 119px;
  padding: 32.142px;
  justify-content: center;
  align-items: center;
  gap: 32.142px;
  border-radius: 16px;
  background: var(--color-yellow, #E3E219);
}

.onboard-lets-go-icon img {
  height: 73px;
  width: 73px;
}

.lets-go-check-wrapper {
  border-radius: 10px;
  border: 1px solid #E7E7E7;
  background: var(--Cream, #F3F0E5);
  padding: 38px 82px;
  max-width: 284px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lets-go-border-wrapper {
  max-width: 401px;
  width: 100%;
  margin-inline: auto;
  border-radius: 13.112px;
  border: 1.311px dashed #C9C9C9;
  padding: 35px 58px;
  margin-block: 3%;
}

.meet-onboard-msg-btn {
  display: flex;
  width: 45px;
  height: 45px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: var(--color-yellow, #E3E219);
  position: absolute;
}

.meet-question-btn {
  border-radius: 8px;
  display: flex;
  width: 63px;
  height: 63px;
  padding: 17px;
  justify-content: center;
  align-items: center;
  position: absolute;
  background: var(--color-yellow, #E3E219);
}

.meet-onboard-msg-btn.left {
  left: 0;
  top: 60px;
  transform: translateX(-50%);

}

.meet-question-btn.bottom {
  right: 0;
  bottom: 42px;
  transform: translateX(50%);
}

.customer-service-wrapper .customer-details img {
  height: 33px;
  width: 33px;
}

.meet-question-btn.bottom svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}

.current-task-grid:has(.no-task-found) {
  display: block;
  text-align: center;
}

.current-task-grid .no-task-found {
  margin-top: 45px;
  font-size: 25px;
}

.va-monthly-hours {
  border-radius: 10px;
  background: #FFF;

  /* Shadow */
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.08);
  padding: 25px 32px 30px;
  max-width: 355px;
  width: 100%;
  margin-inline: auto;
  margin-block: 5%;
}

.va-onborad-hrs-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.va-onborad-hrs-bottom p {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 120%;
}

.va-onborad-hrs-bottom span {
  color: #505050;
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
}

.va-monthly-hours .event-top-icon {
  margin-bottom: 20px;
}

.va-monthly-hours h2 {
  margin-bottom: 18px;
  color: #1A2C1A;
  font-size: 48px;
  font-weight: 600;
  line-height: 120%;
  text-align: left;
}

.va-onboard-image {
  background-image: url(../../images/va-onboard.png);
}

.va-onboardign-12 {
  background-image: url(../../images/pexels-hillaryfox-2x.png);
}

.va-onboardign-invoice {
  background-image: url(../../images/onboard-invoice.jpg);
}

.va-onboard .onboarding-hours-last-dec p,
.payble-wrapper h6 {
  font-weight: 500;
}

.va-handlng-imagebox {
  display: flex;
  width: 240px;
  height: 258px;
  padding: 22px 16px;
  justify-content: center;
  align-items: start;
  gap: 10px;
  border-radius: 10px;
  border: 0.798px solid #E7E7E7;
  background: var(--Neutral-White, #FFF);
  margin-inline: auto;
  z-index: 111;
  position: relative;
}

.va-handlng-question {
  max-width: 321px;
  width: 100%;
  margin-inline: auto;
  position: relative;
}

.va-handlng-question::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  border-radius: 10px;
  border: 1px dashed #C9C9C9;
  height: 150px;
  width: 100%;
  right: 0;
  margin: auto;
}

.va-handlng-question .plus-left {
  left: 0%;
  transform: translateX(-50%);
}

.va-handlng-question .plus-right {
  right: 0;
  bottom: 29px;
  z-index: 11111;
  transform: translateX(-50%);
}

.va-handlng-wrapper {
  position: relative;
  border-radius: 5px;
  border: 1px solid #E7E7E7;
  overflow: hidden;
}

.va-handlng-imagebox::before,
.va-handlng-imagebox::after {
  position: absolute;
  content: "";
  height: 5px;
  background: #E7E7E7;
  border-radius: 10px;
}

.va-handlng-imagebox::before {
  bottom: 34px;
  left: 25px;
  width: 125px;
}

.va-handlng-imagebox::after {
  bottom: 16px;
  left: 25px;
  width: 90px;
}

.va-handlng-wrapper img {
  height: 100%;
  display: block;
}

.onboarding-hours-last-dec a {
  color: #3493E0;
}

.va-get-support-border {
  border-radius: 10px;
  border: 1px dashed #C9C9C9;
  max-width: 384px;
  width: 100%;
  margin-inline: auto;
  position: relative;
  padding: 50px 65px;
  margin: clamp(1rem, 4vh, 60px) auto;
}

.va-get-icon {
  position: absolute;
  height: 60px;
  width: 60px;
  background-color: var(--color-yellow);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.va-get-slack-icon {
  bottom: 45px;
  left: 0;
  transform: translateX(-50%);
}

.va-get-msg-icon {
  right: 0;
  top: 56px;
  transform: translateX(50%);
}

.va-get-icon svg {
  height: 32px;
  width: 32px;
}

.va-get-support-logo {
  border-radius: 10px;
  border: 1px solid #E7E7E7;
  background: #FFF;
  max-width: 254px;
  width: 100%;
  height: 159px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.va-your-community-wrapper {
  position: relative;
  max-width: 324px;
  width: 100%;
  height: auto;
  border-radius: 10.613px;
  border: 1.061px dashed #C9C9C9;
  padding: 25px 42px;
  margin: clamp(1rem, 4vh, 60px) auto;
}

.va-your-community-icon {
  max-width: 240px;
  width: 100%;
  margin: auto;
  border-radius: 10px;
  border: 1px solid #E7E7E7;
  background: var(--Neutral-White, #FFF);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 134px;
}

.va-onboard-user-btn {
  background-color: var(--color-yellow);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
}

.va-onboard-user-btn.top {
  top: 0;
  width: 30px;
  height: 30px;
  padding: 8px;
  transform: translateY(-50%);
  left: 105px;
}

.va-onboard-user-btn.right {
  width: 43px;
  height: 43px;
  padding: 11px;
  bottom: 27px;
  right: 0;
  transform: translateX(50%);
  border-radius: 5px;
}

.va-onboard-user-btn.bottom {
  width: 35px;
  height: 35px;
  padding: 9px;
  bottom: 0;
  left: 48px;
  transform: translateY(50%);
}

.va-onboard-invoice-wrapper {
  max-width: 240px;
  width: 100%;
  margin: auto;
  border-radius: 10.613px;
  border: 1.061px solid #E7E7E7;
  background: var(--Cream, #F3F0E5);
  display: flex;
  justify-content: center;
  align-items: end;
  padding: 17px 17px 0;
}

.va-onboard-invoice-img {
  position: relative;
  max-width: 119px;
  width: 100%;
  border-radius: 5px 5px 0 0;
  border: 1.061px solid #E7E7E7;
  background: var(--Neutral-White, #FFF);
  display: flex;

}

.va-onboard-invoice-img img {
  z-index: 3;
}

.va-onboard-invoice-img::before,
.va-onboard-invoice-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.061px solid #E7E7E7;
  background: #fff;
  z-index: 1;
  bottom: 0;
  top: auto;
  width: 100%
}

.va-onboard-invoice-img::before {
  height: 90%;
  left: -13px;
  z-index: 2;
}

.va-onboard-invoice-img::after {
  height: 80%;
  left: -26px;
  z-index: 1;
}

.va-invoice-price-btn {
  position: absolute;
  height: 35px;
  width: 35px;
  left: 0;
  transform: translateX(-50%);
  background-color: var(--color-yellow);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.va-keep-profile-wrapper {
  border-radius: 10px;
  border: 1px solid #E7E7E7;
  background: var(--Cream, #F3F0E5);
  max-width: 240px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 135px;
}

.va-keep-profile-wrapper img {
  width: 77px;
  height: 77px;
  aspect-ratio: 1/1;
}

.client-admin-notes-item {
  border-radius: 10px;
  background: var(--Off-White, #FCFCF5);
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.08);
  padding: 25px 32px 45px;
}

.client-admin-notes-item-top {
  margin-bottom: 25px;
}

.client-admin-notes-item h2 {
  font-size: 40px;
  line-height: 1;
  font-weight: 500;
  font-family: "Geist", "DM Sans", sans-serif;
}

.client-admin-notes-item :is(h2, h5) {
  margin-bottom: 15px;
}

.joint-virtalent {
  max-width: 355px;
  width: 100%;
}

.admin-account-management {
  border-radius: 10px;
  background: var(--Off-White, #FCFCF5);
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.08);
  padding: 32px;
}

.admin-account-management>h6 {
  margin-bottom: 30px;
}

.admin-account-management .grid-items {
  border-radius: 10px;
  background: var(--Cream, #F3F0E5);
  gap: 32px;
  padding: 24px;
}

.admin-account-management .grid-items h6 {
  font-weight: 500;
}

.btn-large {
  padding-block: 14px;
  border-radius: 5px;
}

.cmn-box-design {
  border-radius: 10px;
  background: var(--Off-White, #FCFCF5);
}

.admin-latest-notes-grid {
  gap: 32px;
}

.admin-latest-notes-items {
  border-radius: 10px;
  background: var(--Cream, #F3F0E5);
  display: flex;
  flex-wrap: wrap;
  padding: 24px 32px;
  align-items: flex-start;
  gap: 34px;
  align-self: stretch;
}

.admin-latest-notes-desc {
  flex: 1;
}

.admin-latest-notes-edit a {
  color: #3493E0;
  font-family: Geist;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}

.admin-latest-notes-desc {
  gap: 8px;
}

.admin-latest-notes-desc p {
  color: var(--color-secondary, #111110);
  font-size: 14px;
  font-weight: 400;
}

.admin-latest-notes-last-para p {
  color: var(--color-text);
}

.admin-latest-notes-img {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--Off-White, #FCFCF5);
}

.admin-latest-notes-img img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

.hours-on-account .export-profile-img {
  outline: none;
}

.lets-go-page .welcome-items-wrapper {
  text-align: center;
  padding: 48px 44px;
  width: 100%;
}

.lets-go-page .form-images-logo img {
  max-width: 340px;
  width: 100%;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 1000;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

.automatic-top-ups .event-top-icon {
  width: 63px;
  height: 63px;
  border-radius: 8px;
}

.automatic-top-ups .event-top-icon img {
  width: 25px;
  height: 25px;
}

.va-handlng-imagebox {
  margin: clamp(1rem, 4vh, 60px) auto;
}

.more12 {
  min-width: 16px;
}

.admin-bill-status {
  font-family: "DM Sans";
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;
}

.admin-bill-status.not-billed,
.admin-bill-status.not-available {
  color: #B42318;
}

.admin-bill-status.billed,
.admin-bill-status.available {
  color: #027A48;
}

.card-user-images-relative img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  object-fit: cover;
}

.card-user-images-relative {
  position: relative;
  padding-bottom: 74%;
  border-radius: 10px 0 0 10px;
  overflow: hidden;
}

.card-user-image {
  max-width: 212px;
  width: 100%;
}

.users-card-items-left-wrapper {
  max-width: 75%;
  width: 100%;
  position: relative;
}

.users-card-items {
  border-radius: 10px;
  background: var(--Off-White, #FCFCF5);
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.08);
  margin-bottom: 32px;
}

.users-card-items:last-child {
  margin-bottom: 0;
}

.card-user-middle-sec h2 {
  font-size: 40px;
  margin-bottom: 0;
  font-weight: 500;
}

.card-user-middle-sec h4 {
  color: #73716C;
  font-weight: 500;
  font-family: "Geist", sans-serif;
  margin-bottom: 21px;
}

.user-card-contact {
  gap: 10px 47px;
}

.card-user-last-sec {
  max-width: 25%;
  width: 100%;
  padding: 0 20px;
  text-align: center;
}

.users-card-items-left-wrapper::before {
  content: "";
  position: absolute;
  right: 0px;
  top: 50%;
  width: 1px;
  background: rgb(231, 231, 231);
  transform: translateY(-50%);
  height: 65%;
}

.card-user-middle-sec {
  padding: 0 10px;
}

.admin-account-table :is(th:nth-child(1), td:nth-child(1)) {
  width: 30%;
}

.admin-account-table :is(th:nth-child(2), td:nth-child(2)) {
  width: 28%;
}

.admin-account-table :is(th:nth-child(3), td:nth-child(3)) {
  width: 24%;
}

.admin-account-table :is(th:nth-child(4), td:nth-child(4)) {
  width: clamp(200px, 9vw, 20%) !important;
}

.popup-tab-content {
  display: none;
}

.popup-tab-content.active {
  display: block;
}

.select2-container--default .select2-search--inline .select2-search__field {
  margin: 0;
}

.popup-tab textarea {
  height: 166px;
}

.client-popup-common-width {
  max-width: 703px;
  width: 100%;
  margin-inline: auto;
}

:is(.va_add_time_expense_popup, .client-popup-common-width) .file-drop-area {
  padding: 28px 18px;
  margin-top: 0;
  border-radius: 5px;
  flex: 1;
}

.client-popup-common-width h6 {
  font-weight: 500;
}

.client-popup-common-width p:not(:is(.bill-note-wrapper, .admin-deactived-notes) p),
.admin-form-communication .file-drop-area p {
  font-size: 14px;
  line-height: 1.2;
}

.popup-check-desc {
  padding-right: 25px;
}

.edit-user-row {
  margin-bottom: 32px;
}

.edit-user-row .card-user-images-relative {
  border-radius: 5px;
  padding-bottom: 79%;
}

.client-popup-common-width input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]) {
  font-size: 16px;
}

.client-popup-common-width .form-button-group {
  justify-content: end;
}

.client-popup-common-width .va-form-row {
  margin-bottom: 16px;
  gap: 16px;
}

.popup-check-wrapper {
  display: flex;
  align-items: self-start;
  gap: 16px;
  margin: 32px 0;
}

.popup-check-desc h6 {
  margin-bottom: 16px;
  font-weight: 600;
}

.client-add-user-popup .va-form-row:has(.file-drop-area) {
  margin-top: 32px;
}

.grid-col-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

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

.header-timer-overlay {
  max-width: 180px;
  width: 100%;
  min-width: 180px;
  position: absolute;
  right: calc(-100% + 10px);
  transform: translateX(-50%);
  z-index: 2;
}

.h_timer {
  position: relative;
}

.timer-card {
  display: flex;
  background: #1c2c1c;
  color: #fff;
  padding: 8px 6px 8px 20px;
  justify-content: space-between;
  width: 100%;
  border-radius: 9px 9px 9px;
  align-items: center;
  overflow: hidden;
  box-shadow: 0px 1px 1px 0px #00000040;
}

.timer-actions button {
  background: #ff0000;
  color: #fff;
  padding: 6px 14px;
  border-radius: 5px;
  font-size: 14px;
  display: flex;
  align-items: center;
  height: 100%;
  border: 0;
  cursor: pointer;
}

.timer-actions {
  position: absolute;
  right: 0;
  height: 100%;
}

.timer-on .alert {
  opacity: 0.55;
}

.edit-client-summary textarea {
  height: 132px;
}

.client_update_Communication .form-group:first-child {
  margin-bottom: 16px;
}

.client_update_Communication .popupform-wrapper .form-group .form-group,
.admin_account_deactivate .va-Edit-profile-form-group {
  margin-bottom: 0;
}

.admin_account_deactivate .bill-payment-detail form {
  gap: 32px;
}

.admin_account_deactivate .admin-deactived-notes p span,
.error-notes {
  display: block;
  margin-top: 22px;
  color: #B42318;
  font-weight: 600;
}

.manage-plan-top-up-settings {
  max-width: 788px;
  width: 100%;
  margin-inline: auto;
}

.manage-plan-top-up-settings .manage-top-up {
  margin-top: 111px;
}

.step-form-popup .add-client-step-form .file-drop-area {
  padding: 23px 18px;
  border-radius: 4px;
}

.view-expence-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.step-form-last .step-form-content-items h5 {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #f3f0e5;
  padding-bottom: 6px;
  margin-bottom: 20px;
}

.select2-results__option--selected::after {
  content: "";
  position: absolute;
  background-image: url(../../images/check.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 18px;
  width: 18px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.admin-task-table .task-description-col {
  width: 350px;
}

.insurancePreviewContainer .upload-preview {
  max-width: 250px;
  width: max-content;
}

.insurancePreviewContainer .upload-preview img {
  width: auto;
  max-height: 150px;
  object-fit: contain;
  border-radius: 5px;
  max-width: 100%;
}

.insurancePreviewContainer .upload-preview {
  margin-left: auto;
}

.insurancePreviewContainer {
  width: 100%;
}

.va-insurance-drag.drag-active {
  border-color: rgb(28 44 28);
  background-color: rgb(28 44 28 / 17%);
}

.banner-check-title-desc p {
  font-size: 12px;
  color: #595854;
}

.admin-bill-card-last-col .bill-card-bottom h2 {
  font-size: 32px;
}

.admin-bill-card-last-col .bill-card-top {
  margin-bottom: 5px;
}

.admin-teams-grid .grid-items {
  justify-content: flex-start;
  padding-bottom: 19px;
}

.admin-teams-grid .grid-items p {
  line-height: 1;
}

.client_team_update_status label {
  padding-left: 10px;
}

.client_team_update_status label p,
.service-mail-checkbox label {
  color: var(--color-secondary, #111110);
  font-size: 16px;
  line-height: 120%;
}

.client_team_update_status input:checked {
  border: none;
  border-radius: 8px;
  border: 1px solid var(--Charcoal, #111110) !important;
}

.service-mail-checkbox label {
  margin-left: 8px;
}

.client_team_update_status input[type="radio"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 8px;
  border: 1px solid var(--Grays-600, #595854);
  display: inline-block;
  position: relative;
}

.client_team_update_status input:checked::before,
input[type="radio"]:checked::before {
  position: absolute;
  content: "";
  height: 6px;
  width: 6px;
  background: black;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.admin-opp-filter-bar {
  border-radius: 10px;
  background: var(--Off-White, #FCFCF5);
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.08);
  padding: 24px;
}

/* 1. Hide selected values */
.not-show-select-value .select2-selection__rendered {
  display: none !important;
}

.admin-opp-available .admin-opp-available-vas-card {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-right: 15px;
}

.admin-opp-available .admin-opp-available-image {
  flex-shrink: 0;
}

.admin-opp-available .team-card-img {
  max-width: 216px;
  width: 100%;
  border-radius: 8px;
  display: block;
}

.admin-opp-available .admin-opp-available-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 24px 15px;
}

.admin-opp-available .vas-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-opp-available .vas-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.admin-opp-filter-bar .filter-bar-right {
  justify-content: end;
}

:is(.admin-opp-filter-bar, .select-auto-width) .filter-input-wrapper :is(input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]), select) {
  width: auto;
  padding-right: 40px;
}

.edit {
  background-image: url(../../images/edit.svg) !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-repeat: no-repeat !important;
  display: inline-block;
  height: 18px;
  width: 18px;
}

.select2-container--default .select2-results__group {
  padding-inline: 0;
}

.matching-notes-data {
  width: 300px;
  position: relative;
}

.matching-notes-data p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: inherit;
  cursor: pointer;
}

.notes-hover-tooltip {
  max-width: 279px;
  background: #FFF;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: none;
  word-wrap: break-word;
}

.admin-report-client-desc {
  z-index: 9;
}

.admin-report-client-items {
  border-radius: 10px;
  border: 1px solid #E7E7E7;
  background-color: var(--Off-White, #FCFCF5);
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.08);
  padding: 44px 20px 44px 40px;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  position: relative;
  transition: 0.3s ease-in-out;
}

.admin-report-client-items:hover {
  transform: translateY(-3px);
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.admin-report-client-items::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 100%;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  pointer-events: none;
  width: 98px;
  height: 98px;
  aspect-ratio: 1/1;
}


.client-bill-card::after {
  background-image: url("../../images/FileText-BG.svg");
}

.client-invoice-card::after {
  background-image: url("../../images/ArrowsCounterClockwise-BG.svg");
}

.client-adjust-and-review-card::after {
  background-image: url("../../images/Scales-BG.svg");
}

.client-departing-card::after {
  background-image: url("../../images/SignOut_BG.svg");
  width: 108px;
  height: 108px;
}

.client-new-card:after {
  background-image: url("../../images/UserPlus-BG.svg");
}

.client-check-ins-card:after {
  background-image: url("../../images/CalendarCheck-BG.svg");
}

.client-feedback-card::after {
  background-image: url("../../images/ChatCircleDots-BG.svg");
}

.client-history-card::after {
  background-image: url("../../images/Clock-BG.svg");
}

.client-customer-service-card::after {
  background-image: url("../../images/Headset-BG.svg");
}

.client-health-overview-card::after {
  background-image: url("../../images/Heart-BG.svg");
}

.client-change-tracker-card::after {
  background-image: url("../../images/ArrowsLeftRight-BG.svg");
}

.client-disabled-card::after {
  background-image: url("../../images/Prohibit-BG.svg");
}

.payment-card-bg::after {
  background-image: url("../../images/CreditCard-BG.svg");
}

.currency-card-bg::after {
  background-image: url("../../images/CurrencyDollarSimple-BG.svg");
}

.engagement-card-bg::after {
  background-image: url("../../images/ChartLineUp-BG.svg");
}

.building-card-bg::after {
  background-image: url("../../images/Buildings-BG.svg");
}

.admin-report-client-img {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: var(--Cream, #F3F0E5);
}

.admin-report-client-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-report-client-desc p {
  color: var(--color-primary);
}

.time-sheet-table tbody tr:has(.banner-check-wrapper input:checked) td {
  color: #00781E;
  font-weight: 600;
}

.admin-form-communication .time-sheet-table tbody tr:has(.banner-check-wrapper input:checked) td {
  color: inherit;
  font-weight: normal;
}

.re-engaging-table table:has(.banner-check-wrapper) tr td:last-child {
  width: 40%;
}

.manage-admin-user-table tr td:last-child {
  width: 30%;
}

.re-engaging-table table:has(.banner-check-wrapper) tr th:last-child,
.manage-admin-user-table tr th:last-child {
  text-align: right;
}

.re-engaging-table table .banner-check-wrapper,
.manage-admin-user-table td .admin-table-icon {
  justify-content: end;
  flex-direction: row;
}

.admin-form-communication .file-drop-area {
  padding-block: 35px;
}

.admin-form-communication .admin-form-communication-table {
  padding-top: 22px;
  border-top: 1px solid #E7E7E7;
}

.link {
  color: #3493E0;
  font-size: 14px;
  line-height: 120%;
  text-decoration-line: underline;
  font-family: "DM Sans", sans-serif;
}

.opp-banner .banner-top-content {
  max-width: 41.66vw;
  width: 100%;
}

.admin-table-desc {
  width: 460px;
}

/* Timer popup */

/* ---- Timer Popup Overlay ---- */
.timer_popup_overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  backdrop-filter: blur(2px);
}

.timer_popup_overlay.active {
  display: block;
}

/* ---- Timer Popup ---- */
.timer_popup {
  display: none;
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: 100%;
  max-width: 570px;
  padding: 0 16px;
}

.timer_popup.active {
  display: block;
  animation: timerPopupSlideIn 0.3s ease forwards;
}

.timer_popup_inner {
  max-width: 530px;
  width: 100%;
  background-color: #fff;
  margin-inline: auto;
  border-radius: 16px;
  padding: 50px 32px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
  position: relative;
}

/*.timer_popup_top {
  margin-bottom: 20px;
}*/

.timer_popup_top {
  text-align: center;
}

.timer_popup_top h2 {
  color: var(--color-secondary);
  margin-bottom: 10px;
}

.timer_popup_top p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 0;
}

.timer_popup_body {
  border-top: 1px solid #e8e5dc;
  padding-top: 20px;
}

.timer_popup_body .form-button-group {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  margin-bottom: 0;
}

/* Close button (X) top-right */
.timer_popup_close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease;
}

.timer_popup_close:hover {
  background: #f0ede4;
}

.timer_popup_close svg {
  pointer-events: none;
}

.timer-loader-bg {
  display: none;
}

.timer-loader-bg:before {
  background: #47a7501c;
  content: "";
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0px;
  z-index: 7777;
  left: 0;
}

#va-log-time.va-log-time-loading .timer-loader-bg {
  display: block;
}

.timer-loader {
  border: 10px solid #29462969;
  border-radius: 50%;
  border-top: 10px solid #294629;
  width: 35px;
  height: 35px;
  z-index: 9;
  position: absolute;
  top: 39%;
  left: 46%;
  right: 0px;
  text-align: center;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

/* Timer popup End*/

.task-label {
  background: #F3F0E5;
  color: var(--color-secondary);

  padding: 9px 14px;
  border-radius: 5px;
  line-height: 1;
  box-shadow: 0px 1px 1px 0px #00000040;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;

  font-family: "DM Sans";
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
}

.task-label-wrapper {
  text-align: right;
  display: flex;
  align-items: end;
}

/* ===== Search bar ===== */
.search-suggestions {
  background: #ffffff;
  border: 1px solid #e0dccf;
  border-radius: 12px;
  padding: 6px 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  margin-top: 6px;
  overflow: hidden;
  z-index: 999;
  animation: fadeIn 0.15s ease-in-out;

}

.search-suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-suggestion-item:not(:last-child) {
  border-bottom: 1px solid #ebe7da;
}

.search-suggestion-item:hover {
  background: #1c2c1c0f;
}

.suggestion-item-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===== Icon ===== */
.suggestion-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: #F3F0E5;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #555;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease;
}

.search-suggestion-item:hover .suggestion-icon {
  transform: scale(1.08);
}

.suggestion-content {
  flex: 1;
}

.search-suggestion-title {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #2f2f2f;
}

.search-suggestion-subtitle {
  display: block;
  font-size: 12px;
  color: #7a7a7a;
  margin-top: 2px;
}

/* Custom scrollbar */
.search-suggestions::-webkit-scrollbar {
  width: 6px;
}

.search-suggestions::-webkit-scrollbar-thumb {
  background: #d6d1c4;
  border-radius: 10px;
}

.search-suggestions::-webkit-scrollbar-track {
  background: transparent;
}



/* Client header search – refined design */

/* Dropdown panel */
.client_header .search-suggestions {
  margin-top: 8px;
  padding: 8px 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 10px 20px -5px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
  max-height: 380px;
  overflow-y: auto;
}


.client_header .search-suggestions::-webkit-scrollbar {
  width: 8px;
}

.client_header .search-suggestions::-webkit-scrollbar-track {
  background: #f9fafb;
  border-radius: 0 14px 14px 0;
}

.client_header .search-suggestions::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.client_header .search-suggestions::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.client_header .search-suggestion-item {
  padding: 14px 18px;
  margin: 0 8px 2px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease;
  border: none;
  position: relative;
}


.client_header .suggestion-item-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.client_header .suggestion-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.client_header .suggestion-icon svg {
  width: 20px;
  height: 20px;
}

.client_header .suggestion-content {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.client_header .search-suggestion-title {
  display: block;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
}

.client_header .search-suggestion-subtitle {
  display: block;
  font-size: 14px;
  color: #73716c;
  margin-top: 3px;
  line-height: 1.45;
}

.add-expense-wrapper .form-group:has(.validation-error-msg) .form-group {
  margin-bottom: 6px;
}

.add-expense-wrapper .form-group.va-expense-col:has(+ .validation-error-msg) {
  margin-bottom: 6px;
}

.add-expense-wrapper .va-form-row.add-sundry-date-wrapper .validation-error-msg {
  margin: 6px 0;
}

.add-expense-wrapper .va-insurance-drag+.validation-error-msg {
  text-align: center;
  margin-top: 5px;
}

/* timer */
.start-timer-for-task.task-stop-timer {
  background: #BD3E34 !important;
  border-color: #BD3E34 !important;
}

.timer-start-body {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.time-cal {
  flex: 1;
}

.time-cal span {
  font-size: 24px;
  color: var(--Charcoal, #111110);
  text-align: right;
  font-family: Geist;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}

.time-text a {
  color: #FFF;
  text-align: center;
  font-family: "DM Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  border-radius: 5px;
  background: #BD3E34;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
  align-items: center;
  display: flex;
  gap: 5px;
  padding: 8px 16px;
}

.set_task {
  color: var(--color-secondary);
  font-size: 13px;
  height: 100%;
}

/*.time-text {
  padding-right: 10px;
}*/

.timer-start .icon {
  display: none;
}

/* Date field internal time popup */
/* Date fields: same look as time fields – one rounded box with icon inside (pill shape) */
#va-AddInternalTime .va-date-input-group,
#va-editInternalTime .va-date-input-group {
  display: flex;
  align-items: stretch;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #d9d6cc;
  background: #fff;
  min-height: 45px;
}

#va-AddInternalTime .va-date-input-group>img,
#va-editInternalTime .va-date-input-group>img {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  flex-shrink: 0;
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0;
  object-fit: contain;
  object-position: center;
  margin-top: 12px;
  margin-left: 15px;
}

/* Date overlay: hide browser "2026" when empty – show only "Select start/end date" until date is selected */
#va-AddInternalTime .va-date-input-wrap,
#va-editInternalTime .va-date-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

#va-AddInternalTime .va-date-placeholder-overlay,
#va-editInternalTime .va-date-placeholder-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-left: 12px;
  padding-right: 12px;
  background: #fff;
  color: #999;
  font-size: inherit;
  pointer-events: none;
  z-index: 1;
}

#va-AddInternalTime .va-date-input-wrap input[type="date"],
#va-editInternalTime .va-date-input-wrap input[type="date"] {
  border: 0;
  border-radius: 0;
  height: 43px;
  padding: 13px 16px 13px 12px;
  appearance: auto;
  -webkit-appearance: auto;
  color: var(--color-secondary, #292524) !important;
  caret-color: auto !important;
  text-align: left;
}

#va-AddInternalTime .va-date-input-wrap input[type="date"]::-webkit-datetime-edit,
#va-editInternalTime .va-date-input-wrap input[type="date"]::-webkit-datetime-edit,
#va-AddInternalTime .va-date-input-wrap input[type="date"]::-webkit-datetime-edit-day-field,
#va-editInternalTime .va-date-input-wrap input[type="date"]::-webkit-datetime-edit-day-field,
#va-AddInternalTime .va-date-input-wrap input[type="date"]::-webkit-datetime-edit-month-field,
#va-editInternalTime .va-date-input-wrap input[type="date"]::-webkit-datetime-edit-month-field,
#va-AddInternalTime .va-date-input-wrap input[type="date"]::-webkit-datetime-edit-year-field,
#va-editInternalTime .va-date-input-wrap input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--color-secondary, #292524) !important;
}

#va-AddInternalTime .va-date-input-wrap.va-date-has-value .va-date-placeholder-overlay,
#va-editInternalTime .va-date-input-wrap.va-date-has-value .va-date-placeholder-overlay {
  display: none;
}

/* Date groups already have a custom overlay placeholder; hide floating labels to prevent text overlap */
#va-AddInternalTime .va-date-input-group>label,
#va-editInternalTime .va-date-input-group>label {
  display: none !important;
}

/* Keep label hidden when input focused or has value (label is sibling of wrap now) */
#va-AddInternalTime .va-date-input-wrap:has(input:focus)+label,
#va-AddInternalTime .va-date-input-wrap:has(input:valid)+label,
#va-editInternalTime .va-date-input-wrap:has(input:focus)+label,
#va-editInternalTime .va-date-input-wrap:has(input:valid)+label {
  display: none;
}

/* Date field internal time popup end */

.va-client-skill-list {
  flex: 1 1 0;
}

/* ============================
        Responsive Design
   ============================ */
  @media(min-width:1500px){
   .popup-body .banner-btn {
          white-space: nowrap;
    }
  }
@media(min-width:1920px) {
  .welcome-form-images {
    max-width: 39vw;
  }
}

@media (max-width: 1800px) {
  .welcome-form-data {
    padding: 30px 88px 20px 0;
  }
}

@media (max-width: 1600px) {
  .welcome-row-wrapper {
    gap: 78px;
  }

  .welcome-form-data {
    max-width: calc(48% - 40px);
    padding: 30px 50px 20px 0;
  }

  .welcome-video-box {
    margin-top: 0;
  }

  .event-item-wrapper {
    gap: 12px;
    padding: 34px 20px;
  }

  .event-slider-desc h5 {
    font-size: 16px;
  }

  .event-slider-desc p {
    font-size: 13px;
  }

  .top-banner-card:has(.no-image) .top.banner-img,
  .event-content-wrapper .client-coach-right:has(.no-image) {
    max-width: 130px;
  }

  .onboarad-login-content,
  .va-middle-box-margin {
    margin: clamp(1rem, 4vh, 98px) auto;
  }

  .welcome-data-top-content {
    max-width: 100%;
  }

  .onboard-card-border-wrapper {
    margin: clamp(0.5rem, 1vh, 60px) auto;
  }

  .form-copyright {
    max-width: 100%;
  }
}

@media (max-width: 1439px) {
  .form-data {
    padding: 63px 45px 28px;
  }

  .form-logo {
    margin-bottom: 30px;
  }

  .form-desc h2 {
    margin-bottom: 20px;
  }

  .form-data .form-data-top-desc {
    margin-bottom: 35px;
  }

  .play-btn {
    width: 45px;
    height: 45px;
  }

  .play-btn::after {
    border-width: 7px 0 7px 10px;
  }

  .welcome-banner {
    padding: 30px 22px 30px;
  }

  .client-coach-left-col {
    padding: 18px 18px;
  }

  .current-task-grid,
  .event-content-wrapper {
    gap: 25px;
  }

  .client-coach-right {
    max-width: 116px;
  }

  .sidebar-wrapper {
    padding: 31px 24px 50px 24px;
  }

  .team-left-wrapper {
    padding-right: 20px;
  }

  .settings-row {
    gap: 15px;
  }

  .settings-text {
    font-size: 14px;
  }

  .welcome-form-data {
    padding: 10px 30px 10px 0;
  }

  .profile-card {
    padding: 20px 22px;
  }

  .profile-image-box svg {
    height: 90px;
    width: 90px;
  }

  .plus-right {
    height: 50px;
    width: 50px;
  }

  .plus-right svg {
    height: 22px;
    width: 22px;
  }

  .welcome-data-top-content p,
  .intro-dash-wrapper .welcome-data-top-content p {
    font-size: 18px;
    padding: 0;
  }

  .onboarad-login-content {
    max-width: 340px;
    padding: 18px 36px;
  }

  .login-box-right-icon {
    height: 45px;
    width: 45px;
  }

  .login-box-right-icon img {
    height: 24px;
    width: 24px;
  }

  .onboard-login-box {
    padding: 15px 20px;
  }

  .onboard-automatic-inner {
    gap: 28px;
  }

  .no-arrrow-btn {
    padding: 12px 26px;
    font-size: 15px;
  }

  .rolled-hours-btn {
    font-size: 15px;
    padding: 14px;
  }

  .welcome-data-top-content,
  .onboarding-hours-acc-wrapper>p,
  .onboarding-hours-last-dec {
    margin-bottom: 18px;
  }

  .onboarding-hours-acc-wrapper .event-top-icon {
    border-radius: 5px;
    height: 34px;
    width: 34px;
  }

  .onboarding-hours-acc-wrapper .event-top-icon img {
    height: 18px;
    width: 18px;
  }

  .obboarding-icon-box {
    padding: 13px;
  }

  .onboarding-mid-box-wrapper {
    gap: 12px;
  }

  .welcome-data-top-content h1 {
    margin-bottom: 12px;
  }

  .rolled-box-bottom-icon {
    height: 54px;
    width: 54px;
  }

  .rolled-box-bottom-icon img {
    width: 34px;
    height: 34px;
  }

  .onboard-automatic-wrapper .settings-icon {
    width: 20px;
  }

  .onboard-card-border-wrapper {
    padding: 23px 40px;
    max-width: 400px;
  }

  .meet-question-btn {
    border-radius: 6px;
    width: 53px;
    height: 53px;
    padding: 15px;
  }

  .meet-onboard-msg-btn {
    width: 40px;
    height: 40px;
  }

  .export-card-border {
    padding: 36px 50px;
  }

  .onboard-export-wrapper {
    padding: 25px 30px;
  }

  .reclaim-check-btn.right {
    width: 53px;
    height: 53px;
    border-radius: 8px;
  }

  .reclaim-check-btn.left {
    width: 38px;
    height: 38px;
    border-radius: 6px;
  }

  .reclaim-check-btn.left img {
    height: 20px;
    width: 20px;
  }

  .reclaim-check-btn.right img {
    height: 26px;
    width: 26px;
  }

  .customer-service-wrapper {
    margin: clamp(1rem, 4vh, 30px) auto;
  }

  .profile-wrapper,
  .read-hour-box-wrapper {
    margin: clamp(0.5rem, 1vh, 60px) auto;
  }

  .onboarad-login-content {
    margin: 5px auto;
  }

  .onboarding-mid-box-wrapper .obboarding-icon-box p {
    font-size: 15px;
  }

  .form-btn {
    padding: 15px 22px;
    font-size: 15px;
  }

  .welcome-bottom-content {
    margin-top: clamp(15px, 2.7vw, 18px);
  }

  .onboarding-hours-last-dec p {
    font-size: 18px;
  }

  .lets-go-border-wrapper {
    max-width: 380px;
    padding: 25px 48px;
    margin-block: 2%;
  }

  .welcome-page .welcome-data-top-content h1 {
    margin-top: 20px;
  }

  .welcome-content-progress {
    margin: 20px 0;
  }

  .follow-founder-video {
    margin-block: 10px;
  }

  .video-thumb {
    height: 290px;
    max-width: 496px;
  }

  .welcome-form-images {
    max-width: min(690px, 50vw);
  }

  .admin-coach-right {
    padding: 30px 10px 30px 15px;
  }

  .admin-about-card-wrapper .va-about-you-card {
    gap: 25px;
  }

  .admin-about-card-wrapper .va-overview-middle-content {
    max-width: 50%;
    min-width: unset;
  }

  .admin-report-client-items {
    padding: 38px 18px;
  }

  .va-cotact-right-desc {
    column-gap: 35px;
  }

  .va-conact-list-connect {
    flex-direction: column;
    align-items: self-start;
  }
}

@media (max-width: 1365px) {
  .client-coach-right {
    max-width: 100px;
  }

  .banner-right-content,
  .banner-chat-box {
    flex: 0 0 410px;
  }

  .teams-card-banner .welcome-banner {
    max-width: 63%;
    background-size: 688px 190%;
  }

  .banner-card-wrapper {
    max-width: 35%;
  }

  .settings-icon {
    width: 20px;
  }

  .va-cotact-right-desc {
    column-gap: 55px;
  }

  .va-cotact-right-desc {
    grid-template-columns: 1fr 1fr;
  }

  .welcome-form-data {
    padding: 10px 10px 10px 0;
  }

  .admin-account-grid .grid-items {
    padding: 24px 24px;
  }

  .admin-account-grid {
    gap: 20px;
  }

  .admin-report-client-items {
    gap: 15px;
  }

  .opp-banner .banner-top-content {
    padding-right: 40px !important;
  }
}

@media (max-width: 1250px) {
  .form-data {
    padding: 30px 25px 15px;
  }

  .form-desc h2 {
    font-size: 28px;
  }

  .form-images-bottom-desc h2 {
    font-size: 32px;
  }

  .form-images-bottom-desc p {
    font-size: 16px;
  }

  .form-data .form-data-top-desc {
    margin-bottom: 26px;
  }

  .form-logo {
    margin-bottom: 26px;
  }

  .welcome-bottom-sec {
    padding: 30px 20px;
  }

  .sidebar {
    max-width: clamp(200px, 22.5%, 350px);
  }

  .sidebar-wrapper {
    padding: 30px 30px 40px 24px;
  }

  .left-side-content {
    max-width: calc(100% - clamp(200px, 22.5%, 350px));
  }

  .event-content-wrapper,
  .grid-three {
    grid-template-columns: repeat(2, minmax(244px, 1fr));
    gap: 14px;
  }

  .news-card-grid {
    gap: 15px;
  }

  .news-card-items {
    max-width: calc(25% - 12px);
  }

  .current-task-items {
    padding: 18px;
  }

  .current-card-top,
  .tab-card-head h3,
  .tab-card-head {
    margin-bottom: 25px;
  }

  .current-card-icon {
    height: 35px;
    width: 35px;
  }

  .current-task-grid {
    gap: 15px;
  }

  .file-card {
    padding: 24px;
  }

  .profile-info-form {
    padding: 35px;
  }

  .va-timetab-table table {
    width: max-content;
    min-width: 100%;
  }

  .va-cotact-right-desc {
    padding: 30px;
  }

  .va-about-you-card {
    gap: 35px;
  }

  .admin-current-client-table .time-sheet-table thead th {
    padding-right: 20px;
  }

  .header-timer-overlay {
    left: 0;
    transform: translate(-50%, 50%);
    bottom: -33px;
  }

  .manage-admin-user-table tr td:last-child {
    width: 14%;
  }

  .header-content-left {
    max-width: 320px;
  }
}

@media (max-width: 1199px) {

  h1,
  .event-mid-section h2,
  .bill-card-bottom h2 {
    font-size: 36px;
  }

  h2 {
    font-size: 25px;
  }

  .news-card-items {
    max-width: calc(33.3% - 10.4px);
  }

  .sidebar-bottom-list {
    margin-top: 32px;
  }

  .sidebar-list-menu {
    margin-bottom: 12px;
  }

  .sidebar-wrapper {
    padding: 30px 20px;
  }

  .sidebar-chat {
    margin-top: 40px;
    margin-left: 18px;
    min-height: 50px;
    height: 50px;
    width: 50px;
    min-width: 50px;
  }

  .chat-count {
    right: -12px;
    outline: 4px solid #fff;
    height: 18px;
    width: 18px;
  }

  .banner-top-content {
    margin-bottom: 35px;
  }

  .current-task-grid {
    grid-template-columns: repeat(2, minmax(244px, 1fr));
  }

  .banner-right-content {
    flex: 0 0 360px;
  }

  .team-card {
    flex-direction: column;
    gap: 20px;
  }

  .team-left-wrapper {
    max-width: 100%;
    padding-right: 0;
  }

  .team-left-wrapper::before {
    display: none;
  }

  .team-card-left img {
    height: auto;
  }

  .team-card-right {
    max-width: 100%;
    width: 100%;
    padding: 20px;
    border-top: 1px solid #e7e7e7;
  }

  .team-info-row {
    justify-content: flex-start;
  }

  .team-card-list ul {
    columns: 190px 3;
  }

  .team-card-center {
    padding: 23px 0 0px 23px;
  }

  .team-card-desc {
    padding-right: 10px;
  }

  .banner-card-wrapper {
    max-width: 50%;
  }

  .teams-card-banner .welcome-banner {
    max-width: 100%;
  }

  .file-top-data {
    gap: 10px 10px;
  }

  .file-grid,
  .vas-info-block,
  .admin-opp-available .admin-opp-available-content {
    gap: 25px 20px;
  }

  .file-card {
    max-width: calc(50% - 11px);
  }

  .settings-row {
    flex-wrap: wrap;
  }

  .settings-btn {
    flex: 0 0 calc(50% - 12px);
  }

  .profile-info-form {
    padding: 30px 24px;
  }

  .profile-info-upload,
  .profile-info-form {
    max-width: calc(50% - 16px);
  }

  .profile-info-upload .file-drop-area {
    padding: 24px 20px;
  }

  .va-dash-table .time-sheet-table table {
    width: max-content !important;
    min-width: 100%;
  }

  .detail-banner-left,
  .banner-chat-box,
  .client-admin-notes-item,
  .client-admin-notes-item,
  .admin-banner-left,
  .admin-overview-last-wrapper {
    flex: unset;
    width: 100%;
  }

  .banner-chat-box .banner-chat-card {
    margin-left: unset;
  }

  .va-conact-list-desc h2 {
    font-size: 30px;
  }

  .va-about-you-image {
    height: auto;
    max-width: 307px;
  }

  .admin-opp-available-image {
    max-width: 50%;
    width: 100%;
  }

  .admin-opp-available .team-card-img {
    max-width: 100%;
    width: 100%;
  }

  .admin-opp-available .vas-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .va-Overview-role-content {
    flex: 1;
  }

  .admin-current-client-table .time-sheet-table table {
    width: max-content !important;
    min-width: 100%;
  }

  .admin-tab-section-main .tab-list-wrapper .tabbing-list li {
    flex: 0 0 auto;
  }

  .onboarding-hours-last-dec,
  .client-admin-notes-item,
  .client-admin-notes-item,
  .admin-about-card-wrapper .va-overview-middle-content {
    max-width: 100%;
  }

  .admin-account-table th,
  .admin-account-table td {
    width: auto !important;
    white-space: nowrap;
  }

  .admin-task-table .task-description-col {
    width: 290px;
  }

  .admin-report-client-items {
    padding: 30px 18px;
  }

  body .admin-banner {
    background-size: 380px auto;
    background-position: bottom right;
  }

  .admin-banner:not(.opp-banner) .banner-top-content {
    max-width: 350px;
  }

  .re-engaging-table table:has(.banner-check-wrapper) tr td:last-child,
  .manage-admin-user-table tr td:last-child {
    width: auto;
  }

  .add-sundry-date-wrapper {
    max-width: 100%;
  }

  .time-text {
    padding-right: 0;
  }

  .timer-start {
    position: fixed;
    z-index: 11;
    height: auto;
    top: 65px;
    right: 0;
    border: 0;
    border-radius: 0;
  }

  .timer-start .icon {
    background: #fff;
    width: max-content;
    padding: 7px;
    border-radius: 12px 0 0 12px;
    margin-left: auto;
    margin-top: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: flex;
    align-items: center;
  }

  .timer-start .icon svg {
    animation: shake 1.5s infinite;
  }

  .timer-start-body {
    position: relative;
    height: 100%;
    right: 0;
    z-index: 9999;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    transform: translateX(100%);
    transition: 0.35s ease-in-out;
    border: 1px solid #80808061;
    border-radius: 10px 0 0 10px;
    gap: 10px;
  }

  .timer-start.active .timer-start-body {
    transform: translateX(0);
  }

  .time-cal span {
    font-size: 18px;
  }

  .time-cal {
    flex: 1;
    padding: 10px 0 10px 10px;
  }

  .va-banner-timer-pending .timer-btn span::before {
    display: none;
  }

  .va-client-skill-list {
    flex: 0 0 40%;  
  }

}

@media (max-width: 1024px) {
  .welcome-row-wrapper {
    flex-direction: column;
    gap: 10px 30px;
    padding-block: 20px;
  }

  .welcome-bottom-logo img {
    width: auto;
  }

  .welcome-form-images,
  .va-admin-row,
  .va-your-start {
    max-width: 100%;
  }

  .video-thumb {
    width: 90%;
    margin-inline: auto;
  }

  .welcome-items-wrapper {
    padding: 30px;
  }

  .welcome-form-data {
    max-width: 100%;
    padding: 40px 0 20px;
  }

  .welcome-form-data-content {
    padding-inline: 20px;
    text-align: center;
  }

  .welcome-data-top-content p {
    font-size: 18px;
  }

  .skip-steps {
    right: 20px;
  }

  .profile-wrapper {
    margin: 25px auto 25px;
  }

  .profile-card {
    padding: 18px 15px;
  }

  .profile-image-box {
    padding: 12px 20px;
  }

  .plus-right {
    right: -8px;
    height: 45px;
    width: 45px;
    bottom: 37px;
  }

  .filter-input-wrapper {
    max-width: calc(50% - 10px);
    width: 100%;
  }

  .filter-input-wrapper :is(input, select) {
    width: 100% !important;
  }

  .coming-soon-parent h3 {
    margin: 18px 0;
  }

  .va-cotact-right-desc {
    column-gap: 30px;
  }

  .va-Edit-profile-container {
    padding: 24px;
  }

  .va-Edit-profile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .va-Edit-profile-form-group {
    margin-bottom: 24px;
  }

  .va-Edit-profile-form-group textarea {
    min-height: 140px;
  }

  .va-banking-wrapper {
    gap: 20px 30px;
  }

  .va-bank-sec {
    max-width: calc(58% - 15px);
  }

  .va-insurance-sec {
    max-width: calc(42% - 15px);
  }

  .va-banking-wrapper-inner,
  .va-banking-inner-sec {
    gap: 24px;
  }

  .intro-dash-wrapper .welcome-data-top-content {
    max-width: 100%;
  }

  .onboard-lets-go-icon img {
    height: 53px;
    width: 53px;
  }

  .onboard-lets-go-icon {
    width: 80px;
    height: 80px;
  }

  .onboard-lets-go-icon img {
    height: 33px;
    width: 33px;
  }

  .lets-go-check-wrapper {
    padding: 30px 32px;
  }

  .lets-go-border-wrapper {
    padding: 35px 35px;
  }

  .check-help-center-border {
    margin-top: 30px;
  }

  .va-monthly-hours h2 {
    font-size: 30px;
    margin-bottom: 10px;
  }

  .va-monthly-hours .event-top-icon {
    margin-bottom: 15px;
  }

  .welcome-page .welcome-data-top-content h1 {
    margin-top: 0;
  }

  .card-user-middle-sec h2 {
    font-size: 28px;
    margin-bottom: 5px;
  }

  .card-user-middle-sec h4 {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .welcome-page-container:has(.skip-steps) .welcome-form-data,
  .manage-plan-top-up-settings .manage-top-up {
    margin-top: 30px;
  }

  .admin-opp-filter-bar .filter-bar-right {
    flex: unset;
  }

  .admin-table-desc {
    width: 300px;
  }

}

@media (max-width: 992px) {

  .form-row-wrapper,
  .welcome-row-wrapper {
    flex-direction: column;
  }

  .form-images {
    max-width: 100%;
    order: 1;
  }

  .form-data {
    max-width: 100%;
    order: 2;
    padding: 50px 30px;
  }

  .slider-items-wrapper {
    height: 550px;
    padding: 30px;
    border-radius: 15px;
  }

  .form-logo {
    margin-bottom: 50px;
  }

  .form-desc h2 {
    font-size: 26px;
  }

  .form-images-bottom-desc h2 {
    font-size: 30px;
  }

  .form-images-bottom-desc p {
    font-size: 15px;
  }

  .slick-dots {
    justify-content: center;
    padding-left: 0;
    bottom: 20px;
  }

  .form-btn {
    width: 100%;
    text-align: center;
  }

  .form-slider-section {
    height: auto;
  }

  .validation-error-msg {
    margin: 14px 0 10px;
  }

  .header-content-left {
    max-width: 370px;
    display: flex;
    align-items: center;
    gap: 25px;
  }

  .left-side-content {
    max-width: 100%;
  }

  .sidebar {
    transform: translateX(-100%);
    max-width: 350px;
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .bg-body-overlay-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 10;
    display: block;
  }

  .memu-close {
    display: block;
  }

  .bg-body-overlay-mobile.active {
    opacity: 1;
    visibility: visible;
  }

  .alert img {
    height: 20px;
    width: 20px;
  }

  .sidebar-logo {
    position: relative;
    padding: 25px 24px 24px;
    height: 83px;
  }

  .mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-width: 45px;
    width: 100%;
  }

  .memu-close {
    position: absolute;
    right: 0;
    top: 50%;
    right: 20px;
    transform: translate(-50%, -50%);
  }

  .memu-close svg {
    height: 35px;
    width: 35px;
  }

  .sidebar.active~.bg-body-overlay-mobile,
  .sidebar.active .bg-body-overlay-mobile {
    opacity: 1;
    visibility: visible;
  }

  .news-card-items {
    max-width: calc(50% - 8px);
  }

  .input-search-wrapper {
    width: 100%;
  }

  .time-sheet-table table {
    width: max-content !important;
    min-width: 100%;
  }

  .current-plan-popup,
  .bill-payment-detail {
    padding: 25px;
  }

  .billing-card-popup .poup-logo {
    margin-bottom: 50px;
  }

  .va-dash-table table tr td:nth-child(-n + 5) {
    width: auto;
  }

  .va-about-you-card {
    gap: 24px;
    padding-right: 24px;
    align-items: flex-start;
  }

  .va-Overview-role-content {
    gap: 24px;
  }

  .va-overview-middle-content {
    max-width: 100%;
  }

  .va-opportunities-cards .grid-items {
    gap: 22px;
  }

  .va-opportunities-cards .bill-card-bottom,
  .admin-account-management .grid-items {
    gap: 20px;
  }

  .admin-current-client-table .time-sheet-table tbody td {
    width: 16%;
  }

  .admin-current-client-table .time-sheet-table tbody td:nth-child(3) {
    width: 20%;
  }

  .card-user-images-relative {
    border-radius: 10px 10px 0 0;
    padding-bottom: 60%;
  }

  .card-user-middle-sec {
    padding: 15px;
  }

  .card-user-last-sec {
    padding: 15px;
    text-align: left;
  }

  .va-your-start-grid,
  .admin-report-client-grid {
    grid-template-columns: repeat(2, 1fr);
  }



}

/* Mobile Horizontal (Landscape) */
@media screen and (max-width: 850px) and (orientation: landscape) {
  .welcome-form-images {
    min-height: 770px;
  }
}

@media (max-width: 767px) {

  h1,
  .heading-1 {
    font-size: 36px;
  }

  h2,
  .va-your-card-item h2,
  .client-admin-notes-item h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 20px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 16px;
  }

  p {
    font-size: 15px;
  }

  .btn-large {
    padding-block: 10px;
  }

  .admin-container {
    padding: 0 20px;
  }

  .slider-items-wrapper {
    height: 400px;
    padding: 25px;
  }

  .form-data {
    padding: 40px 25px;
  }

  .form-desc h2 {
    font-size: 24px;
  }

  .form-images-bottom-desc h2 {
    font-size: 26px;
  }

  .form-images-bottom-desc p {
    font-size: 14px;
  }

  .dummy-logo-text {
    font-size: 28px;
  }

  .form-btn {
    padding: 14px;
    font-size: 15px;
  }

  .remember-me-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .welcome-row-wrapper {
    gap: 15px;
  }

  .welcome-items-wrapper {
    padding: 20px;
  }

  .welcome-bottom-sec {
    padding: 20px;
    justify-content: center;
    gap: 15px;
  }

  .welcome-bottom-logo {
    max-width: calc(50% - 8px);
    width: 100%;
    padding: 0 13px;
  }

  .welcome-bottom-logo img {
    max-height: 22px;
    width: 100%;
    object-fit: contain;
  }

  .welcome-form-data {
    padding: 20px 0;
  }

  .welcome-form-data-content {
    padding-inline: 0px;
  }

  .welcome-data-top-content h1 {
    font-size: 26px;
    line-height: 1.2;
  }

  .welcome-data-top-content p {
    font-size: 16px;
  }

  .video-thumb {
    border-radius: 10px;
  }

  .play-btn {
    width: 45px;
    height: 45px;
  }

  .play-btn::after {
    left: 18px;
    top: 13px;
    border-width: 10px 0 10px 14px;
  }

  .welcome-btn {
    max-width: 200px;
  }

  .skip-steps {
    top: -10px;
    right: 15px;
  }

  .form-copyright p {
    font-size: 13px;
  }

  .welcome-bottom-logo {
    flex: unset;
  }

  .event-content-wrapper,
  .grid-three {
    grid-template-columns: repeat(1, minmax(244px, 1fr));
  }

  .alert {
    height: 34px;
    width: 34px;
    min-width: 34px;
    background: transparent;
    box-shadow: unset;
    padding: 0;
  }

  .h_timer span {
    display: none;
  }

  .alert a {
    display: block;
  }

  .time-cal span {
    font-size: 16px;
    line-height: 1;
  }

  .va-banner-timer-pending button {
    padding: 8px 10px;
    font-size: 14px;
  }

  .profile-img {
    height: 43px;
    width: 43px;
    min-width: 43px;
  }

  .profile-desc span {
    font-size: 12px;
    line-height: 1.2;
  }

  .client-header-wrapper {
    padding: 10px 10px 15px;
  }

  .dash-profile-wrapper,
  .dash-profile-wrapper.active {
    padding: 6px 0px 6px 6px;
  }

  .profile-desc p {
    font-size: 15px;
  }

  .client_header {
    gap: 10px;
  }

  .header-content-left {
    max-width: 300px;
  }

  .mobile-menu {
    max-width: 35px;
  }

  .header-right,
  .vas-info-block {
    gap: 15px;
  }

  .tab-card-head h3 {
    font-size: 20px;
  }

  .current-card-top,
  .tab-card-head h3,
  .tab-card-head {
    margin-bottom: 15px;
  }

  .popup-body {
    padding: 25px 30px;
  }

  .fancybox__content {
    padding: 5px;
  }

  .form-group,
  .va-form-row {
    margin-bottom: 20px;
  }

  .va-form-row {
    gap: 24px;
    flex-direction: column;
  }

  .admin-form-communication .va-form-row {
    align-items: flex-start;
  }

  .changeplan-head {
    gap: 10px 14px;
    margin-bottom: 15px;
  }

  .changepplan-popup-box {
    padding: 18px 20px;
  }

  .banner-right-content,
  .Email-server-configuration .va-form-row .form-col {
    flex: unset;
    width: 100%;
  }

  .welcome-banner {
    background-size: 450px 180%;
    background-position: right 0px top -83px;
  }

  .welcome-banner.client-dash-first-banner,
  .welcome-banner.banner-bg-sec {
    background-size: 248px 180%;
  }

  .banner-card-wrapper {
    max-width: 100%;
  }

  .team-card-desc {
    margin: 20px 0;
  }

  .tab-section-main,
  .tab-content-section,
  .file-drop-area {
    margin-top: 24px;
  }

  .tab-list-wrapper,
  .client-file-tab {
    padding: 8px 5px;
  }

  .settings-btn {
    flex: 0 0 100%;
  }

  .info-item span {
    font-size: 14px;
  }

  .info-item {
    gap: 5px;
  }

  .plan-info {
    gap: 10px;
  }

  .billing-card-popup .poup-logo {
    margin-bottom: 35px;
  }

  .manage-hour-count {
    column-gap: 10px;
  }

  .hours-wrapper {
    padding: 20px 10px;
  }

  .profile-info-upload,
  .profile-info-form {
    max-width: 100%;
  }

  .profile-save-btn {
    margin-top: 35px;
  }

  .profile-info-form,
  .profile-info-upload,
  .step-form-popup .popup-body {
    padding: 25px 15px;
  }

  .profile-info-upload .file-drop-area {
    padding: 24px 12px;
  }

  .profile-wrapper-title {
    margin-bottom: 24px;
  }

  .tab-profile-wrapper {
    padding: 25px 24px 34px;
  }

  .coming-soon-parent img {
    width: 250px;
  }

  .form-images-bottom-desc h2,
  .form-images-bottom-desc p {
    margin-bottom: 12px;
  }

  .btn-with-arrow:not(.button-small) {
    padding: 14px 46px 14px 24px;
    font-size: 14px;
  }

  .slick-dots {
    bottom: 15px;
  }

  .va-conact-list {
    flex-direction: column;
    align-items: stretch;
  }

  .va-conact-list-img {
    max-width: 100%;
    max-height: 300px;
    justify-content: center;
  }

  .va-conact-list-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .va-contact-grid {
    gap: 24px;
  }

  .va-cotact-right-desc {
    grid-template-columns: 1fr;
    row-gap: 24px;
    column-gap: 0;
    padding: 24px;
  }

  .va-conact-list-desc {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 16px;
  }

  .va-conact-list-connect {
    max-width: 100%;
    justify-content: flex-start;
  }

  .va-client-skill-list h6 {
    margin-bottom: 8px;
  }

  .va-about-you-card {
    flex-direction: column;
    gap: 20px;
    padding: 0px;
  }

  .va-about-you-image {
    width: 100%;
    max-width: 100%;
    height: 200px;
    border-radius: 10px;
  }

  .va-about-content {
    padding: 24px;
  }

  .va-Overview-role-content {
    flex-direction: column;
    padding-top: 0;
    gap: 20px;
  }

  .va-overview-middle-content,
  .va-overview-last-content {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
  }

  .va-client-skill-list h6,
  .vas-info-block-items h6 {
    margin-bottom: 6px;
  }

  .va-previous-client {
    margin-bottom: 20px;
  }

  .va-client-skill-main {
    padding-top: 20px;
  }

  .va-edit-your-profile,
  .admin-note-card-wrapper {
    padding: 0;
  }

  .va-Edit-profile-container {
    padding: 0 16px;
  }

  .va-Edit-profile-container h2 {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 130%;
  }

  .va-Edit-profile-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .va-Edit-profile-card {
    padding: 0;
  }

  .va-Edit-profile-form-group {
    margin-bottom: 20px;
  }

  .va-Edit-profile-form-group input,
  .va-Edit-profile-form-group textarea,
  .va-Edit-profile-card select {
    font-size: 15px;
    padding: 10px 12px;
  }

  .va-Edit-profile-form-group textarea {
    min-height: 120px;
  }

  .va-Edit-profile-tags li {
    font-size: 15px;
    padding: 4px 0;
  }

  .item-delete img {
    width: 20px;
    height: 20px;
  }

  .va-Edit-profile-footer {
    flex-direction: column-reverse;
    gap: 12px;
  }

  .va-Edit-profile-footer button {
    width: 100%;
  }

  .step-form-column,
  .step-form-user-form,
  .step-form-image-uplod,
  .half-column,
  .step-form-add-users .stepform_buttons {
    flex: 100%;
    width: 100%;
  }

  .stepform_progress {
    padding: 15px 10px;
  }

  .stepform_progress-btn {
    font-size: 13px;
  }

  .step-form-section h5,
  .create-custom-task h5,
  .stepform_progress {
    margin-bottom: 20px;
  }

  td.dataTables_empty {
    padding: 19px 0 !important;
    font-size: 16px !important;
  }

  body .admin-banner {
    background-size: 240px 109px;
    background-position: bottom right;
  }

  .admin-account-status-btn .btn {
    font-size: 14px;
    padding: 8px 35px 8px 14px;
  }

  .welcome-banner .filter-input-wrapper,
  .admin-form-communication .va-form-row .form-col {
    max-width: 100%;
    width: 100%;
  }

  .welcome-banner .filter-input-wrapper label {
    min-width: 58px;
  }

  .welcome-data-top-content h1 {
    letter-spacing: 0;
  }

  .welcome-data-top-content p,
  .intro-dash-wrapper .welcome-data-top-content p,
  .welcome-bottom-content p,
  .onboarding-hours-last-dec p {
    font-size: 16px;
    line-height: 1.2;
  }

  .login-box-right-icon {
    border-radius: 5px;
  }

  .onboard-login-box {
    padding: 15px 12px;
  }

  .onboard-export-wrapper {
    padding: 15px 16px;
    border-radius: 10px;
  }

  .onboard-export-wrapper .export-profile-desc p {
    font-size: 14px;
  }

  .onboard-export-wrapper .export-profile-desc span {
    font-size: 12px;
  }

  .onboard-export-wrapper .export-profile-img {
    height: 32px;
    width: 32px;
  }

  .center-align .export-card-border {
    margin-block: 25px;
  }

  .onboarad-login-content,
  .va-middle-box-margin {
    margin: 20px auto;
  }

  .va-get-support-border {
    padding: 50px 35px;
  }

  .va-get-icon {
    height: 50px;
    width: 50px;
  }

  .va-get-icon svg,
  .va-onboard-user-btn img {
    height: 25px;
    width: 25px;
  }

  .admin-latest-notes-last-para {
    margin-top: 5px;
  }

  .users-card-items {
    flex-direction: column;
  }

  .users-card-items-left-wrapper,
  .card-user-last-sec {
    max-width: 100%;
    width: 100%;
  }

  .users-card-items-left-wrapper::before {
    display: none;
  }

  .grid-col-2 {
    grid-template-columns: repeat(1, 1fr);
  }

  .stepform_content .banner-btn {
    padding: 12px 15px 12px 45px;
    font-size: 14px;
    max-width: 140px;
  }

  .step-form-add-users>.banner-btn {
    max-width: 213px;
  }

  .opp-banner .banner-top-content {
    max-width: 100%;
  }

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

  .client_header .search-suggestion-item {
    padding: 10px 2px;
  }

  .va-task-btn-group {
    gap: 12px;
  }

  .va-client-detail-tab .tabbing-list-menu a {
    padding: 7px 7px;
    font-size: 14px;
  }
  
  .va-client-skill-list {
    flex: 0 0 100%;  
  }
}

@media (max-width: 575px) {

  h1,
  :is(.event-mid-section, .bill-card-bottom, .admin-event-bottom) h2,
  .admin-bill-card-last-col .bill-card-bottom h2 {
    font-size: 28px;
  }

  .mobile-search {
    display: block;
    width: auto;
    flex: 1;
    text-align: right;
  }

  .dektop-search {
    display: none;
  }

  .input-search-wrapper img {
    position: relative;
    left: unset;
    top: unset;
    transform: unset;
    height: 24px;
    width: 24px;
    object-fit: contain;
  }

  .client-dashboard-main .client_header input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]) {
    position: absolute;
    width: 230px;
    z-index: 99;
    top: calc(100% + 15px);
    padding-inline: 20px;
    /* right: 0;
    left: -13px; */
    right: -150px;
    left: auto;
  }

  .mobile-search .search-suggestions {
    width: 280px;
    top: calc(100% + 59px);
    left: -40px;
    right: auto;
  }

  .client_header .suggestion-icon {
    width: 36px;
    height: 35px;
  }

  .client_header .suggestion-icon svg {
    width: 16px;
    height: 16px;
  }

  .header-content-left {
    max-width: 50px;
  }

  .header-right {
    flex: 1;
  }

  .header-right,
  .admin-opp-available .admin-opp-available-vas-card {
    gap: 8px;
  }

  .mobile-search-wrapper {
    height: 35px;
    width: 35px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .profile-desc {
    padding-right: 0;
  }

  .input-search-wrapper img {
    height: 20px;
    width: 20px;
  }

  .event-card-bottom {
    margin-top: 25px;
  }

  /* hide input by default */
  .input-search-wrapper input {
    width: 0;
    opacity: 0;
    padding: 0;
    border: none;
    visibility: hidden;
  }

  /* input when visible */
  .input-search-wrapper.active input {
    width: 180px;
    opacity: 1;
    visibility: visible;
    padding: 8px 35px 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
  }

  .current-task-grid {
    grid-template-columns: repeat(1, minmax(244px, 1fr));
  }

  .tabbing-list,
  .client-file-tab-menu {
    flex-wrap: wrap;
    gap: 5px;
  }

  .tabbing-list-menu,
  .client-file-tab-menu {
    flex: auto;
  }

  .tabbing-list-menu a,
  .client-file-tab-menu a {
    padding: 10px 5px;
    font-size: 12px;
  }

  .client-file-tab-menu a {
    font-size: 11px;
  }

  .popup-body {
    padding: 25px 20px;
  }

  .popupform-wrapper:not(.admin_account_deactivate .popupform-wrapper) {
    margin-top: 25px;
  }

  .form-button-group {
    gap: 15px;
  }

  .plan-bottom-data {
    gap: 10px;
    flex-direction: column;
    align-items: center;
  }

  .fancybox__content>.carousel__button.is-close {
    top: 20px;
    right: 20px;
  }

  .form-button-group {
    gap: 15px;
  }

  .changeplan-head h3 {
    font-size: 18px;
  }

  .filter-input-wrapper {
    max-width: 100%;
    display: flex;
    align-items: center;
  }

  .filter-bar label {
    width: 58px;
  }

  .filter-bar:has(+ .manage-admin-user-table) label {
    width: auto;
  }

  .filter-input-wrapper input {
    flex: 1;
  }

  .filter-bar-right :is(input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]),
    select) {
    height: 40px;
    font-size: 15px;
  }

  .team-card-left {
    max-width: 100%;
    width: 100%;
  }

  .team-card {
    flex-direction: column;
    gap: 20px;
    max-width: 350px;
    width: 100%;
    overflow: hidden;
    margin: auto;
  }

  .team-card-left img {
    height: auto;
    max-height: 380px;
  }

  .teams-card-banner .welcome-banner {
    background-size: 348px 200%;
    padding-right: 100px;
  }

  .top-banner-left-content {
    padding: 24px 14px 26px;
  }

  .file-card {
    max-width: 100%;
  }

  .welcome-banner.banner-bg-sec,
  .welcome-banner.client-dash-first-banner {
    background-size: 168px 160%;
  }

  .welcome-banner.client-dash-first-banner .banner-top-content:not(.teams-card-banner .banner-top-content) {
    padding-right: 70px;
  }

  .teams-card-banner .welcome-banner {
    background-size: 368px 160%;
  }

  .banner-bg-sec .banner-top-content,
  .welcome-banner .banner-top-content:not(.teams-card-banner .banner-top-content) {
    padding-right: 80px;
  }

  .file-drop-area {
    padding: 57px 20px;
  }

  .banner-check-wrapper,
  .admin-place-and-date-wrapper {
    flex-direction: column;
    align-items: start;
  }

  .current-plan-popup,
  .bill-payment-detail {
    padding: 25px 15px;
    gap: 25px;
  }

  .bill-payment-detail p,
  .bill-note-wrapper p {
    font-size: 16px;
  }

  .plan-info-wrapper {
    padding: 25px 20px;
  }

  .bill-note-wrapper {
    padding: 15px;
    gap: 10px 15px;
  }

  :is(.bill-card-bottom, .admin-event-bottom) h2 span {
    font-size: 22px;
  }

  .profile-menu li a {
    font-size: 14px;
  }

  .profile-menu {
    padding: 30px 10px 16px;
  }

  .profile-menu li {
    margin-bottom: 14px;
  }

  .event-slider-main .slick-list {
    padding: 0 10% 0 0 !important;
  }

  .welcome-detail-banner {
    background-size: 388px 200%;
  }

  .va-conact-list-desc h2 {
    font-size: 28px;
  }

  .va-conact-list-desc p {
    font-size: 16px;
  }

  .va-conact-list-items a {
    font-size: 13px;
  }

  .va-conact-list-connect {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .va-conact-list-items {
    gap: 10px;
  }

  .va-client-detail-tab .tabbing-list {
    justify-content: start;
  }


  .va-client-detail-tab .tabbing-list-menu {
    max-width: 90px;
  }

  .va-client-detail-tab .tabbing-list {
    gap: 10px;
  }

  .va-previous-client-name,
  .va-client-skill-list,
  .admin-opp-available-image {
    max-width: 100%;
    width: 100%;
  }

  .va-Edit-profile-tags li {
    font-size: 14px;
  }

  .va-bank-sec,
  .va-insurance-sec {
    max-width: 100%;
    padding: 22px;
  }

  .admin-opp-available .admin-opp-available-vas-card {
    padding-right: 0;
  }

  .admin-opp-available .admin-opp-available-content {
    padding: 10px 15px;
  }

  .va-insurance-renew-detail {
    gap: 12px 10px;
    padding: 15px;
    margin-top: 20px;
  }

  .va-manage-detail-wrapper .va-insurance-renew-detail p {
    font-size: 14px;
  }

  .va-manage-detail-wrapper .popup-body :is(p, li) {
    font-size: 16px;
  }

  .va-manage-detail-wrapper h2 {
    margin-bottom: 20px;
  }

  .va-manage-detail-wrapper .form-button-group {
    justify-content: center;
  }

  html.with-fancybox .time-sheet-table {
    display: none;
  }

  .toast,
  .toast.toast-error {
    width: 310px;
    padding: 18px;
  }

  .toast-title {
    font-size: 20px;
  }

  .times-sheet-wrapper {
    padding: 24px;
  }

  .admin-banner-right {
    flex: unset;
    width: 100%;
    margin-top: 30px;
  }

  .client-file-tab-content .profile-info-form .form-input {
    font-size: 13px;
  }

  .onboarad-login-content,
  .read-hour-box-wrapper,
  .onboard-card-border-wrapper,
  .check-help-center-border,
  .export-card-border,
  .va-handlng-question,
  .common-onboard-wrapper,
  .onboarding-mid-box-wrapper,
  .customer-service-wrapper,
  .onboard-automatic-wrapper,
  .lets-go-border-wrapper {
    max-width: calc(100% - 30px);
  }

  .onboard-card-left {
    max-width: 100%;
  }

  .onboard-right {
    max-width: 100%;
    width: 100%;
    max-height: 290px;
    height: 100%;
    display: flex;
  }

  .onboard-step-card {
    flex-direction: column-reverse;
  }

  .reclaim-check-btn.right {
    width: 43px;
    height: 43px;
    border-radius: 6px;
  }

  .help-center-btn {
    font-size: 15px;
  }

  .help-center-btn svg {
    height: 20px;
    width: 20px;
  }

  .team-card-center {
    padding: 23px 20px 0px 20px;
  }

  .top-banner-card:has(.no-image) .top.banner-img {
    max-width: 140px;
  }

  .admin-latest-notes-grid {
    gap: 24px;
  }

  .admin-latest-notes-items {
    gap: 14px;
    padding: 20px;
  }

  .admin-latest-notes-img {
    order: 1;
  }

  .admin-latest-notes-desc,
  .admin-note-mid-content {
    width: 100%;
    max-width: 100%;
    flex: unset;
    order: 3;
  }

  .admin-latest-notes-edit {
    order: 2;
    align-self: center;
    flex: 1;
    text-align: right;
  }

  .card-user-image {
    max-width: 100%;
  }

  .client-popup-common-width .form-button-group {
    justify-content: center;
  }

  :is(.input-search-wrapper, .alert) img {
    height: 17px;
    width: 17px;
  }

  .header-timer-overlay {
    min-width: 160px;
  }

  .timer-actions button,
  .timer-card {
    font-size: 12px;
  }

  .timer-card {
    padding: 8px 6px 8px 12px;
    border-radius: 7px;
  }

  .stepform_form .changeplan-head h4 {
    font-size: 15px;
  }

  .stepform_form .changepplan-popup-box {
    padding: 15px 18px;
  }

  .va-your-start-grid,
  .admin-opp-available .vas-info-grid,
  .admin-report-client-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .stepform_progress {
    gap: 5px;
  }

  .helth_status_group {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .mb-32 {
    margin-bottom: 20px !important;
  }

}

@media (max-width: 480px) {
  .welcome-form-images {
    height: 450px;
  }

  .slider-items-wrapper {
    height: 380px;
    padding: 20px;
  }

  .form-images-bottom-desc h2 {
    font-size: 22px;
  }

  .form-images-bottom-desc p {
    font-size: 13px;
  }

  .form-data {
    padding: 30px 20px;
  }

  .form-desc h2 {
    font-size: 20px;
  }

  .form-desc p {
    font-size: 14px;
    line-height: 1.3;
  }

  .form-btn {
    font-size: 14px;
    padding: 12px;
    line-height: 1.2;
  }

  .video-thumb {
    height: 250px;
    width: 100%;
  }

  .event-content-wrapper,
  .news-update-section {
    margin-top: 25px;
  }

  .news-card-items {
    max-width: 100%;
  }

  .event-content-wrapper .client-coach-right:has(.no-image) {
    height: auto;
    border-radius: 9px;
  }

  .client-coach-right img {
    height: auto;
    max-height: 350px;
  }

  .client-coach-right,
  .event-content-wrapper .client-coach-right:has(.no-image) {
    max-width: 100%;
  }

  .client-last-col {
    flex-direction: column-reverse;
  }

  .welcome-banner,
  .welcome-banner.task-banner,
  .event-content-card,
  .news-update-section,
  .common-padding,
  .grid-items,
  .va-accout-share-note-sec {
    padding: 20px 15px 20px;
  }

  .times-sheet-wrapper:has(.custom-pagination) {
    padding-bottom: 55px;
  }

  .custom-pagination {
    bottom: 20px;
  }

  .event-top-icon:not(.login-box-left-icon):not(.rolled-box-bottom-icon) {
    height: 35px;
    width: 35px;
  }

  .left-side-content .event-top-icon:not(.login-box-left-icon):not(.rolled-box-bottom-icon) img {
    height: 20px;
    width: 20px;
  }

  .client-coach-left-col {
    flex: 1;
    padding: 20px 0 25px;
  }

  .client-coach-top-sec {
    margin-bottom: 15px;
  }

  .news-card-grid,
  .admin-place-and-date-wrapper {
    margin-top: 15px;
  }

  .profile-img {
    height: 38px;
    width: 38px;
    min-width: 38px;
    outline: 2px solid #fff;
  }

  .banner-top-content br {
    display: none;
  }
}

@media (max-width: 365px) {
  .profile-img {
    height: 33px;
    width: 33px;
    outline: 1px solid #fff;
  }

  .header-right {
    gap: 6px;
  }

  .header-content-left {
    max-width: 30px;
  }

  .mobile-menu {
    gap: 5px;
  }

  .alert,
  .mobile-search-wrapper {
    height: 31px;
    width: 32px;
  }

  .header-profile-dropdown img:not(.profile-img img) {
    height: 16px;
    width: 16px;
  }

  .welcome-banner.client-dash-first-banner,
  .welcome-banner.banner-bg-sec {
    background-size: 158px 180%;
  }

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

  :is(.form-input::placeholder, input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]),
    .select2-container--default .select2-selection--single .select2-selection__placeholder),
  :is(.view-detail .form-input, .view-detail .form-input::placeholder, .view-detail textarea.select2-search__field::placeholder, .va-form-row .form-col label, .va-form-row input[type="date"]:valid:not(:focus), .va-form-row input[type="time"]:valid:not(:focus)),
  .select2-container--default .select2-search--inline .select2-search__field,
  .step-form-popup .tax-and-payment-col textarea::placeholder,
  .date-and-time,
  .client-popup-common-width input:not([type="checkbox"]):not([type="submit"]):not([type="radio"]) {
    font-size: 12px;
  }
}

@keyframes circle {
  0% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

@keyframes slideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes modalFadeIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}


@keyframes timerPopupSlideIn {
  from {
    transform: translateX(-50%) translateY(-30px);
    opacity: 0;
  }

  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}




@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes shake {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(28, 44, 28, 0.4);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(28, 44, 28, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(28, 44, 28, 0);
  }
}