/*

This stylesheet builds upon Bootstrap 4, adding styling for
University of Oxford administrative systems,
with a strong emphasis on viewing and editing data.

*/
/*
-------------------------------------------------------------------------------

FONTS

make sure all referenced fonts are websafe or provided (e.g. by Google Fonts)

-------------------------------------------------------------------------------
*/
@import url(https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap);
html body,
body,
html {
  background-color: #e0ded9;
  height: auto; }

html body,
body,
html,
#content .bodytext table {
  font-size: 16px;
  font-family: PT Sans, sans-serif; }

footer {
  font-size: 0.9rem; }

html body button,
html body .nav-tabs .nav-item,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: PT Sans, sans-serif;
  font-weight: bold; }

#content .bodytext,
.bodytext {
  font-family: PT Serif, serif;
  font-size: 1.25rem; }

#content a,
p a,
.bodytext a,
p a:hover,
.bodytext a:hover,
p a:focus,
.bodytext a:focus {
  text-decoration: underline; }

header a:not(.btn),
footer a:not(.btn),
header a,
footer a {
  text-decoration: none; }

/*
-------------------------------------------------------------------------------

COLOURS

-------------------------------------------------------------------------------
*/
html body button,
html body .nav-tabs .nav-item,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
body,
html {
  color: #3c3c3b; }

html body a,
html body a:link,
html body a:visited,
a,
a:link,
a:visited {
  color: #002147; }

html body a:hover,
html body a:focus,
html body a:active,
a:hover,
a:focus,
a:active {
  color: #000; }

/*
-------------------------------------------------------------------------------

LAYOUT


-------------------------------------------------------------------------------
*/
.container {
  max-width: 1600px; }

/* extend bootstrap's default max container width to 1600px */
@media (min-width: 992px) {
  .container {
    max-width: 1600px; } }

/* HEADER AND NAVBAR STUFF START */
.mainnav .container {
  background-color: #334d6c;
  color: #fff;
  padding: 8px;
  height: 112px; }

@media screen and (min-width: 992px) {
  .mainnav .container {
    height: 147px;
    padding: 16px; } }

.sitename {
  display: inline-block;
  font-size: 2rem;
  margin-left: 2rem; }

#navbarNav ul:first-child {
  padding-right: 64px; }

@media screen and (min-width: 1200px) {
  body {
    /*  padding-top: 148px;*/ } }

.navbar,
.mainnav .nav-link,
.navbar-expand-md,
#nav.navbar {
  padding: 0; }

.navbar.mainnav .navbar-collapse {
  text-align: right; }

.navbar.mainnav .container a,
.navbar.mainnav .container a:active,
.navbar.mainnav .container a:visited,
.navbar.mainnav .container a:link,
.navbar.mainnav .container a:hover {
  color: #fff;
  display: block; }

.navbar.mainnav .container .dropdown-menu a {
  color: #444; }

.navbar.mainnav .container .dropdown-menu a:active {
  color: #fff; }

.my-profile .dropdown-toggle::after {
  display: none; }

#skip-to-content:focus {
  position: absolute;
  top: 0;
  height: 3rem;
  width: 10rem;
  padding: 8px;
  text-align: right;
  z-index: 10000; }

.nav-item {
  margin: 0.5rem; }

.nav-item.register,
.nav-item.signIn,
.nav-item.signOut,
.nav-item.user {
  margin-top: 0.75rem; }

.dropdown-item {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent; }

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item.active a,
.dropdown-item:active a {
  color: #fff;
  text-decoration: none;
  background-color: #334d6c; }

.dropdown-item:focus,
.dropdown-item:hover {
  border-color: rgba(0, 0, 0, 0.15); }

.navbar-expand-lg .navbar-nav .nav-link {
  border-bottom: 4px solid transparent;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0.125rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem; }

.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-expand-lg .navbar-nav .nav-link:focus {
  border-bottom-color: #fff; }

/* don't do underline for the my-profile menu*/
.navbar.mainnav .my-profile a:focus,
.navbar.mainnav .my-profile a:hover {
  border-bottom-color: transparent; }

/* mobile nav styling starts */
@media screen and (max-width: 992px) {
  #navbarNav {
    background-color: white;
    margin: 8px 8px 0 8px;
    padding-top: 1rem; }
  #navbarNav ul:first-child {
    background-color: white;
    padding-right: 1rem; }
  .navbar.mainnav .container a {
    font-size: 1.25rem; }
  .navbar.mainnav .container a,
  .navbar.mainnav .container a:active,
  .navbar.mainnav .container a:visited {
    color: #444; }
  .navbar.mainnav .container a:link,
  .navbar.mainnav .container a:hover {
    color: #222; }
  .nav-item {
    margin: 0.5rem 0; }
  .dropdown-item:hover,
  .dropdown-item:focus {
    background-color: #fff; }
  .dropdown-menu {
    text-align: right;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
    background-color: #fbfaf8; }
  .my-profile {
    margin-top: 16px; } }

/* mobile nav styling ends */
/* HEADER AND NAVBAR STUFF END */
#content {
  padding: 1rem 1rem 2rem 1rem;
  background-color: #fbfbfb; }

footer {
  padding: 1rem 1rem 1rem 1rem;
  margin: 0;
  min-height: 176px; }

@media screen and (min-width: 1600px) {
  footer {
    margin-bottom: 2rem; } }

@media screen and (min-width: 1700px) {
  footer {
    margin-bottom: 4rem; } }

@media screen and (min-width: 1800px) {
  footer {
    margin-bottom: 6rem; } }

@media screen and (min-width: 992px) {
  #content {
    padding: 2rem 1rem 3rem 1rem; }
  footer {
    padding: 2rem 1rem 1rem 1rem; } }

.jumbotron,
footer {
  color: #575757;
  border-bottom: 1px solid rgba(224, 222, 217, 0.5);
  border-top: 1px solid rgba(224, 222, 217, 0.5); }

.card-header,
.jumbotron,
footer {
  background-color: #fbfaf8; }

.card-header {
  padding: 0 0.5rem 0.25rem 0.5rem; }

/*
-------------------------------------------------------------------------------

HEADERS


-------------------------------------------------------------------------------
*/
h1 {
  margin: 1rem 0;
  font-weight: bold; }

h2,
h3,
h4,
h5,
h6 {
  margin: 0.5em 0 0.25em 0; }

.h2,
h2 {
  font-size: 2rem; }

.h3,
h3 {
  font-size: 1.6rem; }

.h4,
h4 {
  font-size: 1.3rem; }

.h5,
h5 {
  font-size: 1rem; }

.h6,
h6 {
  font-size: 1rem;
  font-style: italic; }

.bodytext h2 {
  margin: 1em 0 0 0; }

@media screen and (min-width: 992px) {
  .bodytext h2 {
    margin: 1.5em 0 0 0; } }

.bodytext h3,
.bodytext h4,
.bodytext h5,
.bodytext h6 {
  margin: 0.5em 0 0 0; }

/*
    -------------------------------------------------------------------------------

    MAIN CONTENT


    -------------------------------------------------------------------------------
    */
/*

principle: prioritise data over metadata.

Action:  make labels, legend etc. italic instead of bold

*/
legend,
label {
  font-weight: normal;
  font-style: italic; }

/* and speaking of metadata..

styling for notes about the the mark-up in HTML templates etc.

 */
.oxstrap-metadata {
  padding: 0.5rem 0;
  color: #565656;
  font-style: italic;
  font-size: 1.25rem;
  font-family: "Courier New", monospace; }

ul.code-list li,
code {
  font-size: 0.875rem;
  color: #ad145c;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.lead-paragraph {
  font-weight: bold; }

.figure-caption {
  font-size: 0.85em;
  color: #595959; }

div.markup-example,
div.example {
  border: 1px solid rgba(224, 222, 217, 0.5);
  background-color: #fbfaf8;
  border-radius: 2px;
  padding: 1rem;
  margin: 0 0 1.5rem 0; }

h2.example,
h3.example,
h4.example,
h5.example,
h6.example {
  font-size: 1.2rem;
  opacity: 0.9;
  font-style: italic; }

/* login panel */
.centered {
  margin-left: auto;
  margin-right: auto; }

/* NOTES */
td.note-metadata {
  opacity: 0.75;
  max-width: 10rem; }

.note-author {
  font-weight: bold; }

.note-created,
.note-updated {
  font-style: italic;
  font-size: 0.9rem; }

/*
-------------------------------------------------------------------------------

FOOTER


-------------------------------------------------------------------------------
*/
footer ul {
  padding: 0; }

footer li {
  list-style: none; }

footer li a:visited,
footer li a:link {
  text-decoration: none;
  color: #444; }

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

/* CARDS */
.card {
  -webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.075); }

.accordion .card {
  padding: 0;
  -webkit-box-shadow: none;
          box-shadow: none; }

.card h2 {
  font-size: 1.2rem; }

.complex-header .card-header h2,
.complex-header .card-header h3,
.complex-header .card-header h4,
.complex-header .card-header h5,
.complex-header .card-header h6 {
  display: inline-block;
  width: auto;
  margin-right: 0.75rem;
  margin: 0.25rem 0; }

/* TABS */
/*  restyle tabs to define space using bg rather than borders  */
ul.nav-tabs .nav-link {
  border-top: 4px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  margin-bottom: -3px;
  color: #555; }

ul.nav-tabs {
  border-bottom: 4px solid #e7f0f3;
  background-color: #fbfbfb; }

ul.nav-tabs .nav-link.active,
ul.nav-tabs .nav-link.active:hover,
ul.nav-tabs .nav-link.active:focus,
ul.nav-tabs .nav-link:hover,
ul.nav-tabs .nav-link:focus {
  border-top: 4px solid #a1c4d0;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  background-color: white;
  color: #333; }

ul.nav-tabs li:first-child .nav-link.active,
ul.nav-tabs li:first-child .nav-link.active:hover,
ul.nav-tabs li:first-child .nav-link.active:focus,
ul.nav-tabs li:first-child .nav-link:hover,
ul.nav-tabs li:first-child .nav-link:focus {
  border-left: 1px solid rgba(0, 0, 0, 0.04); }

.tab-content {
  background-color: #fff;
  padding: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 1px solid rgba(0, 0, 0, 0.04);
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px; }

/* in-page nav */
.inPageNav {
  max-width: 16rem;
  /*
  if we float it...
  margin: 0 1rem 1rem 0;
  float: left;
  */ }

.inPageNav .card-header {
  padding: 0.5rem; }

.inPageNav .card-header h1,
.inPageNav .card-header h2,
.inPageNav .card-header h3,
.inPageNav .card-header h4,
.inPageNav .card-header h5,
.inPageNav .card-header h6 {
  font-size: 1.2rem;
  font-weight: normal;
  padding: 0;
  margin: 0;
  width: 100%;
  /*
  text-align: center;
  */ }

.inPageNav .card-body {
  padding: 0.5rem;
  margin: 0; }

.inPageNav .card-body ul {
  padding: 0;
  margin: 0; }

.inPageNav .card-body ul li {
  padding: 0;
  margin: 0;
  list-style: none; }

.inPageNav a,
.inPageNav a:link,
.inPageNav a:visited {
  color: #333;
  text-decoration: none; }

.inPageNav a:active,
.inPageNav a:hover,
.inPageNav a:focus {
  color: #000;
  text-decoration: underline; }

/* ACCORDIONS */
.accordion .card-header {
  background-color: #fbfaf8; }

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
  font-size: 1.3rem;
  padding: 0.5rem 0 0 0;
  margin: 0 48px 0 0;
  width: calc(100% - 48px); }

/*  complex headers for accordions */
.accordion.complex-header .card-header .complex-header-wrapper {
  width: calc(100% - 48px); }

.accordion.complex-header .card-header h2,
.accordion.complex-header .card-header h3,
.accordion.complex-header .card-header h4,
.accordion.complex-header .card-header h5,
.accordion.complex-header .card-header h6 {
  display: inline-block;
  width: auto;
  margin-right: 0.75rem; }

.accordion .card-header button {
  float: right;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: transparent;
  margin: -2rem 0 0 0;
  padding: 0;
  color: transparent;
  width: 48px;
  height: 48px;
  font-size: 0.1rem;
  overflow: hidden; }

.accordion .card-header button::after {
  font-size: 1.6rem;
  content: "\f077";
  font-family: "FontAwesome";
  font-weight: 900;
  padding: 0.25rem 0.5rem 0 0.5rem;
  margin: 0;
  display: inline-block;
  opacity: 0.8;
  color: #444; }

.accordion .card-header button:focus::after,
.accordion .card-header button:hover::after {
  color: #222;
  background-color: #e7f0f3; }

.accordion .card-header button.collapsed::after {
  content: "\f078"; }

/*
-------------------------------------------------------------------------------

FORMS

-------------------------------------------------------------------------------
*/
h2.form-section-header,
h3.form-section-header,
h4.form-section-header,
h5.form-section-header {
  font-weight: 300;
  font-style: italic;
  font-size: 1.5rem;
  margin: 0.75em 0 0.5em 0; }

.alert .form-section-header {
  font-weight: bold;
  margin-top: 0; }

h3.form-section-header {
  font-size: 1.25rem; }

h4.form-section-header {
  font-size: 1.1rem; }

h5.form-section-header {
  font-size: 1rem; }

.alert
.required-field {
  font-weight: bold;
  display: inline-block;
  position: relative; }

.alert h2,
.alert h1 {
  margin-top: 0;
  font-size: 1.25em; }

label {
  margin-bottom: 0;
  font-size: 1rem;
  /*
	min-height: 3rem;
*/ }

.form-check-inline label {
  min-height: 1rem; }

label.required-field {
  padding-top: 0; }

.fake-designer-label {
  /* style text like it's a label, when it's not...   */
  font-style: italic;
  font-weight: 400;
  font-size: 1rem; }

.form-control.email,
.form-control.password {
  max-width: 16rem; }

input.postcode {
  max-width: 7rem; }

input[type="radio"] {
  min-height: 1rem;
  min-width: 1rem; }

.hover-focus-example input,
input:hover,
input:focus,
input:active {
  border-color: #666; }

textarea {
  display: block;
  width: 100%;
  border: 1px solid #ddd; }

.form-control {
  min-width: 2.5rem;
  min-height: 48px; }

/* miscellaneous help text in forms
(outside of labels, explicit help and error texts, etc.) */
.form-text {
  font-style: italic;
  color: #595959;
  font-size: 0.9rem; }

fieldset legend,
fieldset.date legend {
  font-size: 1.1rem; }

fieldset.date legend {
  font-size: 1rem; }

legend.required-field strong {
  font-weight: normal; }

.form-check-inline div.form-text {
  display: block; }

fieldset.form-check-with-helptext div.form-check {
  vertical-align: top;
  display: inline-block;
  margin: 0 1rem 1rem 0; }

fieldset.date .compound-date-field {
  display: inline-block;
  /* max-width: 12rem;
  */
  width: 12rem;
  margin-right: 1em; }

.oxstrap-datepicker {
  max-width: 20rem;
  z-index: 1064; }

/*
-------------------------------------------------------------------------------

CALLS TO ACTION

-------------------------------------------------------------------------------
*/
a.btn,
button,
button.btn {
  font-size: 1.25rem; }

.input-group-text,
div.btn-primary .dropdown-menu,
div.btn-primary .dropdown-menu .dropdown-item:hover,
div.btn-primary .dropdown-menu .dropdown-item:focus,
a.btn-primary:visited,
a.btn-primary:link,
a.btn-primary,
.btn-primary,
.btn-primary:disabled,
.btn-primary[disabled]:hover {
  color: #616114;
  background-color: #e0e275;
  border-color: #c3c62a; }

:disabled {
  opacity: 0.5; }

div.btn-primary .dropdown-divider {
  border-top: 1px solid #c3c62a; }

.input-group-text:active,
.input-group-text:hover,
.input-group-text:focus,
div.btn-primary .dropdown-menu .dropdown-item:hover,
div.btn-primary .dropdown-menu .dropdown-item:focus,
.btn-primary.active:not(:disabled):not(.disabled),
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
a.btn-primary:hover,
a.btn-primary:active,
a.btn-primary:focus,
#skip-to-content,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  color: #3a3d00;
  background-color: #aab300;
  border-color: #c3c62a; }

.btn-danger {
  background-color: #ee768f;
  color: #5f071a;
  border-color: #be0f34; }

.btn-danger:hover,
.btn-danger:focus {
  background-color: #eb4c6c;
  color: #420614; }

div.btn-secondary .dropdown-menu,
a.btn-secondary:visited,
a.btn-secondary:link,
a.btn-secondary,
.btn-secondary {
  background-color: #e0ded9;
  color: #444;
  border-color: #ccc; }

div.btn-secondary .dropdown-divider {
  border-top: 1px solid #ccc; }

div.btn-secondary .dropdown-menu .dropdown-item:hover,
div.btn-secondary .dropdown-menu .dropdown-item:focus,
a.btn-secondary:hover,
a.btn-secondary:active,
a.btn-secondary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #c9c7c0;
  color: #222;
  border-color: #ccc; }

.icon-only::before,
.icon-button::before,
.icon-button::after {
  font-size: 1.3rem;
  font-family: "FontAwesome";
  font-weight: 900;
  padding: 0;
  margin: 0;
  display: inline-block; }

.icon-only {
  width: 3rem;
  height: 3rem;
  padding: 0;
  margin: 0;
  min-width: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  overflow: hidden; }

.icon-only::before {
  padding: 0.25rem 3rem 3rem 0.65rem;
  font-size: 1.6rem; }

.icon-only.icon-previous::before {
  padding-right: 1rem;
  padding-left: 0.75rem; }

.icon-only.icon-next::before {
  padding-left: 1rem;
  padding-right: 0.75rem; }

.icon-button::before {
  padding-right: 8px; }

.icon-button::after {
  padding-left: 8px; }

/* PREVIOUS */
.icon-previous::before {
  content: "\f053"; }

.icon-previous.icon-right::before {
  content: ""; }

.icon-previous.icon-right::after {
  content: "\f053"; }

/* NEXT */
.icon-next::before {
  content: "\f054"; }

.icon-next.icon-right::before {
  content: ""; }

.icon-next.icon-right::after {
  content: "\f054"; }

/* SAVE */
.icon-save::before {
  content: "\f0c7"; }

.icon-save.icon-right::before {
  content: ""; }

.icon-save.icon-right::after {
  content: "\f0c7"; }

/* ADD */
.icon-add::before {
  content: "\f055"; }

.icon-add.icon-right::before {
  content: ""; }

.icon-add.icon-right::after {
  content: "\f055"; }

/* REMOVE */
.icon-remove::before {
  content: "\f056"; }

.icon-remove.icon-right::before {
  content: ""; }

.icon-remove.icon-right::after {
  content: "\f056"; }

/* EDIT */
.icon-edit::before {
  content: "\f044"; }

.icon-edit.icon-right::before {
  content: ""; }

.icon-edit.icon-right::after {
  content: "\f044"; }

/* CANCEL */
.icon-cancel::before {
  content: "\f057"; }

.icon-cancel.icon-right::before {
  content: ""; }

.icon-cancel.icon-right::after {
  content: "\f057"; }

/* DELETE */
.icon-delete::before {
  content: "\f2ed"; }

.icon-delete.icon-right::before {
  content: ""; }

.icon-delete.icon-right::after {
  content: "\f2ed"; }

/* ACCEPT */
.icon-accept::before {
  content: "\f00c"; }

.icon-accept.icon-right::before {
  content: ""; }

.icon-accept.icon-right::after {
  content: "\f00c"; }

/* REJECT */
.icon-reject::before {
  content: "\f00d"; }

.icon-reject.icon-right::before {
  content: ""; }

.icon-reject.icon-right::after {
  content: "\f00d"; }

/* UP */
.icon-up::before {
  content: "\f062"; }

.icon-up.icon-right::before {
  content: ""; }

.icon-up.icon-right::after {
  content: "\f062"; }

/*
-------------------------------------------------------------------------------

FORM FEEDBACK
-------------------------------------------------------------------------------
*/
.required-field {
  font-weight: bold;
  display: inline-block;
  position: relative; }

.required-field::after {
  content: " *";
  font-size: 1.5rem;
  color: rgba(190, 15, 52, 0.75); }

.required-field::after {
  content: " *";
  font-size: 1.5rem;
  color: rgba(190, 15, 52, 0.75);
  position: absolute;
  right: -10px;
  top: -10px; }

legend.required-field {
  width: auto; }

.validation-message,
.invalid-feedback {
  color: #be0f34; }

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: #be0f34; }

/* text-style buttons*/
button.text-button {
  border: none;
  background-color: transparent;
  font-weight: normal;
  font-size: inherit;
  text-decoration: underline;
  margin: 0;
  padding: 0; }

.countdown {
  font-weight: bold;
  font-size: 1.125rem; }

/*
-------------------------------------------------------------------------------

DISPLAYING DATA

-------------------------------------------------------------------------------
*/
.view-key {
  font-weight: normal;
  font-style: italic; }

.view-value {
  font-weight: bold; }

/* no results message */
.no-results {
  font-style: italic;
  color: #565656; }

.no-image {
  background-color: #f9f9f9;
  border: 3px solid #eee;
  width: 8rem;
  height: 12rem;
  padding: 3rem 2rem;
  text-align: center; }

.timestamp {
  font-style: italic;
  margin: 0 0.125em; }

.status {
  font-size: 1.125em;
  font-weight: bold;
  margin: 0 0.125em; }

.status:first-child,
.timesatamp:first-child {
  margin-left: 0; }

.email,
.phone {
  word-break: break-all; }

.no-means-no::before,
.yes-means-yes::before {
  font-size: 1.3rem;
  font-family: "FontAwesome";
  font-weight: 900;
  padding: 0;
  margin: 0;
  display: inline-block;
  content: "\f00c";
  color: #616114; }

.no-means-no::before {
  content: "\f00d";
  color: #5f071a; }

.yes-means-yes,
.no-means-no {
  width: 3rem;
  height: 3rem;
  padding: 0;
  margin: 0;
  min-width: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  overflow: hidden;
  font-size: 0; }

/*
-------------------------------------------------------------------------------

ICONS AND LOGOS

We're going to use Fontawesome for icongraphy

make sure all pages are st up with FontAwesome


Q: Icon only buttons or span class="sr-only" on visually redundant text?

Q: Are there circumstances where each are best?

-------------------------------------------------------------------------------
*/
.oxlogo {
  background-color: #002147;
  padding: 8px;
  max-width: 115px;
  max-height: 115px; }

/*
-------------------------------------------------------------------------------

CONTENT IMAGES

-------------------------------------------------------------------------------
*/
/* make images in grid layouts full-width to the containing column  */
.col-lg-12 img,
.col-lg-11 img,
.col-lg-10 img,
.col-lg-9 img,
.col-lg-8 img,
.col-lg-7 img,
.col-lg-6 img,
.col-lg-5 img,
.col-lg-4 img,
.col-lg-3 img,
.col-lg-2 img,
.col-lg-1 img,
.col-sm-6 img,
img.fullwidth {
  width: 100%;
  height: auto;
  margin: 0 0 0.5rem 0; }

/*
-------------------------------------------------------------------------------

DASHBOARDS

-------------------------------------------------------------------------------
*/
.dashboard h2 {
  margin: 0; }

.dashboard.card {
  min-height: 13rem; }

.dashboard ul {
  padding: 0; }

.dashboard ul li {
  list-style: none; }

.number {
  font-size: 1.5rem;
  font-weight: bold;
  color: #872434; }

.number.total {
  font-size: 2rem; }

.breakdown li {
  background-color: #f1f1f1;
  margin-bottom: 4px; }

.progress {
  background-color: rgba(204, 223, 212, 0.25);
  height: 3rem;
  font-size: 1.2rem; }

.progress-bar {
  background-color: rgba(204, 223, 212, 0.5);
  text-align: left; }

.progress .number {
  font-weight: bold;
  font-size: 2rem;
  padding-left: 8px; }

.progress a .number,
.progress-bar a .number,
.progress a,
.progress-bar a {
  color: #253c2f; }

.progress a:hover,
.progress a:focus {
  text-decoration: none; }

.pending .progress {
  background-color: rgba(193, 212, 159, 0.25); }

.pending .progress-bar {
  background-color: rgba(193, 212, 159, 0.5); }

.pending .progress a .number,
.pending .progress-bar a .number,
.pending .progress a,
.pending .progress-bar a {
  color: #373819; }

.dropdown {
  display: inline-block; }

/*
-------------------------------------------------------------------------------

TABLES

-------------------------------------------------------------------------------
*/
table,
table thead,
table tbody,
table.table,
table.table thead,
table.table tbody,
table.table thead th,
table.table thead th,
.table td,
.table th {
  border-color: rgba(224, 222, 217, 0.5);
  border-width: 0; }

.table-hover tbody tr:hover {
  background-color: rgba(224, 222, 217, 0.125); }

thead * {
  color: #666;
  font-weight: 300;
  font-style: italic; }

.table thead th {
  padding-bottom: 0; }

/* table striping */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.025); }

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04); }

table.list {
  border: none;
  border: none; }

table.list tr td,
table.list tr th {
  border: none;
  vertical-align: middle; }

@media screen and (min-width: 992px) {
  table.list tr td,
  table.list tr th {
    /*      min-width: 8em;
*/ } }

@media screen and (min-width: 992px) {
  th.name {
    min-width: 10em; } }

tbody th {
  font-size: 1.2rem;
  font-weight: 400; }

thead th strong {
  font-weight: bold; }

/* plain table for displaying basic key/value data */
table.plain {
  margin: 0 0 2rem 0;
  font-size: 1.2rem; }

table.plain td,
table.plain th {
  padding: 0 1em 0.25em 0;
  vertical-align: top; }

@media screen and (min-width: 768px) {
  table.plain td,
  table.plain th {
    padding: 0 3em 0.25em 0; } }

/* for tables that have row headers in the first column, right-align those header cells */
table.matrix th:first-child,
table.row-headers th:first-child {
  min-width: 6rem;
  text-align: right; }

/* column styling! It (may) be the future (I haven't tasted it yet...) */
@media (min-width: 375px) {
  col.oxstrap-datepicker,
  col.institution-name {
    min-width: 8rem; } }

@media (min-width: 992px) {
  col.oxstrap-datepicker,
  col.institution-name {
    min-width: 15rem; } }

table.manage-data {
  table-layout: fixed; }

table.manage-data td:first-child,
table.manage-data th:first-child {
  padding-left: 0; }

table.manage-data td:last-child,
table.manage-data th:last-child {
  padding-right: 0; }

table.matrix td,
table.row-headers td,
table.matrix th,
table.row-headers th {
  max-width: 24rem; }

tr.existing-record td:nth-child(1),
tr.existing-record td:nth-child(2) {
  padding-top: 1.75rem; }

fieldset.eitherOr {
  margin-top: 1rem; }

.oxstrap-null-value-key {
  opacity: 0.6; }

.oxstrap-null-value-value {
  opacity: 0.5;
  font-weight: normal; }

/*
-------------------------------------------------------------------------------

CONTENT

-------------------------------------------------------------------------------
*/
.breakword {
  word-wrap: break-word; }

p a,
.bodytext a {
  font-weight: bold; }

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

section {
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

section:last-child {
  border-bottom-color: transparent; }

@media (min-width: 992px) {
  section {
    padding-bottom: 1rem;
    margin-bottom: 1.5rem; } }

@media (min-width: 1600px) {
  section {
    padding-bottom: 1.5rem;
    margin-bottom: 3rem; } }

td.yesButNoBut {
  text-align: center; }

td.actions {
  min-width: 9rem; }

tr.super-header * {
  font-size: 1.25rem; }

.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6 {
  font-size: 1.25rem; }

.alert-warning a:link,
.alert-warning a:visited,
.alert-warning a:hover,
.alert-warning a:focus {
  color: #856404;
  color: #674e04;
  color: #4f3d03; }

a.jumpToErrorList,
a.jumpToErrorList:link,
a.jumpToErrorList:visited {
  color: #222;
  display: block;
  font-style: italic; }

a.jumpToErrorList:active,
a.jumpToErrorList:hover,
a.jumpToErrorList:focus {
  color: #000; }

.jumpToErrorList.icon-up::after {
  font-style: normal;
  display: block;
  font-size: 0.75rem;
  font-family: "FontAwesome";
  font-weight: 900;
  padding: 0;
  margin: 0 0 0 0.5rem;
  display: inline-block;
  content: "\f0aa"; }

.errorList li a:after {
  font-size: 0.75rem;
  font-family: "FontAwesome";
  font-weight: 900;
  padding: 0;
  margin: 0 0 0 0.5rem;
  display: inline-block;
  content: "\f061"; }

.separator {
  font-weight: bold;
  opacity: 0.15;
  padding: 0 0.05em;
  color: #002147;
  font-size: 0.8em; }

.invalid-feedback {
  visibility: hidden; }

[aria-invalid="true"] ~ .invalid-feedback {
  visibility: visible;
  display: block; }

/* reboot.css overrides, (Browser Days re re visited?) */
strong {
  font-weight: bold; }

/* bootstrap overrides */
.valid-feedback,
.invalid-feedback {
  font-size: 1rem; }

/* lightening this up as the Bootstrap default isn't light enough to give enough contrasy contrast */
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.75); }

.text-muted {
  color: #595959 !important;
  /* overriding bootstrap's standard muted text colour (#6c757d !important) as it doesn't have sufficent contrast to meet AA accessibility */ }

/* darkening bootstrap default alert-warning text colour to pass AAA colour contrast */
.alert-warning {
  color: #624a04; }

/* link colour for links in danger alerts - e.g. form error list */
.alert-danger a {
  color: #821a1f; }

/* darken text for info alerts ot meet AAA */
html body section .alert-info,
html body section .alert-info p,
html body section .alert-info legend,
html body .alert-info,
html body .alert-info legend,
.alert-info,
.alert-info legend {
  color: #114e62; }

.alert-info legend {
  border-bottom-color: #bce8f1; }

/* stacked header styles start */
body {
  padding-top: 0; }

.stacked-header {
  position: relative;
  background-color: #334d6c;
  color: #fff;
  height: 80px; }

.stacked-header header {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 80px;
  width: 100%; }

.stacked-header header .institution {
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
  width: 80px;
  height: 80px;
  background: #002147 url(/ox-logo.svg) no-repeat 6px 6px;
  background-size: 68px 68px;
  color: transparent; }

.stacked-header .navbar-toggler {
  position: absolute;
  top: 16px;
  right: 8px; }

.navbar-toggler-icon {
  /*   display: none;  */ }

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.stacked-header .nav-item a,
.stacked-header .nav-item a:link,
.stacked-header .nav-item a:visited,
.stacked-header .nav-item a:hover,
.stacked-header .nav-item a:focus {
  color: #002147; }

.stacked-header #navbarNav {
  margin-top: 80px;
  z-index: 1000; }

#navbarNav ul:first-child {
  padding-right: 0px; }

@media (max-width: 992px) {
  .nav-item {
    margin: 0; }
  .navbar-nav > .nav-item > a {
    border-bottom: 1px solid #eee;
    display: block;
    padding: 0.5rem; }
  .nav-item:last-child a {
    border-color: transparent; }
  .stacked-header #navbarNav {
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } }

@media (min-width: 992px) {
  .stacked-header .dropdown-menu {
    left: auto;
    right: 0px; }
  .stacked-header .navbar-toggler {
    top: 48px; }
  .stacked-header #navbarNav {
    margin-top: 48px; }
  .stacked-header .my-profile {
    position: absolute;
    top: 48px;
    right: 0px; }
  .stacked-header,
  .stacked-header header {
    height: 180px; }
  .stacked-header #navbarNav {
    margin-top: 136px; }
  .stacked-header header .institution {
    border: 1px solid white;
    top: 16px;
    left: 16px;
    width: 115px;
    height: 115px;
    background: #002147 url(/ox-logo.svg) no-repeat 8px 8px;
    background-size: 99px 99px; }
  .stacked-header .navbar-nav > .nav-item > a,
  .stacked-header .navbar-nav > .nav-item > a:link,
  .stacked-header .navbar-nav > .nav-item > a:visited,
  .stacked-header .navbar-nav > .nav-item > a:hover,
  .stacked-header .navbar-nav > .nav-item > a:focus {
    color: #fff; }
  .stacked-header,
  .stacked-header header {
    height: 180px; } }

/* stacked header styles end */
/* documentation of colours */
table.colours {
  max-width: 36rem; }

div.colour {
  text-transform: uppercase; }

div.colour::before {
  content: " ";
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin-right: 0.25rem;
  background-color: red;
  display: inline-block;
  border: 1px solid #ccc; }

div.colour.dark-grey::before {
  background-color: #444; }

div.colour.dark-blue::before {
  background-color: #334d6c; }

div.colour.oxford-blue::before {
  background-color: #002147; }

div.colour.pale-warm-grey::before {
  background-color: #e0ded9; }

div.colour.white::before {
  background-color: #fff; }

div.colour.black::before {
  background-color: #000; }

div.colour.off-white-lighter::before {
  background-color: #fbfaf8; }

div.colour.off-white-darker::before {
  background-color: #fbfbfb; }

div.colour.bright-green::before {
  background-color: #e0e275; }

div.colour.dark-green::before {
  background-color: #616114; }

div.colour.mid-green::before {
  background-color: #c3c62a; }

div.colour.muted-green::before {
  background-color: #aab300; }

div.colour.green-black::before {
  background-color: #3a3d00; }

div.colour.mid-grey::before {
  background-color: #ccc; }

div.colour.mid-grey-lighter::before {
  background-color: #c9c7c0; }

div.colour.grey-black::before {
  background-color: #222; }

div.colour.rose::before {
  background-color: #ee768f; }

div.colour.burgundy::before {
  background-color: #5f071a; }

div.colour.scarlet::before {
  background-color: #be0f34; }

div.colour.fuchsia::before {
  background-color: #eb4c6c; }

div.colour.red-black::before {
  background-color: #420614; }

div.colour.scarlet-darker::before {
  background-color: #bd2130; }

/* bootstrap padding styles not included in v3 */
.mb-2 {
  margin-bottom: 0.5rem; }

.mb-2 {
  margin-bottom: 0.25rem; }

.mb-3 {
  margin-bottom: 1rem; }

.mb-4 {
  margin-bottom: 1.5rem; }

.mt-2 {
  margin-top: 0.25rem; }

.mt-2 {
  margin-top: 0.5rem; }

.mt-3 {
  margin-top: 1rem; }

.mt-4 {
  margin-top: 1.5rem; }

.mb-5 {
  margin-bottom: 3rem; }

#eligible-to-borrow-table tbody tr:nth-of-type(2) th,
#eligible-to-borrow-table tbody tr:nth-of-type(1) th {
  padding-top: 0.75rem;
  padding-bottom: 1.5rem; }

#eligible-to-borrow-table tbody td,
#want-to-borrow-table tbody tr:nth-of-type(3) td {
  min-width: 9rem; }

.bigNumber,
#eligible-to-borrow-table tbody td,
#want-to-borrow-table tbody tr:nth-of-type(3) td {
  font-weight: bold;
  font-size: 1.25rem; }

#want-to-borrow-table tbody tr:nth-of-type(3) th {
  font-size: 1rem;
  font-style: italic; }

/* fix centering for main div */
@media (min-width: 1200px) {
  .col-lg-10.centered {
    float: none; } }

/* don't align left one snaller screens (when it's all stacked...)*/
@media (max-width: 768px) {
  .text-right {
    text-align: left; } }

/* colour coding to differentiate between different years */
.four-year-cycle-year-1 h2.form-section-header,
.four-year-cycle-year-2 h2.form-section-header,
.four-year-cycle-year-3 h2.form-section-header,
.four-year-cycle-year-4 h2.form-section-header {
  padding-left: 0.5rem;
  padding-top: 1rem;
  background-color: #eee;
  border-bottom: 1px solid #888;
  border-left: 48px solid #888;
  margin-left: -48px; }

@media (min-width: 768px) {
  .four-year-cycle-year-1 h2.form-section-header,
  .four-year-cycle-year-2 h2.form-section-header,
  .four-year-cycle-year-3 h2.form-section-header,
  .four-year-cycle-year-4 h2.form-section-header {
    margin-left: -63px; } }

.four-year-cycle-year-1 h2.form-section-header {
  /* the greens... */
  color: #3a533c;
  background-color: #ddf6de;
  border-color: #86dc8c; }

.four-year-cycle-year-2 h2.form-section-header {
  /* the oranges... */
  color: #574833;
  background-color: #ffeeda;
  border-color: #ff9411; }

.four-year-cycle-year-3 h2.form-section-header {
  /* the blues... */
  color: #2c414b;
  background-color: #cee4ed;
  border-color: #60a7d7; }

.four-year-cycle-year-4 h2.form-section-header {
  /* the magentas... */
  color: #6d335f;
  background-color: #fdecf7;
  border-color: #d962b9; }

.upload-filename {
  font-style: italic;
  word-break: break-all; }

/* --------------
-----------------------
bootstrap 5 spinner stuff starts  
-----------------------
----------------*/
@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }
@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.spinner-border {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: text-bottom;
  border: 2px solid #c3c62a;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border 0.75s linear infinite;
          animation: spinner-border 0.75s linear infinite; }

.spinner-border-sm {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 2px; }

/* --------------
-----------------------
bootstrap 5 spinner stuff ends  
-----------------------
----------------*/
@media print {
  html body header,
  html body .alert-warning,
  html body .alert-danger,
  html body button.btn-primary,
  html body footer {
    display: none; }
  /* reproducing some of the bootstrap layout stle to be applied for print */
  html body .col-lg-2 {
    width: 16.66666667%; }
  html body .col-sm-6 {
    width: 50%; }
  html body .col-lg-4 {
    width: 33.33333333%; }
  html body .col-sm-1,
  html body .col-sm-10,
  html body .col-sm-11,
  html body .col-sm-12,
  html body .col-sm-2,
  html body .col-sm-3,
  html body .col-sm-4,
  html body .col-sm-5,
  html body .col-sm-6,
  html body .col-sm-7,
  html body .col-sm-8,
  html body .col-sm-9 {
    float: left; }
  html body .col-lg-1,
  html body .col-lg-10,
  html body .col-lg-11,
  html body .col-lg-12,
  html body .col-lg-2,
  html body .col-lg-3,
  html body .col-lg-4,
  html body .col-lg-5,
  html body .col-lg-6,
  html body .col-lg-7,
  html body .col-lg-8,
  html body .col-lg-9,
  html body .col-md-1,
  html body .col-md-10,
  html body .col-md-11,
  html body .col-md-12,
  html body .col-md-2,
  html body .col-md-3,
  html body .col-md-4,
  html body .col-md-5,
  html body .col-md-6,
  html body .col-md-7,
  html body .col-md-8,
  html body .col-md-9,
  html body .col-sm-1,
  html body .col-sm-10,
  html body .col-sm-11,
  html body .col-sm-12,
  html body .col-sm-2,
  html body .col-sm-3,
  html body .col-sm-4,
  html body .col-sm-5,
  html body .col-sm-6,
  html body .col-sm-7,
  html body .col-sm-8,
  html body .col-sm-9,
  html body .col-xs-1,
  html body .col-xs-10,
  html body .col-xs-11,
  html body .col-xs-12,
  html body .col-xs-2,
  html body .col-xs-3,
  html body .col-xs-4,
  html body .col-xs-5,
  html body .col-xs-6,
  html body .col-xs-7,
  html body .col-xs-8,
  html body .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px; } }