/*#region Custom checkboxes   http://codepen.io/CreativeJuiz/pen/BiHzp  */

/* Base for label styling */
.custom[type="checkbox"]:not(:checked),
.custom[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

    .custom[type="checkbox"]:not(:checked) + label,
    .custom[type="checkbox"]:checked + label {
        position: relative;
        padding-left: 24px !important;
        cursor: pointer;
        padding-top: 5px;
    }

        /* checkbox aspect */
        .custom[type="checkbox"]:not(:checked) + label:before,
        .custom[type="checkbox"]:checked + label:before {
            content: '';
            position: absolute;
            left: -5px;
            top: 2px;
            width: 17px;
            height: 17px;
            /*border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);*/
            border: 2px solid #888;
            background-color: #fff;
            border-radius: 7px;
        }
        /* checked mark aspect */
        .custom[type="checkbox"]:not(:checked) + label:after,
        .custom[type="checkbox"]:checked + label:after {
            content: '✔';
            position: absolute;
            top: 3px;
            left: -1px;
            font-size: 14px;
            line-height: normal;
            color: #09ad7e;
            transition: all .2s;
        }
        /* checked mark aspect changes */
        .custom[type="checkbox"]:not(:checked) + label:after {
            opacity: 0;
            transform: scale(0);
        }

        .custom[type="checkbox"]:checked + label:after {
            opacity: 1;
            transform: scale(1);
        }
/* disabled checkbox */
.custom[type="checkbox"]:disabled:not(:checked) + label:before,
.custom[type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
}

.custom[type="checkbox"]:disabled:checked + label:after {
    color: #999;
}

.custom[type="checkbox"]:disabled + label {
    color: #aaa;
}
/* accessibility */
.custom[type="checkbox"]:checked:focus + label:before,
.custom[type="checkbox"]:not(:checked):focus + label:before {
    /*border: 2px dotted blue;*/
    border: 2px solid #4778d9;
}

/* hover style just for information */
.custom[type="checkbox"] + label:hover:before {
    border: 2px solid #4778d9 !important;
}
/*#endregion*/

/*#region Custom radio butons */

/* Base for label styling */
.custom[type="radio"]:not(:checked),
.custom[type="radio"]:checked {
    position: absolute;
    left: -9999px;
}

    .custom[type="radio"]:not(:checked) + label,
    .custom[type="radio"]:checked + label {
        position: relative;
        padding-left: 24px !important;
        cursor: pointer;
        padding-top: 5px;
    }

        /* radio aspect */
        .custom[type="radio"]:not(:checked) + label:before,
        .custom[type="radio"]:checked + label:before {
            content: '';
            position: absolute;
            left: -5px;
            top: 2px;
            width: 17px;
            height: 17px;
            /*border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);*/
            border: 2px solid #888;
            background-color: #fff;
            border-radius: 7px;
        }
        /* checked mark aspect */
        .custom[type="radio"]:not(:checked) + label:after,
        .custom[type="radio"]:checked + label:after {
            content: '✔';
            position: absolute;
            top: 3px;
            left: -1px;
            font-size: 14px;
            line-height: normal;
            color: #09ad7e;
            transition: all .2s;
        }
        /* checked mark aspect changes */
        .custom[type="radio"]:not(:checked) + label:after {
            opacity: 0;
            transform: scale(0);
        }

        .custom[type="radio"]:checked + label:after {
            opacity: 1;
            transform: scale(1);
        }
/* disabled radio */
.custom[type="radio"]:disabled:not(:checked) + label:before,
.custom[type="radio"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
}

.custom[type="radio"]:disabled:checked + label:after {
    color: #999;
}

.custom[type="radio"]:disabled + label {
    color: #aaa;
}
/* accessibility */
.custom[type="radio"]:checked:focus + label:before,
.custom[type="radio"]:not(:checked):focus + label:before {
    /*border: 2px dotted blue;*/
    border: 2px solid #4778d9;
}

/*#endregion*/



/*#region Custom checkboxes   http://codepen.io/CreativeJuiz/pen/BiHzp  */

/* Base for label styling */
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

    input[type="checkbox"]:not(:checked) + label,
    input[type="checkbox"]:checked + label {
        position: relative;
        padding-left: 28px !important;
        cursor: pointer;
        padding-top: 0px;
        text-align: left;
        font-weight: normal;
        margin-top: 0;
    }

        /* checkbox aspect */
        input[type="checkbox"]:not(:checked) + label:before,
        input[type="checkbox"]:checked + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 17px;
            height: 17px;
            /*border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);*/
            border: 2px solid #888;
            background-color: #fff;
            border-radius: 7px;
        }
        /* checked mark aspect */
        input[type="checkbox"]:not(:checked) + label:after,
        input[type="checkbox"]:checked + label:after {
            content: '✔';
            position: absolute;
            top: 1px;
            left: 4px;
            font-size: 14px;
            line-height: normal;
            color: #09ad7e;
            transition: all .2s;
        }
        /* checked mark aspect changes */
        input[type="checkbox"]:not(:checked) + label:after {
            opacity: 0;
            transform: scale(0);
        }

        input[type="checkbox"]:checked + label:after {
            opacity: 1;
            transform: scale(1);
        }
