@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

:root {

  --color-saturation: 85%;

  --color-lightness: 49%;
  --color-lightness-lighter: 59%;
  --color-lightness-lightest: 79%;
  --color-lightness-darker: 39%;
  --color-lightness-darkest: 19%;

  --base-color: hsla(229, var(--color-saturation), var(--color-lightness), 1);
  --base-color-lighter: hsla(229, var(--color-saturation), var(--color-lightness-lighter), 1);
  --base-color-lightest: hsla(229, var(--color-saturation), var(--color-lightness-lightest), 1);
  --base-color-darker: hsla(229, var(--color-saturation), var(--color-lightness-darker), 1);
  --base-color-darkest: hsla(229, var(--color-saturation), var(--color-lightness-darkest), 1);

  --color-1: hsla(155, var(--color-saturation), var(--color-lightness), 1);
  --color-1-lighter: hsla(155, var(--color-saturation), var(--color-lightness-lighter), 1);
  --color-1-lightest: hsla(155, var(--color-saturation), var(--color-lightness-lightest), 1);
  --color-1-darker: hsla(155, var(--color-saturation), var(--color-lightness-darker), 1);
  --color-1-darkest: hsla(155, var(--color-saturation), var(--color-lightness-darkest), 1);

  --color-2: hsla(52, var(--color-saturation), var(--color-lightness), 1);
  --color-2-lighter: hsla(52, var(--color-saturation), var(--color-lightness-lighter), 1);
  --color-2-lightest: hsla(52, var(--color-saturation), var(--color-lightness-lightest), 1);
  --color-2-darker: hsla(52, var(--color-saturation), var(--color-lightness-darker), 1);
  --color-2-darkest: hsla(52, var(--color-saturation), var(--color-lightness-darkest), 1);

  --color-3: hsla(276, var(--color-saturation), var(--color-lightness), 1);
  --color-3-lighter: hsla(276, var(--color-saturation), var(--color-lightness-lighter), 1);
  --color-3-lightest: hsla(276, var(--color-saturation), var(--color-lightness-lightest), 1);
  --color-3-darker: hsla(276, var(--color-saturation), var(--color-lightness-darker), 1);
  --color-3-darkest: hsla(276, var(--color-saturation), var(--color-lightness-darkest), 1);

  --color-4: hsla(340, var(--color-saturation), calc(var(--color-lightness) - 15%), 1);
  --color-4-lighter: hsla(340, var(--color-saturation), calc(var(--color-lightness-lighter) - 15%), 1);
  --color-4-lightest: hsla(340, var(--color-saturation), calc(var(--color-lightness-lightest) - 15%), 1);
  --color-4-darker: hsla(340, var(--color-saturation), calc(var(--color-lightness-darker) - 15%), 1);
  --color-4-darkest: hsla(340, var(--color-saturation), calc(var(--color-lightness-darkest) - 15%), 1);

  --color-light: hsla(208, 55%, 87%, 1);
  --color-light-lighter: hsla(208, 55%, 92%, 1);
  --color-light-darker: hsla(208, 55%, 82%, 1);

  --color-grey: hsla(208, 15%, 70%, 1);
  --color-grey-lighter: hsla(208, 15%, 90%, 1);
  --color-grey-darker: hsla(208, 15%, 50%, 1);

  --color-dark: hsla(214, 79%, 13%, 1);
  --color-dark-lighter: hsla(214, 79%, 18%, 1);
  --color-dark-darker: hsla(214, 79%, 8%, 1);

  --border-light: hsla(0deg, 0%, 100%, 75%);
  --side-light: hsla(0deg, 0%, 100%, 50%);
  --shadow-color: hsla(0deg, 0%, 0%, 25%);
  --lighter: hsla(0, 0%, 100%, 0.2);
  --important-outline: 3px solid #ffffff40;

  --accent-color: hsla(170, 85%, 59%, 1);
  --accent-color-lighter: hsla(170, 85%, 69%, 1);
  --accent-color-lightest: hsla(170, 85%, 89%, 1);
  --accent-color-darker: hsla(170, 85%, 49%, 1);
  --accent-color-darkest: hsla(170, 85%, 29%, 1);

  --accent-color-2: hsla(305, 85%, 59%, 1);
  --accent-color-2-lighter: hsla(305, 85%, 69%, 1);
  --accent-color-2-lightest: hsla(305, 85%, 89%, 1);
  --accent-color-2-darker: hsla(305, 85%, 49%, 1);
  --accent-color-2-darkest: hsla(305, 85%, 29%, 1);

  --colision-border: .05em solid var(--accent-color-2-darker);
  --colision-shadow-color: var(--accent-color-2);

  --robot-up: url("data:image/svg+xml,%3Csvg width='92' height='82' viewBox='0 0 92 82' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d)'%3E%3Cpath d='M37.6072 19.517C41.5484 13.4325 50.4519 13.4326 54.3932 19.517L72.6511 47.7034C76.9609 54.3567 72.1854 63.14 64.2581 63.14H27.7422C19.815 63.14 15.0394 54.3567 19.3492 47.7033L37.6072 19.517Z' fill='%234C5A67'/%3E%3Cpath d='M44.3209 19.595C45.109 18.377 46.891 18.377 47.6791 19.595L55.3019 31.3757C56.0948 32.6011 55.3505 34.2356 53.9056 34.4421L51.4008 34.7999C50.5614 34.9198 49.8888 35.5561 49.7225 36.3876L47.9612 45.1942C47.5324 47.3379 44.4676 47.3379 44.0388 45.1942L42.2775 36.3876C42.1112 35.5561 41.4386 34.9198 40.5992 34.7999L38.0944 34.4421C36.6495 34.2356 35.9052 32.6011 36.6981 31.3757L44.3209 19.595Z' fill='%23F3F8FC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.8547 46.9227L19.349 47.7033C15.0392 54.3567 19.8148 63.14 27.742 63.14H64.2579C72.1852 63.14 76.9607 54.3567 72.651 47.7033L72.1456 46.9231C71.2408 51.2943 67.4439 54.94 62.3356 54.94H29.6647C24.5562 54.94 20.7593 51.2941 19.8547 46.9227405Z' fill='%23364049' fill-opacity='1.0'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='0' y='0' width='92' height='86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat center;
  --robot-down: url("data:image/svg+xml,%3Csvg width='92' height='82' viewBox='0 0 92 82' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d)'%3E%3Cpath d='M54.7132 65.483C50.7719 71.5675 41.8684 71.5674 37.9271 65.483L19.6692 37.2966C15.3594 30.6433 20.1349 21.86 28.0622 21.86L64.5781 21.86C72.5053 21.86 77.2809 30.6433 72.9711 37.2967L54.7132 65.483Z' fill='%234C5A67'/%3E%3Cpath d='M47.6791 55.405C46.891 56.623 45.109 56.623 44.3209 55.405L36.6981 43.6243C35.9052 42.3989 36.6495 40.7644 38.0944 40.5579L40.5992 40.2001C41.4386 40.0802 42.1112 39.4439 42.2775 38.6124L44.0388 29.8058C44.4676 27.6621 47.5324 27.6621 47.9612 29.8058L49.7225 38.6124C49.8888 39.4439 50.5614 40.0802 51.4008 40.2001L53.9056 40.5579C55.3505 40.7644 56.0948 42.3989 55.3019 43.6243L47.6791 55.405Z' fill='%23F3F8FC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.9273 65.483C41.8686 71.5674 50.7721 71.5674 54.7133 65.483L72.9713 37.2966C75.1793 33.888 75.0026 29.9202 73.2392 26.8609C73.1542 27.0071 73.065 27.1523 72.9716 27.2966L54.7136 55.4829C50.7724 61.5674 41.8689 61.5674 37.9276 55.4829L19.6697 27.2966C19.5761 27.1522 19.4868 27.0067 19.4018 26.8604C17.6381 29.9198 17.4612 33.8877 19.6694 37.2966L37.9273 65.483405Z' fill='%23364049' fill-opacity='1.0'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='0' y='0' width='92' height='86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat center;
  --robot-left: url("data:image/svg+xml,%3Csvg width='92' height='82' viewBox='0 0 92 82' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d)'%3E%3Cpath d='M24.5171 49.393C18.4326 45.4518 18.4326 36.5483 24.5171 32.607L52.7034 14.349C59.3568 10.0393 68.1401 14.8148 68.1401 22.7421V59.2579C68.1401 67.1852 59.3568 71.9608 52.7034 67.651L24.5171 49.393Z' fill='%234C5A67'/%3E%3Cpath d='M28.595 34.3209C27.377 35.109 27.377 36.891 28.595 37.6791L40.3757 45.3019C41.6011 46.0948 43.2356 45.3505 43.4421 43.9056L43.7999 41.4008C43.9198 40.5614 44.5561 39.8888 45.3876 39.7225L54.1942 37.9612C56.3379 37.5324 56.3379 34.4676 54.1942 34.0388L45.3876 32.2775C44.5561 32.1112 43.9198 31.4386 43.7999 30.5992L43.4421 28.0944C43.2356 26.6495 41.6011 25.9052 40.3757 26.6981L28.595 34.3209Z' fill='%23F3F8FC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.2915 33.5369C18.4644 37.811 18.8728 45.737 24.517 49.393L52.7033 67.6509C59.3567 71.9607 68.1399 67.1852 68.1399 59.2579V51.9682C66.9188 58.7877 58.9571 62.5185 52.8319 58.5181L27.8197 42.1827C24.7124 40.1534 23.203 36.8266 23.2915 33.5369405Z' fill='%23364049' fill-opacity='1.0'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='0' y='0' width='92' height='86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat center;
  --robot-right: url("data:image/svg+xml,%3Csvg width='92' height='82' viewBox='0 0 92 82' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d)'%3E%3Cpath d='M67.4829 49.393C73.5674 45.4518 73.5674 36.5483 67.4829 32.607L39.2966 14.349C32.6432 10.0393 23.8599 14.8148 23.8599 22.7421L23.8599 59.2579C23.8599 67.1852 32.6432 71.9608 39.2966 67.651L67.4829 49.393Z' fill='%234C5A67'/%3E%3Cpath d='M63.405 34.3209C64.623 35.109 64.623 36.891 63.405 37.6791L51.6243 45.3019C50.3989 46.0948 48.7644 45.3505 48.5579 43.9056L48.2001 41.4008C48.0802 40.5614 47.4439 39.8888 46.6124 39.7225L37.8058 37.9612C35.6621 37.5324 35.6621 34.4676 37.8058 34.0388L46.6124 32.2775C47.4439 32.1112 48.0802 31.4386 48.2001 30.5992L48.5579 28.0944C48.7644 26.6495 50.3989 25.9052 51.6243 26.6981L63.405 34.3209Z' fill='%23F3F8FC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M68.7085 33.5369C73.5356 37.811 73.1272 45.737 67.483 49.393L39.2967 67.6509C32.6433 71.9607 23.8601 67.1852 23.8601 59.2579V51.9682C25.0812 58.7877 33.0429 62.5185 39.1681 58.5181L64.1803 42.1827C67.2876 40.1534 68.797 36.8266 68.7085 33.5369405Z' fill='%23364049' fill-opacity='1.0'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d' x='0' y='0' width='92' height='86' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat center;
}

/* BASIC */

*:focus {
  outline: 2px solid #ffffff40!important;
}

.disabled, :disabled {
  cursor: not-allowed;
}

body {
  font-family: 'Ubuntu Mono', monospace;
  color: var(--color-light);
  background-color: var(--color-dark);
}

.no-monospace {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

/* Ugly */
a:not(.btn):not(.play-now-button) {
  color: var(--color-light)!important;
}

/* BACKGROUND */

#bg-grid, #bg-gradient {
  position:fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#bg-grid {
  background-image: url("/static/img/bg_tile.svg");
  background-repeat: repeat;
  opacity: 0.15;
}

#bg-gradient {
  background-color: var(--base-color-darkest);
}

/* PUZZLE */

/* #puzzle {
  color: var(--color-light-lighter);
} */

#puzzle > div.row > div:nth-child(1),
#puzzle > div.row > div:nth-child(2) {
  min-height: 25vh;
}

@media (min-width: 768px) {

  #puzzle > div.row > div:nth-child(1),
  #puzzle > div.row > div:nth-child(2) {
    min-height: 50vh;
  }

}

/* TERMINAL */

/* #player-leaderboard {
  max-height: 49vh;
} */

.terminal {
  border: 1px solid var(--color-light-darker);
  background-color: var(--base-color-darkest);
  color: var(--color-grey-lighter);
  font-size: .8em;
  /* overflow-y: hidden; */
}

.terminal-head {
  background-color: var(--color-light-darker);
  color: var(--color-dark-lighter);
  font-weight: bold;
}

#player-leaderboard .terminal {
  height: 100%;
}

