#main .left {float: left;	width: 160px;	margin: 0px 5px 0px 0px;background:none;display: inline; height: auto;}
#main .color {border: 1px solid #009933;	padding: 10px;}
#main .color table {	width: 100%;	text-align: center;}
#main .color td {	border: 1px solid #ccc;	padding: 5px;	font-size: 14px;}
#main .colorpicker {	border: 1px solid #009933;	padding: 10px;}
#main .colorpicker table {	text-align: center;	margin: 5px auto;}
#main .colorpicker td {	width: 22px;	height: 16px;	border: 1px solid #000;	cursor: pointer;}
#main  .textarea {width:99%;border: 1px solid #95bac2;box-sizing:border-box;height: 220px;	resize: vertical;	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);	-webkit-border-radius: 8px;	-moz-border-radius: 8px;	border-radius: 8px;padding: 5px 10px;}
#main textarea.textarea {clear:both;}
.left .alert {	padding-right: 2px}
.left .alert h2 {	font-size: 18px;	margin: 0 0 3px 0;	color: #222;}
.left .alert ul, .left .alert ol {	margin: 0 0 10px 3px;}
.left .alert li {	color: #404040;	list-style-type: none;	background-image: url(/http/www.chacuo.net/images/public/arrow.gif);	background-repeat: no-repeat;	background-position: 0 .7em;	padding: 0 0 0 12px;	line-height: 28px; font-size:15px}
/*#main .middle {margin-left:150px; } */
/*#main .middle {margin-left:185px;} */
#main .left .left_slide{position:fixed;left:162px;top:250px;}
#main #FileUploadView {width:300px;height:220px;position: absolute;top:-10px;right:70px;z-index: 100;padding: 10px; text-align: center;border:solid 1px #666;background: #fff;}
#main #FileUploadView div{position:relative;top:-5px;}
#main #web_url_input {position:absolute;left:200px; right:200px;z-index: 100;}

/*以下为convertd div定义*/
#main #convertd {overflow: auto;}
#main #convertd  div span.py {padding: 5px;}
#main #convertd .py{font-style: normal; font-size:18pt; color:#0000FF;}
#main #convertd .font{font-style: normal; font-size:14pt; color:#000;}
#main #convertd ul li {float:left; margin: 5px;text-align: center;}

#main fieldset {padding:10px 5px;}

div.table {padding:20px;*padding:5px;color:#000;text-align: left;background: #fff;}
div.table table{width:95%;text-align: center;}
div.table thead{background:#eee;text-align: center;}
div.table h3{border-bottom: 1px solid #333;}
div.table th{font-weight: blod;}
div.table td,th{border:1px solid #ccc;padding: 8px;text-align: left;word-break: break-all;}

#main .test {background: #000;}
#main .test li{float: left; width:200px; background: #333; color:#F2F1DD; border: 1px solid #333;font-size:14px; margin:10px 5px; padding:8px 10px;overflow:hidden;text-indent: 20px;white-space: nowrap;text-overflow: ellipsis;font-family: 'Droid Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;background-image: url(/http/www.chacuo.net/images/public/cross.png);background-position: 10px 50%;background-repeat: no-repeat;}
#main .test h1{clear:both;border-bottom:1px solid #ccc;margin: 20px; color:#fff;}
#main .test ul {padding-left: 50px;margin-top:20px;}
.testok{background-image: url(/http/www.chacuo.net/images/public/tick.png);background-position: 10px 50%;background-repeat: no-repeat;}

#main #selector-tests .txs{border: 0;background-color: transparent; color:#fff;}
#main #selector-tests li[id^='css3_begin'] {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
#main #selector-tests li[id$='_ends'] {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
#main #selector-tests li[id*="_matches"] {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
:root #main #selector-tests #css3_root  {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
#main #selector-tests li:nth-child(5) {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
#main #selector-tests li:nth-last-child(16) {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
#main #selector-tests li:nth-of-type(7) {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
#main #selector-tests div.css3_nth_last_of_type li:nth-last-of-type(1) {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
#main #selector-tests div.css3-test-last-child li:last-child {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
#main #selector-tests div.css3_first_of_type li:first-of-type {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
#main #selector-tests div.css3_last_of_type  li:last-of-type  {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
#main #selector-tests div.css3_only_child  li:only-child  {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
#main #selector-tests div.css3_only_of_type  li:only-of-type  {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
#main #selector-tests li.css3_not:not(code) {background-image: url(/http/www.chacuo.net/images/public/tick.png);}

#main #selector-tests li.css3_empty  em:empty  {height:10px;}
:target #main .test li.css3_target {background-image: url(/http/www.chacuo.net/images/public/tick.png);}
#main #selector-tests #css3_enabled input:enabled {height:10px;}
#main #selector-tests #css3_disabled input:disabled {height:10px;}
#main #selector-tests #css3_checked input:checked {height:10px;}
#main #selector-tests li.css3_general_sibling span ~ em {height:10px;}

#main .middle  .alert {border:none;background:none;}
#main .middle  .alert-info {border:none;background:none;}

#main #selector-tests li.css3_e_child_f > em {height:10px;}

#main  .mail24{background-image:url(/http/www.chacuo.net/images/public/24mail.png);background-repeat: no-repeat; height: 60px;}
.reset li {list-style:decimal; margin-left: 20px;}
.reset li span {margin-left:20px; color:#006600; }

@media (max-width:800px){
    #main .left{display: none;}
    #main .middle {margin-left: 0px;}
    #bdshare {display: none;}
    #main .wc {margin: 2px;} 
    #main .tc {margin: 10px;} 
    #main .section_content h1 {
          font-size:16px;
    }

    #main .section_content div.alert {
    	padding:0px;
        margin-top: 5px;
    }


    #main .section_content div.m_b10.alert {
    	background: #f2f2f2!important;
        padding: 5px 8px!important;
    	overflow:hidden;
    	font-size:13px;
    }
    #main .section_content div.m_b10.alert a {
    	margin-right:0px!important;
    }

    #menu {
    	background: linear-gradient(135deg, #162235 0%, #223d63 55%, #2a4c78 100%)!important;
        height: 40px;
        overflow: hidden;
        position: relative;
        z-index: 5000;
	    transition-property: height;
    	transition-duration: 0.5s;
    }

    #menu .top_menu_ico {display:flex!important;flex-direction: column;}
    #header .top_slide {display:none;}

    #menu ul {
           display: flex!important;
           flex-wrap: wrap;
           justify-content: center;
           margin: 0;
           padding: 0;
    }

    #menu ul li.menu {
            border: none!important;
            width: 33%!important;
   }
   
   #menu a.menu {
	 line-height: 33px;
   }

   #bdshare,
   #bdshare_s,
   #share-btn,
   #share_copy {
            display: none !important;
   }

   #menu li[data-track] {
            display: none!important;
   }

   #menu .menu_dropdown {
            position: static;
            width: 100%;
            display: none;
            padding: 10px 10px 2px;
            margin-top: 4px;
            border: 0;
            box-shadow: none;
            border-radius: 0 0 14px 14px;
            z-index: 6000;
            box-sizing: border-box;
   }

   #menu.menu-open {
            overflow: visible;
   }

   #menu.menu-open li.menu_has_sub > .menu_dropdown {
            display: flex;
   }

   #menu .menu_dropdown_group {
            flex: 1 1 100%;
            min-width: 0;
   }

   #menu.menu-open li.menu_has_sub > .menu_dropdown.menu_dropdown_security {
            display: block !important;
   }

   #menu .menu_dropdown_security .menu_dropdown_group_wide,
   #menu .menu_dropdown_security .menu_dropdown_group {
            flex: 1 1 100%;
            max-width: 100%;
            grid-column: auto;
   }

   #menu .menu_dropdown_security .menu_dropdown_group_wide ul {
            column-count: 1;
            display: flex;
            flex-wrap: wrap;
   }

   #menu .menu_dropdown_group ul {
            gap: 6px 6px;
   }

   #menu .menu_dropdown_group li a,
   #menu .menu_dropdown_group li a.menu {
            padding: 4px 8px;
            font-size: 12px;
            line-height: 1.35;
            color: #334155;
            background: #eef3f8;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
   }
   

   /* input和select的默认样式取消 */
   input,select{
    outline: transparent dotted;border: 0;background: #fff;
    margin:3px;
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  input[type=button], input[type=reset], input[type=submit] {-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}
 
 /* input的placeholder修改，至于select下的option的字体颜色可以直接控制select的color属性 */
    input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color: #ccc;font-size: 13px;
  }
    input:-moz-placeholder,textarea:-moz-placeholder {
    color: #ccc;font-size: 13px;
  }
    input::-moz-placeholder,textarea::-moz-placeholder {
    color: #ccc;font-size: 13px;
  }
    input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    color: #ccc;font-size: 13px;
  }

}

