body,input,textarea,button,select{font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;font-size:14px;color:#1a1a1a;}
body.loading{opacity:0}
aside,div,li,td,svg,path,*::after,*::before{-webkit-transition: all 0.2s cubic-bezier(0.1, 0.15, 0, 1);transition: all 0.2s cubic-bezier(0.1, 0.15, 0, 1);}
label{transition:none;-webkit-transition:none}
.username,.nickname,.cpe-id,.name{-webkit-user-select:text;user-select:text;}
hr {border: 0;height: 1px;background: rgba(0,0,0,.1);clear: both;}
h1,h2,h3,h4,p{margin:.5em 0;}
*{box-sizing: border-box;}
body{margin:0;background-color:#fff}
a{color:rgba(0,123,255,1);text-decoration:none;}
a:active{color:#000;}
a.mdi::before{margin-right:6px;}
.pointer{cursor: pointer;margin-left:0}
.pointer:hover{color: #007bff}
tr.on .pointer:hover{color:#fff}
.black{color:#000;}
.info,.gray{color:rgba(191,191,191,1);}
.green{color:rgba(17,176,7,1);}
.yellow,.warn{color:rgba(253,179,0,1);}
.red{color:rgba(253,123,0,1);}
.blue{color:rgba(0,123,255,1);}
.inner{display:none}
.hide{display:none}
.noverflow{overflow: hidden}
#rightbar .inner, #bottombar .inner, #panel .inner, #modal .inner,.inner.on{display:block}
#rightbar .inner .inner{display:none}
#rightbar .inner .inner.on{display:block}
table.inner.on{display:table}
.left{float:left;text-align:left}.fix{clear:both;}.right{float:right;}
.center{text-align: center;margin-left:auto;margin-right:auto;}

ul.nostyle,ul.nostyle li{list-style:none}

#loading{position:fixed;z-index:10;left:0;top:0;height:3px;overflow:hidden;width:100%;background:rgba(0,0,0,0);-webkit-transition: all 0.4s cubic-bezier(0.4, 0.25, 0, 1);
    transition: all 0.4s cubic-bezier(0.4, 0.25, 0, 1);}
#loading div{height:3px;overflow:hidden;width:50%;background: rgba(0,123,255,0);-webkit-transition: all 0.2s cubic-bezier(0.4, 0.25, 0, 1);
    transition: all 0.2s cubic-bezier(0.4, 0.25, 0, 0);}
#loading.p50 div{width:50%;background: rgba(0,123,255,.5);}
#loading.p70 div{width:70%;background: rgba(0,123,255,.7);}
#loading.p80 div{width:80%;background: rgba(0,123,255,.8);}
#loading.p90 div{width:90%;background: rgba(0,123,255,.9);}
#loading.p95 div{width:95%;background: rgba(0,123,255,1);}
#loading.p100,#loading.p100 div{width:110%;background: rgba(0,123,255,0);}
#headerbg2{position: absolute;width:100vw;height:833px;overflow: hidden;}
#headerbg2 svg{margin-left:calc((-2560px + 100vw)/2);}
#message{position: fixed;left:0;top:-32px;width:100%;text-align: center;z-index: 11;height:0;-webkit-user-select:none;user-select: none;}
#message div{position: relative;margin:auto;padding: 4px 12px;background: rgba(255,128,0,0);color: rgba(255,255,255,0);display: inline-block;width: auto;margin: 0 auto 0 auto;margin-top:-32px;-moz-border-radius: 2pt;border-radius: 2pt;-webkit-transition: all 0.4s cubic-bezier(0.4, 0.25, 0, 1);transition: all 0.4s cubic-bezier(0.4, 0.25, 0, 1);}
#message.show div{margin-top:90px;background: #FBAB18;color: rgba(255,255,255,1);}

.login-form{display:table;width:100vw;height:100vh;position: fixed;}
.login-form aside{color:#000;display:table-cell;vertical-align: middle;text-align:center;}
.login-form aside .inner{padding:48px;background:#FFF;border-radius:4px;box-shadow:rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;width:420px;max-width:calc(100vw - 24px);margin:0 auto 32vh auto;text-align:left;}
h1{font-size:20px;}
h2{font-size:16px;}
h3{font-size:14px;}
h4,h5,h6{font-size:14px;}
.input-title{
  margin-top:12px;
  font-size:9pt;
  color:#666;
  display:block;
  clear:both;
}
::placeholder { color: #c1c8cf;}
span.tag{
  background-color: #000;
  color: #fff;
  line-height: 16px;
  padding: 1px 5px;
  border-radius: 16px;
  font-size: .9em;
  white-space: nowrap;
  cursor: pointer;
}
span.tag.blue{
  background-color: #007bff;
  color: #fff;
}
.tag-list{margin-top: 6px;word-break: break-all;}
.tag-list span.tag{
  background-color: #eee;
  color: #000;
  margin-right: 6px;
  line-height: 22px;
  cursor: pointer;
}
.tag-list span.tag:hover{
  background-color: #007bff;
  color: #fff;
}
table tr.mon th{text-align:left;line-height: 12px;border: 0;border-top: 1px solid rgba(229,241,255,1);}
table tr.on td span.tag{
  background-color: #fff;
  color: #000;
}
table tr.on td span.tag.blue{
  background-color: #fff;
  color: #007bff;
}
form{padding:0;margin:0;}
form p span.lang{font-size:0.85em;font-weight:bold;line-height:20px;color:#2E3749;}
form p span.lang.info{font-weight:normal;color:rgba(191,191,191,1);}
input:focus, textarea:focus, textarea:focus, input, textarea,select,option,label.tag-input {
  color:#000;
  outline: none;
  margin:2px 0 10px 0;
  outline-style: none !important;
  outline: none !important;
  outline: 0 !important;
  border-radius: 2px;
  border: 1px solid rgba(0,123,255,1); /* Turquoise color */
  box-shadow:0 0 0 0.2rem rgba(0,123,255,0);
  vertical-align:top;
}
p input, p textarea,p select,p label.tag-input,p button{margin-top:0 !important;margin-bottom:0 !important;}
label.tag-input input{margin:-1px !important;}
label.tag-input span::after{
  content: "\F0156";
  font: normal normal normal 18px/1 "Material Design Icons";
  line-height: 24px;
  background-color: rgba(0,123,255,1);
  display: inline-block;
  position: absolute;
  padding-left:2px;
  border-left:1px solid #fff;
  width:22px;height:24px;margin:-2px 0 -2px 6px;
  border-radius: 0 24px 24px 0;
  cursor: pointer;
}
label.tag-input span:hover::after{
  background-color: rgba(254,189,29,1);
}
label.tag-input span{display:inline-block;padding:2px 24px 2px 7px;line-height: 20px;border-radius: 20px;background-color: rgba(0,123,255,1);color:#fff;margin:6px;}
label.tag-input{border-color:rgba(0,123,255,1);display:block;width:100%;}
label.tag-input input{
  width:calc(100% + 2px);
margin:-1px;
}
label.tag-input input:focus{box-shadow: none;}
input,textarea,select,label.tag-input{
  box-shadow:0 0 0 0 rgba(0,123,255,0);
}
input:focus, textarea:focus, select:focus, label.tag-input:active,label.tag-input:focus-within{
  box-shadow:0 0 0 0.2rem rgba(0,123,255,0.25)
}
input[type=text],input[type=password],select,button,textarea{
  font-size:14px;
  padding:6px;
  width:100%;
  resize:none;
}
label span{font-size:.9em;}
label.input span{font-size:unset;}
label span.langtext{font-size: unset;}
span.info span.lang{font-weight: unset;color: unset;}
button{margin-top:12px;width:100%;font-size:14px;
  padding:6px;
  border:0px;
  border-radius: 2px;
  color:#FFF !important;
  background-color:rgba(0,123,255,1);
  cursor: pointer;
  -webkit-user-select:none;
  user-select: none;
}
button:focus,button:active{
  outline: none;
  box-shadow:0 0 0 0.2rem rgba(0,123,255,0.25);
  border:0;
}
button.green{background-color: rgba(17,176,7,1);color:#fff;}
button.green:focus,button.green:active{
  outline: none;
  box-shadow:0 0 0 0.2rem rgba(17,176,7,0.25);
  border:0;
}
button.warn{background-color: rgba(253,179,0,1);color:#fff;}
button.warn:focus,button.warn:active{
  outline: none;
  box-shadow:0 0 0 0.2rem rgba(254,171,0,0.25);
  border:0;
}
button.red{background-color: rgba(253,123,0,1);color:#fff;}
button.red:focus,button.red:active{
  outline: none;
  box-shadow:0 0 0 0.2rem rgba(255,123,0,0.25);
  border:0;
}
button:disabled{
  background-color: rgba(191,191,191,1);color:#fff;cursor:default;
}

button.warn.white{background-color: transparent;color:rgba(253,179,0,1)!important;}
button.red.white{background-color: transparent;color:rgba(253,123,0,1)!important;}
button.green.white{background-color: transparent;color:rgba(17,176,7,1)!important;}
*:disabled button,button:disabled{background-color: #ccc}

button.inline{margin:0 0 6px 0;}
label{user-select:none;-webkit-user-select:none;vertical-align: top;line-height: 15px;}
input[type=checkbox]{
  border: none;
  width:0;
  margin:1px 14px 10px 2px;
  vertical-align: text-top;
  cursor: pointer;
  -webkit-user-select:none;
  user-select: none;
  box-shadow:none;
}
input[type=checkbox]::after{
  content:"\F012C";
  font: normal normal normal 18px/1 "Material Design Icons";
  font-size:12px;
  text-align: center;
  line-height: 14px;
  color:rgba(255,255,255,0);
  display: block;
  margin-left:-2px;
  width:16px;height:16px;border-radius: 2px;
  position: absolute;
  margin-top:-16px;
  box-sizing: border-box;
  border:2px solid rgba(0,123,255,1);
  background-color: rgba(255,255,255,1);
}
input[type=checkbox]:checked::after{color:rgba(255,255,255,1);background-color: rgba(0,123,255,1);}
input[type=checkbox]::before{
  content:"";
  display: block;
  margin-left:-2px;
  width:16px;height:16px;border-radius: 2px;
  box-sizing: border-box;
  border:2px solid rgba(0,123,255,1);
  background-color: rgba(0,123,255,0);
}

input:disabled,input:disabled::before,input:disabled::after{border-color:rgba(191,191,191,1) !important;}
input:disabled[type=checkbox]:checked::after,input:disabled[type=radio]:checked::after{background-color:rgba(191,191,191,1) !important;}
input:disabled[type=radio]::after{border-color:rgba(255,255,255,1) !important;}
span.dinput{user-select:text;-webkit-user-select:text;display: block;font-size:14px;padding:6px;width:100%;resize:none;border: 1px solid #000;border-radius: 2px;border-color:rgba(191,191,191,1) !important;}

input.YFN.F[type=checkbox]:checked::after{
  content:"\F0374";
}

input[type=radio]{
  border: none;
  width:0;
  margin:0 14px 10px 2px;
  cursor: pointer;
  -webkit-user-select:none;
  user-select: none;
  box-shadow:none;
}
input[type=radio]::after{
  content:"";
  display: block;
  margin-left:-2px;
  width:12px;height:12px;border-radius: 12px;
  position: absolute;
  margin:-14px 0 0 0;
  box-sizing: border-box;
  border:2px solid rgba(255,255,255,1);
  background-color: rgba(255,255,255,1);
}
input[type=radio]:checked::after{background-color: rgba(0,123,255,1);}
input[type=radio]::before{
  content:"";
  display: block;
  margin-left:-2px;
  width:16px;height:16px;border-radius: 16px;
  box-sizing: border-box;
  border:2px solid rgba(0,123,255,1);
  background-color: rgba(0,123,255,0);
}

_:-ms-lang(x), input[type=checkbox],input[type=radio]{width:auto;margin:2px 0 0 0;}
@-moz-document url-prefix() { 
  input[type=checkbox],input[type=radio] {
     width:auto;margin:2px 0 0 0;
  }
}

input[type=radio].black::before{border-color: #000;}
input[type=radio].black:checked::after{background-color: #000;}

select {
    display: block;
    width: 100%;
    padding:6px;
    max-width: 100%; /* useful when width is set to anything other than 100% */
    box-sizing: border-box;
    border: 1px solid rgba(0,123,255,1);
    box-shadow:0 0 0 0.2rem rgba(0,123,255,0)
    border-radius: 2px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
        
    */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#ffffff 100%);
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right .7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
select::-ms-expand {
    display: none;
}
/* Hover style */
select:hover {
    border: 1px solid rgba(0,123,255,1);
}
/* Focus style */
select:focus {
    /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
    box-shadow:0 0 0 0.2rem rgba(0,123,255,0.25)
    color: #222; 
    outline: none;
}

/* Set options to normal weight */
select option {
  font-size:14px;
}

select:disabled, select[aria-disabled=true] {
    color: graytext;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

select:disabled:hover, select[aria-disabled=true] {
    border-color: #aaa;
}

header select{margin:10px 0 12px 0;padding-right:32px;padding-top:4px;padding-bottom:4px;}

button.w80{width:80px;}

.buttons button{float:left;width: auto;
    border-radius: 0;
    line-height: 1px;
    height: 24px;
    padding:0 6px;
    margin-top:0;
    background-color: #ececec;
    color:#000!important;
    box-shadow:0 0 0 0 rgba(0,123,255,0.25)!important;
}
.buttons button:first-child{
    border-radius: 2px 0 0 2px;
}
.buttons button:last-child{
    border-radius: 0 2px 2px 0;
}
.buttons button.on{
    color:#fff!important;
    background-color:#007bff;
}
.buttons.right{float:right;margin-right:36px;border-radius:2px;position: relative;z-index: 1;}

div#header-menu li input,div#header-menu li button,div#header-menu li select{height:27px;line-height:13px;margin-top:10px;}

div.g2-1{width:50%;float:left;}
div.g3-1{width:33.3%;float:left;}
div.g3-2{width:66.6%;float:left;}
div.g4-1{width:25%;float:left;}
div.g4-2{width:50%;float:left;}
div.g4-3{width:75%;float:left;}

table ul,table ul li{list-style:none;margin:0;padding:0;}
table *,table *::before,table *::after{-webkit-transition:none;transition:none;}
table{background-color: #FFF;width:100%;border-spacing: 0;border-collapse: collapse;-webkit-user-select:none;user-select:none}
table th{background-color: rgba(242,248,255,1);font-size:.75em;white-space: nowrap;}
table th,table td{width:15%;text-align:left;padding:6px 6px;line-height:20px;vertical-align:middle;}
table#departments th,table#departments td{width:10%;}
table#cpes th,table#cpes td{width:10%;}
table#departments th:first-child,table#departments td:first-child{width:15%;}
table#departments th:nth-child(2),table#departments th:nth-child(4),table#departments th:nth-child(5),table#departments th:nth-child(6),table#departments th:nth-child(7),table#departments th:nth-child(8),table#departments th:nth-child(9),table#departments td:nth-child(2),table#departments td:nth-child(4),table#departments td:nth-child(5),table#departments td:nth-child(6),table#departments td:nth-child(7),table#departments td:nth-child(8),table#departments td:nth-child(9){
  width:5%;text-align:center}
table#departments .mdi-checkbox-marked-circle,table#departments .mdi-close-circle{font-size:16px;}
table#users th:nth-child(5), table#users th:nth-child(6), table#users th:nth-child(7), table#users th:nth-child(8), table#users th:nth-child(8), table#users td:nth-child(5), table#users td:nth-child(6), table#users td:nth-child(7), table#users td:nth-child(8), table#users td:nth-child(9),table#mac-device th:nth-child(5), table#mac-device th:nth-child(6), table#mac-device th:nth-child(7), table#mac-device td:nth-child(5), table#mac-device td:nth-child(6), table#mac-device td:nth-child(7){
    width: 5%;
    text-align: center;
}
table#users .mdi-checkbox-marked-circle,table#users .mdi-close-circle,table#mac-device .mdi-checkbox-marked-circle,table#mac-device .mdi-close-circle{font-size:16px;}
table tr th{border-bottom:1px solid rgba(0,123,255,1);}
table td{border-top:1px solid rgba(229,241,255,1);}
table td a{margin-left:6px;font-size:14px;}
table td a:first-child,table td li a,td.authorize-list a,table td.mulitline a{margin-left:0;white-space: nowrap;}
table td a.mdi::before{margin-right:2px;font-size:14px;}

table td:last-child{text-align: right;white-space: nowrap;}
table tr:hover td{background-color: rgba(242,248,255,1)}
table tr.on td{background-color: rgba(0,123,255,1);color:#FFF;}
table tr.on td{border-color: transparent;}
table tr.on td a,table tr.on td .mdi,table tr.on td .black{color:#fff;}
table tr.on td a,table tr.on td .green.mdi.mdi-circle{color:rgba(17,176,7,1);}
table tr.on td a,table tr.on td .green.mdi.mdi-circle-medium{color:rgba(17,176,7,1);}
table tr.on td a,table tr.on td .gray.mdi.mdi-circle{color:rgba(191,191,191,1);}
table tr.on td a,table tr.on td .gray.mdi.mdi-circle-medium{color:rgba(191,191,191,1);}
table tr.on td a.warn{color:rgba(254,189,29,1);}
table th:first-child{width:30%;padding-right:0;}
table th:last-child,table td:last-child{text-align:right}
table td:first-child{white-space:nowrap;padding-right:0;}

table.authorize-list th{background-color: transparent;border:0;line-height: 12px;}
table td.authorize-list{width:30%;}

ul.icon-list, ul.icon-list li{list-style:none;margin:0;padding:0;-webkit-user-select:none;user-select:none;line-height: 16px;}
ul.icon-list li{width:128px;float:left;text-align:center;padding:6px 0;position:relative;}
ul.icon-list li div{width:64px;height:64px;border-radius:64px;background-color: #efefef;margin:0 auto 6px auto;background-repeat: no-repeat;background-size: 100%;background-position: center center;overflow:hidden;}
ul.icon-list li span{display:table;width:100%;height:100%;color:#FFF;transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);}
ul.icon-list li span.b{font-size:1.1em;}
ul.icon-list li span span{display:table-cell;width:100%;vertical-align: middle}
ul.icon-list li::before{
  opacity: 0;
  content: "\F0156";font: normal normal normal 18px/1 "Material Design Icons";font-size:14px;color:#fff;line-height:16px;display:block;text-align:center;width:16px;height:16px;border-radius:16px;background-color:rgba(254,189,29,1);position:absolute;right:12px;top:0;
  cursor: pointer;
}
ul.icon-list li:hover::before{
  opacity: 1;
}
ul.icon-list h4{clear:both;margin:1em 0;}
ul.icon-list div{clear:both;}
ul.icon-list li.hide{display:none;}
ul.icon-list#beapp-list li,ul.icon-list#customize-app-list li{cursor: pointer;}
ul.icon-list#beapp-list li:hover{background-color:rgba(0,128,255,0.1);}
ul.icon-list#beapp-list li::before,ul.icon-list#customize-app-list li::before{display:none;}

table#departments td,table#users td,table#mac-device td,table#cpes td{white-space: nowrap;}

#user-device,#user-device li{list-style:none;padding:0;margin:0;line-height:20px}
#user-device li{margin:10px 0;}
#user-device .mdi{margin-right:6px;}
#user-device div a.mdi::before{margin-right:2px;}
#user-device li div{text-align:right;float:right;}

table#device2 td:nth-child(2),table#device2 td:nth-child(3){white-space: nowrap;text-overflow:ellipsis;overflow:hidden;padding-right:0}
table#device2 th:nth-child(1),table#device2 td:nth-child(1){width:8%;}

ul#admin-limits,ul#admin-limits li{list-style:none;padding:0;margin:0;}
ul#admin-limits li{width:30%;margin-right:3.33%;float:left;white-space:nowrap;overflow: hidden;text-overflow: ellipsis}

table#admin-logs tr th,table#admin-logs tr td{
  width:calc(100% - 320px);
}
table#admin-logs tr th:nth-child(1),table#admin-logs tr td:nth-child(1){
  width:80px;
}
table#admin-logs tr th:nth-child(3),table#admin-logs tr td:nth-child(3){
  width:140px;
  white-space:nowrap;
}
table#admin-logs tr th:nth-child(4),table#admin-logs tr td:nth-child(4){
  width:100px;
  white-space:nowrap;
}
table#connect-logs tr th,table#connect-logs tr td{
  width:calc(100% - 320px);
}
table#connect-logs tr th:nth-child(1),table#connect-logs tr td:nth-child(1){
  width:80px;
}
table#connect-logs tr th:nth-child(3),table#connect-logs tr td:nth-child(3){
  width:140px;
  white-space:nowrap;
}
table#connect-logs tr th:nth-child(4),table#connect-logs tr td:nth-child(4){
  width:100px;
  white-space:nowrap;
}
table#alerts tr td:first-child{
  white-space:normal;
  word-break: normal;
}
table#vouchers tr th:nth-child(4),table#vouchers tr td:nth-child(4){
  width:25%;
}