.custom_check_text.negro {color:rgba(255,255,255,0.7);}

/* Checkbox */
label .custom_check {
    display: block;
    position: relative;
    padding-left: 0px;
    margin-left: 15px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer !important;
    font-size:inherit;
}

.only_check {width:18px; height:24px; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}

/* Hide the browser's default checkbox */
.custom_check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    cursor: pointer !important;
}

.custom_check_text {padding-left: 24px; cursor: pointer !important; font-size:inherit; margin-bottom:0px; line-height:1.6rem; font-size:15px;}

@media all and (-ms-high-contrast:none) {
    .custom_check_text {line-height:1.55rem;} /* IE10 */
    *::-ms-backdrop, .custom_check_text {line-height:1.55rem;} /* IE11 */
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 4.5px;
    left: 16px;
    height: 16px;
    width: 16px;
    background-color: rgba(255,255,255,0.1);
    cursor: pointer !important;
    transition:0.3s;
}

/* On mouse-over, add a grey background color */
.custom_check:hover input ~ .checkmark {background-color: rgba(255,255,255,0.2); transition: 0.3s;}

/* When the checkbox is checked, add a black background */
.custom_check input:checked ~ .checkmark {background-color: white; transform:rotate(90deg);}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {content: ""; position: absolute; display: none;}

/* Show the checkmark when checked */
.custom_check input:checked ~ .checkmark:after {display: block; transform:rotate(-45deg);}

/* Style the checkmark/indicator */
.custom_check .checkmark:after {
    left: 4px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #333333;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Checkbox 2 (solo cambia el checkmark)*/

/* Create a custom checkbox */
.checkmark_2 {
    position: absolute;
    top: 4.5px;
    left: 16px;
    height: 16px;
    width: 16px;
    background-color: #CECECE;
    cursor: pointer !important;
    transition:0.3s;
}

/* On mouse-over, add a grey background color */
.custom_check:hover input ~ .checkmark_2 {background-color: #ccc; transition: 0.3s;}

/* When the checkbox is checked, add a black background */
.custom_check input:checked ~ .checkmark_2 {background-color: #6686C1; transform:rotate(90deg);}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark_2:after {content: ""; position: absolute; display: none;}

/* Show the checkmark when checked */
.custom_check input:checked ~ .checkmark_2:after {display: block; transform:rotate(-45deg);}

/* Style the checkmark/indicator */
.custom_check .checkmark_2:after {
    left: 4px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Checkbox General Desactivado */
[data-editable="false"] .custom_check {opacity: 0.4 !important; cursor:not-allowed !important;}
[data-editable="false"] .custom_check .custom_check_text, [data-editable="false"] .custom_check span {cursor:not-allowed !important;}

.custom_check[data-editable="false"] {opacity: 0.4 !important; cursor: default;}
.custom_check[data-editable="false"] input {cursor: default;}

[data-editable="false"] input ~ .checkmark {background-color: #ccc;}

/* Checkbox 1 Desactivado (Necesario) */
[data-editable="false"] input:checked ~ .checkmark {background-color: #ccc !important;}
[data-editable="false"]:hover input ~ .checkmark {background-color: #ccc !important;}

/* Checkbox 2 Desactivado (Necesario) */
[data-editable="false"] input ~ .checkmark_2 {background-color: #ccc;}
[data-editable="false"] input:checked ~ .checkmark_2 {background-color: #ccc !important;}
[data-editable="false"]:hover input ~ .checkmark_2 {background-color: #ccc !important;}


/* special_checkbox */
.parentspecial_checkbox, .parentspecial_checkbox i {font-size:17px; cursor:pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.parentspecial_checkbox .special_checkboxText {font-size:14px; font-weight:bold; color: #4C4C4C;}
.special_checkbox {transition:0.3s; line-height:0rem;}
.special_checkbox.fas.fa-square {transform:rotate(-90deg);}
.special_checkbox.fas.fa-minus-square {transform:rotate(0deg); color:#333333;}
.special_checkbox.fas.fa-check-square {animation:specialcheckboxActive 0.4s; color:#6686C1;}
@keyframes specialcheckboxActive {
    0% {transform:scale(1);}
    50% {transform:scale(1.3);}
    100% {transform:scale(1);}
}

.parentspecial_checkbox[data-editable="false"], .parentspecial_checkbox[data-editable="false"] i, .parentspecial_checkbox[data-editable="false"] span {cursor:not-allowed;}
.parentspecial_checkbox[data-editable="false"] {opacity:0.4; cursor: default;}
.container_special_checkbox {margin-right:0.5rem !important; color:#CCCCCC;}

/* Radio button */

/* The container */
.container_radio {
 display:block;
  position: relative;
  padding-left: 23px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container_radio span {font-size:15px;}
.container_radio .container_radio_text {font-size:14px; padding-top:0.15rem;}
.container_radio .container_radio_text.blanco {color:white; font-weight:normal;}

/* Hide the browser's default radio button */
.container_radio input {
  position: absolute;
  width:0px;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark_radio {
  position: absolute;
  top:5px;
  left: 0px;
  height: 15px;
  width: 15px;
  background-color: #CECECE;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container_radio:hover input ~ .checkmark_radio {background-color: #ccc; transition:0.3s;}

/* When the radio button is checked, add a blue background */
.container_radio input:checked ~ .checkmark_radio {background-color: #6686C1;}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark_radio:after {content: ""; position: absolute; display: none;}

/* Show the indicator (dot/circle) when checked */
.container_radio input:checked ~ .checkmark_radio:after {display: block; animation: spawn 0.4s forwards;}

/* Style the indicator (dot/circle) */
.container_radio .checkmark_radio:after {
  left: 5px;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
}


/* Radio button Desactivado */
.container_radio[data-editable="false"] {opacity: 0.4 !important; cursor:not-allowed !important;}
.container_radio[data-editable="false"] container_radio_text, .container_radio[data-editable="false"] .checkmark_radio {cursor:not-allowed !important;}

.container_radio[data-editable="false"] {opacity: 0.4 !important; cursor: not-allowed;}
.container_radio[data-editable="false"] input {cursor: not-allowed;}

[data-editable="false"] input ~ .checkmark {background-color: #ccc;}

/* Radio button 1 Desactivado (Necesario) */
[data-editable="false"] input ~ .checkmark_radio {background-color: #ccc;}
[data-editable="false"] input:checked ~ .checkmark_radio {background-color: #ccc !important;}
[data-editable="false"]:hover input ~ .checkmark_radio {background-color: #ccc !important;}

/* Radio button 2 Desactivado (Necesario) */
[data-editable="false"] input ~ .checkmark_radio {background-color: #ccc;}
[data-editable="false"] input:checked ~ .checkmark_radio {background-color: #ccc !important;}
[data-editable="false"]:hover input ~ .checkmark_radio {background-color: #ccc !important;}