.adslot_1 { width: 970px; height: 90px; }
@media (min-width:300px) { .adslot_1 { width: 320px; height: 100px; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
@media (min-width:1000px) { .adslot_1 { width: 970px; height: 90px; } }

/* 工具页公共视觉升级，仅收敛样式，不改模板结构 */
#main .left {
    width: 176px;
    margin-right: 16px;
}

#main .left .alert.left_slide_menu {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
    border: 1px solid #d9e0ea;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
    padding: 16px 14px 18px;
}

.left .alert h2 {
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 12px;
    color: #1f3a5f;
    font-weight: 700;
}

.left .alert h5 {
    font-size: 13px;
    color: #7b8796;
    margin: 18px 0 8px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.left .alert ul,
.left .alert ol {
    margin: 0 0 12px;
}

.left .alert li {
    background-image: none;
    padding: 0;
    line-height: 1.6;
    font-size: 14px;
    border-bottom: 1px solid rgba(217, 224, 234, 0.72);
}

.left .alert li:last-child {
    border-bottom: none;
}

.left .alert li a {
    display: block;
    padding: 9px 4px;
    color: #314866;
}

.left .alert li a:hover {
    color: #1f3a5f;
    background: rgba(31, 58, 95, 0.05);
    border-radius: 8px;
}

#main .left .left_slide {
    left: 184px;
}

