@import url("../css/common.css");

/* header section start  */
.bannerSliders .header-banner{
  width: 100%;
  height: 768px;
  object-fit: cover;
}
.bannerSliders .items::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: #161c2d4d;
}
.header-inner-contents{
  position: absolute;
  width: 100%;
  top: 25%;
}
.bannerSliders .slick-prev{
  background: #ffffff29;
  border: none;
  font-size: 0;
  position: absolute;
  z-index: 9;
  top: 0;
  left: 2%;
  bottom: 0;
  margin: auto;
  height: 52px;
  width: 52px;
  border-radius: 12px;
  color: var(--white-to-color);
}
.bannerSliders .slick-prev::before{
  content: "\ed96";
  font-family: "boxicons";
  font-size: 24px;
}
.bannerSliders .slick-next{
  background: #ffffff29;
  border: none;
  font-size: 0;
  position: absolute;
  z-index: 9;
  top: 0;
  right: 2%;
  bottom: 0;
  margin: auto;
  height: 52px;
  width: 52px;
  border-radius: 12px;
  color: var(--white-to-color);
}
.bannerSliders .slick-next::before{
  content: "\ee49";
  font-family: "boxicons";
  font-size: 24px;
}
.jobs-header-search{
  border-radius: 10px;
  background: var(--white-color);
  padding: 4px 8px;
}
.input-headerSearch{
  border-radius: 8px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0px 20px;
  color: var(--title-text);
}
.input-headerSearch .input-search{
  width: 100%;
  border: none;
  height: 50px;
  outline: 0px;
  font-weight: 400;
  color: var(--title-text);
  font-size: 15px;
  background: var(--white-color);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
.job-search-header{
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  color: var(--white-to-color);
  border-radius: 8px;
  width: 100%;
  padding: 8px 22px;
  border: none;
}
.up-downHeader-arrow i{
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  border: 2px solid var(--white-to-color);
  border-radius: 100%;
  color: var(--white-to-color);
  font-size: 36px;
}
.up-downHeader-arrow{
  -webkit-animation: mover 3s infinite  alternate;
  animation: mover 3s infinite  alternate;
}
@-webkit-keyframes mover {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}
@keyframes mover {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* navbar section start  */
.header-home-main .main-navbardesign{
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 99;
}
.navbar-motersDesign.forHome .navbar-ui-links li:hover a,
.navbar-motersDesign.forHome .navbar-ui-links li a,
.navbar-motersDesign.forHome .navbar-ui-links li.active a{
  color: #fff;
}
.navbar-motersDesign .navbar-ui-links li:hover a::after,
.navbar-motersDesign .navbar-ui-links li.active a::after{
  content: "";
  height: 6px;
  width: 6px;
  display: block;
  position: absolute;
  background: var(--primary-white-color);
  bottom: -9px;
  border-radius: 100%;
  left: 0;
  right: 0;
  margin: auto;
}
.navbar-motersDesign.forHome .navbar-ui-links li:hover a::after,
.navbar-motersDesign.forHome .navbar-ui-links li.active a::after{
  background: #fff;
}
.navbar-motersDesign .navbar-ui-links li:hover a,
.navbar-motersDesign .navbar-ui-links li a{
  color: var(--title-text);
  font-size: 14px;
  position: relative;
  font-weight: 500;
}
.navbar-motersDesign .navbar-ui-links li:hover a,
.navbar-motersDesign .navbar-ui-links li.active a{
  color: var(--primary-white-color);
}
.main-navbardesign{
  border-bottom: 1px solid #b0b0b069;
}
.navbar-motersDesign .brand-logo{
  width: 99px;
}
.navbar-motersDesign .navbar-ui-links .btn-navLogin a{
  padding: 12px 32px;
  border: 1px solid;
  border-radius: 6px;
}
.navbar-motersDesign .navbar-ui .btn-navRegister a{
  padding: 10px 34px;
  border: 1px solid;
  border-radius: 6px;
  background: var(--primary-white-color);
  border-color: var(--primary-white-color);
  color: var(--white-primary-color);
  display: inline-block;
  font-size: 14px;
}
.navbar-motersDesign .navbar-ui .btn-navLogin a{
  padding: 10px 34px;
  border: 1px solid;
  border-radius: 6px;
  background: transparent;
  border-color: var(--primary-white-color);
  color: var(--primary-white-color);
  display: inline-block;
  font-size: 14px;
  box-shadow: none;
}
.forHome.navbar-motersDesign .navbar-ui .btn-navLogin a{
  border-color: #fff;
  color: #fff;
}
.user-nav-profiles .nav-userprf{
  height: 48px;
  width: 48px;
  object-fit: cover;
  border-radius: 100%;
}
.btn-nav-notification .bx-bell{
  font-size: 24px;
  color: var(--title-text);
  cursor: pointer;
}
.btn-nav-notification .bx-bell.white-color-L{
  color: #fff;
}
.notification-dot{
  height: 8px;
  width: 8px;
  background: var(--primary-white-color);
  border-radius: 100%;
  position: absolute;
  right: 3px;
  top: 3px;
}
.navbar-motersDesign .navbar-ui .common-dropdown .register-loginBg li a{
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  background: var(--white-color) !important;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-weight: 500;
}
.navbar-motersDesign .navbar-ui .common-dropdown .register-loginBg li a.active,
.navbar-motersDesign .navbar-ui .common-dropdown .register-loginBg li a:hover{
  background: var(--primary-color) !important;
  color: var(--white-color) !important;
}
.common-dropdown .dropdown-menu{
  padding: 12px;
  top: 76px !important;
  left: 0 !important;
  width: max-content;
  transform: unset !important;
}
.common-dropdown .dropdown-toggle::after{
  display: none;
}
.category-dropdown-menu{
  position: absolute;
  left: 0;
  top: 60px;
  width: 768px;
  border-radius: 12px;
  background: var(--white-color);
  border: 1px solid var(--border-color1);
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  transform: translate(0px, 30px);
  z-index: 999;
}
.categorys-dropdown .category-dropdown-menu.active{
  visibility: visible;
  transform: translate(0px, 0px);
}
.left-menu-catagoryList li {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--white-color);
  color: var(--title-text);
  font-weight: 500;
  border-radius: 8px;
  margin: 4px 0px;
  cursor: pointer;
}
.left-menu-catagoryList li.active,
.left-menu-catagoryList li:hover{
  background: var(--primary-color);
  color: var(--white-to-color);
}
.menuright-border{
  border-right: 1px solid var(--border-color1);
}
.sub-category-menuList ul li a{
  display: inline-block;
  padding: 4px 0px;
  margin: 6px 0px;
}
.category-dropdown-menu::after{
  content: "";
  background: var(--white-color);
  height: 8px;
  width: 16px;
  display: inline-block;
  position: absolute;
  top: -8px;
  left: 22px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.category-text-drp{
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}
.category-text-drp.title-text-L{
  color: var(--title-text);
}
.up-downHeader-arrow a{
  width: max-content;
  display: inline-block;
}
.category-dropdown-menu .menu-subcategory-main{
  display: none;
  padding: 18px;
}
.category-dropdown-menu .menu-subcategory-main.active{
  display: flex;
}
.notification-dropdowns{
  position: absolute;
  width: 420px;
  background: var(--white-color);
  left: -190px;
  border-radius: 12px;
  top: 50px;
  z-index: 999;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  transform: translate(0px, 30px);
  max-height: 480px;
  overflow: auto;
  border: 1px solid var(--border-color1);
}
.notification-dropdowns.active{
  visibility: visible;
  transform: translate(0px, 0px);
}
.title-notification-dvs{
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.title-notification-dvs h4{
  font-size: 18px;
  color: var(--title-text);
  font-weight: 600;
}
.title-notification-dvs p{
  font-size: 16px;
  color: var(--primary-color);
  font-weight: 600;
}
.notification-listing li{
  border: 1px solid transparent;
  border-bottom: 1px solid var(--border-color1);
  cursor: pointer;
}
.notification-listing li:hover{
  background: #423fe80f;
  border-radius: 12px;
  border: 1px solid var(--primary-color);
}
.notification-time-close .notification-time{
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-color);
}
.notification-time-close .notification-time::before{
  content: "";
  height: 12px;
  width: 12px;
  border-radius: 100%;
  background: var(--white-color);
  border: 3px solid var(--primary-color);
  display: inline-block;
  position: relative;
  top: 1px;
  margin-right: 5px;
}
.notification-time-close .close-notification{
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--subtitle-text);
}
.view-notification-text p{
  font-size: 15px;
  font-weight: 400;
  color: var(--subtitle-text);
}
.view-notification-text p span{
  font-weight: 600;
  color: var(--title-text);
}
.notification-listing li:last-child{
  border: none;
}


/* Jobs by category section  */
.job-single-catagory{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white-color);
  border-radius: 10px;
  padding: 24px 33px;
  transition: all 0.2s;
}
.job-single-catagory:hover{
  background: var(--primary-color);
}
.job-single-catagory:hover .catagory-textJob h4,
.job-single-catagory:hover .catagory-textJob p{
  color: var(--white-to-color);
}
.arrow-catagory{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff1f;
  border-radius: 100%;
  height: 38px;
  width: 38px;
  color: var(--white-to-color);
  font-size: 22px;
}
.more-catagory-txt{
  color: #68D585;
  font-weight: 700;
}

