/* 引入字体 */
@font-face {
  font-family: "小米";
  /* src: url("/css/font/MiSans-Bold.ttf"); */
  src: url("/css/font/MiSans-Demibold.ttf");
  src: url("/css/font/MiSans-ExtraLight.ttf");
  src: url("/css/font/MiSans-Heavy.ttf");
  src: url("/css/font/MiSans-Light.ttf");
  src: url("/css/font/MiSans-Medium.ttf");
  src: url("/css/font/MiSans-Normal.ttf");
  src: url("/css/font/MiSans-Regular.ttf");
  src: url("/css/font/MiSans-Semibold.ttf");
  src: url("/css/font/MiSans-Thin.ttf");
}

a[download] {
  color: blue;
}

div {
  scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1);
  /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
  scrollbar-width: thin;
  /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
  -ms-overflow-style: none;
}

/* 设置滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 16px;
}

::-webkit-scrollbar-thumb {
  /* border-radius: 10px; */
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10;
  background: rgba(0, 0, 0, 0.05);
}

[v-cloak] {
  display: none;
}

/*颜色变量*/
:root {
  /* 
        用于表头颜色
    */
  --table-header: rgb(242, 242, 242);
  /* 
        用于表格隔行背景色
    */
  --table-row: #fafafa;
  /* 
        用于表格边框颜色
    */
  --table-border: #ccc;
}

/* ----------------------------------------------------下方为覆盖element样式----------------------------------------------------------- */
/* 按钮覆盖 */
.el-button--primary {
  color: #fff;
  background-color: #3f84e4;
  border-color: #3f84e4;
}

.el-button--text {
  border-color: transparent;
  color: #3f84e4;
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
}

/* dialog覆盖 */

.el-dialog {
  margin-top: 6vh !important;
}

.el-dialog__header {
  padding: 0 80px 0 20px;
  height: 42px;
  line-height: 42px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #333;
  overflow: hidden;
  background-color: #f8f8f8;
  border-radius: 2px 2px 0 0;
  position: relative;
}

.el-dialog__title {
  font-size: 14px;
}

.el-dialog__headerbtn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  line-height: initial;
}

.el-dialog__body {
  padding: 16px !important;
}

.el-dialog__footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-dialog__close {
  font-size: 30px;
}

.el-dialog__header {
  position: sticky;
  top: 0px;
  z-index: 10;
}

/* form表单覆盖 */
.el-form-item__label {
  font-size: 14px;
  color: #666666;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.el-form-item__content {
  font-size: 14px;
  color: #333333;
}

/*    position: absolute;
    top: 35px;
    left: 22px;
    transform-origin: center top;
    z-index: 2002;*/
/* form表单下的switch开关覆盖 */
.el-form__content .el-switch {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0, -50%);
}

.el-select {
  width: 100%;
}

/* 表格覆盖 */
.el-table {
  color: #333333;
}

.el-table tr {
  height: 61px;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}

/* 表格隔行变色 */
.grayBg {
  background-color: var(--table-row);
}

/* x轴滚动条 */
/* .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
}

.el-table--scrollable-x .el-table__body-wrapper:hover {
    overflow-x: auto;
} */
/* el-tab覆盖 */
.el-tabs__content {
  text-align: center;
}

/* el-pagination 覆盖*/
.el-pagination {
  padding: 10px 5px;
}

.el-link {
  cursor: pointer;
  margin: 0 5px;
}

.el-message-box__btns {
  display: flex;
  justify-content: center;
}

.el-divider__text {
  font-size: 21px !important;
}

/* 时间选择器 */
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

/* ----------------------------------------------------下方为自定义样式----------------------------------------------------------- */
/* 自定义表格布局样式 */

.layout-table {
  width: 100%;
  /* border: 1px solid #ccc; */
  margin-bottom: 18px;
}

.layout-table tr td {
  /* border: 1px solid #ccc; */
  padding: 0 18px;
  height: 58px;
}

.layout-table tr:nth-child(odd) {
  background-color: var(--table-row);
}

.layout-table tr td:nth-child(odd) {
  font-weight: bold;
  background-color: var(--table-header);
}

.layout-table tr td:nth-child(even) {
  text-align: left;
}

.layout-table tr td:first-child,
.layout-table tr td:nth-child(3) {
  text-align: center;
  width: 10%;
}

