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;











.colorMenu_box {
    float: left;
    margin-top: 4/@px-unit;
    border-radius: 2/@px-unit;
    width: 14/@px-unit;
    height: 14/@px-unit;

    &.black {
        background: @skin-black;
    }

    &.blue {
        background: @skin-blue;
    }
}


.homeside-enter,
.homeside-appear {
    opacity: 0;
}
.homeside-enter-active,
.homeside-appear-active {
    opacity: 1;
    transition: opacity 200ms ease-in;
}
.homeside-enter-done {
    opacity: 1;
}
.homeside-exit {
    opacity: 1;
}

.homeside-exit-active {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.homepage-header {
    height: 64 / @px-unit;
}
.homeside-exit-done {
    opacity: 0;
}

#main {
    @spaceheight: 64 / @px-unit;
    height: calc(~'100vh - @{spaceheight}');
}
.clearfix {
    &::after {
        content: '.';
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
}
.logout-icon {
    cursor: pointer;
    display: inline;
    margin-right: 12 / @px-unit;
}
.topMenus {
    .ant-dropdown-menu {
        background-color: @sideMenuBackColor !important;
    }
    .ant-dropdown-menu-item {
        color: @titleColorNo4 !important;
        min-width: 80 / @px-unit;
    }
    .ant-dropdown-menu-item:hover {
        color: @btnNormalColorNo1 !important;
        background-color: transparent;
    }
    .menuSelected {
        color: @btnNormalColorNo1 !important;
        background-color: @sideMuneSelectedBgColor !important;
    }
}
.topMenusMore {
    .ant-dropdown-menu {
        overflow: auto;
        width: 860 / @px-unit;
    }
    .ant-dropdown-menu-item {
        width: 172 / @px-unit;
        display: inline-block;
    }
}

.nav-info-container{
    &:hover{
        cursor: pointer;
    }
    
    &>span:nth-child(1){
        position: relative;
        top: 1px;
    }  
}
.nav-info-content{
    padding: 16px;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    &>div:nth-child(1){
        font-weight: bold;
        margin-bottom: 8px;
    }
}

.tab-menu-button {
    .ant-badge-count {
        min-width: 14/@px-unit;
        width: auto;
        height: 14/@px-unit;
        line-height: 14/@px-unit;
        border-radius: 10/@px-unit;
        padding: 0 3/@px-unit;
    }
}
.systemSet {
    width: auto;
    background: transparent;
}

.TabMenu{
    line-height: 64/@px-unit;
    width: 100%;
    .ant-tabs-tab{
        background-color: transparent;
        border:none;
        height: 64/@px-unit;
        color:@topMenuTabColor;
    }
    .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active > div{
        color:@topMenuTabColor
    }
    .ant-tabs-nav-more {
        display: none;
    }
    .ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-bottom > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before, .ant-tabs-bottom > div > .ant-tabs-nav::before {
        border:none;
    }
    .ant-tabs-tab-btn:focus, .ant-tabs-tab-remove:focus, .ant-tabs-tab-btn:active, .ant-tabs-tab-remove:active {
        color:@secondNavBgColorNo13;
    }
    .tabMenu-icon {
        color:@topMenuTabColor;
    }
    .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
        background-color: transparent;
        border:none;
        text-align: center;
        line-height: 64/@px-unit;
        width: unset;
        margin-right: 10/@px-unit;
    }
    .ant-tabs-bar {
        margin: 0;
        border: none;
        color:@topMenuTabColor;
    }
    .ant-tabs .ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container{
        height:64/@px-unit;
    }
    .ant-tabs-nav-container {
        line-height: 64/@px-unit;
    }
    .ant-tabs-tab-next{
        height: 64/@px-unit;
        color:@tabArrowColor;
        &:hover{
            color:@tabArrowHoverColor;
        }
    }
    .ant-tabs-tab-prev{
        height: 64/@px-unit;
        color:@tabArrowColor;
        &:hover{
            color:@tabArrowHoverColor;
        }
    }
    .anticon-close{
        opacity: 0;
        color:@tabCloseColor;
    }
    .ant-tabs-tab {
        &:hover .anticon-close{
            opacity: 1;
        }
    }
    .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab .ant-tabs-close-x{
        color:@tabCloseColor;
    }
}
.tabMenus {
    .ant-dropdown-menu {
        background-color: @firstNavBgColorNo12;
        .ant-dropdown-menu-item {
            color: @topMenuTabColor;
        }
        .ant-dropdown-menu-item:hover {
            color:@tabMenuTabHoverColor;
            background-color: @firstNavBgColorNo12;
        }
    }
}
.tab-menu{
    width: 100%;
    background-color:@tabBackGroundColor;
    opacity:1 !important;
    color:@topMenuTabColor;
    line-height: 64/@px-unit;
    height:64/@px-unit;
    z-index: 1000;
    position: fixed;
    min-width:800/@px-unit;
    width:100%;
    .tab-menu-right{
        float: right;
        height: 64/@px-unit;
        overflow: hidden;
        text-align:right;
    }
    .ant-tabs-nav .ant-tabs-tab:hover {
        color: @tabMenuTabHoverColor;
    }
    .ant-divider {
        height: 16/@px-unit;
        background: @tabDividerColor;
    }
    .ant-divider, .ant-divider-vertical{
        margin: 0 14/@px-unit;
    }
    i:hover{
        color:@tabMenuTabHoverColor;
    }
    .tabMenu-left{
        .anticon{
            font-size: 20/@px-unit;
        }
    }
    .tabMenu-right{
        .anticon{
            font-size: 16/@px-unit;
        }
    }
}
.tab-menu-button{
    border: none;
    padding: 0;
    background-color:@tabBackGroundColor;
    outline: none;
    line-height: 64/@px-unit;
    width: 40/@px-unit;
    cursor: pointer;
    &:hover{
        color:@tabMenuTabHoverColor;
    }
    &:last-child {
        text-align: center;
        display: inline-block;
        margin-right: 0;
        
    }
}

