@font-face {
  font-family: "SuperMarioGalaxy";
  src: url("/fonts/SuperMario256.woff") format("woff"), url("/fonts/SuperMario256.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

h2 {
  font-family: "SuperMarioGalaxy";
  font-size: 7em;
  text-align: center;
}

html, body {
  margin: 0;
  font-size: 14px;
  height: 100%;
}

#body-elt {
  display: flex;
  flex-direction: column;
}

#content-elt {
  padding-bottom: 30px;
  flex: 1;
}

#privacy-elt {
  padding-top: 100px;
  flex: 1;
  display: flex;
  flex-flow: column;
}

.privacy-line {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  padding: 10px 0;
}

.privacy-text {
  padding-left: 20px;
  margin: 0;
  line-height: normal;
  flex-grow: 1;
}

#footer-elt {
  display: flex;
  height: 44px;
}

.header-top {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0 20px 10px;
  background-color: black;
}

.privacy-header {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 20px 10px;
  background-color: black;
}

#head-line {
  display: block;
  max-width: 40%;
  height: 100%;
  text-align: center;
  font-size: 1.0rem;
  line-height: 1.2rem;
  font-style: italic;
  margin: auto;
  color: #eee;
  padding: 10px 20px 0;
}

#login-container {
  margin: auto;
  max-width: 30%;
  flex-grow: 1;
}

#my-signin2 {
  margin: 10px 5px 0;
  float: right;
  width: 200px;
  height: 30px;
  cursor: pointer;
}

span#googleIcon {
  background: url('/assets/google_light.png') transparent center/180% no-repeat;
  display: block;
  float: left;
  vertical-align: middle;
  width: 30px;
  height: 30px;
}

span#googleText {
  display: block;
  color: #eee;
  background-color: #555;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
}

div.abcRioButtonContentWrapper {
  background-color: #555;
}

#logo-container {
  max-width: 30%;
  min-width: 320px;
  flex-grow: 1;
  > a {
    outline: none;
  }
}

.footer-bottom {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  margin: 0;
  padding: 10px 20px 0;
  color: #eee;
  text-align: center;
  background-color: black;
}

.privacy-footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  margin: 0;
  color: #eee;
  text-align: center;
  background-color: black;
}

.footer-bottom a {
  color: #eee;
  text-decoration: underline;
}

.footer-bottom a:hover {
  color: white;
  text-decoration: none;
}

#version-container, #language-container {
  display: flex;
  margin: auto 0;
  max-width: 25%;
  flex-grow: 1;
  justify-content: space-around;
}

#flags-container {
  margin: -2px 0;
  display: flex;
  align-items: normal;
  flex-flow: row;
  justify-content: space-between;
  width: 110px;
}

#game-version {
  display: block;
  color: #eee;
  font-size: 0.75rem;
  text-align: right;
}

#language-container > p {
  display: block;
  color: #eee;
  font-size: 0.75rem;
  text-align: left;
}

#en-button, #fr-button, #po-button, #ge-button {
  width: 23px;
  height: 16px;
  border: 1px solid;
}

#en-button:focus, #fr-button:focus, #po-button:focus, #ge-button:focus {
  outline: none;
}

#en-button {
  background: no-repeat center/100% url('../assets/drapeau_UK.jpg');
}

#fr-button {
  background: no-repeat center/100% url('../assets/drapeau_FR.jpg');
}

#po-button {
  background: no-repeat center/100% url('../assets/drapeau_BR.jpg');
}

#ge-button {
  background: no-repeat center/100% url('../assets/drapeau_AL.jpg');
}

#credits-container {
  margin: auto 0;
  max-width: 50%;
  flex-grow: 1;
}

#credits-container-privacy {
  margin: 12px 0;
  max-width: 50%;
  flex-grow: 1;
}

.top-banner {
  width: 100%;
  line-height: 3rem;
  background-color: white;
  margin: 0 0 30px 0;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  -webkit-transition: height 2s ease-in-out;
  transition: height 2s ease-in-out;
}

.h2-small {
  font-size: 3.5em;
  -webkit-transition: font-size 0.2s;
  transition: font-size 0.2s;
}

.h2-big {
  font-size: 7em;
  -webkit-transition: font-size 0.2s;
  transition: font-size 0.2s;
}

.game-title-container {
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  width: 60%;
  height: auto;
  margin: 0 auto;
  display: block;
  opacity: 1;
}

