/**** 浅色主题 ****/
.lightColorTheme {
    --bgcolor-functionBar: #ffffff;
    --color-functionBar: #000000;
    --bgcolor-listBar-header: #f9f9f9;
    --color-listBar-header: #000000;
    --bgcolor-listBar: #f9f9f9;
    --color-listBar: #000000;
    --bgcolor-resizeBar: #eaeaea;
    --bgcolor-contentBar: #f6f6f6;
    --color-contentBar: #000000;

    --bgcolor-listBar-listBar: #f9f9f9;
    --bgcolor-listBar-listBar-Icon: #ffffff;
    --bgcolor-listBar-listBar-Title: #f9f9f9;
    --color-listBar-listBar-Description: #868686;
    --bgcolor-listBar-listBarHover: #f2f2f2;
    --bgcolor-listBar-listBarHover-Icon: #ffffff;
    --bgcolor-listBar-listBarHover-Title: #f2f2f2;
    --color-listBar-listBarHover-Description: #868686;
    --bgcolor-listBar-listBarSelected: #ebebeb;
    --bgcolor-listBar-listBarSelected-Icon: #ffffff;
    --bgcolor-listBar-listBarSelected-Title: #ebebeb;
    --color-listBar-listBarSelected-Description: #868686;
}

/**** 深色主题 ****/
.darkTheme {
    --bgcolor-functionBar: #333333;
    --color-functionBar: #cccccc;
    --bgcolor-listBar-header: #333333;
    --color-listBar-header: #cccccc;
    --bgcolor-listBar: #262626;
    --color-listBar: #cccccc;
    --bgcolor-resizeBar: #4d4d4d;
    --bgcolor-contentBar: #1e1e1e;
    --color-contentBar: #d4d4d4;

    --bgcolor-listBar-listBar: #262626;
    --bgcolor-listBar-listBar-Icon: #222222;
    --bgcolor-listBar-listBar-Title: #262626;
    --color-listBar-listBar-Description: #cccccc;
    --bgcolor-listBar-listBarHover: #2a2d2e;
    --bgcolor-listBar-listBarHover-Icon: #222222;
    --bgcolor-listBar-listBarHover-Title: #2a2d2e;
    --color-listBar-listBarHover-Description: #cccccc;
    --bgcolor-listBar-listBarSelected: #37373d;
    --bgcolor-listBar-listBarSelected-Icon: #222222;
    --bgcolor-listBar-listBarSelected-Title: #37373d;
    --color-listBar-listBarSelected-Description: #cccccc;
}

:root{
    --vw:100vw;
    --vh:100vh;
}

/**** 栏目配色 ****/
#colorTheme .functionBar,
#colorTheme .functionBar .functionBarButtom {
    background-color: var(--bgcolor-functionBar);
    color: var(--color-functionBar);
}

#colorTheme .listBar header {
    background-color: var(--bgcolor-listBar-header);
    color: var(--color-listBar-header);
}

#colorTheme .listBar,
#colorTheme .listBar .listBarSwitch {
    background-color: var(--bgcolor-listBar);
    color: var(--color-listBar);
}

#colorTheme .resizeBar {
    background-color: var(--bgcolor-resizeBar);
}

#colorTheme .contentBar {
    background-color: var(--bgcolor-contentBar);
    color: var(--color-contentBar);
}

#colorTheme .listBar .listBar4x,
#colorTheme .listBar .listBar6x,
#colorTheme .listBar .listBar4Narrow,
#colorTheme .listBar .listBar4Broaden {
    background-color: var(--bgcolor-listBar-listBar);
}

#colorTheme .listBar .listBar6x>.listBarIcon,
#colorTheme .listBar .listBar4Narrow>.listBarFocus,
#colorTheme .listBar .listBar4Narrow>.listBarIcon,
#colorTheme .listBar .listBar4Broaden>.listBarFocus,
#colorTheme .listBar .listBar4Broaden>.listBarIcon {
    background-color: var(--bgcolor-listBar-listBar-Icon);
}

