/**
 * ProcessWire FloatRange Inputfield
 * By @eelke, https://eelke.net
 * Styling created with http://danielstern.ca/range.css/?ref=css-tricks#/
 */

.InputfieldFloatRange__display
{
    width: 120px !important;

    text-align: center;

    border-left: none !important;
}

.InputfieldFloatRange input[type=range]
{
    width: 100%;
    margin: 8px 0;

    -webkit-appearance: none;
}
.InputfieldFloatRange input[type=range].InputfieldFloatRange--without-value
{
    width: 100%;
}

.InputfieldFloatRange input[type=range].InputfieldFloatRange--with-value
{
    border-right: none !important;
    width: 80%;
    width: calc(100% - 120px);
}

.InputfieldFloatRange input[type=range]:focus
{
    outline: none;
}
.InputfieldFloatRange input[type=range]::-webkit-slider-runnable-track
{
    width: 100%;
    height: 0;

    cursor: pointer;

    border: 1px solid #000101;
    border-radius: 7.1px;
    background: rgba(48, 49, 49, .53);
    box-shadow: 0 0 0 #000, 0 0 0 #0d0d0d;
}
.InputfieldFloatRange input[type=range]::-webkit-slider-thumb
{
    width: 16px;
    height: 16px;
    margin-top: -9px;

    cursor: pointer;

    border: 1px solid #000;
    border-radius: 25px;
    background: #fff;
    box-shadow: 1.8px 1.8px 3.3px #000, 0 0 1.8px #0d0d0d;

    -webkit-appearance: none;
}
.InputfieldFloatRange input[type=range]:focus::-webkit-slider-runnable-track
{
    background: rgba(56, 57, 57, .53);
}
.InputfieldFloatRange input[type=range]::-moz-range-track
{
    width: 100%;
    height: 0;

    cursor: pointer;

    border: 1px solid #000101;
    border-radius: 7.1px;
    background: rgba(48, 49, 49, .53);
    box-shadow: 0 0 0 #000, 0 0 0 #0d0d0d;
}
.InputfieldFloatRange input[type=range]::-moz-range-thumb
{
    width: 16px;
    height: 16px;

    cursor: pointer;

    border: 1px solid #000;
    border-radius: 25px;
    background: #fff;
    box-shadow: 1.8px 1.8px 3.3px #000, 0 0 1.8px #0d0d0d;
}
.InputfieldFloatRange input[type=range]::-ms-track
{
    width: 100%;
    height: 0;

    cursor: pointer;

    color: transparent;
    border-color: transparent;
    background: transparent;
}
.InputfieldFloatRange input[type=range]::-ms-fill-lower
{
    border: 1px solid #000101;
    border-radius: 14.2px;
    background: rgba(40, 41, 41, .53);
    box-shadow: 0 0 0 #000, 0 0 0 #0d0d0d;
}
.InputfieldFloatRange input[type=range]::-ms-fill-upper
{
    border: 1px solid #000101;
    border-radius: 14.2px;
    background: rgba(48, 49, 49, .53);
    box-shadow: 0 0 0 #000, 0 0 0 #0d0d0d;
}
.InputfieldFloatRange input[type=range]::-ms-thumb
{
    width: 16px;
    height: 16px;
    height: 0;

    cursor: pointer;

    border: 1px solid #000;
    border-radius: 25px;
    background: #fff;
    box-shadow: 1.8px 1.8px 3.3px #000, 0 0 1.8px #0d0d0d;
}
.InputfieldFloatRange input[type=range]:focus::-ms-fill-lower
{
    background: rgba(48, 49, 49, .53);
}
.InputfieldFloatRange input[type=range]:focus::-ms-fill-upper
{
    background: rgba(56, 57, 57, .53);
}