html, body {
    padding: 0;
    word-break: break-all;
}

header {
    background-color: #58b7ff;
    color: #fff;
}

header .title {
    padding: 10px 15px;
    line-height: 40px;
    font-size: 25px;
}

section {
    padding: 15px 15px 0 15px;
}

#searchForm input {
    height: 30px;
    line-height: 28px;
}

#searchForm .layui-input-suffix,
#searchForm .layui-input-prefix {
    line-height: 30px;
    padding: 0;
}

#addUserForm {
    padding: 15px 15px 0 15px;
}

#addUserForm .layui-form-item:last-child {
    margin-bottom: 0;
}

#addUserForm .layui-textarea {
    min-height: 80px;
    padding: 9px 10px;
    resize: none;
}

.layui-form-label {
    width: 140px;
}

.layui-input-block {
    margin-left: 170px;
}

.layui-btn-sm {
    line-height: 28px;
}

.layui-btn-xs {
    line-height: 20px;
}

.layui-btn-container {
    height: 30px;
}

.layui-layer-btn > a[class^=layui-layer-btn] {
    line-height: 28px;
}

.layui-table-page {
    margin-bottom: 0;
}

/*以下重置用到的layui组件的颜色*/

.layui-btn {
    background-color: #409eff;
}

.layui-layer-btn .layui-layer-btn0 {
    background-color: #409eff;
}

.layui-btn-primary {
    background-color: transparent;
}

.layui-btn-primary:hover {
    border-color: #79bbff;
}

.layui-input:focus,
.layui-textarea:focus {
    border-color: #79bbff !important;
    box-shadow: none;
}

.layui-form-danger + .layui-form-select .layui-input,
.layui-form-danger:focus {
    border-color: #ff5722 !important;
}

.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: #409eff;
}

.layui-laypage input:focus, .layui-laypage select:focus {
    border-color: #79bbff !important;
    box-shadow: none;
}

.layui-table-view .layui-table td[data-edit]:hover:after {
    border-color: #79bbff;
}

.layui-form-checkbox[lay-skin=primary]:hover > i {
    border-color: #79bbff;
}

.layui-form-checked[lay-skin=primary] > i {
    background-color: #409eff;
    border-color: #409eff !important;
}

.layui-table-checked {
    background-color: #ecf5ff;
}

.layui-table-checked:hover {
    background-color: #d9ecff;
}

@media (prefers-color-scheme: dark) {
    header {
        background-color: #395c74;
    }

    .layui-btn {
        background-color: #4f80a1;
    }

    .layui-layer-btn .layui-layer-btn0 {
        background-color: #4f80a1;
    }

    .layui-btn-primary {
        background-color: transparent;
        border-color: #666;
    }

    .layui-btn-primary:hover {
        border-color: #666;
    }

    .layui-input:focus,
    .layui-textarea:focus {
        border-color: #666 !important;
        box-shadow: none;
    }

    .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: #4f80a1;
    }

    .layui-laypage input:focus, .layui-laypage select:focus {
        border-color: #666 !important;
        box-shadow: none;
    }

    .layui-table-view .layui-table td[data-edit]:hover:after {
        border-color: #666;
    }

    .layui-form-checkbox[lay-skin=primary]:hover > i {
        border-color: #666;
    }

    .layui-form-checked[lay-skin=primary] > i {
        background-color: #4f80a1;
        border-color: #4f80a1 !important;
    }

    .layui-table-checked {
        background-color: rgba(255, 255, 255, .04);
    }

    .layui-table-checked:hover {
        background-color: rgba(255, 255, 255, .08);
    }
}