input[type='file']:focus,
  input[type='radio']:focus,
  input[type='checkbox']:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }

  
  output {
    display: block;
    padding-top: 15px;
    color: @neutral-fg-2-normal;
    font-size: @font-size-body-m;
    line-height: @font-line-height;
  }
}


@form-prefix-cls: ~'@{ant-prefix}-form';
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
@form-font-height: ceil(@font-size-body-m * @line-height-base);

.@{form-prefix-cls} {
  .reset-component();
  .reset-form();

  .@{form-prefix-cls}-text {
    display: inline-block;
    padding-right: 8px;
  }

  
  
  
  .formSize(@input-height) {
    .@{form-item-prefix-cls}-label > label {
      height: @input-height;
    }

    .@{form-item-prefix-cls}-control-input {
      min-height: @input-height;
    }
  }

  &-small {
    .formSize(@input-height-sm);
  }

  &-large {
    .formSize(@input-height-lg);
  }
}

.explainAndExtraDistance(@num) when (@num >= 0) {
  padding-top: floor(@num);
}

.explainAndExtraDistance(@num) when (@num < 0) {
  margin-top: ceil(@num);
  margin-bottom: ceil(@num);
}




.@{form-item-prefix-cls} {
  .reset-component();

  margin-bottom: @form-item-margin-bottom;
  vertical-align: top;

  &-with-help {
    transition: none;
  }

  &-hidden,
  &-hidden.@{ant-prefix}-row {
    
    display: none;
  }

  
  
  
  &-label {
    display: inline-block;
    flex-grow: 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;

    &-left {
      text-align: left;
    }

    &-wrap {
      overflow: unset;
      line-height: (@line-height-base - 0.25em);
      white-space: unset;
    }

    > label {
      position: relative;
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      height: @form-item-label-height;
      color: @neutral-fg-3-normal;
      font-size: @font-size-body-m;

      > .@{iconfont-css-prefix} {
        font-size: @font-size-body-m;
        vertical-align: top;
      }

      
      &.@{form-item-prefix-cls}-required:not(.@{form-item-prefix-cls}-required-mark-optional)::before {
        display: inline-block;
        margin-right: 4px;
        color: @status-error-fg-1-normal;
        font-size: @font-size-body-m;
        font-family: SimSun, sans-serif;
        line-height: 1;
        content: '*';

        .@{form-prefix-cls}-hide-required-mark & {
          display: none;
        }
      }

      
      .@{form-item-prefix-cls}-optional {
        display: inline-block;
        margin-left: @margin-xss;
        color: @neutral-fg-3-normal;

        .@{form-prefix-cls}-hide-required-mark & {
          display: none;
        }
      }

      
      .@{form-item-prefix-cls}-tooltip {
        color: @neutral-fg-3-normal;
        cursor: help;
        writing-mode: horizontal-tb;
        margin-inline-start: @margin-xss;
      }

      &::after {
        & when (@form-item-trailing-colon=true) {
          content: ':';
        }
        & when not (@form-item-trailing-colon=true) {
          content: ' ';
        }

        position: relative;
        top: -0.5px;
        margin: 0 @form-item-label-colon-margin-right 0 @form-item-label-colon-margin-left;
      }

      &.@{form-item-prefix-cls}-no-colon::after {
        content: ' ';
      }
    }
  }

  
  
  
  &-control {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &:first-child:not([class^=~"'@{ant-prefix}-col-'"]):not([class*=~"' @{ant-prefix}-col-'"]) {
      width: 100%;
    }
  }

  &-control-input {
    position: relative;
    display: flex;
    align-items: center;
    min-height: @input-height-base;

    &-content {
      flex: auto;
      max-width: 100%;
    }
  }

  
  
  
  &-explain,
  &-extra {
    clear: both;
    color: @neutral-fg-3-normal;
    font-size: @font-size-body-m;
    line-height: @font-line-height;
    transition: color 0.3s @ease-out; 
    .explainAndExtraDistance((@form-item-margin-bottom - @form-font-height) / 2);
  }

  &-explain-connected {
    width: 100%;
  }

  &-extra {
    min-height: @form-item-margin-bottom;
  }

  &-with-help &-explain {
    height: auto;
    
    opacity: 1;
  }

  
  
  
  &-feedback-icon {
    font-size: @font-size-body-m;
    text-align: center;
    visibility: visible;
    animation: zoomIn 0.3s @ease-out-back;
    pointer-events: none;

    &-success {
      color: @status-success-fg-1-normal;
    }

    &-error {
      color: @status-error-fg-1-normal;
    }

    &-warning {
      color: @status-warning-fg-1-normal;
    }

    &-validating {
      color: @brand-fg-1-normal;
    }
  }
}



.@{ant-prefix}-show-help {
  transition: opacity @animation-duration-slow @ease-in-out;

  &-appear,
  &-enter {
    opacity: 0;

    &-active {
      opacity: 1;
    }
  }

  &-leave {
    opacity: 1;

    &-active {
      opacity: 0;
    }
  }
}


