@font-face {
  font-family: 'SportGofer';
  src: url(Common/SpriteGraffiti-Regular.ttf);
}

:root {
  --SmallestFixedFontSize: 3mm;       /* This is approximately the smallest readily readable font size. */
  --LargestFontSize: min(20vw,20vh);  /* All scaled sizing should be based off of LargestFontSize 
                                         (or a larger value) to minimize integer math quantization errors. */

  --LargeFontSize:  calc(max(var(--LargestFontSize)/6, 2.0*var(--SmallestFixedFontSize) ) );
  --MediumFontSize: calc(max(var(--LargestFontSize)/7, 1.8*var(--SmallestFixedFontSize) ) );
  --FooterFontSize: calc(max(var(--LargestFontSize)/8, 1.3*var(--SmallestFixedFontSize) ) );

  --SGBlue:  #80bfff;
  --SGGreen: #00dd00;
  --SGWhite: #ffffff;
  --SGSand:  #fff2df;
  --ReadableRed: red;
  --ReadableGreen: var(--SGGreen);
  --NullColor: gray;
}

h1, h2, h3, h4, h5, h6 {
  width: 100%;
  text-align: center;
  vertical-align: middle;
  * {
    display: inline-block;
    vertical-align: middle;
    white-space: no-wrap; }
}

h1 {
  font-size: var(--LargestFontSize);
  font-family: 'SportGofer', sans-serif !important; 
}

table {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
  
  th {
    text-align: center; }

  td {
    overflow-wrap: anywhere;
    text-align: center;
    border-style: solid;
    border-width: thin; }
}

pre { text-align: left; }

select {
  text-overflow: ellipsis;
} 

.Centered {
  text-align: center;
}

.WindowCentered {                              /* TO CENTER DIALOG BOX HORIZONTALLY         */
  position: fixed;                             /* - Positions relative to window.           */
  left: 50%;                                   /* - left-edge is 50% of Window.             */
  top: 50%;                                    /* - top-edge is 50% of window.              */
  transform: translate(-50%, -50%);            /* - translate left 50% of dialog box width. */           
}

.ManyRows {
  tbody tr:not(:has(th)):nth-child(odd):not(.Wrong) { background-color: var(--SGSand); }
}

* {
 &.Locked,   .Locked    { font-weight: bold; border-style: none;  }
 &.Verified, .Verified  { background-color: var(--ReadableGreen); }
 &.Wrong,    .Wrong     { background-color: var(--ReadableRed);   }
 &.Unused,   .Unused    { display: none !important;               }
 &.Closed,   .Closed    { background-color: var(--ReadableGreen); }
 &.Open,     .Open      { background-color: var(--ReadableRed);   }
}


/* DropDown Content (Hidden by Default) */
.DropDownContent {
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;

  a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;

    &:hover { background-color: var(--SGSand) }
  }
}

.Map {
  display: block;
  padding: 0;
  margin: 0;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  &:not(:empty) { width: 100% }
}

aside {      /* This may be unique use on Submit feedback. */ 
  width: 48%;
  display: inline-block;
  left: 0px;
  &:first-of-type { text-align:  left; }
  &:last-of-type  { text-align: right; }
}

section:not(:first-of-type) {
  margin: 1em none none none;
}

section {
  border-style: double;
  padding: 1px;
  &:not(:first-of-type) { margin: 1em none none none; }
}

button,
input[type="button"] {
  font-size: inherit;
  font-family: inherit;
  display: inline;
  align-items: center;
  border-radius: calc(0.1*var(--LargestFontSize));
  padding: calc(0.01*var(--LargestFontSize)) calc(0.03*var(--LargestFontSize)); 
  line-height: 1em;
} 

* {
  font-family: Arial, Verdana, Helvetica;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  :read-write { outline: thin; }  
  :empty::before { 
    content: attr(placeholder);
    color: var(--NullColor); }

}