#player-leaderboard .terminal-body {
  height: 100%;
  /* overflow-y: scroll; */
}

.terminal-body table.leaderboard {
  width: 100%;
}

.terminal-body table.leaderboard tr:nth-child(2n+0) {
  background-color: #ffffff20;
}

.terminal-body table.leaderboard tr.leaderboard-highlight {
  background-color: var(--accent-color-darkest);
  color: var(--color-light);
}

#player-leaderboard .terminal-body table.leaderboard tr.leaderboard-highlight {
  background-color: var(--accent-color-darkest);
  color: var(--color-light);
}

#performance .terminal-body table.leaderboard tr.leaderboard-highlight {
  background-color: var(--accent-color-2-darkest);
  color: var(--color-light);
}

.terminal-body table.leaderboard td {
  padding: 0px 1ch;
}

#performance .progress {
  border-radius: 0px;
  background-color: var(--lighter);
  height: 1.25rem;
  font-size: 1rem;
}

.progress.performance-bar .progress-bar {
  background-color: var(--accent-color-2-darker);
}

.progress.completion-bar .progress-bar {
  background-color: var(--accent-color-darker);
}

.progress-value {
  font-weight: bold;
  color: var(--color-light-lighter);
  font-size: 1.75rem;
  line-height: 1.75rem!important;
}

