/* Variables */
:root {
  --fg-color-families: #1a95d3;
  --fg-color-educators: #0ca379;
  --fg-color-health: #d55033;
  --fg-color-advocates: #f53e8c;
  --fg-color-neutral: #3f3f3f;
  --fg-color-trainings:  #9b5ea0;
  --fg-color-orange: #d55033;
  --fg-color-blue: #1a95d3;
  --fg-color-darkblue: #31769e;
  --fg-color-green: #0ca379;
  --fg-color-pink: #f53e8c;
  --fg-color-purple:  #9b5ea0;
  --border-gold: #ffcb6b;
  --border-green: #00a172;
  --border-blue: #0093cd;
  --border-orange: #fc9700;
}
/* Our main container */
.container {
  margin-right: auto;
  margin-left: auto;
  max-width: 980px; /* or 950px */
  background-color: #fff;
}

body {
  background-color: #00375b;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}
.row-centered {
  text-align: center;
}
.col-center {
  display:inline-block;
  float:none;
  /* reset the text-align */
  text-align:left;
  /* inline-block space fix */
  margin-right:-4px;
}
.col-centered {
  float: none;
  margin: 0 auto;
}
.form-horizontal .control-label.text-left {
  text-align: left;
}

.box {
  padding: 0 5px 0 5px;
}

.carousel-div
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  top: 0;
  right: -25rem;
}

.tout-hrl-bkg {
  background-color: #f9f5fa;
  text-decoration:none;
}

.big-checkbox  > input {width: 100px; height: 100px;}