.@{ant-prefix}-show-help-item {
  overflow: hidden;
  transition: height @animation-duration-slow @ease-in-out,
    opacity @animation-duration-slow @ease-in-out, transform @animation-duration-slow @ease-in-out !important;

  &-appear,
  &-enter {
    transform: translateY(-5px);
    opacity: 0;

    &-active {
      transform: translateY(0);
      opacity: 1;
    }
  }

  &-leave {
    transition: height @animation-duration-base @ease-in-out,
      opacity @animation-duration-base @ease-in-out, transform @animation-duration-base @ease-in-out !important;
  }

  &-leave-active {
    transform: translateY(-5px);
  }
}



@keyframes diffZoomIn1 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes diffZoomIn2 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes diffZoomIn3 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}


@form-prefix-cls: ~'@{ant-prefix}-form';
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';

.@{form-prefix-cls} {
  &-rtl {
    direction: rtl;
  }
}




.@{form-item-prefix-cls} {
  
  
  
  &-label {
    .@{form-prefix-cls}-rtl & {
      text-align: left;
    }

    > label {
      &.@{form-item-prefix-cls}-required::before {
        .@{form-prefix-cls}-rtl & {
          margin-right: 0;
          margin-left: 4px;
        }
      }

      &::after {
        .@{form-prefix-cls}-rtl & {
          margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right;
        }
      }

      .@{form-item-prefix-cls}-optional {
        .@{form-prefix-cls}-rtl & {
          margin-right: @margin-xss;
          margin-left: 0;
        }
      }
    }
  }

  
  
  
  &-control {
    .@{ant-prefix}-col-rtl &:first-child {
      width: 100%;
    }
  }

  
  &-has-feedback {
    .@{ant-prefix}-input {
      .@{form-prefix-cls}-rtl & {
        padding-right: @input-padding-horizontal-base;
        padding-left: 24px;
      }
    }

    .@{ant-prefix}-input-affix-wrapper {
      .@{ant-prefix}-input-suffix {
        .@{form-prefix-cls}-rtl & {
          padding-right: @input-padding-horizontal-base;
          padding-left: 18px;
        }
      }
      .@{ant-prefix}-input {
        .@{form-prefix-cls}-rtl & {
          padding: 0;
        }
      }
    }

    .@{ant-prefix}-input-number-affix-wrapper {
      .@{ant-prefix}-input-number {
        .@{form-prefix-cls}-rtl & {
          padding: 0;
        }
      }
    }

    .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
      .@{ant-prefix}-input-suffix {
        .@{form-prefix-cls}-rtl & {
          right: auto;
          left: 28px;
        }
      }
    }

    .@{ant-prefix}-input-number {
      .@{form-prefix-cls}-rtl & {
        padding-left: 18px;
      }
    }

    > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
    > .@{ant-prefix}-select .@{ant-prefix}-select-clear,
    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-clear,
    :not(.@{ant-prefix}-input-number-group-addon)
      > .@{ant-prefix}-select
      .@{ant-prefix}-select-arrow,
    :not(.@{ant-prefix}-input-number-group-addon)
      > .@{ant-prefix}-select
      .@{ant-prefix}-select-clear {
      .@{form-prefix-cls}-rtl & {
        right: auto;
        left: 32px;
      }
    }

    > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
    :not(.@{ant-prefix}-input-group-addon)
      > .@{ant-prefix}-select
      .@{ant-prefix}-select-selection-selected-value,
    :not(.@{ant-prefix}-input-number-group-addon)
      > .@{ant-prefix}-select
      .@{ant-prefix}-select-selection-selected-value {
      .@{form-prefix-cls}-rtl & {
        padding-right: 0;
        padding-left: 42px;
      }
    }

    .@{ant-prefix}-cascader-picker {
      &-arrow {
        .@{form-prefix-cls}-rtl & {
          margin-right: 0;
          margin-left: 19px;
        }
      }

      &-clear {
        .@{form-prefix-cls}-rtl & {
          right: auto;
          left: 32px;
        }
      }
    }

    .@{ant-prefix}-picker {
      .@{form-prefix-cls}-rtl & {
        padding-right: @input-padding-horizontal-base;
        padding-left: @input-padding-horizontal-base + @font-size-base * 1.3;
      }

      &-large {
        .@{form-prefix-cls}-rtl & {
          padding-right: @input-padding-horizontal-lg;
          padding-left: @input-padding-horizontal-lg + @font-size-base * 1.3;
        }
      }

      &-small {
        .@{form-prefix-cls}-rtl & {
          padding-right: @input-padding-horizontal-sm;
          padding-left: @input-padding-horizontal-sm + @font-size-base * 1.3;
        }
      }
    }

    &.@{form-item-prefix-cls} {
      &-has-success,
      &-has-warning,
      &-has-error,
      &-is-validating {
        
        .@{form-item-prefix-cls}-children-icon {
          .@{form-prefix-cls}-rtl & {
            right: auto;
            left: 0;
          }
        }
      }
    }
  }
}


