html {
  color-scheme: dark;
  --ondroid-primary: #00ff01;
  /* --mdc-theme-primary: #ff3e00; */
  /* --mdc-theme-secondary: #434345; */
  /* --mdc-theme-background: #fff; */
  --active-border: #d0d0d0;
  --default-border: #4a4a4a;
  --mdc-on-surface: #212125;
  --muted-text: rgb(136, 136, 136)
}

body {
  background: #000;
  margin: 0 !important;
  font-family: "Roboto Mono";
}

.full {
  width: 1000px;
  margin: unset;
}

@media (width <=840px) {
  .hide-on-tablet {
    display: none !important;
  }
}

@media (width <=600px) {
  .full {
    width: unset;
  }

  .hide-on-mobile {
    display: none !important;
  }
}

.hide-on-mobile,
.hide-on-tablet {
  display: block;
}

.codemirror-wrapper {
  /* height: 100%; */
}

.mdc-card {
  overflow: hidden;
}

#assignment p img {
  width: auto;
  float: left;
  max-width: 600px;
  margin: auto;
}
#assignment table {
  width: auto;
  border-collapse: collapse;
}
#assignment table th {
  font-weight: bold;
}
#assignment table td,
th {
  border: 1px solid #fff;
  padding: 8px;
  white-space: nowrap;
}

#assignment pre code {
  white-space: pre-wrap;
  width: 100%;
}

#assignment p {
  overflow-wrap: break-word;
}

.smui-button--color-secondary:not(:disabled):hover .mdc-button__icon {
  color: #ff3e00;
}

.mdc-button.smui-button--color-secondary:hover {
  color: #ff3e00;
}

button[disabled] {
  pointer-events: auto !important;
  cursor: not-allowed !important;
}

button.mdc-button:focus {
  outline: 1px solid #ff3e00;
}
button.custom[disabled] {
  color: var(--default-border);
  border: 1px solid transparent;
}
button.custom:hover[disabled] {
  border: 1px solid transparent;
}
button.custom {
  color: var(--ondroid-primary);
  text-transform: uppercase;
  border: 1px solid transparent;
  background: none;
  font-weight: bold;
  cursor: pointer;
  padding: 0.25rem;
}
button.custom:hover {
  border: 1px solid var(--ondroid-primary);
  border-radius: 0.25rem;
}
.lang-badge {
  background: var(--active-border);
  color: var(--mdc-on-surface);
  padding: 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  margin-right: 0.5rem;
  font-weight: bold;
}
button[type="submit"].custom {
  background: var(--mdc-on-surface);
  border-color: var(--mdc-on-surface);
  padding: 0.5rem 1rem;
}
button[type="submit"].custom:hover {
  background: var(--default-border) !important;
  border-color: var(--default-border);
}

.input-field {
  position: relative;
  height: 3rem;
}
.input-field div {
  position: absolute;
  top: -1rem;
  transition: font-size 0.3s ease;
}
.input-field input {
  background: none;
  border: none;
  font-size: 1rem;
  border-bottom: 1px solid var(--default-border);
  padding: 0.25rem;
  outline: none;
  width: 100%;
}
.input-field input:hover {
  border-bottom: 1px solid var(--active-border);
}
.input-field input:active {
  border-bottom: 1px solid var(--ondroid-primary);
}
.input-field input:not(:placeholder-shown) + div,
.input-field input:focus + div {
  font-size: 0.8rem;
  margin-top: -0.25rem;
  color: var(--active-border);
}