/* Vertical spacing classes */
.spacer1 { height: 1px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer3 { height: 3px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer5 { height: 5px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer8 { height: 8px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer10 { height: 10px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer15 { height: 15px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer20 { height: 20px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer25 { height: 25px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer30 { height: 30px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer35 { height: 35px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer40 { height: 40px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer45 { height: 45px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer50 { height: 50px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer100 { height: 100px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }
.spacer200 { height: 200px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; }

.fs-7  { font-size: 7pt; }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-15 { font-size: 15px; }
.fs-17 { font-size: 17px; }
.fs-20 { font-size: 20px; }

.greytext { color: #8c8c8c; }
.bluetext { color: var(--fg-color-blue) !important; }
.dark-bluetext { color: var(--fg-color-darkblue) !important; }
.greentext { color: var(--fg-color-green) !important; }
.purpletext { color: var(--fg-color-purple) !important; }
.pinktext { color: var(--fg-color-pink) !important; }
.orangetext { color: var(--fg-color-orange) !important; }

.lighttext { color: #a5a5a5; }
.bold { font-weight: bold; }
.lightbold { font-weight: 500; }

/* Headline text colors */
.color-families { color: var(--fg-color-families) !important; }
.color-educators { color: var(--fg-color-educators) !important; }
.color-health { color: var(--fg-color-health) !important; }
.color-advocates { color: var(--fg-color-advocates) !important; }
.color-training { color: var(--fg-color-neutral) !important; }
.color-trainings { color: var(--fg-color-trainings) !important; }

.icon-orange { color: #f16646; }
.icon-blue { color: #0036e6; }
.icon-green { color: #0ca379; }
.icon-purple { color: #9b5ea0; }
.icon-gold { color: #d6af13; }

.wideletter-10 { letter-spacing: 1.05px; }
.wideletter-15 { letter-spacing: 1.5px; }

.row-no-padding > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.force-left {
  text-align: left !important;
}
.force-right {
  text-align: right !important;
}

.valign-bottom { vertical-align: -50% !important; }

.pad0 { padding-left: 0;padding-right: 0; }
.pad3 { padding-left: 3px ; padding-right: 3px; }
.pad5 { padding-left: 5px; padding-right: 5px; }
.pad8 { padding-left: 8px; padding-right: 8px; }
.pad10 { padding-left: 10px; padding-right: 10px; }

.padright2 { padding-right: 2px; }
.padtop2 { padding-top: 2px; }
.padtop5 { padding-top: 5px; }
.padtop10 { padding-top: 10px; }
.padtop20 { padding-top: 20px; }
.padtop30 { padding-top: 30px; }
.padbottom5 { padding-bottom: 5px; }
.padbottom15 { padding-bottom: 15px; }

.marginbottom3 { margin-bottom: 3px; }
.marginbottom10 { margin-bottom: 10px; }
.marginbottom20 { margin-bottom: 20px; }
.margin-left10 { margin-left: 10px; }
.margin-top20 { margin-top: 20px; }

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}
.nopadding-left {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.nopadding-right {
  padding-right: 0 !important;
  /*margin-right: 0 !important; */
}
.nomargin-bottom {
  margin-bottom: 0;
  padding-bottom: 0;
}
.nowrap-text {
  white-space: nowrap;
}

.flag-icon-padding {
  padding: 0px 10px 0px 0px !important;
  margin: 0 !important;
 }
.mtop0 { margin-top: 0 }

.box-border { border: 1px solid #dbdbdb;}
.outline-border { outline: 1px solid #dbdbdb;}

.social-box {
  border: 1px solid #dbdbdb;
  padding: 6px 0px 6px 2px;
  margin-left: 1px;
  margin-right: 1px;
}

.add_gutter { margin-left: 15px; margin-right: 15px; }

.tout-bar {
  height: 5px;
  width: 300px;
  /*display:block; /* for use on default inline elements like span */
  margin: 0;
  /*overflow: hidden;*/
  background-color: #f16646;
}
.bar-orange { background-color: #f16646; }
.bar-purple { background-color: #8a4299; }
.bar-lightpurple {
  color: #6d6b6d;
  background-color: #e5cae6;
}
.bar-green { background-color: #18a577; }
.bar-blue { background-color: #1a95d3; }
.bar-lightgreen { background-color: #dcf8e8; }

.hr-dotted {
  border-top: dotted 3px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.hr-white { color: #f8b6a6; }
.hr-blue { color: #98bace; }
.hr-green { color: #19a477; }
.hr-lightpurple { color: #d7bfdd;}

.hr-videos {
  color: #dcdcdc;
  background-color: #dcdcdc;
  height: 1px;
}

.hr-attendance-videos {
  color: #dcdcdc;
  border: none;
  background-color: #dcdcdc;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 2px;
}

.tout-footer-orange {
  color: #fff;
  background-color: #f16646;
  width: 300px;
  height: 140px;
  margin-top: 0;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.tout-hrl-box {
  border: 1px solid lightgrey;
  margin-bottom: 9px;
  color: #8a4299;
  font-size: 16px;
}
.tout-hrl-box:hover{
  background: #d7bfdd; /* make this whatever you want */
}

.no-underline { text-decoration: none !important; }

.img-circle {
  border-radius: 50%;
}

.topic-image {
  padding-top: 8px;
}

.hbl-link {
  font-family: 'Helvetica';
  color: #31769e;
  font-size: 16px;
  font-weight: normal;
}

.video-link-blue {
  color: #31769e !important;
}

/* Need these two because links sometimes become unclickable on col-xs */
/* Use only if links become unclickable because it has side effects */
.add-z-index {
  position:relative;
  z-index:500;
}

.hbl-headline {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 36px;
  color: var(--fg-color-neutral);
  padding-top: 7px;
  line-height: 100%;
}

.hbl-headline-text {
  font-family: 'Helvetica';
  font-size: 16px;
  line-spacing: 24pt;
  padding-top: 8px;
  padding-bottom: 10px;
  color: #5a5a5a;
}

/* Call-to-action a/k/a "tout" height.
 * Note: pay attention to precedence here!
*/
@media all and (max-width: 768px) {
  .hbl-tout-div {
    min-height: 200px;
  }
}
@media all and (max-width: 992px) and (min-width: 768px){
  .hbl-tout-div {
    min-height: 300px;
  }
}
@media all and (min-width: 992px) {
  .hbl-tout-div {
    min-height: 250px;
  }
}
@media all and (max-width: 480px) {
  .hbl-tout-div {
    min-height: 300px;
  }
}

.hbl-tout-div {
   font-family: 'Roboto';
   margin-bottom: 10px;
   border: 1px solid #98bbce;
   border-radius: 20px;
   padding: 0px 15px 0px 15px;
   position: relative;
 }
.hbl-tout-plain-div {
  font-family: 'Roboto';
  padding: 0px;
}
.hbl-tout-image-div {
  font-family: 'Roboto';
  margin-bottom: 10px;
  position: relative;
}
.hbl-tout-div h2 {
  font-size: 20px;
  font-weight: 400;
  color: #31769e;
  letter-spacing: -0.09px;
  margin-top: 10px;
}
.hbl-tout-div h3 {
  font-family: 'Roboto';
  font-size: 10px;
  font-weight: 500;
  color: #753d7c;
  letter-spacing: 2px;
  margin-top: 10px;
  text-transform: uppercase;
}
.hbl-tout-div hr {
  border-top: dotted 3px;
  margin-top: 4px;
  margin-bottom: 0;
  color: #98bbce;
  padding-top: 10px;
}
.hbl-tout-div span {
  font-family: 'Roboto';
  font-size: 14px;
  line-height: 20px;
  color: #595959;
}
.hbl-tout-div a {
  font-family: 'Roboto';
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  vertical-align: middle;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 0;
  color: #fff;
  height: 24px;
  max-width: 200px;
  border-radius: 12px;
  padding-top: 4px;
  text-transform: uppercase;
}
.hbl-tout-div .bottom-buttons {
  position: absolute;
  bottom: 0;
  margin-bottom: 15px;
}

.my-tookit-btn-padding {
  height: 40px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block;
}
.hbl-tout-div-btn-blue { background-color: #1b91d1; color: #fff;}
.hbl-tout-div-btn-blue:hover { color: yellow; font-weight: 500;}
.hbl-tout-div-btn-green { background-color: var(--fg-color-educators); }
.hbl-tout-div-btn-purple { background-color: #753d7c; color: #fff;}
.hbl-tout-div-btn-purple:hover { background-color: #a564c3; color: #fff; }
.hbl-tout-div-btn-purple,
.hbl-tout-div-btn-purple:hover,
.hbl-tout-div-btn-purple:focus,
.hbl-tout-div-btn-purple:focus-visible,
.hbl-tout-div-btn-purple:active {
  color: #fff !important;
}
.hbl-tout-div-btn-health { background-color: var(--fg-color-health); }
.hbl-tout-div-btn-advocates { background-color: var(--fg-color-advocates); }
.hbl-tout-div-btn-training { background-color: var(--fg-color-neutral); }
.hbl-tout-div-btn-red { background-color: #d3205d; color: #fff;}
.hbl-tout-div-btn-red:hover { color: yellow; font-weight: 500;}
.hbl-tout-div-btn-read-english { background-color: #9852a7; color: #fff;}
.hbl-tout-div-btn-read-english:hover { background-color: #ba75d1; color: #fff; }
.hbl-tout-div-btn-read-spanish { background-color: #f15210; color: #fff; }
.hbl-tout-div-btn-read-spanish:hover { background-color: #f18858; color: #fff; }


.hbl-tout-image {
  float: right;
  /*margin-right: 2px;*/
  margin-left: 25px;
  margin-top: 0;
  max-width: 90px;
  height: auto;
}
.vertical-bar-div {
  border-right: 1px solid #98bbce;
  margin-top: 10px;
}
.landing-page-resource-box {
  font-family: 'Roboto';
  margin-bottom: 10px;
  border: 1px solid #98bbce;
  border-radius: 10px;
  padding: 0 10px 10px 10px;
}
.landing-page-resource-box h2 {
  font-size: 17px;
  letter-spacing: 0;
  color: #717171;
  margin-top: 10px;
  margin-bottom: 10px;
}
.landing-page-resource-box .hr-normal {
  margin: 2px 0 2px 0;
  border-top: 1px solid #dcdcdc;
}
.landing-page-resource-box .curated {
  font-size: 11px;
  color: #31769e;
  letter-spacing: 1.20px;
  text-transform: uppercase;
}
.landing-page-resource-box .hr_dotted2 {
    border-top: dotted 2px;
    margin-top: 4px;
    margin-bottom: 0;
    color: #9bbace;
    padding-top: 10px;
}

.hbl-publication-div {
  min-height: 200px;
  border: 1px solid #98bbce;
  border-top: medium double #98bbce;
  padding-right: 10px;
  padding-left: 10px;
  height: auto;
  margin-bottom: 0;
  padding-bottom: 0;
  overflow:auto;
}
.hbl-publication-footer {
  background-color: #fff;
  color: #fcfcfc;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-transform: uppercase;
  margin-bottom: 10px;
  border: 1px solid #98bace;
  border-top: none;
  border-bottom: medium double #98bace;
}
.hbl-publication-button-bottom {
  position: absolute;
  bottom: 0;
  padding-bottom: 10px;
}

.hbl-publication-image {
  float: right;
  margin-right: 2px;
  padding-left: 10px;
  margin-top: 0;
  max-width: 150px;
  width: 100%;
  height: auto;
}

.hbl-tout-title {
  color: #31769e;
  font-size: 20px;
  padding-top: 4px;
  padding-bottom: 10px;
}

.hbl-tout-title-green {
  color: #18a577;
  font-size: 20px;
  padding-top: 4px;
}

.hbl-tout-text {
  color: #8c8c8c;
  font-family: 'Helvetica';
}

.hbl-tout-button {
  vertical-align: bottom;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 0;
  max-width: 130px;
  height: auto;
}
.tout-button-pos {
  position: absolute;
  bottom: 20px;
  left: 30px;
}

.hbl-topic-image {
  float: right;
  margin-right: 2px;
  padding-left: 10px;
  margin-top: 0;
  max-width: 120px;
  height: auto;
}

.hbl-related-resources-image {
  float: right;
  margin-right: 2px;
  padding-left: 10px;
  margin-top: 0;
  max-width: 250px;
  height: auto;
}
.hbl-tiny-topic-headline-neutral {
  font-family: 'Roboto';
  font-size: 12px;
  letter-spacing: 5px;
  font-weight: bold;
  line-spacing: 24pt;
  padding-top: 0px;
  color: var(--fg-color-neutral);
  text-transform: uppercase;
}
.hbl-tiny-topic-headline-families {
  font-family: 'Roboto';
  font-size: 12px;
  letter-spacing: 5px;
  font-weight: bold;
  line-spacing: 24pt;
  padding-top: 0px;
  color: #1a95d3;
  text-transform: uppercase;
}
.hbl-tiny-topic-headline-educators {
  font-family: 'Roboto';
  font-size: 12px;
  letter-spacing: 5px;
  font-weight: bold;
  line-spacing: 24pt;
  padding-top: 0px;
  color: #18a577;
  text-transform: uppercase;
}
.hbl-tiny-topic-headline-health-staff {
  font-family: 'Roboto';
  font-size: 12px;
  letter-spacing: 5px;
  font-weight: bold;
  line-spacing: 24pt;
  padding-top: 0px;
  color: var(--fg-color-health);
  text-transform: uppercase;
}
.hbl-tiny-topic-headline-advocates {
  font-family: 'Roboto';
  font-size: 12px;
  letter-spacing: 5px;
  font-weight: bold;
  line-spacing: 24pt;
  padding-top: 7px;
  padding-bottom: 5px;
  color: var(--fg-color-advocates);
  text-transform: uppercase;
}
.hbl-tiny-topic-headline-trainings {
  font-family: 'Roboto';
  font-size: 12px;
  letter-spacing: 5px;
  font-weight: bold;
  line-spacing: 24pt;
  padding-top: 7px;
  padding-bottom: 5px;
  color: var(--fg-color-trainings);
  text-transform: uppercase;
}

.hbl-topic-headline-families {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 40px;
  color: #1a95d3;
  padding-top: 7px;
  padding-bottom: 5px;
  line-height: 100%;
}
.hbl-topic-headline-educators {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 40px;
  color: #18a577;
  padding-top: 7px;
  padding-bottom: 5px;
  line-height: 100%;
}
.hbl-topic-headline-trainings {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 40px;
  color: var(--fg-color-trainings);
  padding-top: 7px;
  padding-bottom: 5px;
  line-height: 100%;
}
.hbl-topic-headline-black {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 40px;
  color: #000;
  padding-top: 7px;
  line-height: 100%;
}
.hbl-topic-subheadline {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 30px;
  color: #717171;
  padding: 7px 0px 5px 5px;
  line-height: 100%;
}
.hbl-topic-subheadline-image {
  float: right;
  margin-right: 2px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 20px 0px;
  border: 1px solid #717171;
  max-width: 100%;
  height: auto;
}
.hbl-topic-text {
  color: #5a5a5a;
  font-size: 16px;
}
.hbl-topic-text a {
  color: var(--fg-color-orange);
  text-decoration: none;
}
.hbl-topic-headline-health-staff {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 40px;
  color: var(--fg-color-health);
  padding-top: 7px;
  line-height: 100%;
}
.hbl-topic-headline-advocates {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 40px;
  color: var(--fg-color-advocates);
  padding-top: 7px;
  line-height: 100%;
}
.hbl-topic-subheadline-educators {
  font-weight: 300;
  font-size: 25px;
}
.hbl-topic-heading-educators {
  font-weight: 400;
  font-size: 18px;
}

.hbl-download-headline {
  font-family: 'Helvetica';
  color: #5a5a5a;
  font-size: 22px;
}
.hbl-download-text {
  font-family: 'Helvetica';
  color: #31769e;
  font-size: 16px;
  font-weight: normal;
}
.hbl-download-icon {
  max-width: 18px;
  height: auto;
  margin-right: 15px;
}
.tiny-btn-text {
  font-size: 10px;
  font-family: 'Helvetica';
}
.tiny-btn-my-toolkit {
  background: #fff;
  color: #33afd4;
}
.tiny-link-text {
  font-size: 14px;
  font-family: 'Helvetica';
}
.file-type-icon {
  background-color: #2aabd2;
  color: #fff;
  font-size: 9px;
  padding: 3px;
  margin-right:3px;
  vertical-align: middle;
  border-radius: 5px;
}
.hbl-related-resources-div {
  background-color: #f4f4f6;
  padding: 12px 12px 12px 12px;
}
.hbl-resources-header {
  font-family: 'Helvetica';
  color: #5a5a5a;
  font-size: 40px;
  font-weight: bold;
}
.hbl-related-resources-header {
  font-family: 'Helvetica';
  color: #5a5a5a;
  font-size: 18px;
  font-weight: bold;
}
.hbl-related-resources-text {
  font-family: 'Helvetica';
  color: #31769e;
  font-size: 14px;
}

.hbl-top10-headline-families {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 40px;
  color: #1a95d3;
  padding-top: 7px;
  line-height: 100%;
}
.hbl-top10-headline-educators {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 40px;
  color: #18a577;
  padding-top: 7px;
  line-height: 100%;
}
.hbl-top10-headline-text {
  color: #5a5a5a;
  font-size: 16px;
}
.hbl-top10-subheadline {
  color: #5a5a5a;
  font-size: 16px;
  font-weight: 500;
}
.hbl-top10-body-text {
  color: #5a5a5a;
  font-size: 16px;
}
.hbl-top10-download-ul {
  font-family: 'Helvetica';
  color: #31769e;
  font-size: 16px;
  padding: 15px;
}

.hbl-about-headline {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 40px;
  color: #1a95d3;
  padding-top: 7px;
  line-height: 100%;
}
.hbl-about-headline-text {
  color: #5a5a5a;
  font-size: 16px;
}
.hbl-about-headshot {
  float: left;
  max-width: 300px;
  height: auto;
  margin-right: 10px;
  margin-bottom: 0;
}
.hbl-about-headshot-name {
  font-size: 20px;
  font-weight: bold;
}
.hbl-about-headshot-title {
  font-size: 16px;
  font-style: italic;
}
.hbl-about-headshot-gender {
    font-size: 14px;
    font-style: italic;
}
.hbl-privacy-headline {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 22px;
  color: #1a95d3;
  padding-top: 7px;
  line-height: 100%;
}
.hbl-privacy-subheadline {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 16px;
  color: #1a95d3;
  padding-top: 7px;
  line-height: 100%;
}
.hbl-privacy-text {
  color: #5a5a5a;
  font-size: 14px;
}

/**
 * My Toolkit
 */
.toolkit-header1 {
  color: #333;
  background-color: #98bace;
  border: 1px solid #58a1ce;
  padding: 6px 10px;
}
.toolkit-bg {
  background-color: #98bace;
}
/**
 * Calculators
 */
.tpc-headline {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 36px;
  color: #005890;
  padding-top: 7px;
  line-height: 100%;
}
.tpc-headline-text {
  font-family: 'Helvetica';
  font-size: 16px;
  line-spacing: 24pt;
  padding-top: 8px;
  color: #5a5a5a;
}
.tpc-form-box {
  background: #efefef;
}
.no-results {
  font-family: 'Helvetica';
  font-size: 16px;
  color: #1a95d3;
  padding-bottom: 30px;
}
.section-headline {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 18px;
  color: #000;
  padding-top: 7px;
  padding-bottom: 12px;
  line-height: 100%;
  border-top:1px solid #dcdcdc;
  margin-top: 10px;
}
.section-headline-external {
  font-size: 15px;
}
.section-tout-headline {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 25px;
  text-align: center;
  color: #717171;
  padding: 7px 0px 5px 5px;
  line-height: 100%;
}
.video-headline {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 18px;
  color: #000;
  padding-top: 7px;
  padding-bottom: 5px;
  line-height: 100%;
}

.video-thumbnail {
  /*width: 200px;*/
  width: 300px;
}
.search-videos-div  {
  width: 200px;
  height: 75px;
  border: solid 1px #c0c0c0;
  overflow: auto;
  padding-left: 5px;
  margin-bottom: 10px;
  font-size: 13px;
  font-family: 'Roboto';
}

.blue-tooltip + .tooltip > .tooltip-inner { background-color: #42add8; }
.blue-tooltip + .tooltip > .tooltip-arrow { border-bottom-color: #42add8; }

.white-tooltip + .tooltip > .tooltip-inner { background-color: #eff5f9; color: #000; border: 1px solid #000; }
.white-tooltip + .tooltip > .tooltip-arrow { border-bottom-color: #eff5f9; }

.feedback-date-bar {
  background-color: #1a95d3;
  font-family: 'Helvetica';
  color: #fff;
  font-size: 18px;
  text-align: center;
  vertical-align: middle;
  line-height: 35px;
  margin-top: 10px;
  margin-bottom: 15px;
  border-radius: 15px;
}
.date-bar-green {
    background-color: #18a577;
    font-family: 'Helvetica';
    color: #fff;
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    line-height: 35px;
    margin-top: 10px;
    margin-bottom: 15px;
}
.date-bar-purple {
  background-color: #753d7c;
  font-family: 'Helvetica';
  color: #fff;
  font-size: 18px;
  text-align: center;
  vertical-align: middle;
  line-height: 35px;
  margin-top: 10px;
  margin-bottom: 15px;
}

.edit-link {
  font-size: 14px !important;
}

.admin-form-header {
  color: #333;
  background-color: #efefef;
  padding: 6px 10px;
  border-bottom: 1px solid #dbdbdb;
}

.flash-alert {
  border: none;
  padding: 10px 15px 10px 15px;
}

/* Search */
.search-results-div {
  font-family: 'Roboto';
  font-weight: 300;
  margin-bottom: 10px;
}
.search-results-div h2 {
  font-size: 40px;
  color: #f96a49;
  line-height: 40px;
  font-weight: 300;
}
.search-results-div p {
  font-size: 15px;
  color: #5a5a5a;
  line-height: 20px;
  font-weight: 300;
}
.search-results-div img {
  max-width: 45px;
  padding: 0;
}
.search-results-div hr {
  color: #c0c0c0;
  margin: 5px 0 5px 0;
  padding: 0;
  border-top: solid 1px;
}
.search-results-div.num-results {
  font-family: 'Roboto';
  font-size: 40px;
  font-weight: 300;
  color: #9b58a3;
  line-height: 40px;
}
.search-results-div.title {
  font-family: 'Roboto';
  font-size: 17px;
  font-weight: 500;
  color: #31769e;
  line-height: 20px;
}
.search-results-div.title:hover {
  color: #1b8fce;
}
.search-results-div.icon {
  padding-left: 0;
  max-width: 40px;
}
.search-results-div.refine-search {
  font-size: 17px;
  font-weight: 500;
  color: #717171;
  letter-spacing: 0;
  margin-bottom: 3px;
}
.search-results-div.filter-header {
  font-size: 15px;
  font-weight: 500;
  color: #31769e;
  letter-spacing: 0;
  margin-bottom: 0;
}
.search-results-div.pulldown-content {
  font-size: 14px;
  font-weight: 500;
}
.search-results-div.label {
  font-family: 'Roboto';
  font-size: 14px;
  font-weight: 300;
  color: #717171;
  margin: 0;
  padding: 0;
}
.selected-pulldown-text {
  color: #9b58a3 !important;
}

.search-results-headline {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 20px;
  color: #1a95d3;
  padding-top: 7px;
  line-height: 100%;
}
.search-results {
  font-family: 'Helvetica';
  color: #31769e;
  font-size: 16px;
  padding: 4px;
}
.advanced-search {
  padding-top: 10px;
  text-transform: none;
  color: #8c8c8c!important;
  background-color: #fff !important;
}
.search-title { 
  color: #0027ac;
  font-size: 16px;
  font-family: 'Helvetica';
  line-height: 100%;
}
.search-title-blue {
  font-family: 'Helvetica';
  font-size: 18px;
  color: #0036e6;
  line-height: 100%;
}
a.search-title-blue:visited {
  color: #002499;
}
.search-title-green {
  font-family: 'Helvetica';
  font-size: 18px;
  color: #0ca379;
  line-height: 100%;
}
a.search-title-green:visited {
  color: #99e7a7;
}
.search-title-orange {
  font-family: 'Helvetica';
  font-size: 18px;
  color: #f16646;
  line-height: 100%;
}
a.search-title-orange:visited {
  color: #FFB833;
}
.search-title-purple {
  font-family: 'Helvetica';
  font-size: 18px;
  color: #9b5ea0;
  line-height: 100%;
}
a.search-title-purple:visited {
  color: #de7fe6;
}
.search-extraction {
  color: #545454;
  font-size: 14px;
  font-family: 'Roboto';
  line-height: 120%;
  margin-bottom: 0;
}
.search-date {
  color: #333;
  font-size: 12px;
  font-family: 'Roboto';
  font-style: italic;
  line-height: 25%;
}
.search-categories-div  {
  width: 230px;
  height: 150px;
  border:solid 1px #c0c0c0;
  overflow:auto;
  padding-left: 5px;
  margin-bottom: 10px;
  font-size: 13px;
  font-family: 'Roboto';
}
.search-categories-label {
  font-weight: normal;
}
.search-categories-display {
  color: #00c0d3;
  font-family: 'Roboto';
  font-size: 12px;
  text-transform: uppercase;
}
.search-input-box {
  width: 230px;
}
.search-category-div {
  min-height: 20px;
}
.caret {
  color: #fff;
}
.edit-content-node-id {
  font-weight: normal;
  font-size: 16px;
}
.hide-element {
  display: none;
}

.img-promo {
  max-width: 100%;
  height: auto;
}

/* SELECT box widths */
.select-mini {
  width: 60px;
}
.select-small {
  width: 90px;
}
.select-medium {
    width: 150px;
}
.select-large {
  width: 210px;
}
.select-xlarge {
    width: 270px;
}
.select-xxlarge {
  width: 530px;
}

.expand-background {
  background-color: #e8eff9;
  padding: 10px;
  border-style: solid;
  border-width: 1px;
}

.hbl-link-green:link,
.hbl-link-green:visited {
  color: #83a58a;
  font-weight: 500;
}

/*** CTLE Applicatib ***/
.ctle-header-text {
  font-family: 'Helvetica';
  font-size: 16px;
  color: #5a5a5a;
  padding: 15px 15px 15px 15px;
}

.survey-form {
  font-size: 16px;
  font-weight: 400;
}
.survey-buttons {
  margin-top: 6px;
  vertical-align: middle;
}
.survey-header {
  color: #333;
  background-color: #f2f3f4;
  border: 1px solid #dbe9f4;
  padding: 6px 10px;
}

/****************/
/* 2023 Updates */
/****************/
.dashboard-tout-div-new {
  background-color: rgba(16, 176, 198, 0.07);
  font-family: 'Roboto';
  margin-bottom: 20px;
  border: 4px solid var(--border-orange);
  border-radius: 20px;
  padding: 0;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
  /*max-width: 425px !important;   /* PLAY WITH THIS! */
}
/* 3 columns */
.dashboard-tout-text-new {
  color: #484747;
  font-size: 18px !important;
  font-weight: 400 !important;
  height: 190px;
  font-family: 'Roboto';
  padding: 10px 15px 10px 15px;
  border-radius: 5% 5%;
}

.dashboard-tout-div-new h2 {
  font-size: 20px;
  font-weight: 500;
  color: #31769e;
  letter-spacing: -0.09px;
  margin-top: 10px;
  padding: 0 10px 0 15px;
}
.dashboard-tout-buttons {
  margin-top: 20px;
  text-align: center;
}
.dashboard-tout-div-new h3 {
  font-family: 'Roboto';
  font-size: 10px;
  font-weight: 500;
  color: #753d7c;
  letter-spacing: 2px;
  margin-top: 10px;
  text-transform: uppercase;
}
.dashboard-tout-div-new hr {
  border-top: dotted 3px;
  margin-top: 4px;
  margin-bottom: 0;
  color: #98bbce;
  padding-top: 10px;
}
.dashboard-tout-div-new span {
  font-family: 'Roboto';
  font-size: 14px;
  line-height: 20px;
  color: #595959;
}
.dashboard-tout-div-new a {
  font-family: 'Libre Franklin','Roboto';
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  vertical-align: middle;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 0;
  margin-bottom: 20px;
  color: #fff;
  height: 24px;
  max-width: 200px;
  border-radius: 12px;
  padding-top: 4px;
  text-transform: uppercase;
}

.hbl-tout-div-new {
  font-family: 'Roboto';
  margin-bottom: 20px;
  border: 1px solid #98bbce;
  border-radius: 20px;
  padding: 0 15px 0 15px;
}
.hbl-tout-text-new {
  color: #484747;
  min-height: 165px; /* Adjust to largest text block on page */
  font-size: 18px !important;
  font-weight: 400 !important;
  font-family: 'Roboto';
  padding: 10px 0 30px 0;
  border-radius: 5% 5%;
}
.hbl-tout-div-new h2 {
  font-size: 20px;
  font-weight: 400;
  color: #31769e;
  letter-spacing: -0.09px;
  margin-top: 10px;
}
.hbl-tout-div-new a {
  font-family: 'Roboto';
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  vertical-align: middle;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 0;
  margin-bottom: 15px;
  color: #fff;
  height: 24px;
  max-width: 200px;
  border-radius: 12px;
  padding-top: 4px;
  text-transform: uppercase;
}
.hbl-tout-img-new {
  padding: 0;
  max-height: 100%;
  max-width: 100%;
}
.hbl-tout-div-new .bottom-buttons-new {
  margin-bottom: 15px;
}
/* Social bad updates */
.social-div {
  float: left;
}
.social-div-box {
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  background-color: #e2fbfb;
  padding: 1px 10px 1px 10px;
  margin-right: 10px;
}
.social-div-item {
  float: left;
  color: #5a5a5a;
  font-family: 'Roboto';
  font-size: 16px;
  padding: 10px 10px 10px 0;
}
.admin-div-box {
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  background-color: #faf9e0;
  padding: 1px 10px 1px 10px;
  margin-right: 10px;
}
.nav-span-item {
  padding-top: 4px !important;
  color: #076090 !important;
  font-weight: 500;
  text-align: center;
  font-family: 'Roboto', sans-serif !important;
}
.nav-span-item:hover {
  background-color: white;
}
.top-radius {
  border: 1px solid #dcdcdc;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.bottom-radius {
  border: 1px solid #dcdcdc;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.landing-page-image {
  /*float: right;*/
  border: 1px solid #dcdcdc;
  border-radius: 15px;
  margin-top: 40px;
}
.landing-page-headline-div {
  font-size: 16px;
  line-spacing: 24pt;
  padding-top: 8px;
  padding-bottom: 2px;
  color: #5a5a5a;
}
.landing-page-subheadline-div {
  font-family: 'Helvetica';
  font-size: 16px;
  line-spacing: 24pt;
  padding-top: 8px;
  padding-bottom: 10px;
  color: #5a5a5a;
}
.rounded-btn-blue {
  background-color: #1b91d1;
  color: #fff;
  font-family: 'Libre Franklin','Roboto';
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  vertical-align: middle;
  margin: 0 2px 20px 2px;
  color: #fff;
  height: 24px;
  max-width: 200px;
  border-radius: 12px;
  padding-top: 4px;
  text-transform: uppercase;
}
.rounded-btn-blue:hover {
  color: yellow;
}

.rounded-btn-purple {
  background-color: var(--fg-color-trainings);
  color: #fff;
  font-family: 'Libre Franklin','Roboto';
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  vertical-align: middle;
  margin: 0 2px 20px 2px;
  color: #fff;
  height: 24px;
  max-width: 200px;
  border-radius: 12px;
  padding-top: 4px;
  text-transform: uppercase;
}
.rounded-btn-purple:hover {
  color: yellow;
}
/* For the Live Trainings page popup */
.modal-content {
  border-radius: 15px;
  background-color: #eef9fb;
}
.modal-title {
  color: var(--fg-color-families);
}
.modal-body {
  font-size: 16px;
}
/* MEDIA QUERIES -- must be at the end! */
@media all and (max-width: 492px) {
  .dashboard-tout-text-new {
    min-height: 150px;
  }
}
@media all and (min-width: 768px) {
  .dashboard-tout-text-new {
    min-height: 200px;
  }
}
.click-and-play-image {
  max-height: 100%;
  max-width: 100%;
  border-radius: 20px 20px 20px 20px;
}
.rounded-image {
  border: 1px solid #dcdcdc;
  border-radius: 15px;
}
.rounded-image-blue {
  border: 4px solid #008fd0;
  border-radius: 15px;
}
.rounded-image-yellow {
  border: 4px solid #f9b347;
  border-radius: 15px;
}
.flipbook-btn {
  padding-top: 7px;
  margin: 10px 25px 10px 0px;
  font-size: 12px;
  height: 30px;
  max-width: 300px;
}

/** ATE page **/
.ate-tout-title {
  color: #3f3f3f;
  font-size: 20px;
  font-weight: 500;
  padding-top: 4px;
  padding-bottom: 4px;
}
.ate-href-text {
  font-family: 'Libre Franklin','Roboto';
  color: #3f3f3f;
  font-size: 18px;
  font-weight: normal;
}
.ate-title-bg {
  background-color: rgba(196, 220, 244, 0.99);
}

/* For new video header images */
.header-video-thumbnail {
  width: 300px;
}
.fit-image{
  width: 100%;
  object-fit: cover;
}
.img-video-thumbnail-families,.img-video-thumbnail-educators {
  border-radius: 25px;
  margin: 0;
  padding: 0;
}
.img-video-thumbnail-families {
  border: 3px solid #1a95d380;
}
.img-video-thumbnail-educators {
  border: 3px solid #0ca37980;
}
.large-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid; /* add color class to element from HTML, i.e. span class="large-caret color-trainings" */
  valign: bottom;
}
.accordion-button:hover {
  text-decoration: none;
  color: var(--fg-color-families);
  font-weight: 300;
  cursor: pointer;
}
.pointer {
  cursor: pointer;
}
.newsletter-buttons {
  position: absolute;
  bottom: 20px;
}
.topic-bullet {
  color: #1a95d3;
  font-size: 9px !important;
  vertical-align: middle;
  padding-bottom: 3px;
}
.badge-new {
  display: inline-block !important;
  color: red !important;
  margin-left: 5px;
  font-size: 8px;
  line-height: 1;
  vertical-align: middle;
}

.gold-border {
  border: 4px solid var(--border-gold);
  box-shadow: 0 0 5px rgba(212, 175, 55, 0.5); /* Subtle gold glow */
  box-sizing: border-box;
  border-radius: 20px;
}

h2.training {
  color: var(--fg-color-trainings);
  height: 50px;
}

/*****************************
 * New HBL URLs design 5/18/26
 *****************************/
.hbl-resources-accordion .panel {
  border: none;
  box-shadow: none;
  margin-bottom: 8px;
}

.hbl-resources-accordion .panel-heading {
  padding: 8px 20px;
  border-bottom: none !important;
  cursor: pointer;
  /*
  background: #e2fbfb !important;
  */
  border: 1px solid #dcdcdc;
  border-radius: 10px;
}

.hbl-resources-accordion .panel-title > a,
.hbl-resources-accordion .panel-title > a:hover,
.hbl-resources-accordion .panel-title > a:focus {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.hbl-resources-accordion .category-icon {
  max-height: 100px;   /* adjust once designer settles on icon dimensions */
  width: auto;
}

.hbl-resources-accordion .category-text-fallback {
  font-weight: bold;
}

.hbl-resources-accordion .accordion-chevron {
  color: #666;
  margin-left: 12px;
  flex-shrink: 0;
}

.hbl-resources-accordion .panel-body {
  padding: 10px 12px;
}

/* Override Boostrap panel defaults */
.hbl-resources-accordion .accordion-toggle::after,
.hbl-resources-accordion .accordion-toggle::before,
.hbl-resources-accordion .panel-title > a::after,
.hbl-resources-accordion .panel-title > a::before {
  content: none !important;
  display: none !important;
}
.hbl-resources-accordion .panel-heading,
.hbl-resources-accordion .panel-heading a[aria-expanded="true"],
.hbl-resources-accordion .panel-heading a[aria-expanded="false"],
.hbl-resources-accordion .panel-title > a {
  /*background: #e2fbfb !important;*/
  background-image: none !important;
}

/* Generalize the global dashboard-tout-text-new  */
.tout-text {
  color: #484747;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-family: 'Roboto';
  padding: 10px 15px 10px 15px;
  border-radius: 5% 5%;
}

/* **** NO CSS CODE BELOW HERE! **** */