@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --lightGrey: #fcfeff;

  --primaryBlue: #2c74da;

  --bluesBlue4: #486581;

  --white: #ffffff;

  --bluesBlue6: #829ab1;

  --lightBlue: #3b72bf;

  --neiviBlue: #334e68;

  --grey: #d9e2ec;

  --statusRed: #eb4e4e;

  --bluesBlue2: #243b53;

  --bluesBlue1: #102a43;

  --offWhite: #f9f9f9;

  --yellowsYellow: #d1b413;

  --bluesBlue5: #627d98;

  --greenGreen: #46db6e;

  --greyGrey: #d9e2ec;

  --lighBlue: #f0f4f8;

  --redRed: #eb4e4e;

  --bluesBlue9: #d9e2ec;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li,
input,
label,
select,
::placeholder,
.btn {
  font-family: "Urbanist", sans-serif;
}

body {
  background: var(--lightGrey);
  height: 100vh;
  overflow: hidden;
}
body.home,
body.jobs,
body.more,
body.edit-profile,
body.shift-detail,
body.job-detail,
body.application,
body.verify-email,
body.verfiy-email-success-page,
body.time-sheet,
body.edit-work-preferences,
body.edit-id-and-licenses-info,
body.edit-bank-info {
  height: 100vh;
  overflow: hidden;
}

body.sign-up {
  overflow: auto;
}
.justify-center {
  justify-content: center;
}
.custContainer {
  max-width: 800px;
  width: 100%;
  height: 100dvh;
  margin: 0 auto;
}
.w-100 {
  width: 100%;
}
.textCenter {
  text-align: center;
}
.topFixRow {
  position: fixed;
  top: 0;
  max-width: 800px;
  width: 100%;
  padding: 15px;
  height: 75px;
}
.verifyCode {
  margin: 0 auto;
  text-align: center;
}
.verifyCode input {
  text-align: center;
}
.application .contentOuterWrap,
.application .JobTopRow {
  background: #fcfeff;
}
.contentOuterWrap {
  margin: 60px 0 0 0px;
  padding: 15px;
  background-color: var(--offWhite);
  height: calc(100dvh - 60px);
  overflow-x: hidden;
  overflow-y: auto;
}
.application .contentOuterWrap {
  background: #fcfeff;
}
.job-detail .jobDisWrap {
  padding-bottom: 25px;
}
.contentOuterWrap.editContentWrap {
  height: calc(100dvh - 60px);
}
.contentOuterWrap.emailVeriConWrap {
  height: calc(100vh - 0px);
  margin-top: 0;
}
.authPagesContWrap,
.authTopRow {
  background: #fcfeff;
}
.homeTopRow {
  background-color: var(--offWhite);
}
.editPageWrap {
  background-color: white;
}
.JobTopRow {
  background-color: white;
  border-bottom: 1px solid #d9e2ec;
  height: 60px;
  padding: 0 15px;
  display: flex;
  align-items: center;
}
.JobDetTopRow {
  background-color: white;
  height: 60px;
  padding: 0 15px;
  display: flex;
  align-items: center;
}
.bottomNav {
  position: fixed;
  bottom: 0;
  max-width: 800px;
  width: 100%;
}
.forget a {
  color: var(--lightBlue);

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 150%; /* 21px */

  letter-spacing: 0.1px;

  text-decoration: none;
}

.btnBlue {
  padding: 16px;

  border-radius: 12px;

  background: var(--primaryBlue);

  box-shadow: 0px 4px 11px 0px rgba(195, 196, 234, 0.8);

  color: var(--white);

  font-size: 14px;

  font-style: normal;

  font-weight: 700;

  line-height: 16px; /* 114.286% */

  letter-spacing: 0.196px;
}

.login-form .btnBlue:hover {
  background: var(--primaryBlue);

  border-color: var(--primaryBlue);
}

.verify-gery-button .btnBlue:hover {
  background: var(--primaryBlue);

  border-color: var(--primaryBlue);
}

.image {
  text-align: center;

  width: calc(100% - 24px);

  margin-top: 10px;

  justify-content: center;

  align-items: center;
}

.image img {
  width: 72.529px;

  height: 67.235px;

  flex-shrink: 0;
}

.top-text h3 {
  color: var(--neiviBlue);

  text-align: center;

  font-size: 24px;

  font-style: normal;

  font-weight: 700;

  line-height: 32px; /* 133.333% */

  letter-spacing: -0.24px;

  margin-top: 16px;
}

.text-field::placeholder {
  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px; /* 114.286% */

  letter-spacing: -0.084px;

  color: var(--bluesBlue6);
}

.select-wrap select {
  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px; /* 114.286% */

  letter-spacing: -0.084px;

  color: var(--bluesBlue6);
}

.text-field label {
  color: var(--bluesBlue4);

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px; /* 114.286% */

  letter-spacing: -0.084px;
}

.text-field input {
  display: flex;

  padding: 16px;

  flex-direction: column;

  align-items: normal;

  gap: 10px;

  align-self: stretch;

  border-radius: 12px;

  border: 1px solid var(--grey);

  background-color: var(--white);
  font-size: 14px;
  font-weight: 400;
  color: var(--bluesBlue4);
}

