/* https://www.elon.edu/u/university-communications/web-styleguide/ */
/* Required at the beginning of any and ALL individual theme SCSS
 * stylesheet builds. Contains all necessary variables, functions, 
 * and mixins (from Base) but does not output any CSS. */
/* ::Transitions */
/* ------------------------------------------------------------ */
/* ::Link Hover/Focus/Active Styles Grouped Together */
/* ------------------------------------------------------------ */
/* ::Opacity with IE support */
/* ------------------------------------------------------------ */
/* ::Align things vertically (http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/) */
/* ------------------------------------------------------------ */
/* ::Retina Images */
/* ------------------------------------------------------------ */
/* ::Hex to RGB */
/* ------------------------------------------------------------ */
/* ::Clearfix */
/* ------------------------------------------------------------ */
/* ::Placeholder Text */
/* ------------------------------------------------------------ */
/* ::List styles */
/* ------------------------------------------------------------ */
/* ::Main Elon Palette */
/* ------------------------------------------------------------ */
/* ::Elon Law Palette */
/* ------------------------------------------------------------ */
/* ::Grey Accents Palette */
/* ------------------------------------------------------------ */
/* ::Utility Colors */
/* ------------------------------------------------------------ */
/* ::Assign colors to variable roles */
/* ------------------------------------------------------------ */
/* ::Basic variables */
/* ------------------------------------------------------------ */
/* ::Assign fonts/weights to variable roles */
/* ------------------------------------------------------------ */
/* ::Type sizes/scale */
/* ------------------------------------------------------------ */
/*$alpha    : 88px;
$beta   : 48px;
$gamma    : 36px;
$delta    : 28px;
$epsilon  : 24px;
$zeta   : 22px;
$eta    : 18px;
$theta    : 16px;
$iota     : 14px;
$kappa    : 12px;*/
/* ::Type defaults for compass' rhythm */
/* ------------------------------------------------------------ */
/* ::Variables */
/* ------------------------------------------------------------ */
/* ::Code Styles */
/* ------------------------------------------------------------ */
code {
  color: #905;
  background-color: rgba(153, 0, 85, 0.065);
  font-family: "Menlo","Consolas","Courier New",serif;
  font-size: 90%;
}

.sass-helper {
  font-size: 80%;
  text-align: right;
  color: #707070;
  font-style: italic;
  margin-top: 18px;
  margin-bottom: 0;
}

.sass-helper code.sass {
  background-color: transparent;
  font-style: normal;
  font-size: 100%;
}

/* ::Color Sample Grid Styles */
/* ------------------------------------------------------------ */
.color-sample-grid {
  margin-bottom: -20px;
}

.lt-ie9 .color-sample-grid {
  display: block;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  align-content: stretch;
  margin-left: -10px;
  margin-right: -10px;
}

@media screen and (min-width: 600px) {
  .color-sample-grid {
    display: block;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    align-content: stretch;
    margin-left: -10px;
    margin-right: -10px;
  }
}

.color-sample-wrapper {
  display: block;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  -webkit-justify-content: stretch;
  -moz-justify-content: stretch;
  -ms-flex-pack: stretch;
  justify-content: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  align-content: stretch;
  margin-bottom: 20px;
}