/*  This is part of a hack to get around the fact that a range input
    won't receive various events (e.g. click, mousedown).  It locates 
    a sibling at the same location and the sibling receives the event.  
    For this to work:
      - the range input is class NextSiblingSamePosition
      - the parent has display: grid.
      - the next sibling (a span in this case) has a click handler
      - javascript removes the sibling element, etc on the first 
        event.
*/
*:has(> .SiblingSamePosition) { display: grid; }
.SiblingSamePosition, .SiblingSamePosition + * { 
  grid-column: 1;
  grid-row:    1; }

html {
  height: 100%;
} 

body {
  min-height: 100%;
}

footer { 
  font-size: var(--FooterFontSize);
} 

.Debug {
  font-size: var(--SmallestFixedFontSize);
  text-align: left;
  word-break: break-all;
  width: 100%;
}

.NullValue {
  accent-color: var(--NullColor);
}

.RowFlex {
  display: flex;
  flex-direction: row;
  * { 
   flex-basis: 0; 
   flex-grow: 1; }
}

.CenterColumnFlex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin: 0;
  padding: 0;
}

.Instructions {
  background-color: var(--SGBlue);
/*
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
*/
}

.Terminal {
  display: block;
  width:  calc(100vh-8px);
  text-align: left;
  overflow-wrap: break-word;
  border-style: solid;
  border-width: thin;
  margin: 0px;
  padding: 2px;
}

[data-id="ManageFiles"] {
  div.Terminal {
    display: block;
    width:   100%;
    text-align: left; 
    overflow-wrap: break-word;
    border-style: solid;
    border-width: medium;
    &:empty::before { content: "\00a0"; }
  }

  [data-id="GitStatus"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    > div {
      flex: 1 0 50%;
      > button { display: block; }
    }
  }
  
  table { 
    &.ManyRows { border-style: solid; border-width: thin; }
    &:not(.ManyRows) { border-style: none; } 
    td { 
      border: none; 
      &:first-child, 
      &:first-child:last-child /* Selects if there is only one child. */
        { text-align: left;  }
      &:last-child  
        { text-align: right; }  
    }
  }
}

[data-id="SignatureManager"] {
  span { 
    display: inline-block;
    width: 7em;
    text-align: left; }
  input { 
    width: 15em;
    text-align: center; }  
  table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse; }

}

span {
  display: inline-block;
  outline: none;
  &:read-write { 
    outline: thin solid; 
    min-width: 7em; }
}

.Prominent {
  width: calc(min(57ex,100%));
  font-size: var(--LargeFontSize);

  [data-id="SignatureDescription"][contentEditable="false"]::before {
    content: open-quote; }

  [data-id="SignatureDescription"][contentEditable="false"]::after {
    content: close-quote; }

  > * { width: 100%; }

  * {
    :read-write { 
      display: inline-block;
      width: 100%; }
    text-align: center;
    overflow-wrap: break-word;
    &:focus       { background-color: var(--SGBlue); }
    &:not(button, hr) { border-style: none; }
  } 

  [data-id="SignatureInstructions"] {
    display: inline-block;
    width: 100%;
    background-color: var(--SGBlue);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    flex-basis: auto;
    font-weight: normal; }

  [data-id="SignatureRecord"] { 
    border-style: solid;
    margin: 1px;
    padding: calc(0.5 * 1ex);

    input[type="password"],
    span {
      display: inline-block;
      outline: none;
      &:read-write { outline: thin solid; }
    }

    hr { margin: calc(0.5 * 1ex) 1ex 1ex 1ex; }
    .Unused + hr { display: none; }

    [data-id="SignatureDescription"], 
    [data-id="UserIdentifier"],
    [data-id="SignatureTime"], 
    [data-id="SignatureState"],
    [data-id="MethodsRequired"] {
      padding: calc(0.5 * 1ex);
      text-align: center;
      display: block; 
      width: 100%; }

    [data-id="PasswordMethod"],
    [data-id="EmailMethod"],
    [data-id="PhoneMethod"] {
     >:nth-child(1) { 
          width: calc(100% - 10ex - 9ex);
          text-align: left; }
     >:nth-child(2) { width: 10ex; } 
     >:nth-child(3) { width: 9ex; } 
    }

  }

  input[type="button"] {
    display: inline;
    border-style: solid;
    border-width: thin;
    width: calc(50% - 1ex);
    :focus { background-color: var(--SGBlue); } }

  :focus { 
    :read-write { background-color: var(--SGBlue); }
    :disabled   { border: none; } }
    
}


