@font-face {
  font-family: 'ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url(/static/fonts/ubuntu.woff2) format('woff2');
}

@font-face {
  font-family: 'ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url(/static/fonts/ubuntu-bold.woff2) format('woff2');
}

html {
  --header-height: 40px;
  --footer-height: 30px;
  --header-background: #201f1f;
  --menu-dropdown-z-index: 11;
  --border-color: #ccc;
  --sidebar-z-index: 100;
  --form-margin: 3px;
  --border-radius: 6px;
}

body.with-footer {
  position: relative;
  min-height: calc(100vh - var(--footer-height));
  padding-bottom: var(--footer-height);
}
body, * {
  margin: 0;
  font-family: ubuntu, Sans-Serif;
}

a {
  text-decoration: none;
}

.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden !important;
}

header {
  width: 100%;
  position: relative;
  background: var(--header-background);
  height: var(--header-height);
  display: flex;
}

header .debugmode {
  color: red;
  font-size: 14px;
}

header .header-links {
  display: flex;
}
header .burger-menu {
  display: none;
  cursor: pointer;
  border: none;
  color: white;
  background-color: transparent;
  padding-left: 6px;
  font-size: 1.8em;
  width: 1.2em;
}
header .burger-menu > span {
  position: absolute;
  top: -6px;
  left: 6px;
  font-size: 1.2em;
}

header .back-to a.home {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}
header .back-to img.home {
  height: 36px;
  filter: drop-shadow(0 0 2px #fff);
}

header .back-to {
  border-right: 1px solid #fff;
  padding: 0 6px;
  display: block;
}
header .back-to .top-bottom {
  font-size: 20px;
  margin-top: 7px;
  display: block;
}
a.top-bottom:hover {
  color: #9db8ec;
}
a.top-bottom {
  color: #fff;
  text-decoration: none;
}

.footer {
  background: var(--header-background);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
  font-size: 20px;
  height: var(--footer-height);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.footer > :not(last-child) {
  /* Could be replaced by `gap: 10px` in `.footer` but old web browsers don't support it... */
  margin-right: 10px;
}

body > h3 {
  text-align: center;
  margin: 1em auto;
  font-size: 1.5em;
}

#stripe-form {
  margin-top: 20px;
}

.form {
  position: relative;
  max-width: 700px;
  min-width: 300px;
  margin: 20px auto 0;
}
.form .inner-margin {
  position: relative;
  margin: 0 8px;
  padding: 4px;
  background: #ddd;
  border-radius: var(--border-radius);
}
.form form {
  display: flex;
  flex-direction: column;
}
.form form > label:not(.checkbox) {
  display: block;
  margin-top: 15px;
  margin-left: 5px;
  text-align: left;
}
.form form > label {
  margin-top: 15px;
}
.form form > label.checkbox {
  cursor: pointer;
}
.form form > input, .form form > .password input {
  display: block;
  padding: 8px 5px;
  font-size: 16px;
  outline: none;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  flex-grow: 1;
}
.form form > input, .form form .password, .form form textarea {
  margin: var(--form-margin);
}
.form form input.errored {
  box-shadow: 0 0 2px #ff0808;
}
.form form input:not([type=submit]):focus, .form form .button:focus, .form form textarea:focus {
  box-shadow: 0 0 4px #078dd8;
}
.form form input[type=submit], .form form .button {
  width: 50%;
  margin: 20px auto;
  display: block;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: #fff;
  cursor: pointer;
  margin-bottom: 10px;
}
.form form textarea {
  display: block;
  border: 1px solid rgb(204, 204, 204);
  border-radius: var(--border-radius);
  flex-grow: 1;
  /* Only allowing to resize vertically, not horizontally. */
  resize: vertical;
  min-height: 200px;
  outline: none;
  padding: 0.5em;
}
.form form .password {
  display: flex;
}
.form form .password input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0;
}
.form form .password button {
  height: 37px;
  width: 36px;
  display: block;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 1px solid var(--border-color);
  border-left: 0;
  cursor: pointer;
  padding: 2px;
}
.form form .password img {
  height: calc(100% - 4px);
}

.margin-top-50 {
  margin-top: 50px;
}
#inline {
  flex-direction: row;
  margin-top: 10px;
}
#inline input:not(.button) {
  border-right: 0;
  margin: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#inline input.button {
  flex-grow: 0;
  margin: 0 auto;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  width: fit-content;
}

