@import url('../../../../common/assets/css/base.css');
@import url('../../../../common/assets/css/form.css');
body {
  background: #eee
}
button.btn {
  width: 100px; background: linear-gradient(#51a5fd, #1486ff); border: #0074ee 1px solid; border-radius: 5px
}
button.btn:hover {
  border-color: #0074ee !important
}
button.btn.hide {
  display: none !important
}
button.btn.done {
  background: linear-gradient(#ff7058, #f1543f); border-color: #f1543f
}
button.btn.done:hover {
  border-color: #f1543f !important
}
.install {
  width: 100%; min-width: 640px; height: 100vh; min-height: 600px; display: flex; align-items: center; justify-content: center
}
.install div.box {
  width: 600px; background: #fff
}
.install div.box div.nav {
  height: 99px; border: #0062ea 1px solid; background: linear-gradient(#51a5fd, #1486ff); border-top-left-radius: 5px; border-top-right-radius: 5px; position: relative; z-index: 100
}
.install div.box div.nav h1 {
  font-size: 30px; font-weight: normal; padding: 15px 0px 0px 20px; color: #fff; line-height: 100%
}
.install div.box div.nav h2 {
  font-size: 12px; font-weight: normal; padding: 20px 0px 0px 20px; color: rgba(255, 255, 255, .8); line-height: 100%
}
.install div.box div.nav div.link {
  color: rgba(255, 255, 255, .8); position: absolute; top: 20px; right: 20px; z-index: 100
}
.install div.box div.nav div.link a {
  display: inline-block; padding-bottom: 2px solid; color: rgba(255, 255, 255, .8); border-bottom: rgba(255, 255, 255, .8) 1px solid; transition: all .3s ease
}
.install div.box div.nav div.link a:hover {
  color: rgba(255, 255, 255, 1); border-bottom-color: rgba(255, 255, 255, 1)
}
.install div.box div.nav div.step {
  font-size: 0px; position: absolute; right: 0px; bottom: -2px; z-index: 100
}
.install div.box div.nav div.step span {
  display: inline-block; width: 110px; padding-bottom: 20px; font-size: 14px; color: #fff; line-height: 100%; text-align: center; cursor: default; position: relative; z-index: 100
}
.install div.box div.nav div.step span.on::after {
  content: ''; display: block; width: 0px; height: 0px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; transform: translate(-50%, 0); position: absolute; bottom: 0px; left: 50%; z-index: 100
}
.install div.box div.tab_content {
  border-left: #979797 1px solid; border-right: #979797 1px solid
}
.install div.box div.tab_content div.item {
  padding: 20px; display: none
}
.install div.box div.tab_content div.item.on {
  display: block
}
.install div.box div.tab_content div.license textarea {
  width: 100%; height: 262px; font-size: 14px; line-height: 160%; vertical-align: top; transition: none
}
.install div.box div.tab_content div.database {
  width: 100%; height: 262px; padding: 10px; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: space-between; border: #dcdcdc 1px solid
}
.install div.box div.tab_content div.mysql,
.install div.box div.tab_content div.admin {
  width: 360px
}
.install div.box div.tab_content div.image {
  width: calc(100% - 380px); height: 100%; margin-right: 10px; background: none center center no-repeat; background-size: contain
}
.install div.box div.tab_content div.mysql + div.image {
  background-image: url(../svg/mysql.svg)
}
.install div.box div.tab_content div.admin + div.image {
  background-image: url(../svg/manager.svg)
}
.install div.box div.tab_content div.info {
  width: 100%
}
.install div.box div.tab_content div.info h3 {
  margin: 0px 10px; border-bottom: #dcdcdc 1px solid
}
.install div.box div.tab_content div.info h3 span {
  display: inline-block; line-height: 200%; margin-bottom: -1px; border-bottom: #1687ff 2px solid
}
.install div.box div.tab_content div.info ul {
  padding: 10px
}
.install div.box div.tab_content div.info ul li {
  padding: 10px 0px
}
.install div.box div.tab_content div.info ul li input {
  width: 100%
}
.install div.box div.tab_content button.submit {
  visibility: hidden
}
.install div.box div.bottom_bar {
  height: 60px; border: #979797 1px solid; border-top-color: #dcdcdc; background: linear-gradient(#f8f8f8, #e6e6e6); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; position: relative; z-index: 100
}
.install div.box div.bottom_bar div.item {
  width: 100%; height: 60px; display: none; box-sizing: border-box; padding: 0px 20px
}
.install div.box div.bottom_bar div.item.on {
  display: flex; align-items: center; justify-content: space-between
}
.install div.box div.bottom_bar div.msg {
  width: 380px; line-height: 160%; text-align: center; color: #f1543f; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; z-index: 100
}