/*  ----------------------------------------------------------*/

/*  Style Sheet for Custom CSS  default theme                              V8*/

/*  Overload the original style CSS here                      */

/*  ----------------------------------------------------------*/



/* montserrat-regular - latin */

@font-face {

  font-family: "Montserrat";

  font-style: normal;

  font-weight: 400;

  src: url("/user/medias/css/font/montserrat-v23-latin-regular.eot"); /* IE9 Compat Modes */

  src: local(""),

    url("/user/medias/css/font/montserrat-v23-latin-regular.eot?#iefix")

      format("embedded-opentype"),

    /* IE6-IE8 */

      url("/user/medias/css/font/montserrat-v23-latin-regular.woff2")

      format("woff2"),

    /* Super Modern Browsers */

      url("/user/medias/css/font/montserrat-v23-latin-regular.woff")

      format("woff"),

    /* Modern Browsers */

      url("/user/medias/css/font/montserrat-v23-latin-regular.ttf")

      format("truetype"),

    /* Safari, Android, iOS */

      url("/user/medias/css/font/montserrat-v23-latin-regular.svg#Montserrat")

      format("svg"); /* Legacy iOS */

}



/* montserrat-700 - latin */

@font-face {

  font-family: "Montserrat";

  font-style: normal;

  font-weight: 700;

  src: url("/user/medias/css/font/montserrat-v23-latin-700.eot"); /* IE9 Compat Modes */

  src: local(""),

    url("/user/medias/css/font/montserrat-v23-latin-700.eot?#iefix")

      format("embedded-opentype"),

    /* IE6-IE8 */ url("/user/medias/css/font/montserrat-v23-latin-700.woff2")

      format("woff2"),

    /* Super Modern Browsers */

      url("/user/medias/css/font/montserrat-v23-latin-700.woff") format("woff"),

    /* Modern Browsers */

      url("/user/medias/css/font/montserrat-v23-latin-700.ttf")

      format("truetype"),

    /* Safari, Android, iOS */

      url("/user/medias/css/font/montserrat-v23-latin-700.svg#Montserrat")

      format("svg"); /* Legacy iOS */

}



body {

  background-image: url("../images/image_accueil_poste.png");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: right center;

  position: fixed;

  width: 100%;

  height: 100%;

}



#wrapper {

  position: absolute;

  right: 0;

  background-color: transparent;

  padding-bottom: 0px;

}

#wrapper .app.msgErr, #wrapper .app.msgWarn{
  background: rgb(238, 237, 237);
  color: #003da5;
}

#wrapper .app.msgErrsa {
  background: rgb(238, 237, 237);
  color: #003da5;
  position: absolute;
  width: 100%;
  margin-top: 30px;
  margin-left: 50px;
  text-align: left;
  padding: 10px 15px 10px 15px;
}

.app-descriptionrsa {
  text-align: justify;
  background-repeat: no-repeat;
  background-position: left center;
    background-position-x: left;
  margin: 0;
  border: 0;
  background-size: 48px;
  background-position-x: 11px;
  min-height: 48px;
}

.container {

  position: absolute;

  width: 450px;

  top: 40%;

  text-align: center;
  
}



#Bonjour {

  font-size: 14px;

  font-family: "Montserrat";

  color: #003ea5;

  font-weight: bold;

  /*text-align: center;*/

  /*left: 50%;*/

  /*width: 70%;*/

  /*transform: translate(-50%, -50%);*/

  position: absolute;

  word-wrap: break-word;

  /* margin-top: 150px; */

  right: 3%;

  top:2%;

}



div#Bonjour:before {

  content: "\F2BD";

  font-family: "Font Awesome 5 Pro", sans-serif;

  border-radius: 50px;

  position: relative;

  left: -5px;

  padding: 1px 1px 1px 5px;

  font-size: 22px;

  top: 3px;

}



/*************************************************************************************************************/

/**********************************************  LOGO DEV  ***************************************************/

/*************************************************************************************************************/



#logodev {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

}



#logodev .container {

  left: 0;

  top: 0;

  position: absolute;

  width: 150px !important;

  margin: 0;

  padding: 0;

}



#logodev .container #textLogoDev {

  border-style: solid;

  border-color: green;

  border-radius: 50px;

  color: green;

  padding: 5px 10px;

  font-size: 15px;

  position: relative;

  display: inline-block;

  background-color: white;

}



/*************************************************************************************************************/

/*************************************************************************************************************/

/*************************************************************************************************************/



/*************************************************************************************************************/

/************************************************  HEADER  ***************************************************/

/*************************************************************************************************************/



.header,

