*, *::before, *::after{box-sizing:border-box;}
*{margin:0; padding:0;}
html:focus-within{scroll-behavior:smooth;}
a:not([class]){text-decoration-skip-ink:auto;}
img, picture, video, canvas{max-width:100%; height:auto; vertical-align:middle; font-style:italic; background-repeat:no-repeat; background-size:cover;}
input, button, textarea, select{font:inherit;}
body, html{height:100%; scroll-behavior:smooth;}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap:break-word;}
p {text-wrap:pretty;}
h1, h2, h3, h4, h5, h6 {text-wrap:balance;}
@media (prefers-reduced-motion: reduce){
    html:focus-within {scroll-behavior:auto;}
    *, *::before, *::after {animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; transition:none;}
}

:root {
  --standard: #323232;
  --placeholder: #ced4db;
  --blue: #014982;
  --darkblue: #002c4f;
  --purple: #6658b5;
  --logintext: #8dbbce;
}

html {font-family:system-ui, sans-serif; color:#014982;}
body {font-size:1rem; line-height:1.4; background-color: var(--blue); background: linear-gradient(150deg, var(--darkblue) 10%, var(--blue) 75%, var(--purple) 100%); width:100%; height:100%;}

input[type="text"], select, textarea, input[type="password"], .logininput2 input  {width:94%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

.containerLogin {max-width:300px; width:100%; margin:auto; height:50%; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

.logintitle {color:#fff; font-size:3em; font-weight:600;}

.logintext {position:relative; top:0px; left:0px; margin:20px 0px 20px 0px; color: var(--logintext);}
.logintext a {color: var(--logintext); text-decoration:underline;}
.logintext a:hover {color:#fff;}

.logintitle {position:relative; top:0px; left:0px; font-size:2.0em; font-weight:300; margin-bottom:20px;}
.loginlabel {position:relative; top:0px; left:0px; padding:0px 0px 3px 0px;}
.loginlabel label {background-color:transparent; color:#fff; font-size:0.9em; border-radius:0; padding:0px; text-transform:uppercase;}
.logininput, .logininput2 {padding:0px 0px 15px 0px;}
.logininput input, .logininput2 input {color:#018dcb; padding:9px; border:none; background-color:#fff; border-radius:2px; font-size:1rem;}
.logininput input:focus, .logininput2 input:focus {background-color:#c3e6f4; color:#065677; border:none;} 

.reset {float:right; padding-right:20px;}
.reset a {color:#8dbbce;}

.loginbutton button {color:#fff; font-weight:bold; cursor:pointer; background-color:#db164c; border:none; border-radius:2px; padding:9px; width:94%; font-size:1rem;}
.logincheckbox {color:var(--logintext); padding-bottom:10px;}

@media screen and (min-width:640px) {
    .containerLogin {max-width:360px;}
}