/* Featured Jobs section start  */
.single-feature-jobs{
  border: 1px solid var(--border-color1);
  border-radius: 16px;
  padding: 24px;
}
.single-feature-jobs.grid-feature{
  padding: 14px;
  cursor: pointer;
}
.feature-jobs-brand .jobs-f-brand{
  height: 68px;
  width: 68px;
  min-width: 68px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--border-color1);
  padding: 4px;
}
.feature-jobs-brand .jobs-f-Bigbrand{
  height: 100px;
  width: 100px;
  min-width: 100px;
  border-radius: 100%;
  object-fit: cover;
}
.jobs-likes-hrt i{
  height: 38px;
  width: 38px;
  border: 1px solid var(--border-color1);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border-color1);
  font-size: 20px;
  cursor: pointer;
}
.jobs-share-btn i {
  height: 38px;
  width: 38px;
  border: 1px solid var(--border-color1);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--title-text);
  font-size: 20px;
  cursor: pointer;
}
.jobs-likes-hrt i.fill{
  color: #EB4D4D;
  border-color: #EB4D4D;
}
.btn-apply-jobsingle{
  background: var(--primary-color);
  color: var(--white-to-color);
  border: 1px solid var(--primary-color);
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 400;
}
.jobs-feature-typs p{
  font-size: 12px;
  font-weight: 500;
  color: var(--title-text);
  background: var(--gray-color);
  display: flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 52px;
  cursor: pointer;
}
.jobs-review-star i{
  color: var(--border-color1);
  font-size: 16px;
  cursor: pointer;
}
.jobs-review-star i.fill{
  color: #FFB321;
}
.bottomjobs-features-ds{
  border-top: 1px solid var(--border-color1);
}
.more-job-featurebtn{
  color: var(--title-text);
  text-transform: capitalize;
  font-weight: 700;
  display: inline-block;
  padding: 12px 34px;
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  transition: all 0.3s;
}
.more-job-featurebtn:hover{
  background: var(--primary-color);
  color: var(--white-to-color);
}

/* How It Work section start  */
.tophows-icons{
  height: 100px;
  width: 100px;
  background: var(--white-color);
  border-radius: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-centrLine{
  width: 50%;
  border: 1px dashed var(--white-to-color);
  position: absolute;
  top: 50px;
  right: -29%;
}
.how-centrLine::after{
  content: "";
  height: 12px;
  width: 12px;
  border-radius: 100%;
  display: inline-block;
  border: 1px solid var(--white-to-color);
  position: absolute;
  top: -6px;
  left: -17px;
}
.how-centrLine::before{
  content: "";
  height: 12px;
  width: 12px;
  border-radius: 100%;
  display: inline-block;
  border: 1px solid var(--white-to-color);
  position: absolute;
  top: -6px;
  right: -17px;
}
.tophows-icons .h-workIcon{
  height: 52px;
  width: 52px;
  object-fit: contain;
}

/* What our clients are saying section start  */
.clients-single-reviews{
  background: var(--light-blue-color);
  padding: 32px;
  border-radius: 20px;
}
.reviews-sliders .slick-track{
  margin: 0px;
}
.reviews-sliders .slick-dots{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
  align-items: center;
}
.reviews-sliders .slick-dots li button{
  height: 10px;
  width: 10px;
  font-size: 0px;
  border-radius: 100%;
  border: 1px solid var(--black-color);
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.reviews-sliders .slick-dots li.slick-active button{
  border: 2px solid var(--white-color);
  background: var(--primary-black-color);
  outline: 1px solid var(--primary-black-color);
}
.reviews-photos-lf .client-f-photo{
  height: 68px;
  width: 68px;
  min-width: 68px;
  object-fit: cover;
  border-radius: 100px;
}
/* News that helps section start  */
.news-blog-singles{
  background: var(--white-color);
  border-radius: 16px;
  overflow: hidden;
}
.news-blog-singles .news-lt-img{
  width: 100%;
  height: 360px;
  object-fit: cover;
}
.stay-listApps li::before{
  content: "\ea23";
  font-family: "boxicons";
  color: var(--primary-color);
  font-size: 20px;
  margin-right: 5px;
}
.appsAways-icons .Away-ps{
  width: 160px;
}

/* Over recruiters use jobportal  */
.recruiters-sliders .items .brand-rc-img{
  width: 182px;
  height: 40px;
  object-fit: contain;
  cursor: pointer;
  filter: brightness(0.5);
  transition: all 0.3s;
}
.recruiters-sliders .items .brand-rc-img:hover{
  filter: none;
  transform: scale(0.9);
}

/* footer section strat  */
.footer-left-logo .footer-logo{
  width: 104px;
}
.footer-email-sent .footer-eml{
  height: 46px;
  width: 100%;
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  outline: none;
  background: var(--white-color);
  font-size: 15px;
  color: var(--title-text);
}
.footer-email-sent .btn-email{
  position: absolute;
  right: 0;
  top: 0;
  background: var(--primary-color);
  height: 46px;
  width: 46px;
  border: none;
  border-radius: 0px 8px 8px 0px;
  color: var(--white-to-color);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ui-footer-links li a{
  font-weight: 400;
  color: var(--subtitle-text);
  display: inline-block;
  margin-top: 8px;
}
.inners-motors-footer{
  border-top: 1px solid #ffffff2b;
  border-bottom: 1px solid #ffffff2b;
}
.footer-addresForm .email-input{
  width: 100%;
  height: 50px;
  border-radius: 12px;
  border: none;
  background: #ffffff17;
  padding: 8px 20px;
  color: #777777;
  font-weight: 500;
  font-size: 16px;
  outline: none;
}
.footer-addresForm .email-submit-btn{
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--primary-color);
  color: var(--white-color);
  font-weight: 500;
  font-size: 16px;
  border: none;
}
.footer_socialmedia a{
  height: 42px;
  width: 42px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white-color);
  color: var(--black-color);
}
.footer_socialmedia a.fb:hover{
  background: #1877F2;
  color: var(--white-color);
}
.footer_socialmedia a.lnk:hover{
  background: #0072b1;
  color: var(--white-color);
}
.footer_socialmedia a.twi:hover{
  background: #00acee;
  color: var(--white-color);
}
.footer_socialmedia a.insta:hover{
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  color: var(--white-color);
}
.custom-tooltip {
  --bs-tooltip-bg: var(--primary-color);
}
.copyright-container{
  border-top: 1px solid #363C44;
}
.leftIcons-ftrs .fts-icons{
  height: 62px;
  width: 62px;
  object-fit: contain;
}
.bottom-footer-design{
  border-top: 1px solid var(--border-color);
}
.top-footer-design{
  border-bottom: 1px solid var(--border-color);
}

/* breadcrumb start  */
.breadcrumb-custom li::after{
  content: "";
  background: var(--subtitle-text);
  height: 6px;
  width: 6px;
  display: block;
  border-radius: 100%;
}
.breadcrumb-custom li:last-child::after{
 display: none;
}
.breadcrumb-custom li{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--title-text);
  font-weight: 500;
}
.breadcrumb-custom li a{
  color: var(--subtitle-text);
  font-weight: 500;
}

/* pagination code  */
.pagination_nav ul .page_items a.active, .pagination_nav ul .page_items a:hover {
  background: var(--primary-color);
  color: var(--white-to-color);
}
.pagination_nav ul .page_items a {
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--title-text);
  font-size: 16px;
  font-weight: 400;
  border-radius: 10px;
  transition: all 0.3s;
  padding-top: 1px;
  border: 1px solid var(--border-color);
}
.pagination_nav ul .prev-next a{
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white-color);
  color: var(--title-text);
  border-radius: 10px;
  transition: all 0.3s;
  border: 1px solid var(--border-color);
  font-size: 30px;
}