#header {

  background-color: transparent;

  border: none;

  background-image: none;

  width: 100%;

  margin-bottom: 10%;

}



.header .container,

#header .container {

  position: inherit;

  margin: 15% 0 0 0;

  height: 145px;

  padding: 0;

}

.header .logo,

#header .logo {

  background-image: url("../images/logo_laposte.svg"),url("../images/etoile.png");
  margin: 0 auto;
  width: 200px;
  height: 145px;
  background-position: center,145px 110px;
  background-size: auto,5px;
  background-repeat: no-repeat;
}


/*************************************************************************************************************/

/*************************************************************************************************************/

/*************************************************************************************************************/



/*************************************************************************************************************/

/************************************************  CONTENT  **************************************************/

/*************************************************************************************************************/



#container_milieu {

  position: relative;

  padding: 0 0 60px 0;

  padding-bottom: 60px;

  margin-top: 0%;

}



#container_milieu #contenu_specifique_application {

  margin-bottom: 30px;
  position: relative;
  top: 0px;
  /*left: 25px;*/

}



#container_milieu #contenu_specifique_application form h3 {

  width: auto;

  margin: auto;

  text-align: left;

}



#container_milieu #contenu_specifique_application,

.container #contenu_specifique_application {

  background: transparent;

}



#contenu_specifique_application > h2:first-child {

  text-align: center;

}



label.Form,

label.FormPassword {

  display: block;

  font-weight: bolder;

  bottom: 190%;

  font-size: 14px;

  font-family: "Montserrat" !important;

  color: #474747;

  left: 2px;

  width: 100%;

  text-align: left;

}



label.Password {

  display: none;

}



label.Identifiant {

  display: none;

}



#buttonQuestion {

  width: 14px;

  position: absolute;

  right: 110px;

  top: 20px;

  background: #385c9c !important;

  border-radius: 50%;

  font-size: 10px;

  height: 14px;

  line-height: 1px;

}



#AUTHENTICATION\.LOGINContainer:before {

  content: "";

}

#AUTHENTICATION\.LOGINContainer{
  top: -30px;
}


#AUTHENTICATION\.LOGINContainer > input,

#AUTHENTICATION\.PASSWORDContainer > input,

#passwordContainer > input {

  padding-left: 2px;

  padding: 3px 2px;

  font-size: 16px;

  font-family: "Montserrat" !important;

  color: #979797 !important;

  background: none;

  text-indent: 10px;

}



input#AUTHENTICATION\.LOGIN:focus,

input#AUTHENTICATION\.PASSWORD:focus,

input#password {

  color: #474747 !important;

}



#AUTHENTICATION\.PASSWORDContainer:before {

  content: "";

}



#GOOGLE_AUTHENTICATOR_CODEContainer .Form {

  display: none;

}



.links-container {

  max-width: 315px;
  margin: auto;
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.3rem;

}

.link {

  height: auto;

  flex: 1 1 0;

  width: 0;

  text-align: center;

  text-wrap: wrap;

  word-wrap: break-word;

}



.link a {

  font-size: 12px;

  font-weight: 600;

  font-family: "Montserrat" !important;

  color: #003ea5 !important;

  text-decoration-color: #003ea5 !important;

  outline-color: #002aed;

}



div.msgErr,

div.msgValid {

  width: 100%;

  border-radius: 20px;

  padding: 20px 15px 20px 15px !important;

  display: flex;

  flex-direction: row-reverse;

  align-items: center;

  justify-content: center;

}

div.msgValid {
  position: relative;
  left: 65px;
}


div.msgErr p,

div.msgValid p {

  margin: 0;

}



div.msgErr .app-description,

.msgValid .app-description {

  padding-left: 10px;

  display: block;

  min-height: 0;

}



.msgValid .app-description .nom_application {

  margin-top: 10px;

}



div.msgErr .descriptif_application,

div.msgValid .descriptif_application {

  width: 85%;

  margin-top: 5px;

}



.msgErr:before {

  margin-top: -25px;

}



.msgValid:before {

  margin-top: -45px;

  margin-left: 10px;

}

.msgErr::before, #msgErr::before{
  content: "\f071";
  margin-top: -45px;
}

.mdp_oubli {

  width: 100%;

  text-align: center;

  margin-top: 15px;

  margin-bottom: 15px;
  position: relative;
  top: 60px;
}



.mdp_oubli a {

  text-decoration: none;

  padding: 10px 15px;

  color: black;

  border-bottom: solid 1px lightgrey;

   text-decoration: none;

   padding: 10px 50px;

   color: #003ea5;

   background-size: 30px;

   display: block;

   width: 100%;

   text-align: left;

   font-weight : bold;

   text-shadow: 1px 1px 0 #FFF;

}