.select-wrap .form-select {
  display: flex;

  padding: 20px 16px;

  flex-direction: column;

  align-items: flex-start;

  gap: 10px;

  align-self: stretch;

  border-radius: 12px;

  border: 1px solid var(--grey);

  background-color: var(--white);
}
.select-wrap .select2-container {
  display: flex;

  padding: 10px 10px 0 8px;

  flex-direction: column;

  align-items: flex-start;

  gap: 10px;

  align-self: stretch;

  border-radius: 12px;

  border: 1px solid var(--grey);

  background-color: var(--white);
}
.select-wrap .select2-container--default .select2-selection--single {
  border: 0;
}
.select-wrap .select2-container--default .selection {
  width: 94%;
}
.select-wrap
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  font-size: 14px;
  font-weight: 400;
  color: var(--bluesBlue4);
}
.select-wrap
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 10px;
  right: 10px;
}
.select2-dropdown {
  border-radius: 12px !important;
  border: 1px solid var(--grey) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--grey) !important;
  border-radius: 8px !important;
}
.header {
  display: flex;

  align-items: center;
}

.cancel {
  width: 24px;

  height: 24px;

  flex-shrink: 0;
}

.already p {
  text-align: center;

  color: var(--bluesBlue4);

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 20px; /* 142.857% */

  letter-spacing: -0.084px;
}

.already a {
  text-decoration: none;

  color: var(--primaryBlue);

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 20px;

  letter-spacing: -0.084px;
}

.already {
  margin-top: 15px;
}

.input-wrap i.dark-eye {
  color: var(--neiviBlue);
}

.input-wrap i.light-eye {
  opacity: 0.5;
}

.input-wrap i {
  position: absolute;
}

.light-eye {
  margin-left: 87%;

  margin-top: 0%;
}

.term-condition {
  color: var(--bluesBlue4);

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 20px; /* 142.857% */

  letter-spacing: -0.084px;

  margin-top: 5px;
}

.term-condition a {
  text-decoration: none;

  color: var(--primaryBlue);

  font-size: 14px;

  font-style: normal;

  font-weight: 500;

  line-height: 20px;

  letter-spacing: -0.084px;
}

.term-condition {
  text-align: center;

  display: flex;

  align-items: center;

  margin-top: 20px;
  flex-wrap: wrap;
  position: relative;
}
.term-condition label.error {
  position: absolute;
  top: 24px;
}

.term-condition label {
  margin-left: 10px;

  margin-top: 5px;
}

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

.input-wrap {
  position: relative;
}

.input-wrap i {
  position: absolute;

  top: 17px;

  right: 20px;
}

.input-wrap i.dark-eye {
  color: var(--neiviBlue);
}

.input-wrap i.light-eye {
  opacity: 0.5;
}

.information {
  display: flex;
}

.info-icon i {
  color: var(--statusRed);

  margin-bottom: 20px;
}

.info-icon {
  margin-top: -4px;
}

.incorrect p {
  color: var(--statusRed);

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px; /* 114.286% */

  letter-spacing: -0.084px;

  width: 303px;

  text-align: center;

  align-items: center;

  margin-left: 7px;
}

.recover-otp {
  color: var(--bluesBlue4);

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 150%; /* 21px */

  letter-spacing: 0.1px;
}

.recover-otp a {
  color: var(--lightBlue);

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 150%;

  letter-spacing: 0.1px;

  text-decoration: none;
  margin-left: 5px;
}
.botFixRow {
  position: fixed;
  bottom: 0;
  max-width: 800px;
  width: 100%;
}
.verify-code {
  color: var(--bluesBlue4);

  text-align: center;

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 20px; /* 142.857% */

  letter-spacing: -0.084px;

  margin-top: 10px;
}

.top-head {
  display: flex;

  margin-top: 10px;
}

.top-num {
  color: var(--bluesBlue6);

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px; /* 114.286% */

  letter-spacing: -0.084px;

  margin-top: 4px;
  text-align: right;
}

.prev-text {
  display: flex;
}

.prev h5 {
  color: var(--bluesBlue4);

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px; /* 114.286% */

  letter-spacing: -0.084px;

  margin-top: 2px;

  margin-left: 2px;
}

.verify-gery-button {
  display: flex;

  width: 327px;

  padding: 16px;

  justify-content: center;

  align-items: center;

  gap: 10px;

  border-radius: 12px;

  background: var(--bluesBlue6);

  text-align: center;

  margin-top: 20px;

  border: 0;
}

.lock-image img {
  margin-left: 20px;
}

.login-form,
.josPageWrap {
  max-width: 500px;
}

