/*  Primary Color */
.primary-bg {
  background: #e5554e;
}
.primary-bg-hover {
  background: #ec807a;
}
.primary-color {
  color: #e5554e;
}
.primary-color-hover {
  color: #ec807a;
}
.primary-border {
  border-color: #e5554e;
}
.primary-border-hover {
  border-color: #de2a22;
}
.primary-border-bottom {
  border-bottom-color: #e5554e;
}
.primary-border-left {
  border-left-color: #e5554e;
}
/*  Secondary Color */
.secondary-bg {
  background: slateblue;
}
.secondary-color {
  color: slateblue;
}
.secondary-border {
  border-color: slateblue;
}
/*  Tertiary Color */
.tertiary-bg {
  background: gold;
}
.tertiary-color {
  color: gold;
}
/* Radio Tabs */
.radio-tabs .checkable-element .checkable-item {
  border: 1px solid #D1D1D1;
  cursor: pointer;
  float: left;
  padding: 1rem 3rem;
  text-transform: uppercase;
  font-weight: normal;
}
.radio-tabs .checkable-element .checkable-item.active {
  background: gold;
  border-color: gold;
  color: #fff;
}
.radio-tabs .checkable-element .tab-label {
  float: left;
}
.radio-tabs .checkable-element .tab-label:first-of-type .checkable-item {
  border-radius: 5px 0 0 5px;
}
.radio-tabs .checkable-element .tab-label:last-of-type .checkable-item {
  border-radius: 0 5px 5px 0;
}
.radio-tabs .checkable-element .tab-label > input {
  /* HIDE RADIO */
  visibility: hidden;
  /* Makes input not-clickable */
  position: absolute;
  /* Remove input from document flow */
}
.radio-tabs .checkable-element .tab-label > input + .selected-element {
  /* IMAGE STYLES */
  cursor: pointer;
  border: 2px solid #D1D1D1;
}
.radio-tabs .checkable-element .tab-label > input + .selected-element img {
  border-bottom: 1px solid #D1D1D1;
}
.radio-tabs .checkable-element .tab-label > input:checked + .selected-element {
  /* (RADIO CHECKED) IMAGE STYLES */
  border: 2px solid;
  border-color: gold;
}
.radio-tabs .checkable-element.radio-pills .tab-label > input:checked + .checkable-item {
  /* (RADIO CHECKED) IMAGE STYLES */
  background: gold;
  color: #fff;
}
.radio-tabs .checkable-element .settings-label {
  display: inline-block;
  padding: 1rem;
}
.radio-tabs .checkable-element.colors .tab-label > input:checked + .checkable-item {
  box-shadow: 0px 0px 15px 0px #000;
  border: 0;
}
.radio-tabs .checkable-element.colors .checkable-item {
  font-weight: 500;
  font-size: 1.4rem;
}
.radio-tabs .checkable-element.colors .checkable-item.rounded {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  padding: 2rem;
  margin-right: 1rem;
}
/* Color Example */
.bg-red {
  background: crimson !important;
}
.bg-green {
  background: teal !important;
}
.bg-yellow {
  background: wheat !important;
}