label.custom-checkbox > span { display: block; margin-top: -13px; margin-right: 10px; } label.custom-checkbox { padding-right: 0; padding-left: 0; margin-bottom: 0; & > input { height: 0; z-index: -100 !important; opacity: 0; position: absolute; &:checked { & + span { &:before { content: "\f00c"; font-weight: $font-light; } } } &:disabled { & + span { color: $disabled; cursor: not-allowed; &:before { border-color: $disabled !important; cursor: not-allowed; } } } } & > span { position: relative; display: inline-block; margin: 0; line-height: 16px; font-weight: $font-light; cursor: pointer; padding-left: 22px; width: 100%; &:before { cursor: pointer; font-family: fontAwesome; font-weight: $font-light; font-size: 12px; color: $content-text; content: "\a0"; background-color: transparent; border: 1px solid $border; border-radius: 0; display: inline-block; text-align: center; height: 16px; line-height: 14px; min-width: 16px; margin-right: 6px; position: relative; top: 0; margin-left: -22px; float: left; } &:hover { &:before { border-color: $primary-bg; } } } } .form-horizontal { .checkbox, .checkbox-inline{ padding-top: 0; } }