@import url('https://fonts.googleapis.com/css2?family=Literata:wght@400&display=swap');
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
/*GLOBAL STYLES*/

html {
  scroll-behavior: smooth;
}

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
  position: relative;
  overflow-x: hidden;
}


.banner {
  background-image: url(../../media/images/banner.png);
  background-repeat: repeat-x repeat-y;
  min-height: 250px;
  margin-bottom: 60px;
  overflow-x: hidden;
}

footer {
  background-color: #F2F2F2;
  min-height: 250px;
  margin: 50px 0 -50px 0;
  padding: 50px 100px 20px 100px;
}

footer h2 {
  font-size: 1em;
}

footer p {
  font-size: .8em;
}

h1 {
  background: linear-gradient(90deg, rgba(17,48,66,0) 0%, rgba(17,48,66,0.9) 10%, rgba(17,48,66,0.95) 50%, rgba(17,48,66,0.9) 90%, rgba(17,48,66,0) 100%);
  color: #FFF;
  min-height: 250px;
  margin: 0 -200px;
  padding: 60px 200px 10px 200px;
}

h1 em {
  font-size: 34px;
  font-weight: 300;
}

small {
 display: inline-block;
 padding-top: 10px;
 padding-bottom: 20px;
 font-size: 1.6rem;
 font-weight: 400;
 line-height: 1.4;
}

h2 {
  margin-bottom: 20px;
}

h2:not(:first-of-type) {
  margin-top: 40px;
}

h3  {
  font-size: 1.5em;
  margin-top: 30px;
  margin-bottom: 20px;
}

h4  {
  font-size: 1.2em;
}

h5 {
  font-size: 1em;
}


