:root {
  /* Colors! 🌈 */
  --BIG-Orange-Base: #ff7e20;
  --BIG-Orange-Hover: #ff9548;
  --BIG-Blue-Dark: #19419c;
  --BIG-Blue: #006fd5;
  --BIG-Blue-Hover: #0082fc;
  --BIG-Blue-Sky: #69c2f4;
  --BIG-Faint-Gray: #f1f1f1;
  --BIG-Light-Gray: #f9f9f9;
  --BIG-Gray: #e2e2e2;
  --BIG-Red: #c32725;
  --BIG-Red-Hover: #9e1717;
  --link-navy: #0f3760;
  --link-green: #007816;
  --link-red: #800019;

  /* Training Card Colors */
  --agentSupport-tan: #85794f;
  --compliance-green: #1e7800;
  --marketing-navy: #0f3760;
  --sales-maroon: #620203;
  --product-gold: #a97a1f;
  --ifp-gray: #8c8c8c;

  /* Measurements 📏 */
  --footer-height: 5em;

  /* Styles 🖥 */
  --assist-shadow: #00050c35 0 0 0.625rem;
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* ---------- */
html {
  scroll-behavior: smooth;
}

html body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Container and wrap to keep footer at bottom of page based on the content or the window */
#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: var(--footer-height); /* Footer height */
}
/* ---------- */

