* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*

.hidden {
  display: none !important;
}

.show {
  display: block !important;
}*/

/**********************/
/* Typography
/**********************/


/*h1.login-title {
  font-size: 30px;
  font-weight: 800;
  line-height: 41px;
  margin: 0 16px 24px 16px;
  text-align: center;
}

p.login-paragraph {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  margin: 0 16px 24px 16px;
  text-align: center;
}*/

/**********************/
/* Components
/**********************/

/* Buttons */

/* Primary */

/*.primary-btn { 
  background: #E0094B;
  border: none;
  border-radius: 5px;
  color: #FFF;
  cursor: pointer;
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  padding: 12px 0 13px;
  position: relative;
  -webkit-transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
  width: 100%;
}

.primary-btn .loader {
  animation: spin 0.4s linear infinite;
  border: 2px solid rgba(255,255,255,0.3);
  border-top: 2px solid #FFF;
  border-radius: 50%;
  height: 20px;
  left: 50%;
  margin-left: -10px;
  opacity: 0; 
  position: absolute;
  top: 12px;
  width: 20px;
  -webkit-transition: opacity .7s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: opacity .7s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: opacity .7s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity .7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.primary-btn:active {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
}
.primary-btn span.text {
  -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.primary-btn.processing span.text {
  opacity: 0;
}
.primary-btn.processing .loader {
  opacity: 1;
}*/

/* Underlined Link */

/*a.underlined-link {
  border-bottom: 1px solid #000;
  color: #000;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}
*/
/**********************/
/* Login Page
/**********************/

