/**
 * checkbox and radio
 *
 * @link https://codepen.io/triss90/pen/XNEdRe
 */

input[type=checkbox],
input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    position: relative;
    margin-right: 1px;
}

input[type=checkbox]:before,
input[type=radio]:before {
    content: '';
    background: #fff;
    border: 2px solid #aaa;
    display: inline-block;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 250ms ease;
}

input[type=radio]:before {
    border-radius: 100%;
    top: -0.5px;
}

input[type=checkbox]:checked:before,
input[type=radio]:checked:before {
    background-color: #298cba;
    box-shadow: inset 0 0 0 2px #fff;
    border-color: #298cba;
}

input[type=radio]:checked:before {
    box-shadow: inset 0 0 0 3px #fff;
}

input[type=checkbox]:focus:before {
    border-color: #298cba;
}

input[type=radio]:focus:before {
    border-color: #298cba;
    box-shadow: inset 0 0 0 3px #fff;
}

input[type=checkbox]:disabled:before,
input[type=radio]:disabled:before {
    border-color: #aaa;
    box-shadow: inset 0 0 0 2px #f4f4f4;
    background: #f4f4f4;
    cursor: not-allowed;
}

input[type=radio]:disabled:before {
    box-shadow: inset 0 0 0 3px #f4f4f4;
}

input[type=checkbox]:disabled:checked:before,
input[type=radio]:disabled:checked:before {
    background: #aaa;
}
