/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,300&display=swap');
/*
	light            ->         300
  regular          ->         400
	medium           ->         500
  bold             ->         600
*/

/* VARIABLES */
:root {
  --gray-0:             #1A1A1A;
  --gray-1:             #B7B7B7;
  --gray-2:             #5F5F5F;
  --gray-3:             #EBEBEB;
  /*--gray-2:             #474747;
  --gray-3:             #2C2C2C;
  --gray-4:             #404040;
  --gray-5:             #303030;
  --gray-6:             #505050;
  --gray-7:             #E9E9E9;
  --gray-8:             #868686;
  --gray-9:             #6B6B6B;
  --gray-10:            #717171;
  --blue:               #2D70BE;*/
  --red:                #620b0b;
  /*--black-alpha:        rgba(0,0,0,0.5);
  --yellow:             #FDD231;*/
  --white:              #FFFFFF;
  --dummy:              #ffcc00;
}

/* BASE */
html, body { height: 100%; width: 100%; border: none; margin: 0; padding: 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 400; color: var(--gray-1); background: var(--white); }
a:hover, a:active , a:focus, button:hover, button:active, button:focus, input:hover, input:active, input:focus, textarea:hover, textarea:active, textarea:focus { outline: 0; outline-width: 0; border: none; text-decoration: none; }
a { text-decoration: none; }
a * { pointer-events: none; }
* { box-sizing: border-box; }


/* GERAL */
*[data-view] { display: none !important; }
.login [data-view~="login"] { display: flex !important; }
.account [data-view~="account"] { display: flex !important; }
.forgot [data-view~="forgot"] { display: flex !important; }
.setnew [data-view~="setnew"] { display: flex !important; }
.reset [data-view~="reset"] { display: flex !important; }

.login [data-hide~="login"] { display: none !important; }
.account [data-hide~="account"] { display: none !important; }
.forgot [data-hide~="forgot"] { display: none !important; }
.setnew [data-hide~="setnew"] { display: none !important; }
.reset [data-hide~="reset"] { display: none !important; }


