/*
 * misc
 */

div.footer {
  font-size: 0.7rem;
}

img.result-image {
  background: #ffffff;
}

p.result-text:last-child {
  margin-bottom: 0;
}

span.one-time-code {
  white-space: nowrap;
}

input.one-time-code {
  color: #fff;
  background: #222;
  caret-color: transparent;
  cursor: default;
  width: 40px;
  height: 60px;
  outline: none;
  text-align: center;
}

span.bg-code {
  font-family: monospace;
  color: var( --terminal-green );
  background-color: var( --terminal-background-green );
  --bs-badge-padding-x: 0.4em;
  --bs-badge-padding-y: 0.33em;
}

a.body {
  color: var( --bs-color-body );
}

div.grid-shape {
  position: absolute;
  top: 5px;
  left: 5px;
}

.text-gray {
  color: rgb( 87, 91, 95 );
}

.hints-modal-header {
  border-bottom: var( --bs-modal-header-border-width ) solid var( --bs-modal-header-border-color );
  border-top-left-radius: var( --bs-modal-inner-border-radius );
  border-top-right-radius: var( --bs-modal-inner-border-radius );
  padding: var( --bs-modal-header-padding );
  text-align: center !important;
}

/*
 * clock
 */

.clock-yellow {
  color: #f0f020;
}

.clock-purple {
  color: #f020f0;
}

.clock-red {
  color: #ff0000;
}

.clock-blue {
  color: #0000ff;
}

.clock-green {
  color: #00ff00;
}

.digit-circle {
  display: inline-block;
  width: 2ch;
  text-align: center;
}

/*
 * terminal
 */

div.logo {
  border-radius: 50px;
  font-family: var( --terminal-font );
}

div.logo-large {
  /* fs-1 p-5 */
  padding: 3rem !important;
  font-size: calc( 1.425rem + 2.1vw ) !important;
}

div.logo-small {
  /* fs-3 p-4 */
  padding: 1.5rem !important;
  font-size: calc( 1.325rem + .9vw ) !important;
  border-radius: 30px;
}

div.terminal-support-message {
  border-radius: 50px;
  border-width: 0;
  font-family: var( --terminal-font );
  font-size: var( --terminal-font-size );
}

p.terminal-support-message:last-of-type {
  margin-bottom: 0;
}

div.terminal-screen {
  border-radius: 50px;
  border-width: 0;
  line-height: 21px;
  font-family: var( --terminal-font );
  font-size: var( --terminal-font-size );
  padding: 25px;
  overflow: visible;
  white-space: nowrap;
}

p.terminal-line {
  height: 5px;
  margin-bottom: 16px;
}

p.terminal-line:last-of-type {
  margin-bottom: 18px;
}

p.terminal-line:first-of-type {
  margin-top: -8px;
}

span.terminal-command-line {
  border: none;
  outline: none;
  border: none;
  box-shadow: none;
  height: var( --terminal-command-line-height );
  line-height: 5px;
  border-radius: 0;
  font-size: var( --terminal-font-size );
  position: relative;
  margin-top: var( --terminal-command-margin-top );
  top: var( --terminal-command-top );
}

input.terminal-command-line {
  border: none;
  outline: none;
  border: none;
  box-shadow: none;
  height: var( --terminal-command-line-height );
  border-radius: 0;
  font-size: var( --terminal-font-size );
  margin-top: var( --terminal-command-margin-top );
  top: var( --terminal-command-top );
  left: 1px;
}

div.terminal-command-line-hide {
  opacity: 0;
}

input.terminal-command-line:focus {
  box-shadow: none;
}

div.terminal-shape {
  position: absolute;
  bottom: 38px;
  right: 25px;
  z-index: 1000;
}

/*
 * terminal colors [https://github.com/tonylegrone/terminal-sublime]
 */

