@-moz-keyframes borderscale {
  50% { box-shadow: 0 0 0 2px #999; }
}
@-webkit-keyframes borderscale {
  50% { box-shadow: 0 0 0 2px #999; }
}
@keyframes borderscale {
  50% { box-shadow: 0 0 0 2px #999; }
}

input[type="checkbox"], input[type="radio"]{ border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
input[type="checkbox"]:hover + label:before, input[type="radio"]:hover + label:before { border-color: #00bad2; }
input[type="checkbox"]:active + label:before, input[type="radio"]:active + label:before { transition-duration: 0; filter: brightness(0.2); }
input[type="checkbox"] + label, input[type="radio"] + label { position: relative; padding-left: 26px; font-weight: normal; cursor:pointer; }
input[type="checkbox"] + .empty-label, input[type="radio"] + .empty-label { position: relative; padding-left:0; font-weight: normal; cursor:pointer; width:20px; }
input[type="checkbox"] + label:before, input[type="checkbox"] + label:after, input[type="radio"] + label:before, input[type="radio"] + label:after { box-sizing: content-box; position: absolute; content: ''; display: block; left: 0; }
input[type="checkbox"] + label:before, input[type="radio"] + label:before { top: 50%; width: 16px; height: 16px; margin-top: -10px; border: 2px solid #d9d9d9; text-align: center; cursor:pointer; }
input[type="checkbox"] + label:after, input[type="radio"] + label:after { background-color: #00bad2; top: 50%; left: 6px; width: 8px; height: 8px; margin-top: -4px; transform: scale(0); transform-origin: 50%; transition: transform 200ms ease-out; cursor:pointer; }
input[type="radio"]:checked + label:before { background-color: #fff; border-color: #00bad2; }
input[type="radio"]:checked + label:after { transform: scale(1); }
input[type="radio"] + label:before, input[type="radio"] + label:after { border-radius: 50%; }
input[type="checkbox"] + label:after { background-color: transparent; top: 50%; left: 5px; width: 7px; height: 4px; margin-top: -5px; border-style: solid; border-color: #00bad2; border-width: 0 0 3px 3px; -moz-transform: rotate(-45deg) scale(0); -ms-transform: rotate(-45deg) scale(0); -webkit-transform: rotate(-45deg) scale(0); transform: rotate(-45deg) scale(0); -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; }
input[type="checkbox"]:checked + label:before { border-color: #00bad2; }
input[type="checkbox"]:checked + label:after { content: ''; -moz-transform: rotate(-45deg) scale(1); -ms-transform: rotate(-45deg) scale(1); -webkit-transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1); -moz-transition: -moz-transform 200ms ease-out; -o-transition: -o-transform 200ms ease-out; -webkit-transition: -webkit-transform 200ms ease-out; transition: transform 200ms ease-out; }

/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  select::-ms-expand { display: none; }
  select:focus::-ms-value { background: transparent; color: grey; }
}