.widget-wrapper {
  position: relative;
  z-index: 1;
  display: inline-block;
}

.widget-wrapper > button {
  background: #fff url('../images/common/widget-sprites.png') right top no-repeat;
  border: 1px solid #d9d9d8;
  color: #575756;
  font-size: 12px;
  line-height: 20px;
  padding: 0 47px 0 10px;
  white-space: nowrap;
  text-align: left;
  height:28px;
}

.widget-wrapper > button:active,
.widget-wrapper > button:focus { outline: 2px solid #6B727F; }

.widget-dropdown-list {
  display: none;
  position: absolute;
  margin-top: -1px;
  left: 0;
  background-color: #fff;
  border: 1px solid #868686;
  overflow-x: hidden;
  overflow-y: auto;
}

.widget-dropdown-list > li {
  color: #575756;
  cursor: default;
  display: block;
  font-size: 12px;
  padding: 5px 20px 5px 5px;
  white-space: nowrap;
}

.widget-dropdown-list > li:hover,
.widget-dropdown-list > li:active,
.widget-dropdown-list > li:focus,
.widget-checkbox-list li:hover label,
.widget-checkbox-list li:active label,
.widget-checkbox-list li:focus label,
.widget-checkbox-list li.on label,
.widget-dropdown-list > li.on{
  background-color: #6B727F;
  color: #fff;
  outline: none;
}

.widget-checkbox-list .header {
  background-color: #fff !important;
  color: #414141 !important;
  pointer-events: none;
}

.widget-checkbox-list label {
  font-weight: normal;
  color: #414141;
  margin: 0;
}

.widget-checkbox-list input[type="checkbox"] {
  margin-right: 5px;
  vertical-align: text-bottom;
}

.widget-on { z-index: 2 }

.widget-on .widget-dropdown-list { display: block }

.widget-on button {
   outline: 2px solid #6B727F;
   background-position: right -20px 
}

/* Form style widgets */
.form-widget > button {
  font-size: 14px;
  line-height: 23px;
  background-position: right -20px;
  padding: 0 39px 0 10px;
}

.form-widget .widget-dropdown-list { max-height: 272px }

.form-widget .widget-dropdown-list > li {
  font-size: 14px;
  padding: 10px 30px 10px 10px;
}

.form-widget.widget-on button { 
    background-position: right -72px; 
    border: none;
}

/* disabled state selectors */
.widget-disabled {
 z-index: 1 background-color: #fff !important;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  zoom: 1;
  pointer-events: none;
  cursor: default;
}

.widget-disabled > button { outline: none !important }

.widget-disabled > button { background-color: transparent !important; }

.widget-disabled .widget-dropdown-list { display: none !important; }

.error[role="combobox"] { border-color:#f00 }

/* selectors below are for javascript use */
.widget-common-list {
  position: absolute;
  display: none;
  z-index: 10;
}

.widget-common-list .widget-dropdown-list { 
  display: block
}

.widget-common-list.widget-on { display: block }