.progress-label {
  color: var(--color-light-darker);
  font-size: .8em;
}

/* NAVBAR */

.puzzle-navbar {
  color: var(--color-light-lighter);
  padding: 0.25rem 0rem;
}

.puzzle-navbar-title a, .puzzle-navbar-links a {
  color: var(--color-light-lighter)!important;
}

.puzzle-navbar-title {
  font-style: italic;
  font-size: 18px;
}

.puzzle-navbar-name {
  font-size: 28px!important;
  font-weight: bold;
  text-decoration: none;
}

.puzzle-navbar-name {
  text-decoration: none!important;
}

.puzzle-navbar-links > a {
  padding: 0rem .5rem;
  opacity: 0.75;
  font-weight: normal;
}

.puzzle-navbar-links > a:hover:not(:disabled):not(.disabled),
.puzzle-navbar-links > a:active {
  opacity: 1;
}

.puzzle-navbar-links .fa {
  font-size: 0.9em;
}

.navbar-star-counter,
.navbar-streak-counter {
  font-size: 1.5em;
  font-weight: bold;
}

.navbar-star-counter .fa,
.navbar-streak-counter .fa {
  font-size: 0.9em;
}

.navbar-streak-counter {
  /* opacity: .5; */
  color: var(--color-grey-darker);
}

/* CONRTOL */

.control-label, .sequence-label {
  color: var(--color-light-darker);
  background-color: var(--base-color-darkest);
  border: .1rem solid var(--color-light-darker);
  box-shadow: 0px 2px var(--color-grey), 0px 3px var(--shadow-color);
}

.control-label {
  font-size: 14px;
  padding: .25rem 2rem .25rem 2rem;
  font-weight: bold;
}

.sequence-label {
  display: inline-block;
  width: 40px;
  height: 39px;
  font-size: 24px;
  font-weight: normal;
  text-align: center;
}

.command-button, .sequence-button, .change-puzzle-button {
  border-radius: 0px;
  border: none;
  background-color: var(--color-light-lighter);
  box-shadow: 0px 5px var(--color-light-darker), 0px 7px var(--shadow-color);
  font-size: 24px;
  color: var(--color-dark-lighter);
  margin-bottom: .5rem;
}

/* ----- */

.command-button,
.sequence-button,
.change-puzzle-button,
.run-button,
.success-button {
  border-radius: 4px;
}

.command-button:focus,
.sequence-button:focus,
.change-puzzle-button:focus,
.run-button:focus,
.success-button:focus {
  outline: none!important;
}

.command-button:not(.selected):hover:not(:active)::before {
  height: calc(100% + 5px)!important;
}

