/*CSS ALL*/
.checkbox,
.radio {
  display: inline-block;
  margin-bottom: 15px; }
  .checkbox:hover,
  .radio:hover {
    cursor: pointer; }

.indent {
  padding-left: 30px; }
  .indent .icon-checkbox,
  .indent .icon-radio {
    margin-left: -30px; }

.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  display: none; }

.icon-checkbox,
.icon-radio {
  height: 20px;
  width: 20px;
  margin-right: 5px;
  display: inline-block;
  border: 1px solid #ddd;
  position: relative;
  bottom: -3px; }

.checkbox:hover .icon-checkbox,
.radio:hover .icon-radio {
  border-color: green; }

.checkbox input[type="checkbox"]:checked + i:after,
.radio input[type="radio"]:checked + i:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  height: 8px;
  width: 8px;
  background: green; }

.checkbox input[type="checkbox"]:disabled + i,
.radio input[type="radio"]:disabled + i {
  border-color: #eee; }

.checkbox input[type="checkbox"]:disabled:checked + i:after,
.radio input[type="radio"]:disabled:checked + i:after {
  background-color: #999; }

/*Radio CSS*/
.radio input[type="radio"] + i {
  border-radius: 50%; }

.radio input[type="radio"]:checked + .icon-radio:after {
  border-radius: 50%; }

.disabled:hover {
  cursor: not-allowed; }

.checkbox-xs .icon-checkbox,
.checkbox-xs .icon-radio,
.radio-xs .icon-checkbox,
.radio-xs .icon-radio {
  height: 14px;
  width: 14px; }

.checkbox-xs.indent,
.radio-xs.indent {
  padding-left: 25px; }
  .checkbox-xs.indent .icon-checkbox,
  .checkbox-xs.indent .icon-radio,
  .radio-xs.indent .icon-checkbox,
  .radio-xs.indent .icon-radio {
    margin-left: -25px; }

.checkbox-xs input[type="checkbox"]:checked + i:after,
.checkbox-xs input[type="radio"]:checked + i:after,
.radio-xs input[type="checkbox"]:checked + i:after,
.radio-xs input[type="radio"]:checked + i:after {
  top: 4px;
  left: 4px;
  height: 6px;
  width: 6px; }