html,
body {
  margin: 0;
  font-family: sans-serif
}

input,
button {
  font-family: sans-serif;
}

div#main {
  margin: 0 auto;
  border: none;
  padding: 15px;
  padding-top: 1px;
  position: relative;
  min-width: 320px;
}

div#app {
  position: relative;
}

div#app h1#title {
  margin: 0;
  margin-bottom: 10px;
  padding: 0;
  width: 100%;
  text-align: center;
  color: #999999;
}

div#appMessagesBox {
  margin: 0;
  padding: 10px;
  background-color: rgba(240, 240, 240, 0.9);
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

span#appMessages {
  color: red;
  margin: 0 auto;
  height: auto;
}

div.SpinnerBackground {
  background-color: rgba(100, 100, 100, .5);
  /*light gray 50%*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
}

div.SpinnerBackground#emailBackground {
  z-index: 5;
}

table.SpinnerTable {
  position: fixed;
  height: 100%;
  width: 100%;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

div#spinner {
  border: 16px solid #eeeeee;
  border-top: 16px solid #bbbbbb;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin: 0 auto;
}


div.ConfirmationBox {
  border: 5px solid black;
  background-color: white;
  color: black;
  width: 50%;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
}

button.ConfirmationButton {
  font-size: large;
  border: none;
  /*2px solid #62727b*/
  padding: 10px;
  color: black;
  background-color: #cccccc;
  display: inline-block;
  min-width: 150px;
  margin: 10px
}

button.ConfirmationButton:hover {
  background-color: #eeeeee;
}

button.ConfirmationButton:disabled {
  background-color: #aaaaaa;
  color: #999999;
}


button.ConfirmationButton:disabled img {
  opacity: 0.33;
}

div.Hint {
  background-color: #ffffd5;
  color: black;
  font-size: small;
  font-weight: normal;
  border: 2px solid #555555;
  width: 120px;
  position: absolute;
  top: 80%;
  left: 50%;
  margin-left: -72px;
  /*half plus padding and border*/
  display: none;
  z-index: 10;
  padding: 10px;
}

img.HintIcon {
  cursor: help;
  z-index: 1;
}

img.HintIcon:hover+div {
  display: block !important;
}


img.ButtonIconMedium {
  vertical-align: text-bottom;
}

img.TextIcon {
  vertical-align: text-bottom;
}

img.ListIcon {
  vertical-align: baseline;
}


img.ButtonIcon {
  vertical-align: middle;
}

img.ButtonIconBaseline {
  vertical-align: baseline;
}

img.ButtonIconSub {
  vertical-align: sub;
}

img.ButtonIconBottom {
  vertical-align: bottom;
}

img.ButtonIconTBottom {
  vertical-align: text-bottom;
}


div#app {
  position: relative;
  min-height: 100vh;
  margin: 0;
  box-sizing: border-box;
  padding-bottom: 100px;
}

div#loginPage,
div#main {
  margin: 10px;
}

div#main {
  text-align: center;
}

div#loginPage {
  margin: 0 auto;
  max-width: 320px;
}

div#loginPage p {
  color: gray;
  font-style: italic;
}

div#loginPage input {
  font-size: x-large;
  display: block;
  margin: 10px 0;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  border: none;
  background-color: #eeeeee;
}

div#loginPage button {
  width: 100%;
  font-size: x-large;
  padding: 20px;
  font-weight: bold;
  border: none;
  background-color: #cccccc;
  cursor: pointer;
}

div#loginPage button:hover {
  background-color: #dddddd;
}

span#user {
  position: absolute;
  top: -40px;
  right: 10px;
  font-weight: bold;
  font-size: small;
  color: gray;
}

button#logout {
  position: absolute;
  top: -20px;
  right: 10px;
  font-weight: bold;
  border: none;
  background-color: #cccccc;
  cursor: pointer;
}

button#logout:hover {
  background-color: #dddddd;
}

div#orgs {
  /*max-width:1200px;*/
  margin: 0 auto;
  padding: 0px;
  margin-bottom: 20px;
  border-top: 1px solid #cccccc;
  /* max-height: 60vh;
  min-height: 300px;
  overflow-y: auto; */
}

div#orgs div.OrgBox {
  padding: 10px;
  margin: 10px;
  text-align: center;
  background-color: white;
  border-bottom: 1px solid #cccccc;
  text-align: left;
}

div#orgs div.OrgBox input {
  border: 1px solid black;
}

div#orgs div.OrgBox input:disabled {
  border: 1px solid transparent;
  border-bottom: 1px dashed #bbbbbb;
  background-color: transparent;
  color: black;
}

input.XLarge {
  font-size: x-large;
  font-weight: bold;
}

