/**
 * @component: Form Element Checkboxgroup
 */

.fe-checkboxgroup {
    margin: .6em 0 0;
    padding: 0;
    list-style: none;
}

.fe-checkboxgroup input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

/**
 * Normal list
 */

.fe-checkboxgroup li {
    width: 100%;
}

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

/** Groups with columns */
.fe-checkboxgroup-has-columns {
    list-style-position: inside;
}

.fe-checkboxgroup-has-columns {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.fe-checkboxgroup-columns-2 li {
    flex: 1 50%;
}

.fe-checkboxgroup-columns-3 {
    flex: 1 33%;
}

.fe-checkboxgroup-columns-4 {
    flex: 1 25%;
}

.fe-checkboxgroup-columns-5 {
    flex: 1 20%;
}

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

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

/** Correction for labels that are descendant of a FormContainer */
td.first .fe-checkboxgroup label {
    margin-left: 1em;
}


/**
 * Tile layout of a checkbox group
 * .checkboxListTiled is a ProDesign setting
 */

.checkboxListTiled label.field {
    font-size: 1.1em;
}

.checkboxListTiled .fe-checkboxgroup {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.checkboxListTiled .fe-checkboxgroup li {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    padding-left: 0;
}

.checkboxListTiled .fe-checkboxgroup label {
    position: relative;
    display: block;
    margin: .5rem .5rem 0 0;
    padding: .375rem .625rem .375rem 1.625rem;
    border: 1px solid #abc08c;
    border-radius: 3px;
    white-space: nowrap;
    color: rgba(0,0,0,.6);
    background: rgba(255,255,255,.2);
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    cursor: pointer;
}

.checkboxListTiled .fe-checkboxgroup label:hover {
    color: #333 !important;
}

.checkboxListTiled .fe-checkboxgroup input[type='checkbox']:focus + label::before{
    box-shadow: none;
}

.checkboxListTiled .fe-checkboxgroup label::before {
    position: absolute;
    top: .55rem;
    left: .5rem;
    content: '\25ef';
    font-family: 'icons';
    color: #abc08c;
    background: none;
    font-size: .8rem;
    border: 0;
}

.checkboxListTiled .fe-checkboxgroup label::after {
    display: none;
}

.checkboxListTiled .fe-checkboxgroup input[type='checkbox']:checked+label::before {
    content: '\25cf';
    border: 0;
}

.body--formblue.checkboxListTiled .fe-checkboxgroup label,
.body--formblue.checkboxListTiled .fe-checkboxgroup label::before {
    color: #376b9f;
    border-color: #82abd4;
}

.checkboxListTiled .fe-checkboxgroup input[type='checkbox']:checked+label {
    color: #333;
    background: #fff;
}