/* Toolbox and InputFX */
div.input.text,
div.input.text > input
{
    border-radius: 5px;
    min-height: 30px;
}

/* Placeholder focused */
div.input.text > label.placeholder
{
    padding: 5px 5px 0 5px;
    width: auto;
    min-height:25px;
    line-height:20px;
    text-align: left;
    display: block;
}

/* Hide tip during loading */
div.input.text.upload > i.tip,
div.input.text.download > i.tip,
div.input.text.complete > i.tip,
div.input.text.error > i.tip
{
    display: none;
}

    /* Pad input during loading */
    div.input.text.upload > input,
    div.input.text.download > input,
    div.input.text.complete > input,
    div.input.text.error > input
    {
        opacity: 0.5;
        padding-right: 30px;
    }

/* Style the slider */
button.slider
{
    position: relative;
    padding: 0 30px 0 55px;
    width: 85px;
    height: auto;
    background-color: var(--input-background-normal);
    border: 1px solid var(--input-border-normal);
    border-radius: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-mid);
    transition: background-color 0.3s;
    overflow: hidden;
    display: inline-block;
}

    /* Slider focus */
    button.slider:focus
    {
        background-color: var(--input-background-normal);
        color: var(--color-mid);
    }


    /* Create the circular indicator for the switch */
    button.slider::before
    {
        position: absolute;
        top: 50%;
        left: 1px;
        margin-top: -13px;
        width: 50px;
        height: 26px;
        background-color: var(--input-border-normal);
        border-radius: 5px;
        transition: transform 0.3s;
        z-index: 1;
        content: "";
    }

        button.slider.checked::before
        {
            background-color: var(--input-background-highlight);
        }

    /* Create the circular indicator for the switch */
    button.slider::after
    {
        position: absolute;
        top: 50%;
        left: 6px;
        margin-top: -10px;
        width: 20px;
        height: 20px;
        background-color: var(--input-background-normal);
        border-radius: 5px;
        transition: transform 0.3s;
        z-index: 2;
        content: "";
    }

        /* Move the indicator to the right when checked */
        button.slider.checked::after
        {
            transform: translateX(20px);
            background-color: var(--input-color-highlight);
        }