/*TRISTATE CHECKBOX STYLES*/
fieldset.tristate {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  cursor: pointer;
  min-width: 4.2rem;
  height: 1.4rem;
  margin: 0px;
  padding: 0px;
  border: none;
  outline: none;
  /*Ensure no blue highlight is added*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*Check states*/
  /*Show/Hide Label states*/
  /*Disabled States*/ }
  fieldset.tristate input[type=checkbox] {
    opacity: 0;
    cursor: pointer; }
  fieldset.tristate div.tristate-bar {
    position: absolute;
    width: 3.5rem;
    height: .7rem;
    top: 50%;
    left: .3rem;
    margin-top: -.4rem;
    border: 0.05rem solid #BFBFBF;
    background-color: #fdfdfd; }
  fieldset.tristate .txt {
    display: inline-block;
    margin-left: 3rem; }
  fieldset.tristate .txt span {
    display: block;
    white-space: nowrap;
    display: none; }
  fieldset.tristate input[state='check'] + label {
    animation: slide-check .1s;
    left: 0rem;
    background-image: url("../../Scripts/Icons/SVG/check_FFFFFF.svg");
    background-color: #1d82b9; }
  fieldset.tristate input[state='indeterminate'] + label {
    animation: slide-indeterminate .1s;
    left: 1.4rem;
    background-color: #fdfdfd; }
  fieldset.tristate input[state='cross'] + label {
    animation: slide-cross .1s;
    left: 2.8rem;
    background-image: url("../../Scripts/Icons/SVG/times_FFFFFF.svg");
    background-color: #DE3716; }
  fieldset.tristate label.tristate {
    position: absolute;
    height: 1.3rem;
    width: 1.3rem;
    border: 0.05rem solid #BFBFBF;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: .8rem;
    left: 1.4rem;
    background-color: #fdfdfd; }
  fieldset.tristate:active label.tristate, fieldset.tristate:active div.tristate-bar {
    opacity: 0.9; }
  fieldset.tristate:focus:not(:disabled) label.tristate, fieldset.tristate:focus:not(:disabled) div.tristate-bar, fieldset.tristate:hover:not(:disabled) label.tristate, fieldset.tristate:hover:not(:disabled) div.tristate-bar {
    border-color: #1d82b9; }
  fieldset.tristate input[state='check'] + label + div.txt .txt1,
  fieldset.tristate input[state='indeterminate'] + label + div.txt .txt2,
  fieldset.tristate input[state='cross'] + label + div.txt .txt3 {
    display: block; }
  fieldset.tristate input:disabled + label,
  fieldset.tristate input[state='check']:disabled + label,
  fieldset.tristate input[state='indeterminate']:disabled + label,
  fieldset.tristate input[state='cross']:disabled + label {
    background-color: #eeeeee; }
  fieldset.tristate:disabled, fieldset.tristate:disabled label.tristate {
    cursor: not-allowed; }

fieldset.tristate.error div.tristate-bar,
fieldset.tristate.error label.tristate {
  border-color: #DE3716; }

/*Key Frames*/
@keyframes slide-indeterminate {
  from {
    left: 0rem; }
  to {
    left: 1.4rem; } }

@keyframes slide-cross {
  from {
    left: 1.4rem; }
  to {
    left: 2.8rem; } }

@keyframes slide-check {
  from {
    left: 2.8rem; }
  to {
    left: 0rem; } }