a {
color: #0000EE;
text-decoration: underline; }
a:hover {
color: #5555ff; }
a:active {
color: #0000bb; }
a:visited {
color: #551A8B; }
a:focus {
color: #000055; }


li {
  padding-top: 3px;
  padding-bottom: 3px;
}

ul {
margin-bottom: 20px;
}

.anchor {
  display: block;
  position: relative;
  top: -60px;
  visibility: hidden;
}

.references {
  margin-left: -35px;
  margin-right: -35px;
  margin-top: 15px;
  padding: 5px 35px 20px 70px;
  text-indent: -2em;
  line-height: 1.5em;
  max-width: 100%;
}

.references p {
  color: #444444;
  border: none;
  font-size: 80%;
  clear: both;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.word-break {
  /* Breaks the word wherever it is without a hyphen */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.hyphenate {
  /* Adds a hyphen where the word breaks */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

.icons {
  position: relative;
  top: 2px;
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 5px; }
  .icons.new-tab {
    background-image: url(../../media/images/new-tab.png);
  }

  /*table caption*/
  caption {
    caption-side: top;
  }


  .clinical-insight {
    position: relative;
    border-radius: 10em;
    background: #1E4258;
    color: #FFF;
    margin: 20px 20px 20px 38px;
    padding: 20px 30px 20px 30px;
  }

  .clinical-insight:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 41px solid transparent;
    border-right-color: #1E4258;
    border-left: 0;
    border-top: 0;
    margin-top: -20.5px;
    margin-left: -38px;
}

.clinical-insight-r {
    position: relative;
    border-radius: 10em;
    background: #553E56;
    color: #FFF;
    margin: 20px 38px 20px 20px;
    padding: 20px 30px 20px 30px;
  }

.clinical-insight-r:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 41px solid transparent;
  border-left-color: #553E56;
  border-right: 0;
  border-top: 0;
  margin-top: -20.5px;
  margin-right: -38px;
}


.clinical-insight p, .clinical-insight-r p {
  color: #FFF;
  font-size: 120%;
  padding: 30px 40px;
}


.clinical-insight p.cite, .clinical-insight-r p.cite {
  padding: 0 60px;
  margin-top: -40px;
  text-align: right;
  font-size: 1em;
  font-style: italic;
}

blockquote {
  font-size: 1.25rem;
}

.blockquote {
  position: relative;
  line-height: 1.5;
  padding: 25px 25px 15px 150px;
  margin: 0 20px 60px 36px;
}

.blockquote:before {
  content: " ";
  background: url(../../media/images/blockquote.png) no-repeat;
  position: absolute;
  width: 150px;
  height: 150px;
  top: 30px;
  left: -35px;
}

.blockquote2 {
  position: relative;
  line-height: 1.5;
  padding: 25px 150px 15px 25px;
  margin: 0 20px 60px 20px;
}

.blockquote2:after {
  content: " ";
  background: url(../../media/images/blockquote.png) no-repeat;
  position: absolute;
  width: 150px;
  height: 150px;
  top: 30px;
  right: -35px;
}

.blockquote-footer {
  background-color: transparent;
  padding: 0;
  margin: 0;
  min-height: 0;
  text-align: right;
}

.link-box {
  position: relative;
  box-shadow: 1px 1px 8px 0px rgba(224,224,224,1);
  padding: 30px 55px;
  margin: 20px 0 40px 0;
  text-align: center;
  border-right: 2px #E2D9EB solid;
}

.link-box:before {
  content: " ";
  background: url(../../media/images/link.png) no-repeat;
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: -32px;
}

.video-box {
  position: relative;
  box-shadow: 1px 1px 8px 0px rgba(224,224,224,1);
  padding: 30px 55px;
  margin: 20px 0 40px 0;
  border-right: 2px #E2D9EB solid;
}

.video-box:before {
  content: " ";
  background: url(../../media/images/video.png) no-repeat;
  position: absolute;
  width: 100px;
  height: 100px;
  top: 10px;
  left: -32px;
}

.remember-box {
  position: relative;
  box-shadow: 1px 1px 8px 0px rgba(224,224,224,1);
  padding: 30px 55px 30px 150px;
  margin: 20px 0 40px 0;
  border-right: 2px #E2D9EB solid;
}

.remember-box:before {
  content: " ";
  background: url(../../media/images/remember.png) no-repeat;
  background-color: #FFF;
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 20px;
  transform: translate(0, -50%);
}

.stop-and-think {
  position: relative;
  line-height: 1.5;
  padding: 25px 25px 15px 100px;
  margin: 40px 20px 60px 75px;
  background-color: #F8F4FF;
}

.stop-and-think:before {
  content: " ";
  background: url(../../media/images/stop-and-think.png) no-repeat;
  position: absolute;
  width: 150px;
  height: 150px;
  top: 0px;
  left: -75px;
}

p.stq {
  font-size: 1.1em;
}

p.stq::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0a9";
  font-size: 1.2em;
  color: #553E56;
  padding-right: 5px;
}

.indent {
  padding-left: 40px;
}

mark {
  background-color: yellow;
}

mark.antonina {
  background-color: pink;
}

.note {
  margin: 10px 0 20px 0;
  padding: 5px;
  border-top: 1px dashed #CCCCCC;
  border-bottom: 1px dashed #CCCCCC;
  }

.note::before {
    content: '\f071';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.5em;
    padding-right: 10px;
    color: #BFAFD6;
}


ul.checkmark {
  margin: 2em 0;
  list-style: none;
}

li.checkmark {
  margin: .5em;
  margin-left: .5em;
}

li.checkmark:before {
  content: '\f00c';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  float: left;
  margin-left: -1.5em;
}


/*MEDIA STYLES - IMG/VIDS/EMBEDS*/

.copyright {
  font-size: 0.75rem;
  padding-bottom: 30px;
}

.copyright-no-pad {
  font-size: 0.75rem;
}

.img-desc {
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.embed-responsive {
  margin: 40px 0;
}

.border {
  border: 1px solid #CCC;
}

iframe {
 display: block;
 margin: 0 auto;
}

.box {
  box-shadow: 1px 1px 8px 0px rgba(224,224,224,1);
  padding: 30px;
  margin: 20px 0 40px 0;
}

.box-title {
  text-transform: uppercase;
  font-weight: bold;
}

.big {
  font-size: 1.2em;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 30px 5px 10px 5px;
}

.center-no-margin {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 5px 10px 5px;
}

.figure-right {
  display: table;
  padding-left: 20px;
  float: right;
}

.figure-right figcaption {
  display: table-caption;
  caption-side: bottom;
  padding-left: 20px;
}

.figure-left {
  display: table;
  padding-right: 20px;
  float: left;
}

.figure-left figcaption {
  display: table-caption;
  caption-side: bottom;
  padding-right: 20px;
}

.figure-right img, .figure-left img {
  padding-top: 0;
  padding-bottom: 0;
}

.matching {
  margin-bottom: 0;
  padding-bottom: 0;
}

.alert .table td {
  border: 1px solid #757575;
}


/*ACCORDION STYLES*/

.acc-grp .card, .acc-grp .expandcollapse {
margin-bottom: 5px;
}

.acc-grp .card-header {
  background-color: #F8F4FF;
  border-color: #d5c6f2;
  text-transform: uppercase;
  font-weight: bold;
}

/*SELF-ASSESSMENT QUESTION STYLES - IMG/VIDS/EMBEDS*/

.form-check {
  padding: 4px 5px 4px 30px;
}

.mChoice {
  margin: 30px 0;
}

.correct-hl {
  background-color: #d4edda;
  padding: 2px;
  border: 1px solid #c3e6cb;;
  border-radius: .25rem;
}

.correct-hl::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.dropdownQuestion {
  padding-bottom: 5px;
}

.feedback-correct, .feedback-incorrect {
  margin-top: 10px;
}

.shortanswer {
  margin-bottom: 30px;
}

.dropdown-small {
  min-width: 0;
}


/*TOP NAVBAR*/

#topnav a {
 text-decoration: none;
}

#topnav li {
  padding-bottom: 0;
}

.navbar-dark {
  background-color: #1E4258!important;
  border-bottom: 5px solid #BFAFD6;
}

.navbar-dark .navbar-brand {
  margin-top: -4px;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255,255,255,.75);
}

@media (max-width: 992px) {
  .dropdown-item {
    padding-right: 20%;
  }
}

.dropdown-item {
  text-indent: -.3rem;
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item.active:visited {
  background-color: #553E56;
  color: #FFF;
}

a.dropdown-item:hover {
  color: #553E56;
  background: #BFAFD6;
}

a.dropdown-item:visited {
  color: #212529;
}

@media (max-width: 992px) {
  .navbar-collapse {
    max-height: calc(100vh - 125px);
    overflow-y: auto;
  }
}

/*SIDEBAR - TOPIC PAGES*/

.sticky {
  position: sticky;
  z-index: 1020;
  top: 8%;
}

#sidebar.navbar {
  display: block;
}

#sidebar {
  background: none;
  color: #000;
  transition: all 0.3s;
}

#sidebar .nav {
  margin: -8px -16px 0 -16px;
}

