.r2-trc[data-color=black] i {
    background: #d9534f;
}
.r2-trc[data-color=black] input:checked+label i, .r2-trc[data-style=radio][data-color=black] input:checked+label i:before {
background: #5cb85c;
}

.r2-trc {
    /* height: 25px; */
    line-height: 25px;
    margin-bottom: 0px;
    display: inline-block;
}
.r2-trc label {
    height: inherit;
    display: block;
}
.r2-trc input[type=radio], .r2-trc input[type=checkbox] {
    display: none;
}
    .r2-trc i {
        float: left;
        width: 55px;
        height: 25px;
        margin-right: 5px;
        font-style: normal;
        position: relative;
        display: inline-block;
        background: rgba(0, 0, 0, .3);
    }
.r2-trc[data-style=radio] i, .r2-trc[data-style=check] i {
    width: 25px;
}
.r2-trc i:after, .r2-trc i:before {
    content: '';
    position: absolute;
}
.r2-trc i:before {
    top: 2px;
    left: 2px;
    z-index: 1;
    width: 21px;
    height: 21px;
    background: #eee;
    transition: all .2s ease-in-out 0s;
}
.r2-trc input:checked+label i {
    background: #5cb85c;
}
.r2-trc input:checked+label i:before {
    left: 32px;
}
.r2-trc[data-style=radio] i:before {
    background: #ddd;
    border: 2px solid transparent;
}
.r2-trc[data-style=radio] input:checked+label i:before {
    border-color: #fff;
    background: #5cb85c;
    left: 2px!important;
}
.r2-trc[data-style=check] i {
    background: #ddd;
    border: 2px solid #7f8c8d;
    border: 2px solid rgba(0, 0, 0, .2);
}
.r2-trc[data-style=check] i:after, .r2-trc[data-style=check] i:before {
    width: 0;
    background: 0 0;
    border-right: 2px solid transparent;
}
.r2-trc[data-style=check] i:before {
    top: 10px;
    left: 7px;
    height: 6px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.r2-trc[data-style=check] i:after {
    top: 5px;
    padding: 0!important;
    left: 12px!important;
    height: 12px!important;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all .2s ease-in-out 0s;
}
.r2-trc[data-style=check] input:checked+label i:after, .r2-trc[data-style=check] input:checked+label i:before {
    border-color: #fff;
}
.r2-trc[data-style=check] input:checked+label i:before {
    left: 7px;
}
.r2-trc[data-align=right] i {
    float: right;
    margin-right: 0;
    margin-left: 5px;
}
.r2-trc[data-text=onoff] i:after {
    left: 22px;
    color: #eee;
    height: 25px;
    content: 'Off';
    padding: 0 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 25px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    transition: all .2s ease-in-out 0s;
}
.r2-trc[data-text=onoff] input:checked+label i:after {
    left: 0;
    content: 'On'}
    
.r2-trc[data-text=yesno] i:after {
    left: 22px;
    color: #eee;
    height: 25px;
    content: 'No';
    padding: 0 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 25px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    transition: all .2s ease-in-out 0s;
}
.r2-trc[data-text=yesno] input:checked+label i:after {
    left: 0;
    content: 'Yes'}






        
.r2-trc[data-style=radio] i:after, .r2-trc[data-style=radio] input:checked+label i:after, .r2-trc[data-style=check] i:after, .r2-trc[data-style=check] input:checked+label i:after {
    content: ''}
.r2-trc[data-radius=true] i {
    border-radius: 5px;
}
.r2-trc[data-radius=true] i:before {
    border-radius: inherit;
}
.r2-trc input:disabled+label {
    color: #888;
    cursor: not-allowed;
}
.r2-trc input:disabled+label i {
    background: #ccc;
}
.r2-trc input:disabled+label i:after {
    color: #ddd;
}
.r2-trc[data-style=check] input:disabled+label i {
    background: #ddd;
    border-color: #ccc;
}
.r2-trc[data-size="2"] {
    height: 30px;
    line-height: 30px;
}
.r2-trc[data-size="2"] label i {
    width: 60px;
    height: inherit;
}
.r2-trc[data-size="2"][data-style=radio] label i, .r2-trc[data-size="2"][data-style=check] label i {
    width: 30px;
}
.r2-trc[data-size="2"] label i:after {
    left: 28px;
    height: inherit;
    line-height: 30px;
}
.r2-trc[data-size="2"] label i:before {
    width: 26px;
    height: 26px;
}
.r2-trc[data-size="2"][data-style=check] label i:before {
    width: 0;
    height: 7px;
}
.r2-trc[data-size="2"][data-style=check] label i:after {
    top: 5px;
    left: 15px!important;
    height: 15px!important;
}
.r2-trc[data-size="2"][data-style=check] input:checked+label i:before, .r2-trc[data-size="2"][data-style=check] label i:before {
    top: 12px;
    left: 8px;
    border-radius: 0;
}
.r2-trc[data-size="2"] label i[data-after-check]:before, .r2-trc[data-size="2"] label i[data-before-check]:before {
    line-height: 26px;
}
.r2-trc[data-size="2"][data-style=radio] input:checked+label i[data-after-check]:before, .r2-trc[data-size="2"][data-style=radio] input:checked+label i[data-before-check]:before, .r2-trc[data-size="2"][data-style=check] input:checked+label i[data-after-check]:before, .r2-trc[data-size="2"][data-style=check] input:checked+label i[data-before-check]:before {
    left: 2px;
}
.r2-trc[data-size="2"][data-style=check] label i[data-after-check]:before, .r2-trc[data-size="2"][data-style=check] label i[data-before-check]:before {
    width: inherit;
}
.r2-trc[data-size="3"] {
    height: 40px;
    line-height: 40px;
}
.r2-trc[data-size="3"] label i {
    width: 80px;
    height: inherit;
}
.r2-trc[data-size="3"][data-style=radio] label i, .r2-trc[data-size="3"][data-style=check] label i {
    width: 40px;
}
.r2-trc[data-size="3"] input:checked+label i:before {
    left: 42px;
}
.r2-trc[data-size="3"] label i:after {
    left: 42px;
    font-size: 16px;
    height: inherit;
    line-height: 40px;
}
.r2-trc[data-size="3"] label i:before {
    width: 36px;
    height: 36px;
}
.r2-trc[data-size="3"][data-style=check] label i:before {
    width: 0;
    height: 7px;
}
.r2-trc[data-size="3"][data-style=check] label i:after {
    top: 10px;
    left: 21px!important;
    height: 20px!important;
}
.r2-trc[data-size="3"][data-style=check] input:checked+label i:before, .r2-trc[data-size="3"][data-style=check] label i:before {
    top: 20px;
    left: 12px;
    border-radius: 0;
}
.r2-trc[data-size="3"] label i[data-after-check]:before, .r2-trc[data-size="3"] label i[data-before-check]:before {
    font-size: 24px;
    line-height: 36px;
}
.r2-trc[data-size="3"][data-style=radio] input:checked+label i[data-after-check]:before, .r2-trc[data-size="3"][data-style=radio] input:checked+label i[data-before-check]:before, .r2-trc[data-size="3"][data-style=check] input:checked+label i[data-after-check]:before, .r2-trc[data-size="3"][data-style=check] input:checked+label i[data-before-check]:before {
    left: 2px;
}
.r2-trc[data-size="3"][data-style=check] label i[data-after-check]:before, .r2-trc[data-size="3"][data-style=check] label i[data-before-check]:before {
    width: inherit;
}
.r2-trc i[data-after-check]:after, .r2-trc i[data-after-check]:before, .r2-trc i[data-before-check]:after, .r2-trc i[data-before-check]:before {
    border: none;
}
.r2-trc i[data-before-check]:before {
    color: #7f8c8d;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    font-family: FontAwesome;
    content: attr(data-before-check);
}
.r2-trc input:checked+label i[data-after-check]:before {
    color: #fff;
    background: rgba(0, 0, 0, .1);
    content: attr(data-after-check);
}
.r2-trc[data-style=check] input:checked+label i[data-after-check]:before {
    height: 100%;
    background: 0 0!important;
}
.r2-trc[data-style=check] i[data-before-check]:before {
    width: inherit;
    height: inherit;
    line-height: 25px;
    top: -2px!important;
    left: -2px!important;
}
.r2-trc[data-color] input:disabled+label i:after {
    color: rgba(0, 0, 0, .3);
}
.r2-trc[data-color] i[data-before-check]:before {
    color: #fff;
    background: rgba(255, 255, 255, .2);
}
.r2-trc[data-color=red] i {
    background: rgba(243, 66, 53, .6);
}
.r2-trc[data-color=red] input:checked+label i, .r2-trc[data-style=radio][data-color=red] input:checked+label i:before {
    background: rgba(243, 66, 53, 1);
}
.r2-trc[data-color=red] input:disabled+label i {
    background: rgba(243, 66, 53, .4);
}
.r2-trc[data-color=pink] i {
    background: rgba(233, 30, 99, .6);
}
.r2-trc[data-color=pink] input:checked+label i, .r2-trc[data-style=radio][data-color=pink] input:checked+label i:before {
    background: rgba(233, 30, 99, 1);
}
.r2-trc[data-color=pink] input:disabled+label i {
    background: rgba(233, 30, 99, .4);
}

.r2-trc[data-color=black] input:disabled+label i {
    background: rgba(54, 63, 69, .4);
}
.r2-trc[data-color=purple] i {
    background: rgba(156, 39, 176, .6);
}
.r2-trc[data-color=purple] input:checked+label i, .r2-trc[data-style=radio][data-color=purple] input:checked+label i:before {
    background: rgba(156, 39, 176, 1);
}
.r2-trc[data-color=purple] input:disabled+label i {
    background: rgba(156, 39, 176, .4);
}
.r2-trc[data-color=deep-purple] i {
    background: rgba(103, 58, 183, .6);
}
.r2-trc[data-color=deep-purple] input:checked+label i, .r2-trc[data-style=radio][data-color=deep-purple] input:checked+label i:before {
    background: rgba(103, 58, 183, 1);
}
.r2-trc[data-color=deep-purple] input:disabled+label i {
    background: rgba(103, 58, 183, .4);
}
.r2-trc[data-color=indigo] i {
    background: rgba(63, 81, 181, .6);
}
.r2-trc[data-color=indigo] input:checked+label i, .r2-trc[data-style=radio][data-color=indigo] input:checked+label i:before {
    background: rgba(63, 81, 181, 1);
}
.r2-trc[data-color=indigo] input:disabled+label i {
    background: rgba(63, 81, 181, .4);
}
.r2-trc[data-color=blue] i {
    background: rgba(32, 32, 32, .2);
}
.r2-trc[data-color=blue] input:checked+label i, .r2-trc[data-style=radio][data-color=blue] input:checked+label i:before {
    background: rgba(32, 149, 242, 1);
    background: rgba(52,122,183,1) /* #347ab7 was rgba(95,193,220, .4) /* #5fc1dc ; */
}
.r2-trc[data-color=blue] input:disabled + label i {
    background: rgba(32, 149, 242, .4);
    background: rgba(52,122,183,4) /* #347ab7 was rgba(95,193,220, .4) /* #5fc1dc ; */
}
.r2-trc[data-color=light-blue] i {
    background: rgba(3, 169, 244, .6);
}
.r2-trc[data-color=light-blue] input:checked+label i, .r2-trc[data-style=radio][data-color=light-blue] input:checked+label i:before {
    background: rgba(3, 169, 244, 1);
}
.r2-trc[data-color=light-blue] input:disabled+label i {
    background: rgba(3, 169, 244, .4);
}
.r2-trc[data-color=cyan] i {
    background: rgba(0, 188, 212, .6);
}
.r2-trc[data-color=cyan] input:checked+label i, .r2-trc[data-style=radio][data-color=cyan] input:checked+label i:before {
    background: rgba(0, 188, 212, 1);
}
.r2-trc[data-color=cyan] input:disabled+label i {
    background: rgba(0, 188, 212, .4);
}
.r2-trc[data-color=teal] i {
    background: rgba(0, 149, 135, .6);
}
.r2-trc[data-color=teal] input:checked+label i, .r2-trc[data-style=radio][data-color=teal] input:checked+label i:before {
    background: rgba(0, 149, 135, 1);
}
.r2-trc[data-color=teal] input:disabled+label i {
    background: rgba(0, 149, 135, .4);
}
.r2-trc[data-color=green] i {
    background: rgba(76, 175, 80, .6);
}
.r2-trc[data-color=green] input:checked+label i, .r2-trc[data-style=radio][data-color=green] input:checked+label i:before {
    background: rgba(76, 175, 80, 1);
}
.r2-trc[data-color=green] input:disabled+label i {
    background: rgba(76, 175, 80, .4);
}
.r2-trc[data-color=light-green] i {
    background: rgba(139, 195, 74, .6);
}
.r2-trc[data-color=light-green] input:checked+label i, .r2-trc[data-style=radio][data-color=light-green] input:checked+label i:before {
    background: rgba(139, 195, 74, 1);
}
.r2-trc[data-color=light-green] input:disabled+label i {
    background: rgba(139, 195, 74, .4);
}
.r2-trc[data-color=lime] i {
    background: rgba(205, 220, 57, .6);
}
.r2-trc[data-color=lime] input:checked+label i, .r2-trc[data-style=radio][data-color=lime] input:checked+label i:before {
    background: rgba(205, 220, 57, 1);
}
.r2-trc[data-color=lime] input:disabled+label i {
    background: rgba(205, 220, 57, .4);
}
.r2-trc[data-color=yellow] i {
    background: rgba(255, 235, 59, .6);
}
.r2-trc[data-color=yellow] input:checked+label i, .r2-trc[data-style=radio][data-color=yellow] input:checked+label i:before {
    background: rgba(255, 235, 59, 1);
}
.r2-trc[data-color=yellow] input:disabled+label i {
    background: rgba(255, 235, 59, .4);
}
.r2-trc[data-color=amber] i {
    background: rgba(255, 193, 7, .6);
}
.r2-trc[data-color=amber] input:checked+label i, .r2-trc[data-style=radio][data-color=amber] input:checked+label i:before {
    background: rgba(255, 193, 7, 1);
}
.r2-trc[data-color=amber] input:disabled+label i {
    background: rgba(255, 193, 7, .4);
}
.r2-trc[data-color=orange] i {
    background: rgba(255, 152, 0, .6);
}
.r2-trc[data-color=orange] input:checked+label i, .r2-trc[data-style=radio][data-color=orange] input:checked+label i:before {
    background: rgba(255, 152, 0, 1);
}
.r2-trc[data-color=orange] input:disabled+label i {
    background: rgba(255, 152, 0, .4);
}
.r2-trc[data-color=deep-orange] i {
    background: rgba(255, 87, 34, .6);
}
.r2-trc[data-color=deep-orange] input:checked+label i, .r2-trc[data-style=radio][data-color=deep-orange] input:checked+label i:before {
    background: rgba(255, 87, 34, 1);
}
.r2-trc[data-color=deep-orange] input:disabled+label i {
    background: rgba(255, 87, 34, .4);
}
.r2-trc[data-color=brown] i {
    background: rgba(121, 85, 72, .6);
}
.r2-trc[data-color=brown] input:checked+label i, .r2-trc[data-style=radio][data-color=brown] input:checked+label i:before {
    background: rgba(121, 85, 72, 1);
}
.r2-trc[data-color=brown] input:disabled+label i {
    background: rgba(121, 85, 72, .4);
}
.r2-trc[data-color=grey] i {
    background: rgba(158, 158, 158, .6);
}
.r2-trc[data-color=grey] input:checked+label i, .r2-trc[data-style=radio][data-color=grey] input:checked+label i:before {
    background: rgba(158, 158, 158, 1);
}
.r2-trc[data-color=grey] input:disabled+label i {
    background: rgba(158, 158, 158, .4);
}
.r2-trc[data-color=blue-grey] i {
    background: rgba(96, 125, 139, .6);
}
.r2-trc[data-color=blue-grey] input:checked+label i, .r2-trc[data-style=radio][data-color=blue-grey] input:checked+label i:before {
    background: rgba(96, 125, 139, 1);
}
.r2-trc[data-color=blue-grey] input:disabled+label i {
    background: rgba(96, 125, 139, .4);
}