#FeedbackHistory {
  input[type="number"] { 
    width: 7ex; 
    text-align: right; }
}
 
input {
  font-size: inherit;
  font-family: inherit;
  border-style: solid;
  border-width: thin;
}

.DbRowNumber {
  width: 6em;
  border-width: thin;
  text-align: right;
}

.SourceCode {
  /* CAUTION: Changes to this can impact the line numbering algorithm in CodeEditorUCIL.js.
     It uses rendering to find where line wraps occur.  Be especially careful if changing:
       word-break, font-family, padding, height and resize. */
  display: flex;
  width:100%;  
  border: none;
  & * { 
   word-break: break-all;
   font-family: "Lucida Console", "Noto Mono", "DejaVu Sans Mono", "Liberation Mono", monospace; 
   overflow: hidden; 
   text-align: left; 
   border-style: solid; 
   border-width: thin; 
   padding: 0 1ex 0 1ex; 
   resize: none; 
   height: auto; }

  *:first-child:not(:last-child) { 
      text-align: right;
      width:  6ex; 
      border: none; }
  *:not(:first-child):last-child {
      width:  calc(100% - 6ex);}
  *:first-child:last-child  {  /* Selects if there is only one child - i.e. no line numbers. */   
      width: 100%; }

  /* See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family, 
             https://en.wikipedia.org/wiki/List_of_monospaced_typefaces
      Monospace fonts are needed for coding for easier reading of indents for nesting.
      In testing on July 31,2021 with Chrome  92.0.4515.107 (Official Build) (64-bit), 
           running on Windows 10:
      - the following fonts worked as monospace and in order of preference are:
          "Lucida Console", "Noto Mono", "DejaVu Sans Mono", "Liberation Mono", 
           Consolas, Courier, "Source Code Pro" 
      - the following fonts did not work as monospace:
          "Everson Mono", "IBM Plex Mono", "Letter Gothic", Menlo, "Monaco Menlo", monofur, OCR-B, 
          PragmataPro, "Prestige Elite", "Pro Font", "Roboto Mono", "Fira Mono",Menlo. 
  */
}

.InformationHelpOptions {
  text-align: left;

}

.LoadDisplayNone {
  display: none;
}

.Focus {
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

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

.WidthMin3em {
  min-width: 3em;
}

.WidthMin5em {
  min-width: 5em;
}

.Width40PER {
  width: 40%;
}

.ClosedByOriginator {
  background-color: var(--SGGreen);
}

.InAPlan {
  background-color: yellow;
}

.TitleButton {
  font-weight: bold;
}

.InformationHelpOptions {
  display: none;
}


/* Style the tab */
.tab {
  top: 0;
  position: sticky;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--SGGreen);
  background-color: var(--SGGreen);
  flex-wrap: wrap;
  * { background-color: var(--SGGreen); }
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-weight: bold;
  width: 10vw;
  min-width: fit-content;
}

.Spread {
  * { text-align: center; }
  :first-child { text-align: left; }
  :last-child { text-align: right; }
}

.KeyUserInput {
  font-size: var(--MediumFontSize);
  [contentEditable="true"] { font-weight: normal; }
  td, th { border: none; }
  button { 
    width: 100%;
    font-weight: bold; }

  :first-child:nth-last-child(10),
  :first-child:nth-last-child(10) ~ * {
      text-align: center;
      width: 10%;
  }
}

.Sticky {
  top: 0;
  position: sticky;
  background-color: var(--SGGreen);
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: var(--SGBlue);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: var(--SGWhite);
}

/* Style the tab content */
.tabcontent {
  padding: 6px 12px;
  border: 1px solid black;
}

.Null {
  font-style: italic;
  text-transform: uppercase;
}