/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
  font-family: "Flat-UI-Icons-16";
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }

/* Use the following CSS code if you want to have a class per icon */
/*Instead of a list of all class selectors,
 *you can use the generic selector below, but it's slower:
 *[class*="fui-"]:before { */
.fui-volume-16:before, .fui-video-16:before, .fui-time-16:before, .fui-settings-16:before, .fui-plus-16:before, .fui-new-16:before, .fui-menu-16:before, .fui-man-16:before, .fui-mail-16:before, .fui-lock-16:before, .fui-location-16:before, .fui-heart-16:before, .fui-eye-16:before, .fui-cross-16:before, .fui-cmd-16:before, .fui-checkround-16:before, .fui-checkmark-16:before, .fui-camera-16:before, .fui-calendar-16:before, .fui-bubble-16:before {
  font-family: "Flat-UI-Icons-16";
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased; }

.checkbox,
.radio {
  margin-bottom: 12px;
  padding-left: 15px;
  position: relative;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
  -webkit-backface-visibility: hidden; }
  .checkbox:hover,
  .radio:hover {
    color: #43b9e7; }
  .checkbox input,
  .radio input {
    outline: none !important;
    opacity: 0;
    filter: alpha(opacity=0);
    zoom: 1; }
  .checkbox.checked .icon,
  .radio.checked .icon {
    background-position: -60px -30px;
    opacity: 1;
    display: block\9; }
  .checkbox.checked .icon-to-fade,
  .radio.checked .icon-to-fade {
    opacity: 0;
    display: none\9; }
  .checkbox.disabled,
  .radio.disabled {
    color: #d7dddd;
    cursor: default; }
    .checkbox.disabled .icon,
    .radio.disabled .icon {
      opacity: 0;
      display: none\9; }
    .checkbox.disabled .icon-to-fade,
    .radio.disabled .icon-to-fade {
      background-position: -30px -60px;
      opacity: 1;
      display: block\9; }
    .checkbox.disabled.checked .icon,
    .radio.disabled.checked .icon {
      background-position: 0 -90px;
      opacity: 1;
      display: block\9; }
    .checkbox.disabled.checked .icon-to-fade,
    .radio.disabled.checked .icon-to-fade {
      opacity: 0;
      display: none\9; }
  .checkbox .icon,
  .checkbox .icon-to-fade,
  .radio .icon,
  .radio .icon-to-fade {
    background: url("../images/checkbox.png") -90px 0 no-repeat;
    display: block;
    height: 20px;
    left: 0;
    opacity: 1;
    position: absolute;
    top: -1px;
    width: 20px;
    -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
    -webkit-backface-visibility: hidden; }
  .checkbox .icon,
  .radio .icon {
    opacity: 0;
    top: 0;
    z-index: 2;
    display: none\9; }

.radio .icon,
.radio .icon-to-fade {
  background-image: url("../images/radio.png"); }