/* Find jobs with 3 easy steps section  */
.jobs-steps-leftbar .find-jobs-img{
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 16px;
  position: relative;
  margin-left: -10px;
  box-shadow: 15px 14px 20px 0px #68686830;
}
.jobs-steps-leftbar .bg-findstps{
  width: 100%;
  height: 520px;
  border-radius: 16px;
  position: absolute;
  right: -10px;
  top: 20px;
  background: #68d5851a;
  z-index: -1;
}
.single-job-steps .stpes-number{
  height: 44px;
  width: 44px;
  min-width: 44px;
  background: var(--primary-color);
  border-radius: 100%;
  color: var(--white-to-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  border: 1px solid var(--primary-color);
  transition: all 0.3s;
}
.single-job-steps:hover .stpes-number{
  background: transparent;
  color: var(--primary-color);
}

/* login & register section  */
.jobs-login-ragisterBox{
  background: var(--light-blue-color);
  padding: 34px 42px;
  border-radius: 12px;
}
.login-rg-field .register-l-input{
  width: 100%;
  border: 1px solid var(--border-color1);
  outline: none;
  border-radius: 6px;
  padding: 10px 16px;
  color: var(--title-text);
  height: 47px;
  background: var(--white-color);
}
.login-rg-field .register-l-input.error {
  background: url(../images/error-icon.svg) no-repeat 100% center, var(--white-color);
  background-origin: content-box;
  border: 1px solid var(--danger-color) !important;
  background-size: 20px;
}
.login-rg-field .textarea-field{
  width: 100%;
  border: 1px solid var(--border-color1);
  outline: none;
  border-radius: 6px;
  padding: 10px 16px;
  color: var(--title-text);
  height: 100px;
  resize: none;
  background: var(--white-color);
}
.login-rg-field .register-l-input::placeholder,
.login-rg-field .textarea-field::placeholder{
  color: var(--subtitle-text);
}
.login-rg-field .register-l-input:focus{
  border: 1px solid var(--primary-color);
}
.login-rg-field .del-l-input{
  width: 100%;
  border: 1px solid var(--border-color1);
  outline: none;
  border-radius: 6px;
  padding: 10px 16px;
  color: var(--title-text);
  height: 47px;
  background: var(--white-color);
}
.login-rg-field .del-l-input.error {
  background-origin: content-box;
  border: 1px solid var(--danger-color) !important;
  background-size: 20px;
}
.login-rg-field .del-l-input::placeholder{
  color: var(--subtitle-text);
}
.login-rg-field .del-l-input:focus{
  border: 1px solid var(--primary-color);
}
.single-check-l-r .check-featured{
  font-size: 14px;
  color: var(--subtitle-text);
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.single-check-l-r .check-featured::before{
  content: "";
  height: 18px;
  width: 18px;
  border: 1px solid var(--subtitle-text);
  border-radius: 2px;
}
.single-check-l-r .check-feature:checked + .check-featured::before{
  content: "\eca4";
  font-family: "boxicons";
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.signup-withText::after{
  content: "";
  height: 1px;
  width: 100%;
  background: var(--border-color1);
  display: block;
}
.signup-withText p{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  top: -13px;
  width: max-content;
  background: var(--light-blue-color);
  padding: 0px 18px;
  color: var(--subtitle-text);
  font-weight: 400;
}
.login-with-other .other-login{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--white-color);
  border-radius: 4px;
  border: 1px solid var(--border-color1);
  padding: 6px 12px;
  gap: 8px;
  margin-top: 12px;
  font-weight: 700;
  color: var(--title-text);
}
.btn-login-register-fb{
  width: max-content;
  background: var(--primary-color);
  border: none;
  color: var(--white-to-color);
  height: 47px;
  border-radius: 4px;
  padding: 7px 38px;
  font-weight: 700;
}
.btn-logout-fb{
  width: max-content;
  background: var(--primary-color);
  border: none;
  color: var(--white-to-color);
  height: 47px;
  border-radius: 8px;
  padding: 7px 38px;
  font-weight: 700;
}
.password-wrapper .password-toggle-btn{
  border: none;
  background: transparent;
  position: absolute;
  right: 18px;
  color: var(--subtitle-text);
  font-size: 22px;
  top: 7px;
}
.login-register-leftbar{
  background: url(../images/bg-login-register.png) no-repeat;
  background-size: cover;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: end;
  position: relative;
}
.login-register-leftbar::before{
  content: "";
  width: 100%;
  height: 100%;
  background: #00000082;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.login-register-leftbar .benifits-boxed-ds{
  width: 50%;
}
.title-login-reg{
  position: absolute;
  top: 6%;
  color: var(--white-to-color);
  font-weight: 700;
  right: 0;
  left: 0;
  text-align: center;
}
.common-modal-color .modal-content{
  background: var(--white-color);
}
.common-modal-color{
  backdrop-filter: blur(4px);
  background: #0000001a;
}
.btn-delete-profile{
  padding: 12px 32px;
  border: 1px solid #EB4D4D;
  background: #EB4D4D;
  display: inline-block;
  color: var(--white-to-color);
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s;
  margin-top: 16px;
}
.common-modal-color .modal-header .btn-close{
  background: #e7e7e7 var(--bs-btn-close-bg) center / 14px auto no-repeat;
  box-shadow: none;
  position: absolute;
  right: 0;
  top: 0;
}

/* find jobs listing section   */
.findjob-search-bar{
  background: var(--light-blue-color);
  border-radius: 16px;
}
.common-input-field .fild-input-sm{
  width: 100%;
  padding: 8px 20px;
  border-radius: 8px;
  outline: none;
  border: 1px solid var(--border-color1);
  color: var(--title-text);
  height: 47px;
  background: var(--gray1-color);
}
.common-input-field .fild-input-sm::placeholder{
  color: var(--subtitle-text);
}
.common_inputField .find-jobs-btn{
  width: 100%;
  padding: 11px 20px;
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
  color: var(--white-to-color);
  border-radius: 8px;
  font-weight: 700;
}
.clear-btn{
  padding: 5px 20px;
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
  color: var(--white-to-color);
  border-radius: 8px;
  font-weight: 700;
}
.clear-btn:hover{
  background: var(--white-color);
  color: var(--primary-white-color);
}

/* line 1097 */
.top-leftheader-result .nav-pills .nav-link{
  height: 32px;
  width: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color1);
  color: #B1B1B1;
  background: transparent;
  border-radius: 5px;
  font-size: 22px;
}
.top-leftheader-result .nav-pills .nav-link.active,
.top-leftheader-result .nav-pills .show > .nav-link{
  color: var(--white-to-color);
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
}
.top-leftheader-result .nav-pills .nav-link .roate-icon{
  transform: rotate(90deg);
}
.input-result-select .select-result{
  background: var(--gray-color);
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: var(--title-text);
  font-weight: 400;
  outline: none;
  border-radius: 6px;
}

/* range slider css  */
.content {
  width: 320px;
}
.slider {
  display: block;
  position: relative;
  height: 36px;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.slider .slider-touch-left, .slider .slider-touch-right {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: absolute;
  height: 36px;
  width: 36px;
  padding: 6px;
  z-index: 2;
}
.slider .slider-touch-left span, .slider .slider-touch-right span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--white-color);
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  box-shadow: 0px 2px 4px 0px #0000002b;
}
.slider .slider-line {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  width: calc(100% - 36px);
  left: 18px;
  top: 16px;
  height: 4px;
  border-radius: 4px;
  background: #12121226;
  z-index: 0;
  overflow: hidden;
}
.slider .slider-line span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--primary-color);
}
.input-items-YM .btn-car-search{
  position: absolute;
  right: 3px;
  top: 3px;
  height: 44px;
  width: 44px;
  border-radius: 7px;
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.innerCar-range-slider .result-slider{
  font-weight: 500;
  color: var(--title-text);
}

/* single jobs section  */
.single-jobs-back-picture .job-back-picture{
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: top;
}
.single-jobs-back-picture::before{
  content: "";
  height: 100%;
  width: 100%;
  background: #473bf0b3;
  position: absolute;
  top: 0;
}
.job-explain-details{
  margin-top: -50px;
  position: relative;
}
.job-details-sm-box .single-feature-jobs{
  background: var(--white-color);
  border-bottom: 1px solid var(--border-color1);
}
.tab-details-jobs .nav{
  border-bottom: 1px solid var(--border-color1);
}
.tab-details-jobs .nav-pills .nav-link{
  background: transparent;
  color: var(--subtitle-text);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  border-radius: 0px;
}
.tab-details-jobs .nav-pills .nav-link.active,
.tab-details-jobs .nav-pills .show > .nav-link{
  border-bottom: 2px solid #14A077;
  color: var(--title-text);
}
.about-list li::before{
  content: "";
  height: 6px;
  width: 6px;
  display: inline-block;
  border-radius: 100%;
  background: var(--subtitle-text);
  margin-right: 6px;
  position: relative;
  top: -2px;
}
.about-social-links .social-about{
  height: 40px;
  width: 40px;
  background: var(--gray-color);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--title-text);
  font-size: 20px;
}
.social-about.bg-white-light{
  background: #f1f1f142;
  color: var(--white-color);
}
.about-botom-report .btn-reportjob{
  background: var(--gray-color);
  border: none;
  padding: 9px 20px;
  border-radius: 6px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--title-text);
}
.jobs-map .maps-sidejob{
  width: 100%;
  height: 360px;
  border-radius: 12px;
}
.job-details-rightsidebar{
  padding: 20px;
  background: var(--light-blue-color);
  border-radius: 12px;
  position: sticky;
  top: 10px;
}
.describe-sampl{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color1);
}
.social-about.bg-white{
  background: var(--white-color) !important;
}
.social-about.clr-primary{
  color: var(--primary-color);
}

