/************* NEW CHECKBOX */
.newcheckbox {
  display: block;
  position: relative;
  padding-left: 22px;
  margin-bottom: 0px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  border: solid lightgray 0.5px;
  border-radius:2px;
}

/* On mouse-over, add a grey background color */
.newcheckbox:hover input ~ .checkmark {
  background-color: #ccc;
}



/* When the checkbox is checked, add a blue background */
.newcheckbox input:checked ~ .checkmark {
  background-color: #17a2b8;
}


/* When the checkbox is disabled, add a gray background */
.newcheckbox input:checked[disabled]~ .checkmark {
  background-color: #cccccc;
}
/* When the checkbox is disabled, add a gray background */
.newcheckbox:hover input:disabled~ .checkmark {
  background-color: #FFFFFF;
}

/* When the checkbox is disabled, add a gray background */
.newcheckbox:hover input:checked[disabled]~ .checkmark {
  background-color: #cccccc;
}

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

/* Show the checkmark when checked */
.newcheckbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.newcheckbox .checkmark:after {
  width: 10px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/************** NEWRADIO */
/* Customize the label (the container) */
.newradio {
  display: block;
  position: relative;
  padding-left: 22px;
  margin-bottom: 0px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Create a custom radio button */
.radiomark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  border: solid #17a2b8 0.5px;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.newradio:hover input ~ .radiomark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.newradio input:checked ~ .radiomark {
  border-color: #17a2b8;
}

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

/* Show the indicator (dot/circle) when checked */
.newradio input:checked ~ .radiomark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.newradio .radiomark:after {
  top: 3px;
  left: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #17a2b8;
}


/* CHANGE BACKGROUND OF CUSTOM SWITCH */
	.custom-control-input:focus ~  
          .custom-control-label::before { 
                /* when the button is toggled off  
				it is still in focus and a violet border will appear */ 
                border-color: #17a2b8 !important; 
                /* box shadow is blue by default 
  but we do not want any shadow hence we have set  
  all the values as 0 */ 
                box-shadow: 
                  0 0 0 0rem rgba(0, 0, 0, 0) !important; 
            } 
  
            /*sets the background color of 
          switch to violet when it is checked*/ 
            .custom-control-input:checked ~  
          .custom-control-label::before { 
                border-color: #17a2b8 !important; 
                background-color: #17a2b8 !important; 
            } 
  
            /*sets the background color of 
          switch to violet when it is active*/ 
            .custom-control-input:active ~  
          .custom-control-label::before { 
                background-color: #17a2b8 !important; 
                border-color: #17a2b8 !important; 
            } 
  
            /*sets the border color of switch 
          to violet when it is not checked*/ 
            .custom-control-input:focus: 
          not(:checked) ~ .custom-control-label::before { 
                border-color: #17a2b8 !important; 
            } 
	

/* sets the bakground to white when disabled */

 .form-control:disabled  { 
                background-color: white!important; 
				border-top:none!important;
				border-bottom:none!important;
				border-right:none!important;
				border-radius:0!important;
            } 
 .form-comp:disabled  { 
                background-color: white!important; 
				border-top:none!important;
				border-bottom:none!important;
				border-right:none!important;
				border-radius:0!important;
            } 			
 .custom-select:disabled  { 
                background-color: white!important; 
				background: none !important;
				color: black!important;
				border-top:none!important;
				border-bottom:none!important;
				border-right:none!important;
				border-radius:0!important;
				-webkit-appearance: none!important;
				-moz-appearance: none!important;
				 appearance: none!important;
            } 	


.expand_caret {
    transform: scale(1.2);
    margin-left: 8px;
    margin-top: -4px;
}
td[aria-expanded='true'] > .expand_caret {
    transform: scale(1.2) rotate(90deg);
}