.ccmp {
    position: relative;
    min-height: 200px;
    padding: 20px;
}

.ccmp__loading {
    background: #c1c1c18c;
    display: flex;
    margin: auto;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    z-index: 100;
}

.ccmp_loading-text {
    font-size: 14px;
    margin: 0;
}

.ccmp__lists-container {
    padding-bottom: 20px;
}

.not-ready.ccmp__lists li {
    background: hsl(0,0%,89%);
    color: transparent;
    margin-bottom: 10px
}

/* 
.ccmp__lists li input[type=checkbox] + label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
} */

.ccmp__lists li input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 25px;
    height: 25px;
    border: 3px solid #264970;
    background: #fff;
    top: 5px;
    margin-right: 10px;
    margin-left: 10px;
    outline: none;
}

.ccmp__lists li input[type=checkbox]:after {
    content: "";
    opacity: 0;
    display: block;
    left: 5px;
    top: 2px;
    position: absolute;
    width: 7px;
    height: 13px;
    border: 3px solid #941A29;
    border-top: 0;
    border-left: 0;
    transform: rotate(30deg);
}

.ccmp__lists li input[type=checkbox]:checked:after {
   opacity: 1;
}
/*

.ccmp__lists li input[type=checkbox] + label:before {
  content: "\2714";
  border: 0.1em solid #000;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

.ccmp__lists li input[type=checkbox] + label:active:before {
  transform: scale(0);
}

.ccmp__lists li input[type=checkbox]:checked + label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #fff;
}

.ccmp__lists li input[type=checkbox]:disabled + label:before {
  transform: scale(1);
  border-color: #aaa;
}

.ccmp__lists li input[type=checkbox]:checked:disabled + label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
} */

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 18px;
}
  .lds-ellipsis div {
    position: absolute;
    top: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #264970;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(24px, 0);
    }
  }