.@{form-prefix-cls}-inline {
  .@{form-prefix-cls}-item {
    .@{form-prefix-cls}-rtl& {
      margin-right: 0;
      margin-left: 16px;
    }
  }
}


.make-vertical-layout-label() {
  .@{form-prefix-cls}-rtl& {
    text-align: right;
  }
}


@root-entry-name: default;



.@{row-prefix-cls} {
  display: flex;
  flex-flow: row wrap;
  min-width: 0;

  &::before,
  &::after {
    display: flex;
  }

  
  &-no-wrap {
    flex-wrap: nowrap;
  }
}


.@{row-prefix-cls}-start {
  justify-content: flex-start;
}


.@{row-prefix-cls}-center {
  justify-content: center;
}


.@{row-prefix-cls}-end {
  justify-content: flex-end;
}


.@{row-prefix-cls}-space-between {
  justify-content: space-between;
}


.@{row-prefix-cls}-space-around {
  justify-content: space-around;
}


.@{row-prefix-cls}-space-evenly {
  justify-content: space-evenly;
}


.@{row-prefix-cls}-top {
  align-items: flex-start;
}


.@{row-prefix-cls}-middle {
  align-items: center;
}


.@{row-prefix-cls}-bottom {
  align-items: flex-end;
}

.@{col-prefix-cls} {
  position: relative;
  max-width: 100%;
  
  min-height: 1px;
}

.make-grid();






.make-grid(-xs);






@media (min-width: @screen-sm-min) {
  .make-grid(-sm);
}





@media (min-width: @screen-md-min) {
  .make-grid(-md);
}





@media (min-width: @screen-lg-min) {
  .make-grid(-lg);
}





@media (min-width: @screen-xl-min) {
  .make-grid(-xl);
}





@media (min-width: @screen-xxl-min) {
  .make-grid(-xxl);
}


.@{row-prefix-cls} {
  &-rtl {
    direction: rtl;
  }
}


.loop-grid-columns(@index, @class) when (@index > 0) {
  .@{col-prefix-cls}@{class}-push-@{index} {
    
    &.@{col-prefix-cls}-rtl {
      right: percentage((@index / @grid-columns));
      left: auto;
    }
  }

  .@{col-prefix-cls}@{class}-pull-@{index} {
    
    &.@{col-prefix-cls}-rtl {
      right: auto;
      left: percentage((@index / @grid-columns));
    }
  }

  .@{col-prefix-cls}@{class}-offset-@{index} {
    
    &.@{col-prefix-cls}-rtl {
      margin-right: percentage((@index / @grid-columns));
      margin-left: 0;
    }
  }
}

.loop-grid-columns(@index, @class) when (@index = 0) {
  .@{col-prefix-cls}-push-@{index} {
    
    &.@{col-prefix-cls}-rtl {
      right: auto;
    }
  }

  .@{col-prefix-cls}-pull-@{index} {
    &.@{col-prefix-cls}-rtl {
      left: auto;
    }
  }

  .@{col-prefix-cls}@{class}-push-@{index} {
    &.@{col-prefix-cls}-rtl {
      right: auto;
    }
  }

  .@{col-prefix-cls}@{class}-pull-@{index} {
    &.@{col-prefix-cls}-rtl {
      left: auto;
    }
  }

  .@{col-prefix-cls}@{class}-offset-@{index} {
    &.@{col-prefix-cls}-rtl {
      margin-right: 0;
    }
  }
}


@root-entry-name: default;


@icon-prefix-cls: ~'@{ant-prefix}-icon';

@root-entry-name: default;


@image-prefix-cls: ~'@{ant-prefix}-image';
@image-preview-prefix-cls: ~'@{image-prefix-cls}-preview';