body:not(.running) .command-button:hover:not(:disabled):not(.disabled):not(:active)::before,
body:not(.running) .sequence-button:hover:not(:disabled):not(.disabled):not(:active)::before,
.change-puzzle-button:hover:not(:disabled):not(.disabled):not(:active)::before,
.run-button:hover:not(:disabled):not(.disabled)::before,
.success-button:hover:not(:disabled):not(.disabled)::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  right: 0px;
  border-radius: 3px;
}

.command-button:hover:not(:active)::before,
.change-puzzle-button:hover:not(:active)::before {
  background-color: hsla(0deg, 0%, 100%, 30%);;
}

.sequence-button:hover:not(:active)::before,
.run-button:hover::before,
.success-button:hover::before {
  background-color: hsla(0deg, 0%, 0%, 12.5%);
}

.sequence-button:not(.selected):hover:not(:active)::before {
  height: calc(100% + 7px)!important;
}

/* ----- */

body.running .sequence-button {
  box-shadow: 0px 3px var(--color-light-darker), 0px 4px var(--shadow-color)!important;
  transform: translateY(2px);
}

body.running .sequence-button[data-command=paint-green] {
  box-shadow: 0px 3px var(--color-1), 0px 4px var(--shadow-color);
}

body.running .sequence-button[data-command=paint-yellow] {
  box-shadow: 0px 3px var(--color-2), 0px 4px var(--shadow-color);
}

body.running .sequence-button[data-command=paint-purple] {
  box-shadow: 0px 3px var(--color-3), 0px 4px var(--shadow-color);
}

body.running .sequence-button[data-command=paint-red] {
  box-shadow: 0px 3px var(--color-4), 0px 4px var(--shadow-color);
}

button[data-color=green] {
  background-color: var(--color-1-lightest);
  box-shadow: 0px 5px var(--color-1), 0px 7px var(--shadow-color);
}

button[data-color=yellow] {
  background-color: var(--color-2-lightest);
  box-shadow: 0px 5px var(--color-2), 0px 7px var(--shadow-color);
}

button[data-color=purple] {
  background-color: var(--color-3-lightest);
  box-shadow: 0px 5px var(--color-3), 0px 7px var(--shadow-color);
}

button[data-color=red] {
  background-color: var(--color-4-lightest);
  box-shadow: 0px 5px var(--color-4), 0px 7px var(--shadow-color);
}

button[data-command=paint-green] {
  color: var(--color-dark-lighter);
  box-shadow: 0px 5px var(--color-1-lighter), 0px 7px var(--shadow-color);
}

button[data-command=paint-yellow] {
  color: var(--color-dark-lighter);
  box-shadow: 0px 5px var(--color-2-lighter), 0px 7px var(--shadow-color);
}

button[data-command=paint-purple] {
  color: var(--color-dark-lighter);
  box-shadow: 0px 5px var(--color-3-lighter), 0px 7px var(--shadow-color);
}

button[data-command=paint-red] {
  color: var(--color-dark-lighter);
  box-shadow: 0px 5px var(--color-4-lighter), 0px 7px var(--shadow-color);
}

button[data-command=none] {
  color: var(--color-grey-darker);
}

button.command-button[data-command=paint-green]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-1-lighter), 0px 9px var(--shadow-color);
}

button.command-button[data-command=paint-yellow]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-2-lighter), 0px 9px var(--shadow-color);
}

button.command-button[data-command=paint-purple]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-3-lighter), 0px 9px var(--shadow-color);
}

button.command-button[data-command=paint-red]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-4-lighter), 0px 9px var(--shadow-color);
}

button.sequence-button[data-command=paint-green]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-1-lighter);
}

button.sequence-button[data-command=paint-yellow]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-2-lighter);
}

button.sequence-button[data-command=paint-purple]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-3-lighter);
}

button.sequence-button[data-command=paint-red]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-4-lighter);
}

.sequence-button[data-command=paint-green] + div.dropdown-content .command-button[data-color=green],
.sequence-button[data-command=paint-yellow] + div.dropdown-content .command-button[data-color=yellow],
.sequence-button[data-command=paint-red] + div.dropdown-content .command-button[data-color=red],
.sequence-button[data-command=paint-purple] + div.dropdown-content .command-button[data-color=purple] {
  display: none;
}

.sequence-button.selected, .sequence-button.selected:focus {
  outline: 5px dashed var(--accent-color-2-darker)!important;
  outline-offset: 1.5px;
  box-shadow: 0px 0px 20px var(--accent-color-2-lighter)!important;
}

.change-puzzle-button {
  width: 5em;
  font-weight: bold;
}

.change-puzzle-button .fa {
  font-size: 0.85em;
}

.change-puzzle-button:hover:not(:disabled):not(.disabled) {
  transform: translateY(-1px);
  box-shadow: 0px 5px var(--color-light-darker), 0px 8px var(--shadow-color);
}

.command-button:disabled, .sequence-button:disabled, .change-puzzle-button:disabled,
.command-button.disabled, .sequence-button.disabled, .change-puzzle-button.disabled {
  transform: translateY(2px);
  background-color: var(--color-grey);
  box-shadow: 0px 3px var(--color-grey-darker), 0px 4px var(--shadow-color);
  color: var(--color-grey-darker);
}

.command-button:active:not(:disabled):not(.disabled),
.change-puzzle-button:active:not(:disabled):not(.disabled),
body:not(.running) .sequence-button:active:not(:disabled):not(.disabled) {
  background-color: var(--color-grey)!important;
  box-shadow: none!important;
}

.command-button:active:not(:disabled):not(.disabled),
.change-puzzle-button:active:not(:disabled):not(.disabled) {
  transform: translateY(5px)!important;
}

body:not(.running) .sequence-button:active:not(:disabled):not(.disabled) {
  transform: translateY(7px)!important;
}

.command-button, .sequence-button {
  width: 40px;
  height: 39px;
}

