position: absolute;
     bottom: 0;
     top: 2.42857143rem;
}
 .@{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: 0.28571429rem 0.28571429rem;
     height: 2.57142857rem;
     padding: 0;
     background: transparent;
     line-height: 2.57142857rem;
     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: 1.78571429rem;
     position: relative;
     display: inline-block;
     margin: 0 0;
     padding: 0.28571429rem 0.71428571rem;
     border-radius: 0.42857143rem 0.42857143rem;
     border: 0.07142857rem 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 0.21428571rem #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 0.71428571rem;
     height: 2.42857143rem;
     line-height: 2.14285714rem;
     position: relative;
     text-align: center;
     user-select: none;
     -webkit-user-select: none;
     border-bottom: 0.07142857rem solid #ccc;
     > a {
         font-weight: bold;
         display: inline-block;
         padding: 0.28571429rem 0.35714286rem;
         text-align: center;
         width: 2.14285714rem;
         &: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: 12.85714286rem;
}
 .@{prefixClass}-month-panel-year-select-arrow {
     display: none;
}
 .@{prefixClass}-month-panel-next-year-btn {
     user-select: none;
     right: 0;
}
 .@{prefixClass}-month-panel-body {
     padding: 0.64285714rem 0.71428571rem 0.71428571rem;
     position: absolute;
     top: 2.42857143rem;
     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: 3.28571429rem;
         margin: 0 auto;
         color: #666;
         border-radius: 0.28571429rem 0.28571429rem;
         height: 2.57142857rem;
         padding: 0;
         background: transparent;
         line-height: 2.57142857rem;
         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: 22.00000000rem;
}
 .@{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:2.85714286rem;
}
 .@{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 0.71428571rem;
     height: 2.42857143rem;
     line-height: 2.42857143rem;
     position: relative;
     text-align: center;
     user-select: none;
     -webkit-user-select: none;
     border-bottom: 0.07142857rem solid #ccc;
}
 .@{prefixClass}-time-panel-body {
     padding: 0.64285714rem 0.71428571rem 0.71428571rem;
}
 .@{prefixClass}-time-panel-title {
     width: 12.85714286rem;
     font-weight: bold;
     display: inline-block;
     padding: 0.28571429rem 0.35714286rem;
     text-align: center;
     height: 2.14285714rem;
     line-height: 1.57142857rem;
     border-radius: 0.28571429rem;
}
 .@{prefixClass}-time-panel-table {
     table-layout: fixed;
     width: 100%;
     height:18.21428571rem;
     border-collapse: separate;
}
 .@{prefixClass}-time-panel-cell {
     text-align: center;
     height: 3.00000000rem;
     vertical-align: middle;
}
 .@{prefixClass}-time-panel-time {
     line-height: 1.85714286rem;
     display: block;
     border-radius: 0.28571429rem;
     width:1.85714286rem;
     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 0.71428571rem;
     height: 2.42857143rem;
     line-height: 2.14285714rem;
     position: relative;
     text-align: center;
     user-select: none;
     -webkit-user-select: none;
     border-bottom: 0.07142857rem solid #ccc;
     > a {
         font-weight: bold;
         display: inline-block;
         padding: 0.28571429rem 0.35714286rem;
         text-align: center;
         width: 2.14285714rem;
         &: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: 12.85714286rem;
}
 .@{prefixClass}-year-panel-decade-select-arrow {
     display: none;
}
 .@{prefixClass}-year-panel-next-decade-btn {
     user-select: none;
     right: 0;
}
 .@{prefixClass}-year-panel-body {
     padding: 0.64285714rem 0.71428571rem 0.71428571rem;
     position: absolute;
     bottom: 0;
     top: 2.42857143rem;
}
 .@{prefixClass}-year-panel-table {
     table-layout: fixed;
     width: 100%;
     height: 100%;
     border-collapse: separate;
}
 .@{prefixClass}-year-panel-cell {
     text-align: center;
}
 .@{prefixClass}-year-panel-year {
     display: block;
     width: 3.28571429rem;
     margin: 0 auto;
     color: #666;
     border-radius: 0.28571429rem 0.28571429rem;
     height: 2.57142857rem;
     padding: 0;
     background: transparent;
     line-height: 2.57142857rem;
     text-align: center;
     &:hover {
         background: #ebfaff;
         cursor: pointer;
    }
}
 .@{prefixClass}-year-panel-selected-cell .@{prefixClass}-year-panel-year {
     background: #1890FF;
     color: #fff;
     &:hover {
         background: #1890FF;
         color: #fff;
    }
}
 .@{prefixClass}-year-panel-last-decade-cell, .@{prefixClass}-year-panel-next-decade-cell {
     .@{prefixClass}-year-panel-year{
         user-select: none;
         -webkit-user-select: none;
         color: rgba(0, 0, 0, 0.25);
    }
}
 .sdd-checkboxGroup-container {
     width: 100%;
     .labelCheckbox-content-wrapper {
         display: inline-flex;
    }
     .labelCheckboxGroup {
         label.ant-checkbox-wrapper {
             margin-left: 0;
             margin-right: 8/@px-unit;
             &:last-of-type {
                 margin-right: 0/@px-unit;
            }
        }
    }
     .sdd-vertical-checkboxGroup {
         label.ant-checkbox-wrapper {
             margin-left: 0;
             margin-right: 0/@px-unit;
        }
    }
}
 @CheckboxInnerMaxWidth: 24/@px-unit;
 .sdd-checkbox-container {
     display: inline-block;
     width: 100%;
     .labelCheckbox {
         width: 100%;
    }
     .ant-checkbox + span {
         display: inline-block;
    }
     .labelCheckbox-content-wrapper {
         display: inline-flex;
         width: 100%;
    }
}
 .label-custom-wrapper {
     .sdd-checkbox-container {
         .ant-checkbox + span {
             width: calc(100% - @CheckboxInnerMaxWidth);
        }
    }
}
 .LabelFileReader-IEInput{
     position:absolute;
     left:0;
     top:0;
     width:100%;
     height:100%;
     z-index:999;
     opacity:0;
}
 .IE-submit-button {
     position:relative;
     float:left;
     margin-left: 8/@px-unit;
}
 .IE-sdd-form {
     height:0;
     width:0;
     opacity:0;
}
 .upload-sdd-button {
     float: left;
     margin-left: 8/@px-unit;
}
 .select-btn {
     float: left;
     margin-left: 8/@px-unit;
}
 input.ant-input.fileReader-input {
     width: 200/@px-unit;
     float: left;
}
 @IPV4-baseColor: @SddContentBgColor;
 @IPV4-inputBorderColor: @SddInputBorderColor;
 @IPV4-disabledColor:@SddDisableInputBgColor;
 @IPV4-borderColor: @SddInputBorderColorNo1;
 @IPV4-explainColor: @status-error-stroke-1-normal;
 @ipv4Input-borderColor: @SddInputBorderColor;
 @ipv4Input-borderColor-hover: @brand-stroke-1-hover;
 @ipv4Input-borderColor-focus: @brand-stroke-1-active;
 @ipv4Input-borderColor-shadow: @brand-stroke-2-normal;
 @ipv4Input-error-borderColor: @status-error-stroke-1-normal;
 @ipv4Input-error-borderColor-hover: @status-error-stroke-1-hover;
 @ipv4Input-error-borderColor-focus: @status-error-stroke-1-active;
 @ipv4Input-error-borderColor-shadow: @status-error-stroke-3-normal;
 .Loop(@index) when(@index<7){
     input:nth-child(@{index}){
         border-left: none;
         border-right: none;
    }
     .Loop(@index+1);
}
 .label-hd-version {
     .LabelIPV4 {
         border-radius: @radius-m;
    }
}
 .LabelIPV4 {
     border-width: 1/@px-unit;
     border-style: solid;
     border-radius: 2/@px-unit;
     border-color: @ipv4Input-borderColor;
     transition: all 0.3s linear;
}
 .LabelIPV4:not(.ipv4-disabled):hover {
     border-color: @ipv4Input-borderColor-hover;
}
 .LabelIPV4.ipv4-active:not(.ipv4-disabled) {
     border-color: @ipv4Input-borderColor-focus;
     box-shadow: 0 0 0 2/@px-unit @ipv4Input-borderColor-shadow;
}
 .has-error {
     .LabelIPV4:not(.ipv4-disabled) {
         border-color: @ipv4Input-error-borderColor;
    }
     .LabelIPV4:not(.ipv4-disabled):hover {
         border-color: @ipv4Input-error-borderColor-hover;
    }
     .LabelIPV4.ipv4-active:not(.ipv4-disabled) {
         border-color: @ipv4Input-error-borderColor-focus;
         box-shadow: 0 0 0 2/@px-unit @ipv4Input-error-borderColor-shadow;
    }
}
 .LabelIPV4 {
     display: flex;
     align-items: center;
     .ant-input:not(:first-child):not(:last-child) {
         border-radius: 0;
    }
     .ant-input:first-child {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
    }
     .ant-input:last-child {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
    }
     .mac-input {
         border: none !important;
         box-shadow: none !important;
         position: relative;
         ime-mode: disabled;
         width: 22%;
         background-color: @IPV4-baseColor;
         text-align: center;
         vertical-align: top;
         padding: 4/@px-unit 4/@px-unit;
         margin-right: 0/@px-unit;
         transition: none;
    }
     .mac-point {
         border: none !important;
         box-shadow: none !important;
         background-color: @IPV4-baseColor;
         vertical-align: top;
         padding: 4/@px-unit 0 4/@px-unit 0;
         text-align: center;
         width: 4%;
         margin-right: 0/@px-unit;
         font-weight: bold;
         transition: none;
         &:disabled {
             cursor: default;
        }
         &.dot-focus {
             outline: 0;
        }
    }
     .mac-point.input-disabled {
         cursor: not-allowed;
    }
     .input-disabled {
         background-color: @IPV4-disabledColor;
    }
     .ant-input-group.ant-input-group-compact > *:not(:last-child) {
         margin-right: 0/@px-unit;
    }
}
 .LabelIPV6 {
     display: flex;
     .ipv6-separator {
         display: inline-block;
         width:2.14285714rem;
         height: 2.28571429rem;
         text-align: center;
         line-height: 2.28571429rem;
    }
     .ipv6-number {
         width:7.42857143rem;
    }
}
 .label-textArea {
     width: 350/@px-unit;
}
 .labelInputNumber {
     width: 100%;
}
 @macInput-baseColor: @SddContentBgColor;
 @macInput-borderColor: @SddInputBorderColor;
 @macInput-borderColor-hover: @brand-stroke-1-hover;
 @macInput-borderColor-focus: @brand-stroke-1-active;
 @macInput-borderColor-shadow: @brand-stroke-2-normal;
 @macInput-error-borderColor: @status-error-stroke-1-normal;
 @macInput-error-borderColor-hover: @status-error-stroke-1-hover;
 @macInput-error-borderColor-focus: @status-error-stroke-1-active;
 @macInput-error-borderColor-shadow: @status-error-stroke-3-normal;
 @macInput-explainColor: @status-error-stroke-1-normal;
 .LoopMac(@index) when(@index<11){
     .ant-input:nth-child(@{index}){
         border-left: none;
         border-right: none;
    }
     .LoopMac(@index+1);
}
 .label-hd-version {
     .LabelMac {
         border-radius: @radius-m;
    }
}
 .LabelMac {
     border-width: 1/@px-unit;
     border-style: solid;
     border-radius: 2/@px-unit;
     border-color: @macInput-borderColor;
     transition: all 0.3s linear;
}
 .LabelMac:not(.mac-disabled):hover {
     border-color: @macInput-borderColor-hover;
}
 .LabelMac.mac-active:not(.mac-disabled) {
     border-color: @macInput-borderColor-focus;
     box-shadow: 0 0 0 2/@px-unit @macInput-borderColor-shadow;
}
 .has-error {
     .LabelMac:not(.mac-disabled) {
         border-color: @macInput-error-borderColor;
    }
     .LabelMac:not(.mac-disabled):hover {
         border-color: @macInput-error-borderColor-hover;
    }
     .LabelMac.mac-active:not(.mac-disabled) {
         border-color: @macInput-error-borderColor-focus;
         box-shadow: 0 0 0 2/@px-unit @macInput-error-borderColor-shadow;
    }
}
 .LabelMac {
     display: flex;
     align-items: center;
     .ant-input:not(:first-child):not(:last-child) {
         border-radius: 0;
    }
     .ant-input:first-child {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
    }
     .ant-input:last-child {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
    }
     .mac-input {
         width: 15%;
         border: none !important;
         box-shadow: none !important;
         background-color: @neutral-bg-5-normal;
         ime-mode: disabled;
         text-align: center;
         padding: 4/@px-unit 4/@px-unit;
         margin-right: 0/@px-unit;
         vertical-align: top;
         transition: none;
    }
     .mac-point {
         border: none !important;
         box-shadow: none !important;
         background-color: @neutral-bg-5-normal;
         text-align: center;
         vertical-align: top;
         padding: 4/@px-unit 0 4/@px-unit 0;
         width: 2%;
         margin-right: 0/@px-unit;
         font-weight: bold;
         transition: none;
         &:disabled {
             cursor: default;
        }
    }
     .mac-point.input-disabled {
         cursor: not-allowed;
    }
     .input-disabled {
         background-color:@neutral-bg-disabled;
    }
     .ant-input-group.ant-input-group-compact > *:not(:last-child) {
         margin-right: 0/@px-unit;
    }
}
 @LabelNumberAreaIconWidth : 12/@px-unit;
 @LabelNumberAreaIconWidthSub : 13/@px-unit;
 .labelNumberArea-numberInput {
     float: left;
     width: calc((100% - @LabelNumberAreaIconWidthSub) / 2);
}
 .labelNumberArea-icon {
     float: left;
     width: @LabelNumberAreaIconWidth;
     text-align: center;
}
 @SddPasswordCheckStatusWeakColor:@status-error-bg-1-normal;
 @SddPasswordCheckStatusMiddleColor:@status-warning-bg-1-normal;
 @SddPasswordCheckStatusStrongColor:@status-success-bg-1-normal;
 @CheckTipsGapWidth: 25/@px-unit;
 .label-passwordCheck-tip {
     float: left;
     border-radius: 4/@px-unit;
     background-color: @SddPasswordCheckStatusbgColor;
     height: 8/@px-unit;
     width: calc((100% - @CheckTipsGapWidth) / 3);
     margin: 0 4/@px-unit;
     margin-top: 8/@px-unit;
     -webkit-transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
     transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
 .label-passwordCheck-status-weak-1 {
     background-color: @SddPasswordCheckStatusWeakColor;
}
 .label-passwordCheck-status-middle-1 {
     background-color: @SddPasswordCheckStatusMiddleColor;
}
 .label-passwordCheck-status-middle-2 {
     background-color: @SddPasswordCheckStatusMiddleColor;
}
 .label-passwordCheck-status-strong-1 {
     background-color: @SddPasswordCheckStatusStrongColor;
}
 .label-passwordCheck-status-strong-2 {
     background-color: @SddPasswordCheckStatusStrongColor;
}
 .label-passwordCheck-status-strong-3 {
     background-color: @SddPasswordCheckStatusStrongColor;
}
 @labelPasswordCheckPopoverDistance: 0;
 @password-check-tip-gap: 4/@px-unit;
 .LabelPasswordCheckPopover-Wrapper {
     .ant-popover {
         width: 100%;
    }
     .ant-popover-arrow {
         display: none;
    }
     .ant-popover-inner {
         padding: 0;
         max-width: none;
    }
     .ant-popover-inner-content {
         padding: 2/@px-unit 8/@px-unit;
    }
     .ant-popover-placement-top, .ant-popover-placement-topLeft, .ant-popover-placement-topRight {
         padding-bottom: @labelPasswordCheckPopoverDistance !important;
    }
     .ant-popover-placement-right, .ant-popover-placement-rightTop, .ant-popover-placement-rightBottom {
         padding-left: @labelPasswordCheckPopoverDistance !important;
    }
     .ant-popover-placement-bottom, .ant-popover-placement-bottomLeft, .ant-popover-placement-bottomRight {
         padding-top: @labelPasswordCheckPopoverDistance !important;
    }
     .ant-popover-placement-left, .ant-popover-placement-leftTop, .ant-popover-placement-leftBottom {
         padding-right: @labelPasswordCheckPopoverDistance !important;
    }
     .password-popover-content {
         .password-popover-rule-content {
             display: flex;
             flex-wrap: wrap;
        }
         .password-popover-rule-content-item {
             display: flex;
             padding-top: 5/@px-unit;
             padding-bottom: 5/@px-unit;
             align-items: baseline;
             .rule-checkStatus-icon {
                 line-height: 0;
                 font-size: 16/@px-unit;
                 margin-right: 8/@px-unit;
                 .check-icon {
                     color: @status-success-fg-1-normal;
                }
                 .uncheck-icon {
                     color: @SddLayoutContentColor;
                     svg {
                         circle {
                             stroke: @status-success-fg-1-normal;
                        }
                    }
                }
            }
        }
    }
     .gap-divider {
         margin: 0;
         margin-top: 2/@px-unit;
         margin-bottom: 2/@px-unit;
    }
     .password-popover-strength-content {
         padding-bottom: 12/@px-unit;
         .password-popover-strength-tip {
             display: flex;
             min-height: 32/@px-unit;
             align-items: center;
             justify-content: space-between;
        }
         .password-popover-strength-status {
             display: flex;
             align-items: center;
             margin-top: 8/@px-unit;
             margin-left: -(@password-check-tip-gap / 2);
             margin-right: -(@password-check-tip-gap / 2);
             .label-passwordCheck-tip {
                 flex-grow: 1;
                 margin: 0 @password-check-tip-gap / 2;
            }
        }
    }
}
 @RadioInnerMaxWidth: 24/@px-unit;
 .sdd-radio-container {
     display: inline-block;
     width: 100%;
     .labelRadio {
         width: 100%;
    }
     .ant-radio + span {
         display: inline-block;
    }
     .labelRadio-content-wrapper {
         display: inline-flex;
         width: 100%;
    }
}
 .label-custom-wrapper {
     .sdd-radio-container {
         .ant-radio + span {
             width: calc(100% - @RadioInnerMaxWidth);
        }
    }
}
 .sdd-vertical-radioGroup {
     height: auto;
}
 .sdd-radioGroup-container {
     width: 100%;
     .labelRadio-content-wrapper {
         display: inline-flex;
    }
}
/** * Rangeslider */
 .rangeslider {
     margin: 12/@px-unit 0 18/@px-unit 0;
     position: relative;
     background: #e6e6e6;
     -ms-touch-action: none;
     touch-action: none;
     &, .rangeslider__fill {
         display: block;
         box-shadow: inset 0 1/@px-unit 3/@px-unit rgba(0, 0, 0, 0.4);
    }
     .rangeslider__handle {
         background: #fff;
         border: 1/@px-unit solid #ccc;
         cursor: pointer;
         display: inline-block;
         position: absolute;
         outline: none;
         box-shadow: 0 1/@px-unit 3/@px-unit rgba(0, 0, 0, 0.4), 0 -1/@px-unit 3/@px-unit rgba(0, 0, 0, 0.4);
         .rangeslider__active {
             opacity: 1;
        }
    }
     .rangeslider__handle-tooltip {
         width: 40/@px-unit;
         height: 40/@px-unit;
         text-align: center;
         position: absolute;
         background-color: rgba(0, 0, 0, 0.8);
         font-weight: normal;
         font-size: 14/@px-unit;
         transition: all 100ms ease-in;
         border-radius: 4/@px-unit;
         display: inline-block;
         color: white;
         left: 50%;
         transform: translate3d(-50%, 0, 0);
         span {
             margin-top: 12/@px-unit;
             display: inline-block;
             line-height: 100%;
        }
         &:after {
             content: ' ';
             position: absolute;
             width: 0;
             height: 0;
        }
    }
}
/** * Rangeslider - Horizontal slider */
 .rangeslider-horizontal {
     height: 8/@px-unit;
     border-radius: 10/@px-unit;
     .rangeslider__fill {
         height: 100%;
         background-color: @SddlinkColor;
         border-radius: 10/@px-unit;
         top: 0;
    }
     .rangeslider__handle {
         width: 12/@px-unit;
         height: 12/@px-unit;
         border-radius: 30/@px-unit;
         top: -10%;
    }
     .rangeslider__handle-tooltip {
         top: -55/@px-unit;
         &:after {
             border-left: 8/@px-unit solid transparent;
             border-right: 8/@px-unit solid transparent;
             border-top: 8/@px-unit solid rgba(0, 0, 0, 0.8);
             left: 50%;
             bottom: -8/@px-unit;
             transform: translate3d(-50%, 0, 0);
        }
    }
}
/** * Rangeslider - Vertical slider */
 .rangeslider-vertical {
     margin: 20/@px-unit auto;
     height: 150/@px-unit;
     max-width: 8/@px-unit;
     background-color: transparent;
     .rangeslider__fill, .rangeslider__handle {
         position: absolute;
    }
     .rangeslider__fill {
         width: 100%;
         background-color: @SddlinkColor;
         box-shadow: none;
         bottom: 0;
    }
     .rangeslider__handle {
         width: 12/@px-unit;
         height: 12/@px-unit;
         left: -2/@px-unit;
         border-radius: 50%;
         box-shadow: none;
    }
     .rangeslider__handle-tooltip {
         left: -100%;
         top: 50%;
         transform: translate3d(-50%, -50%, 0);
         &:after {
             border-top: 8/@px-unit solid transparent;
             border-bottom: 8/@px-unit solid transparent;
             border-left: 8/@px-unit solid rgba(0, 0, 0, 0.8);
             left: 100%;
             top: 12/@px-unit;
        }
    }
}
/** * Rangeslider - Reverse */
 .rangeslider-reverse {
     &.rangeslider-horizontal {
         .rangeslider__fill {
             right: 0;
        }
    }
     &.rangeslider-vertical {
         .rangeslider__fill {
             top: 0;
             bottom: inherit;
        }
    }
}
/** * Rangeslider - Labels */
 .rangeslider__labels {
     .rangeslider-vertical & {
         position: relative;
         list-style-type: none;
         margin: 0 0 0 24/@px-unit;
         padding: 0;
         text-align: left;
         width: 250/@px-unit;
         height: 100%;
         left: 10/@px-unit;
         .rangeslider__label-item {
             position: relative;
             transform: translate3d(0, -50%, 0);
             &::before {
                 content: '';
                 width: 10/@px-unit;
                 height: 2/@px-unit;
                 background: black;
                 position: absolute;
                 left: -14/@px-unit;
                 top: 50%;
                 transform: translateY(-50%);
                 z-index: -1;
            }
        }
    }
     .rangeslider__label-item {
         position: absolute;
         font-size: 14/@px-unit;
         cursor: pointer;
         display: inline-block;
         top: 8/@px-unit;
         transform: translate3d(-50%, 0, 0);
    }
}
 .labelSlider-float-left{
     float: left;
     width: 14/@px-unit;
     cursor: pointer;
}
 .labelSlider-float-right{
     float: right;
     width: 14/@px-unit;
     cursor: pointer;
}
 .labelSlider-center {
     margin:0 14/@px-unit;
}
 .ant-slider {
     margin-top: 0.71428571rem !important;
}
 .cursor-not-allowed {
     cursor: not-allowed;
}
 .sdd-swtich-contianer {
     font-size: 0;
}
 .labelText-wrapper{
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
}
 .virtual-text-wrapper {
     position: relative;
     overflow-x: hidden;
}
 .labelTimeRangePicker ~ a {
     color: inherit;
     cursor: initial;
}
 section.sdd-layout {
     background-color: inherit;
     .sdd-layout-header {
         display: flex;
         padding: 0;
         .header-item {
             flex-shrink: 0;
        }
         .logo-wrapper {
             display: flex;
             .logo-divider {
                 width: 5/@px-unit;
                 text-align: center;
                 .ant-divider {
                     background-color: @SddLayoutHeaderDividerColor;
                     margin-left: 0;
                     margin-right: 0;
                }
            }
        }
         .header-menu-wrapper {
             flex-grow: 1;
             padding-right: 32/@px-unit;
             min-width: 80/@px-unit;
             overflow: hidden;
             .menu-content-wrapper {
                 display: flex;
                 .menu-content {
                     overflow: hidden;
                     .menu-content-children {
                         position: relative;
                         transition: left .3s linear;
                    }
                }
                 .menu-turn-left, .menu-turn-right {
                     cursor: pointer;
                     position: relative;
                     z-index: 999;
                     color: @SddLayoutHeaderButtonColor;
                     text-align: center;
                     width: 40/@px-unit;
                     flex-shrink: 0;
                     &:hover {
                         color: @SddLayoutHeaderButtonHoverColor;
                         background-color: @SddLayoutHeaderButtonHoverBgColor;
                    }
                }
                 .left-button, .right-button {
                     font-size: 16/@px-unit;
                     padding: 0;
                }
                 .tab-icon {
                     color: @SddLayoutHeaderButtonColor;
                }
            }
        }
         .sdd-tab-list {
             white-space: nowrap;
             -moz-user-select: none;
             -webkit-user-select: none;
             -ms-user-select: none;
             -khtml-user-select: none;
             user-select: none;
             .sdd-tab-item {
                 display: inline-block;
                 text-align: center;
                 color: @SddLayoutHeaderButtonColor;
                 padding-left: 16/@px-unit;
                 padding-right: 12/@px-unit;
                 min-width: 64/@px-unit;
                 transition: all 0.3s;
                 &:hover {
                     color: @SddLayoutHeaderButtonHoverColor;
                     background-color: @SddLayoutHeaderButtonHoverBgColor;
                     .tab-remove-button {
                         visibility: visible;
                    }
                }
                 .tab-remove-button {
                     font-size: 16/@px-unit;
                     height: 16/@px-unit;
                     width: 16/@px-unit;
                     visibility: hidden;
                     margin-left: 4/@px-unit;
                     transition: visibility 0s;
                     padding: 0;
                }
            }
             .sdd-tab-item-selected {
                 color: @SddLayoutHeaderButtonSelectedColor;
            }
        }
    }
     .sdd-layout-sider {
         background-color: inherit;
         border-right: 1/@px-unit solid @SddBorderSplitColor;
         .layout-sider-menu.ant-menu-inline {
             height: 100%;
             margin-top: 10/@px-unit;
             border-right: unset;
             overflow-y: auto;
             .menu-icon-wrapper {
                 display: inline-block;
                 font-size: 20/@px-unit;
                 margin-right: 8/@px-unit;
                 vertical-align: top;
            }
             .ant-menu-submenu-arrow {
                 right: 24/@px-unit;
            }
             .ant-menu-submenu-title {
                 padding-right: 42/@px-unit;
            }
             .ant-menu-item, .ant-menu-submenu-title {
                 width: 100%;
                 .anticon {
                     margin-right: 0;
                     font-size: inherit;
                }
            }
        }
    }
     .sdd-layout-content {
         padding: 16/@px-unit;
         background-color: @SddLayoutContentBgColor;
         .main-content {
             background-color: @SddLayoutContentColor;
             height: 100%;
        }
    }
     .sdd-layout-footer {
         padding: 0;
         border-top: 1/@px-unit solid @SddBorderSplitColor;
         height: 57/@px-unit;
         line-height: 57/@px-unit;
         background-color: @SddLayoutFooterColor;
    }
}
/*各个组件请将颜色再次赋值各自的的实际变量，便于后续新增颜色可更改*/
 @loading-bg-color: @SddDisableInputBgColor;
 .Loading-wapper{
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: 9999;
     top:0;
     left: 0;
     text-align: center;
     background-color: @loading-bg-color;
     filter:alpha(opacity=50);
     -moz-opacity:0.5;
     -khtml-opacity:0.5;
     opacity: 0.5;
     .ant-spin{
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%,-50%);
    }
     .Loading-addMargin .ant-spin-text{
         margin-top: 40/@px-unit;
    }
}
 @px-unit: 14rem;
 @schedule-dividerColor: rgba(0,0,0,0.06);
 @schedule-inputBorderColor: #d9d9d9;
 @schedule-listBorderColor: #e8e8e8;
 @schedule-successColor: #52c41a;
 @schedule-warnColor: #fcac15;
 @schedule-errorColor: #f5222d;
 @schedule-textColor: #272727;
 @transform-height: 2/@px-unit;
 @transform-height1: 1/@px-unit;
 @font-color: #000000BF;
 ._NewScheduleComponent_{
     color: @font-color;
     padding: 16/@px-unit;
     padding-bottom: 32/@px-unit;
     user-select: none;
     .align-center {
         text-align: center 
    }
     .ant-card-body{
         padding: 15/@px-unit 24/@px-unit 15/@px-unit 24/@px-unit;
    }
     .slider-container{
         position: relative;
    }
     .btnContainer{
         float: right;
         button:nth-child(1) {
             margin-right: 10/@px-unit;
        }
    }
     .time-ruler-wrapper {
         padding-top: 50/@px-unit;
         background-color: #F0F2F5;
         .timeplan-ruler {
             display: flex;
             align-items: flex-end;
             height: 14/@px-unit;
             position: relative;
             font-size: 12/@px-unit;
             .ruler-section {
                 flex: 1;
            }
             div{
                 display: inline-block;
                 height: 5/@px-unit;
                 border-left: 1/@px-unit solid #555;
            }
             div:last-child {
                 border-right: 1/@px-unit solid #555;
                 .ruler-text{
                     margin-left: 0/@px-unit;
                }
            }
             .ruler-text{
                 position: absolute;
                 bottom: 15/@px-unit;
                 margin-left: -5/@px-unit;
                 white-space: nowrap;
                 font: 11/@px-unit/1 sans-serif;
            }
             .hour{
                 height: 10/@px-unit;
            }
        }
    }
     .main-container {
         box-sizing: border-box;
         margin: 0;
         overflow: hidden;
         height: 60/@px-unit;
         &:not(:last-of-type) {
             border-bottom: none;
             .label {
                 border-bottom: 1/@px-unit solid #e8e8e8;
                 overflow: hidden;
                 text-overflow: ellipsis;
            }
             .behind-operator-area {
                 border-bottom: 1/@px-unit solid #e8e8e8;
            }
        }
         .label{
             float: left;
             height: 100%;
             line-height: 59/@px-unit;
             padding-left: 10/@px-unit;
             padding-right: 10/@px-unit;
             text-align: right;
        }
         .slider-container {
             display: flex;
             flex-wrap: wrap;
             float: left;
             height: 100%;
        }
         .behind-operator-area {
             display: flex;
             align-items: center;
             justify-content: center;
             flex-wrap: wrap;
             height: 100%;
        }
         .copyBtn{
             >span{
                 width: 100%;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 word-wrap: normal;
            }
             display: inline-block;
             width: 100%;
             overflow: hidden;
             flex-shrink: 1;
             text-overflow: ellipsis;
             white-space: nowrap;
             word-wrap: normal;
             vertical-align: middle;
        }
         .dayplan {
             position: relative;
             width: 100%;
             border: 1/@px-unit solid #e8e8e8;
             background-color: #fff;
             cursor: pointer;
             box-sizing: border-box;
             &:last-of-type {
                 border-bottom: none;
            }
             &:not(:last-of-type) {
                 border-bottom: none;
            }
             .handle{
                 position: absolute;
                 width: 4/@px-unit;
                 height: 80%;
                 top: 50%;
                 transform: translate(-50%, -50%);
                 z-index: 999;
                 background-color: #fff;
                 border: solid 1/@px-unit #2680eb;
                 -webkit-box-shadow: 0;
                 box-shadow: 0;
                 cursor: w-resize;
                 -webkit-transition: border-color .3s,-webkit-box-shadow .6s,-webkit-transform .3s cubic-bezier(.18, .89, .32, 1.28);
                 transition: border-color .3s,-webkit-box-shadow .6s,-webkit-transform .3s cubic-bezier(.18, .89, .32, 1.28);
                 transition: border-color .3s,box-shadow .6s,transform .3s cubic-bezier(.18, .89, .32, 1.28);
                 transition: border-color .3s,box-shadow .6s,transform .3s cubic-bezier(.18, .89, .32, 1.28),-webkit-box-shadow .6s,-webkit-transform .3s cubic-bezier(.18, .89, .32, 1.28);
                 &:hover {
                     border-color: #46a6ff;
                }
            }
             .track-wrapper {
                 position: absolute;
                 height: 100%;
            }
             .track{
                 position: absolute;
                 width: 100%;
                 height: 100%;
                 z-index: 1;
                 &.green {
                     background:@schedule-successColor;
                }
                 &.yellow {
                     background:@schedule-warnColor;
                }
                 &.red {
                     background:@schedule-errorColor;
                }
                 &.red-1 {
                     background-color: #f54117;
                }
                 &.green-2 {
                     background-color: #0a9c02;
                }
                 &.green-3 {
                     background-color: #03aeac;
                }
                 &.orange-1 {
                     background-color: #ff7e16;
                }
                 &.orange-2 {
                     background-color: #fcac15;
                }
                 &.orange-3 {
                     background-color: #bc7c00;
                }
                 &.blue-1 {
                     background-color: #1890ff;
                }
                 &.blue-2 {
                     background-color: #2238c7;
                }
                 &.purple-1 {
                     background-color: #ac0dce;
                }
                 &.purple-2 {
                     background-color: #6e52fe;
                }
            }
             .track-selected {
                 z-index: 2;
            }
             .handler-wrapper {
                 position: absolute;
                 pointer-events: none;
                 border: 1/@px-unit solid #2680eb;
                 width: 100%;
                 height: 100%;
                 z-index: 998;
            }
             :focus {
                 outline: none;
            }
        }
         .grid-wrapper {
             display: flex;
             flex-wrap: nowrap;
             left: 0;
             top: 0;
             height: 100%;
             width: 100%;
             position: absolute;
             z-index: 2;
             pointer-events: none;
             .slider-grid {
                 height: 100%;
                 flex: 1;
                 border-right: 1/@px-unit solid #e8e8e8;
                 &:last-of-type {
                     border-right: none;
                }
            }
        }
    }
     .day-component-wrapper {
         position: relative;
         border: 1/@px-unit solid @schedule-dividerColor;
         .draw-rectangle {
             position: absolute;
             pointer-events: none;
             background-color: transparent;
             box-sizing: border-box;
             border: 1/@px-unit dashed #1890ff;
             z-index: 9999;
             width: 0;
             height: 0;
             left: 0;
             top: 0;
        }
         .vertical-ruler-mask {
             position: absolute;
             pointer-events: none;
             width: 100%;
             height: 100%;
             top: 0;
             left: 0;
             .mask-main-container {
                 height: 100%;
            }
             .mask-main-content {
                 position: relative;
                 height: 100%;
                 .cursor-icon {
                     position: absolute;
                     top: 0;
                     transform: translate(-48%, -100%);
                }
                 .vertical-ruler {
                     height: 100%;
                     position: absolute;
                     border-left: 1/@px-unit solid #f7772c;
                }
                 .ruler-time-string {
                     height: 32/@px-unit;
                     line-height: 32/@px-unit;
                     position: absolute;
                     font-size: 12/@px-unit;
                     color: #8c8c8c;
                     bottom: 0;
                     transform: translate(-50%, 100%);
                }
            }
        }
    }
     .header{
         line-height: 50/@px-unit;
         margin-bottom: 16/@px-unit;
         overflow: hidden;
         .status-container{
             float: left;
             .status-header {
                 float: left;
                 padding-right: 8/@px-unit;
            }
             .status-wrapper {
                 float: left;
                 padding-right: 10/@px-unit;
            }
             .compact-status-wrapper {
                 float: left;
                 cursor: pointer;
                 padding-right: 10/@px-unit;
            }
             .compact-status-wrapper-selected {
                 background-color: rgb(238, 238, 238);
            }
             .circle {
                 content: '';
                 height: 10/@px-unit;
                 width: 10/@px-unit;
                 display: inline-block;
                 border-radius: 5/@px-unit;
                 margin:0 10/@px-unit;
                 &.green {
                     background:@schedule-successColor;
                }
                 &.yellow {
                     background:@schedule-warnColor;
                }
                 &.red {
                     background:@schedule-errorColor;
                }
            }
             p {
                 display: inline;
            }
        }
         .button-container{
             float: right 
        }
    }
}
 .tip{
     .ant-tooltip-arrow{
         border-bottom-color:@schedule-inputBorderColor;
         border-top-color: @schedule-inputBorderColor 
    }
     .ant-tooltip-inner{
         color: @schedule-textColor;
         background-color:#FFF;
         padding: 0 8/@px-unit;
    }
     .timer-input{
         width: 20/@px-unit;
         min-width: 10/@px-unit;
         float: left;
         height: 30/@px-unit;
         text-align: center;
    }
}
 .timeSchedule-drawer{
     button:nth-child(1) {
         margin-right: 20/@px-unit;
    }
     .ant-drawer-body{
         .btnContainer{
             margin-top: 40/@px-unit;
        }
    }
}
 .timeSchedule-modal {
     .ant-modal-body {
         max-width: 100%;
    }
     .timeSchedule-checkboxGroup-wrapper {
         .ant-checkbox-wrapper {
             height: 32/@px-unit;
             padding: 4/@px-unit 4/@px-unit 4/@px-unit 0;
        }
         .ant-checkbox-wrapper + .ant-checkbox-wrapper {
             margin-left: 0;
        }
    }
}
 .timer-box {
     height: 30/@px-unit;
     display: inline-block;
     .ant-input{
         padding:4/@px-unit 0/@px-unit 
    }
     .timer-input{
         background-color:#FFF;
         width: 20/@px-unit;
         min-width: 10/@px-unit;
         float: left;
         height: 30/@px-unit;
         text-align: center;
         border-radius: 0;
         border-left: none;
         border-right: none;
         border: none;
         &:focus{
             border: transparent;
        }
    }
     .timer-point{
         float: left;
         vertical-align: baseline;
         margin:0;
         padding: 3/@px-unit;
         background-color: #FFF;
         height: 30/@px-unit;
         font-weight: bold;
    }
}
 .timer-box-area {
     display: inline-block;
     margin: 0;
     vertical-align: 9/@px-unit;
}
 .timer-box-label {
     margin: 0;
     line-height: 30/@px-unit;
}
 .red-1-options {
     display: inline-block;
     width: 12/@px-unit;
     height: 12/@px-unit;
     margin-right: 5/@px-unit;
     border-radius: 2/@px-unit;
     background-color: #f54117;
}
 .green-options {
     display: inline-block;
     width: 12/@px-unit;
     height: 12/@px-unit;
     margin-right: 5/@px-unit;
     border-radius: 2/@px-unit;
     background-color: @schedule-successColor;
}
 .green-2-options {
     display: inline-block;
     width: 12/@px-unit;
     height: 12/@px-unit;
     margin-right: 5/@px-unit;
     border-radius: 2/@px-unit;
     background-color: #0a9c02;
}
 .green-3-options {
     display: inline-block;
     width: 12/@px-unit;
     height: 12/@px-unit;
     margin-right: 5/@px-unit;
     border-radius: 2/@px-unit;
     background-color: #03aeac;
}
 .orange-1-options {
     display: inline-block;
     width: 12/@px-unit;
     height: 12/@px-unit;
     margin-right: 5/@px-unit;
     border-radius: 2/@px-unit;
     background-color: #ff7e16;
}
 .orange-2-options {
     display: inline-block;
     width: 12/@px-unit;
     height: 12/@px-unit;
     margin-right: 5/@px-unit;
     border-radius: 2/@px-unit;
     background-color: #fcac15;
}
 .orange-3-options {
     display: inline-block;
     width: 12/@px-unit;
     height: 12/@px-unit;
     margin-right: 5/@px-unit;
     border-radius: 2/@px-unit;
     background-color: #bc7c00;
}
 .blue-1-options {
     display: inline-block;
     width: 12/@px-unit;
     height: 12/@px-unit;
     margin-right: 5/@px-unit;
     border-radius: 2/@px-unit;
     background-color: #1890ff;
}
 .blue-2-options {
     display: inline-block;
     width: 12/@px-unit;
     height: 12/@px-unit;
     margin-right: 5/@px-unit;
     border-radius: 2/@px-unit;
     background-color: #2238c7;
}
 .purple-1-options {
     display: inline-block;
     width: 12/@px-unit;
     height: 12/@px-unit;
     margin-right: 5/@px-unit;
     border-radius: 2/@px-unit;
     background-color: #ac0dce;
}
 .purple-2-options {
     display: inline-block;
     width: 12/@px-unit;
     height: 12/@px-unit;
     margin-right: 5/@px-unit;
     border-radius: 2/@px-unit;
     background-color: #6e52fe;
}
 .modalOptions-header {
     margin-bottom: 10/@px-unit;
}
 .modalOptions-badge-container {
     float: left;
     margin-left: 3/@px-unit;
     margin-right: 3/@px-unit;
}
 .schedule-copy-popover {
     .ant-popover-content {
         width: 324/@px-unit;
         .ant-checkbox-wrapper {
             margin-left: 0;
             margin-top: 6/@px-unit;
             margin-bottom: 6/@px-unit;
        }
    }
     .timeSchedule-checkboxGroup-wrapper{
         .check-all {
             margin-bottom: 6/@px-unit;
        }
    }
     .popover-footer {
         display: flex;
         flex-direction: row-reverse;
         margin-top: 18/@px-unit;
         .apply-button {
             margin-left: 8/@px-unit;
        }
    }
}
 .track-time-hover-popover {
     .ant-popover-inner-content {
         padding: 0;
         color: @font-color;
    }
     .time-hover-content {
         box-sizing: border-box;
         padding: 12/@px-unit 16/@px-unit 12/@px-unit 16/@px-unit;
    }
}
 .track-time-popover {
     color: @font-color;
     .ant-time-picker ~ a {
         color: inherit;
         cursor: initial;
    }
     .ant-popover-inner-content {
         padding: 0/@px-unit;
    }
     .ant-time-picker-panel-addon {
         display: flex;
         flex-direction: row-reverse;
    }
     a {
         margin-left: 8/@px-unit;
         margin-right: 8/@px-unit;
    }
     .time-popover-content {
         display: flex;
         align-items: center;
         padding: 12/@px-unit 10/@px-unit 12/@px-unit 16/@px-unit;
         .confirm-icon {
             color: @font-color;
             margin-left: 14/@px-unit;
             font-size: 24/@px-unit;
             cursor: pointer;
        }
         .delete-icon {
             color: @font-color;
             margin-left: 8/@px-unit;
             font-size: 24/@px-unit;
             cursor: pointer;
        }
         .confirm-icon, .delete-icon {
             &:hover {
                 color: #40A9FF;
            }
             &:active {
                 color: #096DD9;
            }
        }
    }
     .start-timer-picker, .end-timer-picker {
         .ant-time-picker-panel-combobox {
             display: flex;
        }
    }
}
 .passwordInput-security {
     -webkit-text-security:disc;
     -moz-text-security:disc;
     -ms-text-security:disc;
}
 .pd-active, .pd-default {
     color: @neutral-fg-3-normal;
}
 @schedule-dividerColorNo9: @SddDividerColor;
 @schedule-inputBorderColorNo10: @SddInputBorderColor;
 @schedule-listBorderColorNo8: @SddListBorderColor;
 @schedule-successColorNo19: @SddSuccessColor;
 @schedule-warnColorNo18: @SddWarnColor;
 @schedule-errorColorNo17: @SddErrorColor;
 @schedule-textColorNo5: @SddTextColor;
 ._ScheduleComponent_{
     padding: 16/@px-unit;
     user-select: none;
     .align-center {
         text-align: center 
    }
     .ant-card-body{
         padding: 15/@px-unit 24/@px-unit 15/@px-unit 24/@px-unit;
    }
     .slider-container{
         position: relative;
    }
     .btnContainer{
         float: right;
         button:nth-child(1) {
             margin-right: 10/@px-unit;
        }
    }
     .timeplan-ruler {
         display: flex;
         align-items: flex-end;
         height: 14/@px-unit;
         position: relative;
         font-size: 12/@px-unit;
         .ruler-section {
             flex: 1;
        }
         div{
             display: inline-block;
             height: 5/@px-unit;
             border-left: 1/@px-unit solid #555;
        }
         div:last-child {
             border-right: 1/@px-unit solid #555;
             .ruler-text{
                 margin-left: 0/@px-unit;
            }
        }
         .ruler-text{
             position: absolute;
             bottom: 15/@px-unit;
             margin-left: -5/@px-unit;
             white-space: nowrap;
             font: 11/@px-unit/1 sans-serif;
        }
         .hour{
             height: 10/@px-unit;
        }
    }
     .main-container {
         border: 1/@px-unit solid @schedule-dividerColorNo9;
         box-sizing: border-box;
         margin: 0;
         padding: 9/@px-unit 0 4/@px-unit 0;
         overflow: hidden;
         .label{
             float: left;
             height: 100%;
             line-height: 45/@px-unit;
             padding-left: 10/@px-unit;
        }
         .slider-container {
             float: left;
        }
         .copyBtn{
             >span{
                 width: 100%;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 word-wrap: normal;
            }
             display: inline-block;
             width: 100%;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
             word-wrap: normal;
        }
         .dayplan {
             position: relative;
             height: 8/@px-unit;
             margin-bottom: 8/@px-unit;
             border: 1/@px-unit solid @schedule-inputBorderColorNo10;
             background-color: @schedule-listBorderColorNo8;
             cursor: pointer;
             box-sizing: border-box;
             .handle{
                 position: absolute;
                 width: 12/@px-unit;
                 height: 12/@px-unit;
                 margin-top: -3/@px-unit;
                 margin-left: -7/@px-unit;
                 background-color: #fff;
                 border: solid 2/@px-unit #91d5ff;
                 border-radius: 50%;
                 -webkit-box-shadow: 0;
                 box-shadow: 0;
                 cursor: pointer;
                 -webkit-transition: border-color .3s,-webkit-box-shadow .6s,-webkit-transform .3s cubic-bezier(.18, .89, .32, 1.28);
                 transition: border-color .3s,-webkit-box-shadow .6s,-webkit-transform .3s cubic-bezier(.18, .89, .32, 1.28);
                 transition: border-color .3s,box-shadow .6s,transform .3s cubic-bezier(.18, .89, .32, 1.28);
                 transition: border-color .3s,box-shadow .6s,transform .3s cubic-bezier(.18, .89, .32, 1.28),-webkit-box-shadow .6s,-webkit-transform .3s cubic-bezier(.18, .89, .32, 1.28);
                 &:hover {
                     border-color: #46a6ff;
                }
            }
             .onlyNormal-handle {
                 height: 16/@px-unit;
                 width: 16/@px-unit;
                 z-index: 1;
            }
             .track{
                 position: absolute;
                 height: 100%;
                 &.green {
                     background:@schedule-successColorNo19;
                }
                 &.yellow {
                     background:@schedule-warnColorNo18;
                }
                 &.red {
                     background:@schedule-errorColorNo17;
                }
                 &.red-1 {
                     background-color: #f54117;
                }
                 &.green-2 {
                     background-color: #0a9c02;
                }
                 &.green-3 {
                     background-color: #03aeac;
                }
                 &.orange-1 {
                     background-color: #ff7e16;