/* base */
.d-none { display: none; }

/* float */
.fl { float: left; }
.fr { float: right; }

/* color */
.red {color: #FF5722; }
.orange { color:#FFB800; }
.green { color:#009688; }
.cyan { color:#2F4056; }
.blue { color:#01AAED; }
.black { color:#393D49; }
.gray { color:#eee; }

/* font */
.font12 { font-size: 12px; }
.font14 { font-size: 14px; }
.font16 { font-size: 16px; }
.font18 { font-size: 18px; }
.font20 { font-size: 20px; }
.font24 { font-size: 24px; }
.font36 { font-size: 36px; }

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

/* margin */
.mgl5 { margin-left:5px; }
.mgl10 { margin-left:10px; }
.mgl15 { margin-left:15px; }
.mgr5 { margin-right:5px; }
.mgr10 { margin-right:10px; }
.mgr15 { margin-right:15px; }
.mgt5 { margin-top:5px; }
.mgt10 { margin-top:10px; }
.mgt15 { margin-top:15px; }
.mgt20 { margin-top:20px; }
.mgt25 { margin-top:25px; }

/* padding */
.pd15 { padding: 15px; }
.pd20 { padding: 20px; }
.pd25 { padding: 25px; }
.pd30 { padding: 30px; }
.pd35 { padding: 35px; }
.pd40 { padding: 40px; }

/* img */
.layui-upload-img{ height: auto; margin: 0 10px 10px 0; border: 1px solid #ccc; }

/* input */
.listorder-input { width: 100%; border: none; background: transparent; }

/* 分页 */
.page_wrap { height: 34px; margin: 40px 20px;  font: normal 14px/34px "微软雅黑",Arial; color: #999; }
.pagination { padding: 15px 0; height: 34px; }
.pagination li { display:inline-block; margin-right:10px; background: #fff; padding: 0 10px; min-width: 12px; height: 32px; font: normal 14px/32px "微软雅黑",Arial; text-align: center; border: solid 1px #ddd; }
.pagination .rows { width: 100px; }
.pagination li a { display:block; width:100%; height:100%; color:#999; }
.pagination li:hover { background: #009688; text-decoration:none; color:#fff; }
.pagination li:hover a{ color: #fff; }
.pagination li.active { color:#fff; background: #009688; border-color:$yellow; }
.pagination .page_total { float: left; margin-left:20px; height: 34px; }
.pagination .page_skip { float: left;  height: 34px;  }
.pagination input { width:30px; text-align:center; height:32px; border:1px solid #ddd; margin:0 6px; }
.pagination .page_skip .sub_btn { display: inline-block; border: solid 1px #ddd; padding:0 5px; color: #333; }
.pagination .page_skip .sub_btn:hover { background: #c71e21; color: #fff; border: solid 1px #c71e21 ; }
  
/* 图片上传 */
/* .upload-pic-item { @extend .clearfloat; } */
.upload-pic { float:left; margin-right: 60px;  width:200px; height:164px; padding:1px; border:1px solid #999; }
.upload-pic .pic-wrap { width:100%; height:130px; }
.upload-pic .pic-wrap img { display:block; width:100%; height:100%; }
.upload-pic .upload-btn ,.upload-pic .delete-pic-btn { float:left; width: 50%;  height:30px; line-height:30px; font-size:12px; color:#fff; text-align:center; background:#666; }
.upload-pic .webuploader-pick { padding: 0; width: 100%; height: 100%; background: none; }
.upload-pic .delete-pic-btn { background:#999; }
.upload-pic .delete-pic-btn:hover { background:#f00; }
.square-min { width:130px; margin-right:20px; }

/* 多图上传 */
.preview-list { display: flex; flex-wrap: wrap; }
.preview-item { display: flex; align-items: center; justify-content: center; margin-right: 10px; margin-top: 10px; width: 150px; height:150px; padding:1px; border:1px solid #ccc; position: relative; }
.preview-item img { max-width: 100%; max-height: 100%; }
.preview-item .delete { position: absolute; top: 10px; right: 10px; color: #FF5722; border-radius: 50%; width: 20px; line-height: 20px; height: 20px; text-align: center; cursor: pointer; }


/* 图标选择 */
.selec-icon-list-wrap { height: 300px; overflow-y: scroll; }
.selec-icon-list { }
.selec-icon-list {margin-bottom: 50px; font-size: 0;}
.selec-icon-list  li{display: inline-block; vertical-align: middle; width: 11%; height: 55px; line-height: 25px; padding: 20px 0; margin-right: -1px; margin-bottom: -1px; border: 1px solid #e2e2e2; font-size: 14px; text-align: center; color: #666; transition: all .3s; -webkit-transition: all .3s;}
.selec-icon-list  li .layui-icon{display: inline-block; font-size: 30px; }
.selec-icon-list  li .doc-icon-name,
.selec-icon-list  li .doc-icon-code{color: #c2c2c2;}
.selec-icon-list  li .doc-icon-fontclass{height: 40px; line-height: 20px; padding: 0 5px; font-size: 13px; color: #333; }
.selec-icon-list  li:hover{background-color: #f2f2f2; color: #000;}



/* 样式修改 */
.layui-card-body { padding: 15px; }

/* 新增样式 */
.user-header { margin-right:10px; width:30px; height: 30px; border-radius: 50%; }
.search-btn-group .layui-btn-sm { height: 38px; }
.pointer { cursor: pointer; }
.img-show-max-in { width: auto; max-width: 100%; height: auto; max-height: 450px; min-width: 200px; }