/** moderation **/ .mod_sf_moderate { h1 { width: 80%; } h2.sub_headline { margin: 3px 15px; } #tl_buttons { float: right; } } .be_sf_morderation_list { .list { display: flex; flex-wrap: wrap; } .list-item { box-sizing: border-box; flex: 0 0 auto; padding: 1em; margin: 0.5em; width: calc(33.3% - 1em); border: 1px solid #ccc; position: relative; .list-content { background-color: #fff; width: 100%; } .list-content p { margin-top: 10px; } .checkbox-container { display: block; position: absolute; right: 0; top: 10px; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; &:after { content: ""; position: absolute; display: none; left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } } &:hover input ~ .checkmark { background-color: #ccc; } input:checked ~ .checkmark { background-color: #2196F3; &:after { display: block; } } } } .tl_formbody_submit { position: relative; .tl_submit_container { position: fixed; bottom: 0; width: 100%; } } } @media all and (min-width: 40em) { .be_sf_morderation_list .list-item { wi2dth: 50%; } } @media all and (min-width: 60em) { .be_sf_morderation_list .list-item { wi2dth: 33.33%; } }