gram: pain

> ./assets/css/_components.css

Lenses
(coming soon!)

/*
This file was generated by the Surface compiler.
*/

/* PainWeb.BookLive.explain_services/1 (fp3vy) */

  ul[s-fp3vy] { margin-bottom: 1rem; padding-left: 1rem; list-style: disc; }
  li[s-fp3vy].service[s-fp3vy] { margin-bottom: 1rem; }
  a[s-fp3vy] { text-decoration: underline; }

/* PainWeb.BookLive.render/1 (hpbuw) */

  section[s-hpbuw] { margin: 1rem 0 1rem; }
  h2[s-hpbuw] { font-weight: 600; margin-bottom: 1rem; }
  h3[s-hpbuw] { font-weight: 500; }
  section[s-hpbuw] p[s-hpbuw] { margin-bottom: 1rem; }
  #number-people[s-hpbuw] { display: flex; flex-direction: column; }
  #number-people[s-hpbuw] .join[s-hpbuw] { align-self: center; }
  hr[s-hpbuw] { margin: 0 0 2rem; }
  ul[s-hpbuw] { margin-top: 1rem; margin-bottom: 1rem; padding-left: 1rem; list-style: disc; }
  ul[s-hpbuw].services[s-hpbuw] li[s-hpbuw] { margin-bottom: 1rem; }
  .employ-generic[s-hpbuw] { align-self: center; }
  .bypass[s-hpbuw] { max-width: 40rem; margin: auto; }
  .form[s-hpbuw] {
    display: grid;
    align-items: center;
    grid-template-columns: auto auto 1fr;
    grid-gap: 1rem;
    margin-bottom: 2rem;
    text-align: right;
  }
  .field[s-hpbuw] { display: contents; }
  .required[s-hpbuw] label::before { content: '*'; color: #117864; }
  .field[s-hpbuw] label { grid-column: 2; }
  .field[s-hpbuw] input { grid-column: 3; }
  a[s-hpbuw].conditions[s-hpbuw] { text-decoration: underline; }

  h1[s-hpbuw] {
    @apply p-6 font-semibold text-2xl text-brand w-full
    place-content-center;
    width: auto;
  }
  .accommodation[s-hpbuw] {
    font-style: italic;
    max-width: 32rem;
    border-left: 4px solid #888;
    padding-left: 8px;
  }
  .accommodation[s-hpbuw] a[s-hpbuw] { text-decoration: underline; }
  .bill[s-hpbuw] { margin: 2rem 0; }

/* PainWeb.Components.Accion.render/1 (uwgnr) */

  p[s-uwgnr] { margin-bottom: 1.2rem; }
  .accion[s-uwgnr] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 0.6rem;
    align-items: center;
  }
  .accion[s-uwgnr] .main[s-uwgnr] { grid-column: 1; }
  .accion[s-uwgnr] button[s-uwgnr] { grid-row: 1 / -1; grid-column: 2; }

/* PainWeb.Components.Card.render/1 (ynyog) */

  .card[s-ynyog] { @apply overflow-hidden shadow-md; width: 40rem; }
  .content[s-ynyog] { @apply px-6 py-4 text-gray-700 text-base; }
  .header[s-ynyog] { @apply p-6 font-semibold text-2xl text-brand w-full bg-gray-200; }
  .footer[s-ynyog] { @apply px-6 py-4; }

/* PainWeb.Components.Choices.render/1 (6hco4) */

  .choices[s-6hco4] {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
  }
  .opcion[s-6hco4], .summary[s-6hco4] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: start;
  }
  .summary[s-6hco4] { padding-top: 0.5rem; }
  @media (max-width: 1080px) { .summary[s-6hco4] { display: block; } }
  button[s-6hco4] { position: relative; }
  button[s-6hco4] .label[s-6hco4] { position: absolute; bottom: 0; right: 0; }

/* PainWeb.Components.Class.render/1 (icxfc) */

  .collapse[s-icxfc] { @apply border-2; }
  p[s-icxfc] { margin-bottom: 1rem; }

