.ant-table-tbody {
             tr{
                 &.ZD-showZebraPattern:nth-of-type(even) {
                     background-color: @evenPatternColor;
                }
                 &.ZD-showZebraPattern:nth-of-type(odd) {
                     background-color: @oddPatternColor;
                }
                 &:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected):not(.ant-table-placeholder) > td {
                     background-color: @tableContentHoverBgColor;
                }
            }
             tr.ZD-selected-row {
                 background-color: @tableRowSelectedBackgroundColor;
                 .ant-table-cell-fix-left, .ant-table-cell-fix-right {
                     background-color: @tableRowSelectedBackgroundColor;
                }
            }
             tr.ZD-highlight-row {
                 background-color: @tableRowSelectedBackgroundColor;
            }
             tr.ZD-showZebraPattern.ZD-selected-row {
                 background-color: @tableRowSelectedBackgroundColor;
                 .ant-table-cell-fix-left, .ant-table-cell-fix-right {
                     background-color: @tableRowSelectedBackgroundColor;
                }
            }
             tr.ZD-showZebraPattern.ZD-highlight-row {
                 background-color: @tableRowSelectedBackgroundColor;
            }
             tr.ZD-hideRowBorder:not(:last-of-type) {
                 td {
                     border-bottom: none;
                }
            }
        }
         .react-resizable {
             position: relative;
             background-clip: padding-box;
        }
         .react-resizable-handle {
             position: absolute;
             width: 10/@px-unit;
             height: 100%;
             bottom: 0;
             right: -5/@px-unit;
             cursor: col-resize;
             z-index: 1;
        }
         .editable-cell-value-wrap {
             padding: 5/@px-unit 12/@px-unit;
             cursor: pointer;
             &:hover {
                 border: 1px solid @tableBodyBorderColor;
                 padding: 4/@px-unit 11/@px-unit;
                 border-radius: @radius-m;
            }
        }
    }
     .m-table-showEmpty {
         .ant-table-placeholder{
             display: none;
        }
    }
     .m-table-hideEmpty {
         .ant-table-placeholder{
             display: table-row;
        }
    }
     .mask {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         opacity: 0;
         z-index: 1049;
    }
     tr.drop-over-downward td {
         border-bottom: 2px dashed #1890ff !important;
    }
     tr.drop-over-upward td {
         border-top: 2px dashed #1890ff !important;
    }
     .ant-table-pagination {
         display: flex;
         justify-content: flex-end;
    }
     li.ant-pagination-total-text {
         position: absolute;
         left: 0;
    }
     .ant-table-tbody > tr.ant-table-row-selected td {
         background-color: inherit;
    }
     .ant-table-thead > tr:hover.ant-table-row-selected > td, .ant-table-tbody > tr:hover.ant-table-row-selected > td {
         background-color: inherit;
    }
}
 .ant-table-filter-dropdown-link.confirm {
     width: 48/@px-unit;
     height: 24/@px-unit;
     text-align: center;
     font-family: Microsoft YaHei;
     background-color: @buttonNormalColor;
     border-radius: 4/@px-unit;
     font-size: 12/@px-unit;
     font-weight: normal;
     font-stretch: normal;
     line-height: 24/@px-unit;
     letter-spacing: 0/@px-unit;
     color: @tableContentBgColor;
     float: right;
}
 .ant-table-filter-dropdown-link.clear {
     width: 48/@px-unit;
     height: 24/@px-unit;
     font-family: Microsoft YaHei;
     font-size: 12/@px-unit;
     font-weight: normal;
     font-stretch: normal;
     line-height: 24/@px-unit;
     letter-spacing: 0/@px-unit;
     color: @buttonNormalColor1;
     float: left;
}
 .@{tabs-prefix-cls}{
     &-bottom {
         border-top: 2/@px-unit solid #f3f3f3;
    }
     &-bottom &-content {
         width: 100%;
    }
     &-bottom &-bar {
         border-top: 1/@px-unit solid #f3f3f3;
    }
     &-bottom &-nav-container-scrolling {
         padding-left: 32/@px-unit;
         padding-right: 32/@px-unit;
    }
     &-bottom &-nav-scroll {
         width: 99999/@px-unit;
    }
     &-bottom &-nav-swipe {
         position: relative;
         left: 0;
         .@{tabs-prefix-cls}-nav {
             display: flex;
             flex: 1;
             width: 100%;
             .@{tabs-prefix-cls}-tab {
                 display: flex;
                 flex-shrink: 0;
                 margin-right: 0;
                 padding: 8/@px-unit 0;
                 justify-content: center;
            }
        }
    }
     &-bottom &-nav-wrap {
         width: 100%;
    }
     &-bottom &-content-animated {
         flex-direction: row;
         .@{tabs-prefix-cls}-tabpane {
             width: 100%;
        }
    }
     &-bottom &-tab-next {
         right: 2/@px-unit;
         &-icon:before {
             content: ">";
        }
    }
     &-bottom &-tab-prev {
         left: 0;
         &-icon:before {
             content: "<";
        }
    }
     &-bottom &-tab-prev, &-bottom &-tab-next {
         margin-right: -2/@px-unit;
         width: 32/@px-unit;
         height: 100%;
         top: 0;
         text-align: center;
    }
     &-bottom &-ink-bar {
         height: 2/@px-unit;
         top: 3/@px-unit;
         left: 0;
    }
     &-bottom &-tab {
         float: left;
         height: 100%;
         margin-right: 30/@px-unit;
    }
     &-bottom &-tabpane-inactive {
         height: 0;
         overflow: hidden;
    }
}
 .@{tabs-prefix-cls}{
     box-sizing: border-box;
     position: relative;
     overflow: hidden;
     &-bar, &-nav-container {
         font-size: 14/@px-unit;
         line-height: 1.5;
         box-sizing: border-box;
         overflow: hidden;
         position: relative;
         white-space: nowrap;
         outline: none;
         zoom: 1;
         transition: padding .45s;
    }
     &-ink-bar {
         z-index: 1;
         position: absolute;
         box-sizing: border-box;
         margin-top: -3/@px-unit;
         background-color: #108ee9;
         transform-origin: 0 0;
         width: 0;
         height: 0;
         &-animated {
             transition: transform @effect-duration @easing-in-out, left @effect-duration @easing-in-out, top @effect-duration @easing-in-out, height @effect-duration @easing-in-out, width @effect-duration @easing-in-out;
        }
    }
     &-tab-prev, &-tab-next {
         user-select: none;
         z-index: 1;
         line-height: 36/@px-unit;
         cursor: pointer;
         border: none;
         background-color: transparent;
         position: absolute;
         &-icon {
             position: relative;
             display: inline-block;
             font-style: normal;
             font-weight: normal;
             font-variant: normal;
             line-height: inherit;
             vertical-align: baseline;
             text-align: center;
             text-transform: none;
             font-smoothing: antialiased;
             text-stroke-width: 0;
             font-family: sans-serif;
             &:before {
                 display: block;
            }
        }
    }
     &-tab-btn-disabled {
         cursor: default;
         color: #ccc;
    }
     &-nav-wrap {
         overflow: hidden;
    }
     &-nav {
         box-sizing: border-box;
         padding-left: 0;
         position: relative;
         margin: 0;
         float: left;
         list-style: none;
         display: inline-block;
         transform-origin: 0 0;
         &-animated {
             transition: transform 0.5s @easing-in-out;
        }
         &:before, &:after {
             display: table;
             content: " ";
        }
         &:after {
             clear: both;
        }
    }
     &-tab {
         box-sizing: border-box;
         position: relative;
         display: block;
         transition: color @effect-duration @easing-in-out;
         padding: 8/@px-unit 20/@px-unit;
         font-weight: 500;
         cursor: pointer;
         &:hover {
             color: #23c0fa;
        }
    }
     &-tab-active {
         &, &:hover {
             color: #108ee9;
             cursor: default;
             transform: translateZ(0);
        }
    }
     &-tab-disabled {
         cursor: default;
         color: #ccc;
         &:hover {
             color: #ccc;
        }
    }
     &-content {
         zoom: 1;
         .@{tabs-prefix-cls}-tabpane {
             overflow: hidden;
        }
         &-animated {
             transition: transform @effect-duration @easing-in-out, margin-left @effect-duration @easing-in-out, margin-top @effect-duration @easing-in-out;
             display: flex;
             will-change: transform;
             .@{tabs-prefix-cls}-tabpane {
                 flex-shrink: 0;
            }
        }
    }
     .no-flexbox &-content {
         transform: none !important;
         overflow: auto;
    }
     .no-csstransitions &-tabpane-inactive, .no-flexbox &-tabpane-inactive, &-content-no-animated &-tabpane-inactive {
         display: none;
    }
}
 .@{tabs-prefix-cls}{
     &-left {
         border-right: 2/@px-unit solid #f3f3f3;
    }
     &-left &-bar {
         float: left;
         height:100%;
         margin-right: 10/@px-unit;
         border-right: 1/@px-unit solid #f3f3f3;
    }
     &-left &-nav-container {
         height:100%;
    }
     &-left &-nav-container-scrolling {
         padding-top: 32/@px-unit;
         padding-bottom: 32/@px-unit;
    }
     &-left &-nav-wrap {
         height: 100%;
    }
     &-left &-content-animated {
         flex-direction: column;
         .@{tabs-prefix-cls}-tabpane {
             height: 100%;
        }
    }
     &-left &-nav-scroll {
         height: 99999/@px-unit;
    }
     &-left &-nav-swipe {
         position: relative;
         top: 0;
         .@{tabs-prefix-cls}-nav {
             display: flex;
             flex: 1;
             flex-direction: column;
             height: 100%;
             .@{tabs-prefix-cls}-tab {
                 display: flex;
                 flex-shrink: 0;
                 justify-content: center;
            }
        }
    }
     &-left &-tab-prev, &-left &-tab-next {
         margin-top: -2/@px-unit;
         height: 0;
         line-height: 32/@px-unit;
         width: 0;
         display: block;
         text-align: center;
         opacity: 0;
         transition: width .3s, height .3s, opacity .3s;
    }
     &-top &-tab-arrow-show, &-left &-tab-arrow-show, &-bottom &-tab-arrow-show, &-right &-tab-arrow-show {
         opacity: 1;
         width: 100%;
         height: 32/@px-unit;
    }
     &-left &-tab-next {
         bottom: 0;
         &-icon {
             transform: rotate(90deg);
             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        }
         &-icon:before {
             content: ">";
        }
    }
     &-left &-tab-prev {
         top: 2/@px-unit;
         &-icon {
             transform: rotate(270deg);
             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }
         &-icon:before {
             content: ">";
        }
    }
     &-left &-ink-bar {
         width: 2/@px-unit;
         right: 0;
         top: 0;
    }
     &-left &-tab {
         padding: 16/@px-unit 24/@px-unit;
    }
}
 .@{tabs-prefix-cls}{
     &-right {
         border-left: 2/@px-unit solid #f3f3f3;
    }
     &-right &-bar {
         float: right;
         height: 100%;
         margin-left: 10/@px-unit;
         border-left: 1/@px-unit solid #f3f3f3;
    }
     &-right &-nav-container {
         height:100%;
    }
     &-right &-nav-container-scrolling {
         padding-top: 32/@px-unit;
         padding-bottom: 32/@px-unit;
    }
     &-right &-nav-wrap {
         height: 100%;
    }
     &-right &-nav-scroll {
         height: 99999/@px-unit;
    }
     &-right &-nav-swipe {
         position: relative;
         .@{tabs-prefix-cls}-nav {
             display: flex;
             flex: 1;
             flex-direction: column;
             height: 100%;
             .@{tabs-prefix-cls}-tab {
                 display: flex;
                 flex-shrink: 0;
                 justify-content: center;
            }
        }
    }
     &-right &-tab-prev, &-right &-tab-next {
         margin-top: -2/@px-unit;
         height: 0;
         width: 0;
         display: block;
         text-align: center;
         line-height: 32/@px-unit;
         opacity: 0;
         transition: width .3s, height .3s, opacity .3s;
    }
     &-top &-tab-arrow-show {
         opacity: 1;
         width: 100%;
         height: 32/@px-unit;
    }
     &-right &-tab-next {
         bottom: 0;
         &-icon {
             transform: rotate(90deg);
             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        }
         &-icon:before {
             content: ">";
        }
    }
     &-right &-tab-prev {
         top: 2/@px-unit;
         &-icon {
             transform: rotate(270deg);
             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }
         &-icon:before {
             content: ">";
        }
    }
     &-right &-content-animated {
         flex-direction: column;
         .@{tabs-prefix-cls}-tabpane {
             height: 100%;
        }
    }
     &-right &-ink-bar {
         width: 2/@px-unit;
         left: 0;
         top: 0;
    }
     &-right &-tab {
         padding: 16/@px-unit 24/@px-unit;
    }
}
 .@{tabs-prefix-cls}{
     &-top {
         border-bottom: 2/@px-unit solid #f3f3f3;
    }
     &-top &-content {
         width: 100%;
    }
     &-top &-bar {
         border-bottom: 1/@px-unit solid #f3f3f3;
    }
     &-top &-nav-container-scrolling {
         padding-left: 32/@px-unit;
         padding-right: 32/@px-unit;
    }
     &-top &-nav-scroll {
         width: 99999/@px-unit;
    }
     &-top &-nav-swipe {
         position: relative;
         left: 0;
         .@{tabs-prefix-cls}-nav {
             display: flex;
             flex: 1;
             width: 100%;
             .@{tabs-prefix-cls}-tab {
                 display: flex;
                 flex-shrink: 0;
                 margin-right: 0;
                 padding: 8/@px-unit 0;
                 justify-content: center;
            }
        }
    }
     &-top &-nav-wrap {
         width: 100%;
    }
     &-top &-content-animated {
         flex-direction: row;
         .@{tabs-prefix-cls}-tabpane {
             width: 100%;
        }
    }
     &-top &-tab-next {
         right: 2/@px-unit;
         &-icon:before {
             content: ">";
        }
    }
     &-top &-tab-prev {
         left: 0;
         &-icon:before {
             content: "<";
        }
    }
     &-top &-tab-prev, &-top &-tab-next {
         margin-right: -2/@px-unit;
         width: 0;
         height: 0;
         top: 0;
         text-align: center;
         opacity: 0;
         transition: width .3s, height .3s, opacity .3s;
    }
     &-top &-tab-arrow-show {
         opacity: 1;
         width: 32/@px-unit;
         height: 100%;
    }
     &-top &-ink-bar {
         height: 2/@px-unit;
         bottom: 0;
         left: 0;
    }
     &-top &-tab {
         float: left;
         height: 100%;
         margin-right: 30/@px-unit;
    }
     &-top &-tabpane-inactive {
         height: 0;
         overflow: hidden;
    }
}
 @tabs-prefix-cls: rc-tabs;
 @easing-in-out: cubic-bezier(0.35, 0, 0.25, 1);
 @effect-duration: .3s;
 