.mdp_oubli a[data-value="Yubikey"] {
  background: url("../images/webauthn.png") no-repeat 10px;
  background-size: 35px;
}

.mdp_oubli a[data-value="Enregistrement_Yubikey"] {
  background: url("../images/webauthn.png") no-repeat 07px;
  background-size: 30px;
}

.mdp_oubli a[data-value="Badge"] {
  background: url("../images/badge.png") no-repeat 10px;
  background-size: 35px;
}

.mdp_oubli a[data-value="TOTP"] {
  background: url(/user/medias/images/schemas/googleAuthenticator.svg) no-repeat 10px;
  background-size: 40px;
}



.mdp_oubli a[data-value="MDP"]{
  background: url("../images/MDPtest.png") no-repeat 10px;
  background-size: 25px;
}



.mdp_oubli a[data-value="Self_GAIA"]{
  background: url("../images/compte.png") no-repeat 10px;
  background-size: 25px;
}

.mdp_oubli a[data-value="Self_I2A"]{
  background: url("../images/compte.png") no-repeat 10px;
  background-size: 25px;
}

.mdp_oubli a[data-value="YOU_ARE_NOT"]{
  background: url("../images/logout.png") no-repeat 10px;
  background-size: 25px;
}

.mdp_oubli a[data-value="Retour"]{
  background: url("../images/logout.png") no-repeat 10px;
  background-size: 25px;
}

.mdp_oubli a[data-value="Changement_MDP"]{
  background: url("../images/Changement_MDP.png") no-repeat 10px;
  background-size: 25px;
}

.mdp_oubli a[data-value="Renit_MDP"]{
  background: url("../images/Renit_MDP.png") no-repeat 10px;
  background-size: 25px;
}

.mdp_oubli a[data-value="Myaccount"]{
  background: url("../images/compte.png") no-repeat 10px;
  background-size: 25px;
}

.mdp_oubli a[data-value="Enregistrement_TOTP"]{
  background: url("../images/Enregistrement_TOTP.png") no-repeat 10px;
  background-size: 25px;
}

.mdp_oubli a[data-value="Choix_TOTP"]{
  background: url("../images/Enregistrement_TOTP.png") no-repeat 10px;
  background-size: 35px;
}

.mdp_oubli a:hover {

  border: solid 1px lightgray;

  color: black;

  box-shadow : 10px 5px 5px #719fee;

}

.infos_user {

  position: absolute;

  right: 0;

  top: 0;

}



.infos_user .link_style_simple {

  border-radius: 100px;

  border: solid 2px black;

  padding: 4px 15px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.infos_user .link_style_simple::before {

  display: block;

}



#contenu_specifique_application .g-recaptcha div:first-child {

  margin: auto !important;

}


/*************************************************************************************************************/

/*************************************************************************************************************/

/*************************************************************************************************************/



/*************************************************************************************************************/

/*************************************************  FOOTER  **************************************************/

/*************************************************************************************************************/



#footer {

  font-family: "Montserrat" !important;

  font-size: 11px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1rem;

  margin-bottom: 20px;

  margin-top: 20px;

  position: absolute;

}



#footer .MentionLegal {

  color: #003ae5 !important;

  font-weight: bold;

  text-decoration: underline #003ae5 !important;

}



#footer .Mention {

  position: unset;

  margin: 0;

  padding: 0;

}



#footer .ilexrights {

  text-align: right;

  position: unset;

  margin: 0;

  padding: 0;

}



.grecaptcha-badge {

  bottom: 50px !important;

}



/*************************************************************************************************************/

/*************************************************************************************************************/

/*************************************************************************************************************/



.btn-secondary,

.btn-secondary:hover,

.btn-secondary:focus,

.btn-secondary:active {

  background-color: transparent !important;

  border-color: transparent !important;

  color: #003ea5;

  box-shadow: none;

}



[type="button"] {

  outline: none;

  border: none;

}



.fa {

  position: relative;

  top: 30%;

  height: 13px;

  width: 15px;

  display: inline-block;

  font-size: 14px;

  left: 0%;

}



#AUTHENTICATION\.QUESTION0::placeholder,

#AUTHENTICATION\.QUESTION1::placeholder,

#AUTHENTICATION\.QUESTION2::placeholder,

#AUTHENTICATION\.LOGIN::placeholder,

#AUTHENTICATION\.PASSWORD::placeholder {

  color: transparent;

}



#AUTHENTICATION\.QUESTION0Container .fa,