/*body {
  background: #121212;
  color: #FFF;
  font-family: "Open Sans";
  font-weight: 300;
  line-height: 1.5;
  overflow: hidden;
  padding-top: 128px;
  -webkit-font-smoothing: antialiased;
}

.login-container {
  margin: 0 auto;
  width: 310px;
}

.af-logo {
  background-image: url("af-logo.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  display: block;
  height: 32px;
  margin: 0 auto 32px;
  width: 172px;
}

.input-password,
.error-all {
  display: none;
}

.field {
  background: #1A1A1A;
  border: 1px solid #444444;
  border-radius: 5px;
  margin-bottom: 16px;
  padding-top: 12px;
  position: relative;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  padding-left: 16px;
}

.field input {
  -webkit-appearance: none;
  background:  none;
  border: none;
  color: #FFF;
  font-size: 14px;
  line-height: 19px;
  margin-bottom: 12px;
  padding: 0 16px;
  width: 100%;
}
.field input:focus {
  outline: none;
}
.field:focus-within {
  border: 1px solid #6C6C6C;
}

.field--error {
  background: #1E0606;
  border: 1px solid #FF5151;
}
.field--error:focus-within {
  background: #1A1A1A;
  border: 1px solid #FF5151;
}*/
/*.field--error input,*/
/*.field--error label {
  color: #FF5151;
}

.login-btn {
  margin-bottom: 16px;
}
a.reveal-password {
  position: absolute;
  right: 16px;
  top: 22px;
}
.input-password input {
  padding-right: 80px;
}*/



  /* Remove autofill background color and force text to be white */
  /* source: https://webagility.com/posts/the-ultimate-list-of-hacks-for-chromes-forced-yellow-background-on-autocompleted-inputs */
 
  /* Chrome */
  input[data-autocompleted] {
    background-color: transparent !important;
    -webkit-text-fill-color: #FFF;
  }

  /* Safari */
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #1A1A1A inset;
    -webkit-text-fill-color: #FFF;
  }

  .box-row,
  .box-column {
    display: flex;
  }

  .box-row.wrap,
  .box-column.wrap {
    flex-wrap: wrap;
  }

  .box-row *,
  .box-column * {
    flex-basis: auto;
  }

  .box-column {
    flex-direction: column;
  }

  .box-row.top {
    align-items: start;
  }

  .box-row.middle {
    align-items: center;
  }

  .box-row.bottom {
    align-items: end;
  }

  .box-row.space-between {
    justify-content: space-between;
  }

  .hidden {
    display: none !important;
  }

  .noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  body {
    background: #0D1117;
    color: #C8D1D9;
    height: 100%;
    font-family: "Open Sans";
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
  }

  .navbar {
    -webkit-app-region: drag;
    height: 56px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100vw;
  }

  .login-container {
    height: 100vh;
    justify-content: center;
  }

  .login-box {
    background: #12161C;
    border: 1px solid #171D25;
    border-radius: 13px;
    padding: 64px 0 96px;
    width: 460px;
  }

  .artworkfactory-logo {
    /* background-image: url('data:image/svg+xml;utf8,<svg width="49" height="30" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="-3.386%" y1="70.8%" x2="100%" y2="31.091%" id="a"><stop stop-color="%23E0094B" offset="0%"/><stop stop-color="%23FF5900" offset="100%"/></linearGradient><linearGradient x1="-133.356%" y1="58.682%" x2="91.437%" y2="5.233%" id="b"><stop stop-color="%23E0094B" offset="0%"/><stop stop-color="%23FF5900" offset="100%"/></linearGradient></defs><g fill-rule="nonzero" fill="none"><path d="M46.308.336a.913.913 0 0 1 .205.577v17.389h-2.557V4.372l-9.842 8.02a3.47 3.47 0 0 1-5.662-2.69v-5.33l-9.843 8.02a3.47 3.47 0 0 1-5.661-2.69v-5.33l-9.315 7.59a2.922 2.922 0 0 0-1.076 2.265v6.642a6.574 6.574 0 0 0 6.574 6.574h15.852V30H9.131A9.131 9.131 0 0 1 0 20.869v-6.642c0-1.647.741-3.206 2.018-4.247L14.014.205a.913.913 0 0 1 1.49.708v8.79a.913.913 0 0 0 1.49.707L29.52.205a.913.913 0 0 1 1.49.708v8.79a.913.913 0 0 0 1.49.707L45.023.205a.913.913 0 0 1 1.285.131Z" fill="url(%23a)"/><path d="M30.203 30c-.4 0-.75-.085-1.05-.255-.3-.17-.536-.408-.71-.715v.87h-1.39v-7.3h1.6v2.91c.174-.3.405-.535.695-.705a1.99 1.99 0 0 1 1.025-.255c.334 0 .64.072.92.215.28.143.52.338.72.585.2.247.357.538.47.875.114.337.17.695.17 1.075s-.061.735-.185 1.065a2.65 2.65 0 0 1-.515.86c-.22.243-.48.433-.78.57-.3.137-.623.205-.97.205Zm-.45-1.35a1.214 1.214 0 0 0 .905-.39c.11-.12.197-.262.26-.425a1.596 1.596 0 0 0 .005-1.07 1.471 1.471 0 0 0-.245-.445 1.132 1.132 0 0 0-.375-.3 1.067 1.067 0 0 0-1.165.15 1.72 1.72 0 0 0-.485.65v1.1c.107.227.262.405.465.535.204.13.415.195.635.195Zm6.21 1.35c-.44 0-.835-.072-1.185-.215a2.635 2.635 0 0 1-.89-.585 2.507 2.507 0 0 1-.555-.855 2.758 2.758 0 0 1-.19-1.015c0-.38.064-.738.19-1.075.127-.337.31-.632.55-.885.24-.253.535-.453.885-.6.35-.147.749-.22 1.195-.22.447 0 .844.073 1.19.22a2.522 2.522 0 0 1 1.425 1.46c.124.327.185.67.185 1.03l-.01.275c-.006.09-.016.168-.03.235h-3.88c.027.353.155.622.385.805.23.183.492.275.785.275.234 0 .459-.057.675-.17a.868.868 0 0 0 .435-.46l1.36.38c-.206.413-.526.75-.96 1.01-.433.26-.953.39-1.56.39Zm1.11-3.22c-.033-.333-.153-.597-.36-.79a1.084 1.084 0 0 0-.77-.29 1.07 1.07 0 0 0-.775.295c-.203.197-.321.458-.355.785h2.26Zm5.78 2.84c-.22.093-.471.18-.755.26-.283.08-.568.12-.855.12-.2 0-.388-.025-.565-.075a1.26 1.26 0 0 1-.465-.24 1.12 1.12 0 0 1-.315-.435 1.655 1.655 0 0 1-.115-.65v-2.74h-.67v-1.21h.67v-1.67h1.6v1.67h1.07v1.21h-1.07v2.19c0 .173.044.298.13.375a.48.48 0 0 0 .33.115c.12 0 .244-.02.37-.06.127-.04.237-.083.33-.13l.31 1.27Zm2.83-5.07c.794 0 1.407.187 1.84.56.434.373.65.92.65 1.64v1.35c0 .16.025.272.075.335.05.063.139.102.265.115v1.35c-.14.033-.266.055-.38.065l-.31.015c-.3 0-.526-.058-.68-.175a.775.775 0 0 1-.29-.495l-.03-.24c-.233.3-.511.53-.835.69-.323.16-.665.24-1.025.24-.26 0-.501-.042-.725-.125a1.697 1.697 0 0 1-.575-.35 1.679 1.679 0 0 1-.38-.53 1.575 1.575 0 0 1-.14-.665c0-.26.055-.497.165-.71.11-.213.265-.397.465-.55.2-.153.437-.273.71-.36a3 3 0 0 1 .91-.13c.22 0 .434.018.64.055.207.037.387.092.54.165v-.24c0-.607-.35-.91-1.05-.91-.286 0-.56.048-.82.145-.26.097-.533.242-.82.435l-.47-1a4.196 4.196 0 0 1 1.08-.51c.374-.113.77-.17 1.19-.17Zm-.02 2.92c-.293 0-.535.067-.725.2a.61.61 0 0 0-.285.52c0 .193.074.352.22.475a.84.84 0 0 0 .56.185c.174 0 .342-.03.505-.09.164-.06.299-.14.405-.24.154-.12.23-.247.23-.38v-.5a2.591 2.591 0 0 0-.455-.125 2.53 2.53 0 0 0-.455-.045Z" fill="url(%23b)"/></g></svg>');*/
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="35" height="23" fill="none"><path fill="url(%23a)" fill-rule="evenodd" d="M10.546.154 1.518 7.485A4.104 4.104 0 0 0 0 10.671v4.98C0 19.435 3.076 22.5 6.87 22.5h21.26c3.794 0 6.87-3.066 6.87-6.848V.685a.689.689 0 0 0-1.121-.53l-9.425 7.653a.688.688 0 0 1-1.12-.531V.685a.689.689 0 0 0-1.121-.53l-9.425 7.653a.689.689 0 0 1-1.121-.531V.685a.689.689 0 0 0-1.121-.53ZM1.924 10.67c0-.66.297-1.283.81-1.7L9.743 3.28v3.998a2.607 2.607 0 0 0 2.61 2.602c.602 0 1.184-.206 1.65-.585L21.41 3.28v3.998a2.607 2.607 0 0 0 2.61 2.602c.601 0 1.184-.206 1.65-.585l7.406-6.015v12.373c0 2.723-2.215 4.93-4.947 4.93H6.871c-2.732 0-4.947-2.207-4.947-4.93V10.67Z" clip-rule="evenodd"/><defs><linearGradient id="a" x1="15.519" x2="37.406" y1="34.131" y2="2.698" gradientUnits="userSpaceOnUse"><stop stop-color="%23E0094B"/><stop offset="1" stop-color="%23FF5900"/></linearGradient></defs></svg>');
    background-size: 49px 30px;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    width: 49px;
  }

  .login-title {
    color: #C8D1D9;
    cursor: default;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 32px;
    text-align: center;
  }

  .login-paragraph {
    padding: 0 64px;
    text-align: center;
  }

  form {
    padding-left: 64px;
    padding-right: 64px;
  }

  input[type=text] {
    background: #12161C;
    border: 1px solid #1D2026;
    border-radius: 6px;
    color: #C8D1D9;
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    margin-bottom: 16px;
    padding: 11px 16px;
    -webkit-appearance: none;
  }

  input[type=text]:hover {
    background: #161A20;
  }

  input[type=text]:focus {
    border: 1px solid #58A7FF;
    outline: none;
  }

  input[type=text] {
    width: 100%;
  }

  input.password {
    display: none;
  }

  .error-text {
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="%23C23E3E" cx="6" cy="6" r="6"/><path d="M6.763 6.976H5.236L5 2.6h1.998l-.235 4.376Zm-1.744 1.62c0-.281.083-.5.25-.655.166-.156.408-.234.726-.234.314 0 .552.078.714.234.162.155.243.374.243.654 0 .278-.084.495-.252.65-.168.156-.403.234-.705.234-.306 0-.545-.078-.717-.234-.173-.155-.26-.372-.26-.65Z" fill="%23FFF" fill-rule="nonzero"/></g></svg>');
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: left 0 top 3px;
    color: #FF5151;
    display: none;
    font-size: 12px;
    font-weight: 600;
    margin-top: -12px;
    margin-bottom: -5px;
    padding-left: 18px;
  }

  .field--error .error-text {
    display: block;
  }

  button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    outline: inherit;
    padding: 1px 0;
    overflow: auto;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
  }

  .primary-button {
    background: #E0094B;
    border-radius: 6px;
    color: #FFF;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px; /* important à préciser */
    margin-top: 16px;
    padding: 11px 16px;
    -webkit-transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
    -moz-transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
    -o-transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: transform 0.1s cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-appearance: none;
  }

  .primary-button:active {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }

  .primary-button.inactive {
    background: #21262D;
    color: #8B949E;
    cursor: not-allowed;
  }

  .primary-button.inactive:active {
    -webkit-transform: scale(1);
    transform: scale(1);
  }