:root {
  --terminal-font: "Courier New", Courier, monospace;
  --terminal-font-size: 16px;
  --terminal-command-line-height: 20px;
  --terminal-command-margin-top: -3px;
  --terminal-command-top: 1px;

  --terminal-green: #6cf04c;
  --terminal-background-green: #071404;
  --terminal-selection-green: #1c4811;

  --terminal-orange: #f18a41;
  --terminal-background-orange: #140b03;
  --terminal-selection-orange: #4a2a0d;

  --terminal-purple: #f020f0;
  --terminal-background-purple: #140414;
  --terminal-selection-purple: #511051;

  --terminal-yellow: #f0f020;
  --terminal-background-yellow: #141404;
  --terminal-selection-yellow: #515110;

  --terminal-red: #f04020;
  --terminal-background-red: #140704;
  --terminal-selection-red: #512110;

  --terminal-blue: #a0a0ff;
  --terminal-background-blue: #040414;
  --terminal-selection-blue: #212151;

  --terminal-cyan: #20f0f0;
  --terminal-background-cyan: #041414;
  --terminal-selection-cyan: #105151;

  --terminal-dark: #999999;
  --terminal-background-dark: #000000;
  --terminal-selection-dark: #303030;
}

.terminal-green,.terminal-green:focus,.terminal-green:hover {
  color: var( --terminal-green );
  background: var( --terminal-background-green );
}
.symbol_clip_green {
  fill: var( --terminal-green );
}
.symbol_path_green {
  stroke: var( --terminal-green );
}
.symbol_background_green {
  fill: var( --terminal-background-green );
}
span.terminal-green::selection,input.terminal-green::selection,p.terminal-green::selection,a.terminal-green::selection,div.terminal-green::selection {
  background: var( --terminal-selection-green );
}

.terminal-orange,.terminal-orange:focus,.terminal-orange:hover {
  color: var( --terminal-orange );
  background: var( --terminal-background-orange );
}
.symbol_clip_orange {
  fill: var( --terminal-orange );
}
.symbol_path_orange {
  stroke: var( --terminal-orange );
}
.symbol_background_orange {
  fill: var( --terminal-background-orange );
}
span.terminal-orange::selection,input.terminal-orange::selection,p.terminal-orange::selection,a.terminal-orange::selection,div.terminal-orange::selection {
  background: var( --terminal-selection-orange );
}

.terminal-purple,.terminal-purple:focus,.terminal-purple:hover {
  color: var( --terminal-purple );
  background: var( --terminal-background-purple );
}
.symbol_clip_purple {
  fill: var( --terminal-purple );
}
.symbol_path_purple {
  stroke: var( --terminal-purple );
}
.symbol_background_purple {
  fill: var( --terminal-background-purple );
}
span.terminal-purple::selection,input.terminal-purple::selection,p.terminal-purple::selection,a.terminal-purple::selection,div.terminal-purple::selection {
  background: var( --terminal-selection-purple );
}

.terminal-yellow,.terminal-yellow:focus,.terminal-yellow:hover {
  color: var( --terminal-yellow );
  background: var( --terminal-background-yellow );
}
.symbol_clip_yellow {
  fill: var( --terminal-yellow );
}
.symbol_path_yellow {
  stroke: var( --terminal-yellow );
}
.symbol_background_yellow {
  fill: var( --terminal-background-yellow );
}
span.terminal-yellow::selection,input.terminal-yellow::selection,p.terminal-yellow::selection,a.terminal-yellow::selection,div.terminal-yellow::selection {
  background: var( --terminal-selection-yellow );
}

.terminal-red,.terminal-red:focus,.terminal-red:hover {
  color: var( --terminal-red );
  background: var( --terminal-background-red );
}
.symbol_clip_red {
  fill: var( --terminal-red );
}
.symbol_path_red {
  stroke: var( --terminal-red );
}
.symbol_background_red {
  fill: var( --terminal-background-red );
}
span.terminal-red::selection,input.terminal-red::selection,p.terminal-red::selection,a.terminal-red::selection,div.terminal-red::selection {
  background: var( --terminal-selection-red );
}

.terminal-blue,.terminal-blue:focus,.terminal-blue:hover {
  color: var( --terminal-blue );
  background: var( --terminal-background-blue );
}
.symbol_clip_blue {
  fill: var( --terminal-blue );
}
.symbol_path_blue {
  stroke: var( --terminal-blue );
}
.symbol_background_blue {
  fill: var( --terminal-background-blue );
}
span.terminal-blue::selection,input.terminal-blue::selection,p.terminal-blue::selection,a.terminal-blue::selection,div.terminal-blue::selection {
  background: var( --terminal-selection-blue );
}

