.employer-matching-filter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.form-label {
    display: block !important;
    margin-bottom: 10px !important;
     margin-top: 10px !important;
}

.form-submit {
    margin-top: 10px !important;
    display: block !important;
    margin: 0 auto !important;
}

.custom-checkbox {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    border-width: 1px !important;
}

.with-tooltip {
    position: relative; /* Add this */
    display: inline-block;
    width: 25px; /* Adjust to match the checkbox size */
    height: 25px; /* Adjust to match the checkbox size */
}

.info-icon {
    position: absolute !important;
    top: -10px !important; /* Adjust to position the icon correctly */
    right: -10px !important; /* Adjust to position the icon correctly */
    display: inline-block !important;
    margin-left: 5px !important;
    cursor: pointer !important;
    font-size: 16px !important; /* Adjust to match your design */
}

/* Responsive tooltip text - adjust as needed */
@media (max-width: 768px) {
    .custom-checkbox {
        width: 16px !important;
        height: 16px !important;
    }
    
    .info-icon::after {
        content: attr(title) !important;
        position: absolute !important;
        padding: 4px 8px !important;
        background: black !important;
        color: white !important;
        border-radius: 4px !important;
        top: 50% !important;
        right: calc(100% + 5px) !important; /* Position tooltip to the left of the icon */
        transform: translateY(-50%) !important;
        white-space: normal !important; /* Allow text to wrap */
        font-size: 12px !important; /* Smaller font size for mobile */
        display: none !important; /* Start with the tooltip not displayed */
        z-index: 10 !important;
        width: 150px !important; /* Set a fixed width to allow text to wrap */
        text-align: left !important;
    }

    .info-icon:hover::after {
        display: block !important;
    }
}

.slider-value {
    text-align: center;
}


.matching-form-submit-container {
    margin-bottom: 20px;
}

/* Dim the entire row when disabled */
.allowance-item.disabled {
    opacity: 0.5;
    pointer-events: none; /* Prevents interaction */
}

/* Change switch color when disabled */
.allowance-item.disabled .switch .slider {
    background-color: #ccc !important; /* Light gray when disabled */
}

.allowance-item.disabled .switch input:checked + .slider {
    background-color: #aaa !important; /* Darker gray when checked but disabled */
}