@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@font-face {font-family:sevensegment; src: url('./Seven Segment.ttf');}

button {
      font: inherit;
      background-color: darkgreen;
      color: white;
      border-radius: 4px;
      line-height: 32px;
      border: none;
      box-shadow: rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px;
      padding: 0 12px;
      min-width: 6em;
   /*   font-size: 13px; */

    }

input.short {max-width: 9em}
input::placeholder {color:darkgray}

.Modal { display: none; position: absolute; top: 30px; left: 0; height: 100vh; width: 100vw; background-color: rgba(0, 0, 0, 0.5); }
.ErrorWindow { min-width: 15em; width: 50vw; border: 4px solid black; border-radius: 12px; padding: 0 2em 2em 2em; color: white; background-color: red;  max-width: 80vw;  margin: 25vh auto; }
.ErrorWindow button {margin-top: 2em;     background-color: dimgray;}
#SuccessScreen {z-index:99999999;}
.SuccessWindow button {margin-top: 2em;    }
.SuccessWindow {  min-width: 15em; width: 50vw; border: 4px solid darkgreen; border-radius: 12px; padding: 0 2em 2em 2em; color: white; background-color: forestgreen;  max-width: 80vw; margin: 25vh auto; }


.FormPair:focus-within *  {color:  black;}
.FormPair {height:3em; max-width:100vw; white-space:nowrap; overflow:hidden}
.FormPair input {font: inherit; background-color:inherit; border:none; width: 42vw; color:inherit}
.FormCaption {display: inline-block; font-weight:700; color: #6E727B; width: 48vw; text-align:right}
.FormResponse {color: #65737E; display: inline-block; max-width: 49vw;}
.FormPair hr {border: none; border-bottom: 1px solid #929292; margin:0 3em}