/* 自定义头部返回样式 */
header {
  height: 60px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

header .follow img {
  margin-right: 8px;
  height: 22px;
}

header a {
  color: #4c89e7;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: 15px;
}

header a:hover {
  color: #4c89e7;
}

header .departmentName {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  border-left: 2px solid #578be7;
  padding-left: 15px;
}

/* 全局统一处理大屏title标题 */
.G_title_left {
  padding-left: 1.67rem;
  font-size: 1.33rem;
  padding-bottom: .5rem;
  background: url(/img/newImg/bigScreen/menu/title_left.png) bottom left no-repeat;
}


/* demo1 项目列表加Table样式 */
.demo1_transition {
  transition: all 500ms ease-in-out;
}

#demo1_app {
  width: 100%;
  height: 100vh;
  display: flex;
  background-color: #f2f2f2;
}

.demo1_content_left {
  padding: 10px;
  border-radius: 6px;
  background-color: white;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}

.demo_content_left_title {
  width: 100%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  position: relative;
}

.demo_content_left_title span {
  font-weight: bold;
  border-left: 4px solid #2d8cf0;
  padding-left: 10px;
}

.showDepartment_icon {
  font-size: 20px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
}

.demo_content_left_search {
  margin: 6px 0;
  overflow: hidden;
  width: 100%;
  align-items: center;
}

.demo_content_left_list {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  max-height: 600px;
  margin-top: 10px;
}

.dcll_item {
  font-size: 14px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  white-space: nowrap;
  text-indent: 5px;
}

.dcll_item_change {
  border-radius: 2px;
  background-color: #519ff1;
  color: white;
}

.el-tooltip {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}

.demo1_content_right {
  border-radius: 6px;
  padding: 10px;
  flex: 1;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.demo1_content_right_top {
  width: 100%;
  padding: 5px 0 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d6d6d6;
}

.ml10 {
  margin-left: 10px;
}

.dcrt_left,
.dcrt_right {
  height: 100%;
  display: flex;
  align-items: center;
}

.dcrt_left .ml10 {
  margin-left: 10px;
}

.dcrt_right .ml10 {
  margin-left: 10px;
}

.demo1_content_right_table {
  padding: 10px 0;
  width: 100%;
  flex: 1;
  overflow: hidden;
}

.demo1_content_right_table_no_pd {
  width: 100%;
  flex: 1;
  overflow: hidden;
}

/* demo1新增修改编辑页面样式 */
#demo1_add {
  width: 100%;
  height: 100vh;
}

.demo1_add_formbody {
  padding: 10px;
}

.demo1_add_btn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}

.str_wrap {
  background: transparent !important;
}

/*flex布局*/
.row {
  display: flex;
}

.row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.column {
  display: flex;
  flex-direction: column;
}

.nowrap {
  flex-wrap: nowrap;
}

.noShrink {
  flex-shrink: 0;
}

.wrap {
  flex-wrap: wrap;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.self-end {
  align-self: flex-end;
}

.grow {
  flex-grow: 1;
}

/*外边距布局*/
.md {
  margin: 8px;
}

.ml {
  margin: 12px;
}

.ms {
  margin: 4px;
}

.mt-md {
  margin-top: 8px;
}

.mt-lg {
  margin-top: 12px;
}

.mt-sm {
  margin-top: 4px;
}

.mb-md {
  margin-bottom: 8px;
}

.mb-lg {
  margin-bottom: 12px;
}

.mb-sm {
  margin-bottom: 4px;
}

.ml-md {
  margin-left: 8px;
}

.ml-lg {
  margin-left: 12px;
}

.ml-sm {
  margin-left: 4px;
}

.mr-md {
  margin-right: 8px;
}

.mr-lg {
  margin-right: 12px;
}

.mr-sm {
  margin-right: 4px;
}

.m-x-lg {
  margin: 0 12px;
}

.m-x-md {
  margin: 0 8px;
}

.m-x-sm {
  margin: 0 4px;
}

.m-y-lg {
  margin: 12px 0;
}

.m-y-md {
  margin: 8px 0;
}

.m-y-sm {
  margin: 4px 0;
}

.ml-d:not(:first-child) {
  margin-left: 8px;
}

/*内边距*/
.pl {
  padding: 12px;
}

.pd {
  padding: 8px;
}

.ps {
  padding: 4px;
}

.pb-lg {
  padding-bottom: 12px;
}

.pb-md {
  padding-bottom: 8px;
}

.pb-sm {
  padding-bottom: 4px;
}

.p-x-lg {
  padding: 0 12px;
}

.p-x-md {
  padding: 0 8px;
}

.p-x-sm {
  padding: 0 4px;
}

.p-y-lg {
  padding: 12px 0;
}

.p-y-md {
  padding: 8px 0;
}

.p-y-sm {
  padding: 4px 0;
}

/* 文字布局  */
.text-nowrap {
  white-space: nowrap;
}

.el-message {
  z-index: 9999999 !important;
}

.search-input {
  width: 210px;
  margin-right: 8px;
}