.ui-slider {
    position: relative;
}

.ui-slider-nav {
    // position:   absolute;
    // right:      0;
    // top:        -30px;
    margin-bottom: 10px;
    text-align:    right;

    &.ui-slider-nav--left {
      text-align: left;
    }
    &.ui-slider-nav--center {
      text-align: center;
    }
    &.ui-slider-nav--absolute {
      position: absolute;
      right:    0;
      top:      -40px;
      width:    100%;
    }


    > * {
        display:    inline-block;
        margin:     0 10px;
        padding:    5px;

        &:first-child {
          margin-left: -4px;
        }
        &:last-child {
          margin-right: -4px;
        }

        &:after {
            display:          block;
            content:          '';
            width:            6px;
            height:           6px;
            background-color: rgba(0,0,0,.53);
            border-radius:    6px;
            background-clip:  padding-box;
            transition:       all .3s;
        }

        &:hover:after {
            background-color: #1ABF78;
        }

        &.active:after {
            background-color: transparent;
            box-shadow: 0 0 0 2px rgba(0,0,0,.53);
        }
    }
}