.tab-menu-button-admin{
    border: none;
    padding: 0;
    background-color:@tabBackGroundColor;
    outline: none;
    line-height: 19/@px-unit;
    cursor: pointer;
    &:hover{
        color:@tabMenuTabHoverColor;
    }
}
.tab-menu-home{
    text-align: center;
    float: left;
    cursor: pointer;
    line-height: 64/@px-unit;
    &:hover {
        color: @tabMenuTabHoverColor;
    }
}
.tab-menu-homeIconLine{
    float: left;
    line-height: 64/@px-unit;
    margin-left: 10/@px-unit;
}
.tabMenu-logo {
    float: left;
    cursor: pointer;
}
.tabMenu-home {
    float: left;
    width: 18/@px-unit;
    cursor: pointer;
    text-align: center;
    z-index: 200;
    i {
        font-size: 18/@px-unit;
    }
}
.tabMenu-divider {
    float: left;
    line-height: 64/@px-unit;
}

.tabMenu-left {
    width: 255/@px-unit; 
    height: 64/@px-unit; 
    position: absolute;
    left:0;
    top:0; 
}
.tabMenu-middle {
    height: 64/@px-unit;
    margin: 0 260/@px-unit;
}
.tabMenu-right {
    width: 270/@px-unit; 
    height: 64/@px-unit; 
    position: absolute;
    right:0;
    top:0; 
    text-align: right;
    padding-right: 8/@px-unit;
}

.tab-menu-homeIcon{
    text-align: center;
    cursor: pointer;
    float: left;
    margin-left: 10/@px-unit;
    margin-right:40/@px-unit;
    line-height: 64/@px-unit;
    &:hover {
        color: @tabMenuTabHoverColor;
    }
}
.tab-menu.haveLogo{
    .tabMenu-left{
        left:20/@px-unit;
    }
    .tabMenu-middle {
        margin: 0 180/@px-unit 0 258/@px-unit;
    }
}
@keyframes arcSlideUpIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0.8;
    }
  }

.MenuView_item{
    width: 33%;
    display: inline-block;
    cursor: pointer;
    padding: 20/@px-unit;
    margin-bottom: 10/@px-unit;
    border-radius: 3/@px-unit;
    transition:  background-color 1500ms;
    -moz-transition: background-color 1500ms;
    -o-transition: background-color 1500ms;
    -webkit-transition: background-color 1500ms;
}
.MenuView_item:hover{
    background-color: @MenuViewItemHoverColor;
    transition:  background-color 1500ms;
    -moz-transition: background-color 1500ms;
    -o-transition: background-color 1500ms;
    -webkit-transition: background-color 1500ms;
}
.MenuView_ViewItem{
    text-align: center;
    justify-content: center;
    margin-bottom: 16/@px-unit;
    .icon{
      display: inline-block !important;
    }

}
._MenuView_ {
    padding: 20/@px-unit;
    padding-bottom: 0;
    position: relative;
    .pagination {
        position: absolute;
        z-index: 20;
        bottom: 10/@px-unit;
        width: 100%;
        text-align: center;
      }
      .swiper-pagination-switch {
        display: inline-block;
        width: 10/@px-unit;
        height: 10/@px-unit;
        border-radius: 50%;
        background: @MenuViewPageSwitch;
        margin: 0 10/@px-unit;
        opacity: 0.8;
        border: transparent;
        cursor: pointer;
      }
      .swiper-active-switch {
        background: @MenuViewActivePageSwitch;
      }
      .swiper-slide-padding {
        padding:30/@px-unit 30/@px-unit 10/@px-unit 30/@px-unit;
      }
    .modal {
        position: fixed;
        top: 0;
        left: 4vw;
        z-index: 2;
        display: block;
    }
}