._NewSchedule_Component_ {
    
    
    
    
    
    
    color: @bit-schedule-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;
        }
    }
    .schedule-ruler-wrapper {
        position: relative;
        .schedule-ruler-slot {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            .schedule-rule-slot-content {
                padding-left: 10 / @px-unit;
                padding-right: 10 / @px-unit;    
            }
        }
    }
    .time-ruler-wrapper {
        
        padding-top: 50 / @px-unit;
        background-color: @bit-schedule-time-ruler-bgColor;
        
        .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 @bit-schedule-scale-text-color;
            }
            div:last-child {
                border-right: 1 / @px-unit solid @bit-schedule-scale-text-color;
                .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 @bit-schedule-grid-borderColor;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .behind-operator-area {
                border-bottom: 1 / @px-unit solid @bit-schedule-grid-borderColor;
            }
        }
        .label {
            display: flex;
            justify-content: flex-end;
            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 @bit-schedule-grid-borderColor;
            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: @bit-schedule-drag-handler-bgColor;
                border: solid 1 / @px-unit @bit-schedule-drag-handler-borderColor;
                
                -webkit-box-shadow: 0;
                box-shadow: 0;
                cursor: w-resize;
                -webkit-transition: border-color 0.3s, -webkit-box-shadow 0.6s,
                    -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
                transition: border-color 0.3s, -webkit-box-shadow 0.6s,
                    -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
                transition: border-color 0.3s, box-shadow 0.6s,
                    transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
                transition: border-color 0.3s, box-shadow 0.6s,
                    transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), -webkit-box-shadow 0.6s,
                    -webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
                &:hover {
                    border-color: @bit-schedule-drag-handler-hover-borderColor;
                }
            }
            .track-wrapper {
                position: absolute;
                height: 100%;
            }
            .track {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 1;
                &.green {
                    background: @bit-schedule-event-green-color;
                }
                &.yellow {
                    background: @bit-schedule-event-yellow-color;
                }
                &.red {
                    background: @bit-schedule-event-red-color;
                }
                &.orange {
                    background-color: @bit-schedule-event-orange-color;
                }
                &.blue {
                    background-color: @bit-schedule-event-blue-color;
                }
                &.purple {
                    background-color: @bit-schedule-event-purple-color;
                }
            }
            .track-selected {
                z-index: 2;
            }

            .handler-wrapper {
                position: absolute;
                pointer-events: none;
                border: 1 / @px-unit solid @bit-schedule-drag-handler-borderColor;
                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 @bit-schedule-grid-borderColor;
                &:last-of-type {
                    border-right: none;
                }
            }
        }
    }
    .day-component-wrapper {
        position: relative;
        border: 1 / @px-unit solid @bit-schedule-grid-borderColor;
        .draw-rectangle {
            position: absolute;
            pointer-events: none;
            background-color: transparent;
            box-sizing: border-box;
            
            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%);
                }
                .ruler-time-string {
                    height: 32 / @px-unit;
                    line-height: 32 / @px-unit;
                    position: absolute;
                    font-size: 12 / @px-unit;
                    color: @bit-schedule-scale-text-color;
                    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: @bit-schedule-event-select-bgColor;
            }
            .compact-status-wrapper-disabled {
                cursor: not-allowed;
                color: @bit-schedule-text-disabled;
            }            
            .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: @bit-schedule-event-green-color;
                }
                &.yellow {
                    background: @bit-schedule-event-yellow-color;
                }
                &.red {
                    background: @bit-schedule-event-red-color;
                }
                &.orange {
                    background-color: @bit-schedule-event-orange-color;
                }
                &.blue {
                    background-color: @bit-schedule-event-blue-color;
                }
                &.purple {
                    background-color: @bit-schedule-event-purple-color;
                }
            }
            p {
                display: inline;
            }
        }
        .button-container {
            float: right;
        }
    }
}
.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: @bit-schedule-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: @bit-schedule-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: @bit-schedule-operator-color;
            margin-left: 14 / @px-unit;
            font-size: 24 / @px-unit;
            cursor: pointer;
        }
        .delete-icon {
            color: @bit-schedule-operator-color;
            margin-left: 8 / @px-unit;
            font-size: 24 / @px-unit;
            cursor: pointer;
        }
        .confirm-icon,
        .delete-icon {
            &:hover {
                color: @bit-schedule-operator-hover-color;
            }
            &:active {
                color: @bit-schedule-operator-active-color;
            }
        }
    }
    .start-timer-picker,
    .end-timer-picker {
        .ant-time-picker-panel-combobox {
            display: flex;
        }
    }
}


