/* || Typography */
@font-face {
  font-family: "Sans";
  src: url(../font/Sans-Regular.otf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sans";
  src: url(../font/Sans-Italic.otf);
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Sans";
  src: url(../font/Sans-Medium.otf);
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Sans";
  src: url(../font/Sans-MediumItalic.otf);
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Sans";
  src: url(../font/Sans-Bold.otf);
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Sans";
  src: url(../font/Sans-BoldItalic.otf);
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Serif";
  src: url(../font/Serif-Regular.otf);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Serif";
  src: url(../font/Serif-Italic.otf);
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Serif";
  src: url(../font/Serif-Medium.otf);
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Serif";
  src: url(../font/Serif-MediumItalic.otf);
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Serif";
  src: url(../font/Serif-Bold.otf);
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Serif";
  src: url(../font/Serif-BoldItalic.otf);
  font-weight: bold;
  font-style: italic;
}

/* Color-1 ( red) only meets WCAG AA with large text. This should be used as an accent colour only. */
:root {
  --color-1: #ed1b2f;
  --color-2: #d4d4d4;
  --color-3: #9e0918;
  --color-6: #3943b7;
  --color-7: #f4ac32;
  --color-8: #2d3142;
  --color-9: #494c4e;
  --color-11: #f5f1ed;
  --color-12: #577590;
  --color-13: #ffffff;
  --color-10: #f4f4f4;
  --color-14: #979797;
  --color-15: #767676;
  --color-4: #1e1e1e;
  --color-5: #000000;
}

/* || Color swaps */
.bg-dark-blue {
  background-color: var(--color-8);
}

.bg-grey {
  background-color: var(--color-10);
}

.bg-grey-2 {
  background-color: var(--color-10);
}

.bg-black {
  background-color: var(--color-4);
}
.bg-red {
  background-color: var(--color-1);
}

/* || Accent styles. */
.bg-black h1,
.bg-black h2,
.bg-black h3,
.bg-black h4,
.bg-black h5,
.bg-black h6,
.bg-black p,
.bg-black li {
  color: var(--color-13);
}

.bg-dark-blue h1,
.bg-dark-blue h2,
.bg-dark-blue h3,
.bg-dark-blue h4,
.bg-dark-blue h5,
.bg-dark-blue h6,
.bg-dark-blue p,
.bg-dark-blue li {
  color: var(--color-13);
}

.bg-grey-2 h1,
.bg-grey-2 h2,
.bg-grey-2 h3,
.bg-grey-2 h4,
.bg-grey-2 h5,
.bg-grey-2 h6,
.bg-grey-2 p,
.bg-grey-2 li {
  color: var(--color-8);
}
.bg-black ul.action-items li::before,
.bg-dark-blue ul.action-items li::before {
  content: url(../img/check-white.svg);
}

.bg-dark-blue ul.action-items li::before {
  content: url(../img/check-red.svg);
}

.bg-grey-2 ul.action-items li::before {
  content: url(../img/check-dark-blue.svg);
}

.bg-black ol.flex-numbers li,
.bg-dark-blue ol.flex-numbers li,
.bg-grey-2 ol.flex-numbers li {
  border: none;
}

.bg-black ol.flex-numbers li,
.bg-black ol.flex-numbers li strong,
.bg-black ol.flex-numbers li p,
.bg-black ol.flex-numbers li::before,
.bg-black ol.timeline li p {
  color: var(--color-13);
}

.bg-dark-blue ol.flex-numbers li,
.bg-dark-blue ol.flex-numbers li strong,
.bg-dark-blue ol.flex-numbers li p,
.bg-dark-blue ol.flex-numbers li::before,
.bg-dark-blue ol.timeline li p {
  color: var(--color-13);
}

.bg-dark-blue ol.flex-numbers li::before {
  color: var(--color-1);
}

.bg-grey-2 ol.flex-numbers li,
.bg-grey-2 ol.flex-numbers li strong,
.bg-grey-2 ol.flex-numbers li p,
.bg-grey-2 ol.flex-numbers li::before,
.bg-grey-2 ol.timeline li p {
  color: var(--color-8);
}

.bg-black ul.flex-horizontal li {
  background-color: var(--color-13);
  color: var(--color-4);
}

.bg-black ul.list-cards li {
  background-color: var(--color-4);
  border: 1px solid var(--color-13);
}

.bg-grey ul.list-cards li {
  background-color: transparent;
  border: 1px solid var(--color-4);
}

.bg-black ul.list-cards li,
.bg-black ul.list-cards li p {
  color: var(--color-13);
}
.bg-dark-blue ul.flex-horizontal li,
.bg-dark-blue ul.list-cards li,
.bg-dark-blue ul.list-cards li p {
  color: var(--color-8);
  background-color: var(--color-13);
  border: none;
}
.bg-grey-2 ul.flex-horizontal li,
.bg-grey-2 ul.list-cards li,
.bg-grey-2 ul.list-cards li p {
  color: var(--color-11);
  background-color: var(--color-8);
  border: none;
}

.bg-black ul.card-sublist,
.bg-black ul.card-sublist li,
.bg-black ul.card-sublist li div.title,
.bg-black ul.card-sublist li ul {
  background-color: var(--color-4);
  color: #ffffff;
}
.bg-dark-blue ul.card-sublist,
.bg-dark-blue ul.card-sublist li,
.bg-dark-blue ul.card-sublist li div.title,
.bg-dark-blue ul.card-sublist li ul {
  background-color: var(--color-8);
  color: var(--color-13);
}

.bg-grey ul.card-sublist,
.bg-grey ul.card-sublist li,
.bg-grey ul.card-sublist li div.title,
.bg-grey ul.card-sublist li ul {
  background-color: transparent;
  color: var(--color-4);
}

.bg-grey-2 ul.card-sublist,
.bg-grey-2 ul.card-sublist li,
.bg-grey-2 ul.card-sublist li div.title,
.bg-grey-2 ul.card-sublist li ul {
  background-color: var(--color-10);
  color: var(--color-8);
}

.bg-black ul.card-sublist div.title {
  border-bottom: 1px solid #ffffff;
}
.bg-dark-blue ul.card-sublist div.title {
  border-bottom: 1px solid var(--color-13);
}

.bg-dark-blue ol.timeline time {
  background-color: var(--color-13);
  color: var(--color-8);
}

.bg-black div.vertical-line::before,
.bg-dark-blue div.vertical-line::before {
  border-left: 0.1rem dashed var(--color-13);
  z-index: 0;
}

.bg-grey div.vertical-line::before,
.bg-grey-2 div.vertical-line::before {
  border-left: 0.1rem dashed var(--color-1);
  z-index: 0;
}

.bg-dark-blue ol.sequence li:nth-child(even) {
  border: none;
  border-left: 2px dashed var(--color-13);
}

.bg-dark-blue ol.sequence li:nth-child(odd) {
  border-top: 2px dashed var(--color-13);
  border-bottom: 2px dashed var(--color-13);
  border-right: 2px dashed var(--color-13);
  border-radius: 0;
}

.bg-dark-blue ol.sequence li:first-of-type {
  border-top: 0;
  border-radius: 0;
}

.bg-dark-blue ol.sequence li:nth-child(odd):before,
.bg-dark-blue ol.sequence li:nth-child(even):before {
  color: var(--color-13);
  background-color: var(--color-1);
}

/* Accordion default state. */
.bg-black .accordion .card .card-title button {
  color: #ffffff;
  background-color: var(--color-4);
  border-top: 2px solid #ffffff;
}
.bg-dark-blue .accordion .card .card-title button {
  color: var(--color-13);
  background-color: var(--color-8);
  border-top: 2px solid var(--color-13);
}

.bg-grey .accordion .card .card-title button {
  background-color: var(--color-10);
  color: var(--color-4);
}

.bg-grey-2 .accordion .card .card-title button {
  background-color: var(--color-10);
  color: var(--color-8);
}

/* This affects what happens to the accordion on hover. */
.bg-black .accordion .card .card-title button:hover {
  color: #ffffff;
  text-decoration: none;
}
.bg-dark-blue .accordion .card .card-title button:hover {
  color: var(--color-13);
  text-decoration: none;
}

.bg-grey .accordion .card .card-title button:hover {
  color: var(--color-4);
  background-color: var(--color-10);
  text-decoration: none;
}

.bg-grey-2 .accordion .card .card-title button:hover {
  color: var(--color-8);
  background-color: var(--color-10);
  text-decoration: none;
}

/* This affects what happens to the accordion on focus. */
.bg-black .accordion .card .card-title button:focus {
  color: #ffffff;
  background-color: var(--color-4);
  text-decoration: none;
  border-top: 4px solid #ffffff;
}
.bg-dark-blue .accordion .card .card-title button:focus {
  color: var(--color-13);
  background-color: var(--color-8);
  text-decoration: none;
  border-top: 4px solid var(--color-13);
}

.bg-grey .accordion .card .card-title button:focus {
  background-color: var(--color-10);
  text-decoration: none;
  border-top: 4px solid var(--color-4);
}

.bg-grey-2 .accordion .card .card-title button:focus {
  background-color: var(--color-10);
  text-decoration: none;
  border-top: 4px solid var(--color-8);
}

/* The icon showing when the area is expanded. */
.bg-black .accordion .card .card-title button[aria-expanded="true"]::after,
.bg-dark-blue .accordion .card .card-title button[aria-expanded="true"]::after {
  content: "\f068";
  color: var(--color-13);
  font-size: 1rem;
}
.bg-grey-2 .accordion .card .card-title button[aria-expanded="true"]::after {
  content: "\f068";
  color: var(--color-8);
  font-size: 1rem;
}

/* The icon showing when the area is closed. */
.bg-black .accordion .card .card-title button[aria-expanded="false"]::after,
.bg-dark-blue
  .accordion
  .card
  .card-title
  button[aria-expanded="false"]::after {
  content: "\f067";
  color: var(--color-13);
  font-size: 1rem;
}
.bg-grey-2 .accordion .card .card-title button[aria-expanded="false"]::after {
  content: "\f067";
  color: var(--color-8);
  font-size: 1rem;
}

/* Background colour of the container of the accordion. */
.bg-black .accordion .card-body,
.bg-dark-blue .accordion .card-body,
.bg-grey .accordion .card-body,
.bg-grey-2 .accordion .card-body {
  background-color: var(--color-13);
}

.bg-black .accordion .card-body p {
  color: var(--color-4);
}
.bg-dark-blue .accordion .card-body p {
  color: var(--color-8);
}

/* This is the text and border colour of the non-active tab boxes. */
.bg-black .list-group-item {
  background-color: var(--color-4);
  color: #ffffff;
  border-top: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-left: 1px solid white;
}
.bg-dark-blue .list-group-item {
  background-color: var(--color-8);
  color: var(--color-13);
  border-top: 1px solid var(--color-13);
  border-right: 1px solid var(--color-13);
  border-bottom: 1px solid var(--color-13);
  border-left: 1px solid var(--color-13);
}
.bg-grey-2 .list-group-item {
  background-color: var(--color-10);
  color: var(--color-8);
  border-top: 1px solid var(--color-8);
  border-right: 1px solid var(--color-8);
  border-bottom: 1px solid var(--color-8);
  border-left: 1px solid var(--color-8);
}

.bg-black .list-group-item:last-child,
.bg-black .list-group.flex-md-row .list-group-item:last-child {
  border-right: 1px solid white;
}
.bg-dark-blue .list-group-item:last-child,
.bg-dark-blue .list-group.flex-md-row .list-group-item:last-child {
  border-right: 1px solid var(--color-13);
}
.bg-grey-2 .list-group-item:last-child,
.bg-grey-2 .list-group.flex-md-row .list-group-item:last-child {
  border-right: 1px solid var(--color-8);
}

/* This is the text and border colour of the non-active tab boxes on hover. */
.bg-black .list-group-item:hover {
  background-color: var(--color-4);
  color: var(--color-13);
  border: 1px solid var(--color-13);
}
.bg-dark-blue .list-group-item:hover {
  background-color: var(--color-8);
  color: var(--color-13);
  border: 1px solid var(--color-13);
}
.bg-grey-2 .list-group-item:hover {
  color: var(--color-8);
  background-color: var(--color-10);
  border: 1px solid var(--color-8);
}

/* Only use the following if you remove the border on hover. */
/* .bg-black .list-group.flex-md-row .list-group-item:last-child:hover,
.bg-dark-blue .list-group.flex-md-row .list-group-item:last-child:hover,
.bg-grey .list-group.flex-md-row .list-group-item:last-child:hover {
  border-right: 1px solid transparent;
} */

/* This targets the active tab box in the header row. */
.bg-black .list-group-item.active,
.bg-black .list-group-item.active:hover {
  color: var(--color-4);
  background-color: #ffffff;
}
.bg-dark-blue .list-group-item.active,
.bg-dark-blue .list-group-item.active:hover {
  color: var(--color-8);
  background-color: var(--color-13);
}
.bg-grey-2 .list-group-item.active,
.bg-grey-2 .list-group-item.active:hover {
  color: var(--color-11);
  background-color: var(--color-8);
}

.bg-black a {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.bg-dark-blue a {
  color: var(--color-13);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bg-grey-2 a {
  color: var(--color-8);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bg-black a:hover,
.bg-black a:focus {
  color: #ffffff;
  text-decoration: none;
  border: none;
}
.bg-dark-blue a:hover,
.bg-dark-blue a:focus {
  color: var(--color-13);
  text-decoration: none;
  border: none;
}

.bg-black a:visited,
.bg-black a:active {
  color: var(--color-13);
}
.bg-dark-blue a:visited,
.bg-dark-blue a:active {
  color: var(--color-13);
}

.bg-black a[target="_blank"]::after,
.bg-dark-blue a[target="_blank"]::after {
  content: url(../img/new-window-thin-white.svg);
}

.bg-grey-2 .info-box-grid {
  background-color: transparent;
  border: 1px solid var(--color-8);
}

.bg-black .info-box-grid {
  background-color: transparent;
  border: 1px solid var(--color-13);
}

.bg-dark-blue .info-box-grid {
  background-color: transparent;
  border: 1px solid var(--color-13);
}

.bg-black .info-box-grid .info-right p,
.bg-black .info-box-grid .info-right li,
.bg-black .info-box-grid .info-right h2,
.bg-black .info-box-grid .info-right h3,
.bg-black .info-box-grid .info-right h4 {
  color: var(--color-13);
}
.bg-dark-blue .info-box-grid .info-right p,
.bg-dark-blue .info-box-grid .info-right li,
.bg-dark-blue .info-box-grid .info-right h2,
.bg-dark-blue .info-box-grid .info-right h3,
.bg-dark-blue .info-box-grid .info-right h4 {
  color: var(--color-13);
}
.bg-grey-2 .info-box-grid .info-right p,
.bg-grey-2 .info-box-grid .info-right li,
.bg-grey-2 .info-box-grid .info-right h2,
.bg-grey-2 .info-box-grid .info-right h3,
.bg-grey-2 .info-box-grid .info-right h4 {
  color: var(--color-8);
}

.bg-black .note-box {
  border: 1px solid var(--color-13);
  background-color: transparent;
}

.bg-dark-blue .note-box {
  border: 1px solid var(--color-13);
  background-color: transparent;
}

.bg-black .note-box p,
.bg-dark-blue .note-box p {
  color: var(--color-13);
}

.bg-grey-2 .note-box {
  border: 1px solid var(--color-8);
  background-color: transparent;
}

.bg-grey-2 .note-box p {
  color: var(--color-8);
}

.bg-black .note-box-grid {
  border-left: 8px solid #ffffff;
  background-color: var(--color-4);
}

.bg-dark-blue .note-box-grid {
  border-left: 8px solid var(--color-13);
  background-color: var(--color-8);
}
.bg-grey-2 .note-box-grid {
  border-left: 8px solid var(--color-8);
  background-color: var(--color-11);
}

.bg-grey-2 .note-box-grid p {
  color: var(--color-8);
}

.bg-black .note-left img.note,
.bg-dark-blue .note-left img.note {
  content: url(../img/note-white.svg);
}
.bg-grey-2 .note-left img.note {
  content: url(../img/note-red.svg);
}

.bg-black .table-responsive th,
.bg-black .table th {
  color: var(--color-13);
}
.bg-dark-blue .table-responsive th,
.bg-dark-blue .table th {
  color: var(--color-13);
}
.bg-grey-2 .table-responsive th,
.bg-grey-2 .table th {
  color: var(--color-8);
}

.bg-black .table-responsive tr,
.bg-black .table-responsive td,
.bg-black .table tr,
.bg-black .table td {
  color: var(--color-13);
  border-bottom: 2px solid var(--color-13);
}

.bg-dark-blue .table-responsive tr,
.bg-dark-blue .table-responsive td,
.bg-dark-blue .table tr,
.bg-dark-blue .table td {
  color: var(--color-13);
  border-bottom: 2px solid var(--color-13);
}
.bg-grey-2 .table-responsive tr,
.bg-grey-2 .table-responsive td,
.bg-grey-2 .table tr,
.bg-grey-2 .table td {
  color: var(--color-8);
  border-bottom: 2px solid var(--color-8);
}

.bg-black blockquote,
.bg-black .important-message,
.bg-black .grid-1row {
  color: #ffffff;
}
.bg-dark-blue blockquote,
.bg-dark-blue .important-message,
.bg-dark-blue .grid-1row {
  color: var(--color-13);
}
.bg-grey-2 blockquote,
.bg-grey-2 .grid-1row {
  color: var(--color-8);
}

.bg-black blockquote::before,
.bg-dark-blue blockquote::before,
.bg-grey-2 blockquote::before {
  content: url(../img/quote-red.svg);
}

.bg-black blockquote::after,
.bg-dark-blue blockquote::after,
.bg-grey-2 blockquote::after {
  content: url(../img/quote-red-end.svg);
}

.bg-black details,
.bg-dark-blue details {
  color: var(--color-13);
  border: 1px solid var(--color-14);
}

.bg-black .table-responsive caption,
.table caption,
.bg-dark-blue .table-responsive caption,
.table caption {
  color: var(--color-13);
}

.bg-dark-blue .info-left img.reading {
  content: url(../img/reading-red.svg);
}

.bg-dark-blue .info-left img.video {
  content: url(../img/video-red.svg);
}

.bg-dark-blue .info-left img.audio {
  content: url(../img/audio-red.svg);
}

/* || General styles */
body {
  font-family: "Sans", Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
}

.container-fluid {
  padding: 1rem 2rem;
  margin: 0 auto;
}

/* Font styles to overwrite those in the custom style sheet. These specify the  font to be used, colour choices, line spacing, and additional style classes. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Sans", Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: var(--color-4);
  text-align: left;
  line-height: 1.5em;
  margin: 1.5rem 0;
}

h2 {
  margin-bottom: 0;
}

h3 {
  margin-bottom: 0;
}

h2 + h3 {
  margin-top: 1.5rem;
}

h3 + p {
  margin-top: 0;
}

h2 + p {
  margin-top: 0;
}

.margin-none {
  margin: 0;
}

p {
  font-family: "Sans", Arial, Helvetica, sans-serif;
  color: var(--color-4);
  text-align: left;
  line-height: 1.5em;
  margin: 1.5rem 0;
  padding: 0;
}

ul,
ol {
  margin-bottom: 0;
}

ul li,
ol li {
  font-family: "Sans", Arial, Helvetica, sans-serif;
  color: var(--color-4);
  text-align: left;
  line-height: 1.5em;

  padding: 0;
  margin: 1rem 0;
}

ul li:first-child,
ol li:first-child {
  margin-top: 1.5rem;
  padding: 0;
}

ul li:last-child,
ol li:last-child {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  padding: 0;
}

em {
  font-family: "Sans", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: italic;
}

/* Hyperlink styles to override those from the custom style sheet */
a {
  color: var(--color-5);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  color: var(--color-5);
  text-decoration: none;
  border: none;
}

a:visited,
a:active {
  color: var(--color-3);
}

a[target="_blank"]::after {
  display: inline-block;
  vertical-align: -8%;
  content: url(../img/new-window-thin.svg);
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
}

a.open-pdf[target="_blank"]:focus-within::after,
a.open-pdf[target="_blank"]:hover::after {
  display: inline-block;
  background-image: url(../img/pdf.svg);
  background-size: 16px 16px;
  margin-left: 4px;
  width: 16px;
  height: 16px;
  content: "";
}

/* The details and summary elements can be used for a glossary. */
details {
  color: var(--color-4);
  line-height: 1.5em;
  font-size: 1.2rem;
  border: 1px solid var(--color-14);
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
  margin: 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid var(--color-14);
  margin-bottom: 0.5em;
}

details img {
  margin-top: 1em;
}

.no-padding-top {
  padding-top: 0;
}

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

.font-medium {
  font-weight: 600;
}

.heading-underline-black {
  border-bottom: 4px solid var(--color-4);
  padding-bottom: 0;
  margin-bottom: 1rem;
}

.topic-overview,
.unit-overview {
  display: flex;
  flex-flow: column nowrap;
  margin: 1.5rem 0;
}

.topic-overview h1,
.topic-overview h2,
.topic-overview h3,
.topic-overview h4,
.topic-overview h5,
.topic-overview h6,
.unit-overview h1,
.unit-overview h2,
.unit-overview h3,
.unit-overview h4,
.unit-overview h5,
.unit-overview h6 {
  margin-top: 0;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.topic-overview h3,
.unit-overview h3 {
  padding: 1rem 0;
  padding: 0;
  margin: 2rem 0 1rem 1rem;
  color: var(--color-8);
}

.topic-overview p,
.unit-overview p {
  margin: 1rem 0 1rem 1rem;
  padding: 0;
}

.topic-child,
.unit-child {
  background-color: #f4f4f4;
  padding: 1.5rem;
  border-radius: 12px;
}

/* Lists in the module overview pages. */
ul.key-concepts {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  margin: 0;
}

.topic-overview ul.key-concepts {
  margin: 0 0 0 1rem;
}

ul.key-concepts li {
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--color-4);
  border-radius: 4px;
  color: var(--color-4);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0 1rem;
  background-color: var(--color-8);
  color: #ffffff;
}

ul.learning-outcomes {
  list-style: none;
  list-style-position: outside;
  margin-left: 1rem;
}

ul.learning-outcomes li::before {
  content: url(../img/check-black.svg);
  display: inline-block;
  position: absolute;
  margin-left: -2rem;
  margin-top: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
}

ul.learning-outcomes > li {
  padding: 0 0 0 3rem;
}

ul.learning-outcomes > li:last-child {
  padding-bottom: 0;
}

@media screen and (max-width: 768px) {
  .unit-overview {
    display: flex;
    flex-flow: column nowrap;
  }

  .topic-overview {
    display: flex;
    flex-flow: column nowrap;
  }

  ul.learning-outcomes li::before {
    margin-top: 0.05rem;
  }
}

/* || Media grid is a component with an image on the left and text on the right. */
.media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  border-radius: 8px;
  gap: 1rem;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.media-grid-3 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.media-border {
  border: 2px solid var(--color-4);
  border-radius: 8px;
}

.media-left {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.media-left > img {
  width: 100%;
  border-radius: 4px;
}

.media-grid-3 .media-left > img {
  width: 100%;
  border: solid 1px var(--color-4);
  border-radius: 4px;
}

.media-right {
  grid-column: 2 / 3;
  padding-right: 1rem;
}

.media-grid-3 .media-right {
  grid-column: 2 / 3;
}

.media-grid-3 .media-right strong {
  color: var(--color-4);
  font-size: 24px;
}

.media-grid-3 .media-right p {
  font-size: 16px;
  margin-bottom: 0;
}

.media-right > h1,
.media-right > h2,
.media-right > h3,
.media-right > h4,
.media-right > h5,
.media-right > h6 {
  padding-top: 0;
}

.media-right p:first-of-type {
  padding-top: 0;
  margin-top: 0;
}

.media-right > p:last-child {
  padding-bottom: 0;
}

p.attribution {
  font-size: 12px;
  text-align: center;
  margin: 1rem 0;
  border-radius: 4px;
}

@media screen and (max-width: 768px) {
  .media-grid {
    display: flex;
    flex-direction: column;
  }

  .media-grid-3 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

/* || Responsive callout box */
.info-box-column {
  border-radius: 8px;
  padding: 2em;
  background-color: var(--color-10);
  margin: 2rem 0;
}

.info-box-column h3 {
  margin: 0 0 1rem 0;
}

/* .info-box-column h3, */
.info-box-column p,
.info-box-column li {
  color: var(--color-4);
}

.topic-heading {
  font-size: 1.5rem;
  color: var(--color-4);
}

.bg-dark-blue .topic-heading {
  color: var(--color-4);
}

.info-box-column ul.flex-horizontal.border-none li {
  background-color: var(--color-8);
  color: var(--color-13);
  font-weight: bold;
}

.info-box-column > p:last-of-type {
  margin-bottom: 0;
}

.info-box-grid {
  display: grid;
  grid-template-columns: 1fr 7fr;
  gap: 0.75rem;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  background-color: #f4f4f4;
  margin: 1.5rem 0;
}

.info-box-grid .info-left {
  display: flex;
  justify-content: center;
  align-items: center;
}
.info-left img {
  width: 80%;
  min-width: 56px;
  max-width: 80px;
}

.info-left img.information {
  content: url(../img/information-red.svg);
  width: 80%;
  min-width: 56px;
  max-width: 80px;
}

.info-left img.question {
  content: url(../img/question-red.svg);
  width: 80%;
  min-width: 56px;
  max-width: 80px;
}

.info-left img.reading {
  content: url(../img/reading-black.svg);
  width: 80%;
  min-width: 56px;
  max-width: 80px;
}

.info-left img.video {
  content: url(../img/video-black.svg);
  width: 80%;
  min-width: 56px;
  max-width: 80px;
}

.info-left img.audio {
  content: url(../img/audio-black.svg);
  width: 80%;
  min-width: 56px;
  max-width: 80px;
}

.info-left img.workplace-skills {
  content: url(../img/workplace-skills-red.svg);
  width: 80%;
  min-width: 56px;
  max-width: 80px;
}

.info-left img.topic {
  content: url(../img/topic-black.svg);
  width: 80%;
  min-width: 56px;
  max-width: 72px;
}

.info-left img.topic-2 {
  content: url(../img/topic-2-black.svg);
  width: 80%;
  min-width: 56px;
  max-width: 72px;
}

.info-left img.topic-3 {
  content: url(../img/topic-3-black.svg);
  width: 80%;
  min-width: 56px;
  max-width: 72px;
}

.info-left img.topic-4 {
  content: url(../img/topic-4-black.svg);
  width: 80%;
  min-width: 56px;
  max-width: 72px;
}

.info-box-grid .info-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-right: 0.5rem;
}

.info-box-grid .info-right p {
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .info-box-grid {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
  }

  .info-box-grid.row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
  }

  .info-box-grid .info-left {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  img.smaller-icon {
    max-width: 56px;
    padding-bottom: 0;
  }
}

.note-box {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid var(--color-1);
}

.note-box p {
  margin: 0;
  color: var(--color-4);
}

.border-lightgrey {
  border-color: #d7d7d7;
}

.border-none {
  border: none;
}

/* || Tabs */
/* This is the outside border of the entire tab box outline. */
.tabs-horizontal {
  border: none;
  border-radius: 0;
}
/* This targets the active tab box in the header row. */
.list-group-item.active,
.list-group-item.active:hover {
  background-color: var(--color-4);
  color: #ffffff;
  color: var(--color-10);
  border: none;
  border-bottom: 0px;
  border-radius: 0px;
}
/* This is the text and border colour of the non-active tab boxes. */
.list-group-item {
  color: var(--color-4);
  background: #f4f4f4;
  border-radius: 0px;
  border: transparent;
  margin-bottom: 0px;
  font-size: 16px;
}

/* .list-group-item:first-child {
  border-radius: 0px;
} */

/* This is the text and border colour of the non-active tab boxes on hover. */
.list-group-item:hover {
  color: var(--color-4);
  background-color: var(--color-13);
  border: none;
}

/* This targets the non-active tabs on focus. */
.list-group-item:focus {
  border: none;
}

/* This removes the underline from links in the tabs components. */
.list-group a,
.list-group a:hover {
  text-decoration: none;
}

.tabs-wrapper {
  margin-bottom: 1.5rem;
}

.tabs-horizontal .tab-pane {
  padding: 0 1.5rem;
}

/* This makes all of the headers inside the tab wrapper the same size to make it easy to follow dom accessibility and not worry about styling each. */
.tabs-wrapper h2,
.tabs-wrapper h3,
.tabs-wrapper h4,
.tabs-wrapper h5,
.tabs-wrapper h6 {
  font-size: 1.25em;
}
/* This adjusts the border radius of the header row to get a pill shape. */
.list-group.flex-md-row .list-group-item:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.list-group.flex-md-row .list-group-item:last-child {
  border-top-right-radius: 0;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 8px;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .list-group.flex-md-row .list-group-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
  }
  .list-group.flex-md-row .list-group-item:last-child {
    border-top-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-bottom: 0;
  }
}

/* || Buttons and Accordions */
/* This adjusts the font colour and size of the accordian. */
.accordion .card .card-title button {
  color: var(--color-4);
  background-color: #ffffff;
  text-decoration: none;
  padding-left: 1rem;
  padding-right: 3rem;
  border: none;
  border-top: 2px solid var(--color-4);
}

/* This affects what happens to the accordion on hover. */
.accordion .card .card-title button:hover {
  color: var(--color-4);
  /* background-color: #f4f4f4; */
  text-decoration: none;
}

/* This affects what happens to the accordion on focus. */
.accordion .card .card-title button:focus {
  color: var(--color-4);
  background-color: #ffffff;
  text-decoration: none;
  border-top: 4px solid var(--color-4);
}

/* The icon showing when the area is expanded. */
.accordion .card .card-title button[aria-expanded="true"]::after {
  content: "\f068";
  color: var(--color-4);
  font-size: 1rem;
}

/* The icon showing when the area is closed. */
.accordion .card .card-title button[aria-expanded="false"]::after {
  content: "\f067";
  color: var(--color-4);
  font-size: 1rem;
}

/* This sets the position of the icon, in this case at the far right. */
.accordion .card .card-title button:after {
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  position: absolute;
  top: 1.5rem;
  left: 95%;
}

/* This targets the content box underneath the accordian. */
.accordion .card-body {
  color: var(--color-4);
  background-color: #f4f4f4;
  border: none;
  margin-bottom: 1rem;
}

/* || Video Wrapper */
.video-wrapper {
  border: transparent;
  background-color: transparent;
  border-radius: 8px;
  padding: 2em;
  padding-bottom: calc(2em - 12px);
  margin: 0;
}

iframe {
  border: none;
}

/* References */
ul.references {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.references li {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 0;
}

ul.references li:first-child {
  margin-top: 1rem;
}

/* || Getting started styles. */
ol.flex-icon-list,
ul.flex-icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: flex-start;
  align-items: baseline;
}

ol.flex-icon-list li,
ul.flex-icon-list li {
  flex-grow: 1;
  max-width: 250px;
  font-weight: bold;
}

ol.flex-icon-list > li > div,
ul.flex-icon-list > li > div {
  display: flex;
  justify-content: center;
  align-content: center;
}

ol.flex-icon-list > li > div > img,
ul.flex-icon-list > li > div > img {
  padding-top: 0.5em;
  width: 6rem;
}

@media screen and (max-width: 768px) {
  ol.flex-icon-list,
  ul.flex-icon-list {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
  }
}

/* Land acknowledgement styles. */

.land-acknowledgement-text {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  padding: 0 1rem;
  margin: 1rem 0;
}

.land-acknowledgement-text p {
  font-size: 1em;
}

/* Grid classes */
.grid-1row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  margin-bottom: 1rem;
}

.grid-1row p,
.large-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

@media screen and (max-width: 768px) {
  .grid-1row {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .grid-1row p {
    font-size: 1rem;
    margin-top: 0;
  }
}

/* Footer */
footer {
  margin-top: 0;
  display: flex;
  justify-content: flex-end;
  padding: 2rem 1rem;
  color: var(--color-5);
  border-top: 2px solid var(--color-4);
}

footer p {
  font-size: 14px;
}
/* || Typography styles for important text. */
blockquote {
  color: var(--color-4);
  font-family: "Serif";
  font-weight: normal;
  font-style: normal;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  padding: 1rem 2rem;
}

blockquote::before {
  content: url(../img/quote-red.svg);
  display: inline-block;
  margin-right: 6px;
  height: clamp(1.5rem, 2.5vw, 2rem);
  width: clamp(1.5rem, 2.5vw, 2rem);
}

blockquote::after {
  content: url(../img/quote-red-end.svg);
  display: inline-block;
  margin-left: 6px;
  height: clamp(1.5rem, 2.5vw, 2rem);
  width: clamp(1.5rem, 2.5vw, 2rem);
}

p.important-message {
  font-weight: bold;
  color: var(--color-1);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  padding: 2rem 10vw;
  display: flex;
  justify-content: center;
}

/* Table class to remove border and make responsive. */
.table-responsive,
.table {
  overflow-y: hidden;
  margin: 0.5rem 0;
  padding: 0;
  table-layout: auto;
  width: 100%;
  background-color: transparent;
}

.table-responsive caption,
.table caption {
  vertical-align: middle;
  min-height: 1.25rem;
  text-align: center;
  font-style: normal;
  border-radius: 0 0 8px 8px;
  background-color: transparent;
  color: var(--color-4);
}

.table-responsive th,
.table th {
  font-size: 1.25rem;
  color: var(--color-4);
  font-weight: bold;
  border: none;
  background-color: transparent;
  min-width: max-content;
}

.table-responsive tr,
.table-responsive td,
.table tr,
.table td {
  color: var(--color-4);
  padding: 1rem;
  border: none;
  border-bottom: 1px solid var(--color-4);
  background-color: transparent;
}

.fixed-width {
  table-layout: fixed;
}

/* || Code styling */
code {
  color: var(--color-4);
  background-color: var(--color-10);
  padding: 0.125rem 0.25rem;
  width: fit-content;
  border-radius: 4px;
}

pre.code-sample {
  background-color: var(--color-10);
  display: block;
  padding: 2rem;
  box-sizing: border-box;
  border-radius: 4px;
  width: 100%;
}

pre > code {
  background-color: transparent;
}

div.code-example {
  position: relative;
}

button.btn.copy-btn {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #ffffff;
  font-size: 14px;
  padding: 0.5rem 1rem;
}

button.btn.copy-btn:hover {
  border: 1px solid var(--color-15);
}

/* || Figure styling. */
figure {
  padding: 0 2rem;
  width: 100%;
}
figure img {
  box-sizing: border-box;
  border-radius: 4px;
}

/* || New lists */
ul.flex-horizontal {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  margin: 1.5rem 0;
}

ul.flex-horizontal li {
  background-color: white;
  border: 1px solid var(--color-4);
  border-radius: 4px;
  color: var(--color-4);
  font-size: 1rem;
  font-weight: 600;
  margin: 4px 8px 4px 0;
  padding: 0.5rem 1rem;
}

ul.flex-horizontal.border-none li {
  background-color: white;
  border: none;
  border-radius: 4px;
  color: var(--color-4);
  font-size: 1rem;
  font-weight: 600;
  margin: 4px 8px 4px 0;
  padding: 0.5rem 1rem;
}

ul.action-items {
  list-style: none;
  list-style-position: outside;
  margin: 0;
  margin-left: 3rem;
}

ul.action-items li::before {
  content: url(../img/check-red.svg);
  display: inline-block;
  position: absolute;
  margin-left: -2.2em;
  margin-top: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
}

@media screen and (max-width: 768px) {
  ul.action-items li::before {
    margin-top: 0.05rem;
  }
}

ul.list-cards {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 0;
}

ul.list-cards li {
  flex-grow: 1;
  flex-basis: 25%;
  background-color: var(--color-10);
  border-radius: 8px;
  min-width: 300px;
  margin: 0;
  padding: 2rem;
}

ul.list-cards li p {
  font-size: 16px;
}

ul.list-cards li p:last-child {
  margin: 0.5rem 0 0 0;
}

ol.flex-numbers {
  display: flex;
  flex-flow: row wrap;
  list-style-type: none;
  gap: 1rem;
  margin: 0;
  padding: 1rem 0;
}

ol.flex-numbers li {
  flex-grow: 1;
  flex-basis: 25%;
  min-width: 360px;
  padding: 1rem 2rem 1rem 1.5rem;
  border-radius: 8px;
  counter-increment: list;
  border: 1px solid var(--color-1);
  margin: 0;
}

ol.flex-numbers li strong {
  font-size: 2rem;
  line-height: normal;
}

ol.flex-numbers li p {
  padding-left: 3.5rem;
  color: var(--color-4);
  font-size: 16px;
}

ol.flex-numbers li::before {
  content: counter(list);
  color: var(--color-1);
  font-size: 4rem;
  padding-top: 2rem;
  position: absolute;
}

@media screen and (max-width: 768px) {
  ol.flex-numbers li::before {
    padding-top: 2rem;
    font-size: 2rem;
  }

  ol.flex-numbers li p {
    padding-left: 2rem;
  }
}

ol.sequence {
  list-style-type: none;
  max-width: 600px;
  margin: 1rem auto;
  padding: 1rem;
  box-sizing: border-box;
}

ol.sequence li {
  border-top: 2px solid var(--color-1);
  margin: 0;
  padding: 2rem 3rem;
  counter-increment: list;
  position: relative;

  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 1rem;
}

ol.sequence li:nth-child(even) {
  border: none;
  border-left: 2px dashed var(--color-1);
  border-radius: 0;
  margin-top: -2px;
}

ol.sequence li:nth-child(odd) {
  border-top: 2px dashed var(--color-1);
  border-bottom: 2px dashed var(--color-1);
  border-right: 2px dashed var(--color-1);
  border-radius: 0;
}

ol.sequence li:first-of-type {
  border-top: 0;
  border-radius: 0;
}

ol.sequence li:last-of-type {
  border-bottom: 0;
  border-radius: 0;
}

ol.sequence li:nth-child(odd):before {
  content: counter(list);
  top: 2rem;
  left: 100%;
  margin-left: -20px;
  position: absolute;
  border-radius: 50%;
  padding: 5px 0;
  height: 40px;
  width: 40px;
  background-color: var(--color-1);
  text-align: center;
  color: white;
  font-size: 1.5rem;
}

ol.sequence li:nth-child(even):before {
  content: counter(list);
  top: 2rem;
  right: 100%;
  margin-right: -20px;
  position: absolute;
  border-radius: 50%;
  padding: 5px 0;
  height: 40px;
  width: 40px;
  background-color: var(--color-1);
  text-align: center;
  color: white;
  font-size: 1.5rem;
}

ol.sequence li img {
  max-width: 5rem;
}

@media screen and (max-width: 768px) {
  ol.sequence li:nth-child(odd):before {
    font-size: 1.5rem;
    padding: 8px 0;
  }

  ol.sequence li:nth-child(even):before {
    font-size: 1.5rem;
    padding: 8px 0;
  }

  ol.sequence li img {
    max-width: 4rem;
  }
}

div.vertical-line {
  position: relative;
}

div.vertical-line::before {
  content: "";
  position: absolute;
  width: 2px;
  border-left: 0.1rem dashed var(--color-1);
  top: 0;
  bottom: 0;
  left: 4.65rem;
  z-index: -1;
  margin-top: 4rem;
  margin-bottom: 4rem;
}

ol.timeline {
  list-style-type: none;
  margin: 0;
  padding: 1rem 0;
}

ol.timeline li {
  display: grid;
  grid-template-columns: auto 4fr;
  align-items: center;
  gap: 2rem;
  margin: 0;
  margin-bottom: 1rem;
}

ol.timeline li:last-of-type {
  margin-bottom: 0;
}

ol.timeline li time {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  margin: 0;
  color: #ffffff;
  font-weight: bold;
  font-size: 2rem;
  background-color: var(--color-1);
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

@media screen and (max-width: 576px) {
  ol.timeline li {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  ol.timeline li time {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    margin: 0;
    color: #ffffff;
    font-weight: bold;
    font-size: 2rem;
    background-color: var(--color-1);
    border-radius: 8px;
    height: 100%;
    width: 100%;
  }

  div.vertical-line::before {
    display: none;
  }
}

ul.card-sublist {
  overflow: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  gap: 1rem;
}

ul.card-sublist li {
  flex-grow: 1;
  flex-basis: 25%;
  min-width: 300px;
  margin: 0;
  padding: 0;
}

ul.card-sublist li:first-of-type {
  padding-top: 0;
}

ul.card-sublist li:last-of-type {
  padding-bottom: 0;
}

ul.card-sublist div.title {
  background-color: #ffffff;
  padding: 1rem;
  font-size: 1.5rem;
  border-bottom: 1px solid var(--color-4);
  border-radius: 4px 4px 0 0;
}

ul.card-sublist ul {
  list-style-type: none;
  margin: 0;
  padding: 0.5rem 0 0 0;
  background-color: #ffffff;
}

ul.card-sublist ul li {
  min-width: auto;
  word-wrap: break-word;
  margin-bottom: 0.5rem;
  padding: 0.25rem 1rem;
  background-color: var(--color-10);
  border-radius: 4px;
}

ul.card-sublist ul li:first-of-type {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

ul.card-sublist ul li:last-of-type {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.widget-profile {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: flex-start;
}

.widget-profile strong {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: -0.5rem;
  color: var(--color-4);
}

.widget-profile p {
  color: var(--color-15);
  margin: 0 0 1rem 0;
}

.widget-profile img {
  border-radius: 8px 8px 0 0;
}

.widget-profile ul.widget-profile-list {
  color: var(--color-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget-profile ul.widget-profile-list li {
  color: var(--color-4);
  list-style: none;
  font-size: 16px;
  margin-top: 0.25rem;
  margin-left: 3rem;
  margin-bottom: 0.5rem;
}

.widget-profile ul.widget-profile-list li.email::before {
  content: url(../img/icon_base_contact.svg);
  display: inline-block;
  position: absolute;
  margin-left: -2.9rem;
  width: 1.5rem;
  height: 1.5rem;
}

.widget-profile ul.widget-profile-list li.office-hours::before {
  content: url(../img/icon_base_calendar.svg);
  display: inline-block;
  position: absolute;
  margin-left: -2.9rem;
  width: 1.5rem;
  height: 1.5rem;
}

.widget-profile ul.widget-profile-list li.linkedin::before {
  content: url(../img/icon_social_linkedin.svg);
  display: inline-block;
  position: absolute;
  margin-left: -2.9rem;
  width: 1.5rem;
  height: 1.5rem;
}

.gif-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
img.guide-gif {
  width: 60%;
}

@media screen and (max-width: 768px) {
  img.guide-gif {
    width: 100%;
  }
}