.wb_flipSwitch
{
  position: relative;
  margin: 0;
}
.flipwidth108 { /* phil added*/
/*  max-width: 6px; */
  width: 108px;
  height:28px;
}
  
.flipSwitch
{
  display: none;
}
.flipSwitch-label
{
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #3472A9;; 
  border-radius: 24px;
  box-sizing: border-box;
  max-width: 100%;
  height: 97% /* 100%;*/
  -webkit-transition: border-color 300ms ease-in 0s;
  transition: border-color 300ms ease-in 0s;
}
.flipSwitch-inner
{
  box-sizing: border-box;
  display: block;
  width: 200%;
  margin-left: -100%;
  -webkit-transition: margin 300ms ease-in 0s;
  transition: margin 300ms ease-in 0s;
}

.flipSwitch-inner:before, 
.flipSwitch-inner:after
{
  display: block;
  float: left;
  width: 50%;
  height: 25px; /* 24px */
  padding: 0;
  line-height: 24px;
  color: #FFFFFF;
  font-family: Arial;
  font-weight: normal;
  font-size: 13px;
  box-sizing: border-box;
  border-radius: 24px;
  text-align: center;
}
.flipSwitch-inner:before
{
  content: "not bowling";
  padding-right: 24px;
  background-color: #FFC0CB; 
  color: #DC143C; 
  border-radius: 24px 0 0 24px;
}
/* example
.yesno-inner:before
{
  content: "No" !important;
}
.yesno-inner:after
{
  content: "Yes" !important;
}
*/
.flipSwitch-inner:after
{
  content: "bowling";
  padding-left: 24px;
  background-color: #5C9AD1;
  color: #FFFFFF;
  border-radius: 0 24px 24px 0;
}

.flipSwitch-switch
{
  display: block;
  width: 22px; 
  margin: 0px;
  background: #3472A9;
  border: 2px solid #C1D9EE;
  border-radius: 22px; 
  box-shadow: 0px 0px 5px rgba(0,0,0,0.30) inset;
  position: absolute;
  top: 2px;
  bottom: 4px; /*2*/
  right: 83px;
  -webkit-transition: all 300ms ease-in 0s;
  transition: all 300ms ease-in 0s;
  box-sizing: border-box;
}
.flipSwitch:checked + .flipSwitch-label
{
  border-color: #dc7d7d;
}
.flipSwitch:checked + .flipSwitch-label 
.flipSwitch-inner
{
  margin-left: 0;
}
.flipSwitch:checked + .flipSwitch-label 
.flipSwitch-switch
{
  right: 2px;
  background: #DC143C; 
  border-color: #FFFFFF;
}

/* ----------------------- */

.wb_switchYesNo
{
  position: relative;
  margin: 0;
}
.switchYesNo
{
  display: none;
}
.switchYesNo-label
{
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #3472A9;; 
  border-radius: 25px;
  box-sizing: border-box;
  max-width: 100%;
  height: 97% /* 100%;*/
  -webkit-transition: border-color 300ms ease-in 0s;
  transition: border-color 300ms ease-in 0s;
}
.switchYesNo-inner
{
  box-sizing: border-box;
  display: block;
  width: 200%;
  margin-left: -100%;
  -webkit-transition: margin 300ms ease-in 0s;
  transition: margin 300ms ease-in 0s;
}
.switchYesNo-inner:before, 
.switchYesNo-inner:after
{
  display: block;
  float: left;
  width: 50%;
  height: 25px; /* 24px */
  padding: 0;
  line-height: 24px;
  color: #FFFFFF;
  font-family: Arial;
  font-weight: normal;
  font-size: 13px;
  box-sizing: border-box;
  border-radius: 25px;
  text-align: center;
}
.switchYesNo-inner:before
{
  content: "No";
  padding-right: 25px;
  background-color: #DCDCDC; /* #FFC0CB; */
  color: #3472A9; /* #DC143C; */ /* red */
  border-radius: 25px 0 0 25px;
}
.switchYesNo-inner:after
{
  content: "Yes";
  padding-left: 25px;
  background-color: #5C9AD1;
  color: #FFFFFF;
  border-radius: 0 25px 25px 0;
}

.switchYesNo-switch
{
  display: block;
  width: 24px; 
  margin: 0px;
  background: #3472A9;
  border: 2px solid #C1D9EE;
  border-radius: 24px; 
  box-shadow: 0px 0px 5px rgba(0,0,0,0.30) inset;
  position: absolute;
  top: 2px;
  bottom: 3px; /*2*/
  right: 51px;
  -webkit-transition: all 300ms ease-in 0s;
  transition: all 300ms ease-in 0s;
  box-sizing: border-box;
}
.switchYesNo:checked + .switchYesNo-label
{
  border-color: #A6A6A6; /* #dc7d7d; */ /* reddish */
}
.switchYesNo:checked + .switchYesNo-label 
.switchYesNo-inner
{
  margin-left: 0;
}
.switchYesNo:checked + .switchYesNo-label 
.switchYesNo-switch
{
  right: 2px;
  background: #3472A9; /* #DC143C; */ /* reddish */
  border-color: #FFFFFF;
}
@media only screen and (max-width: 620px) /* 320 ok - phil added*/
{
.flipwidth108 {
/*  max-width: 6px; */
  width: 82px; 
  height:28px;
}

.flipSwitch-inner:before, 
.flipSwitch-inner:after
{
  height: 24px;
  line-height: 24px;
  font-size: 11px;
}
.flipSwitch-inner
{ width: 200%}
  
.flipSwitch-switch
{  right: 57px;}

}