@import "roboto.css";

body {text-align: right;}
.wrapper {font-family: Roboto; font-weight: 300}
.background-image {background-size: cover; position: fixed; width: 65%; height: 100%; background-image :url("../asset/image/background.png"); background-repeat: no-repeat;}
.background-default-image {background-size: cover; position: fixed; width: 65%; height: 100%; background-image :url("../asset/image/background-default.png"); background-repeat: no-repeat;}
.barre-diagonale {position: relative; background-color: var(--primaire); transform: skew(10deg); left: 90%; float: right; width: 100%; height: 100%;}
.login-box {width: 500px; height: 600px; padding-bottom: 10px; background-color: var(--secondaire); color: white; margin:15%; transform: skew(-10deg); border-radius: 10px; font-family: Roboto;}
.logo {max-width: 100%; padding: 50px; text-align: center}
.logo img {max-width: 80%}
.input {padding-left: 60px; padding-right: 60px}
.form__group {	position: relative;	padding: 15px 0 0;	margin-top: 10px;}
.form__field { width: 100%;	border: 0; border-bottom: 2px solid var(--texte); outline: 0; font-size: 16px; color: var(--texte); padding: 7px 0; background: transparent; transition: border-color 0.2s;}
.form__field::placeholder { color: transparent;}
.form__field:placeholder-shown ~ .form__label { font-size: 16px; cursor: text; top: 5px;}
.form__label { position: absolute; top: 0; display: block; transition: 0.2s; font-size: 1rem; color: var(--texte);}
.form__field:focus {padding-bottom: 6px; font-weight: 700; border-width: 3px;}
.form__field:focus ~ .form__label { position: absolute; top: -5px; display: block; transition: 0.2s; font-size: 1rem; color: var(--terciaire); font-weight: 700;}
.form__field:required, .form__field:invalid { box-shadow: none;}
.mdp_oublie {float: left; color: var(--texte); font-weight: bold; width: 100%; }
.mdp_oublie a{color: var(--terciaire); }
.input input[type='checkbox'] {margin-right: 5px; color: var(--terciaire)}
.texte {padding-top: 40px; font-size: 14px}
.error_message {color: red; text-align: center; border-style: solid; padding: 5px; border-width: thin; border-radius: 5px; font-size: 14px; font-weight: normal;}
.error_message_pw {color: red; padding-top: 10px; text-align:center; font-size: 14px;}
.confirm_message {color: var(--terciaire); padding-top: 10px; text-align:center; font-size: 16px; }
.icon {margin-right:10px;}
.login_btn {text-align: center; font-size: 45px; color: var(--texte); background-color: transparent; border: 0px; margin-top: 10px; margin-bottom: 10px;}
.confirm_btn {border-color: var(--primaire); background-color: var(--primaire);}
.confirm_p {border-color: var(--terciaire); border-style: solid; padding: 5px; border-width: thin; border-radius: 5px; font-size: 14px;}
.dropbtn {background-color: var(--secondaire); color: white; border: none; cursor: pointer; font-weight: bold; font-size: 14px; font-family: Roboto;}	
.dropdown {position: relative; float: left;}	
.dropdown-content {display: none; position: absolute; background-color: #f1f1f1;min-width: 160px; overflow: auto; z-index: 1; text-align: left;}	
.dropdown-content a { color: black !important; padding: 12px 16px; text-decoration: none; display: block;}	
.show {display: block;}
li {list-style-type: none;}
a {text-decoration: none !important; background-color: unset !important; color: unset !important;}
.btn-primary:hover {background-color: var(--primaire) !important; border-color: var(--primaire) !important;}
.btn-primary:active {background-color: var(--primaire) !important; border-color: var(--primaire) !important;}
.btn-primary:focus {background-color: var(--primaire) !important; border-color: var(--primaire) !important;}

/* Le bouton pour installer le PWA. */
.btn-app {background-color: var(--supplementaire); color: var(--texteSupplementaire); position: fixed; bottom: 20px; right: 20px; width: 200px; display: none;}

@media (max-height: 800px) {
.login-box {margin-top: 5%; margin-bottom: 5%}
}

@media (max-width: 1770px) {
.background-image {width: 60%}
.background-default-image {width: 60%}
.barre-diagonale {left: 100%; width: 150%}
}

@media (max-width: 900px) {
.background-image {width: 100%}
.background-default-image {width: 100%}
.barre-diagonale {background-color: transparent; text-align: center; left: 0; width: 100%; transform: none;}
.login-box {width: 94%; margin: 0; margin: 3vw; transform: none; height: unset;}
.input {padding-left: 10px; padding-right: 10px}
.text_mp_oublie {float: right;}
.dropdown {float: left;}	
}

@media (max-width: 600px) {
.logo img {max-width: 100%}
}

/* Fix pour l'autocomplete de mot de passe. */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px var(--secondaire) inset;
  transition: background-color 5000s ease-in-out 0s;
}