.marginTop20{
    margin-top: 20/@px-unit;
}

.padding20{
    padding: 20/@px-unit;
}
._BaseServe_ .ant-divider-horizontal{
    min-width: 95%;
    width: 95%;
}

._WlanAgree_ .ant-table-bordered .ant-table-thead > tr > th, 
._WlanAgree_ .ant-table-bordered .ant-table-tbody > tr > td,
._publicHttps_ .ant-table-bordered .ant-table-thead > tr > th, 
._publicHttps_ .ant-table-bordered .ant-table-tbody > tr > td  {
    border-right:none;
}

._WlanAgree_ .ant-table-bordered .ant-table-thead > tr, 
._WlanAgree_ .ant-table-bordered .ant-table-tbody > tr,
._publicHttps_ .ant-table-bordered .ant-table-thead > tr, 
._publicHttps_ .ant-table-bordered .ant-table-tbody > tr {
    border:1/@px-unit solid #e8e8e8;
}
._WlanAgree_ .ant-table-bordered .ant-table-thead> tr > th,
._publicHttps_ .ant-table-bordered .ant-table-thead> tr > th{
    font-weight: bold;
}
._WlanAgree_{
    padding: 14/@px-unit 14/@px-unit 14/@px-unit 29/@px-unit;
    .title{
        > .ant-col {
            padding-bottom: 14/@px-unit;
        }
    }
    .netName{
        padding-bottom: 14/@px-unit;
        border-bottom: 1/@px-unit solid #e8e8e8;
    }
    .container{
        padding-top: 14/@px-unit;
        >.ant-col{
            margin-bottom: 14/@px-unit;
        }
    }
    .handleBar{
        padding-top: 14/@px-unit;
    }
    .ant-radio-button-wrapper:not(:first-child) {
        border-left-width: 1/@px-unit;
        &::before {
            display: none;
        }
    }
    .radio-button {
        margin-left: 14/@px-unit;
    }
    .ant-row{
        .ant-form-item{
            margin-bottom: 0/@px-unit;
            .ant-form-explain{
                margin-left: 17%;
            }
        }
    }
    .certType-radioGroup-wrapper {
        padding: 8/@px-unit 0;
    }
}
._publicHttps_{
    width: 100%;
    padding: 14/@px-unit 14/@px-unit 14/@px-unit 29/@px-unit;
    
    
    
    
    
    .padding14{
        padding-bottom: 14/@px-unit;
    }

    .ant-popover-buttons .ant-btn:first-child{
        float: right;
    }
}


