/**
 * RSX Framework
 * Copyright 2015 Bell Canada
 * 
 * Radio button and checkbox widget.
 * Reference: http://rsxdeployment.azurewebsites.net/docs/widgets.html#radios
 */

#prefcheckbox .rsx-communication-lob .rsx-label span.rsx-checkbox[role=checkbox]:focus {
    outline-offset: 3px;
    outline: -webkit-focus-ring-color auto 1px;
}

.rsx-radios input[type="radio"],
.rsx-checkboxes input[type="checkbox"] {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

.rsx-radios .rsx-label.rsx-focused .rsx-radio,
.rsx-checkboxes .rsx-label.rsx-focused .rsx-checkbox {
    outline: 0;
    box-shadow: 0 0 3px 2px rgba(178, 209, 228, 1);
}

.rsx-radios .rsx-label,
.rsx-checkboxes .rsx-label {
	margin-left: 0;
	position: relative;
	color: #212121;
	font-weight: normal;
	display: inline-block;
	vertical-align: top;
}

.rsx-radios .rsx-label:not(.rsx-disabled),
.rsx-checkboxes .rsx-label:not(.rsx-disabled) {
	cursor: pointer;
}

.rsx-radios.rsx-error .rsx-label,
.rsx-checkboxes.rsx-error .rsx-label {
	color: #BD2025;
}

.rsx-radios label:not(.rsx-disabled),
.rsx-checkboxes label:not(.rsx-disabled) {
	cursor: pointer;
}

.rsx-radios .rsx-label-text,
.rsx-checkboxes .rsx-label-text {
	display: inline-block;  
    line-height: 1;
}

.rsx-radios:not(.rsx-radios_absolute) .rsx-label-text,
.rsx-checkboxes:not(.rsx-checkboxes_absolute) .rsx-label-text {
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px);
    padding-left: 4px;
}

.rsx-radios_lg:not(.rsx-radios_absolute) .rsx-label-text,
.rsx-checkboxes_lg:not(.rsx-checkboxes_absolute) .rsx-label-text {
    -webkit-transform: translateY(-9px);
        -ms-transform: translateY(-9px);
            transform: translateY(-9px);
}

.rsx-radios_absolute.rsx-radios .rsx-label-text,
.rsx-checkboxes_absolute.rsx-checkboxes .rsx-label-text {
	padding-left: 35px;
    -webkit-transform: translateY(2px);
        -ms-transform: translateY(2px);
            transform: translateY(2px);
}

.rsx-radios_absolute.rsx-radios_lg .rsx-label-text,
.rsx-checkboxes_absolute.rsx-checkboxes_lg .rsx-label-text {
	padding-left: 38px;
    -webkit-transform: translateY(6px);
        -ms-transform: translateY(6px);
            transform: translateY(6px);
}

.rsx-radios_absolute.rsx-radios_lg .rsx-label-text[class*="rsx-h"],
.rsx-checkboxes_absolute.rsx-checkboxes_lg .rsx-label-text[class*="rsx-h"]{
	padding-left: 45px;
}


.rsx-radios_absolute.rsx-radios .rsx-label-text.rsx-h3,
.rsx-checkboxes_absolute.rsx-checkboxes .rsx-label-text.rsx-h3{
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
}

.rsx-radios_absolute.rsx-radios_lg .rsx-label-text.rsx-h3,
.rsx-checkboxes_absolute.rsx-checkboxes_lg .rsx-label-text.rsx-h3{
    -webkit-transform: translateY(4px);
        -ms-transform: translateY(4px);
            transform: translateY(4px);
}

.rsx-radios_absolute.rsx-radios .rsx-label-text.rsx-h4,
.rsx-checkboxes_absolute.rsx-checkboxes .rsx-label-text.rsx-h4{
    -webkit-transform: translateY(2px);
        -ms-transform: translateY(2px);
            transform: translateY(2px);
}
.rsx-radios_absolute.rsx-radios_lg .rsx-label-text.rsx-h4,
.rsx-checkboxes_absolute.rsx-checkboxes_lg .rsx-label-text.rsx-h4{
    -webkit-transform: translateY(6px);
        -ms-transform: translateY(6px);
            transform: translateY(6px);
}

