@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {font-family: 'Open Sans', sans-serif; background-color: #888; margin: 0;}

div.main {
box-sizing: border-box; overflow: hidden; width: 97%; max-width: 70em; border-radius: 0.8em; margin: 0.7em auto; padding: 0em 2em;
background-color: #ffe; box-shadow: 0 0 2em #555;
}

h1 {
text-align: center; margin: 0 -1.4em -0.2em; padding: 0.4em; color: #ffd; line-height: 90%;
background-color: #006; background-image: linear-gradient(to bottom, #007, #005);
}

span.h1small {font-size: 0.7em;}

h2 {text-align: center; padding: 0 1em;}

span.nw {white-space: nowrap;}

p,li,h3,label {font-size: 1.3em; line-height: 1.6em;}

h3 {margin-bottom: 0;}

p.prelist,h3.prelist {margin-bottom: .3em;}

h3+p,h3+ol,p+ol,h3+p,h3+ul,p+ul {margin-top: .1em;}

li {margin-bottom: .2em;}

a {color: #22f;}

div.cognito {margin-top: -1em !important;}

input,textarea {
box-sizing: border-box;
font-size: 12pt; 
padding: .3em; 
background-color: #dde; 
border: 1px solid #448;
}
input:focus,textarea:focus {box-sizing: border-box; background-color: #fff; border: 1px solid #006;}
input[type=checkbox] {margin-right: .7em;}

button {
background-color: #006;
color: #fff;
border: 0px;
border-radius: 4px;
padding: .7em 1.5em;
font-size: 14pt;
}
button:hover {background-color: #004; color: #aaa;}
button:active {background-color: #88f; color: #aaf;}

p.footer {
font-size: 1em; font-style: oblique; color: #ddf; margin: 0 -2em; padding: 0.3em;
background-color: #006; background-image: linear-gradient(to bottom, #007, #005); text-align: center;
}

/*--------------------------------RESPONSIVE DESIGN-----------------------------*/
@media only screen and (max-width: 500px) {
 span.nw {white-space: initial;}
 br#hide {display: none;}
}