.skill-card.unchecked .skill-number {
    background-color: #ccc;
    color: #666;
    border-color: #aaa;
}
.skill-card.unchecked .skill-slider {
}
/* WebKit */
.skill-card.unchecked .skill-slider::-webkit-slider-runnable-track {
}
.skill-card.unchecked .skill-slider::-webkit-slider-thumb {
    background: #aaa;
    border: 1px solid #999;
}
/* Firefox */
.skill-card.unchecked .skill-slider::-moz-range-track {
}
.skill-card.unchecked .skill-slider::-moz-range-thumb {
    background: #aaa;
    border: 1px solid #999;
}
/* Edge/IE */
.skill-card.unchecked .skill-slider::-ms-track {
    border-color: transparent;
    color: transparent;
}
.skill-card.unchecked .skill-slider::-ms-thumb {
    background: #aaa;
    border: 1px solid #999;
}

/* When checked, normal styling */
.skill-card.checked .skill-label {
    color: inherit;
}
.skill-card.checked .skill-number {
    background-color: #fff;
    color: #000;
    border-color: #ccc;
}
.skill-card.checked .skill-slider {
    background-color: #fff;
}
/* Style for language cards */
.language-card {
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* When checked, display normally */
.language-card.checked {
    filter: none;
    opacity: 1;
}

/* When unchecked, apply a graying effect */
.language-card.unchecked {
    filter: grayscale(100%);
    opacity: 0.6;
}

input.custom-color-input.form-control-color {
  display: ruby-text !important;
  width: 100% !important;
  height: 2rem !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}