/* contact us section start  */
.contact-us-maps .maps-contact{
  width: 100%;
  height: 520px;
}
.contact-input-field .input-contact{
  width: 100%;
  border: 1px solid var(--gray1-color);
  outline: none;
  border-radius: 6px;
  padding: 10px 16px;
  color: var(--title-text);
  height: 47px;
  background: var(--gray1-color);
}
.contact-input-field .input-contact::placeholder{
  color: var(--subtitle-text);
}
.contact-input-field .textarea-contact{
  width: 100%;
  border: 1px solid var(--gray1-color);
  outline: none;
  border-radius: 6px;
  padding: 10px 16px;
  color: var(--title-text);
  height: 164px;
  background: var(--gray1-color);
  resize: none;
}
.contact-input-field .textarea-contact::placeholder{
  color: var(--subtitle-text);
}
.contact-view-dtls{
  border-radius: 16px;
  background: var(--light-blue-color);
  border: 1px solid var(--border-color1);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}
.contact-view-dtls .icons-contacts,
.contact-view-dtls h4,
.contact-view-dtls p{
  color: var(--black-color);
}
.contact-view-dtls:hover{
  background: var(--primary-color);
  box-shadow: 0px 6px 40px 0px #00000021;
}
.contact-view-dtls:hover .icons-contacts,
.contact-view-dtls:hover h4,
.contact-view-dtls:hover p{
  color: var(--white-to-color);
}
.contact-right-details{
  border: 1px solid var(--border-color1);
  border-radius: 16px;
}
.login-rg-field .textarea-job{
  width: 100%;
  border: 1px solid var(--gray1-color);
  outline: none;
  border-radius: 6px;
  padding: 10px 16px;
  color: var(--title-text);
  height: 80px;
  background: var(--light-blue-color);
  resize: none;
}
.inner-resume-boxed .upload-label-job{
  background: #473bf01a;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  width: 100%;
}
.inner-resume-boxed .upload-label-job h4{
  word-break: break-all;
}
.contact-banner-item .contact-bnr{
  width: 100%;
  height: 400px;
  object-fit: cover;
}
.contact-us-bannermain .contact-banner-item::before{
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0000006b;
}
.content-position-dts{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  margin: auto;
  height: max-content;
}
.resume-input-border{
  padding: 6px;
  border-radius: 10px;
}
.btn-remove-resume{
  background: transparent;
  border: none;
  color: #EB4D4D;
  height: 22px;
  width: 22px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.resume-upload-browse .btn-browse-cv{
  background: transparent;
  border: 1px solid var(--primary-color);
  padding: 10px 31px;
  font-weight: 600;
  border-radius: 4px;
  color: var(--title-text);
}

/* faq section start  */
.inner-faq-main .accordion .accordion-item{
  border: 1px solid var(--border-color1);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white-color);
  padding: 16px;
}
.inner-faq-main .accordion-item .accordion-button{
  background: transparent;
  font-weight: 700;
  color: var(--title-text);
  outline: none;
  box-shadow: none;
  padding: 0;
}
.inner-faq-main .accordion-item .accordion-collapse{
  border-top: 1px solid var(--border-color1);
  padding-top: 12px;
  margin-top: 12px;
}
.inner-faq-main .accordion-item .accordion-button::after{
  content: "\edee";
  font-family: "boxicons";
  font-size: 22px;
  background: transparent;
  color: var(--subtitle-text);
  transition: unset;
  transform: unset;
}
.inner-faq-main .accordion-item .accordion-button.collapsed::after{
  content: "\ee23";
}

/* cms pages section  */
.cms-pages-listings{
  border-radius: 16px;
  background: var(--primary-color);
  padding: 28px 20px;
  position: sticky;
  top: 10px;
}
.cms-pages-listings li a{
  font-size: 15px;
  color: var(--white-to-color);
  padding: 12px 16px;
  display: block;
  font-weight: 600;
  border-radius: 8px;
  margin-bottom: 4px;
}
.cms-pages-listings li:hover a,
.cms-pages-listings li.active a{
  background: var(--white-color);
  color: var(--title-text);
}
.inner-cms-pages h4{
  font-size: 22px;
  font-weight: 600;
  color: var(--title-text);
  margin-bottom: 14px;
}
.inner-cms-pages p{
  font-size: 14px;
  font-weight: 400;
  color: var(--subtitle-text);
  margin-bottom: 12px;
}
.inner-cms-pages ul li{
  font-size: 14px;
  font-weight: 500;
  color: var(--title-text);
  margin-bottom: 8px;
}
.inner-cms-pages ul li::before{
  content: "";
  height: 6px;
  width: 6px;
  background: var(--title-text);
  display: inline-block;
  border-radius: 100%;
  position: relative;
  top: -2px;
  margin-right: 5px;
}

/* pricing section start  */
.membershp-pricing-box{
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--border-color1);
  box-shadow: 0px 2px 2px 0px #1c24330f;
}
.plan-categorys h4{
  color: var(--subtitle-text);
}
.plans-pricing{
  color: var(--title-text);
}
.plan-features-list li{
  color: var(--title-text);
}
.plan-features-list li::before{
  content: "\ea23";
  font-family: "boxicons";
  color: var(--primary-color);
  font-size: 17px;
  position: relative;
  top: 2px;
  margin-right: 5px;
}
.btn-planBuy{
  width: 100%;
  border: 1px solid var(--primary-color);
  background: var(--white-color);
  color: var(--title-text);
  padding: 10px 22px;
  font-weight: 600;
  border-radius: 6px;
}
.popular-plan .plan-categorys h5{
  padding: 5px 9px;
  background: var(--white-color);
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--primary-color);
}
.membershp-pricing-box.popular-plan{
  background: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 0px 10px 25px 0px #365f681a;
}
.popular-plan .plan-categorys h4,
.popular-plan .plans-pricing,
.popular-plan .plan-features-list li,
.popular-plan .plan-features-list li::before{
  color: var(--white-to-color);
}
.popular-plan .btn-planBuy{
  color: var(--primary-color);
}
.jobs-title-heading .nav-pills{
  border: 1px solid var(--border-color1);
  width: max-content;
  margin: auto;
  padding: 6px;
  border-radius: 10px;
}
.jobs-title-heading .nav-pills li .nav-link{
  color: var(--subtitle-text);
  font-weight: 600;
  padding: 9px 25px;
  background: var(--white-color);
}
.jobs-title-heading .nav-pills li .nav-link.active,
.jobs-title-heading.nav-pills .show > .nav-link{
  background: var(--primary-color);
  color: var(--white-to-color);
}