/* -------- Dropdown Styles --------  */
.dropdown-wrapper {
	width: 100%;
	max-width: 50rem;
	margin: auto;
	transition: all 0.3s;
	color: #4e5359;
}
.dropdown-item {
	border: 1px solid #ededed;
	margin-bottom: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.dropdown-item:hover{
	transition: all 200ms ease-in-out;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.dropdown-button {
	width: 100%;
	background: #ffffff;
	border: none;
	padding: 10px;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dropdown-button .title {
	font-size: 1.5rem;

	padding: 0.45rem; /* Foundations Overrides */
	margin-bottom: 0; /* Foundations Overrides */
	color: #4896e7;
}
.dropdown-content {
	max-height: 0; /* Hide content by default */
	overflow: hidden;
	transition: max-height 200ms ease;
	padding: 0 10px;
	background: #fff;

}

.arrow {
	color: #4896e7;
}
.dropdown-button.active .arrow {
	transform: rotate(180deg);
}

/* -------- Agent Portal Components --------  */
.ap_navbar {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

.ap_nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2rem;
}

.ap_logout-button {
  background-color: var(--BIG-Blue-Base);
  color: white;
  border: 2px solid var(--BIG-Orange-Base);
  border-radius: 6px;
  font-weight: bold;
  padding: 0.625rem 1rem;
  &:hover {
    background-color: var(--BIG-Orange-Hover);
    color: white;
  }
}

.ap_banner {
  position: relative;
  box-shadow: #00050c42 0 0 0.625rem;
  border-bottom: solid black 0.125rem;
  & img {
    height: 23.5rem;
    width: auto;
    max-width: 100%;
    overflow-x: hidden;
    object-fit: cover;
  }
}

.ap_snp-plan-cert {
  position: absolute;
  color: white;
  top: 10em;
  /*margin-left: 2rem; */

  & .cert-container {
    width: 18rem;

    & .plan-cert-pill {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      background-color: var(--BIG-Blue-Dark);
      color: white;
      border-radius: 1.25rem;
      padding: 0.5rem 1rem;
      transition: all 0.2s;
      &:hover {
        background-color: #204cb2;
        transform: translateY(-0.125rem);
      }
      &:active {
        transform: translateY(-0.0625rem);
        outline: solid 0.125rem var(--BIG-Blue-Sky);
      }

      & .cert-icon {
        background-color: #ff7e20;
        font-size: 2rem;
        border-radius: 100%;
        padding: 0.75rem 1rem;
      }

      & .header {
		font-size: 1.125rem;
        font-weight: bold;
        margin-bottom: 0;
      }
    }
  }
}

.ap_snp-assist {
  font-family: "Barlow Condensed", sans-serif;
  position: absolute;
  top: 8.6875em;
  right: 0;
  margin-right: 4.375rem;
  color: white;
  font-weight: 600;
  text-align: center;
  line-height: 1.75rem;

  & .fa-circle-question {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }
  & .main-text {
    font-size: 1.6875rem;
    margin-bottom: 0.75rem;
  }
  & .small-text {
    margin-top: 0.25rem;
    font-size: 1rem;
  }
}

.ap_bottom-container {
  display: flex;
  flex-direction: row;
  background-color: var(--BIG-Gray);
}

.ap_sidebar-container {
/*   min-width: 18rem; */
/*   display: flex; */
/*   flex-direction: column; */
/*   justify-content: flex-start; */
/*   align-items: center; */
/*   background-color: var(--BIG-Light-Gray); */
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 1rem;
  padding-bottom: 10rem;
  height: calc(100vh - 10px); /**/
}

.ap_blue-title {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--BIG-Blue-Hover);
  padding: 1rem 0;
  text-align: center;
}

.button-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 6.6875rem;
  color: #222;
  padding: 0 2rem;
  transition: all 0.2s;
}

.button-container:hover {
  background-color: var(--BIG-Blue-Dark);
  color:white;
}

.dept-logo {
  background-color: var(--BIG-Faint-Gray);
  border-radius: 100%;
  min-width: 3.9375rem;
  min-height: 3.9375rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dept-logo img {
  width: 2.5rem;
  height: 2.5rem;
}

.text-container {
  display: flex;
  flex-direction: column;
  justify-content: left;
/*   padding: 0.5rem; */
}

.text-container .title {
  font-size: 1.125rem;
  font-weight: bold;
}

.text-container .description {
  font-size: 0.73rem;
  font-weight: 400;
}

.ap_main-container {
  padding-top: 1.25rem;
  flex-grow: 1;
}


.tech-buttons-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}

.ap_tech-button {
  display: inline-block;
  background-color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}

.ap_tech-button:hover {
  background-color:#f3f7ff;
  transform: translateY(-0.125rem);
}

.ap_tech-button:active {
  background-color: #fff;
  transform: translateY(-0.0625rem);
  outline: solid 0.125rem var(--BIG-Blue-Sky);
  box-shadow: 0 0 0 rgb(0, 0, 0);
}

.ap_cards-container {
  margin: 0 auto;
  padding: 0 0 3rem 0;
  text-align: center;
}

.ap_cards-container h4 {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-size: 2rem;
}

.ap_carrier-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  max-width: 907px;
  margin: 0 auto;
}

.ap_carrier-card {
  background-color: white;
  padding: 0.875rem;
  border-radius: 13px;
  max-width: 18.1875rem; /* 291px*/
}

.ap_carrier-card .carrier-logo {
  max-width: 16.4375rem; /*263 px*/
}

.ap_dept-container {
  margin: 3rem 4rem 4rem 3rem;
  display: flex;
  flex-direction: row;
  flex-basis: 99rem;
  place-items: start;
  gap: 1.5rem;
  padding: 1.25rem 2.1875rem;
}

.left-navigation {
  max-width: 18rem;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  place-content: space-between;
  justify-content: center;
  gap: 0.25rem; /* 4px */
  margin-top: 1rem;
  padding: 1rem;
}

.red-button-container {
  margin: 1.5rem 0 0 0;
  display: flex;
  flex-direction: column;
}

.red-button-container li {
  list-style: none;
}

