.ui_container
{
  div.ui_calendar
  {
    display: grid;

    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

    gap: 3px;

    >.week
    {
      display: grid;

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

      gap: 3px;

      >.day
      {
        border: 1px solid green;
        background-color: orange;
        color: black;
      }
    }
  }

  div.ui_week
  {
    display: grid;

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

  div.ui_button
  {
    background-color: pink;
  }

  div.ui_menu
  {
    display: flex;

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

    gap: 5px;

    justify-content: flex-start;
    
    background-color: black;
    color: orange;

    >.button
    {
      text-align: center;
      align-content: center;
      padding: 10px;
      border: 2px solid white;
      background-color: green;
      color: black;
    }

    >.button_toggle
    {
      text-align: center;
      align-content: center;
      padding: 10px;
      background-color: darkblue;
      color: white
    }

    >.button:hover,.button_toggle:hover
    {
      background-color: black;
      border: 2px solid green;
      color: green;
      cursor: pointer;
    }
  }

  div.ui_form
  {
    display: grid;

    >.buttons
    {
      width: 100%;
      background-color: purple;
      color: white;

      >.disable
      {
        background-color: #333333;
        color: #FF9999;
        text-align: center;
        align-content: center;
        border: 1px solid white;
      }

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

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

    form
    {
      background-color: inherit;
    }
  }

  table.ui_dblist
  {
    align-items: start;
    max-height: 100%;
    align-self: start;
    border-collapse: collapse;
    background-color: black;
    color: white;

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

    tbody
    {
      color: white;

      tr
      {
        background-color: #555555;
        border: 1px solid black;

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

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

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

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

  .ui_dblist_display
  {
    display: flex;
    flex-direction: row;
    background-color: white;
    color: black;

    >.total
    {
      align-content: center;
      background-color: black;
      color: pink;
      padding: 0px 10px;
    }

    >.per_page
    {
      align-content: center;
      display: flex;
      flex-direction: row;
      background-color: black;
      color: orange;

      >div
      {
        align-content: center;
      }
    }

    >.page
    {
      display: flex;
      flex-direction: row;
      background-color: orange;
      color: black;

      >div
      {
        align-content: center;
      }

      >.p_button
      {
        align-content: center;
        padding: 0px 10px;
      }

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