/* 通用css */

/*设置主体样式*/
body,
html {
    /* 设置背景颜色 */
    background-color: var(--body-bg);
}

/* 新拟态风格样式开始 */
/* 拟态主体风格 */
.Neumorphism {
    /* 设置 4 个边框的样式 */
    border: 0;
    /* 设置元素周围的轮廓 */
    outline: 0;
    /* 设置圆角 */
    border-radius: 8px;
    /* 设置背景颜色 */
    background-color: var(--Neumorphism-bg);
    /* 设置元素阴影 */
    box-shadow: -5px -5px 20px var(--box-shadow-1), 5px 5px 20px var(--box-shadow-2);
    /* 将鼠标悬停在一个元素上，逐步改变元素的宽度 */
    transition: all 0.2s ease-in-out;
    /* 设置文字颜色 */
    color: var(--font-color);
    /* 设置文本的粗细 */
    font-weight: 600;
}

/*鼠标滑过时的样式*/
.Neumorphism:hover {
    /* 设置元素阴影 */
    box-shadow: -2px -2px 5px var(--box-shadow-1), 2px 2px 5px var(--box-shadow-2);
}

/*点击时的样式*/
.Neumorphism:active {
    /* 设置元素阴影 */
    box-shadow: inset 1px 1px 2px var(--box-shadow-2), inset -1px -1px 2px var(--box-shadow-1);
}


.Neumorphism_hover {
    /* 设置 4 个边框的样式 */
    border: 0;
    /* 设置元素周围的轮廓 */
    outline: 0;
    /* 设置圆角 */
    border-radius: 8px;
    /* 设置背景颜色 */
    background-color: var(--Neumorphism-bg);
    /* 设置元素阴影 */
    box-shadow: -5px -5px 20px var(--box-shadow-1), 5px 5px 20px var(--box-shadow-2);
    /* 将鼠标悬停在一个元素上，逐步改变元素的宽度 */
    transition: all 0.2s ease-in-out;
    /* 设置文字颜色 */
    color: var(--font-color);
    /* 设置文本的粗细 */
    font-weight: 600;
}

/*鼠标滑过时的样式*/
.Neumorphism_hover:hover {
    /* 设置元素阴影 */
    box-shadow: -2px -2px 5px var(--box-shadow-1), 2px 2px 5px var(--box-shadow-2);
}

/* 新拟态结束 */

.Neumorphism-input input {
    /* 设置宽度 */
    width: 100%;
    /* 为元素设定的宽度和高度决定了元素的边框盒 */
    box-sizing: border-box;
    /* 设置动画 */
    transition: all 0.2s ease-in-out;
    /* 去除浏览器默认样式 */
    -webkit-appearance: none;
    /* 设置边框 */
    border: 0;
    /* 设置边框 */
    outline: 0;
    /* 圆角 */
    border-radius: 10px;
    /* 外边距 */
    padding: 8px;
    /* 背景颜色 */
    background-color: var(--Neumorphism-bg);
    ;
    /* 文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    /* 设置阴影 */
    box-shadow: inset 2px 2px 5px var(--box-shadow-2), inset -5px -5px 10px var(--box-shadow-1);
    /* 输入框输入文本时的文本颜色 */
    color: var(--font-color);
}

.Neumorphism-input input:focus {
    /* 设置阴影 */
    box-shadow: inset 1px 1px 2px var(--box-shadow-2), inset -1px -1px 2px var(--box-shadow-1);
}

.Neumorphism-input label {
    font-size: 15px;
}

.Neumorphism-input .mu-input {
    width: 100%;
    color: var(--font-color);
}

.Neumorphism-input .mu-input__focus {
    color: var(--font-color);
}

.Neumorphism-input .mu-input-help {
    color: var(--font-color);
}

.Neumorphism-input textarea {
    /* 设置宽度 */
    width: 100%;
    /* 为元素设定的宽度和高度决定了元素的边框盒 */
    box-sizing: border-box;
    /* 设置动画 */
    transition: all 0.2s ease-in-out;
    /* 去除浏览器默认样式 */
    -webkit-appearance: none;
    /* 设置边框 */
    border: 0;
    /* 设置边框 */
    outline: 0;
    /* 圆角 */
    border-radius: 10px;
    /* 外边距 */
    padding: 8px;
    /* 背景颜色 */
    background-color: var(--Neumorphism-bg);
    ;
    /* 文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    /* 设置阴影 */
    box-shadow: inset 2px 2px 5px var(--box-shadow-2), inset -5px -5px 10px var(--box-shadow-1);
    /* 输入框输入文本时的文本颜色 */
    color: var(--font-color);
}

.Neumorphism-input textarea:focus {
    /* 设置阴影 */
    box-shadow: inset 1px 1px 2px var(--box-shadow-2), inset -1px -1px 2px var(--box-shadow-1);
}

