/*------------------------------*/
/* Styles générés par login.less */
/*------------------------------*/
:root {
  --MPS-blue: #012FC4;
  --MPS-blue-light: #4767D1;
  --MPS-green: #00B397;
  --MPS-green-light: #00D9B9;
  --MPS-green-dark: #00917A;
  --MPS-red: #B32027;
  --MPS-red-light: #E84C52;
  --MPS-red-dark: #870005;
  --grey-00: #211D1D;
  --grey-01: #272323;
  --grey-02: #332F2F;
  --grey-03: #3B3737;
  --grey-04: #524B4B;
  --grey-05: #8A7E7E;
  --grey-06: #A69E9E;
  --grey-07: #D9DFE4;
  --grey-08: #ECF0F3;
  --black: #0F0D0D;
  --white: #FFFFFF;
  --green: #2ecc5f;
  --green-dark: #27ae4a;
  --blue: #3498DB;
  --blue-dark: #2980B9;
  --yellow: #F1C40F;
  --yellow-dark: #F39C12;
  --orange: #E67E22;
  --orange-dark: #D35400;
  --red: #E74C3C;
  --red-dark: #C0392B;
  --purple: #9B59B6;
  --purple-dark: #8E44AD;
  --ui-color-01: #513EFF;
  --ui-color-02: #E29000;
  --ui-color-03: #007580;
  --ui-color-04: #D83A56;
  --ui-color-05: #749800;
  --ui-color-06: #A20282;
  --ui-color-07: #3A77B1;
  --ui-color-08: #F1640D;
  --ui-color-09: #2E99B0;
  --ui-color-10: #C30141;
  --ui-color-11: #3F52E3;
  --ui-color-12: #FF449F;
  --ui-color-13: #554B92;
  --ui-color-14: #02ADAD;
  --ui-color-15: #F21170;
  --ui-color-16: #3E9493;
  --ui-color-17: #7E20FF;
  --ui-color-18: #AA13BD;
  --ui-color-19: #017966;
  --ui-color-20: #BD0185;
  --screen-color: var(--purple);
  --program-color: var(--blue-dark);
  --pick-color: var(--grey-06);
  --module-color: #21DFCB;
  --page-bg: var(--grey-08);
  --zoom: 1;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/jost/v6/92zPtBhPNqw79Ij1E865zBUv7mwjJQVG.ttf) format('truetype');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/jost/v6/92zPtBhPNqw79Ij1E865zBUv7mz9JQVG.ttf) format('truetype');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/jost/v6/92zPtBhPNqw79Ij1E865zBUv7myjJQVG.ttf) format('truetype');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/jost/v6/92zPtBhPNqw79Ij1E865zBUv7mx9IgVG.ttf) format('truetype');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/jost/v6/92zPtBhPNqw79Ij1E865zBUv7mxEIgVG.ttf) format('truetype');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/jost/v6/92zPtBhPNqw79Ij1E865zBUv7mwKIgVG.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/robotomono/v13/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vqPQw.ttf) format('truetype');
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  border: 0;
  font-family: "Helvetica-Neue", "Helvetica", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
