.BiState input {
  display: none;
}

.BiState {
  display: flex;
}

.BiState .TrueSelector,
.BiState .FalseSelector {
  display: inline-flex;
}

.BiState .TrueSelector .Icon,
.BiState .FalseSelector .Icon {
  opacity: 0.3;
}

.BiState.False .FalseSelector .Icon,
.BiState.True .TrueSelector .Icon {
  opacity: 1;
}

.BiState[data--mode=edit] .Caption {
  display: inline-flex;
  padding-left: 5px;
  padding-right: 20px;
  line-height: 2em;
}

.BiState .Icon {
  display: inline-block;
  width: 2em;
  height: 2em;
  text-align: center;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 1.5em;
  background-position: center;
}

.Suggest .Values > .Value .BiState,
.Suggest .Values > .Value .BiState > *,
.Suggest .Values > .Value .BiState > div > * {
  vertical-align: bottom;
}

.BiState .TrueSelector .Icon {
  background-image: url("Ofis.UserInterface.Icon.Approved.svg");
}

.BiState .FalseSelector .Icon {
  background-image: url("Ofis.UserInterface.Icon.Declined.svg");
}

 .BiState.True[data--mode=display] > .TrueSelector > .Icon,
 .BiState.False[data--mode=display] > .FalseSelector > .Icon {
  display: inline-flex;
}

.BiState[data--mode=display] > .TrueSelector > .Icon,
.BiState[data--mode=display] > .FalseSelector > .Icon {
  display: none;
}

.BiState[data--mode=display] > .FalseSelector > .Caption,
.BiState[data--mode=display] > .TrueSelector > .Caption {
  display: none;
}