/* 文本处理效果 */
.text-1 {
    /* 设置元素溢出时内容会被修剪，并且其余内容是不可见的 */
    overflow: hidden;
    /* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止 */
    white-space: nowrap;
    /* 设置元素溢出时显示省略符号来代表被修剪的文本 */
    text-overflow: ellipsis;
}

/* 允许文本被复制 */
.allow_copy {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.goTop {
    /* 设置宽度 */
    width: 40px;
    /* 设置高度 */
    height: 40px;
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    /* 设置字体大小 */
    font-size: 20px;
}

.goTop i {
    /* 设置文本的粗细 */
    font-weight: 600;
}

/* 设置翻转 */
.fan {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/* 设置浮动 */
.fdo {
    position: fixed;
    right: 20px;
    z-index: 100;
}

/* 设置隐藏 */
.fudo {
    visibility: hidden;
}

::-webkit-scrollbar {
    width: 6px;
    height: 0;
}

::-webkit-scrollbar-corner {
    background: unset;
}

::-webkit-scrollbar-thumb {
    background: #87878766;
    border-radius: 6px;
}

::-webkit-scrollbar-track {
    background: #8787871a;
}

::-webkit-scrollbar-track {
    background-color: #fff;
}

.el-empty__description p {
    /* 设置文字颜色 */
    color: var(--font-color);
    /* 设置文本的粗细 */
    font-weight: 600;
    /* 文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
}

/* 让el-scrollbar滚动条一直显示而不是鼠标移入才显示 */
.el-scrollbar__bar {
    opacity: 1;
}


.footer {
    border: 0 solid var(--box-shadow-2);
    border-top-width: 1px;
    margin-top: 2.5rem;
    background-color: rgb(255 255 255/var(--Neumorphism-bg));
}

/* .footer a:hover {
    padding-bottom: 1px;
    border-bottom: 1px solid var(--font-color);
} */

.footer .container {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    align-items: center;
    flex-direction: column;
    max-width: 80rem;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.footer .container .logo {
    color: var(--font-color);
    font-weight: 900;
    font-size: 1.25rem;
}

.footer .about {
    font-size: .875rem;
    line-height: 1.25rem;
    text-align: center;
    margin: 0;
    margin-top: 1rem;
    color: var(--font-color);
}

.footer a {
    text-decoration: inherit;
    color: var(--font-color);
}

.footer .beian {
    align-items: center;
    flex-direction: column;
    display: flex;
    margin-top: 1rem;
}

.footer .beian a {
    font-size: .875rem;
    line-height: 1.25rem;
    align-items: center;
    display: flex;
    margin-bottom: 0.25rem;
    text-decoration: inherit;
    color: var(--font-color);
}

.footer .beian a svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.125rem;
    display: block;
}

@media (min-width: 768px) {
    .footer .container {
        flex-direction: row;
    }

    .footer .about {
        text-align: left !important;
        padding-left: 1rem;
        border: 0 solid var(--box-shadow-2);
        border-left-width: 1px;
        margin-top: 0 !important;
        margin-left: 1rem !important;
    }

    .footer .beian {
        align-items: flex-end !important;
        margin-left: auto;
        margin-top: 0;
        padding-right: 40px;
    }
}

@media (min-width: 1280px) {
    .footer .beian {
        padding-right: 0;
    }
}



.el-button:focus,
.el-button:hover {
    color: var(--font-color);
    /* border-color: transparent; */
    background-color: transparent;
}

@media screen and (max-width: 750px) {
    .el-message-box {
        width: 60% !important;
    }
}

/* 提示 */
.Tips {
    /* 设置 4 个边框的样式 */
    border: 0;
    /* 设置元素周围的轮廓 */
    outline: 0;
    /* 设置圆角 */
    border-radius: 5px;
    /* 设置背景颜色 */
    background-color: var(--Neumorphism-bg);
    /* 设置文字颜色 */
    color: var(--font-color);
    /* 将鼠标悬停在一个元素上，逐步改变元素的宽度 */
    transition: all 0.2s ease-in-out;
    /* 设置文本的粗细 */
    font-weight: 600;
}

/* 确定按钮 */
.queding {
    width: 88px;
    height: 36px;
    margin: 10px;
}

.Tips .Tips_title {
    text-shadow: 1px 1px 0 var(--text-shadow);
    color: var(--font-color);
    /* 设置顶部距离 */
    margin-top: -20px;
    /* 设置居中 */
    text-align: center;
    /* 设置字体大小 */
    font-size: 25px;
}

.Tips .Tips_content {
    text-shadow: 1px 1px 0 var(--text-shadow);
    color: var(--font-color);
    /* 设置字体大小 */
    font-size: 18px;
}

.Tips .el-dialog__title {
    text-shadow: 1px 1px 0 var(--text-shadow);
    color: var(--font-color);
}

.Tips .el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
    color: var(--box-shadow-2);
}

.Tips p {
    color: var(--font-color);
}