.@{image-prefix-cls} {
  position: relative;
  display: inline-block;

  &-img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border-radius: @radius-m;

    &-placeholder {
      background-color: @image-bg;
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 30%;
    }
  }

  &-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: @text-color-inverse;
    background: fade(@black, 50%);
    cursor: pointer;
    opacity: 0;
    transition: opacity @animation-duration-slow;

    &-info {
      padding: 0 @padding-xss;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .@{iconfont-css-prefix} {
        margin-inline-end: @margin-xss;
      }
    }

    &:hover {
      opacity: 1;
    }
  }

  &-placeholder {
    .box();
  }

  &-preview {
    .modal-mask();

    height: 100%;
    text-align: center;

    &-body {
      .box();
      overflow: hidden;
    }

    &-img {
      max-width: 100%;
      max-height: 100%;
      vertical-align: middle;
      transform: scale3d(1, 1, 1);
      cursor: grab;
      transition: transform 0.3s @ease-out 0s;
      user-select: none;
      pointer-events: auto;

      &-wrapper {
        .box();
        transition: transform 0.3s @ease-out 0s;

        &::before {
          display: inline-block;
          width: 1px;
          height: 50%;
          margin-right: -1px;
          content: '';
        }
      }
    }

    &-moving {
      .@{image-prefix-cls}-preview-img {
        cursor: grabbing;

        &-wrapper {
          transition-duration: 0s;
        }
      }
    }

    &-wrap {
      z-index: @zindex-image;
    }

    &-operations-wrapper {
      position: fixed;
      top: 0;
      right: 0;
      z-index: @zindex-image + 1;
      width: 100%;
    }

    &-operations {
      .reset-component();
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      color: @neutral-fg-on-color;
      list-style: none;
      background: fade(@modal-mask-bg, 10%);
      pointer-events: auto;

      &-operation {
        margin-left: @control-padding-horizontal;
        padding: @control-padding-horizontal;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background: fade(@modal-mask-bg, 20%);
        }

        &-disabled {
          color: @image-preview-operation-disabled-color;
          pointer-events: none;
        }

        &:last-of-type {
          margin-left: 0;
        }
      }

      &-progress {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      &-icon {
        font-size: @image-preview-operation-size;
      }
    }

    &-switch-left,
    &-switch-right {
      position: fixed;
      top: 50%;
      right: 8px;
      z-index: @zindex-image + 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      color: @neutral-fg-on-color;
      background: fade(@modal-mask-bg, 10%);
      border-radius: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      transition: all 0.3s;
      pointer-events: auto;

      &:hover {
        background: fade(@modal-mask-bg, 20%);
      }

      &-disabled,
      &-disabled:hover {
        color: @image-preview-operation-disabled-color;
        background: fade(@modal-mask-bg, 10%);
        cursor: not-allowed;
        > .@{iconfont-css-prefix} {
          cursor: not-allowed;
        }
      }

      > .@{iconfont-css-prefix} {
        font-size: 18px;
      }
    }

    &-switch-left {
      left: 8px;
    }

    &-switch-right {
      right: 8px;
    }
  }
}

@root-entry-name: default;

@input-prefix-cls: ~'@{ant-prefix}-input';

@input-affix-margin: 4px;

.@{ant-prefix}-input-number {
  &-affix-wrapper {
    .input();
    
    position: relative;
    display: inline-flex;
    width: 90px;
    padding: 0;
    padding-inline-start: @input-padding-horizontal-base;

    &:not(&-disabled):hover {
      .hover();
      z-index: 1;
    }

    &-focused,
    &:focus {
      z-index: 1;
    }

    &-disabled {
      .@{ant-prefix}-input-number[disabled] {
        background: transparent;
      }
    }

    > div.@{ant-prefix}-input-number {
      width: 100%;
      border: none;
      outline: none;

      &.@{ant-prefix}-input-number-focused {
        box-shadow: none !important;
      }
    }

    input.@{ant-prefix}-input-number-input {
      padding: 0;
    }

    &::before {
      display: inline-block;
      width: 0;
      visibility: hidden;
      content: '\a0';
    }

    .@{ant-prefix}-input-number-handler-wrap {
      z-index: 2;
    }
  }

  &-prefix,
  &-suffix {
    display: flex;
    flex: none;
    align-items: center;
    pointer-events: none;
  }

  &-prefix {
    margin-inline-end: @input-affix-margin;
  }

  &-suffix {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    margin-right: @input-padding-horizontal-base;
    margin-left: @input-affix-margin;
  }
}

.@{ant-prefix}-input-number-group-wrapper .@{ant-prefix}-input-number-affix-wrapper {
  width: 100%;
}


@input-number-prefix-cls: ~'@{ant-prefix}-input-number';

@input-number-wrapper-cls: @input-number-prefix-cls, ~'@{input-number-prefix-cls}-affix-wrapper';

