/* ECTA Colors */

/* text colors */
.text-ecta2blue { color: #236aa4 !important; }
.text-ecta2blue-alt { color: #185380 !important; }
.text-ecta2green { color: #147629 !important; }
.text-ecta2purple { color: #982c78 !important; }
.text-ecta2orange { color: #b24000 !important; }
.text-ecta2spring { color: #46741b !important; }
.text-ecta2yellow { color: #9b5100 !important; }

/* background colors */
.bg-ecta2blue-dark { background-color: #122a49 !important; }
.bg-ecta2blue { background-color: #185380 !important; }
.bg-ecta2blue-alt { background-color: #2777b9 !important; }
.bg-ecta2blue-light { background-color: #d4e9f7 !important; }
.bg-ecta2green-dark { background-color: #147629 !important; }
.bg-ecta2green-light { background-color: #e8f8ec !important; }
.bg-ecta2orange-dark { background-color: #E15401 !important; }
.bg-ecta2orange-light { background-color: #fbe9d5 !important; }
.bg-ecta2purple-dark { background-color: #982c78 !important; }
.bg-ecta2purple-light { background-color: #f0cce0 !important; }
.bg-ecta2spring-dark { background-color: #46741b !important; }
.bg-ecta2spring-light { background-color: #e4f0d6 !important; }
.bg-ecta2yellow-dark { background-color: #9b5100 !important; }
.bg-ecta2yellow-light { background-color: #fff8ea !important; }
.bg-ecta2grey { background-color: #ccc !important; }

/* background utilties */
.bg-ecta2gradient { background: url("/?originalUrl=https%3A%2F%2Fectacenter.org%2F~images%2Fcommon%2Fbg-whitegradient-bottom.png") repeat-x bottom; }
.bg-ecta2lightened { background-color: rgba(255, 255, 255, 0.4); }
.bg-ecta2shaded { background-color: rgba(0, 0, 0, 0.05); }
a.bg-ecta2gradient:hover { background: none; }
a.bg-ecta2lightened:hover { background-color: rgba(255, 255, 255, 0.8); }

/* border colors */
.border-ecta2blue { border-color: #2777b9 !important; }
.border-ecta2green { border-color: #2daa4c !important; }
.border-ecta2orange { border-color: #f4923e !important; }
.border-ecta2purple { border-color: #982c78 !important; }
.border-ecta2spring { border-color: #84c24a !important; }
.border-ecta2yellow { 	border-color: #e18c26 !important }

/* BOOTSTRAP OVERRIDES */

/* link color override (AA WCAG against all background colors above must be 4.5:1 contrast ratio) */
a { color: #0855C9; }

/* increase top nav links contrast */
.navbar-dark .navbar-nav .nav-link { color: #fff; }

/* increase breadcrumbs contrast */
ol.breadcrumb li.breadcrumb-item { color: #303030; }
ol.breadcrumb li.breadcrumb-item + li.breadcrumb-item::before {
    color: #303030;
    font-family: "FontAwesome";
    content: "\f0da";
}

/* increase text-secondary contrast */
.text-secondary { color: #303030 !important; }

/* increase common button and badge contrasts */
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .badge-primary { background-color: #1E5C8F !important; }
.btn-secondary, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:visited, .badge-secondary { background-color: #303030 !important; }
.btn-success, .btn-success:hover, .btn-success:active, .btn-success:visited, .badge-success { background-color: #1B652D !important; }

/* re-underline text links */
a:link { text-decoration: underline !important; }
a:visited { text-decoration: underline !important; }
a:hover { text-decoration: underline !important; }
a:active { text-decoration: underline !important; }
/* button styles remain not underlined */
a.btn { text-decoration: none !important; }
a.btn:visited  { text-decoration: none !important; }
a.btn:hover { text-decoration: none !important; }
a.btn:active  { text-decoration: none !important; }


h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6, dl dt { font-weight: 700; }

/* ADDITIONAL UTILITIES */

/* hanging indent */
.hang { text-indent: -1rem; margin-left: 1rem; }
.wrap-letter { word-wrap: break-word; }

/* width, by pixels */
.w-60px { width: 60px !important; }
.w-90px { width: 90px !important; }
.w-120px { width: 120px !important; }
.w-150px { width: 150px !important; }
.w-180px { width: 180px !important; }
.w-210px { width: 210px !important; }
.w-240px { width: 240px !important; }
.w-270px { width: 270px !important; }
.w-300px { width: 300px !important; }
.w-360px { width: 360px !important; }
.w-360px { width: 360px !important; }
.w-420px { width: 420px !important; }
.w-480px { width: 480px !important; }
.w-540px { width: 540px !important; }
.w-600px { width: 600px !important; }

/* maximum width, by pixels */
.mw-60px { max-width: 60px !important; }
.mw-120px { max-width: 120px !important; }
.mw-180px { max-width: 180px !important; }
.mw-240px { max-width: 240px !important; }
.mw-300px { max-width: 300px !important; }
.mw-360px { max-width: 360px !important; }
.mw-420px { max-width: 420px !important; }
.mw-480px { max-width: 480px !important; }
.mw-540px { max-width: 540px !important; }
.mw-600px { max-width: 600px !important; }
/* width, by percent */
.w-95 { width: 95% !important; }
.w-90 { width: 90% !important; }
.w-85 { width: 85% !important; }
.w-80 { width: 80% !important; }
/* bootstrap has w-75 */
.w-70 { width: 70% !important; }
.w-65 { width: 65% !important; }
.w-60 { width: 60% !important; }
.w-55 { width: 55% !important; }
/* bootstrap has w-50 */
.w-45 { width: 45% !important; }
.w-40 { width: 40% !important; }
.w-35 { width: 35% !important; }
.w-30 { width: 30% !important; }
/* bootstrap has w-25 */
.w-20 { width: 20% !important; }
.w-15 { width: 15% !important; }
.w-10 { width: 10% !important; }
.w-5 { width: 5% !important; }

/* list types - type="" is now deprecated, and these are used for safety on pre-2018 content */
ol.lower-alpha { list-style-type: lower-alpha; }
ol.upper-alpha { list-style-type: upper-alpha; }
ol.lower-roman { list-style-type: lower-roman; }
ol.upper-roman { list-style-type: upper-roman; }
ul.circle { list-style-type: circle; }
ul.disc { list-style-type: disc; }
ul.square { list-style-type: square; }

ul.ecta2checklist { list-style-type: "\2714"; }
ul.ecta2checklist li ul { list-style-type: disc; }

@media (min-width: 576px) {
	ol.compactcolumn, ul.compactcolumn {
		column-count: 1;
	}
}
@media (min-width: 768px) {
	ol.compactcolumn, ul.compactcolumn {
		column-count: 2;
	}
}
@media (min-width: 1200px) {
	ol.compactcolumn, ul.compactcolumn {
		column-count: 3	;
	}
}

ol.compactcolumn li, ul.compactcolumn, li {
  break-inside: avoid-column; 
}

/* google search */
#googlesearch .gsc-search-button { background-color: #3cb45c; border-radius: 0.25em; border: none; }

/* return to top button */
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 900;
}

/* icons, fontawesome */
i { padding-right: 0.25em; flex-wrap: wrap; }
.featureicon { width: 3.5rem; text-align: left; }
.icon::before {
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  padding-right: 0.25rem;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: relative;
  left: 0;
  top: 0;
}

/* icons, file types with assigned colors */
.icon-aud::before { content: "\f1c7"; color: #09b79e !important; }
.icon-book::before { content: "\f02d"; color: #e18c26 !important; }
.icon-cc::before { content: "\f20a"; color: #505050 !important; }
.icon-doc::before { content: "\f1c2"; color: #2c5597 !important; }
.icon-link::before { content: "\f35d"; color: #0855C9 !important; }
.icon-mob::before { content: "\f3cd"; color: #cc0a0a !important; }
.icon-pdf::before { content: "\f1c1"; color: #cc0a0a !important; }
.icon-ppt::before { content: "\f1c4"; color: #c43e1c !important; }
.icon-xls::before { content: "\f1c3"; color: #1e6f46 !important; }
.icon-vid::before { content: "\f1c8"; color: #ff2b66 !important; }
.icon-zip::before { content: "\f1c6"; color: #fcb433 !important; }
.icon-file::before { content: "\f15b"; color: #787878 !important; }

/* icons, with inherited colors */
.icon-cal::before { content: "\f073"; }
.icon-comment::before { content: "\f086"; }
.icon-email::before { content: "\f0e0"; }
.icon-print::before { content: "\f02f"; }
.icon-reg::before { content: "\f234"; }

/* icons, social media */
.icon-youtube { color: #ff0000; }
.icon-facebook { color: #3b5998; }
.icon-twitter { color: #1da1f2; }
.icon-linkedin { color: #2967bc; }

/* icons, collapse/expand */
.icon-menu:before {
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  float: right;
  content: "\f0c9";
}
.icon-expand:before {
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  float: right;
  content: "\f068";
}
.icon-expand.collapsed:before { content: "\f067"; }

iframe.embed-hml-audio { 
  width: 100%; 
  max-width: 440px; 
  height: 60px; 
  padding: 0px !important; 
  background-color: #303030; 
  border-top: 0px solid #000; 
  border-bottom: 0px solid #000; 
  border-left: 0px solid #000; 
  border-right: 0px solid #000; 
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  margin-top: 0.5em;
  margin-bottom: 0.5em; 
  overflow: hidden;
}

/* ACCESSBILITY ASSURANCE */
ul.small li { min-height: 24px !important; }

/* PRINTING UTILITIES */
@media print {
  h2, h3, h4, h5 { break-after: avoid !important; }
  img { break-inside: avoid !important; }
  img.ecta2-print-header-logo { max-width: 32rem; }
  a { text-decoration: none !important; }
  .print-together { break-inside: avoid !important; }
  .print-new-page { break-before: always !important; }
  .print-same-page { break-before: avoid !important; }
  .print-across { break-inside: auto !important; }
  .print-smaller { font-size: 90%; }
  .collapse { display: block !important; height: auto !important; }
}

/* COOKIES BANNER */
.cookies-banner {
  z-index: 1000;
  background-color: #414141;
  color: #fff;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .01vw;
}