.terminal-cyan,.terminal-cyan:focus,.terminal-cyan:hover {
  color: var( --terminal-cyan );
  background: var( --terminal-background-cyan );
}
.symbol_clip_cyan {
  fill: var( --terminal-cyan );
}
.symbol_path_cyan {
  stroke: var( --terminal-cyan );
}
.symbol_background_cyan {
  fill: var( --terminal-background-cyan );
}
span.terminal-cyan::selection,input.terminal-cyan::selection,p.terminal-cyan::selection,a.terminal-cyan::selection,div.terminal-cyan::selection {
  background: var( --terminal-selection-cyan );
}

.terminal-dark,.terminal-dark:focus,.terminal-dark:hover {
  color: var( --terminal-dark );
  background: var( --terminal-background-dark );
}
.symbol_clip_dark {
  fill: var( --terminal-dark );
}
.symbol_path_dark {
  stroke: var( --terminal-dark );
}
.symbol_background_dark {
  fill: var( --terminal-background-dark );
}
span.terminal-dark::selection,input.terminal-dark::selection,p.terminal-dark::selection,a.terminal-dark::selection,div.terminal-dark::selection {
  background: var( --terminal-selection-dark );
}

a.terminal-green,a.terminal-orange,a.terminal-purple,a.terminal-yellow,a.terminal-red,a.terminal-blue,a.terminal-cyan,a.terminal-dark {
  text-decoration: none;
}
a.terminal-green:hover,a.terminal-orange:hover,a.terminal-purple:hover,a.terminal-yellow:hover,a.terminal-red:hover,a.terminal-blue:hover,a.terminal-cyan:hover,a.terminal-dark:hover {
  text-decoration: none;
  border-bottom: 1px solid;
}
a.terminal-green:hover {
  border-bottom-color: var( --terminal-green );
}
a.terminal-orange:hover {
  border-bottom-color: var( --terminal-orange );
}
a.terminal-purple:hover {
  border-bottom-color: var( --terminal-purple );
}
a.terminal-yellow:hover {
  border-bottom-color: var( --terminal-yellow );
}
a.terminal-red:hover {
  border-bottom-color: var( --terminal-red );
}
a.terminal-blue:hover {
  border-bottom-color: var( --terminal-blue );
}
a.terminal-cyan:hover {
  border-bottom-color: var( --terminal-cyan );
}
a.terminal-dark:hover {
  border-bottom-color: var( --terminal-dark );
}
a.no-border-bottom:hover {
  border-bottom: none;
}
span.cursor-pointer:hover {
  cursor: pointer;
}

/*
 * typing throbber
 */

div.typing {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  animation: typing 1.5s infinite;
  animation-fill-mode: both;
  animation-delay: 0.2s;
}
div.typing::before,div.typing::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  animation: typing 1.5s infinite;
  animation-fill-mode: both;
}
div.typing::before {
  left: -15px;
  animation-delay: 0s;
}
div.typing::after {
  left: 15px;
  animation-delay: 0.4s;
}

@keyframes typing {
  0% {
    background-color: rgba( 173, 181, 189, 0.2 );
  }
  20% {
    background-color: rgba( 173, 181, 189, 1.0 );
  }
  100% {
    background-color: rgba( 173, 181, 189, 0.2 );
  }  
}


/*
 * certificate
 */

@media print {
  @page {
    size: landscape;
  }

  body {
    background-color: white;
  }

  .display-media-screen {
    display: none;
  }
  .nav-pills {
    display: none;
  }
  .display-media-print {
    display: block !important;
  }
}

.display-media-print {
  display: none;
}

.certificate-container {
  color: black;
  background: white;
  font-family: Georgia, serif;
  font-size: 24px;
  text-align: center;
  border: 10px double #00683d;
  border-radius: 40px;
  background-image: url( '/dist/knuth/certificate_background.svg' );
  print-color-adjust: exact !important;                
  -webkit-print-color-adjust: exact !important;
}
.certificate-title {
  font-size: 32px;
}
.certificate-marquee {
  color: #9b7c4c;
  font-size: 64px;
}
.certificate-user {
  font-size: 36px;
  font-style: italic;
}
.certificate-stars {
  font-size: 64px;
  color: #9b7c4c;
}