.switch-button-label {
    float: left;
    cursor: pointer;
}

.switch-button-label.off {
    color: #adadad;
}

.switch-button-label.on {
    color: #0088CC;
}

.switchButtonContainer.yesNoColorRed .switch-button-label.off {
    color: #d83434;
}

.switchButtonContainer.yesNoColorRed .switch-button-label.on {
    color: #0088CC;
}

.switchButtonContainer.yesBlueNoGreenColor .switch-button-label.off {
    color: #0088CC;
}

.switchButtonContainer.yesBlueNoGreenColor .switch-button-label.on {
    color: #029000;
}

.switchButtonContainer.yesRedNoGreenColor .switch-button-label.off {
    color: #029000;
}

.switchButtonContainer.yesRedNoGreenColor .switch-button-label.on {
    color: #d83434;
}

.switchButtonContainer.yesRedNoBlueColor .switch-button-label.off {
    color: #0088CC;
}

.switchButtonContainer.yesRedNoBlueColor .switch-button-label.on {
    color: #d83434;
}

.switchButtonContainer.yesGreenNoRedColor .switch-button-label.off {
    color: #d83434;
}

.switchButtonContainer.yesGreenNoRedColor .switch-button-label.on {
    color: #029000;
}

.switchButtonContainer.yesGreenColor .switch-button-label.on {
    color: #029000;
}
.switchButtonContainer.yesBlueColor .switch-button-label.on {
    color: #0088CC;
}
.switchButtonContainer.yesRedColor .switch-button-label.on {
    color: #d83434;
}
.switchButtonContainer.noGreenColor .switch-button-label.off {
    color: #029000;
}
.switchButtonContainer.noBlueColor .switch-button-label.off {
    color: #0088CC;
}
.switchButtonContainer.noRedColor .switch-button-label.off {
    color: #d83434;
}

.switch-button-background {
    float: left;
    position: relative;
    background: #ccc;
    border: 1px solid #aaa;
    margin: 1px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.switchButtonContainer.yesNoOption .switch-button-background.checked {
    background: #00a4dc;
}
.switchButtonContainer.yesNoOptionMainGreen .switch-button-background.checked {
    background: #029000;
}	
.switchButtonContainer.yesNoOptionMainBlue .switch-button-background.checked {
    background: #00a4dc;
}
.switchButtonContainer.yesNoOptionMainRed .switch-button-background.checked {
    background: #d83434;
}
.switchButtonContainer.yesNoOptionMainBlue.noBackgroundColor .switch-button-background.checked {
    background: #ccc;
}
.switchButtonContainer.yesNoOptionMainRedWhenOff .switch-button-background:not(.checked) {
    background: #d83434;
}	

.switch-button-button {
    position: absolute;
    left: -1px;
    top : -1px;
    background: #FAFAFA;
    border: 1px solid #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.switchButtonContainer.yesNoOption .switch-button-background .switch-button-button::before {
    content: 'o';
    font-size: 12px;
    position: absolute;
    top: -2px;
    left: 4px;
    font-weight: bold;
    color: #aaa;
}
.switchButtonContainer.yesNoOption.yesNoColorRed .switch-button-background .switch-button-button::before,
.switchButtonContainer.yesNoOption.noRedColor .switch-button-background .switch-button-button::before {
    color: #d83434;
}
.switchButtonContainer.yesNoOption .switch-button-background.checked .switch-button-button::before {
    content: 'I';
    font-size: 9px;
    position: absolute;
    top: 2px;
    left: 6px;
    font-weight: bold;
    color: #00a4dc;
}
/* En caso de tener switchbutton en linea, y que son de tipo yesNo, definios un ancho fijo para los labels y que no se altere su tamaño por marcarlos o desmarcarlos */
.switchButtonInARow.withLeftLabel .switchButtonContainer.yesNoOption > span.switch-button-label,
.switchButtonContainer.yesNoOption.FixedLabelWidth > span.switch-button-label {
    width: 2em;
}
.switchButtonContainer.yesNoOption.yesNoOptionMainBlue .switch-button-background.checked .switch-button-button::before {
    color: #00a4dc;
}
.switchButtonContainer.yesNoOption.yesNoOptionMainGreen .switch-button-background.checked .switch-button-button::before {
    color: #029000;
}
.switchButtonContainer.yesNoOption.yesNoOptionMainRedWhenOff .switch-button-background:not(.checked) .switch-button-button::before {
    color: #d83434;
}


span.toggleLabel {
    padding-left: .4em;
    display: inline-block;
    cursor: pointer;
}

span.toggleLabel.labelOn {
    color: #0088CC      ;
}

span.toggleLabel.labelOff {
    color: #adadad;
}

/* Estilo custom PGP*/
.switchButtonContainer.optionAndLabelJoined > label {
	text-align: left;
	width: auto;
	margin: 6px 0 6px 0.3em;
	padding: 0;
	display: inline-block;
	vertical-align: baseline;
}

.switchButtonContainer.optionAndLabelJoined.noTopMargin.labelizedLeft.noLeftTag .switch-button-background, 
.switchButtonContainer.optionAndLabelJoined.noTopMargin.labelizedRight.noLeftTag .switch-button-background {
    margin: 1px 10px 7px 0;
}
.switchButtonContainer.optionAndLabelJoined.noTopMargin.labelizedLeft span, 
.switchButtonContainer.optionAndLabelJoined.noTopMargin.labelizedRight span {
    margin: 0 0 6px 0;
}
.switchButtonContainer.optionAndLabelJoined.noTopMargin > label {
    margin: 0px 0 6px 0.3em;
}