:root {
    --sun-life-yellow: #FEBE10;
    --sun-life-blue: #003946;
    --sun-life-warm-yellow: #FFF8E0;

    --light-grey: #DDE6E1;
    --medium-grey: #E0DCD1;
    --warm-grey: #A59E8C;

    --content-width: 1064px;
    --link-color: rgb(36, 87, 135);
    --link-icon-color: #f7cd46;
}

/* SRT - Font Awesome icons via CSS properties (.icon::before - required to make icons render reliably.) */
/* .icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
} */

/* DOES NOT WORK - SOME CONFLICT WITH THEIR CSS */
/* link to external site | fa-square-arrow-up-right */
/* .sy-lnre::after {
  content: '\f14c';
  margin-left: .25em;
  margin-top: 5px;
} */

a {
  color: var(--link-color);
  font-weight: 700;
  text-decoration: underline;
}

a:visited {
  color: var(--link-color);
}

a:hover {
  /* color: rgb(10, 80, 190); */
  text-decoration: none;
}

.container-fluid {
  margin: 0;
  padding: 0;
}


/* COLLAPSE - Start */

.sy-exp-wrapper {
  border: solid 1px rgb(215, 217, 218);
  margin: 0;
  padding: 0;
  width: 100%;
}

.sy-exp {
  background-color: #fff;
  font-size: 21px;
  padding: 30px 20px 30px 30px;
}

.sy-exp:hover {
  background-color: rgb(242, 242, 243);
}

.sy-exp h2 {
  font-size: 16px;
}
.sy-exp i {
  color: #424242;
}

.sy-exp-content {
  background-color: #fff;
  display: none;
  font-size: 16px;
  padding: 12px 20px 12px 64px;
}



.sy-togsc {
  font-size: 16px;
  margin-right: 20px;
}

.sy-togsc i {
  float: left;
}

/* COLLAPSE - End */

/* VIDEOS - Start */

.sy-video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.sy-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* VIDEOS - End */

.sy-new-alphabet {
  margin-bottom: 40px;
  text-transform: uppercase;
  width: 100%;
}

/* Terms Alphabet (Start) */

.letter-list {
  line-height: 1.9;
  list-style-type: none;
  padding: 0;
  /* font-size: 20px; */
}

.letter-list li {
  display: inline;
  margin-right: 0;
}

.sy-aal { /* active letter */
  border-right: solid 2px #999;
  color: var(--bright-blue);
  padding: 0 4px;
}

.sy-related-articles-modal {
  font-weight: bold;
  line-height: 3em;
}

.sy-article-list {
  list-style-type: none;
  margin-left: -2em;
}

.sl-link-p {
  margin-bottom: 0;
}

/* .sy-aal:hover {
  background-color: #e8e8e8;
} */

.sy-aal:visited {
  color: var(--bright-blue);
}

.sy-ail { /* inactive letter */
  border-right: solid 2px #999;
  color: var(--medium-grey-border
);
  padding: 0 4px;
}

.sy-aalk { /* active link */
  /* background-color: #24C5CF; */
  padding: 0 4px;
}

.sy-aalk a {
  color: #fff;
}

/* Terms Alphabet (End) */

.sy-link-content a, .sy-link-content a:visited {
  color: #000 !important;
  text-decoration: none !important;
}

.sy-link-content a:hover {
  text-decoration: underline !important;
}

.sy-link-tab {

}


sup {
  display: none;
}

.sy-sup {
  font-size:80%;
  vertical-align: super;
}

footer {
  margin: 40px 0 20px 0;
}

.sy-footer {
  border-top: solid 1px rgb(231, 232, 232);
  padding-top: 20px;
}

/* MODALS - Start */

.sy-modal {
  max-width: 760px;
}

.modal-content {
  border-radius: 0 !important;
}

.modal-header {
  background-color: #fff;
  border-bottom: none !important;
  padding: 20px 50px 0 42px;
}

.modal-close-icon {
  /* margin-top: 24px; */
}

.modal-header a {
  color: var(--link-color) !important;
  text-decoration: underline !important;
}

.modal-header a:visited {
  color: var(--link-color) !important;
}

.modal-header a:hover {
  color: rgb(10, 80, 190) !important;
}

.modal-title {
  font-size: 28px;
}

.modal-body {
  margin: 0;
  padding: 0 20px;
}

.sy-tog-modal {   /* Toggle in modal */
  background-color: #fff;
  border-top: 1px solid #ccc;
  float: left;
  font-size: 110%;
  width: 100%;
}

.sy-related-articles-modal {
  margin: 0;
}

.sy-content-info-modal,
#sy-art-info-last-medical-review
{
  display: none;
}

.sun-button-1 {
  background-color: rgb(247, 205, 70);
  border-radius: 0 !important;
  color: rgb(0, 62, 99);
}

.sun-button-1:visited {
  color: rgb(0, 62, 99);
}

.sun-button-1:hover {
  background-color: rgb(255, 194, 47);
  color: rgb(0, 62, 99);
}

.sy-art-info {
  margin-top: 40px;
}

.modal-footer {
  display: none !important;
  background-color: #eee;
  color: #424242;
  margin: 0;
  padding: 0 30px 10px 40px;
}

/* #syModal.btn-close {
  color: #000 !important;
} */

/* .modal-header .btn-close */

.custom-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
}


/* Make sure button is visible - Override Sun Life's CSS */
.modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000 !important;
}

.btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
  }

/* MODALS - End */

.sy-med-cond-add-resources {
  margin-top: 30px;
}

/* STYLING SUN LIFE CLASSES */

.sl-icon {
  color: #000 !important;
  filter: none;
  opacity: 1;
}

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

.sy-log-dot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  padding: 0;
  margin: 0;
}

@media (max-width:1240px) {

  .sy-modal {
    max-width: 512px;
  }


}