/*!
 * # Range slider for Semantic UI.
 *
 */

.ui.range {
    width:75%;
    height: 35px;
    float:left;
}

.ui.range .inner {
    margin: 3px 0px 3px 3px;
    height: 35px;
    position: relative;
}

.ui.range .inner i.icon:hover, .thumb:hover {
    cursor: pointer;
}

.ui.range .inner i.icon.backward {
    position: absolute;
    left: 0;
}

.ui.range .inner i.icon.forward {
    position: absolute;
    right: 0;
}

.ui.range .inner .track {
    position: absolute;
    /*width: 100%;*/
    height: 4px;
    border-radius: 4px;
    top: 9px;
    left: 15px;
    right: 15px;
    background-color: rgba(0, 0, 0, .05);
}

.ui.inverted.range .inner .track {
    background-color: rgba(255, 255, 255, .08);
}

.ui.range .inner .track-fill {
    position: absolute;
    width: 0;
    height: 4px;
    border-radius: 4px;
    top: 9px;
    left: 0;
    background-color: #1b1c1d;
}

.ui.inverted.range .inner .track-fill {
    background-color: #545454;
}

.ui.range .inner .thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    background: #fff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    background: #fff -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    background: #fff -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    border-radius: 100%;
    box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15), 0 0 0 1px rgba(34, 36, 38, .15) inset;
}

.ui.range .inner input {
    position: absolute;
    top: 28px;
    width: 7.8em;
    font-size: .84em;
    line-height: .1em;
}

.ui.range .inner input.start {
    left: 0;
}

.ui.range .inner input.end {
    right: 0;
}

.ui.range .inner i.start.caret.icon {
    position: absolute;
    left: 94px;
}

.ui.range .inner i.end.caret.icon {
    position: absolute;
    right: 90px;
}

.ui.range .inner i.caret.up.icon {
    top: 26px;
}

.ui.range .inner i.caret.down.icon {
    top: 40px;
}


/*--------------
     Colors
---------------*/


/* Red */

.ui.red.range .inner .track-fill {
    background-color: #DB2828;
}

.ui.red.inverted.range .inner .track-fill {
    background-color: #FF695E;
}

.ui.red.range .inner i.icon {
    color: #DB2828;
}

.ui.red.inverted.range .inner i.icon {
    color: #FF695E;
}

/* Orange */

.ui.orange.range .inner .track-fill {
    background-color: #F2711C;
}

.ui.orange.inverted.range .inner .track-fill {
    background-color: #FF851B;
}

.ui.orange.range .inner i.icon {
    color: #F2711C;
}

.ui.orange.inverted.range .inner i.icon {
    color: #FF851B;
}

/* Yellow */

.ui.yellow.range .inner .track-fill {
    background-color: #FBBD08;
}

.ui.yellow.inverted.range .inner .track-fill {
    background-color: #FFE21F;
}

.ui.yellow.range .inner i.icon {
    color: #FBBD08;
}

.ui.yello.inverted.range .inner i.icon {
    color: #FFE21F;
}

/* Olive */

.ui.olive.range .inner .track-fill {
    background-color: #B5CC18;
}

.ui.olive.inverted.range .inner .track-fill {
    background-color: #D9E778;
}

.ui.olive.range .inner i.icon {
    color: #B5CC18;
}

.ui.olive.inverted.range .inner i.icon {
    color: #D9E778;
}

/* Green */

.ui.green.range .inner .track-fill {
    background-color: #21BA45;
}

.ui.green.inverted.range .inner .track-fill {
    background-color: #2ECC40;
}

.ui.green.range .inner i.icon {
    color: #21BA45;
}

.ui.green.inverted.range .inner i.icon {
    color: #2ECC40;
}

/* Teal */

.ui.teal.range .inner .track-fill {
    background-color: #00B5AD;
}

.ui.teal.inverted.range .inner .track-fill {
    background-color: #6DFFFF;
}

.ui.teal.range .inner i.icon {
    color: #00B5AD;
}

.ui.real.inverted.range .inner i.icon {
    color: #6DFFFF;
}

/* Blue */

.ui.blue.range .inner .track-fill {
    background-color: #2185D0;
}

.ui.blue.inverted.range .inner .track-fill {
    background-color: #54C8FF;
}

.ui.blue.range .inner i.icon {
    color: #2185D0;
}

.ui.blue.inverted.range .inner i.icon {
    color: #54C8FF;
}

/* Violet */

.ui.violet.range .inner .track-fill {
    background-color: #6435C9;
}

.ui.violet.inverted.range .inner .track-fill {
    background-color: #A291FB;
}

.ui.violet.range .inner i.icon {
    color: #6435C9;
}

.ui.violet.inverted.range .inner i.icon {
    color: #A291FB;
}

/* Purple */

.ui.purple.range .inner .track-fill {
    background-color: #A333C8;
}

.ui.purple.inverted.range .inner .track-fill {
    background-color: #DC73FF;
}

.ui.purple.range .inner i.icon {
    color: #A333C8;
}

.ui.purple.inverted.range .inner i.icon {
    color: #DC73FF;
}

/* Pink */

.ui.pink.range .inner .track-fill {
    background-color: #E03997;
}

.ui.pink.inverted.range .inner .track-fill {
    background-color: #FF8EDF;
}

.ui.pink.range .inner i.icon {
    color: #E03997;
}

.ui.pink.inverted.range .inner i.icon {
    color: #FF8EDF;
}

/* Brown */

.ui.brown.range .inner .track-fill {
    background-color: #A5673F;
}

.ui.brown.inverted.range .inner .track-fill {
    background-color: #D67C1C;
}

.ui.brown.range .inner i.icon {
    color: #A5673F;
}

.ui.brown.inverted.range .inner i.icon {
    color: #D67C1C;
}

/* Grey */

.ui.grey.range .inner .track-fill {
    background-color: #767676;
}

.ui.grey.inverted.range .inner .track-fill {
    background-color: #DCDDDE;
}

.ui.grey.range .inner i.icon {
    color: #767676;
}

.ui.grey.inverted.range .inner i.icon {
    color: #DCDDDE;
}

/* Black */

.ui.black.range .inner .track-fill {
    background-color: #1b1c1d;
}

.ui.black.inverted.range .inner .track-fill {
    background-color: #545454;
}

.ui.black.range .inner i.icon {
    color: #1b1c1d;
}

.ui.black.inverted.range .inner i.icon {
    color: #545454;
}

/*--------------
    Disabled
---------------*/

.ui.range.disabled {
    opacity: .5;
}

.ui.range.disabled i.icon:hover {
    cursor: auto;
}

.ui.range.disabled .inner .track-fill {
    background: #ccc;
}

.ui.range.disabled .inner i.icon {
    color: #ccc;
}