.custom-switch {
    margin-top: 10px;
    height: 22.07px;
    background-image: -webkit-radial-gradient(center, farthest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    background-image: -moz-radial-gradient(center, farthest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    background-image: -o-radial-gradient(center, farthest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    background-image: radial-gradient(center, farthest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    vertical-align: top;
}

.switch {
    position: relative;
    margin: 10px 0;
    height: 26px;
    width: 220px;
    background: #e6e7e7;
    border-radius: 20px;
}

.switch-label {
    color: black;
    position: relative;
    z-index: 2;
    float: left;
    width: 108px;
    line-height: 26px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

.switch-label:active {
    font-weight: bold;
}

.switch-label-on.personal {
    padding-left: 8px;
    color: #fff;
}

.switch-label-on.business {
    padding-left: 8px;
    color: #fff;
}

.switch-label-off {
    padding-right: 0;
    padding-left: 2px;
    color: #828181;

}

/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       http://css-tricks.com/webkit-sibling-bug/
 */
.switch-input {
    display: none;
}

.switch-input:checked + .switch-label {
    font-weight: bold;
    -webkit-transition: 0.15s ease-out;
    -moz-transition: 0.15s ease-out;
    -o-transition: 0.15s ease-out;
    transition: 0.15s ease-out;
}

.switch-input:checked + .business ~ .switch-selection {
    left: 108px;
    /* Note: left: 50% doesn't transition in WebKit */
}

.switch-selection {
    display: block;
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 2px;
    width: 108px;
    height: 22px;
    background: #65bd63;
    border-radius: 20px;
    background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
    background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
    background-image: -o-linear-gradient(top, #9dd993, #65bd63);
    background-image: linear-gradient(to bottom, #9dd993, #65bd63);
    -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
}

.switch-blue .switch-selection {
    background: #3393df;
    background-image: -webkit-linear-gradient(top, #3393df, #3393df);
    background-image: -moz-linear-gradient(top, #3393df, #3393df);
    background-image: -o-linear-gradient(top, #3393df, #3393df);
    background-image: linear-gradient(to bottom, #3393df, #3393df);
    color: white !important;
}

.switch-yellow .switch-selection {
    background: #EBE5BB;
    background-image: -webkit-linear-gradient(top, #e0dd94, #EBE5BB);
    background-image: -moz-linear-gradient(top, #e0dd94, #EBE5BB);
    background-image: -o-linear-gradient(top, #e0dd94, #EBE5BB);
    background-image: linear-gradient(to bottom, #e0dd94, #EBE5BB);
    color: #3C3819 !important;
}

.switch-gray .switch-selection {
    background: #A8A8A8;
    background-image: -webkit-linear-gradient(top, #696969, #A8A8A8);
    background-image: -moz-linear-gradient(top, #696969, #A8A8A8);
    background-image: -o-linear-gradient(top, #696969, #A8A8A8);
    background-image: linear-gradient(to bottom, #696969, #A8A8A8);
}

.switch-gray > label .switch-label .switch-label-on {
    color: #3C3819;
}

.switch-yellow > label .switch-label .switch-label-on {
    color: #3C3819;
}

.switch-blue > label .switch-label .switch-label-on {
    color: white;
}