: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_container .ic_required {
  background-color:#ccc;
  border:none;
  padding: 5px 30px 5px 5px;
  color:#fff;
  border-radius:25px !important;
  box-shadow:0 10px 20px rgba(0,0,0,.1);
  margin-left:10px;
  margin-right:10px;
  transition: all ease 3s;
}

.ic_required_container  .ic_required_icon {
  display: inline-flex  ;
  background-color: #fff;
  color: #ccc;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 50% !important;
  position: relative;
  left: -10px;
  top: -15px;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
}

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

.ic_required_container .ic_required_active i {
  color:var(--bs-dark-danger) !important;
}

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

.ic_required_container .ic_completed_active i {
  color:var(--bs-dark-success) !important;
}

.ic_required_container .bg_white_active {
    background-color: #fff !important;
    color: #000 !important;
}

.ic_required_container.bg_white_active i {
    color: #000 !important;
}

@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;
  }
}