.rsx-radios_absolute.rsx-radios .rsx-label-text.rsx-h5,
.rsx-checkboxes_absolute.rsx-checkboxes .rsx-label-text.rsx-h5{
    -webkit-transform: translateY(3px);
        -ms-transform: translateY(3px);
            transform: translateY(3px);
}
.rsx-radios_absolute.rsx-radios_lg .rsx-label-text.rsx-h5,
.rsx-checkboxes_absolute.rsx-checkboxes_lg .rsx-label-text.rsx-h5{
    -webkit-transform: translateY(7px);
        -ms-transform: translateY(7px);
            transform: translateY(7px);
}

.rsx-radios_absolute.rsx-radios .rsx-label-text.rsx-h6,
.rsx-checkboxes_absolute.rsx-checkboxes .rsx-label-text.rsx-h6{
    -webkit-transform: translateY(3px);
        -ms-transform: translateY(3px);
            transform: translateY(3px);
}
.rsx-radios_absolute.rsx-radios_lg .rsx-label-text.rsx-h6,
.rsx-checkboxes_absolute.rsx-checkboxes_lg .rsx-label-text.rsx-h6{
    -webkit-transform: translateY(8px);
        -ms-transform: translateY(8px);
            transform: translateY(8px);
}


.rsx-radio,
.rsx-checkbox {
    display: inline-block;
    position: relative;
	width: 22px;
	height: 22px;
	border: 1px solid #555;
	background-color: #fff;
	border-radius: 50%;
	transition: background-color 10ms cubic-bezier(.17, .67, .83, .67);
}

.rsx-radios.rsx-error .rsx-radio,
.rsx-checkboxes.rsx-error .rsx-checkbox {
    border-color:#BD2025; 
}

.rsx-radios_absolute .rsx-radio,
.rsx-checkboxes_absolute .rsx-checkbox {
    position: absolute;
    top: 0;
    left: 0;
}

.rsx-checkbox{
	border-radius: 3px;
    box-shadow: inset 1px 1px 0px 0px rgba(0,0,0,.1);
}

.rsx-radio{
	box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,.15);
}
.rsx-radio.custmBg {
    box-shadow: none !important;
}

.rsx-radio:after,
.rsx-checkbox:after {
	content: '';
	position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
	opacity: 0;
	transition: opacity 10ms cubic-bezier(.17, .67, .83, .67);
	background-color: #fff;
	border-radius: 50%;
}
.rsx-radio.custmBg:after,
.rsx-checkbox:after {
	content: '';
	position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
	opacity: 0;
	transition: opacity 10ms cubic-bezier(.17, .67, .83, .67);
	/*background-color: #41b6e6 !important;*/
	border-radius: 50%;
}
.rsx-radios:not(.rsx-radios_inverse) .rsx-radio.custmBg:after {
    background: #fff !important;
}

.rsx-radios:not(.rsx-radios_inverse) .rsx-radio:after {
    background: linear-gradient(to bottom, rgba(244,244,244,1) 0,rgba(229,229,229,1) 100%);
}


.rsx-checkbox:after {
	font-family: 'bell-icon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	content: '\e603';
	color: #fff;
	background-color: transparent;
	border-radius: inherit;
	font-size: 11px;
}

.rsx-radios label.rsx-active .rsx-radio,
.rsx-checkboxes label.rsx-active .rsx-checkbox {
	background-color: #003778;
	border-color: #003778;
}

.rsx-radios.rsx-error label.rsx-active .rsx-radio,
.rsx-checkboxes.rsx-error label.rsx-active .rsx-checkbox {
	background-color: #BD2025;
	border-color: #BD2025;
}

.rsx-radios label.rsx-active .rsx-radio:after,
.rsx-checkboxes label.rsx-active .rsx-checkbox:after {
	opacity: 1;
	height: 10px;
	width: 10px;
}

