/* Start: Tab step */
.tabs-step .step-adverse-event span::before {
  content: '';
  width: 24px;
  height: 25px;
  display: block;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  margin-bottom: 10px;
  background-color: #a1a4ac;
}

.tabs-step #step-event span::before {
  -webkit-mask-image: url('../images/event-icon.svg');
  mask-image: url('../images/event-icon.svg');
}

.tabs-step #step-patient span::before {
  -webkit-mask-image: url('../images/patient-icon.svg');
  mask-image: url('../images/patient-icon.svg');
}

.tabs-step #step-you span::before {
  -webkit-mask-image: url('../images/you-icon.svg');
  mask-image: url('../images/you-icon.svg');
}

.tabs-step #step-additional span::before {
  -webkit-mask-image: url('../images/additional-icon.svg');
  mask-image: url('../images/additional-icon.svg');
}

.tabs-step .step-adverse-event.step-passed span::before {
  background-color: var(--takeda-blue);
}

.tabs-step .step-adverse-event.step-inprogress span::before {
  background-color: #FFFFFF;
}

.tabs-step .step-adverse-event a {
  color: #a1a4ac;
  background-color: #FFFFFF;
  padding: 8px 23px;
  display: block;
  height: 100%;
}
.tabs-step .step-adverse-event.step-passed a {
  color: var(--takeda-blue);
  background-color: var(--takeda-blue-background);
}
.tabs-step .step-adverse-event.step-passed {
  border: 1px solid var(--takeda-blue);
}
.tabs-step .step-adverse-event.step-passed:not(:first-child){
  border-left: 0;
}
.tabs-step .step-adverse-event.step-inprogress a {
  color: #FFFFFF;
  background-color: var(--takeda-blue);
  border-color: var(--takeda-blue);
}

.tabs-step #step-product span::before {
  -webkit-mask-image: url('../images/product-icon.svg');
  mask-image: url(../images/product-icon.svg);
}

.tabs-step .step-adverse-event {
  max-width: 30%;
  width: 100%;
  position: relative;
  border: 1px solid #D9D9D9;
  border-left: 0;
}

.tabs-step .step-passed.step-adverse-event:last-child {
  border-right: 1px solid var(--takeda-blue);
}
.tabs-step .step-adverse-event:last-child{
  border-right: 0;
}

.tabs-step .step-adverse-event:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 15px;
  height: 15px;
  background-color: #ffffff;
  border-top: 1px solid #D9D9D9;
  border-right: 1px solid #D9D9D9;
  transform: rotate(45deg) translateY(-50%);
  z-index: 1;
}
.tabs-step .step-passed.step-adverse-event:not(:last-child)::after {
  border-top: 1px solid var(--takeda-blue);
  border-right: 1px solid var(--takeda-blue);
}
.tabs-step .step-adverse-event.step-passed::after{
  background-color: var(--takeda-blue-background);
}

.tabs-step .step-adverse-event.step-inprogress::after{
  background-color: var(--takeda-blue);
}

@media screen and (max-width: 992px) {
  .tabs-step {
    width: 100%;
    overflow-x: auto;
  }

  .tabs-step .step-adverse-event {
    max-width: unset;
  }
}

.step-adverse-event.step-inprogress{
  border-color: var(--takeda-blue)
}

/* End: Tab step */