.radio-button-group-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  margin: 0 auto;

  .radio-button-group {
    // width: 430px;
    width: 350px;
    margin-left: 20px;
  }

  .toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 110px;

    ui-switch {
      position: relative;
      top: 3px;
    }

    span {
      font-size: 16px;
      color: #9cb1c6;
      text-align: left;
      line-height: 21px;
    }

    span.active {
      color: #1f466c;
    }
  }
}

// Our stlyes for swith components
:host ::ng-deep ui-switch span {
  background-color: transparent !important;
  border: 2px solid #9cb1c6 !important;
}

:host ::ng-deep ui-switch span.checked {
  border: 2px solid #1f466c !important;
  background-color: #1f466c !important;
}

:host ::ng-deep ui-switch .switch-medium {
  height: 28px !important;
}

:host ::ng-deep ui-switch .switch-medium small {
  width: 28px !important;
  height: 28px !important;
  top: -2px;
  left: -2px;
  box-shadow: none !important;
  border: 2px solid #9cb1c6 !important;
  background-color: transparent !important;
}

:host ::ng-deep ui-switch span.checked small {
  border: 2px solid #1f466c !important;
  background-color: #fff !important;
}
