/* //结构样式开始 */
         /* @font-face {
            font-family: 'fzkt';
            src: url('fzkt.woff') format('woff'),
            url('fzkt.ttf') format('truetype');
            font-display: swap;
        } */

        @font-face {
            font-family: 'fzkt';
            src: url('fzkt.woff2') format('woff2'),
            url('fzkt.woff') format('woff'),
            url('fzkt.ttf') format('truetype');
            font-display: swap;
        }
        @font-face {
            font-family: 'yzqyt';
            src: url('yzqyt.woff2') format('woff2'),
            url('yzqyt.woff') format('woff'),
            url('yzqyt.ttf') format('truetype');
            font-display: swap;
        }
      
     
      
        @font-face {
            font-family: 'xs';
            src: url('xs.woff2') format('woff2'),
            url('xs.woff') format('woff'),
            url('xs.ttf') format('truetype');
            font-display: swap;
        }
     
          
        @font-face {
            font-family: 'cjsxsyb';
            src: url('cjsxsyb.woff2') format('woff2'),
            url('cjsxsyb.woff') format('woff'),
            url('cjsxsyb.ttf') format('truetype');
            font-display: swap;
        }

        @font-face {
            font-family: 'ls';
            src: url('ls.woff2') format('woff2'),
            url('ls.woff') format('woff'),
            url('ls.ttf') format('truetype');
            font-display: swap;
        }
      
        @font-face {
            font-family: 'zs';
            src: url('zs.woff2') format('woff2'),
            url('zs.woff') format('woff'),
            url('zs.ttf') format('truetype');
            font-display: swap;
        }
      
        @font-face {
            font-family: 'cs';
            src: url('cs.woff2') format('woff2'),
            url('cs.woff') format('woff'),
            url('cs.ttf') format('truetype');
            font-display: swap;
        }
      
        @font-face {
            font-family: 'yyrcs';
            src: url('yyrcs.woff2') format('woff2'),
            url('yyrcs.woff') format('woff'),
            url('yyrcs.ttf') format('truetype');
            font-display: swap;
        }
      
        @font-face {
            font-family: 'zqlcsyb';
            src: url('zqlcsyb.woff2') format('woff2'),
            url('zqlcsyb.woff') format('woff'),
            url('zqlcsyb.ttf') format('truetype');
            font-display: swap;
        }
       

      
   

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


            }

            body {
            display: flex;
            flex-direction: column;
            }

        a,a:hover{color:#333;}
                

        .container {
            display: flex;
            width: 100%;
            height: 100%;
            flex: 1;
            overflow: hidden; /* 确保滑动效果在容器内 */
        }

        sup{font-size:8px!important; margin-right:-8px; }
        .column {
            padding: 10px;
            box-sizing: border-box;
            transition: transform 0.3s ease, width 0.3s ease; /* 添加滑动效果 */
        }
        .col1 { flex: 0.5; background-color: #FDFDFB;  height: 100%; position: relative;  background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/bgbig.jpg'); box-shadow: 0 4px 8px rgba(0,0,0,0.6);}
        .col2 { flex: 1.5; background-color: #EE7C3D; transform: translateX(-100%); height: 100%; position: relative; overflow-y: auto;} /* 初始隐藏 */
        .col3 { flex: 5; background-color: #fff; position: relative;}
        .col4 { flex: 1.5; background-color: #d8d0c8; transform: translateX(100%); height: 100%;position: relative; overflow-y: auto;} /* 初始隐藏 */
        .col5 { flex: 1.5; background-color: #d8d0c8; transform: translateX(100%); height: 100%;position: relative; overflow-y: auto;} /* 初始隐藏 */
        .col3-expanded { flex: 6.5; } /* 扩展第3列 */
        .btn-menu { display: none; }
        .btn-menu-mob{ display: block;display: flex;
            align-items: center;}
        
        .hidden { display: none; } /* 隐藏元素 */
        .show { transform: translateX(0); } /* 显示元素 */
        @media (max-width: 768px) {
            .column {
                flex: 1 1 100%;
                transform: translateX(0) !important; /* 确保在手机上所有列都显示 */
            }
            .col1, .col2, .col4, .col5 {
                display: none; /* 手机默认隐藏第1、2、4、5列 */
            }
            .col2, .col4, .col5{ opacity: 0.85;}
            .col1{ opacity: 0.97;}

            .col1.show, .col2.show {
                display: block;
                position: absolute;
                top: 0;
                z-index: 10;
            }
            .col1.show {
                width: 30%;
                left: 0;
            }
            .col2.show {
                width: 70%;
                left: 30%;
            }
            .col4.show, .col5.show {
                display: block;
                position: absolute;
                width: 100%;
                top: 0;
                left: 0;
                z-index: 10;
            }
            .btn-menu { display: block; }
            .btn-menu-mob{ display: none;}
            .btn-menu-mob img{margin-bottom:5px;}
            .btn-menu-pc{ display: block!important;}
            .btn-menu-pc2{ display:none;}

      

            .col3 .cBox3{ display:inline-flex;  align-items: center; padding:20px!important;  }
            .col3 .cBox3 .cont{  font-size:2.8em!important;  }
            .c-c3.horizontal .cont{  font-size:2.2em!important;  }

            .col3 .cBox3 .tit{font-size:0.7em!important;}
            .col3 .cBox3 .c-c3 {padding:20px!important;}
            .col3 .cBox3 .c-info{margin:5px 8px 5px 8px!important;}

            .sitelogo {margin:20px 0 70px 0!important;}

            /* //隐藏手机上打印 logo不好定位的问题，暂时手机上先不显示 logo */
             @media print {
         
                body::after {
                    /* content:none!important;
                    padding-top:-200000px; */
                   
                }
            }
            

        }


        @media print {
            body * {
                visibility: hidden;
            }
            .cBox3, .cBox3 * {
                visibility: visible;
            }
            .cBox3 {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                
            }

          /*  body::after {
                 content: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/favicon64r.png')!important;
                position: fixed;
                bottom: 10px;
                right: 10px;
                width: 64px; Adjust size as needed 
                height: auto; 
            }*/


            .cBox3.background3  .c-c3{  color: #000!important;  }
            .cBox3.background3  .c-c3 .tit{ color: #666!important; }
            .cBox3.background4  .c-c3{  color: #000!important; }
            .cBox3.background4  .c-c3 .tit{  color: #666!important; }
            .col3.bgbackground4 .background3 .c-c3 .tit ,.col3.bgbackground4 .background4 .c-c3 .tit{ color: #666!important;}
            .col3.bgbackground5 .background3 .c-c3 .tit ,.col3.bgbackground5 .background4 .c-c3 .tit{  color: #666!important;}
            .col3.bgbackground4 .c-c3 .tit{ color: #000!important; }
            .col3.bgbackground5 .c-c3 .tit{ color: #000!important; }
    
            .col3.bgbackgroundhz .c-c3{ color: #000!important;}
            .col3.bgbackgroundhz .c-c3 .tit{color: #666!important;}
            .col3.bgbackgroundhzgh .c-c3{ color: #000!important; }
            .col3.bgbackgroundhzgh .c-c3 .tit{ color: #666!important;}
            .col3.bgbackgroundqdh .c-c3{  color: #000!important; }
            .col3.bgbackgroundqdh .c-c3 .tit{ color: #666!important; }
           
        }
   


        

        /* //内容样式开始 */

        #loadingIndicator{display: flex; justify-content: center; align-items: center;position: absolute;bottom:120px;  left:-30px; width: 100%;   text-align: center; }
        #dataLoadingIndicator{display: none; justify-content: center; align-items: center;position: absolute; bottom:120px; left:-30px; width: 100%;  text-align: center; }
        #fontLoadingIndicator{display: flex; justify-content: center; align-items: center;position: absolute; bottom:120px; left:-30px; width: 100%;  text-align: center; }

        .col3{
            margin:0 auto; 
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            width:100%;justify-content: center;
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n01-b.jpg') no-repeat top left / cover;
          

        }

        .col3 .cBox3 {
            /* 确保 cBox3 能够根据内容自动调整大小 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
        }
        
        .col3 .cBox3 .c-c3 {
            /* 确保 c-c3 能够根据内容自动调整大小 */
            max-width: 100%;
            padding: 20px;
            box-sizing: border-box;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
        .col3 .shareimg{position: absolute; right: 16px; bottom: 16px; opacity: 0.8; }
      

        .col3 .cBox3{ /*border:1px solid #ccc;*/ padding:50px; font-family: 'STKaiti', 'KaiTi', 'STFangsong', 'FangSong';  position: relative; width: auto;}
        .col3 .cBox3 .c-c3 { padding:30px;  writing-mode: vertical-rl; text-orientation: mixed; }
        .col3 .cBox3 .c-info{ margin:5px 20px;  font-size:1.5em; color:#666; }
       
        .col3 .cBox3 .cont{  font-size:4em; line-height: 1.3em; opacity: 1; }
        .col3 .cBox3 .cont em{color:red; font-style: normal; font-size:0.8em!important; margin-top:10px; opacity: 0.3;  padding-bottom:10px; }


        .col3 .menubar3-s{ position:absolute; right:10px; bottom:90px; }
        .col3 .menubar3-t{ position:absolute; top:10px; left:10px;  }
        .col3 .menubar3-b{ position:absolute; right:auto; bottom:30px; text-align: center; }
        .col3 .menubar3-s ul{ list-style: none;}
        .col3 .menubar3-s ul li{ margin-bottom:10px;}

        .cBox3 .icon-in-paper{ position: absolute; bottom:10px;right:10px;  z-index: 10; pointer-events: none; }

    


        .highlight {
            background-color: yellow;
        }

     
      

        .font-option.selected, .layout-option.selected, .background-option.selected, .bgbackground-option.selected {
            background-color: #232323; /* 选中状态的背景颜色 */
            color: white!important; /* 选中状态的文字颜色 */
            border:1px solid #121212; 
        }

        .c-c3.horizontal {
            writing-mode: horizontal-tb!important;
            
            text-orientation: mixed;

        }
       


        .c-c3.horizontal .c-info{margin:20px 10px!important; }

        .c-c3.vertical {
          
            writing-mode: vertical-rl!important;
            text-orientation: mixed;
        }

        .c-c3.vertical .cont{letter-spacing: 3px!important; }

        .cBox3.background0 {
            background:none;
            opacity: 1;
            
        }
        .cBox3.background0 .c-c3{ border:none!important; }
        .cBox3.background1   .c-c3{border:2px double red; }
        .cBox3.background2  .c-c3{border:2px double red; }
        .cBox3.background3  .c-c3{ border:2px double lemonchiffon!important; color: lemonchiffon; }
        .cBox3.background3  .c-c3 .tit{ color: lemonchiffon!important; }
        .cBox3.background4  .c-c3{ border:2px double lemonchiffon!important; color: lemonchiffon; }
        .cBox3.background4  .c-c3 .tit{ color: lemonchiffon!important; }
        .col3.bgbackground4 .background3 .c-c3 .tit ,.col3.bgbackground4 .background4 .c-c3 .tit{ color: lemonchiffon!important; }
        .col3.bgbackground5 .background3 .c-c3 .tit ,.col3.bgbackground5 .background4 .c-c3 .tit{ color: lemonchiffon!important; }
        .col3.bgbackground4 .c-c3 .tit{ color: #000!important; }
        .col3.bgbackground5 .c-c3 .tit{ color: #000!important; }

        .col3.bgbackgroundhz .c-c3{ border:none; color: #FBF9F5; }
        .col3.bgbackgroundhz .c-c3 .tit{ color: #b8b8b8!important; }
        .col3.bgbackgroundhzgh .c-c3{ border:none; color: #FBF9F5; }
        .col3.bgbackgroundhzgh .c-c3 .tit{ color: #b8b8b8!important; }
        .col3.bgbackgroundqdh .c-c3{ border:none; color: #FBF9F5; }
        .col3.bgbackgroundqdh .c-c3 .tit{ color: #b8b8b8!important; }
        
        

        .col3.bgbackgroundhz .background4 .c-c3,.col3.bgbackgroundhz .background3 .c-c3,.col3.bgbackgroundhz .background2 .c-c3,.col3.bgbackgroundhz .background1 .c-c3,.col3.bgbackgroundhz .background3 .c-c3,.col3.bgbackgroundhz .background5 .c-c3,.col3.bgbackgroundhz .background6 .c-c3{ border:2px double red; color: #000; }
        .col3.bgbackgroundhz .background4 .c-c3 .tit,.col3.bgbackgroundhz .background3 .c-c3 .tit,.col3.bgbackgroundhz .background2 .c-c3 .tit,.col3.bgbackgroundhz .background1 .c-c3 .tit,.col3.bgbackgroundhz .background3 .c-c3 .tit,.col3.bgbackgroundhz .background5 .c-c3 .tit,.col3.bgbackgroundhz .background6 .c-c3 .tit{color: #000!important;}
        
        .col3.bgbackgroundhzgh .background4 .c-c3,.col3.bgbackgroundhzgh .background3 .c-c3,.col3.bgbackgroundhzgh .background2 .c-c3,.col3.bgbackgroundhzgh .background1 .c-c3,.col3.bgbackgroundhzgh .background3 .c-c3,.col3.bgbackgroundhzgh .background5 .c-c3,.col3.bgbackgroundhzgh .background6 .c-c3{ border:2px double red; color: #000; }
        .col3.bgbackgroundhzgh .background4 .c-c3 .tit,.col3.bgbackgroundhzgh .background3 .c-c3 .tit,.col3.bgbackgroundhzgh .background2 .c-c3 .tit,.col3.bgbackgroundhzgh .background1 .c-c3 .tit,.col3.bgbackgroundhzgh .background3 .c-c3 .tit,.col3.bgbackgroundhzgh .background5 .c-c3 .tit,.col3.bgbackgroundhzgh .background6 .c-c3 .tit{color: #000!important;}
      
        .col3.bgbackgroundqdh .background4 .c-c3,.col3.bgbackgroundqdh .background3 .c-c3,.col3.bgbackgroundqdh .background2 .c-c3,.col3.bgbackgroundqdh .background1 .c-c3,.col3.bgbackgroundqdh .background3 .c-c3,.col3.bgbackgroundqdh .background5 .c-c3,.col3.bgbackgroundqdh .background6 .c-c3{ border:2px double red; color: #000; }
        .col3.bgbackgroundqdh .background4 .c-c3 .tit,.col3.bgbackgroundqdh .background3 .c-c3 .tit,.col3.bgbackgroundqdh .background2 .c-c3 .tit,.col3.bgbackgroundqdh .background1 .c-c3 .tit,.col3.bgbackgroundqdh .background3 .c-c3 .tit,.col3.bgbackgroundqdh .background5 .c-c3 .tit,.col3.bgbackgroundqdh .background6 .c-c3 .tit{color: #000!important;}
      

        .cBox3.background5   .c-c3{border:2px double red; }
        .cBox3.background6  .c-c3{border:2px double red; }
        
       
     
       

        .cBox3.background1 {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/bgbig.jpg') repeat-x top left / cover;
            opacity: 0.9;
            max-width: 100%;
            padding: 50px;
            box-sizing: border-box;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .cBox3.background2 {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n03.jpg') repeat-x top left / cover;
            opacity: 1;
            max-width: 100%;
            padding: 50px;
            box-sizing: border-box;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .cBox3.background3 {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n04-b.jpg') repeat-x top center / cover;
            max-width: 100%;
            padding: 50px;
            box-sizing: border-box;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .cBox3.background4 {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n05-b.jpg') repeat-x top left / cover;
            max-width: 100%;
            padding: 50px;
            box-sizing: border-box;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .cBox3.background5 {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n04.jpg') repeat-x top left / cover;
            max-width: 100%;
            padding: 50px;
            box-sizing: border-box;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .cBox3.background6 {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n05.jpg') repeat-x bottom left / cover;
            max-width: 100%;
            padding: 50px;
            box-sizing: border-box;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }



        .col3.bgbackground1 {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n01-b.jpg') no-repeat top left / cover;
        }

        .col3.bgbackground2 {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n02-b.jpg')  no-repeat top left / cover;
        }

        .col3.bgbackground3 {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n03-b.jpg') no-repeat top center / cover;
            
        }

        .col3.bgbackground4 {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n04-b.jpg')  no-repeat top center / cover;
            
        }

        .col3.bgbackground5 {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n05-b.jpg') no-repeat top left / cover;
        }
        .col3.bgbackground6 {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n06-b.jpg') no-repeat top left / cover;
        }
        .col3.bgbackgroundhz {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n0hz-b.jpg') no-repeat top center / cover;
        }
        .col3.bgbackgroundqdh {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n0qdh-b.jpg') no-repeat top center / cover;
        }

        .col3.bgbackgroundgh {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n0gh-b.jpg') no-repeat top left / cover;
        }

        .col3.bgbackgroundhzgh {
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/n0hzgh-b.jpg') no-repeat top center / cover;
        }

       

      

        .side-menu{border-top:1px solid #e2e2e2; }
        .side-menu ul{list-style: none; margin:0; padding:0;  }
        .side-menu ul li{margin:5px 0 ; border-bottom:1px solid #e2e2e2; padding:5px 0 15px 0; opacity: 0.8; text-align: center;}
        .side-menu ul li button{width:100%; color:#333; border:none; font-size:1.2em; background: none; cursor: pointer;}
        .side-menu ul li button:hover{color: #EB452B;opacity: 1; }
        
        .side-menu ul li a{width:100%;  border:none; font-size:1.2em; background: none; cursor: pointer; text-decoration: none;}
        .side-menu ul li a:hover{opacity: 1; }
       
        .sitelogo {text-align: center;margin:20px 0 100px 0;}
        .sitelogo img{ border-radius: 20px;  box-shadow: 0 4px 8px rgba(0,0,0,0.2);  }
        .btn-menu-mob{ position: absolute; right:30px; top:190px; cursor: pointer; border:none; width:100px; height:50px; display: flex; justify-content: center; align-items: center; background: none; color:#D9543A;  opacity: 0.7;}
        .btn-menu-mob:hover{opacity: 1;}
        .btn-menu-mob img{padding-right:5px;  }
        .menuSelected {
            color: #EB452B!important; /* 选中状态的文字颜色 */
            font-weight: bold;
            background: url('http://1photo1month.com/serve_image.php?image=lab/poetry/imgs/menu-icon-re.png') no-repeat 115px 5px !important;
            opacity: 1!important;
        }
        .col2 h2{margin:50px 20px 10px 20px ;}
        
        .side-menu-cList-search{margin:20px; }
        #searchInput{width:100%; padding:5px 3px; border:1px solid #eee;   }
        .side-menu-cList-cont{margin-right:20px; }
        .side-menu-cList-cont li{list-style:circle; margin:0 20px 10px 0;  border-bottom:1px solid #f19766;  line-height: 0.8em;; }
        .side-menu-cList-cont li p:hover{color:#F5DAB5; cursor: pointer;}
        .side-menu-cList-cont li p{line-height: 1.4em;}
        
        .remove-favorite{ margin-bottom:10px; background: #ee7c3e; color:#F5DAB5; border:1px solid #F5DAB5; text-align: right; border-radius: 2px;}
        .remove-favorite:hover{ background:#F5F8D3 ; cursor: pointer; color:#EB462B;}
        .btn-menu-pc{  position: fixed; top:10px; right:10px;  z-index: 1000; height:40px; display: none; padding:5px 10px;  float: right; margin-bottom:10px; color:#fff!important;background: #ee7c3e; border:1px solid #F5DAB5; text-align: right; border-radius: 2px; font-size: 1em; margin:5px 12px;  border-radius: 3px; font-weight: bold;}
        .btn-menu-pc:hover{ cursor: pointer; color:#333!important;; background: #fff; border:1px solid #F5DAB5;  }
        .btn-menu-pc2{padding:5px 10px;  float: right; margin-bottom:10px; color:#fff!important;background: #cc6c35; border:1px solid #F5DAB5; text-align: right; border-radius: 2px; font-size: 1em; margin:5px 12px;  border-radius: 3px; font-weight: bold;}
        .btn-menu-pc2:hover{ cursor: pointer;color:#333!important;;background: #fff;  border:1px solid #F5DAB5; }
           
        .menubar4-t .closeCol{  position: fixed; top:10px; right:10px;  z-index: 9888; height:40px; display: none; padding:5px 10px;  float: right; margin-bottom:10px; color:#fff!important;background: #ee7c3e; border:1px solid #F5DAB5; text-align: right; border-radius: 2px; font-size: 1em; margin:5px 12px;  border-radius: 3px; font-weight: bold;}
        .menubar4-t .closeCol:hover{ cursor: pointer; color:#333!important;; background: #fff; border:1px solid #F5DAB5;  }
        .menubar4-t .closeColset{  position: fixed; top:10px; right:10px;  z-index: 9999; height:40px; padding:5px 10px;  float: right; margin-bottom:10px; color:#fff!important;background: #ee7c3e; border:1px solid #F5DAB5; text-align: right; border-radius: 2px; font-size: 1em; margin:5px 12px;  border-radius: 3px; font-weight: bold;}
        .menubar4-t .closeColset:hover{ cursor: pointer; color:#333!important;; background: #fff; border:1px solid #F5DAB5;  }
        
    


        .btn-menu{ float: right; margin-bottom:10px; padding:5px;  color:#333; border:none; background:none; text-align: right; border-radius: 2px; font-size: 1em; border-radius: 3px; }
        .btn-menu:hover{ cursor: pointer; color:#EB462B; color:#333;}
        .btn-menu strong{ display: block; padding-top:10px; color:#EB462C; opacity: 0.8;     font-weight: bold;
            font-size: 20px;
            font-family: math;}
        .stielogo2 {text-align: center;margin:5px 0 5px 0; }
        .stielogo2 img{ border-radius: 20px;  box-shadow: 0 4px 8px rgba(0,0,0,0.2); opacity: 0.8; }
        
        
        #toggleCol4{ width:50px; padding:10px 0; border: 1px solid #ddd; background: white; color:#333; border-radius: 5px; font-size:0.8em!important; opacity: 0.3; }
        #toggleCol4:hover{ background:#EB462B ;color:white; opacity: 1; }
        #toggleCol5{ width:50px;  padding:10px 0;border: 1px solid #ddd; background: white; color:#333; border-radius: 5px; font-size:0.8em!important; opacity: 0.3; }
        #toggleCol5:hover{ background:#EB462B ;color:white; opacity: 1; }

        #exportImage{ width:50px; padding:10px 0; border: 1px solid #ddd; background: white; color:#333; border-radius: 5px; font-size:0.8em!important; opacity: 0.3; }
        #exportImage:hover{ background:#EB462B ;color:white; opacity: 1; }
        .p-print{ width:50px; padding:10px 0; border: 1px solid #ddd; background: white; color:#333; border-radius: 5px; font-size:0.8em!important; opacity: 0.3; }
        .p-print:hover{ background:#EB462B ;color:white; opacity: 1; }
        .col3side-btn{ width:50px; padding:15px 0 5px 0; border: 1px solid #ddd; background: none; color:#333; border-radius: 5px; font-size:0.8em!important; opacity: 0.8; }
        .col3side-btn img{margin-left:-16px;}
        .col3side-btn:hover{color:#EB462B; opacity: 1; }

        .col3side-btn {position: relative; width:50; height:50px; }
        .col3side-btn img {
            position: absolute;
            top: 0;
            left: 0px;
           
            display: block !important;
           
            animation: moveIn 3s forwards; 
        }

        @keyframes moveIn {
            from {
                top: 20px;
                left: 30px;
              
            }
            to {
                left: 0px; 
                top: 0px;
            }
        }




        .col3side-btn2{ width:50px; padding:10px 0; border: 1px solid #ddd; background: white; color:#333; border-radius: 5px; font-size:0.8em!important; opacity: 0.3; }
        .col3side-btn2:hover{ background:#EB462B ;color:white; opacity: 1; }
     
      
        
        
        .btn-save{float: left; font-size:0.8em!important; }
        .btn-change{float: left;}
        #changeSentence{ width:110px; height: 45px; background: white;border: 1px solid #999; color:#333; border-radius: 50px; font-size:1em!important; opacity: 0.8; margin-right:10px; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
        #changeSentence:hover{ color:#000; opacity: 1; font-weight: bold; color:#fff;border: 1px solid #d02f16; background: #EB462B; }
        #changeSentence:visited{width:110px; height: 45px; background: white;border: 1px solid #999; color:#333; }
        #changeSentence:active{width:110px; height: 45px; background: white;border: 1px solid #999; color:#333;   }
        
        #toggleFavorite{ width:64px; height: 45px; background: white;border: 1px solid #999; color:#333; border-radius: 50px; font-size:1em!important; opacity: 0.8; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
        #toggleFavorite:hover{ color:#000; opacity: 1;  font-weight: bold; color:#EB462B ;border: 1px solid #EB462B; }
     
        .closeCol{ margin:-50px -10px 10px 0; float:right;  padding:5px 10px; color:#333;  color:#fff; background: #EB482C; border:1px solid #cf2e15; text-align: right; border-radius: 5px; font-size: 1em; border-radius: 3px; font-weight: bold;}
        .closeCol:hover{ background:#fff ; cursor: pointer;border:1px solid #ee7c3e; color:#333; }
        
        .menubar4-t h2,.menubar5-t h2{ margin-top:60px;  }

         
        .menubar4-t{margin:20px; }
        .cBox4{margin:20px; }
        .cBox4 h3{border-bottom: 1px solid #ece7e3; padding-bottom:5px; }

        .cBox4 .c-c4 button{border:1px solid #666; color:#333; padding:5px; border-radius: 3px; margin:0 5px 5px 0;  }

        /* #toggleCol5{display: none;} */

        .c-c4 p{font-size:0.8em;color:#333; }

        .menubar5-t{margin:20px; }
        .cBox5{margin:20px; color:#333!important; }
        .cBox5 h3{border-bottom: 1px solid #ece7e3; padding-bottom:5px; }
        .cBox5 input{ width: 100%; border:1px soild #ccc; padding:10px 5px; margin-bottom:10px;}
        .cBox5 button{ margin:20px 10px 20px 0; border:1px solid #666; background: white; color:#333!important; border-radius: 5px; padding:10px;  }
        .cBox5 button:hover{         background:#EB462B ;color:white!important; opacity: 1; }

        .c-c4 p,.c-c5 p{font-size:0.8em;color:#333; }

        #iconSearch {
            display: flex;
            align-items: center;
        }
        
        #iconSearch img {
            margin-right: 5px; /* Adjust the spacing between the image and text as needed */
        }

 
       
        .btn-menu-mobile {
            width:50px; padding:10px 0; border: 1px solid #ddd; background: white; color:#333; border-radius: 5px; font-size:0.8em!important; opacity: 0.3; 
        }
        .btn-menu-mobile:hover{ background:#EB462B ;color:white; opacity: 1; }
        
        @media (max-width: 768px) {
            .btn-menu-mobile {
                width: 100%;
                margin: 10px 0;
            }
        }