.red-button-container li a {
  display: block;
  position: relative;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 1rem;
  padding-left: 1rem;
  margin: 0;
  background-color: var(--BIG-Red);
  border-bottom: solid rgb(30 41 59 / 1) 0.06rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.red-button-container li a:hover {
  background-color: var(--BIG-Red-Hover);
  --tw-translate-y: -0.25rem; /* -4px */
}

.right-section {
  flex-grow: 1;
}

.portal-section-top .top-text-container .title {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-size: 3rem;
  color: var(--BIG-Blue);
}

.section-dropdown .section-title {
  display: block;
  color: black;
  font-size: 1.125rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  background-color: white;
  border-radius: 0.75rem;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(226 232 240 / 1);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  max-width: 866px;
}

.accordion:hover {
  box-shadow: var(--shadow-lg);
}

.accordion .item .header-container {
  font-weight: bold;
  background-color: white;
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 1rem;
  cursor: pointer;
}

.accordion .item .header-container:active {
  background-color: #f1fcff;
  outline: solid 0.125rem var(--BIG-Blue-Sky);
}

.accordion .item .header-container h4 {
  margin: 0;
  color: var(--BIG-Blue);
}

.accordion .item .header-container .activeIcon {
  display: none;
  width: 1.5rem;
  height: 1.5rem;
}

.accordion .item .header-container .inactiveIcon {
  width: 1.5rem;
  height: 1.5rem;
}

.accordion .item .content p {
  margin: 0;
  padding: 0.5rem;
}

.accordion .item .content p a {
  color: var(--BIG-Blue-Hover);
}

.accordion .item .content p a:hover {
  text-decoration: underline;
}

.accordion .item.active .content {
  height: auto;
  overflow: auto;
  padding: 1.5rem;
  line-height: 1.5rem;
  background-color: rgb(246, 246, 246);
}

.accordion .item.active .header-container .inactiveIcon {
  display: none;
}

.accordion .item.active .header-container .activeIcon {
  display: block;
}

.accordion .item:not(.active) .content {
  height: 0px;
  overflow: hidden;
  padding-top: 0px;
  padding-bottom: 0px;
}

.ap_trainings-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.5rem;
}

.ap_training-card {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  min-width: 16rem;
  max-width: 16rem;
  color: white;
  padding: 0.5rem 0.125rem;
  border-radius: 6px;
  padding-right: 0.5rem;
  transition: box-shadow 0.2s;
}

/* .ap_training-card:hover {
  transform: translateY(-0.125rem);
  box-shadow: var(--assist-shadow);
  outline: var(--BIG-Blue-Sky) solid 0.125rem;
} */

/* .ap_training-card:active {
  transform: translateY(-0.0625rem);
  outline: solid 0.125rem var(--BIG-Blue-Sky);
} */

.ap_training-card img {
  max-height: 3.8125rem;
  max-width: 2.9375rem;
}

.ap_training-data {
  margin-left: 3px;
}

.ap_training-data .date {
  font-size: 12px;
  margin: 0;
}

.ap_training-data .ap_training-title {
  font-size: 0.75rem;
  font-weight: bold;
  min-width: 12.25rem;
}

.view-more-trainings {
  display: block;
  text-decoration: underline;
  padding: 1rem 0.5rem;
}
/* ----------------- */

/* -------Footer-------- */
.ap_footer {
/*   position: absolute;
  display: flex;
	gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  bottom: 0;
  background-color: #00050c;
  color: white;
  height: var(--footer-height);
  padding: 3rem; */
	position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #BBB;
    color: #777;
    padding-block: 1rem;
    padding-inline: 1rem;

  & p {
    margin: 0;
  }
}

.training-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  padding-inline: 0.5rem;
  margin-bottom: 3.5rem;
}

.training-card {
  display: flex;
  justify-content: space-between;
  align-items: start;
  border-radius: 1rem;
  max-width: 37.75rem;
  color: white;
  padding: 2rem 1rem;
}

.training-card .date {
  margin: 1rem 0;
}

.training-card img {
  max-width: 10.6875rem;
  max-height: 10.6875rem;
  margin-right: 1.25rem;
}