.command-button:hover:not(:disabled):not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0px 5px var(--color-light-darker), 0px 9px var(--shadow-color);
}

.command-button[data-color=green]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-1), 0px 9px var(--shadow-color);
}

.command-button[data-color=yellow]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-2), 0px 9px var(--shadow-color);
}

.command-button[data-color=purple]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-3), 0px 9px var(--shadow-color);
}

.command-button[data-color=red]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-4), 0px 9px var(--shadow-color);
}

.sequence-button[data-color=green]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-1);
}

.sequence-button[data-color=yellow]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-2);
}

.sequence-button[data-color=purple]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-3);
}

.sequence-button[data-color=red]:hover:not(:disabled):not(.disabled) {
  box-shadow: 0px 5px var(--color-4);
}

.sequence-button:hover:not(:disabled):not(.disabled) {
  transform: translateY(2px);
  box-shadow: 0px 5px var(--color-light-darker);
}

/* .command-button:focus, .sequence-button:focus, .change-puzzle-button:focus {
  outline: var(--important-outline)!important;
} */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  width: 184px;
  display: none;
  position: absolute;
  z-index: 1;
  top: 34px;
  padding-top: 15px;
}

.dropdown.dropup .dropdown-content, .dropup .dropdown .dropdown-content {
  top: -49px;
  padding-top: 0px;
}

body:not(.touch) .dropdown.dropup .dropdown-content,
body:not(.touch) .dropup .dropdown .dropdown-content {
  padding-bottom: 15px;
}

.dropdown-content > *:last-child {
  margin-right: 0px!important;
}

.dropdown .sequence-button[data-color=none] + div.dropdown-content .command-button[data-color=none] { display: none; }
.dropdown .sequence-button[data-color=green] + div.dropdown-content .command-button[data-color=green] { display: none; }
.dropdown .sequence-button[data-color=yellow] + div.dropdown-content .command-button[data-color=yellow] { display: none; }
.dropdown .sequence-button[data-color=red] + div.dropdown-content .command-button[data-color=red] { display: none; }
.dropdown .sequence-button[data-color=purple] + div.dropdown-content .command-button[data-color=purple] { display: none; }

.dropdown.dropleft-2 .dropdown-content {
  left: -48px;
}

.dropdown.dropleft-3 .dropdown-content {
  left: -96px;
}

.dropdown.dropleft-4 .dropdown-content {
  left: -144px;
}

.dropdown.dropleft-2 .sequence-button[data-command|=paint] + div.dropdown-content {
  left: 0px;
}

.dropdown.dropleft-3 .sequence-button[data-command|=paint] + div.dropdown-content {
  left: -48px;
}

.dropdown.dropleft-4 .sequence-button[data-command|=paint] + div.dropdown-content {
  left: -96px;
}

.dropdown-content button {
  display: inline-block;
  margin-bottom: 5px;
}

body.touch:not(.running) .dropdown:not(:disabled):not(.disabled) > button.sequence-button.selected:not([data-command=none]):not(.disabled):not(:disabled) + div.dropdown-content {
  display: block;
}

body.touch:not(.running) .dropdown:not(:disabled):not(.disabled) > button.sequence-button.selected:not([data-command=none]):not(.disabled):not(:disabled) {
  position: relative;
  z-index: 2;
}

body:not(.touch):not(.running) .dropdown:hover:not(:disabled):not(.disabled) > button.command-button:not([data-command=none]):not(.disabled):not(:disabled) + div.dropdown-content,
body:not(.touch):not(.running) .dropdown:hover:not(:disabled):not(.disabled) > button.sequence-button.selected:not([data-command=none]):not(.disabled):not(:disabled) + div.dropdown-content {
  display: block;
}

body:not(.touch):not(.running) .dropdown:hover:not(:disabled):not(.disabled) > button.command-button,
body:not(.touch):not(.running) .dropdown:hover:not(:disabled):not(.disabled) > button.sequence-button {
  position: relative;
  z-index: 2;
}

.control-speed {
  -webkit-appearance: none;
  background-color: var(--color-grey);
  height: 5px;
  border-radius: 3px;
  box-shadow: 0px 2px var(--color-grey-darker), 0px 4px var(--shadow-color);
  outline: none;
  width: 150px;
}

.control-speed:focus {
  outline: none!important;
}

.control-speed::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: var(--color-light-lighter);
  cursor: pointer;
  box-shadow: 0px 2px var(--color-grey), 0px 6px var(--shadow-color);
}

.control-speed:focus::-webkit-slider-thumb {
  /* outline: var(--important-outline)!important; */
}

.control-speed:focus::-moz-range-thumb:focus {
  /* outline: var(--important-outline)!important; */
}

.control-speed::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: var(--color-light-lighter);
  cursor: pointer;
  box-shadow: 0px 2px var(--color-grey), 0px 6px var(--shadow-color);
}

.control-speed-scale {
  width: 150px;
  opacity: .65;
  font-size: 12px;
}

/* SUCCESS SCREEN */

.success-button {
  border: none;
  padding: 6px 2ch;
  padding-bottom: 11px;
  font-size: 28px;
  line-height: 28px;
  font-weight: bold;
  color: var(--color-dark);
  background-color: var(--accent-color-darker);
  box-shadow: inset 0px -5px var(--accent-color-darkest), 0px 2px var(--shadow-color);
}

/* .success-button:focus {
  outline: var(--important-outline)!important;
} */

.success-button:hover:not(:disabled):not(.disabled):not(:active) {
  transform: translateY(2px);
  box-shadow: inset 0px -5px var(--accent-color-darkest);
}

.success-button:active {
  padding-bottom: 6px;
  transform: translateY(7px);
  box-shadow: none!important;
}

/* RUN BUTTON */

