@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

html,
body {
  background: var(--bs-white);
  font-family: "Plus Jakarta Sans", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.mobile-nav-toggler {
  display: none;
}

.mobile-menu {
  display: none;
}

.container-fluid {
  width: 1280px;
  margin: 0 auto;
}

.navbar-wrapper {
  width: 100%;
  height: 88px;
  position: fixed;
  top: 0;
  right: 0px;
  z-index: 998;
  transition: 0.4s all;
}

.navbar-wrapper.nav-sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background: var(--bs-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: 0.5s all;
}

.navbar {
  padding: 0;
}

.navbar-nav {
  flex-direction: row;
  gap: 24px;
}

.navbar-nav .nav-item .nav-link {
  color: var(--bs-neutral-900);
  font-weight: 600;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  padding: 2px 6px;
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link.active {
  color: var(--bs-primary-500);
  position: relative;
}

.profileContainer .btn-link {
  color: var(--bs-primary-500);
}

.profileContainer .btn-link:hover {
  color: var(--bs-primary-600);
}

.profileContainer .btn-link:focus {
  color: var(--bs-primary-600) !important;
}

.profile .profile-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.profileContainer .dropdown-menu {
  width: 270px;
  padding: 14px 24px 24px 24px;
  border: 0px;
  box-shadow: 0px 2px 4px -4px rgba(15, 28, 51, 0.04),
    0px 3px 8px -2px rgba(15, 28, 51, 0.1);
  transform-origin: top right;
  transition: 0.4s ease-in-out;
}

.profileContainer .nav-item .nav-link {
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: unset;
  gap: 10px;
  width: 100%;
  color: var(--bs-neutral-500);
}

.profile .nav-link:hover svg .my_acc {
  stroke: var(--bs-primary-500);
}

.profile .nav-link:hover svg .setting {
  fill: var(--bs-primary-500);
}

.profile .nav-link:hover svg .cng-pass {
  stroke: var(--bs-primary-500);
}

.profile .nav-link:hover svg .logout {
  stroke: var(--bs-primary-500);
}

.profileContainer .nav-item .nav-link .title:hover {
  color: var(--bs-primary-500);
}

.profile.mobile {
  display: none;
}

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

.action-menu .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  border-radius: 50%;
}

.navbar-wrapper.afterLogin {
  /* box-shadow: 0px 4px 20px 0px #0000001F; */
  border-bottom: 1px solid var(--bs-neutral-200);
  background: var(--bs-white);
}

.navbar-wrapper.afterLogin.nav-sticky {
  box-shadow: none;
}

.mini-navbar {
  width: 420px;
  margin: 0 auto;
}

.mini-navbar .content {
  width: 420px;
  box-shadow: 0px 12px 20px 0px #0000001f;
  background: var(--bs-white);
  padding: 16px 20px 16px 20px;
  border-radius: 0px 0px 24px 24px;
  position: fixed;
  top: 88px;
  z-index: 996;
  flex-wrap: wrap;
  color: var(--bs-neutral-300);
}

/* navbar css */

/* main content css */

.main-content {
  /* padding: 200px 0px 0px 0px; */
  min-height: calc(100vh - 312px);
  max-height: fit-content;
  margin-top: 200px;
}

.content-area {
  background: var(--bs-white);
  padding: 24px;
}

/* main content css */

/* footer css */
.footerContainer {
  background: var(--bs-neutral-900);
  padding: 50px 0 30px 0;
  margin-top: 160px;
}

.footer-top {
  border-bottom: 1px solid #cbd5e1;
}

.social-icon i {
  font-size: 32px;
}

.footer-bottom .link a {
  color: var(--bs-white);
  font-size: 16px;
}

.footer-top .sort-summary .summary {
  border-left: 1px solid #cbd5e1;
  padding-left: 24px;
}

.footer-menu {
  display: none;
}

/* hero section css */

.hero-content .sort-summary {
  margin-top: 44px;
}

.hero-content .getStart {
  width: fit-content;
}

/* hero section css */
/* offer section css */
.sub-heading h6 {
  line-height: 26px;
}

.hero-wrapper {
  background: #f5f9f9;
  /* background-image: url("../images/hero_bg.svg"); */
  margin-top: -200px;
  padding-top: 200px;
  height: 960px;
}

/* offer section css */
.offer-wrapper {
  margin-top: -164px;
}

.offer-wrapper .offer-content {
  background: var(--bs-white);
  box-shadow: 4px 20px 60px 0px #00000014;
  border-radius: 24px;
  padding: 46px 40px;
}

.offer-lists .row {
  margin: 0 -10px;
}

.offer-lists .row .col-md-4 {
  padding: 0 10px;
}

.offer-lists .card {
  border: 0;
}

.mt-120 {
  margin-top: 120px;
}

.overview-wrapper .container-fluid {
  width: 1440px;
}

/* offer section css */

/* category section */

.category-wrapper {
  background: var(--bs-neutral-900);
}

.category-content {
  padding: 34px 0;
}

.category-content .content {
  padding-right: 90px;
}

/* category section */

/* employee-tasks */

.employee-tasks .task-icon {
  width: 64px;
}

.employee-tasks .task-content {
  width: calc(100% - 80px);
  padding-right: 40px;
}

.sub-heading {
  width: 70%;
  margin: 0 auto;
}

/* employee-tasks */

/* Faq section css */
.accordion-body {
  padding-top: 0;
}

.faq-content .row {
  margin: 0 -20px;
  row-gap: 30px;
}

.faq-content .row .col-sm-6 {
  padding: 0 20px;
}

/* faq section css */

/* login page */

.auth-wrapper .auth {
  width: 1110px;
  margin: 0 auto;
  background: var(--bs-white);
  border: 1px solid var(--bs-neutral-300);
  border-radius: 16px;
}

.credintial-auth {
  width: 780px;
  margin: 0 auto;
  background: var(--bs-white);
  border: 1px solid var(--bs-neutral-300);
  border-radius: 16px;
  padding: 32px;
}

.auth-form .row {
  row-gap: 8px;
}

.auth-content {
  padding: 14px 60px;
}

.auth-bg img {
  margin-top: -20px;
}

.socialBtn {
  border: 1px solid var(--bs-neutral-300);
  border-radius: 4px;
  padding: 6px 0;
}

.input-field.otp {
  width: 470px;
  margin: 0 auto;
}

.input-field.otp .form-control {
  padding: 1.5rem 0.75rem;
  text-align: center;
}

/* login page */

/* message page */
.message-wrapper {
  width: 576px;
  margin: 0 auto;
}

/* message page */

/* dashboard css */
.job-lists .table tbody tr td a {
  text-decoration: underline;
}

.table-responsive {
  background: var(--bs-white);
  padding: 0;
}

.progress {
  --bs-progress-height: 10px;
}

.dashboard-filter {
  width: 590px;
}

.dashboard-filter .form-control {
  /* padding: 0.782rem 40px; */
  border: 1px solid var(--bs-neutral-300) !important;
}

.dashboard-filter .search-icon {
  position: absolute;
  left: 10px;
  top: 14px;
}

form.dashboard-filter .row {
  margin: 0 -8px;
}

form.dashboard-filter .col-md-4 {
  padding: 0 8px;
}

.table-responsive .table tbody tr {
  border-bottom: 1px solid transparent !important;
}

.table-responsive .table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.job-question {
  width: 720px;
  margin: 0 auto;
}

.job-question .card {
  padding: 32px;
  border-radius: 16px;
}

.job-details .row {
  margin: 0 -24px;
}

.job-details .row .col-8,
.job-details .row .col-4 {
  padding: 0 24px;
}

.job-summarry ul li {
  border-bottom: 1px solid var(--bs-neutral-300);
  padding-bottom: 8px;
}

.job-summarry ul li:last-child {
  border-bottom: 1px solid transparent;
}

.job-details .task-tab {
  border-bottom: 1px solid var(--bs-neutral-300);
  padding-bottom: 24px;
}

.job-details .task-tab .btn-link {
  border-bottom: 1px solid var(--bs-danger-500);
  color: var(--bs-danger-500);
  border-radius: 0;
}

.job-details .task-tab .btn-link:hover,
.job-details .task-tab .btn-link:focus {
  border-bottom: 1px solid var(--bs-danger-500) !important;
  color: var(--bs-danger-500) !important;
  border-radius: 0;
}

.task-screenshot .images {
  flex-wrap: wrap;
}

.task-screenshot .images .image {
  width: calc(33.33% - 16px);
}

.attach-file.dragDrop-area {
  width: 140px;
  height: 36px;
  border: 2px solid var(--bs-primary-300);
  border-radius: 4px;
  background: var(--bs-white);
}

.wallet-tab .card {
  width: fit-content;
  border: 0;
  padding: 8px 40px 8px 16px;
  background: #f1f5f9;
}

.tab-menus .btn-secondary {
  background: var(--bs-neutral-200);
  color: var(--bs-neutral-600);
}

.tab-menus .btn-secondary:hover {
  background: var(--bs-primary-500);
  color: var(--bs-white);
}

.tab-menus .btn-secondary:focus {
  background: var(--bs-primary-500) !important;
  color: var(--bs-white) !important;
}

.wallet .row form .row {
  margin: 0 -12px;
}

.wallet .row {
  margin: 0 -24px;
}

.wallet .row .col-8,
.wallet .row .col-4 {
  padding: 0 24px;
}

.waller-summary ul li {
  border-bottom: 1px solid var(--bs-neutral-300);
  padding-bottom: 8px;
}

.waller-summary ul li:last-child {
  border-bottom: 1px solid transparent;
}

.wallet-content .walletCard {
  padding: 32px;
}

.wallet-balance {
  background: #001b40;
  padding: 20px;
  border-radius: 8px;
}

.walletCard .paymentMethod {
  flex-wrap: wrap;
}

.walletCard .paymentMethod .card {
  border-radius: 8px;
  min-width: 100px;
}

.walletCard .paymentMethod .card .card-body {
  padding: 16px 24px;
}

.wallet-balance.deposit {
  background: #f1f5f9;
}

.paymentMethod .card {
  cursor: pointer;
}

.paymentMethod .card.active {
  border: 1px solid var(--bs-primary-500);
}

.create-task .row {
  margin: 0 -24px;
}

.create-task .row .col-8,
.create-task .row .col-4 {
  padding: 0 24px;
}

.task_tracking .tracking-steps {
  padding: 20px 0 10px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.streamline .step {
  height: 100%;
  width: 100%;
  display: flex;
  gap: 14px;
  position: relative;
  overflow: hidden;
  align-items: start;
}

.streamline .step .tracking_content {
  width: calc(100% - 54px);
}

.streamline .step .date-time p {
  color: var(--bs-neutral-500);
  font-size: 13px;
}

.streamline .step .step-icon::after {
  content: "";
  background: #d4dae1;
  width: 1px;
  height: 100%;
  display: block;
  position: absolute;
  left: 50%;
  margin: 8px 0;
}

.streamline .step .step-icon {
  width: 40px;
  min-height: 96px;
  max-height: fit-content;
  position: relative;
}

.streamline .step .step-icon .step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bs-neutral-300);
  color: var(--bs-neutral-500) !important;
}