#colorTheme .listBar .listBar4x>.listBarTitle,
#colorTheme .listBar .listBar4x>.listBarDescription,
#colorTheme .listBar .listBar4x>.listBarLabel:after,
#colorTheme .listBar .listBar4x>.listBarLabel,
#colorTheme .listBar .listBar4x>.listBarEndnote,
#colorTheme .listBar .listBar6x>.listBarTitle,
#colorTheme .listBar .listBar6x>.listBarDescription,
#colorTheme .listBar .listBar6x>.listBarLabel:after,
#colorTheme .listBar .listBar6x>.listBarLabel,
#colorTheme .listBar .listBar6x>.listBarEndnote,
#colorTheme .listBar .listBar4Narrow>.listBarTitle,
#colorTheme .listBar .listBar4Narrow>.listBarEndnote,
#colorTheme .listBar .listBar4Broaden>.listBarTitle,
#colorTheme .listBar .listBar4Broaden>.listBarEndnote {
    background-color: var(--bgcolor-listBar-listBar-Title);
}

#colorTheme .listBar .listBar4x>.listBarDescription,
#colorTheme .listBar .listBar4x>.listBarLabel,
#colorTheme .listBar .listBar4x>.listBarEndnote,
#colorTheme .listBar .listBar6x>.listBarDescription,
#colorTheme .listBar .listBar6x>.listBarLabel,
#colorTheme .listBar .listBar6x>.listBarEndnote,
#colorTheme .listBar .listBar4Narrow>.listBarEndnote,
#colorTheme .listBar .listBar4Broaden>.listBarEndnote {
    color: var(--color-listBar-listBar-Description);
}

#colorTheme .listBar .listBar4x>.listBarLabel:before,
#colorTheme .listBar .listBar4x>.listBarEndnote:before,
#colorTheme .listBar .listBar6x>.listBarLabel:before,
#colorTheme .listBar .listBar6x>.listBarEndnote:before,
#colorTheme .listBar .listBar4Narrow>.listBarEndnote:before,
#colorTheme .listBar .listBar4Broaden>.listBarEndnote:before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.0), var(--bgcolor-listBar-listBar-Title));
}

#colorTheme .listBar .listBar4x:hover,
#colorTheme .listBar .listBar6x:hover,
#colorTheme .listBar .listBar4Narrow:hover,
#colorTheme .listBar .listBar4Broaden:hover {
    background-color: var(--bgcolor-listBar-listBarHover);
}

#colorTheme .listBar .listBar6x:hover>.listBarIcon,
#colorTheme .listBar .listBar4Narrow:hover>.listBarFocus,
#colorTheme .listBar .listBar4Narrow:hover>.listBarIcon,
#colorTheme .listBar .listBar4Broaden:hover>.listBarFocus,
#colorTheme .listBar .listBar4Broaden:hover>.listBarIcon {
    background-color: var(--bgcolor-listBar-listBarHover-Icon);
}

#colorTheme .listBar .listBar4x:hover>.listBarTitle,
#colorTheme .listBar .listBar4x:hover>.listBarDescription,
#colorTheme .listBar .listBar4x:hover>.listBarLabel:after,
#colorTheme .listBar .listBar4x:hover>.listBarLabel,
#colorTheme .listBar .listBar4x:hover>.listBarEndnote,
#colorTheme .listBar .listBar6x:hover>.listBarTitle,
#colorTheme .listBar .listBar6x:hover>.listBarDescription,
#colorTheme .listBar .listBar6x:hover>.listBarLabel:after,
#colorTheme .listBar .listBar6x:hover>.listBarLabel,
#colorTheme .listBar .listBar6x:hover>.listBarEndnote,
#colorTheme .listBar .listBar4Narrow:hover>.listBarTitle,
#colorTheme .listBar .listBar4Narrow:hover>.listBarEndnote,
#colorTheme .listBar .listBar4Broaden:hover>.listBarTitle,
#colorTheme .listBar .listBar4Broaden:hover>.listBarEndnote {
    background-color: var(--bgcolor-listBar-listBarHover-Title);
}

#colorTheme .listBar .listBar4x:hover>.listBarDescription,
#colorTheme .listBar .listBar4x:hover>.listBarLabel,
#colorTheme .listBar .listBar4x:hover>.listBarEndnote,
#colorTheme .listBar .listBar6x:hover>.listBarDescription,
#colorTheme .listBar .listBar6x:hover>.listBarLabel,
#colorTheme .listBar .listBar6x:hover>.listBarEndnote,
#colorTheme .listBar .listBar4Narrow:hover>.listBarEndnote,
#colorTheme .listBar .listBar4Broaden:hover>.listBarEndnote {
    color: var(--color-listBar-listBarHover-Description);
}