.game-title-container.hide {
  height: 0;
  opacity: 0;
  -webkit-transition: height .2s ease-in-out;
  transition: height .2s ease-in-out;
}

.game-title-dark {
  background-color: #bbbbbb;
  margin-bottom: 1em;
}

.game-title-light {
  background-color: #cccccc;
}

.game-title-spaced {
  margin-bottom: 1em;
}

.game-title-orange {
  background-color: orange;
}

.game-title-tile-indicator {
  position: absolute;
  font-size: small;
  margin-top: 1.5em;
  margin-left: 1em;
}

.game-title-tile-content {
  text-align: center;
  font-size: xx-large;
}

.progress-bar {
  background-color: rgb(136, 136, 136);
}

.progress {
  position: relative;
  background-color : black;
  margin-top: 2em;
  margin-left: 4em;
  margin-right: 4em;
}

.progress span {
  position: absolute;
  display: block;
  width: 100%;
  color: white;
}

#touchpad {
  width: 180px;
  height: 180px;
}

.pad-canvas {
  margin: 35px auto;
  display: block;
  width: 180px;
  height: 180px;
  opacity: 1;
}

.canvas-container {
  display: block;
  position: relative;
  width: 600px;
  height: auto;
  margin: 0 auto;
}

.canvas-overlay-base {
  opacity: 0;
  visibility: visible;
  position: absolute;
  top: 6rem;
  line-height: 16rem;
  font-size: 20rem;
  transform: skewX(-15deg);
}

.canvas-overlay-transition {
  opacity: 0.4;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
  visibility: hidden;
  -webkit-transition: visibility 0.1s ease-in-out 0.2s;
  transition: visibility 0.1s ease-in-out 0.2s;
}

.canvas-overlay-score-title {
  opacity: 1;
  padding: 8px;
  visibility: visible;
  top: 46px;
  line-height: 20px;
  font-size: 36px;
  font-weight: bold;
  right: calc(23%);
}

.canvas-overlay-5digits {
  right: calc(-16%);
}

.canvas-overlay-4digits {
  right: calc(-3%);
}

.canvas-overlay-3digits {
  right: calc(10%);
}

.canvas-overlay-2digits {
  right: calc(23%);
}

.canvas-overlay-1digit {
  right: calc(36%);
}

.canvas-overlay-time {
  border: 5px solid orange;
  color: orange;
  background-color: black;
}

.canvas-overlay-diams {
  border: 5px solid aqua;
  color: aqua;
  background-color: black;
}

/* Score shown when the first hero reaches the exit, kept on screen */
.canvas-overlay-score {
  border: 5px solid lime;
  color: lime;
  background-color: black;
}

/* Battle mode: the score of a player who lost, black (on white, to stay readable) */
.canvas-overlay-score.canvas-overlay-loser {
  border-color: black;
  color: black;
  background-color: white;
}

