/* add line to refresh cache DEC 10, 2021 10:26 AM */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

html, body {
    font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
    color: var(--auth-text);
}
body {
  background-color: var(--auth-background);
}

h1,h2,h3,h4,h5 {
  margin: 0;
}

p {
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 30px;
}

a {
  font-size: 12px;
  color: var(--auth-link-text);
  text-decoration: underline;
}
a:hover {
  color: var(--auth-link-text-hover);
}
input[type="text"], input[type="password"],input[type="email"] {
  border: none;
}

button[type="submit"] {
  border-radius: 10px;
}

.auth-container {
  background-color: #F3F3F7;
  display: flex;
  margin-top: 78px;
}

/*** SIDE CONTAINER ***/
.side-container {
  display: flex;
  flex-direction: column;
}

.side-title {
  text-align: right;
  margin-right: 45px;
  margin-bottom: 52px;
}

.side-title h1 {
  font-weight: 700;
  font-size: 36px;
  line-height: 55px;
}

.side-title h2 {
  color: var(--auth-text-secondary);
  font-size: 21px;
  line-height: 31px;
}

.side-img {
  width: 475px;
  height: 475px;
  margin-bottom: 10px;
  text-align: center;
}

.side-logo {
  width: 190px;
  align-self: end;
  margin-right: 45px;
}

.side-img img , .side-logo img {
  max-width: 100%;
  height: auto;
}

.logo-mobile {
  display: none;
}

/**** MAIN CONTAINER ******/

