body {
background:#c6c6c6;
}
#wholepage {
display:flex;
min-height:100vh;
justify-content:center;
align-items:center;
font-family: 'Open Sans', sans-serif;
}
#vueouter, #vueouter_admin {
position:relative;
background:#ffffff;
padding:10px;
width:500px;
}
/* Crazy high-res little screens and smartphone displays.
   * According to lots of info. online the dpi bit of this shouldn't work, but it seems to.
   * Make the whole thing bigger.
   * Can't cap it at viewport size (max-width doesn't work) so take it up in stages
   */
@media (min-resolution: 150dpi) and (min-width: 650px), (min-resolution: 2dppx) and (min-width: 650px) {  
  #vueouter {
    scale:1.2;
  }
}
@media (min-resolution: 150dpi) and (min-width: 800px), (min-resolution: 2dppx) and (min-width: 800px) {  
  #vueouter {
    scale:1.5;
  }
}
@media (min-resolution: 150dpi) and (min-width: 1050px), (min-resolution: 2dppx) and (min-width: 1050px) {  
  #vueouter {
    scale:2;
  }
}
@media (min-resolution: 150dpi) and (min-width: 1600px), (min-resolution: 2dppx) and (min-width: 1600px) {  
  #vueouter {
    scale:3;
  }
}

#vueouter_admin {
width:calc(100% - 30px);
min-height:calc(100vh - 30px);
}
#calogo {
width:50px;
height:50px;
}
h1 {
display:inline;
color:#01377f;
font-size:40px;
margin-top:0;
margin-left:15px;
position:absolute;
top:4px;
left:50px;
}
h2 {
color:#01377f;
font-size:30px;
text-align:center;
}
.errorbox {
color:red;
border:1px solid red;
margin:5px;
padding:5px;
}
#fields {
}
#fields .formrow {
padding-top:5px;
padding-bottom:5px;
}
#fields .formrow label {
display:inline-block;
width:100px;
text-align:right;
vertical-align:top;
font-size:1.2em;
}
.formrow input {
font-size:1.2em;
margin-left:5px;
}
#buttons {
text-align:center;
}
#buttons button, .btn-std, .btn-white, .btn-disabled {
background:#01377f;
color:#ffffff;
padding:8px;
font-size:1.2em;
}
#buttons button.btn-disabled, .btn-disabled {
background:#b4b4b4;
}
#buttons button.btn-white, .btn-white {
background:#ffffff;
border:3px solid #01377f;
color:#01377f;
padding-top:5px;
pading-bottom:5px;
}
#loginstatus {
padding:15px 0 15px 0;
}
.pwchange-success {
text-align:center;
font-size:1.7em;
font-weight:bold;
color:#0c710f;
margin-bottom:15px;
}
.consentscopetexts p {
margin:0;
padding:0;
}
.consentscopetexts p:nth-child(1) {
margin-top:8px;
}
.consentscopetexts p:nth-child(2) {
font-size:0.9em;
}
.logoutiframe
{
width:1px;
height:1px;
}
.logoutiframe-debug
{
width:100%;
height:150px;
margin-bottom:10px;
}
.consentskipspinner 
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#ffffff;
opacity:0.5;
background-image:url("/resources/images/spinner.svg");
background-repeat: no-repeat;
background-position: center; 
}
#grantsrow {
padding:8px 0 8px 20px;
}

/* Admin interface 
=================== */
.list table {
border-top:2px solid #c7e4ef;
margin-top:10px;
}
.list table th {
text-align:left;
font-style:italic;
}
.list table tr:nth-child(even) {
background-color:#c7e4ef;
}
#vueouter_admin .formrow, #vueouter_admin .formsectionhdg {
padding:10px;
border-bottom:3px solid #e3ecf1;
}
#vueouter_admin .formsectionhdg {
background:#c9f2fa;
font-weight:bold;
font-size:1.2em;
}
#vueouter_admin .formrow label {
display:inline-block;
width:200px;
font-weight:bold;
}
#vueouter_admin .formrow .fieldcontainer {
display:inline-block;
width:calc(90% - 200px);
min-width:200px;
}
#vueouter_admin .formrow input {
width:100%;
}
#vueouter_admin .errorbox, #vueouter_admin .successbox, #vueouter_admin .warnbox {
padding:15px;
font-weight:bold;
margin-bottom:20px;
}
#vueouter_admin .errorbox {
background:#ff7d7d;
}
#vueouter_admin .successbox {
background:#86ff99;
}
#vueouter_admin .warnbox {
background:#ffa955;
}
#vueouter_admin .ma-formfield-note {
color:#01377f;
font-size:0.8em;
font-style:italic;
}