.streamline .step .step-icon .step-circle h6 {
  color: var(--bs-neutral-500);
}

.streamline .step .step-icon .step-circle.isComplete {
  border: 1px solid var(--bs-primary-500) !important;
}

.streamline .step .step-icon .step-circle.isComplete h6 {
  color: var(--bs-neutral-900) !important;
}

.streamline .step:last-child .step-icon::after {
  width: 0px;
  height: 0;
}

.nextBtn .btn {
  width: 140px;
}

.create-task .form-check .form-check-label {
  font-weight: 400;
  color: var(--bs-neutral-900);
  cursor: pointer;
  font-size: 14px;
  padding: 10px 24px;
  border: 1px solid var(--bs-neutral-300);
  border-radius: 4px;
  background: var(--bs-white);
}

.create-task .form-check {
  padding-left: 0;
  width: fit-content;
}

.create-task .form-check-input:checked + .form-check-label {
  /* Change this to your desired color */
  border: 1px solid var(--bs-primary-500);
  background: #e6ecf5;
  color: var(--bs-primary-500);
}

.target_zone,
.task-category {
  flex-wrap: wrap;
}

.proof {
  display: flex;
  gap: 20px;
}

.proof-input {
  width: calc(100% - 230px);
}

.proof-select {
  width: 210px;
}

