/**
 * @component: Form Element Checkboxgroup
 * @about: Basic layout of a checkbox group
 */

.fe-checkboxgroup {
	margin: 0;
	padding: 0;
	list-style: none;
	zoom: 1; /* hasLayOut for IE */
}

.fe-checkboxgroup li {
	float: left;
	width: 100%;
	margin-bottom: .1em;
	line-height: 1;
}

.fe-checkboxgroup input {
	display: block;
	float: left;
    margin-top: 0.05em;
	padding: 0;
	vertical-align: top;
}

.fe-checkboxgroup label {
    display: inline-block;
    max-width: calc(100% - 2.4em);
	padding-left: .4em;
	font-weight: normal;
	line-height: 1.2;
    hyphens: auto;
    word-break: break-word;
}

.fe-checkboxgroup label .icon {
	opacity: .7;
	height: 1em;
	margin-right: .1em;
}

.fecg-select-all + label {
	font-style: italic;
	opacity: .8;
}

.fe-checkboxgroup .other label {
    display: inline;
}

/** Groups with columns */
.fe-checkboxgroup-has-columns li {
	float: left;
}

.fe-checkboxgroup-columns-2 li {
	width: 49%;
}

.fe-checkboxgroup-columns-2 li:nth-child(2n+3) {
	clear: left;
}

.fe-checkboxgroup-columns-3 li {
	width: 33%;
}

.fe-checkboxgroup-columns-3 li:nth-child(3n+4) {
	clear: left;
}

.fe-checkboxgroup-columns-4 li {
	width: 24.5%;
}

.fe-checkboxgroup-columns-4 li:nth-child(4n+5) {
	clear: left;
}

.fe-checkboxgroup-columns-5 li {
	width: 19.5%;
}

.fe-checkboxgroup-columns-5 li:nth-child(5n+6) {
	clear: left;
}

.fe-checkboxgroup-columns-6 li {
    width: 16.5%;
}

.fe-checkboxgroup-columns-6 li:nth-child(6n+7) {
    clear: left;
}

.fe-checkboxgroup-columns-7 li {
    width: 14%;
}

.fe-checkboxgroup-columns-7 li:nth-child(7n+8) {
    clear: left;
}

/**
 * First item is 'Select all'
 */

[class*='fe-checkboxgroup-columns'] .fecg-selectAll__wrapper {
    display: block;
    width: 100%;
    margin-bottom: 1em;
}

.fe-checkboxgroup-columns-2 .fecg-selectAll__wrapper ~ li:nth-child(2n+3),
.fe-checkboxgroup-columns-3 .fecg-selectAll__wrapper ~ li:nth-child(3n+4),
.fe-checkboxgroup-columns-4 .fecg-selectAll__wrapper ~ li:nth-child(4n+5),
.fe-checkboxgroup-columns-5 .fecg-selectAll__wrapper ~ li:nth-child(5n+6) {
    clear: none;
}

.fe-checkboxgroup-columns-2 .fecg-selectAll__wrapper ~ li:nth-child(2n+4),
.fe-checkboxgroup-columns-3 .fecg-selectAll__wrapper ~ li:nth-child(3n+5),
.fe-checkboxgroup-columns-4 .fecg-selectAll__wrapper ~ li:nth-child(4n+6),
.fe-checkboxgroup-columns-5 .fecg-selectAll__wrapper ~ li:nth-child(5n+7) {
    clear: left;
}

.view .fe-checkboxgroup li {
    margin-bottom: 0.6em;
    line-height: inherit;
}