// Collateral cards

$collateral-blue: #228888;
$collateral-green: #559955;
$collateral-lemon: #779922;
$collateral-yellow: #CC9922;
$collateral-orange: #bb6611;
$collateral-red: #AA3311;
$collateral-mblue: #477DB3;

.collateral-blue span, .collateral-blue i{
  color: $collateral-blue;
}
.collateral-blue-before{
  &:before{
    background-color: $collateral-blue;
  }
}
.collateral-blue-bg {
  background-color: $collateral-blue !important;
  color: #fff;
}

.collateral-blue-input {
  &:checked {
    & + b:before {
      background-color: $collateral-blue !important;
    }
  }
}

.collateral-green span, .collateral-green i{
  color: $collateral-green;
}
.collateral-green-before{
  &:before{
    background-color: $collateral-green;
  }
}
.collateral-green-bg {
  background-color: $collateral-green !important;
  color: #fff;
}
.collateral-green-input {
  &:checked {
    & + b:before {
      background-color: $collateral-green !important;
    }
  }
}


.collateral-lemon span, .collateral-lemon i{
  color: $collateral-lemon;
}
.collateral-lemon-before{
  &:before{
    background-color: $collateral-lemon;
  }
}
.collateral-lemon-bg {
  background-color: $collateral-lemon !important;
  color: #fff;
}
.collateral-lemon-input {
  &:checked {
    & + b:before {
      background-color: $collateral-lemon !important;
    }
  }
}

.collateral-yellow span, .collateral-yellow i{
  color: $collateral-yellow;
}
.collateral-yellow-before{
  &:before{
    background-color: $collateral-yellow;
  }
}
.collateral-yellow-bg {
  background-color: $collateral-yellow !important;
  color: #fff;
}

.collateral-yellow-input {
  &:checked {
    & + b:before {
      background-color: $collateral-yellow !important;
    }
  }
}

.collateral-orange span, .collateral-orange i{
  color: $collateral-orange;
}
.collateral-orange-before{
  &:before{
    background-color: $collateral-orange;
  }
}
.collateral-orange-bg {
  background-color: $collateral-orange !important;
  color: #fff;
}

.collateral-orange-input {
  &:checked {
    & + b:before {
      background-color: $collateral-orange !important;
    }
  }
}

.collateral-red span, .collateral-red i{
  color: $collateral-red;
}
.collateral-red-before{
  &:before{
    background-color: $collateral-red;
  }
}
.collateral-red-bg {
  background-color: $collateral-red !important;
  color: #fff;
}

.collateral-red-input {
  &:checked {
    & + b:before {
      background-color: $collateral-red !important;
    }
  }
}

.collateral-dblue span, .collateral-dblue i{
  color: $d-light-blue;
}
.collateral-dblue-before{
  &:before{
    background-color: $d-light-blue;
  }
}
.collateral-dblue-bg {
  background-color: $d-light-blue !important;
  color: #fff;
}

.collateral-dblue-input {
  &:checked {
    & + b:before {
      background-color: $d-light-blue !important;
    }
  }
}

.collateral-mblue span, .collateral-mblue i, .collateral-mmblue span, .collateral-mmblue i{
  color: $collateral-mblue;
}
.collateral-mblue-before, .collateral-mmblue-before{
  &:before{
    background-color: $collateral-mblue;
  }
}
.collateral-mblue-bg, .collateral-mmblue-bg {
  background-color: $collateral-mblue !important;
  color: #fff;
}

.collateral-mblue-input, .collateral-mmblue-input {
  &:checked {
    & + b:before {
      background-color: $collateral-mblue !important;
    }
  }
}