/* 
LOGIN.CSS

Derničre MāJ: 12.11.2025 - 0 0 12
*/
/* ----- 00_LIBRARYS.ISA_ICONES_SVG ----- */
/* ----- LOGIN.LOGIN_CONF_VARIABLES ----- */
:root {
  --info: hsl(207, 89%, 68%);
  --info-light: hsl(207, 89%, 75%);
  --info-lighter: hsl(207, 89%, 83%);
  --info-ultra-light: hsl(207, 89%, 90%);
  --info-dark: hsl(207, 89%, 61%);
  --info-darker: hsl(207, 89%, 54%);
  --info-ultra-dark: hsl(207, 89%, 47%);
  --info-transp-025: hsl(0, 0%, 100%);
  --info-transp-05: hsl(0, 0%, 100%);
  --info-transp-075: hsl(207, 89%, 90.66666667%);
  --success: hsl(122, 39%, 49%);
  --success-light: hsl(122, 39%, 56%);
  --success-lighter: hsl(122, 39%, 73%);
  --success-ultra-light: hsl(122, 39%, 80%);
  --success-dark: hsl(122, 39%, 42%);
  --success-darker: hsl(122, 39%, 35%);
  --success-ultra-dark: hsl(122, 39%, 28%);
  --success-transp-025: hsl(0, 0%, 100%);
  --success-transp-05: hsl(122, 39%, 98%);
  --success-transp-075: hsl(122, 39%, 65.33333333%);
  --warning: hsl(36, 100%, 65%);
  --warning-light: hsl(36, 100%, 72%);
  --warning-lighter: hsl(36, 100%, 79%);
  --warning-ultra-light: hsl(36, 100%, 86%);
  --warning-dark: hsl(36, 100%, 58%);
  --warning-darker: hsl(36, 100%, 51%);
  --warning-ultra-dark: hsl(36, 100%, 44%);
  --warning-transp-025: hsl(0, 0%, 100%);
  --warning-transp-05: hsl(0, 0%, 100%);
  --warning-transp-075: hsl(36, 100%, 86.66666667%);
  --alert: hsl(0, 69%, 67%);
  --alert-light: hsl(0, 69%, 74%);
  --alert-lighter: hsl(0, 69%, 81%);
  --alert-ultra-light: hsl(0, 69%, 88%);
  --alert-dark: hsl(0, 69%, 60%);
  --alert-darker: hsl(0, 69%, 53%);
  --alert-ultra-dark: hsl(0, 69%, 46%);
  --alert-transp-01: hsl(0, 0%, 100%);
  --alert-transp-025: hsl(0, 0%, 100%);
  --alert-transp-05: hsl(0, 0%, 100%);
  --alert-transp-075: hsl(0, 69%, 89.33333333%);
  --primary: oklch(0.4839 0.1539 277.66);
  --primary-light: oklch(from var(--primary) calc(l + 0.18) c h);
  --primary-dark: oklch(from var(--primary) calc(l - 0.18) c h);
  --primary-grad-01: var(--primary);
  --primary-grad-02: oklch(from var(--primary) calc(l + 0.0556) c h);
  --primary-grad-03: oklch(from var(--primary) calc(l + 0.1112) c h);
  --primary-grad-04: oklch(from var(--primary) calc(l + 0.1668) c h);
  --primary-grad-05: oklch(from var(--primary) calc(l + 0.2224) c h);
  --primary-grad-06: oklch(from var(--primary) calc(l + 0.2780) c h);
  --primary-grad-07: oklch(from var(--primary) calc(l + 0.3336) c h);
  --primary-grad-08: oklch(from var(--primary) calc(l + 0.3892) c h);
  --primary-grad-09: oklch(from var(--primary) calc(l + 0.4448) c h);
  --primary-grad-10: oklch(from var(--primary) calc(l + 0.5004) c h);
  --second: oklch(0.6059 0.0998 45.9);
  --second-light: oklch(from var(--second) calc(l + 0.18) c h);
  --second-dark: oklch(from var(--second) calc(l - 0.18) c h);
  --second-grad-01: var(--second);
  --second-grad-02: oklch(from var(--second) calc(l + 0.0556) c h);
  --second-grad-03: oklch(from var(--second) calc(l + 0.1112) c h);
  --second-grad-04: oklch(from var(--second) calc(l + 0.1668) c h);
  --second-grad-05: oklch(from var(--second) calc(l + 0.2224) c h);
  --second-grad-06: oklch(from var(--second) calc(l + 0.2780) c h);
  --second-grad-07: oklch(from var(--second) calc(l + 0.3336) c h);
  --second-grad-08: oklch(from var(--second) calc(l + 0.3892) c h);
  --second-grad-09: oklch(from var(--second) calc(l + 0.4448) c h);
  --second-grad-10: oklch(from var(--second) calc(l + 0.5004) c h);
  --accent: oklch(0.62 0.21 259.24);
  --focus: oklch(0.6008 0.2346 294.81);
  --synchrotrace: oklch(0.8397 0.0584 48.4);
  --hover: oklch(from var(--synchrotrace) calc(l + 0.1) calc(c - 0.03) h);
  --white: oklch(1 0 0);
  --black: oklch(0 0 0);
  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-gray-950: oklch(13% 0.028 261.692);
  --main-background: var(--color-gray-100);
  --sidebar-panel: var(--color-gray-200);
  --card-bloc: var(--white);
  --primary-text: oklch(0.2621 0.0095 248.19);
  --second-text: oklch(0.5103 0 0);
  --primary-border: var(--color-gray-950);
  --disabled: var(--color-gray-400);
  --input-background: var(--white);
  --input-border: color-mix(in oklab, var(--primary-border) 10%, transparent);
  --input-border-hover: color-mix(in oklab, var(--primary-border) 20%, transparent);
  --input-border-focus: color-mix(in oklab, var(--focus) 50%, transparent);
  --spacing-xs: 0.125rem;
  --spacing-s: 0.25rem;
  --spacing-m: 0.5rem;
  --spacing-l: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 2.5rem;
  --spacing-4xl: 2.75rem;
  --spacing-5xl: 3rem;
  --radius-s: 0.25rem;
  --radius-m: 0.375rem;
  --radius-l: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --text-2xs: 0.65rem;
  --text-xs: 0.75rem;
  --text-s: 0.85rem;
  --text-m: 1rem;
  --text-l: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  --label-xs: 60px;
  --label-s: 80px;
  --label-m: 110px;
  --label-l: 150px;
  --label-xl: 180px;
  --label-2xl: 200px;
  --input-datepicker-width: 7rem;
  --input-date-width: 11rem;
  --input-field-height: 27px;
  --input-field-height-grp: 17px;
  --input-checkbox-size: 16px;
  --input-radio-size: 16px;
  --primary-font-standard: Verdana, Arial, Helvetica, sans-serif;
  --font-sans: Inter, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* ------------------------------------ */
/* ----- LOGIN.LOGIN_CONF_GLOBALS ----- */
/* ------------------------------------ */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--main-background);
  accent-color: var(--accent);
}
html,
body {
  margin: 0;
  padding: 0;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  position: relative;
  font-size: var(--text-s);
  font-family: var(--primary-font-standard);
  color: var(--primary-text);
}
/* ----- LOGIN.LOGIN_MIXINES ----- */
/* ---------------------------------- */
/* ----- LOGIN.LOGIN_ELEM_FORMS ----- */
/* ---------------------------------- */
--tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}
--tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
--tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
--tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
--tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
--tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: #0000001a;
}
input[type="text"],
input[type="password"],
input[type="email"] {
  appearance: none;
  position: relative;
  display: block;
  font-size: var(--text-s);
  padding-block: calc(calc(var(--spacing-s) * 3) - 1px);
  padding-inline: calc(calc(var(--spacing-s) * 8));
  outline: none;
  -webkit-border-radius: var(--radius-s);
  -moz-border-radius: var(--radius-s);
  -ms-border-radius: var(--radius-s);
  -o-border-radius: var(--radius-s);
  border-radius: var(--radius-s);
  width: 100%;
  color: var(--primary-text);
  background-color: var(--input-background);
  border-width: 1px;
  border-style: solid;
  border-color: var(--primary-border);
  transition: all 50ms ease-out;
}
input[type="text"]:before,
input[type="password"]:before,
input[type="email"]:before {
  content: var(--tw-content);
  position: absolute;
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  background-color: var(--white-fixe);
  -webkit-border-radius: var(--radius-s);
  -moz-border-radius: var(--radius-s);
  -ms-border-radius: var(--radius-s);
  -o-border-radius: var(--radius-s);
  border-radius: var(--radius-s);
  inset: 1px;
}
input[type="text"]:after,
input[type="password"]:after,
input[type="email"]:after {
  content: var(--tw-content);
  position: absolute;
  inset: calc(var(--spacing-s) * 0);
  pointer-events: none;
  border: none;
  margin: 0;
  padding: 0;
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover {
  border-color: var(--input-border-hover);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
input[type="email"]:focus-visible {
  border-width: 2px;
  border-color: var(--input-border-focus);
}
input[type="text"]:before {
  content: 'CCC';
}
input[type="password"]:before {
  content: 'DDD';
}
button,
input[type="submit"],
input[type="button"] {
  font-size: var(--text-s);
  appearance: none;
  position: relative;
  display: grid;
  width: max-content;
  font-size: var(--text-m);
  color: var(--white);
  padding-block: calc(calc(var(--spacing-s) * 3) - 1px);
  padding-inline: calc(calc(var(--spacing-s) * 8));
  background-color: var(--primary);
  border: 2px solid transparent;
  outline: none;
  cursor: pointer;
  -webkit-border-radius: var(--radius-s);
  -moz-border-radius: var(--radius-s);
  -ms-border-radius: var(--radius-s);
  -o-border-radius: var(--radius-s);
  border-radius: var(--radius-s);
  transition: all 300ms ease-out;
  width: 100%;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--primary-dark);
}
/*
	11.11.2025, lhi, modification mise en page - login
	14.11.2025, lhi, modification mise en page - login
*/
body {
  display: block;
  align-content: center;
  width: 100vw;
  height: 100vh;
  background-color: var(--primary);
  background: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)), url(logins.img?ww_c=LOGIN_BG_01);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}