.run-button {
  border: none;
  width: 9ch;
  padding: 6px;
  padding-bottom: 11px;
  font-size: 28px;
  line-height: 28px;
  font-weight: bold;
}

/* .run-button:focus {
  outline: var(--important-outline)!important;
} */

.run-button:active {
  padding-bottom: 6px;
  margin-top: 5px;
  box-shadow: none!important;
}

.run-button {
  color: var(--color-dark);
  background-color: var(--accent-color-darker);
  box-shadow: inset 0px -5px var(--accent-color-darkest), 0px 2px var(--shadow-color);
}

.run-button:hover:not(:disabled):not(.disabled) {
  transform: translateY(2px);
  box-shadow: inset 0px -5px var(--accent-color-darkest);
}

.running .run-button {
  color: var(--color-dark);
  background-color: var(--accent-color-2);
  box-shadow: inset 0px -5px var(--accent-color-2-darkest), 0px 2px var(--shadow-color);
}

.running .run-button:hover:not(:disabled):not(.disabled) {
  box-shadow: inset 0px -5px var(--accent-color-2-darkest);
}

/*  NOTIFICATIONS */

#notifications {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 100vw;
  max-width: 350px;
  z-index: 2;
}

.toast {
  border-radius: 0px;
  border: 1px solid var(--color-light-darker);
  color: var(--base-color-lightest);
  background-color: var(--base-color-darker);
  margin: 0px 5px 5px 5px!important;
}

.toast b,
.toast .font-weight-bold {
  color: var(--color-light-darker);
}

.toast a {
  color: var(--base-color-lightest)!important;
}

.toast.toast-leaderboard > .toast-header::before {
  background-color: orange;
}

.toast.toast-achievement > .toast-header::before {
  background-color: purple;
}

.toast.toast-secret > .toast-header::before {
  background-color: var(--primary);
}

.toast-input {
  border-radius: 0;
  border: 1px solid var(--base-color-lightest);
  background-color: var(--lighter);
  color: var(--base-color-lightest);
}

.toast-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--lighter);
  opacity: 1; /* Firefox */
}

.toast-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--lighter);
}

.toast-input::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--lighter);
}

.toast-button {
  border: none;
  background-color: var(--accent-color);
  border: 1px solid var(--accent-color);
  color: var(--color-dark-lighter);
  padding: 1px 12px;
  font-weight: bold;
}

.toast-button:hover,
.toast-button:active {
  border-color: var(--accent-color-darker);
  background-color: var(--accent-color-darker);
  color: var(--color-dark);
}

@media (min-width: 576px) {

  #notifications {
    bottom: 25px;
    right: 25px;
  }

  .toast {
    margin-bottom: 12px!important;
  }

  .toast:last-of-type {
    margin-bottom: 0px!important;
  }

}

/* PUZZLE SQUARES */

#puzzle-squares {
  font-size: 0px;
}

.puzzle-square {
  font-size: 50px;
  height: 1em;
  width: 1em;
  margin: 0.0375em;
  display: inline-block;
  opacity: .0;
}

/* .puzzle-square:hover:not(:disabled):not(.disabled) {
  transform: translateY(.01em);
} */

.puzzle-square:hover:not(:disabled):not(.disabled)::after {
  box-shadow: 0px .03em var(--shadow-color);
}

.puzzle-square::before {
  content: '';
  display: block;
  width: 100%;
  height: 90%;
  border: .0375em solid var(--border-light);
  background-size: cover;
}

.puzzle-square.puzzle-square-red::before {
  border: .05em dashed var(--border-light);
}

.puzzle-square.north.colision::before {
  border-top: var(--colision-border);
  box-shadow: 0em -.025em .05em -.025em var(--colision-shadow-color);
}

.puzzle-square.east.colision::before {
  border-right: var(--colision-border);
  box-shadow: .025em 0em .05em -.025em var(--colision-shadow-color);
}

.puzzle-square.south.colision::before {
  border-bottom: var(--colision-border);
  box-shadow: 0em .025em .05em -.025em var(--colision-shadow-color);
}

.puzzle-square.west.colision::before {
  border-left: var(--colision-border);
  box-shadow: -.025em 0em .05em -.025em var(--colision-shadow-color);
}

.puzzle-square.robot.north::before {
  background: var(--robot-up);
  background-size: 1em;
}

.puzzle-square.robot.south::before {
  background: var(--robot-down);
  background-size: 1em;
}

.puzzle-square.robot.west::before {
  background: var(--robot-left);
  background-size: 1em;
}

.puzzle-square.robot.east::before {
  background: var(--robot-right);
  background-size: 1em;
}

.puzzle-square.robot.north.star.visited::before {
  background: var(--robot-up), url("/static/img/tile_star_shine.svg") no-repeat center;
  background-size: 1em;
}

.puzzle-square.robot.south.star.visited::before {
  background: var(--robot-down), url("/static/img/tile_star_shine.svg") no-repeat center;
  background-size: 1em;
}

.puzzle-square.robot.west.star.visited::before {
  background: var(--robot-left),  url("/static/img/tile_star_shine.svg") no-repeat center;
  background-size: 1em;
}

.puzzle-square.robot.east.star.visited::before {
  background: var(--robot-right),  url("/static/img/tile_star_shine.svg") no-repeat center;
  background-size: 1em;
}

.puzzle-square.star::before {
  background: url("/static/img/tile_star_hole.svg") no-repeat center;
  background-size: 1em;
}

.puzzle-square.star.visited::before {
  background: url("/static/img/tile_star_shine.svg") no-repeat center;
  background-size: 1em;
}

.puzzle-square::after {
  content: '';
  display: block;
  width: 100%;
  height: 10%;
  background-color: var(--side-light);
  box-shadow: 0px .04em var(--shadow-color);
}

