/* tab overview */
/*.tab_pane_overview{
  position: relative;
}
.overview-shadow-right{
  position: absolute;
  top: 0;
  bottom: 30px;
  right: -5px;
  z-index: 100;
  -webkit-box-shadow: inset -15px 0px 12px -15px rgba(0,0,0,0.30);
  -moz-box-shadow: inset -15px 0px 12px -15px rgba(0,0,0,0.30);
  box-shadow: inset -15px 0px 12px -15px rgba(0,0,0,0.30);
  width: 15px;
  background: rgba(255,255,255,0.5);
  display: none;
}*/
.overview-tab-section .main-page {
  min-height: auto;
  padding-bottom: 15px;
}
section.overview-tab-section, .overview-tab-section section.responseTabNew{
  padding: 0;
  min-height: auto;
}
.tab-overview-wrap{
  width: 100%;    
  overflow-x: auto;
  flex: 1 1 0%;
  position: relative;
  /*height: calc(100vh - 280px);*/
  /*height: 100vh;*/
}
/*==temporary comment - custom scrollbar==*/
/*.tab-overview-wrap::-webkit-scrollbar {
  height: 15px;
  width: 15px;
}
.tab-overview-wrap::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.tab-overview-wrap::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 10px;
  border: 1px solid #ffffff;
}*/
.tab-overview-flex{
  display: flex;
  flex-flow: row nowrap;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  align-items: stretch;
  user-select: none;
  padding:0;
  width: fit-content;
  /*height: calc(100vh - 25px);*/
  min-height: 100vh;
  overflow-y: auto;
}
.tab-overview-col-wrap{
  display: flex;
  flex-direction: column;
  align-self: auto;
  flex: 1 1 auto;
  min-width: 290px;
  max-width: 290px;
}
.tab-overview-col{
  border-radius: 5px;  
  margin: 0 5px;
  display: flex;
  flex-direction: column;  
  min-width: 280px;
  max-width: 280px;
  background-color:var(--gray-100);
  flex: 1 1 auto;
  /*align-self: auto;
  
  box-shadow: initial;*/  
}
.tab-overview-col-head{
  z-index: 4;
  position: sticky;
  background:#fff;
  top: 0px;
  padding: 12px 10px;
  text-align: center;
  font-weight: 500;
  color: #08325b;
  border: 2px solid var(--gray-100);
  border-radius: 5px 5px 0 0;
  font-size: 13px;
}
.tab-overview-col-content{
  -webkit-box-flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 80px; 
  padding: 10px
}
.tab-overview-col-head.bg-hired, .sub-stage-card.bg-hired{
  background: #ebf9f1
}
.tab-overview-col-head.bg-skipped, .sub-stage-card.bg-skipped{
  background: #fffae8;
  color: #755f03;
}
.tab-overview-col-head.bg-rejected, .sub-stage-card.bg-rejected{
  background: #fef1f1 
}
/* overview dev card */
.card-overview{
  background: #fff;
  position: relative;  
  min-height: 60px;
  border-radius: 5px;
  width: 100%;
  margin-bottom: 15px;
  padding: 15px;
}
.card-overview .card-body{
  /*padding: 20px 12px;*/
}
.card-overview:hover{
  cursor: pointer;
  background: rgb(218 230 238 / 40%);
}
.card-overview:active,.card-overview:focus{
  cursor: grabbing;
  background: rgb(218 230 238 / 40%);
}