._MenuView_Carousel{
    background-color: @MenuViewBackGroundColor;
    padding: 30/@px-unit 30/@px-unit 5/@px-unit 0/@px-unit;
    width: 80%;
    margin: 0 auto;
    margin-top: 45/@px-unit;
    z-index: 100;
    position: absolute;
    left: 50%;
    height: 780/@px-unit;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
}
.MenuView_ViewItem_title{
    font-size: 20/@px-unit;
    font-weight: bold;
}
.MenuView_ViewItem_underLine {
    height: 2/@px-unit;
    width: 35/@px-unit;
    background-color: @MenuViewItemLineColor;
    border-radius: 5/@px-unit;
    margin: 0 auto;
}
.MenuView_ViewItem_message{
    word-wrap:break-word;
    word-break:normal;
    overflow: hidden;
    height: 80/@px-unit;
    color:@MenuViewItemMessageColor;
}
.ant-carousel .slick-slider {
  z-index: 3;
  margin-top: 8vh;
}
._MenuView_ .ant-carousel .slick-dots li.slick-active button {
    background-color: @MenuViewItemHoverColor;
}
._MenuView_ .ant-carousel .slick-dots li button {
    background-color: @MenuViewCarouselColor;
}


.swiper-container {
	overflow:hidden;
	direction:ltr;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	
	z-index:1;
}
.swiper-wrapper {
    position:relative;
    margin-top: -10/@px-unit;
	width:100%;
	-webkit-transition-property:-webkit-transform, left, top;
	-webkit-transition-duration:0s;
	-webkit-transform:translate3d(0/@px-unit,0,0);
	-webkit-transition-timing-function:ease;
	
	-moz-transition-property:-moz-transform, left, top;
	-moz-transition-duration:0s;
	-moz-transform:translate3d(0/@px-unit,0,0);
	-moz-transition-timing-function:ease;
	
	-o-transition-property:-o-transform, left, top;
	-o-transition-duration:0s;
	-o-transform:translate3d(0/@px-unit,0,0);
	-o-transition-timing-function:ease;
	-o-transform:translate(0/@px-unit,0/@px-unit);
	
	-ms-transition-property:-ms-transform, left, top;
	-ms-transition-duration:0s;
	-ms-transform:translate3d(0/@px-unit,0,0);
	-ms-transition-timing-function:ease;
	
	transition-property:transform, left, top;
	transition-duration:0s;
	transform:translate3d(0/@px-unit,0,0);
	transition-timing-function:ease;

	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.swiper-free-mode > .swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto;
}
.swiper-slide {
	float: left;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}


.swiper-wp8-horizontal {
	-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
	-ms-touch-action: pan-x;
}


.side-button{
    background-color:transparent;
    border:none;
    outline: none;
}

.sideMenu {
    height:100%;
    background-color:@sideMenuBackGroundColor;
    padding: 10/@px-unit 0;
    .ant-menu-item {
        a {
            display: inline!important;
        }
    }
}
.sideMenu .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
    background-color: @sideMenuSelectedColor;
    color:@primary-color;
}
.sideMenu .ant-menu-item:hover, .ant-menu-item-active, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-submenu-active, .ant-menu-submenu-title:hover{
    color:@primary-color;
}
.sideMenu .ant-menu-submenu-arrow::before{
    background-color:@sideMenuSelectedColor
}
.sideMenu .sideMenuBody{
    height:100%;
    border-right:none;
    background-color:@sideMenuBackGroundColor
}

._SideView_ {
    min-width:800/@px-unit;
    height:100%;
    width: 100%;
    .sideView-menu {
        float: left;
        height: 100%;
        width: 240/@px-unit;
    }
    .sideView-menu-page {
        @space:240/@px-unit;
        float: left;
        height: 100%;
        width:calc(~"100% - @{space}");
        padding: 10/@px-unit;
        background: @contentBgColorNo15;
        background-clip: content-box;
    }
}