each(@input-number-wrapper-cls, {
  .@{value} {
    &-status-error {
      .status-color(@value, @error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline);
      .status-color-common(@input-number-prefix-cls, @error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline)
    }

    &-status-warning {
      .status-color(@value, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
      .status-color-common(@input-number-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline)
    }
  }
});

.@{input-number-prefix-cls}-group-wrapper {
  &-status-error {
    .group-status-color(@input-number-prefix-cls, @error-color, @error-color);
  }

  &-status-warning {
    .group-status-color(@input-number-prefix-cls, @warning-color, @warning-color);
  }
}


@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
@form-item-prefix-cls: ~'@{ant-prefix}-form-item';

.@{input-number-prefix-cls} {
  .reset-component();
  .input();

  
  &-group {
    .reset-component();
    .input-group(~'@{input-number-prefix-cls}');

    &-wrapper {
      display: inline-block;
      text-align: start;
      vertical-align: top; 
    }
  }

  display: inline-block;
  width: 90px;
  margin: 0;
  padding: 0;
  border: @border-width-base @border-style-base @neutral-stroke-1-normal;
  border-radius: @radius-m;

  &-handler {
    position: relative;
    display: block;
    width: 100%;
    height: 50%;
    overflow: hidden;
    color: @neutral-fg-3-normal;
    font-weight: bold;
    line-height: 0;
    text-align: center;
    border-left: @border-width-base @border-style-base @neutral-stroke-1-normal;
    transition: all 0.1s linear;

    &:active {
      background: @neutral-bg-1-active-2;
    }

    &:hover &-up-inner,
    &:hover &-down-inner {
      color: @brand-fg-1-hover;
    }
  }

  &-handler-up-inner,
  &-handler-down-inner {
    .iconfont-mixin();

    position: absolute;
    right: 4px;
    width: 12px;
    height: 12px;
    color: @neutral-fg-3-normal;
    line-height: 12px;
    transition: all 0.1s linear;
    user-select: none;
  }

  &:hover {
    .hover(@brand-stroke-1-hover);
    & + .@{form-item-prefix-cls}-children-icon {
      opacity: 0;
      transition: opacity 0.24s linear 0.24s;
    }
  }

  &-focused {
    .active();
  }

  &-disabled {
    .disabled();
    .@{input-number-prefix-cls}-input {
      cursor: not-allowed;
    }
    .@{input-number-prefix-cls}-handler-wrap {
      display: none;
    }
  }

  &-readonly {
    .@{input-number-prefix-cls}-handler-wrap {
      display: none;
    }
  }

  &-input {
    width: 100%;
    height: @input-height-base - 2px;
    padding: 0 @input-padding-horizontal-base-hd;
    text-align: left;
    background-color: transparent;
    border: 0;
    border-radius: @radius-m;
    outline: 0;
    transition: all 0.3s linear;
    appearance: textfield !important;
    .placeholder();

    &[type='number']::-webkit-inner-spin-button,
    &[type='number']::-webkit-outer-spin-button {
      margin: 0;
      
      -webkit-appearance: none;
      appearance: none;
    }
  }

  &-lg {
    padding: 0;
    font-size: @font-size-lg;

    input {
      height: @input-height-lg - 2px;
    }
  }

  &-sm {
    padding: 0;

    input {
      height: @input-height-sm - 2px;
      padding: 0 @control-padding-horizontal-sm - 1px;
    }
  }

  &-handler-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 100%;
    background: @neutral-bg-5-normal;
    border-radius: 0 @radius-m @radius-m 0;
    opacity: 0;
    transition: opacity 0.24s linear 0.1s;

    
    
    
    .@{input-number-prefix-cls}-handler {
      .@{input-number-prefix-cls}-handler-up-inner,
      .@{input-number-prefix-cls}-handler-down-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: auto;
        margin-right: 0;
        font-size: 7px;
      }
    }

    .@{input-number-prefix-cls}-borderless & {
      border-left-width: 0;
    }
  }

  &-handler-wrap:hover &-handler {
    height: 40%;
  }

  &:hover &-handler-wrap,
  &-focused &-handler-wrap {
    opacity: 1;
  }

  &-handler-up {
    border-top-right-radius: @control-border-radius;
    cursor: pointer;

    &-inner {
      top: 50%;
      margin-top: -5px;
      text-align: center;
    }

    &:hover {
      height: 60% !important;
    }
  }

  &-handler-down {
    top: 0;
    border-top: @border-width-base @border-style-base @neutral-stroke-1-normal;
    border-bottom-right-radius: @control-border-radius;
    cursor: pointer;

    &-inner {
      top: 50%;
      text-align: center;
      transform: translateY(-50%);
    }

    &:hover {
      height: 60% !important;
    }
    .@{input-number-prefix-cls}-borderless & {
      border-top-width: 0;
    }
  }


  &-handler-up-disabled,
  &-handler-down-disabled {
    cursor: not-allowed;
  }

  &-handler-up-disabled:hover &-handler-up-inner,
  &-handler-down-disabled:hover &-handler-down-inner {
    color: @disabled-color;
  }

  &-borderless {
    box-shadow: none;
  }

  
  &-out-of-range {
    input {
      color: @error-color;
    }
  }

  
  .compact-item(@input-number-prefix-cls, null, ~'@{input-number-prefix-cls}-focused');
}


@input-number-prefix-cls: ~'@{ant-prefix}-input-number';

.@{input-number-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-handler {
    .@{input-number-prefix-cls}-rtl & {
      border-right: @border-width-base @border-style-base @input-number-handler-border-color;
      border-left: 0;
    }

    &-wrap {
      .@{input-number-prefix-cls}-rtl & {
        right: auto;
        left: 0;
      }

      .@{input-number-prefix-cls}-rtl.@{input-number-prefix-cls}-borderless & {
        border-right-width: 0;
      }
    }

    &-up {
      .@{input-number-prefix-cls}-rtl & {
        border-top-right-radius: 0;
      }
    }

    &-down {
      .@{input-number-prefix-cls}-rtl & {
        border-bottom-right-radius: 0;
      }
    }
  }

  &-input {
    .@{input-number-prefix-cls}-rtl & {
      direction: ltr;
      text-align: right;
    }
  }
}