._SAFESafetyWarning_{
    padding-bottom: 61/@px-unit;
    overflow-y: scroll;
    .eventName-popover {
        width: 500/@px-unit;
        .ant-popover-inner-content {
            padding: 16/@px-unit 16/@px-unit;
        }
        .eventName-ul {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            margin: 13/@px-unit 0;
            padding: 0;
            .eventName-li {
                width: 50%;
                list-style-position: inside;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
    .event-list{
        
        
        
        
        flex: 1;
    }
    ._SAFESafetyWarning_Alert{
        margin:14/@px-unit 0;
    }
    .handleBar{
        button {
            margin-right: 10/@px-unit;
        }
    }
    .alert-message-wrapper {
        display: flex;
        align-items: center;
    }
    .alertMessage{
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        -ms-word-break: break-all; 
    }
    .detail_icon {
        font-size: 30/@px-unit;
        &:hover {
            cursor: pointer;
        }
    }
}

._SAFESafetyWarning_Pop{
    .ant-popover-inner-content{
        overflow: hidden;
        .event-list{
            width:250/@px-unit;
        }
    }
    .ant-popover-content{
        width:800/@px-unit;
    }
}

._EarlyWarningEvent_ {
    .dealtext {
        margin-right: 10/@px-unit;
        color: #1890ff;
        cursor: pointer;
    }
    .disabledtext {
        cursor: not-allowed;
        color: rgba(0, 0, 0, 0.25);
    }
    .overText {
        position: relative; line-height: 20/@px-unit; max-height: 40/@px-unit;overflow: hidden;}
        .overText::after{content: "..."; position: absolute; bottom: 0; right: 0;
        background: -webkit-linear-gradient(left, transparent, #fff 55%);
        background: -o-linear-gradient(right, transparent, #fff 55%);
        background: -moz-linear-gradient(right, transparent, #fff 55%);
        background: linear-gradient(to right, transparent, #fff 55%);
    }
    .head {
        padding: 10/@px-unit;
        border-bottom: 1/@px-unit solid #e8e8e8;
    }
    .time {
        margin-top: 6/@px-unit;
    }
    .batch {
        padding: 10/@px-unit;
        .list {
            margin-top: 6/@px-unit;
            font-weight: bold;
        }
    }
    .ant-table-header-column{
        font-weight: bold;
    }
    .ant-drawer-body {
        padding-bottom: 0;
    }
    .ant-table{
        border-top:  none;
        min-height: 630/@px-unit;
    }
    .ant-drawer{
        margin-top: 230/@px-unit;
    }
    .ant-drawer-content-wrapper {
        width: 340/@px-unit !important;
        height: 628/@px-unit !important;
    }
    .drawer {
        .ant-row {
            margin-bottom: 14/@px-unit;
        }
        button {
            width: 100%;
        }
        .anticon {
            margin-left: 280/@px-unit;
        }
        .special {
            margin-top: 20/@px-unit;
        }
    }
}



.FireWall-tab{
    .ant-table-header-column{
        font-weight: bold;
    }
    .icons-list {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .padding15{
        padding: 14/@px-unit;
        padding-top: 0;
    }
    .paddingLeft15{
        padding-left:15/@px-unit;
    }
    .divider{
        padding:0 15/@px-unit;    
    }
    .marginRight10{
        margin-right:10/@px-unit;
    }
    a {
        color:@text-color;
        &:hover{
            color:@primary-color;
        }
    }
    .ant-popover-buttons .ant-btn:first-child{
        float: right;
    }
    .ant-modal-confirm-btns .ant-btn:first-child{
        float: right;
        margin-left: 10/@px-unit;
    }
    .Firewall-radio-label{
        width:80/@px-unit;
    }
}
.Firewall-modal{
    .LabelIP-label-Col{
        text-align: left;
    }
    .LabelIP-container{
        margin: 0;
    }
    .ant-input.LabelIPinput {
        width:53/@px-unit;
    }
    .ant-row{
        margin-bottom: 6/@px-unit;
    }
    .mac-box .mac-input {
        width: 34.5/@px-unit; 
        min-width: 34.5/@px-unit; 
        padding: 0; 
    }
    .macInput-label {
        padding: 0;
        text-align: left;
    }
    .ant-input-number{
        width:100%;
    }
    
}
._publicAccountLock_{
    .label-title-Text{
        line-height: 32/@px-unit;
        font-weight: bold;
    }
    .padding15{
        padding: 15/@px-unit;
    }
    .marginRight10{
        margin-right:10/@px-unit;
    }
    .divider{
        padding:0 15/@px-unit;    
    }
    > .ant-row {
        > .ant-col {
            padding-bottom: 14/@px-unit;
        }
    }
    .ant-input-number{
        width:100%;
    }
}
._Whitelist_ {
    .icons-list {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


._DigestAlgo_ {
    .digestAlgo-alert {
        padding: 4/@px-unit 8/@px-unit;
    }
}


._GeneralConfig_ {
    padding: 14/@px-unit;
    
}
._VideoTransmission_{
    min-height: 80vh;
    .ant-table-header-column{
        font-weight: bold;
    }
    .ant-input-number{
        width:100%;
    }
    .box{
        width: 100%;
        margin-bottom: 10/@px-unit;
        border: 1/@px-unit solid @neutral-stroke-2-normal;
        .title {
            width: 100%;
            padding: 6/@px-unit 14/@px-unit;
            font-weight: bold;
            border-bottom: 1/@px-unit solid @neutral-stroke-2-normal;
        }
        .conainer{
            width: 100%;
            padding: 14/@px-unit 32/@px-unit;
        }
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .ant-table-title {
        padding: 0 10/@px-unit;
        border:1/@px-unit solid @neutral-stroke-2-normal;
    }
    .ant-table-tbody .CertSefialNum {
        word-break: break-all;
    }
}
._VideoExport_{
    min-height: 80vh;
    padding: 14/@px-unit 14/@px-unit 14/@px-unit 29/@px-unit;
    > .ant-row {
        > .ant-col {
            padding-bottom: 14/@px-unit;
        }
    }
    .ant-form-item {
        margin-bottom: 0
    }
    .ant-form-explain {
        margin-left: 21%
    }
}
._VideoStorage_ {
    min-height: 80vh;
    padding: 14/@px-unit 14/@px-unit 14/@px-unit 29/@px-unit;
    > .ant-row {
        > .ant-col {
            padding-bottom: 14/@px-unit;
        }
    }
}

._VideoEncrypt_ {
    .ant-collapse {
        background: #fff;
    }
    .ant-collapse-content > .ant-collapse-content-box {
        padding: 0/@px-unit;
    }
    .handle {
        margin-left: 20/@px-unit;
        button {
            margin-right: 10/@px-unit;
        }
    }
}



._SAFESecurityStatus_{
    p{
        margin-bottom: 0;
    }
    .icon-desc-popover-wrapper {
        .ant-popover-inner-content {
            padding: 12/@px-unit 16/@px-unit;
        }
    }
    ._SAFESecurityStatus_title{
        background-color:#e6f7ff;
        padding:15/@px-unit;
        position: relative;
    }
    ._SAFESecurityStatus_titleText{
        font-size:24/@px-unit;
        margin-bottom:10/@px-unit !important;
    }
    ._SAFESecurityStatus_titleTip{
        margin-left:5%;
    }
    .safeSecurityStatus{
        color: #40a9ff;
    }
    ._SAFESecurityStatus_detect{
        min-width: 100/@px-unit;
        height: 40/@px-unit;
        max-height: 40/@px-unit;
        position:absolute;
        right:20/@px-unit;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .icon_pr10{
        padding-right: 10/@px-unit;
    }
    .icon_pl16 {
        padding-left: 16/@px-unit;
    }
    ._SAFESecurityStatus_list{
        border-top:1/@px-unit solid #e8e8e8;
    }
    ._SAFESecurityStatus_listTitle{
        border-bottom:1/@px-unit solid #e8e8e8;
        padding:15/@px-unit 5/@px-unit 10/@px-unit 25/@px-unit;
    }
    .status-title-tip {
        display: flex;
        align-items: center;
        height: 28/@px-unit;
        line-height: 28/@px-unit;
        overflow: hidden;
        .warningTips-icon, .successTips-icon {
            font-size: 36/@px-unit;
        }
        .warningTips-icon{
            .colorLevel(1, @status-warning-fg-1-normal);
            .svgOut(@status-warning-fg-1-normal); 
        }
        .successTips-icon{
            .colorLevel(1, @status-success-fg-1-normal);
            .svgOut(@status-success-fg-1-normal); 
        }
    }
    ._SAFESecurityStatus_content{
        min-height:180/@px-unit;
        padding:15/@px-unit 60/@px-unit;
    }
    ._SAFESecurityStatus_titleIcon{
        font-size: 45/@px-unit;
    }
    .securityStateBtn{
        width: 64/@px-unit;
        height: 24/@px-unit;
        margin: 6/@px-unit 0 0 11/@px-unit;
        line-height: 24/@px-unit;
    }
    .cuttitle {
        overflow: hidden !important;
        white-space: nowrap;
        word-wrap: normal;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
    .button_black {
        text-align: center;
        cursor: pointer;
        border: 1/@px-unit solid #e8e8e8 !important;
        -webkit-border-radius: 2/@px-unit;
        -moz-border-radius: 2/@px-unit;
        -ms-border-radius: 2/@px-unit;
        -o-border-radius: 2/@px-unit;
        border-radius: 2/@px-unit;
    }
    .detail-modal{
        .title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .check-prompt {
                display: flex;
                align-items: center;    
                height: 32/@px-unit;
            }
            .warningTips-icon {
                font-size: 36/@px-unit;
            }    
            .detail-opz-btn{
                margin-left: 10/@px-unit;
            }
            button{
                margin-top: -3/@px-unit;
            }
        }
    }
    .detail-title-warning {
        display: inline-block;
        vertical-align: middle;
    }
    .item-icon-wrap {
        position: relative;
    }
    .item-icon-list{
        width: 64/@px-unit;
        height: 64/@px-unit;
        margin: 0 auto;
        
        font-size:64/@px-unit;
        margin-bottom: 5/@px-unit;
    }
    .icon-desc-wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64/@px-unit;
        height: 64/@px-unit;
        margin: 0 auto;
        margin-bottom: 5/@px-unit;
        .fg-1 {
            .colorLevel(1, #1890FF);
            .svgOut(#1890FF); 
        }
        .fg-2 {
            .colorLevel(2, #fff);
            .svgOut(#fff); 
        }
    }
    .item-icon-loading{
        position: relative;

        &::after {
            content: '';
            position: absolute;
            left: -5/@px-unit;
            top: -5/@px-unit;
            width: 74/@px-unit;
            height: 74/@px-unit;
            border-radius: 50%;
            border: 2/@px-unit solid transparent;
            border-bottom-color: rgb(16, 142, 233);
            animation: rotation 1.5s linear infinite;
        }
    }
    .item-list-name{
        text-align: center;
        height:30/@px-unit;
        line-height:30/@px-unit;
        margin-top: 5/@px-unit;
    }
    .item-list-name-users {
        text-align: center;
        line-height:30/@px-unit;
        
    }
    .item-list-btn{
        display: inline-block;
        padding: 2/@px-unit 5/@px-unit;
        border: .5/@px-unit solid #e8e8e8;
        margin: 0 auto;
        cursor: pointer;
        border-radius: 4/@px-unit;
        min-width: 60/@px-unit;
    }
    .detail-title-warning{
        margin-left: 6/@px-unit;
        font-weight: bold;
    }
    .detail-optimize-btn{
        float: right;
        margin: 0 10/@px-unit;
    }
    .detail-optimize-list{
        position: relative;
        padding: 0 20/@px-unit;
        padding-right: 30/@px-unit;
    }
    .detail-optimize-btn{
        position: absolute;
        right: 10/@px-unit;
        top: 10/@px-unit;
        text-align:right;
        color:@current;
        cursor: pointer;
    }
    .icon-desc-popover{
        max-width: 500/@px-unit;
        .icon-desc-title{
            font-weight: bold;
            margin: 10/@px-unit 0;
        }
    }

    .icon-status-success{
        svg .icon-cicrle-part{
            fill:#52c41a;
        }
    }
    .icon-status-fail{
        svg .icon-cicrle-part{
            fill:#fcac15;
        }
    }
    .safeWarningIcon {
        svg .icon-cicrle-part{
            fill:#fcac15;
        }
    }
    .icon-status-ignore{
        svg .icon-cicrle-part{
            fill:#8f8f8f;
        }
    }

    .item-list-name-fail{
        color: #fcac15;
    }
    .ant-progress-bg{
        background-color: #8fc6f8;
        background-image: linear-gradient(to right, rgb(16, 142, 233) 0%, rgb(135, 208, 104) 100%);
        background-size: 40/@px-unit 40/@px-unit;
        background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
        background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
        background-image: -ms-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
        -webkit-background-size: 40/@px-unit 40/@px-unit;
        background-size: 40/@px-unit 40/@px-unit;
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.Cert-form {
    .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before,
    .ant-form-item-label > label::after {
        display: none;
    }
    .ant-form-item {
        margin-bottom: 10/@px-unit !important;
    }
}

.Cert{
    word-break: break-all;
    padding: 16/@px-unit;
    .ant-table-tbody .ant-table-row{
        border-left: 1/@px-unit solid #e8e8e8;
        border-right: 1/@px-unit solid #e8e8e8;
    }
    .ant-table-placeholder{
        border-left: 1/@px-unit solid #e8e8e8;
        border-right: 1/@px-unit solid #e8e8e8;
    }
    .ant-table-header-column{
        font-weight: bold;
    }
    .ant-form-explain{
        margin-left:0/@px-unit;
    }
    .cert-popover-wrapper {
        .ant-popover-inner-content {
            padding: 12/@px-unit 16/@px-unit;
        }
    }
    .ant-modal-body{
        .Cert-form{
            .ant-form-item{
                position: relative;
                .ant-form-item-label{
                    text-align: left;
                    margin-left: 6%;
                }
                .ant-form-item-control-wrapper{
                    width: 50%;
                }
            }
        }
    }
    .icon-wrap {
        display: inline-flex;
        background-color: #fff;
        border-radius: 50%;
    }
    .grey-select {
        svg path:first-of-type {
            fill: @iconDisabledColor;
        }
    }
}
.cert-install-modal {
    .install-cert-tips {
        color: @warnColorNo18;
    }
}
.Cert_btn_disabled {
    svg path {
        fill: @iconDisabledColor;
    }
    cursor: not-allowed;
}
@px-unit: 14rem;

@colorPickerWrapperBorderColor: #DCDCDC;
.label-color-picker-wrapper {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
    width: 32/@px-unit;
    height: 32/@px-unit;
    border-radius: 4/@px-unit;
    border: 1/@px-unit solid @colorPickerWrapperBorderColor;
}
.label-color-picker {
    display: inline-block;
    position: relative;
    width: 24/@px-unit;
    height: 24/@px-unit;
    border-radius: 4/@px-unit;
    cursor: pointer;
}
.label-color-picker-popover {
    .w-color-saturation {
        cursor: default !important;
        border-radius: 4/@px-unit !important;
    }
    .label-color-sketch > div:first-child {
        padding: 0 !important;
    }
    .label-color-sketch > div:nth-child(2) {
        display: none !important;
    }
    .label-color-sketch > div:nth-child(3) {
        display: none !important;
    }
    .w-color-alpha.w-color-alpha-horizontal {
        background-color: transparent !important;
    }
    .w-color-alpha > .w-color-interactive {
        border-radius: 4/@px-unit !important;
    }
    .label-color-sketch.hide-alpha {
        .w-color-hue {
            top: 7/@px-unit;
        }
        .w-color-hue ~ .w-color-alpha {
            display: none !important;
        }
    }
    .ant-popover-inner {
        padding: 0 !important;
    }
    .ant-popover-inner-content {
        padding: 12/@px-unit !important;
    }
    .operation-wrapper {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin-top: 12/@px-unit;
        .edit-input-group {
            display: flex;
            margin-right: -2/@px-unit;
            margin-left: -2/@px-unit;
            .edit-input-container {
                margin-right: 2/@px-unit;
                margin-left: 2/@px-unit;
            }
        }
        .edit-input-wrapper {
            line-height: 24/@px-unit;
        }
        .operation-prefix {
            padding-right: 8px;
        }
    }
    .preset-wrapper {
        .preset-top-divider {
            margin-top: 12/@px-unit;
            margin-bottom: 8/@px-unit;
        }
        .preset-plate-group {
            display: flex;
            flex-wrap: wrap;
            margin: -3/@px-unit;
            .preset-plate-item {
                height: 24/@px-unit;
                width: 24/@px-unit;
                border-radius: 4/@px-unit;
                cursor: pointer;
                margin: 3/@px-unit;
            }
        }
    }
}

.time-line-wrapper {
    height: 100%;
}
@px-unit: 14rem;
@bit-schedule-font-color: #000000bf;

@bit-schedule-grid-borderColor: #e8e8e8; 

@bit-schedule-time-ruler-bgColor: #f0f2f5; 

@bit-schedule-drag-handler-bgColor: #fff; 
@bit-schedule-drag-handler-borderColor: #2680eb; 
@bit-schedule-drag-handler-hover-borderColor: #46a6ff; 

@bit-schedule-event-select-bgColor: rgb(238, 238, 238); 

@bit-schedule-scale-text-color: #8c8c8c; 

@bit-schedule-operator-color: #000000bf; 
@bit-schedule-operator-hover-color: #40a9ff; 
@bit-schedule-operator-active-color: #096dd9; 

@bit-schedule-draw-rect-borderColor: #1890ff; 

@bit-schedule-text-disabled: fade(#000, 26%);


@bit-schedule-event-green-color: #52c41a; 
@bit-schedule-event-yellow-color: #fcac15; 
@bit-schedule-event-red-color: #f5222d; 
@bit-schedule-event-blue-color: #1890ff; 
@bit-schedule-event-orange-color: #ff7e16; 
@bit-schedule-event-purple-color: #ac0dce; 











.safeopr-configBar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 12.5%;
    margin: auto;
    padding: 14/@px-unit 20/@px-unit;
    .left {
        float: left;
        & > * {
            margin-left: 10/@px-unit;
            margin-right: 10/@px-unit;
        }
    }
    .right {
        display: flex;
        float: right;
        & > * {
            margin-left: 10/@px-unit;
            margin-right: 10/@px-unit;
        }
        
        
        
        
    }
}

.ant-table.ant-table-bordered .ant-table-title {
    padding: 5/@px-unit 15/@px-unit;
}
.ant-form {
    color: inherit !important;
}

.safeopr-alert-wrapper {
    padding-top: 8/@px-unit;
    padding-bottom: 8/@px-unit;
}

.label-flex-container {
    display: flex;
    align-items: center;
    height: 48/@px-unit;
    padding: 8/@px-unit 0;
}

.sdd-form-container {
    white-space: nowrap;
    .sdd-form-list-wrapper {
        display: inline-block;
        vertical-align: top;
        margin-right: 40px;
        margin-left: 40px;
        &:first-of-type {
            margin-left: 0px;
        }
        &:last-of-type {
            margin-right: 0px;
        }
    }
}

.operator-icon {
    font-size: 30/@px-unit;
}    

.ant-modal-footer .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
    margin-left: 12/@px-unit;
}


.m-m-a {
    margin: auto;
}

.m-m-0 {