.pageTitle h3 {
  text-align: left;
  color: #0a0113;
}
.jobContentWrap h5 {
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--bluesBlue4);
  margin-bottom: 15px;
  padding: 0;
}
.jobContentWrap h6 {
  font-size: 14px;
  font-weight: 400;
  color: var(--bluesBlue4);
  margin: 0 0 15px 0;
  padding: 0;
}
.jobCard {
  background-color: white;
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 15px;
}
.jobContentWrap {
  padding: 15px;
  padding-bottom: 0px;
  height: calc(100dvh - 128px);
  margin-top: 60px;
  overflow-y: auto;
  background: #f9f9f9;
}
.jodDetTitle {
  background-color: white;
  border-bottom: 1px solid #d9e2ec;
  padding: 15px;
}
.jobsDetailPageWrap {
  padding: 0px;
  height: calc(100dvh - 60px);
  margin-top: 60px;
  overflow-x: auto;
  overflow-y: auto;
  background: #f9f9f9;
}
.homeJobsWrap {
  background-color: #f9f9f9;
  padding: 15px;
  padding-bottom: 82px;
  padding-top: 100px;
  overflow-y: auto;
}
.jobDisWrap {
  background-color: #f6f6f6;
  padding: 20px 15px;
}
.timeDetContWrap {
  background-color: #f6f6f6;
  padding: 0;
}
.jobsDetailPageWrap {
}
input[type="file"].form-control {
  border: 1px solid var(--grey);
  border-radius: 12px;
}
.jobsTime .dot {
  background: #486581;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 8px;
}
.textarea {
  border-radius: 12px;
  height: 120px;
  border: 1px solid var(--grey);
}
.disHead {
  margin-bottom: 10px;
}
.disHead h6 {
  display: flex;
  align-items: center;
  font-size: 11px;
  text-transform: uppercase;
  margin: 0;
  color: #486581;
}
.disHead h6 img {
  margin-right: 10px;
}
.disHead,
.disStartEndWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.disStartEndWrap h4 {
  font-size: 12px;
  font-weight: 400;
  line-height: 19px;
  color: #486581;
  display: flex;
  align-items: center;
  text-transform: uppercase;
}
.disStartEndWrap img {
  width: 16px;
  margin-right: 8px;
}
.disStartEndWrap h6 {
  font-size: 13px;
  font-weight: 400;
  color: #334e68;
}
.disStartEndWrap {
  margin-bottom: 20px;
}
.disText p {
  color: #334e68;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 20px;
}
.disRow h6 {
  font-size: 12px;
  font-weight: 400;
  line-height: 19px;
  color: #486581;
  display: flex;
  align-items: center;
  text-transform: uppercase;
}
.disRow p {
  font-size: 13px;
  font-weight: 400;
  color: #334e68;
}
.disRow {
  margin-bottom: 20px;
}
.disRow h6 img {
  margin-right: 10px;
  width: 16px;
}
.disBottomRow {
  position: fixed;
  bottom: 0;
  max-width: 800px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.disBottomRow a,
.disBottomRow button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  height: 60px;
  text-decoration: none;
  border-radius: 0;
}
.disBottomRow.half-btn a {
  width: 50%;
}
.disStartEndWrap .disEnd {
  min-width: 81px;
}
.disBottomRow a.blue {
  background-color: #2c74da;
}
.disBottomRow a.green {
  background-color: #1aba5e;
}
.red-text-field input {
  border-radius: 12px;

  border: 1px solid var(--statusRed);

  background: #fff;
}
.jobCardsHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jobCardsHead h6 {
  font-size: 18px;
}
.jobsDate {
  margin-bottom: 10px;
}
.jobsDate,
.jobsTime {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #486581;
}
.jobsDate img,
.jobsTime img {
  width: 19px;
  margin-right: 10px;
}
.viewDetail {
  margin-top: 10px;
  margin-bottom: 10px;
}
.bottomNav {
  background-color: white;
  padding: 12px 25px 8px;
  width: 100%;
  height: 68px;
  max-width: 800px;
  -webkit-box-shadow: -2px -6px 29px -12px rgba(168, 156, 168, 1);
  -moz-box-shadow: -2px -6px 29px -12px rgba(168, 156, 168, 1);
  box-shadow: -2px -6px 29px -12px rgba(168, 156, 168, 1);
}
.bottomNav ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bottomNav ul li {
  text-align: center;
}
.bottomNav ul li a {
  color: #829ab1;
  font-size: 12px;
  line-height: 14px;
  text-decoration: none;
}
.bottomNav ul li img {
  margin: 0 auto 5px;
}
.bottomNav ul li h6 {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
}
.bottomNav ul li.active a {
  color: #2c74da;
}
.bottomNav ul li.active img.normal {
  display: none;
}
.bottomNav ul li img.active {
  display: none;
}
.bottomNav ul li.active img.active {
  display: block;
}
.viewDetail a {
  color: #3b72bf;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.viewDetail a img {
  width: 10px;
  height: auto;
  margin-left: 5px;
}
.hoursBatch {
  background-color: #2c74da;
  padding: 4px 10px;
  border-radius: 20px;
  color: white;
  font-size: 16px;
  font-weight: 400;
}
.hoursBatch span {
  font-weight: 400;
  margin-right: 5px;
}

.save-proceed {
  margin-top: 0px;
}

.residential-form {
  margin-top: 50px;
}

.short-line {
  margin-left: 0px;
}

.licence-type {
  display: flex;
  justify-content: space-between;
}

.help a {
  text-decoration: none;

  text-align: right;

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px; /* 114.286% */

  letter-spacing: -0.084px;
}