.choices__inner {
  min-height: 40px;
}

.notification .icon {
  width: 72px;
  min-height: 72px;
  max-height: fit-content;
  position: relative;
}

.notification .content {
  width: calc(100% - 86px);
}

.notificationContainer .notification {
  height: 100%;
  width: 100%;
  display: flex;
  gap: 14px;
  position: relative;
  overflow: hidden;
  align-items: start;
  border-bottom: 1px solid var(--bs-neutral-300);
  padding: 0 0 10px 0;
}

.notificationContainer .notification:last-child {
  border-bottom: 1px solid transparent;
}

.notification.read {
  h6 {
    color: var(--bs-neutral-500) !important;
  }

  p {
    color: var(--bs-neutral-400) !important;
  }
}

.copyBtn .social-media i {
  font-size: 24px;
  color: var(--bs-primary-500);
}

.referal-link {
  width: 480px;
  margin: 0 auto;
  padding: 24px;
  background: var(--bs-neutral-100);
  border-radius: 16px;
}

.profileImgContainer .uploadIcon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profileImgContainer .profile-upload {
  width: 132px;
  height: 132px;
  border-radius: 50%;
}

.setting .tab-content .card {
  padding: 32px;
}

.setting .profile-status {
  .row {
    margin: 0 -10px;
  }

  .col-4,
  .col-8 {
    padding: 0 12px;
  }
}