div.ad1293,
.adsbygoogle,
ins.adsbygoogle {
    border-radius: 14px;
    overflow: hidden;
}

div.ad1293 {
    margin-left: 0;
    opacity: 0.82;
    filter: none;
}

div.ad1293:hover {
    opacity: 0.96;
}

#main .middle .alert,
#main .middle .alert-info,
.formatjson,
div.table,
#main fieldset {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #d9e0ea;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

/* 旧模板页首位空行统一收口，避免菜单下方出现双倍间距 */
#main > .m_t10:first-child,
#main > .m_t10:first-of-type {
    display: none !important;
}

#main .middle .alert,
#main .middle .alert-info {
    padding: 14px 18px;
}

.formatjson,
div.table,
#main fieldset {
    padding: 20px;
}

#main .textarea {
    width: 99%;
    min-height: 220px;
    border: 1px solid #cdd6e1;
    box-sizing: border-box;
    resize: vertical;
    border-radius: 14px;
    padding: 14px 16px;
    background: #fbfcfe;
    text-shadow: none;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

#main .textarea:focus {
    background: #fff;
    border-color: #8aa4c7;
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.10);
}

div.table {
    color: #1f2937;
}

div.table thead {
    background: #eef3f8;
}

div.table h3 {
    border-bottom: 1px solid #d9e0ea;
    padding-bottom: 10px;
    margin-bottom: 16px;
    color: #20324c;
}

div.table td,
div.table th {
    border: 1px solid #dde3ec;
    padding: 10px 12px;
}

#main #FileUploadView,
#main #web_url_input {
    border-radius: 14px;
    border: 1px solid #d9e0ea;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.section_content > .clearfix + div.clearfix .alert-success.l.line.f16p.shadow,