div,
span,
object,
iframe,
img,
table,
caption,
thead,
tbody,
tfoot,
tr,
tr,
td,
article,
aside,
canvas,
details,
figure,
hgroup,
menu,
nav,
footer,
header,
section,
summary,
mark,
audio,
video {
  border: 0;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cit,
code,
del,
dfn,
em,
ins,
q,
samp,
small,
strong,
sub,
sup,
b,
i,
hr,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
legend,
label {
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}
article,
aside,
canvas,
figure,
figure img,
figcaption,
hgroup,
footer,
header,
nav,
section,
audio,
video {
  display: block;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
table caption,
table th,
table td {
  text-align: left;
  vertical-align: middle;
}
a img {
  border: 0;
}
:root {
  --grey-01: #F1F2F4;
  --grey-02: #ADADAD;
  --grey-03: #575757;
  --black: #202124;
  --page-bg: var(--grey-01);
  --module-color: #21DFCB;
  --zoom: 1;
}
@keyframes prismAnimX {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
  }
  50% {
    transform: rotate(45deg) translate(20%, 0);
  }
}
@keyframes prismAnimY {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
  }
  50% {
    transform: rotate(45deg) translate(0, 20%);
  }
}
body {
  height: 100%;
  font-family: 'Jost';
  font-size: 30px;
  color: var(--black);
  background: var(--grey-08);
  user-select: none;
}
button {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.prism {
  overflow: hidden;
  position: absolute;
  z-index: 1;
  transform: rotate(45deg);
  display: flex;
  width: 200px;
  background: #00000030;
  border-radius: 22%;
}
.prism::before {
  content: "";
  display: block;
  margin-top: 100%;
}
.prism.blue {
  background: var(--MPS-blue);
  border-color: var(--MPS-blue);
}
.prism.red {
  background: var(--MPS-red);
  border-color: var(--MPS-red);
}
.prism.green {
  background: var(--MPS-green);
  border-color: var(--MPS-green);
}
.prism.white {
  background: #FFF;
  border-color: #FFF;
}
.prism.outline {
  background: none;
  border-width: 6px;
  border-style: solid;
}
.prism img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  height: 130%;
  opacity: 0.6;
}
#prism-container {
  position: fixed;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#prism-01 {
  left: -70px;
  bottom: -80px;
  width: 300px;
  opacity: 0.6;
  animation: prismAnimX 10s ease infinite;
}
#prism-02 {
  left: 170px;
  bottom: 80px;
  width: 180px;
  opacity: 0.8;
  animation: prismAnimX 14s ease infinite;
}
#prism-03 {
  right: 100px;
  bottom: 40px;
  width: 140px;
  opacity: 0.5;
  animation: prismAnimX 12s ease infinite;
}
#prism-04 {
  right: 200px;
  bottom: 80px;
  width: 200px;
  opacity: 0.8;
  animation: prismAnimY 16s ease infinite;
}
#prism-05 {
  left: 200px;
  top: -80px;
  width: 230px;
  opacity: 0.8;
  animation: prismAnimY 15s ease infinite;
}
#prism-06 {
  right: -100px;
  top: 80px;
  width: 180px;
  opacity: 0.7;
  animation: prismAnimX 13s ease infinite;
}
.hidden {
  visibility: hidden;
}
#logo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 100px;
  transform: translate(-50%, 0);
  width: 300px;
  height: 130px;
}
#logo img {
  display: block;
  height: 100%;
}
#screen-title {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 230px;
  width: 100%;
  transform: translate(-50%, 0);
  /*opacity: 0;*/
  padding-top: 40px;
  transition: transform 0.2s ease-out, opacity 0.2s linear;
}
#screen-title.visible {
  opacity: 1;
}
#screen-title .title {
  text-align: center;
  font-size: 52px;
  font-weight: 400;
  color: var(--black);
}
#screen-title p {
  text-align: center;
  font-size: 32px;
  color: var(--grey-05);
}
#screen-title .screen {
  max-width: 500px;
  width: 100%;
  margin: 20px;
  cursor: pointer;
  box-shadow: 6px 6px 30px rgba(33, 29, 29, 0.1);
}
.screen-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 40px;
}
.screen {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 150px;
  padding: 30px;
  background: #FFF;
  border-radius: 30px;
}
.screen .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 90px;
  width: 90px;
  height: 90px;
  /*margin-right: 20px;*/
  font-size: 36px;
  color: #FFF;
  background: var(--grey-06);
  border-radius: 60px;
}
.screen .text {
  font-size: 36px;
  font-weight: 600;
}
.screen .keybind {
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 40px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 24px;
  color: var(--grey-06);
  border: 3px solid var(--grey-07);
  border-radius: 12px;
}
#screen-login {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translate(-50%, 50%);
  opacity: 0;
  max-width: 700px;
  width: 100%;
  padding: 0 30px;
  padding-bottom: 35px;
  background: #FFF;
  border-radius: 60px;
  box-shadow: 6px 6px 30px rgba(33, 29, 29, 0.1);
  transition: transform 0.3s ease-in, opacity 0.2s linear;
}
#screen-login.visible {
  transform: translate(-50%, 0);
  opacity: 1;
  transition: transform 0.4s cubic-bezier(0.4, 0.65, 0, 1), opacity 0.2s linear;
}
#screen-login .screen {
  width: 100%;
  justify-content: center;
}
#screen-login .title {
  margin-bottom: 20px;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--grey-05);
}
#screen-login .screen-login-form {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#screen-login .screen-login-form label {
  flex: 0 0 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  margin-right: 20px;
  font-size: 40px;
  color: var(--grey-06);
}
#screen-login .screen-login-form button {
  flex: 0 0 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  margin-left: 20px;
  font-size: 40px;
  color: #FFF;
  background: var(--green);
  border: 4px solid var(--green);
  background: var(--MPS-green-light);
  border: 4px solid var(--MPS-green-light);
  border-radius: 20px;
  outline: none !important;
}
#screen-login .screen-login-form button:focus {
  border-color: var(--green-dark);
}
#screen-login .screen-login-form .input-text {
  overflow: hidden;
  position: relative;
  background: var(--grey-08);
  border-radius: 20px;
  max-width: 505px;
  width: 100%;
  height: 90px;
}
#screen-login .screen-login-form .input-text::before {
  content: "... ... ...";
  position: absolute;
  z-index: 0;
  bottom: -5px;
  left: 0;
  width: 100%;
  font-family: "Roboto Mono";
  letter-spacing: 10px;
  text-align: center;
  font-size: 52px;
  color: var(--grey-06);
  user-select: none;
}
#screen-login .screen-login-form .input-text input {
  position: relative;
  z-index: 1;
  max-width: 505px;
  width: 100%;
  height: 90px;
  padding: 5px 20px 15px;
  letter-spacing: 10px;
  font-family: "Roboto Mono";
  text-transform: uppercase;
  font-size: 52px;
  color: var(--screen-color);
  background: none;
  border: 4px solid var(--grey-08);
  border-radius: 20px;
  outline-style: none !important;
  transition: border-color 0.1s linear;
}
#screen-login .screen-login-form .input-text input:focus {
  border-color: var(--screen-color);
}
#screen-login #screen-login-message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin-top: 15px;
  padding: 0 40px;
}
#screen-login #screen-login-message.error {
  background: #f3ecec;
  color: #cc442e;
}
#screen-login #screen-login-message.success {
  background: #ecf3f0;
  color: var(--MPS-green-dark);
}
#screen-login .back-btn {
  margin: 20px;
  padding: 30px;
  font-size: 30px;
  background: none;
  border: none;
}
#screen-login .back-btn i {
  margin-right: 10px;
}
#screen-login-help {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(400px, -50%);
  opacity: 0;
  margin-left: 100px;
  padding: 20px;
  background: #FFF;
  border-radius: 20px;
  box-shadow: 6px 6px 30px rgba(33, 29, 29, 0.1);
  transition: transform 0.3s ease-in, opacity 0.2s linear;
}
#screen-login-help.visible {
  transform: translate(300px, -50%);
  opacity: 1;
  transition: transform 0.8s cubic-bezier(0, 0.75, 0.4, 1), opacity 0.6s linear;
}
#screen-login-help::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  border: 20px solid transparent;
  border-right-color: #FFF;
}
#screen-login-help .title {
  font-weight: 600;
  color: var(--red);
  text-align: center;
  font-size: 34px;
}