.level-selects-wrapper {
    width: 100%;
    margin: 2rem 0;
}

.level-display-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 15px;
}

.current-level-wrapper,
.desired-level-wrapper {
    flex: 1;
}

.level-selects-wrapper label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.level-selects-wrapper select {
    width: 100%;
    max-width: 100%;
}

#level-range-slider {
    height: 8px;
    background: #222528;
    border-radius: 15px;
    position: relative;
    margin: 8px 0;
    box-shadow: 0 1px 1px inset #000, 0 -1px 1px inset #3e4449;
}

#level-range-slider .ui-slider-range {
    background: #ffc700;
    height: 100%;
    position: absolute;
}

#level-range-slider .ui-slider-handle {
    width: 16px;
    height: 16px;
    background: #ffc700;
    border: 2px solid #16181a;
    border-radius: 50%;
    top: -55%;
    margin-left: -8px;
    position: absolute;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    outline: none;
    cursor: grab;
}

#level-range-slider .ui-slider-handle:hover,
#level-range-slider .ui-slider-handle.ui-state-active {
    border-color: #584d25;
}