input {
    border-color: #d9d9d9 !important;
    padding-left: $spacing16 !important;
    color: var(--bodyColor) !important;
    border-width: $border1 !important;
    font-size: $fontSize16 !important;
    line-height: $lineHeight24 !important;
    background-color: var(--elevate0) !important;
    box-shadow: none !important;
    &:hover {
      border-color: var(--primaryColorMain) !important;
      border-width: $border1e5 !important;
    }
    &:focus {
      border-color: var(--primaryColorMain) !important;
      border-width: $border1e5 !important;
    }
    &:active {
      border-color: var(--gray500) !important;
      border-width: $border1e5 !important;
    }
    &:disabled {
      border-color: var(--gray500) !important;
      border-width: $border1 !important;
      background-color: var(--gray100), var(--gray500) !important;
      cursor: not-allowed !important;
      color: var(--gray500);
    }
    &.ng-invalid.ng-touched:not([type=checkbox]):not([type=radio]){
      border-color: var(--errorColorMain) !important;
      background-image: var(--xCircleMarkError);
      background-repeat: no-repeat;
      background-position: left calc(0.375em + 0.1875rem) center;
      background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
      border-width: $border2 !important;
      padding-left: $spacing40 !important;
    }
    &.show-valid.ng-valid.ng-touched {
      border-color: var(--successColorMain) !important;
    }
  
    &.h-sm {
      height: $h-sm !important;
      padding: $spacing16 !important;
    }
    &.h-md {
      height: $h-md !important;
      padding: $spacing12 $spacing16 !important;
    }
    &.h-lg {
      height: $h-lg !important;
      padding: $spacing8 $spacing16 !important;
    }
    
  }