.input-group(@input-number-prefix-cls) {
  > .@{input-number-prefix-cls}-rtl:first-child {
    border-radius: 0 @border-radius-base @border-radius-base 0;
  }
  > .@{input-number-prefix-cls}-rtl:last-child {
    border-radius: @border-radius-base 0 0 @border-radius-base;
  }

  &-addon {
    .@{input-number-prefix-cls}-group-rtl &:first-child {
      border-right: @border-width-base @border-style-base @input-border-color;
      border-left: 0;
      border-radius: 0 @border-radius-base @border-radius-base 0;
    }
    .@{input-number-prefix-cls}-group-rtl &:last-child {
      border-right: 0;
      border-left: @border-width-base @border-style-base @input-border-color;
      border-radius: @border-radius-base 0 0 @border-radius-base;
    }
  }
}


@root-entry-name: default;

@input-prefix-cls: ~'@{ant-prefix}-input';

@input-affix-margin: 4px;

.@{ant-prefix}-input {
  &-affix-wrapper {
    .input();
    display: inline-flex;

    &:not(&-disabled):hover {
      .hover();
      z-index: 1;
      .@{ant-prefix}-input-search-with-button & {
        z-index: 0;
      }
    }

    &-focused,
    &:focus {
      z-index: 1;
    }

    &-disabled {
      .@{ant-prefix}-input[disabled] {
        background: rgba(255, 255, 255, 0);
      }
    }

    > .@{ant-prefix}-input {
      font-size: inherit;
      border: none;
      outline: none;

      &:focus {
        box-shadow: none !important;
      }

      &:not(textarea) {
        padding: 0;
      }
    }

    &::before {
      display: inline-block;
      width: 0;
      visibility: hidden;
      content: '\a0';
    }
  }

  &-prefix,
  &-suffix {
    display: flex;
    flex: none;
    align-items: center;

    > *:not(:last-child) {
      margin-right: 8px;
    }
  }

  &-show-count-suffix {
    color: @neutral-fg-3-normal;
  }

  &-show-count-has-suffix {
    margin-right: 2px;
  }

  &-prefix {
    margin-right: @input-affix-margin;
  }

  &-suffix {
    
    margin-left: @input-affix-margin * 2;
  }
}

@input-prefix-cls: ~'@{ant-prefix}-input';


.@{iconfont-css-prefix}.@{input-prefix-cls}-clear-icon,
.@{input-prefix-cls}-clear-icon {
  margin: 0;
  color: @disabled-color;
  font-size: @font-size-sm;
  vertical-align: -1px;
  
  
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: @neutral-fg-3-normal;
  }

  &:active {
    color: @neutral-fg-2-normal;
  }

  &-hidden {
    visibility: hidden;
  }

  &-has-suffix {
    margin: 0 @input-affix-margin;
  }
}


.@{input-prefix-cls}-affix-wrapper.@{input-prefix-cls}-affix-wrapper-textarea-with-clear-btn {
  padding: 0;

  .@{input-prefix-cls}-clear-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
  }
}


@input-prefix-cls: ~'@{ant-prefix}-input';

@input-wrapper-cls: @input-prefix-cls, ~'@{input-prefix-cls}-affix-wrapper';

each(@input-wrapper-cls, {
  .@{value} {
    &-status-error {
      .status-color(@value, @error-color, @error-color, @neutral-bg-5-normal, @error-color-hover, @error-color-outline,@error-color-active);
      .status-color-common(@input-prefix-cls, @error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline,@error-color-active);
    }

    &-status-warning {
      .status-color(@value, @warning-color, @warning-color, @neutral-bg-5-normal, @warning-color-hover, @warning-color-outline,@warning-color-active);
      .status-color-common(@input-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline,@warning-color-active);
    }
  }
});

.@{input-prefix-cls}-textarea {
  &-status-error,
  &-status-warning,
  &-status-success,
  &-status-validating {
    &.@{input-prefix-cls}-textarea-has-feedback {
      .@{input-prefix-cls} {
        padding-right: 24px;
      }
    }
  }
}

.@{input-prefix-cls}-group-wrapper {
  &-status-error {
    .group-status-color(@input-prefix-cls, @error-color, @error-color);
  }

  &-status-warning {
    .group-status-color(@input-prefix-cls, @warning-color, @warning-color);
  }
}

@input-prefix-cls: ~'@{ant-prefix}-input';


