/* Layui CSS Framework - Basic Styles */
/* 为了离线使用，这里只包含基本样式 */

.layui-container {
  position: relative;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
  box-sizing: border-box;
}

.layui-row:after,
.layui-row:before {
  content: "";
  display: block;
  clear: both;
}

.layui-col-md1, .layui-col-md2, .layui-col-md3, .layui-col-md4, 
.layui-col-md5, .layui-col-md6, .layui-col-md7, .layui-col-md8, 
.layui-col-md9, .layui-col-md10, .layui-col-md11, .layui-col-md12 {
  position: relative;
  display: block;
  float: left;
  box-sizing: border-box;
}

.layui-col-md1 { width: 8.33333333%; }
.layui-col-md2 { width: 16.66666667%; }
.layui-col-md3 { width: 25%; }
.layui-col-md4 { width: 33.33333333%; }
.layui-col-md5 { width: 41.66666667%; }
.layui-col-md6 { width: 50%; }
.layui-col-md7 { width: 58.33333333%; }
.layui-col-md8 { width: 66.66666667%; }
.layui-col-md9 { width: 75%; }
.layui-col-md10 { width: 83.33333333%; }
.layui-col-md11 { width: 91.66666667%; }
.layui-col-md12 { width: 100%; }

.layui-col-space10 { margin: -5px; }
.layui-col-space10 > [class*="layui-col-"] { padding: 5px; }

.layui-card {
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}

.layui-card:last-child { margin-bottom: 0; }

.layui-card-header {
  position: relative;
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  border-bottom: 1px solid #f6f6f6;
  color: #333;
  border-radius: 2px 2px 0 0;
  font-size: 14px;
  overflow: hidden;
}

.layui-card-body {
  padding: 15px;
  position: relative;
}

