:root{
  --bs-dark-danger: #ae302e;
  --bs-dark-success: #0d7a5b;
}
.ic_required_container {
  text-align:center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -40px;
  margin-bottom: 20px;
  float: right;
  font-size: 14px;
}
.ic_required {
  background-color:#ccc;
  border:none;
  padding:10px 30px 10px 0px;
  color:#fff;
  border-radius:25px;
  box-shadow:0 10px 20px rgba(0,0,0,.1);
  margin-left:10px;
  margin-right:10px;
  transition: all ease 3s;
}

.ic_required:before {
  content:'\f069';
  font-family: FontAwesome;
  background-color:#fff;
  color:#ccc;
  border:1px solid rgba(0,0,0,.1);
  border-radius:25px;
  padding: 8px;
  position:relative;
  left:-10px;
  top:-15px;
  transition: all ease 3s;
}

.ic_completed:before {
  content:'\f00c';
  font-family: FontAwesome;
  background-color:#fff;
  color:#ccc;
  border:1px solid rgba(0,0,0,.1);
  border-radius:25px;
  padding: 8px;
  position:relative;
  left:-10px;
  top:-15px;
  transition: all ease 3s;
}

.ic_completed {
  background-color:#ccc;
  border:none;
  padding:10px 30px 10px 0px;
  color:#fff;
  border-radius:25px;
  box-shadow:0 10px 20px rgba(0,0,0,.1);
  margin-left:10px;
  margin-right:10px;
  transition: all ease 3s;
}

.ic_required_active {
  background-color: var(--bs-dark-danger);
}

.ic_required_active:before {
  color:var(--bs-dark-danger);
}

.ic_completed_active {
  background-color:var(--bs-dark-success);
}

.ic_completed_active:before {
  color:var(--bs-dark-success);
}

@media (max-width: 1300px) {
  .ic_required_container {
      margin-top: -10px;
      margin-bottom: 20px; 
      font-size: 12px;
  }

  .ic_required,
  .ic_completed {
      padding: 5px 15px 5px 0px;
      box-shadow: 0 5px 10px rgba(0,0,0,.1);
  }

  .ic_required:before,
  .ic_completed:before {
      padding: 5px 5px 5px 5px;
      left: -5px;
      top: -8px;
      font-size: 10px;
  }
}

@media (max-width: 991px) {
  .ic_required_container {
      margin-top: -10px;
      margin-bottom: 20px;
      float: none;
      font-size: 12px;
  }

  .ic_required,
  .ic_completed {
      padding: 5px 15px 5px 0px;
      box-shadow: 0 5px 10px rgba(0,0,0,.1);
  }

  .ic_required:before,
  .ic_completed:before {
      padding: 5px 5px 5px 5px;
      left: -5px;
      top: -8px;
      font-size: 10px;
  }
}