/* CSS Document */

/**** 
Couleur primaire : #0F6FDE
Couleur textes : #1B2D45
Couleur textes 50% : #8790a0
Couleur textes placeholder : #5E727D
Couleur de fond : #F4F5FC
Couleur de fond de tableau : #F9F9FF
Couleur suivi inactif : #DADADD

Couleur fond popin blanche : #26477D avec opacity 0.65
Couleur fond popin bleue : #FFFFFF avec opacity 0.65

Couleur fond bleu foncé sur fond bleu : #095DBF

Couleur bordure de champs : #DADDE1
Couleur fond checkbox (on/off) : #EDEEF0
Couleur fond checkbox : #e7e9f0

Couleur valid : #2EB39A
Couleur error : #EB5757
Couleur en attente (juridique) : #F88C2D

Stats :
Couleur 1 (violet) : #8676FF
Couleur 2 (rose) : #FF708B
Couleur 3 (jaune) : #FFBA69
***/
body { font-size: 16px }
a { color:#777777; text-decoration:none; transition:color .3s; -webkit-transition:color .3s; }
a:hover, a.on { color:#0F6FDE; }
/*#KSite { position: absolute; left:50%; top:50%; width:320px; transform: translate(-50%, -50%); background-color:#FFFFFF; border-radius:10px; box-sizing: border-box; text-align: center; padding: 20px 0 70px }
#KSiteHeader { position: relative; width:inherit; background: none; }
#KSiteHeader #logo { padding:30px 0 10px; }
#KSiteHeader #logo img { width:110px; }
#KSiteMiddleLogin { position: static; left:0; padding: 0 20px 10px; margin: 0 }

input:not([type='checkbox']):not([type='color']) { border:none; border-bottom: #0F6FDE 1px solid; color:#000000; width:100%; box-sizing: border-box; font-size: 16px; padding: 15px !important; transition: all .3s; outline: none; }
form input[type='submit'] { display: none; }
input[type='text']:hover, input[type='text']:focus, input[type='password']:hover, input[type='password']:focus { border-bottom-color: #000000; }
a.btnSubmit { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 0; background-color:#0F6FDE; color:#FFFFFF; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; text-transform: uppercase; font-size: 16px; font-weight: bold; transition: all .3s; }
a.btnSubmit:hover { background-color:#000000; color:#FFFFFF; }*/

#formContainer { position: fixed; top: 20px; right: 20px; bottom: 20px; width: 600px; max-width: 100%; background-color: #FFFFFF; border-radius: 12px }
#effectRoundBlur { left: auto; right: 320px; width: 465px; height: 465px; filter: blur(230px) }

.bigContent { font-size: 32px; padding-left: 55px; margin-bottom: 60px }

#wimmovInfosContainer, #formLoginContent { position: absolute; top: 50%; transform: translateY(-50%); }
#wimmovInfosContainer { left: 0; right: 620px }
#wimmovInfosContent { display: inline-block; margin: 0 auto; font-weight: 400 }
#formLoginContent { left: 0; right: 0; }

.textLogin { margin: 40px 0 }

.formLogin { display: inline-block }
.formLogin input { width: 320px }

.linkBack { position: absolute; font-size: 14px; font-weight: 500; top: 0; left: 0; padding: 20px; color: #0F6FDE; display: inline-block }
.linkBack i { font-size: 18px; vertical-align: middle }

#errorForm div { padding: 10px 0; margin: 5px 10px; font-size: 15px; font-weight: 500; background-color:#D12F32; color:#FFFFFF; text-align: center; border-radius: 5px; }
.lostPass { display: block;  font-weight: 300; line-height: 42px; font-size: 12px }

h1::before { display: none; }

@media screen and (max-width: 1195px) {
    .bigContent { font-size: 26px }
    .bigContent + img { max-width: 80%; margin: 0 auto }
}

@media screen and (max-width: 1080px){
    .bigContent { font-size: 18px }
}

@media screen and (max-width: 950px) {
    #wimmovInfosContent { display: none; }
    #formContainer { width: auto; left: 20px }
}

@media screen and (max-width: 420px) {
    #wimmovInfosContent { display: none; }
    #formContainer { width: auto; left: 10px; top: 50%; right: 10px; bottom: auto; transform: translateY(-50%); }
    #formLoginContent { position: relative; transform: none; padding: 60px 0 30px }
    #formLoginContent .left { float: left }
    #formLoginContent .right { float: right }
}