.color-box {
  width: 20px;
  height: 40px;
  border-radius: 4px;
}

.btn.btn-direction {
  width: 174px;
}

.btn-pill-left, .btn-pill-right {
  width: 120px;
}

.text-active, .active > .text, .active > .auto .text {
  display: none !important;
}

.active > .text-active, .active > .auto .text-active {
  display: inline-block !important;
}

.active .icon {
  line-height: 1;
}

.example-primary-hover {
  background-color: #5c6bc0;
  border-color: #5c6bc0;
}

.example-default-hover {
  background-color: #eee;
  border-color: #eee;
}

@media (max-width: 767px) {
  .btn-group-justified .btn {
    min-height: 50px;
  }
}