@font-face {
           font-family: 站酷高黑;
           font-display: block;
           src: url(/static/resources/Zfonts/站酷高黑.TTF);

       }

       @font-face {
           font-family: 瘦金;
           font-display: block;
           src: url(/static/resources/Zfonts/瘦金简体.ttf)
       }


       @font-face {
           font-family: 行楷;
           font-display: block;
           src: url(/static/resources/Zfonts/华文行楷.ttf)
       }

       @font-face {
           font-family: 毛笔;
           font-display: block;
           src: url(/static/resources/Zfonts/广告毛笔字体.ttf)
       }

       @font-face {
           font-family: 黑体;
           font-display: block;
           src: url(/static/resources/Zfonts/黑体.TTF)
       }

       @font-face {
           font-family: 站酷小薇;
           font-display: block;
           src: url(/static/resources/Zfonts/站酷小薇.otf)
       }

       @font-face {
           font-family: 书宋;
           font-display: block;
           src: url(/static/resources/Zfonts/书宋.TTF)
       }

       @font-face {
           font-family: 娃娃体;
           font-display: block;
           src: url(/static/resources/Zfonts/娃娃体.TTC)
       }

       @font-face {
           font-family: 魏碑;
           font-display: block;
           src: url(/static/resources/Zfonts/魏碑.TTF)
       }

       @font-face {
           font-family: 隶书;
           font-display: block;
           src: url(/static/resources/Zfonts/隶书.TTC)
       }

       @font-face {
           font-family: 钢笔;
           font-display: block;
           src: url(/static/resources/Zfonts/钢笔.TTF)
       }

       @font-face {
           font-family: 楷体;
           font-display: block;
           src: url(/static/resources/Zfonts/楷体.TTF)
       }

       body {
           height: 100%;
           width: 100%;
           overflow: hidden;
       }

       .hide_elem {
           display: none;
       }

       .canvas_drawpic {

           margin: 0 auto;
           /* 居中显示 */
           background-color: #eee;
           /* 背景颜色 */
           border: 1px solid #0a0a0a;
           /* 最大宽度为父容器宽度 */


           /* 自动高度 */
       }



       .canvas_export_png {

           margin: 0 auto;
           /* 居中显示 */
           background-color: transparent;

           /* 背景颜色 */
           border: 1px solid #0a0a0a;
           /* 最大宽度为父容器宽度 */


           /* 自动高度 */
       }

       .progress_bar {
           width: 0%;
           height: 32px;
           border: 2px solid #0f0000;

           background-color: #cc0606;
           text-align: right;

           display: none;
           position: absolute;
           /* 使容器成为定位上下文 */
           bottom: 30px;

           left: 0;
       }

       .progress_bar_img {
           position: absolute;
           top: 0px;

           right: -32px;
           /* 同上 */
           width: 32px;

           height: auto;

       }

       .a-link {

           font-size: 16px;
           color: #170101;
           /* 文字颜色 */



           /* 圆角边框 */
           transition: all 0.3s ease;
           /* 添加过渡动画 */

       }

       .about_us_link {


           color: #170101;
           /* 文字颜色 */
           text-decoration: none;
           /* 去掉下划线 */
           font-weight: normal;
           /* 文字粗细 */
           padding: 8px 12px;
           /* 添加内边距，使边框包裹文字 */
           border: 1px solid #007BFF;
           /* 蓝色边框 */
           border-radius: 4px;
           /* 可选：圆角边框 */
           display: inline-block;

           /* 圆角边框 */
           transition: all 0.3s ease;
           /* 添加过渡动画 */

       }

       .about_us_link:hover {

           color: #e0d7d7;

       }

       /* 鼠标悬停时的样式 */
       .a-link:hover {

           color: #e0d7d7;

       }

       .slider_style {
           font-size: 18px;
       }


       .btn {

           font-size: 18px;
           padding: 5px;
       }

       .btn:hover {
           cursor: pointer;
       }

       .btn_click {

           background-color: red;
           font-size: 18px;
           padding: 5px;
       }

       .button-container {
           display: flex;
           flex-direction: row;
       }

       .button-with-bg {
           background-image: url('uploadTexture/hello.png');
           background-size: contain;
           background-repeat: no-repeat;
           background-position: center;
           font-size: 18px;
           padding: 5px;
       }

       .input_menu {
           width: 300px;
           padding: 12px;

           box-sizing: border-box;
           border: 2px solid #ccc;
           border-radius: 4px;
           font-size: 16px;
           transition: all 0.3s ease;
       }

       .data_class {
           position: absolute;
           left: 35px;
           text-align: left;
           font-size: 12px;
           white-space: pre-wrap;
           color: blue;
           bottom: 10px;
           /* 距离容器底部 10px */

       }

       .data_time {
           position: absolute;
           top: 25px;
           left: 20px;
           text-align: left;
           font-size: 12px;
           white-space: pre-wrap;
           color: rgb(209, 8, 18);
       }

       .data_name {
           position: absolute;
           top: 10px;
           left: 20px;
           text-align: left;
           font-size: 12px;
           white-space: pre-wrap;
           color: black;
       }

       /* 当输入框获得焦点时改变边框颜色 */
       .input_menu:focus {
           border-color: #0056b3;
           outline: none;
       }


       .divtext {
           white-space: pre-wrap;
           /* 使\n换行符起作用 */
           width: 300px;
           height: 100px;
           overflow-y: auto;
           border: 2px solid #0a0a0a;
           border-radius: 5px;
           background-color: #8bc3e4;
           box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
           font-size: 15px;
           color: #0f0f0f;
           word-wrap: break-word;
           /* 允许长单词或 URL 地址换行到下一行 */
           overflow-wrap: break-word;
           /* 现代标准，与 word-wrap 相同效果 */

       }

       .access_tips_text {
           white-space: pre-wrap;
           /* 使\n换行符起作用 */
           width: 410px;
           height: auto;

           border: 2px solid #0a0a0a;
           border-radius: 5px;
           background-color: #8bc3e4;
           box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
           font-size: 20px;
           color: #0f0f0f;

       }

       .message_text {
           white-space: pre-wrap;
           /* 使\n换行符起作用 */
           width: 300px;
           height: auto;

           border: 2px solid #0a0a0a;
           border-radius: 5px;
           background-color: #8bc3e4;
           box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
           font-size: 20px;
           color: #0f0f0f;


       }

       .select_style {

           min-width: 100px;
           min-height: 24px;
           width: auto;
           padding: 8px 8px;
           font-size: 18px;
           display: inline-block;
           border: 1px solid #080808;
           border-radius: 6px;
           cursor: pointer;

       }

       .custom-audio {
  
           width: 100%;
           max-width: 500px;
           border-radius: 8px;
           background-color: #b1cde9;
           border: 1px solid #0c0c0c;
           padding: 8px;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
           outline: none;
       }

   
       .custom-audio::-webkit-media-controls-panel {
           background-color: #52aeec;
           border-radius: 8px;
       }

       .divcolor {
           display: grid;
           grid-template-columns: repeat(12, 30px);
           /* 12列，每列宽度30px */
           grid-template-rows: repeat(12, 30px);
           /* 12行，每行高度30px */
           gap: 1px;
           background-color: #0a0a0a;
           border: 1px solid #0a0a0a;
           /* 可选：设置间距 */
       }

       .color-box {
           display: inline-block;
           /* 使span元素可以设置宽度和高度 */
           width: 30px;
           /* 设置方框的宽度 */
           height: 30px;
           border: 1px solid #080808;

       }

       .file_data {
           display: none;
           font-size: 10px;

       }



       .img_file {
           max-width: 100%;
           height: auto;
           display: block;
           margin: 0 auto;
           border: 2px solid #0c0c0c;
           pointer-events: none;
           /* 让元素忽略鼠标事件 */
           cursor: default;
           /* 更改鼠标指针为默认样式 */
       }

       .div_width {
           width: 600px;
       }


       .div_imgs_container {
           padding: 10px 0px;
           overflow-y: auto;
           border: 2px solid #0c0c0c;
           background-color: #eef2f5;
           width: 700px;
           height: 650px;
           position: absolute;
       }

       .div_img_item {

           margin: 5px;
           width: 150px;
           height: 150px;
           position: relative;
           display: inline-block;
           text-decoration: none;
       }

       .img_brower {
           margin: 5px;
           width: 150px;
           height: 150px;
           border: 1px solid #3e0ab8e0;
           position: absolute;

       }

       .canvas_screenshot {
           width: 200px;
           height: 150px;
           border: 1px solid #0a0a0a;
           border-radius: 5px;
       }


       .img_screenshot {
           background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') no-repeat;
           min-height: 100px;
           /* 确保即使没有内容也占位 */
           min-width: 100px;
           border: 1px solid #0a0a0a;
           border-radius: 5px;
       }


       .menu_radio {
           margin: 2px;
       }


       .data_checkbox {
           position: absolute;
           width: 20px;
           height: 20px;
           bottom: 5px;
           /* 距离容器底部 10px */
           left: 5px;
       }

       .color_checkbox {

           width: 20px;
           height: 20px;

       }

       .big_checkbox {
           width: 20px;
           height: 20px;

       }




       .photo_canvas {
           width: 48px;
           height: 48px;
           border: 1px solid #0a0a0a;
           border-radius: 5px;
       }

       .char_canvas {
           width: 100px;
           height: 100px;
           border: 1px solid #0a0a0a;

       }

       .user-image {
           position: absolute;

           width: 38px;
           /* 图片宽度 */
           height: 38px;
           /* 根据宽度自动调整高度 */

           border: 1px solid #0a0a0a;
           border-radius: 5px;
           background-color: white;
       }

       .user-image:hover {
           background-color: red;
           width: 45px;
           height: 45px;
       }

       .tag {

           padding: 4px 12px;
           margin: 5px;
           font-size: 14px;
           font-weight: bold;
           line-height: 1;
           color: rgb(0, 0, 0);
           text-align: center;
           white-space: nowrap;
           vertical-align: baseline;
           border-radius: 16px;
           position: absolute;
           width: auto;
       }

       .tag_trans {

           padding: 4px 12px;
           margin: 5px;
           font-size: 14px;
           font-weight: bold;
           line-height: 1;
           color: rgb(153, 102, 115);
           text-align: center;
           white-space: nowrap;
           vertical-align: baseline;

           border-radius: 16px;
           /* 圆角 */
           /* 创建一个小尾巴效果（可选） */
           position: absolute;
           width: auto;
       }

       .user_name {
           color: #333;
           /* 文字颜色 */
           font-size: 1.5em;
           /* 字体大小 */
           font-weight: bold;
           /* 加粗 */

           border-bottom: 2px solid #007BFF;
           /* 下划线 */
           padding-bottom: 5px;
           /* 下内边距 */
       }