.mdl-radio { box-sizing: border-box; display: inline-block; line-height: 24px; margin: 0; position: relative } .radio-label-block { -webkit-align-items: center; align-items: center; display: -webkit-flex; display: flex; margin-bottom: .5em; margin-top: .5em } .mdl-radio__button { -webkit-appearance: none; appearance: none; border: none; height: 1px; line-height: 24px; margin: 0; opacity: 0; padding: 0; position: absolute; width: 1px } .mdl-radio__circles { border-radius: 50%; cursor: pointer; height: 1.08em; position: relative; width: 1.08em } [dir=ltr] .mdl-radio__circles { margin-right: .54em } [dir=rtl] .mdl-radio__circles { margin-left: .54em } .mdl-radio__circles svg { height: 100%; overflow: visible; position: absolute; top: 0; width: 100%; z-index: 1 } [dir=ltr] .mdl-radio__circles svg { left: 0 } [dir=rtl] .mdl-radio__circles svg { right: 0 } .mdl-radio__button:disabled+.mdl-radio__circles { cursor: auto } .mdl-radio__button:disabled+.mdl-radio__circles .mdl-radio__outer-circle { color: rgba(0,0,0,.26) } .mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__outer-circle { color: #00a4dc } .mdl-radio__inner-circle { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; transition-duration: .2s; transition-property: -webkit-transform; transition-property: transform; transition-property: transform,-webkit-transform } .mdl-radio__button:checked+.mdl-radio__circles .mdl-radio__inner-circle { -webkit-transform: scale(1); transform: scale(1) } .mdl-radio__button:disabled+.mdl-radio__circles .mdl-radio__inner-circle { color: rgba(0,0,0,.26) } .mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__inner-circle { color: #00a4dc } .mdl-radio__focus-circle { background: #00a4dc; border-radius: 50%; box-sizing: border-box; height: 100%; left: 0; margin: 0; opacity: .26; position: absolute; top: 0; -webkit-transform: scale(0); transform: scale(0); transition-duration: .2s; transition-property: -webkit-transform; transition-property: transform; transition-property: transform,-webkit-transform; width: 100% } .mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__focus-circle { -webkit-transform: scale(1.75); transform: scale(1.75) } .mdl-radio__label { cursor: pointer } .mdl-radio__button:disabled+.mdl-radio__label { color: rgba(0,0,0,.26); cursor: auto }