.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--textColorHeadline);
}

h1 { font-size: 20px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 15px; }
h5 { font-size: 14px; }
h6 { font-size: 20px; }

td {
  text-align: left;
  height: 25px;
}

label {
  display: inline-block;
  max-width: 100%;
  font-size: var(--fontSizeForms);
  font-weight: 400;
}

body select {
  padding: 5px 10px;
  width: calc(100% + 25px);
}

input[type="file"] {
  display: none;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

textarea,
select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="datetime-local"],
input[type="password"] {
  width: 100%;
  padding: 6px 12px;
  font-size: var(--fontSizeForms);
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--borderColorInput);
  background-color: var(--backgroundColorInput);
  color: var(--colorInput);
  font-family: Arial, Helvetica, sans-serif;
}

textarea::placeholder,
input::placeholder {
  color: rgba(148, 163, 184, 0.5);
}

input[type="number"],
input[type="datetime-local"] {
  text-align: right;
  padding-right: 12px;
}

textarea {
  width: calc(100% - 30px) !important;
}

.input-type-file,
button,
.button {
  display: inline-block;
  cursor: pointer;
  padding: 6px 12px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  font-size: var(--fontSizeForms);
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  background-color: transparent;
  color: #333;
}

button.help {
  color: var(--textColorHeadline);
  font-size: 17px;
  font-family: Orbitron;
  width: 30px;
  height: 30px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--textColorHeadline);
  border-radius: 4px;
  opacity: 0.5;
  padding-top: 3px;
  padding-left: 9px;
}

button.default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.disabled,
input[disabled],
button[disabled] {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: .65;
}

.primary {
  color: #fff;
  background-color: var(--backgroundColorPrimary);
  border-color: var(--borderColorPrimary);
}

.primarey-text {
  color: var(--backgroundColorPrimary);
}

.success {
  color: #fff;
  background-color: var(--backgroundColorSuccess);
  border-color: var(--borderColorSuccess);
}

.success-text {
  color: var(--backgroundColorSuccess);
}

.info {
  color: #fff;
  background-color: var(--backgroundColorInfo);
  border-color: var(--borderColorInfo);
}

.info-text {
  color: var(--backgroundColorInfo);
}

.warning {
  color: #fff;
  background-color: var(--backgroundColorWarning);
  border-color: var(--borderColorWarning);
}

.warning-text {
  color: var(--backgroundColorWarning);
}

.danger {
  color: #fff;
  background-color: var(--backgroundColorDanger);
  border-color: var(--borderColorDanger);
}

.danger-text {
  color: var(--backgroundColorDanger);
}

.form-error {
  box-shadow: 0px 0px 5px 2px var(--backgroundColorDanger);
}

.form-warning {
  box-shadow: 0px 0px 5px 2px var(--backgroundColorWarning);
}

.form-success {
  box-shadow: 0px 0px 5px 2px var(--backgroundColorSuccess);
}

.form-info {
  box-shadow: 0px 0px 5px 2px var(--backgroundColorInfo);
}

.my-account-image {
  width: 160px !important;
  height: 160px !important;
}

.game-image-gallery-image {
  width: 184px !important;
  height: 184px !important;
}

#debug-console {
  position: sticky !important;
  top: 100px !important;
  text-align: left !important;
  z-index: 9000 !important;
  width: 350px !important;
  height: calc(100vh - 100px);
  background-color: #003 !important;
  color: #fff !important;
  margin: 0 auto !important;
  font-size: 16px !important;
  overflow: hidden !important;
  padding: 5px !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px var(--boxShadowColor);
}