/* large */
.rsx-radios_lg .rsx-radio,
.rsx-checkboxes_lg .rsx-checkbox {
	width: 30px;
	height: 30px;
}

.rsx-radios_lg label.rsx-active .rsx-radio:after,
.rsx-checkboxes_lg label.rsx-active .rsx-checkbox:after {
	width: 14px;
	height: 14px;    
}

.rsx-checkboxes_lg label.rsx-active .rsx-checkbox:after {
	font-size: 17px;
    left: 12px;
    top: 12px;
}




/* inverse colour */
.rsx-radios_inverse label.rsx-active .rsx-radio {
    border-color: #fff;
    background-color: #fff;
}

.rsx-radios_inverse label.rsx-active .rsx-radio:after {
    background-color: #003778;
}



/* small */
.rsx-radios_sm .rsx-radio,
.rsx-checkboxes_sm .rsx-checkbox {
    width: 22px;
    height: 22px;
}

.rsx-radios_sm label.rsx-active .rsx-radio:after,
.rsx-checkboxes_sm label.rsx-active .rsx-checkbox:after {
    width: 10px;
    height: 10px;
}


@media (max-width: 999px){

    /* Responsive behaviour (size and label alignment) */

    .rsx-radios:not(.rsx-radios_sm) .rsx-radio,
    .rsx-checkboxes:not(.rsx-checkboxes_sm) .rsx-checkbox {
	    width: 30px;
	    height: 30px;
    }

    .rsx-radios:not(.rsx-radios_sm) label.rsx-active .rsx-radio:after,
    .rsx-checkboxes:not(.rsx-checkboxes_sm) label.rsx-active .rsx-checkbox:after {
	    width: 14px;
	    height: 14px;    
    }

    .rsx-checkboxes:not(.rsx-checkboxes_sm) label.rsx-active .rsx-checkbox:after {
        font-size: 17px;
        left: 12px;
        top: 12px;
    }

    .rsx-radios:not(.rsx-radios_absolute) .rsx-label-text,
    .rsx-checkboxes:not(.rsx-checkboxes_absolute) .rsx-label-text {
        -webkit-transform: translateY(-9px);
            -ms-transform: translateY(-9px);
                transform: translateY(-9px);                
    }

    .rsx-radios_absolute.rsx-radios:not(.rsx-radios_sm) .rsx-label-text, 
    .rsx-checkboxes_absolute.rsx-checkboxes:not(.rsx-checkboxes_sm) .rsx-label-text {
      padding-left: 45px;
        -webkit-transform: translateY(6px);
            -ms-transform: translateY(6px);
                transform: translateY(6px);
    }

    .rsx-radios_absolute.rsx-radios .rsx-label-text.rsx-h3,
    .rsx-checkboxes_absolute.rsx-checkboxes .rsx-label-text.rsx-h3{
        -webkit-transform: translateY(4px);
            -ms-transform: translateY(4px);
                transform: translateY(4px);
    }


    .rsx-radios_absolute.rsx-radios .rsx-label-text.rsx-h4,
    .rsx-checkboxes_absolute.rsx-checkboxes .rsx-label-text.rsx-h4{
        -webkit-transform: translateY(6px);
            -ms-transform: translateY(6px);
                transform: translateY(6px);
    }

    .rsx-radios_absolute.rsx-radios .rsx-label-text.rsx-h5,
    .rsx-checkboxes_absolute.rsx-checkboxes .rsx-label-text.rsx-h5{
        -webkit-transform: translateY(7px);
            -ms-transform: translateY(7px);
                transform: translateY(7px);
    }

    .rsx-radios_absolute.rsx-radios .rsx-label-text.rsx-h6,
    .rsx-checkboxes_absolute.rsx-checkboxes .rsx-label-text.rsx-h6{
        -webkit-transform: translateY(8px);
            -ms-transform: translateY(8px);
                transform: translateY(8px);
    }
}