.layui-btn {
  display: inline-block;
  vertical-align: middle;
  height: 38px;
  line-height: 38px;
  padding: 0 18px;
  background-color: #009688;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.layui-btn:hover { opacity: 0.8; filter: alpha(opacity=80); }

.layui-btn-primary {
  border: 1px solid #d2d2d2;
  background-color: #fff;
  color: #5f5f5f;
}

.layui-btn-normal { background-color: #1E9FFF; }
.layui-btn-warm { background-color: #FFB800; }
.layui-btn-danger { background-color: #FF5722; }
.layui-btn-disabled { background-color: #d2d2d2; cursor: not-allowed; }

.layui-form-label { width: 110px; }
.layui-input-block { margin-left: 110px; min-height: 36px; }

.layui-input, .layui-textarea, .layui-select {
  display: block;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  height: 38px;
  line-height: 1.3;
  line-height: 38px\9;
  border: 1px solid #e6e6e6;
  background-color: #fff;
  border-radius: 2px;
  box-sizing: border-box;
}

.layui-textarea {
  min-height: 100px;
  height: auto;
  line-height: 20px;
  padding: 6px 10px;
  resize: vertical;
}

.layui-table {
  width: 100%;
  margin: 10px 0;
  background-color: #fff;
  border-collapse: collapse;
  border-spacing: 0;
}

.layui-table th,
.layui-table td {
  padding: 9px 15px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #e6e6e6;
  font-size: 14px;
}

.layui-table th { text-align: left; font-weight: 400; }

.layui-table[lay-skin=line] th,
.layui-table[lay-skin=line] td {
  border: none;
  border-bottom: 1px solid #eee;
}

.layui-table[lay-skin=line] tr:last-child td {
  border: none;
}

.layui-badge { display: inline-block; padding: 0 6px; font-size: 12px; height: 18px; line-height: 18px; color: #fff; border-radius: 2px; background-color: #ff5722; }

.layui-badge.layui-bg-red { background-color: #ff5722; }
.layui-badge.layui-bg-green { background-color: #009688; }
.layui-badge.layui-bg-blue { background-color: #1e9fff; }
.layui-badge.layui-bg-black { background-color: #2f4056; }
.layui-badge.layui-bg-orange { background-color: #ffb800; }

.layui-nav {
  position: relative;
  padding: 0 20px;
  background-color: #393D49;
  color: #fff;
  border-radius: 2px;
  font-size: 0;
}

.layui-nav * { font-size: 14px; }
.layui-nav .layui-nav-item { position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; line-height: 60px; }

.layui-nav .layui-nav-item a { display: block; padding: 0 20px; color: #c2c2c2; transition: all .3s; -webkit-transition: all .3s; }

.layui-nav .layui-this a { color: #fff; }
.layui-nav .layui-nav-child { display: none; position: absolute; left: 0; top: 65px; min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #d2d2d2; background-color: #fff; z-index: 100; border-radius: 2px; }

.layui-nav .layui-nav-more { content: ''; position: absolute; top: 50%; right: 3px; margin-top: -3px; border: 6px solid transparent; border-top-color: #c2c2c2; transition: all .2s; -webkit-transition: all .2s; }

.layui-nav .layui-nav-mored { margin-top: -9px; border: 6px solid transparent; border-bottom-color: #c2c2c2; }

.layui-tab { margin: 10px 0; }

.layui-tab-title { position: relative; height: 40px; line-height: 40px; padding: 0 15px; border-bottom: 1px solid #e6e6e6; white-space: nowrap; overflow: hidden; }

.layui-tab-title li { position: relative; display: inline-block; *display: inline; *zoom: 1; height: 40px; line-height: 40px; margin: 0 15px; text-align: center; color: #333; cursor: pointer; }

.layui-tab-title .layui-this { color: #009688; }

.layui-tab-title .layui-this:after { position: absolute; left: -15px; bottom: -1px; content: ''; width: calc(100% + 30px); height: 44px; border: 1px solid #e6e6e6; border-bottom: none; border-radius: 0; background-color: #fff; z-index: -1; }

.layui-tab-content { padding: 15px 0; }

.layui-progress { position: relative; height: 6px; border-radius: 20px; background-color: #e2e2e2; }

.layui-progress-bar { position: absolute; left: 0; top: 0; width: 0; max-width: 100%; height: 6px; border-radius: 20px; text-align: right; background-color: #5FB878; transition: all .3s; -webkit-transition: all .3s; }

.layui-progress-text { position: relative; top: -20px; line-height: 18px; font-size: 12px; color: #666; }

.layui-progress-number { padding-right: 10px; font-size: 12px; color: #666; }

.layui-collapse { border: 1px solid #e6e6e6; border-radius: 2px; }

.layui-colla-item { border-top: 1px solid #e6e6e6; }

.layui-colla-item:first-child { border-top: none; }

.layui-colla-title { position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #fafafa; cursor: pointer; font-size: 14px; overflow: hidden; }

.layui-colla-content { display: none; padding: 10px 15px; line-height: 22px; border-top: 1px solid #e6e6e6; color: #666; }

.layui-timeline { padding-left: 5px; }

.layui-timeline-item { position: relative; padding-bottom: 20px; }

.layui-timeline-axis { position: absolute; left: -5px; top: 0; width: 20px; height: 20px; line-height: 20px; background-color: #fff; color: #5FB878; border-radius: 50%; text-align: center; cursor: pointer; }

.layui-timeline-item:before { position: absolute; left: 5px; top: 0; z-index: -1; content: ''; width: 1px; height: 100%; background-color: #eee; }

.layui-timeline-item:last-child:before { display: none; }

.layui-timeline-content { padding-left: 25px; }

.layui-timeline-title { position: relative; margin-bottom: 5px; }

.layui-rate { font-size: 0; }

.layui-rate li { display: inline-block; margin-right: 5px; font-size: 20px; }

.layui-rate li i { cursor: pointer; }

.layui-rate li i:hover { transform: scale(1.15); -webkit-transform: scale(1.15); }

.layui-elem-quote { margin-bottom: 10px; padding: 15px; line-height: 22px; border-left: 5px solid #009688; border-radius: 0 2px 2px 0; background-color: #f2f2f2; }

.layui-panel { position: relative; border: 1px solid #d2d2d2; border-radius: 2px; background-color: #fff; color: #666; }

.layui-panel-win { position: relative; border: 1px solid #ccc; border-radius: 3px; background-color: #fff; box-shadow: 0 3px 5px rgba(0,0,0,.1); }

.layui-panel-win-title { height: 35px; line-height: 35px; padding: 0 10px; border-bottom: 1px solid #d2d2d2; font-size: 14px; }

.layui-panel-win-body { padding: 10px; }

.layui-panel-title { border-bottom: 1px solid #d2d2d2; padding: 0 10px; height: 40px; line-height: 40px; font-size: 14px; }

.layui-panel-body { padding: 10px; }

/* 响应式断点 */
@media screen and (max-width: 768px) {
  .layui-container { padding: 0 10px; }
}