*
{
   font-family: "Fira Sans", sans-serif, arial;
}

body
{
   background-color: #353535;
   color: #ffffff;
}

a
{
   color: #3a52d9;
   text-decoration: none;
}

.pin
{
   width: 100%;
   text-align: center;
   padding-top: 10%;
}

.user1 { color: #6060ff; }
.user1Sub { color: #a0a0ff; }
.user2 { color: #ff60ff; }
.user2Sub { color: #ffa0ff; }

.today { background-color: #3f4f3f; }
.spDay { background-color: #606040; }

.dayNo
{
   font-weight: bold;
   margin-bottom: 12px;
}

table
{
   width: 100%;
   border: solid 2px #252525;
   margin-top: 10px;
   table-layout: fixed;
}

thead tr
{
   font-size: 125%;
   font-weight: bold;
   border-bottom: solid 2px #404040;
}

thead td
{
   border-bottom: solid 2px #404040;
}

tbody td
{
   border-bottom: solid 2px #606060;
   vertical-align: top;
   border-right: solid 1px #606060;
}

.data
{
   min-height: 100px;
}

.data2
{
   min-height: 50px;
}

tbody td:last-child
{
   border-right: none;
}

.editDate
{
   width: 100%;
   border-bottom: solid 1px #ffffff;
   margin-top: 30px;
   margin-bottom: 10px;
}

.spacer
{
   width: 100%;
   padding-top: 20px;
   padding-bottom: 20px;
}

.shiftCell
{
   float: left;
   margin-right: 20px;
}

.shiftEnd
{
   clear: both;
}

input, select
{
   background-color: #606060;
   border: solid 1px #909090;
   margin: 2px;
   color: #c0c0c0;
   border-radius: 2px;
   margin: 1px;
}

@supports not (-webkit-touch-callout: none)
{
   h1 { font-size: 17px; }
   h2 { font-size: 14px; }
}

@supports (-webkit-touch-callout: none)
{
   body
   {
      font-size: 130%;
      overflow: scroll;
      touch-action: pan-y pan-y;
   }

  select 
  {
    -webkit-appearance:none;
    appearance: none;
    font-size: 100%;
  }

   input
   {
      font-size: 100%;
   }

   .dayViewer
   {
      min-height: 150px;
   }

   h1 { font-size: 140%; margin-top: 50px; }
   h1:first-of-type { margin-top: 0; }
   h2 { font-size: 135%; }

   .data, .data2
   {
      font-size: 75%;
   }
}