.mid-text {
  justify-content: center;

  text-align: center;

  margin-top: 5%;
}

.check-image {
  margin-top: 40%;

  background: none;

  margin-left: 20px;
}

/* Husnain work*/

.logo-1 {
  text-align: center;

  width: calc(100%-24px);

  margin-top: 10px;
}

.forms {
  max-width: 500px;
}

.logo-1 img {
  width: 72.529px;

  height: 67.235px;

  flex-shrink: 0;
}

.chevron-text .bi {
  color: var(--bluesBlue4);

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px; /* 114.286% */

  letter-spacing: -0.084px;

  padding: 8px;
}

.Main-text,
h2 {
  gap: 2px;

  color: var(--neiviBlue);

  font-size: 24px;

  font-style: normal;

  font-weight: 700;

  line-height: 32px; /* 133.333% */

  letter-spacing: -0.24px;

  margin-top: 8px;

  text-align: center;
}

.bluish-button {
  border-radius: 12px;

  background: var(--primaryBlue);

  box-shadow: 0px 4px 11px 0px rgba(195, 196, 234, 0.8);

  width: 100%;

  padding: 16px;

  justify-content: center;

  align-items: center;

  gap: 10px;

  display: flex;

  margin-top: 0px;
}

.text-put ::placeholder {
  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px; /* 114.286% */

  letter-spacing: -0.084px;

  color: var(--bluesBlue6);
}

.text-put label {
  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px; /* 114.286% */

  letter-spacing: -0.084px;

  color: var(--bluesBlue4);
}

.text-put input {
  border-radius: 12px;

  border: 1px solid var(--grey);

  background: #fff;

  display: flex;

  padding: 16px;

  flex-direction: column;

  align-items: flex-start;

  gap: 10px;

  align-self: stretch;
}

.text-input {
  margin-top: 50px;
}

.error-text-put input {
  border-radius: 12px;

  border: 1px solid var(--statusRed);

  background: #fff;
}

.error-show p {
  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px; /* 114.286% */

  letter-spacing: -0.084px;

  color: var(--statusRed);

  margin-left: 10px;

  margin-top: 5px;
}

.error-icon i {
  color: var(--statusRed);

  margin-top: 2px;
}

.incorrect-mark {
  display: flex;

  margin-left: 0px;
}

.paragraph-text p {
  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 20px; /* 142.857% */

  letter-spacing: -0.084px;

  text-align: center;

  color: var(--bluesBlue4);
}

.image-area {
  margin-top: 40px;
}

.not-get p {
  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 20px; /* 142.857% */

  letter-spacing: -0.084px;

  color: var(--bluesBlue4);

  text-align: center;
}

.not-get a {
  font-size: 14px;

  font-style: normal;

  font-weight: 500;

  line-height: 20px;

  letter-spacing: -0.084px;

  color: var(--primaryBlue);

  text-decoration: none;
}

.reset-button {
  margin-top: 300px;
}

.profil-wrap {
  display: flex;
  align-items: center;

  margin-top: 50px;
}

.profil-text {
  margin-left: 20px;

  margin-top: 10px;
}

.profil-text h4 {
  font-size: 18px;

  font-style: normal;

  font-weight: 400;

  line-height: 130%; /* 23.4px */

  color: var(--bluesBlue1);
}

.profil-image {
  margin-top: 10px;
}

.welcome-begin-text {
  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 150%; /* 21px */

  letter-spacing: -0.084px;

  color: var(--neiviBlue);

  margin-top: 20px;

  text-align: center;
}

.Picture-only {
  align-items: center;

  justify-content: center;

  margin-left: 41%;

  margin-top: 127px;
}

.begin-button {
  margin-top: 0px;
}

