/* ============================================================
   style/subnetmask.css - 子网掩码计算器 / 计算器页面布局
   页面：/subnetmask/、/calculator/
   ============================================================ */

/* ---------- 左右两栏布局 ---------- */
.NetWork-left,
.NetWork-right {
    width: 49.5%;
    display: inline-block;
    vertical-align: top;
}
@media (max-width: 991px) {
    .NetWork-left,
    .NetWork-right {
        width: 100%;
        float: none;
    }
}

/* ---------- 计算器卡片 ---------- */
.NetWork-main01 {
    padding: 12px 15px;
    margin-bottom: 10px;
    background: #fff;
}
.MainHead {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    padding-bottom: 8px;
    margin: 0 0 10px;
}
.bb-blue { border-bottom: 2px solid #3ab54a; }

/* ---------- 行布局 ---------- */
.MCentlist {
    margin-bottom: 8px;
    line-height: 30px;
    font-size: 13px;
}
.MCentlist label {
    display: inline-block;
    margin: 0;
    font-weight: normal;
    color: #666;
    vertical-align: middle;
}
.ptb10 { padding-top: 10px; padding-bottom: 10px; }
.pt10 { padding-top: 10px; }
.mt20 { margin-top: 20px; }
.mt10 { margin-top: 10px; }
.mr15 { margin-right: 15px; }
.ml10 { margin-left: 10px; }
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.tr { text-align: right; }
.tc { text-align: center; }
.fl { float: left; }
.fr { float: right; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }

.w50 { width: 50px; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.w82 { width: 82px; }
.w100 { width: 100px; }
.w110 { width: 110px; }

.bg-blue02 { background: #f4faf5; }
.bb-blue.bg-blue02 { border-radius: 3px 3px 0 0; }
.col-gray04 { color: #999; }
.col-gray02 { color: #bbb; }
.col-blue02 { color: #3ab54a; }
.lh30 { line-height: 30px; }
.lh24 { line-height: 24px; }
.fwnone { font-weight: normal; }
.pl10 { padding-left: 10px; }
.bor-t1s { border-top: 1px solid #eee; }
.bor-a1s { border: 1px solid #eee; }

/* ---------- 输入框 / 按钮 ---------- */
.Intxt {
    width: 46px;
    height: 30px;
    padding: 2px 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
    margin-right: 2px;
}
.Intxt[readonly] { background: #fafafa; color: #3ab54a; }
.Intxt.w60 { width: 60px; }
.Intxt.w100 { width: 100px; }

.Inbtn {
    height: 30px;
    padding: 0 12px;
    margin-left: 4px;
    border: 1px solid #3ab54a;
    border-radius: 3px;
    background: #3ab54a;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    vertical-align: middle;
}
.Inbtn:hover { background: #33a042; border-color: #33a042; }
.Inbtn.w100 { width: 100px; }

.ipgroup .Intxt { text-align: center; }

/* ---------- 下拉样式（右侧表单的伪下拉） ---------- */
.NetWork-choese { display: inline-block; vertical-align: middle; }
.NetWorkW-choese { position: relative; display: inline-block; }
.NetWorkW-cont {
    min-width: 60px;
    height: 30px;
    line-height: 28px;
    padding: 0 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}
.NWicon-drop-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #999;
    margin: 0 0 2px 4px;
    vertical-align: middle;
}
.ObtainList { margin-top: 10px; max-height: 320px; overflow: auto; }
.ObtainList table { font-size: 12px; }
.ObtainList th,
.ObtainList td {
    padding: 4px 6px;
    border: 1px solid #eee;
    text-align: center;
}
.ObtainList th { background: #f4faf5; font-weight: normal; }
.autohide { overflow: hidden; }