.training-card .register-button {
  display: block;
  background-color: #fff;
  color: var(--BIG-Blue);
  font-weight: bold;
  border-radius: 5rem;
  padding: 0.5rem 1rem;
  margin-top: 1rem;
  text-align: center;
}

.training-card .register-button:hover {
  background-color: var(--BIG-Blue);
  color: white;
}

@media (max-width: 768px) {
  .training-wrapper {
    grid-template-columns: 1fr;
  }
	
	.training-card {
		display: block;
	}
}

/* -------- Global Classes ------- */
.big-blue-button {
  display: block;
  font-family: "Barlow", sans-serif;
  font-weight: bold;
  background-color: var(--link-navy);
  color: #fff;
  padding: 0.25rem 0;
  border-radius: 0.5rem;
  transition: all 0.2s;
  min-width: 211px;
  &:hover {
    background-color: var(--BIG-Blue);
    color: #fff;
    transform: translateY(-0.125rem);
  }
  &:active {
    transform: translateY(-0.0625rem);
    outline: solid 0.125rem var(--BIG-Blue-Sky);
  }
}

.go-back-home {
  position: relative;
  padding: 1rem;
  outline: solid 0.125rem var(--BIG-Blue-Dark);
  width: 100%;
  & .fa-circle-arrow-left {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    transform: translateY(0.16rem);
  }
}

.directory-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  max-width: 907px;
  margin: 0 auto;
}

.ap_link-card {
  background-color: white;
  padding: 0.875rem;
  border-radius: 13px;
  object-fit: cover;
}

.ap_link-card .fa-solid {
  font-size: 1.5rem;
}

.ap_link-card .navy {
  color: var(--link-navy);
}

.ap_link-card .green {
  color: var(--link-green);
}

.ap_link-card .red {
  color: var(--link-red);
}

.ap_link-card .bg-navy {
  background-color: var(--link-navy);
}

.ap_link-card .bg-green {
  background-color: var(--link-green);
}

.ap_link-card .bg-red {
  background-color: var(--link-red);
}


.assist-box-dropshadow {
  box-shadow: var(--assist-shadow);
}
.assist-text-dropshadow {
  text-shadow: var(--assist-shadow);
}
.sticky-stack {
  position: sticky;
  top: 0;
}

.agent-support {
  background-color: var(--agentSupport-tan);
}
.compliance {
  background-color: var(--compliance-green);
}
.marketing {
  background-color: var(--marketing-navy);
}
.sales {
  background-color: var(--sales-maroon);
}
.product {
  background-color: var(--product-gold);
}
.ifp {
  background-color: var(--ifp-gray);
}

.heavy-button {
  display: block;
  width: 16.5rem;
  font-family: "Barlow", sans-serif;
  font-weight: bold;
  color: white;
  padding: 0.25rem 0;
  border-radius: 0.5rem;
  transition: all 0.2s;
	
  &:hover {
    background-color: var(--BIG-Blue-Hover);
    color: white;
    transform: translateY(-0.125rem);
  }
  &:active {
    transform: translateY(-0.0625rem);
    outline: solid 0.125rem var(--BIG-Blue-Sky);
  }
}

.ap_container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--BIG-Gray);
  padding: 2rem 4rem;
  margin: 0 auto;
  & .left-container {
    padding: 1rem;
  }
}

.dir-letters {
  font-size: 2rem;
}

.white-card {
  background-color: white;
  border-radius: 1rem;
  padding: 1.75rem;
  & h2 {
    color: var(--BIG-Blue);
  }
}

.eo-white-card {
  background-color: white;
  border-radius: 1rem;
  padding: 1.75rem;
  & h3 {
    color: var(--BIG-Blue);
  }
}
 .skip{
    position: absolute;
    left: -10000px;
    top: auto;
    width:1px;
    height: 1px;
    overflow: hidden;
  }
  .skip:focus{
    position:static;
    width: auto;
    height: auto;
  }