@font-face {
  font-family: 'PrologueRegular';
  src: url('/css/icomoon/fonts/PrologueRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

*, html {box-sizing: border-box;}

html {scroll-behavior: smooth; }

body {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
color: #000;
font: 0.8em/1.3em Arial, "Trebuchet MS";
background:#FBFBFB; }
small{color:#707070;}

main {width:350px;max-width:350px;display:flex;justify-content:center;align-items:center;flex:1;margin:1em auto;padding:1em;}
footer{padding:1em;text-align:center;}

a:link, a:visited{color:#0038FF;text-decoration:none; }

a:hover, a:active{color:#000;}

h1, h2, h3, h4 {font-family:"PrologueRegular", Arial, Sans-serif;line-height:1.3em;margin:0 0 0.5em 0;padding:0;}

.loginCont{width:100%;display:flex;flex-direction:column;padding:1em;}
.loginHeader{text-align:center;}
.loginHeader img{width:150px;margin-bottom:1em;}
.loginMain{width:100%;display:flex;flex-direction:column;margin:1em 0;padding:1.5em;border:solid 1px #F0F0F0;border-radius:5px;background:#fff;}
.loginMain form{}
.loginMain input{width:100%;padding:1em;border:solid 1px #F0F0F0;border-radius:5px;}
.loginMain input[type="text"]:focus{border:solid 1px #0038FF;}
.loginMain button{width:100%;padding:1em 1.5em;color:#fff;border:none;border-radius:5px;background:#0038FF;}
.loginMain button:active, .loginMain button:hover{background:#000;cursor:pointer;}
.loginMain ul{display:flex;flex-direction:column;gap:1.5em;margin:0;padding:0;list-style:none;}
.loginFooter{text-align:center;}
.txtRight{text-align:right;}

.error, .errorBox{color:#C86D6D;border:solid 1px #FF8A8A;background:#FFD1D1;border-radius:5px;}
.errorBox{display:block;margin:0 0 0.5em 0;padding:0.5em;}
.okBox{display:block;padding:0.5em;color:#64A76A;border:solid 1px #90EF99;background:#E5F9E7;border-radius:5px;}

@media screen and (min-width:350px) {
  main{width:100%;}
}