&-icon {
                 font-size: 30px;
            }
             line-height: 55px;
        }
         .@{upload-item}-icon {
             position: absolute;
             top: 50%;
             left: 50%;
             font-size: 26px;
             transform: translate(-50%, -50%);
             .@{iconfont-css-prefix}{
                 font-size: 26px;
            }
        }
         .@{upload-item}-image {
             max-width: 100%;
        }
         .@{upload-item}-thumbnail img {
             display: block;
             width: 48px;
             height: 48px;
             overflow: hidden;
        }
         .@{upload-item}-name {
             display: inline-block;
             box-sizing: border-box;
             max-width: 100%;
             margin: 0 0 0 8px;
             padding-right: 8px;
             padding-left: 48px;
             overflow: hidden;
             line-height: 44px;
             white-space: nowrap;
             text-overflow: ellipsis;
             transition: all 0.3s;
        }
         .@{upload-item}-uploading .@{upload-item}-name {
             margin-bottom: 12px;
        }
         .@{upload-item}-progress {
             bottom: 14px;
             width: ~'calc(100% - 24px)';
             margin-top: 0;
             padding-left: 56px;
        }
    }
     &-picture-card {
         &-container {
             display: inline-block;
             width: @upload-picture-card-size;
             height: @upload-picture-card-size;
             margin: 0 @margin-xs @margin-xs 0;
             vertical-align: top;
        }
         .@{upload-item}{
             height: 100%;
             margin: 0;
             padding: 0;
        }
         .@{upload-item}-info {
             position: relative;
             height: 100%;
             overflow: hidden;
             &::before {
                 position: absolute;
                 z-index: 1;
                 width: 100%;
                 height: 100%;
                 background-color: @neutral-fg-4-normal;
                 opacity: 0;
                 transition: all 0.3s;
                 content: ' ';
            }
        }
         .@{upload-item}-done:hover .@{upload-item}-info::before {
             opacity: 1;
        }
         .@{upload-item}-actions {
             position: absolute;
             top: 50%;
             left: 50%;
             z-index: 10;
             white-space: nowrap;
             transform: translate(-50%, -50%);
             opacity: 0;
             transition: all 0.3s;
             .@{iconfont-css-prefix}-eye, .@{iconfont-css-prefix}-download, .@{iconfont-css-prefix}-edit, .@{iconfont-css-prefix}-delete {
                 z-index: 10;
                 width: 16px;
                 margin: 0 4px;
                 color: @text-color-dark;
                 font-size: 16px;
                 cursor: pointer;
                 transition: all 0.3s;
                 &:hover {
                     color: @text-color-inverse;
                }
            }
             .@{iconfont-css-prefix}-edit > svg {
                 margin-bottom: 2px;
            }
        }
         .@{upload-item}-info:hover + .@{upload-item}-actions, .@{upload-item}-actions:hover {
             opacity: 1;
        }
         .@{upload-item}-remove {
             position: absolute;
             top: -8px;
             right: -8px;
             z-index: 999;
             color: @status-error-bg-1-normal;
             > svg {
                 width: 16px;
                 height: 16px;
                 fill: currentColor;
            }
             &:hover {
                 cursor: pointer;
            }
        }
         .@{upload-item}-remove:hover + .@{upload-item}-info::before {
             opacity: 0;
        }
         .@{upload-item}-thumbnail, .@{upload-item}-thumbnail img {
             position: static;
             display: block;
             width: 100%;
             height: 100%;
             object-fit: contain;
        }
         .@{upload-item}-name {
             display: none;
             margin: 8px 0 0;
             padding: 0;
             line-height: @line-height-base;
             text-align: center;
        }
         .@{upload-item}-file + .@{upload-item}-name {
             position: absolute;
             bottom: 10px;
             display: block;
        }
         .@{upload-item}-uploading {
             &.@{upload-item}{
                 background-color: @neutral-bg-2-normal;
            }
             .@{upload-item}-info {
                 height: auto;
                 margin-top: 32px;
                 &::before, .@{iconfont-css-prefix}-eye, .@{iconfont-css-prefix}-edit, .@{iconfont-css-prefix}-delete {
                     display: none;
                }
            }
        }
         .@{upload-item}-progress {
             bottom: 60px;
             left: 44px;
             width: 16px;
             padding-left: 0;
        }
    }
     &-text, &-picture {
         &-container {
             transition: opacity @animation-duration-slow, height @animation-duration-slow;
             &::before {
                 display: table;
                 width: 0;
                 height: 0;
                 content: '';
            }
             .@{upload-prefix-cls}-span {
                 display: block;
                 flex: auto;
            }
        }
         .@{upload-prefix-cls}-span {
             display: flex;
             align-items: center;
             > * {
                 flex: none;
            }
        }
         .@{upload-item}-name {
             flex: auto;
             margin: 0;
             padding: 0 @padding-xs;
        }
         .@{upload-item}-card-actions {
             position: static;
             color: @brand-fg-1-normal;
             &:hover {
                 cursor: pointer;
            }
        }
    }
     &-picture {
         .@{upload-item}{
             background-color: @white;
        }
    }
     &-text {
         .@{upload-prefix-cls}-text-icon {
             width:16px;
             height:16px;
             margin-bottom: 4px;
             .@{iconfont-css-prefix}{
                 position: static;
            }
        }
         .@{upload-item}-done,.@{upload-item}-uploading {
             .@{upload-item}-name{
                 color: @neutral-fg-2-normal;
            }
        }
    }
     .@{upload-prefix-cls}-animate-inline-appear, .@{upload-prefix-cls}-animate-inline-enter, .@{upload-prefix-cls}-animate-inline-leave {
         animation-duration: @animation-duration-slow;
         animation-timing-function: @ease-in-out-circ;
         animation-fill-mode: forwards;
    }
     .@{upload-prefix-cls}-animate-inline-appear, .@{upload-prefix-cls}-animate-inline-enter {
         animation-name: uploadAnimateInlineIn;
    }
     .@{upload-prefix-cls}-animate-inline-leave {
         animation-name: uploadAnimateInlineOut;
    }
}
 @keyframes uploadAnimateInlineIn {
     from {
         width: 0;
         height: 0;
         margin: 0;
         padding: 0;
         opacity: 0;
    }
}
 @keyframes uploadAnimateInlineOut {
     to {
         width: 0;
         height: 0;
         margin: 0;
         padding: 0;
         opacity: 0;
    }
}
 @upload-prefix-cls: ~'@{ant-prefix}-upload';
 @upload-item: ~'@{ant-prefix}-upload-list-item';
 .@{upload-prefix-cls}{
     &-rtl {
         direction: rtl;
    }
     &&-select-picture-card {
         .@{upload-prefix-cls}-rtl& {
             margin-right: auto;
             margin-left: 8px;
        }
    }
}
 .@{upload-prefix-cls}-list {
     &-rtl {
         direction: rtl;
    }
     &-item-list-type-text {
         &:hover {
             .@{upload-prefix-cls}-list-item-name-icon-count-1 {
                 .@{upload-prefix-cls}-list-rtl & {
                     padding-right: 22px;
                     padding-left: 14px;
                }
            }
             .@{upload-prefix-cls}-list-item-name-icon-count-2 {
                 .@{upload-prefix-cls}-list-rtl & {
                     padding-right: 22px;
                     padding-left: 28px;
                }
            }
        }
    }
     &-item {
         &-name {
             .@{upload-prefix-cls}-list-rtl & {
                 padding-right: @font-size-base + 8px;
                 padding-left: 0;
            }
        }
         &-name-icon-count-1 {
             .@{upload-prefix-cls}-list-rtl & {
                 padding-left: 14px;
            }
        }
         &-card-actions {
             .@{upload-prefix-cls}-list-rtl & {
                 right: auto;
                 left: 0;
            }
             .@{iconfont-css-prefix}{
                 .@{upload-prefix-cls}-list-rtl & {
                     padding-right: 0;
                     padding-left: 5px;
                }
            }
        }
         &-info {
             .@{upload-prefix-cls}-list-rtl & {
                 padding: 0 4px 0 12px;
            }
        }
         &-error &-card-actions {
             .@{iconfont-css-prefix}{
                 .@{upload-prefix-cls}-list-rtl & {
                     padding-right: 0;
                     padding-left: 5px;
                }
            }
        }
         &-progress {
             .@{upload-prefix-cls}-list-rtl & {
                 padding-right: @font-size-base + 12px;
                 padding-left: 0;
            }
        }
    }
     &-picture, &-picture-card {
         .@{upload-item}-info {
             padding: 0;
        }
         .@{upload-item}-thumbnail {
             .@{upload-prefix-cls}-list-rtl& {
                 right: 8px;
                 left: auto;
            }
        }
         .@{upload-item}-icon {
             .@{upload-prefix-cls}-list-rtl& {
                 right: 50%;
                 left: auto;
                 transform: translate(50%, -50%);
            }
        }
         .@{upload-item}-name {
             .@{upload-prefix-cls}-list-rtl& {
                 margin: 0 8px 0 0;
                 padding-right: 48px;
                 padding-left: 8px;
            }
        }
         .@{upload-item}-name-icon-count-1 {
             .@{upload-prefix-cls}-list-rtl& {
                 padding-right: 48px;
                 padding-left: 18px;
            }
        }
         .@{upload-item}-name-icon-count-2 {
             .@{upload-prefix-cls}-list-rtl& {
                 padding-right: 48px;
                 padding-left: 36px;
            }
        }
         .@{upload-item}-progress {
             .@{upload-prefix-cls}-list-rtl& {
                 padding-right: 0;
                 padding-left: 0;
            }
        }
    }
     &-picture-card {
         &-container {
             .@{upload-prefix-cls}-list-rtl & {
                 margin: 0 0 @margin-xs @margin-xs;
            }
        }
         .@{upload-item}-actions {
             .@{upload-prefix-cls}-list-rtl& {
                 right: 50%;
                 left: auto;
                 transform: translate(50%, -50%);
            }
        }
         .@{upload-item}-file + .@{upload-item}-name {
             .@{upload-prefix-cls}-list-rtl& {
                 margin: 8px 0 0;
                 padding: 0;
            }
        }
    }
}
 @brand-stroke-2-normal: fade(#1c79f4, 30%);
 @brand-stroke-1-hover: #459cff;
 @brand-stroke-1-active: #0c5acf;
 @status-error-bg-1-normal: #e9463a;
 @status-warning-bg-1-normal: #f8782d;
 @status-success-bg-1-normal: #27d05a;
 @status-success-fg-1-normal: #27d05a;
 @status-error-fg-1-normal: #e9463a;
 @status-warning-fg-1-normal: #fcac15;
 @status-error-stroke-1-normal: #e9463a;
 @status-error-stroke-1-active: #c22c27;
 @status-error-stroke-1-hover: #f57364;
 @status-error-stroke-3-normal: fade(#e9463a, 30%);
 @neutral-bg-6-normal: #eeeeee;
 @neutral-fg-3-normal: fade(#000, 60%);
 @neutral-fg-4-normal: fade(#000, 40%);
 @SddBtnNormalColor: #1890ff;
 @SddTextColor: #272727;
 @SddListBorderColor: #e8e8e8;
 @SddInputBorderColor: #d9d9d9;
 @SddDisableInputBgColor: #f5f5f5;
 @SddContentBgColor: #ffffff;
 @SddErrorColor: #f5222d;
 @SddWarnColor: #fcac15;
 @SddSuccessColor: #52c41a;
 @SddlinkColor: #1890ff;
 @tableZebraEvenPatternColor: #fbfbfc;
 @tableHeaderBgColor: #f4f4f4;
 @tableRowHoverColor: #f3f3f3;
 @tableRowSelBgColor: fade(#e7e7e7, 90%);
 @buttonNormalColorNo2: #808e9d;
 @SddInputBorderColorNo1: #40a9ff;
 @SddButtonBorderColorNo1: #40a9ff;
 @SddPasswordCheckStatusbgColor: @neutral-bg-6-normal;
 @SddDividerColor: rgba(0, 0, 0, 0.06);
 @SddFontNormalColor: rgba(0, 0, 0, 0.85);
 @SddNumberLimitRangeColor: #8c8c8c;
 @SddNumberLimitUnitColor: #1f1f1f;
 @SddLabelDetailPageColor: rgba( 0, 0, 0, 0.45 );
 @SddBorderSplitColor: rgba(0, 0, 0, 0.12);
 @SddTableBorderColor: rgba(0, 0, 0, 0.15);
 @SddCheckBoxBorderColor: rgba(0, 0, 0, 0.45);
 @SddAlertSuccessBorder: #52c41a73;
 @SddAlertSuccessBgColor: #52c41a0f;
 @SddAlertWaringBorder: #faad1473;
 @SddAlertWaringBgColor: #faad140f;
 @SddAlertInfoBorder: #1090ff73;
 @SddAlertInfoBgColor: #1090ff0f;
 @SddAlertErrorBorder: #ff4d4f73;
 @SddAlertErrorBgColor: #ff4d4f0f;
 @SddAlertDarkFontColor: #ffffffd9;
 @SddAlertDarkCloseIconColor: #ffffff73;
 @SddAlertLightFontColor: #000000d9;
 @SddLayoutHeaderDividerColor: #334454;
 @SddLayoutHeaderButtonColor: #a6adb4;
 @SddLayoutHeaderButtonHoverColor: #fff;
 @SddLayoutHeaderButtonSelectedColor: #fff;
 @SddLayoutHeaderButtonHoverBgColor: #1f262a;
 @SddLayoutContentBgColor: #f0f2f5;
 @SddLayoutContentColor: #ffffff;
 @SddLayoutFooterColor: #ffffff;
 @base-rem-size: 14px;
 html, body {
     font-size: @base-rem-size;
}
 @media screen and (min-device-width: 3000px) {
     html, body {
         font-size: 2 * @base-rem-size;
    }
}
 @px-unit: 14rem;
 .sddSVGFont(@fontSize:30) {
     font-size: if((@fontSize = 0), inherit, @fontSize / @px-unit);
}
 .sddSVGOut (@normalColor:@SddBtnNormalColor) {
     &:not(.disabled_icons) {
         svg {
             & + {
                 path:first-child {
                     fill: if( (@normalColor = 0), @SddBtnNormalColor, @normalColor );
                }
            }
        }
    }
}
 .svgHover (@hoverColor: @SddBtnNormalColor) {
     &:not(.disabled_icons):not(.noHover) {
         &:hover {
             svg {
                 & + {
                     path:first-child {
                         fill: if( (@hoverColor = 0), @SddBtnNormalColor, @hoverColor );
                    }
                }
            }
        }
    }
}
 .svgDisabled (@disableColor:@SddDisableInputBgColor) {
     svg {
         & + {
             path:first-child {
                 fill: @disableColor;
            }
        }
    }
     cursor: not-allowed;
}
 ::-webkit-scrollbar {
     width: 12 / @px-unit;
     height: 12 / @px-unit;
     cursor: pointer;
}
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6 / @px-unit rgba(0, 0, 0, 0);
     box-shadow: inset 0 0 6 / @px-unit rgba(0, 0, 0, 0);
}
 ::-webkit-scrollbar-thumb {
     border-left: 6 / @px-unit solid transparent;
     border-right: 0 / @px-unit solid transparent;
     border-top: 6 / @px-unit solid transparent;
     border-bottom: 0 / @px-unit;
     background-color: rgba(0, 0, 0, 0.15);
     background-clip: padding-box;
}
 ::-webkit-scrollbar-thumb:hover {
     background-color: rgba(0, 0, 0, 0.15);
     border-width: 0 / @px-unit;
     border-radius: 2 / @px-unit;
}
 ::-webkit-scrollbar-thumb:active {
     background-color: rgba(0, 0, 0, 0.15);
     border-width: 0 / @px-unit;
     border-radius: 2 / @px-unit;
}
 ::-webkit-scrollbar-thumb:window-inactive {
     background-color: rgba(0, 0, 0, 0.15);
     border-width: 0 / @px-unit;
     border-radius: 2 / @px-unit;
}
 @neutral-bg-5-normal: @SddContentBgColor;
 @neutral-stroke-2-normal: @SddTableBorderColor;
 @neutral-bg-4-hover: @tableHeaderBgColor;
 @neutral-bg-1-hover-1: @tableRowHoverColor;
 @neutral-bg-1-active-1: @tableRowSelBgColor;
 @brand-bg-1-normal: @SddBtnNormalColor;
 @neutral-bg-disabled: @SddDisableInputBgColor;
 @radius-m: 4 / @px-unit;
 @neutral-stroke-accessible: @SddCheckBoxBorderColor;
 .sdd-alert {
     padding-top: 8/@px-unit;
     padding-bottom: 8/@px-unit;
     line-height: 22/@px-unit;
}
 .sdd-alert-light {
     .ant-alert-message {
         color: @SddAlertLightFontColor;
    }
}
 .sdd-alert-dark {
     .ant-alert-message {
         color: @SddAlertDarkFontColor;
    }
     .ant-alert-close-icon .anticon-close {
         color: @SddAlertDarkCloseIconColor;
    }
}
 .sdd-success-alert {
     border-color: @SddAlertSuccessBorder;
     background-color: @SddAlertSuccessBgColor;
}
 .sdd-warning-alert {
     border-color: @SddAlertWaringBorder;
     background-color: @SddAlertWaringBgColor;
}
 .sdd-info-alert {
     border-color: @SddAlertInfoBorder;
     background-color: @SddAlertInfoBgColor;
}
 .sdd-error-alert {
     border-color: @SddAlertErrorBorder;
     background-color: @SddAlertErrorBgColor;
}
 ._composeTree_ {
     padding: 0 16/@px-unit;
     width: 240/@px-unit;
     .tree-upper-wrapper {
         display: flex;
         margin-bottom: 4/@px-unit;
         .upper-search-input {
             flex-grow: 1;
             .search-input {
                 width: 100%;
            }
             .search-icon {
                 .sddSVGFont(16);
            }
        }
         .upper-filter-button {
             display: flex;
             align-items: center;
             height: 48/@px-unit;
             flex-shrink: 0;
             padding-left: 8/@px-unit;
             .filter-icon {
                 display: flex;
                 align-items: center;
                 color: @SddTextColor;
                 transition: all 0.3s;
                 &:hover {
                     color: @SddButtonBorderColorNo1;
                }
                 .sddSVGFont(20);
                 svg {
                     transition: transform 0.3s;
                }
            }
        }
    }
     .ant-tree-node-content-wrapper {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
    }
     .ant-tree li .ant-tree-node-content-wrapper {
         padding-left: 4/@px-unit;
         padding-right: 4/@px-unit;
    }
     .ant-tree li ul {
         padding-left: 22/@px-unit;
    }
     .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
         width: 20/@px-unit;
    }
     .ant-tree-child-tree > li:first-child {
         padding-top: 3/@px-unit;
    }
     .ant-tree li {
         overflow: hidden;
    }
     li.ant-tree-treenode-switcher-close {
         height: 30/@px-unit;
    }
     .ant-tree-switcher {
         height: 20/@px-unit;
    }
}
 .filterDropdown {
     min-width: 80/@px-unit;
     .filter-menu-item {
         display: flex;
         justify-content: space-between;
         align-items: center;
    }
     .checked-icon-wrapper {
         display: flex;
         flex-shrink: 0;
         height: 20/@px-unit;
         width: 20/@px-unit;
         justify-content: center;
         align-items: center;
    }
     .anticon.checked-icon {
         margin-right: 4/@px-unit;
         .sddSVGFont(16);
    }
}
 @sdd-table-tbody-boder-color-split: @neutral-stroke-2-normal;
 ._Table_ {
     .ant-table-thead > tr > th, .ant-table-tbody > tr > td, .ant-table tfoot > tr > th, .ant-table tfoot > tr > td {
         word-wrap: break-word;
    }
     .ant-table {
         .ant-table-content {
             .ant-table-body {
                 table {
                     tbody {
                         > tr {
                             > td {
                                 border-bottom-color: @sdd-table-tbody-boder-color-split;
                            }
                        }
                    }
                }
            }
        }
    }
     .ant-table.ant-table-bordered {
         .ant-table-content {
             table {
                 tbody {
                     > tr {
                         > td {
                             border-right-color: @sdd-table-tbody-boder-color-split;
                        }
                    }
                }
                 thead {
                     > tr {
                         > th {
                             border-right-color: @sdd-table-tbody-boder-color-split;
                             border-bottom-color: @sdd-table-tbody-boder-color-split;
                        }
                    }
                }
            }
        }
    }
}
 ._composeTree_ {
     .ant-tree-checkbox-inner {
         border-color: @neutral-stroke-accessible;
    }
}
 .label-div-Container {
     .ant-checkbox {
         display: inline-block;
    }
     .ant-checkbox-inner {
         border-color: @neutral-stroke-accessible;
    }
     .ant-radio-inner {
         border-color: @neutral-stroke-accessible;
    }
}
 @container-font-color: @SddFontNormalColor;
 @container-errorColor:@status-error-fg-1-normal;
 @container-warnColor:@status-warning-fg-1-normal;
 @container-number-limit-color: @SddNumberLimitRangeColor;
 @container-number-unit-color: @SddNumberLimitUnitColor;
 .vertical-wrap-comp {
     display: inline-flex;
}
 .label-normal-container{
     box-sizing:border-box;
     display: inline-block;
     line-height:0;
}
 .label-normal-container::after{
     content:"";
     display:block;
     clear:both;
}
 .label-div-Container {
     line-height:0;
     .under-wrapper {
         color: @neutral-fg-4-normal;
    }
}
 .label-normal, .label-flex, .label-normal-behind, .label-flex-behind {
     color: @container-font-color 
}
 .label-append-rng {
     display: inline-block;
     color: @container-number-limit-color 
}
 .label-append-unit {
     display: inline-block;
     color: @container-number-unit-color;
     margin-right: 4/@px-unit;
}
 .label-normal{
     float:left;
     line-height:32/@px-unit;
     padding-right: 8/@px-unit;
     height:32/@px-unit;
     width:108/@px-unit;
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
}
 .label-object-padding {
     padding-right: 8/@px-unit;
}
 .label-normal-behind{
     float:left;
     line-height:32/@px-unit;
     padding-left:8/@px-unit;
     width: 120/@px-unit;
}
 .behind-auto-ellipsis {
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
}
 .behind-object-padding {
     padding-left: 8/@px-unit;
}
 .label-normal-wrapper{
     text-align:left;
     line-height: 32/@px-unit;
     float: left;
     width: 220/@px-unit;
}
 .label-flex-container {
     padding: 8/@px-unit 0;
     display: flex;
     display: -webkit-flex;
     flex: 1;
}
 .label-horizontal-container {
     flex-direction: row;
}
 .label-vertical-container {
     flex-direction: column;
}
 .label-flex, .label-vertical-flex{
     line-height:32/@px-unit;
     padding-right: 8/@px-unit;
     width:108/@px-unit;
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
}
 .label-vertical-flex {
     padding-right: 0;
}
 .label-flex-wrapper{
     text-align:left;
     line-height: 32/@px-unit;
     width: 220/@px-unit;
}
 .label-vertical-flex-wrap {
     display: flex;
     text-align:left;
     line-height: 32/@px-unit;
}
 .has-error + .label-explain {
     color: @container-errorColor;
     display: block;
     animation:explainShow .3s ease;
     -webkit-animation:explainShow .3s ease;
}
 .has-warning + .label-explain {
     color: @container-warnColor;
     display: block;
     animation:explainShow .3s ease;
     -webkit-animation:explainShow .3s ease;
}
 .label-flex-behind{
     line-height:32/@px-unit;
     padding-left:8/@px-unit;
     width: 120/@px-unit;
}
 .label-required::before {
     content: '*';
     color: @container-errorColor;
     vertical-align: middle;
     margin-right: 4/@px-unit;
}
 .label-explain {
     clear: both;
     width: 100%;
     min-height: 22/@px-unit;
     margin-bottom: -1/@px-unit;
     font-size: 14/@px-unit;
     line-height: 1.5;
     margin-top: 4/@px-unit;
     display: none;
     word-wrap:break-word;
     -webkit-transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
     transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
 div.virtual-line-style.css-weight-add {
     position: absolute !important;
     white-space: nowrap !important;
     top: 0 !important;
     visibility: hidden !important;
     z-index: -10000 !important;
     width: auto !important;
}
 @keyframes explainShow{
     0%{
         line-height: 0;
    }
     100%{
         line-height: 1.5;
    }
}
 .has-error {
     .label-explain {
         color: @container-errorColor;
         display: block;
         animation:explainShow .3s ease;
         -webkit-animation:explainShow .3s ease;
    }
}
 .has-warning {
     .label-explain {
         color: @container-warnColor;
         display: block;
         animation:explainShow .3s ease;
         -webkit-animation:explainShow .3s ease;
    }
}
 .label-div-Container {
     .ant-form-item {
         margin-bottom: 0 !important;
         font-size: 14/@px-unit !important;
    }
     .ant-form-explain {
         margin-bottom: 5/@px-unit !important;
         margin-top: -4/@px-unit !important;
    }
     .max-width-100 {
         max-width: 100%;
    }
}
 .label-v4-version {
     .ant-picker-input > input {
         height: auto;
         min-height: 22px;
    }
}
 .label-normal-wrapper, .label-flex-wrapper {
     .labelSelect, .labelInput, .labelDateRangePicker, ._password, .labelTimeRangePicker {
         vertical-align: top;
    }
}
 .design-icon {
     font-size: 20/@px-unit;
}
 .sdd-form-container {
     white-space: nowrap;
     .sdd-form-list-wrapper {
         display: inline-block;
         vertical-align: top;
         margin-right: 80px;
         margin-left: 80px;
         &:first-of-type {
             margin-left: 0px;
        }
         &:last-of-type {
             margin-right: 0px;
        }
    }
}
 @LabelFontColor: @SddLabelDetailPageColor;
 ._detailPage_ {
     position: relative;
     overflow: hidden;
     .detailPage-title-wrapper{
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         vertical-align: middle;
         font-size: 18/@px-unit;
         font-weight: 900;
    }
     .detailPage-content-wrapper {
         display: flex;
         flex-wrap: nowrap;
         margin: 0 -40/@px-unit;
         .detailPage-content-item-wrapper {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
             vertical-align: middle;
             flex-shrink: 1;
             flex-grow: 0;
             padding: 0 40/@px-unit;
             .container-wrapper {
                 display: flex;
            }
             .content-wrapper {
                 min-width: 20/@px-unit;
                 overflow: hidden;
            }
             .label-wrapper {
                 color: @LabelFontColor;
                 max-width: 100%;
                 min-width: 20/@px-unit;
                 flex-shrink: 0;
            }
             .detail-item-gap {
                 height: 44/@px-unit;
            }
        }
    }
}
 .detail-page-wrapper {
     padding: 24/@px-unit 32/@px-unit 32/@px-unit 32/@px-unit;
}
 .sdd-drawer-no-title {
     .ant-drawer-header-no-title {
         height: 48/@px-unit;
         line-height: 48/@px-unit;
    }
}
 .draggableModal-wrapper {
     .ant-modal-body {
         padding: 24/@px-unit 32/@px-unit 32/@px-unit 32/@px-unit;
    }
     .ant-modal-header {
         padding-top: 13/@px-unit;
         padding-bottom: 13/@px-unit;
    }
}
 .draggable-limit-width {
     .ant-modal-body {
         min-width: 640/@px-unit;
    }
}
 .sdd-drawer {
     .ant-drawer-content-wrapper {
         min-width: 640/@px-unit;
    }
     .ant-drawer-body {
         padding: 24/@px-unit 32/@px-unit 32/@px-unit 32/@px-unit;
    }
     .ant-drawer-content {
         overflow: hidden;
    }
     .ant-drawer-header {
         padding-top: 13/@px-unit;
         padding-bottom: 13/@px-unit;
    }
}
 .@{prefixClass}{
     &-input-wrap {
         position: relative;
         padding: 6px;
         border-bottom: 1px solid #e9e9e9;
         &:after {
             content: '';
             clear: both;
        }
    }
     &-date-input-wrap {
         overflow: hidden;
    }
     &-time-picker {
         position: absolute;
         width: 100%;
         top: 34px;
         background-color: white;
         height: 217px;
         &-panel {
             width: 100%;
             position: relative;
             .@{timePickerClass}-panel {
                 &-input-wrap {
                     display: none;
                }
                 &-inner {
                     border: none;
                     box-shadow: none;
                }
                 &-select {
                     width: 84px;
                     max-height: 217px;
                     li {
                         text-align: center;
                         padding: 0;
                    }
                }
            }
        }
    }
     &-time-picker-wrap {
         float: left;
         width: 100%;
         .@{timePickerClass}{
             width: 100%;
             &-input {
                 padding: 0;
                 border: 1px solid transparent;
                 outline: 0;
                 ;
                 height:22px;
            }
             &-icon {
                 display: none;
            }
        }
    }
     &-input {
         border: 1px solid transparent;
         width: 100%;
         color: #666;
         cursor: text;
         line-height: 1.5;
         outline: 0;
         height:22px;
         &-invalid {
             border-color: red;
        }
    }
     &-clear-btn {
         z-index: 9999;
         position: absolute;
         right: 6px;
         cursor: pointer;
         overflow: hidden;
         width: 20px;
         height: 20px;
         text-align: center;
         line-height: 20px;
         top: 6px;
         margin: 0;
    }
     &-clear-btn:after {
         content: "x";
         font-size: 12px;
         color: #aaa;
         display: inline-block;
         line-height: 1;
         width: 20px;
         transition: color 0.3s ease;
    }
     &-clear-btn:hover:after {
         color: #666;
    }
}
 .@{prefixClass}-full {
     width: 275px;
     &-header {
         padding: 5px 10px;
         text-align: center;
         user-select: none;
         -webkit-user-select: none;
         border-bottom: 1px solid #ccc;
         overflow: hidden;
         &-month-select, &-year-select {
             width: 70px;
             float: right;
             margin-right: 5px;
        }
         &-switcher {
             float: right;
             display: inline-block;
             &-normal:hover {
                 border-color: #23c0fa;
                 box-shadow: 0 0 2px rgba(45, 183, 245, 0.8);
                 cursor: pointer;
            }
             &-focus {
                 border-color: #1890FF;
                 background-color: #1890FF;
                 color: #fff;
            }
             > span {
                 float: left;
                 height: 28px;
                 line-height: 24px;
                 border: 1px solid #d9d9d9;
                 padding: 0 10px;
                 color: #666;
                 &:first-child {
                     border-top-left-radius: 4px;
                     border-bottom-left-radius: 4px;
                     border-right: none;
                }
                 &:last-child {
                     border-top-right-radius: 4px;
                     border-bottom-right-radius: 4px;
                     border-left: none;
                }
            }
        }
    }
}
 .@{prefixClass}-fullscreen {
     width: auto;
     .@{prefixClass}-full-header {
         border-bottom: none;
    }
     .@{prefixClass}{
         &-column-header {
             text-align: right;
             padding-right: 12px;
        }
         &-cell {
             padding: 0;
        }
         &-cell .@{prefixClass}-date, &-month-panel-cell .@{prefixClass}-month-panel-month {
             display: block;
             height: 116px;
             width: auto;
             border-radius: 0;
             margin: 0 4px;
             border: none;
             border-top: 2px solid #eee;
             text-align: right;
             padding-right: 8px;
        }
         &-selected-day .@{prefixClass}-date, &-month-panel-selected-cell .@{prefixClass}-month-panel-month {
             background-color: #ebfaff;
             color: #666;
        }
         &-today .@{prefixClass}-date, &-month-panel-selected-cell .@{prefixClass}-month-panel-month {
             border-top-color: #1890FF;
             color: #1890FF;
        }
    }
}
 .@{prefixClass}-picker {
     position: absolute;
     left: -9999px;
     top: -9999px;
     z-index: 1000;
     &-hidden {
         display: none;
    }
}
 @input-box-height: 35px;
 .@{prefixClass}-range {
     width: 502px;
     overflow: hidden;
     &-part {
         width: 250px;
         position: relative;
         .@{prefixClass}-time-picker {
             top: 69px;
             &-panel {
                 &-select {
                     width: 77px;
                }
            }
        }
    }
     &-left {
         float: left;
         .@{prefixClass}-time-picker-panel {
             &-select:last-child {
                 border-right: 1px solid #e9e9e9;
            }
        }
    }
     &-right {
         float: right;
         .@{prefixClass}-time-picker-panel {
             left: 21px;
             &-select:first-child {
                 border-left: 1px solid #e9e9e9;
            }
        }
    }
     &-middle {
         position: absolute;
         margin-left: -10px;
         text-align: center;
         height: @input-box-height;
         line-height: @input-box-height;
    }
     .@{prefixClass}-date-panel::after {
         content:".";
         display:block;
         height:0;
         clear:both;
         visibility:hidden;
    }
     .@{prefixClass}-input-wrap {
         height: @input-box-height;
    }
     .@{prefixClass}-input, .@{timePickerClass}-input {
         padding: 1px 7px;
         height: 22px;
    }
     .@{prefixClass}-body, .@{prefixClass}-decade-panel-body, .@{prefixClass}-year-panel-body, .@{prefixClass}-month-panel-body {
         border-bottom: 1px solid #e9e9e9;
    }
     &.@{prefixClass}-week-number {
         width: 574px;
         .@{prefixClass}-range {
             &-part {
                 width: 286px;
                 .@{prefixClass}-time-picker {
                     top: 69px;
                     &-panel {
                         &-select {
                             width: 89px;
                        }
                    }
                }
            }
             &-right {
                 .@{prefixClass}-time-picker-panel {
                     left: 36px;
                }
            }
        }
    }
     .@{prefixClass}-year-panel, .@{prefixClass}-month-panel, .@{prefixClass}-decade-panel {
         top: @input-box-height;
    }
     .@{prefixClass}-month-panel .@{prefixClass}-year-panel {
         top: 0;
    }
     .@{prefixClass}-decade-panel-table, .@{prefixClass}-year-panel-table, .@{prefixClass}-month-panel-table {
         height: 198px;
    }
     .@{prefixClass}-in-range-cell {
         background: #ebf4f8;
         border-radius: 0;
    }
     &-bottom {
         text-align: right;
    }
     .@{prefixClass}-footer{
         border-top: none;
         padding: 0;
         &-btn {
             padding: 10px 12px 10px 0;
        }
    }
     .@{prefixClass}-ok-btn {
         position: static;
    }
     .@{prefixClass}-today-btn {
         float: left;
    }
}
 @prefixClass: rc-calendar;
 @timePickerClass: rc-time-picker;
 .@{prefixClass}{
     box-sizing: border-box;
     * {
         box-sizing: border-box;
    }
}
 .@{prefixClass}-hidden {
     display: none;
}
 .@{prefixClass}{
     position: relative;
     outline: none;
     font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
     width: 253px;
     border: 1px solid #ccc;
     list-style: none;
     font-size: 12px;
     text-align: left;
     background-color: #fff;
     border-radius: 3px;
     box-shadow: 0 1px 5px #ccc;
     background-clip: padding-box;
     border: 1px solid #ccc;
     line-height: 1.5;
     &-date-panel, &-panel {
         position: relative;
         outline: none;
    }
     &-week-number {
         width: 286px;
         &-cell {
             text-align: center;
        }
    }
     &-header {
         padding: 0 10px;
         height: 34px;
         line-height: 30px;
         text-align: center;
         user-select: none;
         -webkit-user-select: none;
         border-bottom: 1px solid #ccc;
         > a {
             font-weight: bold;
             display: inline-block;
             padding: 0px 5px;
             line-height: 34px;
             text-align: center;
             width: 30px;
             &:hover {
                 cursor: pointer;
                 color: #23c0fa;
            }
        }
         .@{prefixClass}-prev-month-btn {
             position: absolute;
             left: 25px;
             &:after {
                 content: '‹' 
            }
        }
         .@{prefixClass}-next-month-btn {
             position: absolute;
             right: 25px;
             &:after {
                 content: '›' 
            }
        }
    }
     &-year-select, &-month-select, &-day-select {
         display: inline-block;
         font-size: 12px;
         font-weight: bold;
         color: #666;
         padding: 0 8px;
         line-height: 34px;
         &:hover {
             cursor: pointer;
             color: #23c0fa;
        }
         &.@{prefixClass}-time-status:hover{
             cursor: pointer;
             color: #666;
        }
    }
     &-prev-month-btn, &-next-month-btn, &-prev-year-btn, &-next-year-btn {
         position: absolute;
         top: 0;
         cursor: pointer;
         color: #999;
         font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
         padding: 0 5px;
         font-size: 16px;
         display: inline-block;
         line-height: 34px;
         &:hover {
             color: #23c0fa;
        }
    }
     &-next-year-btn {
         right: 0;
         &:after {
             content: '»' 
        }
    }
     &-prev-year-btn {
         left: 0;
         &:after {
             content: '«' 
        }
    }
     &-body {
         padding: 9px 10px 10px;
         height: 217px;
    }
     table {
         border-collapse: collapse;
         max-width: 100%;
         background-color: transparent;
         width: 100%;
    }
     table, td, th, td {
         border: none;
    }
     &-table {
         border-spacing: 0;
         margin-bottom: 0;
    }
     &-column-header {
         line-height: 18px;
         padding: 6px 0;
         width: 33px;
         text-align: center;
         .@{prefixClass}-column-header-inner {
             display: block;
             font-weight: normal;
        }
    }
     &-week-number-header {
         .@{prefixClass}-column-header-inner {
             display: none;
        }
    }
     &-cell {
         padding: 1px 0;
    }
     &-date {
         display: block;
         margin: 0 auto;
         color: #666;
         border-radius: 4px 4px;
         width: 26px;
         height: 26px;
         padding: 0;
         background: transparent;
         line-height: 26px;
         text-align: center;
         &:hover {
             background: #ebfaff;
             cursor: pointer;
        }
    }
     &-selected-day &-date {
         background: tint(#3fc7fa, 80%);
    }
     &-selected-date &-date {
         background: #1890FF;
         color: #fff;
         &:hover {
             background: #1890FF;
        }
    }
     &-today &-date {
         border: 1px solid #1890FF;
    }
     &-disabled-cell &-date {
         cursor: not-allowed;
         color: #bcbcbc;
         background: #f3f3f3;
         border-radius: 0;
         width: auto;
         &:hover {
             background: #f3f3f3;
        }
    }
     &-disabled-cell-first-of-row &-date {
         border-top-left-radius: 4px;
         border-bottom-left-radius: 4px;
    }
     &-disabled-cell-last-of-row &-date {
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
    }
     &-last-month-cell &-date, &-next-month-btn-day &-date {
         color: #bbb;
    }
     &-footer {
         border-top: 1px solid #ccc;
         padding: 10px 0;
         text-align: center;
         position: relative;
         .@{timePickerClass}{
             width: 90px;
             &-input {
                 height: 24px;
            }
        }
         &-show-ok {
             text-align: right;
             .@{prefixClass}{
                 &-footer-btn {
                     padding-right: 12px;
                }
                 &-time-picker-btn {
                     margin-left: 0;
                     padding: 0 12px;
                }
                 &-today-btn {
                     float: left;
                     padding-left: 12px;
                }
            }
        }
    }
     &-footer-btn {
         margin-top: 2px;
         &:after {
             content: 'x';
             height: 0;
             font-size: 0;
             overflow: hidden;
             clear: both;
        }
    }
     &-time-picker-btn {
         margin-left: 10px;
    }
     &-today-btn, &-ok-btn, &-time-picker-btn {
         display: inline-block;
         text-align: center;
         color: #f46830;
         &:hover {
             cursor: pointer;
             color: #23c0fa;
        }
         &-disabled {
             color: #bbb;
             &:hover {
                 color: #bbb;
            }
        }
    }
     &-today-btn {
         padding-left: 10px;
    }
}
 .@{prefixClass}-decade-panel {
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
     background: #ffffff;
     z-index: 10;
     position: absolute;
     outline: none;
}
 .@{prefixClass}-decade-panel-hidden {
     display: none;
}
 .@{prefixClass}-decade-panel-header {
     padding: 0 10px;
     height: 34px;
     line-height: 34px;
     position: relative;
     text-align: center;
     user-select: none;
     -webkit-user-select: none;
     border-bottom: 1px solid #ccc;
     > a {
         font-weight: bold;
         display: inline-block;
         padding: 1px 5px;
         text-align: center;
         width: 30px;
         &:hover {
             cursor: pointer;
             color: #23c0fa;
        }
    }
}
 .@{prefixClass}-decade-panel-prev-century-btn, .@{prefixClass}-decade-panel-next-century-btn {
     position: absolute;
     top: 0;
}
 .@{prefixClass}-decade-panel-next-century-btn {
     &:after {
         content: '»' 
    }
}
 .@{prefixClass}-decade-panel-prev-century-btn {
     user-select: none;
     left: 0;
     &:after {
         content: '«' 
    }
}
 .@{prefixClass}-decade-panel-next-century-btn {
     user-select: none;
     right: 0;
}
 .@{prefixClass}-decade-panel-body {
     padding: 9px 10px 10px;
     position: absolute;
     bottom: 0;
     top: 34px;
}
 .@{prefixClass}-decade-panel-table {
     table-layout: fixed;
     width: 100%;
     height: 100%;
     border-collapse: separate;
}
 .@{prefixClass}-decade-panel-cell {
     text-align: center;
}
 .@{prefixClass}-decade-panel-decade {
     display: block;
     margin: 0 auto;
     color: #666;
     border-radius: 4px 4px;
     height: 36px;
     padding: 0;
     background: transparent;
     line-height: 36px;
     text-align: center;
     &:hover {
         background: #ebfaff;
         cursor: pointer;
    }
}
 .@{prefixClass}-decade-panel-selected-cell .@{prefixClass}-decade-panel-decade {
     background: #1890FF;
     color: #fff;
     &:hover {
         background: #1890FF;
         color: #fff;
    }
}
 .@{prefixClass}-decade-panel-last-century-cell, .@{prefixClass}-decade-panel-next-century-cell {
     .@{prefixClass}-decade-panel-decade{
         user-select: none;
         -webkit-user-select: none;
         color: rgba(0, 0, 0, 0.25);
    }
}
 .calendar-input() {
     height: 25px;
     position: relative;
     display: inline-block;
     margin: 0 0;
     padding: 4px 10px;
     border-radius: 6px 6px;
     border: 1px solid #d9d9d9;
     background-color: #ffffff;
     color: #666;
     line-height: 1.5;
     transform: border 0.3s cubic-bezier(0.35, 0, 0.25, 1), background 0.3s cubic-bezier(0.35, 0, 0.25, 1), box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1);
     &:hover {
         border-color: #23c0fa;
    }
     &:focus {
         border-color: #23c0fa;
         box-shadow: 0 0 3px #23c0fa;
    }
}
 .@{prefixClass}-month-panel {
     left: 0;
     top:0;
     bottom: 0;
     right: 0;
     background: #ffffff;
     z-index: 10;
     position: absolute;
     outline: none;
}
 .@{prefixClass}-month-panel-hidden {
     display: none;
}
 .@{prefixClass}-month-panel-header {
     padding: 0 10px;
     height: 34px;
     line-height: 30px;
     position: relative;
     text-align: center;
     user-select: none;
     -webkit-user-select: none;
     border-bottom: 1px solid #ccc;
     > a {
         font-weight: bold;
         display: inline-block;
         padding: 4px 5px;
         text-align: center;
         width: 30px;
         &:hover {
             cursor: pointer;
             color: #23c0fa;
        }
    }
}
 .@{prefixClass}-month-panel-prev-year-btn, .@{prefixClass}-month-panel-next-year-btn {
     position: absolute;
     top: 0;
}
 .@{prefixClass}-month-panel-next-year-btn {
     &:after {
         content: '»' 
    }
}
 .@{prefixClass}-month-panel-prev-year-btn {
     user-select: none;
     left: 0;
     &:after {
         content: '«' 
    }
}
 .@{prefixClass}-month-panel .@{prefixClass}-month-panel-year-select {
     width: 180px;
}
 .@{prefixClass}-month-panel-year-select-arrow {
     display: none;
}
 .@{prefixClass}-month-panel-next-year-btn {
     user-select: none;
     right: 0;
}
 .@{prefixClass}-month-panel-body {
     padding: 9px 10px 10px;
     position: absolute;
     top: 34px;
     bottom: 0;
}
 .@{prefixClass}-month-panel-table {
     table-layout: fixed;
     width: 100%;
     height: 100%;
     border-collapse: separate;
}
 .@{prefixClass}-month-panel-cell {
     text-align: center;
     .@{prefixClass}-month-panel-month {
         display: block;
         width: 46px;
         margin: 0 auto;
         color: #666;
         border-radius: 4px 4px;
         height: 36px;
         padding: 0;
         background: transparent;
         line-height: 36px;
         text-align: center;
         &:hover {
             background: #ebfaff;
             cursor: pointer;
        }
    }
     &-disabled{
         .@{prefixClass}-month-panel-month {
             color: #bfbfbf;
             &:hover {
                 background: white;
                 cursor: not-allowed;
            }
        }
    }
}
 .@{prefixClass}-month-panel-selected-cell .@{prefixClass}-month-panel-month {
     background: #1890FF;
     color: #fff;
     &:hover {
         background: #1890FF;
         color: #fff;
    }
}
 .@{prefixClass}-month-header-wrap {
     position: relative;
     height: 308px;
}
 .@{prefixClass}{
     &-picker {
         .effect() {
             animation-duration: .3s;
             animation-fill-mode: both;
             transform-origin: 0 0;
             display: block !important;
        }
         &-slide-up-enter {
             .effect();
             opacity: 0;
             animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
             animation-play-state: paused;
        }
         &-slide-up-appear {
             .effect();
             opacity: 0;
             animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
             animation-play-state: paused;
        }
         &-slide-up-leave {
             .effect();
             opacity: 1;
             animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
             animation-play-state: paused;
        }
         &-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft, &-slide-up-enter&-slide-up-enter-active&-placement-bottomRight, &-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft, &-slide-up-appear&-slide-up-appear-active&-placement-bottomRight {
             animation-name: rcDropdownSlideUpIn;
             animation-play-state: running;
        }
         &-slide-up-enter&-slide-up-enter-active&-placement-topLeft, &-slide-up-enter&-slide-up-enter-active&-placement-topRight, &-slide-up-appear&-slide-up-appear-active&-placement-topLeft, &-slide-up-appear&-slide-up-appear-active&-placement-topRight {
             animation-name: rcDropdownSlideDownIn;
             animation-play-state: running;
        }
         &-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft, &-slide-up-leave&-slide-up-leave-active&-placement-bottomRight {
             animation-name: rcDropdownSlideUpOut;
             animation-play-state: running;
        }
         &-slide-up-leave&-slide-up-leave-active&-placement-topLeft, &-slide-up-leave&-slide-up-leave-active&-placement-topRight {
             animation-name: rcDropdownSlideDownOut;
             animation-play-state: running;
        }
         @keyframes rcDropdownSlideUpIn {
             0% {
                 opacity: 0;
                 transform-origin: 0% 0%;
                 transform: scaleY(0);
            }
             100% {
                 opacity: 1;
                 transform-origin: 0% 0%;
                 transform: scaleY(1);
            }
        }
         @keyframes rcDropdownSlideUpOut {
             0% {
                 opacity: 1;
                 transform-origin: 0% 0%;
                 transform: scaleY(1);
            }
             100% {
                 opacity: 0;
                 transform-origin: 0% 0%;
                 transform: scaleY(0);
            }
        }
         @keyframes rcDropdownSlideDownIn {
             0% {
                 opacity: 0;
                 transform-origin: 100% 100%;
                 transform: scaleY(0);
            }
             100% {
                 opacity: 1;
                 transform-origin: 100% 100%;
                 transform: scaleY(1);
            }
        }
         @keyframes rcDropdownSlideDownOut {
             0% {
                 opacity: 1;
                 transform-origin: 100% 100%;
                 transform: scaleY(1);
            }
             100% {
                 opacity: 0;
                 transform-origin: 100% 100%;
                 transform: scaleY(0);
            }
        }
    }
}
 .@{prefixClass}-time-input {
     .calendar-input();
     width:40px;
}
 .@{prefixClass}-time-panel {
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
     background: #ffffff;
     z-index: 10;
     position: absolute;
     outline: none;
}
 .@{prefixClass}-time-panel-header {
     padding: 0 10px;
     height: 34px;
     line-height: 34px;
     position: relative;
     text-align: center;
     user-select: none;
     -webkit-user-select: none;
     border-bottom: 1px solid #ccc;
}
 .@{prefixClass}-time-panel-body {
     padding: 9px 10px 10px;
}
 .@{prefixClass}-time-panel-title {
     width: 180px;
     font-weight: bold;
     display: inline-block;
     padding: 4px 5px;
     text-align: center;
     height: 30px;
     line-height: 22px;
     border-radius: 4px;
}
 .@{prefixClass}-time-panel-table {
     table-layout: fixed;
     width: 100%;
     height:255px;
     border-collapse: separate;
}
 .@{prefixClass}-time-panel-cell {
     text-align: center;
     height: 42px;
     vertical-align: middle;
}
 .@{prefixClass}-time-panel-time {
     line-height: 26px;
     display: block;
     border-radius: 4px;
     width:26px;
     margin: 0 auto;
     &:hover {
         background: #ebfaff;
         cursor: pointer;
    }
}
 .@{prefixClass}-time-panel-selected-cell .@{prefixClass}-time-panel-time {
     background: #1890FF;
     color: #fff;
     &:hover {
         background: #1890FF;
         color: #fff;
    }
}
 .@{prefixClass}-year-panel {
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
     background: #ffffff;
     z-index: 10;
     position: absolute;
     outline: none;
}
 .@{prefixClass}-year-panel-hidden {
     display: none;
}
 .@{prefixClass}-year-panel-header {
     padding: 0 10px;
     height: 34px;
     line-height: 30px;
     position: relative;
     text-align: center;
     user-select: none;
     -webkit-user-select: none;
     border-bottom: 1px solid #ccc;
     > a {
         font-weight: bold;
         display: inline-block;
         padding: 4px 5px;
         text-align: center;
         width: 30px;
         &:hover {
             cursor: pointer;
             color: #23c0fa;
        }
    }
}
 .@{prefixClass}-year-panel-prev-decade-btn, .@{prefixClass}-year-panel-next-decade-btn {
     position: absolute;
     top: 0;
}
 .@{prefixClass}-year-panel-next-decade-btn {
     &:after {
         content: '»' 
    }
}
 .@{prefixClass}-year-panel-prev-decade-btn {
     user-select: none;
     left: 0;
     &:after {
         content: '«' 
    }
}
 .@{prefixClass}-year-panel .@{prefixClass}-year-panel-decade-select {
     width: 180px;