// ----------------------------------------------------------------------------
// Widget styles
// ----------------------------------------------------------------------------
.widget-stdimmer {

  background-color: #444!important;
  position: relative;
  line-height: 100%;

  .title {
    color: #fff;
    margin: 14px 0 20px;
  }

  .switch-icon-off .switch-icon-on {
    font-size: 150%;
  }

  .switch-icon-off {
    color: #888888;
  }

  .switch-icon-on {
    color: #aaff00;
  }

  .toggle-area {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110px;
  }

  #slider {
    margin-top: 5px;

    #dimmer {
      -webkit-appearance: none;
      background: #888888;
      height: 8px;
    }

    #dimmer::-webkit-slider-thumb {
      -webkit-appearance: none;
      z-index: 1;
      background: #888888;
      border: 1px solid #444;
      width: 11px;
      height: 24px;
      cursor: pointer;
    }

    #level {
      display: inline-block;
      position: absolute;
      top: 95px;
      right: 25px;
      font-weight: 600;
      color: #888888;
    }

    .unit {
      display: inline-block;
      position: absolute;
      top: 95px;
      right: 13px;
      font-size: 10px;
      color: #888888;
    }
  }
}
