@import "googleapis/OpenSans.css";
@import "googleapis/notosanstc.css";
* {
  scrollbar-width: thin;
  scrollbar-color: #888 rgba(242, 242, 242, 0.7);
}
/* Track */
::-webkit-scrollbar-track {
  background: rgba(242, 242, 242, 0.7);
  border-left: 2px solid #dfdfdf;
  border-right: 2px solid #dfdfdf;
  border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #AAA;
}
input::-ms-reveal,
input::-ms-clear {
  display: none!important;;
}
input[type=password]::-webkit-contacts-auto-fill-button,
input[type=password]::-webkit-credentials-auto-fill-button {
  visibility: hidden!important;
  display: none !important;
  pointer-events: none!important;
  height: 0!important;
  width: 0!important;
  margin: 0!important;
}
input[type=file]{
  width: unset!important
}
#page-wrapper{
	padding: 0 16px;
    background-color: #E9EFF1;
    font-size:0.9rem;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
}
.row {
    margin-left: -8px;
    margin-right: -8px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding:8px 8px;
}
.left-side {
	float: left;
	position: fixed;
}
.content_page {
    position: relative;
    /*width: calc(100vw - 346px);*/
    margin-top:66px;
}
.panel {
	background-color: #fff;
	/*padding: 0 15px;*/
	min-height: 206px;
	border:0px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 2px rgba(193,208,214,.05);
	box-shadow: 0 0 10px #a8bed280;
	margin-bottom: 0;
}
.productname{
	font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-style: normal;
    display: inline;
}
.panel-title{
    font-size: 1.05rem;
    font-weight: 500;
    padding: 16px 16px;
    border-bottom: 1px solid #e7e7e7;
    line-height: normal;
    position: sticky;
    top: 0px;
    background: white;
    z-index: 3;
 }
.form .panel-title{
  z-index: 2;
}
.form-control-rwd-table-div > .panel-title{
  z-index: 0;
}
/* .cd-panel__content .panel-title {
	padding: 16px 0;
} */
.panel-title.dashboard-title{
	border-bottom: 0px;
}
.panel-title-2{
	color: #3E4C5B;
    font-size: 1.05rem;
    font-weight: 400;
	padding:16px 0 4px;
	/*border-bottom: 1px solid #e7e7e7;*/
}
.panel-title .btn-group,.section-title .btn-group{
	margin-left: 8px;
}
/*.traffic-title{
	color: #3E4C5B;
	font-size: 1.05rem;
	font-weight: 500;
}*/
.traffic-list{
	padding: 20px 10px;
}
.traffic-list ul{
	margin:0;
	padding: 0;
}
.traffic-list li {
	list-style: none;
	line-height: 42px;
}
.traffic-list .comment{
	margin: 0 0 0 3%;
    width: 5%;
    display: inline-block;
}
.traffic-list .place-name{
	width: 28%;
	display: inline-block;
	margin: 0 0 0 5%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: middle;
}
.traffic-list .via{
	width: 15%;
	margin-right: 4%;
	line-height: 1.2rem;
	display: inline-block;
	color: #9B9B9B;
    font-weight: 300;
    font-size: 0.8rem;
    text-align: center;
    overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
    vertical-align: middle;
}
@media (max-width: 415px){
	.panel-title{
		padding: 14px;
	}
	.panel-title .btn-group,.section-title .btn-group{
		margin-left: 0px;
		margin:0 auto;
	}
	.panel-title .btn-group .btn,.section-title .btn-group .btn{
		padding: 0 8px;
	}
}
.panel-title .btn-group .btn,.section-title .btn-group .btn{
	margin-right:0;
	margin-bottom: 0;
	color: #497299;
	border-color: #CDDBEE;
	background: #fff;
	font-weight: 500;
}
.panel-title .btn.active, .btn:active,.section-title .btn.active{
	color:#497299;
	background-color: #CDDBEE;
	border-color: #CDDBEE;
	-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
    box-shadow: inset 0 0 0 rgba(0,0,0,0);
}
.panel-title .action i {
	color: #4D4D4D;
	font-size: 20px;
	vertical-align: middle;
	margin-left:10px;
}
.panel-title .action{
	display: inline-block;
	position: absolute;
	right:15px;
	top:15px;
}
.section-title{
	color: #3E4C5B;
	font-weight: 500;
	padding:20px 0;
	font-size:1.05rem;
}
.dashboard-section{
	padding:0 36px 20px;
	/*border-top: 1px solid #f5f5f5;*/
}
.comment {
    color: #9B9B9B;
    font-weight: 300;
    font-size: 0.8rem;
    margin-left: 5px;
}
.usage{
	/*text-align: right;*/
	white-space:nowrap;
}
.usage div{
	min-width: 30px;
}
.usage i {
	/*float: left;*/
	vertical-align: sub;
    font-size: 14px;
    line-height: 18px;
    margin-right:6px;
}
.latency{
	/*display: inline-block;*/
	height: 40px;
	white-space:nowrap;
}
.latency .block{
	display: inline-block;
	/*min-width: 20%;*/
/*	vertical-align: super;*/
}
.action {
	width: fit-content;
}
.action a{
	color: #4A90E2;
	padding: 0 5px;
}
.usage::before,.latency::before{
	content: '';
    display: flex;
    height: 27px;
    right: -8px;
    position: absolute;
    width: 1px;
    top:6px;
}
.latency::before{
	top:12px;
}
/*.usage::before,.latency::before {
	background: rgba(0, 0, 0, .1);
}*/
/* RWD Table */
.rwd-table {
 background: #fff;
 overflow: hidden;
 box-shadow: none;
}
.rwd-table tr:nth-of-type(2n){
  background: #f7f9fa;
}
.table.rwd-table tr td {
	vertical-align: middle;
	border-top:0;
	font-size: .9rem;
}
.rwd-table {
  min-width: 100%;
  font-size: 1rem;
}
.rwd-table th {
  display: none;
}
.rwd-table td {
  display: block;
}
.rwd-table td:before {
  content: attr(data-th) " : ";
  font-weight: 400;
  width: 9.5em;
  min-width: 14.5em;
  display: inline-block;
}
.rwd-table .table-index:before{
	content: attr(data-th) "  ";
	width: 0;
}
.rwd-table th, .rwd-table td {
  text-align: left;
  font-size: 13px !important;
}
.rwd-table th, .rwd-table td:before {
  color: #000;
  font-weight: 400;
}
.table.rwd-table tr td .input--sm{
	display: inline-block;
}
/*.rwd-table td:nth-child(1),.rwd-table td:nth-child(2){
	background-color: #F2F4F5;
}*/
.rwd-table .right-line{
	float: right;
}
.rwd-table .right-line::after{
	content: '';
    display: block;
    height: 27px;
    left: -1px;
    position: absolute;
    width: 1px;
    top:-4px;
}
.table .latency-label{
	color: #9B9B9B;
	font-weight: 300;
	font-size: 0.8rem;
}
.rwd-table .col-xs-4 {
	padding:0;
}
.rwd-table .right-line::after {
	background: rgba(0, 0, 0, .1);
}
.rwd-table td:nth-of-type(1)/*,.rwd-table td:nth-of-type(2)*/{
	/*background-color: #F2F4F5;*/
}
.rwd-table tr:nth-of-type(2n-1){
	background-color: rgba(247,249,250,.2);
}
.rwd-table thead th{
	background: #EDEEEE;
  z-index: 1 !important;
}
.rwd-table td.table-bg {
	background-color: #f9fbfb;
}
.rwd-table .table-index{
	text-align: center;
	margin: 0 10px 0 10px;
}
input[type="checkbox"].show-box{
    text-align: center;
  }