body .login-main-wrapper {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-template-rows: auto;
  max-width: 60rem;
  margin: auto;
}
body .login-main-wrapper .login-main-msg-error .bloc-msg-error {
  display: flex;
  padding: var(--spacing-m);
  border-radius: var(--radius-s);
  border: 1px solid var(--alert);
}
body .login-main-wrapper .login-main-msg-error .bloc-msg-error::before {
  content: ' ';
  background-image: url(logins.img?ww_c=IC_ERROR);
  background-repeat: no-repeat;
  padding: var(--spacing-l) var(--spacing-xl) var(--spacing-xl) var(--spacing-l);
}
body .login-main-wrapper .login-main-msg-error .bloc-msg-error .msg-error {
  padding-left: var(--spacing-m);
  align-self: center;
}
body .login-main-wrapper .login-main-form-login {
  background-color: var(--white);
  padding: var(--spacing-2xl);
  border-bottom-right-radius: var(--radius-s);
  border-top-right-radius: var(--radius-s);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
body .login-main-wrapper .login-main-form-login #connexion {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-row-gap: var(--spacing-2xl);
}
body .login-main-wrapper .login-main-form-login #connexion .login-logo {
  display: grid;
  justify-content: center;
}
body .login-main-wrapper .login-main-form-login #connexion .login-logo img {
  margin: auto;
}
body .login-main-wrapper .login-main-form-login #connexion .login-title {
  text-align: center;
  color: var(--second);
  padding: var(--spacing-2xl);
}
body .login-main-wrapper .login-main-form-login #connexion .form-login {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-row-gap: var(--spacing-2xl);
  width: 25rem;
  margin: auto;
}
body .login-main-wrapper .login-main-form-login #connexion .form-login .form-line label {
  font-size: var(--text-s);
}
body .login-main-wrapper .login-main-form-login #connexion .form-login .form-line input {
  margin-top: 0.5rem;
}
body .login-main-wrapper .login-main-form-login #connexion .form-login .form-line input.username-input {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTM1LjYyLDQ2LjM0Yy0wLjk3LDAtMS43Ni0wLjc5LTEuNzYtMS43NnYtNS43MWMwLTMuMjctMi42Ni01LjkzLTUuOTMtNS45M0g5LjQ2Yy0zLjI3LDAtNS45MywyLjY2LTUuOTMsNS45M3Y1LjcxYzAsMC45Ny0wLjc5LDEuNzYtMS43NiwxLjc2UzAsNDUuNTUsMCw0NC41N3YtNS43MWMwLTUuMjEsNC4yNC05LjQ2LDkuNDYtOS40NmgxOC40OGM1LjIxLDAsOS40Niw0LjI0LDkuNDYsOS40NnY1LjcxQzM3LjM5LDQ1LjU1LDM2LjYsNDYuMzQsMzUuNjIsNDYuMzR6TTI4LjkyLDEzLjg5YzAtNS42NC00LjU5LTEwLjIzLTEwLjIzLTEwLjIzUzguNDYsOC4yNSw4LjQ2LDEzLjg5czQuNTksMTAuMjMsMTAuMjMsMTAuMjNTMjguOTIsMTkuNTMsMjguOTIsMTMuODl6TTI1LjM5LDEzLjg5YzAsMy43LTMuMDEsNi43LTYuNyw2LjdzLTYuNy0zLjAxLTYuNy02LjdzMy4wMS02LjcsNi43LTYuN1MyNS4zOSwxMC4yLDI1LjM5LDEzLjg5eiIgc3R5bGU9ImZpbGw6IzMzMyI+PC9wYXRoPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-size: 22px;
  background-position: left 0.5rem center;
}
body .login-main-wrapper .login-main-form-login #connexion .form-login .form-line input.password-input {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTQwLjk0LDIxLjA3aC0zLjEzdi03Ljg1QzM3LjgxLDUuOTMsMzEuODgsMCwyNC41OSwwUzExLjM2LDUuOTMsMTEuMzYsMTMuMjJ2Ny44NWgtMi4zYy0zLjUxLDAtNi4zNywyLjg2LTYuMzcsNi4zN3YxNi4xOGMwLDMuNTEsMi44Niw2LjM3LDYuMzcsNi4zN2gzMS44OGMzLjUxLDAsNi4zNy0yLjg2LDYuMzctNi4zN1YyNy40NUM0Ny4zMSwyMy45Myw0NC40NSwyMS4wNyw0MC45NCwyMS4wN3pNMTUuNSwxMy4yMmMwLTUuMDEsNC4wOC05LjA5LDkuMDktOS4wOXM5LjA5LDQuMDgsOS4wOSw5LjA5djcuODVIMTUuNVYxMy4yMnpNNDMuMTgsNDMuNjNjMCwxLjI0LTEuMDEsMi4yNC0yLjI0LDIuMjRIOS4wNmMtMS4yNCwwLTIuMjQtMS4wMS0yLjI0LTIuMjRWMjcuNDVjMC0xLjI0LDEuMDEtMi4yNCwyLjI0LTIuMjRoMzEuODhjMS4yNCwwLDIuMjQsMS4wMSwyLjI0LDIuMjRWNDMuNjN6IiBzdHlsZT0iZmlsbDojMzMzIj48L3BhdGg+PC9zdmc+");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: left 0.5rem center;
}
body .login-main-wrapper .login-main-msg-info {
  border-bottom-left-radius: var(--radius-s);
  border-top-left-radius: var(--radius-s);
  background-color: #4D50B3B8;
  display: grid;
  grid-template-rows: 1fr 0.5fr;
}
body .login-main-wrapper .login-main-msg-info .title-h1 {
  color: var(--white);
  margin: auto;
}
body .login-main-wrapper .login-main-msg-info #messages {
  background-color: #f5e965;
  margin: var(--spacing-xl);
  border-bottom-right-radius: var(--radius-2xl);
  padding: var(--spacing-s);
  width: 200px;
}
body .login-main-wrapper .login-main-msg-info #messages ul {
  list-style-type: none;
  margin: 0;
  padding: var(--spacing-s);
}
body .login-main-wrapper .login-main-msg-info #messages ul li {
  /* &:before {
            @tag-size: 22px;
            @icone-size: calc(@tag-size - 4px);

            .build-icone-content(@EPFL-FILE-TEXT, @icone-size, var(--primary));
            position: absolute;
            //top: calc((@tag-size / 2) * -1);
            //left: calc((@tag-size / 2) * -1);
            //width: @tag-size;
            //height: @tag-size;
            background-color: var(--second);
          }*/
}
body .login-main-wrapper .login-main-msg-info #messages ul li .message-header h1 {
  display: grid;
  margin: 0;
  font-size: var(--text-s);
}
body .login-main-wrapper .login-main-msg-info #messages ul li .message-header h1 small {
  font-size: var(--text-xs);
  padding: var(--spacing-s);
  font-weight: normal;
  font-style: italic;
}
body .login-main-wrapper .login-main-msg-info #messages ul li .message-content p {
  font-size: var(--text-s);
}
@media (max-width: 768px) {
  .login-main-wrapper {
    display: block !important;
    max-width: 30rem !important;
  }
  .login-main-wrapper .login-main-msg-info {
    border-bottom-right-radius: var(--radius-s);
    border-top-right-radius: var(--radius-s);
    padding: var(--spacing-xl);
    grid-template-rows: initial !important;
  }
  .login-main-wrapper .login-main-msg-info .message-header h1 {
    padding: 0 !important;
  }
  .login-main-wrapper .login-main-msg-info #messages {
    width: 85% !important;
  }
  .login-main-wrapper .login-main-form-login {
    border-bottom-left-radius: var(--radius-s);
    border-top-left-radius: var(--radius-s);
  }
  .login-main-wrapper .login-main-form-login .form-login {
    width: auto !important;
  }
  .login-main-wrapper .login-main-form-login .login-title {
    padding: 0 !important;
  }
}
/*
@primary: #28384c;
@second: #d5072a;
@black: #363636;

@icon-login: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTM1LjYyLDQ2LjM0Yy0wLjk3LDAtMS43Ni0wLjc5LTEuNzYtMS43NnYtNS43MWMwLTMuMjctMi42Ni01LjkzLTUuOTMtNS45M0g5LjQ2Yy0zLjI3LDAtNS45MywyLjY2LTUuOTMsNS45M3Y1LjcxYzAsMC45Ny0wLjc5LDEuNzYtMS43NiwxLjc2UzAsNDUuNTUsMCw0NC41N3YtNS43MWMwLTUuMjEsNC4yNC05LjQ2LDkuNDYtOS40NmgxOC40OGM1LjIxLDAsOS40Niw0LjI0LDkuNDYsOS40NnY1LjcxQzM3LjM5LDQ1LjU1LDM2LjYsNDYuMzQsMzUuNjIsNDYuMzR6TTI4LjkyLDEzLjg5YzAtNS42NC00LjU5LTEwLjIzLTEwLjIzLTEwLjIzUzguNDYsOC4yNSw4LjQ2LDEzLjg5czQuNTksMTAuMjMsMTAuMjMsMTAuMjNTMjguOTIsMTkuNTMsMjguOTIsMTMuODl6TTI1LjM5LDEzLjg5YzAsMy43LTMuMDEsNi43LTYuNyw2LjdzLTYuNy0zLjAxLTYuNy02LjdzMy4wMS02LjcsNi43LTYuN1MyNS4zOSwxMC4yLDI1LjM5LDEzLjg5eiIgc3R5bGU9ImZpbGw6IzI4Mzg0YyI+PC9wYXRoPjwvc3ZnPg==");
@icon-pwd: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTQwLjk0LDIxLjA3aC0zLjEzdi03Ljg1QzM3LjgxLDUuOTMsMzEuODgsMCwyNC41OSwwUzExLjM2LDUuOTMsMTEuMzYsMTMuMjJ2Ny44NWgtMi4zYy0zLjUxLDAtNi4zNywyLjg2LTYuMzcsNi4zN3YxNi4xOGMwLDMuNTEsMi44Niw2LjM3LDYuMzcsNi4zN2gzMS44OGMzLjUxLDAsNi4zNy0yLjg2LDYuMzctNi4zN1YyNy40NUM0Ny4zMSwyMy45Myw0NC40NSwyMS4wNyw0MC45NCwyMS4wN3pNMTUuNSwxMy4yMmMwLTUuMDEsNC4wOC05LjA5LDkuMDktOS4wOXM5LjA5LDQuMDgsOS4wOSw5LjA5djcuODVIMTUuNVYxMy4yMnpNNDMuMTgsNDMuNjNjMCwxLjI0LTEuMDEsMi4yNC0yLjI0LDIuMjRIOS4wNmMtMS4yNCwwLTIuMjQtMS4wMS0yLjI0LTIuMjRWMjcuNDVjMC0xLjI0LDEuMDEtMi4yNCwyLjI0LTIuMjRoMzEuODhjMS4yNCwwLDIuMjQsMS4wMSwyLjI0LDIuMjRWNDMuNjN6IiBzdHlsZT0iZmlsbDojMjgzODRjIj48L3BhdGg+PC9zdmc+");
@img-bg-login-xs: url(logins.img?ww_c=LOGIN-BACKGROUND-XS);
@img-bg-login-s: url(logins.img?ww_c=LOGIN-BACKGROUND-S);
@img-bg-login-m: url(logins.img?ww_c=LOGIN-BACKGROUND-M);
@img-bg-login-l: url(logins.img?ww_c=LOGIN-BACKGROUND-L);
@img-bg-login-xl: url(logins.img?ww_c=LOGIN-BACKGROUND-XL);

* {
-webkit-font-smoothing: antialiased;  
-moz-osx-font-smoothing: grayscale;    
}

html,
body {
margin: 0;
padding: 0;
} 

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
display: grid;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
padding: 0 1rem;
font-size: 1rem;
font-family: @primary-font-standard;
background-image: @img-bg-login-xs;
background-repeat: no-repeat;
background-position: left center;
background-size: cover;

.login-wrapper {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"error"
"login"
"message";
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);

padding: 2rem;
border: 1px solid @gray-light;
border-radius: 1rem;

#error {
grid-area: error;
background-color: @alert-ultra-light;
border: 1px solid @alert;
color: @alert-dark;
padding: 1rem;
border-radius: 0.3rem;
margin-bottom: 1rem;
}

#connexion {
grid-area: login;

.login-logo {
display: grid;
align-items: center;
justify-content: center;
margin: 1rem 0;

img {

}
}

.form-login {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto auto;
grid-row-gap: 1rem;
align-items: center;

.form-line {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto;
grid-row-gap: 0.3rem;
}
}
}


#messages {
grid-area: message;

ul {
background-color: white;
border-radius: 0.3rem;
padding: 0.5rem;
max-height: 300px;
overflow-y: auto;

li {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, auto);
grid-template-areas: "titre"
"texte"
"lien";
grid-column-gap: 1rem;
grid-row-gap: 0.3rem;
align-items: center;
border-bottom: 1px solid @gray-light;
margin-bottom: 0.8rem;

h1, p, a {
font-size: 0.7rem;
}

h1 {
grid-area: date;
font-size: 0.8rem;
color: @second;
font-weight: bold;
margin: 0;

small {
font-size: 0.6rem;
color: @gray-dark;
font-weight: normal;
margin-left: 0.5rem;
}
}

p {
grid-area: texte;
color: @black;
margin: 0;
margin-bottom: 0.5rem;
}

a {
grid-area: lien;
color: @second;
text-decoration: none;
transition: all 0.3s ease-out;

&:hover {
text-decoration: underline;
}
}

&:last-child {
border-bottom: none;
margin-bottom: 0;
}
}
}
}
}

input {
outline: none;

&[type="text"], 
&[type="password"] {
font-size: 1rem;
position: relative;
border: 1px solid #ccc;
border-radius: 0.3rem;
padding: 0.5rem 0.5rem 0.5rem 2.5rem;
width: auto;
}

&[type="text"] {
background-image: @icon-login;
background-repeat: no-repeat;
background-position: left 0.5rem center;
background-size: 1.2rem;
}

&[type="password"] {
background-image: @icon-pwd;
background-repeat: no-repeat;
background-position: left 0.5rem center;
background-size: 1.2rem;
}

&[type="submit"] {
border: 1px solid #ccc;
border-radius: 0.3rem;
padding: 0.5rem;
background-color: @second;
font-size: 1rem;
color: #fff;
cursor: pointer;
transition: all 0.3s ease-out;

&:hover {
background-color: darken(@second, 10%);
}
}
}
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
body {
background-image: @img-bg-login-s;
}
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
body {
background-image: @img-bg-login-m;
}
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
body {
background-image: @img-bg-login-l;
}
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
body {
background-image: @img-bg-login-xl;

.login-wrapper {
max-width: 500px;
}
}
}
*/