#flash-messages {
  position: absolute;
  top: 45px;
  margin: 0 auto;
  display: block;
  right: 10px;
  z-index: 2;
  text-align: center;
  min-width: 100px;
  max-width: 360px;
}
#flash-messages > .message {
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: #fff;
  cursor: pointer;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
}
#flash-messages > .message.disappear {
  visibility: hidden;
  animation: 5s linear disappearing;
  margin-bottom: 0;
  height: 0;
  padding: 0;
}
@keyframes disappearing {
  0% {
    visibility: visible;
    margin-bottom: 4px;
    height: initial;
    padding: 8px;
  }
  99% {
    margin-bottom: 4px;
    height: initial;
    padding: 8px;
  }
  100% {
    visibility: hidden;
    margin-bottom: 0;
    height: 0;
    padding: 0;
  }
}
#flash-messages > .message > .msg-content {
  z-index: 1;
  position: relative;
}
#flash-messages > .msg-success {
  background: rgba(36, 207, 36, 0.7);
}
#flash-messages > .msg-success > .progress {
  background: rgb(36, 207, 36);
}
#flash-messages > .msg-success:hover > .progress {
  background: #31e131;
}
#flash-messages > .msg-error {
  background: rgba(243, 49, 49, 0.7);
}
#flash-messages > .msg-error > .progress {
  background: rgb(243, 49, 49);
}
#flash-messages > .msg-error:hover > .progress {
  background: #ea1313;
}
#flash-messages > .msg-info {
  background: rgba(36, 122, 198, 0.7);
}
#flash-messages > .msg-info > .progress {
  background: rgb(36, 122, 198);
}
#flash-messages > .msg-info:hover > .progress {
  background: rgb(38, 133, 217);
}
#flash-messages > .message > .progress {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
}
#flash-messages > .message.disappear > .progress {
  animation: 5s linear notif_disappearing;
}
@keyframes notif_disappearing {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

.error-msg,.success-msg,.warning-msg {
  display: block;
  border-radius: var(--border-radius);
  padding: 8px;
  color: #fff;
  text-align: center;
  margin: 10px 5px;
}
body > .error-msg, body > .success-msg, body > .warning-msg {
  margin: 20px;
}
.error-msg {
  background: #e95959;
}
.success-msg {
  background: #33b647;
}
.warning-msg {
  color: #423613;
  background: #e6dab5;
}
.success {
  position: relative;
  width: 50vw;
  margin: 20px auto 0;
  padding: 16px;
  background: #ebffe4;
  border-radius: var(--border-radius);
}
.success > p:not(:last-child) {
  margin-bottom: 18px;
}
body > .button {
  margin: 20px auto 0;
  width: calc(50vw - 10px);
}
.button {
  display: block;
  background: #73b5dd;
  padding: 10px;
  cursor: pointer;
  text-decoration: none;
  color: white;
  border-radius: var(--border-radius);
  text-align: center;
  font-size: 16px;
  border: none;
}
.button:hover {
  background: #7fc5ef;
}
.button.green {
  background: #26c126;
}
.button.green:hover {
  background: #2dd62d;
}
.button.red {
  background: #ec3333;
}
.button.red:hover {
  background: #ff4c4c;
}
.content .button {
  width: 30%;
  min-width: fit-content;
  font-size: 1em;
}
.content {
  margin: 20px;
  padding: 20px;
  background-color: #f1f1f1;
  border-radius: 8px;
  font-size: 1.2em;
  text-align: center;
}
.content > *:not(.group) {
  margin-right: auto;
  margin-left: auto;
}
.content > :not(:last-child) {
  margin-bottom: 25px;
}
.content .group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.content .group > :not(last-child) {
  /* Could be replaced by `gap: 20px` in `.content .group` but old web browsers don't support it... */
  margin-right: 20px;
}

.left-align {
  text-align: left;
}
.centered-left-align {
  text-align: left;
  width: fit-content;
  margin: 0 auto;
  margin-top: 5px;
}

.content.profile .contact {
  margin-top: 40px;
}

.content div.table {
  max-width: 100%;
  overflow-x: auto;
  padding: 0 1px;
  width: fit-content;
  margin: 0 auto;
}
table tbody tr.selected {
  background-color: #f2efc1;
}
.content table {
  margin: 1px;
  border-radius: 5px;
  border-style: hidden;
  border-collapse: collapse;
  box-shadow: 0 0 0 1px #aaa;
}
.content table tbody tr {
  counter-increment: rowNumber;
}
.content table tr {
  border-bottom: 1px solid #aaa;
}
.content table td {
  padding: 9px;
}
.content table td:not(:last-child) {
  border-right: 1px solid #aaa;
}
.flex {
  display: flex;
}
table td .arrow-up, table td .arrow-down {
  margin-left: 1em;
}
table td.red {
  color: red;
}
table td.green {
  color: green;
}
table td .grow {
  flex-grow: 1;
  text-align: left;
  margin-left: 7px;
}

#forgot-pass {
  margin: 2px auto 10px;
  color: #2c57bd;
  text-decoration: none;
}
#forgot-pass:hover {
  text-decoration: underline;
}

