@charset "utf-8";

:root {
    --ui-bg: #f4f6f8;
    --ui-surface: #ffffff;
    --ui-surface-muted: #f8fafb;
    --ui-border: #dfe5ea;
    --ui-border-strong: #cbd4dc;
    --ui-text: #27313d;
    --ui-text-muted: #66727f;
    --ui-primary: #0b8f67;
    --ui-primary-dark: #087452;
    --ui-warning: #d98b12;
    --ui-danger: #d84a4a;
    --ui-info: #2878b8;
    --ui-sidebar: #202a35;
    --ui-sidebar-active: #111820;
    --ui-shadow: 0 1px 3px rgba(31, 45, 61, .08);
}

html,
body {
    color: var(--ui-text);
    letter-spacing: 0;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

body,
body.gray-bg {
    background: var(--ui-bg);
}

a {
    color: var(--ui-info);
}

a:hover,
a:focus {
    color: #1d5f96;
}

/* Main shell */
.navbar-static-side {
    background: var(--ui-sidebar);
}

.nav-header {
    padding: 20px 18px 16px;
    background: var(--ui-sidebar);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.nav-header .img-circle {
    border: 2px solid rgba(255, 255, 255, .7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.backend-brand-title {
    display: block;
    margin-bottom: 14px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}

.nav-header .text-muted {
    color: #cbd4dc;
}

.logo-element {
    background: var(--ui-sidebar-active);
    color: #fff;
}

.navbar-default .nav > li > a {
    color: #c5ced7;
    padding-top: 13px;
    padding-bottom: 13px;
    border-left: 3px solid transparent;
}

.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.navbar-default .nav > li.active {
    border-left: 0;
    background: var(--ui-sidebar-active);
}

.navbar-default .nav > li.active > a {
    color: #fff;
    border-left-color: var(--ui-primary);
    background: var(--ui-sidebar-active);
}

.nav-second-level {
    background: #19232d;
    padding: 5px 0 7px;
}

.nav-second-level li a {
    padding-top: 10px;
    padding-bottom: 10px;
}

.nav-second-level li a:hover,
.nav-second-level li a:focus {
    color: #fff;
    background: rgba(11, 143, 103, .18);
}

.navbar-static-top {
    min-height: 54px;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
}

.minimalize-styl-2 {
    margin: 10px 5px 8px 20px;
}

.backend-top-title {
    display: inline-block;
    margin: 16px 0 0 14px;
    color: var(--ui-text);
    font-size: 15px;
    font-weight: 600;
    vertical-align: top;
}

.content-tabs {
    height: 42px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.content-tabs .roll-nav,
.page-tabs a {
    height: 41px;
    line-height: 41px;
    border-color: var(--ui-border);
}

.page-tabs a {
    color: var(--ui-text-muted);
}

.page-tabs a.active {
    color: var(--ui-primary);
    border-top: 2px solid var(--ui-primary);
    background: var(--ui-surface);
}

.footer {
    color: var(--ui-text-muted);
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-border);
}

/* Page structure */
.wrapper,
.wrapper-content,
.gray-bg > form,
body > form {
    background: var(--ui-bg);
}

.wrapper-content {
    padding: 16px;
}

.ibox,
.panel,
.content-card,
.form-card {
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow);
}

.ibox-title,
.panel-heading {
    min-height: 46px;
    padding: 13px 16px;
    color: var(--ui-text);
    background: var(--ui-surface);
    border-color: var(--ui-border);
    border-radius: 6px 6px 0 0;
}

.ibox-content,
.panel-body {
    padding: 16px;
    background: var(--ui-surface);
    border-color: var(--ui-border);
}

.toolbar,
.search-panel,
.search-area {
    padding: 14px 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    box-shadow: var(--ui-shadow);
}

/* Tables and grids */
.table,
table.tableStyle {
    width: 100%;
    color: var(--ui-text);
    background: var(--ui-surface);
    border-color: var(--ui-border);
}

.table > thead > tr > th,
table.tableStyle > thead > tr > th,
.ui-jqgrid .ui-jqgrid-htable th {
    padding: 10px 8px;
    color: #45515e;
    font-weight: 600;
    background: #eef2f5;
    border-color: var(--ui-border);
    vertical-align: middle;
}

.table > tbody > tr > td,
table.tableStyle > tbody > tr > td {
    padding: 9px 8px;
    border-color: var(--ui-border);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover,
.ui-jqgrid-btable tr:hover td {
    background: #f1f8f5;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: #fbfcfd;
}

.ui-jqgrid {
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    box-shadow: none;
}

.ui-jqgrid .ui-jqgrid-titlebar,
.ui-jqgrid .ui-jqgrid-pager {
    color: var(--ui-text);
    background: var(--ui-surface-muted);
    border-color: var(--ui-border);
}

/* Forms */
label,
.control-label,
.form-label {
    color: #4b5663;
    font-weight: 600;
}

.form-control,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: 4px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
select {
    min-height: 34px;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 2px rgba(11, 143, 103, .12);
    outline: 0;
}

textarea {
    min-height: 88px;
    resize: vertical;
}

.help-block,
.help-text,
.text-muted,
.muted {
    color: var(--ui-text-muted);
}

/* Buttons and states */
.btn {
    min-height: 32px;
    border-radius: 4px;
    font-weight: 500;
    box-shadow: none;
}

.btn-primary,
.btn-success {
    color: #fff;
    background: var(--ui-primary);
    border-color: var(--ui-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    color: #fff;
    background: var(--ui-primary-dark);
    border-color: var(--ui-primary-dark);
}

.btn-info {
    color: #fff;
    background: var(--ui-info);
    border-color: var(--ui-info);
}

.btn-warning {
    color: #fff;
    background: var(--ui-warning);
    border-color: var(--ui-warning);
}

.btn-danger {
    color: #fff;
    background: var(--ui-danger);
    border-color: var(--ui-danger);
}

.btn-default,
.btn-white {
    color: var(--ui-text);
    background: var(--ui-surface);
    border-color: var(--ui-border-strong);
}

.label,
.badge,
.badge-soft {
    border-radius: 3px;
    font-weight: 500;
}

.pagination > li > a,
.pagination > li > span {
    color: var(--ui-text);
    border-color: var(--ui-border);
}

.pagination > .active > a,
.pagination > .active > span {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
}

/* Dialogs and feedback */
.modal-content,
.layui-layer,
.sweet-alert {
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(31, 45, 61, .18);
}

.modal-header,
.layui-layer-title {
    color: var(--ui-text);
    background: var(--ui-surface-muted);
    border-color: var(--ui-border);
}

.alert {
    border-radius: 4px;
}

/* Legacy QUI pages */
.tableStyle {
    border-collapse: collapse;
}

.tableStyle td {
    padding: 9px 10px;
    border: 1px solid var(--ui-border);
}

.box1,
.box2,
.box4,
.contentStyle,
.contentStyleLeft {
    color: var(--ui-text);
    background-color: var(--ui-surface);
    border-color: var(--ui-border);
}

/* Login */
body.signin {
    min-height: 100vh;
    background: #e9eef2;
}

.signinpanel {
    width: min(900px, calc(100% - 32px));
    margin: 8vh auto 0;
}

.signinpanel .row {
    overflow: hidden;
    margin: 0;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    box-shadow: 0 16px 38px rgba(31, 45, 61, .16);
}

.signinpanel .col-sm-7 {
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf5f1;
}

.signinpanel .col-sm-7 img {
    display: block;
    max-width: 92%;
    max-height: 330px;
    object-fit: contain;
}

.signinpanel .col-sm-5 {
    min-height: 390px;
    display: flex;
    align-items: center;
    background: var(--ui-surface);
}

.signinpanel form {
    width: 100%;
    margin: 0;
    padding: 38px 32px;
    background: transparent;
}

.signinpanel form h4 {
    margin-bottom: 28px;
}

.signinpanel form h4 span {
    color: var(--ui-text) !important;
    font-size: 22px !important;
    font-weight: 600;
}

.signinpanel .form-control {
    height: 42px;
    margin-bottom: 14px;
    color: var(--ui-text);
    background-color: #fff;
    border: 1px solid var(--ui-border-strong);
}

.signinpanel .btn {
    height: 42px;
    margin-top: 6px;
    font-size: 15px;
}

.signup-footer {
    margin-top: 18px;
    color: #5f6b77;
    text-align: center;
}

.signup-footer .pull-left {
    float: none !important;
}

.signup-footer a {
    color: #4c6478 !important;
}

@media (max-width: 767px) {
    .wrapper-content {
        padding: 10px;
    }

    .toolbar,
    .search-panel,
    .search-area,
    .ibox-content,
    .panel-body {
        padding: 12px;
    }

    .table-responsive,
    .pre-scrollable {
        overflow-x: auto;
    }

    .signinpanel {
        margin-top: 20px;
    }

    .signinpanel .col-sm-7 {
        display: none;
    }

    .signinpanel .col-sm-5 {
        min-height: 0;
    }

    .signinpanel form {
        padding: 30px 22px;
    }

    .backend-top-title {
        display: none;
    }
}