/* ========== 分页栏组件 ========== */

/* ---- 公共样式 ---- */
.pagebar {
    font-size: 14px;
    font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
    line-height: 38px;
    color: #666;
}

/* 去掉a链接的下划线 */
.pagebar a {
    text-decoration: none;
}

/* 消掉最左侧页码区margin-left的5个像素 */
.pagebar .p_pages {
    margin-left: -5px;
}

/* ---- 按钮和页码的外观 ---- */
.pagebar .p_fun_d,
.pagebar .p_no_d,
.pagebar .p_fun a,
.pagebar .p_no a {
    border: 1px solid #ddd;
    padding: 0 8px;
    margin: 0px 0px 0px 5px;
    height: 38px;
    line-height: 38px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    border-radius: 6px;
    transition: all 0.2s ease;
    color: #666;
    background: #f5f5f5;
}

/* ---- 文字对齐样式 ---- */
.pagebar .p_t {
    line-height: 38px;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    vertical-align: middle;
}

/* ---- 无链接的字体颜色 ---- */
.pagebar .p_fun_d,
.pagebar .p_no_d {
    color: #bbb;
    background: #f5f5f5;
    cursor: not-allowed;
    min-width: 38px;
}

/* ---- 链接字体颜色 ---- */
.pagebar .p_fun a,
.pagebar .p_no a {
    color: #666;
    min-width: 38px;
}

/* ---- 鼠标移上时有链接按钮的外观 ---- */
.pagebar .p_no a:hover,
.pagebar .p_fun a:hover,
.pagebar .p_goto a:hover {
    background-color: #fef0f0;
    color: #c20c1e;
    border-color: #c20c1e;
}

/* ---- 页码省略号...的外观 ---- */
.pagebar .p_dot {
    margin-left: 4px;
    margin-right: -4px;
    color: #999;
    line-height: 38px;
    display: inline-block;
    vertical-align: middle;
}

/* ---- 当前页码的外观 ---- */
.pagebar .p_no_d {
    border: 1px solid #c20c1e;
    color: #fff;
    background-color: #c20c1e;
    font-weight: 600;
}

/* ========== 按钮显示控制 ========== */

/* 控制是否显示 "首页" "尾页" */
.pagebar .p_first,
.pagebar .p_first_d,
.pagebar .p_last,
.pagebar .p_last_d {
    display: none;
}

/* 控制是否显示 "上页" "下页"（默认显示） */
.pagebar .p_prev,
.pagebar .p_prev_d,
.pagebar .p_next,
.pagebar .p_next_d {
    /* display: none; */
}

/* 控制是否显示无链接的 "首页" "上页" "下页" "尾页" */
.pagebar .p_first_d,
.pagebar .p_prev_d,
.pagebar .p_next_d,
.pagebar .p_last_d {
    /* display: none; */
}

/* 控制是否显示页码 */
.pagebar .p_no,
.pagebar .p_no_d,
.pagebar .p_dot {
    /* display: none; */
}

/* ========== 跳转输入框 ========== */

/* 跳转到页码输入框的外观 */
.pagebar .p_goto input {
    font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
    font-size: 14px;
    border: 1px solid #ddd;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    vertical-align: middle;
    outline: none;
    margin: 0px 2px;
    padding: 0px 1px;
    width: 36px;
    text-align: center;
    border-radius: 4px;
    transition: border-color 0.2s ease;
    color: #666;
}

/* 跳转到页码输入框 — 鼠标移上及输入时的外框颜色 */
.pagebar .p_goto input:hover,
.pagebar .p_goto input:focus {
    border: 1px solid #c20c1e;
}

/* ---- 跳转按钮的外观 ---- */
.pagebar .p_goto a {
    border: 1px solid #ddd;
    padding: 0 6px;
    color: #666;
    margin: 0px;
    height: 38px;
    line-height: 38px;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    border-radius: 6px;
    transition: all 0.2s ease;
    background: #f5f5f5;
}