.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-out 0.2s;
}
@keyframes bounce-in {
0% {
    transform: scale(0);
}
50% {
    transform: scale(1.05);
}
100% {
    transform: scale(1);
}
}
@keyframes bounce-out {
0% {
    transform: scale(1);
}
50% {
    transform: scale(0.95);
}
100% {
    transform: scale(0);
}
}
body {
  margin: 0px;
  padding: 0px;
  background: #1f2d3d;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
#app {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}
.el-submenu [class^="fa"] {
  vertical-align: baseline;
  margin-right: 10px;
}
.el-menu-item [class^="fa"] {
  vertical-align: baseline;
  margin-right: 10px;
}


/* *解决弹窗中使用富文本框，菜单选项没出现的问题 */
.tox-silver-sink {
  z-index: 3000 !important;
}
.tox .tox-menu.tox-collection.tox-collection--list {
  z-index: 3001 !important;
}

ul li {
  list-style: none
}
a {
  text-decoration: none;
  color: #c0ccda;
}
.pos-rel {
  position: relative;
}
.ovf-hd {
  overflow: hidden
}
.ovf-auto {
  overflow: auto
}
.ovf-y-auto {
  overflow-y: auto
}
.fl {
  float: left
}
.fr {
  float: right
}

.m-w-1280 {
  min-width: 1280px !important;
}
.w-80 {
  width: 80px !important;
}
.w-100 {
  width: 100px !important;
}
.w-115 {
  width: 115px !important;
}
.w-150 {
  width: 150px !important;
}
.w-180 {
  width: 180px !important;
}
.w-200 {
  width: 200px !important;
}
.w-230 {
  width: 230px !important;
}
.w-295 {
  width: 295px !important;
}
.w-300 {
  width: 300px !important;
}
.w-310 {
  width: 310px !important;
}
.w-400 {
  width: 400px !important;
}
.w-450 {
  width: 450px !important;
}
.w-500 {
  width: 500px !important;
}
.w-600 {
  width: 600px !important;
}
.w-650 {
  width: 650px !important;
}
.w-700 {
  width: 700px !important;
}
.w-800 {
  width: 800px !important;
}
.w-900 {
  width: 900px !important;
}
.w-950 {
  width: 950px !important;
}
.w-1000 {
  width: 1000px !important;
}
.w-100p {
  width: 100% !important;
}

.h-28 {
  height: 28px !important;
  line-height: 28px !important;
}
.h-30 {
  height: 30px !important;
  line-height: 30px !important;
}
.h-36 {
  height: 36px !important;
  line-height: 36px !important;
}
.h-40 {
  height: 40px !important;
  line-height: 40px !important;
}
.h-50 {
  height: 50px !important;
  line-height: 50px !important;
}
.h-60 {
  height: 60px !important;
  line-height: 60px !important;
}
.h-100 {
  height: 100px !important;
}
.h-150 {
  height: 150px !important;
}
.h-190 {
  height: 190px !important;
}
.h-200 {
  height: 200px !important;
}
.h-300 {
  height: 300px !important;
}
.h-400 {
  height: 400px !important;
}
.h-480 {
  height: 480px !important;
}
.h-500 {
  height: 500px !important;
}
.h-600 {
  height: 600px !important;
}
.h-100p {
  height: 100% !important;
}
.mh-270 {
  max-height: 270px
}
.mh-400 {
  max-height: 400px
}


.m-t-5 {
  margin-top: 5px !important;
}
.m-t-10 {
  margin-top: 10px !important;
}
.m-t-15 {
  margin-top: 15px !important;
}
.m-t-20 {
  margin-top: 20px !important;
}
.m-t-30 {
  margin-top: 30px !important;
}
.m-l-5 {
  margin-left: 5px !important;
}
.m-l-10 {
  margin-left: 10px !important;
}
.m-l-20 {
  margin-left: 20px !important;
}
.m-l-15 {
  margin-left: 15px !important;
}
.m-l-30 {
  margin-left: 30px !important;
}
.m-l-50 {
  margin-left: 50px !important;
}
.m-r-5 {
  margin-right: 5px !important;
}
.m-r-10 {
  margin-right: 10px !important;
}
.m-r-15 {
  margin-right: 15px !important;
}
.m-r-30 {
  margin-right: 30px !important;
}
.m-b-5 {
  margin-bottom: 5px !important;
}
.m-b-10 {
  margin-bottom: 10px !important;
}
.m-b-15 {
  margin-bottom: 15px !important;
}
.m-b-20 {
  margin-bottom: 20px !important;
}
.m-b-30 {
  margin-bottom: 30px !important;
}

.p-t-0 {
  padding-top: 0px !important;
}
.p-t-3 {
  padding-top: 3px !important;
}
.p-t-5 {
  padding-top: 5px !important;
}
.p-t-6 {
  padding-top: 6px !important;
}
.p-t-10 {
  padding-top: 10px !important;
}
.p-t-15 {
  padding-top: 15px !important;
}
.p-t-20 {
  padding-top: 20px !important;
}
.p-t-30 {
  padding-top: 30px !important;
}
.p-t-40 {
  padding-top: 40px !important;
}
.p-t-50 {
  padding-top: 50px !important;
}
.p-l-0 {
  padding-left: 0px !important;
}
.p-l-5 {
  padding-left: 5px !important;
}
.p-l-6 {
  padding-left: 6px !important;
}
.p-l-10 {
  padding-left: 10px !important;
}
.p-l-13 {
  padding-left: 13px !important;
}
.p-l-15 {
  padding-left: 15px !important;
}
.p-l-20 {
  padding-left: 20px !important;
}
.p-l-30 {
  padding-left: 30px !important;
}
.p-l-40 {
  padding-left: 40px !important;
}
.p-l-50 {
  padding-left: 50px !important;
}
.p-r-0 {
  padding-right: 0px !important;
}
.p-r-5 {
  padding-right: 5px !important;
}
.p-r-6 {
  padding-right: 6px !important;
}
.p-r-10 {
  padding-right: 10px !important;
}
.p-r-15 {
  padding-right: 15px !important;
}
.p-r-20 {
  padding-right: 20px !important;
}
.p-r-30 {
  padding-right: 30px !important;
}
.p-r-40 {
  padding-right: 40px !important;
}
.p-r-50 {
  padding-right: 50px !important;
}
.p-b-0 {
  padding-bottom: 0px !important;
}
.p-b-3 {
  padding-bottom: 3px !important;
}
.p-b-5 {
  padding-bottom: 5px !important;
}
.p-b-6 {
  padding-bottom: 6px !important;
}
.p-b-10 {
  padding-bottom: 10px !important;
}
.p-b-15 {
  padding-bottom: 15px !important;
}
.p-b-20 {
  padding-bottom: 20px !important;
}
.p-b-30 {
  padding-bottom: 30px !important;
}
.p-b-40 {
  padding-bottom: 40px !important;
}
.p-b-50 {
  padding-bottom: 50px !important;
}

.bor-gray {
  border: 1px solid #e5e5e5;
}
.bor-gra {
  border: 1px solid #C0CCDA;
}
.bor-b-gray {
  border-bottom: 1px solid #e5e5e5;
}
.bor-b-ccc {
  border-bottom: 1px solid #ccc;
}
.bor-none {
  border: none;
}


.bor-ra-3 {
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
}
.bor-ra-5 {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}


.tx-c {
  text-align: center;
}

.bg-wh {
  background: #fff;
}
.bg-gray {
  background: #e5e5e5;
}
.bg-gra {
  background: #F9F9F9;
}
.bg-transparency {
  background: rgba(0,0,0,0);
}
.bg-blue {
  background: #20a0ff !important;
}

.c-gray {
  color: #ccc;
}
.c-light-gray {
  color: #99a9bf;
}
.c-gra {
  color: #C0CCDA;
}
.c-deep-blue {
  color: #1F2D3D;
}
.c-blue {
  color: #44B5DF;
}
.c-black {
  color: #333;
}

.fz-12 {
  font-size: 12px
}
.fz-14 {
  font-size: 14px
}
.fz-18 {
  font-size: 18px
}
.fz-20 {
  font-size: 20px
}
.fz-22 {
  font-size: 22px
}
.fz-24 {
  font-size: 24px
}

.pointer {
  cursor: pointer
}
.top-menu:hover {
	cursor: pointer;
	background: #324057;
	/*color: #20a0ff;*/
}
.top-menu:active, .left-menu:active {
	color: #20a0ff;
}
.top-active {
	color: #44B5DF
}
.top-menu, .left-menu {
	user-select:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	-ms-user-select:none;
}
.left-menu:hover {
	background: #42566C;
}
.pages {
	position: absolute;
	top: 20px;
	right: -5px;
}
.btn-link,.btn-link-large {
	display: inline-block;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
	cursor: pointer;
	text-align: center;
	box-sizing: border-box;
	margin-right: 10px;
	padding: 7px 9px;
	font-size: 12px;
	border-radius: 4px;
}
.btn-link-large {
	margin: 0;
	padding: 10px 15px;
	font-size: 14px;
}
.add-btn {
	background: #4caf50
}
.add-btn:hover {
	background: #66bb6a
}
.add-btn:active {
	background: #43a047
}
.edit-btn {
	background: #339df7
}
.edit-btn:hover {
	background: #5bb1fa
}
.edit-btn:active {
	background: #047ce2
}
.user-menu {
	position: absolute;
	top: 0px;
	right: 45px;
}
.add-btn-right {
	position: absolute;
	top: 0px;
	right: 0px;
}
.table-head {
  position: relative;
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #fff;
  background: #515151
}
.table-head > .title {
  color: #fff;
  padding-left: 10px;
}
.table-head > .icon {
  position: absolute;
  font-size: 20px;
  top: 6px;
  right: 10px;
  cursor: pointer;
}
.table-head > .table-head-btn {
	position: absolute;
  top: 4px;
  right: 10px;
}
.table-head > .table-head-btn:last-child {
	right: 55px;
}
.form-title {
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
}
.ellipsis-column {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.meross-tooltip.el-tooltip__popper {
	display: block;
	max-width: 500px;
	white-space: wrap;
}
.el-message-box__status+.el-message-box__message {
	word-wrap: break-word;
}