/* disabled checkbox */
input[type="checkbox"]:disabled:not(:checked) + label:before,
input[type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
}

input[type="checkbox"]:disabled:checked + label:after {
    color: #999;
}

input[type="checkbox"]:disabled + label {
    color: #aaa;
}
/* accessibility */
input[type="checkbox"]:checked:focus + label:before,
input[type="checkbox"]:not(:checked):focus + label:before {
    /*border: 2px dotted blue;*/
    border: 2px solid #4778d9;
}

/* hover style just for information */
input[type="checkbox"] + label:hover:before {
    border: 2px solid #4778d9 !important;
}
/*#endregion*/

/*#region Custom radio butons */

/* Base for label styling */
input[type="radio"]:not(:checked),
input[type="radio"]:checked {
    position: absolute;
    left: -9999px;
}

    input[type="radio"]:not(:checked) + label,
    input[type="radio"]:checked + label {
        position: relative;
        padding-left: 28px !important;
        cursor: pointer;
        padding-top: 0px;
        text-align: left;
        font-weight: normal;
        margin: 0;
        padding-right: 15px;
    }

        /* radio aspect */
        input[type="radio"]:not(:checked) + label:before,
        input[type="radio"]:checked + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 17px;
            height: 17px;
            /*border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);*/
            border: 2px solid #888;
            background-color: #fff;
            border-radius: 7px;
            /*border-radius: 50%;*/
        }
        /* checked mark aspect */
        input[type="radio"]:not(:checked) + label:after,
        input[type="radio"]:checked + label:after {
            content: '✔';
            position: absolute;
            top: 1px;
            left: 4px;
            font-size: 14px;
            line-height: normal;
            color: #09ad7e;
            transition: all .2s;
            /*content: '●';
  position: absolute;
  top: -10px; left: -3px;
  font-size: 28px;
  line-height:normal;
  color: #09ad7e;
  transition: all .2s;*/
        }

input[type="radio"][value="Yes"]:not(:checked) + label:after,
input[type="radio"][value="Yes"]:checked + label:after {
    color: #09ad7e;
}

input[type="radio"][value="No"]:not(:checked) + label:after,
input[type="radio"][value="No"]:checked + label:after {
    content: '✘';
    color: #cc0000;
}
/* checked mark aspect changes */
input[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}

input[type="radio"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}
/* disabled radio */
input[type="radio"]:disabled:not(:checked) + label:before,
input[type="radio"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
}

input[type="radio"]:disabled:checked + label:after {
    color: #999;
}

input[type="radio"]:disabled + label {
    color: #aaa;
}
/* accessibility */
input[type="radio"]:checked:focus + label:before,
input[type="radio"]:not(:checked):focus + label:before {
    /*border: 2px dotted blue;*/
    border: 2px solid #4778d9;
}

/*#endregion*/