div.input
{
    position: relative;
    width: auto;
    height: auto;
    color: var(--color-mid);
    display: inline-block;
}

div.input.focused
{
    color: var(--color-focus);
}

    /* Placeholder focused */
    div.input > label.placeholder
    {
        position: relative;
        font-size: 12px;
        font-weight: bold;
        color: var(--color-low);
        cursor: text;
        overflow: hidden;
        display: block;
    }

        div.input.focused label.placeholder
        {
            color: var(--color-high);
        }

/* Tool (icon, tooltip) */
div.input > i.tool
{
    position: absolute;
    text-align: center;
    color: inherit;
    cursor: pointer;
    z-index: 1;
}

    /* Status is a tool to depict upload and downloads */
    div.input > i.status
    {
        display: none;
    }

        div.input.upload > i.status,
        div.input.download > i.status,
        div.input.complete > i.status,
        div.input.longpress > i.status,
        div.input.error > i.status
        {
            display: block;
        }

            div.input.upload > i.status:before
            {
                content: "\f0ee";
            }

            div.input.download > i.status:before
            {
                content: "\f0ed";
            }

            div.input.complete > i.status:before
            {
                content: "\f058";
            }

            div.input.error > i.status:before
            {
                content: "\f071";
                color: #da4f49;
            }


p.input-tip
{
    padding: 5px;
    max-width: 280px;
    max-height: 250px;
    text-align: justify;
    font-size: 12px;
    font-weight: bold;
    word-break: break-word;
    overflow-y: auto;
}