/* blog section start  */
.blog-grid-singlebox{
  border-radius: 16px;
  border: 1px solid var(--border-color1);
  transition: all 0.3s;
}
.blog-grid-singlebox:hover{
  border: 1px solid transparent;
  box-shadow: 0px 10px 25px 0px #365f6817;
}
.topblog-img .grid-imgblog{
  width: 100%;
  border-radius: 14px;
  object-fit: cover;
  height: 270px;
}
.blog-contents .blog-category{
  background: #473bf01a;
  width: max-content;
  padding: 4px 14px;
  border-radius: 42px;
  font-weight: 500;
  color: var(--subtitle-text);
}
.blog-contents .blog-titles{
  color: var(--title-text);
  font-weight: 700;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-contents .blog-subtitles{
  color: var(--subtitle-text);
  font-weight: 400;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-contents .more-blog{
  font-weight: 600;
  color: var(--primary-color);
  display: inline-block;
}
.big-blogs-details .blog-dt-img{
  width: 100%;
  height: 480px;
  object-fit: cover;
}
.blog-details-inner-main{
  margin-top: -120px;
  position: relative;
}
.tags-groups-btn .btn-tagsmove{
  background: var(--gray-color);
  border: none;
  padding: 8px 16px;
  border-radius: 40px;
  margin: 0px 2px;
  font-weight: 500;
  color: var(--title-text);
}

/* about us page  */
.jobs-spacing-test{
  display: flex;
  gap: 14px;
  background: var(--white-color);
  width: max-content;
  box-shadow: 0px 14px 64px 0px #0f0f0f1f;
  padding: 16px 36px 16px 18px;
  border-radius: 14px;
}
.AppsAway-bgLeft .job-count-sp1{
  position: absolute;
  top: 4%;
  left: 16%;
}
.AppsAway-bgLeft .job-count-sp2{
  position: absolute;
  top: 0;
  right: 3%;
  bottom: 0;
  height: max-content;
  margin: auto;
}
.AppsAway-bgLeft .job-count-sp3{
  position: absolute;
  bottom: 8%;
  left: 2%;
}
.how-about-single-wrk .icon-aboutwork{
  width: 100px;
}
.jobsabouts-contBox{
  border-radius: 20px;
  background: var(--white-color);
  padding: 36px;
}
.jobsabouts-contBox .single-items-countjb {
  border-right: 1px solid var(--border-color1);
}
.jobsabouts-contBox .about-border:last-child .single-items-countjb {
  border-right: none;
}
.about-jobs-numermain{
  background: url(../images/compare-bg-design.png) no-repeat, #473bf01a;
  background-size: contain;
}
.how-about-single-wrk{
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: all 0.3s;
}
.how-about-single-wrk:hover{
  border-color: var(--primary-color);
}

/* dashboard section start  */
.dashboard-left-listbar{
  background: var(--primary-black-color);
  border-radius: 16px;
}
.dashbord-left-withmobile{
  position: sticky;
  top: 10px;
  z-index: 998;
}
.dashboard-left-listbar li{
  position: relative;
  margin-bottom: 4px;
}
.dashboard-left-listbar li .list-item{
  padding: 16px 22px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 0px 64px 64px 0px;
  position: relative;
  font-size: 15px;
}
.dashboard-left-listbar li .list-item i{
  font-size: 22px;
}
.dashboard-left-listbar li .list-item:hover i,
.dashboard-left-listbar li.active .list-item i{
  color: var(--primary-color);
}
.dashboard-left-listbar li .list-item:hover,
.dashboard-left-listbar li.active .list-item{
  background: #fff;
  color: var(--title-primary-text);
  font-weight: 600;
}
.dashboard-left-listbar li .list-item:hover::after,
.dashboard-left-listbar li.active::after{
  content: "";
  background: url(../images/items-shape-1.svg) no-repeat;
  height: 40px;
  width: 15px;
  background-size: 20px;
  display: inline-block;
  position: absolute;
  top: -12px;
  left: 0;
}
.dashboard-left-listbar li .list-item:hover::before,
.dashboard-left-listbar li.active::before{
  content: "";
  background: url(../images/items-shape-2.svg) no-repeat;
  height: 58px;
  width: 15px;
  background-size: 20px;
  display: inline-block;
  position: absolute;
  bottom: -12px;
  left: 0;
}
.heading-line-before::before{
  content: "";
  height: 24px;
  width: 6px;
  background: var(--primary-color);
  display: inline-block;
  position: relative;
  top: 4px;
  border-radius: 16px;
  margin-right: 9px;
}
.single-apply-wraobox{
  display: flex;
  align-items: center;
  background: var(--white-color);
  padding: 16px;
  border-radius: 10px;
  gap: 14px;
  cursor: pointer;
  transition: all 0.3s;
}
.single-apply-wraobox:hover {
  background: #5f66f51f;
}
.single-apply-wraobox.clr-1:hover{
  background: #eb4d4d1a;
}
.single-apply-wraobox.clr-2:hover{
  background: #1481601a;
}
.single-apply-wraobox.clr-3:hover{
  background: #ffb3211a;
}
.single-apply-wraobox.clr-3:hover .icon-bgBox-job,
.single-apply-wraobox.clr-2:hover .icon-bgBox-job,
.single-apply-wraobox.clr-1:hover .icon-bgBox-job,
.single-apply-wraobox:hover .icon-bgBox-job{
  background: var(--white-color);
}
.single-apply-wraobox .icon-bgBox-job{
  height: 66px;
  width: 66px;
  min-width: 66px;
  background: #5f66f51f;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 30px;
  color: #5F66F5;
}
.single-apply-wraobox.clr-1 .icon-bgBox-job{
  background: #eb4d4d1a;
  color: #EB4D4D;
}
.single-apply-wraobox.clr-2 .icon-bgBox-job{
  background: #1481601a;
  color: #148160;
}
.single-apply-wraobox.clr-3 .icon-bgBox-job{
  background: #ffb3211a;
  color: #FFB321;
}
.icon-notification-dash{
  height: 28px;
  width: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  background: #1481601a;
  color: var(--primary-color);
  font-size: 16px;
}
.right-jobs-notifications{
  background: var(--white-color);
  border-radius: 12px;
  padding: 18px;
}
.notification-dash-contant{
  color: var(--subtitle-text);
  font-weight: 400;
}
.notification-dash-contant .name{
  font-weight: 500;
  color: var(--title-text);
}
.notification-dash-contant .jobs{
  color: var(--primary-color);
}
.job-applied-searching .job-input-search{
  background: var(--gray-color);
  padding: 10px 12px 10px 34px;
  border: none;
  font-size: 15px;
  color: var(--title-text);
  font-weight: 400;
  outline: none;
  border-radius: 4px;
  width: 300px;
}
.job-applied-searching i{
  position: absolute;
  left: 12px;
  top: 14px;
  font-size: 16px;
  color: var(--title-text);
}
.btn-more-jobdetails{
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--white-to-color);
  border-radius: 8px;
  width: max-content;
  padding: 8px 30px;
  margin: auto;
  transition: all 0.3s;
}
.btn-more-jobdetails:hover{
  background: transparent;
  color: var(--primary-white-color);
}

/* dashboard chat design  */
.left-jobs-chatsmain{
  background: var(--white-color);
  border-radius: 12px;
  padding: 18px;
}
.time-range-selector button{
  background: transparent;
  border: none;
  color: var(--title-text);
  font-weight: 500;
}
.time-range-selector button.active{
  color: var(--primary-color);
}

/* apply job table  */
.jobapplied-table thead tr th{
  font-size: 13px;
  color: var(--subtitle-text);
  font-weight: 500;
  padding: 10px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color1);
  text-align: center;
}
.jobapplied-table thead tr th:first-child{
  text-align: start;
}
.jobapplied-table tbody tr td{
  font-size: 13px;
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid var(--border-color1);
}
.jobapplied-table tbody tr:hover td{
  background: #423fe80f;
}
.jobapplied-table tbody tr:last-child td{
  border: none;
}
.job-appliedbox-design{
  background: var(--white-color);
  border-radius: 12px;
  padding: 18px;
}
.jobapplied-table tbody tr td .status-tbl{
  width: max-content;
  color: var(--primary-color);
  font-weight: 400;
  background: #504cfe1a;
  padding: 5px 22px;
  border-radius: 47px;
  margin: auto;
  font-size: 12px;
}
.jobapplied-table tbody tr td .status-tbl.fw-6{
  font-weight: 600;
}
.jobapplied-table tbody tr td .status-tbl.success{
  background: #1481601a;
  color: #148160;
}
.jobapplied-table tbody tr td .status-tbl.pending{
  background: #ffb32136;
  color: #FFB321;
}
.jobapplied-table tbody tr td .status-tbl.alert{
  background: #eb4d4d1a;
  color: #EB4D4D;
}
.jobapplied-table tbody tr td .status-tbl.offered{
  background: #bee7ed;
  color: #17a2b8;
}
.jobapplied-table tbody tr td .status-tbl.interviewing{
  background: #d9e5ff;
  color: #173878;
}
.jobapplied-table tbody tr td .status-tbl.Selected{
  background: #e5efef;
  color: #006666;
}
.action-tablesviews .btn-action-dot{
  border: none;
  background: transparent;
  font-size: 24px;
  height: 38px;
  width: 38px;
  border-radius: 100%;
  color: var(--title-text);
}
.btn-action-dot::after{
  display: none;
}
.action-tablesviews .dropdown-menu{
  background: var(--white-color);
  border: none;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
  left: -108px !important;
  top: -46px !important;
  border: 1px solid var(--border-color1);
  min-width: max-content !important;
  height: 215px;
}
.dropdown-menu .view-job-itm{
  font-size: 13px;
  padding: 8px 16px;
  display: block;
  color: var(--title-text);
}
.dropdown-menu .remove-job-itm{
  font-size: 13px;
  padding: 8px 16px;
  display: block;
  color: #EB4D4D;
  background: #E5E5E5;
}

