﻿/*
Awesome Bootstrap Checkbox for Bootstrap 4
Source: https://github.com/flatlogic/awesome-bootstrap-checkbox/tree/bump-to-bootstrap4    
   - Fixed bug with MVC generated check boxes
      Added one more selector 
   
      ".abc-checkbox input[type="checkbox"]:focus + input[type="hidden"]"
    
   - since MVC creates hidden input value between check box and label
      <div class="checkbox">
        <input id="Field1" name="Field1" type="checkbox" value="true">
        <input name="Field1" type="hidden" value="false">
        <label for="Field1">
            Field Name
        </label>
      </div>
    - Note: For this checkbox to work, you must have <input> followed by <label>

   Bug fix 2 (ELC-107)
   Replaced css custom element with font family.
   font: var(--fa-font-solid); -> font: "Font Awesome 6 Pro";
*/

.abc-checkbox {
   cursor: default;
   padding-left: 20px;
}

.abc-checkbox label:first-of-type {
   cursor: pointer;
   display: inline;
   vertical-align: top;
   position: relative;
   padding-left: 5px;
}

.abc-checkbox label:first-of-type::before {
   cursor: pointer;
   content: "";
   display: inline-block;
   position: absolute;
   width: 17px;
   height: 17px;
   top: 2px;
   left: 0;
   margin-left: -1.25rem;
   border: 1px solid #ced4da;
   border-radius: 3px;
   background-color: #fff;
   transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.abc-checkbox label:first-of-type::after {
   cursor: pointer;
   display: inline-block;
   position: absolute;
   width: 16px;
   height: 16px;
   left: 0;
   top: 2px;
   margin-left: -1.25rem;
   padding-left: 3px;
   padding-top: 1px;
   font-size: 11px;
   color: #495057;
}

.abc-checkbox input[type="checkbox"],
.abc-checkbox input[type="radio"] {
   position: absolute;
   left: 0;
   margin-left: 0;
   cursor: pointer;
   opacity: 0;
   z-index: 1;
}

.abc-checkbox input[type="checkbox"]:focus + label::before,
.abc-checkbox input[type="checkbox"]:focus + input[type="hidden"] + label::before,
.abc-checkbox input[type="radio"]:focus + label::before {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
}

.abc-checkbox input[type="checkbox"]:checked + label::after,
.abc-checkbox input[type="checkbox"]:checked + input[type="hidden"] + label::after,
.abc-checkbox input[type="radio"]:checked + label::after {
   font-family: "Font Awesome 6 Pro";
   content: "\f00c";
   font-weight: 900;
}

.abc-checkbox input[type="checkbox"]:indeterminate + label::after,
.abc-checkbox input[type="checkbox"]:indeterminate + input[type="hidden"] + label::after,
.abc-checkbox input[type="radio"]:indeterminate + label::after {
   display: block;
   content: "";
   width: 10px;
   height: 3px;
   background-color: #555555;
   border-radius: 2px;
   margin-left: -16.5px;
   margin-top: 7px;
}

.abc-checkbox input[type="checkbox"]:disabled + label,
.abc-checkbox input[type="checkbox"]:disabled + input[type="hidden"] + label,
.abc-checkbox input[type="radio"]:disabled + label {
   opacity: 0.65;
}

.abc-checkbox input[type="checkbox"]:disabled + label::before,
.abc-checkbox input[type="checkbox"]:disabled + input[type="hidden"] + label:before,
.abc-checkbox input[type="radio"]:disabled + label::before {
   background-color: #e9ecef;
   cursor: not-allowed;
}

.abc-checkbox input[type="checkbox"]:disabled + label::after,
.abc-checkbox input[type="checkbox"]:disabled + input[type="hidden"] + label:after,
.abc-checkbox input[type="radio"]:disabled + label::after {
   cursor: not-allowed;
}

.abc-checkbox.abc-checkbox-circle label::before {
   border-radius: 50%;
}

.abc-checkbox.checkbox-inline {
   margin-top: 0;
}

.abc-checkbox-primary input[type="checkbox"]:checked + label::before,
.abc-checkbox-primary input[type="checkbox"]:checked + input[type="hidden"] + label:before,
.abc-checkbox-primary input[type="radio"]:checked + label::before {
   background-color: #007bff;
   border-color: #007bff;
}

.abc-checkbox-primary input[type="checkbox"]:checked + label::after,
.abc-checkbox-primary input[type="checkbox"]:checked + input[type="hidden"] + label:before,
.abc-checkbox-primary input[type="radio"]:checked + label::after {
   color: #fff;
}

.abc-checkbox-danger input[type="checkbox"]:checked + label::before,
.abc-checkbox-danger input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.abc-checkbox-danger input[type="radio"]:checked + label::before {
   background-color: #dc3545;
   border-color: #dc3545;
}

.abc-checkbox-danger input[type="checkbox"]:checked + label::after,
.abc-checkbox-danger input[type="checkbox"]:checked + input[type="hidden"] + label::after,
.abc-checkbox-danger input[type="radio"]:checked + label::after {
   color: #fff;
}

.abc-checkbox-info input[type="checkbox"]:checked + label::before,
.abc-checkbox-info input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.abc-checkbox-info input[type="radio"]:checked + label::before {
   background-color: #17a2b8;
   border-color: #17a2b8;
}

.abc-checkbox-info input[type="checkbox"]:checked + label::after,
.abc-checkbox-info input[type="checkbox"]:checked + input[type="hidden"] + label::after,
.abc-checkbox-info input[type="radio"]:checked + label::after {
   color: #fff;
}

.abc-checkbox-warning input[type="checkbox"]:checked + label::before,
.abc-checkbox-warning input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.abc-checkbox-warning input[type="radio"]:checked + label::before {
   background-color: #ffc107;
   border-color: #ffc107;
}

.abc-checkbox-warning input[type="checkbox"]:checked + label::after,
.abc-checkbox-warning input[type="checkbox"]:checked + input[type="hidden"] + label::after,
.abc-checkbox-warning input[type="radio"]:checked + label::after {
   color: #fff;
}

.abc-checkbox-success input[type="checkbox"]:checked + label::before,
.abc-checkbox-success input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.abc-checkbox-success input[type="radio"]:checked + label::before {
   background-color: #28a745;
   border-color: #28a745;
}

.abc-checkbox-success input[type="checkbox"]:checked + label::after,
.abc-checkbox-success input[type="checkbox"]:checked + input[type="hidden"] + label::after,
.abc-checkbox-success input[type="radio"]:checked + label::after {
   color: #fff;
}

.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::before,
.abc-checkbox-primary input[type="checkbox"]:indeterminate + input[type="hidden"] + label::before,
.abc-checkbox-primary input[type="radio"]:indeterminate + label::before {
   background-color: #007bff;
   border-color: #007bff;
}

.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::after,
.abc-checkbox-primary input[type="checkbox"]:indeterminate + input[type="hidden"] + label::after,
.abc-checkbox-primary input[type="radio"]:indeterminate + label::after {
   background-color: #fff;
}

.abc-checkbox-danger input[type="checkbox"]:indeterminate + label::before,
.abc-checkbox-danger input[type="checkbox"]:indeterminate + input[type="hidden"] + label::before,
.abc-checkbox-danger input[type="radio"]:indeterminate + label::before {
   background-color: #dc3545;
   border-color: #dc3545;
}

.abc-checkbox-danger input[type="checkbox"]:indeterminate + label::after,
.abc-checkbox-danger input[type="checkbox"]:indeterminate + input[type="hidden"] + label::after,
.abc-checkbox-danger input[type="radio"]:indeterminate + label::after {
   background-color: #fff;
}

.abc-checkbox-info input[type="checkbox"]:indeterminate + label::before,
.abc-checkbox-info input[type="checkbox"]:indeterminate + input[type="hidden"] + label::before,
.abc-checkbox-info input[type="radio"]:indeterminate + label::before {
   background-color: #17a2b8;
   border-color: #17a2b8;
}

.abc-checkbox-info input[type="checkbox"]:indeterminate + label::after,
.abc-checkbox-info input[type="checkbox"]:indeterminate + input[type="hidden"] + label::after,
.abc-checkbox-info input[type="radio"]:indeterminate + label::after {
   background-color: #fff;
}

.abc-checkbox-warning input[type="checkbox"]:indeterminate + label::before,
.abc-checkbox-warning input[type="checkbox"]:indeterminate + input[type="hidden"] + label::before,
.abc-checkbox-warning input[type="radio"]:indeterminate + label::before {
   background-color: #ffc107;
   border-color: #ffc107;
}

.abc-checkbox-warning input[type="checkbox"]:indeterminate + label::after,
.abc-checkbox-warning input[type="checkbox"]:indeterminate + input[type="hidden"] + label::after,
.abc-checkbox-warning input[type="radio"]:indeterminate + label::after {
   background-color: #fff;
}

.abc-checkbox-success input[type="checkbox"]:indeterminate + label::before,
.abc-checkbox-success input[type="checkbox"]:indeterminate + input[type="hidden"] + label::before,
.abc-checkbox-success input[type="radio"]:indeterminate + label::before {
   background-color: #28a745;
   border-color: #28a745;
}

.abc-checkbox-success input[type="checkbox"]:indeterminate + label::after,
.abc-checkbox-success input[type="checkbox"]:indeterminate + input[type="hidden"] + label::after,
.abc-checkbox-success input[type="radio"]:indeterminate + label::after {
   background-color: #fff;
}

.abc-radio {
   cursor: default;
   padding-left: 20px;
}

.abc-radio label {
   cursor: pointer;
   display: inline;
   vertical-align: top;
   position: relative;
   padding-left: 5px;
}

.abc-radio label::before {
   cursor: pointer;
   content: "";
   display: inline-block;
   position: absolute;
   width: 17px;
   height: 17px;
   top: 2px;
   left: 0;
   margin-left: -20px;
   border: 1px solid #ced4da;
   border-radius: 50%;
   background-color: #fff;
   transition: border 0.15s ease-in-out;
}

.abc-radio label::after {
   cursor: pointer;
   display: inline-block;
   position: absolute;
   content: " ";
   width: 11px;
   height: 11px;
   left: 3px;
   top: 5px;
   margin-left: -20px;
   border-radius: 50%;
   background-color: #495057;
   transform: scale(0, 0);
   transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}

.abc-radio input[type="radio"] {
   position: absolute;
   left: 0;
   cursor: pointer;
   opacity: 0;
   z-index: 1;
}

.abc-radio input[type="radio"]:focus + label::before {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
}

.abc-radio input[type="radio"]:checked + label::after {
   transform: scale(1, 1);
}

.abc-radio input[type="radio"]:disabled + label {
   opacity: 0.65;
}

.abc-radio input[type="radio"]:disabled + label::before {
   cursor: not-allowed;
}

.abc-radio input[type="radio"]:disabled + label::after {
   cursor: not-allowed;
}

.abc-radio.radio-inline {
   margin-top: 0;
}

.abc-radio-primary input[type="radio"] + label::after {
   background-color: #007bff;
}

.abc-radio-primary input[type="radio"]:checked + label::before {
   border-color: #007bff;
}

.abc-radio-primary input[type="radio"]:checked + label::after {
   background-color: #007bff;
}

.abc-radio-danger input[type="radio"] + label::after {
   background-color: #dc3545;
}

.abc-radio-danger input[type="radio"]:checked + label::before {
   border-color: #dc3545;
}

.abc-radio-danger input[type="radio"]:checked + label::after {
   background-color: #dc3545;
}

.abc-radio-info input[type="radio"] + label::after {
   background-color: #17a2b8;
}

.abc-radio-info input[type="radio"]:checked + label::before {
   border-color: #17a2b8;
}

.abc-radio-info input[type="radio"]:checked + label::after {
   background-color: #17a2b8;
}

.abc-radio-warning input[type="radio"] + label::after {
   background-color: #ffc107;
}

.abc-radio-warning input[type="radio"]:checked + label::before {
   border-color: #ffc107;
}

.abc-radio-warning input[type="radio"]:checked + label::after {
   background-color: #ffc107;
}

.abc-radio-success input[type="radio"] + label::after {
   background-color: #28a745;
}

.abc-radio-success input[type="radio"]:checked + label::before {
   border-color: #28a745;
}

.abc-radio-success input[type="radio"]:checked + label::after {
   background-color: #28a745;
}

label .was-validated .form-check-input:invalid .abc-checkbox:before, label
.was-validated .form-check-input:invalid .abc-radio:before, label .form-check-input.is-invalid .abc-checkbox:before, label
.form-check-input.is-invalid .abc-radio:before {
   border-color: #dc3545;
}
