html,body{margin:0; font-family: 'Courier New', Courier, monospace; /* background: #EEF2F9;*/}
a,a:hover, a:active{color: #2e6be3; text-decoration: none;  }
/* sup{margin-left:-10px;} */

header{ 
   
    width:100%; 
    display: block;
    /* border-bottom: 1px solid #e4e9f1 ; */
    margin-bottom: 20px ;
    font-size: 1.2em;
    
    /* background: linear-gradient(to top, rgb(251 251 251), rgb(255 255 255)); */
}
header p{margin:-15px  40px 10px 40px; line-height: 180%; color: #666; font-size:0.8em;}
header h1{margin:50px  0 20px 0px; text-align: center; font-size:1.8em;
background: linear-gradient(to right, rgb(41, 41, 41), rgb(122, 122, 122));-webkit-background-clip: text; color: transparent; }
header .nav{ 
    margin: 10px 20px 5px 20px; 
    border-bottom:1px solid #f5f5f5; 
    padding-bottom:5px; 
    color:#a9a9a9;
   /* white-space: nowrap;  防止内容换行 */
    overflow-x: auto; /* 允许横向滚动 */
    -webkit-overflow-scrolling: touch; /* 在iOS设备上实现平滑滚动 */
    font-size: 0.8em;
    text-align: center;
}
header a{ display:inline-block; margin-bottom:5px;  text-decoration: none;}

header a:hover, header a:active{ text-decoration: underline; }
header a.active {font-weight: bold; color:#333;}




.image-container { 
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin:0;
    padding: 0;
    /* width:calc(100% - 40px) */
}
.image-container.uploadpage li{ 
    /* margin:25px 25px;  */
    margin:15px;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: left;
    color: gray;
    background: linear-gradient(to top, #fff, #fff);
    padding:0px 0 70px 0;
    overflow: hidden;
    position: relative;
    width: calc(24% - 45px);
    /* background: red; */
    min-width: 430px;

    min-height: 400px;
    max-height: 630px;
    box-shadow: 0 6px 9px rgba(183, 183, 183, 0.4);
}

.image-container li{ 
    /* margin:25px 25px;  */
    margin:15px 10px;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: left;
    color: gray;
    background: linear-gradient(to top, #fff, #fff);
    padding:0px 0 0px 0;
    overflow: hidden;
    position: relative;
    /* background: red; */
    max-width: 410px;
    min-width: 410px;
    min-height: 410px;
    max-height: 410px;
    box-shadow: 0 6px 9px rgba(183, 183, 183, 0.4);
    border-radius: 12px;

}
/* div 底部对齐 */
.image-container.bg2 li{
    /* background: linear-gradient(to top, #f3f3f3, #fff); */
    display: flex;
        flex-direction: column;
        min-height: 200px;
        padding:0px 0 20px 0;
}
.li-img-box{margin-top: auto;}
/* div 底部对齐 end */

.image-container li img{
    width: 100%;
    display: inline-block;
    align-self: flex-end;
    margin-top: auto;
    cursor: pointer; /* Added for image click functionality */
    object-fit: cover; 
    transition: transform 200m ease-in;
    min-height: 410px;
    max-height: 410px;
    overflow: hidden;
}



/* @media (max-width: 800px) {
    .image-container li {
        width: 100%;
    }
    .image-container li img {
        width: 100%;
        
    }
} */

/* 1photo.css */

/* 确保图片在小屏幕上自适应 */
.image-container img {
    max-width: 100%; /* 使图片宽度不超过其容器 */
    height: auto; /* 保持图片比例 */
}

/* 使列表项在小屏幕上垂直排列 */
.image-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: center; /* 居中对齐 */
}

.imgLi {
    /* flex: 1 1 30%; 每个图片占据45%的宽度，允许自适应 */
    margin: 10px; /* 添加间距 */
    position: relative;
}






  /*ul.image-container li img:hover{
  transform: scale(0.92); 
}*/

.image-container li p {

    font-size: 0.8em;
    text-align: right;
    margin:0px 10px 0 0 ;
    /* padding-bottom:40px; */
    z-index: 999;
    
}
.image-container li span.PaintingClockIn{text-align: right; padding-bottom:5px; }
.PaintingClockIn{font-size:1.5em!important; color:white; font-weight: bold; margin-top:-40px; display: block; text-align: right;}

.image-container li span {
    
    /* font-size: xx-small; */
    max-width: 386px;
    text-align: center; 
    /* padding-bottom: 10px; */
    
   
}

.imgLi:hover .imgsinfo {
    visibility: visible;
   
}
.imgLi p{font-size:0.8em!important;}

.imgLi{max-height: 400px; overflow: hidden; position: relative;}

/*imgsinfo是用于触发弹出显示，改成直接显示了用imgsinfo2*/
.imgsinfo{ position:absolute; bottom:80px; left:0; padding:10px 5px; background-color:#000; color:white;  visibility: hidden; max-height: 300px; overflow: hidden; font-size: 0.8em;}

.imgsinfo2{margin-bottom:0px ; font-size: 90%; max-width:380px; display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis; position: absolute; left:10px; bottom:24px; }


.imgLi:hover{color:#333}

/* 描述首字显示大字
span.imgsinfo2::first-letter {
    font-size: 1.5rem!important;
    font-weight: bold;
    margin-right:3px;  
    color: brown;

  }
 */

.img-date{font-size:1em!important; color:#888 ; }

span.forbidden-delete{font-size: 12px!important; margin-left:10px; }


/* 其他样式 */

.year-filter {
    color: #666;
    font-size: 0.9em;
    margin-left: 5px;
}

.button {
background:linear-gradient(45deg, #28a745, #20c997);
/* Green */
border-radius: 25px;
border: none;
color: white;
padding: 5px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;

}

.button2 {background:linear-gradient(45deg, #00789f, #008CBA);} /* Blue */
.button3 {background:linear-gradient(45deg, #d43024, #f44336);} /* Red */ 
.button4 {background:linear-gradient(45deg, #d5d5d5, #e7e7e7); color: black;} /* Gray */ 
.button5 {background:linear-gradient(45deg, #343434, #555555);} /* Black */

.optBox{ margin-left:40px; margin-bottom: 20PX;  }
input{padding:10px 20px 10px 20px; }
input.checkBox1{display:block; margin-top:20px;height: 30px; background-color: red;}
/* input.imgsinfoInput{} */

h2.h2-year{ margin:100px 0 30px 40px; font-size: 1.4em; background: linear-gradient(to right, rgb(41, 41, 41), rgb(122, 122, 122)); -webkit-background-clip: text; color: transparent;text-align: center;}
h2.h2-year2{ margin:100px 0 30px 40px; font-size: 3.4em; background: linear-gradient(to right, rgb(41, 41, 41), rgb(122, 122, 122)); -webkit-background-clip: text; color: transparent; text-align: center;}


.url1{   margin:10px 10px 0  10px; text-align:center; font-size: 12px;  color: #666; text-decoration: none;}

a.url1:hover{ text-decoration: underline; }

.url2{  margin:10px 10px 0  10px; text-align:center ; font-size: 12px;  color: green; text-decoration: none;}
a.url2:hover{ text-decoration: underline; }

.url3{ margin:10px 10px 0  10px; text-align:center; font-size: 12px;  color: red; text-decoration: none;}
a.url3:hover{ text-decoration: underline; }

.f18{font-size: 1em;}

/* loginPage */

.loginPage{margin:50px; }
label{ display: block;}


/*userTable*/
.userTable td,.userTable th{ border:1px solid #D7D7D7;  padding: 10px;}

.userTable input{float: left; margin:0 5px; padding:0 5px; }
.userTable select{float: left; }

.aboutInfo { margin:0 40px 0 40px; }
.aboutInfo textarea{ width: 100%; height: 50px; }




.ml40{margin-left:40px }


.tabs.ml40 {
    margin-left: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 10px;
}

/* 优化滚动条样式 */
.tabs.ml40::-webkit-scrollbar {
    height: 6px;
}

.tabs.ml40::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.tabs.ml40::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.tabs.ml40::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}


.tab-links {
    cursor: pointer;
    padding: 10px;
    display: inline-block;
    border: 1px solid #ccc;
    margin-right: 5px;
    white-space: nowrap;
    min-width: 60px;
    text-align: center;
}
.tab-links.active {
    background-color: #f1f1f1;
    font-weight: bold;
}

.tab {
    display: none;
}
.tab.active {
    display: block;
}
.tab-links {
    cursor: pointer;
    padding: 10px;
    display: inline-block;
    border: 1px solid #ccc;
    margin-right: 5px;
}
.tab-links.active {
    background-color: #f1f1f1;
    font-weight: bold;
}


#loadingIndicator {
    display: none; 
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}


/*图片描述 输入框*/
.description-container {
    display: flex; 
    align-items: center; 
    margin: 10px; 

}

.imgsinfoInput {
    flex: 1; 
    padding: 8px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    margin-right: 10px; 
    font-size: 14px; 
    width: 76%;
}

.description-container button {
    padding:7px 5px; 
    background-color: #e8e8e8; 
    color: rgb(74, 74, 74); 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 14px; 
    transition: background-color 0.3s; 
    
}

.description-container button:hover {
    background-color: #adf1b4; 
}


/*分享按钮*/

.copyButton{
    margin:10px 0;
    display: inline-block; 
    padding: 2px 8px; 
    background-color: #fff8c7; 
    color: #333;
    border: none; 
    border-radius: 5px; 
    font-size: 16px; 
    cursor: pointer; 
    /* width: 96%; */
    transition: background-color 0.3s, transform 0.2s;
    text-align: center; 
    border: 1px solid #dfd8a4;
}

.copyButton:hover {
    background-color: #ffd498; 
    transform: scale(1.03); 
    
}

.copyButton:active {
    transform: scale(0.95); 
}





/* img upload页面 上传按钮  */





.upload-button {
    margin:10px ;
    display: inline-block; 
    padding: 5px 10px; 
    background-color: #28a745; 
    color: white;
    border: none; 
    border-radius: 5px; 
    font-size: 16px; 
    cursor: pointer; 
    /* width: 96%; */
    transition: background-color 0.3s, transform 0.2s;
    text-align: center; 
}

.upload-button:hover {
    background-color: #218838; 
    transform: scale(1.03); 
    
}

.upload-button:active {
    transform: scale(0.95); 
}

/**/

.c-c1-green{color: green !important;;  }
.c-c2{color:#333!important;}
.c-c3{color:rgb(241, 62, 62)!important;}


.upload-info{margin:20px; color:#666; font-size: 0.8em; }

.opt-view{margin:100px 0 -60px 30px; text-align: center; color:#666; }
.opt-view a{opacity: 0.7;margin-right:0px;}

.opt-view a.a2{ font-weight: bold;}

.opt-view2{margin-right:80px; color:#666; font-size:12px; text-align: right;  }

#resetPasswordForm input{margin:5px 0; }


.manageimages{margin-left:40px; }
.manageimages td,th{padding:5px 10px ;border: 1px solid #d7d7d7 ; }
.search-form {margin:20px 0; color:#666; }
.search-form input{padding:5px 10px; }
.search-form select{padding:5px; }

/* em.num{min-height: 20px; background:url("../imgs/num_bg.png") no-repeat bottom right  #000 ; color:white; font-family: 'Times New Roman', Times, serif; padding:1px 7px; font-style: normal; border-top:#b2b2b2 3px solid; } */
.info1{margin-top:10px; margin-left: 68px; color:#999; line-height: 140%; font-size: 2.2em; font-family: 'Times New Roman', Times, serif;}

.loadingBox img{ margin-bottom:-10px }

.this-tabs-year{margin:20px auto 0 auto; text-align: center; font-size: 4em;  font-family: 'Times New Roman', Times, serif;
    background: linear-gradient(to bottom, rgb(85, 85, 85), rgb(210, 210, 210));-webkit-background-clip: text; color: transparent; }




.p-info-container h2{font-size: 1em!important; color: #333; font-weight: normal; max-width: 400px; margin-top:30px; margin-bottom:20px; }
/* 描述首字显示大字 */
/* .p-info-container h2::first-letter {
    font-size: 2.0rem;
    font-weight: bold;
    margin-right:3px;  
   color: brown;
   color: #333; 
  } */
 


/* 确保容器使用 Flexbox 布局 */
.p-info-container {
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: row; /* 默认横向排列 */
    justify-content: space-between; /* 在主轴上均匀分布 */
}

/* 左侧内容 */

.p-info-l {
    flex: 1; /* 占据剩余空间 */
    height: 100vh;/* Full height of the viewport */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 20px; /* Optional: Add some padding */
    box-sizing: border-box; /* Include padding in height calculation */
    /* background: white; */
    
}
.p-info-l .logo-page{margin:-10px 0px 20px 0; text-align: right; }

/* 右侧内容 */
.p-info-r {
    flex: 3; /* 占据剩余空间 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background: #313131;
    position: relative;

}

.logo-page-view{ position: absolute; top:10px; left:10px;}

/* 图片样式 */
.p-info-r img {
    /* margin:0px 50px 20px 50px; */
    margin-bottom:20px; 
    max-width: calc(100% - 80px);  /*最大宽度为100% */
    max-height: calc(100vh - 80px); /* 最大高度为视口高度 */
    height: auto; /* 高度自适应 */
    width: auto; /* 宽度自适应 */
    object-fit: contain; /* 保持图片比例 */
   
}


button.download-img{margin-bottom:10px; padding:5px 10px; font-size:0.8em;  border:1px solid #bebebe;  text-align: center; background: #ffffff; color:#666; border-radius: 5px;   }

button.download-img:hover{ background-color: #ffffff; border: 1px solid #8BA7EA; color:#3E6ADB;}

.download-img {
    display: inline-block;
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 3px;
}

.download-img:hover {
    background-color: #45a049;
}

.p-info-l-c{margin:20px 20px 0 20px; float:left; display: inline-block; color:#999; }
.p-info-l-c h2{border-top:1px solid #dadada; padding-top:20px;  }
.p-info-l-c h1{color:#333; font-size:1.2em; border-top:1px solid #eee; padding-top:20px;}
.p-info-l-c img{ overflow: hidden;   box-shadow: 0 6px 9px rgba(80, 80, 80, 0.4);  }
.p-info-l-c p{font-size:12px; }

.p-info-container a.btn-back{ border-radius: 5px;   font-size:1em;  border:1px solid #84a8f0; padding:10px; margin:20px 0 0 20px; display: block; width: 80px; text-align: center;  float: left; background: white;}

.p-info-container a.btn-back:hover{ background-color: #d7e7ff; border:1px solid #4c6fb6}

.comm-box{margin:0 18px;  }

.topics-info .cover-image-tit{width:100%; height: auto;}


.topics-list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Change to flex-start to avoid space between items */
   
}
.topic-item {
    width: 30%; /* Adjust width to fit three items per row */
    margin-bottom: 20px; /* Add some space between rows */
     /* Add some space between items */
     margin-right: 30px;
     background: white;
     box-shadow: 0 6px 9px rgba(183, 183, 183, 0.4);
     padding-bottom:30px;
}

.topic-item img {
    width: 100%; /* Make images responsive */
    height: 500px; /* Set a fixed height */
    object-fit: cover; /* Ensure the image covers the area while maintaining aspect ratio */
}


.topic-item h4{}
.topic-item p{ padding:0 0; margin:0 10px 0px  10px; color:#666}


/* 在小屏幕上调整为纵向排列 */
@media (max-width: 800px) {

 .tabs.ml40 {
        margin-left: 20px;
        margin-right: 20px;
    }
    
    .tab-links {
        padding: 8px 12px;
        font-size: 14px;
        min-width: 50px;
    }

    header .nav{ font-size: 0.8em; margin-top:20px;}
    header h1{font-size: 1.4em;}
    .image-container li {  width: 100%; min-width: auto; padding:0; margin:15px 0px!important; border-radius: 0;}
    
    .image-container li .imgsinfo2{font-size:0.8em!important; }
    .image-container li p{font-size: 1em!important;}
    /* .image-container li .img-date{ font: 1.6em;} */

    .image-container li img{
        
        /* min-height: 300px;  
         max-height: 300px;  */
    }

    .imgLi {
        /* 在小屏幕上每个图片占据100%的宽度 */
            /* flex: 1 1 100%;  */
              /* flex: 1 1 100%;  */
            
         }

    
   .image-container li span {
    
            /* font-size: xx-small; */
            /* max-width: 1000px ; */
            text-align: left; 
            /* padding-bottom: 10px; */
            
           
        }


    .p-info-container {
        flex-direction: column; /* 切换为纵向排列 */
    }

    .p-info-l,
    .p-info-r {
        
        width: 100%; /* 确保每个部分占据100%宽度 */
        

    }
    .p-info-r{
        border-radius: 0 0 30px 30px;
        box-shadow: 0 6px 9px rgba(183, 183, 183, 0.4);
    }

    .p-info-r img {
        max-height: 90vh; /* 在小屏幕上限制最大高度 */
        
    }

    .p-info-container h2{font-size: 1em!important;}
    .p-info-l-c{font-size: 1em!important;margin:20px;}
    .p-info-l-c p{font-size: 14px!important;}

    .p-info-container h2{max-width: 1000px;}

    .p-info-container a.btn-back{ font-weight: bold; }

    /* .nearby-images li{float: left; width: 10px;} */
   
    .cover-image-tit{width: 100% !important; height: auto; font-size: 1.2em!important;}

    .topic-item {
        width: 100%; /* Full width for small screens */
        margin-right: 0; /* Remove right margin */
    }

    .paintings-side-list .painting-info{font-size:0.8em!important;}

    

    
    .loginPage input[type="text"], .loginPage input[type="password"], .loginPage input[type="tel"] {
        /* width: 90%; */
        margin-bottom:10px!important;
        padding: 10px;
        /* margin: 5px 0 15px; */
        border: 1px solid #ccc;
        border-radius: 4px;
        text-align: center;
        font-size:1.2em;
    }
     .loginPage input[type="submit"] {
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        /* width: 94%; */
        border-radius: 4px;
        font-size: 1.2em;
        margin-bottom:10px!important;
    }

}


/* */
.topics-list-container{ margin:0 50px; line-height: 160%;}
.topics-list-container table{border-top: 1px solid #eee;}
.topics-list-container td{border-bottom: 1px solid #eee; padding:20px; color:#666; }
.topics-list-container h2{ width: 100%; font-size:2.6em; }
h4.topics-list-title{ margin:20px 10px 10px 10px; }
h4.topics-list-title a{font-size: 1.8em!important; font-weight: bold;}
.topics-info{margin:0 50px; }
.topics-info h2{ font-size:3em; margin-bottom:10px;}
.topics-info h3{ font-size:2em; margin-bottom:0px; }


table.manage-topics-table td{padding:10px; border-bottom: 1px solid #eee;   border-right: 1px solid #eee; color:#333;  }

.manage-topics-container{margin:0 50px; color:#333;}
.manage-topics-container label{margin-top:10px; }
.manage-topics-container textarea{width: 500px;padding:10px 20px}
.manage-topics-container input{width: 500px;}



 /* 模态框样式 */
 .map-modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    z-index: 9999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);

}
.map-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px 20px 40px 20px;
    border: 1px solid #888;
    width: 80%;
    height: 80%;
}


.img-opt-btn input{ margin-bottom:5px;  }
.img-opt-btn2 input{  overflow: hidden;  background:#eee;}

.imgsinfoInput2 {
   
    padding: 8px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    margin-right: 10px; 
    font-size: 14px; 
    width: 35%;
    background: #eee;
}

.nearby-images{display: block; display: inline-block; font-size:0.8em; }
.nearby-images ul{ list-style: none; padding:0; margin: 0;}
.nearby-images li{float: left; width: 120px;}


/* color inage */
#colorPalette {
    display: flex;
    margin-top: 20px;
}

#textDisplay {

    margin:5px 0 0 0;
    padding:10px 0; 
    font-size: 1em;
    text-align: left;
    /* border: 1px solid #ccc; */
    /* position: absolute; */
    /* left:0px; bottom:3%;  */
    opacity: 0.81;
    /* width:60%; */
    color:#333;
}

.colorBox {
    width: 30px; /* Adjust width as needed */
    height: 30px; /* Adjust height as needed */
    display: inline-block;
    /* margin: 5px;  Space between color boxes */
    /* border: 1px solid #ccc; Optional border for better visibility */
    cursor: pointer; /* Change cursor to pointer */
}


/* color inage end */

.paint_img_box{width: 100px; height: auto;}




/* paintings */
.paintings {width:100%;text-align: center; margin:0 auto;}
.paintings ul{ padding:0; list-style: none;  margin: 0; list-style-type: none;}

.paintings ul li{ list-style: none; padding-bottom:30px; text-align: center; margin-bottom:30px; background: #000; }
.paintings .paintings-info-none{ font-size:2em;}

#painting_time{background:  #D1E3FF; border: 1px solid #666; }
#painting_image{ background:  #D1E3FF; width:210px; height:40px; }

.p-info-r .paintings-info{margin:0 50px; color:#ddd}

.nav2{margin:0px 0px 20px 20px; border-bottom:1px solid #eee;padding-bottom:10px;  color:#a9a9a9; text-align: left; margin-top:-50px;  }

.painting-wel{padding:10px 0 10px 0; color:#007bff; font-size:1.1em; font-weight: bold; }
.painting-info{font-size:1em; color:#666; margin-bottom:10px; }
.painting-info2{font-size:0.8em; color:#999; margin-bottom:10px; }
.painting-info img{ padding:20px;}

.painting-upload{ background-color: #e1eeff; padding:10px 20px 30px 20px;box-shadow: 0 6px 9px rgba(80, 80, 80, 0.4); border:1px solid #c1d8ff; }

.painting-upload #painting-submit{background: #007bff!important; color:white; border:1px solid rgb(31, 52, 173);border-radius: 5px }

.painting-upload #painting-submit:hover{background: #51a2ee!important;  border-radius: 5px}
.painting-upload #painting_image{width:auto; height: 40px; padding:20px 0 0px 0;}
.painting-upload #description{width:100%; height: 40px;}
.painting-upload label{font-size:1em; color:#333;}

.paintings #submit-del{float:left;padding:8px 0px;background:rgb(0, 0, 0)!important; color:rgb(224, 29, 29); border:1px solid #000; border-radius: 5px}
.paintings #submit-del:hover{color: #ff5c5c!important; border-radius: 5px;}


.back-to-top {
    position: fixed;
    right: 20px; /* Adjust as needed */
    bottom: 20px; /* Adjust as needed */
    background-color: #fff; /* Button color */
    border:1px solid #999;
    color: #007bff; /* Text color */
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    display: none; /* Initially hidden */
    z-index: 1000; /* Ensure it appears above other content */
}

.back-to-top:hover {
    background-color: #d4e8ff; /* Darker shade on hover */
}
.paintings-side-list{ position: absolute; left: 0; top: 0; padding:5px 10px 5px 10px;  
    background-color:rgba(255, 255, 255, 0.7);
    z-index: 999999;
    box-shadow: 0 12px 18px rgba(0, 0, 0, 0.2); /* 添加投影 */}
.paintings-side-list ul{list-style-type: none; margin:0px; padding:0; }
.paintings-side-list li{ display: inline-block; margin:10px 0; }
.paintings-side-list li img{ max-height:180px!important; overflow: hidden;}
.paintings-side-list h3 a{font-size: 0.8em!important; text-decoration: none; cursor:pointer;}
.paintings-side-list h3{
    color:#333;
   margin:10px 10px 0 0px;
   padding:0;
   font-size:0.8em;
   }

.painting-links{font-size:1.2em; max-width: 220px; padding: 0px 0 10px 0 ; margin-bottom:40px; }
.btn-more-btn { width: 100%; float: left;  }
.btn-more-btn a{width: 400px;background: white;}

 .btn-more-btn a{ border-radius: 5px;  border:1px solid #84a8f0; padding:5px 10px; margin:20px 0 13px 0px; display: block; width: 120px; text-align: center;  float: left;}

.btn-more-btn  a:hover{ background-color: #d7e7ff; border:1px solid #4c6fb6}



.paintings .news-info{font-size:1.2em;color:#999;}


.calendar-box{
    margin:30px; 

}
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;

}
.day {
    border: 1px solid #ccc;
    padding: 5px;
    height: 100px;
    position: relative;
}
.day img {  
    max-width: 100%;
    max-height: 80%;
    display: block;
    margin: 0 auto;
    float:left; width:40px; overflow: hidden; z-index: 99999;margin-top:10px; border:1px solid #ccc; padding:6px;margin-right:6px;  
    
}
.day-img{ } 

.month-selector {
    margin-bottom: 20px;
    font-size:1.4em;
    font-weight: bold;
    margin-left:0px; 
    color:#333;
}
.month-selector button{padding:5px 10px; }
#current-month{color:#333;}
.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-weight: bold;
    text-align: center;
    
    margin-bottom:10px;
    color:#ccc;
}
a.day-more{ position: absolute; bottom:10px; right:5px; }

.no-paintings{margin-top:80px; font-size:1.4em;}

/* paintings end*/


.nav3{margin-left:40px; }


#canvas {
    display:none; /* Hide the canvas */
}

.aboutBox{ margin:20px 30px 30px 30px; padding:12px 20px 7px 20px; text-align: center; border-radius:30px; border:1px dotted #e8e8e8; color:#333; opacity: 1; }

@media (max-width: 800px) {
    .aboutBox{ margin:20px 30px 30px 30px; padding:20px 30px; border-radius:30px; background-color: white; border:1px dotted #ccc; color:#333; opacity: 0.7; }
}

.colorimage{margin-bottom:20px; }

.status-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 10;
}

.day {
    position: relative;
}

.day img {
    position: relative;
}