.card-overview .dev-info .label-counter{
  width: 20px;
  height: 20px; 
  padding: 0;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  font-size: 10px;
  color: #fff;
}
.card-overview .dev-profile{
  width: calc(100% - 50px);
}
.card-overview .dev-avtar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
  text-align: center;
  display: inline-block;
}
.card-overview .dev-avtar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-overview .dev_name{
  width: calc(100% - 50px);
}
.card-overview .dev_name h5 {
  font-size: 14px;
  margin: 0 0 5px;
  color: var(--black);
  font-weight: 500;
  word-break: break-all;
  line-height: 1.4;
}
.dev-img {
  width: 40px;
  margin-right: 10px;
}
.title-content {
  width: calc(100% - 50px);
}
.card-overview .dev_name span.badge-free, .dev_name span.badge-free{
  margin-left: 5px;
  font-size: 10px;
  vertical-align: top;
}
.card-overview .dev_name>span{
  font-size: 12px;
  font-weight: 400;
}
.card-overview .dev_name .label{
  margin-right: 5px;
  padding: 4px 6px;
  font-size: 10px;
}
.card-overview .dev_name .label i{
  margin-right: 2px;
}
.overview-dev-status{
  margin-top: 15px;
}
.dev-hiring-status{
  width: 52%;
  font-size: 10px;
}
.overview-dev-activity{ 
  width: 48%;
  text-align: right;
}
.overview-dev-activity span{
  font-size: 10px;
}
.card-addon-element{
  text-align: center;  
}
.card-addon-element h5 {
  font-size: 12px;
  margin: 0;
  color: var(--blue);
  font-weight: 400;
  background: var(--gray-200);
  padding: 10px;
  border-radius: 0 0 5px 5px;
}
.card-addon-element h5 a{
  color:var(--secondary);
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-addon-element h5 a img{
  margin-right: 5px;
  width: 18px;
  height: 18px;
}
.label{
  margin-bottom: 0;
  font-weight: 500;
  padding: 5px 8px;
}
.card-overview label.label {
  border-radius: 10px;
}
.label-primary{
  background: var(--primary);
}
.label-green,.label-success{
  background: var(--green);
}
.label-light-warning{  
  background-color: #fff2cd;
  color: #86711c;  
}
.label-light-primary{
  background-color:#eaf7ec;
  color: var(--secondary);
}
.label-light-success{
  background-color:#eaf7ec;
  color: var(--green);
}
.label-dark-warning{
  background-color: #fce8e7;
  color: #f51e1a;
}
.label-dark-success{
  background-color: var(--green);
  color: #fff;
}
/* drag and drop css */
.dragging {
  opacity: 0.5;
}
.new-added {
  animation: insert var(--transitionTime) linear;
}
.will-remove {
  animation: remove var(--transitionTime) linear;
  animation-fill-mode: forwards;
}

.prescreened-col{
  border: 1px solid var(--primary);
}
.prescreened-col .tab-overview-col-head{
  padding: 12px 10px;
  /* border: 0; */
  /*border-bottom: 1px solid var(--primary);*/
  color: var(--primary);
  min-height: 48px;
}
.prescreened-col .tab-overview-col-head p{
  margin: 0;
  line-height: 1;
}
.prescreened-col .tab-overview-col-content{
  border-top: 0;
  background: rgb(0 110 255 / 6%);
  border-radius: 0 0 5px 5px;
}
.prescreened-col .tab-overview-col-content h4{
  margin: 10px 0 20px;
  color: var(--title-blue);
  font-weight: 500;
  font-size: 18px;
  text-align: center;
}
.prescreened-col .tab-overview-col-content ul.list-checked-green li{
  font-size: 13px;
  margin-bottom: 10px;
}
.prescreened-col .tab-overview-col-content .btn{
  margin: 10px 0 20px;
}
/* for z-index issue in admin side, will remove when backdrop issue will be fixed */
/*md-autocomplete md-autocomplete-wrap,md-autocomplete input:not(.md-input){
  height: 34px;
  border-radius: 5px;
}
.md-virtual-repeat-container.md-autocomplete-suggestions-container{
  z-index:1200
}*/

/*.main-footer-sec,.bottom-footer{
  display: none;
}
.main-page{
  padding-bottom: 0;
  min-height: 100px;
}*/
/* start scroll-preview */

.scroll-preview-sec-wrap{
  width: 140px;
  border: 1px solid var(--gray-200);
  position: fixed;
  right: 40px;
  bottom: 20px;
  height: 55px;
  background: var(--white);
  border-radius: 5px;
  box-shadow: 0px 0px 25px 5px rgb(0 0 0 / 10%);
  padding: 7px;
  z-index: 4;
}
.slider {
  width: 100%;
  height: 100%;
  position: relative;
}
.thumb {
  width: 100%;
  max-width: 91px;
  height: 40px;
  border-radius: 3px;
  position: relative;
  left: 0;
  top: 0;
  cursor: move;
  border: 2px solid #4c9aff;
  z-index: 4;
}
.overview-stage-col-wrap{
  position: absolute;
  top: 0px;
  width: 100%;
  height: 40px;
}
.overview-stage-col-wrap .overview-stage-col{
  height: 100%;
  width: 100%;
  background: var(--gray-200);
  border-radius: 3px;
  min-width: 5px;
  max-width: 15px;
  margin-right: 4px;
}

/* end scroll-preview */

/* start overview tabs new design for mobile */

.response-tab-stages{
  width: 100%;
  background-color: var(--gray-100);
  padding:5px  10px;
  margin: 0 auto 10px;
  border-bottom: 1px solid #ddd;
}
/*.response-tab-stages .custom-tab{
  margin: 25px 0;
}
.applied-stage-group.custom-tab{
  margin: 0;
}*/
.sub-stage-card{
  padding: 10px 20px;
  background-color: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  margin: 10px 0;
}
a.sub-stage-card:hover{
  text-decoration: none;
}
.sub-stage-name{
  width: calc(100% - 115px) ;
}
.stage-title h4{
  margin-bottom: 0;
}
.sub-stage-card.pre-screen-sec{
  border: 1px solid var(--primary);
  background: #e8f1fc;
}
.sub-stage-card.pre-screen-sec h5{
  color:var(--primary);
}
.pre-screen-sec h5 img, .pre-screen-sec button img{
  width: 20px;
}
.sub-stage-name h5 img{
  vertical-align: bottom;
}
.sub-stage-name h5{
  color: #08325b;
  font-weight: 500;
  text-transform: capitalize;
}
.sub-stage-action{
  width: 115px;
  align-items: center;
}
.sub-stage-action span i{
  font-size: 25px;
}
.avtar-groups span{
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin-left: -10px;
  align-items:center;
  justify-content:center;
  border:3px solid #ffff;
  font-size: 9px;
  background-color: var(--gray-300);
  color: var(--gray-600);
}
.avtar-groups span img{
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.pre-screen-sec .avtar-groups span{
  border-color: #eefff1;
}
.sub-stage-card.bg-rejected .avtar-groups span{
  border-color: #fef1f1;
}
.sub-stage-card.bg-hired .avtar-groups span{
  border-color: #ebf9f1;
}
.sub-stage-card.bg-skipped .avtar-groups span{
  border-color: #fffae8;
}
/* end overview tabs new design for mobile */
.card-overview .recruited-by{
  padding: 5px 10px;
  border-top: 1px solid #eee;
  font-size: 13px;
  display: inline-block;
}
.tab-content #OVERVIEW{
  position: relative;
}

/* start avinash css*/

.bd-top-applied{
  border-top: 3px solid var(--applied-color);
}
.bd-top-pre-screened,.bd-top-hired{
  border-top: 3px solid var(--primary);
}
.bd-top-shortlisted{
 border-top: 3px solid var(--shortlisted-color);
}
.bd-top-interview{
 border-top: 3px solid var(--interview-color);
}
.bd-top-offered{
 border-top: 3px solid var(--offered-color);
}
/* .bd-top-rejected{
 border-top: 3px solid var(--rejected-color);
} */
.bd-top-skipped{
 border-top: 3px solid var(--skipped-color);
}

/*avinash start for mobile design  */
.sub-stage-card.bd-left-applied{
  border-left: 4px solid var(--applied-color);
}
.sub-stage-card.bd-left-hired{
  border-left: 4px solid var(--primary);
}
.sub-stage-card.bd-left-shortlisted{
 border-left: 4px solid var(--shortlisted-color);
}
.sub-stage-card.bd-left-interview{
 border-left: 4px solid var(--interview-color);
}
.sub-stage-card.bd-left-offered{
 border-left: 4px solid var(--offered-color);
}
.sub-stage-card.bd-left-skipped{
 border-left: 4px solid var(--skipped-color);
}
/* end for mobile design  */

.dev-profile .dev_name .email-title-sec, .dev-profile .dev_name .dev-name-overflow{
  display: inline-block;
  /*max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;*/
}
span.likes-count{
  color: var(--primary);
  font-size: 12px;
}
/*  end avinash css*/

/*new credit css changes*/
span.viewed-tag.check-io-tag {
  width: 18px;
  height: 18px;
  background-color: transparent;
  padding: 0;
}
.credit-info-popover p {
  color: var(--black);
}
/*//new credit css changes*/
span.check-io-tag.linkedin-icon img {
  width: 20px;
  margin-left: 5px;
}
/*span.check-io-tag.linkedin-icon {
    margin-left: 5px;
}*/
span.must-have-txt {
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 11px;
  display: inline-block;
  width: 100%;
  margin-top: 5px;
}
.skip-line {
  width: 100%;
  color: var(--gray-600);
  margin: 5px 0 20px;
  position: relative;
}
.skip-line:before {
  content: ' ';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% - 120px);
  height: 1px;
  background-color: var(--gray-300);
  right: 0;
}
.pre-screen-sec button.btn-sm img {
  width: 14px;
  vertical-align: text-top;
  margin-top: 2px;
}
.dropdown.filter-dropdown ul.dropdown-menu {
  right: -96px;
  left: auto;
  top: 22px;
  border: 0 solid rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 3px 20px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 20px rgba(0, 0, 0, .3);
  transition: .3s cubic-bezier(.74,.32,.3,.76);
  padding: 5px 15px;
  border-radius: 5px;
  color: var(--black);
  min-width: 200px;
}
img.matching-dropdown-img {
  width: 12px;
}
.custom-radio-filter input {
  vertical-align: middle;
  margin: 0 5px 0 0;
  height: 20px;
  width: 20px;
  cursor: pointer;
}
.custom-control.custom-radio-filter {
  margin: 10px 0;
}
label.custom-control-label {
  margin: 0;
  color: var(--gray-700);
  cursor: pointer;
}
.dropdown.filter-dropdown ul.dropdown-menu:after {
  content: '';
  border: 7px solid #000;
  position: absolute;
  bottom: auto;
  top: -13px;
  left: 86px;
  border-color: #fff transparent transparent transparent;
  transform: rotate(180deg);
}
span.free-talent img {
  width: 14px;
  vertical-align: text-top;
  margin-left: 3px;
}
span.free-talent-switch {
  font-size: 13px;
  color: var(--green);
  font-weight: 500;
}
span.free-talent-switch img {
  width: 14px;
  vertical-align: middle;
  margin-right: 3px;
}