.forms .blue-button:hover {
  background: var(--primaryBlue);

  border-color: var(--primaryBlue);
}
.notJobWrap {
  height: calc(100vh - 226px);
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.notJobWrap h6 {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #627d98;
}
/* husnain-end */

.question-1 h4 {
  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 20px; /* 142.857% */

  letter-spacing: -0.084px;

  color: var(--bluesBlue2);
}

.get-link-button {
  margin-top: 200px;
}

.question-1 p {
  font-size: 12px;

  font-style: normal;

  font-weight: 400;

  line-height: 16px; /* 133.333% */

  letter-spacing: -0.072px;

  color: var(--bluesBlue6);
}

.options-1 {
  display: flex;
}

.work {
  display: flex;

  justify-content: space-between;
}

.work-text h5 {
  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 20px; /* 142.857% */

  letter-spacing: -0.084px;

  color: var(--bluesBlue4);
}

.work-icon i {
  color: var(--primaryBlue);
}

.custom h5 {
  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 20px; /* 142.857% */

  letter-spacing: -0.084px;

  color: var(--bluesBlue4);
}

.custom {
  margin-top: 20px;
}

.form-check label {
  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 20px; /* 142.857% */

  letter-spacing: -0.084px;

  color: var(--neiviBlue);

  margin-left: 8px;
}

.q-portion {
  margin-top: 30px;
}

.work-button {
  margin-top: 30px;
}

.begin-page {
  background-color: var(--offWhite);
}

.profil-text p {
  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 150%; /* 21px */

  letter-spacing: -0.084px;

  color: var(--neiviBlue);
}

.input-wrap select {
  margin-top: 0px;
}

.select-wrap .form-select:focus {
  box-shadow: 0 0 0 0;
}

.select-wrap .form-select:focus-visible {
  box-shadow: 0 0 0 0;

  outline: none;
}

.Begin-App {
  padding: 50px;
}
/*Ahsam work*/
.bell {
  margin-left: 100px;
  margin-top: 10px;
  color: var(--bluesBlue2);
  position: relative;
}
.bell span {
  position: absolute;
  top: -7px;
  right: -7px;
  border-radius: 100%;
  color: red;
  font-family: "poppins", sans-serif;
  font-size: 15px;
  display: flex;
  align-items: center;
}
.bell a i {
  color: var(--neiviBlue);
  font-size: 18px;
}
.red-button .btn-danger {
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 0;
  padding: 10px 0px;
}

.verify-text p {
  text-align: center;
  color: var(--neiviBlue);
  margin-top: 150px;
  line-height: 21px;
  letter-spacing: -0.6%;
  font-size: 14px;
}
.verify-text span {
  color: var(--statusRed);
}
.veri-text span {
  color: var(--yellowsYellow);
}
.img-text {
  margin-top: 100px;
}
.img-text p {
  color: var(--bluesBlue5);
}
.edit-top-text {
  margin-top: 50px;
}
.prof-wrap {
  align-items: center;
}
.more-text {
  text-align: center;
}

.more-text span {
  color: var(--greenGreen);
}

.edit-profile {
  display: flex;
}
div.edit-profile {
  justify-content: center;
}

.edit-text a {
  text-decoration: none;
  color: var(--lightBlue);
}

.edit-icon a i {
  margin-left: 10px;
  color: var(--lightBlue);
}
.more-text {
  margin: 0;
}
.edit-profile-img input {
  border-radius: 100%;
  padding: 25px;
  height: 125px;
  width: 125px;
  position: relative;
  border: 2px solid #eeeeee;
  background: url(../images/Ellipse.png);
  margin: 0 auto;
  overflow: hidden;
  background-repeat: no-repeat;
  font-size: 0px;
}
.residential-address {
  justify-content: center;
}
.work-preferences {
  justify-content: center;
}
.signup-northsnow {
  justify-content: center;
}
.more-text h4 {
  color: var(--bluesBlue1);
}
.top-more {
  text-align: center;
  margin-top: 30px;
  border-bottom: 1px solid var(--greyGrey);
  padding-bottom: 20px;
  margin-bottom: 25px;
  color: var(--bluesBlue2);
}
.step1 a {
  display: flex;
  padding: 20px 0px 20px 0px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.icon1 i {
  margin-left: 0px;
  color: gray;
}
.editpro-linkswrap {
  padding: 15px;
}
.editlinkLeft {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: calc(100% - 16px);
}
.editlinkLeft img {
  margin-right: 10px;
}
.text1 {
  width: calc(100% - 38px);
}
.text1 h5 {
  color: var(--bluesBlue2);
  font-weight: 400;
  font-size: 14px;
  margin: 0;
}
.text1 b {
  color: var(--bluesBlue2);
  font-weight: 500;
}
.text1 p {
  font-weight: 400;
  font-size: 12px;
  color: var(--bluesBlue6);
  margin: 0;
  padding: 0;
}
.text1 br {
  font-weight: 400;
}
.img1 {
  margin-top: 10px;
  margin-left: 20px;
}
.step1 {
  border-bottom: 1px solid var(--lighBlue);
}
.editpro-linkswrap .step1:first-child,
.editpro-linkswrap .step1:last-child {
  border-top: 2px solid var(--lighBlue);
}
.editpro-linkswrap .step1:last-child {
  border-bottom: 0;
}
.logout {
  display: flex;
  margin-top: 30px;
}
.logout-text p {
  padding: 0;
  margin: 0;
  color: var(--redRed);
}

.top-text {
  display: flex;
}
.more-text {
  margin: 0;
}
.more-text b {
  margin-left: 100px;
}
.phone-text {
  display: flex;
  margin-left: 5px;
  color: var(--bluesBlue6);
}
.phone-txt {
  margin-left: 10px;
}
.profi-img {
  margin-top: 30px;
}
.cancel-txt .prev {
  color: var(--bluesBlue4);
  margin-top: 3px;
}
.mid-text {
  border-bottom: none;
}
.verify-text {
  text-align: center;
  border-bottom: none;
  margin-top: 0px;
  margin-left: 0px;
}
.verify-num-text {
  margin-left: 77px;
}
.row .another-verify {
  text-align: center;
  border-bottom: none;
}
.no-shift {
  margin-top: 30px;
}

.residential-address {
  justify-content: center;
  border-bottom: none;
}
.homeProfWrap {
  margin: 0px;
  padding: 0;
  justify-content: space-between;
}
.homeProfWrap .proLeft {
  display: flex;
  align-items: center;
}
.homeProfWrap .profil-text h4 {
  margin-bottom: 0;
}
.notifi-top-left {
  display: flex;
}
.top-notify {
  margin-top: 0px;
  margin-left: 118px;
  color: var(--neiviBlue);
}
.licence-info {
  justify-content: center;
  border-bottom: none;
}
.notify-step1 {
  display: flex;
  justify-content: space-between;
}
.today p {
  color: var(--bluesBlue4);
}
.login-northsnow {
  justify-content: center;
  border-bottom: none;
}
.notify-new-job {
  color: var(--bluesBlue2);
}
.notify-new-job a {
  text-decoration: none;
}
.notify-new-job h6 {
  color: #243b53;
  font-size: 14px;
  font-weight: 400;
}
.notify-new-job p {
  color: #486581;
  font-size: 14px;
  font-weight: 400;
}
.notify-new-job p span {
  font-weight: 300;
}
.notify-date {
  color: var(--bluesBlue6);
  font-size: 12px;
}
.notify-text span {
  color: var(--bluesBlue4);
}
.notify-blue-dot {
  position: relative;
  width: 22px;
}
.notify-blue-dot span {
  content: "";
  top: 3px;
  left: 0;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2c74da;
}
.another-verify {
  justify-content: center;
}
.notify-text {
  margin-left: 20px;
  color: var(--bluesBlue2);
}
.noti-back i {
  color: var(--bluesBlue4);
}
.noti-chevron {
  color: var(--bluesBlue4);
  margin-top: -1px;
  margin-left: 5px;
}
.notifi-top-left {
  margin-top: 40px;
}
.notify-stepno3 {
  margin-top: -20px;
}
.notify-run-late p {
  margin-left: 10px;
}
.notifi-top-left {
  border-bottom: 1px solid var(--bluesBlue9);
}
.job {
  border-bottom: 1px solid var(--bluesBlue9);
}
.notifications .job {
  margin-bottom: 20px;
}
.more-page {
  max-width: 430px;
  margin: 0 auto;
  background-color: white;
  padding-bottom: 90px;
}
.step1 a {
  text-decoration: none;
}
.notify-page {
  padding-bottom: 300px;
}
.today {
  padding-top: 20px;
}
.notify-run-late {
  padding-top: 15px;
}
.to-day p {
  color: var(--bluesBlue4);
}
.cont-1 p {
  color: var(--bluesBlue1);
}
.cont-1 span {
  color: var(--bluesBlue4);
  margin-top: -10px;
}
.clock-in {
  display: flex;
  margin-top: 10px;
}
.clock-text p {
  color: var(--lightBlue);
}
.clock-chevron i {
  color: var(--lightBlue);
  margin-left: 10px;
}
.sec-1 {
  background-color: #ffffff;
  padding: 16px 16px 8px 16px;
  border-radius: 12px;
}
.home2-page {
  background-color: #eeee;
  padding: 20px 30px 300px 30px;
}
.shifts-text p {
  color: var(--bluesBlue4);
  margin-top: 20px;
}
.euro a {
  text-decoration: none;
  background-color: var(--primaryBlue);
  color: #ffffff;
  padding: 4px 8px 4px 8px;
  border-radius: 20px;
}
.guard {
  display: flex;
  justify-content: space-between;
}
.calendor {
  display: flex;
}
.home-tomorrow {
  margin-left: 10px;
}
.calendor {
  color: var(--bluesBlue4);
}
.home2-clock-time {
  display: flex;
  color: var(--bluesBlue4);
}
.clock-time-text {
  margin-left: 10px;
}
.sec-3 {
  margin-top: 20px;
}
/*hussnain work*/
.back-clock {
  display: flex;
  justify-content: space-between;
}
.clock-button {
  border-radius: 20px;
}
.clock-button .btn-warning {
  color: var(--offWhite);
  border-radius: 20px;
  height: 25px;
  width: 116px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  padding-top: 2px;
}
.up-side {
  background-color: var(--white);
}
.river-text {
  width: 487px;

  height: 64px;

  margin-top: 10px;
}
.up-side .river-text .cunstruction-text {
  font-size: 24px;

  font-weight: 700;

  border-bottom: 1px solid var(--grey);

  line-height: 32px;

  letter-spacing: -0.01em;
  background-color: white;
}
.discript-hours {
  display: flex;

  justify-content: space-between;

  margin-top: 50px;
}
.discript-image {
  display: flex;

  color: var(--bluesBlue4);

  width: 120px;
}

.clock-time {
  width: 70px;

  border: 1px solid var(--primaryBlue);

  margin-right: 5px;

  background-color: var(--primaryBlue);

  border-radius: 20px;
}
.clock-time {
  color: var(--white);
}
.discript-text {
  margin-left: 8px;
  font-weight: 600;
}
.text-discript-job {
  width: 439px;

  height: 100px;

  top: 248px;

  left: 16px;

  color: var(--neiviBlue);

  margin-top: 10px;

  margin-bottom: 20px;
}
.text-discript-job p {
  font-size: 18px;

  font-weight: 400;

  line-height: 27px;

  letter-spacing: -0.006em;

  text-align: left;
}
.clock-duration {
  margin-top: 60px;

  display: flex;

  justify-content: space-between;

  color: var(--bluesBlue4);
}
.time-clock {
  display: flex;
}
.duration-time {
  display: flex;
}
.clock-duration,
.time-text,
.duration-text {
  margin-left: 7px;
}
.clock-duration {
  margin-left: 0px;
}
.time-hours {
  display: flex;

  justify-content: space-between;

  margin-top: 10px;

  color: var(--bluesBlue1);
}
.time-hours,
.time-T,
.hours-H {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.15000000596046448px;
  text-align: right;
}
.Clok-both {
  display: flex;

  justify-content: space-between;

  margin-top: 25px;

  color: var(--bluesBlue4);
}
.Clok-both,
.clok-in .clok-out {
  font-size: 10px;

  font-weight: 500;
}
.double-dots {
  display: flex;

  justify-content: space-between;

  color: var(--bluesBlue1);
}
.double-dots,
.first-dot .second-dot {
  font-size: 18px;

  font-weight: 500;

  line-height: 24px;

  letter-spacing: -0.15000000596046448px;

  text-align: right;

  margin-top: 5px;
}
.icon-adress {
  display: flex;

  color: var(--bluesBlue4);

  margin-top: 30px;
}
.icon-adress .adress-map {
  margin-left: 10px;
}
.site-adress {
  color: var(--neiviBlue);

  font-size: 18px;

  font-weight: 500;

  line-height: 20px;

  letter-spacing: -0.006em;

  text-align: left;

  margin-top: 10px;
}
.map-image img {
  width: 100%;

  margin-top: 20px;
}
.map-direction {
  text-align: right;

  color: var(--primaryBlue);

  margin-top: 10px;
}
.map-direction a {
  font-size: 16px;

  font-weight: 400;
}
.clok-in-btn .btn {
  width: 100%;

  border-radius: 0px;

  margin-top: 25px;
}
.btn {
  padding-top: 25px 8px 25px 8px;
}
.employee-clocked {
  margin-top: 20px;

  padding-left: 13px;

  padding-right: 13px;

  color: var(--neiviBlue);
}
.employee-clocked p {
  font-size: 18px;

  font-weight: 400px;
}
.green-btn .btn-green {
  font-size: 14px;

  color: var(--offWhite);

  background-color: var(--greenGreen);

  border-radius: 20px;
}
.Clok-out-btn .btn {
  background-color: var(--statusRed);

  border: 1px solid var(--statusRed);
}
.back-clock .red-button .btn-red {
  background-color: var(--statusRed);

  border-radius: 20px;

  color: var(--white);
}
.clock-blue-btn .btn-primary {
  background-color: var(--primaryBlue);

  border-color: var(--primaryBlue);
}
.gray-button .btn-grey {
  background-color: var(--bluesBlue6);

  border-radius: 20px;

  color: var(--white);
}
.last-text {
  text-align: center;

  margin-top: 40px;

  margin-bottom: 20px;

  color: var(--bluesBlue5);

  border-top: 1px solid var(--grey);
}
.comp-btn .btn-blue {
  background-color: var(--primaryBlue);

  color: var(--white);

  border-radius: 20px;
}
/*hussnain work end*/
.timesheet-up {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  border-bottom: 1px solid var(--greyGrey);
}
.time-month a {
  margin-left: 180px;
  color: var(--lightBlue);
  text-decoration: none;
}
.time-icon i {
  color: var(--lightBlue);
}
.timesheet-info {
  display: flex;
  justify-content: space-between;
  color: var(--bluesBlue2);
  font-size: 12px;
  font-weight: 400;
}
.total-done {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
  border-bottom: 1px solid var(--greyGrey);
  padding-bottom: 30px;
}
.total-done .total-hours p {
  color: var(--bluesBlue4);
}
.table th {
  color: var(--bluesBlue6);
  font-size: 10px;
  letter-spacing: 0.9px;
  padding: 8px;
}
.table td {
  color: var(--bluesBlue2);
  line-height: 16px;
  font-weight: 400;
  font-size: 12px;
  border-bottom: none;
  padding: 12px;
}
.timeSheetTabl.table {
  min-width: 500px;
}
.timeSheetTabl.table td:nth-child(1),
.timeSheetTabl.table td:nth-child(2) {
  width: 100px;
}
.timeSheetTabl.table td:nth-child(3) {
  width: calc(100% - 376px);
}
.timeSheetTabl.table td:nth-child(4),
.timeSheetTabl.table td:nth-child(5) {
  width: 88px;
}
.table td:nth-child(1) {
  width: 77px;
}
.table td:nth-child(2) {
  width: 38%;
}
.table td:nth-child(3) {
  width: 106px;
}
.total-done .total-hours span {
  color: var(--bluesBlue1);
  font-weight: 400;
  font-size: 18px;
}
.time-she h5 {
  font-size: 24px;
  font-weight: 700;
}
.proTopBar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0px 0 0;
  align-items: center;
}
.proTopBar .backBtn,
.application .proTopBar .nextBtn {
  width: 72px;
}
.proTopBarText img {
  width: 50px;
}
.proTopBar .nextBtn {
  min-width: 72px;
  text-align: right;
}
.application .proTopBar {
  padding-top: 0;
  align-items: center;
}
.shift-detail .proTopBar .proTopBarText {
  width: auto;
}
.proTopBar .proTopBarText {
  width: calc(100% - 144px);
  text-align: center;
}
.backBtn a {
  font-size: 14px;
  font-weight: 400;
  color: var(--bluesBlue4);
}
.backBtn a i {
  font-size: 14px;
  color: var(--bluesBlue4);
}
.proTopBarText h4 {
  font-size: 16px;
  font-weight: 400;
  color: var(--neiviBlue);
  text-align: center;
  margin-bottom: 0;
}
.editProfWrap {
  padding: 0;
}
.more-page.editPageWrap {
  padding-bottom: 0;
}
.change-photo-btn {
  border-radius: 73px;
  display: inline-block;
  position: absolute;
  font-size: 16px;
  bottom: 6px;
  right: -13px;
  width: 32px;
  height: 32px;
  background-color: var(--primaryBlue);
  color: #333;
  transition: 0.3s;
  cursor: pointer;
}
.profImgWrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 25px;
  margin-bottom: 10px;
}
.profImgWrap h4 {
  margin-top: 15px;
}
.profImgWrap h4,
.profImgWrap p {
  width: 100%;
  text-align: center;
}
.photoUpload {
  position: relative;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  color: #fff;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.photoUpload {
  color: #fff;
}
.photoUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}
.profImg {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px solid var(--grey);
  border-radius: 100%;
}
.profImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100%;
}
.homeProfWrap .profImg {
  width: 40px;
  height: 40px;
}
.homeProfWrap .profil-text {
  margin-left: 15px;
  margin-top: 0;
}
.homeProfWrap .bell {
  margin-left: 0;
  margin-top: 0;
}
.profInfo {
  margin-top: 20px;
}
.noShiftWrap {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.noShiftWrap .no-shift-img {
  text-align: center;
}
.termsContent {
  margin: 60px 0 0 0;
  padding: 15px;
  text-align: left;
  height: calc(100vh - 60px);
  overflow-y: auto;
  background: #f9f9f9;
}
.termsContent p,
.termsContent li {
  font-size: 14px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
}
.termsContent p span {
  font-weight: 600;
}
.termsContent li {
  margin-bottom: 7px;
}
.termsContent ol {
  list-style-type: lower-alpha;
}
.termsContent ol ol {
  list-style-type: lower-roman;
  margin-top: 15px;
  margin-bottom: 15px;
}
.termsContent h2 {
  font-size: 16px;
  text-align: left;
}
.timeHeadWrap {
  position: fixed;
  top: 0;
  max-width: 800px;
  width: 100%;
  padding: 0;
}
.timeHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 6px 15px;
  border-bottom: 1px solid #eee;
}
.timeContWrap {
  background: #f9f9f9;
  height: calc(100dvh - 131px);
  margin-top: 60px;
  overflow-y: auto;
}
.timeHourRow {
  padding: 15px;
}
.timeHourRow .totHour {
  width: 30%;
}
.timeHourRow h6 {
  color: #486581;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
}
.timeHourRow h3 {
  color: #102a43;
  font-size: 13px;
  font-weight: 500;
  font-family: "poppins", sans-serif;
}
.table th {
  color: #829ab1;
  font-family: "poppins", sans-serif;
  font-weight: 500;
  font-size: 10px;

  text-align: left;
  background-color: transparent;
  text-transform: uppercase;
  border-top: 1px solid #e5dfdf;
}

