.column-display {
    cursor:pointer;
    height:210px;
    left:40px;
    overflow:hidden;
    position:absolute;
    top:330px;
    width:180px;

    select {
        background:0;
        border:0;
        outline:0;
        width:200px;
    }

    .toggle {
        background:0;
        color:#ccc;
        cursor:pointer;
        font-size:10px;
        height:30px;
        letter-spacing:1.5px;
        line-height:30px;
        text-transform:uppercase;
        transition:color 0.3s ease;

        &:hover {
            color:#777;
        }

        &.selected {
            color:#444;
            cursor:default;
            font-weight:bold;
        }
    }
}

.reticle-sizer {
    left:40px;
    position:absolute;
    top:520px;
    z-index:1;
}

.bar-display {
    $toggleW: 30px;
    $toggleH: 40px;
    $toggleSpacing: 15px;

    left:40px;
    position:absolute;
    top:560px;

    .toggle {
        background-image:url('../bar-display.png');
        background-repeat:no-repeat;
        cursor:pointer;
        display:inline-block;
        font-size:0;
        height:$toggleH;
        margin-right:$toggleSpacing;
        opacity:0.15;
        transition:opacity 0.3s ease;
        width:$toggleW;

        &:hover {
            opacity:1;
        }

        &.selected {
            cursor:default;
            opacity:1;
        }
    }

    .toggle1 {
        background-position:-60px 10px;
    }

    .toggle2 {
        background-position:-30px 10px;
    }

    .toggle3 {
        background-position:0 10px;
    }
}

input[type=range]{
    cursor:pointer;
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    background: #ddd;
    border: none;
    border-radius: 3px;
    height: 2px;
    width: 300px;
}

input[type=range]::-webkit-slider-thumb {
    background: #d8ebd3;
    border: 2px solid #5D5336;
    border-radius: 50%;
    height: 16px;
    margin-top: -7px;
    width: 16px;
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none;
}