/*custom checkbox for stage select*/
.custom-checkbox-stage label {
  display: block;
  position: relative;
  padding-left: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.custom-checkbox-stage {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 10px;
  top: 47%;
  transform: translateY(-50%);
}
.custom-checkbox-stage label input {
  content: '';
  -webkit-appearance: none;
  background-color: #ddd;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 0;
  margin-left: -18px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

/* Create a custom checkbox */
.custom-checkbox-stage .checkmark {
  position: absolute;
  top: 2px;
  left: -1px;
  height: 16px;
  width: 16px;
  background-color: var(--white);
  border: 1px solid var(--gray-500);
  border-radius: 3px;
}

/* On mouse-over, add a grey background color */
.custom-checkbox-stage label:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox-stage label input:checked ~ .checkmark {
  background-color: var(--primary);
}

/* Create the checkmark/indicator (hidden when not checked) */
.custom-checkbox-stage .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.custom-checkbox-stage label input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox-stage label .checkmark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*//custom checkbox for stage select*/
#inner-label {
  transform: rotate(45deg);
  background-color: var(--green);
  width: 45px;
  height: 45px;
  top: 51px;
  right: 23px;
  position: relative;
  border-radius: 5px;
}
#inner-label p, #inner-label span, #inner-label img {
  position: absolute;
  right: 5px;
  top: 6px;
  transform: rotate(45deg);
  color: var(--white);
  font-size: 10px;
}
#inner-label span, #inner-label img {
  transform: unset;
}
#inner-label img {
  filter: invert(1);
  width: 14px;
  right: 4px;
}
#outer-label {
  position: absolute;
  top: -76px;
  right: -34px;
  width: 69px;
  height: 140px;
  overflow: hidden;
  transform: rotate(314deg);
}
#inner-label.label-free {
  background-color: var(--green);
}
#inner-label.label-lock {
  background-color: var(--gray-600);
}
#inner-label.label-talent {
  background-color: #7cc576;
}
.label-lock img, .label-talent img {
  width: 14px;
}
.label-talent .cls-talents-white {
  fill: none;
  stroke: var(--white);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5px;
}
.svg-14 svg {
  width: 14px;
  height: 14px;
}
.lock-disable .dev-info.flex-element, 
.lock-disable .overview-dev-status {
  /*opacity: 0.6;*/
}
.label.label-invited {
  background: rgb(0 110 255 / 6%);
  color: var(--primary);
  font-weight: 500;
  border-radius: 10px;
}
.prescreened-col-content button.btn.btn-normal.btn-blue.btn-block.upgrade-btn {
  max-width: 100%;
}
.custom-checkbox-stage.checkbox-cards {
  left: 5px;
  top: 10px;
}
.checkbox.candidate-checkbox.ng-scope {
  margin: 0 0 10px 0;
  
}