/* candidate profile section  */
.education-about-main,
.box-candidates-profiles{
  background: var(--white-color);
  border-radius: 12px;
  padding: 18px;
}
.user-profile-candidate .candidate-profile{
  height: 120px;
  width: 120px;
  border-radius: 8px;
  object-fit: cover;
  object-position: top;
  border: 1px dashed var(--border-color1);
}
.profile-status{
  width: max-content;
  color: var(--primary-color);
  font-weight: 600;
  background: #1481601f;
  padding: 9px 16px;
  border-radius: 47px;
}
.candidates-group-btns .category-profiles{
  border: none;
  background: var(--gray-color);
  padding: 8px 16px;
  border-radius: 28px;
  font-weight: 500;
  color: var(--title-text);
}
.edit-profile-candidate{
  font-weight: 500;
  color: var(--title-text);
  border: 1px solid var(--primary-color);
  background: transparent;
  padding: 11px 34px;
  border-radius: 8px;
  width: max-content;
  transition: all 0.3s;
}
.edit-profile-candidate:hover{
  background: var(--primary-color);
  color: var(--white-color);
}
.job-details-rightsidebar.white-bgcolor-L{
  background: var(--white-color);
}
.education-timeline-itlefts{
  border-left: 1px solid var(--border-color1);
}
.single-timelne-edu.red-dot::before{
  content: "";
  height: 12px;
  width: 12px;
  display: inline-block;
  background: #EB4D4D;
  border-radius: 100%;
  left: -6px;
  position: absolute;
  top: 4px;
  outline: 4px solid #fd404f1f;
}
.single-timelne-edu.green-dot::before{
  content: "";
  height: 12px;
  width: 12px;
  display: inline-block;
  background: #37B853;
  border-radius: 100%;
  left: -6px;
  position: absolute;
  top: 4px;
  outline: 4px solid #00ba5f1f;
}
.single-timelne-edu.blue-dot::before{
  content: "";
  height: 12px;
  width: 12px;
  display: inline-block;
  background: #504CFE;
  border-radius: 100%;
  left: -6px;
  position: absolute;
  top: 4px;
  outline: 4px solid #4a50f51f;
}
/* dark and light mode  */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--black-color);
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  right: 12px;
  top: 24px;
  font-size: 18px;
  color: var(--white-color);
  z-index: 999;
  transition: all 0.5s;
}
.theme-toggle.active{
  top: 6px;
}

.theme-toggle i {
  transition: transform 0.3s ease;
}

/* candidates meeting  */
.job-meeting-design {
  background: var(--white-color);
  border-radius: 12px;
  padding: 10px 18px;
}
.job-meeting-design .apexcharts-legend{
  right: 52px !important;
}
.calender-bord-box{
  background: #FAF7F1;
  border-radius: 8px;
  overflow: hidden;
  width: 76px;
}
.meeting-calender-box{
  padding: 16px;
  border-radius: 12px;
  background: var(--white-color);
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border-color1);
}
.right-sidecalender-btns .btn-meeting{
  padding: 8px 20px;
  height: 40px;
  background: var(--primary-color);
  color: var(--white-to-color);
  border-radius: 6px;
  font-weight: 500;
  border: 1px solid var(--primary-color);
}
.right-sidecalender-btns .btn-msg-calender{
  height: 40px;
  width: 40px;
  border-radius: 6px;
  background: var(--border-color1);
  border: 1px solid var(--border-color1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--title-text);
}
.right-sidecalender-btns .btn-msg-calender:hover{
  background: var(--primary-black-color);
  color: var(--white-to-color);
}
.right-sidecalender-btns .btn-cancel-mtng{
  padding: 8px 20px;
  height: 40px;
  background: transparent;
  color: var(--title-text);
  border-radius: 6px;
  font-weight: 500;
  border: 1px solid var(--primary-color);
}

/* skills and freference  */
.skill-input-field .input-skill-field{
  width: 100%;
  height: 44px;
  padding: 12px 20px;
  border-radius: 6px;
  border: transparent;
  outline: transparent;
  background: var(--gray1-color);
  font-size: 14px;
  color: var(--title-text);
  position: relative;
  cursor: text;
}
.skill-input-field .textarea-skill-field::placeholder,
.skill-input-field .input-skill-field::placeholder{
  color: var(--subtitle-text);
}
.skill-input-field .textarea-skill-field{
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  border-radius: 6px;
  border: transparent;
  outline: transparent;
  background: var(--gray1-color);
  font-size: 14px;
  color: var(--title-text);
  resize: none;
}
.single-skill-fild-ds .skill-labels{
  width: 130px;
  min-width: 130px;
}
.btn-form-cancel{
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 10px 42px;
  border-radius: 6px;
  font-weight: 600;
}
.btn-form-save{
  background: var(--primary-black-color);
  color: var(--white-to-color);
  border: 1px solid var(--primary-color);
  padding: 10px 42px;
  border-radius: 6px;
  font-weight: 600;
}
.btn-more-fieldadd{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 4px;
  border: 1px solid var(--primary-color);
  color: var(--title-text);
  background: var(--white-primary-color);
  font-weight: 500;
}
.applied-bothfield{
  width: 100%;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.applied-bothfield .single-skill-fild-ds{
  width: 50%;
}
.skill-input-field{
  position: relative;
}
.common_inputField.gray1-color .select2-container .select2-selection--single{
  border: transparent;
  outline: transparent;
  background: var(--gray1-color);
  height: 44px;
}
.common_inputField.gray1-color .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 44px;
}
.skill-labels-sm{
  width: 80px;
  min-width: 80px;
}
.skill-input-field .percent-inpt{
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
  margin: auto;
  font-size: 14px;
  color: var(--subtitle-text);
  align-content: center;
}
.profile-choose-set{
  border: 1px solid var(--border-color1);
  padding: 6px;
  border-radius: 4px;
  width: inherit;
  color: var(--title-text);
  font-size: 13px;
}
.profile-choose-set input{
  width: 100%;
}
.profile-choose-set input::file-selector-button {
  font-weight: 500;
  color: var(--title-text);
  padding: 6px 10px;
  border: none;
  background: var(--gray1-color);
  border-radius: 3px;
  margin-right: 10px;
  font-size: 13px;
  cursor: pointer;
}
.common-radio-box .redio-label{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--title-text);
  font-weight: 500;
}
.common-radio-box .redio-label::before{
  height: 16px;
  width: 16px;
  content: "";
  border: 3px solid transparent;
  outline: 2px solid var(--subtitle-text);
  opacity: 0.5;
  border-radius: 100%;
}
.common-radio-box input:checked + .redio-label::before{
  height: 16px;
  width: 16px;
  background: var(--primary-color);
  border: 3px solid var(--white-color);
  outline: 2px solid var(--primary-color);
  border-radius: 100%;
  opacity: 1;
}
.edit-heading-box{
  width: 100%;
  height: 44px;
  padding: 6px 20px;
  border-radius: 6px;
  background: var(--gray1-color);
  color: var(--title-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.edit-heading-box .btn-edit-field{
  background: transparent;
  border: none;
  font-size: 20px;
  color: var(--title-text);
}
.btn-remove-field{
  background: transparent;
  border: none;
  color: var(--title-text);
  font-size: 24px;
  opacity: 0.5;
  line-height: 0;
  pad: 3px;
}
.social-iconwith-link .social-iconBox{
  height: 40px;
  min-width: 40px;
  width: 40px;
  background: var(--border-color1);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--title-text);
}
.social-linkBox .social-input-link{
  width: 100%;
  height: 48px;
  border-radius: 8px;
  background: var(--border-color1);
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--title-text);
  padding: 12px 16px;
}
.social-linkBox .social-input-link::placeholder{
  color: var(--subtitle-text);
}

/* ckeditor style  */
.about-me-ckeditor .ck.ck-reset_all,
.about-me-ckeditor .ck.ck-reset_all *{
  color: var(--title-text);
}
.about-me-ckeditor .ck.ck-toolbar{
  background: var(--white-color);
  border: 1px solid var(--border-color1);
}
.about-me-ckeditor .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){
  border-color: var(--border-color1);
}
.about-me-ckeditor .ck.ck-editor__main>.ck-editor__editable{
  background: var(--white-color);
  color: var(--title-text);
  font-size: 14px;
}
.about-me-ckeditor .ck.ck-button.ck-on,
.about-me-ckeditor a.ck.ck-button.ck-on,
.about-me-ckeditor .ck.ck-button:not(.ck-disabled):hover,
.about-me-ckeditor a.ck.ck-button:not(.ck-disabled):hover{
  background: var(--white-color);
}
.about-me-ckeditor .ck.ck-reset,
.about-me-ckeditor .ck.ck-reset_all,
.about-me-ckeditor .ck.ck-list{
  background: var(--white-color);
}
.about-me-ckeditor .ck.ck-button:not(.ck-disabled):active, .about-me-ckeditor a.ck.ck-button:not(.ck-disabled):active{
  background: var(--white-color);
  box-shadow: none;
}
.about-me-ckeditor .ck.ck-list__item .ck-button.ck-on:hover:not(ck-disabled){
  background: var(--primary-color);
}
.about-me-ckeditor .ck-button .ck-tooltip_s .ck.ck-tooltip__text{
  background: var(--title-text);
  color: var(--white-color);
}
.about-me-ckeditor .ck.ck-tooltip.ck-tooltip_s .ck-tooltip__text:after{
  border-bottom-color: var(--title-text);
}

