/* 全局基础样式重置 */
:root {
    --left-top: 59px;
    --logo-height: 86px;
    --logo-margin-top: 1px;
    --logo-margin-bottom: 1px;
    --header-height: calc(var(--logo-height) + var(--logo-margin-top) + var(--logo-margin-bottom));
    --navbar-brand-left: 15px;
    --navbar-brand-left-mobile: 1px;
    --navbar-margin: 0px auto;
    --head-gap: 2px;
    --page-top: calc(var(--header-height) + var(--head-gap));
    /* 右侧内容高度 */
    --max-width: 1440px;
    --mainnav_div-width: 260px;
    --header-bgcolor: #252532;
    --bgcolor: #393946;
    --tblr-sidebar-bg: transparent;
    --tblr-white: #FFFAFA;
    /* 右侧卡片背景颜色 */
    --tblr-nav-link-font-size: 16px;
    --tipbg: rgb(245 255 245);
	--tblr-body-bg: #fff;
    --font-family: "Microsoft YaHei", "微软雅黑", "Arial", "Helvetica", "SimSun", sans-serif;
    --tblr-body-font-family: "Microsoft YaHei", "微软雅黑", "Arial", "Helvetica", "SimSun", sans-serif;
}

html[data-theme="dark"] {
    --tblr-body-bg: #111827;
    --tblr-body-color: #e5e7eb;
    --tblr-surface-bg: #111827;
    --tblr-surface-rgb: 17, 24, 39;
    --tblr-muted: #9ca3af;
    --tblr-border-color: rgba(148, 163, 184, 0.22);
    --tblr-card-cap-bg: #172033;
    --tblr-sidebar-bg: transparent;
    --tblr-sidebar-border: rgba(148, 163, 184, 0.12);
    --tblr-shadow-card: 0 12px 32px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] #right {
	background: var(--tblr-body-bg);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--bgcolor) !important;
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    min-width: 0 !important;
}
/* 头部容器样式 */
.header {
    width: 100%;
    min-height: var(--header-height);
    background-color: var(--header-bgcolor);
    border-bottom: 1px solid gray;
    position: fixed;
    z-index: 999999;
}

/* 头部内部容器 */
.header_b {
    padding-top: var(--logo-margin-top);
    padding-bottom: var(--logo-margin-bottom);
    max-width: var(--max-width);
    margin: auto;
    display: flex;
    /* 弹性布局，让logo和语言选择器左右分布 */
    justify-content: space-between;
    /* 两端对齐 */
    align-items: center;
    /* 垂直居中 */
}

/* logo样式 */
.navbar-brand-image {
    padding-left: var(--navbar-brand-left);
    height: var(--logo-height);
    object-fit: contain;
}

img {
    max-width: 100%;
    height: auto;
}

#update_version {
    position: fixed;
    margin-left: 260px;
    font-size: 16px;
    color: #0788f8;
    font-weight:500;
}

.icon {
    --tblr-icon-size: 32px;
    width: var(--tblr-icon-size);
    height: var(--tblr-icon-size);
    font-size: var(--tblr-icon-size);
    vertical-align: bottom;
    stroke-width: 1px;
}

#language_icon {
    width: 32px;
    height: 32px;

}

#LanSle {
    padding: 0;
    cursor: pointer;
    min-width: auto;
}

#language {
	padding: 10px;
}

/* 头部结束 */

.page {
    display: flex;
    padding-top: var(--page-top);
    background: none !important;
    width: calc(var(--max-width) + 0px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

#left {
    inset: auto;
    margin: var(--navbar-margin);
    background-color: var(--bgcolor);
    position: fixed;
    /* top: var(--left-top); */
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100% - var(--left-top));
    width: var(--mainnav_div-width);
    border-right: 0px solid var(--tblr-sidebar-border);
}

#left #main_nav {
    width: auto;
    padding: 0 5px;
}

#left #main_nav li .nav_item {
    font-size: 16px;
    font-weight: 300;
}

#left #main_nav li .nav_item:hover,
#left #main_nav li .select_nav_item,
#left #main_nav li #main_nav_li_selected {
    font-size: 16px;
    font-weight: 300;
}

#left .secondary_nav li span {
    font-size: 15px;
}

#right {
    flex: 1;
    margin: 8px 0 0 var(--mainnav_div-width);
    padding: 0;
    text-align: left;
    background: var(--tblr-body-bg);
	min-height: calc(100vh - 8px - var(--page-top));
}

#right iframe {
	background: #393946;
}

#main_content {
    padding: 0 !important;
}



@media (max-width: 768px) {
    .navbar-brand-image {
        padding-left: var(--navbar-brand-left-mobile);
    }

    .page {
        flex-direction: column;
    }

    #left {
        position: static;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--tblr-sidebar-border);
        min-height: auto;
    }

    #right {
        flex: 1;
        margin: 0;
    }
	#update_version {
     display:none;
    }
}