/* === GLOBAL FOCUS (WCAG 2.4.7) === */
*:focus-visible,
html body *:focus {
    outline: 2px dotted #BE4C13;
    outline-offset: 2px;
    }

.navbar-brand:focus-visible,
.navbar-brand:focus,
.navbar-brand:hover,
.nav-utility-link:focus-visible,
.nav-utility-link:focus,
footer a:focus,
footer a:hover {
    outline: 2px dotted #fff;
    outline-offset: 2px;
    border-radius: 4px;
    }

/* =====================================================
   PREFERS-REDUCED-MOTION — WCAG 2.1 AA SC 2.3.3
   Suppresses all animation/transition for users who
   have enabled "Reduce Motion" at the OS level.
====================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    /* Confetti pseudo-elements */
    .confetti-button.animate::before,
    .confetti-button.animate::after {
        display: none !important;
        animation: none !important;
    }

    /* Badge spin/grow/jiggle animations */
    .badge-wrap [id^="Path_"],
    .badge-1 [class*="score"],
    .badge-3 [class*="stage"],
    .badge-4 [class*="stage"] {
        animation: none !important;
        transform: none !important;
    }

    /* Pledge button scroll-triggered spin */
    .pledgebuttonspinner {
        animation: none !important;
    }
}

button,
.font-bold {
    font-family: "MyriadPro-Bold";
    }

svg:not(:root) {
  height: 100%;
  width: 100%;
}

p strong {
  font-family: "MyriadPro-Bold";
  color: #003865;
  display: block;
}

/* === HEADER === */
.header-bar { display:flex; align-items:center; justify-content:space-between; height:4rem; }
@media(min-width:1000px){ .header-bar{height:4.5rem;} }

/* === SCORE BADGE === */
.score-badge-wrap { position:relative; width:56px; height:56px; }
.score-badge-wrap svg { width:100%; height:100%; }
.score-badge-wrap .badge-number { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; color:#fff; pointer-events:none; }
.score-badge-wrap .badge-number sup { font-size:.5rem; margin-left:1px; }
.st0{fill:#003865;} .dkbigstar{fill:#0058A4;} .ltbigorange{fill:#F58220;}

/* === HAMBURGER — visible <1200px === */
.hamburger-btn { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:44px; height:44px; background:none; border:2px solid rgba(255,255,255,.3); border-radius:6px; cursor:pointer; padding:0; transition:border-color .2s; }
.hamburger-btn:hover,.hamburger-btn:focus-visible { border-color:#fff; }
.hamburger-btn .bar { display:block; width:18px; height:2px; background:#fff; border-radius:2px; transition:transform .3s,opacity .3s; }
@media(min-width:1000px){ .hamburger-btn{display:none;} }

.login-header.user-header .navbar #collapsibleNavbar {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-flex: unset;
  -ms-flex-positive: unset;
  flex-grow: unset;
  margin-left: 15px;
}
.login-header.user-header .navbar #collapsibleNavbar .navbar-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.login-header.user-header .navbar #collapsibleNavbar .navbar-nav .nav-item {
  margin-bottom: 5px;
}
.login-header.user-header .navbar #collapsibleNavbar .navbar-nav .nav-item .nav-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #9FCC3B;
  text-transform: uppercase;
  line-height: 1.3;
}
.login-header.user-header .navbar #collapsibleNavbar .navbar-nav .nav-item .nav-link span {
  height: 14px;
  width: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 10px;
}
.login-header.user-header .navbar #collapsibleNavbar .navbar-nav .nav-item .nav-link {
  color: #9FCC3B;
  text-transform: uppercase;
  line-height: 1.3;
}
::after, ::before {
  --tw-content: '';
}
element {
  enable-background: new 0 0 512 512;
}
.login-header.user-header .navbar nav .tab-links li:not(.active) h4 a span,
.login-header.user-header .navbar nav .tab-links li:not(.active) span a span,
.login-header.user-header .navbar #collapsibleNavbar .navbar-nav li:not(.active) a.nav-link,
.login-header.user-header .navbar nav .tab-links li:not(.active) h4 a .icon-svg svg,
.login-header.user-header .navbar nav .tab-links li:not(.active) span a .icon-svg svg,
.login-header.user-header .navbar #collapsibleNavbar .navbar-nav li:not(.active) .nav-link span svg,
.login-header.user-header .navbar nav .tab-links li a:not(.active) span,
.login-header.user-header .navbar nav .tab-links li a:not(.active) span svg g {
  transition: all 0.3s ease-in-out 0s;
}
.login-header.user-header .navbar #collapsibleNavbar .navbar-nav .nav-item .nav-link span svg {
  height: 100%;
  width: 100%;
  fill: #9FCC3B;
}
.login-header.user-header .navbar nav .tab-links li:not(.active):hover h4 a span,
.login-header.user-header .navbar nav .tab-links li:not(.active):hover span a span,
.login-header.user-header .navbar nav .tab-links li a:not(.active):hover span,
.login-header.user-header .navbar #collapsibleNavbar .navbar-nav li:not(.active):hover a.nav-link {
  color: #fff;
}
.nav-link:focus, .nav-link:hover {
  text-decoration: none;
}
.login-header.user-header .navbar nav .tab-links li:not(.active):hover h4 a .icon-svg svg,
.login-header.user-header .navbar nav .tab-links li:not(.active):hover span a .icon-svg svg,
.login-header.user-header .navbar nav .tab-links li a:not(.active):hover span svg g,
.login-header.user-header .navbar #collapsibleNavbar .navbar-nav li:not(.active):hover .nav-link span svg {
  fill: #fff;
}

ul.nav-utility-list li.active a {
  color: #fff;
}

ul.nav-utility-list li.active .nav-utility-link svg {
    fill: #fff;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
  }
}

/* ===================================================
  SINGLE-SOURCE NAV
  
  .nav-link--main  = Statistics, Lake Use
  .nav-link--util  = Report AIS, Account, Logout
  
  ≥1200   All inline. No burger.
  768-1199 Main tabs inline. Util hidden. Burger → overlay (util only? No — ALL shown).
  <768    All hidden. Burger → overlay (all shown).
  =================================================== */
.nav-shell { display:flex; align-items:center; height:100%; }
.nav-overlay-close { display:none; }
.nav-spacer { display:none; }
.nav-divider { display:none; }

.site-nav-link { display:flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:600; white-space:nowrap; transition:color .2s; }
.site-nav-link svg { width:20px; height:20px; transition:fill .2s; }
.active-indicator { position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); display:none; pointer-events:none; }

