input[type=checkbox] {
  -moz-appearance: none;
  -webkit-appearance: none;
  /*background-color: #fafafa;*/
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 7px !important;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-left: 0px;
  margin-bottom: 2px;
  vertical-align: bottom; }

input[type=checkbox], input[type=checkbox]:focus {
  outline: none; }

input[type=checkbox]:active, input[type=checkbox]:checked:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1); }

input[type=checkbox]:checked {
  background-color: #50AAAD;
  /*border: 1px solid #adb8c0;*/
  color: #99a1a7; }

input[type=checkbox]:checked:before {
  content: '\2714';
  font-size: 11px;
  position: absolute;
  top: -1px;
  left: 2.5px;
  color: white; }

input[type=checkbox]:disabled {
  border-color: darkgrey;
  border-style: solid;
  border-width: 1px;
  background-color: #ebebe4;
  color: #545454;
  cursor: not-allowed; }

input[type=radio] {
  -webkit-appearance: none;
  /*background-color: #fafafa;*/
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 0px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-bottom: 2px;
  margin-left: 2px;
  vertical-align: bottom;
  height: 14px;
  width: 14px; }

/*
input[type=radio], input[type=checkbox]:focus {
    outline: none;
}

    input[type=radio]:active, input[type=radio]:checked:active {
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
    }

    input[type=radio]:checked {
        border: 1px solid #50AAAD;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
        color: #99a1a7;
    }

        input[type=radio]:checked:after {
            content: '\25CF';
            font-size: 1.8rem;
            position: absolute;
            top: -0.8rem;
            left: -2px;
            color: #50AAAD;
        }

    input[type=radio]:disabled {
        border-color: darkgrey;
        border-style: solid;
        border-width: 1px;
        background-color: rgb(235, 235, 228);
        color: rgb(84, 84, 84);
        cursor: not-allowed;
    }
    */
/* The container */
.radioContainer {
  position: relative;
  padding-left: 1.5rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: solid 1px double; }

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

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  background-color: #eee;
  border: solid grey thin; }

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

/* When the radio button is checked, add a blue background */
.radioContainer input:checked ~ .checkmark {
  background-color: white; }

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

/* Highlight invalid*/
.input-validation-error + .checkmark {
  outline: #C35856 auto 1px; }

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

/* Style the indicator (dot/circle) */
.radioContainer .checkmark:after {
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #50AAAD; }