/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* lugbulk style */

  @import url('https://khazad-cdn.com/fonts/bangers/2f404bd13dc30c44f21299ab7dc9fd1f.css');
  @import url('https://khazad-cdn.com/fonts/asul/63ce7ea5f68ec3775e046084a68499d6.css');

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* structure */

  body {
    // background: #ffcc00;
    background: linear-gradient(#dedeff, #8080ff);
    background-attachment: fixed;
    font-family: 'Asul', sans-serif;
  }

  h2 { font-size: 120%; }

  .center { text-align: center; }
  .error { font-weight: bold; color: red; }
  .nobr { white-space: nowrap; }
  .right { text-align: right; }
  .red { color: red; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* cards */

  div.card {
    position: relative;
    margin: 0.5ex;
    border: 1px solid; border-radius: 0.5ex;
    padding: 2ex 2em;
    background: white;
  }
  div.card *:first-child { margin-top: 0px; }

  div.card.system_error {
    width: min-content; min-width: 30em;
    margin: 2ex auto;
    text-align: center;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* flex row */

  .flex_row { display: flex; flex-flow: row nowrap; }
  .flex_row.centerline { align-items: center; }
  .flex_row > div + div { margin-left: 0.5em; }
  .flex_row > div.column { flex-basis: 100px; flex-grow: 1; }
  .flex_row > div.column.min { flex-grow: 0; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* forms */

  input, select, button {
    border: 1px solid; border-radius: 0.5ex;
    padding: 0.5ex 0.5em;
    background: white;
    font-family: 'PT Sans', sans-serif;
    font-size: 100%;
  }
  input[type=button] { background: #ccdeff; font-weight: bold; }
  input[disabled] { border-color: #808080; color: #808080; }
  input:not([disabled]) { transition: all 1s ease-in; }
  input[type=button][disabled] { background: #cccccc !important; }
  input[type=button].danger { background: #ffcccc; }
  input.error { border-color: red; color: red; }

  input[type=button].toggle {
    border-color: white; background: #333333; color: white;
    transition: none;
  }
  input[type=button].toggle.active {
    background: white; color: black;
  }

  div.awesome_input { position: relative; }
  div.awesome_input input { padding-left: 2.25em; }
  div.awesome_input i {
    position: absolute;
    left: 0.5em; top: 0.5ex;
    color: #808080;
  }

  button { background: #ccdeff; font-weight: bold; }
  button[disabled] { border-color: #808080; color: #808080; }
  button:not([disabled]) { transition: all 1s ease-in; }
  button[disabled] { background: #cccccc !important; }
  button.danger { background: #ffcccc; }
  button.error { border-color: red; color: red; }

  a.button {
    border: 1px solid; border-radius: 0.5ex;
    padding: 0.5ex 0.5em;
    background: #ccdeff;
    text-decoration: none;
    font-weight: bold;
    color: black;
  }
  a.button.admin {
    background: #deccff;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* hover notes */

  div.notable { position: relative; }
  div.notable div.note {
    position: absolute; top: 100%; z-index: 1024;
    display: none;
    transition: all 1s ease-in;
    border: 1px solid; border-color: black; border-radius: 0.5ex;
    padding: 0.5ex 0.5em;
    background: #333333; color: #ffffff;
  }
  div.notable:hover div.note {
    display: block;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* parts */

  div.card.part { padding: 0px; }
  div.part.pitch { background: #f5f5ff; }
  div.part.slate { background: #e5e5ff; }
  div.part.mine { background: #ffffcc; }
  div.part.slate.mine { background: #ccffcc; }

  div.part > div { margin: 0.5ex 1em; }

  div.part div.image { text-align: center; }
  div.part img { max-width: 5em; max-height: 5em; }

  div.part div.info span.lugbulk { font-weight: bold; }
  div.part div.info span.lugbulk.high { color: red; }

  div.part div.price td { padding: 0.25ex 0.5em; }
  div.part div.price td:nth-child(1) { min-width: 8em; }
  div.part div.price td:nth-child(2) { text-align: right; }

  div.part div.cost td { padding: 0.25ex 0.5em; }
  div.part div.cost td:nth-child(1) { min-width: 8em; }
  div.part div.cost td:nth-child(2) { text-align: right; }

  div.part div.subtotal td { padding: 0.25ex 0.5em; }
  div.part div.subtotal td:nth-child(1) { min-width: 8em; }
  div.part div.subtotal td:nth-child(2) { text-align: right; }

  div.part div.picked_by > div {
    padding: 0.25ex 0.5em;
  }

  div.part div.receipt {
    position: absolute; top: 1ex; right: 0px; z-index: 512;
  }
  div.part div.receipt i {
    font-size: 150%; color: #b72276;
  }

  div.card div.hide {
    position: absolute; top: 1ex; left: 1em; z-index: 512;
    width: 10em;
  }
  div.card div.hide i {
    font-size: 120%; color: #cccccc;
  }
  div.card div.hide:hover i {
    color: #000000;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* part list */

  div.part_list div.part { font-size: 120%; }
  div.part_list div.flex_row.part > div.column.info { flex-basis: 200px; }

  div.part_list div.header {
    font-size: 120%;
    font-weight: bold;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* review checklist */

  div.check_list > div:hover { background: #ffffcc; }
  div.check_list > div.flex_row > div.column { padding: 0.5ex 1em; }

  div.check_list > div.header {
    margin-bottom: 1ex;
    border-bottom: 1px solid;
    padding-bottom: 1ex;
    // font-size: 120%;
    font-weight: bold;
  }
  div.check_list > div.header .sort_icon {
    color: #808080;
  }
  div.check_list > div.total {
    margin-top: 1ex;
    border-top: 1px solid;
    padding-top: 1ex;
    font-size: 120%;
    font-weight: bold;
  }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* entry */

  div.entry h1 {
    margin: 0.5ex 0px;
    padding: 0px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Bangers', sans-serif;
    font-size: 400%;
  }
  div.entry p.subtitle { margin-top: -2ex; text-align: center; }
  div.entry input[type=button] { padding: 0.5ex 2em; }

  div.entry div.card.form {
    width: min-content; min-width: 30em;
    margin: 2ex auto;
    font-size: 120%;
  }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* lugbulk */

  div.lugbulk { display: flex; }
  div.lugbulk > h1 { flex-grow: 1; text-align: center; }
  div.lugbulk > div { flex-grow: 1; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* tabbed */

  div.tabbed ul.tabs_list { flex-grow: 1; margin: 0px; padding: 0px; }
  ul.tabs_list li { margin: 0.5ex; padding: 0px; list-style: none; }

  ul.tabs_list a.button.tab {
    border-radius: 0.5ex 0.5ex 0px 0px;
    font-size: 120%;
  }
  ul.tabs_list a.tab i { margin-right: 0.5em; }
  ul.tabs_list a.tab.active { background: white; }

  div.tabbed div.logged_in { align-items: center; text-align: right; }
  div.logged_in > * { margin: 0.5ex; }

  div.tabbed div.panel_info p { margin: 1ex 0px; font-size: 120%; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* available parts */

  div.available div.head {
    position: sticky; top: 0px; z-index: 1024;
    margin: 0.5ex;
    border: 1px solid; border-color: black; border-radius: 0.5ex;
    padding: 0.5ex 0.5em;
    background: #333333; color: #ffffff;
    font-size: 120%;
  }
  div.available div.head_group { margin-right: 3ex; }
  div.available div.head div.right { flex-grow: 1; text-align: right; }
  div.available div.head div { margin-right: 1ex; }
  div.available div.head input { max-width: 10em; font-size: 83%; }
  div.available div.head select { max-width: 10em; font-size: 83%; }

  div.available div.parts {
    display: flex;
    flex-flow: row wrap;
  }
  div.available div.part {
    position: relative;
    flex-basis: 15em; flex-grow: 1;
    padding-bottom: 7ex;
  }
  div.available div.part div.pick {
    position: absolute; left: 0px; bottom: 0px;
    width: 100%; height: 4ex;
    margin: 0px;
    border-radius: 0px 0px 0.5ex 0.5ex;
    padding: 0.6ex 0px;
    background: #cccccc;
  }
  div.available div.part div.pick.flex_row {
    justify-content: center;
    align-items: center;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* my picks */

  div.my_picks div.index {
    text-align: right;
    font-size: 240%;
    font-weight: bold;
  }
  div.my_picks div.shift { display: flex; flex-flow: column; }
  div.my_picks div.shift input { margin: 0.5ex; }

  div.my_picks div.shift input:nth-child(1) {
    border-radius: 0.5ex 0.5ex 0px 0px;
  }
  div.my_picks div.shift input:nth-child(2) {
    border-radius: 0px 0px 0.5ex 0.5ex;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* all picks */

  div.all_picks h2 { margin-left: 2em; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* review picks */

  div.review_picks div.note.done { font-weight: bold; color: green; }
  div.review_picks div.none.none { color: #808080; }

  div.review_picks div.canvas_size {
    position: relative;
    width: 100%;
    padding-top: 80%;
  }
  div.review_picks div.canvas_size canvas {
    position: absolute; top: 0px; left: 0px;
    width: 100%; height: 100%;
  }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* order form */

  div.order_parts { flex-basis: 24em; flex-grow: 1; }
  div.meta_column { flex-basis: 24em; }

  div.order_parts div.head {
    margin: 0.5ex;
    border: 1px solid; border-color: black; border-radius: 0.5ex;
    padding: 0.5ex 0.5em;
    background: #333333; color: #ffffff;
    font-size: 120%;
  }

  div.order_parts div.part.ordered { background: #ccffcc; }
  div.order_parts div.quantity > div { margin: 0.5ex; }
  div.order_parts div.quantity input[type=number] { width: 5em; }

  div.order_parts div.lot div { margin: 0.5ex 1em; }
  div.order_parts div.lot div:first-child { margin-left: auto; }
  div.order_parts div.lot span.split_lot { color: green; }
  div.order_parts div.lot span.dang { color: red; font-weight: bold; }

  div.order_meta_group { position: sticky; top: 1ex; }
  div.order_meta div { margin: 2ex 0px; text-align: center; font-size: 120%; }
  div.order_meta div.smaller { font-size: 100%; }
  div.order_meta div.total { font-size: 150%; }
  div.order_meta span.paid { font-weight: bold; color: green; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* cost comparison */

  div.compare_parts { flex-basis: 24em; flex-grow: 1; }
  div.meta_column { flex-basis: 24em; }

  div.compare_parts div.column.quantity {
    flex-basis: content; flex-grow: 0;
    font-size: 180%;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* review orders */

  div.review_orders div.done { font-weight: bold; color: green; }
  div.review_orders div.max { font-weight: bold; color: green; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* chat */

  div.chat div.log { height: calc(100vh - 24ex); overflow-y: auto; }
  div.chat div.message { margin-bottom: 1ex; display: flex; gap: 1em; }
  div.chat div.attribution { width: 7.5em; text-align: right; }
  div.chat div.message > div { padding: 1ex 1em; }
  div.chat div.username { font-size: 150%; font-weight: bold; }
  div.chat div.attribution img { max-width: 2em; max-height: 2em; }
  div.chat div.content { flex-grow: 1; border-radius: 0px 1ex 1ex 0px; }
  div.chat div.content { background: #f0f0f0; }
  div.chat div.message:nth-child(even) div.content { background: #e0e0e0; }
  div.chat div.write { display: flex; align-items: center; gap: 1em; }
  div.chat div.write input { width: 100%; }
  div.chat div.write button { width: 10em; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* invoices */

  div.invoices div.total {
    width: max-content;
    margin: 2ex auto;
    border: 1px solid; border-radius: 0.5ex;
    padding: 1ex 1em;
    text-align: center;
    font-size: 200%; font-weight: bold;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* picking slips */

  div.picking_slips div.username { font-size: 200%; font-weight: bold; }
  div.picking_slips div.quantity { font-size: 200%; font-weight: bold; }
  div.picking_slips div.summary { border-left: 1px solid; padding-left: 1em; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* packing lists */

  div.packing_lists div.username {
    width: max-content;
    margin: 2ex auto;
    border: 1px solid; border-radius: 0.5ex;
    padding: 1ex 1em;
    text-align: center;
    font-size: 200%; font-weight: bold;
  }
  div.packing_lists div.packing_check i.fas {
    font-size: 200%; opacity: 20%;
  }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* modals */

  div.blackout {
    position: fixed; left: 0px; top: 0px;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.75);
  }
  div.blackout.flex_row {
    justify-content: center;
    align-items: center;
  }
  div.modal { width: min-content; min-width: 30em; font-size: 120%; }
  div.modal.wide { width: 75%; }
  div.modal > div.actions { margin-top: 4ex; text-align: right; }
  div.modal input[type=button] { padding: 0.5ex 2em; }

  div.modal div.scroll_view {
    max-height: 75vh;
    overflow-y: scroll;
    border: 1px solid; border-radius: 0.5ex;
    padding: 1ex 1em;
  }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* faq */

  div.faq div.card {
    margin: 2ex;
    border: 1px solid; border-radius: 1ex;
    page-break-inside: avoid;
  }
  div.faq h2 {
    margin: 0px;
    padding: 0px;
    text-transform: uppercase;
    font-family: 'Bangers', sans-serif;
    font-size: 200%;
    font-weight: normal;
  }
  div.faq p {
    margin: 2ex 2em;
    font-size: 120%;
  }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* print */

  @media print {
    body { background: none; font-size: 60%; }
    div.tabbed div.head { display: none; }
    div.do_not_print { display: none; }
    div.part { break-inside: avoid; }
  }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */