.styled-radio div { clear: both; overflow: hidden; } @media screen and (max-width: 768px){ .change-to-sm-font { font-size:0.8em !important; } } .styled-radio label { width: 160px; border-radius: 3px; border: 1px solid #D1D3D4; font-weight: normal; } .styled-radio input[type="radio"]:empty, .styled-radio input[type="checkbox"]:empty { display: none; } .styled-radio input[type="radio"]:empty ~ label, .styled-radio input[type="checkbox"]:empty ~ label { position: relative; line-height: 2.5em; text-indent: 3.25em; margin-top: 0.5em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .styled-radio input[type="radio"]:empty ~ label:before, .styled-radio input[type="checkbox"]:empty ~ label:before { position: absolute; display: block; top: 0; bottom: 0; left: 0; content: ''; width: 2.5em; background: #D1D3D4; border-radius: 3px 0 0 3px; } .styled-radio input[type="radio"]:hover:not(:checked) ~ label, .styled-radio input[type="checkbox"]:hover:not(:checked) ~ label { color: #888; } .styled-radio input[type="radio"]:hover:not(:checked) ~ label:before, .styled-radio input[type="checkbox"]:hover:not(:checked) ~ label:before { content: '✔'; text-indent: .9em; color: #C2C2C2; } .styled-radio input[type="radio"]:checked ~ label, .styled-radio input[type="checkbox"]:checked ~ label { color: #777; } .styled-radio input[type="radio"]:checked ~ label:before, .styled-radio input[type="checkbox"]:checked ~ label:before { content: '✔'; text-indent: .9em; color: #333; background-color: #ccc; } .styled-radio input[type="radio"]:focus ~ label:before, .styled-radio input[type="checkbox"]:focus ~ label:before { box-shadow: 0 0 0 3px #999; } .styled-radio-default input[type="radio"]:checked ~ label:before, .styled-radio-default input[type="checkbox"]:checked ~ label:before { color: #333; background-color: #ccc; } .styled-radio-primary input[type="radio"]:checked ~ label:before, .styled-radio-primary input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #337ab7; } .styled-radio-success input[type="radio"]:checked ~ label:before, .styled-radio-success input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #5cb85c; } .styled-radio-danger input[type="radio"]:checked ~ label:before, .styled-radio-danger input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #d9534f; } .styled-radio-warning input[type="radio"]:checked ~ label:before, .styled-radio-warning input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #f0ad4e; } .styled-radio-info input[type="radio"]:checked ~ label:before, .styled-radio-info input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #5bc0de; } .sub-card-border-left { border-left: 1px solid #ccc; } @media screen and (max-width: 768px){ .sub-card-border-left { border-left: 0; } }