.cardClass{
    border:1/@px-unit solid rgb(150, 146, 146);
    border-radius: 5/@px-unit;
    .ant-card-body{
        padding: 20/@px-unit 24/@px-unit 8/@px-unit 24/@px-unit;
    }
    .chartCard {
        position: relative;
        .chartTop {
            position: relative;
            overflow: hidden;
            width: 100%;
        }
        .chartTopMargin {
            margin-bottom: 12/@px-unit;
        }
        .chartTopHasMargin {
            margin-bottom: 20/@px-unit;
        }
        .metaWrap {
            float: left;
        }
        .avatar {
            position: relative;
            top: 4/@px-unit;
            float: left;
            margin-right: 20/@px-unit;
            img {
                border-radius: 100%;
            }
        }
        .meta {
            color: @text-color-secondary;
            font-size: @font-size-base;
            height: 130/@px-unit;
        }
        .action {
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 0;
        }
        .total {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            white-space: nowrap;
            color: @heading-color;
            margin-top: 4/@px-unit;
            margin-bottom: 0;
            font-size: 30/@px-unit;
            line-height: 38/@px-unit;
            height: 38/@px-unit;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .content {
            margin-bottom: 12/@px-unit;
            position: relative;
            width: 100%;
        }
        .contentFixed {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }
        .footer {
            border-top: 1/@px-unit solid @border-color-split;
            padding-top: 9/@px-unit;
            margin-top: 8/@px-unit;
            & > * {
                position: relative;
            }
        }
        .footerMargin {
            margin-top: 20/@px-unit;
        }
    }
}


.formButtonGroup-space {
    margin-right: 10/@px-unit;
}


._PortPanle_{
    width: 20%;
    .iconWidth{
        width: 25%;
    }
    svg{
        font-size: 28/@px-unit;
    }
    .card_select{
        animation: glow 800ms ease-out infinite alternate;
    }
    .fiber_card{
        display: inline-block;
        border-color:@linkCardColor;
        .ant-card-body{
            padding: 5/@px-unit;
        }
        .icon40G{
            display: inline-block;
            margin-left: 5/@px-unit;
        }
    }
    @keyframes glow {
        0% {
            border-color: #266fce;
            box-shadow: 0 0 5/@px-unit @cardBorderShadowColor, inset 0 0 5/@px-unit @cardBorderInsertColor, 0 1/@px-unit 0 @card-boder-color;
        }
        100% {
            border-color: #0047D5;
            box-shadow: 0 0 20/@px-unit @finalBlueColor, inset 0 0 10/@px-unit @finalStenthBlueColor, 0 1/@px-unit 0 @finalStenthColor;
        }
    }
}
.width_135{
    width: 35% !important;
    .iconWidth{
        width: 12% !important;
    }
}
.width_134{
    width: 30% !important;
    .iconWidth{
        width: 20% !important;
    }
}
.width_139 ,.width_140 ,.width_141 {
    width: 70% !important;
    .iconWidth{
        width: 6% !important;
    }
}
.width_136 ,.width_137 ,.width_138 {
    width: 50% !important;
    .iconWidth{
        width: 8% !important;
    }
}
.width_106 {
    width: 20% !important;
    .iconWidth{
        width: 25% !important;
    }
}
.width_142{
    width: 63% !important;
    .iconWidth{
        width: 6% !important;
    }
}
.width_144,.width_143,.width_133{
    width: 20% !important;
    .iconWidth{
        width: 20% !important;
    }
}
.width_145,.width_146{
    width: 50% !important;
    .iconWidth{
        width: 8% !important;
    }
}
.width_179,.width_178{
    width: 50% !important;
    .iconWidth{
        width: 6% !important;
    }
}
.width_171,.width_172,.width_176{
    width: 67% !important;
    .iconWidth{
        width: 5% !important;
    }
}
.width_203,.width_204{
    width: 30% !important;
    .iconWidth{
        width: 13% !important;
    }
}
.width_173,.width_174,.width_175,.width_180{
    width: 100% !important;
    .iconWidth{
        width: 3.5% !important;
    }
}
.width_177{
    width: 70% !important;
    .iconWidth{
        width: 5% !important;
    }
}
.width_205,.width_148,.width_147{
    width: 20% !important;
    .iconWidth{
        width: 20% !important;
    }
}
.width_151{
    width: 40% !important;
    .iconWidth{
        width: 10% !important;
    }
}



._Account_ {
    
    
    
    padding-left: 20/@px-unit; 
}


._ACL_ {
    
    
    
    padding-left: 20/@px-unit; 
  
}
.addAclContainer{
    .ant-input-number{
        width: 100% !important;
    }
}


._AclBindTable_ {
    
    
    
    padding-left: 20/@px-unit; 
}


._AggregationSetting_ {
    
    
    
    padding:16/@px-unit;
    background-color: inherit;
    .selectColor {
        background: @cardSelectColor !important;
    }
    .Alert_margin {
        margin-top: 10/@px-unit;
        margin-bottom: 10/@px-unit;
    }
	.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
        background-color: @splTableHoverColor!important;
    }
    .ant-table-body .ant-table-row-hover{
        background: @splTableHoverColor!important;
    }
    .ant-table-body .ant-table-row-hover>td{
        background: @splTableHoverColor!important;
    }
    .ConnectStateTable {
        margin-top: 20 /@px-unit;
    }
    .ConnectStateTable {
        border: 1/@px-unit solid @tableBorderColor;
        .ant-table-thead > tr > th {
            background-color: @homePageNo1;
            
        }
    }
    .btn-normol-color{
        color: inherit !important;
    }
    ._PortPanle_ {
        min-width: 240/@px-unit;
        width: 20%
        
    }
    .load-checkbox .label-normal-wrapper  {
        width: 700/@px-unit !important;
    }
}


