*
{
  box-sizing: border-box;

  input[type=button],
  input[type=submit]
  {
    background-color: black;
    color: white;
  }

  input[type=button]:hover,
  input[type=submit]:hover
  {
    background-color: darkcyan;
    color: white;
  }

  select,
  input[type=text],
  input[type=file],
  input[type=date],
  input[type=password],
  input[type=month],
  input[type=email]
  {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    border: 1px solid white;

    background-color: black;
    color: white;

    outline: none;
  }

  select:hover,
  input[type=text]:hover,
  input[type=file]:hover,
  input[type=date]:hover,
  input[type=password]:hover,
  input[type=month]:hover,
  input[type=email]:hover
  {
    background-color: #333333;
    outline: none;
  }

  select:focus,
  input[type=text]:focus,
  input[type=file]:focus,
  input[type=date]:focus,
  input[type=password]:focus,
  input[type=month]:focus,
  input[type=email]:focus
  {
    outline: none;
    background-color: #666666;
  }
}

html
{
  overflow-x: hidden;
}

@media screen and (max-width: 1920px)
{
  body
  {
    margin: 0;
    font-family: Verdana,sans-serif;
    font-size: 12px;
    line-height: 1;
    background-color: #222222;
  }
}

@media screen and (min-width: 1920px)
{
  body
  {
    margin: 0;
    font-family: Verdana,sans-serif;
    font-size: 12px;
    line-height: 1;
    background-color: #222222;
  }
}

@media screen and (min-width: 2560px)
{
  body
  {
    margin: 0;
    font-family: Verdana,sans-serif;
    font-size: 14px;
    line-height: 1;
    background-color: #222222;
  }
}

@media screen and (min-width: 3840px)
{
  body
  {
    margin: 0;
    font-family: Verdana,sans-serif;
    font-size: 16px;
    line-height: 1;
    background-color: #222222;
  }
}

.login
{
  display: grid;
  grid-template-columns: [labels] 200px [controls] 1fr;
  grid-auto-flow: row;
  margin: auto;
  width: 750px;
  background-color: #222222;
  color: white;
  align-items: center;
  justify-items: center;
  justify-content: center;
  row-gap: 10px;

  h2
  {
    grid-column: span 2;
  }

  label
  {
    grid-column: labels;
    color: white;
    width: 100%;
  }

  input[type=text],
  input[type=password]
  {
    grid-column: controls;
    background-color: blue;
    color: white;
    outline: none;
    width: 100%;
    border-radius: 0px;
    border: none;
    outline: none;
  }

  input[type=text]:hover
  {
    background-color: purple;
  }

  input[type=submit],
  input[type=button]
  {
    grid-column: span 2;
    grid-row: auto;
    background-color: green;
    outline: none;
    width: 25%;
  }

  div
  {
    text-align: center;
    background-color: red;
    color: white;
    grid-column: span 2;
    width: 100%;
  }

}

.modal-main
{
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.8);
  overflow: hidden;
  justify-self: center;

  .content
  {
    z-index: 3;
    background-color: white;
    color: black;
    margin: 25px auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    max-width: 100%;
    max-height: 90%;
    overflow: auto;

    p
    {
      padding: 0px;
      margin: 0px;
    }

    div.late_flag
    {
      background-color: orange;
      color: black;

      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
      "suggestion detail"
      "buttons buttons";

      .late_item
      {
        background-color: black;
        color: orange;

        .suggestions
        {
          display: flex;

          flex-wrap: wrap;
          flex-direction: row;

          width: 100%;
          height: 100px;
          overflow-x: auto;
          overflow-y: hidden;

          align-content: center;
          align-items: flex-start;
          justify-content: center;

          .suggestion
          {
            align-content: center;
            width: 100px;
            height: 25px;
            background-color: black;
            color: orange;
            border: 1px solid white;
            text-align: center;
          }

          .suggestion:hover
          {
            color: white;
            cursor: pointer;
          }
        }
      }

      .late_details
      {
        background-color: orange;

        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "label input";

        label
        {
          grid-column: label;
          align-self: center;
        }

        select
        {
          grid-column: input;
        }
      }

      .late_buttons
      {
        grid-area: buttons;

        display: grid;
        grid-template-columns: 1fr 1fr;

        justify-items: center;

        .buttons
        {
          width: 100%;
          justify-content: center;

          input
          {
            justify-self: center;
            width: 25%;
          }
        }
      }
    }

    form.late_edit_form
    {
      display: grid;

      grid-template-columns: 1fr 1fr 1fr 1fr;

      background-color: black;
      color: white;

      label.pro
      {
        font-size: 16px;
        grid-column-start: 1;
        grid-column-end: span 4;
      }
    }

    form.flag_trip_form
    {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;

      background-color: black;
      color: orange;

      input.trip
      {
        grid-column: 2 / span 3;
      }

      input.save
      {
        grid-column: 4;
      }
    }

    form.todo_form
    {
      display: grid;
      grid-template-columns: 1fr 1fr;

      background-color: black;
      color: orange;
    }
  }

  .close
  {
    background-color: white;
    padding: 10px;
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus
  {
    background-color: black;
    color: darkcyan;
    text-decoration: none;
    cursor: pointer;
  }
}