input.Long {
  min-width: 300px;
  max-width: 500px;
  width: 66%;
}


input.Short {
  width: 75px;
}

div#orgs div.OrgBox label {
  font-size: small;
  font-weight: bold;
  margin-right: 5px;
}

div#orgs div.OrgBox h5 {
  text-align: left;
  margin: 0;
}

div#orgs div.OrgBox p {
  text-align: left;
  font-family: sans-serif;
  font-size: small
}

div#orgs div.OrgBox button,
div#users button {
  display: block;
  border: none;
  background-color: transparent;
  color: blue;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

div#orgs div.OrgBox li button,
div#users li button {
  display: inline-block;
  margin-left: 10px;
}

div#orgs div.OrgBox button.Inline {
  display: inline-block;
  margin-left: 10px;
}

div#orgs div.OrgBox .LeftMargin {
  margin-left: 25px;
}

div#orgs div.OrgBox label.RightAligned {
  text-align: right;
}

div#orgs div.OrgBox label.Width170 {
  display: inline-block;
  min-width: 170px;
}

div#orgs div.OrgBox .Width110 {
  display: inline-block;
  min-width: 110px;
  width: 110px;
}

div#orgs div.OrgBox .Width130 {
  display: inline-block;
  min-width: 130px;
  width: 130px;
}

div#orgs div.OrgBox button:hover {
  color: gray;
}

div#orgs div.OrgBox button:disabled {
  color: #bbbbbb;
  cursor: initial;
}

div#orgs div.OrgBox ol {
  text-align: left;
  font-size: small
}

div#orgs div.OrgBox code {
  font-family: monospace;
  font-weight: bold;
  font-size: large;
  margin-right: 12px;
}

div#orgs div.OrgBox li.Red {
  background-color: rgb(255, 220, 220);
}

div#orgs div.OrgBox li.Green {
  background-color: rgb(225, 250, 220);
}

button.MainButton {
  width: 300px;
  font-size: x-large;
  padding: 20px;
  font-weight: bold;
  border: none;
  background-color: #cccccc;
  cursor: pointer;
  margin: 20px;
}

button.MainButton:hover {
  background-color: #dddddd;
}

div#footer {
  margin: 0px auto;
  text-align: center;
  background-color: #999999;
  color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
}

a.Weblink {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

a.WeblinkBlack {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

.Hide {
  display: none !important;
}

@media print {

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  button,
  select,
  h1#title,
  span#user,
  div#footer,
  div#appMessagesBox,
  div#orgIndex {
    display: none !important;
  }

  div.OrgBox {
    break-inside: avoid;
  }
}

div.PopupContent {
  background-color: #fefefe;
  /* margin: auto; */
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 30%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
}

button.CloseButton {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
  border: none;
  background-color: white;
}

button.CloseButton:hover,
button.CloseButton:focus {
  color: #bbbbbb;
  text-decoration: none;
  cursor: pointer;
}

div.FieldBox {
  padding: 10px;
}

label.FieldLabel {
  font-size: medium;
  font-weight: bold;
  min-width: 50px;
  display: inline-block;
  text-align: right;
  vertical-align: middle;
}

div.FieldIconBox {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 0;
  background-color: white;
}

img.FieldIcon {
  position: absolute;
  top: 18px;
  left: 5px;
  z-index: -1;
}

img.FieldIconMedium {
  position: absolute;
  top: 12px;
  left: 5px;
  z-index: -1;
}

img.FieldIconSmall {
  position: absolute;
  top: 6px;
  left: 5px;
  z-index: -1;
}

img.FieldIconXSmall {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: -1;
  opacity: .5;
}

input.FieldInput {
  font-size: medium;
  min-width: 200px;
  padding: 5px;
  /* padding-left: 30px; */
  vertical-align: middle;
  border: 1px solid black;
  position: relative;
  background-color: transparent;
  color: black;
}

input.FieldInput#shopFilter {
  max-width: 500px;
  width: 75%;
}

input.FieldInput#emailAddress {
  width: 320px;
}

div#orgIndex {
  text-align: left;
  background-color: #fafafa;
  padding: 10px;
  /* min-height: 250px;
  max-height: 50vh;
  overflow-y: auto; */
}

ol#usersList li {
  margin: 10px 0;
  text-align: left;
}

html {
  scroll-behavior: smooth;
}

button#scrollUp {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 18px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: rgb(187, 187, 187, .7);
  color: white;
  padding: 15px;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

button#scrollUp:hover {
  background-color: rgb(158, 158, 158);
}

button#scrollUp img {
  width: 100%;
  height: 100%;
}

div#licenseGenerator {
  text-align: left;
  margin: 0 auto;
  max-width: 600px;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #cccccc;
}