#AUTHENTICATION\.QUESTION1Container .fa,

#AUTHENTICATION\.QUESTION2Container .fa {

  top: 5%;

}



#AUTHENTICATION\.LOGINContainer,

#AUTHENTICATION\.PASSWORDContainer,

#passwordContainer {
  width: auto;
  /*margin: 0 auto;*/
  flex-direction: column;
  display: flex;

}



#AUTHENTICATION\.PASSWORD,

#password {

  outline: none;

  border: solid 1px #003ea5;

  /*position: relative;
  top: 10px;*/
  border-radius: 8px;
  /*left: -80px;*/
  height: 40px;
}



.input-group-append,

.input-group-prepend {

  margin-left: -55px;

  margin-block-start: 1%;

  margin-block-end: 1%;

}



#AUTHENTICATION\.PASSWORDContainer .input-group-append {

  position: absolute;

  top: -8px;

  right: 1px;

}



input[name="AUTHENTICATION.LOGIN"] {

  border-top: none !important;

  border-right: none !important;

  border-left: none !important;

  border-bottom-color: #003ea5 !important;

  outline: none;

}



input[name="cancelButton"] {

  background-color: white;

  border: 2px solid #003ea5;

  color: #003ea5;

  font-size: 18px;

  text-transform: uppercase;

  font-family: "Montserrat" !important;

}


.custom_Button {

  float: none;

  background: #003ea5;

  border-radius: 30px;

  font-size: 18px !important;

  text-transform: uppercase;

  font-family: "Montserrat" !important;

  outline-color: #002aed;

  height: 50px;

  /*width: 314px !important;*/

}



input[type="submit"] {
  margin: 0px 0px 0px 0px !important;
  top: 80px;
  right: 0px;
  position: absolute;
}



input[type="submit"] ~ .custom_Button {

  margin: 15px 0 !important;

}



.alert {

  bottom: 40px;

}



.info_user > span:nth-child(2):before {

  font-family: "Font Awesome 5 Pro", sans-serif;

  position: absolute;

  content: "\F2BD";

  font-size: 22px;

  font-weight: bold;

  margin-left: -25px;

  margin-top: -4px;

}



.info_user span,

.float_right {

  float: right;

  font-family: "Montserrat";

  margin: 0 30px 0 0;

}



.info_user > .fleche,

.info_user > span:nth-child(3) {

  display: none;

}



.info_user {

  position: relative;

  top: 15px;

  left: 10px;

  color: #003ea5;

  font-family: "Montserrat";

  font-weight: bold;

  font-size: 14px;

  padding: 0 10px 0 10px;

  float: right;

}



a.scroll_link,

a.scroll_link:visited,

a.scroll_link:hover {

  background-color: #003ea5;

  color: white;

}



.connected {

  float: right;

  margin-top: 5%;

  width: 150px;

  right: 15px;

}



#wrapper .app.msgLoading {

  background: transparent;

}



h3 {

  font-size: 16px;

  margin: 0 0 0 0;

  font-weight: bold;
  color: black;

}



#para3 {

  width: 75%;

}



div#contenu_specifique {

  text-align: left;

  width: 77%;

  font-family: "Montserrat";

  font-size: 14px;

  color: #434343;

  font-weight: bold;

  float: right;

}

div#contenu_specifique_test {

  text-align: left;
  width: 77%;
  font-family: "Montserrat";
  font-size: 14px;
  color: #434343;
  font-weight: bold;
  float: none;
  min-height: 150px;
  position: absolute;
  left: 50px;
}


/*************************************************************************************************************/

/*************************************************************************************************************/

/*************************************************************************************************************/



/*************************************************************************************************************/

/***********************************************  RESPONSIVE  ************************************************/

/*************************************************************************************************************/



@media screen and (min-width: 321px) and (max-width: 375px) {

  #AUTHENTICATION\.PASSWORDContainer > input {

    text-indent: 0px;

  }

  label.Form,

  label.FormPassword {

    display: none;

  }

  #AUTHENTICATION\.QUESTION0::placeholder,

  #AUTHENTICATION\.QUESTION1::placeholder,

  #AUTHENTICATION\.QUESTION2::placeholder,

  #AUTHENTICATION\.LOGIN::placeholder,

  #AUTHENTICATION\.PASSWORD::placeholder {

    color: #979797 !important;

  }

  #buttonQuestion {

    right: 10px;

  }

  #AUTHENTICATION\.PASSWORDContainer .input-group-append {

    top: -15px;

  }

  #logodev .container #textLogoDev {

    padding: 3px 5px;

  }

  #logodev .container {

    height: 50px;

  }

  .header .container,

  #header .container {

    margin: 20% 0 0 0;

    height: 130px;

  }

  #header {

    margin-bottom: -3%;

  }

  .header .logo,

  #header .logo {

    height: 110px;

    width: 150px;
    background-position: center,110px 83px;

  }

  #container_milieu {

    margin-top: 0%;

  }



  #container_milieu #contenu_specifique_application {

    margin-top: 15px;
    position: relative;
    top: 0px;
    width: 80%;

  }

  div.msgErr {

    padding: 15px 10px 5px 10px;

  }

  div.msgValid {
    position: relative;
    left: -50px;
  }

}