.section_content .alert-success.l.line.f16p.shadow {
    background: #eef3f8;
    color: #1f3a5f;
    border: 1px solid #d7e1ee;
    border-radius: 999px;
    box-shadow: none;
    padding: 8px 14px;
}

.ip_search_panel {
    display: block;
    width: 100%;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #d9e0ea;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.ip_search_panel label {
    font-weight: 700;
    color: #20324c;
}

.ip_search_tip {
    color: #7b8796;
}

.ip_explain_card {
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #d9e0ea;
    color: #667085;
    line-height: 1.9;
}

#map_canvas {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    border: 1px solid #d9e0ea;
}

.cc_friend_links {
    margin-top: 18px;
    margin-bottom: 12px;
    padding: 18px 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #d9e0ea;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.cc_friend_links h4 {
    margin-bottom: 14px;
    color: #1f3a5f;
}

.cc_friend_links ul li {
    margin-bottom: 8px;
}

.cc_tool_intro {
    line-height: 1.85;
}

.cc_tool_card {
    padding: 22px !important;
}

.cc_tool_toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #dfe6ef;
    box-sizing: border-box;
    gap: 8px 10px;
    white-space: normal;
}

.cc_tool_toolbar_result {
    margin-top: 14px;
    margin-bottom: 10px;
}

.cc_tool_toolbar > .l,
.cc_tool_toolbar > .r {
    float: none;
    line-height: 26px;
    margin: 0;
}

.cc_tool_toolbar > .l {
    order: 0;
}

.cc_tool_toolbar > .r {
    order: 99;
    margin-left: auto;
}

.cc_tool_actions {
    margin: 18px 0 8px;
    padding: 14px 10px 4px;
    border-radius: 12px;
    background: rgba(31, 58, 95, 0.03);
}

.cc_tool_actions_dense .btn {
    margin-bottom: 10px;
}

/* 工具卡片内的操作按钮点击后会继续保持 focus，这里只覆盖按钮类，避免全局 input/select/textarea 规则外溢 */
#main .cc_tool_card input[type="button"].btn,
#main .cc_tool_card input[type="button"].btn:hover,
#main .cc_tool_card input[type="button"].btn:focus,
#main .cc_tool_card input[type="button"].btn:active,
#main .cc_tool_card input[type="button"].btn.active,
#main .cc_tool_card input[type="button"].btn-primary,
#main .cc_tool_card input[type="button"].btn-primary:hover,
#main .cc_tool_card input[type="button"].btn-primary:focus,
#main .cc_tool_card input[type="button"].btn-primary:active,
#main .cc_tool_card input[type="button"].btn-primary.active {
    background: linear-gradient(180deg, #27466e 0%, var(--cc-primary) 100%);
    border-color: transparent;
    color: #fff !important;
    box-shadow: var(--cc-shadow-soft) !important;
    outline: none !important;
    transform: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.cc_tool_fieldset {
    padding: 18px 16px !important;
}

.cc_tool_note_list {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid #d9e0ea;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #667085;
    line-height: 1.85;
}

.cc_tool_note_list ul,
.cc_tool_note_list ol {
    margin-left: 18px;
}

@media (max-width: 800px) {
    #main .middle .alert,
    #main .middle .alert-info,
    .formatjson,
    div.table,
    #main fieldset {
        border-radius: 12px;
        padding: 14px;
    }

    #main .section_content div.m_b10.alert {
        background: #f7f9fc !important;
        border: 1px solid #dce4ee !important;
        padding: 10px 12px !important;
    }

    #menu {
        background: linear-gradient(135deg, #162235 0%, #223d63 55%, #2a4c78 100%) !important;
    }

    #menu a.menu {
        line-height: 36px;
    }

    .cc_tool_card {
        padding: 14px !important;
    }

    .cc_tool_toolbar,
    .cc_tool_actions {
        padding: 10px;
    }

    .cc_tool_fieldset {
        padding: 12px !important;
    }
}