.puzzle-square-green, .puzzle-square-yellow, .puzzle-square-red, .puzzle-square-purple {
  opacity: 1.0;
}

.puzzle-square.puzzle-square-green {
  background-color: var(--color-1-lighter);
}

.puzzle-square.puzzle-square-yellow {
  background-color: var(--color-2-lighter);
}

.puzzle-square.puzzle-square-purple {
  background-color: var(--color-3-lighter);
}

.puzzle-square.puzzle-square-red {
  background-color: var(--color-4-lighter);
}

/* LEVEL SELECTOR */

#level-selector h2 {
  color: var(--color-light-darker);
  font-size: 1.25em;
}

#level-selector h2.text-muted {
  color: var(--color-grey-darker)!important;
}

#level-selector .progress {
  border-radius: 0px;
  background-color: var(--lighter);
  height: .75rem;
  font-size: 1rem;
}

.progress.level-completion-bar .progress-bar {
  background-color: var(--accent-color-2-darker);
}

.min-puzzle {
  height: 100%;
  background-color: var(--base-color-darkest);
  padding: .75rem;
}

.min-puzzle.puzzle-blocked {
  color: var(--color-light-lighter);
}

.min-puzzle:not(.puzzle-blocked) {
  border: 2px solid var(--color-light-darker);
}

.min-puzzle:not(.puzzle-completed) {
  opacity: 0.6;
  border: 2px solid var(--color-grey);
}

/* .min-puzzle:not(.puzzle-blocked):hover { */
.min-puzzle.puzzle-completed:hover,
a.min-puzzle.puzzle-blocked:hover {
  /* outline: 2.5px solid var(--color-light-darker); */
  transform: translateY(-3px);
}

/* .min-puzzle:not(.puzzle-blocked):active { */
.min-puzzle.puzzle-completed:active,
a.min-puzzle.puzzle-blocked:active {
  /* outline: 2.5px solid var(--color-light-darker); */
  transform: translateY(2px);
}

.min-puzzle-square {
  margin: .5px;
  flex: 1 0 auto;
  height: auto;
}

.min-puzzle-square::before {
  content:'';
  float:left;
  padding-top: 100%;
}

.min-puzzle-square.min-puzzle-square-green {
  background-color: var(--color-1-lighter);
  /* box-shadow: inset 0px 0px 0px 1.25px var(--color-light-lighter); */
}

.min-puzzle-square.min-puzzle-square-yellow {
  background-color: var(--color-2-lighter);
  /* box-shadow: inset 0px 0px 0px 1.25px var(--color-light-lighter); */
}

.min-puzzle-square.min-puzzle-square-purple {
  background-color: var(--color-3-lighter);
  /* box-shadow: inset 0px 0px 0px 1.25px var(--color-light-lighter); */
}

.min-puzzle-square.min-puzzle-square-red {
  background-color: var(--color-4-lighter);
  /* box-shadow: inset 0px 0px 0px 1.25px var(--color-light-lighter); */
}

/* START COUNTER */

.puzzle-star-counter {
  font-weight: bold;
  font-size: 42px;
}

.puzzle-star-counter .fa {
  font-size: 0.85em;
}

.counter-highlight {
  color: var(--accent-color-2);
  text-shadow: 0px 0px 0.15em var(--accent-color-2-darker);
}

/* MODALS */

.modal-content {
  border-radius: 0px;
}

/* #popup-chosen .modal-content,
#popup-about .modal-content {
  background-color: var(--color-dark);
  color: var(--color-grey);
  border: 1px solid var(--color-grey-darker);
}

#popup-chosen .modal-content {
  border-left: 5px solid var(--accent-color-2-darker);
}

#popup-about .modal-content {
  border-left: 5px solid var(--accent-color-darker);
}

#popup-chosen .modal-content p,
#popup-about .modal-content p {
  font-size: .975rem!important;
  margin-bottom: 1.15rem;
}

#popup-chosen .modal-content p.lead,
#popup-about .modal-content p.lead {
  color: var(--color-grey);
  font-size: 1.1rem!important;
  margin-bottom: 1.5rem;
}

#popup-chosen .modal-content b,
#popup-about .modal-content b {
  color: var(--color-light);
}

#popup-chosen .modal-content h2,
#popup-about .modal-content h2 {
  color: var(--color-grey-darker);
}

#popup-chosen .modal-content p.text-muted,
#popup-about .modal-content p.text-muted {
  color: var(--color-grey-darker)!important;
  font-size: .9rem!important;
} */

.modal-input {
  border-radius: 0;
  border: 1px solid var(--color-grey);
  background-color: var(--lighter);
  color: var(--color-grey);
}

.modal-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--lighter);
  opacity: 1; /* Firefox */
}

.modal-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--lighter);
}

.modal-input::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--lighter);
}

.modal-button {
  border: none;
  background-color: var(--color-light-lighter);
  border: 1px solid var(--color-light-lighter);
  color: var(--color-grey-darker);
  /* padding: 1px 18px; */
  border-radius: 0px;
  font-weight: normal;
}

.modal-button:hover,
.modal-button:active {
  border-color: var(--color-light);
  background-color: var(--color-light);
}

#popup-howto .modal-content {
  background: none;
  height: 75vmin;
}

.modal-backdrop {
  opacity: 0.7!important;
}

#popup-success .modal-content {
  border: none;
  background: none;
}

@media (min-width: 576px) {
  #popup-success .modal-dialog-centered {
    min-height: calc(85% - 3.5rem);
  }
}

#popup-success .modal-content h1 {
  font-size: 60px;
  color: var(--color-light-lighter);
  text-shadow: 0px 0px 8px #ffffff80;
  line-height: 0.85em;
}