/* CONTENT */
main { height: 100%; }
main .logo { position: absolute; left: 40px; top: 40px; z-index: 2; }
main .content { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
main .form-holder { background: var(--white); min-width: 485px; width: 35%; padding: 60px 40px 40px 40px; height: 100%; display: flex; justify-content: center; align-items: center; }
main .img-holder { background-repeat: no-repeat; background-position: center; background-size: cover; flex: 1; height: 100%; }

main .form-holder .form { width: 405px; }
main .form-holder .form h1 { font-size: 3em; color: var(--gray-0); margin: 0 0 10px 0; }
main .form-holder .form h2 { font-size: 1.4em; margin: 0 0 45px 0; }
main .form-holder .form input[type="text"], main .form-holder .form input[type="password"]  { font-family: 'JetBrains Mono', monospace; font-size: 1.4em; color: var(--gray-0); width: 100%; background: none; border: none; border-bottom: solid 1px var(--gray-1); line-height: 44px; margin-bottom: 20px; }
main .form-holder .form input[type="text"]:focus, main .form-holder .form input[type="password"]:focus  { border-bottom-color: var(--gray-0); }
main .form-holder .form input[type=submit] { width: 100%; line-height: 55px; text-align: center; background: var(--gray-0); font-size: 1.6em; font-weight: 600; color: var(--white); border: solid 1px var(--gray-0); border-radius: 8px; box-shadow: 0px 4px 12px rgba(0,0,0,0.25); cursor: pointer; transition: all 0.2s ease; }
main .form-holder .form input[type=submit]:hover { background: var(--white); color: var(--gray-0); }

main .form-holder .form .no-margin { margin: 0 !important; }
main .form-holder .form .error { font-size: 1.2em; width: 100%; text-align: center; margin: 25px 0 15px 0; height: 30px; display: flex; justify-content: center; align-items: center; color: var(--red); }

main .form-holder .form .bt-submit a { display: flex; justify-content: center; align-items: center; width: 100%; line-height: 55px; text-align: center; background: var(--gray-0); font-size: 1.6em; font-weight: 600; color: var(--white); border: solid 1px var(--gray-0); border-radius: 8px; box-shadow: 0px 4px 12px rgba(0,0,0,0.25); margin-top: 45px; cursor: pointer; transition: all 0.2s ease; }
main .form-holder .form .bt-submit a:hover { background: var(--white); color: var(--gray-0); }

main .form-holder .form .checkbox { position: relative; display: block; }
main .form-holder .form .checkbox label{ display: inline-block; cursor: pointer; position: relative; font-size: 1.4em; color: var(--gray-2); padding: 0 20px; transition: all 0.5s ease; }
main .form-holder .form .checkbox label:before { content: ''; position: absolute; left: 0; top: 2px; width: 12px; height: 12px; border-radius: 3px; border: solid 1px var(--gray-1); }
main .form-holder .form .checkbox input[type=checkbox] { display: none; }
main .form-holder .form .checkbox input[type=checkbox]:checked + label:after {  content: ''; position: absolute; left: 3px; top: 5px; width: 8px; height: 8px; border-radius: 2px; background: var(--gray-0); }

main .form-holder .form .hld-infos { display: flex; justify-content: space-between; align-items: center; }
main .form-holder .form .hld-infos.last { margin-top: 20px; }
main .form-holder .form .txt { font-size: 1.4em; }
main .form-holder .form .link a { font-size: 1.4em; color: var(--gray-2); display: flex; justify-content: center; align-items: center; transition: all 0.2s ease; }
main .form-holder .form .link a img { margin-right: 10px; }
main .form-holder .form .link a:hover { opacity: 0.8; }
main .form-holder .form .link.back { width: 100%; }
main .form-holder .form .link.back a { width: 100%; }

main .form-holder .form .google { margin: 15px -10px 0 0; }
/*
main .form-holder .form .google a { display: flex; justify-content: center; align-items: center; width: 100%; line-height: 55px; font-size: 1.6em; color: var(--gray-2); border: solid 1px var(--gray-3); border-radius: 8px; margin-top: 15px; transition: all 0.2s ease; }
main .form-holder .form .google a img { margin-right: 10px; }
main .form-holder .form .google a:hover { background: var(--gray-0); border-color: var(--gray-0); color: var(--white); }
*/

main .login .img-holder { background-image: url('../images/img_login_form.jpg'); }
main .account .img-holder { background-image: url('../images/img_login_create.jpg'); }
main .forgot .img-holder { background-image: url('../images/img_login_forgot.jpg'); }
main .setnew .img-holder { background-image: url('../images/img_login_setnew.jpg'); }
main .reset .img-holder { background-image: url('../images/img_login_reset.jpg'); }

/* ALERT */
.alert { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; }
.alert .holder { position: absolute; right: 30px; bottom: -100px; background: var(--gray-0); border: solid 2px var(--gray-4); border-radius: 5px; padding: 15px; transition: all 0.5s ease; }
.alert .holder .content { font-size: 1.6em; font-weight: 500; color: var(--gray-7); }
.alert.show .holder { bottom: 30px; }


/* MEDIA QUERY */
@media (min-width: 1460px) {
	/* XXL */
}
@media (max-width: 1459.98px) {
	/* XL */
}
@media (max-width: 1199.98px) {
	/* LG */
}
@media (max-width: 991.98px) {
	/* MD */
}
@media (max-width: 767.98px) {
	/* XXS */
}
@media (max-width: 485px) {
  /* XXS */
  main .logo { left: 30px; top: 30px; }
  main .form-holder { min-width: 100%; width: 100%; padding: 50px 30px 30px 30px; }
  main .img-holder { display: none; }
}