tr.mat-header-row {
  height: initial;
  background: aqua;
}
.map-panel{
	width: 230px;
	min-height: 100px;
	background-color: rgba(255,255,255,.95);
	z-index: 8;
	position:absolute;
	bottom: 20px;
	left: 20px;
	box-shadow: 0 0 10px rgba(168,190,210,.5);
	border-radius: 7px;
	color: #3E4C5B;
}
.map-panel .tab-content ul{
	margin: 0 auto;
    padding: 0;
    width: fit-content;
}
.map-panel .tab-content li{
	list-style: none;
	vertical-align: middle;
	color: #677897;line-height: 26px;
}
.signal-excellent,.signal-unstable,.signal-disconnected{
	width: 10px;
	height: 10px;
	background-color: #5985F9;
	border-radius: 50%;
	display: inline-block;
	margin-right: 8px;
}
.signal-unstable{
	background-color: #FFCC01;
}
.signal-disconnected{
	background-color: #B3B3B3;
}
.map-panel .add-tunnel{
	color: #4A90E2;
	text-align: center;
	font-size: 0.8rem;
	margin-top: 12px;
	padding-top: 12px;
	border-top:solid 1px #E7E7E7;
}
.map-panel .add-tunnel a {
	color: #4A90E2;
}
.map-panel .add-tunnel i {
	margin-right: 5px;
}
.map-panel .signal-number{
	color: #B0B9CA;
	font-weight: 300;
	padding-left: 5px;
}
.map-panel .nav-tabs>li{
	width: 50%;
    text-align: center;
    border-top:0;
}
.map-panel .nav-tabs{
	border-bottom: 0;
}
.map-panel .nav-tabs>li.active>a,
.map-panel .nav-tabs>li.active>a:focus,
.map-panel .nav-tabs>li.active>a:hover{
	border-top:0;
	background-color:transparent;
	border-color:transparent;
}
.map-panel .nav-tabs>li>a{
	border:1px solid #E7E7E7;
	color: #3E4C5B;
	font-weight: 500;
}
.map-panel .nav-tabs>li.active>a{
	border-bottom:transparent;
}
.map-panel .nav-tabs>li>a{
	margin-right: 0;
	border-radius: 7px 0 0 0;
	border-top:0;
}
.map-panel .nav-tabs>li>a:hover{
	border-top:0;
}
.map-panel .nav-tabs>li>a.map-panel-left{
	border-radius: 7px 0 0 0;
	border-left-color: transparent;
}
.map-panel .nav-tabs>li>a.map-panel-right{
	border-radius: 0 7px 0 0;
	border-right-color: transparent;
}
.map-panel .tab-content{
	margin: 14px;
}
.map-panel .map-panel-title{
	margin:10px 0 6px;
	text-align: center;
	font-weight: 500;
}