@media screen and (min-width: 376px) and (max-width: 668px) {

  #AUTHENTICATION\.PASSWORDContainer > input {

    text-indent: 0px;

  }

  label.Form,

  label.FormPassword {

    display: none;

  }

  #AUTHENTICATION\.QUESTION0::placeholder,

  #AUTHENTICATION\.QUESTION1::placeholder,

  #AUTHENTICATION\.QUESTION2::placeholder,

  #AUTHENTICATION\.LOGIN::placeholder,

  #AUTHENTICATION\.PASSWORD::placeholder {

    color: #979797 !important;

  }

  #buttonQuestion {

    right: 10px;

  }
  #wrapper .app.msgErr
  #logodev .container #textLogoDev {

    padding: 3px 5px;

  }

  #logodev .container {

    height: 50px;

  }

  .header .container,

  #header .container {

    margin: 20% 0 0 0;

    height: 130px;

  }

  #header {

    margin-bottom: 3%;

  }

  .header .logo,

  #header .logo {

    height: 110px;

    width: 150px;
    background-position: center,110px 83px;

  }

  #container_milieu {

    margin-top: 0%;

  }



  #container_milieu #contenu_specifique_application {

    margin-top: 15px;
    width: 85%;

  }

  div.msgErr {

    padding: 15px 10px 5px 10px;

  }

  div.msgValid {
    position: relative;
    left: 30px;
  }

}



@media screen and (min-width: 669px) and (max-width: 768px) {

  .header .container,

  #header .container {

    margin: 10% 0 0 0;

    height: 80px;

  }

  .header .logo,

  #header .logo {

    height: 110px;
    width: 150px;
    background-position: center,110px 83px;
  }

  #container_milieu {

    margin-top: 0%;

  }

  .mdp_oubli {
    top: 60px;
  }

  #wrapper .app.msgErrsa {
    margin-top: 100px;
    margin-left: 140px;
  }

  #wrapper {
  background-color: white;
  }

  div.msgValid {
    position: relative;
    left: 130px;
  }
}



@media screen and (min-width: 769px) and (max-width: 868px) {

  body {

    background-color: #fff;

    background-position: -400px 0px;

  }

  #header {

    margin-bottom: 15%;

  }

  .header .container,

  #header .container {

    margin: 10% 0 0 0;

    height: 60px;

  }

  .header .logo,

  #header .logo {

    height: 110px;

    width: 150px;
    background-position: center,110px 82px;

  }

  #container_milieu {

    margin-top: 0%;

  }

}



@media screen and (min-width: 321px) and (max-width: 868px) {

  body {

    background-image: none;

  }

}

@media screen and (max-height: 400px) {
  #logodev{
    position: relative;
    left: 200px;
  }
  #header{
    margin-bottom: -10%;
  }

  #header .logo {
    height: 90px;
    width: 100px;
    position: relative;
    bottom: 110px;
    margin: 0;
    background-position: center,72px 62px;
  }

  #footer {
    position: absolute;
  }

  #container_milieu {
    bottom: 120px;
    left: 20px;
  }
  
  .mdp_oubli{
    /*obliger de le garder a 50px, a cause de l'écran de MDP*/
    top: 50px;
  }

  input[name="AUTHENTICATION.LOGIN"] {
    position: relative;
    top: 30px;
  }

  #buttonQuestion {
    top: 45px;
  }

  #wrapper .app.msgErrsa {
    margin-top: 90px;
    background: rgb(223, 223, 223);
  }

  #wrapper {
    background-color: white;
  }

  #contenu_specifique_application {
    top: 0px;
  }

  .container {
    top: 10%;
  }

  div.msgErr {
    padding: 10px 15px 10px 15px !important;
  }

}

.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text {

    border-top-left-radius: 0;

  border-bottom-left-radius: 0;

}



form {

   margin: 0 0;
   margin-right: 10%;
   position: relative;

}

/*************************************************************************************************************/

/*************************************************************************************************************/

/*************************************************************************************************************/