/* Variables */
:root {
    --vertAps:#bbd63d;
    --vifAps:#FF4262;
    --txt:#363535;
    --color-txt-weak:#595f7a;
    --color-txt-strong:#1a203d;
    --rougeAps:#ad1015;
    --color-stroke-strong:#7a7f9e;
    --color-stroke-weak:#e4e6f0;
    --size-xxs:0.4rem;
    --size-xs:0.8rem;
    --size-s:1.6rem;
    --size-m:2.4rem;
    --size-l:3.2rem;
    --size-xl:4.8rem;
    --size-xxl:8rem;
    --size-xxxl:12rem;
  --txt-size-1:0.8rem;
  --txt-size-2:1rem;
  --txt-size-3:1.2rem;
  --txt-size-4:1.4rem;
  --txt-size-5:1.6rem;
  --txt-size-6:1.8rem;
  --txt-size-7:2rem;
  --txt-size-8:2.4rem;
  --txt-size-9:2.8rem;
  --txt-size-10:3.2rem;
  --txt-size-11:3.6rem;
  --txt-size-12:4rem;
  --txt-size-13:4.4rem;
  --txt-size-14:4.8rem;
  --txt-size-15:5.2rem;
  --txt-size-16:5.6rem;
  --txt-size-17:6rem;
  --txt-size-18:6.4rem;
  --txt-size-19:6.8rem;
  --txt-size-20:7.2rem;
  --txt-size-21:7.6rem;
  --txt-size-22:8rem;
  --txt-size-23:8.4rem;
  --txt-size-24:8.8rem;
  --txt-size-25:9.2rem;
  --txt-size-26:9.6rem;
  --txt-size-27:10rem;
  --color-brand:#4c63d9;
  --color-brand-80:#7082e1;
  --color-brand-20:#dbe0f7;
  --color-brand-5:#f6f7fd;
  --color-brand-percent:rgba(76,99,217,1);
  --color-brand-percent-80:rgba(76,99,217,0.8);
  --color-brand-percent-20:rgba(76,99,217,0.2);
  --color-brand-percent-5:rgba(76,99,217,0.05);
  --color-fill:#f5f6fa;
  --color-bg-base:#ffffff;
  --color-bg-base-percent:rgba(0,0,0,0.9);
  --color-bg-raised:#ffffff;
  --color-bg-raised-percent:rgba(0,0,0,0.85);
  --color-bg-overlay:#ffffff;
  --color-bg-overlay-percent:rgba(0,0,0,0.8);
  --color-warning:#8f6c1a;
  --color-warning-80:#a58948;
  --color-warning-20:#e9e2d1;
  --color-warning-5:#f9f8f3;
  --color-warning-percent:rgba(143,108,26,1);
  --color-warning-percent-80:rgba(143,108,26,0.8);
  --color-warning-percent-20:rgba(143,108,26,0.2);
  --color-warning-percent-5:rgba(143,108,26,0.05);
  --color-success:#067a58;
  --color-success-80:#389579;
  --color-success-20:#cde4de;
  --color-success-5:#f2f8f6;
  --color-success-percent:rgba(6,122,88,1);
  --color-success-percent-80:rgba(6,122,88,0.8);
  --color-success-percent-20:rgba(6,122,88,0.2);
  --color-success-percent-5:rgba(6,122,88,0.05);
  --color-error:#c73a3a;
  --color-error-80:#d26161;
  --color-error-20:#f4d8d8;
  --color-error-5:#fcf5f5;
  --color-error-percent:rgba(199,58,58,1);
  --color-error-percent-80:rgba(199,58,58,0.8);
  --color-error-percent-20:rgba(199,58,58,0.2);
  --color-error-percent-5:rgba(199,58,58,0.05);
  --color-info:#4c63d9;
  --color-info-80:#7082e1;
  --color-info-20:#a5b1ec;
  --color-info-5:#f6f7fd;
  --shadow-s:rgba(0,0,0,0.15) 1.95px 1.95px 2.6px;
  --shadow-m:10px 10px 14px 1px rgba(00,00,00,0.2);
  --shadow-l:rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  --radius-s:0.8rem;
  --radius-m:1.6rem;
  --radius-l:3.2rem;
}

