/* The admin side. Deliberately larger and plainer than the public site:
   board members are using this, several of them in their seventies. */

.adm{
  --ok:#1F7A4D;
  background:var(--cream);
  font-size:1.0625rem;
}
.awrap{width:100%;max-width:900px;margin-inline:auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px))}

/* top bar */
.abar{background:var(--ink);padding:16px 0}
.abar .awrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.abrand{display:flex;align-items:center;gap:12px}
.abrand svg{width:29px;height:31px;display:block;flex:0 0 auto}
.abrand b{font-family:var(--display);font-size:1.18rem;font-weight:600;color:var(--cream);line-height:1.1}
.abrand i{display:block;font-style:normal;font-size:.63rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);margin-top:3px}
.awho{display:flex;align-items:center;gap:18px;font-size:.94rem}
.awho span{color:#C9BFB2}
.awho a{color:var(--cream);text-underline-offset:3px}

/* page */
.adm main{padding:30px 0 60px}
.aday{font-size:.94rem;color:var(--ink-soft);margin:0 0 10px}
.adm h1{font-family:var(--display);font-size:clamp(1.65rem,4vw,2.05rem);font-weight:600;
  line-height:1.2;margin:0 0 22px}

[hidden]{display:none !important}

.abtn{display:inline-block;background:var(--white);color:var(--ink);border:2px solid var(--ink);
  font-weight:600;font-size:1.0625rem;padding:14px 21px;border-radius:5px;text-decoration:none;
  white-space:nowrap;cursor:pointer;font-family:var(--ui)}
.abtn:hover{background:var(--cream-2)}
.abtn.solid{background:var(--red);border-color:var(--red);color:#fff}
.abtn.solid:hover{background:var(--red-dark);border-color:var(--red-dark)}
.abtn.danger{border-color:var(--red);color:var(--red)}
.abtn.danger:hover{background:#FFF1EF}
.abtn.danger.solid{color:#fff}

.aback{display:inline-block;background:none;border:0;padding:0;margin-bottom:14px;
  font:inherit;font-weight:600;color:var(--red);cursor:pointer;text-decoration:none}
.aback:hover{text-decoration:underline}
.alead{max-width:62ch;color:var(--ink-2);line-height:1.6;margin:0 0 22px}

/* one row per thing that can be changed. Rows stack, so adding a second
   one later moves nothing that is already here. */
.arow{display:flex;align-items:center;gap:24px;background:var(--white);
  border:2px solid var(--line);border-radius:6px;padding:26px;text-decoration:none;color:inherit;
  transition:border-color .15s,background .15s}
.arow:hover,.arow:focus-visible{border-color:var(--red);background:#FFFDF8;outline:none}
.aic{flex:0 0 auto;color:var(--red)}
.aic svg{width:38px;height:38px;display:block}
.abody{display:block;min-width:0}
.abody b{display:block;font-family:var(--display);font-size:1.4rem;font-weight:600;
  line-height:1.2;margin-bottom:7px}
.abody>span{display:block;color:var(--ink-2);line-height:1.5}
.ago{margin-left:auto;flex:0 0 auto;font-weight:600;color:var(--red);white-space:nowrap}
.arow:hover .ago{text-decoration:underline}

.anote{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--ink-2)}
.anote b{font-weight:600}

@media(max-width:620px){
  .arow{gap:16px;padding:20px;align-items:flex-start}
  .aic svg{width:30px;height:30px}
  .ago{margin-left:0;width:100%;order:3;padding-top:4px}
  .arow{flex-wrap:wrap}
}

/* the list of events */
.elist{list-style:none;margin:24px 0 0;padding:0}
.eitem{display:flex;align-items:center;gap:20px;background:var(--white);
  border:2px solid var(--line);border-radius:6px;padding:18px 20px;margin-bottom:12px}
.ewhen{flex:0 0 62px;text-align:center;border-right:1px solid var(--line);padding-right:16px}
.ewhen b{display:block;font-family:var(--display);font-size:1.6rem;font-weight:700;line-height:1}
.ewhen i{display:block;font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.ebody{min-width:0;flex:1}
.ebody>b{display:block;font-family:var(--display);font-size:1.26rem;font-weight:600;line-height:1.25}
.enote{display:block;color:var(--ink-2);font-size:.97rem;margin-top:3px}
.estand{display:inline-block;margin-top:9px;font-size:.84rem;font-weight:600;
  border-radius:4px;padding:6px 10px}
.estand.live{background:#E6F3EC;color:#17603C}
.estand.soon{background:var(--cream-2);color:var(--ink-2)}
.estand.done{background:#F1EFEC;color:var(--ink-soft)}
.estand.none{background:#FDF6E3;color:#6B5310;margin-left:8px}
.estand.none[hidden]{display:none}
.eitem .abtn{flex:0 0 auto;padding:12px 18px}
.eempty{background:var(--white);border:2px dashed var(--line);border-radius:6px;
  padding:28px 22px;color:var(--ink-2);text-align:center}
/* the same note inside a field, where it sits under a heading already */
.field .eempty{padding:15px 18px;text-align:left;margin:0}

/* the form */
.field{margin-bottom:20px}
/* site.css styles .field label as a small uppercase caption for the quote
   form. Too small and too shouty here, so every property is restated. */
.field label{display:block;font-size:1.0625rem;font-weight:600;letter-spacing:normal;
  text-transform:none;color:var(--ink);margin-bottom:7px}
.opt{font-weight:400;color:var(--ink-soft);font-size:.92rem;text-transform:none;
  letter-spacing:normal}
.field input,.field textarea,.field select{width:100%;font:inherit;font-family:var(--ui);padding:14px;
  border:2px solid var(--line);border-radius:5px;background:var(--white);color:var(--ink)}
.field textarea{line-height:1.5;resize:vertical;min-height:72px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink)}
.field input.bad,.field textarea.bad{border-color:var(--red);background:#FFF6F5}
.hint{margin:7px 0 0;font-size:.92rem;color:var(--ink-soft)}
.err{margin:7px 0 0;font-size:.95rem;font-weight:600;color:var(--red)}
.pair{border:0;padding:0;margin:0 0 8px}
.pair legend{font-family:var(--display);font-size:1.2rem;font-weight:600;padding:0;
  margin:0 0 12px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;
  border-top:1px solid var(--line);padding-top:22px;margin-top:22px}
.pair:first-of-type{border-top:0;padding-top:0;margin-top:0}
.pair.one{grid-template-columns:1fr}
.pair legend,.pair .wide{grid-column:1/-1}
.eactions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line)}
.eactions .danger{margin-left:auto}
.confirm{margin-top:20px;background:#FFF6F5;border:2px solid #F0C9C4;border-radius:6px;
  padding:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.confirm p{margin:0 14px 0 0;font-weight:600}

@media(max-width:620px){
  .pair{grid-template-columns:1fr}
  .eitem{flex-wrap:wrap;gap:14px}
  .ewhen{flex:0 0 auto;border-right:0;border-bottom:0;padding-right:0;display:flex;
    align-items:baseline;gap:7px;text-align:left}
  .ewhen i{margin-top:0}
  .eitem .abtn{width:100%;text-align:center}
  .eactions .danger{margin-left:0;width:100%;text-align:center}
  .eactions .abtn{width:100%;text-align:center}
}

/* picture upload */
.field input[type=file]{width:100%;font:inherit;font-family:var(--ui);padding:12px;
  border:2px dashed var(--line);border-radius:5px;background:var(--white);cursor:pointer}
.field input[type=file]:focus{outline:none;border-color:var(--ink)}
.imgprev{margin-top:14px;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.imgprev img{display:block;width:230px;height:auto;border:1px solid var(--line);border-radius:5px}

/* details the club writes itself: a heading and what it says */
.abtn.small{font-size:.95rem;padding:10px 15px;border-width:2px}
.dgroup{margin-bottom:10px}
.drow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;gap:10px;
  margin-bottom:10px;align-items:start}
.drow .dlabel{font-weight:600}
@media(max-width:620px){
  .drow{grid-template-columns:minmax(0,1fr) auto}
  .drow .dspacer{display:none}
  .drow .dlabel{grid-column:1/-1}
}

/* ------------------------------------------------------------------ */
/* Hall rental. Four lists the club writes itself, and a price grid    */
/* drawn from two of them, so a new column widens the grid rather than */
/* needing a new rule here.                                            */

.rsec{border:0;min-width:0;padding:22px 0 0;margin:22px 0 0;border-top:1px solid var(--line)}
.rsec:first-of-type{border-top:0;padding-top:0;margin-top:0}
.rsec legend{font-family:var(--display);font-size:1.2rem;font-weight:600;padding:0;margin:0}

.rrow{display:grid;gap:10px;margin-bottom:10px;align-items:center}
.rrow .rname{font-weight:600}
.rrow .rprice{text-align:right;font-variant-numeric:tabular-nums}

/* a kind of day: its name and the days it covers */
.rday{grid-template-columns:minmax(0,1fr) auto}
.rticks{display:flex;flex-wrap:wrap;gap:4px}
.rtick{display:flex;align-items:center;gap:5px;background:var(--cream);
  border:2px solid var(--line);border-radius:5px;padding:9px 10px;cursor:default;
  font-size:.92rem;font-weight:600;white-space:nowrap}
.rtick input{width:19px;height:19px;margin:0;accent-color:var(--red);cursor:default;opacity:1}

/* the grid: one name column, then one column per kind of day */
.gridscroll{overflow-x:auto;margin-bottom:10px}
.rgrid{grid-template-columns:minmax(150px,1.2fr) repeat(var(--cols,3),minmax(96px,1fr));
  min-width:min-content}
.rhead{margin-bottom:6px}
.rcolname{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding:0 2px;overflow-wrap:anywhere}
.rcoldays{display:block;margin-top:3px;font-style:normal;font-weight:600;
  font-size:.78rem;letter-spacing:.02em;text-transform:none;color:var(--ink-2)}
.rcoldays.rdead{color:var(--red)}

/* extras and rules: name, number, what it does */
.rpair{grid-template-columns:minmax(0,1fr) 124px minmax(0,300px)}

.warn{margin:12px 0 0;font-size:.95rem;font-weight:600;color:var(--ink);
  background:#FDF6E3;border:2px solid var(--gold);border-radius:5px;padding:12px 14px}
.warn.bad{background:#FFF6F5;border-color:var(--red);color:#8A1226}
#rform button[type=submit]:disabled{background:var(--line);border-color:var(--line);
  color:var(--ink-soft);cursor:default}
.saved{margin:18px 0 0;font-size:1rem;font-weight:600;color:var(--ok);
  background:#F0F8F3;border:2px solid var(--ok);border-radius:5px;padding:14px 16px}

.aactions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line)}
.aactions .danger{margin-left:auto}

@media(max-width:760px){
  .rpair{grid-template-columns:minmax(0,1fr) 110px}
  .rpair select{grid-column:1/-1}
  .rday{grid-template-columns:1fr}
  .rticks{justify-content:space-between}
  .rtick{flex:1 1 auto;justify-content:center}
  .aactions .danger{margin-left:0}
  .aactions .abtn{width:100%;text-align:center}
}

/* where a ticket can be had: as many ways as there are */
.trow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) auto;
  gap:10px;margin-bottom:10px;align-items:start}
.trow [hidden]{display:none !important}
@media(max-width:760px){
  .trow{grid-template-columns:minmax(0,1fr) auto}
  .trow .tkind,.trow .twho{grid-column:1/-1}
}

/* the saved list sits under the calendar's own */
.ahead{font-family:var(--display);font-size:1.5rem;font-weight:600;margin:38px 0 6px;
  padding-top:26px;border-top:1px solid var(--line)}

/* the pictures screen: one row per photograph, in the order the bands run */
.glist{list-style:none;margin:20px 0 0;padding:0}
.gitem{display:grid;grid-template-columns:auto 128px minmax(0,1fr);gap:16px;
  align-items:center;background:var(--white);border:2px solid var(--line);border-radius:6px;
  padding:14px;margin-bottom:10px}
.gnum{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--ink-soft)}
.gitem img{width:128px;height:84px;object-fit:cover;display:block;border:1px solid var(--line)}
.gcap{display:block;min-width:0}
.gcap b{display:block;font-size:.68rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
#picklist .arow{width:100%;text-align:left;font:inherit;cursor:pointer;margin-bottom:12px;
  font-family:var(--ui)}

@media(max-width:760px){
  .gitem{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .gitem img{grid-column:1/-1;width:100%;height:150px}
  .gcap{grid-column:1/-1}
}

/* ------------------------------------------------------------------ */
/* attachments: a name, then either a file or an address, then the button
   that chooses one and the cross that takes the row off. A flex row and
   not a grid, so the name and the address share whatever width there is
   and take their own lines when there is not enough of it. */
.afrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.afrow .val{flex:1 1 180px;min-width:0}
.afrow .aname{font-weight:600}
.afpick{flex:0 0 auto;white-space:nowrap}
/* to the end of the line, rather than wherever it happens to wrap */
.afrow .arowdrop{margin-left:auto}

/* the month: the same events as the list, laid out so a clash is obvious */
.amonth{background:var(--white);border:2px solid var(--line);border-radius:6px;padding:20px}
.amonth-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.amonth-top h3{flex:1 1 auto;text-align:center;font-family:var(--display);font-size:1.3rem;
  font-weight:600;margin:0}
.amonth-days,.amonth-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.amonth-days{margin-bottom:5px}
.amonth-days span{text-align:center;font-size:.68rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft)}
.amo-cell{min-height:84px;border:1px solid var(--line);border-radius:4px;background:var(--white);
  padding:7px 8px;text-align:left;font-family:var(--ui);color:var(--ink);display:block;width:100%}
.amo-cell b{display:block;font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums}
.amo-cell span{display:block;margin-top:5px;font-size:.78rem;line-height:1.3;font-weight:600;
  overflow-wrap:anywhere}
.amo-cell i{display:block;margin-top:5px;font-style:normal;font-size:.72rem;line-height:1.3;
  color:var(--ink-soft);overflow-wrap:anywhere}
.amo-out{background:var(--cream);border-color:var(--cream-2);color:var(--line)}
.amo-on{background:#E6F3EC;border-color:#9FCFB6;cursor:pointer}
.amo-on:hover{border-color:var(--ok)}
.amo-near{background:#FDF6E3;border-color:#E8D9AE}
.amo-today{outline:2px solid var(--ink);outline-offset:-2px}
.amonth-key{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;
  font-size:.88rem;color:var(--ink-2)}
.amonth-key li{display:flex;align-items:center;gap:8px}
.amonth-key .sw{width:16px;height:16px;flex:0 0 auto;border:1px solid var(--line);border-radius:3px}
.amonth-key .sw-on{background:#E6F3EC;border-color:#9FCFB6}
.amonth-key .sw-near{background:#FDF6E3;border-color:#E8D9AE}

@media(max-width:620px){
  .amonth{padding:14px 10px}
  .amo-cell{min-height:62px;padding:5px}
  .amo-cell span{font-size:.64rem}
  .amo-cell i{display:none}
}

/* ------------------------------------------------------------------ */
/* Every field on these screens holds something out of data/*.json and */
/* is not to be typed in. The box stays, because the box is what lines */
/* the values up, but it sits on the cream rather than on white, so it  */
/* reads as settled instead of waiting for a keystroke.                */

.adm input.ro,.adm textarea.ro,.adm select.ro{background:var(--cream);
  cursor:default;opacity:1;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.adm select.ro{appearance:none;-webkit-appearance:none;padding-right:13px}
.adm input.ro:focus{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--line)}
.adm input.ro::placeholder,.adm textarea.ro::placeholder{
  color:var(--ink-soft);font-style:italic;opacity:1}
/* A value wraps, because a caption or an address is as long as it is and a
   box that cuts it off on a phone is no use to anybody. It is drawn as the
   box the field used to be, so a screen reads the same as it did. */
.adm .val{display:block;font:inherit;font-family:var(--ui);padding:12px 13px;
  border:2px solid var(--line);
  border-radius:5px;background:var(--cream);color:var(--ink);
  overflow-wrap:anywhere;min-width:0}
.adm .val:empty::before{content:'Nothing set';color:var(--ink-soft);font-style:italic}
.adm .gcap .val{padding:11px 12px}

/* ---- signed in ------------------------------------------------------

   The bar at the top says who you are, because an admin that does not is
   an admin where somebody changes something from a colleague's machine
   without noticing. */
.adm .aauth{display:inline-flex;align-items:center;gap:12px;margin-right:18px}
.adm .awhoami{font-size:.9375rem;color:var(--ink-2);font-weight:600}

/* A box that can be typed into has to look unlike one that cannot. The
   locked screen is the reading screen, and it should stay restful. */
.adm .val.edit{background:var(--white);border-color:var(--line-dark);cursor:text}
.adm .val.edit:focus{outline:2px solid var(--red);outline-offset:-2px;background:#fff}
.adm .val.edit:empty::before{content:'Type here';color:var(--ink-soft);font-style:italic}
/* Two empty boxes beside each other both saying "Type here" say nothing.
   A box that knows what belongs in it says that instead. */
.adm .val.edit[data-hint]:empty::before{content:attr(data-hint)}

.adm .arowadd{margin:10px 0 4px}

/* what just happened, beside the buttons that did it */
.adm .asaid{margin-left:16px;font-size:.9375rem;color:var(--ink-2);align-self:center}
.adm .asaid.bad{color:var(--red);font-weight:600}
.adm .eactions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* ---- the rental card's repeating rows --------------------------------

   One row per fee, waiver, option or cancellation tier. Each cell carries
   its own small caption, because a row of bare boxes is unreadable once
   there are six of them and nobody remembers which is which. */
.adm .rrow{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;
  padding:14px 16px;margin-bottom:12px;background:var(--white);
  border:1px solid var(--line);border-radius:6px}
.adm .rcell{flex:0 1 auto;min-width:92px}
.adm .rcell.wide{flex:1 1 220px;min-width:180px}
.adm .rcell label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.adm .rcell input[type=text],
.adm .rcell input[type=number],
.adm .rcell select{width:100%;font:inherit;font-family:var(--ui);padding:9px 10px;
  border:1px solid var(--line-dark);border-radius:4px;background:#fff;color:var(--ink)}
.adm .rcell input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
.adm .rcell input[type=checkbox]{width:auto;margin-top:6px}
.adm .rcell input.ro,
.adm .rcell select.ro{background:var(--cream);border-style:dashed;color:var(--ink-2)}

/* two boxes side by side, as the events screen does it */
.adm .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 22px}

/* the up, down and remove buttons on a picture */
.adm .gtools{display:flex;gap:6px;align-items:center;margin-left:auto}
.adm .gtools .abtn{padding:6px 11px;font-size:1rem;line-height:1}
.adm .gtools .abtn[disabled]{opacity:.35;cursor:default}

/* ---- the history ----------------------------------------------------- */
.adm .hitem{background:var(--white);border:1px solid var(--line);border-radius:6px;
  margin-bottom:10px}
.adm .hitem > summary{cursor:pointer;padding:16px 18px;display:flex;flex-wrap:wrap;
  gap:6px;align-items:baseline;line-height:1.5}
.adm .hitem > summary:hover{background:var(--cream)}
.adm .hitem[open] > summary{border-bottom:1px solid var(--line)}
.adm .hwho{font-weight:700}
.adm .hwhat{color:var(--ink-2)}
.adm .htitle{font-weight:600}
.adm .hwhen{margin-left:auto;color:var(--ink-soft);font-size:.88rem;white-space:nowrap}
.adm .hbody{padding:16px 18px}
.adm .hbody > p:first-child{margin-top:0}
.adm .htbl{margin:0}
.adm .htbl td,.adm .htbl th{vertical-align:top}
.adm .hfield{font-family:var(--ui);font-size:.86rem;color:var(--ink-soft);
  white-space:nowrap;width:1%}
.adm .hwas{color:var(--ink-soft);text-decoration:line-through}
.adm .hnow{font-weight:600}
.adm .hraw{margin-top:14px}
.adm .hraw summary{cursor:pointer;font-size:.88rem;color:var(--ink-soft)}
.adm .hjson{margin:10px 0 0;padding:12px 14px;background:var(--cream);
  border:1px solid var(--line);border-radius:4px;overflow:auto;max-height:340px;
  font-size:.8rem;line-height:1.5}

/* ---- the flyer screen ------------------------------------------------ */
.adm .fband{display:block;height:150px;border:1px solid var(--line);border-radius:8px;
  background-size:cover;background-repeat:no-repeat;background-color:var(--cream)}
.adm .fsheet{display:block;max-width:300px;width:100%;height:auto;
  border:1px solid var(--line);border-radius:6px}

/* the buttons on a template row */
.adm .eacts{display:flex;gap:8px;align-items:center;flex-shrink:0}
.adm .eacts .abtn.small{padding:8px 12px;font-size:1rem;line-height:1}


/* ------------------------------------------------------------------ */
/* ticket prices: who it is for, and what they pay */
.prow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:10px;
  margin-bottom:10px;align-items:center}
.prow .pprice{font-weight:600}
@media(max-width:760px){
  .prow{grid-template-columns:minmax(0,1fr) auto}
  .prow .pwho{grid-column:1/-1}
}


/* ------------------------------------------------------------------ */
/* the day hour by hour: when, and what happens then. The narrow column
   is the time, which is the short one and the one worth lining up. */
.srow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) auto;gap:10px;
  margin-bottom:10px;align-items:center}
.srow .sat{font-weight:600}
@media(max-width:760px){
  .srow{grid-template-columns:minmax(0,1fr) auto}
  .srow .sat{grid-column:1/-1}
}


/* ------------------------------------------------------------------ */
/* Taking a row off again. The cross is pinned to the row's last column
   rather than left to fall where it lands: a ticket seller hides two of
   its boxes when nobody is being named, and without this the cross would
   slide up the row and sit against the dropdown. */
.arowdrop{grid-column:-2/-1;justify-self:end;align-self:center;
  line-height:1;padding:9px 14px;font-size:1.05rem}
.dmore{margin:0 0 14px}