#sidebar a, a:hover, a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

#sidebar a:not(:last-child) {
  border-bottom: 1px solid #F2E9FF;
}

#sidebar a {
  font-size: 0.9em;
  padding-left: 20px;
  background: none;
}

#sidebar .anchormenu > a {
  font-size: 0.9em;
  margin: 0 16px;
  padding-top: 3px;
  padding-bottom: 3px;
}

#sidebar a:hover, #sidebar .anchormenu a.active {
  color: #523C53;
  background: #CFC2E0;
}

#sidebar a.current {
  color: #fff;
  background: #553E56;
  margin-bottom: 8px;
  line-height: 1.5em;
}

#sidebar .nav-pills .nav-link {
  border-radius: 0;
}

@media (max-width: 991.98px) {
  #sidebar {
    margin-bottom: 30px;
  }
}



/*HOME PAGE STYLING*/

/* 3 COLUMNS OF LINKS */
/*  Center align the text within the three columns*/
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
  color: #3B5F75;
  font-size: 1.5em;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}

a:visited.btn-secondary {
  color: #FFF;
}


/*FEATURETTES*/

.featurette-divider {
  margin: 2.5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
  color: #3B5F75;
}

ul.lead {
  font-size: 1em;
  font-weight: 300;
  line-height: 1.6;
}

@media (min-width: 40em) {
  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 3rem;
  }
}


/*COLOUR BOXES - 2D, 6C*/
/*left-aligned boxes*/

.yellow-box, .grey-box, .blue-box, .pink-box, .mauve-box-light {
  position: relative;
  margin: 75px 150px 75px 30px;
  background-color: #FFF;
  padding: 30px;
  border-radius: 10px;
}

.yellow-box::before, .grey-box::before, .blue-box::before, .pink-box::before, .mauve-box-light::before {
  content: " ";
  position: absolute;
  z-index: -1;
  width: calc(100% + 140px);
  height: calc(100% + 60px);
  top: -30px;
  left: -30px;
  border-radius: 10px;
}

.yellow-box {
  box-shadow: 6px 6px 15px 0px rgba(189,118,11,1);
}

.yellow-box::before {
  background-color: #F1A229;
}

.grey-box {
  box-shadow: 6px 6px 15px 0px rgba(65,77,81,1);
}

.grey-box::before {
  background-color: #5A696E;
}

.blue-box {
  box-shadow: 6px 6px 15px 0px rgba(2,133,137,1);
}

.blue-box::before {
  background-color: #05BCC0;
}

.pink-box {
  box-shadow: 6px 6px 15px 0px rgba(164,38,90,1);
}

.pink-box::before {
  background-color: #E74185;
}

.mauve-box-light {
  box-shadow: 10px 10px 5px 0px rgba(148,127,176,1);
}

.mauve-box-light::before {
  background-color: #CFC2E0;
}


/*right-aligned boxes*/
.red-box, .green-box, .purple-box, .mauve-box-dark {
  position: relative;
  margin: 75px 30px 75px 150px;
  background-color: #FFF;
  padding: 30px;
  border-radius: 10px;
}

.red-box::before, .green-box::before, .purple-box::before, .mauve-box-dark::before {
  content: " ";
  position: absolute;
  z-index: -1;
  width: calc(100% + 140px);
  height: calc(100% + 60px);
  top: -30px;
  right: -30px;
  border-radius: 10px;
}

.red-box {
  box-shadow: 6px 6px 15px 0px rgba(153,60,56,1);
}