.canvas-overlay-shown {
  opacity: 0.9;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.game-canvas {
  margin: 35px auto;
  display: block;
  width: 600px;
  height: 0;
  opacity: 0;
}

.game-canvas.show:focus, .game-canvas.show:active:focus {
  outline: 1px solid rgb(221, 221, 221);
}

.game-canvas.show {
  height: 400px;
  opacity: 1;
  -webkit-transition: opacity 0.2s ease-in-out 0.2s;
  transition: opacity 0.2s ease-in-out 0.2s;
}

/* Whole canvas flashes, started by the display service */
@keyframes canvas-flash {
  50% {
    filter: brightness(1.8);
    box-shadow: 0 0 24px 6px rgba(255, 200, 0, 0.8);
  }
}

.canvas-flash-goal {
  animation: canvas-flash 500ms ease-in-out 4;    /* Diamonds to collect reached: 2 s, 4 pulses */
}

/* Starting clap of the hero entry: white at once, held 300 ms, then fading out in 400 ms.
   A filter can't lighten black, so the background seen through the blank tiles is animated too
   (an animation overrides the inline background colour set by the display service) */
@keyframes canvas-flash-white {
  0%, 43% {
    background-color: white;
    filter: grayscale(1) brightness(4);
    box-shadow: 0 0 32px 10px rgba(255, 255, 255, 0.9);
  }
}

.canvas-flash-start {
  animation: canvas-flash-white 700ms ease-out 1;
}

.chat-canevas {
  margin: 35px auto 0;
  padding: 4px 8px;
  display: block;
}

.chat-input {
  margin: 5px auto 0;
  padding: 4px 6px;
  display: block;
}

.editor-canevas {
  margin: 35px;
  display: block;
}

.chatarea {
  height: 400px;
  max-height: 400px;
  resize: none;
  margin: 0 auto 4px;
  padding: 4px 8px;
  display: block;
  overflow-y: scroll;
  background-color: rgb(235,235,235);
}

.list-group {
	margin : 2.5em;
}

.list-form {
  padding-top : 0em;
}

.list-group-item:hover {
	border-radius : 1em;
	background-color : black;
	color : white;
}

li.list-group-item:hover input {
  color : black;
  background-color : white;
}

li.list-group-item input:focus {
  outline: none;
}


li.list-group-item input.ng-invalid {
  background-color : orange;
}

.list-group-item {
	height : 3.5em;
	margin : 0.3em;
	padding-top : 0.8em;
}

.badge {
	text-align : center;
  font-size: medium;
	font-weight : bold;
  margin-left : 10%;
  margin-top : 0.1em;
  padding-top : 0.3em;
  width : 8em;
}

/* Mode of a game session, coloured by its difficulty */
.badge.difficulty-easy {
  background-color : #2e7d32;
}

.badge.difficulty-normal {
  background-color : black;
}

.badge.difficulty-hard {
  background-color : #d32f2f;
}

/* The row turns black on hover: the normal badge keeps an outline */
li.list-group-item:hover .badge.difficulty-normal {
  box-shadow : 0 0 0 1px white;
}

/* Next to the session name input: the same height and corners */
.list-form .inputfield, .difficulty-select {
  height : 2em;
  box-sizing : border-box;
  vertical-align : middle;
}

.difficulty-select {
  margin-left : 0.5em;
  border-radius : 0.5em;
}

/* The list item turns its text white on hover: the difficulty stays readable */
li.list-group-item:hover .difficulty-select, .difficulty-select option {
  color : black;
}

.badge.greenheader:hover, .badge.redheader:hover {
  cursor: pointer;
}

.dropdown {
	text-align : center;
  font-size: medium;
	font-weight : normal;
	display:  inline-block;
	color : white;
	margin-left : 0.6em;
  margin-top : 0.1em;
	height : 1.3em;
	width : 5em;
  border-radius : 1em;
}

.disabled {
  font-style: italic;
}

.dropdown-menu>.dropdown {
	text-align : left;
  font-size: medium;
	font-weight : normal;
	color : black;
	margin-left : 0em;
	margin-top : 0em;
	padding-top : 0.1em;
	padding-left : 20px;
	width : 10em;
	height : 1.65em;
  border-radius : 0em;
}

.dropdown-menu {
	font-size: medium;
	text-align : left;
	padding-top : 0.5em;
	padding-left : 0em;
	margin-top: -0.2em;
	margin-left: -0.2em;
}

.dropdown-menu>.dropdown>.dropdown-menu {
	font-size: medium;
	text-align : left;
	padding-left : 0em;
	margin-top: -3em;
	margin-left: 8em;
}

.wide-menu {
  width: 16em;
  padding: 0em;
}

ul.dropdown-menu li.menu-item :hover {
  color: white;
  background-color: black;
}

ul.dropdown-menu li.firstlevel :hover {
  color: white;
  background-color: black;
}

.dropdown-menu>.dropdown:hover {
	color: white;
  background-color: black;
}

.scrollbar {
	overflow-y: scroll;
	width: 14em;
	height: 9.7em;
}

.redheader {
	margin-top : -0.1em;
	background-color : red;
	padding-top : 0.5em;
	height : 1.8em;
}

.greenheader {
	margin-top : -0.1em;
	background-color : green;
	padding-top : 0.5em;
	height : 1.8em;
}

.listheader {
	background-color : black;
	color : white;
}

.listheader:hover {
  cursor: pointer;
}

.bluebackground {
	background-color : blue;
}

.orangebackground {
	background-color : orange;
}

.blackbackground {
	background-color : black;
}

.whitebackground {
	background-color : white;
}

.violetbackground {
	background-color : violet;
}

.list-entry {
  background-color : yellow;
}

.inputfield {
  padding-left: 1em;
  border-radius : 0.5em;
}

/* Refused session name, under the name input */
.input-error {
  color: #c00000;
  font-size: 0.85em;
  padding-left: 1em;
}

#editor-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

#double-tap {
  position: relative;
}

.btn {
  background-color: black;
  padding: 2px;
  border-radius: 0;
}

