/*logo*/
.logon {
  width: 300px;
  background-color:rgba(0,0,0,0.3);
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  margin:-280px 0 0 -200px;
  padding: 30px 50px;
  border-radius: 6px;
  border: solid 1px rgba(255,255,255,0.1);
}

.logon .logo {
  text-align: center;
}
.logon .logo img {
  display: inline-block;
}
.logon .logo-text {
  display: block;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  padding-top: 5px;
}
.logon-fm {
  margin: 30px 0 0;
}
.logon-fm .fm-item {
  margin-bottom: 20px;
}
.logon-fm .ipt {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  line-height: 46px;
  border: 0;
  background-color: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 16px;
  padding: 0 20px 0 35px;
  border: solid 1px rgba(255,255,255,0.2);
}
.i-user {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwQzhFNDJFRUVDNDExRTc4ODE0RUQ1REM2Mjk2MThDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwQzhFNDJGRUVDNDExRTc4ODE0RUQ1REM2Mjk2MThDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBDOEU0MkNFRUM0MTFFNzg4MTRFRDVEQzYyOTYxOEMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODBDOEU0MkRFRUM0MTFFNzg4MTRFRDVEQzYyOTYxOEMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz55XG69AAABXklEQVR42oyTP0jDUBCHX7XQog6mOHZxEUTFRUEqCq4dxUkRV1HcBUFx6y6og10qqYPOrkJBEScHB8HBTQVLMvkPS+N3cpX4mhgPPn7J5e6XvPcuqSAIjB2+73cjazCjqTPYcRznxa5N2QY09yGn4MGhphchB0VM6kkGFaSTwgUr7yIN8kvhfIdV5CCTsGHaQ3IFanpjDYge+IDnCAPJfWpNrIEUyZrGIgzG9Vk91oD1vSN7UOZTB0JLk+sD2NWa+E3Uhm1kHu70rWJQpXkr8RhDJv3IFDThnOb7qLpfBjQNI8swCK/Q+twsdMGtLBGzmzYDmuXcS3ACNR2kcMggTcMcrGPifmfFwPO8IXiCgtz/BTUT8Agjct86hVU4wvXCJAQ1l4ir/8qPwShcmf/Hte6TSWuiCpvsQwZ9gLeIIWvqRuZ1rEv2Jq4gszqq8ts2LIO0GsjpHLOUfUl+CTAAw6CsKGxdV+YAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: 10px center;
}
.i-pass {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYzMDdCMzcwRUVDNTExRTc5OTZGOEY3QTRBNkZFQjNBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYzMDdCMzcxRUVDNTExRTc5OTZGOEY3QTRBNkZFQjNBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjMwN0IzNkVFRUM1MTFFNzk5NkY4RjdBNEE2RkVCM0EiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjMwN0IzNkZFRUM1MTFFNzk5NkY4RjdBNEE2RkVCM0EiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6i3bTFAAABFklEQVR42mL8//8/Awi8f/8+DkgFATErA37wG4jXCQoKLgJxWJAknIFYCIiX4TEEpDkKqhbDAJBT9gJNnoHPeqBLxYGUIozPhCTHAcS8DIQBL1QtA7oL5gPxZyIMWIdsESMoEIHOsgSy5aAGshMw4Cc0LF4BvXsA5oIqINYC4idoiv/DLEITlwbid0BsBjMAFOrNQBMXEOEFkItjgVQRchj8R486oCJQQNVAuS1Aw38gSYPU/kMPRHRgBsTVUPZ2ID6KTRE+A24B8Q2oTbdxKcJpANDJL4DeOABlvyLZACg4QihAWZCi6QcWVyzFoe8HLGpZkAwKADqZhwhX/QFiJyBmQzZgGxA7ALEPA3HgLxCvBTEAAgwA3tREoViu8aYAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: 10px center;
}
.btn-logon {
  height: 50px;
  display: block;
  width: 100%;
  background-color: rgba(255,255,255,0.95);
  font-size: 18px;
  border: 0;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
}
.btn-logon:hover {
  background-color: #fff;
}