body{
    --primary:#2c61b4;
	--secondary: #6c757d;
	--success: #34BFA3;
	--danger: #F4516C;
	--warning: #FFE57F;
	--info: #17a2b8;
	--light: #f8f9fa;
	--dark: #343a40;
	--muted: #6c757d;
	--white: #fff;
	--lightmuted:#B2B2B2;
    --border:#f0f0f0;

    padding: 0;
    margin: 0;
}

.padding{
    padding: 4px;
}
.p-1{
    padding: 10px;
}
.p-2{  padding: 20px !important; }
.p-3{
    padding: 30px;
}
.p-4{
    padding: 40px;
}
.p-5{
    padding: 50px;
}

.pt-1{ padding-top: 10px !important; }
.pt-2{ padding-top: 20px !important;}
.pt-3{ padding-top: 30px !important;}
.pt-4{ padding-top: 40px !important;}
.pt-5{ padding-top: 50px !important; }

.pr-2{ padding-right: 20px; }

.py-1{
    padding-top: 10px;
    padding-bottom: 10px;;
}
.py-2{
    padding-top: 20px;
    padding-bottom: 20px;;
}
.py-3{ padding-top: 30px; padding-bottom: 30px;}
.py-4{ padding-top: 40px; padding-bottom: 40px;}
.py-5{ padding-top: 50px; padding-bottom: 50px;}
.px{
    padding-left: 5px;
    padding-right: 5px;
}
.px-1{
    padding-left: 10px;
    padding-right: 10px;
}
.px-2{
    padding-left: 20px;
    padding-right: 20px;
}
.px-3{
    padding-left: 30px;
    padding-right: 30px;
}
.px-4{
    padding-left: 40px;
    padding-right: 40px;
}
.px-5{
    padding-left: 50px;
    padding-right: 50px;
}
.m-1{ margin: 10px; }
.m-2{ margin: 20px; }
.m-3{  margin: 30px; }
.m-4{ margin: 40px; }
.m-5{ margin: 50px; }
.mt-1{ margin-top: 10px !important; }
.mt-2{ margin-top: 20px !important; }
.mt-3{ margin-top: 30px !important; }
.mt-4{ margin-top: 40px !important; }
.mt-5{ margin-top: 50px !important; }
.mt-10{ margin-top: 100px !important; }
.ml-1{ margin-left: 10px; }
.ml-2{ margin-left: 20px; }
.ml-3{ margin-left: 30px; }
.ml-4{ margin-left: 40px; }
.ml-5{ margin-left: 50px !important; }
.ml-auto{ margin-left: auto;}
.mr-1{ margin-right: 10px; }
.mr-2{ margin-right: 20px; }
.mr-3{ margin-right: 30px; }
.mr-4{ margin-right: 40px; }
.mr-5{ margin-right: 50px; }
.mr-auto{ margin-right: auto; }
.mb-1{ margin-bottom: 10px; }
.mb-2{ margin-bottom: 20px; }
.mb-3{ margin-bottom: 30px; }
.mb-4{ margin-bottom: 40px; }
.mb-5{ margin-bottom: 50px; }
.mx-1{ margin-left: 10px; margin-right: 10px; }
.mx-2{ margin-left: 20px; margin-right: 20px; }
.mx-3{ margin-left: 30px; margin-right: 30px; }
.mx-4{ margin-left: 40px; margin-right: 40px; }
.mx-5{ margin-left: 50px; margin-right: 50px; }
.my-1{ margin-top: 10px; margin-bottom: 10px; }
.my-2{ margin-top: 20px; margin-bottom: 20px; }
.my-3{ margin-top: 30px; margin-bottom: 30px !important; }
.my-4{ margin-top: 40px; margin-bottom: 40px !important; }
.my-5{ margin-top: 50px; margin-bottom: 50px !important; }

/* flex布局 */
.d-flex{ display: flex; }
.d-inline-flex{display: inline-flex;}
.d-block{ display: block; }
.d-inline-block{ display: inline-block; }
.d-inline{display: inline;}