.btn:active, .btn.active {
  position:relative;
  z-index: 1 !important;
  outline: solid 4px red !important;
  outline-offset: 0 !important;
  background-color: white;
}

.resource-btn:focus, .resource-btn:active:focus,
.mode-btn:focus, .mode-btn:active:focus,
.editor-canevas:focus, .editor-canevas:active:focus,
.param-digits-btn:focus, .param-digits-btn:active:focus,
.resource-btn.active:focus, .resource-btn.active, .resource-btn.focus, .resource-btn:active.focus, .resource-btn.active.focus,
.mode-btn.active:focus, .mode-btn.active, .mode-btn.focus, .mode-btn:active.focus, .mode-btn.active.focus {
  position:relative;
  z-index: 1;
  outline: solid 4px red;
  outline-offset: 0;
  background-color: white;
}

.btn-group .resource-btn {
  margin: 2px 5px !important;
  border: 1px solid black;
  width: 24px;
  height: 24px;
}

.action-btn, .mode-btn {
  margin: 2px 5px !important;
  border: 1px solid black;
  color: black;
  background-color: #ccc;
  width: 60px;
  height: 25px;
}

/* The tool buttons' state is set by the dashboard (no Bootstrap toggle): their radio inputs stay hidden */
.mode-btn input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

/* Fill and Paint with a pattern that can't spread */
.mode-btn.disabled {
  pointer-events: none;
}

.param-digits-btn {
  position: relative;
  margin: 2px 5px !important;
  border: 1px solid black;
  color: black;
  background-color: #ccc;
  width: 60px;
  height: 25px;
}

.param-checkbox-btn {
  position: relative;
  margin: 2px 5px !important;
  border: 1px solid black;
  color: black;
  background-color: #ccc;
  width: 25px;
  height: 25px;
}

.bad-param {
  background-color: orange;
}

.checkbox-true {
  background: url('/assets/checked.png') transparent center/100% no-repeat;
  width: 100%;
  height: 100%;
}

.checkbox-false {
}

.param-digits-span {
  position: relative;
}

.param-checkbox-btn:hover:after {
  position: absolute;
  left: -270%;
  top: -220%;
  bottom: auto;
  content: attr(bubble);
  padding: .75em .9em .85em;
  line-height: 1.1;
  text-align: center;
  border-radius: 5px;
  background-color: #ccc;
  color: #333;
  min-width: 12em;
}

.param-digits-span:hover:after {
  position: absolute;
  left: -70%;
  top: -164%;
  bottom: auto;
  content: attr(bubble);
  padding: .75em .9em .85em;
  line-height: 1.1;
  text-align: center;
  border-radius: 5px;
  background-color: #ccc;
  color: #333;
  min-width: 12em;
}

.action-btn:focus, .action-btn.focus, .btn-group:focus, .btn-group.focus {
  outline: none;
}

.btn-toolbar .btn-group {
  margin-left: 0;
  display: flex;
  float: inherit;
  flex-flow: column;
}

.btn-toolbar .param-group {
  margin-left: 0;
  display: flex;
  float: inherit;
  flex-flow: row wrap;
}

.btn-toolbar {
  display: flex;
  padding: 20px;
  background-color: white;
  border: solid 1px black;
}

.btn-toolbar-left {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: 0;
  width: 178px;
  height: 294px;
}

.btn-toolbar-right {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 0;
  margin-right: auto;
}

.btn-toolbar-bottom {
  margin-top: 0;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  width: max-content;
}

.resource_column {
  margin: auto;
}

.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* Popup shown on page load, over the whole page, closed by its cross or the Escape key */
.welcome-popup-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
}

.welcome-popup {
  position: relative;
  max-width: 650px;
  width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  overflow-y: auto;
  padding: 30px 40px 20px;
  color: black;
  background-color: white;
  border: 2px solid black;
}

.welcome-popup-title {
  margin-top: 0;
  text-decoration: underline;
}

.welcome-popup-close {
  position: absolute;
  top: 6px;
  right: 10px;
  padding: 0 4px;
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: black;
  cursor: pointer;
}

.welcome-popup-close:hover {
  color: #888;
}

/* Reminder that the Escape key closes the popup too */
.welcome-popup-esc {
  margin-right: 4px;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.5px;
  position: relative;
  bottom: 6px;
  color: #888;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-left: 15px;
  padding-right: 15px;
}

/* Custom page header */
.header {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 10px;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

/* Supporting marketing content */
.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  .container {
    max-width: 730px;
  }

  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-left: 0;
    padding-right: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}