/* ----------------------------  Dark Mode ----------------------------- */


:root {
    /* background-color: #5483f1; */
    --global-bg-color: #f5f6f7;
    --global-text-color: #222529;
    --card-bg-color: #ffffff;
    --card-text-color: #222529;

    --text-color-title: #a370f7;
    --text-color-subtitle: #222529;
    --text-color-body: #50577A;
    --text-color-contrast: #000000;


    --bg-color-root: #f5f6f7;
    --bg-color-container: #fff;
    --bg-color-container-card: #f9f9f9;

    --main-tab-color: #252933;
    --main-tab-hover-color: #252933;

    --icon-color-nav-menu: #383c43;


    --hover-shadow-color: #f8f6f2;

    --my-tab-bg-color: #f5f6f7;
}

:root.dark-mode {
    --global-bg-color: #151521;
    --global-text-color: #d5dde7;
    --card-bg-color: #1e1e2d;
    --card-text-color: #fff;

    /* --text-color-title: #fff; */
    --text-color-title: #a370f7;
    --text-color-subtitle: #cdcddd;
    --text-color-body: #92929f;
    --text-color-contrast: #ffffff;


    --bg-color-root: #151521;
    --bg-color-container: #1e1e2d;
    --bg-color-container-card: #34344f;

    --main-tab-color: #ccc;
    --main-tab-hover-color: #fff;

    --icon-color-nav-menu: #e8e8e8;


    --hover-shadow-color: #1b1b28;

    --my-tab-bg-color: #1b1b28;
}



.text-color-title,
.text-color-title:valid,
.text-color-title:hover {
    color: var(--text-color-title);
}

.text-color-subtitle,
.text-color-subtitle:valid,
.text-color-subtitle:hover {
    color: var(--text-color-subtitle);
}

.text-color-body,
.text-color-body:valid,
.text-color-body:hover {
    color: var(--text-color-body);
}

.bg-color-root {
    background-color: var(--bg-color-root);
}

.bg-color-container {
    background-color: var(--bg-color-container) !important;
    border-color: var(--bg-color-root);
    border-width: 2px;
}

.bg-color-container-card {
    background-color: var(--bg-color-container-card) !important;
    border-color: var(--bg-color-root);
    border-width: 2px;
}


.icon-color-nav-menu{
    color: var(--icon-color-nav-menu);
}

.card {
    background-color: var(--card-bg-color);
    color: var(--card-text-color);

}


/* .hover-shadow:hover {
    background-color: var(--hover-shadow-color);
    color: var(--text-color-title);
    border-radius: 1rem;
} */

a.main-tab {
    color: var(--main-tab-color);
    text-decoration: none;
}

a.main-tab:hover, a.main-tab:active {
    color: var(--main-tab-hover-color);
}


.svg-color-subtitle {
    fill: var(--text-color-subtitle);
    stroke: var(--text-color-subtitle);
}

.dark-mode card {
    background-color: #151520;
}

.my-tab{
    background-color: var(--my-tab-bg-color) !important;
    color: var(--text-color-subtitle) !important;
}
.my-tab.active{
    color: var(--text-color-title) !important;
}


/* ---------------------------- End Dark Mode ----------------------------- */


body,
html {
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;

    background-color: var(--global-bg-color);
    /* background-color: #f5f6f7; */
    /* background-color: #f0f4f5; */
}

.hover-shadow:hover,
.hover-shadow:active {
    /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); */
    /* 鼠标悬浮时的阴影效果 */
    background-color: #b4b7bd44;
    /* color: #fff; */
    color: var(--text-color-contrast);
    border-radius: 1rem;
}



.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50% !important
}

.avatar-min {
    width: 30px;
    height: 30px;
    border-radius: 50% !important
}

.img-fit {
    object-fit: cover
}

.flex-1 {
    flex: 1;
}


.nav-banner a{
    color: #ccc;
    background-color: #212529 ;
    text-decoration: none;
    margin: 2px 5px;
    padding: 5px 10px;
    border-radius: 10px;
}


/* Bootstrap   */
.offcanvas-md,
.offcanvas-lg {
    --bs-offcanvas-width: 250px;
}


.card {
    --bs-card-border-color: #11111111
}