.@{input-prefix-cls} {
  .reset-component();
  .input(); 

  
  &-group {
    .reset-component();
    .input-group(~'@{input-prefix-cls}');

    &-wrapper {
      display: inline-block;
      width: 100%;
      text-align: start;
      vertical-align: top; 
    }
  }

  &-password-icon.@{iconfont-css-prefix} {
    color: @neutral-fg-3-normal;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      color: @neutral-fg-2-normal;
    }
  }

  &[type='color'] {
    height: @input-height-base;

    &.@{input-prefix-cls}-lg {
      height: @input-height-lg;
    }
    &.@{input-prefix-cls}-sm {
      height: @input-height-sm;
      padding-top: 3px;
      padding-bottom: 3px;
    }
  }

  &-textarea-show-count {
    
    > .@{input-prefix-cls} {
      height: 100%;
    }

    &::after {
      float: right;
      color: @neutral-fg-3-normal;
      white-space: nowrap;
      content: attr(data-count);
      pointer-events: none;
    }

    &.@{input-prefix-cls}-textarea-in-form-item {
      &::after {
        margin-bottom: -22px;
      }
    }
  }

  &-textarea-suffix {
    position: absolute;
    top: 0;
    right: @input-padding-horizontal-base;
    bottom: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    margin: auto;
    
  }

  
  .compact-item(@input-prefix-cls);
}


@search-prefix: ~'@{ant-prefix}-input-search';

.@{search-prefix} {
  .@{ant-prefix}-input {
    &:hover,
    &:focus {
      border-color: @brand-stroke-1-hover;

      + .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
        border-left-color: @brand-stroke-1-hover;
      }
    }
    &-suffix {
      color: @neutral-fg-3-normal;
      &:hover {
        cursor: pointer;
      }
    }
  }

  .@{ant-prefix}-input-affix-wrapper {
    border-radius: 0;
  }

  
  
  .@{ant-prefix}-input-lg {
    line-height: @line-height-base - 0.0002;
  }

  > .@{ant-prefix}-input-group {
    > .@{ant-prefix}-input-group-addon:last-child {
      left: -1px;
      padding: 0;
      border: 0;

      .@{search-prefix}-button {
        padding-top: 0;
        padding-bottom: 0;
        border-radius: 0 @radius-m @radius-m 0;
      }

      .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
        color: @neutral-fg-on-color;

        &.@{ant-prefix}-btn-loading::before {
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }
      }
    }
  }

  &-button {
    height: @input-height-base;

    &:hover,
    &:focus {
      z-index: 1;
    }
  }

  &-large &-button {
    height: @input-height-lg;
  }

  &-small &-button {
    height: @input-height-sm;
  }

  
  &.@{input-prefix-cls}-compact-item {
    &:not(.@{input-prefix-cls}-compact-item-rtl) {
      &:not(.@{input-prefix-cls}-compact-last-item) {
        .@{input-prefix-cls}-group-addon {
          .@{input-prefix-cls}-search-button {
            margin-right: -@border-width-base;
            border-radius: 0;
          }
        }
      }
    }

    &:not(.@{input-prefix-cls}-compact-first-item) {
      .@{input-prefix-cls},
      .@{input-prefix-cls}-affix-wrapper {
        border-radius: 0;
      }
    }

    > .@{input-prefix-cls}-group-addon .@{input-prefix-cls}-search-button,
    > .@{input-prefix-cls},
    .@{input-prefix-cls}-affix-wrapper {
      &:hover,
      &:focus,
      &:active {
        z-index: 2;
      }
    }

    > .@{input-prefix-cls}-affix-wrapper-focused {
      z-index: 2;
    }
  }
  
  &.@{input-prefix-cls}-compact-item-rtl {
    &:not(.@{input-prefix-cls}-compact-last-item) {
      .@{input-prefix-cls}-group-addon:last-child {
        .@{input-prefix-cls}-search-button {
          margin-left: -@border-width-base;
          border-radius: 0;
        }
      }
    }
  }
}



.@{ant-prefix}-input-group {
  &-wrapper {
    &-rtl {
      direction: rtl;
    }
  }

  &-rtl {
    direction: rtl;
  }
}


@input-affix-margin: 4px;

.@{ant-prefix}-input {
  &-affix-wrapper&-affix-wrapper-rtl {
    > input.@{ant-prefix}-input {
      border: none;
      outline: none;
    }
  }

  &-affix-wrapper-rtl {
    .@{ant-prefix}-input-prefix {
      margin: 0 0 0 @input-affix-margin;
    }

    .@{ant-prefix}-input-suffix {
      margin: 0 @input-affix-margin 0 0;
    }
  }

  &-textarea {
    &-rtl {
      direction: rtl;
    }

    &-rtl&-show-count::after {
      text-align: left;
    }
  }
}


.@{ant-prefix}-input-clear-icon {
  &-has-suffix {
    .@{ant-prefix}-input-affix-wrapper-rtl & {
      margin-right: 0;
      margin-left: @input-affix-margin;
    }
  }

  .@{ant-prefix}-input-affix-wrapper-rtl & {
    right: auto;
    left: 8px;
  }
}