/*reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
table {border-collapse:collapse; border-spacing:0;}

/*BASE*/
*, *::before, *::after {box-sizing:border-box;}
.btn, button, .button, a, .pf-c-button {transition:all 0.3s ease;}
.btn:hover, button:hover, .button:hover, .pf-c-button:hover {filter:brightness(1.2);}
html.login-pf, html.login-pf body, html.login-pf #wrapper {height:100vh; margin:0; padding:0;}
html.login-pf {background:var(--color-bg-base); font-size:62.5% !important;}
html.login-pf body {font-family:'Roboto',Helvetica,Arial,sans-serif; font-size:var(--txt-size-5); line-height:var(--txt-size-8); color:var(--txt);}
html.login-pf h2 {text-align:center; font-size:var(--txt-size-8);}
html.login-pf a:not(.button):not(.btn) {color:var(--rougeAps);}
html.login-pf .user .st0,
html.login-pf .icoAddUser .st1 {fill:var(--vifAps);}
html.login-pf .icoAddUser .st0 {fill:var(--color-bg-base);}
html.login-pf #wrapper {overflow-y:auto;}
html.login-pf body #wrapper .btn,
html.login-pf body #wrapper button,
html.login-pf body #wrapper input.pf-c-button,
html.login-pf body #wrapper input.pf-c-button.pf-m-primary {display:inline-block; font-size:var(--txt-size-6); height:auto; padding:var(--size-s) var(--size-m); border-radius:10px; box-shadow:none; cursor:pointer;}
html.login-pf a.btn {border-radius:20px; padding:var(--size-xxs) var(--size-s); text-decoration:none; display:inline-block;}
html.login-pf body #wrapper input[type=email],
html.login-pf body #wrapper input[type=number],
html.login-pf body #wrapper input[type=password],
html.login-pf body #wrapper input[type=tel],
html.login-pf body #wrapper input[type=text],
html.login-pf body #wrapper textarea {width:100%; outline:0; box-shadow:none; border-radius:10px; height:var(--size-xl); padding:0 var(--size-xs); border:solid 1px var(--color-stroke-strong); font-size:var(--txt-size-5); text-align:left; color:#1d2649}
html.login-pf body form,
html.login-pf .contentForm,
html.login-pf #form-container,
html.login-pf .containerForm {display:flex; flex-direction:column;}
html.login-pf body form,
html.login-pf .contentForm {gap:var(--size-s);}
html.login-pf #form-container,
html.login-pf .containerForm {gap:var(--size-l);}
html.login-pf body form#kc-reset-password-form {gap:var(--size-xl);}
html.login-pf body form .form-group {display:flex; flex-direction:column; margin:0;}
html.login-pf .alignCenter {text-align:center;}
html.login-pf body input.pf-c-button {position:relative; text-align:center; white-space:nowrap; outline:none; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; cursor:pointer; height:37px; padding:0 var(--size-s); color:#191919; font-weight:400; border-radius:4px; border:1px solid #c5c5c5; border-top-color:#c5c5c5; border-bottom-color:#bcbcbc; background-color:#fafafa; background-image:-webkit-linear-gradient(top, #fafafa 2%, #efefef 98%); background-image:linear-gradient(to bottom,#fafafa 2%, #efefef 98%); -webkit-box-shadow:inset 0 1px 0 white, inset 0 -1px 0 #e7e7e7, 0 2px 3px rgba(0, 0, 0, 0.05); box-shadow:inset 0 1px 0 white, inset 0 -1px 0 #e7e7e7, 0 2px 3px rgba(0, 0, 0, 0.05); text-shadow:0 1px 0 rgba(255, 255, 255, 0.05);}
html.login-pf body #wrapper input.pf-c-button,
html.login-pf body input.pf-c-button.pf-m-primary {display:inline-block; font-size:var(--txt-size-6); height:auto; padding:var(--size-xs) var(--size-m); border-radius:30px; box-shadow:none; cursor:pointer}
html.login-pf body input.pf-c-button.pf-m-primary {height:37px; padding:0 var(--size-s); color:#eaf4e9; font-weight:400; border-radius:4px;  text-shadow:0 -1px 0 rgba(0, 0, 0, 0.05);}
html.login-pf body .col.b .ecran2 input.pf-c-button.pf-m-primary {border:1px solid #227719; border-top-color:#257d1a; border-bottom-color:#1e6b15; background-color:#2c9720; background-image:-webkit-linear-gradient(top, #2f9f22 2%, #26881b 98%); background-image:linear-gradient(to bottom,#2f9f22 2%, #26881b 98%); -webkit-box-shadow:inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05); box-shadow:inset 0 1px 0 #46b33a, inset 0 -1px 0 #26811b, 0 2px 3px rgba(0, 0, 0, 0.05);}
html.login-pf body form .button-holder,
html.login-pf body form #kc-form-buttons {text-align:center;}
html.login-pf body .col.b .ecran2 form {gap:var(--size-s);}
html.login-pf body .col.b .ecran2 {color:#343434;}
html.login-pf body .col.b .ecran2 h2 small {font-size:60%; color:var(--txt);}
html.login-pf body .col.b .ecran2 label {font-weight:bold;}
html.login-pf body.login #wrapper .col.b .ecran1 a.btn:hover {background:#444; color:#fff;}
html.login-pf body .pf-c-form__helper-text.pf-m-error {color:var(--color-error);}
html.login-pf .bubble {display:block; position:absolute; z-index:0; top:33vh; right:21vw;}
html.login-pf .return {display:block; opacity:0.3; position:absolute; top:15px; left:15px;}
html.login-pf .return i {display:block; width:25px;}
html.login-pf .col {display:inline-block; vertical-align:top; height:100vh; box-sizing:border-box; overflow:hidden; position:fixed; top:0; bottom:0; transition:all 0.2s ease-in;}
html.login-pf .col.a {background:linear-gradient(to bottom, #f4f7fc 0%, #ffffff 78%);}
html.login-pf .col.a .logoContainer {display:block; width:90px; position:absolute; bottom:var(--size-s); left:var(--size-s); margin:0 auto !important;}
html.login-pf .col.a .logoContainer img {width:100%; height:auto;}
html.login-pf .col.b {background:var(--vertAps);}
html.login-pf .col.b .contentForm {margin-top:var(--size-m);}
html.login-pf body.login .ecran2, html.login-pf body.info .ecran2,
html.login-pf body.create .ecran1 {display:none;}
html.login-pf body.login .ecran1, html.login-pf body.info .ecran1,
html.login-pf body.create .ecran2 {display:block; padding:var(--size-m);}
html.login-pf body.login .col.a,
html.login-pf body.info .col.a {width:80%; left:0; z-index:0;}
html.login-pf body.login .col.b,
html.login-pf body.info .col.b {width:25%; padding-right:5%; right:-5%; z-index:1; box-shadow:inset 0.5px 1px 27px 0px rgba(0,0,0,0.1), -2px 0 0px 0px #fff;}
html.login-pf body.login .col.b:hover,
html.login-pf body.info .col.b:hover {right:0; padding-right:0;}
html.login-pf body.create .col.a {width:25%; background:var(--color-bg-base); box-shadow:inset -4px 0 10px -1px rgba(0,0,0,0.1); padding-left:5%; left:-5%; z-index:1;}
html.login-pf body.create .col.a:hover {left:0; padding-left:0;}
html.login-pf body.create .col.b {width:80%; right:0; left:auto; z-index:0;}
html.login-pf body.info .col.a {background:var(--vertAps); width:100%;}
html.login-pf body.info .col.b,
html.login-pf body.info .bubble,
html.login-pf body.info .col.b {display:none;}
html.login-pf body.info .col.a .logoContainer img {filter:brightness(0) saturate(100%) invert(16%) sepia(97%) saturate(0%) hue-rotate(13deg) brightness(105%) contrast(90%);}
html.login-pf .containerForm {width:460px; padding:var(--size-xl); background:rgba(255, 255, 255, 0.95); margin:8vh auto 0 auto; border-radius:20px; box-shadow:0 0 30px 15px rgba(0, 0, 0, 0.05); box-sizing:border-box; position:relative; z-index:2;}
html.login-pf .containerForm h2 i {display:block; width:45px; margin:0 auto var(--size-s) auto;}
html.login-pf .pf-c-input-group {background:none;}
html.login-pf .containerForm label {display:block; color:var(--color-txt-strong);}
html.login-pf .containerForm input[type=text],
html.login-pf .containerForm input[type=password],
html.login-pf .containerForm input[type=email] {width:100%; outline:0; box-shadow:none; border-radius:10px; height:var(--size-xl); padding:0 var(--size-xs); border:solid 1px var(--color-stroke-strong); font-size:var(--txt-size-5); color:#1d2649; box-sizing:border-box;}
html.login-pf #wrapper form .pf-c-button.pf-m-control {border-radius:0 10px 10px 0; padding:0 var(--size-s); margin-left:-7px; background:var(--color-stroke-strong); border:1px solid var(--color-stroke-strong); color:#fff;}
html.login-pf #wrapper form .pf-c-button.pf-m-control:after {display:none;}
html.login-pf .containerForm .button-holder {text-align:center;}
html.login-pf .containerForm button,
html.login-pf .containerForm input[type=submit] {background:var(--rougeAps); color:var(--color-bg-base); font-size:var(--txt-size-6); padding:var(--size-xs) var(--size-m); border-radius:30px; border:none; cursor:pointer;}
html.login-pf .containerForm .navigation {text-align:center; margin-top:var(--size-m);}
html.login-pf .containerForm .navigation a {color:var(--color-txt-weak);}
html.login-pf .contentForm {max-width:450px; margin:0 auto;}
html.login-pf .icoContainer {text-align:center; color:var(--txt); text-shadow:0px 1px 0px rgba(255,255,255,0.4);}
html.login-pf .icoContainer i {display:block; box-sizing:border-box; width:var(--size-xxl); margin:0 auto 0 auto; padding-top:25vh;}
html.login-pf .icoContainer h3 {margin:var(--size-s) 0 var(--size-m) 0; font-size:var(--txt-size-7);}
html.login-pf .icoContainer .btn {border:1px solid #444; color:#444; background:transparent;}
html.login-pf body.create .col.a .st0 {fill:var(--vifAps);}
html.login-pf .targetContainer {position:relative; height:100%;}
html.login-pf .target {display:block; cursor:pointer; position:absolute; top:0; right:0; bottom:0; left:0; z-index:10;}
html.login-pf .back-link-container {display:block; color:var(--color-txt-weak);}
html.login-pf .resetForm {gap:var(--size-l); margin-top:var(--size-s); margin-bottom:var(--size-l);}
html.login-pf body.login .col.a,
html.login-pf body.create .col.b {overflow-y:auto;}
html.login-pf .instruction.divider {border-top:1px solid var(--color-stroke-weak); padding-top:var(--size-xs);}
html.login-pf .alert-warning,
html.login-pf .alert-error,
html.login-pf .alert-success,
html.login-pf .alert-info,
html.login-pf #kc-error-message p {display:flex; gap:var(--size-xs); width:fit-content; margin-left:auto; margin-right:auto; border-radius:var(--radius-s); padding:var(--size-xs) var(--size-s); border:1px solid;}
html.login-pf .alert-warning i:before,
html.login-pf .alert-error i:before,
html.login-pf .alert-success i:before,
html.login-pf .alert-info i:before {vertical-align:middle;}
html.login-pf .alert-warning {background:var(--color-warning-5); border-color:var(--color-warning-20); color:var(--color-warning);}
html.login-pf .alert-info {background:var(--color-info-5); border-color:var(--color-info-20); color:var(--color-info);}
html.login-pf .alert-error,
html.login-pf #kc-error-message p {background:var(--color-error-5); border-color:var(--dark-color-error-20); color:var(--color-error);}
html.login-pf .alert-success {background:var(--color-success-5); border-color:var(--color-success-20); color:var(--color-success);}
html.login-pf form .form-group .alert-info {margin-top:var(--size-xs);}

html.login-pf .alert-info.secure {padding:var(--size-s);}
html.login-pf .alert-info.secure .badgeContainer {display:flex; flex-direction:column; gap:var(--size-xs);}
html.login-pf .alert-info.secure span.title {text-transform:uppercase; font-weight:bold; font-size:var(--txt-size-4); line-height:var(--txt-size-7);}

@media (max-width:1920px) {
    html.login-pf .bubble {right:15vw;}
}
@media (max-width:640px) {
    .close-btn {text-align:right;}
    html.login-pf body.login {background:var(--vertAps);}
    html.login-pf .col {position:initial; display:block; width:100% !important; height:auto; margin:0 !important; padding:0; box-shadow:none;}
    html.login-pf body.create .col.a .ecran2 {min-height:180px !important; flex:0 0 180px;}
    html.login-pf body.login .col.b {box-shadow:none;}
    html.login-pf .col.a {background:var(--color-bg-base);}
    html.login-pf .logoContainer {position:initial !important; margin:var(--size-s) auto !important;}
    html.login-pf .containerForm {width:100%; border-radius:0; box-shadow:none; padding:var(--size-s) var(--size-s) 0 var(--size-s); margin-top:0;}
    html.login-pf .containerForm h2 i {display:none;}
    html.login-pf #form-container {gap:var(--size-m);}
    html.login-pf .containerForm .navigation {margin-top:var(--size-xs);}
    html.login-pf .bubble {display:none;}
    html.login-pf .icoContainer {padding:var(--size-s) 0;}
    html.login-pf .icoContainer i {display:inline-block; vertical-align:middle; width:40px; padding-top:0; margin-right:var(--size-xs); margin-bottom:var(--size-xs);}
    html.login-pf .icoContainer h3 {display:inline-block; vertical-align:middle; margin:var(--size-xs) auto var(--size-s) auto;}
    html.login-pf .icoContainer .btn {display:block; width:80%; height:40px; margin:0 auto; font-size:var(--txt-size-5); line-height:40px; padding:0;}
}