#colorTheme .listBar .listBar4x:hover>.listBarLabel:before,
#colorTheme .listBar .listBar4x:hover>.listBarEndnote:before,
#colorTheme .listBar .listBar6x:hover>.listBarLabel:before,
#colorTheme .listBar .listBar6x:hover>.listBarEndnote:before,
#colorTheme .listBar .listBar4Narrow:hover>.listBarEndnote:before,
#colorTheme .listBar .listBar4Broaden:hover>.listBarEndnote:before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.0), var(--bgcolor-listBar-listBarHover-Title));
}

#colorTheme .listBar .listBar4x[title],
#colorTheme .listBar .listBar6x[title],
#colorTheme .listBar .listBar4Narrow[title],
#colorTheme .listBar .listBar4Broaden[title] {
    background-color: var(--bgcolor-listBar-listBarSelected);
}

#colorTheme .listBar .listBar6x[title]>.listBarIcon,
#colorTheme .listBar .listBar4Narrow[title]>.listBarFocus,
#colorTheme .listBar .listBar4Narrow[title]>.listBarIcon,
#colorTheme .listBar .listBar4Broaden[title]>.listBarFocus,
#colorTheme .listBar .listBar4Broaden[title]>.listBarIcon {
    background-color: var(--bgcolor-listBar-listBarSelected-Icon);
}

#colorTheme .listBar .listBar4x[title]>.listBarTitle,
#colorTheme .listBar .listBar4x[title]>.listBarDescription,
#colorTheme .listBar .listBar4x[title]>.listBarLabel:after,
#colorTheme .listBar .listBar4x[title]>.listBarLabel,
#colorTheme .listBar .listBar4x[title]>.listBarEndnote,
#colorTheme .listBar .listBar6x[title]>.listBarTitle,
#colorTheme .listBar .listBar6x[title]>.listBarDescription,
#colorTheme .listBar .listBar6x[title]>.listBarLabel:after,
#colorTheme .listBar .listBar6x[title]>.listBarLabel,
#colorTheme .listBar .listBar6x[title]>.listBarEndnote,
#colorTheme .listBar .listBar4Narrow[title]>.listBarTitle,
#colorTheme .listBar .listBar4Narrow[title]>.listBarEndnote,
#colorTheme .listBar .listBar4Broaden[title]>.listBarTitle,
#colorTheme .listBar .listBar4Broaden[title]>.listBarEndnote {
    background-color: var(--bgcolor-listBar-listBarSelected-Title);
}

#colorTheme .listBar .listBar4x[title]>.listBarDescription,
#colorTheme .listBar .listBar4x[title]>.listBarLabel,
#colorTheme .listBar .listBar4x[title]>.listBarEndnote,
#colorTheme .listBar .listBar6x[title]>.listBarDescription,
#colorTheme .listBar .listBar6x[title]>.listBarLabel,
#colorTheme .listBar .listBar6x[title]>.listBarEndnote,
#colorTheme .listBar .listBar4Narrow[title]>.listBarEndnote,
#colorTheme .listBar .listBar4Broaden[title]>.listBarEndnote {
    color: var(--color-listBar-listBarSelected-Description);
}

#colorTheme .listBar .listBar4x[title]>.listBarLabel:before,
#colorTheme .listBar .listBar4x[title]>.listBarEndnote:before,
#colorTheme .listBar .listBar6x[title]>.listBarLabel:before,
#colorTheme .listBar .listBar6x[title]>.listBarEndnote:before,
#colorTheme .listBar .listBar4Narrow[title]>.listBarEndnote:before,
#colorTheme .listBar .listBar4Broaden[title]>.listBarEndnote:before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.0), var(--bgcolor-listBar-listBarSelected-Title));
}

#colorTheme .rclickDom ul {
    background-color: var(--bgcolor-listBar);
    color: var(--color-listBar);
    border-color: var(--bgcolor-resizeBar);
}

#colorTheme .rclickDom li:hover {
    background-color: var(--bgcolor-listBar-listBarHover);
}

/**** 灰度 ****/
.grayscale * {
    filter: grayscale(100%);
}

/**** 栏目样式 ****/
#colorTheme{
    position: relative;
}

.functionBar {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: var(--vh);
    text-align: center;
}

