/* PERSONAL SKILLS – new design like demo screenshot */
.personal-skills-wrap{
  margin-top: 15px;
}
.personal-skill-row{
  display:flex;
  align-items:center;
  margin-bottom: 14px;
}
.personal-skill-name{
  flex:0 0 190px; /* label column width */
  font-size:14px;
  font-weight:400;
  margin-right:20px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.personal-skill-bar-wrap{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
}
.personal-skill-track{
  flex:1;
  position:relative;
  height:4px;
  background:#f1f2f6;  /* light grey background line */
  border-radius:2px;
}
.personal-skill-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:100%;          /* 100% for all since you don't store % per skill */
  background:#1a48ff;  /* theme blue line */
  border-radius:2px;
}
.personal-skill-percent{
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}  
@media (max-width: 575.98px){
  .personal-skill-row{
    flex-direction:column;
    align-items:flex-start;
}
.personal-skill-name{
  flex:0 0 auto;
  margin-bottom:6px;
  white-space:normal;
}
.personal-skill-bar-wrap{
  width:100%;
}
}
li.active {
        color: #949494 !important;
}
.show-page .nice-select {
    width: 75px !important;
}
.candidates-listing-area .time-and-hour .rated {
    float: left;
    width: 300px;
}
@media (max-width: 991.98px) {
    /* Stack "Top Rated" and "Show Per Page" vertically */
    .candidates-listing-area .time-and-hour .rated,
    .candidates-listing-area .time-and-hour .show-page {
        float: none;
        width: 100%;
        margin-bottom: 10px;
    }

    /* Make the selects full width */
    .candidates-listing-area .time-and-hour .rated select,
    .candidates-listing-area .time-and-hour .show-page select,
    .show-page .nice-select {
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* Optional: extra tightening for very small phones */
@media (max-width: 575.98px) {
    .candidates-listing-area .time-and-hour {
        padding-left: 0;
        padding-right: 0;
    }
}
/* Personal Skills section */
.personal-skills-wrap {
    margin-top: 15px; /* Add margin between section and content */
}

.personal-skills-wrap .d-flex {
    gap: 10px; /* Reduced the gap between the skills */
}

.personal-skill-badge {
    font-size: 14px; /* Increase font size for better readability */
    background-color: #f5f5f5; /* Lighter background color */
    color: #333; /* Dark text color for contrast */
    border: 1px solid #ccc; /* Light border for better visibility */
    padding: 8px 14px; /* Added padding for a better button-like appearance */
    border-radius: 20px; /* Rounded corners */
    transition: background-color 0.3s, transform 0.3s; /* Smooth hover effect */
}

/* Make the badges responsive */
@media (max-width: 768px) {
    .personal-skill-badge {
        font-size: 12px; /* Smaller font size for mobile */
        padding: 6px 12px; /* Adjust padding on smaller screens */
    }
}