.grid-container
{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  grid-template-areas:
  'title menu'
  'body body'
  'message footer';
  grid-template-rows: 40px 1fr 40px;
  grid-template-columns: 75% 1fr;
  height: 100vh;
  width: 100vw;
  color: white;
  background-color: #414141;

  .item-title
  {
    align-content: center;
    grid-area: title;
    background-image: linear-gradient(to right, black, orange);
    color: white;
    align-self: center;
    height: 100%;
    font-size: 20px;
    padding-left: 15px;
  }

  .item-menu
  {
    grid-area: menu;

    background-color: orange;
    color: white;

    display: flex;
    justify-content: flex-end;
    flex-direction: row;

    width: 100%;

    #menu-content
    {
      height: 100%;
      align-content: center;
      display: flex;
    }

    .dropbtn
    {
      background-color: orange;
      color: black;
      height: 100%;
      min-width: 75px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }
    
    .dropdown
    {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content
    {
      display: none;
      position: absolute;
      right: 0;
      background-color: #333333;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 10;
    }
    
    .dropdown-content a
    {
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      cursor: pointer;
    }
    
    .dropdown-content a:hover
    {
      color: black;
      background-color: #C1C1C1;
    }
    
    .dropdown:hover .dropdown-content
    {
      display: block;
    }
    
    .dropdown:hover .dropbtn
    {
      background-color: darkcyan;
    }
  }

  .item-body
  {
    grid-area: body;
    grid-column: 1 / span 2;

    display: flex;
    justify-content: center;

    color: white;
    background-color: black;

    overflow-y: auto;

    .spacer
    {
        height: 10px;
    }

    .g_actions
    {
      color: white;

      box-sizing: border-box;
      border: 1px solid white;

      overflow-y: auto;

      table
      {
        width: 100%;

        thead
        {
          th
          {
            column-span: all;
            font-size: 16px;
            background-color: black;
            color: white;
            text-align: left;
          }
        }

        tbody
        {
          td.action
          {
            font-size: 14px;
          }

          td.action:hover
          {
            background-color: orange;
            color: black;
            cursor: pointer;
          }

          td.space
          {
            height: 10px;
          }
        }
      }
    }

    .g_filter
    {
      box-sizing: border-box;
      border: 1px solid white;

      overflow-y: auto;

      table
      {
        width: 100%;

        thead
        {
          th
          {
            column-span: all;
            font-size: 16px;
            background-color: black;
            color: white;
            text-align: left;

          }

          th.active
          {
            text-align: right;
          }
        }

        tbody
        {
          th, td
          {
            box-sizing: border-box;
            border: 1px solid white;
          }

          th
          {
            text-align: left;
            font-style: italic;
          }

          th.active
          {
            text-align: right;
          }

          td
          {
            text-align: left;
            width: 50%;
          }

          select
          {
            width: 100%;
            border: none;
            margin: 0px;
            padding: 0px;
          }
          
          input[type=date]
          {
            width: 100%;
            border: none;
            margin: 0px;
            padding: 0px;
          }
        }

        tbody.item:hover
        {
          box-sizing: border-box;
          border: 1px solid white;

          background-color: white;
          color: black;
        }
      }
    }

    .g_display
    {
      box-sizing: border-box;
      border: 1px solid white;

      width: 100%;

      table
      {
        width: 100%;

        thead
        {
          th
          {
            column-span: all;
            font-size: 16px;
            background-color: black;
            color: white;
            text-align: left;
          }
        }

        tbody
        {
          th, td
          {
            box-sizing: border-box;
            border: 1px solid white;
            width: 50%;
            height: 20px;
          }

          th
          {
            text-align: left;
          }

          td
          {
            text-align: right;

            div.direction
            {
              display: flex;
              flex-direction: row;
            }

            a
            {
              width: 50%;
              background-color: black;
              color: orange;
            }

            a.selected
            {
              background-color: orange;
              color: black;
            }

            a:hover
            {
              background-color: green;
              color: black;
              cursor: pointer;
            }
          }

          select
          {
            text-align: left;
            width: 100%;
            border: none;
            margin: 0px;
            padding: 0px;
          }

          input[type=date]
          {
            width: 100%;
            border: none;
            margin: 0px;
            padding: 0px;
          }

          input[type=text]
          {
            width: 100%;
            border: none;
            margin: 0px;
            padding: 0px;
          }
        }
      }
    }

    .g_search
    {
      box-sizing: border-box;
      border: 1px solid white;

      width: 100%;

      table
      {
        width: 100%;

        thead
        {
          th
          {
            column-span: all;
            font-size: 16px;
            background-color: black;
            color: white;
            text-align: left;
          }
        }

        tbody
        {
          th, td
          {
            box-sizing: border-box;
            border: 1px solid white;
          }

          th
          {
            text-align: left;
            width: 100%;
          }

          select
          {
            width: 100%;
            border: none;
            margin: 0px;
            padding: 0px;
          }
          
          input[type=date]
          {
            width: 100%;
            border: none;
            margin: 0px;
            padding: 0px;
          }

          input[type=text]
          {
            width: 100%;
            border: none;
            margin: 0px;
            padding: 0px;
          }
        }
      }
    }
  }

  .item-message
  {
    grid-area: message;
    overflow: auto;
    font-size: 10px;

    table
    {
      background-color: black;
      width: 100%;
      cursor: default;
    }
    
    tr > th
    {
      background-color: darkgrey;
    }
    
    tr > td
    {
      border: 1px solid white;
    }
    
    tr:hover > td
    {
      background-color: orange;
      color: black;
    }
  }

  .item-footer
  {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-area: footer;
    text-align: center;
    background-color: black;
    color: white;
    padding: 0px 10px;
  }
}

.teva_container
{
  display: grid;

  grid-template-areas:
  "menu menu"
  "list display";

  grid-template-rows: 40px 1fr;
  grid-template-columns: 1fr 375px;

  background-color: black;
  color: orange;

  width: 80%;

  .menu
  {
    grid-area: menu;
    background-color: darkblue;
    color: white;
    align-content: flex-start;
    align-items: center;
    column-gap: 5px;
    display: flex;

    .button
    {
      border: 1px solid white;
      background-color: black;
      color: orange;
      align-content: center;
      padding: 5px;
    }

    .toggle_on
    {
      background-color: green;
      color: white;
    }

    .button:hover
    {
      cursor: pointer;
      background-color: orange;
      color: black;
    }
  }

  .list
  {
    grid-area: list;

    overflow: auto;

    margin: 5px;

    a
    {
      background-color: purple;
    }

    table
    {
      border-collapse: collapse;

      thead
      {
        position: sticky;
        top: 0px;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
        background-color: #111111;
        th
        {
          border: 0px solid #CCCCCC;
        }
      }

      tbody
      {
        tr.selected
        {
          background-color: orange;
          color: black;
        }

        tr:hover
        {
          cursor: pointer;
          background-color: #222222;
          color: white;
        }

        td
        {
          border: 1px solid white;
        }
      }
    }
  }

  .display
  {
    grid-area: display;
    background-color: #222222;
    color: white;
    width: 100%;

    form
    {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 23px;
      grid-template-areas: "label data";
      align-items: center;

      label
      {
        grid-column: label;
      }

      p
      {
        grid-column: data;
        margin: 0px;
        padding: 0px;
      }

      input
      {
        grid-column: data;
      }

      input.reset
      {
        grid-column: label;
      }

      select
      {
        grid-column: data;
      }
    }
  }
}

.cbs_container
{
  display: grid;

  grid-template-areas:
  "menu menu"
  "list display";

  grid-template-rows: 40px 1fr;
  grid-template-columns: 1fr 375px;

  background-color: black;
  color: orange;

  width: 80%;

  .menu
  {
    grid-area: menu;
    background-color: darkblue;
    color: white;
    align-content: flex-start;
    align-items: center;
    column-gap: 5px;
    display: flex;

    .button
    {
      border: 1px solid white;
      background-color: black;
      color: orange;
      align-content: center;
      padding: 5px;
    }

    .button:hover
    {
      cursor: pointer;
      background-color: orange;
      color: black;
    }
  }

  .list
  {
    grid-area: list;

    overflow: auto;

    margin: 5px;
  }

  .display
  {
    grid-area: display;
    background-color: #222222;
    color: white;
    width: 100%;

    form
    {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 23px;
      grid-template-areas: "label data";
      align-items: center;

      label
      {
        grid-column: label;
      }

      p
      {
        grid-column: data;
        margin: 0px;
        padding: 0px;
      }

      input
      {
        grid-column: data;
      }

      input.reset
      {
        grid-column: label;
      }

      select
      {
        grid-column: data;
      }
    }
  }
}

.grifols_container
{
  display: grid;

  grid-template-areas:
  "menu menu"
  "list display";

  grid-template-rows: 40px 1fr;
  grid-template-columns: 1fr 375px;

  background-color: black;
  color: orange;

  width: 80%;

  .menu
  {
    grid-area: menu;
    background-color: darkblue;
    color: white;
    align-content: flex-start;
    align-items: center;
    column-gap: 5px;
    display: flex;

    .button
    {
      border: 1px solid white;
      background-color: black;
      color: orange;
      align-content: center;
      padding: 5px;
    }

    .button:hover
    {
      cursor: pointer;
      background-color: orange;
      color: black;
    }
  }

  .list
  {
    grid-area: list;

    overflow: auto;

    margin: 5px;
  }

  .display
  {
    grid-area: display;
    background-color: #222222;
    color: white;
    width: 100%;

    form
    {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 23px;
      grid-template-areas: "label data";
      align-items: center;

      label
      {
        grid-column: label;
      }

      p
      {
        grid-column: data;
        margin: 0px;
        padding: 0px;
      }

      input
      {
        grid-column: data;
      }

      input.reset
      {
        grid-column: label;
      }

      select
      {
        grid-column: data;
      }
    }
  }
}

.upload_container
{
  display: grid;
  grid-template-areas:
  "files files"
  "file ."
  "action ."
  "form form";
  grid-template-columns: 1fr 1fr;
  width: 50%;
  justify-content: center;
  align-content: start;
  column-gap: 25px;

  row-gap: 15px;

  .files
  {
    grid-area: files;
    height: 250px;
    overflow-y: auto;
    width: 100%;

    table
    {
      background-color: black;
      color: white;
      cursor: default;

      thead
      {
        th
        {
          font-weight: bold;
          background-color: black;
          color: white;
        }
      }

      tbody
      {
        tr
        {
          background-color: #444444;
          color: white;
        }

        tr:nth-child(odd)
        {
          background-color: #222222;
        }

        tr.selected
        {
          background-color: orange;
          color: black;
        }

        tr:hover
        {
          background-color: #aaaaaa;
          color: black;
        }

        td.link:hover
        {
          cursor: pointer;
        }
      }
    }
  }

  .file_upload
  {
    width: 100%;
    grid-area: file;
    align-self: center;
    display: flex;
    justify-content: space-between;
    grid-column: 1/ span 2;

    input[type=file]
    {
      background-color: black;
      color: white;
    }

    input[type=file]:hover
    {
      background-color: black;
      color: darkcyan;
    }

    input[type=button]
    {
      background-color: black;
      color: white;
      justify-self: right;
    }

    input[type=button]:hover
    {
      color: darkcyan;
    }
  }

  .action
  {
    width: 100%;
    grid-area: action;
    display: flex;
    align-self: center;
    grid-column: 1/ span 2;
    grid-template-areas: "label input button";
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    background-color: blue;
    color: white;
    width: initial;

    label
    {
      align-content: center;
      grid-column: label;
    }

    select
    {
      grid-column: input;
      background-color: black;
      color: white;
    }

    select:hover
    {
      color: darkcyan;
    }

    input[type=button]
    {
      grid-column: button;
      background-color: black;
      color: white;
    }

    input[type=button]:hover
    {
      color: darkcyan;
    }
  }

  .action_form
  {
    grid-area: form;
    grid-column: 1/ span 2;
    align-self: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 5px;
    column-gap: 5px;

    color: white;

    label
    {
      align-content: center;
      background-color: blue;
    }

    select
    {
      background-color: black;
      color: white;
    }

    select:hover
    {
      color: darkcyan;
    }
  }
}

.shipments_container
{
  display: grid;

  grid-template-areas:
  "menu menu"
  "list display";

  grid-template-rows: 40px 1fr;
  grid-template-columns: 1fr 375px;

  background-color: black;
  color: orange;

  width: 80%;

  .menu
  {
    grid-area: menu;
    background-color: darkblue;
    color: white;
    align-content: flex-start;
    align-items: center;
    column-gap: 5px;
    display: flex;

    .button
    {
      border: 1px solid white;
      background-color: black;
      color: orange;
      align-content: center;
      padding: 5px;
    }

    .button:hover
    {
      cursor: pointer;
      background-color: orange;
      color: black;
    }
  }

  .list
  {
    grid-area: list;

    overflow: auto;

    margin: 5px;
  }

  .display
  {
    grid-area: display;
    background-color: #222222;
    color: white;
    width: 100%;

    form
    {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 23px;
      grid-template-areas: "label data";
      align-items: center;

      label
      {
        grid-column: label;
      }

      p
      {
        grid-column: data;
        margin: 0px;
        padding: 0px;
      }

      input
      {
        grid-column: data;
      }

      input.reset
      {
        grid-column: label;
      }

      select
      {
        grid-column: data;
      }
    }
  }
}

.mckesson_container
{
  display: grid;

  grid-template-areas:
  "menu menu"
  "list display";

  grid-template-rows: 40px 1fr;
  grid-template-columns: 1fr 375px;

  background-color: black;
  color: orange;

  width: 80%;

  .menu
  {
    grid-area: menu;
    background-color: darkblue;
    color: white;
    align-content: flex-start;
    align-items: center;
    column-gap: 5px;
    display: flex;

    .button
    {
      border: 1px solid white;
      background-color: black;
      color: orange;
      align-content: center;
      padding: 5px;
    }

    .button:hover
    {
      cursor: pointer;
      background-color: orange;
      color: black;
    }
  }

  .list
  {
    grid-area: list;

    overflow: auto;

    margin: 5px;
  }

  .display
  {
    grid-area: display;
    background-color: #222222;
    color: white;
    width: 100%;

    form
    {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 23px;
      grid-template-areas: "label data";
      align-items: center;

      label
      {
        grid-column: label;
      }

      p
      {
        grid-column: data;
        margin: 0px;
        padding: 0px;
      }

      input
      {
        grid-column: data;
      }

      input.reset
      {
        grid-column: label;
      }

      select
      {
        grid-column: data;
      }
    }
  }
}

.wait_container
{
  display: grid;
  grid-template-areas:
      "menu list";
  grid-template-columns: 300px 1fr;
  width: 80%;
  height: 100%;
  overflow-y: hidden;
  row-gap: 10px;

  .menu
  {
    grid-area: menu;
  }

  .list
  {
    grid-area: list;
    overflow-y: auto;
    height: 100%;

    table
    {
      width: 100%;
      border-collapse: collapse;

      thead
      {
        position: sticky;
        top: 0;
        background-color: black;
        color: white;
        cursor: default;

        th
        {
          border: 1px solid black;
        }
      }

      tbody
      {
        td
        {
          border: 1px solid black;
        }

        td.right
        {
          text-align: right;
        }

        td.positive
        {
          background-color: yellow;
          color: black;
        }

        tr
        {
          background-color: red;
          color: white;
        }

        tr:nth-child(odd)
        {
          background-color: purple;
        }

        tr:hover
        {
          background-color: pink;
          color: black;
          cursor: default;
        }
      }
    }
  }
}

.late_container
{
  display: grid;

  grid-template-areas:
  "menu menu"
  "list display";

  grid-template-rows: 40px 1fr;
  grid-template-columns: 1fr 375px;
  grid-gap: 5px;
  width: 80%;
  max-height: 100%;
  overflow-y: hidden;

  .menu
  {
    grid-area: menu;
    background-color: darkblue;
    color: white;
    align-content: flex-start;
    align-items: center;
    column-gap: 5px;
    display: flex;

    .button
    {
      border: 1px solid white;
      background-color: black;
      color: orange;
      align-content: center;
      padding: 5px;
    }

    .toggle_on
    {
      background-color: green;
      color: white;
    }

    .button:hover
    {
      cursor: pointer;
      background-color: orange;
      color: black;
    }
  }

  .list
  {
    grid-area: list;
    background-color: black;

    display: flex;
    align-content: flex-start;

    overflow: auto;
  }

  .display
  {
    grid-area: display;
    background-color: #333333;

    form
    {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 23px;
      grid-template-areas: "label data";
      align-items: center;

      label
      {
        grid-column: label;
      }

      p
      {
        grid-column: data;
        margin: 0px;
        padding: 0px;
      }

      input
      {
        grid-column: data;
      }

      input.reset
      {
        grid-column: label;
      }

      select
      {
        grid-column: data;
      }
    }
  }
}

.watch_container
{
  display: grid;

  grid-template-areas:
  "menu menu"
  "list display";

  grid-template-rows: 40px 1fr;
  grid-template-columns: 1fr 375px;
  grid-gap: 5px;
  width: 80%;
  max-height: 100%;
  overflow-y: hidden;

  .menu
  {
    grid-area: menu;
    background-color: darkblue;
    color: white;
    align-content: flex-start;
    align-items: center;
    column-gap: 5px;
    display: flex;

    .button
    {
      border: 1px solid white;
      background-color: black;
      color: orange;
      align-content: center;
      padding: 5px;
    }

    .toggle_on
    {
      background-color: green;
      color: white;
    }

    .button:hover
    {
      cursor: pointer;
      background-color: orange;
      color: black;
    }
  }

  .list
  {
    grid-area: list;
    background-color: black;

    display: flex;
    align-content: flex-start;

    overflow: auto;
  }

  .display
  {
    grid-area: display;
    background-color: #333333;

    form
    {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 23px;
      grid-template-areas: "label data";
      align-items: center;

      label
      {
        grid-column: label;
      }

      p
      {
        grid-column: data;
        margin: 0px;
        padding: 0px;
      }

      input
      {
        grid-column: data;
      }

      input.reset
      {
        grid-column: label;
      }

      select
      {
        grid-column: data;
      }
    }
  }
}

.customs_container
{
    display: grid;
    grid-template-areas: 
    "actions list"
    "filter list"
    "details details";
    grid-template-columns: 300px 1fr;
    grid-template-rows: 1fr 1fr 2fr;
    width: 80%;
    height: 100%;
    row-gap: 5px;
    column-gap: 5px;

    justify-self: center;
    justify-content: center;

    overflow-x: hidden;
    overflow-y: hidden;

    .actions
    {
      grid-area: actions;
    }

    .filter
    {
      grid-area: filter;
    }

    .list
    {
        grid-area: list;
        background-color: black;
        color: white;

        box-sizing: border-box;
        border: 1px solid white;

        overflow-x: auto;
        overflow-y: auto;

        height: 100%;
        width: 100%;

        table
        {
            border-collapse: collapse;
            cursor: default;
            white-space: nowrap;

            thead
            {
                background-color: black;
                color: white;
                cursor: default;
            }

            tbody
            {
                background-color: brown;
                color: white;

                td
                {
                    height: 20px;
                    box-sizing: border-box;
                    border: 1px solid white;
                }

                td.empty
                {
                    background-color: red;
                    color: black;
                }

                td.past
                {
                    background-color: orange;
                    color: black;
                }

                td.current
                {
                    background-color: yellow;
                    color: black;
                }

                td.future
                {
                    background-color: lightgreen;
                    color: black;
                }

                td.right
                {
                    text-align: right;
                }

                td.positive
                {
                    background-color: yellow;
                }
            }

            tbody:nth-child(odd)
            {
                background-color: purple;
            }

            tbody.selected
            {
                background-color: lightskyblue;
                color: black;
            }

            tbody:hover
            {
                background-color: pink;
                color: black;
                cursor: pointer;
            }
        }
    }
    
    .details
    {
        grid-area: details;

        background-color: black;
        color: white;

        overflow-y: auto;
        overflow-x: auto;

        height: 100%;
        width: 100%;

        display: grid;
        grid-template-areas:
            "actions actions"
            "basic notes"
            "shipments shipments";
        grid-template-columns: 66% 1fr;
        grid-template-rows: 30px 120px 1fr;
        align-items: start;
        row-gap: 5px;
        column-gap: 2px;

        box-sizing: border-box;
        border: 1px solid white;

        div.actions
        {
            grid-area: actions;
            width: 100%;
            height: 100%;
            background-color: black;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            box-sizing: border-box;
            border: none;
        }

        div.basic
        {
            grid-area: basic;
            width: 100%;
            height: 100%;

            display: flex;
            flex-direction: column;
            row-gap: 2px;
            column-gap: 5px;
            flex-wrap: wrap;


            div.item
            {
                display: grid;
                grid-template-columns: 1fr 1fr;
                width: 49%;
                background-color: black;
                align-items: center;

                p.label
                {
                    font-size: 16px;
                    font-weight: bold;
                    margin: 0px;
                    padding: 0px;
                    display: inline;
                }

                p.info
                {
                    margin: 0px;
                    padding: 0px;
                    text-align: left;
                    display: inline;
                }
            }

            div.item:hover
            {
                color: darkcyan;
                cursor: pointer;
            }
        }

        div.notes
        {
            grid-area: notes;
            width: 100%;
            height: 100%;
            justify-self: center;

            display: flex;
            flex-direction: column;
            row-gap: 2px;
            align-items: flex-start;
        }

        div.shipments
        {
            grid-area: shipments;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow-y: auto;

            table
            {
                border-collapse: collapse;

                td
                {
                    box-sizing: border-box;
                    border: 1px solid white;
                }
    
                thead
                {
                    text-align: center;
                    background-color: darkblue;
                    color: white;
                }

                tbody
                {
                    tr
                    {
                        background-color: black;
                        color: white;
                    }

                    td:hover
                    {
                        color: darkcyan;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}

.users_container
{
  display: grid;
  grid-template-areas:
      "menu list";
  grid-template-columns: 300px 1fr;

  justify-content: center;
  justify-self: center;
  width: 80%;
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;

  .menu
  {
    grid-area: menu;
  }

  .modal
  {
    display: none;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.8);
    overflow: hidden;
    align-content: center;
    justify-content: center;

    .content
    {
      display: grid;
      z-index: 3;
      background-color: darkred;
      margin: 25px auto; /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 50%;
      max-height: 90%;
      overflow: auto;
      justify-items: center;
      align-content: center;

      p
      {
        padding: 0px;
        margin: 0px;
      }

      .newuser
      {
        justify-self: center;
        display: grid;
        grid-template-columns: [label] 1fr [input] 1fr;
        grid-template-rows: auto;
        background-color: darkblue;
        color: white;
        width: 50%;
        row-gap: 2px;

        h2
        {
          grid-column: label / span 2;
        }

        label
        {
          grid-column: label;
        }

        input[type=text],
        input[type=password],
        input[type=email],
        select
        {
          grid-column: input;
        }

        input.cancel
        {
          background-color: darkblue;
          color: white;
          text-align: center;
          grid-column: label;
          width: 50%;
        }

        input.submit
        {
          background-color: darkblue;
          color: white;
          text-align: center;
          grid-column: input;
          width: 50%;

          justify-self: right;
        }
      }
    }

    .close
    {
      background-color: white;
      padding: 10px;
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus
    {
      background-color: black;
      color: darkcyan;
      text-decoration: none;
      cursor: pointer;
    }
  }

  .list
  {
    grid-area: list;
    background-color: black;
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;

    table
    {
      cursor: default;
      white-space: nowrap;

      thead
      {
        th
        {
          font-weight: bold;
          background-color: black;
          color: white;
        }
      }

      tbody
      {
        background-color: red;
        color: white;

        tr
        {
          height: 23px;
        }
      }

      tbody:nth-child(odd)
      {
        background-color: purple;
      }

      tbody:hover
      {
        background-color: pink;
        color: black;
      }
    }
  }
}

.settings_container
{
  display: grid;
  grid-template-areas:
      "menu list";
  grid-template-columns: 300px 1fr;

  justify-content: center;
  justify-self: center;
  width: 80%;
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;

  .menu
  {
    grid-area: menu;
  }

  .list
  {
    background-color: black;
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;

    table
    {
      cursor: default;
      white-space: nowrap;

      thead
      {
        th
        {
          font-weight: bold;
          background-color: black;
          color: white;
        }
      }

      tbody
      {
        tr
        {
          background-color: red;
          color: white;
        }

        tr:nth-child(odd)
        {
          background-color: purple;
        }

        tr:hover
        {
          background-color: pink;
          cursor: cursor;
        }
      }
    }
  }
}

.homepage_container
{
  display: grid;

  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "customers customer";

  background-color: black;
  color: orange;

  width: 80%;
  height: 100%;

  overflow: hidden;

  .news
  {
    grid-area: news;
  }

  .header
  {
    grid-area: header;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    align-items: flex-start;
    align-content: flex-start;
  }

  .customers
  {
    grid-area: customers;

    display: grid;

    grid-template-rows: 1fr;
    grid-template-areas: 
      "list";

    width: 100%;

    background-color: black;
    color: white;

    overflow-y: auto;

    .list
    {
      grid-area: list;
      overflow-y: auto;

      table
      {
        background-color: black;
        color: white;

        border-collapse: collapse;

        width: 100%;

        thead
        {
          font-weight: bold;

          position: sticky;
          top: 0;
          box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4);
          z-index: 2;

          th
          {
            border: 1px solid blue;
            background-color: orange;
            color: black;
          }
        }

        tbody
        {
          font-style: italic;

          tr
          {
            background-color: #000000;
          }

          tr:nth-child(odd)
          {
            color: orange;
          }

          tr:hover
          {
            background-color: orange;
            color: black;
            cursor: pointer;
          }

          tr.selected
          {
            background-color: darkblue;
            color: white;
          }

          td
          {
            border: 1px solid green;
          }

          td.highlight
          {
            background-color: #222222;
          }

          td.right
          {
            text-align: right;
          }
        }
      }
    }
  }

  .customer
  {
    grid-area: customer;

    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 45px 3fr;
    grid-template-areas:
      "header header"
      "lates_header late_graph"
      "lates late_graph";

    overflow: hidden;

    .header
    {
      grid-area: header;

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      align-items: flex-start;
      align-content: flex-start;

      overflow-x: hidden;
      overflow-y: auto;

      .item
      {
        padding: 1px 5px;
        width: 50%;
        background-color: orange;
        color: black;

        display: grid;
        grid-template-columns: 150px 1fr;

        .label
        {
          font-weight: bold;
          background-color: darkorange;
        }

        .info
        {
          color: black;
          text-align: right;
        }
      }

      .spacer
      {
        width: 50%;
        height: 25px;
      }
    }

    .lates_header
    {
      background-color: darkblue;
      color: white;

      grid-area: lates_header;

      display: grid;

      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 25px;

      .label
      {
        background-color: darkblue;
        color: white;
      }

      .data
      {
        background-color: darkred;
        color: white;
      }

      form.print_form
      {
        display: grid;

        grid-template-columns: 1fr 1fr;
        grid-template-areas: "label input";

        label
        {
          grid-column: label;
        }

        input
        {
          grid-column: input;
        }

        select
        {
          grid-column: input;

          width: 100%;
        }

        input.print
        {
          justify-self: right;
          width: 50%;
          grid-column: input;
        }

        input.reset
        {
          width: 50%;
          grid-column: label;
        }
      }
    }

    .lates
    {
      grid-area: lates;
      background-color: purple;
      color: white;
    }

    .late_graph
    {
      background-color: orange;
      color: black;

      grid-area: late_graph;

      .graph
      {
        width: 100%;
        height: 100%;
        
        overflow-y: auto;
      }
    }
  }
}

.homestats_container
{
  display: grid;

  grid-template-rows: 1fr 4fr;
  grid-template-areas:
    "customers"
    "customer";

  background-color: black;
  color: orange;

  width: 80%;
  height: 100%;

  overflow: hidden;

  .news
  {
    grid-area: news;
  }

  .header
  {
    grid-area: header;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    align-items: flex-start;
    align-content: flex-start;
  }

  .customers
  {
    grid-area: customers;

    display: grid;

    grid-template-rows: 1fr;
    grid-template-areas: 
      "list";

    width: 100%;

    background-color: black;
    color: white;

    overflow-y: auto;

    .list
    {
      grid-area: list;
      overflow-y: auto;

      table
      {
        background-color: black;
        color: white;

        border-collapse: collapse;

        width: 100%;

        thead
        {
          font-weight: bold;

          position: sticky;
          top: 0;
          box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4);
          z-index: 2;

          th
          {
            border: 1px solid blue;
            background-color: orange;
            color: black;
          }
        }

        tbody
        {
          font-style: italic;

          tr
          {
            background-color: #000000;
          }

          tr:nth-child(odd)
          {
            color: orange;
          }

          tr:hover
          {
            background-color: orange;
            color: black;
            cursor: pointer;
          }

          tr.selected
          {
            background-color: darkblue;
            color: white;
          }

          td
          {
            border: 1px solid green;
          }

          td.highlight
          {
            background-color: #222222;
          }

          td.right
          {
            text-align: right;
          }
        }
      }
    }
  }

  .customer
  {
    grid-area: customer;

    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 45px 3fr;
    grid-template-areas:
      "header header"
      "lates_header late_graph"
      "lates late_graph";

    overflow: hidden;

    .header
    {
      grid-area: header;

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      align-items: flex-start;
      align-content: flex-start;

      overflow-x: hidden;
      overflow-y: auto;

      .item
      {
        padding: 1px 5px;
        width: 50%;
        background-color: orange;
        color: black;

        display: grid;
        grid-template-columns: 150px 1fr;

        .label
        {
          font-weight: bold;
          background-color: darkorange;
        }

        .info
        {
          color: black;
          text-align: right;
        }
      }

      .spacer
      {
        width: 50%;
        height: 25px;
      }
    }

    .lates_header
    {
      background-color: darkblue;
      color: white;

      grid-area: lates_header;

      display: grid;

      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 25px;

      .label
      {
        background-color: darkblue;
        color: white;
      }

      .data
      {
        background-color: darkred;
        color: white;
      }

      form.print_form
      {
        display: grid;

        grid-template-columns: 1fr 1fr;
        grid-template-areas: "label input";

        label
        {
          grid-column: label;
        }

        input
        {
          grid-column: input;
        }

        select
        {
          grid-column: input;

          width: 100%;
        }

        input.print
        {
          justify-self: right;
          width: 50%;
          grid-column: input;
        }

        input.reset
        {
          width: 50%;
          grid-column: label;
        }
      }
    }

    .lates
    {
      grid-area: lates;
      background-color: purple;
      color: white;
    }

    .late_graph
    {
      background-color: orange;
      color: black;

      grid-area: late_graph;

      .graph
      {
        width: 100%;
        height: 100%;
        
        overflow-y: auto;
      }
    }
  }
}

.devpage_container
{
  display: grid;

  grid-template-rows: 1fr 45px 2fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "login activity"
    "menu menu"
    "todo todo";

  background-color: black;
  color: orange;

  width: 80%;
  height: 100%;

  overflow: hidden;

  gap: 2px;

  .login_log
  {
    border: 1px solid green;
    overflow-y: auto;

    grid-area: login;
    table
    {
      border-collapse: collapse;
      thead
      {
        th
        {
          font-weight: bold;
          font-size: 18px;
          color: lightblue;
          border: 1px solid white;
        }
      }

      tbody
      {
        td
        {
          border: 1px solid white;
        }
      }
    }
  }

  .activity_log
  {
    border: 1px solid red;
    overflow-y: auto;

    grid-area: activity;
    table
    {
      border-collapse: collapse;
      thead
      {
        th
        {
          font-weight: bold;
          font-size: 18px;
          color: lightblue;
          border: 1px solid white;
        }
      }

      tbody
      {
        td
        {
          border: 1px solid white;
        }
      }
    }
  }

  .todo_menu
  {
    display: flex;
    flex-direction: row;
    column-gap: 5px;
    grid-area: menu;
    border: 5px solid white;
    overflow-y: auto;

    .button
    {
      text-align: center;
      align-content: center;
      background-color: white;
      color: black;
      border: 1px solid black;
      width: 75px;
    }

    .button:hover
    {
      background-color: orange;
      color: black;
      cursor: pointer;
    }
  }

  .todo
  {
    border: 1px solid blue;
    overflow-y: auto;
    grid-area: todo;

    table
    {
      background-color: orange;
      color: black;

      td
      {
        border: 1px solid black;
      }
    }
  }
}

.cardsmain_container
{
  box-sizing: border-box;
  display: grid;

  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2fr 1fr;
  grid-template-areas:
    "select card"
    "batch_lists card";

  grid-column-gap: 1px;
  grid-row-gap: 1px;
  background-color: #333333;
  color: orange;

  width: 80%;

  border: none;

  .select
  {
    grid-area: select;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 35px 3fr 35px 5fr;
    grid-template-areas:
      "date type"
      "create_card create_card"
      "buttons buttons"
      "cards_list cards_list";

    row-gap: 10px;
    background-color: orange;
    color: black;
    width: 100%;

    .card_date
    {
      grid-area: date;
      background-color: orange;
      color: black;
      align-self: center;
    }

    .card_type
    {
      grid-area: type;
      align-self: center;
    }

    .create_card
    {
      grid-area: create_card;

      .card_list
      {
        grid-area: list;

        display: grid;
        grid-template-rows: 40px 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
          "list"
          "details";

        .cl_list
        {
          grid-area: list;
          overflow: hidden;

          select
          {
            width: 75%;
          }
        }

        .cl_details
        {
          grid-area: details;
          height: 100%;

          overflow-x: auto;

          table
          {
            text-align: left;

            border-collapse: collapse;

            white-space: nowrap;

            th, td
            {
              border: 1px solid white;
            }
          }
        }
      }

      .card_pro
      {
        grid-area: pro;

        display: grid;

        grid-template-areas:
          "cp_selection"
          "cp_suggestions";
        grid-template-rows: 35px 1fr;
        width: 100%;
        height: 100%;

        .cp_selection
        {
          grid-area: cp_selection;
        }

        .cp_suggestions
        {
          grid-area: cp_suggestions;

          display: flex;

          flex-wrap: wrap;
          flex-direction: row;

          width: 100%;
          overflow-x: auto;
          overflow-y: hidden;

          align-content: center;
          align-items: flex-start;
          justify-content: center;

          .suggestion
          {
            align-content: center;
            width: 100px;
            height: 25px;
            background-color: black;
            color: orange;
            border: 1px solid white;
            text-align: center;
          }

          .suggestion:hover
          {
            color: white;
            cursor: pointer;
          }
        }
      }
    }

    .card_buttons
    {
      grid-area: buttons;

      display: flex;
      justify-content: space-between;

      .button
      {
        border: 1px solid white;
        background-color: black;
        color: orange;
        width: 150px;
        text-align: center;
        align-content: center;
      }

      .button:hover
      {
        background-color: orange;
        color: black;
        cursor: pointer;
      }
    }

    .cards_list
    {
      grid-area: cards_list;

      display: grid;

      grid-template-columns: 1fr;
      grid-template-rows: 40px 1fr;
      grid-template-areas:
        "menu"
        "list";

      width: 100%;

      .batch_description_dialog
      {
        background-color: darkred;
        color: white;

        form.batch_description
        {
          display: grid;
          grid-template-columns: 1fr 1fr;
        }
      }

      .menu
      {
        grid-area: menu;

        display: flex;
        flex-direction: row;

        gap: 0px 5px;

        justify-content: flex-end;

        .button
        {
          background-color: black;
          color: orange;
          height: 30px;
          width: 100px;
          border: 1px solid white;
          text-align: center;
          align-content: center;
        }

        .button:hover
        {
          background-color: orange;
          color: black;
          cursor: pointer;
        }
      }

      .list
      {
        grid-area: list;

        table
        {
          background-color: #777777;
          color: black;

          border-collapse: collapse;
          white-space: nowrap;

          width: 100%;

          td, th
          {
            border: 1px solid #777777;
          }

          div.button
          {
            background-color: black;
            color: orange;
            align-content: center;
            justify-content: center;
            height: 100%;
            text-align: center;
          }

          .button:hover
          {
            background-color: orange;
            color: black;
            cursor: pointer;
          }
        }
      }
    }
  }

  .batch_lists
  {
    grid-area: batch_lists;
    background-color: purple;
    color: white;

    display: grid;

    grid-template-rows: 1fr;
    grid-template-areas: "list";

    .batch_menu
    {
      background-color: darkred;
      color: white;
    }

    .batch_cards
    {
      background-color: #000079;
      color: white;

      table
      {
        background-color: orange;
        color: black;

        td.delete
        {
          cursor: pointer;
        }

        td.delete:hover
        {
          background-color: black;
          color: orange;
          cursor: pointer;
        }

        td.batch
        {
          cursor: pointer;
        }

        td.batch:hover
        {
          background-color: black;
          color: white;
          cursor: pointer;
        }
      }
    }
  }

  .card
  {
    grid-area: card;

    background-color: black;
    color: orange;

    overflow-y: auto;

    line-height: 0;
    iframe
    {
      border: 0;
      margin: 0px;
      padding: 0px;
    }
  }
}

.cardslist_container
{
  display: grid;

  grid-template-areas:
    "new"
    "menu"
    "list";
  grid-template-rows: 1fr 30px 2fr;

  row-gap: 5px;

  width: 80%;

  background-color: black;
  color: orange;

  .new
  {
    background-color: orange;
    color: black;
    grid-area: new;

    form
    {
      padding: 10px;
      width: 75%;
      justify-self: center;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

      .button
      {
        width: 50%;
        justify-self: center;
        grid-column: auto / span 2;
      }

      select
      {
        width: 100%;
      }

      .spacer
      {
        grid-column: auto / span 2;
      }

      .empty_row
      {
        grid-column: auto / span 6;
        height: 10px;
      }
    }
  }

  .menu
  {
    display: flex;
    flex-direction: row;

    .button
    {
      background-color: darkblue;
      color: white;
      width: 100px;
      border: 1px solid white;
      text-align: center;
      align-content: center;
    }

    .button:hover
    {
      cursor: pointer;
      background-color: white;
      color: darkblue;
    }
  }

  .list
  {
    background-color: black;
    color: white;

    grid-area:list;

    overflow-x: auto;

    table
    {
      background-color: black;
      color: orange;

      border-collapse: collapse;
      thead
      {
        font-weight: bold;
      }

      tbody
      {
        tr
        {
          background-color: black;
          color: white;
        }

        tr:nth-child(odd)
        {
          background-color: #555555;
          color: white;
        }

        tr:hover
        {
          background-color: orange;
          color: black;
          cursor: pointer;
        }

        tr.selected
        {
          background-color: darkblue;
          color: white;
        }

        td
        {
          border: 1px solid white;
        }
      }
    }
  }
}

.cardsbatches_container
{
  display: grid;

  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "editor batches";

  gap: 5px;

  width: 80%;

  background-color: black;
  color: orange;

  .editor
  {
    background-color: darkred;
    color: white;
    grid-area: editor;

    gap: 5px;

    display: grid;
    grid-template-rows: 1fr 35px 2fr;
    grid-template-areas:
      "edit"
      "action"
      "details";

    .editor_action
    {
      background-color: black;
      color: pink;
      grid-area: action;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 5px;

      .button
      {
        border: 1px solid white;
        background-color: darkred;
        color: white;

        min-width: 85px;
        min-height: 25px;
        align-content: center;
        text-align: center;
      }

      .button:hover
      {
        background-color: orange;
        color: black;
        cursor: pointer;
      }
    }

    .editor_details
    {
      background-color: black;
      color: green;
      grid-area: details;
      padding: 5px;

      display: grid;
      grid-template-rows: 27px 1fr;
      grid-template-areas:
        "details"
        "list";

      .details
      {
        background-color: darkgrey;
        color: black;
        align-content: center;
        height: 100%;
      }

      .list
      {
        background-color: black;
        color: pink;

        table
        {
          thead
          {
            background-color: orange;
            color: black;
          }

          tbody
          {
            background-color: darkgreen;
            color: white;

            td.remove:hover
            {
              background-color: white;
              color: darkgreen;
              cursor: pointer;
            }
          }
        }
      }
    }

    .editor_list
    {
      background-color: orange;
      color: black;
      grid-area: edit;
      padding: 5px;
    }
  }

  .batch
  {
    background-color: orange;
    color: black;
    grid-area: batch;
  }

  .batches
  {
    background-color: blue;
    color: white;
    grid-area: batches;

    display: grid;
    grid-template-rows: 35px 1fr;
    grid-template-areas:
      "menu"
      "details";
    
    .batch_description_dialog
    {
      background-color: darkred;
      color: white;

      form.batch_description
      {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
    }

    .batches_menu
    {
      background-color: black;
      color: pink;
      grid-area: menu;

      display: flex;

      .button
      {
        border: 1px solid white;
        background-color: darkred;
        color: white;

        min-width: 85px;
        min-height: 25px;
        align-content: center;
        text-align: center;
      }

      .button:hover
      {
        background-color: orange;
        color: black;
        cursor: pointer;
      }
    }

    .batches_details
    {
      background-color: black;
      color: green;
      grid-area: details;

      table
      {
        background-color: orange;
        color: black;

        td
        {
          border: 1px solid black;
        }

        td:hover
        {
          background-color: black;
          color: orange;
          cursor: pointer;

          border: 1px solid white;
        }
      }
    }
  }
}

.reports_container
{
  display: grid;
  grid-template-rows: 75px 1fr;
  grid-template-columns: 350px 1fr;
  grid-template-areas:
    "menu details"
    "options details";

  background: orange;
  color: black;

  width: 80%;

  overflow: hidden;

  >.menu
  {
    grid-area: menu;

    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: red;

    row-gap: 2px;

    padding: 2px;

    >.item
    {
      width: 100%;
      min-height: 25px;
      display: flex;
      background-color: orange;
      color: black;
      border: 1px solid black;

      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      padding: 2px;

      >select
      {
        background-color: orange;
        color: black;
        min-width: 75%;
      }

      label
      {
        height: 100%;
        align-content: center;
      }

      >.button
      {
        align-content: center;
        height: 100%;
        padding: 0px 5px;
        background-color: darkorange;
        color: black;
        border: 1px solid black;
      }

      >.button:hover
      {
        background-color: black;
        color: orange;
        cursor: pointer;
      }
    }
  }

  >.options
  {
    grid-area: options;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: yellow;

    row-gap: 2px;

    padding: 2px;

    >.item
    {
      width: 100%;
      min-height: 25px;
      display: flex;
      background-color: orange;
      color: black;
      border: 1px solid black;

      padding: 2px;

      >select
      {
        background-color: orange;
        color: black;
        min-width: 75%;
      }

      label
      {
        height: 100%;
        align-content: center;
      }

      >.button
      {
        align-content: center;
        height: 100%;
        padding: 0px 5px;
        background-color: darkorange;
        color: black;
        border: 1px solid black;
      }

      >.button:hover
      {
        background-color: black;
        color: orange;
        cursor: pointer;
      }
    }

    .item-h
    {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .item-v
    {
      align-content: flex-start;
      flex-direction: column;
      justify-content: space-between;

      row-gap: 3px;

      div
      {
        background-color: black;
        color: orange;
      }
    }
  }

  >.details
  {
    grid-area: details;

    display: grid;
    grid-template-rows: 60px 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
      "stuff"
      "list";

    width: 100%;
    background-color: green;
    color: white;

    overflow: hidden;

    >.stuff
    {
      grid-area: stuff;
      width: 100%;
    }

    >.list
    {
      grid-area: list;

      width: 100%;
      overflow: auto;
    }
  }
}

.storage_container
{
  display: grid;

  grid-template-areas:
    "menu menu"
    "filter filter"
    "list form";

  grid-template-rows: 40px 40px 1fr;
  grid-template-columns: 1fr 375px;

  background-color: #555555;
  color: black;

  width: 80%;

  >.menu
  {
    grid-area: menu;
    background-color: orange;
    color: black;
  }

  >.filter
  {
    grid-area: filter;
    background-color: darkblue;
    color: white;
  }

  >.list
  {
    grid-area: list;

    overflow: auto;

    margin: 5px;
  }

  >.form
  {
    grid-area: form;
    background-color: #222222;
    color: white;
    width: 100%;

    form
    {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 23px;
      grid-template-areas: "label data";
      align-items: center;

      label
      {
        grid-column: label;
      }

      p
      {
        grid-column: data;
        margin: 0px;
        padding: 0px;
      }

      input
      {
        grid-column: data;
      }

      input.reset
      {
        grid-column: label;
      }

      select
      {
        grid-column: data;
      }
    }
  }
}

.schedule_container
{
  background-color: #888888;
  color: black;

  width: 80%;

  display: grid;

  grid-template-rows: 30px 1fr;
  grid-template-columns: 4fr 1fr;
  grid-template-areas:
    "menu menu"
    "schedule shipment";
  grid-gap: 3px;

  .menu
  {
    background-color: darkgreen;
    color: white;

    grid-area: menu
  }

  .schedule
  {
    display: flex;
    flex-direction: row;

    gap: 3px;

    .header
    {
      display: grid;
      grid-template-columns: 1fr 5fr;
    }

    .customer
    {
      display: grid;
      grid-template-columns: 1fr 5fr;
      grid-template-areas: "header shipments";

      .header
      {
        background-color: black;
        color: yellow;
      }

      .shipments
      {
        width: 100%;
        overflow: auto;
        display: flex;
        flex-direction: row;

        .shipment
        {
          width: 100%;
          display: flex;
          flex-direction: row;

          .day
          {
            display: flex;
            flex-direction: column;

            justify-content: space-around;

            .stop
            {
              display: grid;
              grid-template-rows: 1fr 1fr 1fr 1fr;
              gap: 2px;

              .location
              {
                border: 1px solid red;
              }

              .code
              {
                border: 1px solid yellow;
              }

              .time
              {
                border: 1px solid green;
              }

              .temperature
              {
                border: 1px solid pink;
              }
            }
          }
        }
      }
    }
  }

  .schedule
  {
    background-color: darkblue;
    color: white;

    grid-area: "schedule";

    overflow: auto;

    table
    {
      thead
      {
        tr
        {
          border: 3px solid green;

          th
          {
            background-color: black;
            color: orange;
            border: 1px solid black;
          }
        }
      }

      tbody
      {
        tr
        {
          border: 3px solid green;

          th
          {
            background-color: black;
            color: orange;
            border: 1px solid black;
          }

          td
          {
            border: 1px solid black;
            background-color: darkblue;
            color: white;
            min-width: 100px;
            >div.stops
            {
              display: flex;
              flex-direction: row;
              gap: 2px;
              color: black;

              >div.stop
              {
                display: flex;
                flex-direction: column;
                border: 1px solid white;
                width: 100px;
                >p
                {
                  padding: 0px;
                  margin: 0px;
                  min-height: 15px;
                }
              }

              >div.pickup
              {
                background-color: lightblue;
              }

              >div.delivery
              {
                background-color: lightgreen;
              }
            }
          }
        }

        tr:hover
        {
          border: 3px solid orange;
          cursor: pointer;
        }
      }
    }
  }

  .shipment
  {
    background-color: orange;
    color: black;
 
    grid-area: shipment;
 }
}

div.schedule_manager_conatiner
{
  background-color: black;
  color: orange;

  width: 80%;

  display: grid;

  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "new"
    "list";
  
  >div.new
  {
    grid-area: new;

    width: 100%;

    background-color: darkblue;
    color: white;

    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
      "details stops";

    >div.details
    {
      grid-area: details;
      background-color: orange;
      color: black;
    }

    >div.stops
    {
      grid-area: stops;
      background-color: #444444;
      color: white;
    }
  }

  >div.list
  {
    grid-area: list;
    width: 100%;
    background-color: green;
    color: black;
  }
}