@input-rtl-cls: ~'@{ant-prefix}-input-rtl';

.active() {
  .@{input-rtl-cls} & {
    border-right-width: 0;
    border-left-width: @border-width-base !important;
  }
}

.hover() {
  .@{input-rtl-cls} & {
    border-right-width: 0;
    border-left-width: @border-width-base !important;
  }
}

.input() {
  &-rtl {
    direction: rtl;
  }
}


.input-group(@inputClass) {
  > .@{inputClass}-rtl:first-child,
  &-rtl &-addon:first-child {
    border-radius: 0 @border-radius-base @border-radius-base 0;
  }

  &-addon:first-child {
    .@{inputClass}-group-rtl & {
      border-right: @border-width-base @border-style-base @input-border-color;
      border-left: 0;
    }
  }

  &-addon:last-child {
    .@{inputClass}-group-rtl & {
      border-right: 0;
      border-left: @border-width-base @border-style-base @input-border-color;
      border-radius: @border-radius-base 0 0 @border-radius-base;
    }
  }

  > .@{inputClass}:last-child,
  &-addon:last-child {
    .@{inputClass}-group-rtl& {
      border-radius: @border-radius-base 0 0 @border-radius-base;
    }
  }

  .@{inputClass}-affix-wrapper {
    &:not(:first-child) {
      .@{inputClass}-group-rtl& {
        border-radius: @border-radius-base 0 0 @border-radius-base;
      }
    }

    &:not(:last-child) {
      .@{inputClass}-group-rtl& {
        border-radius: 0 @border-radius-base @border-radius-base 0;
      }
    }
  }

  &&-compact {
    & > *:not(:last-child) {
      .@{inputClass}-group-rtl& {
        margin-right: 0;
        margin-left: -@border-width-base;
        border-left-width: @border-width-base;
      }
    }

    & > *:first-child,
    & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
    & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
      .@{inputClass}-group-rtl& {
        border-radius: 0 @border-radius-base @border-radius-base 0;
      }
    }

    & > *:last-child,
    & > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
    & > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
      .@{inputClass}-group-rtl& {
        border-left-width: @border-width-base;
        border-radius: @border-radius-base 0 0 @border-radius-base;
      }
    }

    .@{ant-prefix}-input-group-wrapper-rtl + .@{ant-prefix}-input-group-wrapper-rtl {
      margin-right: -1px;
      margin-left: 0;
    }

    .@{ant-prefix}-input-group-wrapper-rtl:not(:last-child) {
      &.@{ant-prefix}-input-search > .@{ant-prefix}-input-group {
        & > .@{ant-prefix}-input {
          border-radius: 0 @border-radius-base @border-radius-base 0;
        }
      }
    }
  }
}


@search-prefix: ~'@{ant-prefix}-input-search';
@search-rtl-cls: ~'@{search-prefix}-rtl';

.@{search-prefix}-rtl {
  direction: rtl;

  .@{ant-prefix}-input {
    &:hover,
    &:focus {
      + .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
        border-left-color: @border-color-base;

        &:hover {
          border-left-color: @input-hover-border-color;
        }
      }
    }
  }

  > .@{ant-prefix}-input-group {
    > .@{ant-prefix}-input-affix-wrapper {
      &:hover,
      &-focused {
        border-right-color: @input-hover-border-color;
      }
    }

    > .@{ant-prefix}-input-group-addon:last-child {
      right: -1px;
      left: auto;
      .@{search-prefix}-button {
        border-radius: @border-radius-base 0 0 @border-radius-base;
      }
    }
  }
}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .@{ant-prefix}-input {
    height: @input-height-base;

    &-lg {
      height: @input-height-lg;
    }

    &-sm {
      height: @input-height-sm;
    }

    &-affix-wrapper {
      > input.@{ant-prefix}-input {
        height: auto;
      }
    }
  }
}


@root-entry-name: default;


@layout-prefix-cls: ~'@{ant-prefix}-layout';
@layout-menu-prefix-cls: ~'@{ant-prefix}-menu';

.@{layout-prefix-cls} {
  display: flex;
  flex: auto;
  flex-direction: column;

  
  min-height: 0;
  background: @layout-body-background;

  &,
  * {
    box-sizing: border-box;
  }

  &&-has-sider {
    flex-direction: row;

    > .@{layout-prefix-cls},
    > .@{layout-prefix-cls}-content {
      width: 0; 
    }
  }

  &-header,
  &-footer {
    flex: 0 0 auto;
  }

  &-header {
    height: @layout-header-height;
    padding: @layout-header-padding;
    color: @layout-header-color;
    line-height: @layout-header-height;
    background: @layout-header-background;
  }

  &-footer {
    padding: @layout-footer-padding;
    color: @text-color;
    font-size: @font-size-base;
    background: @layout-footer-background;