.functionBar .functionBarButtom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    text-align: center;
}

.functionBar .functionIcon {
    margin: 32px 0 32px 0;
}

.listBar {
    position: absolute;
    top: 0;
    left: 48px;
    /*min-width: 64px;*/
    /*max-width: 480px;*/
    width: 240px;
    height: var(--vh);
}

.listBar header {
    position: relative;
    padding: 15px 20px 15px 20px;
    height: 36px;
}

.listBar header h1 {
    margin: 0;
    height: 36px;
    line-height: 36px;
    font-size: 36px;
    white-space: nowrap;
    overflow: hidden;
}

.listBar .listBarSwitch {
    display: none;
}

.listBar .listBarList {
    max-height: calc(var(--vh) - 70px);
    overflow: auto;
}

/**
* listBar4Broaden：焦点+图标+标题+尾注（宽版）
* listBar4Narrow：焦点+图标+标题+尾注（窄版）
* listBar4x：标题+说明+标注+尾注
* listBar6x：图标+焦点+标题+说明+标注+尾注
* 图标：listBarIcon
* 焦点：listBarFocus
* 标题：listBarTitle
* 说明：listBarDescription
* 标注：listBarLabel
* 尾注：listBarEndnote
*/
.listBar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.listBar .listBar4x,
.listBar .listBar6x {
    position: relative;
    min-height: 64px;
}

.listBar .listBar4Broaden,
.listBar .listBar4Narrow {
    position: relative;
    min-height: 32px;
}

.listBar .listBar4Broaden>ul,
.listBar .listBar4Narrow>ul {
    clear: both;
    display: none;
}

.listBar .listBar4Broaden[title]>ul,
.listBar .listBar4Narrow[title]>ul {
    display: block;
}

.listBar .listBar4Broaden .listBar4Broaden,
.listBar .listBar4Narrow .listBar4Broaden,
.listBar .listBar4Broaden .listBar4Narrow,
.listBar .listBar4Narrow .listBar4Narrow,
.listBar .listBar4Narrow>div:first-child,
.listBar .listBar4Broaden>div:first-child {
    margin-left: 12px;
}

.listBar .listBar4x>.listBarIcon,
.listBar .listBar4x>.listBarFocus,
.listBar .listBar4Narrow>.listBarDescription,
.listBar .listBar4Broaden>.listBarDescription,
.listBar .listBar4Narrow>.listBarLabel,
.listBar .listBar4Broaden>.listBarLabel {
    display: none;
}

.listBar .listBar6x>.listBarIcon {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    z-index: 11;
}

.listBar .listBar6x>.listBarFocus {
    position: absolute;
    top: 6px;
    left: 6px;
    height: 52px;
    width: 52px;
    z-index: 11;
}

.listBar .listBar4Narrow>.listBarFocus,
.listBar .listBar4Narrow>.listBarIcon {
    float: left;
    margin: 6px 0 6px 8px;
    height: 12px;
    width: 12px;
    line-height: 12px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
}

.listBar .listBar4Broaden>.listBarFocus,
.listBar .listBar4Broaden>.listBarIcon {
    float: left;
    margin: 8px 0 8px 12px;
    height: 16px;
    width: 16px;
    line-height: 16px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
}

.listBar .listBar6x>.listBarFocus>.listBarFocus1 {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 18px;
    min-width: 18px;
    white-space: nowrap;
    overflow: hidden;
}

.listBar .listBar6x>.listBarFocus>.listBarFocus2 {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 18px;
    min-width: 18px;
    white-space: nowrap;
    overflow: hidden;
}

.listBar .listBar6x>.listBarFocus>.listBarFocus3 {
    position: absolute;
    bottom: 0;
    left: 0;
    min-height: 18px;
    min-width: 18px;
    white-space: nowrap;
    overflow: hidden;
}

.listBar .listBar6x>.listBarFocus>.listBarFocus4 {
    position: absolute;
    bottom: 0;
    right: 0;
    min-height: 18px;
    min-width: 18px;
    white-space: nowrap;
    overflow: hidden;
}

.listBar .listBar6x>.listBarTitle {
    position: absolute;
    top: 18px;
    left: 62px;
    height: 16px;
    width: calc(100% - 78px);
    line-height: 16px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
}

.listBar .listBar4x>.listBarTitle {
    position: absolute;
    top: 18px;
    left: 12px;
    height: 16px;
    width: calc(100% - 28px);
    line-height: 16px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
}