@media (min-width: 700px) {
  .rwd-table td:before {
    display: none;
  }
 .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: 0.25em 0.5em;
  }
  .rwd-table th:first-child {
    padding: 10px 18px;
  }
  .rwd-table.table>tbody>tr>th{
  	border-top: 0px solid #E7E7E7;
  }
  .rwd-table th:last-child,
  .rwd-table td:last-child {
    padding-right: 0;
  }
   .rwd-table th {
    padding: 0.5rem !important;
  }
}
@media (max-width: 700px) {
	.rwd-table th, .rwd-table td:before{
		vertical-align: top;
		padding-left: 13px;
	}
	.right-line{
   	display: none;
   }
   .usage::before, .latency::before{
   	display: none;
   }
   .rwd-table td:nth-of-type(1), .rwd-table td:nth-of-type(2) {
	    background-color:rgba(0,0,0,0);
	}
	.rwd-table {
		border-collapse: separate;
		border-spacing: 6px 13px;
	}
	.rwd-table thead {
		display: none;
	}
	.rwd-table tr {
		border-top: 1px #eee solid;
	}
	.usage,.latency{
		display: inline-block;
	}
	.action a{
		padding: 0 8px 0 0;
	}
	.rwd-table .col-xs-4 {
		padding: 0 8px 0 0;
	}
	.rwd-table th, .rwd-table td{
		margin:0;
		padding: 2px;
	}
	.rwd-table .table-index{
		/*width: 100%;*/
	}
	.latency .block{
		width: 30%;
	}
	.latency .block:last-child{
		width: 100%;
	}
	.rwd-table .table-index{
		border-bottom: 1px solid #eee;
	}
}
/* All Table width size */
.ss-input {
  width: 50%;
}
.mm-input {
  width: 70%;
}
.xl-input {
  width: 100%;
}
/* [pid="0NAT_ALG"] .form-control-rwd-table-div,
[pid="0NAT_UPnP"] .form-control-rwd-table-div,
[pid="0NAT_forwarding"] .form-control-rwd-table-div,
[pid="0NAT_DMZ"] .form-control-rwd-table-div {
    width: unset;
	width: auto;
} */
/* .form-control-rwd-table-div{
	width:70%;
} */
@media only screen and (min-width: 300px) and (max-width: 1050px) {
  .form-control-rwd-table-div {
    width: 100%;
  }
}
@media (min-width: 1024px){
	#page-wrapper {
	    /*position: inherit;*/
	    margin: 0 0 0 300px;
	    padding: 0 16px;
	    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
	}
	.content_page{
		margin-top: 82px;
	}
}
@media (max-width: 1024px){
	.content_page{
		width:100%;
	}
	.left-side{
		display: none;
	}
	.dashboard-section {
		padding:0 16px 15px;
	}
	.responsive-popup{
		right: 0;
    	width: 300px;
    	box-shadow: 0 0 10px rgba(168,190,210,.5);
	}
	.nav-toolitem.open {
		opacity: 1;
		visibility: initial;
	}
}
.add-btn {
    display: inline-block;
    margin-right: 10px;
    padding: 0 8px;
    margin: 0 auto;
    line-height: 24px;
    color: #00A4ED;
    border: 1px solid #00A4ED;
    box-sizing: border-box;
    border-radius: 3px;
    cursor: pointer;
}
.add-btn  i {
    font-size: 12px;
    margin-right: 5px;
}
/* chart */
/*
svg{
  position:absolute;
  width:100%;
  height:100%;
  visibility:hidden;
}*/
.mainSVG{
  position:absolute;
  width:100%;
  height:100%;
  visibility:hidden;
  /*  top:200px; */
  left:50%;
  transform:translate(-50%, 0%);
  overflow:visible;
}
#boxLabel{
  text-anchor:middle;
  fill:#115F9A;
  font-size:21px;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
  font-family: 'Roboto', sans-serif;
  font-weight:700;
}
.box{
  opacity:0;
}
circle{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.sidebar-wrapper {
    width: 260px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
   }
.link-device-slider{
	width: 85%;
	margin:0 auto;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	padding-bottom: 20px;
	border-top:1px solid #e7e7e7;
}
.link-device-detail{
	width: 85%;
	margin:0 auto;
	padding-bottom: 20px;
	opacity: 0;
	display: none;
	transition: all 0.3s;
	overflow:auto;
}
.link-device-detail:target{
	opacity: 1;
	display: block;
}
.link-device-detail .device-port-status{
	width:95%;
	background-color: #F7F9FA;
	margin:0 auto;
	min-width: 580px;
	/*overflow: auto;*/
}
.link-device-detail .device-port-status .close{
	width: 100%;
	text-align: center;
	border-bottom: 1px solid #e7e7e7;
	float: none;
	font-size:0.95rem;
	font-weight: 300;
	line-height: 1.8rem;
	color:#2A2C2E;
	opacity: 1;
}
.link-device-detail .device-port-status .title{
	font-weight: 500;
	font-size: 1.1rem;
	margin:6px 0 8px 0;
}
.link-device-detail .device-port-status p{
	font-size: 0.9rem;
	margin-bottom: 0;
}
.link-device-detail .device-port-status ul{
	margin: 0;
	padding: 0;
}
.link-device-detail .device-port-status ul li{
	list-style: none;
	display: inline-block;
	color: #9C9C9C;
	margin:6px 16px 8px 0;
	font-weight: 300;
	font-size: 0.9rem;
}
.link-device-detail .device-port-status ul li img{
	vertical-align: baseline;
	margin-right: 8px;
}
.link-device-slider hr{
	border-color: #E7E7E7;
    margin: 0;
    top: -12px;
    position: relative;
}
.link-device{
 	width: 82px;
 	display: inline-block;
 	margin-left: 2%;
	margin-right:2%;
	vertical-align: text-top;
}
.link-device a{
	display: block;
	width: 82px;
    height: 93px;
}
.link-port{
	display: block;
	text-align: center;
	line-height: 2.4em;
}
.out-port{
	width:100%;
	height: 18px;
	color: #9B9B9B;
	font-weight: 300;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
}
.link-device .device-name{
	text-align: center;
	width:100%;
	height: 18px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
}
.link-device-thumbnail{
	width: 82px;
	height: 93px;
	text-align: center;
	border:1px solid #E7E7E7;
	border-radius: 2px;
	box-sizing: border-box;
	padding:4px;
}
.link-device-thumbnail:hover,.link-device-thumbnail:focus{
	border-color: #B0C1D4;
	background-color: #E9F0F3;
}
.link-device .arrow_box2{
	width: 82px !important;
	max-width: 82px;
	min-width: 82px;
	line-height: 16px;
    min-height: 20px;
	font-weight: 300;
	white-space: nowrap;
	margin-top: 12px;
	background-color: #4A90E2;
	z-index: 2;
	text-align: center;
	    /*margin: 0 50%;
    transform: translatex(-50%);*/
}
.link-device .arrow_box2:after{
	border-top-color: #4A90E2;
}
.link-device .arrow_box2 span{
	display: block;
	font-size: 9px;
	margin:0 50%;
	transform: translate(-50%);
	-webkit-transform: scale(0.8) translate(-65%);
	-o-transform: scale(1);
	width: inherit;
}
.thumbnail-img{
	width:100%;
	height: 44px;
}
.thumbnail-img img{
	padding: 2px;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.dashboard-list{
	padding: 4px 22px 22px;
}
.dashboard-list ul{
	margin:0;
	padding: 0;
}
.dashboard-list li {
	list-style: none;
	color: #9B9B9B;
	font-weight: 400;
	font-size: 0.95rem;
	line-height:36px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	display: flex;
	align-items: center;
}
.dashboard-list li i {
	font-size: 18px;
	color: #9F9F9F;
	vertical-align: middle;
	float: right;
	line-height: 36px;
	white-space: nowrap;
}
.dashboard-list .title{
	font-weight: 500;
	color: #000;
	padding-left:5px;
}
.dashboard-list label{
	width: 35%;
	padding-left:2%;
	color: #acacac;
	font-weight: 400;
	margin-bottom: 0;
	min-width: 128px;
}
.dashboard-list .link-status{
	width: 9px;
	height: 9px;
	background-color: #4CCBAB;
	border-radius: 50%;
}
.dashboard-list .value{
	width: 60%;
	color: #333;
	display: flex;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#module {
  width:auto;
  font-size: 14px;
  line-height: 1.5;
}
#module p.collapse[aria-expanded="false"] {
    height: 42px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#module p.collapsing[aria-expanded="false"] {
    height: 42px !important;
}
#module a.collapsed{
	width: 100%;
    display: inline-block;
	text-align: center;
	margin-top:10px;
}
#module a.collapsed:after  {
	font-size: 11px;
	color: #575757;
    /*content: '\25BC		Show More';*/
    content: 'Show More';
    padding-left: 22px;
    background-image: url(../img/ic_angle_down.svg);
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: left;
}
#module a:not(.collapsed):after {
	font-size: 11px;
	width: 85px;
    display: block;
    margin:0 auto;
	text-align: center;
	color: #575757;
	/*content: '\25B2		Show Less';*/
    content: 'Show Less';
    padding-left: 18px;
    background-image: url(../img/ic_angle_up.svg);
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: left;
}
.system-line-bar{
    margin:8px 0 16px;
    background-color: #eeeeee;
    height: 4px;
    border-radius: 4px;
}
.system-info{
    color: #797979;
}
.border-top{
	border-top:1px solid #e7e7e7;
}
.inline-block{
	display: inline-block;
}
.width-15{
	width: 15%;
}
.width-20{
	width: 20%;
}
.ipv4-lan ul{
	margin:0;
	padding: 0;
}
.ipv4-lan li {
	list-style: none;
	padding:0;
	font-size: 0.9rem;
}
.ipv4-lan li span{
	padding: 8px 4px;
}
.ipv4-lan ul .title{
	font-weight: 500;
	color:#000;
	font-size: 1rem;
	margin-bottom: 0;
}
.ipv4-lan li:nth-child(odd){
	padding-right: 2%;
}
.ipv4-lan li:nth-child(even){
	padding-left: 2%;
}
@media(max-width: 1200px) {
	.ipv4-lan li:nth-child(odd){
		padding-right: 0%;
	}
	.ipv4-lan li:nth-child(even){
		padding-left: 0%;
	}
	.ipv4-lan ul .title:nth-child(2){
		display: none;
	}
	.ipv4-lan li {
		line-height: 1.8rem;
	}
}
.table.rwd-table.client-list tr th{
	border-top:0px;
}
.rwd-table.client-list tr td:nth-of-type(1),.rwd-table.security-list tr td:nth-of-type(1) {
    background: inherit;
}
.security-block{
	min-height: 52px;
	vertical-align: middle;
	padding: 12px;
}
.security-block nav{
	display: inline-block;
	vertical-align: top;
}
.security-block .pagination{
	margin:0;
}
.security-block .btn-block{
	display: inline-block;
	float: right;
	width: auto;
	text-align: center;
}
.security-block .btn-block .pagination>li>a,.security-block .btn-block .pagination>li>span{
	color: #333;
}
.SumoSelect .select-all>label, .SumoSelect>.CaptionCont, .SumoSelect>.optWrapper>.options li.opt label{
	font-weight: 400;
	margin-bottom: 0;
}
.security-block .btn-block .pagination > li .SumoSelect>.CaptionCont{
	position: relative;
    border: 1px solid #ddd;
    min-height: 14px;
    background-color: #fff;
    border-radius: 2px;
    margin: 0;
    height: 30px;
    margin-left: -1px;
}
.security-block .btn-block .SumoSelect>.CaptionCont>span{
	line-height: 18px;
}
.security-block .pagination >li>a{
	padding:4px 12px;
}
.security-block .pagination>li:last-child>a, .security-block .pagination>li:last-child>span {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
.security-block .pagination>li:first-child>a,.security-block .pagination>li:first-child>span{
	border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
/*tablw list收合式表格*/
.treegrid-indent {
	width:22px;
	height:20px;
	display: inline-block;
	position: relative;
}
.treegrid-expander {
	width:22px;
	height: 20px;
	display:
	inline-block;
	position:
	relative;
	cursor: pointer;
	margin-right: 5px;
	left: 26px;
    top: 1px;
}
.treegrid-expander-expanded{
	background-image: url(../img/collapse.png);
	vertical-align: sub;
	background-repeat: no-repeat;
	background-position: right bottom;
}
.treegrid-expander-collapsed{
	background-image: url(../img/expand.png);
	vertical-align: sub;
	background-repeat: no-repeat;
	background-position: right bottom;
}
.p1,.p2,.p3,.p4{
	min-width: 57px;
}
.p1:before{
	content: "P1";
	left:18px;
	position:absolute;
    top:6px;
}
.p2:before{
	content: "P2";
	left:18px;
	position:absolute;
    top:6px;
}
.p3:before{
	content: "P3";
	left:18px;
	position:absolute;
    top:6px;
}
.p4:before{
	content: "P4";
	left:18px;
	position:absolute;
    top:6px;
}
.p-2{
	position:relative;
	left:-20px;
	top:1px;
	overflow: hidden;
    text-overflow: clip;
}
.treegrid-table{
	padding-bottom: 20px;
	overflow: auto;
	/*visibility: hidden;*/
	/*margin-left: 10px;
	margin-right: 10px;*/
}
/*.treegrid-table table,.treegrid-table:hover,
.treegrid-table:focus {
	visibility: visible;
}*/
/*.dark-theme .treegrid-table .tree tr.first-device:nth-of-type(2n+1){
	background-color: rgba(247,249,250,.2);
}*/
.treegrid-table .first-device{
	background-color: #F7F9FA;
}
.treegrid-table th{
	border-top:1px solid #e5e5e5;
}
.treegrid-table table {
  width: 100%;
  min-width: 550px;
  margin: 0 auto;
  border-collapse:collapse;
  /*font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  color:#777;
}
.treegrid-table th,.treegrid-table td {
  text-align:left;
  padding:5px 10px;
	border-bottom:1px solid #e5e5e5;
	overflow: hidden;
    /*text-overflow: ellipsis;*/
    white-space: nowrap;
}
/*.treegrid-table th:first-child,.treegrid-table td:first-child{
	    padding-left: 40px;
}*/
.treegrid-table tr{
	line-height: 30px;
}
.treegrid-table dt {
  color:#444;
  font-weight:700;
}
.treegrid-table th {
  color:#444;
}
.treegrid-table img {
  max-width:100%;
}
/*port status*/
.port-black{
	/*background-color: #CCCAC8;*/
	/*margin-left: 4px;*/
	/*border:1px solid #4D4D4D;
	border-radius: 3px;*/
	width: auto;
	position: relative;
	text-align: center;
	vertical-align:middle;
	display: inline-block;
	padding:2px 3px;
	color:#9C9C9C;
	/*top:50%;
    transform:translateY(-50%);*/
    float: left;
    font-size: 0.9rem;
    margin-top:15px;
}
.event .number{
	display: block;
    position: absolute;
    top: -18px;
    width: inherit;
    font-size: 10px;
    -webkit-transform: scale(0.75);
    -o-transform: scale(1); /* 針對能識別-webkit的opera browser設置 */
}
.odd .number{
	display: block;
    position: absolute;
    top: 14px;
    width: inherit;
    font-size: 10px;
    -webkit-transform: scale(0.75);
    -o-transform: scale(1); /* 針對能識別-webkit的opera browser設置 */
}
/*.odd .number.border{
	border: 1px solid;
    border-radius: 2px;
    line-height: 14px;
    top: 31px;
}
.event .number.border{
	border: 1px solid;
    border-radius: 2px;
    line-height: 14px;
    top: -22px;
}*/
.odd{
	display: block;
}
.odd .port{
	/*background-image: url(../img/port.svg);*/
}
/*.odd .sfp{
	background-image: url(images/sfp_odd.svg);
}
.odd .port-1g{
	background-image: url(images/port_1g_odd.svg);
}
.odd .port-100m{
	background-image: url(images/port_100m_odd.svg);
}
.odd .port-client{
	background-image: url(images/client_odd.svg);
}
.odd .port-host{
	background-image: url(images/host_odd.svg);
}
.odd .port-binding{
	background-image: url(images/binding_odd.svg);
}
.odd .port-server{
	background-image: url(images/server_odd.svg);
}*/
.port-black .odd .icon{
	/*top: calc(50% - 10px);*/
}
.port-black .event .port{
	display: block;
	line-height: 15px;
}
.port-black .odd .port{
	line-height: 22px;
}
.port {
	position: relative;
	width: 15px;
	height: 14px;
	background-image: url(../img/port.svg);
	background-repeat: no-repeat;
	background-size: cover;
	float: left;
	margin:2px 1px;
	text-align: center;
	vertical-align:middle;
	/*line-height: 27px;*/
}
.port-in-use{
	background-image: url(../img/port-in-use.svg);
}
.port-black .icon,.btn-group .icon {
	padding: 0;
	width: 13px;
	height: 13px;
	/*background: url(images/status-icon-.png) no-repeat;*/
	display: block;
	/*background-size: 32px 142px;*/
	margin:0 auto;
	/*top: calc(50% - 7px);*/
    position: relative;
}
/*.btn-group .icon {
	margin:0 8px 0 0;
	display: inline-block;
	top:4px;
}*/
.icon.icon-uplink{
	background: url(../img/uplink.svg) no-repeat;
	background-position: center 2px;
}
.icon.icon-download{
	background: url(../img/downlink.svg) no-repeat;
	background-position: center 2px;
}
.icon.icon-shutdown{
	background: url(../img/shutdown.svg) no-repeat;
	background-position: 2px 3px;
    background-size: 9px;
}
.connect{
	color: #00CA9D;
}
.disconnect{
	color: #EF5568;
}
@media (max-width: 465px) {
	.security-block .pagination{
		margin-top: 16px;
	}
}
.wifi-network{
	display: flex;
	flex-direction: column;
	width: calc(100% - 220px);
	justify-content: center;
}
.wifi-network .data{
	display:inline-flex;
	align-items: center;
	white-space:nowrap;
}
.wifi-network .data2{
	display:inline-flex;
	align-items: center;
	white-space:nowrap;
}
.wifi-network .data-g{
	font-size: 1.3rem;
}
.network-green,.network-orange{
	width: 11px;
	height: 11px;
	display: inline-block;
	border-radius: 50%;
	margin-right: 8px;
	background: #a6edc1; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #a6edc1 0%, #00ca9d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #a6edc1 0%,#00ca9d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #a6edc1 0%,#00ca9d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6edc1', endColorstr='#00ca9d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.network-orange{
	background: #fad961; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #fad961 0%, #f76b1c 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #fad961 0%,#f76b1c 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #fad961 0%,#f76b1c 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fad961', endColorstr='#f76b1c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.advanced-btn.active {
    color: #00CA9D;
    border-color: #00CA9D;
}
.advanced-btn.active:before {
	font-family: 'icomoon' !important;
    content: "\e94b";
    margin-right: 6px;
}
.advanced-btn i {
    vertical-align: text-bottom;
    font-size: 16px;
    margin-right: 5px;
}
.advanced-btn {
    display: inline-block;
    float: right;
    /* margin-right: 10px; */
    padding: 0 8px;
    /* margin: 4px 0 20px; */
    line-height: 24px;
    color: #999;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 3px;
    cursor: pointer;
}
.advanced-btn a{
	color: #999;
}
.advanced-btn.active a{
	color: #00CA9D;
}
.advanced-btn:before {
    content: "";
}
/* 3910 */
.router-3910 .device-led{
	width: 2.2%;
}
/* --------------------------------
Slide In Panel - by CodyHouse.co
-------------------------------- */
.cd-main-content {
  text-align: center;
}
.cd-main-content h5 {
  font-size: 2rem;
  color: #64788c;
  padding: 4em 0;
}
.cd-btn {
  position: relative;
  display: inline-block;
  color: #00A4ED;
  white-space:nowrap;
  -webkit-transition: -webkit-box-shadow 0.2s;
  transition: -webkit-box-shadow 0.2s;
  transition: box-shadow 0.2s;
  transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
  /* padding: 5px 8px; */
  /* border: 1px red solid; */
  margin: 0 13px 0 0;
}
/*.cd-btn:hover {
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}*/
@media only screen and (min-width: 1170px) {
  .cd-main-content h1 {
    font-size: 3.2rem;
  }
}
.cd-panel {
  position: fixed;
  top: 157px;
  /*top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.6s;
  transition: visibility 0s 0.6s;*/
}
@media (max-width: 1024px) {
	.cd-panel {
		top: 147px;
	}
}
.cd-panel::after {
  /* overlay layer */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  -webkit-transition: background 0.3s 0.3s;
  transition: background 0.3s 0.3s;
}
.cd-panel.cd-panel--is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
  z-index: 3;
}
.cd-panel.cd-panel--is-visible::after {
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: background 0.3s 0s;
  transition: background 0.3s 0s;
}
.cd-panel__header {
  position: fixed;
  /*top:0;*/
  width: 90%;
  height: 51px;
  max-width: 450px;
  line-height: 46px;
  padding-left: 16px;
  background: rgba(255, 255, 255, 0.96);
  border-left: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  z-index: 2;
 /* -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);*/
  -webkit-transition: -webkit-transform 0.3s 0s;
  transition: -webkit-transform 0.3s 0s;
  transition: transform 0.3s 0s;
  transition: transform 0.3s 0s, -webkit-transform 0.3s 0s;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
.full-screen .cd-panel__header {
  border-left: none;
}
.cd-panel__header h1 {
  /*color: #89ba2c;*/
  font-size: 1.1rem;
  margin:0;
  line-height: 53px;
  /*padding-left: 5%;*/
}
.cd-panel--from-right .cd-panel__header {
  right: 0;
}
.cd-panel--from-left .cd-panel__header {
  left: 0;
}
.cd-panel--is-visible .cd-panel__header {
 right: calc(0px + 16px);
  -webkit-transition: -webkit-transform 0.3s 0.3s;
  transition: -webkit-transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
  -webkit-transform: translateX(0px);
      -ms-transform: translateX(0px);
          transform: translateX(0px);
}
@media only screen and (min-width: 768px) {
  .cd-panel__header {
    width: 70%;
    max-width: 500px;
  }
}
@media only screen and (min-width: 1200px) {
  .cd-panel__header {
    width: 40%;
    max-width: 500px;
  }
}
.cd-panel__close {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 55px;
  /* image replacement */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
.cd-panel__close::before, .cd-panel__close::after {
  /* close icon created in CSS */
  content: '';
  position: absolute;
  top: 24px;
  left: 20px;
  height: 1px;
  width: 16px;
  background-color: #424f5c;
  /* this fixes a bug where pseudo elements are slighty off position */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.cd-panel__close::before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.cd-panel__close::after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.cd-panel__close:hover {
  background-color: #424f5c;
}
.cd-panel__close:hover::before, .cd-panel__close:hover::after {
  background-color: #ffffff;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.cd-panel__close:hover::before {
  -webkit-transform: rotate(220deg);
      -ms-transform: rotate(220deg);
          transform: rotate(220deg);
}
.cd-panel__close:hover::after {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}
.cd-panel--is-visible .cd-panel__close::before {
  -webkit-animation: cd-close-1 0.6s 0.3s;
          animation: cd-close-1 0.6s 0.3s;
}
.cd-panel--is-visible .cd-panel__close::after {
  -webkit-animation: cd-close-2 0.6s 0.3s;
          animation: cd-close-2 0.6s 0.3s;
}
@-webkit-keyframes cd-close-1 {
  0%, 50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}
@keyframes cd-close-1 {
  0%, 50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}
@-webkit-keyframes cd-close-2 {
  0%, 50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}
@keyframes cd-close-2 {
  0%, 50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}
.cd-panel__container {
  position: fixed;
  width: 90%;
  max-width: 450px;
  border-left:1px solid #e7e7e7;
  height: calc(100vh - 174px);
  /*top: 0;*/
  background: #fff;
  z-index: 1;
  -webkit-transition: -webkit-transform 0.3s 0.3s;
  transition: -webkit-transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
}
@media only screen and (max-width: 1200px) {
	/*  .cd-panel__container{
		height: calc(100vh - 199px);
	}*/
}
.cd-panel--from-right .cd-panel__container {
  right:0;
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}
.cd-panel--from-left .cd-panel__container {
  left: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}
.cd-panel--is-visible .cd-panel__container {
	right: calc(0px + 16px);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
          overflow: auto;
}
.drayui-div-tabs + .page-tab-content .cd-panel,
.drayui-div-tabs + .page-tab-content .cd-panel.cd-panel--is-visible {
  margin-top: 46px;
}
.drayui-div-tabs + .page-tab-content .cd-panel__content {
  height: calc(100vh - 310px);
}
.drayui-div-tabs + .page-tab-content .cd-panel__container,
.drayui-div-tabs + .page-tab-content .cd-panel--is-visible .cd-panel__container {
  height: calc(100vh - 189px);
}
.form-generic.edit-mode{
	width: calc(100vw - 793px);
	overflow: auto;
	min-height: calc(100vh - 173px);
}
@media only screen and (min-width: 768px) {
  .cd-panel__container {
    width: 70%;
    max-width: 500px;
  }
  .form-generic.edit-mode {
	width: calc(100vw - 55%);
  }
}
@media only screen and (min-width: 1200px) {
  .cd-panel__container {
    width: 40%;
    max-width: 500px;
  }
  .form-generic.edit-mode {
	width: calc(100vw - 40%);
  }
}
.cd-panel__content {
	position: absolute;
    top: 48px;
    width: 100%;
    height: calc(100vh - 286px);
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 10px;
    padding-bottom: 10px;
    scroll-snap-type: y;
}
.cd-panel__content p {
  /*font-size: 1.4rem;*/
  /* color: #424f5c; */
  /*line-height: 1.4;*/
  /* margin: 2em 0; */
  padding: 2em 0;
}
.cd-panel__content p:first-of-type {
  margin-top: 0;
}
@media only screen and (min-width: 768px) {
  .cd-panel__content p {
    /*font-size: 1.6rem;
    line-height: 1.6;*/
  }
}
method-form-fillform-editor .detail-block {
    /* border-top: 1px solid #e7e7e7; */
    display: flow-root;
    /* padding: 0 20px 0 25px; */
    /* min-height: 600px; */
    margin-top: 1px;
    /*margin-right: -8px;*/
    /* max-height: 750px; */
    /* overflow: auto; */
}
method-form-fillform-editor .detail-block .configuration.btn-group textarea
{
    width: 100%;
    max-width: 100%;
}
/* method-form-fillform-editor .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100%;
} */
/* method-form-fillform-editor .detail-block span:not(.text){
	width: 36px;
	position: absolute;
	right: 8px;
} */
/* method-date-component .mat-form-field-wrapper {
  display: inline-block;
    float: right;
    border: 1px solid #ddd;
} */
method-form-fillform-editor .detail-block label,
method-form-fillform-editor .detail-block span:not(.text),
method-form-fillform-editor .detail-block .switch-block span,
method-form-fillform-editor .detail-block .group-block span {
    margin-bottom: 0;
    font-size: 13px;
}
method-form-fillform-editor .switch-block .switch {
    float: right;
    margin:0;
    justify-content: end;
    display: flex;
    flex: inherit;
    align-items: center;
    right: 0;
    margin-right: 6px;
}
method-form-fillform-editor .full-screen-detail-tab .switch-block .switch{
  float: initial;
  display: inline-block;
}
method-form-fillform-editor .detail-tab ul{
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}
method-form-fillform-editor .full-screen-detail-tab ul{
  display: flex;
}
method-form-fillform-editor .detail-tab .nav-tabs{
	border-bottom: #dee2e6 1px solid;
}
method-form-fillform-editor .detail-tab .tab-container{
	border-radius: 0;
	margin-top:16px;
}
method-form-fillform-editor .detail-tab ul li:not(.dropdown-header){
  /*display: table-cell;*/
  /* display: inline-block; */
  text-align: center;
}
method-form-fillform-editor .detail-tab .tab-container.nav-tabs .nav-link{
	/*padding: 0.7rem 1.2rem;*/
}
method-form-fillform-editor .detail-tab .tab-container.nav-tabs .nav-link.active{
border: #dee2e6 1px solid;
    /*border-bottom: transparent;*/
    border-color: #dee2e6 #dee2e6 #fff;
}
method-form-fillform-editor .detail-tab .input--sm{
  /* display: flex; */
  align-items: center;
  line-height: 34px;
}
method-form-fillform-editor .detail-tab .input--sm.mtu.mtu{
	align-items: flex-start;
}
/* method-form-fillform-editor .detail-tab input{
  width: auto;
  display: flex;
  flex:1;
  right: 0;
  position: absolute;
} */
.detail-tab app-method-text input, .detail-tab app-method-text-license-status-light .light-group, .detail-tab switch{
  float: right;
}
/* .detail-tab app-method-text-password input {
} */
/* .detail-tab app-method-text-suggestions input {
} */
/* app-method-form-fillform-elements .suggestions-list{
  left: 240px !important;
  right: initial !important;
} */
method-form-fillform-editor .full-screen-detail-tab input{
  position:static;
  flex: none;
}
method-form-fillform-editor input[type="checkbox"]
{
  display: inline-block!important;
  position: initial!important;
}
method-form-fillform-editor .app-method,
method-form-fillform-editor,
app-method-field-elements,
app-method-form-fillform-elements,
.entity-content {
	width: 100%;
	float: left;
}
.cd-panel--is-visible .panel-title {
  margin-top: 30px;
}
/* .entity-content.show {
  margin-bottom: 20px;
} */
.full-screen-detail-tab app-method-text-suggestions.app-method {
  display: flex;
  float: left;
  width: unset;
}
.cd-panel__content .suggestions-input {
  float: right;
}
method-form-fillform-editor {
  z-index: 101;
}
app-method-multiple-table-view-editor {
  z-index: 102;
}
.multiple-table-view-tab-pre-div {
  /* height: calc( 100vh - 389px ); */
  max-width: 100%;
  overflow: auto;
}
.multiple-table-view-tab-pre-div.show-alert {
  height: calc( 100vh - 458px );
  max-width: 100%;
  overflow: auto;
}
.tree-table-element-detail .multiple-table-view-tab-pre-div {
  height: auto;
}
app-method-multiple-search-option .multiselect-dropdown ul {
  display: inline-block!important;
}
app-method-multiple-search-option .multiselect-dropdown ul li{
  line-height: 10px;
}
.dropdown-item.active, .dropdown-item:active {
	color: #00A4ED;
    background-color: #fafafa;
}
.panel-heading{
	border-bottom: 1px solid #E7E7E7;
	margin-right: -20px;
}
.panel-heading h5{
	font-size: 1.1rem;
	line-height: 46px;
	padding-right: 20px;
}
a.accordion-toggle{
	width:inherit;
	display: flex;
	font-size: .95rem;
}
a.accordion-toggle:hover{
	cursor: pointer;
}
.panel-heading .accordion-toggle:after {
	font-family: 'icomoon' !important;
    content: "\e926";
    position: absolute;
    right: 0;
    font-size: 14px;
}
.panel-heading .accordion-toggle.collapsed:after {
    content: "\e923";
}
.SumoSelect>.optWrapper>.options li.opt{
	display: block;
	text-align: left;
}
.SumoSelect{
	/*display: block!important;*/
}
label.switch{
	/*margin-bottom: 0;
	display: inline-block;
	position: absolute;
    top: 50%;
    transform: translateY(-50%);*/
    /*transform: translateY(20%);*/
}
.Add-block a{
	color: #00A4ED;
}
.Add-block a:before {
    content: "＋";
}
.connect{
	color: #00CA9D;
}
.disconnect{
	color: #ccc;
}
.btn-group .btn, .section-title .btn-group .btn, .setup-module .btn-group .btn, .section-title .btn-group .btn {
    margin-right: 0;
    margin-bottom: 0;
    border-color: #ccc;
    background: #fff;
    font-weight: 400;
}
.btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn.active, .btn:active, .section-title .btn.active, .setup-module .btn.active, .btn:active, .section-title .btn.active {
    color: #fff!important;
    background-color: #00CA9D;
    border-color: #00CA9D;
    -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
    box-shadow: inset 0 0 0 rgba(0,0,0,0);
}
.menu-focuse {
    color: #EF5568!important;
}
.mode-area .radio{
	display: flex;
	align-items: center;
	margin:0 16px;
}
.mode-label{
	margin-left: 16px;
	width: 100px;
	vertical-align: text-bottom;
}
.mode-area .checkmark{
	top: 40%;
	transform: translateY(-50%);
}
.mode-area img{
    width: 100vw;
    max-width: 650px;
    min-width: 100px;
    cursor: auto;
}
@media (max-width: 768px){
	.mode-area .radio{
		flex-direction: column;
	}
	.mode-area img{
		width: 80vw!important;
	}
}
.detail-tab .tab-container.nav-tabs .nav-link{
	/*border-bottom: #dee2e6 1px solid;*/
}
.detail-tab .tab-container.nav-tabs .nav-link.active{
	/*border-bottom:#fff;*/
	box-shadow: inset 0 -1px 0 #fff;
	color: #495057;
}
.detail-tab .nav-tabs{
	/*border-bottom:0;*/
}
.switch-block{
	width: 100%;
	max-width: 100%;
	line-height: 38px;
	/* display: flex; */
	/* align-items: center; */
	flex-direction: row;
}
/* .switch-block :nth-child(n+2) {
	margin-top: 20px;
} */
.select-group .sod_select{
	border-radius: 0;
	margin-left:-1px!important;
}
.select-group .sod_select:nth-child(2){
	border-radius: 2px 0 0 2px;
}
.select-group .sod_select:last-child{
	border-radius: 0 2px 2px 0;
}
.range-value {
    color: #3F3F3F;
    line-height: 16px;
    display: block;
}
.bottom-area {
    position: fixed;
    width: calc(100% - 292px);
    height: 66px;
    bottom: 16px;
    left: 276px;
    margin: 0;
    background: #fff;
    padding: 0;
    z-index: 3;
    border-radius: 0 0 5px 5px;
}
.bottom-area.deatil{
	left: 0;
	width: 100%;
	bottom: 0;
}
.panel.tab-panel.fillform{
	position: relative;
	height: calc(100vh - 173px);
	overflow-y: auto;
	padding-bottom: 60px;
}
[pid="0PHYSICAL_INTERFACE"] .panel.tab-panel.fillform {
  overflow-y: hidden;
}
[pid="0PHYSICAL_INTERFACE"] .panel.tab-panel .form {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
/* The  checkbox is offset incorrectly in the right panel of the schedule */
[dt-uat-name="0CONFIG_SCHEDULE@Add_Every"] .chk-container {
  text-align: right;
  width: 50%;
  float: right;
}
[pid="0PRIVILEGE"] .panel.tab-panel.generic {
	position: relative;
	height: calc(100vh - 174px);
	overflow-y: auto;
	padding-bottom: 60px;
}
.panel.tab-panel.generic {
  position: relative;
  height: calc(100vh - 174px);
  overflow-y: auto;
  padding-bottom: 0;
}
.tab-panel.hide-button-bar{
	height: calc(100vh - 140px);
}
.drayui-div-tabs + .page-tab-content .tab-panel.show-button-bar{
	height: calc(100vh - 241px);
}
.outer.bottom-area.width{
	width: calc(100% - 32px);
	left:16px;
}
@media (max-width: 1024px){
	.bottom-area {
	    width: calc(100% - 32px);
	    left: 16px;
	}
	.tab-panel{
		height: calc(100vh - 230px);
	}
}
.note{
	margin-top: 8px;
	color: #848484;
	font-weight: 300;
	font-size: 13px;
}
.note .info-note-icon{
	color: #2bacfd;
}
.link-dot,.unlink-dot{
	width: 9px;
	height: 9px;
	background: #00CA9D;
	border-radius: 50%;
	display: inline-block;
	margin-right: 6px;
}
.unlink-dot{
	background: #9B9B9B;
}
/*table*/
.model__table {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    line-height: 26px;
}
.model__table table {
    border-collapse: separate;
    border-spacing: 0;
    border: none;
}
.model__table td,.model__table th {
    margin: 0;
    border: none;
    white-space: nowrap;
    padding: 4px 16px;
    /*border-right: 1px solid #d8dcde;*/
    z-index: 1;
    font-weight: 400;
}
.model__table .model_name {
    width: 150px;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    top: auto;
    margin-top: -1px;
    background: #fff;
    z-index: 2;
}
.model__table tr:nth-child(even) {
    background-color: #F7F9FA;
}
.model__table td:first-child{
	/*border-right: 1px solid #d8dcde;*/
	background: #D9E1E5;
}
.model__table th{
	background: #EDEEEE;	/*border-top: 1px solid #d8dcde;*/
}
table label.switch{
	position: relative;
	transform: translateY(25%);
}
.otherlink a{
	color: #00A4ED;
}
.show-box.action{
	background:#09C199;
	border: 1px solid#08B791;
	width: 15px;
}
.action.slider{
	background-color: #09C199;
}
.action.slider::before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}
/*input:checked + .action.slider {
    background-color:
    #ccc;
}
.switch .action.slider::before{
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 2px;
	bottom: 2px;
	background-color:
	white;
	-webkit-transition: .4s;
	transition: .4s;
}*/
/*.icon.icon-group{
	background-position: -1px -32px;
}
.icon.icon-error{
	background-position: -1px -48px;
}
.icon.icon-disabled{
	background-position: -1px -64px;
}
.icon.icon-locked{
	background-position: -1px -80px;
}
.icon.icon-unlocked{
	background-position: -1px -96px;
}
.icon.icon-unauthorized{
	background-position: -1px -112px;
}
.icon.icon-authorized{
	background-position: -1px -128px;
}*/
/*.mCustomScrollbar {
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
}
.sidebar-content {
    max-height: calc(100% - 30px);
    height: calc(100% - 30px);
    overflow-y: scroll;
    position: relative;
}
.sidebar-content.desktop {
    overflow-y: hidden;
}
.mCustomScrollBox {
    position: relative;
    overflow: hidden;
    height: 100%;
    max-width: 100%;
    outline: 0;
    direction: ltr;
}
}
.mCSB_container {
    overflow: hidden;
    width: auto;
    height: auto;
}*/
.Refresh-block {
    /* position: absolute; */
    /* right: 0;
    top: 0;
    clear: both; */
}
.Refresh-block a{
	color: #00A4ED;
}
method-form-fillform-editor .detail-block app-method-textarea .configuration.btn-group{
  padding: 0 10px;
}
method-form-fillform-editor .detail-block app-method-textarea .configuration.btn-group,
method-form-fillform-editor .detail-block app-method-textarea .configuration.btn-group textarea{
  width: 100%;
	max-width: 100%;
	border-color: #d8d8d8;
  border-radius: 3px;
}
method-form-fillform-editor .detail-block app-method-textarea .configuration.btn-group,
method-form-fillform-editor .detail-block app-method-textarea .configuration.btn-group textarea:focus {
	border-color: #999;
	outline: none;
}
method-form-fillform-editor .detail-block app-method-radio  > label,
method-form-fillform-editor .detail-block app-method-select > label,
method-form-fillform-editor .detail-block app-method-related-checkbox > div > label{
	display: inline-block;
	vertical-align: sub;
}
.detail-tab.full-screen-detail-tab app-method-text input, .full-screen-detail-tab app-method-text-license-status-light .light-group, .full-screen-detail-tab switch{
  float: initial;
}
method-form-fillform-editor .detail-block .full-screen-detail-tab app-method-radio > .configuration.btn-group,
method-form-fillform-editor .detail-block .full-screen-detail-tab app-method-select > .configuration.btn-group,
method-form-fillform-editor .detail-block .full-screen-detail-tab app-method-related-checkbox > div > .configuration.btn-group{
	float: initial;
	margin-right: 8px;
}
method-form-fillform-editor .detail-block app-method-radio > .configuration.btn-group,
method-form-fillform-editor .detail-block app-method-select > .configuration.btn-group,
method-form-fillform-editor .detail-block app-method-related-checkbox > div > .configuration.btn-group{
	float: right;
	margin-right: 8px;
}
method-form-fillform-editor .detail-block .bootstrap-select .dropdown-menu li{
	width: 100%;
}
method-form-fillform-editor .detail-block .bootstrap-select .dropdown-menu li a span.text {
    display: contents;
}
method-form-fillform-editor .detail-block .bootstrap-select .dropdown-menu li a {
    text-align: left;
    outline: none;
}
method-form-fillform-editor .detail-block .dropdown-item.active span,
method-form-fillform-editor .detail-block .dropdown-item:active span,
method-form-fillform-editor .detail-block .dropdown-item.active,
method-form-fillform-editor .detail-block .dropdown-item:active {
	color: #00A4ED;
	font-weight: 500;
    text-decoration: none;
    background-color: #fafafa;
}
method-form-fillform-editor .detail-block .bootstrap-select .dropdown-menu li a:hover {
	color: #00A4ED!important;
    background-color: #fafafa;
}
method-form-fillform-editor .detail-tab ul li:not(.dropdown-header):hover {
    color: #00A4ED!important;
    background-color: #fafafa;
}
method-form-fillform-editor .detail-block .bootstrap-select .dropdown-menu li a span.text:hover {
	color: #00A4ED!important;
}
method-form-fillform-editor .form-control-rwd-table-div {
    width: 100%;
    margin-right: 8px;
}
method-form-fillform-editor app-method-tab table{
	/* display: none; */
}
method-form-fillform-editor .detail-block app-method-tab td span{
    width: unset;
    position: static;
    right: auto;
    top: auto;
}
method-form-fillform-editor .detail-tab table.input--sm{
	display: table;
}
method-form-fillform-editor app-method-tab.app-method {
    width: 100%;
    display: inline-block;
}
method-form-fillform-editor app-method-tab .table-pre-bar-theme1 {
    display: inline-block!important;
    width: 100%;
    padding: 0;
	margin: 0;
	height: 36px;
    margin-bottom: -13px!important;
}
app-method-tab > div > span > ul{
	display: inline;
  padding-left: 10px;
}
app-method-tab > div > span > ul > li{
	display: inline;
  font-size: 12px;
  color: gray;
}
app-method-tab > div > span > ul > li > div{
	display: inline;
}
method-form-fillform-editor app-method-tab .table-pre-bar-theme1 > span:first-child{
	float: left;
    padding: 0;
    left: 3px;
    flex: unset;
    top: 3px;
    min-width: 50px;
}
method-form-fillform-editor app-method-tab .table-pre-bar-theme1 > span:last-child{
	float: right;
    padding: 0;
    right: 3px;
    flex: unset;
    top: 3px;
	min-width: 50%;
	text-align: right;
}
method-form-fillform-editor .full-screen-detail-tab app-method-tab .table-pre-bar-theme1 > span:last-child{
  min-width: auto;
}
method-form-fillform-editor app-method-text span.u-mr-8{
	min-width: 50%;
	justify-content: flex-end;
  text-align: right !important;
  position: absolute !important;
  right: 0 !important;
}
method-form-fillform-editor .full-screen-detail-tab app-method-text span.u-mr-8{
  text-align: left !important;
  position: initial !important;
}
/* method-form-fillform-editor .form-lable {
	min-width: 220px;
} */
.com-inline-block label.btn {
	border-radius: 0!important;
}
.com-inline-block:first-child label.btn {
	border-top-left-radius: 2px!important;
	border-bottom-left-radius: 2px!important;
	border-color: #00CA9D;
    color: #00CA9D;
}
.com-inline-block:last-child label.btn {
	border-top-right-radius: 2px!important;
	border-bottom-right-radius: 2px!important;
	border-color: #00CA9D;
    color: #00CA9D;
}
app-method-textarea .led-status-green, app-method-text .led-status-green{
	display: inline-block;
    width: 9px;
    height: 9px;
    background-color: #4CCBAB;
    border-radius: 50%;
}
app-method-textarea .led-status-red, app-method-text .led-status-red{
	display: inline-block;
    width: 9px;
    height: 9px;
    background-color: #cb4c4c;
    border-radius: 50%;
}
.move-number-out {
	opacity: 0;
	margin-top: -18px;
	animation: moveNumberOut 1.5s;
}
@keyframes moveNumberOut {
    0% {
        margin-top: 0px;
        opacity: 1;
    }
    30% {
        margin-top: -18px;
        opacity: 0.2;
    }
    100% {
        margin-top: -18px;
		opacity: 0;
    }
}
.form app-method-form-fillform-elements app-method-field-elements .device-bg {
  line-height: normal;
}
.form app-method-form-fillform-elements app-method-field-elements {
	line-height: 34px;
  vertical-align: middle;
}
.form app-method-form-fillform-elements app-method-field-elements .device-bg {
  line-height: normal;
}
.width-percent-4 app-method-form-fillform app-method-field-elements {
  padding: 0;
}
method-form-fillform-editor app-method-field-elements {
  padding: 0;
}
table app-method-field-elements {
  padding: 0;
}
.doc-mode .panel.tab-panel {
  padding: 0 26px;
}
app-method-field-storage .text, app-method-title .text {
  color: #3E4C5B;
  font-size: 1.05rem;
  font-weight: 500;
  padding: 20px 0 5px 16px;
}
.modal-dialog app-method-title .text {
    font-size: 24px;
    font-weight: initial;
    height: 40px;
    width: 60%;
    text-align: center;
    margin: 0 auto;
    padding: initial;
}
.modal-dialog app-method-text .text {
  color: black;
}
method-form-fillform-editor app-method-title .text {
  width: 100%;
  text-align: left;
  margin: 0 0 0 0;
  padding: 16px 0 0 16px;
}
method-form-fillform-editor app-method-title .text::after{
	display: none;
}
[pid="0DSL_IFNO"] [dt-ele="ADSL_Customer_Priority"] .form-lable,
[pid="0DSL_IFNO"] [dt-ele="ADSL_Customer_Tag"] .form-lable,
[pid="0DSL_IFNO"] [dt-ele="VDSL2_Customer_Tag"] .form-lable,
[pid="0DSL_IFNO"] [dt-ele="VDSL2_Customer_Priority"] .form-lable,
[pid="0DSL_IFNO"] [dt-ele="VDSL2_Service_Tag"] .form-lable,
[pid="0DSL_IFNO"] [dt-ele="VDSL2_Service_Priority"] .form-lable,
[pid="0DSL_IFNO"] [dt-ele="ATM_QoS"] .form-lable,
[pid="0DSL_IFNO"] [dt-ele="PCR"] .form-lable,
[pid="0DSL_IFNO"] [dt-ele="SCR"] .form-lable,
[pid="0DSL_IFNO"] [dt-ele="MBS"] .form-lable
{
    padding-left: 32px;
}
.sub-title {
    color: #bbb!important;
    margin-left: 6px;
}
/* #TR_069 [dt-ele="Event_Code"] {
  position: absolute;
  left: 343px;
  top: 21px;
  z-index: 9999;
}
#TR_069 [dt-ele="Event_Code"]>label {
  min-width: 120px;
  text-align: right;
  vertical-align: baseline;
  padding-right: 6px;
}
#TR_069 [dt-ele="Event_Code"] .dropdown {
  width: 170px!important;
} */
#TR_069 [dt-ele="Last_Inform_Response_Time"] label {
  margin-left: 225px;
  color: #9B9B9B;
  font-weight: 300;
  font-size: 13px;
}
#TR_069 [dt-ele="Min_Keep_Alive_Period_Sec"] {
  position: absolute;
  top: -70px;
  left: 360px;
}
#TR_069 [dt-ele="Min_Keep_Alive_Period_Sec"] .form label{
    color: #9B9B9B;
    font-weight: 300;
    font-size: 13px;
    margin-left: 5px;
    vertical-align: middle;
}
#TR_069 [dt-ele="Max_Keep_Alive_Period_Sec"] {
    position: absolute;
    top: -35px;
    left: 360px;
}
#TR_069 [dt-ele="Max_Keep_Alive_Period_Sec"] .form label{
    color: #9B9B9B;
    font-weight: 300;
    font-size: 13px;
    margin-left: 5px;
    vertical-align: middle;
}
#TR_069 [dt-ele="Periodic_Time_Sec"] {
    position: absolute;
    top: -34px;
    left: 360px;
}
#TR_069 [dt-ele="Periodic_Time_Sec"] .form label{
    color: #9B9B9B;
    font-weight: 300;
    font-size: 13px;
    margin-left: 5px;
    vertical-align: middle;
}
#TR_069 .entity-content.mag-pad-0 {
    display: none;
}
#TR_069 [dt-ele="Tr069_Note"]{
    color: #848484;
    font-size: 13px;
}
/* #TR_069 [dt-ele="STUN_Settings"] .text {
  margin-top: -20px;
} */
[pid="0NAT_ALG"] .mat-column-Listen_Port {
    width: 1%;
}
[pid-title="1UPnP_TABLE"] {
  border: none;
  padding: 16px 16px 0 16px;
  margin-bottom: -8px;
}
.fill-from-editor-fix {
  display: none;
  position: absolute;
  left: 0;
  z-index: 999;
  top: -54px;
  right: 0;
  bottom: 0;
  background: #fff;
  width: calc(100vw - 292px);
  padding: 0;
  margin: 0;
}
.fill-from-editor-fix.show {
  display: block;
}
.fill-from-editor-fix-header {
  position: fixed;
  /* top: 0; */
  right: 16px;
  z-index: 1000;
  width: calc(100vw - 292px);
  background: #fff;
}
.fill-from-editor-fix-header h1{
  color: #3E4C5B;
  font-size: 1.05rem;
  font-weight: 500;
  padding: 16px 16px;
  border-bottom: 1px solid #e7e7e7;
  margin: 0;
}
.fill-from-editor-fix-body {
  height: calc(100vh - 310px);
  background: #fff;
  margin-top: 52px;
  overflow: auto;
}
.fill-from-editor-fix-body app-method-form-fillform {
  position: relative;
  background: #fff;
  z-index: 1000;
}
.fill-from-editor-fix-bottom {
  position: fixed;
  bottom: 33px;
  right: 16px;
  z-index: 1000;
  width: calc(100vw - 292px);
}
.page-content.left .fill-from-editor-fix,
.page-content.left .fill-from-editor-fix-header,
.page-content.left .fill-from-editor-fix-body,
.page-content.left .fill-from-editor-fix-bottom {
  width: calc(100vw - 32px);
}
@media (max-width: 1024px) {
  .fill-from-editor-fix,
  .fill-from-editor-fix-header,
  .fill-from-editor-fix-body,
  .fill-from-editor-fix-bottom {
    width: calc(100vw - 32px);
  }
  .fill-from-editor-fix-bottom {
    bottom: 82px;
  }
  .fill-from-editor-fix-body {
    height: calc(100vh - 350px);
  }
}
.detail-tab .detail-tab-right {
  float: right;
}
.detail-tab-right {
  display: inline-block;
}
#WizardMod04 app-method-image img, app-method-image img
{
  height: 120px;
}
.modal-body app-method-image img {
  height: 130px;
  padding-left: 0;
  margin: 15px 0 0;
}
.rwd-table label.switch {
  top: -2px!important;
}
.rwd-table span.label-container {
  vertical-align: middle!important;
  top: 0!important;
}
.tree-table-element-detail .method-multiple-table-view .no-data-table {
  width: 100%;
}
.tree-table-element-detail .method-multiple-table-view .no-data-table tr:hover{
  background-color: transparent;
}
.highlight-search-text {
  font-weight: 900;
}
.product_name {
  font-weight: bold;
  color: #ef5568;
  text-align: center;
  font-family: roboto, "Open Sans", "PingFangTC-Light", "Helvetica Neue", Arial, "Noto Sans TC", sans-serif;
  padding-top: 22px;
  font-size: 18px
}
@media(max-width: 767px) {
  .product_name {
      padding-top: 15px
  }
}
[draytab-data-value="PID_0CONFIG_TRUSTED_TABLE@Status@Valid"],
[draytab-data-value="PID_0CONFIG_CERTIFICA_TABLE@Status@Valid"] {
  color: #00CA9D;
}
[draytab-data-value="PID_0CONFIG_CERTIFICA_TABLE@Status@Expired"],
[draytab-data-value="PID_0CONFIG_CERTIFICA_TABLE@Status@Invalid"],
[draytab-data-value="PID_0CONFIG_TRUSTED_TABLE@Status@Expired"] {
  color: #EF5568;
}
[draytab-data-value="PID_0CONFIG_CERTIFICA_TABLE@Status@Requesting"]{
  color: black;
}
[draytab-data-value="PID_0CONFIG_CERTIFICA_TABLE@Status@Expire within 30 day"],
[draytab-data-value="PID_0CONFIG_TRUSTED_TABLE@Status@Expire within 30 day"] {
  color: #ff8b00;
}
/* Filter Select Style */
.bootstrap-select > .dropdown-toggle:after {
  margin-top: 2px;
}
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  top: 14px;
}
.bootstrap-select .bs-ok-default::after {
  width: 0.5em;
  height: .8em;
  border-style: solid;
  border-width: 0 .2em .2em 0;
}
.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  white-space: nowrap;
  /*max-width: 130px;*/
  overflow: hidden;
  text-overflow: ellipsis;
}
.myVigorLoginForm .dynamic-fillform div {
  text-align: left;
}
.bootstrap-select .dropdown-toggle .filter-option {
  max-width: 130px;
}
app-method-form-fillform-elements .multiple-table-view-tab-pre-div {
  /* max-height: calc( 100vh - 389px ); */
  overflow: auto;
  width: max-content;
  margin-bottom: 16px;
}
app-method-form-generic .table-theme {
  overflow: auto;
  width: 100%;
}
.width-percent-8 app-method-form-generic .table-theme {
  height: auto;
  overflow: auto;
  width: 100%;
}
.width-percent-4 app-method-form-generic .table-theme {
  height: auto;
  overflow: auto;
  width: 100%;
}
td, td pre, td span {
  font-size: 13px;
}
/* .table-theme {
  z-index: 0;
} */
.radio_horizontal {
  display: inline-flex;
}
.radio_horizontal label.radio {
  display: inline;
}
[pid="0ADM_PASSWORD"] app-method-field-elements {
    width: fit-content;
}
.suggestions-list {
  right: unset;
  left: 240px;
}
method-form-fillform-editor .suggestions-list{
  right: 8px!important;
  left: unset!important;
}
.login-lang .btn-light:not(:disabled):not(.disabled):active:focus,
.login-lang .show>.btn-light.dropdown-toggle:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ef5568;
}
.login-lang .bootstrap-select > .dropdown-toggle:after {
  margin-top: 2px;
  padding-left: 6px;
}
.login-lang button.btn.dropdown-toggle.btn-light {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ef5568 !important;
}
.login-lang button.btn.dropdown-toggle.btn-light:active {
  color: #ef5568 !important;
}
.login-lang {
  right: 68px;
  top: 35px;
  justify-content: flex-end;
  position: absolute!important;
  display: flex;
  align-items: center;
  color: #ef5568;
  z-index: 9;
}
@media screen and (max-width: 600px){
  .login-lang {
    top: 0;
    height: 90px;
  }
}