html {
    font-size: 18px;
}

body {
    font-family: verdana, sans-serif;
    font-size: 1rem;
    background-color: #fff;
}

body,
a {
    color: #49596F;
    color: #fff;
}

a:focus,
a:hover {
    text-decoration: underline;
}

div.logo {
    background-color: #220147;
    position: relative;
    width: 87px;
    height: 87px;
    max-width: 87px;
    max-height: 87px;
    overflow: hidden;
    background: transparent url("../img/ox_brand4_rev.gif") no-repeat -0px 0px;
    display: inline-block;
}

@media screen and (min-width: 769px) {
    div.logo {
        position: absolute;
        top: 0px;
        left: 0px;
    }
}

div.logo span {
    position: absolute;
    top: 132px;
    left: 132px;
}

div#canvaslogo {
    background-position-x: 0px;
    left: auto;
    right: 32px;
}

h1 {
    text-align: center;
    font-weight: 100;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}

div.canvas-login {
    background-color: rgba(0, 33, 71, 0.92);
    margin: 32px auto;
    max-width: 400px;
    border-radius: 4px;
    border: 1px solid #f3f3f3;
    padding: 1em;
    box-sizing: border-box;
}

div.login-option {
  display: inline-block;
  border: 1px white solid;
  border-radius: 4px;
  padding: 1em;
  margin: 1em;
  /* IE 11 requires three flex values. */
  flex: 1 0 35%;
}

div.login-help {
  font-size: small;
}

@media screen and (min-width: 769px) {
    div.canvas-login {
        max-width: 600px;
        width: 600px;
        margin: 5% auto;
    }
}

div.canvas-login header {
    min-height: 96px;
    text-align: center;
}

div.canvas-login header,
div.canvas-login footer,
div.canvas-login .canvas-login-choices {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    position: relative;
}

div.canvas-login-routes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

div.canvas-login-routes a {
  display: inline-block;
  white-space: nowrap;
}

@media screen and (min-width: 769px) {
    body {
        background-image: linear-gradient(transparent, transparent 90%, #2e3842), url("../img/bg-image.jpg");
        background-size: cover;
        background-attachment: fixed;
        background-position-x: 0px;
    }
}

.btn {
    background-color: #002147;
    color: #fff;
    border: 1px solid #fff;
    margin: 8px;
    padding: 8px 16px;
    -webkit-transition: background-color 1s;
    /* Safari */
    transition: background-color 1s;
    text-decoration: none;
    border-radius: 3px;
}

@media screen and (min-width: 769px) {
    .btn {
        margin: 32px 24px;
    }
}

.btn:focus,
.btn:hover {
    background-color: #fff;
    color: #002147;
    /* respecifiying colour here to override bootstrap default */
    text-decoration: none;
}

footer {
    font-size: 0.8rem;
}

footer ul {
  padding-inline-start: 0;
  padding: 8px 0px;

}

footer li {
    display: inline;
    list-style: none;
    line-height: 1.4rem;
    padding: 8px;
}

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}