/*调整全局字体大小*/
body,
html {
    font-size: 15px;
}

.hidden {
    display: none !important;
}

/*左导航悬浮 sidebar-menu-inner 宽度调整为 90px*/

.sidebar-item svg {
    width: 1.5rem;
    margin-right: 0.25rem;
}

.navbar .navbar-nav li a {
    display: flex;
    align-items: center;
    gap: 5px;
}

.site-menu .sub-menu svg {
    width: 1.2rem;
}

/*搜索框搜索图标颜色*/

/*Google 图标按钮样式*/
.google-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    background-color: #ffffff;
    border: 1px solid #dfe1e5;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.google-icon:hover {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    border-color: rgba(223, 225, 229, 0);
}

.google-icon svg {
    width: 24px;
    height: 24px;
}

.search-container {
    display: flex;
    align-items: center;
}

/*搜索栏字体 + 背景*/

/*搜索 activate 图标颜色*/
.header-big .search-type input:checked+label:before {
    content: '';
    border-width: 8px 8px 0px 8px;
    border-style: solid;
    border-color: #888 transparent transparent;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -8px
}

/*主页搜索搜索框 (头 + 底部) 字体颜色*/
.header-big:not(.no-bg) .s-type-list {
    color: #282a2d
}

.header-big:not(.no-bg) .text-muted {
    color: #282a2d !important
}

/*主页 header-banner 底部宽度*/
.post-top {
    padding-bottom: 50px
}

/*左导航二级导航标题左侧距离*/
.sidebar-menu-inner ul li ul li a {
    margin-left: 16px;
    display: flex;
    align-items: center;
    line-height: 32px;
}

.mini-sidebar .sidebar-menu ul {
    display: flex;
    flex-direction: column;
    gap: 33px;
}

/*头部导航二级导航 iconfont 图标*/
.navbar-collapse ul li.menu-item-has-children:after {
    content: "";
    margin: 0 0 0 10px;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23282a2d' d='M169.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 306.7L54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.io-black-mode .navbar-collapse ul li.menu-item-has-children:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23c6c9cf' d='M169.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 306.7L54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
}

#sidebar .menu-item-link-external:after,
.site-menu .menu-item-link-external:after {
    content: "";
    margin: 0;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1rem' height='1rem' viewBox='0 0 24 24'%3E%3Cg fill='%23282a2d'%3E%3Cpath d='M15.64 7.025h-3.622v-2h7v7h-2v-3.55l-4.914 4.914l-1.414-1.414z'/%3E%3Cpath d='M10.982 6.975h-6v12h12v-6h-2v4h-8v-8h4z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.5;
    vertical-align: middle;
}

.io-black-mode #sidebar .menu-item-link-external:after,
.io-black-mode .site-menu .menu-item-link-external:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1rem' height='1rem' viewBox='0 0 24 24'%3E%3Cg fill='%23c6c9cf'%3E%3Cpath d='M15.64 7.025h-3.622v-2h7v7h-2v-3.55l-4.914 4.914l-1.414-1.414z'/%3E%3Cpath d='M10.982 6.975h-6v12h12v-6h-2v4h-8v-8h4z'/%3E%3C/g%3E%3C/svg%3E");
}

/*搜索部分背景样式*/
.header-big.css-color {
    background-size: unset;
    background-position: unset;
    animation: unset;
}

.io-black-mode .header-big.css-color {
    filter: invert(0.85);
}

/* 抵消暗色模式下的过滤器影响 */
.io-black-mode .header-big.css-color .google-icon-no-invert {
    filter: invert(1.176) !important;
    transform: none !important;
    z-index: 1;
}

/*搜索热词样式调整*/

footer.main-footer .footer-text {
    text-align: center;
}

footer.main-footer .footer-text a {
    color: #007bff;
}

footer.main-footer .footer-text a:hover {
    color: red;
}

#footer-tools > a[rel="go-top"] svg {
    margin-bottom: 0.25rem;
}

