.checkbox               { padding-left: 20px; margin-left: 10px;}
    .checkbox label     { display: inline-block;  position: relative;  padding-left: 5px; cursor: default; }
        .checkbox label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            margin-left: -20px;
            border: 1px solid #aaaaaa;
            border-radius: 0px;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
        .checkbox label::after {
            display: inline-block;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 0;
            top: 0;
            margin-left: -19px;
            padding-left: 3px;
            padding-top: 1px;
            font-size: 11px;
            color: #555555; }
.checkbox input[type="checkbox"]                                {  opacity: 0;  z-index: 1; }
    .checkbox input[type="checkbox"]:focus + label::before      { outline: thin dotted;  outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
    .checkbox input[type="checkbox"]:checked + label::after     { font-family: 'FontAwesome'; content: "\f04d"; }
    .checkbox input[type="checkbox"]:disabled + label           { opacity: 0.65; }
    .checkbox input[type="checkbox"]:disabled + label::before   { background-color: #eeeeee;  cursor: not-allowed; }

    .checkbox.checkbox-circle label::before                     { border-radius: 50%; }
    .checkbox.checkbox-inline                                   { margin-top: 0; }
    .checkbox.checkbox-single label                             { height: 17px; }

.checkbox-imi input[type="checkbox"]:checked + label::before    { background-color: #ffffff; border-color: #aaaaaa;  border-radius: 0;}
.checkbox-imi input[type="checkbox"]:checked + label::after     { color: #05ae98; }


.radio                          {  padding-left: 20px; margin-left: 10px;}
    .radio label                { display: inline-block;  position: relative;  padding-left: 5px; }
    .radio label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 17px;
        height: 17px;
        left: 0;
        margin-left: -20px;
        border: 1px solid #aaaaaa;
        border-radius: 50%;
        background-color: #fff;
        -webkit-transition: border 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out;
        transition: border 0.15s ease-in-out; }
    .radio label::after {
        display: inline-block;
        position: absolute;
        content: " ";
        width: 11px;
        height: 11px;
        left: 3px;
        top: 3px;
        margin-left: -20px;
        border-radius: 50%;
        background-color: #555555;
        -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        transform: scale(0, 0);
        -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }

  .radio input[type="radio"]                                { opacity: 0; z-index: 1; }
    .radio input[type="radio"]:focus + label::before        { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color;  outline-offset: -2px; }
    .radio input[type="radio"]:checked + label::after       { -webkit-transform: scale(1, 1);  -ms-transform: scale(1, 1);   -o-transform: scale(1, 1);  transform: scale(1, 1); }
    .radio input[type="radio"]:disabled + label             { opacity: 0.65; }
    .radio input[type="radio"]:disabled + label::before     { cursor: not-allowed; }

  .radio.radio-inline                                       { margin-top: 0; }
  .radio.radio-single label                                 { height: 17px; }

.radio-imi input[type="radio"] + label::after               { background-color: #05ae98; }
.radio-imi input[type="radio"]:checked + label::before      { border-color: #aaaaaa; }
.radio-imi input[type="radio"]:checked + label::after       { background-color: #05ae98; }