@font-face {font-family:'Noto_Sans';src:url('/assets/fonts/Noto_Sans/NotoSans-Regular.ttf') format('truetype');font-display:swap;}

:root {
	--font: 'Noto Sans';
	--bold: 'Noto Sans Bold';
	--main-max: 1350px;
	--ad_aside-w: 30%; 
	--_active: #E24329; 
	--_bgcolor: #fff;
	--_bgcolor2: #fefefe;
	--_bgcolor3: #eee;
	--_border: #eee;
	--_bgcolor_inv: #444;
	--_color: #222;
	--_color2: #444;
	--_color_soft: #ccc;
	--_color_invert: #fff;
	--_secondary: #237ad3;
}

html[data-theme='dark'] {  
	--_bgcolor: #222;
	--_bgcolor2: #232323;
	--_bgcolor3: #282828;
	--_border: #333;
	--_bgcolor_inv: #fff;
	--_color: #fff;
	--_color2: #888;
	--_color_soft: #444;
	--_color_invert: #333;
	--bgshadow:#333;
	--_secondary: #264d75;
	#logotype { filter: invert(0); } 
}



html { margin:0; padding:0; width:100%; min-height:100vh; color:var(--_color); }
body{ font-family:'Noto_Sans';margin:0; padding:0; width:100%; height:100vh; overflow:hidden; background:var(--_bgcolor); }
br { clear:both }
ul { list-style:none; margin:0; padding:0 }
header { padding: 1em 2em; box-sizing:border-box; border-bottom: 1px solid var(--_border); }
#logotype { filter:invert(1); width:60px;}

.alert { position:fixed; padding: 5px; text-align:center; top:0; left:0; width:100vw; font-size: 15px;}
.alert.alert-success { background: green; color:#fff;}
.alert.alert-danger { background: #e64126; color:#fff}


.form {   float:left; display:block;  position:relative; width:100%; padding-bottom: 3em; }
.form ._title { font-size: 21px; margin-bottom: 10px; margin-top: 15px; text-align:center; display: block; }
.form ._subtitle { color:#555;font-size: 15px; margin-bottom: 18px; margin-top: 5px; display: block; }
.form ._info { font-size: .95em;  text-align:right; display: block; margin-top:.05em; }
.form ._info > a{ color:#4f7499; text-decoration:none;  }
b { font-weight:normal; } 

main { position:relative; margin:0; padding:0; letter-spacing:-.03em;}
main > section{ width: 100%; max-width: 450px; margin: 2em auto; display: block; position: relative; } 
form { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding: 2em 2.5em; box-sizing:border-box; border:1px solid var(--_border); border-radius:2em; background:var(--_bgcolor2);  }
form > *{ flex: 0 0 auto; margin: .6em 0 2em; box-sizing:border-box; border:0; width:100%; }
form > h1 { font-size:1.95em; text-align:center; letter-spacing:-.05em; margin-bottom:.9em; }
form > label { display:block;  margin: .3em 0 .95em; color:var(--_color); position:relative; }
form > label > span{ cursor:text; padding:.4em .4em; background:inherit; margin:0 1.6em; position:absolute; z-index:1; color:var(--_color2); font-size:1.05em; left:0; top:.4em; transition:.1s;   }
form > label > span > b{  transition:.1s; }
form > label > [data-input]{ font-family: inherit; box-sizing:border-box;  border-radius:24px; width:100%; border:0; display:block; background:var(--_bgcolor2); font-size:1.04em; border: 1px solid var(--_border);  padding:.8em 1.7em .8em; color:var(--_color);  }
form > label > [data-input]:focus { background:var(--_bgcolor); border: 1px solid var(--_secondary); outline:none;  }
form > label > [data-input].enable { background:var(--_bgcolor); border: 1px solid var(--_secondary); outline:none;  }
form > label > [data-input].error {  border: 1px solid #f92d4d;   }
form > label > [data-input]:focus + span, form > label > [data-input].enable + span{  display:block;  font-size:.95em; transition:.1s; padding:.2em .4em 0; top:-1.08em;  background:var(--_bgcolor); }
form > label > [data-input]:focus + span > b, form > label > [data-input].enable + span > b{  transition:.1s; color:var(--_secondary); }

form > [data-submit] { background:#1766b5; color:#fff; border-radius:3em; padding:.86em 2em; text-align:center; font-size: .99em; cursor:pointer; border:0; transition:.1s;  } 
form > [data-submit]:hover{ opacity:.9; transition:.1s; } 
form > div > [disabled] { background:#ddd; color:#777; transition:.2s } 
form > div > .link_alt { background:none; color:var(--_secondary);  cursor:pointer; border:0; text-decoration:none  }

textarea { min-height:100px; }

form > div > [disabled] { background:#ddd; color:#777; transition:.2s } 
#response { box-sizing: border-box; position:absolute; top: 100vh; left:0; transition:.2s; width: calc(100%); height:100vh;  padding: 20px 40px;  background:#08467d; color:#fff }
#response.ack { z-index:+4;top:0;   transition:.2s;  }
#response.ack > ._title{ font-size: 24px; }
#response.ack > ._message{ font-size: 19px; }
#response.ack > ._message_ext{ font-size: 34px; display: block; margin-top: 10px; letter-spacing: -1px}
 

#turnstile-widget  {
width: 298px; 
height: 63px; 
overflow: hidden;
}
#turnstile-widget > * {
margin-left:-1px;
margin-top:-1px;
}