@import url("https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,400italic,300");
@font-face {
  font-family: 'Flat-UI-Icons';
  src: url('../fonts/Flat-UI-Icons.eot');
  src: url('../fonts/Flat-UI-Icons.eot?#iefix') format('embedded-opentype'), url('../fonts/Flat-UI-Icons.woff') format('woff'), url('../fonts/Flat-UI-Icons.ttf') format('truetype'), url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
  font-family: 'Flat-UI-Icons';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
/* Use the following CSS code if you want to have a class per icon */

.fui-check,
.fui-checkbox-unchecked,
.fui-checkbox-checked,
.fui-check-inverted-2 {
  display: inline-block;
  font-family: 'Flat-UI-Icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
/*.fui-arrow-right:before {
  content: "\e02c";
}
.fui-arrow-left:before {
  content: "\e02d";
}
*/.fui-cmd:before {
  content: "\e02f";
}
.fui-check-inverted:before {
  content: "\e006";
}

.fui-checkbox-unchecked:before {
  content: "\e033";
}
.fui-checkbox-checked:before {
  content: "\e034";
}
.fui-check-inverted-2:before {
  content: "\e000";
}

.checkbox,
.radio {
  margin-bottom: 12px;
  padding-left: 32px;
  position: relative;
  -webkit-transition: color 0.25s linear;
  -moz-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
  -webkit-backface-visibility: hidden;
}
.checkbox input,
.radio input {
  outline: none !important;
  display: none;
}
.checkbox .icons,
.radio .icons {
  color: #bdc3c7;
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  top: 0;
  width: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 20px;
  -webkit-transition: color 0.25s linear;
  -moz-transition: color 0.25s linear;
  -o-transition: color 0.25s linear;
  transition: color 0.25s linear;
  -webkit-backface-visibility: hidden;
}
.checkbox .icons .first-icon,
.radio .icons .first-icon,
.checkbox .icons .second-icon,
.radio .icons .second-icon {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
}
.checkbox .icons .second-icon,
.radio .icons .second-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.checkbox:hover .first-icon,
.radio:hover .first-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.checkbox:hover .second-icon,
.radio:hover .second-icon {
  opacity: 1;
  filter: alpha(opacity=100);
}
.checkbox.checked,
.radio.checked {
  color: red;
}
.checkbox.checked .icons,
.radio.checked .icons {
  color: red;
}
.checkbox.checked .first-icon,
.radio.checked .first-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.checkbox.checked .second-icon,
.radio.checked .second-icon {
  opacity: 1;
  filter: alpha(opacity=100);
}
.checkbox.disabled,
.radio.disabled {
  cursor: default;
  color: #e6e8ea;
}
.checkbox.disabled .icons,
.radio.disabled .icons {
  color: #e6e8ea;
}
.checkbox.disabled .first-icon,
.radio.disabled .first-icon {
  opacity: 1;
  filter: alpha(opacity=100);
}
.checkbox.disabled .second-icon,
.radio.disabled .second-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.checkbox.disabled.checked .icons,
.radio.disabled.checked .icons {
  color: #e6e8ea;
}
.checkbox.disabled.checked .first-icon,
.radio.disabled.checked .first-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.checkbox.disabled.checked .second-icon,
.radio.disabled.checked .second-icon {
  opacity: 1;
  filter: alpha(opacity=100);
}