#footer-tools > a[rel="submit"],
#footer-tools > a[rel="contact"],
#footer-tools > a[rel="night-mode"] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-light{
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5V1h2v4zm6.65 2.75l-1.375-1.375l2.8-2.875l1.4 1.425zM19 13v-2h4v2zm-8 10v-4h2v4zM6.35 7.7L3.5 4.925l1.425-1.4L7.75 6.35zm12.7 12.8l-2.775-2.875l1.35-1.35l2.85 2.75zM1 13v-2h4v2zm3.925 7.5l-1.4-1.425l2.8-2.8l.725.675l.725.7zM12 18q-2.5 0-4.25-1.75T6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.icon-night {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.1 22q-2.1 0-3.937-.8t-3.2-2.162t-2.163-3.2T2 11.9q0-3.65 2.325-6.437T10.25 2q-.45 2.475.275 4.838t2.5 4.137t4.138 2.5T22 13.75q-.65 3.6-3.45 5.925T12.1 22'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transform: scaleX(-1);
}

/*About 页面*/

/*网格背景*/
.io-grey-mode .page-container .grid-bg {
    background-image: linear-gradient(rgba(50, 0, 0, 0.05) 1px, transparent 0), linear-gradient(90deg, rgba(50, 0, 0, 0.05) 1px, transparent 0);
    /* background-size: 15px 15px; */
    /* background-color: #d8d8d8; */
}

/* Google 搜索框样式 */
.search-container-wrapper {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    align-items: center;
}

.search-container {
    display: flex;
    align-items: center;
    position: relative;
    background-color: #f9f9f9;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    height: 44px;
    width: 100%;
    max-width: 584px;
    padding: 0 20px;
    transition: all 0.2s;
}

.io-black-mode .search-container {
    background-color: #2c2e2f;
    border-color: #3c3e40;
}


.search-container:hover {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.3);
    border-color: rgba(223, 225, 229, 0);
}

.search-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 0 40px 0 5px;
    height: 44px;
    color: #202124;
    background-color: #f9f9f9;
}

.io-black-mode .search-input {
    background-color: #2c2e2f;
    color: #fff;
}


#search-input::placeholder {
    font-size: 12px;
    color: #999;
    opacity: 1;
    /* Firefox 需要 */
}

/* 兼容不同浏览器 */
#search-input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    font-size: 12px;
    color: #999;
}

#search-input::-moz-placeholder {
    /* Firefox 19+ */
    font-size: 12px;
    color: #999;
    opacity: 1;
}

#search-input:-ms-input-placeholder {
    /* IE 10+ */
    font-size: 12px;
    color: #999;
}

#search-input:-moz-placeholder {
    /* Firefox 18- */
    font-size: 12px;
    color: #999;
    opacity: 1;
}

.search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-icon-svg {
    color: #9aa0a6;
}

.clear-icon-svg,
.close-icon-svg {
    color: #70757a;
}

/*顶部导航栏字体 + 图标颜色*/
.big-header-banner .page-header {
    color: #ffffff;
    background: rgba(255, 255, 255, 0);
    box-shadow: none;
    transition: color .3s, background-color .3s
}

.big-header-banner:not(.header-bg) .page-header .navbar-nav>li>a,
.big-header-banner:not(.header-bg) .navbar-menu a:not(.dropdown-item) {
    color: #282a2d;
}

.big-header-banner:not(.header-bg) .page-header .navbar-nav>li>a:hover,
.big-header-banner:not(.header-bg) .navbar-menu a:not(.dropdown-item):hover {
    color: #dc3545;
}

.big-header-banner:not(.header-bg) .header-mini-btn path {
    stroke: #282a2d;
}

.big-header-banner:not(.header-bg) .header-mini-btn label:hover path {
    stroke: #dc3545;
}

.io-black-mode .big-header-banner .page-header {
    color: #ffffff;
    background: rgba(255, 255, 255, 0);
    box-shadow: none;
    transition: color .3s, background-color .3s
}

.io-black-mode .big-header-banner:not(.header-bg) .page-header .navbar-nav>li>a,
.io-black-mode .big-header-banner:not(.header-bg) .navbar-menu a:not(.dropdown-item) {
    color: #c6c9cf;
}

.io-black-mode .big-header-banner:not(.header-bg) .page-header .navbar-nav>li>a:hover,
.io-black-mode .big-header-banner:not(.header-bg) .navbar-menu a:not(.dropdown-item):hover {
    color: #dc3545;
}

.io-black-mode .big-header-banner:not(.header-bg) .header-mini-btn path {
    stroke: #c6c9cf;
}

.io-black-mode .big-header-banner:not(.header-bg) .header-mini-btn label:hover path {
    stroke: #dc3545;
}
@media screen and (max-width:575.98px){
    .search-container {
        width: auto;
    }
}