app/styles/components/_role-type-options.scss
.role-type-select__label {
  display: block;
  width: 100%;
}

.role-type-option {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.08);
  border-radius: 3px;
  height: 200px;
  text-align: center;
  margin-bottom: 20px;
  padding: 40px 35px;
  cursor: pointer;
  display: block;
  transition: all 0.3s ease;

  &:hover {
    border-color: $color-bright-blue;
    box-shadow: 0 0 8px rgba($color-bright-blue, .5);
  }
}

.role-type-select[data-role-type=platform_user]
  .role-type-option[data-option-value=platform_user],
.role-type-select[data-role-type=compliance_user]
  .role-type-option[data-option-value=compliance_user] {
  background: $color-bright-blue;
  border-color: $color-bright-blue;
  .role-type-option__name {
    color: #FFFFFF;
  }
  .role-type-option__info {
    color: #C7EFFF;
  }

  &:hover {
    box-shadow: none;
  }
}

.role-type-option__name {
  color: #4A4A4A;
  font-weight: $weight-semibold;
  font-size: 16px;
  margin-bottom: 15px;
  margin-top: 0;
}

.role-type-option__info {
  color: #9B9B9B;
  font-size: 14px;
}
