/* override some of the styles in the class found in _layout.cshtml */
.layout-main { 
    display:flex;
    flex-direction: column; /* so that we can vertically center the mainContent div */
    justify-content: center; /* vertically center the mainContent div */
    min-height: 90vh; /* 90% of the viewport's height */
}

.mainContent{
  display: flex;
  flex-direction: column; /* vertically center the controls */
  align-items: center;
  padding: 0;
  margin-top:100px; /* the nav bar is fixed so the form scrolls under it. make sure there's a bit of buffer between the top of the form and the bottom of the nav bar. */
}

.welcome{
    font-size:30px;
    font-weight: 700;
}

.controls-container{
    min-width:350px;
    max-width:400px;
}

.mainContent .control-label{
    font-weight:600;
    margin-left:4px;
}

.input-email {
    background-repeat: no-repeat;
    padding-left: 34px; /* to leave room for the image */
    background-image: url("/img/envelope.0.0.1.svg");
    background-position: 8px center;
}

.form-control:focus{
    border:1px solid transparent;
    box-shadow: var(--box-shadow-purple);
}

/* The general error message won't work if the control is a div from what I can tell. Adding inline-block to the element causes it to take up space even if nothing is displayed
    so this rule only changes it to inline-block if there is an error message so that we can add a bit of space before the message (top margin)
*/
#GeneralError.field-validation-error {
    display: inline-block;
    margin-top: 1.5rem !important;
}