.profile-active .circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bs-success-500);
}

.profile-section {
  border-bottom: 1px solid var(--bs-neutral-300);
  padding-bottom: 14px;
}

.chart {
  .row {
    margin: 0 -10px;
  }

  .col-6 {
    padding: 0 10px;
  }
}

.table-responsive .table tbody tr td a {
  text-decoration: underline;
}

.msg-footer {
  .msg-input {
    width: calc(100% - 97px);
  }

  .btn-md {
    width: 48px;
    border-radius: 50%;
    padding: 12px !important;
  }

  .btn-md i {
    font-size: 20px;
  }

  .fileAttached {
    width: 32px;
    height: 32px;
  }
}

.chatbox {
  width: 780px;
  margin: 0 auto;
}

/* .chat-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  background: #f9f9f9;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.chat-messages::-webkit-scrollbar {
  width: 5px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
} */
.message {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

.message.sent {
  align-items: flex-end;
}

.message.sent p {
  padding: 10px 14px;
  background: var(--bs-primary-500);
  color: var(--bs-white);
  border-radius: 4px;
}

.message.received {
  align-items: flex-start;
}

.message.received p {
  padding: 10px 14px;
  background: var(--bs-neutral-100);
  border-radius: 4px;
}

#task-satisfy-modal .btn-link {
  border-bottom: 1px solid var(--bs-danger-500);
  color: var(--bs-danger-500);
  border-radius: 0;
}

.task-details {
  .row {
    margin: 0 -24px;
  }

  .col-4,
  .col-8 {
    padding: 0 24px;
  }
}

.search_icon {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.filter .searchField {
  padding: 0.532rem 0.75rem 0.532rem 2.3rem;
}

/* .filter .choices__inner {
  min-height: 40px;
} */

.article .card {
  border-radius: 12px;
}

.article-lists {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  grid-gap: 0;
  grid-gap: 24px;
  gap: 24px;
  grid-row-gap: 30px;
  row-gap: 30px;
}

.article-details {
  .row {
    margin: 0 -24px;
  }

  .col-8,
  .col-4 {
    padding: 0 24px;
  }
}

.lates-articles h5 {
  border-bottom: 1px solid var(--bs-neutral-300);
  padding-bottom: 14px;
}

.lates-articles ul li {
  border-bottom: 1px solid var(--bs-neutral-300);
  padding-bottom: 14px;
}

.lates-link {
  display: flex;
  align-items: center;
  gap: 20px;

  img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
  }

  .content {
    width: calc(100% - 100px);
  }
}

.lates-articles .categories {
  .item {
    background: var(--bs-neutral-100);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    width: fit-content;

    span {
      background: var(--bs-white);
      padding: 4px 8px;
      border-radius: 4px;
    }
  }
}

.tags {
  a {
    background: var(--bs-neutral-100);
    border-radius: 8px;
    padding: 12px 16px;
    width: fit-content;
    color: var(--bs-primary-500);
  }
}

.tagContent {
  border: 1px solid var(--bs-neutral-300);
  border-radius: 8px;
  padding: 12px 16px;
}

.share {
  .social i {
    font-size: 20px;
    color: var(--bs-primary-500);
  }
}

.movile-view-filter {
  display: none;
}

.movile-view-collapse {
  display: none;
}

.mobile-view-table {
  display: none !important;
}

.footerContainer .social-media,
.footerContainer .company {
  padding-left: 48px;
}

.terms_condition {
  color: var(--bs-link-color);
  text-decoration: underline;
}