.lt-ie9 .color-sample-wrapper {
  -moz-box-flex: 0 1 calc(50% - 20px);
  -webkit-flex: 0 1 calc(50% - 20px);
  -ms-flex: 0 1 calc(50% - 20px);
  flex: 0 1 calc(50% - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.lt-ie9 .color-sample-wrapper.third {
  -moz-box-flex: 0 1 calc(33.333% - 20px);
  -webkit-flex: 0 1 calc(33.333% - 20px);
  -ms-flex: 0 1 calc(33.333% - 20px);
  flex: 0 1 calc(33.333% - 20px);
}

@media screen and (min-width: 600px) {
  .color-sample-wrapper {
    -moz-box-flex: 0 1 calc(50% - 20px);
    -webkit-flex: 0 1 calc(50% - 20px);
    -ms-flex: 0 1 calc(50% - 20px);
    flex: 0 1 calc(50% - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .color-sample-wrapper.third {
    -moz-box-flex: 0 1 calc(33.333% - 20px);
    -webkit-flex: 0 1 calc(33.333% - 20px);
    -ms-flex: 0 1 calc(33.333% - 20px);
    flex: 0 1 calc(33.333% - 20px);
  }
}

.color-sample {
  padding: 2.5em 2em;
  color: white;
  border-radius: 2px 2px 0 0;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}

.color-sample code {
  color: #ededed;
  background-color: transparent;
}

.color-sample.gold, .color-sample.yellow, .color-sample.light-gold, .color-sample.med-light-gold, .color-sample.med-dark-gold, .color-sample.lightest-gray, .color-sample.light-gray, .color-sample.medium-gray, .color-sample.smoke {
  color: black;
  text-shadow: none;
}

.color-sample.gold code, .color-sample.yellow code, .color-sample.light-gold code, .color-sample.med-light-gold code, .color-sample.med-dark-gold code, .color-sample.lightest-gray code, .color-sample.light-gray code, .color-sample.medium-gray code, .color-sample.smoke code {
  color: black;
}

.color-sample.maroon {
  background-color: #73000a;
}

.color-sample.light-maroon {
  background-color: #95000d;
}

.color-sample.med-light-maroon {
  background-color: #84000b;
}

.color-sample.med-dark-maroon {
  background-color: #620009;
}

.color-sample.dark-maroon {
  background-color: #510007;
}

.color-sample.gold {
  background-color: #b59a57;
}

.color-sample.light-gold {
  background-color: #d4c59e;
}

.color-sample.med-light-gold {
  background-color: #c5af7a;
}

.color-sample.med-dark-gold {
  background-color: #977e42;
}

.color-sample.dark-gold {
  background-color: #736133;
}

.color-sample.orange {
  background-color: #b7410e;
}

.color-sample.yellow {
  background-color: #dda510;
}

.color-sample.teal {
  background-color: #527b82;
}

.color-sample.smoke {
  background-color: #d3dfd3;
}

.color-sample.green {
  background-color: #788a38;
}

.color-sample.lightest-gray {
  background-color: #ededed;
}

.color-sample.light-gray {
  background-color: #cccacc;
}

.color-sample.med-gray {
  background-color: #9f9aa4;
}

.color-sample.dark-gray {
  background-color: #535961;
}

.color-sample.success {
  background-color: #2b8156;
}

.color-sample.error {
  background-color: #bf1c13;
}

.color-notes {
  display: block;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-flex-pack: flex-end;
  justify-content: flex-end;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  align-content: stretch;
  -moz-box-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  border: 3px solid #f5f5f5;
  border-top: 0;
  padding: 18px;
}

.color-notes ul {
  list-style-type: none;
  margin: 0;
  -moz-box-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  font-size: 85%;
  margin-bottom: 12px;
}

.color-notes ul li {
  margin: 0;
}

.color-notes ul li {
  padding-left: 24px;
  margin-bottom: 10px;
}

.color-notes ul li i {
  font-size: 20px;
  margin-left: -24px;
  vertical-align: -2px;
}

.color-notes .fa-times,
.color-notes .fa-times-circle,
.color-notes .fa-times-circle-o {
  color: #95000d;
}

.color-notes .fa-check,
.color-notes .fa-check-circle,
.color-notes .fa-check-circle-o {
  color: #2b8156;
}

/* ::Style Section Wrapper, Description and Source Common Styles */
/* ------------------------------------------------------------ */
.main-content > h2[id]::before,
.main-content > h3[id]::before,
.main-content > h4[id]::before,
.component > h2[id]::before,
.component > h3[id]::before,
.component > h4[id]::before,
.style-section > h2[id]::before,
.style-section > h3[id]::before,
.style-section > h4[id]::before {
  content: '';
  display: block;
  height: 5rem;
  margin-top: -5rem;
}

.style-section {
  margin-bottom: 3em;
}

.style-element,
.style-source {
  padding: 1.25em;
  margin-bottom: 2.25em;
  border: 3px solid #f5f5f5;
}

.style-element + .style-source {
  border-top: none;
  margin-top: -2.25em;
}

/* ::Style Element Styles */
/* ------------------------------------------------------------ */
.style-element {
  position: relative;
}

.style-element > p:last-child:not(.sass-helper):not(.typeset-as-h1):not(.typeset-as-h2):not(.typeset-as-h3):not(.typeset-as-h4):not(.typeset-as-h5):not(.typeset-as-h6) {
  margin-bottom: 0 !important;
}

div.pseudo-class-focus select,
div.pseudo-class-focus input,
div.pseudo-class-focus textarea,
label.pseudo-class-focus select,
label.pseudo-class-focus input,
label.pseudo-class-focus textarea {
  border: 1px solid #dda510;
  -webkit-box-shadow: #dda510 0 0 3px inset;
  -moz-box-shadow: #dda510 0 0 3px inset;
  box-shadow: #dda510 0 0 3px inset;
  background-color: white;
  outline: none;
}

/* ::Style Source Styles */
/* ------------------------------------------------------------ */
.style-source {
  background-color: #f5f5f5;
  overflow: hidden;
}

.style-source pre {
  margin-top: 0;
  padding: 0;
}

:not(pre) > code[class*="language-"], pre[class*="language-"] {
  background-color: #f5f5f5;
}

div.code-toolbar > .toolbar {
  opacity: 1;
  top: 0;
  right: 0;
}

div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
  color: #9f9aa4;
  background: #f5f5f5;
  box-shadow: none;
  border: 0;
  border-radius: 3px;
  padding: 6px 8px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar span:hover {
  background-color: #73000a;
  color: white;
}

/* ::Library Pages (CSS & JS) */
/* ------------------------------------------------------------ */
.info-wrap {
  border: 1px solid #cccacc;
  border-radius: 3px;
  background-color: #ededed;
  margin-bottom: 1.5em;
}

.info-wrap .info-title,
.info-wrap .info-details {
  padding: 1.5em;
}

.info-wrap .info-details {
  background-color: white;
  border-top: 1px solid #cccacc;
  border-radius: 0 0 3px 3px;
}

/*****************************************************************
    ACCESSIBILITY GRID
*****************************************************************/

:root {
  --maroon:#73000a; --gold: #b59a57; --orange:#b7410e; --yellow:#dda510;
  --teal:#527b82; --green:#788a38; --smoke:#d3dfd3; --white:#ffffff; --black:#000000;
}

.brand-contrast { font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; margin: 2rem 0; }

.contrast-table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.contrast-table caption { font-weight: 600; text-align: left; margin-bottom: .5rem; }
.contrast-table th, .contrast-table td { aspect-ratio: 1/1; width: 8%; vertical-align: middle; border: 1px solid #ccc; text-align: center; padding: .7rem; }
.contrast-table thead th { aspect-ratio: auto; background: #fafafa; }
.contrast-table tbody th { text-align: left; background: #fafafa; }

/* Incompatible cells: light gray background with simple diagonal stripes */
.contrast-table tbody td:not(.pass) {
  /* first layer = hatch (semi-transparent), second layer = row color */
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.35) 0 6px,
      rgba(255,255,255,0)   6px 12px
    ),
    #f0f0f0 ;
}

/* Row labels (first column in tbody) with background colors */
.contrast-table tbody tr:nth-child(1) th { background-color: var(--maroon); color: #fff; }
.contrast-table tbody tr:nth-child(2) th { background-color: var(--gold);   color: #000; }
.contrast-table tbody tr:nth-child(3) th { background-color: var(--orange); color: #fff; }
.contrast-table tbody tr:nth-child(4) th { background-color: var(--yellow); color: #000; }
.contrast-table tbody tr:nth-child(5) th { background-color: var(--teal);   color: #fff; }
.contrast-table tbody tr:nth-child(6) th { background-color: var(--green);  color: #fff; }
.contrast-table tbody tr:nth-child(7) th { background-color: var(--smoke);  color: #000; }
.contrast-table tbody tr:nth-child(8) th { background-color: var(--white);  color: #000; }
.contrast-table tbody tr:nth-child(9) th { background-color: var(--black);  color: #fff; }


/* Pass cells: force solid row color, no hatch */
.contrast-table tbody tr:nth-child(1)  td.pass { background-color: var(--maroon) !important;  background-image: none !important; }
.contrast-table tbody tr:nth-child(2)  td.pass { background-color: var(--gold)   !important;  background-image: none !important; }
.contrast-table tbody tr:nth-child(3)  td.pass { background-color: var(--orange) !important;  background-image: none !important; }
.contrast-table tbody tr:nth-child(4)  td.pass { background-color: var(--yellow) !important;  background-image: none !important; }
.contrast-table tbody tr:nth-child(5)  td.pass { background-color: var(--teal)   !important;  background-image: none !important; }
.contrast-table tbody tr:nth-child(6)  td.pass { background-color: var(--green)  !important;  background-image: none !important; }
.contrast-table tbody tr:nth-child(7)  td.pass { background-color: var(--smoke)  !important;  background-image: none !important; }
.contrast-table tbody tr:nth-child(8)  td.pass { background-color: var(--white)  !important;  background-image: none !important; }
.contrast-table tbody tr:nth-child(9)  td.pass { background-color: var(--black)  !important;  background-image: none !important; }

/* Add sample text on pass cells */
.contrast-table tbody td.pass::before {
  content: "Aa";
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--fg, #000);
}

/* Foreground color mapping by column */
.contrast-table td:nth-child(2).pass  { --fg: var(--maroon); }
.contrast-table td:nth-child(3).pass  { --fg: var(--gold); }
.contrast-table td:nth-child(4).pass  { --fg: var(--orange); }
.contrast-table td:nth-child(5).pass  { --fg: var(--yellow); }
.contrast-table td:nth-child(6).pass  { --fg: var(--teal); }
.contrast-table td:nth-child(7).pass  { --fg: var(--green); }
.contrast-table td:nth-child(8).pass  { --fg: var(--smoke); }
.contrast-table td:nth-child(9).pass  { --fg: var(--white); }
.contrast-table td:nth-child(10).pass { --fg: var(--black); }

.font-example {
  font-style: normal;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  word-break: break-all;
  letter-spacing: 1px;
}

.font-example.font-regular {
  font-weight: 400;
}

.font-example.font-demi {
  font-weight: 600;
}

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

.font-example.font-bembo {
  font-family: "bembo-mt-pro", sans-serif;
}

.font-example.font-minion {
  font-family: "minion-pro", serif;
}

.font-example.font-myriad {
  font-family: "myriad-pro", sans-serif;
}

.font-example.font-adelle {
  font-family: "adelle", serif;
}

.font-example.font-gothic {
  font-family: "alternate-gothic-atf", sans-serif;
}

.font-example.font-roboto {
  font-family: "roboto", sans-serif;
}

.font-example.font-roboto-condensed {
  font-family: "roboto-condensed", sans-serif;
}

.file-format-usage {
  text-align: center;
  width: 100%;
}
.file-format-usage thead,
.file-format-usage tbody,
.file-format-usage tr,
.file-format-usage td,
.file-format-usage th,
.file-format-usage tfoot {
  text-align: center;
  padding: .375em 12px;
}
.file-format-usage thead {
  background-color: #535961;
  color: white;
}
.file-format-usage th[scope="row"] {
  text-align: right;
  font-weight: normal;
}
.file-format-usage thead th[scope="row"] {
  font-weight: bold;
}
.file-format-usage .fa-check-square {
  color: #2b8156;
}
.file-format-usage .fa-check {
  color: #95c0aa;
}

.file-format-key .fa-check-square {
  color: #2b8156;
}
.file-format-key .fa-check {
  color: #95c0aa;
}