.red-box::before {
  background-color: #F8615A;
}

.green-box {
  box-shadow: 6px 6px 15px 0px rgba(62,107,55,1);
}

.green-box::before {
  background-color: #6CB65F;
}

.purple-box {
  box-shadow: 6px 6px 15px 0px rgba(81,40,74,1);
}

.purple-box::before {
  background-color: #8F4880;
}

.mauve-box-dark {
  box-shadow: 10px 10px 5px 0px rgba(50,30,51,1);
}

.mauve-box-dark::before {
  background-color: #553E56;
}



/*callout styled like book page - 2E*/
.book-page {
position: relative;
padding: 60px 100px 30px 100px;
box-shadow: 10px 2px 15px -2px #BABABA;
background: #FFFFFF;
border-left: 5px double #E8E8E8;
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 83%, rgba(242,242,242,1) 100%);
margin: 50px 30px;
}

.book-page:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 1px;
  left: -10px;
  bottom: 1px;
  border-left: 5px double #E8E8E8;
}

.bookfont {
  font-family: 'Literata', serif;
}

.pg-title {
  font-family: 'Literata', serif;
  font-size: 1em;
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 10px;
}

.pg-num {
  font-family: 'Literata', serif;
  font-size: 0.9em;
  text-align: center;
  padding-top: 10px;
}

/*card breakpoints*/
.card-columns {
  display: inline-block;
}

.example {
position: relative;
padding: 40px 30px 30px 30px;
background: #FFFFFF;
margin: 50px 20px 80px 50px;
font-size: 1em;
box-shadow: -10px 10px 15px 0px rgba(51,32,52,1);
border-radius: 10px;
}

.example:before {
  content: " ";
  position: absolute;
  z-index: -1;
  background-color: #553E56;
  width: 100%;
  height: 100%;
  top: 30px;
  right: 30px;
  border-radius: 10px;
}

.example:after {
  content: "Example(s)";
  position: absolute;
  text-transform: uppercase;
  color: #FFF;
  z-index: -1;
  bottom: -28px;
  right: 45px;
}

.casestudy {
position: relative;
padding: 40px 30px 30px 30px;
background: #FFFFFF;
margin: 50px 20px 80px 50px;
font-size: 1em;
box-shadow: -10px 10px 15px 0px rgba(145,130,166,1);
border-radius: 10px;
}

.casestudy:before {
  content: " ";
  position: absolute;
  z-index: -1;
  background-color: #CFC2E0;
  width: 100%;
  height: 100%;
  top: 30px;
  right: 30px;
  border-radius: 10px;
}

.casestudy:after {
  content: "Case Study";
  position: absolute;
  text-transform: uppercase;
  color: #543D55;
  z-index: -1;
  bottom: -28px;
  right: 45px;
  font-weight: bold;
}

.case-study-icon {
  margin-top: 45px;
}

.clearfix {
  margin-bottom: 30px;
}

.definition {
  background-color: #553E56;
  padding: 5px;
  color: #FFFFFF;
  margin-left: -35px;
  padding-left: 35px;
  width: 40%;
  box-shadow: 2px 3px 6px 0px rgba(156,156,156,1);
}

dt:first-of-type, dd:first-of-type {
  padding-top: 30px;
}

dd {
  padding-bottom: 30px;
}

 .table-responsive {
  padding-bottom: 10px;
}

tr.total {
background-color: #ADBFD0!important;
}

.timeline {
  border-left: 3px solid #CFC2E0;
  padding-left: 20px;
  margin: 40px 20px 60px 60px;
}

.date {
 text-transform: uppercase;
 font-size: 1em;
}

.date::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f111";
  font-size: 1.2em;
  color: #553E56;
  position: absolute;
  left: 67px;
}

.alert-light {
    color: #4F4F4F;
    background-color: #F5F5F5;
    border-color: #E4E4E4;
}



.card-sp {
 margin-top: 30px;
 margin-bottom: 30px;
}

/*Tabs*/
.tab-content .btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child) {
  margin-right: 5px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: #553E56;
}

.alert-info {
    color: #615A6C;
    background-color: #E2DAEE;
    border-color: #CFC2E0;
}

.card {
  display: block;
}

.card-deck img {
 width: initial;
 display: block;
}

.card .flex {
  display: flex;
}

.flex img{
  width: 100%;
}

.red {
  color: #A41C2F;
}




/*Downloadable/Printable doc*/
.document h1 {
  background: none;
  color: #5A5A5A;
  min-height: 0;
  text-align: center;
  font-size: 1.8em;
  padding-bottom: 30px;
}

.document h2 {
  font-size: 1.5em;
}

.dlsavebtns {
margin-bottom: 30px;
}

.document .btn-group a {
 color: #212529;
 text-decoration: none;
}

.document .btn-outline-light {
  border-color: #CFC2E0;
}