#popup-success .modal-content h2 {
  font-size: 72px;
}

#popup-success .modal-content h2 .fa {
  font-size: 0.85em;
}

/* START SCREEN */

#start-title-turing,
#start-title-by,
#start-title-gauss {
  color: var(--color-light-lighter);
  font-weight: bold;
  font-style: italic;
}

#start-title-turing {
  font-size: 1.5em;
}

#start-title-by {
  font-size: .5em;
}

#start-title-gauss {
  font-size: .75em;
}

#start-form-label {
  color: var(--color-1);
  font-weight: bold;
  text-shadow: 0px 0px 1px var(--color-1-lighter);
}

#username-input, #start-button {
  border-radius: 0px;
  display: inline-block;
  vertical-align: middle;
  height: 3rem;
  padding: 0rem .5rem;
  font-size: 1.5em;
}

#username-input {
  border-radius: .25rem;
  border: 4px solid var(--color-light-lighter);
  background: none;
  color: var(--color-light-lighter);
  font-weight: bold;
}

#username-input:hover,
#username-input:focus {
  outline: none!important;
  box-shadow: 0px 0px 3px var(--color-light), inset 0px 0px 3px var(--color-light);
  text-shadow: 0px 0px 2px var(--color-light);
}

#start-button {
  width: 8rem;
  border-radius: .25rem;
  border: 1px solid var(--color-1-darkest);
  background-color: var(--color-1);
  background-image: -webkit-linear-gradient(top, var(--color-1-lighter), var(--color-1-darker));
  color: var(--color-dark);
  font-weight: bold;
}

#start-button:hover,
#start-button:active,
#start-button:focus {
  outline: none!important;
  border: 1px solid var(--color-1);
  background-color: var(--color-1-lighter);
  background-image: -webkit-linear-gradient(top, var(--color-1-lightest), var(--color-1));
  color: var(--color-dark-lighter);
  box-shadow: 0px 0px 3px var(--color-1-lighter);
}

#username-valid-chars {
  color: var(--color-1-lighter);
  font-weight: bold;
}

#username-error {
  color: var(--color-4-lighter);
  font-weight: bold;
}

#cookie-notice {
  width: 65ch;
  color: var(--color-light);
  font-size: .8rem;
}

/* LOADING SCREEN */

#bg-start {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 10;
  background-color: var(--color-dark-darker);
  color: var(--color-light);
}

/* OVERALL LEADERBOARD */

#leaderboard .terminal {
  font-size: 1em;
}

#leaderboard .leaderboard tr:first-of-type {
  font-size: 1.2em;
}

#leaderboard .leaderboard tr:nth-of-type(2) {
  font-size: 1.1em;
}

#leaderboard .leaderboard tr:nth-of-type(3) {
  font-size: 1.05em;
}

div#footer {
  color: var(--color-light-darker);
  font-size: .8em;
}

div#footer .fa {
  font-size: .8em;
}

div#footer a {
  color: var(--color-light-darker)!important;
}

/* WORK */

.panel {
  border: 1px solid var(--color-light-darker);
  color: var(--base-color-lightest);
  background-color: var(--base-color-darker);
  /* background-color: var(--color-dark-lighter); */
}

.panel h1, .panel h2, .panel h3, .panel h4,
.panel b, .panel .font-weight-bold {
  color: var(--color-light);
}

.panel p.lead {
  color: var(--color-grey-lighter);
  font-size: 1.1rem!important;
}

.panel p.text-muted {
  color: var(--color-grey)!important;
  font-size: .9rem!important;
}

.panel.panel-dark {
  border-color: var(--color-grey);
  color: var(--color-light-darker);
  background-color: var(--color-dark-lighter);
}

.panel-dark h1, .panel-dark h2, .panel-dark h3, .panel-dark h4,
.panel-dark b, .panel-dark .font-weight-bold {
  color: var(--color-light-lighter);
}

.panel-dark p.lead {
  color: var(--color-light-lighter);
  font-size: 1.1rem!important;
}

.border-accent {
  border-left: 3px solid var(--base-color-lightest);
}

.notification {
  background-color: var(--color-dark-lighter);
  border: 1px solid var(--color-grey-darker);
  color: var(--color-light-darker);
  padding: .25rem 1rem;
  display: inline-block;
}

.btn-google {
  border-radius: 0px;
  font-family: "Roboto";
  color: var(--secondary)
}

.btn-google:hover, .btn-google:focus, .btn-google:active {
  color: var(--secondary)!important;
}

#toast-feedback textarea {
  resize: none;
}

/* ===== */

.play-now-button {
  padding: .5rem 1.5rem;
  border-radius: .25rem;
  border: 1px solid var(--color-1-darkest);
  background-color: var(--color-1);
  background-image: -webkit-linear-gradient(top, var(--color-1-lighter), var(--color-1-darker));
  color: var(--color-dark)!important;
  font-weight: bold;
  text-align: center;
  text-decoration: none!important;
}

.play-now-button:hover,
.play-now-button:active,
.play-now-button:focus {
  outline: none!important;
  border: 1px solid var(--color-1);
  background-color: var(--color-1-lighter);
  background-image: -webkit-linear-gradient(top, var(--color-1-lightest), var(--color-1));
  color: var(--color-dark-lighter)!important;
  box-shadow: 0px 0px 3px var(--color-1-lighter);
}

#command-swap-menu,
#command-swap-menu .swap-button {
  color: var(--color-grey)!important;
}

#command-swap-menu .swap-button {
  cursor: not-allowed;
}

#command-swap-menu.active,
#command-swap-menu.active .swap-button {
  color: var(--color-light)!important;
}

#command-swap-menu.active .swap-button {
  cursor: pointer;
}