.listBar .listBar4Narrow>.listBarTitle {
    float: left;
    margin: 6px 16px 6px 8px;
    height: 12px;
    width: calc(100% - 68px);
    line-height: 12px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
}

.listBar .listBar4Broaden>.listBarTitle {
    float: left;
    margin: 8px 16px 8px 12px;
    height: 16px;
    width: calc(100% - 84px);
    line-height: 16px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
}

.listBar .listBar6x>.listBarDescription {
    position: absolute;
    top: 38px;
    left: 62px;
    height: 12px;
    width: calc(100% - 78px);
    line-height: 12px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
}

.listBar .listBar4x>.listBarDescription {
    position: absolute;
    top: 38px;
    left: 12px;
    height: 12px;
    width: calc(100% - 28px);
    line-height: 12px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
}

.listBar .listBar4x>.listBarLabel:before,
.listBar .listBar6x>.listBarLabel:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    height: 16px;
    width: 48px;
}

.listBar .listBar4x>.listBarLabel:after,
.listBar .listBar6x>.listBarLabel:after {
    content: "";
    display: block;
    position: absolute;
    top: 12px;
    right: 0;
    height: 4px;
    width: 100%;
}

.listBar .listBar4x>.listBarLabel,
.listBar .listBar6x>.listBarLabel {
    position: absolute;
    top: 18px;
    right: 16px;
    height: 12px;
    min-width: 12px;
    line-height: 12px;
    font-size: 12px;
}

.listBar .listBar4x>.listBarEndnote:before,
.listBar .listBar6x>.listBarEndnote:before,
.listBar .listBar4Narrow>.listBarEndnote:before,
.listBar .listBar4Broaden>.listBarEndnote:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    height: 16px;
    width: 48px;
}

.listBar .listBar4x>.listBarEndnote,
.listBar .listBar6x>.listBarEndnote {
    position: absolute;
    top: 36px;
    right: 16px;
    height: 16px;
    min-width: 12px;
    line-height: 16px;
    font-size: 12px;
}

.listBar .listBar4Narrow>.listBarEndnote {
    position: absolute;
    top: 4px;
    right: 16px;
    height: 16px;
    min-width: 12px;
    line-height: 16px;
    font-size: 12px;
}

.listBar .listBar4Broaden>.listBarEndnote {
    position: absolute;
    top: 8px;
    right: 16px;
    height: 16px;
    min-width: 12px;
    line-height: 16px;
    font-size: 12px;
}

.resizeBar {
    cursor: e-resize;
    position: absolute;
    top: 0;
    left: 288px;
    width: 2px;
    height: var(--vh);
}

.contentBar {
    position: absolute;
    top: 0;
    left: 290px;
    /*min-width: 600px;*/
    width: calc(var(--vw) - 290px);
    height: var(--vh);
    padding: 2px;
}

.contentBar iframe {
    margin: 0;
    border: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.rclickDom {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: var(--vw);
    height: var(--vh);
    z-index: 20;
}

.rclickDom ul {
    position: absolute;
    width: 240px;
    min-height: 24px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-style: solid;
    border-width: 1px;
}

footer{
    position: fixed;
    bottom: 0;
}

.smallSizeWindow .functionBar,
.smallSizeWindow .listBar aside,
.smallSizeWindow .resizeBar,
.smallSizeWindow .contentBar[title] {
    display: none;
}

.smallSizeWindow .functionBar[title] {
    top: 66px;
    display: block;
}

.smallSizeWindow .listBar[title] aside {
    display: block;
    width: calc(var(--vw) - 48px);
}

.smallSizeWindow .listBar {
    left: 48px;
    width: calc(var(--vw) - 48px);
}

.smallSizeWindow .listBar .listBarSwitch {
    display: block;
    position: absolute;
    top: 0;
    left: -48px;
    width: 36px;
    height: 36px;
    padding: 15px 6px;
}

.smallSizeWindow .listBar header h1 {
    height: 36px;
    line-height: 36px;
    font-size: 36px;
    white-space: nowrap;
    overflow: hidden;
}

.smallSizeWindow .contentBar {
    top: 66px;
    left: 0;
    width: calc(var(--vw) - 4px);
    height: calc(var(--vh) - 70px);
    padding: 2px;
}