/* TraceLab UI foundation.
 * Replaces the small subset of framework reset/form rules used by this project.
 */
html, body, button, input, select, textarea {
  font-family: Calibri, Helvetica, "PingFang SC", Tahoma, Arial, sans-serif;
}
body { line-height: 24px; font: 14px Calibri, Helvetica, "PingFang SC", Tahoma, Arial, sans-serif; }

blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6,
input, li, ol, p, pre, table, td, textarea, th, ul {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

button, input, optgroup, option, select, textarea {
  font: inherit;
  color: inherit;
  outline: 0;
}

button, input, select, textarea { box-sizing: border-box; }
img { display: inline-block; border: 0; vertical-align: middle; }
li { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
h4, h5, h6 { font-size: 100%; }
a { color: #333; text-decoration: none; }

/* Existing project markup keeps these historical class names as stable hooks.
 * Their visual behavior is owned here; no external UI framework is loaded.
 */
.layui-inline { position: relative; display: inline-block; vertical-align: middle; }
.layui-form {}
.layui-form-item { margin-bottom: 15px; clear: both; }
.layui-form-item::after { content: ""; display: block; clear: both; }
.layui-form-label {
  position: relative;
  float: left;
  display: block;
  width: 80px;
  padding: 9px 15px;
  font-weight: 400;
  line-height: 20px;
  text-align: right;
}
.layui-input-block { position: relative; min-height: 36px; margin-left: 110px; }

.layui-input, .layui-select, .layui-textarea {
  height: 38px;
  border-width: 0;
  border-style: solid;
  border-radius: 2px;
  background-color: #fff;
  line-height: 1.3;
  outline: 0;
  -webkit-appearance: none;
  box-sizing: border-box;
  transition: all .3s;
}
.layui-input, .layui-textarea {
  display: block;
  width: 100%;
  padding-left: 10px;
}
.layui-select { padding: 0 10px; }
.layui-textarea {
  position: relative;
  min-height: 100px;
  height: auto;
  padding: 6px 10px;
  line-height: 20px;
  resize: vertical;
}
.layui-form input[type=checkbox],
.layui-form input[type=radio],
.layui-form select { display: none; }
.layui-form [lay-ignore] { display: initial; }

.layui-btn {
  display: inline-block;
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 2px;
  background-color: #009688;
  color: #fff;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
}
.layui-btn:hover { color: #fff; opacity: .9; }
.layui-btn-sm { height: 30px; padding: 0 10px; font-size: 14px; line-height: 30px; }
.layui-btn-primary { border: 1px solid #c9c9c9; background: #fff; color: #555; }
.layui-btn-primary:hover { border-color: #009688; color: #333; }

.layui-side {}
.layui-side-scroll {}
.layui-bg-black { color: #fff !important; }
.layui-tab-title { position: relative; left: 0; height: 40px; white-space: nowrap; font-size: 0; }
.layui-tab-title li { display: inline-block; vertical-align: middle; font-size: 14px; text-align: center; cursor: pointer; }
.layui-this { position: relative; }

/* Replacement for the former icon-font calendar glyph. */
.trace-date-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  cursor: pointer;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h2a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h2V2Zm12 8H5v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9ZM6 6a1 1 0 0 0-1 1v1h14V7a1 1 0 0 0-1-1H6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h2a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h2V2Zm12 8H5v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9ZM6 6a1 1 0 0 0-1 1v1h14V7a1 1 0 0 0-1-1H6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.layui-col-md4, .layui-col-md8 {
  position: relative;
  display: block;
  box-sizing: border-box;
}
@media screen and (min-width: 992px) {
  .layui-col-md4, .layui-col-md8 { float: left; }
  .layui-col-md4 { width: 33.33333333%; }
  .layui-col-md8 { width: 66.66666667%; }
}