/* responsive css start  */
@media only screen and (max-width: 2560px){
  .container-fluid.container-fixed.overview-full-width{
    width: 100%;
  }
}

@media screen and (max-width: 1680px){
  .thumb{
    max-width: 75px;
  }
}
@media screen and (max-width: 1440px){
  .tab-overview-col-wrap{
    min-width: 310px;
    max-width: 310px;
  }
  .tab-overview-col{    
    min-width: 300px;
    max-width: 300px;  
  }
  .thumb{
    max-width: 65px;
  }
}
@media screen and (max-width: 1367px){
  .thumb{
    max-width: 60px;
  }
}
@media screen and (max-width: 1280px){
  .thumb{
    max-width: 55px;
  }
}
@media screen and (max-width: 1024px){
  .thumb{
    max-width: 45px;
  }
}
@media screen and (max-width: 991px){
  .thumb{
    max-width: 40px;
  }
}
@media screen and (max-width: 860px){
  .thumb{
    max-width: 38px;
  }
}
@media screen and (max-width: 767px){
  .thumb{
    max-width: 101px;
  }
}
@media screen and (max-width: 600px){ 
  .tab-overview-wrap{
    overflow-y: hidden;
    padding: 0 5px;
    height: auto;
  }
  .tab-overview-col-wrap{
    min-width: 280px;
    max-width: 280px;
  }
  .tab-overview-col{
    min-width: 270px;
    max-width: 270px;
  }
  /* section.overview-tab-section{
    padding-top: 60px;
  } */
  .overview-dev-activity span {
    color: var(--gray-600);
  }
  .sub-stage-card {
    padding: 10px 20px 10px 30px;
  }
  .sub-stage-card {
    position: relative;
  }
  .custom-checkbox-stage {
    left: 8px;
  }
}
@media screen and (max-width: 599px){
  .prescreened-col .tab-overview-col-content .btn .prem-io-svg{
    width: 16px;
  }
  .response-tab-stages{
    padding: 10px 15px 10px;
  }
  .stage-title h4{
    margin: 20px 0 0;
    font-size: 16px;
  }
  .sub-stage-name h5,.stage-title h4{
    font-weight: 500;
  }
  .card-developer label.label-dark-warning{
    border-radius: 15px;
    margin-top: 5px;
  }
  .profile-inner-tabs .tab-pane{
    background-color: #fff;
  }
  .sub-stage-name h5 img {
    float: left;
    height: 20px;
    margin: 0 5px 0 0;
  }
}
@media screen and (max-width: 480px){
  section.overview-tab-section {
/*    padding-top: 60px; commented for alert-fullbar draft job and invoice by ap*/
  }
}
@media screen and (max-width: 375px){

}

@keyframes insert {
  from {
    max-height: 0;
  }
  to {
    max-height: 100vh;
  }
}
@keyframes remove {
  from {
    max-height: 100vh;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}