.groupTitle
{
    margin: 0 0 4px 4px;
}

.h30
{
    height: 30px;
    line-height: 30px;
}

.p0
{
    padding: 0;
}

.p-r-8
{
    padding-right: 8px;
}

.p-t-16
{
    padding-top: 16px;
}

.m0
{
    margin: 0;
}

.m0-i
{
    margin: 0 !important;
}

.lh30
{
    line-height: 30px;
}

.vAlign
{
    align-items: center;
}

.flex
{
    display: flex;
}

.inputWrapper
{
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.colorSwatch
{
    height: 30px;
    width: 33px;
    margin-right: 16px;
    border-radius: 3px;
    border: 1px solid #ccd0d2;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  background: #b4b4b4;
  border-radius: 0px;
  border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 1px solid #f0f0f0;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: #b4b4b4;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #b9b9b9;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  background: #b4b4b4;
  border-radius: 0px;
  border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 1px solid #f0f0f0;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: #b4b4b4;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #afafaf;
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
  background: #b4b4b4;
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 1px solid #f0f0f0;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  background: #b4b4b4;
  cursor: pointer;
  height: 3px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #b4b4b4;
}
input[type=range]:focus::-ms-fill-upper {
  background: #b9b9b9;
}