@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;500;700&display=swap');

/* SYSTEM RESET */

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary { display: block;}
audio,canvas,video { display: inline-block;}
audio:not([controls]) { display: none; height: 0;}
[hidden] { display: none;}
html, body { width: 100%; height: 100%; }
html { font-family: 'Roboto', sans-serif;  font-style: normal; font-stretch: normal;  line-height: 22px; font-size: 15px; font-weight: 400;  letter-spacing: normal;  -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-style: normal; font-stretch: normal;  }
body { margin: 0; background: #E8EDEE;}

body.comp-msg {background: #fff;}
body.dialog {background: #fff;}
a:focus,a:active,a:hover { outline: none;}
abbr[title] { border-bottom: 1px dotted;}
b,strong { font-weight: bold;}
dfn { font-style: italic;}
* { box-sizing: border-box; outline: none;  }
mark { background: #ff0; color: #000;}
code,kbd,pre,samp { font-family: monospace, serif; font-size: 15px;}
pre { white-space: pre-wrap;}
small { font-size: 90%;}
sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup { top: -0.5em;}
sub { bottom: -0.25em;}
img { border: 0; color: transparent;}
svg:not(:root) { overflow: hidden;}
figure { margin: 0;}
fieldset { border: 1px solid #888; width: 500px; margin-bottom: 20px;}
legend { color: #888; background: #f1f1f1; border: 1px solid #888; padding: 2px 6px; }
button,input,select,textarea { font-family: inherit; margin: 0; border-radius: 3px; color: #000; font-size: 15px; }
button,input { line-height: normal;}
button,select { text-transform: none;}
button,html input[type="button"], input[type="reset"],input[type="submit"] { -webkit-appearance: none; cursor: pointer; }
button[disabled],html input[disabled] { cursor: default;}
input[type="checkbox"],input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}
button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0; border-radius: 3px; border: 0;}
input[type="text"], input[type="email"], input[type="password"], input[type="search"]{ -webkit-appearance: none; -moz-appearance: none;  appearance: none; border-radius: 3px; border: 0; height: 36px; border: 1px solid #888; padding: 5px 10px 4px; font-size: 15px;}
select { appearance: none; -webkit-appearance:none; max-width: 640px; background-color: #fff; border: 1px solid #808080; border-radius: 3px; height: 36px; padding: 7px 38px 5px 5px; width: 100%; font-size: 15px;}
select::-ms-expand { display: none;}
select { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 18px) calc(1em - 2px), calc(100% - 10px) calc(1em - 2px), calc(100% - 2.5em) 0.5em; background-size: 8px 8px, 8px 8px, 1px 22px; background-repeat: no-repeat;}
select:focus { background-image: linear-gradient(45deg, #034e81 50%, transparent 50%), linear-gradient(135deg, transparent 50%,  #034e81 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 10px) calc(1em - 2px), calc(100% - 18px) calc(1em - 2px), calc(100% - 2.5em) 0.5em; background-size: 8px 8px, 8px 8px, 1px 22px; background-repeat: no-repeat; border-color:  #034e81; outline: 0;}
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000;}
::-webkit-input-placeholder {color: #999999;}
:-moz-placeholder { color: #999999; opacity:  1;}
::-moz-placeholder { color: #999999;  opacity:  1;}
:-ms-input-placeholder { color: #999999;}
::-ms-input-placeholder { color: #999999;}
::placeholder { color: #999999;}
hr {height: 0; clear: both; float: none; display: block; border: 0; margin: 10px 0; border-top: 1px #ccc solid;}
textarea { overflow: auto; vertical-align: top; border-radius: 3px; border: 1px solid #888;}
img {vertical-align: top;}
table { border-collapse: collapse; border-spacing: 0;}
button:focus {outline:0;}
h1,h2,h3,h4,h5,h6 {margin: 0; position: relative;}
a { color: var(--mc1); text-decoration: none;}
a:hover {text-decoration: underline;}
a:hover, a:active { color: var(--mc1);  }

ul, ul li {list-style: none; margin: 0; padding: 0; display: block; position: relative;}
div, p {position: relative;}
time {color: #888; font-size: 13px;}




body,html {margin: 0; padding: 0; width: 100%; position: relative;}
body {background: #402283; height: 100vh;}
.logo {width: 240px; display: block; margin: auto;}

main {width: 100%; max-width: 360px; margin: 20vh auto 0; padding: 20px;}
footer {margin: auto; text-align: center;}