:root {
    --vt-c-white: #ffffff;
    --vt-c-white-soft: #f8f8f8;
    --vt-c-white-mute: #f2f2f2;

    --vt-c-black: #181818;
    --vt-c-black-soft: #222222;
    --vt-c-black-mute: #282828;

    --vt-c-indigo: #2c3e50;

    --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
    --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
    --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
    --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

    --vt-c-text-light-1: var(--vt-c-indigo);
    --vt-c-text-light-2: rgba(60, 60, 60, 0.88);
    --vt-c-text-light-3: rgba(60, 60, 60, 0.66);
    --vt-c-text-dark-1: var(--vt-c-white);
    --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);

    --zgc-bottom-height: 400px;
    --zgc-bottom-news-margin-botton: 20px;
    --zgc-bottom-news-height: 113px;

    --custom-layui-input-height: 40px;
    --custom-layui-input-suffix-million-width: 55px;
    --custom-layui-color: #59a9f1;
}

:root {
    --color-background: var(--vt-c-white);
    --color-background-soft: var(--vt-c-white-soft);
    --color-background-mute: var(--vt-c-white-mute);

    --color-border: var(--vt-c-divider-light-2);
    --color-border-hover: var(--vt-c-divider-light-1);

    --color-heading: var(--vt-c-text-light-1);
    --color-text: var(--vt-c-text-light-1);

    --section-gap: 160px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: var(--vt-c-black);
        --color-background-soft: var(--vt-c-black-soft);
        --color-background-mute: var(--vt-c-black-mute);

        --color-border: var(--vt-c-divider-dark-2);
        --color-border-hover: var(--vt-c-divider-dark-1);

        --color-heading: var(--vt-c-text-dark-1);
        --color-text: var(--vt-c-text-dark-2);
    }
}

/*==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ====*/

.frame {
    margin: 30px 90px auto 30px;
    font-size: 16px;
}

.common-table {
    margin: 20px 7em 20px 1.5em;
}

.common-table thead {
    background-color: #e3e7ee;
}

.common-table thead tr th {
    font-size: 20px;
    color: var(--color-text);
}

.common-table {
    /*border: 1px solid #dddddd50;*/
}
.common-table tbody td {
    border: 1px solid rgba(203, 203, 203, 0.31);
}

.table-data tbody td.common-table-ele-name {
    text-align: right;
    padding-right: 1.2em;
    font-size: 16px;
}

.common-hr {
    margin: 15px 0 15px;
    border-bottom: 2px solid #eee !important;
}

.common-bottom-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2em 0 1em;
}

.common-bottom-buttons .u-btn {
    font-size: 16px;
    text-align: center;
    height: 30px;
    margin: 1em;
}

/*==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ====*/

.layui-form-radio:hover>*, .layui-form-radioed, .layui-form-radioed>i {
    color: var(--custom-layui-color);
}

.layui-form-select dl dd.layui-this {
    color: var(--custom-layui-color);
}

.layui-form-checkbox[lay-skin=primary]:hover>i {
    border-color: var(--custom-layui-color);
}
.layui-form-checked[lay-skin=primary]>i {
    border-color: var(--custom-layui-color)!important;
    background-color: var(--custom-layui-color);
}

.layui-form-label {
    font-size: 16px;
}

.layui-form-item .layui-input-inline {
    width: 350px;
}

.layui-form-pane .layui-form-label {
    height: var(--custom-layui-input-height);
}
.layui-input {
    height: var(--custom-layui-input-height);
    font-size: 17px;
}

.layui-table {
}

.layui-table thead tr th {
    text-align: center;
    font-size: 16px;
}

.layui-table tbody tr td {
    text-align: center;
    font-size: 16px;
    color: #333;
}