/* --- ≥1200 FULLY INLINE --- */
@media(min-width:1000px){
 .nav-shell { gap:0; height:100%; }
 .nav-shell nav { display:flex; align-items:center; height:100%; }
 .nav-link--main { position:relative; height:100%; padding:0 1rem; font-size:.875rem; color:rgba(255,255,255,.7); }
 .nav-link--main svg { fill:rgba(255,255,255,.7); }
 .nav-link--main:hover,.nav-link--main:focus-visible { color:#fff; }
 .nav-link--main:hover svg,.nav-link--main:focus-visible svg { fill:#fff; }
 .nav-link--main[aria-current="page"] { color:#fff; }
 .nav-link--main[aria-current="page"] svg { fill:#fff; }
 .nav-link--main[aria-current="page"] .active-indicator { display:block; }
 .nav-link--util { padding:.5rem .75rem; font-size:.8125rem; font-weight:500; color:rgba(255,255,255,.7); text-transform:capitalize; }
 .nav-link--util svg { fill:rgba(255,255,255,.7); width:18px; height:18px; }
 .nav-link--util:hover,.nav-link--util:focus-visible { color:#fff; }
 .nav-link--util:hover svg,.nav-link--util:focus-visible svg { fill:#fff; }
}

/* --- 768–1199 TABS INLINE, UTIL HIDDEN --- */
@media(min-width:920px) and (max-width:999px){
 .nav-shell { height:100%; }
 .nav-shell nav { display:flex; align-items:center; height:100%; }
 .nav-link--main { position:relative; height:100%; padding:0 .75rem; font-size:.8125rem; color:rgba(255,255,255,.7); }
 .nav-link--main svg { fill:rgba(255,255,255,.7); }
 .nav-link--main:hover,.nav-link--main:focus-visible { color:#fff; }
 .nav-link--main:hover svg,.nav-link--main:focus-visible svg { fill:#fff; }
 .nav-link--main[aria-current="page"] { color:#fff; }
 .nav-link--main[aria-current="page"] svg { fill:#fff; }
 .nav-link--main[aria-current="page"] .active-indicator { display:block; }
 .nav-link--util { display:none; }
 .nav-divider { display:none; }
}

/* --- <768 ALL HIDDEN --- */
@media(max-width:919px){
 .nav-shell { display:none; }
}

/* === OVERLAY MODE (body.menu-open, <1200px) === */
body.menu-open .nav-shell { display:flex!important; flex-direction:column; position:fixed; inset:0; z-index:200; background:#002B4E; padding:1.5rem; overflow-y:auto; animation:overlayIn .3s ease-out; }
@keyframes overlayIn { from{transform:translateX(100%);} to{transform:translateX(0);} }
body.menu-open .nav-overlay-close { display:flex; align-self:flex-end; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:2px solid rgba(255,255,255,.3); border-radius:6px; color:#fff; font-size:1.25rem; cursor:pointer; flex-shrink:0; transition:border-color .2s; }
body.menu-open .nav-overlay-close:hover,body.menu-open .nav-overlay-close:focus-visible { border-color:#fff; }
body.menu-open .nav-spacer { display:block; flex:1; }
body.menu-open .nav-shell nav { display:flex; flex-direction:column; gap:.25rem; height:auto; }
body.menu-open .site-nav-link { display:flex!important; padding:1rem 1.25rem; font-size:1.125rem; font-weight:600; color:#fff; border-radius:.75rem; transition:background .2s; height:auto; position:static; text-transform:none; }
body.menu-open .site-nav-link svg { fill:#93BBDE; width:22px; height:22px; }
body.menu-open .site-nav-link:hover,body.menu-open .site-nav-link:focus-visible { background:rgba(255,255,255,.08); color:#fff; }
body.menu-open .site-nav-link:hover svg,body.menu-open .site-nav-link:focus-visible svg { fill:#fff; }
body.menu-open .site-nav-link[aria-current="page"] { background:rgba(255,255,255,.1); border-left:4px solid #9FCC3B; }
body.menu-open .site-nav-link[aria-current="page"] svg { fill:#fff; }
body.menu-open .active-indicator { display:none!important; }
body.menu-open .nav-divider { display:block; border:none; border-top:1px solid rgba(255,255,255,.1); margin:.75rem 0; }

/* === ACTIVITY CARDS === */
.activity-card { position:relative; display:flex; align-items:center; background:#fff; border-radius:.75rem; overflow:hidden; border:2px solid transparent; transition:border-color .2s,box-shadow .2s; cursor:pointer; }
.activity-card:hover { border-color:#93BBDE; box-shadow:0 2px 12px rgba(0,56,101,.08); }
.activity-card input[type="checkbox"] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.activity-card:has(input:focus-visible) { outline:3px dotted #BE4C13; outline-offset:2px; border-color:#D97706; }
.activity-card:has(input:checked) { border-color:#9FCC3B; background:#F9FCFE; }
.activity-indicator { position:absolute; left:-2px; top:50%; transform:translateY(-50%); z-index:2; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#9FCC3B; box-shadow:0 2px 8px rgba(0,0,0,.15); transition:background .25s,transform .25s; pointer-events:none; }
.activity-indicator .icon-plus { transition:transform .25s,opacity .2s; }
.activity-indicator .icon-check { display:none; }
.activity-card:has(input:checked) .activity-indicator { background:#fff; border:3px solid #9FCC3B; }
.activity-card:has(input:checked) .activity-indicator .icon-plus { display:none; }
.activity-card:has(input:checked) .activity-indicator .icon-check { display:block; }
.activity-card:hover .activity-indicator { transform:translateY(-50%) scale(1.08); }
.activity-thumb { width:110px; min-height:72px; object-fit:cover; flex-shrink:0; }
.activity-text { padding:.625rem .875rem .625rem 2.75rem; font-size:.9375rem; line-height:1.3; color:#263238; flex:1; }
@media(max-width:767px){
 .activity-thumb { width:80px; min-height:60px; }
 .activity-text { font-size:.875rem; padding-left:2.25rem; }
 .activity-indicator { width:40px; height:40px; }
}

/* === FOOTER  === */
#footer {
    margin-top: 90px;
    }

.footer-wave {
    display:block;
    width:100%;
    height:auto;
    margin-bottom:-1px;
    margin-bottom: 39px;
    margin-top: -110px;
    padding-top: 50px;
}

.myacct .footer-wave,
.tos .footer-wave,
.reportsus .footer-wave,
.resetpwd .footer-wave {
    background: #e6eff6;
}

.footer-link:focus,
.footer-link:hover {
    outline: 2px dotted #fff;
    outline-offset: 3px;
    color: #fff;
    border-radius: 5px;
    }




/* Screen-reader only text */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Make the burger an actual focusable control */
.menu-burger {
  background: transparent;
  border: 0;
  line-height: 1;
}

/* Strong visible focus for keyboard users */
.menu-burger:focus,
.menu-burger:focus-visible,
.mobile-close:focus,
.mobile-close:focus-visible,
.nav-tab-link:focus,
.nav-tab-link:focus-visible,
.menu-items a:focus,
.menu-items a:focus-visible {
  outline: 2px dotted #fff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* IMPORTANT: if the menu is hidden, it must be non-interactive and not tabbable */
.menu-items[hidden] {
  display: none !important;
}

/* Desktop / mobile visibility rules */
.utility-desktop { display: block; }
.menu-burger { display: none; }

/* Under 1200px: hide utility desktop; show burger */
@media (max-width: 999px) {
  .utility-desktop { display: none !important; }
  .menu-burger { display: block !important; }
}

/* Under 767px: hide the main tabs (they will be available inside mobile menu) */
@media (max-width: 767px) {
  .main-tabs { display: none !important; }
}

/* From 768px up: hide the "Main" section inside mobile (only utility collapses at 1200) */
@media (min-width: 920px) {
  .mobile-main { display: none !important; }
}

/* Close button styling (minimal) */
.mobile-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 32px;
  position: absolute;
  right: 12px;
  top: 8px;
}











/* =========================================================
   HEADER / NAV REFACTOR SHIM (add at END of main.css)
   Goal: keep old look, new accessible structure
   ========================================================= */
.login-header.user-header .navbar .tab-links li.active h4 a,
.login-header.user-header .navbar .tab-links li.active span a {
  color: #fff;
}
.login-header.user-header .navbar .tab-links li.active h4 a .active-svg,
.login-header.user-header .navbar .tab-links li.active span a .active-svg {
  display: block;
}
.login-header.user-header .navbar .tab-links li:not(.active) h4 a span, .login-header.user-header .navbar .tab-links li:not(.active) span a span, .login-header.user-header .navbar #collapsibleNavbar .navbar-nav li:not(.active) a.nav-link, .login-header.user-header .navbar .tab-links li:not(.active) h4 a .icon-svg svg, .login-header.user-header .navbar .tab-links li:not(.active) span a .icon-svg svg, .login-header.user-header .navbar #collapsibleNavbar .navbar-nav li:not(.active) .nav-link span svg {
  transition: all 0.3s ease-in-out 0s;
}
.login-header.user-header .navbar .tab-links li span a .active-svg, .login-header.user-header .navbar .tab-links li h4 a .active-svg {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  display: none;
}
.login-header.user-header .navbar .tab-links li h4, .login-header.user-header .navbar .tab-links li span {
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
  font-size: 1.05em;
}


.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.bg-blue p {
  color: #93BBDE;
}
.login-header p {
  margin: 0;
  line-height: 1.1;
}

.login-header.user-header .navbar .tab-links {
  margin-bottom: 25px;
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 30px;
}
.login-header.user-header .navbar .tab-links li:first-child {
  margin-right: 40px;
}
.login-header.user-header .navbar .tab-links li h4, .login-header.user-header .navbar .tab-links li span {
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
  font-size: 1.05em;
}
/* Ensure absolute-positioned tab-links/menu-bg/menu-items anchor correctly */
.login-header.user-header {
    position: relative;
    -webkit-box-align: unset;
      -ms-flex-align: unset;
      align-items: unset;
      -webkit-box-pack: unset;
      -ms-flex-pack: unset;
      justify-content: unset;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      transition: all 0.5s;
      display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        /*-ms-flex-align: center;
        align-items: center;*/
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 60px;
}

.login-header.user-header .navbar {
  position: relative;
  min-height: 95px;
  padding: 15px 20px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

/* Your old CSS styles .login-header nav a .programname (fine),
   but now .programname is inside .navbar-brand, so make sure it still matches */
.login-header .navbar-brand .programname {
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.2;
  font-family: "Myriad Pro";
  font-weight: bold;
}

/* ---------- MAIN TABS: old CSS expected li span a / li h4 a.
   New markup uses a.nav-tab-link directly. Map styling over. ---------- */
.login-header.user-header .navbar .tab-links li a.nav-tab-link {
  color: #9FCC3B;
  display: flex;
  align-items: flex-start;
  position: relative;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.05em;
}

.login-header.user-header .navbar .tab-links li a.nav-tab-link:focus,
.login-header.user-header .navbar .tab-links li a.nav-tab-link:focus-visible {
  outline: 2px dotted #fff;
  outline-offset: 3px;
  border-radius: 5px;
}

/* icon sizing – your old rules targeted .icon-svg inside span/h4 cases */
.login-header.user-header .navbar .tab-links li a.nav-tab-link .icon-svg {
  margin-right: 10px;
  height: 25px;
  width: 25px;
  display: flex;
  font-weight: 400;
    margin: 0;
      margin-right: 0px;
    text-transform: uppercase;
    font-size: 1.05em;
}

.login-header.user-header .navbar .tab-links li a.nav-tab-link .icon-svg svg {
  height: 100%;
  width: 100%;
  fill: #9FCC3B;
}

/* If you still use "active" triangle SVG, keep old behavior */
.login-header.user-header .navbar .tab-links li a.nav-tab-link .active-svg {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

.login-header.user-header .navbar .tab-links li.active a.nav-tab-link {
  color: #fff;
}
.login-header.user-header .navbar .tab-links li.active a.nav-tab-link .active-svg {
  display: block;
}
.login-header.user-header .navbar .tab-links li.active a.nav-tab-link .icon-svg svg {
  fill: #fff;
}

/* Keep your existing responsive behavior that hides icons under 900px */
@media screen and (max-width: 900px) {
  .login-header.user-header .navbar .tab-links li a.nav-tab-link {
    line-height: 21px;
  }
  .login-header.user-header .navbar .tab-links li a.nav-tab-link .icon-svg {
    display: none !important;
  }
  ul.tab-links li {
    width: 30%;
    text-align: center;
  }
  ul.tab-links {
    justify-content: center;
  }
}

/* ---------- UTILITY NAV: keep your existing styles.
   But your new HTML uses .utility-links so make sure it behaves like .navbar-nav. ---------- */
.login-header.user-header .navbar #collapsibleNavbar .utility-links {
  display: flex;
  flex-direction: column;
}

/* ---------- MOBILE MENU: key fixes ---------- */

.menu-items[hidden] {
  display: none !important;
}

/* keep your "fs" rotation if you're toggling that class */
.menu-burger.fs {
  transform: translateY(-50%) rotate(-180deg);
}

/* === HAMBURGER BUTTON — visible <1000px === */
.menu-burger {
    user-select: none;
    transform-origin: center;
    position: absolute;
    z-index: 100;
    right: 10px;
    transform: translateY(-50%);
  display: none; /* hidden ≥1000 */
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 2px solid rgb(159, 204, 59);
  border-radius: 6px;
  cursor: pointer;
  padding: 0 7px;
  margin-right: 19px;
  flex-shrink: 0;
  transition: border-color .2s;
  color: white;
  font-size: 24px;
  top: 45px;
}

.menu-burger:hover,
.menu-burger:focus-visible { border-color: #fff; }

.menu-burger .bar {
    display: block;
    width: 22px;
    height: 3px;
    background: #9FCC3B;
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
    margin-top: 6px;
    }

.menu-burger .bar.topbar {
    margin-top: 0px;
    }

.menu-burger:hover .bar,
.menu-burger:focus-visible .bar { background: #fff; }

/* Preserve your old radial menu-bg behavior */
.menu-bg {
  background: #003865;
  pointer-events: none;
  right: 50px;
  top: 50px;
  transform: translate3d(50%,-50%,0);
  transform-origin: center center;
  position: absolute;
  z-index: 5;
  width: 0;
  height: 0;
  transition: .2s;
  border-radius: 50%;
}
.menu-bg.fs {
  width: 380vw;
  height: 380vw;
  border-radius: 50%;
}

/* Your old .menu-items assumed "div children fade in".
   New structure has .mobile-menu-inner and lists. Keep same positioning + animation. */
.menu-items {
  position: absolute;
  font-weight: bold;
  font-size: 40px;
  color: white;
  width: 330px;
  right: 0;
  text-align: center;
  opacity: 0;
  transition: .4s;
  margin-top: 350px;
  transform: translateY(-200%);
  pointer-events: none;
  z-index: 10;
}

/* When open */
.menu-items.fs {
  transform: translateY(0);
  pointer-events: auto;
  opacity: 1;
}

/* Make inner content fade/slide like before */
.menu-items .mobile-menu-inner {
  position: relative;
}

.menu-items .mobile-menu-inner .mobile-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* mimic old: .menu-items.fs div {opacity:1; margin-top:35px} */
.menu-items .mobile-menu-inner .mobile-list li {
  opacity: 0;
  transition: 1s;
  margin-top: 0;
}

.menu-items.fs .mobile-menu-inner .mobile-list li {
  opacity: 1;
  margin-top: 35px;
}

/* Old styling for links inside menu */
.menu-items .mobile-menu-inner a.nav-link {
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: #9FCC3B;
  text-transform: uppercase;
  line-height: 1.3;
  font-size: 20px;
  letter-spacing: 0;
  font-weight: 100;
  text-decoration: none;
}

.menu-items .mobile-menu-inner a.nav-link span svg {
  height: 20px;
  width: 20px;
  fill: #9FCC3B;
}

.menu-items.fs .mobile-menu-inner a.nav-link span {
  padding-right: 10px;
}

/* close button */
.mobile-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 32px;
  position: absolute;
  right: 12px;
  top: 8px;
}

/* focus visibility */
.menu-burger:focus,
.menu-burger:focus-visible,
.mobile-close:focus,
.mobile-close:focus-visible,
.menu-items a:focus,
.menu-items a:focus-visible,
.nav-tab-link:focus,
.nav-tab-link:focus-visible,
.nav-tab-link:hover,
.nav-utility-link:hover {
  outline: 2px dotted #fff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Breakpoints: match your existing behavior but align with new structure */
@media screen and (max-width: 999px) {
  .login-header.user-header .navbar #collapsibleNavbar .navbar-nav,
  .login-header.user-header .navbar #collapsibleNavbar .utility-links {
    display: none !important;
  }
  .menu-burger { display: block !important; }
  /* NOTE: don't force menu-items display here; hidden controls it */
  .header-score { margin-right: 40px; }
}

/* Under 767: hide tabs in header (you already do this elsewhere too) */
@media screen and (max-width: 767px) {
  ul.tab-links { display: none !important; }
}

/* From 768 up: hide mobile main section so only utility collapses at 1200 */
@media screen and (min-width: 920px) {
  .mobile-main { display: none !important; }
}



.login-header.user-header .header-score {
    padding: 10px 18px;
    background-color: #65a6de;
    border-radius: 0 0 5px 5px;
    position: absolute;
   /* right: 115px;
    top: 20px;
    background-color: #0058A4;*/
    transition: all 1s ease-in-out;
    right: 150px;
    top: -5px;
}

.login-header.user-header .header-score p {
  margin-bottom: 5px;
  color: #fff;
}
.header-score p {
  text-align: center;
}
.bg-blue p {
  color: #93BBDE;
}
.login-header p {
  margin: 0;
    margin-bottom: 0px;
  line-height: 1.1;
}
.login-header.user-header .header-score .score-svg {
  height: 73px;
  width: 73px;
  position: relative;
}
.login-header.user-header .header-score .score-svg p {
  font-weight: 900;
  position: absolute;
  top: 53%;
  left: 55%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-53%, -55%);
  margin-bottom: 0;
  font-size: 20px;
}

.login-header.user-header .header-score .score-svg p#topbadgenum {
    color: #003865;
    font-family: 'MyriadPro-Bold';
    }

.login-header.user-header .header-score p {
  margin-bottom: 5px;
  color: #003865;
}
.header-score p {
  text-align: center;
}

@media screen and (max-width: 999px) {
  .login-header.user-header .header-score {
        padding: 10px 18px;
        position: absolute;
        right: 63px;
        top: 0px;
        }
    }

@media screen and (max-width: 465px) {
    #header {
        height: 114px;
        overflow: hidden;
        }
    
    .header-bar {
        height: 100%;
        }
    
    .navbar-brand {
        top: 6px;
        position: absolute;
        }
    
    .login-header p {
        font-size: .8rem;
        }
        
    .login-header.user-header .header-score {
        right: -44px;
        }
    
    .menu-burger {
        top: 83px;
        left: 20px;
        }
    }

@media screen and (max-width: 370px) {
    .navbar-brand {
        max-width: calc(100% - 120px); /* leave room for score badge width */
        overflow: hidden;
    }
    
    .navbar-brand p,
    .navbar-brand span {
        white-space: normal;    /* allow wrapping */
        word-break: break-word;
        line-height: 1.3;
    }
    /*
    #header {
        height: 186px;
        overflow: visible;
    }
    
    .menu-burger {
        top: 153px;
    }
     */
}




/* ============================================================
   SINGLE-SOURCE NAV — COMBINED HEADER
   
   ONE nav element, TWO <ul>s (main + utility).
   CSS controls layout across 3 breakpoints:
   
   ≥1000px  — Main tabs centered, badge, utility stacked right. No burger.
   768–999  — Main tabs centered, utility hidden. Burger → slide-out overlay shows ALL.
   <768     — Main tabs hidden, utility hidden. Burger → slide-out overlay shows ALL.
   ============================================================ */

/* === HEADER LAYOUT === */
.header-bar {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 95px;
  padding: 15px 20px;
  position: relative;
}

.navbar-brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  flex-shrink: 0;
}
.navbar-brand p { margin: 0; }

/* === NAV SHELL — the single container for all nav === */
.nav-shell {
  display: contents; /* lets children participate in header flex layout */
}

/* === MAIN TABS <ul> === */
.nav-main-list {
  list-style: none;
  margin-bottom: 25px;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 0;
  /* Centered in the header via absolute positioning */
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.nav-main-list li {
  position: relative;
  margin: 0 20px;
}

.nav-main-list li:first-child {
}

.nav-main-list li span {
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
  font-size: 1.25em;
}

@media screen and (max-width: 465px) {
    .nav-main-list li span {
        font-size: 1em;
        }
    }

.nav-tab-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #9FCC3B;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color .2s;
  padding: 2px 9px 0;
}

.nav-tab-link .icon-svg {
    display: flex;
    margin-bottom: 5px;
    }

.nav-tab-link .icon-svg svg {
    height: 100%;
    width: 100%;
    fill: #9FCC3B;
    transition: fill .2s;
    }
.nav-tab-link:hover,
.nav-tab-link:focus-visible { color: #fff; }
.nav-tab-link:hover .icon-svg svg,
.nav-tab-link:focus-visible .icon-svg svg { fill: #fff; }

/* Active blob indicator */
.active-svg {
  display: none;
  position: absolute;
  bottom: -27px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.nav-main-list li.active .nav-tab-link { color: #fff; }
.nav-main-list li.active .nav-tab-link .icon-svg svg { fill: #fff; }
.nav-main-list li.active .active-svg { display: block; }

/* === UTILITY <ul> — stacked right at ≥1000px === */
.nav-utility-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-utility-list li { margin-bottom: 7px; }
.nav-utility-list li:last-child { margin-bottom: 0; }

.nav-utility-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 5px;
  text-decoration: none;
  color: #9FCC3B;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
  transition: color .2s;
}
.nav-utility-link svg {
  width: 14px; height: 14px; fill: #9FCC3B;
  flex-shrink: 0;
  transition: fill .2s;
}
.nav-utility-link:hover,
.nav-utility-link:focus-visible { color: #fff; }
.nav-utility-link:hover svg,
.nav-utility-link:focus-visible svg { fill: #fff; }

/* === NAV DIVIDER (only visible in overlay) === */
.nav-divider {
  display: none;
  border: none;
  border-top: 1px solid rgba(255,255,255,.15);
  margin: 1rem 0;
  width: 100%;
}



/* === OVERLAY CLOSE BUTTON (hidden until overlay open) === */
.nav-overlay-close {
  display: none;
}

/* === SCORE BADGE (always in the header bar) === */
.header-score {
  /*margin-left: auto;
  flex-shrink: 0;*/
}


/* ============================================================
   BREAKPOINT: ≥1000px — FULLY INLINE
   Main tabs centered, utility stacked right, no burger
   ============================================================ */
@media (min-width: 1000px) {
  .menu-burger { display: none !important; }
  .nav-overlay-close { display: none !important; }
  .nav-divider { display: none !important; }

  .nav-main-list { display: flex; }
  .nav-utility-list { display: flex; }
}


/* ============================================================
   BREAKPOINT: 768–999px — Main tabs centered, utility hidden, burger shown
   ============================================================ */
@media (min-width: 920px) and (max-width: 999px) {
  .nav-main-list { display: flex; } /* tabs stay centered */
  .nav-utility-list { display: none; } /* utility hidden inline */
  .menu-burger { display: flex; } /* burger appears */
  .header-score { margin-left: auto; }
}


/* ============================================================
   BREAKPOINT: <768px — Everything hidden, burger only
   ============================================================ */
@media (max-width: 919px) {
  .nav-main-list { display: none; } /* tabs hidden */
  .nav-utility-list { display: none; } /* utility hidden */
  .menu-burger { display: flex; } /* burger appears */
  .header-score { margin-left: auto; }
}


/* ============================================================
   OVERLAY MODE — activated by body.menu-open
   Slides in from the right over the full screen.
   Shows ALL links from the single nav.
   ============================================================ */
body.menu-open {
  overflow: hidden;
}

body.menu-open .nav-shell {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #002B4E;
  padding: 1.5rem;
  overflow-y: auto;
  animation: slideInRight .3s ease-out;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Close button in overlay */
body.menu-open .nav-overlay-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  background: none;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 6px;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  transition: border-color .2s;
}
body.menu-open .nav-overlay-close:hover,
body.menu-open .nav-overlay-close:focus-visible {
  border-color: #fff;
}

/* Both lists become visible, vertical, centered */
body.menu-open .nav-main-list,
body.menu-open .nav-utility-list {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  position: static;
  transform: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}

/* Divider visible in overlay */
body.menu-open .nav-divider {
  display: block;
}

/* Restyle all links for overlay */
body.menu-open .nav-tab-link,
body.menu-open .nav-utility-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1rem 1.25rem;
  font-size: 20px;
  font-weight: 100;
  color: #9FCC3B;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0;
  line-height: 1.3;
  border-radius: 0.75rem;
  transition: background .2s, color .2s;
  width: auto;
}

body.menu-open .nav-tab-link .icon-svg svg,
body.menu-open .nav-utility-link svg {
  width: 20px;
  height: 20px;
  fill: #9FCC3B;
}

body.menu-open .nav-tab-link:hover,
body.menu-open .nav-tab-link:focus-visible,
body.menu-open .nav-utility-link:hover,
body.menu-open .nav-utility-link:focus-visible {
  background: rgba(255,255,255,.08);
  color: #fff;
}
body.menu-open .nav-tab-link:hover .icon-svg svg,
body.menu-open .nav-tab-link:focus-visible .icon-svg svg,
body.menu-open .nav-utility-link:hover svg,
body.menu-open .nav-utility-link:focus-visible svg {
  fill: #fff;
}

/* Hide the blob indicator in overlay */
body.menu-open .active-svg { display: none !important; }

/* Active page highlight in overlay */
body.menu-open .nav-main-list li.active .nav-tab-link {
  color: #fff;
  background: rgba(255,255,255,.1);
  border-left: 4px solid #9FCC3B;
}
body.menu-open .nav-main-list li.active .nav-tab-link .icon-svg svg {
  fill: #fff;
}

@media (max-width: 400px) {
    body.menu-open .nav-tab-link,
    body.menu-open .nav-utility-link {
        padding: 0;
        font-size: 14px;
    }
}



/****************** STATIC PAGES *********************/
.login-wrap.content-wrap {
  padding-bottom: 60px;
  min-height: calc(100vh - 436px);
}
.reportsus .login-wrap.content-wrap {
    min-height: calc(100vh - 425px);
}
.loginpg .login-wrap.content-wrap {
    min-height: calc(100vh - 135px);
}
.myacct .login-wrap.content-wrap {
    min-height: calc(100vh - 408px);
}
.resetpwd .login-wrap.content-wrap {
    min-height: calc(100vh - 408px);
}

.my-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 15px;
}
.my-lake-content {
  max-width: 582px;
  margin: 0 auto;
}
.after-line {
  color: #003865;
  position: relative;
  display: inline-block;
  text-align: center;
}
.after-line::after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  border-top: 1px solid #A49E99;
}

.my-lake-content p {
  margin-bottom: 0.625rem;
}
.my-lake-content ul li::before {
  margin-left: -11px;
  padding-left: 0;
  content: "•";
  display: inline-block;
  padding-left: 35px;
  height: 10px;
  padding-right: 5px;
}
.my-lake-content ul li {
  padding-left: 35px;
  margin-bottom: 0.625rem;
  position: relative;
}









.container {
  width: 95%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.shareicongroup {
  cursor: pointer;
  pointer-events: all;
  margin: auto;
  display: flex;
}
.shareicon {
  width: 50px;
  margin: 10px 5px;
}

.reminder-box {
  border: 8px solid #650000;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  background-color: white;
  z-index: 9999;
}
.reminder-box .close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 18px;
  color: #650000;
  border: 1px solid #650000;
  padding: 0px 12px;
}
.reminder-box p {
  color: #650000;
  margin: 0;
}
.cst-btn {
  text-align: center;
  z-index: 1;
  color: #113C66;
  font-weight: 700;
  background: transparent;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid #fff;
  padding: 4px 28px 2px;
  line-height: 1.1;
  text-transform: uppercase;
  min-height: 46px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /*width: 100%;*/
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}


/*
svg:not(:root) {
height: 100%;
width: 100%;
}
*/



/***************************** reminder box */
/* Wrapper is what you .show() / .hide() */
#pledgeReminderBox,
#pledgeReminderBox1{
  position: fixed;
  inset: 0;
  z-index: 2;
}

/* Dialog */
.reminder-box{
  position: fixed; /* your PHP sets fixed for modal cases, keep it */
  z-index: 2;
  max-width: 720px;
  width: calc(100% - 2rem);
  background: #fff;
  color: #111;
  padding: 1.25rem;
  border-radius: 12px;
 /* box-shadow: 0 16px 40px rgba(0,0,0,0.35); */
}

/* Focus ring */
.reminder-box:focus{
  outline: 2px dotted #BE4C13;
  outline-offset: 2px;
}

.close-icon{
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.reminder-actions{
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Optional: prevent scroll when modal open */
body.modal-open { overflow: hidden; }
/*************************** end reminder box */





  /* =====================================================
     WCAG 2.1 AA COMPLIANCE NOTES

     1.1.1  Non-text content: Hidden progressbar carries
            aria-label with activity name + value.
     1.3.1  Info & relationships: <ul role="list"> with
            <li> items. Label <span> has unique id
            referenced by aria-labelledby on progressbar.
     1.4.3  Contrast: Label #263238 on white = 14.7:1
            Circle text white on #003865 = 10.2:1
            Bar fill (#003865→#0058A4) on #F0F7FD = 8.8:1
     1.4.11 Non-text contrast: Fill vs track > 3:1 ✓
     2.4.6  Headings: <h2> for section title.
     4.1.2  Name/role/value: role="progressbar" with
            aria-valuenow/min/max on every bar.
     ===================================================== */

  *:focus-visible { outline: 3px solid #D97706; outline-offset: 2px; }

  /* ── List reset ──────────────────────────────────────── */
  .chart-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* ── Each row ────────────────────────────────────────── */
  .chart-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    border-radius: 0.375rem;
    transition: background 0.15s;
  }
  .chart-item:nth-child(even) {
   /* background: rgba(240, 247, 253, 0.45);*/
  }
  .chart-item:hover { background: #e4edf5; }
  .chart-item:hover .chart-label { color: #002B4E; }

  /* ── Activity label ──────────────────────────────────── */
  .chart-label {
    width: 40%;
    min-width: 140px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 0.5rem;
    /*font-size: 0.8125rem;*/
    line-height: 1.3;
    color: #263238;
    transition: color 0.15s;
  }

  /* ── Bar column ──────────────────────────────────────── */
  .chart-bar-col {
    flex: 1;
    min-width: 0;
    padding-right: 1.5rem; /* room for circle cap overflow */
  }

  /* ── Track ───────────────────────────────────────────── */
  .chart-bar-track {
    position: relative;
    width: 100%;
    height: 1.5rem;
    background: #F0F7FD;
    border-radius: 0.375rem;
    overflow: visible; /* circle cap allowed to overflow */
  }

  /* ── Fill ────────────────────────────────────────────── */
  .chart-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 0.375rem;
    background: linear-gradient(90deg, #003865, #0058A4);
    transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ── Circle cap at bar tip ───────────────────────────── */
  .chart-bar-circle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #003865, #0058A4);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,43,78,0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  /* ── Percentage text inside circle ───────────────────── */
  .chart-bar-pct {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.01em;
  }

  /* ── Screen-reader only ──────────────────────────────── */
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }

  /* ── Responsive ──────────────────────────────────────── */
  @media (max-width: 639px) {
    .chart-label {
      width: 100%;
      text-align: left;
    }
    .chart-bar-track  { height: 1.25rem; }
    .chart-bar-circle { width: 2.75rem; height: 2.75rem; }
    .chart-bar-pct    { font-size: 1rem; }
    
    .chart-item {
        flex-direction: column;
        padding: 1rem 0 1.25rem 1.25rem;
    }
    
    .chart-bar-col {
        width: 100%;
    }
  }

@media (max-width: 500px) {
    .chart-item {
        margin-bottom: 1rem;
    }
}




/********** reminder box */
.btn-arrow {
  display: inline-flex;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-8px);
  transition: width 300ms ease-in-out, opacity 300ms ease-in-out, transform 300ms ease-in-out, margin-left 300ms ease-in-out;
  margin-left: 0;
}

.cst-btn:hover .btn-arrow,
.cst-btn:focus .btn-arrow,
.cst-btn:focus-visible .btn-arrow {
  width: 20px;
  opacity: 1;
  transform: translateX(0);
  margin-left: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-arrow {
    transition: none;
  }
}



/* === Convert form-group divs to list === */
.lake-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
  /*  display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;*/
}

/* Remove the flex from the form itself since the ul now handles it */
.lake-activity form {
    display: block;
}

/* === Visible focus indicator on the card wrap (WCAG 1.4.11 / 2.4.7) === */
.lake-activity form .form-group label input:focus-visible + .checkmark-wrap {
    outline: 3px solid #3e1151;
    outline-offset: 2px;
    border-radius: 5px;
}

/* Fallback for browsers that don't support :focus-visible */
.lake-activity form .form-group label input:focus + .checkmark-wrap {
    outline: 3px solid #3e1151;
    outline-offset: 2px;
    border-radius: 5px;
}

/* Remove outline on checkmark-wrap when using mouse (re-hide for :focus-visible supporters) */
@supports selector(:focus-visible) {
    .lake-activity form .form-group label input:focus:not(:focus-visible) + .checkmark-wrap {
        outline: none;
    }
}


.fa-plus::before {
  content: "";
}

.fa-check::before {
  content: "";
}


.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lake-activity form .form-group label .checkmark-wrap .checkmark .fa-check::before {
  color: #000;
}

.lake-activity {
  margin-top: 30px;
  padding-bottom: 30px;
}
.lake-activity form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.lake-activity form .form-group {
   /* width: calc(47%);*/
    margin-bottom: 2.5rem;
    min-height: 130px;
    }

@media (max-width: 849px) {
    .lake-activity form .form-group {
        margin-bottom: 0rem;
    }
}

.lake-activity form .form-group label {
   /* max-width: 400px;*/
    width: 100%;
    padding: 0 0 0 25px;
    height: 100%;
    display: inline-block;
    margin-bottom: 0.5rem;
    }

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  height: auto;
}

.lake-activity form .form-group label span {
  display: block;
}

.lake-activity form .form-group label .checkmark-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  background-color: #F0F7FD;
  border-radius: 5px;
  cursor: pointer;
  height: 100%;
    }

.lake-activity form .form-group label .checkmark-wrap .checkmark {
  height: 56px;
  width: 56px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 50%;
  left: -28px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: #9FCC3B;
  font-size: 15px;
  color: #000;
  -webkit-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
  background: #9FCC3B;
  background-color: rgb(159, 204, 59);
  border: none;
    z-index: 1;
    overflow: hidden;
    }

.lake-activity form .form-group label .checkmark-wrap .checkmark::before {
  content: "";
  position: absolute;
  top: calc(var(--y) - var(--width) / 2);
  left: calc(var(--x) - var(--width) / 2);
  transform-origin: 50% 50%;
  background-color: #fff;
  height: var(--width);
  width: var(--width);
  border-radius: 50%;
  z-index: -1;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.lake-activity form .form-group label .checkmark-wrap:hover .checkmark {
  background-color: #3e1151;
  color: #fff;
}

.lake-activity form .form-group label .checkmark-wrap .checkmark .fa-plus {
  -webkit-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}
.lake-activity form .form-group label .checkmark-wrap .checkmark .fa-check {
  display: none;
}
.lake-activity form .form-group label .checkmark-wrap .checkmark:hover, .lake-activity form .form-group label .checkmark-wrap .checkmark:focus {
  background-color: #3e1151;
}
.lake-activity form .form-group label .checkmark-wrap .checkmark:hover .fa-plus, .lake-activity form .form-group label .checkmark-wrap .checkmark:focus .fa-plus {
  color: #fff;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.lake-activity form .form-group label .checkmark-wrap .checkmark-img {
  height: 100%;
  width: 130px;
}

.lake-activity form .form-group label .checkmark-wrap .checkmark-img img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 0 5px 5px 0;
    }

.lake-activity form .form-group label .checkmark-wrap .checkmark-content {
  width: calc(100% - 130px);
  padding: 0 14px;
  font-size: 1.125rem;
  line-height: 1.15;
  font-weight: 400;
  text-align: left;
  padding: 30px 20px 30px 50px;
}


@media screen and (max-width: 640px) {
    .lake-activity form .form-group label {
        padding: 0 30px 0 50px;
        }
    }

@media screen and (max-width: 465px) {
    .lake-activity form .form-group {
        margin-left: 15px;
        }

    .lake-activity form .form-group label {
        padding: 0 20px 0 35px;
        }
    }

@media screen and (max-width: 350px) {
.lake-activity form .form-group {
    margin-left: 15px;
    }

.lake-activity form .form-group label {
    padding: 0 0 0 14px;
    }

.lake-activity form .form-group label .checkmark-wrap .checkmark-content {
      width: calc(100% - 110px);
      font-size: 1rem;
      padding: 10px 10px 10px 35px;
    }

.lake-activity form .form-group label .checkmark-wrap .checkmark-img {
    width: 110px;
    }

}

@media screen and (max-width: 330px) {
    .lake-activity form .form-group label {
        padding:0 14px 0 25px;
    }
}

.lake-activity form .form-group label input {
    opacity: 0;
    position: absolute;
    }

.lake-activity form .form-group label input:checked + .checkmark-wrap .checkmark {
  background-color: #fff;
}
.lake-activity form .form-group label input:checked + .checkmark-wrap .checkmark .fa-plus {
  display: none;
}
.lake-activity form .form-group label input:checked + .checkmark-wrap .checkmark .fa-check {
  font-size: 25px;
  display: block;
}
.lake-activity form .form-group label input:checked + .checkmark-wrap .checkmark:hover, .lake-activity form .form-group label input:checked + .checkmark-wrap .checkmark:focus {
  background-color: #fff;
}

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  -webkit-filter: none;
          filter: none;
}





/********************* video page *********************/
.badge-sec.top-fixed {
  padding-top: 0px;
  position: fixed;
  z-index: 100;
  width: 100%;
  transition: all .5s ease-in-out;
}

.displayme-top {
    display: block;
    top: 0px;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    }

.hideme-top {
    display: none;
    top: -150px;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    }

.top-fixed .topbar-wrapper {
  width: 100%;
  background: #fff;
  height: 100px;
  z-index: 5;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.top-fixed .topbar-wrapper .badge-wrapper {
  margin: auto;
  display: inline-flex;
}

.top-fixed .topbar-wrapper .badge-wrapper .progress-score-wrap-content {
  max-width: 600px;
  /*width: 600px;*/
  padding: 0 40px;
}

.top-fixed .topbar-wrapper .header-score {
  height: 120px;
  background-color: #64a6de;
  margin: -6px 20px 0 0;
  border-radius: 5px;
  max-width: 110px;
  width: 110px;
  padding: 10px 0 32px;
  float: right;
}

.top-fixed .topbar-wrapper .header-score p {
  margin-bottom: 5px;
  color: #003865;
  margin-bottom: 0;
  font-size: 16px;
  top: unset;
  right: unset;
  position: relative;
}

.top-fixed .topbar-wrapper .badge-wrapper .header-score .score-svg {
  width: 75%;
  margin: auto;
}

.top-fixed .topbar-wrapper .badge-wrapper .header-score .score-svg p#topbadgenum2 {
  top: -39px;
  font-weight: 900;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin-bottom: 0;
  font-size: 18px;
  color: #003865;
  font-family: 'MyriadPro-Bold';
}
.badge-sec.bottom-fixed {
  padding-top: 0px;
  position: fixed;
  z-index: 100;
  width: 100%;
  transition: all .5s ease-in-out;
}

.displayme-bottom {
    display: block;
    top: 0px;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    }

.hideme-bottom {
    display: none;
    top: -150px;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    }

.bottom-fixed .topbar-wrapper {
  width: 100%;
  background: #fff;
  height: 80px;
  z-index: 5;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.bottom-fixed .topbar-wrapper .badge-wrapper {
  margin: auto;
  display: inline-flex;
}

.bottom-fixed .topbar-wrapper .badge-wrapper .progress-score-wrap-content {
  max-width: 600px;
  /*width: 600px;*/
  padding: 0 40px;
}

.bottom-fixed .topbar-wrapper .header-score {
  height: 120px;
  background-color: #64a6de;
  margin: -6px 20px 0 0;
  border-radius: 5px;
  max-width: 110px;
  width: 110px;
  padding: 10px 0 32px;
  float: right;
}

.bottom-fixed .topbar-wrapper .header-score p {
  margin-bottom: 5px;
  color: #003865;
  margin-bottom: 5px;
  font-size: 16px;
  top: unset;
  right: unset;
  position: relative;
  font-size: 1rem;
  line-height: 1rem;
}

.bottom-fixed .topbar-wrapper .badge-wrapper .header-score .badge-4-colors,
.bottom-fixed .topbar-wrapper .badge-wrapper .header-score .badge-5-colors {
  width: 70%;
  margin: auto;
}

.bottom-fixed .topbar-wrapper .badge-wrapper .header-score .badge-4-colors p#scorenumbadgebottom2 {
  top: -64px;
  font-size: 12px;
  color: #002b4e;
  font-family: MyriadPro-Bold;
    }

.video-sec-main-elem {
  max-width: 1050px;
  margin: 0 auto;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.video-sec .video-sec-main-elem {
  -webkit-box-align: unset;
  -ms-flex-align: unset;
  align-items: unset;
  /*padding: 0 70px;*/
}

@media screen and (max-width: 1050px) {
  .video-sec .video-sec-main-elem {
   /* padding: 0 20px;*/
  }
}


@media (max-width: 500px) {
    
    .bottom-fixed .topbar-wrapper .badge-wrapper .progress-score-wrap-content {
        padding: 0 5px;
    }
    
    .bottom-fixed .topbar-wrapper .header-score {
        margin-right: 5px;
    }
    .bottom-fixed .topbar-wrapper .badge-wrapper .header-score .badge-4-colors p#scorenumbadgebottom2 {
        top: -50px;
        font-size: 12px;
    }
}

@media (max-width: 399px) {
    .top-fixed .topbar-wrapper .badge-wrapper .header-score .score-svg p#topbadgenum2 {
        top: -23px;
        font-size: 12px;
    }
}

.video-sec-main-elem .video-sec-left-elem,
.video-sec-main-elem .video-sec-right-elem {
  padding: 20px 0;
}

@media (min-width: 992px) {
  .col-lg-6 {
    -ms-flex: 0 0 50%;
    -webkit-box-flex: 0;
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 768px) {
  .col-md-12 {
    -ms-flex: 0 0 100%;
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}
.embed-responsive::before {
  display: block;
  content: "";
}

.video-sec-main-elem .video-sec-left-elem .video-detail-wrap,
.video-sec-main-elem .video-sec-right-elem .video-detail-wrap {
  padding: 10px 12px 20px;
  background-color: #F0F7FD;
  border-radius: 0 0 20px 20px;
}

.video-sec-main-elem .video-sec-left-elem .video-detail-wrap .video-detail, .video-sec-main-elem .video-sec-right-elem .video-detail-wrap .video-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 10px 0;
}

.video-sec-main-elem .video-sec-left-elem .video-detail-wrap .video-detail *,
.video-sec-main-elem .video-sec-right-elem .video-detail-wrap .video-detail * {
  margin-bottom: 0;
}

.video-sec-main-elem .video-sec-left-elem .video-detail-wrap .video-detail h2,
.video-sec-main-elem .video-sec-right-elem .video-detail-wrap .video-detail h2 {
    text-align: left;
    width: 75%;
    }

.video-sec-main-elem .video-sec-left-elem .video-detail-wrap .video-btn-wrap,
.video-sec-main-elem .video-sec-right-elem .video-detail-wrap .video-btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

.confetti-button::before,
.confetti-button::after {
  position: absolute;
  content: '';
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
}

.confetti-button::after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, #2cb34a 20%, transparent 20%), radial-gradient(circle, #bee461 20%, transparent 20%), radial-gradient(circle, transparent 10%, #bee461 15%, transparent 20%), radial-gradient(circle, #bee461 20%, transparent 20%), radial-gradient(circle, #bee461 20%, transparent 20%), radial-gradient(circle, #2cb34a 20%, transparent 20%), radial-gradient(circle, #2cb34a 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}

.confetti-button::before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, #6dc25a 20%, transparent 20%), radial-gradient(circle, transparent 20%, #2cb34a 20%, transparent 30%), radial-gradient(circle, #2cb34a 20%, transparent 20%), radial-gradient(circle, #2cb34a 20%, transparent 20%), radial-gradient(circle, transparent 10%, #6dc25a 15%, transparent 20%), radial-gradient(circle, #6dc25a 20%, transparent 20%), radial-gradient(circle, #6dc25a 20%, transparent 20%), radial-gradient(circle, #bee461 20%, transparent 20%), radial-gradient(circle, #bee461 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}


.video-sec-main-elem .video-sec-left-elem .video-detail-wrap .video-btn-wrap .pledge-watch,
.video-sec-main-elem .video-sec-right-elem .video-detail-wrap .video-btn-wrap .pledge-watch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.confetti-button {
  -webkit-appearance: none;
  appearance: none;
}
.pledge-button {
  /*margin-top: -60px;
  font-family: 'Myriad Pro', 'Arial', sans-serif;
  letter-spacing: 0.03em;
  font-size: 1em;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  position: relative;
  display: inline-block;*/
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s, background-color ease-in-out 0.25s;
}

.video-sec-main-elem .video-sec-left-elem .video-detail-wrap .video-btn-wrap .pledge-watch .check-circle,
.video-sec-main-elem .video-sec-right-elem .video-detail-wrap .video-btn-wrap .pledge-watch .check-circle {
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background-color: #263238;
  display: block;
  position: relative;
  margin-right: 10px;
}
.video-sec-main-elem .video-sec-left-elem .video-detail-wrap .video-btn-wrap .pledge-watch .check-circle::before,
.video-sec-main-elem .video-sec-right-elem .video-detail-wrap .video-btn-wrap .pledge-watch .check-circle::before {
  content: "";
  height: 15px;
  width: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  position: absolute;
  top: 46%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.accept-pledge {
  font-weight: bold;
  text-transform: uppercase;
  padding: .8em 1.5em .5em;
  -webkit-appearance: none;
  appearance: none;
  background-color: #650000;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s, background-color ease-in-out 0.25s;
  border-radius: 10px;
}

.accept-pledge:hover,
.accept-pledge:focus {
    background-color: #BE4C13;
    outline: 2px dotted #BE4C13;
    outline-offset: 2px;
    /*color: #002b4e;*/
    }

.pledge-accepted {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: transparent;
  border: none;
  background: unset !important;
  text-transform: unset !important;
  padding: unset !important;
}
.accept-pledge.animate::after {
  display: block;
  -webkit-animation: bottomBubbles ease-in-out 0.75s forwards;
  animation: bottomBubbles ease-in-out 0.75s forwards;
}


.accept-pledge::before, .accept-pledge::after {
  position: absolute;
  content: "";
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: 1000;
  -webkit-transition: all ease-in-out 0.5s;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
    }

.accept-pledge::after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, #2cb34a 20%, transparent 20%), radial-gradient(circle, #bee461 20%, transparent 20%), radial-gradient(circle, transparent 10%, #bee461 15%, transparent 20%), radial-gradient(circle, #bee461 20%, transparent 20%), radial-gradient(circle, #bee461 20%, transparent 20%), radial-gradient(circle, #2cb34a 20%, transparent 20%), radial-gradient(circle, #2cb34a 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
    }

.accept-pledge.animate::before {
  display: block;
  -webkit-animation: topBubbles ease-in-out 0.75s forwards;
  animation: topBubbles ease-in-out 0.75s forwards;
}
.accept-pledge::before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, #6dc25a 20%, transparent 20%), radial-gradient(circle, transparent 20%, #2cb34a 20%, transparent 30%), radial-gradient(circle, #2cb34a 20%, transparent 20%), radial-gradient(circle, #2cb34a 20%, transparent 20%), radial-gradient(circle, transparent 10%, #6dc25a 15%, transparent 20%), radial-gradient(circle, #6dc25a 20%, transparent 20%), radial-gradient(circle, #6dc25a 20%, transparent 20%), radial-gradient(circle, #bee461 20%, transparent 20%), radial-gradient(circle, #bee461 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}

.video-btn-wrap .material--submit {
  margin: unset;
}

.video-sec-main-elem .video-sec-left-elem .bonus-badge,
.video-sec-main-elem .video-sec-right-elem .bonus-badge {
  background-color: #F0F7FD;
  padding: 31px 20px;
  height: 100%;
  border-radius: 20px;
}

.video-sec-main-elem .video-sec-left-elem .bonus-badge .pledge-badge-wrap,
.video-sec-main-elem .video-sec-right-elem .bonus-badge .pledge-badge-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.video-sec-main-elem .video-sec-left-elem .bonus-badge .pledge-badge-wrap .pledge-badge,
.video-sec-main-elem .video-sec-right-elem .bonus-badge .pledge-badge-wrap .pledge-badge,
.video-sec-main-elem .video-sec-left-elem .bonus-badge .pledge-badge-wrap .share-badge,
.video-sec-main-elem .video-sec-right-elem .bonus-badge .pledge-badge-wrap .share-badge {
  max-width: 50%;
  max-width: unset;
}

.video-sec-main-elem .video-sec-left-elem .bonus-badge .pledge-badge-wrap .pledge-badge,
.video-sec-main-elem .video-sec-right-elem .bonus-badge .pledge-badge-wrap .pledge-badge,
.video-sec-main-elem .video-sec-left-elem .bonus-badge .pledge-badge-wrap .share-badge,
.video-sec-main-elem .video-sec-right-elem .bonus-badge .pledge-badge-wrap .share-badge {
  max-width: 131px;
  margin-left: auto;
}

.video-sec-main-elem .video-sec-left-elem .bonus-badge .pledge-badge-wrap .pledge-badge,
.video-sec-main-elem .video-sec-right-elem .bonus-badge .pledge-badge-wrap .pledge-badge,
.video-sec-main-elem .video-sec-left-elem .bonus-badge .pledge-badge-wrap .share-badge,
.video-sec-main-elem .video-sec-right-elem .bonus-badge .pledge-badge-wrap .share-badge {
  max-width: 50%;
  max-width: unset;
}

.video-sec-main-elem .video-sec-left-elem .bonus-badge .pledge-badge-wrap .pledge-badge svg,
.video-sec-main-elem .video-sec-right-elem .bonus-badge .pledge-badge-wrap .pledge-badge svg,
.video-sec-main-elem .video-sec-left-elem .bonus-badge .pledge-badge-wrap .share-badge svg,
.video-sec-main-elem .video-sec-right-elem .bonus-badge .pledge-badge-wrap .share-badge svg {
  height: 131px;
}

.bottom-btn {
    max-width: unset;
    margin: 0 auto;
    text-align: center;
    background: #f0f7fd;
    padding: 50px;
    border-radius: 20px;
    }

.video-sec-main-elem .video-sec-left-elem .bonus-badge .pledge-badge-wrap .pledge-badge p,
.video-sec-main-elem .video-sec-right-elem .bonus-badge .pledge-badge-wrap .pledge-badge p,
.video-sec-main-elem .video-sec-left-elem .bonus-badge .pledge-badge-wrap .share-badge p,
.video-sec-main-elem .video-sec-right-elem .bonus-badge .pledge-badge-wrap .share-badge p {
  line-height: 1.2;
  margin-top: 15px;
}


.progress-score-wrap .video-sec-main-elem {
  margin-bottom: unset;
}

.video-sec-main-elem .video-badge-content {
  /*width: calc(100% - 300px);
  padding-right: 90px;*/
}

.video-sec-main-elem .video-badge-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
}

.video-sec-main-elem .video-badge-wrap .bonus-badge-wrap {
  text-align: center;
  max-width: 130px;
}

.video-sec-main-elem .video-badge-wrap .bonus-badge-wrap figure {
  height: 130px;
  width: 100%;
  margin: 0 auto 10px;
}

.video-sec-main-elem .video-badge-wrap .bonus-badge-wrap {
  text-align: center;
  max-width: 130px;
}

.video-sec-main-elem .video-badge-wrap .bonus-badge-wrap p {
  padding: 0 6px;
}

.disabled p {
  /*color: #CFD8DC;*/
  color: transparent
}

p.showthis strong {
    color: #003865 !important;
}

.video-sec-main-elem .video-sec-left-elem .video-detail-wrap .video-btn-wrap.disabled .pledge-watch p,
.video-sec-main-elem .video-sec-right-elem .video-detail-wrap .video-btn-wrap.disabled .pledge-watch p,
.disabled p strong {
  color: #4a646f;
  /*color: transparent*/
}

p.badgetitle strong {
    display: block;
}

.disabled p.badgetitle strong {
    display: none;
}

.pledgebuttonspinner {
  animation-name: spinpledgebutton, depth;
  animation-timing-function: ease-out;
  animation-iteration-count: .65s;
  animation-duration: .65s;
  text-align: center;
}

@keyframes spinpledgebutton {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}

.confetti-button.animate:before {
    display: block;
    animation: topBubbles ease-in-out 0.75s forwards;
    }

.confetti-button.animate:after {
    display: block;
    animation: bottomBubbles ease-in-out 0.75s forwards;
    }

 @keyframes
    topBubbles {  0% {
     background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
        }
     50% {
     background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
        }
     100% {
     background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
     background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
        }
    }

@keyframes
    bottomBubbles {  0% {
     background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
        }
         50% {
         background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
        }
         100% {
         background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
         background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
        }
    }

.video-sec-main-elem .video-sec-left-elem .video-detail-wrap .video-btn-wrap .learn-more-content::before,
.video-sec-main-elem .video-sec-right-elem .video-detail-wrap .video-btn-wrap .learn-more-content::before,
.learn-more-content::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #0058a4;
  right: 50%;
  top: -20px;
    }

.video-sec-main-elem .video-sec-left-elem .video-detail-wrap .video-btn-wrap .learn-more-content,
.video-sec-main-elem .video-sec-right-elem .video-detail-wrap .video-btn-wrap .learn-more-content,
.learn-more-content {
  z-index: 2;
  background: #f0f7fd;
  padding: 30px;
  max-width: 95%;
  margin: -30px auto 50px;
  position: relative;
  border-radius: 20px;
}

.learn-more-content p {
    margin-bottom: 5px;
}

.learn-more-content a {
    text-decoration: underline;
}

.learn-more-content a:hover,
.learn-more-content a:focus {
    outline: dotted 2px #D97706;
    outline-offset: 2px;
}





/**************** account apge */
.login-wrap {
  background-color: #e6eff6;
  min-height: calc(100vh - 120px);
}

.login-wrap .login-content-wrap {
  max-width: 490px;
  border-radius: 5px;
  background-color: #fff;
  text-align: center;
  margin: 0px auto 0;
  padding: 30px 30px 40px;
}

.account-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: solid 1px #011f37;
        border-radius: 5px;
        padding: 12px 40px 9px 19px;
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23011f37' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
        line-height: 1;
        width: 100%;
        max-width: 400px;
        font-size: 1rem;
        color: #011f37;
        cursor: pointer;
    }

.account-select:focus {
        outline: 3px solid #f59e0b;
        outline-offset: 2px;
        border-color: #011f37;
    }

footer .footer-btm-content {
  min-height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
    }

.bg-blue {
  background-color: #003865;
}
.login-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 60px;
}
.bg-blue p {
  color: #93BBDE;
}
.login-header p {
  /*color: #fff;*/
  margin: 0;
  line-height: 1.1;
}

.login-header span {
  /*color: #fff;*/
}

footer small {
  margin: 0;
  color: #fff;
}

.resetpw {
    align-self: start;
    padding-left: 20px;
    }

.forgotfield {
    border: 1px solid #003865 !important;
}

.reportsus ol {
    list-style: decimal;
    margin-left: 15px;
    margin-top: 10px;
    }

.reportsus ol ul {
    list-style: disc;
    margin-left: 15px;
}

a.toslink {
    text-decoration: underline;
    }

a.toslink:hover,
a.toslink:focus {
    outline: 2px dotted #BE4C13;
    outline-offset: 2px;
    }

.invalid-feedback {
    color: #a50101;
}