._ARPBinding_ {
    
    
    
    padding-left: 20/@px-unit; 
    height: 100%;
}


._ARPManager_ {
    
    
    
    padding-left: 20/@px-unit; 
    .operationContainer{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
}


._ARPSetting_ {
    
    
    
    padding-left: 20/@px-unit; 
}


._Authorize_ {
    
    
    
    padding:16/@px-unit;
}


._CACertificate_ {
    
    
    
    padding:16/@px-unit;
    .cerTable{
        max-height: 600/@px-unit
    }
    .DeviceCert,.Cert{
        .actionBtnRow{
            justify-content: space-between;
        }
        .editOpr{
            color: @linkColorNo20;
        }
        .deviceCertTable{
            max-height: 600/@px-unit;
        }
    }
    .Cert_btn_disabled {
        color: @disableColorNo7;
        cursor: not-allowed;
    }
}

.Cert-form{
    .ant-form-item{
        padding-top: 8/@px-unit;
        padding-bottom: 8/@px-unit;
        position: relative;
        .ant-form-item-control-input{
            width: 70%;
        }
    }
    .days{
        position: absolute;
        margin-top: -34/@px-unit;
        margin-left: 45%;
    }
}
.cert-modal,.existedCert-modal{
    .fileReader .label-normal-wrapper{
        width: auto !important;
    }
}
.CreateCAModal {
    .ant-radio-group {
        font-size: 14/@px-unit;
    }
    word-break: normal;
}


._CloudManagement_ {
    
    
    
    padding-left: 20/@px-unit; 
    .label_span{
        display: inline-block;
        width: 108/@px-unit;
    }
    .dolynkcare_image{
        width: 154/@px-unit;
        height: 154/@px-unit;
        margin-bottom: 10/@px-unit;
        background-image: url('/static/media/DoLynkCare.82e2cd25.png');
    }
    .cloud_image{
        width: 185/@px-unit;
        height: 185/@px-unit;
        margin-bottom: 10/@px-unit;
        background-size: cover;
        background-image: url('/static/media/cloud.d80d9c94.png');
    }
    .cloud_text{
        white-space: pre-line;
        word-break: break-word;
    }
}


._Demo_ {
    
    
    
    padding-left: 20/@px-unit; 
}


._DeviceInfo_ {
    
    
    
    padding:16/@px-unit;
    .device-info-title{
        font-weight: 600;
    }
    .label-normal-wrapper{
        width: 400/@px-unit !important;
    }
   
}


._DHCP_ {
    padding: 16 / @px-unit;
    height: 100%;
    width: 100%;
    overflow: auto;
}
._DHCPServer_AddrList_Modal {
    .ant-modal-body {
        display: flex;
    }
    .addrList-column {
        flex: 1;
    }
}


._DHCPRelay_ {
    
    
    
    padding-left: 20/@px-unit; 
}


._DHCPSnooping_ {
    
    
    
    padding-left: 20/@px-unit; 
}
._OptionCfg_,._PortCfg_{
    .sdd-swtich-contianer{
        text-align: center;
    }


}


._Diagnosis_ {
    
    
    
    padding:16/@px-unit;
    .ping-result{
        white-space: pre-wrap;
        max-height: 350/@px-unit;
        overflow: hidden;
        overflow-y: scroll;
    }
    .ant-input-number{
        width: 100%;
    }
    .label-normal  {
        width: 120/@px-unit !important;
    }
    
    .describeTip, .label-explain {
            word-break:normal;
        }
        
    
}


._Dot1x_ {
    
    
    
    padding-left: 20/@px-unit; 
}


._EEEEnergy_ {
    
    
    
    padding:16/@px-unit;
}


._ERPS_ {
    
    
    
    padding:16/@px-unit;
    .ant-table-cell .label-explain{
        text-align: left;
    }
    .mep-instance-table .label-normal-container {
        width: 120/@px-unit;
    }
}
.erps_edit .label-normal-container .label-normal-wrapper  {
    text-align: center;
    width: 120/@px-unit !important;
}
.select-level {
    width: 120/@px-unit !important;

}
.mep_edit .label-normal-container {
    text-align: center;
    width: 120/@px-unit !important;
}
.erps_vlan .label-normal-container, .mep_mac_table .label-normal-container{
    width: auto !important;
}
.modal-erps-add .ant-input-number{
    width: 100% !important;
}
.modal-mep-add .ant-input-number{
    width: 100% !important;
}
.modal-mep-mac-add .ant-input-number{
    width: 100% !important;
}


._FileInput_ {
    
    
    
    .uploadBtn{
        min-width: 85/@font-size-normal;
    }
    .fileLabel{
        line-height: 32/@font-size-normal;
    }
}


._Filemanage_ {
    
    
    
    padding:16/@px-unit;
    .button-box{
        text-align: center;
        margin-bottom: 20/@font-size-normal;
    }
   
    .file-button{
        width: 250/@font-size-normal;
        height: 40/@font-size-normal;
    }
    ._ConfigImportExport_{
        width: 100%;

    }
  
  
}
.modal-text {
    
    width: 432/@font-size-normal !important;
}


._FireWall_ {
    
    
    
    padding:16/@px-unit;
    overflow: auto;
    background-color: inherit;
    .ant-alert-message{
        word-break: normal;
    }
    
}
._FirewallModal_ {
    .ant-input-number{
        width: 100%;
    }
    .has-error .label-explain{
        word-break: normal;
    }

} 


._FirmwareConfiguration_ {
    
    
    
    padding:16/@px-unit;
}


._ForeverPoE_ {
    
    
    
    padding: 16/@px-unit; 
}


._GreenPoE_ {
    
    
    
    padding-left: 20/@px-unit; 
    .sdd-swtich-contianer{
        text-align: center;
    }
    .ant-picker{
        line-height: 32/@px-unit;
        height: 32/@px-unit;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 8/@px-unit;
        margin-left: 20/@px-unit;
    }
}


._GreenPoENew_ {
    
    
    
    padding:16/@px-unit;
    .div-flex{
        display: flex;
    } 
    .div-green{
        display: flex;
    } 
    .time-container{
        margin: 7/@px-unit 0/@px-unit 14/@px-unit 10/@px-unit;
    }
    .table_header{
        
        border-top: none;
    }
    .table_header_bottom{
        
        
        text-align: left;
    }
    .first_row{
        text-align: left;
    }
    .table_header_split{
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }
    .poe_widthp10{
        width: 10%;
    }
    .poe_widthp12{
        width: 12%;
    }
    .poe_widthp14{
        width: 14%;
    }
    .poe_widthp15{
        width: 15%;
    }
    .poe_widthp16{
        width: 16%;
    }
    .poe_widthp18{
        width: 18%;
    }
    .poe_widthp19{
        width: 19%;
    }
    .poe_widthp20{
        width: 20%;
    }
    .poe_widthp22{
        width: 22%;
    }
    .poe_widthp25{
        width: 25%;
    }
    .text_overflow{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.green_modal {
    .green_time_label {
        display: inline-block;
        width: 120/@px-unit;
    }
    .green_time_week {
        width: 120px;
    }
    .label-normal-container .label-normal{
        width: 120/@px-unit !important;
    }
}

.homepage-right-space {
    margin-left: 10/@px-unit;
    float: right;
}


._IGMP_ {
    
    
    
    padding:16/@px-unit;
}


._IGMPSnooping_ {
    padding: 16 / @px-unit;
    .label-normal {
        width: 150 / @px-unit !important;
    }
    .label-normal-behind {
        width: 200 / @px-unit !important;
    }
}

._PortConfig_ {
    &Modal {
        .label-normal {
            width: 150 / @px-unit !important;
        }
        .label-normal-behind {
            width: 200 / @px-unit !important;
        }
    }
}
._PortPannelWithBtn_ {
    .btn-container, .portpannel-constainer {
        display: flex;
        margin: 10px 0;
    }
    .btn-container {
        button {
            margin-right: 10px;
        }
    }
}



.init-box {
    width: 70%;
    height: 70%;
    
    position: absolute;
    left: 15%;
    top: 50%;
    transform: translateY(-50%);
    
    background-color: transparent;
    border: 1/@px-unit solid @InitLegolBoxColor;
    border-radius: 10/@px-unit;
    z-index: 2;

    .legal-box{
        position: absolute;
        width: 100%;
        height: 90%;
        padding:0 20/@px-unit 4/@px-unit;
        .init-legal-content{
            height: 100%;
            .ant-tabs-content{
                height: 100%;
            }
        }
    }
    .ant-tabs {
        color: @InitPageFontColor;
    }
    .legolTab {
        height: 450/@px-unit;
        width: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .legolTab::-webkit-scrollbar {
        width: 10/@px-unit; 
        height: 1/@px-unit;
    }
    
    .legolTab::-webkit-scrollbar-thumb {
        border-radius: 10/@px-unit;
        background: @InitPageScrollTipColor;
    }
    
    .legolTab::-webkit-scrollbar-track {
        border-radius: 10/@px-unit;
        background: @InitPageScrollContentColor;
    }

    .allowcheck {
        position: absolute;
        z-index: 3;
        bottom: -70/@px-unit;
        height: 10%;
        left: 20/@px-unit;
        color: @InitPageFontColor !important;
        border-top: 1/@px-unit solid @InitPageFontColor;
        width: 95%;
        padding-top: 20/@px-unit;
        .ant-radio-wrapper {
            color: @InitPageFontColor !important;
        }
        .confirmBtn {
            position: absolute;
            right: 18/@px-unit;top: 7/@px-unit;
        }
    }
}

.InitUserPwd {
    
    top: 15%;
    .has-error .label-explain{
        word-break: normal;
    }
}
.initLanguage {
    top: 15%;
}


._IOAlarm_ {
    
    
    
    padding: 16/@px-unit; 
}


._IPACL_ {
    
    
    
    padding-left: 20/@px-unit; 
}


._IPv6Config_ {
    
    
    
    padding-left: 20/@px-unit; 
}


._LegacySupport_ {
    
    
    
    padding:16/@px-unit;
    .sdd-swtich-contianer{
        text-align: center;
    }
    .tip{
        padding-top: 8/@px-unit;
        color: @disableColorNo7;
        word-break: normal;
    }
}


._LegalInfo_ {
    
    
    
    height: 100%;
    padding:16/@px-unit;
    overflow: auto;
}


._LLDP_ {
    
    
    
    padding:16/@px-unit;
}


._LocalSetting_ {
    
    
    
    padding:16/@px-unit; 
    .label-explain {
        word-break: normal
    }
}
.modal {
    word-break: keep-all;
}

.Login-Form{
    background-color: transparent;
    text-align: center;
    width: 290/@px-unit;
    margin: auto;
}
.login-box{
    width:400/@px-unit;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200/@px-unit;
    transform: translateY(-50%);
    
    background-color: transparent;
    border: 1/@px-unit solid rgba(255, 255, 255, 0.1);
    padding: 20/@px-unit 10/@px-unit;
    border-radius: 10/@px-unit;
    z-index: 2;
    .label-normal-wrapper{
        width: 100%;
    }
    .ant-input-affix-wrapper{
        border: none;
        background-color: transparent;
        .ant-input-prefix{
            position: absolute;
            top: 50%;
            z-index: 2;
            display: flex;
            align-items: center;
            color:@contentBgColorNo15;
            line-height: 0;
            transform: translateY(-50%);
            left: 20/@px-unit;
        }
        .ant-input {
            height: 44/@px-unit;
            padding-left: 35/@px-unit;
            background: none;
            border-radius: 22/@px-unit;
            color: @contentBgColorNo15;
            font-size: 14/@px-unit;
            border: 1/@px-unit solid rgba(255, 255, 255, 0.2);
            text-align: left;
            &:nth-child(2) {    
                padding-right: 95px;
            }
        }
        .ant-input-suffix {
            margin-left: 4/@px-unit;
            position: absolute;
            right: 20/@px-unit;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .ant-input-affix-wrapper:focus, .ant-input-affix-wrapper-focused{
        box-shadow: none;
    }
    .login-button-item{
        padding: 0 12/@px-unit;
    }
    .login-button {
        margin-top: 10/@px-unit;
        margin-bottom: 20/@px-unit;
        width:100%;
        height: 44/@px-unit;
        max-height: 44/@px-unit;
        font-size: 16/@px-unit;
        font-weight: 200;
        border-radius: 20/@px-unit;
        &:hover,&:active{
            background: @btnHoverColorNo2;
        }
    }
    .login-title {
        margin-bottom: 32/@px-unit;
        text-align: center;
        letter-spacing: 0.1em;
        font-size: 26/@px-unit;
        color: @contentBgColorNo15;
    }
    .icon-logo{
        display: block;
        margin: auto;
        width: 203/@px-unit;
        height: 183/@px-unit;
        background-image: url('/static/media/login-title.0188b001.png');
    }

}
.login-container{
    height: 100%;
    width:100%;
}
.login-container-hide{
    opacity:0;
}
.login-backgroundImage {
    position: absolute;
    height: 100%;
    width:100%;
    left: 0;
    top: 0;
    background-size: cover;
    background-image: url('/static/media/login_bg.8a6283b5.png')
}
.login-forget{
    position: absolute;
    padding-left: 10/@px-unit;
    cursor: pointer;
    color:@loginForgetPasswordHoverColor;
    &:hover{
        color:@loginForgetPasswordHoverColor;
    }
    
}
.pwdOvertime-modal {
    .ant-modal-title, .ant-modal-body{
        text-align: left;
    }

}


._LongDistanceTransmit_ {
    
    
    
    padding:16/@px-unit;
    .sdd-swtich-contianer{
        text-align: center;
    }
    .tip{
        padding-top: 8/@px-unit;
        color: @disableColorNo7;
        word-break: normal;
    }
    .has-error .label-explain{
        word-break: normal;
    }
}


._LoopProtection_ {
    
    
    
    padding: 16/@px-unit; 
}


._Mac_ {
    
    
    
    padding:16/@px-unit;
    overflow: auto;
    background-color: inherit;
    .mac-tabel-tool{
        .label-div-Container{
            display: inline-block;
            vertical-align: top;
        }
    }
    ._MacFilter_{
        .iconWidth{
            width: 25%;
        }
        .Alert_margin {
            margin-top: 10/@px-unit;
            margin-bottom: 10/@px-unit;
        }
    }
    .reset-link-color{
        color: inherit !important;
    }
    
}
.mac-modal{
    .ant-input-number{
        width: 220/@px-unit !important;
    }
    .describeTip{
        color: @errorColorNo17;
        word-break:normal ;
    }

}


._MACACL_ {
    
    
    
    padding-left: 20/@px-unit; 
}


._Mirror_ {
    
    
    
    padding:16/@px-unit;
    .actionIcon{
        font-size: 16/@px-unit;
    }
    .operate-btn-danger {
        background-color: @contentBgColorNo15 !important;
        border-color: @errorColorNo17 !important;
        color: @errorColorNo17
    }
    
}
._MirrorConfig_{
    .srcPortTitle{
        font-size: 16/@px-unit;
        padding: 10/@px-unit 0;
    }
}


._ModifyPwd_ {
    
    
    
    padding:16/@px-unit;
    .has-error .label-explain{
        word-break: normal;
    }
}


._MSTP_ {
    
    
    
    padding: 16/@px-unit; 
}


._MultiAddr_ {
    padding: 16 / @px-unit;
    ._AllMultiAddr_filter {
        float: right;
    }
}


._NetCamera_ {
    
    
    
    padding: 16/@px-unit; 
    overflow-y: auto;
    h2{
        margin-bottom: 0;
    }
    .ant-tabs-nav{
        margin-bottom: 5/@px-unit;
    }
    .button_box .label-div-Container{
        float: right;
    }
    .step-footer {
        display: flex;
        justify-content: space-between;
        .step-footer-right {
            display: flex;
        }
    }
    .ant-input-number.labelInput {
        width: 220/@px-unit;
    }
    .manage-grid-unInitIcon {
        color: @warnColorNo18;
    }
    .manage-grid-errorIcon {
        color: @errorColorNo17;
    }
    .manage-grid-successIcon {
        color: @successColorNo19;
    }
    .icon_box {
        font-size: 30/@px-unit;
    }
    .icon_gray{
        color: @disableColorNo7;
    }
    .icon_active{
        color: @linkColorNo20;
    }
    .switch_box{
        height: 32/@px-unit;
        line-height: 32/@px-unit;
    }
    ._Uplink_{
        padding-top: 10/@px-unit;
    }
    .success{
        color: @successColorNo19;
    }
    .fail{
        color: @errorColorNo17;
    }
}
.uplink_modal{
    .ant-input-number.labelInput{
        width: 220/@px-unit !important;
    }
    .label-normal{
        width: 150/@px-unit !important;
    }
}


._NetworkTransmit485_ {
    
    
    
    padding: 16/@px-unit; 
    .label-normal-wrapper .ant-input-number{
        width: 100%;
    }
}


._Onvif_ {
    
    
    
    padding:16/@px-unit;
    background-color: inherit;
    .onvif-type-img{
        width: 42/@px-unit;
        height: 42/@px-unit;
    }
    .portPanel {
        overflow: auto;
       
    }
    .btnOpr{
        display: flex;
        align-items: center;
    }
}
   



._OnvifInfo_ {
    
    
    
    padding:16/@px-unit;
    background-color: inherit;
    max-height: 830/@px-unit;
    overflow-y: auto;
}


._PDAlive_ {
    
    
    
    padding:16/@px-unit;
    .sdd-swtich-contianer{
        text-align: center;
    }
    .tip{
        padding-top: 8/@px-unit;
        color: @disableColorNo7;
    }
}


._Ping_ {
    
    
    
    padding-left: 20/@px-unit; 
    .label-normal-wrapper  {
        .ant-input-number {
                width: 100%;
            }
    }
    
}


._PoEEventStatics_ {
    
    
    
    padding:16/@px-unit;
}


._PoESettings_ {
    
    
    
    padding:16/@px-unit;
    background-color: inherit;
    .ant-input-number{
        width: 100%;
    }
    .headerTitle{
        font-weight: 600;
    }
    .has-error .label-explain{
        word-break: normal;

    }
}