@charset "UTF-8";

/* 游戏充值 */
.main > .main-bg > .main-content > .rechargeReceipt {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url("/assets/img/rechargeReceipt-bg.png");
    left: 0;
    top: 0;
    z-index: 14;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt {
    position: absolute;
    width: 34rem;
    height: 26rem;
    background-color: #ffffff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: #1b1e21 solid 0.1rem;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-title {
    font-size: 1.2rem;
    color: #1b1e21;
    line-height: 3rem;
    padding-left: 0.5rem;
    height: 3rem;
    background-color: #e8e8e8;
    border-bottom: #d3d3d3 solid 0.01rem;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-content {
    height: 18.5rem;
    padding: 1.5rem 0 0 0;
    font-size: 1rem;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-content > .receipt-left {
    width: 17rem;
    padding: 0 1.5rem;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-content > .receipt-left > .receipt-qb {
    width: 11rem;
    height: 11rem;
    padding: 0.5rem;
    background-color: white;
    border: #d3d3d3 solid 0.01rem;
    margin-bottom: 1rem;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-content > .receipt-left > .receipt-qb > img {
    width: 10rem;
    height: 10rem;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-content > .receipt-left > .receipt-title > .title-icon {
    height: 2.9rem;
    width: 2.9rem;
    background-image: url("/assets/img/recharge-sao.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 2.7rem 2.7rem;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-content > .receipt-left > .receipt-title > .title-content > .content-red {
    color: #f25a54;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-content > .receipt-right {
    width: 17rem;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-content > .receipt-right > .receipt-content {
    width: 17rem;
    border-left: #d3d3d3 solid 0.01rem;
    height: 17rem;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-content > .receipt-right > .receipt-content > div {
    width: 12rem;
    height: 4rem;
    line-height: 4rem;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-content > .receipt-right > .receipt-content > div > .receipt-title {
    margin-right: 1rem;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-content > .receipt-right > .receipt-content > div > .text {
    color: #ff5757;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-btn {
    height: 4.4rem;
    margin-left: 50%;
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-btn > .btn-close {
    width: 8rem;
    height: 2.6rem;
    line-height: 2.6rem;
    border: #d3d3d3 solid 0.01rem;
    border-radius: 0.2rem;
    text-align: center;
    font-size: 1rem;
    background: linear-gradient(to bottom, #f1f1f1 0%, #d2d2d2 100%);
}

.main > .main-bg > .main-content > .rechargeReceipt > .receipt > .receipt-btn > .btn-close:hover {
    background: linear-gradient(to bottom, #e0e0e0 0%, #bdbdbd 100%);
}

.main > .main-bg > .main-content > .main-content-right > .recharge{
    padding-top: 2rem;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .slogan {
    display: block;
    height: 3rem;
    width: 90%;
    margin: 0 auto;
    color: #e0e0e0;
    font-size: 1rem;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > .rechargeContent {
    display: block;
    width: 60%;
    min-width: 30rem;
    border: 0.1rem solid #ffeeb8;
    background-color: #9c9c9c;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 3rem auto 0;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > div {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > div > .recLabel {
    width: 15%;
    /* ⚠️ 钉死标签列，不许被内容列挤扁：`.text { flex-grow: 2 }` 的 flex 基准是**内容宽度**，
       而档位按钮行是 `.limit { width: 100% }`（百分比在内在尺寸计算里是循环的 ⇒ 按 auto 算）
       ⇒ **档位文案越长，`.text` 的基准越大，可收缩的 `.recLabel` 就被挤到 15% 以下、文案折行**。
       2026-09-30 生产实测：6 个档位时标签从 76.6px 被挤到 49.6px（「充值金额:」折成两行）。
       钉死后多出来的宽度需求由 `.text` 自己收缩——里面的按钮行本来就能换行。 */
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: bold;
    overflow-wrap: break-word;
    color: #ffeeb8;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > div > .text {
    flex-grow: 2;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > div > .text > .form-control {
    width: 100%;
    height: 2rem;
    border: #ffeeb8 0.1rem solid;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > div > .text > input {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    border: #ffeeb8 0.1rem solid;
    font-size: 0.8rem;
    text-indent: 0.3rem;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > div > .text > select {
    font-size: 0.8rem;
    color: #000000!important;
    width: 100%;
    padding-left: 0.3rem;
    height: 2rem;
    line-height: 2rem;
    border: #ffeeb8 0.1rem solid;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > .rechargeAmount {
    display: flex;
    line-height: 2rem;
    align-content: flex-start;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > .rechargeAmount > .reveal {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    width: 100%;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > .rechargeAmount > .reveal > .recLabel {
    width: 15%;
    font-size: 0.9rem;
    font-weight: bold;
    overflow-wrap: break-word;
    color: #ffeeb8;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > .rechargeAmount > .reveal > .amount {
    width: 20%;
    margin-right: 0.5rem;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > .rechargeAmount > .reveal > .amount > .amount {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    border: #ffeeb8 0.01rem solid;
    border-radius: 0;
    font-size: 0.9rem;
    text-indent: 0.3rem;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > .rechargeAmount > .reveal > .yuan {
    color: #ffeeb8;
    font-weight: bold;
    margin-right: 0.5rem;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > .rechargeAmount > .reveal > .currency {
    color: #ffeeb8;
    font-weight: bold;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > .rechargeAmount > .limit {
    width: 100%;
    padding-left: 13.5%;
    margin-bottom: 0.5rem;
}

/* 档位按钮。定宽只是「统一基准宽」，**不是上限**——文案一律 `{点券}点券 ¥{金额}`，
   最长那个（金额上限 5000 ⇒ `5000点券 ¥5000.00`）约 8.2rem，故基准取 9rem。
   ⚠️ 下面两条缺一不可，缺了就会重演 2026-09-30 生产那个 bug（按钮被压到 89.7×30px、
   文案折两行溢出 8px、第二行压到下一行按钮上）：`width` 会把 flex 的**自动**最小尺寸
   压成 min(指定宽, 内容宽)——5.43rem 比文案窄，于是按钮能一路缩到 81.45px。
   ① `min-width: min-content` 显式取代那条自动最小尺寸 ⇒ 永不窄于文案（这是真兜底）；
   ② `white-space: nowrap` 让 min-content 真的等于整条文案——光有它没有 ① 时，
      文字会从「纵向折行溢出」变成「横向溢出压邻居」，一样是坏的（两版都实测过）。
   quick 页是**同观感的第二份副本**（那边 DOM 不同、命不中这条深选择器），改要一起改。

   ⚠️ 2026-10-14（用户：「要金色的啊」）：**基准色直接改成金色**，且选择器由 9 级深链
   **收短成 `.limit > button`**（两页都有 `.limit`，见 quick/index.html 已对齐结构）。
   两件事都必须做，原因不同：
   ① 颜色：此前是蓝 `#18538c` / hover `#74ace1`（参考站原始配色）。它在**深选择器**里
      ⇒ 特异性 (0,9,3) **高于** theme.css 末尾那批类选择器 ⇒ **theme 压不住它**，两页都
      可能渲染成蓝底（用户两次报「还是蓝色的」；我此前误判为「已被主题覆盖」，实际是
      特异性竞速输了）。把金色写进基准文件后，**谁后加载都不影响**。
   ② 深链本身是 bug 源：免登录页 DOM 少一层就整条命不中（该页已踩三次）。收短后两页统一。
   取色与「立即充值」按钮同族：底 `rgba(212,175,55,.45)`（与支付方式选中态同值）、
   边/字用主题金色变量（带兜底值，两站皮肤切换不露馅）。 */
.limit > button {
    width: 9rem;
    min-width: min-content;
    white-space: nowrap;
    height: 2rem;
    margin: 0.4rem 0 0.4rem 0.45rem;
    background-color: rgba(212, 175, 55, 0.45);
    border: 1px solid var(--gold, #d4af37);
    color: var(--gold-light, #f0d68a);
    font-size: 0.8rem;
    flex-grow: 1;
    transition: background-color 0.3s;
}

.limit > button:hover {
    background-color: rgba(212, 175, 55, 0.7);
    border-color: var(--gold, #d4af37);
    color: #fff8e1;
}

.limit > button:active {
    transform: scale(0.98);
}

/* 支付方式：图片（内联 SVG 品牌标）+ 原生单选框的选项卡片。
   2026-10-02 起两页共用这一组规则（免登录页也引本文件）。
   ⚠️ 选择器刻意写短（不抄参考站那串深链）：免登录页 DOM 少一层，深链会命不中——
      该页的档位按钮已踩过同一个坑（见 quick/index.html 里那组同观感规则的注释）。
   选中态用相邻兄弟选择器 `:checked +`，不用 `:has()`（后者在老浏览器上静默失效）。 */
.paymentBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.paymentBox > span {
    margin: 0 0.9rem 0.35rem 0;
}

/* 单选框：appearance:none 自绘，与注册页协议勾选同族的「金圈金点」。
   ⚠️ IE 不支持 appearance ⇒ 回落到原生单选框（照样能选，只是没有金圈）。 */
.paymentBox > span > label > input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    margin: 0 0.35rem 0 0;
    border-radius: 50%;
    border: 1px solid var(--line, rgba(212, 175, 55, 0.25));
    background-color: var(--bg-dark, #0b0d12);
    cursor: pointer;
    vertical-align: middle;
    flex: none;
}

.paymentBox > span > label > input[type="radio"]:checked {
    background-color: var(--gold, #d4af37);
    border-color: var(--gold, #d4af37);
}

.paymentBox > span > label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    cursor: pointer;
}

/* 卡片：图标 + 文案；选中态金边金底（继承原文字按钮的观感） */
.paymentBox > span > label > .pay-way-card {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    border: 1px solid rgba(255, 238, 184, 0.35);
    border-radius: 0.3rem;
    background-color: rgba(24, 83, 140, 0.35);
    transition: border-color 0.3s, background-color 0.3s;
}

.paymentBox > span > label:hover > .pay-way-card {
    border-color: #ffeeb8;
    background-color: rgba(116, 172, 225, 0.35);
}

.paymentBox > span > label > input[type="radio"]:checked + .pay-way-card {
    border-color: #d4af37;
    background-color: rgba(212, 175, 55, 0.45);
}

/* 图标：两页共用同一份 SVG（守卫用例逐字节比对 path 数据），尺寸只在这里定 */
.paymentBox .pay-logo {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.4rem;
    flex: none;
}

.paymentBox .pay-way-name {
    color: #ffeeb8;
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recProtocolHint {
    color: #e71d35;
    font-size: 0.8rem;
    width: 90%;
    margin: 0 auto;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recButton {
    display: flex;
    width: 100%;
    margin: 1rem auto 0;
    justify-content: center;
    align-items: center;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recButton > button {
    width: 11.8rem;
    height: 3.5rem;
    border: none;
    background-image: url("/assets/img/recharge-btn.png");
    background-size: 11.8rem auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    cursor: pointer;
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recButton > button.no {
    filter: grayscale(100%);
}

.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recButton > button:not(.no):hover {
    transform: scale(0.95);
}
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .prompt {
    width: 95%;
    margin: 0 auto;
    margin-top: 2rem;
    font-size: 0.8rem;
    color: #efefef;
    display: flex;
    flex-flow: column;
}
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .prompt > span {
    line-height: 1.5rem;
}
.sweet-alert.no-btn > p{
    margin: 1.6rem 0 0 0!important;
}
.sweet-alert.no-btn > .sa-button-container{
    display: none!important;
}

/* ===== 提示样式（本批新增：此前 .form-tip 全库无定义，是裸行内文本） ===== */
.form-tip {
  margin-left: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

/* 字段级错误：输入框红边 + 其后小字（金额/账号等输入类错误，不弹窗打断）
   ⚠️ `!important` 是**必需的**，不是偷懒：`.field-invalid` 是单类 (0,1,0)，而本文件给输入框画边框的
   是**超长后代链**（如 :176 `.main > .main-bg > … > .recField > div > .text > input` 约 (0,8,3) 级、
   :223 `.… > .reveal > .amount > .amount` 实测 (0,11,1) 级）——不加 `!important` 红边根本不会出现。
   同一仓库已有同款先例：`register.css:299-303` 也是用 `!important` 覆盖超长链的边框色。
   （/recharge 的金额框锚在包裹层 div.amount 上：那里的红线由 box-shadow 画在输入框外沿，
     边框那条 `!important` 对它其实用不上，但 /quick 与账号/区服等锚在 input/select 本身的场景要用。） */
.field-invalid {
  border-color: #e07a7a !important;
  box-shadow: 0 0 0 2px rgba(224, 122, 122, .18) !important;
}
.field-tip {
  font-size: 12px;
  line-height: 1.6;
  color: #e07a7a;
  margin-top: 4px;
}

/* ⚠️ 落点特例（实测后的二选一，见下方说明）：/recharge 的金额框在 20% 宽的 div.amount 里，
   FieldTip 默认把 .field-tip 插在输入框之后 → 被挤成 102px 窄列、折 **3 行**（高 57.6px）、把整行撑高
   （实测截图：提示「请输入有效充值金额（1~5000 元的整数）」排成 3 行）。
   这里让 .reveal 允许换行、.field-tip 独占第二行整行宽（order:9 保证排在「元」之后）——
   提示回到一行、行高自然增长，且错误态（红线）仍紧贴金额输入框。
   对应地，本页调用处把提示锚在 div.amount（`$('#j-amount').parent()`）而非 input 本身，
   清错态也必须用同一个锚点，否则会留下「看着还在报错」的僵尸提示。 */
.rechargeAmount > .reveal { flex-wrap: wrap; }
.rechargeAmount > .reveal > .field-tip { flex: 0 0 100%; order: 9; }

/* ===== sweetalert 暗金皮肤（只影响 pay 站；.sweet-alert 是 1.x 的根节点） =====
   骨架照本文件既有的 .sweet-alert.no-btn 变体扩展，配色改用主题变量 */
.sweet-alert {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .7);
}
.sweet-alert h2 {
  color: var(--gold);
  font-size: 16px;
  line-height: 1.6;
}
.sweet-alert p {
  color: var(--text);
  font-size: 13px;
}
.sweet-alert .sa-icon.sa-error { border-color: #e07a7a; }
.sweet-alert .sa-icon.sa-error .sa-line { background-color: #e07a7a; }
.sweet-alert button {
  background: linear-gradient(180deg, #e8c860, #b8892a);
  color: #1a1408;
  font-weight: 700;
  border-radius: 3px;
  box-shadow: none;
}
.sweet-alert button:hover { background: linear-gradient(180deg, #f0d68a, #c99a35); }
.sweet-alert button.cancel { background: transparent; color: var(--gold); border: 1px solid var(--line); }
/* ⚠️ 三条 cancel 的交互态是**必需**的：sweetalert.css:245-257 的 `.cancel:hover/:active/(:focus !important)`
   (0,3,1) 压过上面那条 `.sweet-alert button.cancel` (0,2,1)。两个充值页当前都没开 showCancelButton
   所以看不到；一旦开启就会露出浅灰底 + 蓝色 focus 环，故先把配色对齐暗金皮肤。 */
.sweet-alert button.cancel:hover { background: rgba(212, 175, 55, .12); color: var(--gold); }
.sweet-alert button.cancel:active { background: rgba(212, 175, 55, .2); color: var(--gold); }
.sweet-alert button.cancel:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212, 175, 55, .35) !important; }
/* ============================================================================
   移动端（<768px）—— 2026-10-02 新增
   修的是宽屏设计在窄屏的溢出：`.rechargeContent` 带 **min-width: 30rem**
   （桌面 1rem = 15px ⇒ 450px；而 secondatry.css 的移动端修复在 <768px 把 1rem 提到 16px
   ⇒ 480px），在 390px 视口下必然横向溢出（实测 **+45px**）。
   ⚠️ 之前不溢出只是假象：那时整页被 flexible.js 缩到 1rem≈2.99px（缩略图状态、正文不可读）。
   为什么写在本文件：`recharge.css` 是 **pay 站专属**（仅 quick / recharge / orders / result 引用），
   在这里改动不会波及 index / user。
   ============================================================================ */
@media (max-width: 767px){
    .main > .main-bg > .main-content > .main-content-right > .recharge > .content > .rechargeContent{
        width: 100%;
        min-width: 0;
    }
    /* 3rem 的上边距在窄屏过高，收紧 */
    .main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField{
        margin-top: 1rem;
    }
    /* 标签列桌面固定 15%（≈51px @390px）⇒「游戏账号:」被折成两行（实测截图）。
       窄屏给到 32%，里的 `.text` 是 `flex-grow:2` 会自动让位，输入框仍有 ~220px。 */
    .main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > div > .recLabel{
        width: 32%;
    }
}

/* ===== 常驻赠品清单（金额输入框下方那一块；用户 2026-10-14 需求） =====
   两个充值页共用（免登录页也引本文件）；选择器刻意写短——免登录页 DOM 少一层，
   深链会命不中（该页的档位按钮已踩过同一个坑，见 quick/index.html 里那组同观感规则）。
   左内缩 13.5% 与档位按钮行的缩进**同值**（充值页 `.limit`、免登录页 `#j-limits`），
   三者对齐靠人工保持：改对齐值时三处一起改。
   ⚠️ 配色一律用主题变量（带兜底值），别写死色值——两个站点皮肤切换时写死的会露馅。

   2026-10-15 口径变更（用户指定：删掉金额框旁那行实时提示、清单挪到它的位置、
   **只显示当前档**）：清单与其每一行都**默认隐藏**，由 JS 给命中的那一行与整块加 `.is-on`。
   - 未选档 / 所选档没配赠品 ⇒ 整块不显示（正是「只显示当前档」的空状态）；
   - 为什么必须默认隐藏：行是服务端**全量渲染**的（转义防线留在这里，见
     GiftBlockService::block() 的注释），不隐藏就会把全部档位一次列出来。
   ⚠️ 先前那处 `#j-gift-hint`（金额框旁「本单可得：…」）已按用户要求删除，
      对应样式 `.gift-hint` 一并删掉——留死规则会让人以为它还在用。 */
.giftbox {
    display: none;
    width: 86.5%;
    margin: 0.2rem 0 0.8rem 13.5%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line, rgba(212, 175, 55, 0.25));
    border-radius: 5px;
    background-color: var(--bg-dark, #0b0d12);
}

/* JS 命中某档后才打开（类的开关在页面 JS 里，见 #j-giftbox 的 toggleClass） */
.giftbox.is-on { display: block; }

.giftbox > .t {
    margin-bottom: 0.3rem;
    color: var(--gold, #d4af37);
    font-size: 12px;
    font-weight: 700;
}

.giftbox > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 行默认隐藏：只让命中的那一行（`.is-on`）出现 —— 「清单内只显示当前档的物品」 */
.giftbox > ul > li {
    display: none;
    align-items: baseline;
    padding: 0.18rem 0;
    border-bottom: 1px dashed var(--line, rgba(212, 175, 55, 0.18));
    font-size: 12px;
    line-height: 1.7;
}

.giftbox > ul > li.is-on { display: flex; }

.giftbox > ul > li:last-child { border-bottom: none; }

/* 门槛列定宽对齐；`flex: none` 防被赠品长文案挤压（与 .recLabel 被挤扁是同一类问题） */
.giftbox > ul > li > .amt {
    flex: none;
    width: 6.5rem;
    color: #b0a06a;
}

/* 赠品长文案（后台自由文本）在窄屏换行而不是横向溢出 */
.giftbox > ul > li > .g {
    color: #f0d98a;
    overflow-wrap: anywhere;
}

.giftbox > .note {
    margin-top: 0.35rem;
    color: var(--text-muted, #7f8c99);
    font-size: 11px;
    line-height: 1.5;
}