/* GENERAL */
:root {
  --logo-client: url(img/header-connexion.png);
  --logo-client-width: 350px; /* max-width: 360px */
  --logo-client-height: 115px;
  --main-bg-color: #000;
  --bg-login: #FFF;
  --main-color: #000;
  --btn-bg-color: #000;
  --btn-color: #FFF;
  --btn-bg-color-hover: #FFF;
  --btn-color-hover: #000;
  --picto-color: #000;
  --tentative-color: #000;
}

body {
  background-color: var(--main-bg-color);
}

form {
	margin: 0;
}

* {
	-khtml-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
  float: none;
}

#site *,
input[type=text], 
input[type=password], 
textarea {
  -khtml-user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;	
  font-size: 1rem;
}

.no-margin {
	margin: 0;
}
.align-right {
	text-align: right;
}
.align-left {
	text-align: left;
}
.align-center {
	text-align: center;
}

.container-fluid {
  position: relative;
  padding: 0;
}

.form-actions {
  background-color: transparent;
  border: none;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: var(--btn-bg-color);
  color: var(--btn-color);
  transition: all 0.3s ease-in-out;
}

.btn:active,
.btn:focus,
.btn:hover {
  background-color: var(--btn-bg-color-hover);
  color: var(--btn-color-hover);
  border-color: var(--btn-color-hover);
}

/* ==========================================================================
   LANGUAGE MODULE OVERRIDE
   ========================================================================== */

#languageMenu .activeLanguageDisplayer {
    background-color: var(--btn-bg-color);
}

#languageMenu .activeLanguageDisplayer .languageName, 
#languageMenu .activeLanguageDisplayer .fa {
  color: var(--btn-color);
}

#languageMenu .activeLanguageDisplayer:hover,
#languageMenu .activeLanguageDisplayer:focus,
#languageMenu .activeLanguageDisplayer:active {
    background-color: var(--btn-bg-color-hover);
}

#languageMenu .activeLanguageDisplayer:hover .languageName,
#languageMenu .activeLanguageDisplayer:hover .fa ,
#languageMenu .activeLanguageDisplayer:focus .languageName,
#languageMenu .activeLanguageDisplayer:focus .fa,
#languageMenu .activeLanguageDisplayer:active .languageName,
#languageMenu .activeLanguageDisplayer:active .fa {
    color: var(--btn-color-hover);
}

/* LOGIN */

.login  {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 95vh;
  flex-direction: column;
}

.login .content {
  background-color:var(--bg-login); 
  box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.3);
  max-width: 360px;
  width: 360px;
  margin: 0 auto; 
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logoClient {
  width: var(--logo-client-width);
  max-width: 100%;
  height: var(--logo-client-height);
  background-image: var(--logo-client);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 1rem;
}

.forget-form-content {
  display: none;
}

.login-form-content {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  margin: 0;
}

.form-group.options {
  align-self: flex-end;
}

.ticket-warning.small {
  text-align: right;
  margin-bottom: 0;
  font-size: 0.75rem;
}

.forget-password {
  font-size: 0.75rem;
}

.form-actions.login-form-content {
  align-self: flex-end;
}

.forget-form-content {
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  padding: 0 2rem;
}

.forget-form-buttons {
  display: flex;
  align-self: flex-end;
  padding: 0 2rem 0 0;
}

.forget-form-buttons .btn-delete {
  margin-right: 1rem;
}

.form-error {
  padding: 1rem 2rem;
}

.extension_Language {
  position: absolute;
  top: 0;
  right: 5px;
}
.login-form-content .fa-user,
.login-form-content .fa-lock{
  color: var(--picto-color);
}
#leftattempts{
  color: var(--tentative-color);
}

/* ==========================================================================
   Old browser warning like IE, IE mobile and Blackberry...
   ========================================================================== */

#old-browser {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  width: 100%;
  background-color: #000;
  opacity: 0.8;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 0.75rem 1.5rem 2rem;
  text-align: center;
  font-size: 1.5rem;
}

#old-browser p:first-child::before,
#old-browser p:first-child::after {
    content: " ⚠ ";
    font-size: 4rem;
    color: #f00;
}

/* grid is not supported by IE, < Edge 15, < Firefox 52, < Chrome 57, < Safari 10.1 & iOS 10.3 , < Android 5.6  */
@supports (display: grid) {
    #old-browser {
        display: none;
    }
}

body:not(.lang-fr-FR) #old-browser .fr-FR,
body.lang-fr-FR #old-browser .lang-default {
    display: none;
}