@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 */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="fui-"] {
*/
.fui-arrow-right,
.fui-arrow-left,
.fui-cmd,
.fui-check-inverted,
.fui-heart,
.fui-location,
.fui-plus,
.fui-check,
.fui-cross,
.fui-list,
.fui-new,
.fui-video,
.fui-photo,
.fui-volume,
.fui-time,
.fui-eye,
.fui-chat,
.fui-search,
.fui-user,
.fui-mail,
.fui-lock,
.fui-gear,
.fui-radio-unchecked,
.fui-radio-checked,
.fui-checkbox-unchecked,
.fui-checkbox-checked,
.fui-calendar-solid,
.fui-pause,
.fui-play,
.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-heart:before {
  content: "\e007";
}
.fui-location:before {
  content: "\e008";
}
.fui-plus:before {
  content: "\e009";
}
.fui-check:before {
  content: "\e00a";
}
.fui-cross:before {
  content: "\e00b";
}
.fui-list:before {
  content: "\e00c";
}
.fui-new:before {
  content: "\e00d";
}
.fui-video:before {
  content: "\e00e";
}
.fui-photo:before {
  content: "\e00f";
}
.fui-volume:before {
  content: "\e010";
}
.fui-time:before {
  content: "\e011";
}
.fui-eye:before {
  content: "\e012";
}
.fui-chat:before {
  content: "\e013";
}
.fui-search:before {
  content: "\e01c";
}
.fui-user:before {
  content: "\e01d";
}
.fui-mail:before {
  content: "\e01e";
}
.fui-lock:before {
  content: "\e01f";
}
.fui-gear:before {
  content: "\e024";
}
.fui-radio-unchecked:before {
  content: "\e02b";
}
.fui-radio-checked:before {
  content: "\e032";
}
.fui-checkbox-unchecked:before {
  content: "\e033";
}
.fui-checkbox-checked:before {
  content: "\e034";
}
.fui-calendar-solid:before {
  content: "\e022";
}
.fui-pause:before {
  content: "\e03b";
}
.fui-play:before {
  content: "\e03c";
}
.fui-check-inverted-2:before {
  content: "\e000";
}

/* radio buttons*/

.radio {
  margin-bottom: 12px;
  padding-left: 24px;
  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;
}
.radio input {
  outline: none !important;
  display: none;
}
.radio .icons {
  color: #ddd;
  display: block;
  height: 16px;
  left: 0;
  position: absolute;
  top: 2px;
  width: 16px;
  text-align: center;
  line-height: 16px;
  font-size: 16px;
  -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;
}

.radio .icons .first-icon-icon,
.radio .icons .second-icon {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  filter: alpha(opacity=100);
}

.radio .icons .second-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.radio:hover .first-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.radio:hover .second-icon {
  opacity: 1;
  filter: alpha(opacity=100);
  color: #cfe2e5;
}
.radio.checked:hover .second-icon {
  color: #E74C3C;
}
.radio.checked {
  color: #E74C3C;
}
.radio.checked .icons {
  color: #E74C3C;
}
.radio.checked .first-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.radio.checked .second-icon {
  opacity: 1;
  filter: alpha(opacity=100);
}
.radio.disabled {
  cursor: default;
  color: #e6e8ea;
}
.radio.disabled .icons {
  color: #e6e8ea;
}
.radio.disabled .first-icon {
  opacity: 1;
  filter: alpha(opacity=100);
}
.radio.disabled .second-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.radio.disabled.checked .icons {
  color: #e6e8ea;
}
.radio.disabled.checked .first-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.radio.disabled.checked .second-icon {
  opacity: 1;
  filter: alpha(opacity=100);
}

.control-group {
  position: relative;
}

textarea[class*="span"] {
  width: 100% !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.checkbox {
  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 {
  outline: none !important;
  display: none;
}
.checkbox .icons {
  color: #dbe1e2;
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  top: 0;
  width: 20px;
  text-align: center;
  line-height: 16px;
  font-size: 16px;
  -webkit-transition: color 0.1s linear;
  -moz-transition: color 0.1s linear;
  -o-transition: color 0.1s linear;
  transition: color 0.1s linear;
  -webkit-backface-visibility: hidden;
}
.checkbox .icons .first-icon-icon,
.checkbox .icons .second-icon {
  position: absolute;
  left: 2px;
  top: 1px;
  opacity: 1;
  filter: alpha(opacity=100);
}
.checkbox .icons .second-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.checkbox:hover .first-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.checkbox:hover .second-icon {
  opacity: 1;
  filter: alpha(opacity=100);
}
.checkbox.checked  {
  color: #218fad;
}
.checkbox.checked .icons {
  color: #218fad;
}
.checkbox.checked .first-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.checkbox.checked .second-icon {
  opacity: 1;
  filter: alpha(opacity=100);
}
.checkbox.disabled {
  cursor: default;
  color: #e6e8ea;
}
.checkbox.disabled .icons {
  color: #e6e8ea;
}
.checkbox.disabled .first-icon {
  opacity: 1;
  filter: alpha(opacity=100);
}
.checkbox.disabled .second-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.checkbox.disabled.checked .icons {
  color: #e6e8ea;
}
.checkbox.disabled.checked .first-icon {
  opacity: 0;
  filter: alpha(opacity=0);
}
.checkbox.disabled.checked .second-icon {
  opacity: 1;
  filter: alpha(opacity=100);
}

/* ============================================================
 * bootstrapSwitch v1.8 by Larentis Mattia @SpiritualGuru
 * http://www.larentis.eu/
 *
 * Customized for SoKind; smaller size, different colors
 *
 * Project site:
 * http://www.larentis.eu/switch/
 * ============================================================
 * Licensed under the Apache License, Version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 * ============================================================ */
.has-switch {
  border-radius: 18px;
  display: inline-block;
  cursor: pointer;
  line-height: 1.231;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 80px;
  -webkit-mask: url('../images/custom/switch-mask.png') 0 0 no-repeat;
  mask: url('../images/custom/switch-mask.png') 0 0 no-repeat;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  height: 18px;
}
.has-switch.deactivate {
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: default !important;
}
.has-switch.deactivate label,
.has-switch.deactivate span {
  cursor: default !important;
}
.has-switch > div {
  width: 182%;
  position: relative;
  top: 0;
}
.has-switch > div.switch-animate {
  -webkit-transition: left 0.25s ease-out;
  -moz-transition: left 0.25s ease-out;
  -o-transition: left 0.25s ease-out;
  transition: left 0.25s ease-out;
  -webkit-backface-visibility: hidden;
}
.has-switch > div.switch-off {
  left: -73%;
}
.has-switch > div.switch-off label {
  background-color: #d2d1cd;
  border-color: #b3b1ac;
  -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);
  -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);
}
.has-switch > div.switch-on {
  left: 0%;
}
.has-switch > div.switch-on label {
  background-color: #c0d472;
}
.has-switch input[type=checkbox] {
  display: none;
}
.has-switch span {
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  float: left;
  height: 18px;
  line-height: 8px;
  margin: 0;
  padding-bottom: 6px;
  padding-top: 5px;
  position: relative;
  text-align: left;
  width: 50%;
  z-index: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: 0.25s ease-out;
  -moz-transition: 0.25s ease-out;
  -o-transition: 0.25s ease-out;
  transition: 0.25s ease-out;
  -webkit-backface-visibility: hidden;
}
.has-switch span.switch-left {
  border-radius: 9px 0 0 9px;
  background-color: #9aae45;
  color: #ffffff;
  border-left: 1px solid transparent;
  text-indent: 12px;
}
.has-switch span.switch-right {
  border-radius: 0 9px 9px 0;
  background-color: #b3b1ac;
  color: #ffffff;
  text-indent: 8px;
}
.has-switch span.switch-right [class*="fui-"] {
  text-indent: 0;
}
.has-switch label {
  border: 5px solid #9aae45;
  border-radius: 50%;
  float: left;
  height: 10px;
  width: 10px;
  margin: -1px -15px 0 -14px;
  padding: 0;
  position: relative;
  vertical-align: middle;
  z-index: 100;
  -webkit-transition: 0.25s ease-out;
  -moz-transition: 0.25s ease-out;
  -o-transition: 0.25s ease-out;
  transition: 0.25s ease-out;
  -webkit-backface-visibility: hidden;
}