.flex-1{ flex: 1; }
.flex-column{ flex-direction: column; }
.flex-row{ flex-direction: row; }
.flex-wrap{ flex-wrap: wrap; }
.flex-nowrap{ flex-wrap: nowrap; }
.flex-shrink{flex-shrink: 0;}
.grow-1{ flex-grow: 1; }
.grow-2{ flex-grow: 2; }
.j-start{ justify-content: flex-start; }
.j-center{ justify-content: center; }
.j-end{ justify-content: flex-end; }
.j-sb{ justify-content: space-between; }
.a-center{ align-items:center; }
.a-start{ align-items: flex-start; }
.a-end{ align-items:flex-end; }
.a-stretch{ align-items: stretch; }
.a-self-start{ align-self: flex-start; }
.a-self-center{ align-self: center; }
.a-self-auto{ align-self: auto; }
.a-self-end{ align-self: flex-end; }
.a-self-stretch{ align-self:stretch; }
.a-self-baseline{ align-self:baseline; }

.row { box-sizing: border-box!important; display: flex!important; flex-direction: row; flex-wrap: wrap;}
/* 背景 */
.bg-gray{
  background-color: #F5F7FA;
  color: #909399;
}

.bg-blue{
    background-color: var(--primary);
    color: white;
  }

/* switch按钮样式 */
.switch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff !important;
}
/*打开时文字位置设置*/
.switch .el-switch__label--right {
    z-index: 1;
}
/* 调整打开时文字的显示位子 */
.switch .el-switch__label--right span{
    margin-right: 9px;
}
/*关闭时文字位置设置*/
.switch .el-switch__label--left {
    z-index: 1;
}
/* 调整关闭时文字的显示位子 */
.switch .el-switch__label--left span{
    margin-left: 9px;
}
/*显示文字*/
.switch .el-switch__label.is-active {
    display: block;
}

/* 调整按钮的宽度 */
.switch.el-switch .el-switch__core,
.el-switch .el-switch__label {
    text-align: center;
     width: 60px !important;
     margin: 0;
}

/* 边框 */
.border{ border: 1px solid var(--border); }
.border-top{ border-top: 1px solid var(--border); }
.border-bottom{  border-bottom:solid var(--border) 1px; }
.border-bottom-dashed{  border-bottom:dashed var(--border) 1px; }
.border-dotted{  border-style: dotted; }
.border-dashed{ border-style: dashed; }

.border-1{ border-width: 1px; }
.border-2{ border-width: 2px; }
.border-3{ border-width: 3px; }

.rounded-0{ border-radius:0; }
.radius{ border-radius: 5px; }
.radius-1{ border-radius: 10px; }
.radius-2{ border-radius: 20px; }
.radius-3{ border-radius: 30px; }
.radius-circle{ border-radius:100%; }


/* color */
.text-primary{ color:var(--primary)!important; }
.text-secondary{ color:var(--secondary)!important; }
.text-success{ color:var(--success)!important; }
.text-danger{ color: var(--danger)!important; }
.text-warning{ color:var(--warning)!important; }
.text-info{ color: var(--info)!important; }
.text-light{ color: var(--light)!important; }
.text-dark{ color: var(--dark)!important; }
.text-muted{ color: var(--muted)!important; }
.text-light-muted{ color: var(--lightmuted)!important; }
.text-white{ color: var(--white)!important; }

