.addui-slider {
  display: block;
  box-sizing: border-box; }
  .addui-slider * {
    box-sizing: border-box; }
  .addui-slider:not(.addui-slider-isrange) {
    cursor: pointer; }
  .addui-slider .addui-slider-track {
    display: block;
    position: relative;
    background: rgba(0, 0, 0, 0.38);
    border-radius: 4px; }
    .addui-slider .addui-slider-track .addui-slider-range {
      display: block;
      background: #dd9b30;
      border-radius: 4px;
      position: absolute; }
    .addui-slider .addui-slider-track .addui-slider-handle {
      display: block;
      width: 40px;
      height: 40px;
      background: rgba(221, 155, 48, 0);
      box-shadow: 0 0 5px rgba(221, 155, 48, 0);
      position: absolute;
      border-radius: 50px;
      cursor: pointer;
      transition: background 1s, box-shadow 1s;
      z-index: 0; }
      .addui-slider .addui-slider-track .addui-slider-handle .addui-slider-value {
        display: block;
        float: right;
        background: rgba(221, 155, 48, 0);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-top: 0px;
        color: white;
        opacity: 0;
        pointer-events: none;
        transition: opacity 1s, background 1s, transform 1s, margin 1s, border-radius 1s;
        transform: scale(1, 0) rotate(-135deg);
        transform-style: preserve-3d;
        position: absolute;
        z-index: 1; }
        .addui-slider .addui-slider-track .addui-slider-handle .addui-slider-value span {
          display: block;
          transform: rotate(135deg);
          width: 100%;
          height: 100%;
          text-align: center;
          line-height: 50px;
          position: absolute;
          z-index: 1; }
      .addui-slider .addui-slider-track .addui-slider-handle:hover {
        box-shadow: 0 0 5px rgba(221, 155, 48, 0.5); }/
        .addui-slider .addui-slider-track .addui-slider-handle:hover .addui-slider-value {
          background: rgba(221, 155, 48, 0.5);
          opacity: 1;
          transform: scale(1, 1) rotate(-135deg);
          margin-top: -60px;
          border-radius: 0 50% 50% 50%; }
/*      .addui-slider .addui-slider-track .addui-slider-handle.addui-slider-handle-active {
        background: rgba(221, 155, 48, 0.5);
        box-shadow: 0 0 5px rgba(221, 155, 48, 0.5); }
        .addui-slider .addui-slider-track .addui-slider-handle.addui-slider-handle-active .addui-slider-value {
          background: rgba(221, 155, 48, 0.75);
          opacity: 1;
          transform: scale(1, 1) rotate(-135deg);
          margin-top: -60px;
          border-radius: 0 50% 50% 50%; }*/
      .addui-slider .addui-slider-track .addui-slider-handle:after {
           display: block;
            content: " ";
            width: 17px;
            height: 18px;
            background: #a5a5a5;
            border-radius: 25px;
            position: relative;
            top: 12px;
            left: -12px;
             }
  .addui-slider.addui-slider-vertical {
    height: calc(100% - 50px);
    width: 50px;
    margin: 25px 16px; }
    .addui-slider.addui-slider-vertical .addui-slider-track {
      height: 100%;
      width: 4px;
      top: 0;
      left: 23px; }
      .addui-slider.addui-slider-vertical .addui-slider-track .addui-slider-range {
        width: 4px;
        height: auto; }
      .addui-slider.addui-slider-vertical .addui-slider-track .addui-slider-handle {
        left: -24px;
        top: auto;
        transform: translateY(50%); }
     
        .addui-slider.addui-slider-vertical .addui-slider-track .addui-slider-handle.addui-slider-handle-l {
          z-index: 2; }

  .addui-slider.addui-slider-horizontal {
    height: 65px;
    /*width: calc(100% - 50px);*/
    margin: 0 10px; }
    
    .addui-slider.addui-slider-horizontal .addui-slider-track {
      height: 4px;
      width: 100%;
      top: 32px;
      left: 0; }

      .addui-slider.addui-slider-horizontal .addui-slider-track .addui-slider-range {
        width: auto;
        height: 4px; }
      .addui-slider.addui-slider-horizontal .addui-slider-track .addui-slider-handle {
        left: auto;
        top: -19px;
        transform: translateX(-50%); }