/* all toast design  */
.custom-toast{
  z-index: 9991;
}
.alert-message-components{
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(178deg, #da760c0d 0%, hsl(2.16deg 72.77% 37.45% / 5%) 100%);
  border: 1px solid #00000012;
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
}
.alert-message-components.error{
  background: #ffedef;
  border-color: #fdd9dc;
}
.alert-message-components.success{
  background: #e7f8ea;
  border-color: #d0e4d5;
}
.alert-message-components.warning{
  background: #fff9ec;
  border-color: #f2e3cc;
}
.alert-icon{
  background: linear-gradient(178deg, #da760c0d 0%, hsl(2.16deg 72.77% 37.45% / 5%) 100%);
  border: 1px solid #00000012;
  height: 42px;
  width: 42px;
  min-width: 42px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 28px;
}
.error .alert-icon{
  background: #ff4b58;
  color: var(--white-color);
  box-shadow: 3px 8px 5px 1px #ff3a5a2b;
}
.success .alert-icon{
  background: #00c96c;
  color: var(--white-color);
  box-shadow: 3px 8px 5px 1px #00c96c36;
}
.warning .alert-icon{
  background: #febc4a;
  color: var(--white-color);
  box-shadow: 3px 8px 5px 1px #febc4a30;
}
.alert-contents h4{
  color: var(--title-color);
}
.alert-contents p{
  color: var(--subtitle-color);
}
.alert-message-components .btn-close{
  padding: 0;
  height: 28px;
  width: 28px;
  border-radius: 100%;
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
  margin: auto;
  color: var(--gray3-color);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background: transparent;
  box-shadow: none;
}
.alert-message-components.error .btn-close{
  color: #ff7087;
}
.alert-message-components.success .btn-close{
  color: #15bf78;
}
.alert-message-components.warning .btn-close{
  color: #fec77e;
}

/* chat section start  */
.personalize_chat-inner {
  overflow: auto;
  border-radius: 14px;
}
.left_chatlistpanel {
  width: 380px;
  min-width: 380px;
  background: var(--white-color);
  transition: all 0.4s;
}
.chalPanelHeaderbar {
  position: sticky;
  top: 0;
}
.chalPanelHeaderbar .backArrow {
  font-size: 30px;
  line-height: 0;
  color: var(--title-text);
}
.top_header--chats {
  border-bottom: 1px solid var(--border-color);
}
.left_chatlistpanel .chat_topbar {
  display: flex;
  align-items: center;
  border-radius: 9px;
  padding: 0px 10px 0px 16px;
  background: var(--border-color);
}
.left_chatlistpanel .chat_topbar .bx-search {
  font-size: 17px;
  color: #6c6c6c;
  padding-top: 2px;
}
.chat_topbar .search_id-input {
  width: 100%;
  height: 46px;
  outline: none;
  border: none;
  padding: 8px;
  font-size: 15px;
  background: transparent;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
  font-family: 'Poppins-Regular', sans-serif;
  appearance: none;
  -webkit-appearance: none;
}
.chat_topbar .search_id-input::-webkit-search-cancel-button {
  display: none;
}
.chat_topbar .cancel-button {
  border: none;
  background: transparent;
  border-radius: 100%;
  min-width: 26px;
  color: var(--black-color4);
  display: none;
  font-size: 20px;
  cursor: pointer;
  line-height: 1px;
}
.chat_listpanel__main {
  overflow: auto;
  overflow-x: hidden;
  height: calc(100vh - 16.5rem);
}
.single_chatlist {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}
.left_chatUserimg .users-dp {
  height: 52px;
  width: 52px;
  border-radius: 12px;
  object-fit: cover;
  object-position: top;
}
.left_chatUserimg .online_status {
  height: 10px;
  width: 10px;
  background: #25b625;
  border-radius: 100%;
  border: 2px solid var(--white-color);
  position: absolute;
  right: 4px;
  bottom: 4px;
}
.user_chat__descript {
  width: 100%;
}
.user_chat__descript .user__name {
  font-size: 14px;
  color: var(--title-text);
  font-weight: 600;
}
.user_chat__descript .user_msg_Descript {
  font-size: 11px;
  font-weight: 500;
  color: var(--subtitle-text);
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-top: 0px;
  line-break: anywhere;
  height: 18px;
  align-content: center;
}
.user_chat__descript .user_msg_Descript .msg-tick{
  font-size: 16px;
  line-height: 0;
}
.user_chat__descript .user_msg_Descript .msg-tick.seen{
  color: var(--primary-color);
}
.user_chat__descript .user_msg_Descript i{
  line-height: 0;
  margin-right: 2px;
  font-size: 12px;
}
.user_time_msg {
  width: 70px;
  min-width: 70px;
}
.user_time_msg .msg-times {
  font-size: 12px;
  color: var(--subtitle-text);
  font-weight: 400;
}
.user_time_msg .msg_count {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 11px;
  color: var(--white-to-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: var(--primary-color);
  border-radius: 10px;
  line-height: 15px;
}
.chats-listingschats-box {
  background: var(--white-color);
  box-shadow: 0px 1.933px 3.866px 0px rgba(33, 36, 41, 0.05);
  width: 100%;
  border-left: 1px solid var(--border-color);
}
.inner_chatspanelmng .chat_headers-lites {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
}
.chatshowArrows {
  height: 24px;
  width: 24px;
  min-width: 24px;
  border: none;
  color: var(--title-text);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.user-dp-profiles .prifile-dp {
  height: 48px;
  width: 48px;
  border-radius: 100%;
  object-fit: cover;
  object-position: top;
}
.name-statususer .username {
  color: var(--title-text);
  font-weight: 600;
  font-size: 18px;
}
.name-statususer .userSubtitles {
  font-size: 13px;
  font-weight: 400;
  color: var(--subtitle-text);
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-break: anywhere;
}
.header-right .btn_chat_menu {
  background: transparent;
  border: none;
  color: var(--subtitle-text);
  font-size: 24px;
}
.chats_middlesScreen-main {
  background: url(../images/chat-bg.png) no-repeat, var(--white-color);
  background-size: cover;
  height: calc(100vh - 17.7rem);
  max-height: calc(100vh - 17.7rem);
  overflow: auto;
  padding-right: 10px;
}
.receiveUserProfile .userinrProfile, .sendUserProfile .userinrProfile {
  height: 40px;
  width: 40px;
  border-radius: 6px;
  min-width: 40px;
  object-fit: cover;
  object-position: top;
}
.receive-messages .receive-single-msg {
  background: var(--light-blue-color);
  border-radius: 12px 12px 12px 0px;
  width: auto;
  max-width: 458px;
  margin-bottom: 5px;
  padding: 8px 16px 8px 12px;
  color: var(--title-text);
  font-size: 14px;
  line-height: 22px;
  position: relative;
  word-wrap: break-word;
  font-weight: 400;
  min-width: 108px;
}
.receive-messages .receive_msg_time, .send-messages .send_msg_time {
  font-size: 12px;
  color: var(--subtitle-text);
  font-weight: 400;
}
.send-messages .send-single-msg {
  background: var(--primary-color);
  border-radius: 12px 12px 0px 12px;
  width: auto;
  max-width: 458px;
  margin-bottom: 5px;
  padding: 8px 12px 8px 16px;
  margin-inline-start: auto;
  color: var(--white-to-color);
  font-size: 14px;
  line-height: 22px;
  position: relative;
  word-wrap: break-word;
  font-weight: 400;
  min-width: 108px;
  text-align: start;
}
.inner_chatspanelmng .chats_bottomsmaindivs {
  padding: 14px 0px 0px;
  position: sticky;
  bottom: 0;
  width: 100%;
}
.send-msgboxed-mn .typing-msgdiv {
  width: 100%;
  padding: 13px 45px 13px 20px;
  height: 49px;
  border-radius: 8px;
  border: 1px solid var(--border-color1);
  color: #566a7f;
  font-size: 14px;
  outline: none;
  resize: none;
  font-weight: 500;
  background: var(--border-color);
}
.send-msgboxed-mn .send-msgbtn {
  background: var(--primary-color);
  border: none;
  position: absolute;
  right: 4px;
  bottom: 11px;
  transition: all 0.2s;
  border-radius: 5px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.send-msgboxed-mn .send-msgbtn i {
  color: #fff;
  font-size: 22px;
}

/* form error */
.skill-input-field .input-skill-field.error{
  background: url(../images/error-icon.svg) no-repeat 100% center, var(--gray1-color);
  background-origin: content-box;
  border: 1px solid var(--danger-color) !important;
  background-size: 20px;
}
.offer-code-plans .plans-offer.error{
  background-origin: content-box;
  border: 1px solid var(--danger-color) !important;
  background-size: 20px;
}
.login-rg-field .textarea-field.error {
  background: url(../images/error-icon.svg) no-repeat 100% center, var(--white-color);
  background-origin: content-box;
  border: 1px solid var(--danger-color) !important;
  background-size: 20px;
}
.offer-code-plans label.error,
.login-rg-field label.error,
.skill-input-field label.error,
.single-skill-fild-ds label.error{
  display: none !important;
}
.common_inputField  .Single_searchDv.error ~ .select2.select2-container{
  border: 1px solid var(--danger-color) !important;
  border-radius: 8px;
}
.common_inputField .Single_searchDv.error ~ .select2-container--default .select2-selection--single .select2-selection__arrow b::after{
  content: "";
  background: url(../images/error-icon.svg) no-repeat 100% center, var(--gray1-color);
  background-origin: content-box;
  background-size: 20px;
  height: 22px;
  width: 22px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.common_inputField .js-example-basic-multiple.error ~ .select2.select2-container .select2-selection,
.common_inputField  .Single_searchDv.error ~ .select2.select2-container{
  border: 1px solid var(--danger-color) !important;
  border-radius: 8px;
  background: var(--border-color);
}
.common_inputField .Single_searchDv.error ~ .select2-container--default .select2-selection--single .select2-selection__arrow b::after,
.common_inputField .js-example-basic-multiple.error ~ .select2-container--default .select2-selection--multiple .select2-selection__rendered::after{
  content: "";
  background: url(../images/error-icon.svg) no-repeat 100% center, var(--gray1-color);
  background-origin: content-box;
  background-size: 20px;
  height: 22px;
  width: 22px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.common_inputField .js-example-basic-multiple.error ~ .select2-container--default .select2-selection--multiple .select2-selection__rendered::after{
  right: 14px;
}

/* current plan */
.current-plan .plan-features-list li{
  display: inline-block;
  width: 50%;
}
.current-plan .plan-features-list{
  display: flex;
  flex-wrap: wrap;
}
.membershp-pricing-box.current-plan{
  background: var(--light-blue-color);
}
.current-plan .renewal-btn{
  width: 100%;
  background: var(--primary-color);
  border: none;
  padding: 14px;
  color: var(--white-to-color);
  border-radius: 30px;
  font-size: 16px;
}
.current-plan .renewal-btn .mid-line-t{
  height: 15px;
  width: 1px;
  background: var(--white-to-color);
  display: inline-block;
  margin: 0px 11px;
}
.plans-icon-with-content .membarship-icons{
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  border-radius: 12px;
  color: var(--white-to-color);
  font-size: 36px;
}

/* checkout section start   */
.checkout-container{
  border: 1px solid var(--border-color1);
  border-radius: 14px;
  padding: 16px;
}
.amount-pricing-sng {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 12px;
  border-radius: 11px;
}
.plan-checkout-smallbox{
  background: var(--white-color);
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border-color1);
  margin-top: -70px;
  position: relative;
}
.plan-checkout-box {
  background: var(--primary-color);
  border-radius: 11px;
  padding: 0px 15px 7px;
}
.offer-code-plans .plans-offer{
  width: 100%;
  height: 48px;
  padding: 12px 100px 12px 20px;
  border-radius: 6px;
  border: transparent;
  outline: transparent;
  background: var(--gray1-color);
  font-size: 15px;
  color: var(--title-text);
  position: relative;
  cursor: text;
}
.offer-code-plans .btn-apply-code{
  position: absolute;
  right: 4px;
  top: 4px;
  background: var(--primary-color);
  color: var(--white-to-color);
  border: none;
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
}
.select_pay-btn .payNow-btn{
  background: var(--primary-color);
  color: var(--white-to-color);
  border: none;
  padding: 14px 64px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
}

 /* alert jobs section  / */
.alerts-jobs-boxed{
  border: 1px solid var(--border-color1);
  border-radius: 12px;
  padding: 18px 18px;
  cursor: pointer;
  transition: all 0.3s;
}
.alerts-jobs-boxed:hover{
  transform: translateY(-4px);
}
.jobsnumber-times,
.alert-query-parts ul li{
  width: 50%;
}
.alerts-jobs-boxed h2{
  border-bottom: 1px solid var(--border-color1);
}
.alert-job-remove{
  position: absolute;
  right: 16px;
  top: 9px;
  border: 1px solid var(--border-color1);
  height: 32px;
  width: 32px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--title-text);
  cursor: pointer;
}

/* announcement profile modal   */
.user-list-profiles {
  background: #00000057;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
.user-list-profiles .modal-dialog{
  width: 650px;
  max-width: 650px;
}
.user-list-profiles .modal-content{
  border-radius: 16px;
  border: none;
}
.user-list-profiles .modal-header .btn-close{
  margin: 0;
  padding: 0;
  background: var(--primary-color);
  opacity: 1;
  height: 34px;
  width: 34px;
  color: var(--white-color);
  box-shadow: none;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-profile-mainview .profile-img-art{
  width: 100%;
  display: block;
  border-radius: 14px;
  height: 380px;
  object-fit: cover;
}
.modal-profile-mainview .items-image-dark::before{
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0000004a;
  border-radius: 14px;
}
.modal-profile-mainview .carousel-control-prev,
.modal-profile-mainview .carousel-control-next {
  top: 190px;
  bottom: unset;
}
.modal-profile-mainview .carousel-control-prev-icon{
  height: 38px;
  width: 38px;
  background:#0000008f;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}
.modal-profile-mainview .carousel-control-next-icon {
  height: 38px;
  width: 38px;
  background:#0000008f;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}
/* edit profile */
.form-collapse-main{
  border: 1px solid var(--border-color1);
  border-radius: 12px;
}
.btn-form-save{
  background: var(--primary-black-color);
  color: var(--white-to-color) !important;
  border: 1px solid var(--primary-color);
  padding: 10px 42px;
  border-radius: 6px;
  font-weight: 600;
}

/* view jobs */
.divider {
  margin: 10px auto;
  height: 1px;
  width: 100%;
  background: var(--border-color1);
  display: none;
}
.job-box {
  border: var(--border-color1);
  background: var(--light-blue-color);
  border-radius: 16px;
  padding: 24px;
}
@media (min-width: 768px) {
  .divider {
      display: block;
  }
}

@keyframes zoomIn {
  from {
      transform: scale(0.7);
      opacity: 0;
  }
  to {
      transform: scale(1);
      opacity: 1;
  }
}
.modal .common-modal {
  animation: zoomIn 0.3s ease-out;
}
.modal .share-modal {
  animation: zoomIn 0.3s ease-out;
}
.social-jobs-icon a i{
  transition: transform 0.3s ease-in-out;
}
.social-jobs-icon a:nth-child(1){
  color: #1877F2;
  border-color: #b7d4fb;
}
.social-jobs-icon a:nth-child(1):hover{
  background: #1877F2;
}
.social-jobs-icon a:nth-child(2){
  color: #46C1F6;
  border-color: #b6e7fc;
}
.social-jobs-icon a:nth-child(2):hover{
  background: #46C1F6;
}
.social-jobs-icon a:nth-child(3){
  color: #e1306c;
  border-color: #f5bccf;
}
.social-jobs-icon a:nth-child(3):hover{
  background: #e1306c;
}
.social-jobs-icon a:nth-child(4){
  color: #25D366;
  border-color: #bef4d2;
}
.social-jobs-icon a:nth-child(4):hover{
  background: #25D366;
}
.social-jobs-icon a:nth-child(5){
  color: #0088cc;
  border-color: #b3e6ff;
}
.social-jobs-icon a:nth-child(5):hover{
  background: #0088cc;
}
.social-jobs-icon a:hover{
  color: #fff;
  border-color: transparent;
}
.social-jobs-icon a:hover i{
  transform: scale(1.2);
}
.social-jobs-icon a{
  height: 48px;
  width: 48px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border: 1px solid;
}

.copy-field{
  margin: 12px 0 -5px 0;
  height: 45px;
  border-radius: 4px;
  padding: 0 5px;
  border: 1px solid #757171;
}
.copy-field.active{
  border-color: #7d2ae8;
}
.copy-field i{
  width: 50px;
  font-size: 18px;
  text-align: center;
}
.copy-field.active i{
  color: #7d2ae8;
}
.copy-field input{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
}
.copy-field button{
  background: var(--primary-color);
  color: var(--white-to-color);
  border: 1px solid var(--primary-color);
  padding: 6px 16px;
  font-size: 15px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 400;
}
.copy-field button:hover{
  background: #8d39fa;
}

/* / otp verifation modal / */

.otp-inputs input{
  width: 50px;
  height: 50px
}
.otp-inputs .form-control:focus {
  box-shadow: none;
  border: 3px solid var(--primary-color);
}
.btn-otp-verifation{
  width: max-content;
  background: var(--primary-color);
  border: none;
  color: var(--white-to-color);
  height: 47px;
  border-radius: 4px;
  padding: 7px 38px;
  font-weight: 700;
}
.login-register-btn{
  width: max-content;
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  border: none;
  color: var(--white-to-color);
  height: 47px;
  border-radius: 8px;
  padding: 7px 38px;
  font-weight: 700;
}
.login-register-btn:hover{
  background: var(--white-color);
  color: var(--primary-white-color);
  border: 1px solid var(--primary-color);
}