.bg-primary{ background-color:var(--primary)!important; }
.bg-secondary{ background-color:var(--secondary)!important; }
.bg-success{ background-color:var(--success)!important; }
.bg-danger{ background-color: var(--danger)!important; }
.bg-warning{ background-color:var(--warning)!important; }
.bg-info{ background-color: var(--info)!important; }
.bg-light{ background-color: var(--light)!important; }
.bg-dark{ background-color: var(--dark)!important; }
.bg-white{ background-color: var(--white)!important; }
.bg-light-secondary{background-color: #F1F1F1!important;}

/* 伪类 */
.hover:active{
    background-color: #eee !important;
}
.hover-border:hover{
    background-color: #f5f8fd;
    border: 1px solid #c4d3fa;
}
.hover-shadow{
    transition: all 0.2s ease-in-out;
}
.hover-shadow:hover{
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

.line-h0{ line-height: 0!important; }
.line-h{ line-height: 1!important; }
.line-h-sm{ line-height: 1.2!important; }
.line-h-md{ line-height: 1.5!important; }
.line-h-lg{ line-height: 2!important; }
.line-h-big{ line-height: 3!important; }

.line-through{ text-decoration: line-through; }

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

/* 阴影 */
.shadow-sm {
    box-shadow: 0 2px 5px rgba(114, 130, 138, 0.2)!important;
}
.shadow {
    box-shadow: 1px 4px 10px  rgba(114, 130, 138, 0.3)!important;
}
.shadow-lg {
    box-shadow: 1px 8px 20px rgba(114, 130, 138, 0.5)!important;
}




/* 定位 */
.position-absolute{ position: absolute; }
.position-fixed{ position: fixed; }
.position-relative{ position: relative; }
.position-bottom{ left: 0; right: 0; bottom: 0; }
.left-0{ left: 0; }
.top-0{ top: 0; }
.bottom-0{ bottom: 0; }
.right-0{ right: 0; }
/* 宽高 */
.w-100{ width: 100%;}
.w-50{ width: 50%;}
.h-100{height: 100%;}
.max-w-100{max-width: 100%;}

/* 栅格20列 */
.col-1{ width: 5%; } 
.col-2{ width: 10%; } 
.col-3{ width: 15%; } 
.col-4{ width: 20%;} 
.col-5{ width: 25%; } 
.col-6{ width: 30%; }
.col-7{ width: 35%; }
.col-8{ width: 40%; }
.col-9{ width: 45%; }
.col-10{ width: 50%; }
.col-11{ width: 55%; }
.col-12{ width: 60%; }
.col-13{ width: 65%; }
.col-14{ width: 70%; }
.col-15{ width: 75%; }
.col-16{ width: 80%; }
.col-17{ width: 85%; }
.col-18{ width: 90%; }
.col-19{ width: 95%; }
.col-20{ width: 100%; }

/* 栅格24列 */
.span-1{ width: 4.17%; } 
.span-2{ width: 8.33%; } 
.span-3{ width: 12.5%; } 
.span-4{ width: 16.67%;} 
.span-5{ width: 20.83%; } 
.span-6{ width: 25%; }
.span-7{ width: 29.17%; }
.span-8{ width: 33.33%; }
.span-9{ width: 37.5%; }
.span-10{ width: 41.67%; }
.span-11{ width: 45.83%; }
.span-12{ width: 50%; }
.span-13{ width: 54.17%; }
.span-14{ width: 58.33%; }
.span-15{ width: 62.5%; }
.span-16{ width: 66.67%; }
.span-17{ width: 70.83%; }
.span-18{ width: 75%; }
.span-19{ width: 79.17%; }
.span-20{ width: 83.33%; }
.span-21{ width: 87.5%; }
.span-22{ width: 91.67%; }
.span-23{ width: 95.83%; }
.span-24{ width: 100%; }

/* 字体 */
.font-weight{ font-weight: bold!important; }
.font-weight-100{ font-weight: 100!important; }

.font-sm{ font-size: 14px; }
.font-lg{ font-size: 20px; }
.font-xl{ font-size: 26px;;}
.cursor-pointer{
    cursor: pointer;
}

.t-a-start{
  text-align:start
}
.t-a-center{
  text-align: center;
}
.t-a-end{
  text-align: end;
}


.of-hidden{ overflow: hidden;}


/* 头像 */
.avatar{
    width: 32px;
    height: 32px;
}