@charset "UTF-8";
:root {
  --color-primary: #ff0032;
  --color-primary-dark: #dc4242;
  --color-success: #16b777;
  --color-red: #ff5722;
  --color-purple: #a233c6;
  --color-black: #5f5f5f;
  --font-color: #5f5f5f;
  --font-size: 15px;
  --nav-bg-color: white;
}

/****************************** layui覆盖样式 ******************************/
/* 覆盖layui按钮颜色 */
.layui-btn,
.layui-layer-btn .layui-layer-btn0,
.layui-laypage .layui-laypage-curr .layui-laypage-em {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* 确认框按钮hover */
.layui-layer-btn .layui-layer-btn0:hover {
  color: white !important;
}

/* layui-form-label宽度增加 */
.layui-form-label {
  color: var(--font-color);
  width: 90px;
}

/* layui-form-label宽度增加，这里也要增加 */
.layui-input-block {
  margin-left: 120px;
}

/* layui 表格内容自动换行 */
.layui-table-cell {
  height: auto;
  white-space: normal;
  word-break: break-all;
}

/* 单选框 */
.layui-form-radio {
  color: var(--font-color);
}

.layui-form-radioed {
  color: var(--color-success);
}

/* 表格hover设置成光标 */
.layui-table-cell:hover {
  cursor: text;
}

/****************************** 基础样式 ******************************/
/* 解决滚动条抖动，即始终显示滚动条 */
html {
  overflow-y: scroll;
}

/* layui重置了很多样式，这里设置一下美观一点 */
p {
  margin-top: 10px;
}

a {
  /* color: var(--color-primary); */
}

a:hover {
  /* color: var(--color-primary-dark) !important; */
}

.container {
  width: 100%;
  height: 100vh;
  /* background-color: antiquewhite; */
}

.fw {
  width: 100%;
}

.fh {
  height: 100%;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

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

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mg-l-5 {
  margin-left: 5px;
}

.mg-l-10 {
  margin-left: 10px;
}

.mg-lr-5 {
  margin-left: 5px;
  margin-right: 5px;
}

.mg-tb-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mg-t-10 {
  margin-top: 10px;
}

.mg-t-20 {
  margin-top: 20px;
}

.mg-b-20 {
  margin-bottom: 20px;
}

.mg-b-200 {
  margin-bottom: 200px;
}

.pd-20 {
  padding: 20px;
}

.pd-40 {
  padding: 40px;
}

hr {
  margin: 20px 0;
}

.font-color {
  color: var(--font-color);
}

.font-size {
  font-size: var(--font-size);
}

.hidden {
  display: none;
}

.color-primary {
  color: var(--color-primary);
}

.color-success {
  color: var(--color-success);
}

.color-red {
  color: var(--color-red);
}

.color-purple {
  color: var(--color-purple);
}

.color-black {
  color: var(--color-black);
}

.color-white {
  color: white;
}

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

.pointer {
  cursor: pointer;
}