.ChkToggleSwitch input {
  height: 0;
  width: 0;
  /*visibility: hidden;*/
  opacity: 0;
}
.ChkToggleSwitch .ChkToggleSwitch_Label {
  cursor: pointer;
  text-indent: -9999px;
  width: 30px;
  height: 10px;
  background: #dedede;
  display: block;
  border-radius: 100px;
  position: relative;
  border: 1px solid #f8f8f8;
}
.ChkToggleSwitch .ChkToggleSwitch_Label:after {
  content: '';
  position: absolute;
  top: -6px;
  left: -1px;
  width: 20px;
  height: 20px;
  background: #dedede;
  border-radius: 90px;
  transition: 0.3s;
  border: 1px solid white;
}
.ChkToggleSwitch input:checked ~ .ChkToggleSwitch_Label {
  background: #dedede;
}
.ChkToggleSwitch input:focus ~ .ChkToggleSwitch_Label {
  background: #acaaaa;
}
.ChkToggleSwitch input:checked ~ .ChkToggleSwitch_Label:after {
  left: 35px;
  transform: translateX(-100%);
  background: #3f81f0;
}
.ChkToggleSwitch .ChkToggleSwitch_Label:active:after {
  width: 13px;
}
/* Create a custom radio button */
.RoundMark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #eee;
  border: 1.5px solid #3f81f0;
  border-radius: 20%;
  display: flex;
  align-items: center;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.RoundMark:after {
  content: "";
  position: absolute;
  display: none;
}
.ChkBlue {
  /*display: block;*/
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default radio button */
.ChkBlue input {
  position: absolute;
  opacity: 0;
}
/* Style the indicator (dot/circle) */
.ChkBlue .RoundMark:after {
  top: 3px;
  left: 3px;
  width: 9px;
  height: 9px;
  border-radius: 20%;
  background: white;
}
/* On mouse-over, add a grey background color */
.ChkBlue:hover input ~ .RoundMark {
  background-color: #ccc;
}
.ChkBlue input:focus ~ .RoundMark {
  background: #ccc;
}
/* When the radio button is checked, add a blue background */
.ChkBlue input:checked ~ .RoundMark {
  background-color: #3f81f0;
}
/* Show the indicator (dot/circle) when checked */
.ChkBlue input:checked ~ .RoundMark:after {
  display: block;
}
.RbtNormal {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 25px;
  margin: 5px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default radio button */
.RbtNormal input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom radio button */
.RbtNormal .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border: 1px solid #3f81f0;
}
/* Create a text label style */
.RbtNormal input ~ .ContentLabel {
  color: #1d1d1d;
}
/* Style the indicator (dot/circle) */
.RbtNormal .checkmark:after {
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
/* On mouse-over, add a grey background color */
.RbtNormal:hover input ~ .checkmark,
.RbtNormal input:focus ~ .checkmark {
  background-color: #dedede;
}
/* When the radio button is checked, add a blue background */
.RbtNormal input:checked ~ .checkmark {
  background-color: #3f81f0;
}
/* When the radio button is checked, text color changes to blue */
.RbtNormal input:checked ~ .ContentLabel {
  color: #3f81f0;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.RbtNormal .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.RbtNormal input:checked ~ .checkmark:after {
  display: block;
}
.Chk_WhiteButton {
  margin: 12px 2px;
}
.Chk_WhiteButton label {
  padding: 7px 8px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #f8f8f8;
  font-size: 14px;
  max-width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #1d1d1d;
}
.Chk_WhiteButton input {
  display: none;
}
.Chk_WhiteButton label:hover {
  border: 1px solid #3472df;
  background-color: #3f81f0;
}
.Chk_WhiteButton label:active {
  border: 1px solid #3472df;
  background-color: #3f81f0;
  color: white;
}
.Chk_WhiteButton input:checked ~ label {
  border: 1px solid #3472df;
  background-color: #3f81f0;
}
/*.Chk_WhiteButton label
{

}

.Chk_WhiteButton label span
{
    text-align: center;
    padding: 3px 0px;
    display: block;
    border-radius: 4px;
}

.Chk_WhiteButton label input
{
    display:none;
}

.Chk_WhiteButton input:hover ~ span
{
    background-color: #efE0E0;
}

.Chk_WhiteButton input:checked ~ span
{
    background-color: #911;
    color: #fff;
}

.Chk_WhiteButton input:checked:hover ~ span
{
    background-color: #c11;
    color: #fff;
}*/
.ToggleTypeButton input[type=radio] {
  display: none;
}
.ToggleTypeButton {
  padding: 5px;
  background: #f8f8f8;
  border: 1px solid #3f81f0;
  color: #3f81f0;
}
.ToggleTypeButton:hover {
  background: #3f81f0;
  color: White;
}
.ToggleTypeButton:active {
  background-color: #3472df;
  color: white;
}
.ToggleTypeButton input:checked ~ ToggleTypeButton label {
  border: 1px solid #3472df;
  background-color: #3f81f0;
}