.content pre {
  background-color: #d2d1d1;
  padding: 10px;
  overflow-x: scroll;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
}

header > * {
  margin: 0;
}
header .spacer {
  color: #fafafa;
  text-align: center;
  padding-top: 10px;
  flex-grow: 1;
}
header > .login, header > .dropdown {
  margin-top: 5px;
  margin-right: 5px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: #000;
  font-size: 18px;
  min-width: 71px;
  text-align: center;
}
header > .login {
  height: 22px;
  padding: 3px;
}
header > .login:hover {
  background-color: rgb(208, 228, 249);
}
header > .dropdown {
  height: 28px;
  padding: 0;
}
/* hiding the arrow */
header > .dropdown > summary::-webkit-details-marker,
header > .dropdown > summary::marker {
  display: none;
}
header > .dropdown > summary {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 2px;
}
header > .dropdown > summary .username {
  flex-grow: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
header > .dropdown > summary::after {
  font-size: 12px;
  content: " ▼";
}
header > .dropdown:hover > summary::after {
  color: #666;
}

header > .dropdown[open] {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
header > .dropdown > .dropdown-elems {
  position: absolute;
  background-color: #fff;
  right: 5px;
  border-radius: var(--border-radius);
  border-top-right-radius: 0;
  border: 1px solid var(--border-color);
  z-index: var(--menu-dropdown-z-index);
  top: 34px;
  /* To prevent the last `<a>` to look badly on hover */
  overflow: hidden;
}
.dropdown-elems > a {
  padding: 6px 5px;
  border-bottom: 1px solid var(--border-color);
  text-decoration: none;
  display: block;
  color: #000;
}
.dropdown-elems > a:last-child {
  border-bottom: 0;
}
.dropdown-elems > a:hover {
  background-color: rgb(208, 228, 249);
}
form img.captcha {
  margin: 30px auto 5px;
}

ol.item-list {
  width: fit-content;
  text-align: left;
}
ol.item-list li {
  padding: 2px;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  animation: rotating 3s linear infinite;
}
#history-table {
  position: relative;
}
.loading {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.loading .rotating {
  top: calc(50% - 30px);
  position: absolute;
}

.content .history-controls {
  margin-bottom: 0;
  border: 2px solid #404040;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  border-bottom: 0;
}
.spare-pieces-parent-top, .spare-pieces-parent-bottom {
  border: 2px solid #404040;
}
.spare-pieces-parent-top {
  border-bottom: 0;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
.spare-pieces-parent-bottom {
  border-top: 0;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}


/* tooltip style from http://cbracco.me/a-simple-css-tooltip/ */
/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
  text-align: center;
  white-space: pre-line;
  display: flex;
}

/* Base styles for the entire tooltip */
[data-tooltip]::before,
[data-tooltip]::after,
.tooltip::before,
.tooltip::after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

[data-tooltip]:not(.instant-tooltip)::before,
[data-tooltip]:not(.instant-tooltip)::after,
.tooltip:not(.instant-tooltip)::before,
.tooltip:not(.instant-tooltip)::after {
  -webkit-transition:
    opacity 0.2s ease-in-out 0.4s,
    visibility 0.2s ease-in-out 0.4s,
    -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24) 0.4s;
  transition:
    opacity 0.2s ease-in-out 0.4s,
    visibility 0.2s ease-in-out 0.4s,
    transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24) 0.4s;
  -webkit-transform: translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

[data-tooltip]:not(:hover):not(.instant-tooltip)::before,
[data-tooltip]:not(:hover):not(.instant-tooltip)::after,
.tooltip:not(:hover):not(.instant-tooltip)::before,
.tooltip:not(:hover):not(.instant-tooltip)::after {
  -webkit-transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus::before,
[data-tooltip]:focus::after,
.tooltip:hover::before,
.tooltip:hover::after,
.tooltip:focus::before,
.tooltip:focus::after {
  visibility: visible;
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip::before,
[data-tooltip]::before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip::after,
[data-tooltip]::after {
  z-index: 1000;
  padding: 8px;
  width: 160px;
  background-color: hsla(0, 0%, 20%, 0.94) !important;
  color: #fff;
  content: attr(data-tooltip);
  font-size: 14px;
  line-height: 1.2;
}

/* Directions */

/* Top (default) */
[data-tooltip]::before,
[data-tooltip]::after,
.tooltip::before,
.tooltip::after,
.tooltip-top::before,
.tooltip-top::after {
  bottom: 100%;
  left: 50%;
}

[data-tooltip]::before,
.tooltip::before,
.tooltip-top::before {
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: hsla(0, 0%, 20%, 0.9);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]::after,
.tooltip::after,
.tooltip-top::after {
  margin-left: -88px;
}

.prev_link[data-tooltip]::after,
.tooltip::after,
.tooltip-top::after {
  margin-left: -63px;
}

.next_link[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  margin-left: -124px;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus::before,
[data-tooltip]:focus::after,
.tooltip:hover::before,
.tooltip:hover::after,
.tooltip:focus::before,
.tooltip:focus::after,
.tooltip-top:hover::before,
.tooltip-top:hover::after,
.tooltip-top:focus::before,
.tooltip-top:focus::after {
  -webkit-transform: translateY(-12px);
  transform:         translateY(-12px); 
}

/* Left */
.tooltip-left::before,
.tooltip-left::after {
  right: 100%;
  bottom: 40%;
  left: auto;
}

.tooltip-left::before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-left:hover::before,
.tooltip-left:hover::after,
.tooltip-left:focus::before,
.tooltip-left:focus::after {
  -webkit-transform: translateX(-12px);
  transform:         translateX(-12px); 
}

/* Bottom */
.tooltip-bottom::before,
.tooltip-bottom::after {
  top: 100%;
  bottom: auto;
  left: 50%;
}

.tooltip-bottom::before {
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-bottom:hover::before,
.tooltip-bottom:hover::after,
.tooltip-bottom:focus::before,
.tooltip-bottom:focus::after {
  -webkit-transform: translateY(12px);
  transform:         translateY(12px); 
}

/* Right */
.tooltip-right::before,
.tooltip-right::after {
  bottom: 50%;
  left: 100%;
}

.tooltip-right::before {
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-right:hover::before,
.tooltip-right:hover::after,
.tooltip-right:focus::before,
.tooltip-right:focus::after {
  -webkit-transform: translateX(12px);
  transform:         translateX(12px); 
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left::after,
.tooltip-right::after {
  margin-left: 0;
  margin-bottom: -16px;
}

.tuto-board > .chessboard-63f37 {
  max-height: 75vh;
}
.tuto-board .spare-pieces-parent-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

@media (max-width: 850px) {
  header .header-links {
    display: flex;
    position: fixed;
    left: -205px; /* 205 and 200 because of the `padding-left` */
    top: var(--header-height);
    width: 200px;
    background-color: var(--header-background);
    bottom: 0;
    /* Important to keep it when menu is collapsed to not go under the page's content. */
    z-index: var(--sidebar-z-index);
    flex-direction: column;
    padding-left: 5px;
    padding-top: 5px;
    transition: left 0.5s;
  }
  header .header-links > :not(last-child) {
    /* Could be replaced by `gap: 5px` in `header .header-links` but old web browsers don't support it... */
    margin-right: 5px;
  }
  body.expanded header .header-links {
    left: 0;
  }
  body.expanded header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--sidebar-z-index);
  }
  body.expanded {
    padding-top: var(--header-height);
  }
  header .burger-menu {
    display: block;
  }
  header .back-to {
    border: 0;
  }
}

.content .anchor > a {
  color: #000;
}
.content .anchor:target {
  background-color: #fdfad6;
}
#faq-summary {
  border: 1px solid var(--border-color);
  padding: 5px;
  border-radius: var(--border-radius);
}
#faq-summary summary {
  cursor: pointer;
  display: flex;
  align-items: center;
}
#faq-summary summary::marker {
  content: "";
}
#faq-summary[open] summary::before {
  content: "-";
}
#faq-summary summary::before {
  content: "+";
  font-size: 1.2em; /* Same as h2 */
  margin: 0 4px;
}
#faq-summary > ul {
  margin-top: 15px;
}
#faq-summary a, #faq-summary a:hover, #faq-summary a:visited, #faq-summary a:active {
  color: inherit;
  text-decoration: none;
}

td.subscribed {
  display: flex;
  align-items: center;
  justify-content: center;
}
td.subscribed img {
  height: 0.9em;
  width: 0.9em;
  filter: drop-shadow(0 0 2px black);
  margin-right: 6px;
}