:root {
    --color-dark: #142030;
    --color-dark-light: #3f4e60;
    --color-dark-contrast: #ffffff;

    --color-danger: #ff4d4f;
    --color-danger-light: #ff7875;
    --color-danger-contrast: #ffffff;

    --color-medium: #999;
    --color-medium-light: #ccc;
    --color-medium-contrast: #ffffff;

    --color-light: #ffffff;
    --color-light-light: #ffffff;
    --color-light-contrast: #203656;

    --color-primary: #1890ff;
    --color-primary-light: #40a9ff;
    --color-primary-contrast: #ffffff;

    --font-size: 14px;
    --radius-width: 5px;

    --space-width: 12px;
    --space-width-half: 6px;

    --light-background: #ffffff;
    --border-color: #ddd;
    --border-color-light: #eee;
    --button-height: 38px;
    --background: #f9f9f9;

    --fa-style-family: "Font Awesome 6";
}
html, body{
    font-size: var(--font-size);
    padding: 0;
    margin: 0;
    font-weight: normal;
    color: var(--color-dark);
    background: var(--background);
    font-family:  Arial, sans-serif;
}
*{box-sizing: border-box;}
a{text-decoration: none;}
a:hover{text-decoration: underline;}
.app-outlet {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-flow: row;
    user-select: none;
}
.app-outlet aside {
    overflow: hidden;
    display: flex;
    flex-flow: column;
}
.app-outlet aside:first-child {
    width: 92px;
    background: var(--color-dark);
    color: var(--color-dark-contrast);
}
.app-outlet aside .app-icon {
    height: calc(32px + var(--space-width) * 2);
    padding: var(--space-width-half);
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    font-size: 18px;
}
.app-outlet aside menu {
    margin: 0;
    padding: 0;
    flex: 1;
    overflow: auto;
}
.app-outlet aside menu .item {
    transition: 300ms;
    cursor: pointer;
    display: flex;
    flex-flow: row;
    height: var(--button-height);
    line-height: var(--button-height);
    margin: 0 var(--space-width-half) var(--space-width-half);
    padding: 0 var(--space-width);
    border-radius: var(--radius-width);
}
.app-outlet aside menu .item .start {
    width: 1.8em;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.app-outlet aside menu .item .center {
    display: flex;
    flex-flow: column;
    justify-content: center;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.app-outlet aside menu .item.active,
.app-outlet aside menu .item:hover {
    background: var(--color-dark-light);
}
.app-outlet aside menu .item:active{
    background: #637181;
}
/* 拓展菜单 */
.app-outlet .extend-module {
    width: 130px;
    background: var(--color-light);
    border-right: solid 1px var(--border-color);
}
.app-outlet .extend-module .module-name {
    height: calc(32px + var(--space-width) * 2);
    display: flex;
    flex-flow: column;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    border-bottom: solid 1px var(--border-color-light);
}
.app-outlet .extend-module menu{
    padding-top: var(--space-width-half);
}
.app-outlet .extend-module menu dl{
    margin: 0 var(--space-width-half);
    transition: .3s;
    font-weight: normal;
}
.app-outlet .extend-module menu dl:hover{
    background: #f9f9f9;
    border-radius: var(--radius-width);
}
.app-outlet .extend-module menu dl dt .item-hd {
    font-size: 12px;
    display: flex;
    flex-flow: row;
    padding: var(--space-width);
    cursor: pointer;
    transition: .3s;
    border-radius: var(--radius-width);
    color: var(--color-medium);
}
.app-outlet .extend-module menu dl dt .item-hd:hover{
    background: #ddd;
}
.app-outlet .extend-module menu dl dt .item-hd:active{
    background: #eee;
}
.app-outlet .extend-module menu dl dt .item-hd .start{
    width: 1.8em;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.app-outlet .extend-module menu dl dt .item-hd .center{flex: 1;}
.app-outlet .extend-module menu dl dt .item-hd .end{
    transition: .3s;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.app-outlet .extend-module menu dl dd{ height: 0; overflow: hidden; transition: .3s; }
.app-outlet .extend-module menu dl dd .item, .app-outlet .extend-module menu dl dt .item{margin: 0 0 var(--space-width-half) 0; font-weight: normal;}
.app-outlet .extend-module menu dl dd .item:first-child {margin-top: var(--space-width-half);}
.app-outlet .extend-module menu dl dd .item:last-child {margin-bottom: 0;}
.app-outlet .extend-module menu dl.open dt .item-hd .end{ transform: rotate(90deg); }
.app-outlet .extend-module menu dl.open dd{ height: fit-content; }
.app-outlet .extend-module menu .item:hover, .app-outlet .extend-module menu .item.active {
    background: #ddd;
}
.app-outlet .extend-module menu .item:active {
    background: #eee;
}
/* 主体内容区 */
.app-outlet .app-container {
    flex: 1;
    display: flex;
    flex-flow: column;
}
.app-outlet .app-container header {
    height: calc(32px + var(--space-width) * 2);
    background: var(--light-background);
    padding: var(--space-width);
    border-bottom: solid 1px var(--border-color);
    display: flex;
    flex-flow: row;
}
.app-outlet .app-container header .start{ padding-right: var(--space-width); }
.app-outlet .app-container header .center{ flex: 1; }
.app-outlet .app-container header .end{ padding-left: var(--space-width); }
.app-outlet .app-container main {
    flex: 1;
}

/* 登陆页面 */
.login-page {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.login-page .form-border {
    width: 300px;
    height: 400px;
    display: flex;
    flex-flow: row;
    margin: 0 auto;
    border: solid 1px var(--border-color);
    position: relative;
    z-index: 5;
}
.login-page .form-border .ad-page {
    flex: 1;
}
.login-page .form-border .form {
    display: flex;
    flex-flow: column;
    justify-content: center;
    width: 300px;
    background: var(--light-background);
}
.login-page .form-border .form .field {
    margin-top: var(--space-width);
}
.login-page .form-border .form .field:first-child {
    margin-top: 0;
}
.login-page .form-border .form .field .label {
    margin-bottom: var(--space-width-half);
    display: block;
    font-weight: bold;
}
.login-page .background {
    position: fixed;
    bottom: -20vh;
    left: -50%;
    width: 200%;
    display: flex;
    flex-flow: row;
    flex: 1;
    z-index: 1;
    transform:perspective(2000px) rotateX(45deg);
}
.login-page .background .column {
    flex: 1;
    border-right: solid 1px #ddd;
}
.login-page .background .column:last-child { border-right: none ;}
.login-page .background .column .row {
    height: 5vh;
    border-bottom: solid 1px #ddd;
}
.login-page .background .column .row:last-child { border-bottom: none;}
/* 模块列表 */
.module-list {
    overflow: auto;
    padding: var(--space-width-half);
}
.module-list .module-item {
    float: left;
    width: 240px;
    height: 360px;
    overflow: hidden;
    border-radius: var(--radius-width);
    border: solid 1px var(--border-color);
    background: #fff;
    margin: var(--space-width-half);
    transition: .3s;
    position: relative;
    padding-top: 30px;
}
.module-list .module-item .icon {
    width: 56px;
    height: 56px;
    display: flex;
    margin: 0 auto;
    text-align: center;
    flex-flow: column;
    justify-content: center;
    background: var(--color-primary-light);
    color: var(--color-primary-contrast);
    border-radius: 50%;
    font-size: 32px;
}
.module-list .module-item .toggle{
    position: absolute;
    right: var(--space-width);
    top: var(--space-width);
    opacity: 0;
    transition: .3s;
}
.module-list .module-item.plus {
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    border-style: dashed;
}
.module-list .module-item.plus .btn{
    width: 56px;
    height: 56px;
    border: dashed 1px var(--border-color);
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transition: .3s;
}
.module-list .module-item.plus .btn:before, .module-list .module-item.plus .btn:after{
    content: '';
    position: absolute;
    display: block;
    transition: .3s;
}
.module-list .module-item.plus .btn:before {
    top: 50%;
    left: 50%;
    width: 50%;
    border-top: dashed 1px var(--border-color);
    transform: translateX(-50%);
}
.module-list .module-item.plus .btn:after {
    top: 50%;
    left: 50%;
    height: 50%;
    border-left: dashed 1px var(--border-color);
    transform: translateY(-50%);
}
.module-list .module-item.plus .label{
    color: var(--border-color);
    padding-top: 10px;
    text-align: center;
    transition: .3s;
}
.module-list .module-item:hover {
    border-color: var(--color-primary);
}
.module-list .module-item.plus:hover .btn, .module-list .module-item.plus:hover .btn:before, .module-list .module-item.plus:hover .btn:after{ border-color: var(--color-primary);}
.module-list .module-item.plus:hover .label{color: var(--color-primary);}
.module-list .module-item.plus:active{ background: #f9f9f9; }
.module-list .module-item:hover .toggle{ opacity: 1; }
/* 表单 */
.ui.form .field {
    margin-top: var(--space-width);
}
.ui.form .field:first-child {
    margin-top: 0;
}
.ui.form .field .label {
    margin-bottom: var(--space-width-half);
    display: block;
    font-weight: bold;
}
.ui.form .fields {
    display: flex;
    flex-flow: row;
    margin-top: var(--space-width);
}
.ui.form .fields:first-child {
    margin-top: 0;
}
.ui.form .fields .field {
    margin-top: 0;
    margin-right: var(--space-width);
}
.ui.form .fields .field:last-child {
    margin-right: 0;
}
.ui.flex-item {
    display: flex;
    flex-flow: row;
}
.ui.flex-item .start {
    padding-right: var(--space-width);
}
.ui.flex-item .center {
    flex: 1;
}
.ui.flex-item .end {
    padding-left: var(--space-width);
}
/* 其它 */
.justify-center {
    display: flex;flex-flow: column;justify-content: center;
}
.text-bold{ font-weight: bold; }
.text-small{ font-size: 12px; }
.text-right { text-align: right; }
.text-center{ text-align: center; }
.auto-margin{ margin: 0 auto; }
.padding{ padding: var(--space-width); }
.padding-top{ padding-top: var(--space-width); }
.padding-left{ padding-left: var(--space-width); }
.padding-right{ padding-right: var(--space-width); }
.padding-bottom{ padding-bottom: var(--space-width); }
.padding-half{ padding: var(--space-width-half); }
.padding-top-half{ padding-top: var(--space-width-half); }
.padding-left-half{ padding-left: var(--space-width-half); }
.padding-right-half{ padding-right: var(--space-width-half); }
.padding-bottom-half{ padding-bottom: var(--space-width-half); }
.padding-half{ padding: var(--space-width-half); }
.margin{ margin: var(--space-width); }
.margin-top{ margin-top: var(--space-width); }
.margin-left{ margin-left: var(--space-width); }
.margin-right{ margin-right: var(--space-width); }
.margin-bottom{ margin-bottom: var(--space-width); }
.margin-top-half{ margin-top: var(--space-width-half); }
.margin-left-half{ margin-left: var(--space-width-half); }
.margin-right-half{ margin-right: var(--space-width-half); }
.margin-bottom-half{ margin-bottom: var(--space-width-half); }
.margin-half{ margin: var(--space-width-half); }
.dark-text{ color: var(--color-dark); }
.danger-text{ color: var(--color-danger); }
.medium-text{ color: var(--color-medium); }
.primary-text{ color: var(--color-primary); }
.max-one-line-text{
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    word-break:break-all;
    display:-webkit-box!important;
    -webkit-line-clamp: 1;
    -webkit-box-orient:vertical;
}
/* 重写ANT DESIGN的一些组件样式 */
.ant-modal .ant-modal-content .ant-modal-header .ant-modal-title:before {
    content: "\f05a";
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
    margin-right: var(--space-width);
    font-weight: 700;
}
.ant-modal .ant-modal-content .ant-modal-close {
    margin: 0;
    height: 32px;
    width: 32px;
    overflow: hidden;
    border-radius: 50%;
    background: #eee;
    transition: 300ms;
}
.ant-modal .ant-modal-content .ant-modal-close .ant-modal-close-x {
    height: 32px;
    width: 32px;
    line-height: 32px;
}
.ant-modal .ant-modal-content .ant-modal-close .ant-modal-close-x span {
    display: none!important;
}
.ant-modal .ant-modal-content .ant-modal-close .ant-modal-close-x::after {
    content: "\f00d";
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}
.ant-modal .ant-modal-content .ant-modal-close:hover {
    background: var(--color-danger);
    color: var(--color-danger-contrast);
}
.ant-modal.iframe-body {
    width: 800px!important;
}
.ant-modal.iframe-body .ant-modal-content .ant-modal-body {
    padding: 0!important;
    height: 650px;
}
.ant-drawer .ant-drawer-content .ant-drawer-close {
    height: 32px;
    width: 32px;
    line-height: 32px;
    border-radius: 50%;
    transition: 300ms;
    background: #eee;
}
.ant-drawer .ant-drawer-content .ant-drawer-close span {
    display: none!important;
}
.ant-drawer .ant-drawer-content .ant-drawer-close::after {
    content: "\f00d";
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}
.ant-drawer .ant-drawer-content .ant-drawer-close:hover {
    background: var(--color-danger);
    color: var(--color-danger-contrast);
}

.ant-notification-notice-close {
    border-radius: 50%!important;
    background: #eee;
    transition: 300ms;
}
.ant-notification-notice-close:hover {
    background: var(--color-danger)!important;
    color: var(--color-danger-contrast)!important;
    text-decoration: none;
}
.ant-notification-notice-close .ant-notification-close-x{display: none!important;}
.ant-notification-notice-close::after {
    content: "\f00d";
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}