/* PainWeb.Components.Conditions.render/1 (q5e4w) */

  ul[s-q5e4w], ol[s-q5e4w] { padding-left: 2rem; line-height: 1.1rem; }
  li[s-q5e4w] { margin-bottom: 0.4rem; }
  ul[s-q5e4w] { list-style: disc; }
  ol[s-q5e4w] { list-style: decimal; }
  .legal[s-q5e4w] { margin-bottom: 2rem; }
  input[s-q5e4w][checked] { background: #117864; }
  hr[s-q5e4w] { margin-bottom: 2rem; }

/* PainWeb.Components.Employee.render/1 (ofh6f) */

  h2[s-ofh6f] { align-self: center; }
  img[s-ofh6f] { max-width: 40%; margin-right: 1rem; }
  img[s-ofh6f].small[s-ofh6f] { max-width: 20%; }
  @media (max-width: 1080px) { img[s-ofh6f] { float: left; } }

/* PainWeb.Components.Page.render/1 (2z453) */

  main[s-2z453] { max-width: 60rem; margin: 0 auto; padding: 2rem 1rem; }
  #screen[s-2z453] { height: 100vh; width: 100vw; background: #bdd1d2;
  display: grid; grid-template-rows: auto 1fr; grid-gap: 2rem; }

  #page[s-2z453] { height: auto; overflow-y: scroll;
    display: flex; flex-direction: column; align-items: center; }

  #end[s-2z453] { width: 100vw; background: #0a2923; color: #d0d0d0;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
    display: flex; flex-direction: column; }

  #end[s-2z453] main[s-2z453] { padding: 0; }

  .line[s-2z453] { padding: 1rem 0;
    display: flex; flex-direction: row; justify-content: space-between; }
  @media(max-width: 1080px) { .line[s-2z453] { flex-direction: column; } }

  a[s-2z453] { text-decoration: underline; }

/* PainWeb.Components.Schedule.render/1 (l3g4k) */

  input[s-l3g4k] {
    border: 1px solid #426;
    border-radius: 0.4rem;
    padding: 0.6rem;
    text-align: center;
  }
  .inline[s-l3g4k] { display: flex; justify-content: start; }
  .inline[s-l3g4k] > *[s-l3g4k] { margin: 0.6rem; }
  @media(max-width: 1080px) { .inline[s-l3g4k] {
    flex-direction: column;
  } }

  .blocks[s-l3g4k] { display: flex; flex-wrap: wrap; }
  .hour[s-l3g4k] {
    width: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0.5rem;
    padding: 0.5rem;
    border: 2px solid #d0a1a1;
    border-radius: 4px;
  }
  .hour[s-l3g4k] > span[s-l3g4k] { grid-column: 1; grid-row: 1 / -1; font-weight: 600; }
  .hour[s-l3g4k] > .min[s-l3g4k] { grid-column: 2; text-decoration: underline; cursor: pointer; }

/* PainWeb.Components.Service.render/1 (lemfq) */

  div[s-lemfq] { display: flex; flex-direction: column; }
  span[s-lemfq] { display: block; margin-bottom: 0.5rem; }

/* PainWeb.Components.ServiceMap.render/1 (5ylva) */

  section[s-5ylva] { display: flex; justify-content: end; }
  svg[s-5ylva] text[s-5ylva] { fill:#000000; }
  svg[s-5ylva] path[s-5ylva] { stroke-width:2; stroke:#000000; }
  .backup[s-5ylva] { display: none; }
  .backup[s-5ylva] .service[s-5ylva] { text-align: right; }
  .backup[s-5ylva] .column[s-5ylva] {
    display: inline-block;
    width: 48px;
    text-align: center;
    padding-top: 1rem;
  }
  @media(max-width: 400px) {
    svg[s-5ylva] { display: none; }
    .backup[s-5ylva] {
      padding-top: 1rem;
      display: flex;
      flex-direction: column;
      align-content: end;
    }
  }

  g[s-5ylva].num-1[s-5ylva] text[s-5ylva] {fill: green;  } g[s-5ylva].num-1[s-5ylva] path[s-5ylva] {stroke: green;  }
  g[s-5ylva].num-2[s-5ylva] text[s-5ylva] {fill: blue;   } g[s-5ylva].num-2[s-5ylva] path[s-5ylva] {stroke: blue;   }
  g[s-5ylva].num-3[s-5ylva] text[s-5ylva] {fill: purple; } g[s-5ylva].num-3[s-5ylva] path[s-5ylva] {stroke: purple; }
  g[s-5ylva].num-4[s-5ylva] text[s-5ylva] {fill: red;    } g[s-5ylva].num-4[s-5ylva] path[s-5ylva] {stroke: red;    }