#formAuth {
  display: flex;
  flex-direction: column;
}
.main-container {
  background-color: #FCFCFD;
  border-radius: 20px 0 0 0 ;
  width: -moz-available;          /* WebKit-based browsers will ignore this. */
  width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
  width: fill-available;
  min-height: calc(100vh - 78px);
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.auth-input-container {
  display: flex;
  flex-direction: column;
  width: 35%;
  margin: 0 auto;
}

.label-input {
  display: flex;
  flex-direction: column;
  background-color: var(--auth-input-background);
  border-radius: 5px;
  width: 100%;
  padding: 2px;
  margin-bottom: 30px;
}

.label-input label {
  font-size: 12px;
  margin-bottom: 2px;
  padding-left: 12px;
}


.input-icon-group {
  display: flex;
  justify-content: space-evenly;
  background-color: var(--auth-input-background);
  color: var(--auth-input-color);
}

.input-icon {
  width: 80%;
  background-color: var(--auth-input-background);
  color: var(--auth-input-color);
}

.user {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-image: url(../icon/designSystemIcon/user_blue.svg) !important;
}

.secret {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-image: url(../icon/designSystemIcon/eye_off.svg) !important;
}

.mail {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-image: url(../icon/designSystemIcon/mail.svg) !important;
}

.users {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-image: url(../icon/designSystemIcon/users_blue.svg) !important;
}


.btn-reset-password {
  text-align: right;
}

.btn-link {
  color: var(--auth-text);
  text-decoration: none;
  font-size: 11px;
}
.btn-link:hover {
  color: var(--auth-link-text-hover);
  text-decoration: none;
}

.btn-primary {
  width: 100%;
  height: 44px;
  border-radius: 10px !important;
  color: var(--auth-btn-color);
  background-color: var(--auth-btn-background);
  border: none;
}
.btn-primary:hover {
  color: var(--auth-btn-color-hover);
  background-color: var(--auth-btn-background-hover);
  border: none;
}

.btn {
  transition: none;
}

.btn:focus , .btn-primary:focus {
  color: var(--auth-btn-color-hover);
  background-color: var(--auth-btn-background-focus);
  border: none;
  box-shadow: none;
}

.btn:active , .btn-primary:active {
  color: var(--auth-btn-color-hover);
  /* background-color: var(--auth-btn-background-focus) !important; */
  border: none !important;
  box-shadow: none !important;
}

.btn.btn-link.btn-sm:focus , .btn.btn-link.btn-sm:active {
  color: var(--auth-text) !important;
  background-color: #FCFCFD !important;
}
 /** form bottom ***/

.auth-bottom-container {
  display: flex;
  justify-content: center;
}

.auth-text {
  font-size: 14px;
  line-height: 21px;
  justify-content: center;
}

.auth-text p {
  text-align-last: center;
  width: 90%;
  margin: 0 auto;
}

.auth-bottom-link {
  text-align: center;
}

.auth-bottom-link a {
  font-size: 12px;
}

.btn-sm.smartphone {
  background-image: url(../icon/designSystemIcon/smartphone.svg);
  background-repeat: no-repeat;
  /*width: 150px;*/
}

.btn-link.service-status {
  background-image: url(../icon/designSystemIcon/bar_chart_blue.svg);
  background-repeat: no-repeat;
  width: 150px;
}

.twitter {
  /*border: 1px solid #9590B9;*/
  max-width: 335px;
  margin: auto;
  margin-top: 30px;
}

/**** MODAL ***/

.modal-content {
  background-color: var(--auth-modal-background);
  color: var(--auth-text);
  border: none;
  border-radius: 10px;
}

.modal-header.alert-primary {
  background-color: var(--auth-modal-background);
}

.modal-title {
  color: var(--auth-text);
  font-size: 14px;
}

.close {
  opacity: 1;
  font-weight: normal;
  color: var(--auth-text);
}

.close:hover {
  color: var(--auth-btn-background-hover);
}

.modal-text {
  margin-bottom: 0;
  color: var(--auth-link-text);
}

.input-group-text {
  border: none;
  background-color: var(--auth-input-background);
}
/**** OTHER ***/
.auth {
  padding:1em 1em 0 1em;
  margin-bottom: 1em;
}

.form-check-label{
  font-size: 14px;
}

.form-check-label:hover {
  color: var(--auth-link-text-hover);
}
.alert {
  border: none;
  background-color: transparent;
  margin: 10px 0;
  padding: 0;
  font-size: 14px;
}
.alert-warning {
  color: #E40424ed;
}
.alert-success {
  color: #55BDBE;
}

.text-danger {
  font-size: 14px;
  color: #E40424ed !important;
}


/**** Not used ****/
.fadeout {
  animation: fadeout 0.6s;
}
.fadein {
  animation: fadein 0.6s;
}

.reduceout {
  animation: reduceout 0.6s;
}
.reduced {
  opacity: 0.3;
}

@keyframes fadeout {
    0% { opacity:1; }
    100% { opacity: 0; }
}
@keyframes fadein {
    0% { opacity:0; }
    100% { opacity: 1; }
}
@keyframes reduceout {
  0% { opacity:1; }
  100% { opacity: 0.3; }
}
.formError {
    border: 1px solid #E40424ed;
}
.tfacode {
  margin-left: 1.5em;
  margin-right: 1.5em;
  border: 2px solid #ECBF00;
  background-color: #CAC8DC;
  font-size: large;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-weight: bolder;
}
.tfacode:focus {
  border: 2px solid #ECBF00;
  background-color: #CAC8DC;

}
.noselect {
  user-select: none;
}


/** trick pour surcharger l'interpretation de l'autofill de Chrome ***/
input:-webkit-autofill {
  transition-delay: 3600s;
}
.wall {
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  z-index:9999
}
@media (prefers-color-scheme: dark) {
  :root {

    --auth-background:#F3F3F7;
    --auth-text: #2C2274;
    --auth-text-secondary: #9590B9;

    --auth-btn-background:#2C2274;
    --auth-btn-color:#F3F3F7;
    --auth-btn-background-hover:#181340;
    --auth-btn-background-focus:#9590B9;
    --auth-btn-color-hover:#F3F3F7;

    --auth-link-text:#9590B9;
    --auth-link-text-hover:#EB5A77;

    --auth-input-background:#F3F3F7;
    --auth-input-color:#2C2274;

    --auth-modal-background:#FCFCFD;

    /* En attendant un visuel pour theme sombre

    --auth-background:#333333;
    --auth-text:#F3F3F7;

    --auth-btn-background:#EB5A77;
    --auth-btn-color:#F3F3F7;
    --auth-btn-background-hover:#181340;
    --auth-btn-color-hover:#EB5A77;

    --auth-link-text:#C3C3C3;
    --auth-link-text-hover:#F3F3F3;

    --auth-input-background:#F3F3F3;
    --auth-input-color:#2C2274;*/
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --auth-background:#F3F3F7;
    --auth-text: #2C2274;
    --auth-text-secondary: #9590B9;

    --auth-btn-background:#2C2274;
    --auth-btn-color:#F3F3F7;
    --auth-btn-background-hover:#181340;
    --auth-btn-background-focus:#9590B9;
    --auth-btn-color-hover:#F3F3F7;

    --auth-link-text:#9590B9;
    --auth-link-text-hover:#EB5A77;

    --auth-input-background:#F3F3F7;
    --auth-input-color:#2C2274;

    --auth-modal-background:#FCFCFD;
  }
}

/**** Media queries ****/

@media only screen and (max-width: 1220px) {
  .auth-input-container{
    width: 50%;
  }
}

@media only screen and (max-width: 1024px) {

  .side-img{
    height: 370px;
    width: auto;
    margin: 0 20px;
  }

  .side-title h2 {
    font-size: 18px;
  }

  .side-title h1{
    font-size: 30px;
  }

  .auth-input-container{
    width: 75%;
  }
}


@media only screen and (max-width: 768px) {
  a {
    margin: auto;
  }

  .auth-container {
    flex-direction: column;
    margin-top: 0;
    background-color: #2C2274;
  }
  .side-title {
    text-align: left;
    margin: 80px 0 40px 30px;
  }

  .side-title h1,   .side-title h2{
    color: #FFF;
  }

  .side-img, .side-logo {
    display: none;
  }

  .main-container {
    border-radius: 20px 20px 0 0;
  }

  .logo-mobile {
    display: block;
    width: 190px;
    margin: 80px 0 40px 40px;
  }
  .logo-mobile img {
    width: 100%;
    height: auto;
  }
}



/* connexion Arcad**/

button.btn.btn-primary.arcad-logo {
  background-color: inherit;
  width: auto;
}

button.btn.btn-primary.arcad-logo img {
  max-width: 100%;
  max-height: 40px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  cursor: pointer;
}

.login-arcad {
  width: 100%;
  height: 30px;
  position: relative;
}

.login-ou {
  text-align: center;
  width: 160px;
  position: relative;
  left: 50%;
  transform: translateX(-80px);
  top: 10px;
  background: #FCFCFD;
}

.login-separator {
  width: 100%;
  height: 1px;
  border-top: 1px solid #E5E4EE;
}

.select-arcad {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

select#configname {
  background-color: #f3f3f7;
  border: none;
  height: 50px;
  color: #2c2274;
}

select#configname:focus {
  /* box-shadow: 0 0 0 0.15rem rgb(149 144 185 / 25%); */
  box-shadow: none;
}

#logo_login{
	max-width: 225px;
  height: auto;
  width: 100%;
	margin-top: 10px;
  transition: transform 0.3s ease;
}

@media (min-width:768px) {
  #logo_login {
    transform: scale(2);
    transform-origin: center;
  }
}