.table td {
  color: #243b53;
  font-weight: 500;
  font-size: 12px;
  font-family: "poppins", sans-serif;
  padding: 12px 8px 12px 8px;
  text-align: left;
  background-color: transparent;
}
.table td a {
  color: #243b53;
}
.table {
  width: 100%;
  text-align: center;
}
.dropdown button {
  background-color: transparent;
  border: 0;
  color: #3b72bf;
  font-size: 14px;
  font-weight: 400;
}
.noAnyShiftTime {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.noshfInner {
  text-align: center;
}
.noshfInner h6 {
  color: #627d98;
  font-size: 14px;
  font-weight: 400;
  margin: 15px 0 0 0;
}
.phonWrap .iti {
  display: block;
}
.phonWrap .iti__flag-container {
  height: 55px;
}
.phonWrap .iti__selected-flag {
  border-radius: 12px 0 0 12px;
}
.sign-up-button {
  position: relative;
}
.sign-up-button .loaderWrap {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px 11px 11px 0px;
}
.sign-up-button .loaderWrap img {
  width: 48px;
  height: auto;
}
.profImg .photoTrash {
  position: absolute;
  background-color: #c2b9b9;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -12px;
  color: red;
  z-index: 2;
}
.profImg .phoLoadWrap {
  content: "";
  position: absolute;
  background-color: #f7f4f9c7;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  top: -1px;
  z-index: 1;
}
.profImg .phoLoadWrap img {
}
.timeHead ul.dropdown-menu {
  border: 0;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.timeHead ul.dropdown-menu li a.dropdown-item {
  color: #334e68;
  font-size: 14px;
  font-weight: 400;
}
@media only screen and (max-width: 430px) {
  .contentOuterWrap {
    height: calc(100vh - 155px);
  }
}