.radio
{
border-radius: 0;
float: left;
margin: 0 -28px 0 0;
padding: 0;
position: absolute;
opacity: 0;
height: 28px;
width: 28px;
z-index: -1;
}

.radio + label
{
display: inline-block;
font-family: inherit;
font-weight: inherit;
line-height: 28px;
min-height: 28px;
margin: 0;
padding: 0 0 0 40px;
position: relative;
}

.radio + label:before
{
background-color: #fbfbfb;
background-image: none;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;

border-color: #d3d3d3;
border-style: solid;
border-width: 1px;

border-radius: 50%;
content: "";
display: block;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
left: 0;
height: 26px;
width: 26px;
/*z-index: 1;*/

-webkit-transition: all 0.25s linear;
   -moz-transition: all 0.25s linear;
    -ms-transition: all 0.25s linear;
     -o-transition: all 0.25s linear;
        transition: all 0.25s linear;
}

.radio:focus + label:before,
.radio + label:hover:before
{
border-color: #9e9e9e;
}

.radio:checked + label:before
{
background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" version="1.1"><circle cx="16" cy="16" r="8" fill="%2332bc00" /></svg>');
}

.radio:disabled
{
pointer-events: none;
}

.radio:disabled + label
{
cursor: not-allowed;
}

.radio:disabled + label:before
{
background-color: #e7e7e7;
border-color: #d3d3d3;
cursor: not-allowed;

-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
        filter: grayscale(100%);
}

.radio:checked:disabled + label:before
{

}

.radio.radio-xxs{ height: 16px; width: 16px; margin-right: -16px; }
.radio.radio-xs { height: 20px; width: 20px; margin-right: -20px; }
.radio.radio-sm { height: 24px; width: 24px; margin-right: -24px; }
.radio.radio-md { height: 28px; width: 28px; margin-right: -28px; }
.radio.radio-lg { height: 32px; width: 32px; margin-right: -32px; }
.radio.radio-xl { height: 36px; width: 36px; margin-right: -36px; }
.radio.radio-xxl{ height: 40px; width: 40px; margin-right: -40px; }

.radio.radio-xxs+ label { line-height: 16px; min-height: 16px; padding-left: 28px; }
.radio.radio-xs + label { line-height: 20px; min-height: 20px; padding-left: 32px; }
.radio.radio-sm + label { line-height: 24px; min-height: 24px; padding-left: 36px; }
.radio.radio-md + label { line-height: 28px; min-height: 28px; padding-left: 40px; }
.radio.radio-lg + label { line-height: 32px; min-height: 32px; padding-left: 44px; }
.radio.radio-xl + label { line-height: 36px; min-height: 36px; padding-left: 48px; }
.radio.radio-xxl+ label { line-height: 40px; min-height: 40px; padding-left: 52px; }

.radio.radio-xxs+ label:before	{ height: 14px; width: 14px; }
.radio.radio-xs + label:before	{ height: 18px; width: 18px; }
.radio.radio-sm + label:before	{ height: 22px; width: 22px; }
.radio.radio-md + label:before	{ height: 26px; width: 26px; }
.radio.radio-lg + label:before	{ height: 30px; width: 30px; }
.radio.radio-xl + label:before	{ height: 34px; width: 34px; }
.radio.radio-xxl+ label:before	{ height: 38px; width: 38px; }

/*.radio + label:empty
{
padding: 0;
}*/

.radio.radio-multiline,
.radio.radio-multiline + label
{
line-height: 22px;
padding-top: 3px;
padding-bottom: 3px;
}

.radio.radio-multiline.radio-xxs, .radio.radio-multiline.radio-xxs+ label	{ padding-top: 0px; padding-bottom: 0px; }
.radio.radio-multiline.radio-xs,  .radio.radio-multiline.radio-xs + label	{ padding-top: 0px; padding-bottom: 0px; }
.radio.radio-multiline.radio-sm,  .radio.radio-multiline.radio-sm + label	{ padding-top: 1px; padding-bottom: 1px; }
.radio.radio-multiline.radio-md,  .radio.radio-multiline.radio-md + label	{ padding-top: 3px; padding-bottom: 3px; }
.radio.radio-multiline.radio-lg,  .radio.radio-multiline.radio-lg + label	{ padding-top: 5px; padding-bottom: 5px; }
.radio.radio-multiline.radio-xl,  .radio.radio-multiline.radio-xl + label	{ padding-top: 7px; padding-bottom: 7px; }
.radio.radio-multiline.radio-xxl, .radio.radio-multiline.radio-xxl+ label	{ padding-top: 9px; padding-bottom: 9px; }



.radio.radio-vcenter,
.radio.radio-vcenter + label:before
{
margin-top: -14px;
top: 50%;
}

.radio.radio-vcenter.radio-xxs, .radio.radio-vcenter.radio-xxs+ label:before	{ margin-top:  -8px; }
.radio.radio-vcenter.radio-xs,  .radio.radio-vcenter.radio-xs + label:before	{ margin-top: -10px; }
.radio.radio-vcenter.radio-sm,  .radio.radio-vcenter.radio-sm + label:before	{ margin-top: -12px; }
.radio.radio-vcenter.radio-md,  .radio.radio-vcenter.radio-md + label:before	{ margin-top: -14px; }
.radio.radio-vcenter.radio-lg,  .radio.radio-vcenter.radio-lg + label:before	{ margin-top: -16px; }
.radio.radio-vcenter.radio-xl,  .radio.radio-vcenter.radio-xl + label:before	{ margin-top: -18px; }
.radio.radio-vcenter.radio-xxl, .radio.radio-vcenter.radio-xxl+ label:before	{ margin-top: -20px; }




html[dir="rtl"] .radio					{ float: right; margin: 0 0 0 -28px; }
html[dir="rtl"] .radio + label			{ padding: 0 40px 0 0; }
html[dir="rtl"] .radio + label:before	{ left: auto; right: 0; }

html[dir="rtl"] .radio.radio-xxs{ margin-left: -16px; }
html[dir="rtl"] .radio.radio-xs { margin-left: -20px; }
html[dir="rtl"] .radio.radio-sm { margin-left: -24px; }
html[dir="rtl"] .radio.radio-md { margin-left: -28px; }
html[dir="rtl"] .radio.radio-lg { margin-left: -32px; }
html[dir="rtl"] .radio.radio-xl { margin-left: -36px; }
html[dir="rtl"] .radio.radio-xxl{ margin-left: -40px; }

html[dir="rtl"] .radio.radio-xxs+ label { padding-right: 28px; }
html[dir="rtl"] .radio.radio-xs + label { padding-right: 32px; }
html[dir="rtl"] .radio.radio-sm + label { padding-right: 36px; }
html[dir="rtl"] .radio.radio-md + label { padding-right: 40px; }
html[dir="rtl"] .radio.radio-lg + label { padding-right: 44px; }
html[dir="rtl"] .radio.radio-xl + label { padding-right: 48px; }
html[dir="rtl"] .radio.radio-xxl+ label { padding-right: 52px; }