/*
Theme Name: Quartz
Theme URI: https://www.ajg.com/employeeexperience/
Author: AJG | Ian Israel
Description: Boilerplate theme for Benefits Guides.
Version: 1.0.3
Text Domain: ajg
*/

/***** Global Styles *****/
/** Font Libraries **/
@font-face {
  font-display: swap;
  font-family: "BrownStd";
  font-weight: normal;
  src: url("./fonts/BrownStd/BrownStd-Regular.otf") format("opentype");
}
@font-face {
  font-display: swap;
  font-family: "BrownStd";
  font-weight: bold;
  src: url("./fonts/BrownStd/BrownStd-Bold.otf") format("opentype");
}
@font-face {
  font-display: swap;
  font-family: "BrownStd";
  font-weight: 300;
  src: url("./fonts/BrownStd/BrownStd-Light.otf") format("opentype");
}

@font-face {
  font-display: swap;
  font-family: "Avenir-Next";
  font-weight: normal;
  src: url("./fonts/Avenir-Next/Avenir-Next-Regular.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Avenir-Next";
  font-weight: bold;
  src: url("./fonts/Avenir-Next/Avenir-Next-Demi.ttf") format("truetype");
}
@font-face {
  font-display: swap;
  font-family: "Avenir-Next";
  font-weight: 300;
  src: url("./fonts/Avenir-Next/Avenir-Next-Light.ttf") format("truetype");
}

:root {
  /* Colors */
  --copy-text-gray: #46494b;
  --promo-text-black: #242629;
  --adt-blue: #0061aa;
  --alert-blue: #24bcff;
  --safety-blue: #000782;

  /* Backgrounds */
  --bg-alert-blue-one: #2a91d1;
  --bg-alert-blue-two: #90e6ff;
  --bg-safety-blue-one: #000342;
  --bg-safety-blue-two: #3148d8;
  --bg-gray: #f5f6f7;

  /* Neutrals Colors */
  --strength-gray: #808080;
  --foundation-gray: #bfbfbf;
  --white: #ffffff;
  --black: #000000;

  /* UX Colors */
  --hover-blue: #007edd;
  --alert-orange: #ff9d2b;
  --promo-cart-red: #e91e3c;
  --error-red: #df0000;

  /* Variables */
  --primary-color: var(--adt-blue);
  --secondary-color: var(--alert-blue);
  --tertiary-color: var(--safety-blue);

  --gray-one: var(--strength-gray);
  --gray-two: var(--foundation-gray);

  --primary-text: var(--copy-text-gray);
  --secondary-text: var(--promo-text-black);

  --buck-kit-shadow: 0px 0px 8px 0px rgba(8, 8, 8, 0.25);

  --hero-content-bg: var(--safety-blue);

  /* Fonts */
  --primary-font: "Avenir-Next", sans-serif;
  --secondary-font: "BrownStd", sans-serif;
}

/* Page Layout */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--primary-font);
  color: var(--primary-text);
}

.page-inner {
  width: 80%;
  margin: 0 auto;
  padding: 4rem 0;
}

/* Utlity Classes */
.overflow-hidden {
  overflow: hidden;
}

.gray-line {
  height: 1px;
  background-color: var(--foundation-gray);
  margin: 2.5rem 0;
}

/* Standardize Margins */
h1 {
  margin-bottom: 1.5rem;
}
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 1rem;
}
p,
ul,
ol {
  margin-bottom: 1.25rem;
}
li {
  margin-bottom: 0.25rem;
}

ul,
ol {
  margin-left: 1rem;
}
p:last-child,
li:last-child {
  margin-bottom: 0;
}
.page-inner h2:not(:first-of-type) {
  margin-top: 2.25rem;
}

.page-template-template-page-no-sidebar h2,
.content-column h2 {
  margin-bottom: 0.62rem;
}

.page-template-template-page-no-sidebar h3,
.content-column h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.62rem;
}

.page-template-template-page-no-sidebar h4,
.content-column h4 {
  margin-bottom: 0;
}

.page-template-template-page-no-sidebar h5,
.content-column h5 {
  margin-bottom: 0.62rem;
}

/* Typography */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--secondary-font);
}

h1 {
  font-size: 3rem;
  font-weight: 400;
  line-height: 3.375rem;
}

h2 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.5rem;
}

h3 {
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 2.125rem;
}

h4 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.875rem;
}

h5 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
}

h6 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.625rem;
  text-transform: uppercase;
}

p {
  color: var(--primary-text);
  font-family: var(--primary-font);
  font-size: 1rem;
  line-height: 1.5rem;
}

p.lead,
.lead p {
  font-size: 1.125rem;
  line-height: 1.625rem;
}

p.small {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
p.footnote {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.125rem; /* 150% */
}

/* Input Styles */
label {
  font-family: var(--primary-font);
  color: var(--primary-text);
  font-size: 0.75rem;
  line-height: 1.125rem; /* 150% */
}
label.error {
  color: var(--error-red);
}
label.error::before {
  content: "";
  display: inline-block;
  background: url(/wp-content/uploads/Alert-Triangle.svg) no-repeat center;
  width: 1rem;
  height: 1rem;
  margin-right: 0.25rem;
  vertical-align: text-top;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  border-radius: 0.25rem;
  border: 1px solid var(--strength-gray);
  font-family: var(--primary-font);
  color: var(--primary-text);
}
/* focus */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  border: 1px solid var(--primary-color);
}
input.error {
  border-color: var(--error-red);
}
/* Links */
a,
a:visited,
span.link-cta {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

a:hover,
span.link-cta:hover {
  text-decoration: underline;
  color: var(--hover-blue);
}

a.cta,
span.link-cta {
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.625rem;
}

a.cta:after,
span.link-cta:after {
  /* Adds Arrow to link with cta class */
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  background-color: var(--adt-blue);
  mask-image: url("/wp-content/uploads/Arrow.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align: middle;
  min-width: 1rem;
}

a.cta:active,
span.link-cta:active {
  color: var(--foundation-gray);
}

a.cta:focus,
span.link-cta:focus {
  color: var(--copy-text-gray);
  padding: 0.25rem;
  border-radius: 0.25rem;
  border: 1px solid var(--copy-text-gray);
  box-shadow: var(--buck-kit-shadow);
}

a.cta.sm {
  font-family: var(--secondary-font);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.375rem;
}

/* Buttons */
button {
  font-family: var(--secondary-font);
  cursor: pointer;
  color: white;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.625rem;
  text-transform: uppercase;
  padding: 0.75rem 2rem;
  border: 3px solid var(--primary-color);
  border-radius: 6.25rem;
  background-color: var(--primary-color);
}

button.cta:after {
  /* Adds Arrow to button with cta class */
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  background-color: currentColor; /* Inherit text color */
  mask-image: url("/wp-content/uploads/Arrow.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align: middle;
  min-width: 1rem;
}
a[href^="http"] button.cta:after {
  /* Adds external link icon to button with cta class */
  content: "";
  display: inline-block;
  width: 0.6875rem;
  height: 0.6875rem;
  margin-left: 0.5rem;
  margin-bottom: 3px;
  background-color: currentColor; /* Inherit text color */
  mask-image: url("/wp-content/uploads/External-Link.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align: middle;
}

button:hover {
  background-color: var(--hover-blue);
  border-color: var(--hover-blue);
}

button:active {
  color: var(--copy-text-gray);
  background-color: var(--foundation-gray);
  border-color: var(--foundation-gray);
}

button:focus {
  border-color: var(--copy-text-gray);
  box-shadow: var(--buck-kit-shadow);
}

button.sm {
  text-transform: none;
  font-size: 0.875rem;
  line-height: 1.375rem;
  padding: 0.5rem 1rem;
}

button.ghost {
  color: var(--primary-color);
  background-color: white;
  border: 3px solid var(--primary-color);
}

button.ghost:hover {
  color: var(--hover-blue);
  border-color: var(--hover-blue);
}
button.ghost:active {
  color: white;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

button.ghost:focus {
  color: var(--copy-text-gray);
  border-color: var(--copy-text-gray);
  box-shadow: var(--buck-kit-shadow);
}

button.sm.ghost {
  border: 1px solid var(--primary-color);
}

/***** Header *****/
header {
  position: fixed;
  background-color: white;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
.header-container-wrapper,
.utility-nav-container-wrapper {
  border-bottom: 1px solid var(--foundation-gray);
}

.header-container {
  height: 6rem;
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.utility-nav-container {
  height: 2.5rem;
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left,
.header-right {
  display: flex;
}

.header-right {
  flex: 1;
  justify-content: space-between;
}

.header-right .menu-wrapper {
  display: flex;
}

.header-right .button-search-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.button-search-container img {
  cursor: pointer;
}

.header-container .logo-container {
  display: flex;
}

.logo-container img {
  width: 150px;
  display: block;
}

/* Nav */
.header-right,
.menu-primary-container,
#primary-menu,
#primary-menu li,
.utility-nav-right,
.utility-nav,
.menu-utility-nav-container,
#utility-menu,
#utility-menu li {
  height: 100%;
}

.primary-nav {
  margin-left: 2.5rem;
  display: flex;
  align-items: center;
}

#primary-menu,
#utility-menu {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}

#primary-menu li,
#utility-menu li,
#footer-menu li {
  list-style: none;
  margin: 0;
}

#primary-menu > li {
  display: flex;
  align-items: center;
  transition: 0.3s;
  position: relative;
  cursor: pointer;
}

#primary-menu > li.active::after,
#utility-menu > li.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  border-bottom: 4px solid var(--hover-blue);
}

#primary-menu li.menu-item-has-children > a:after {
  content: url("/wp-content/uploads/Angle-Down.svg");
  margin-left: 0.5rem;
}

#primary-menu > li > a,
#primary-menu > li > a:visited {
  font-family: var(--primary-font);
  color: var(--primary-text);
  text-decoration: none;
  transition: 0.3s;
  font-weight: 600;
  font-size: 0.875rem;
}

#primary-menu > li > a:hover {
  color: var(--hover-blue);
}

.sub-menu {
  display: none;
  position: absolute;
  z-index: 10;
  min-width: max-content;
  margin-left: 0;
  padding: 0.5rem;
  top: 100%;
  left: 0;
  background-color: white;
  box-shadow: var(--buck-kit-shadow);
  border-radius: 0rem 0rem 0.25rem 0.25rem;
}

.sub-menu > li {
  padding: 0.25rem 0.5rem;
  transition: 0.3s;
}

.sub-menu li a,
.sub-menu li a:visited {
  font-family: var(--primary-font);
  color: var(--primary-text);
  text-decoration: none;
  transition: 0.3s;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.sub-menu li:hover a {
  color: var(--hover-blue);
}

.menu > li:hover > .sub-menu {
  display: block;
}

#utility-menu > li {
  display: flex;
  align-items: center;
  position: relative;
}

#utility-menu > li > a,
#utility-menu > li > a:visited {
  font-family: var(--primary-font);
  color: var(--primary-text);
  text-decoration: none;
  transition: 0.3s;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

#utility-menu > li > a:hover {
  color: var(--hover-blue);
}

.utility-nav-left {
  display: flex;
  cursor: pointer;
}
.utility-nav-left img {
  margin-left: 0.25rem;
}

.utility-nav-left .sign-out {
  font-family: var(--primary-font);
  color: var(--primary-color);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
}

/* Banner */
.header-banner-container {
  display: flex;
  background-color: var(--bg-alert-blue-two);
  padding: 0.5rem 1rem;
}
.header-banner-container * {
  color: var(--promo-text-black);
}
.header-banner-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.38rem;
}
.header-banner-container a {
  color: var(--promo-text-black);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem; /* 142.857% */
}
.header-banner-close {
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Hamburger menu*/
.menu-toggle {
  display: none;
}

/* Breadcrumbs */
.breadcrumbs {
  width: 80%;
  margin: 0 auto;
  padding: 0.75rem 0;
}
.breadcrumbs a {
  font-weight: 400;
}
.breadcrumb-spacer {
  padding: 0 0.62rem;
}

/* Footer */
footer {
  background-color: var(--safety-blue);
}
.footer-left {
  flex: 1;
}

footer p {
  color: white;
  margin: 0;
}

.footer-container {
  width: 80%;
  margin: 0 auto;
  padding: 1.5rem 0;
  display: flex;
  gap: 2.5rem;
}

#footer-menu {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 1rem;
  justify-content: flex-end;
}

#footer-menu > li > a,
#footer-menu > li > a:visited {
  font-family: var(--primary-font);
  color: white;
  text-decoration: underline;
  transition: 0.3s;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Home Page Styles*/
.home-hero-container {
  height: 31.25rem;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 10px solid var(--primary-color);
}

.hero-caption-container {
  display: flex;
  justify-content: end;
  width: 80%;
  margin: 0.38rem auto 0;
  text-align: end;
}

#home-intro-block h1,
#home-intro-block h3 {
  text-align: center;
}

#home-intro-block h3 {
  color: var(--primary-color);
}

#home-intro-block {
  margin-bottom: 4rem;
}

#index .cta-callout-block-container {
  max-width: 63.625rem;
  margin: 0 auto;
}

#home-intro-block .callout-content h3 {
  color: var(--copy-text-grey);
  text-align: left;
}

/* Homepage My Benefits Block */
.mybenefits-block-wrapper {
  background-color: var(--bg-gray);
}

.mybenefits-block-container {
  width: 80%;
  margin: 0 auto;
}

.mybenefits-heading {
  padding-top: 3rem;
  text-align: center;
}

.mybenefits-grid {
  padding: 2.5rem 0;
  display: grid;
  gap: 5rem;
  grid-template-columns: repeat(4, 1fr);
}

.mybenefits-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mybenefits-item * {
  margin: 0;
}

.mybenefits-icon-container {
  width: 3.75rem;
  height: 3.75rem;
  display: flex;
}

.mybenefits-item a {
  margin-top: auto;
  padding-top: 1rem;
}

.mybenefits-block-footer-wrapper {
  border-top: 1px solid var(--primary-color);
}

.mybenefits-block-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.62rem;
  padding: 1.5rem;
}

.mybenefits-block-footer h5 {
  margin: 0;
}

/* Homepage Footer Callout Block */
.footer-callout-container {
  max-width: 60rem;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 3rem;
}

.footer-callout-icon {
  display: flex;
  align-items: center;
  padding: 2rem 3rem;
  flex: none;
}

.footer-callout-container h2 {
  margin: 0;
  margin-bottom: 0.5rem;
}

.footer-callout-container p {
  margin: 0;
  margin-bottom: 1.5rem;
}

.footer-callout-container a {
  margin-top: auto;
}

.footer-callout-content {
  display: flex;
  flex-direction: column;
}

/* Page Styles */
.hero-container {
  display: flex;
  min-height: 26rem;
}

.hero-container a {
  color: var(--alert-blue);
}

.hero-left-container,
.hero-right-container {
  display: flex;
  flex: 1;
}

.hero-left-container {
  background-color: var(--hero-content-bg);
  align-items: center;
}
.hero-right-container {
  background-color: var(--hero-content-bg);
}

.hero-content-wrapper {
  padding: 7.5rem 6.75rem;
}

.hero-content-wrapper * {
  color: white;
}

.hero-content-wrapper h1 {
  margin: 0;
  margin-bottom: 1.5rem;
}

.hero-content-wrapper p {
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-weight: 600;
}

.hero-right-container img {
  width: 100%;
  object-fit: cover;
}

/* No sidebar page styles */
.page-template-template-page-no-sidebar .page-inner {
  width: 60%;
}

/* Benefits Section Pages */
.page-template-template-benefits-section h1 {
  color: var(--primary-color);
}
.page-template-template-benefits-section .intro-container {
  width: 80%;
}
.page-template-template-benefits-section .resource-card-grid {
  margin-top: 3.75rem;
}

/* Benefits Page Styles */
.page-grid {
  display: grid;
  grid-template-columns: 70% 1fr;
  grid-gap: 4rem;
}

/* Contacts Page Styles */
#contacts h2 {
  color: var(--primary-color);
  margin-top: 4rem;
}

#contacts .page-inner {
  padding-top: 0;
}

#contacts .contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#contacts .contact-item * {
  margin: 0;
}

#contacts .contact-item:not(:last-child) {
  margin-bottom: 1.5rem;
}

.contact-item .phone-container a {
  color: unset;
  font-weight: unset;
}
.contact-item .footnote p {
  font-size: 0.75rem;
  line-height: 1.125rem;
}

#contacts .benefits-accordions-wrapper {
  display: flex;
  gap: 2.5rem;
}

#contacts .benefits-accordions-col {
  width: 50%;
}

/* Resources Page Styles */
#resources .resource-tiles-block-container {
  padding-top: 0;
}

/* Sidebar Styles */
.sidebar-inner {
  background-color: var(--bg-gray);
  border-radius: 1rem;
}

.sidebar-inner > div {
  padding: 2rem;
}

.sidebar-inner > div:not(:first-child, .sidebar-badges) {
  border-top: 3px solid var(--primary-color);
}

.sidebar-contacts .contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--gray-one);
}

.sidebar-contacts .contact-item h6 {
  margin: 0;
}

.sidebar-contacts .contact-item .phone,
.sidebar-contacts .cta.sm {
  color: unset;
}

.sidebar-resources a,
.sidebar-related-pages a {
  color: var(--primary-text);
  font-family: var(--secondary-font);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.375rem;
}

/* Adds Arrow to button with cta class */
.sidebar-related-pages a:after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  background-color: var(--adt-blue);
  mask-image: url("/wp-content/uploads/Arrow.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align: middle;
}

/* Adds Arrow icon to internal links in resources sidebar and recource block tiles */
.sidebar-resources .resource-link.internal::after,
.sidebar-resources .resource-link::after,
span.link-cta.internal::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  background-color: var(--adt-blue);
  mask-image: url("/wp-content/uploads/Arrow.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align: middle;
}
span.link-cta.internal::after {
  margin-top: 0.2rem;
}

/* Adds external link icon to external links in resources sidebar and recource block tiles */
.sidebar-resources .resource-link.external::after,
.sidebar-resources .resource-link[href^="http"]::after,
span.link-cta.external::after {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.5rem;
  background-color: var(--adt-blue);
  mask-image: url("/wp-content/uploads/External-Link.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align: baseline;
}

/* Adds PDF icon to pdfs in resources sidebar and recource block tiles */
.sidebar-resources .resource-link.pdf::after,
.sidebar-resources .resource-link[href$="pdf"]::after,
span.link-cta.pdf::after,
.documents-and-legal-container a[href$="pdf"]::after {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 1rem;
  margin-left: 0.5rem;
  background-color: var(--adt-blue);
  mask-image: url("/wp-content/uploads/Pdf.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align: text-bottom;
}

/* Adds play icon to videos in resources sidebar and recource block tiles */
.sidebar-resources .resource-link.video::after,
.sidebar-resources .resource-link[href*="flimp.live"]::after,
.sidebar-resources .resource-link[href*="vimeo"]::after,
.sidebar-resources .resource-link[href$="mp4"]::after,
span.link-cta.video::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  background-color: var(--adt-blue);
  mask-image: url("/wp-content/uploads/Video.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align: text-bottom;
}

/* Adds presentation icon to presentations in resources sidebar and recource block tiles */
.sidebar-resources .resource-link.presentation,
.sidebar-resources .resource-link[href*="brainshark.com"]::after,
span.link-cta.presentation::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  background-color: var(--adt-blue);
  mask-image: url("/wp-content/uploads/Presentation.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align: text-bottom;
}

.sidebar-inner .sidebar-badges {
  display: flex;
  justify-content: center;
  padding-top: 0;
}

.sidebar-inner .sidebar-badges img {
  max-width: 10rem;
}

/* Puerto-Rico Page Styles */
.sidebar-contacts.puerto-rico .contact-item * {
  margin: 0;
}
.table-wrapper + h6 {
  margin-top: 2.25rem;
}

/* Resources Page Styles */
.documents-and-legal-container h2 {
  margin-bottom: 2.25rem;
}
.documents-and-legal-container .accordion:first-of-type {
  border-top: 1px solid var(--gray-one);
}
.documents-and-legal-container .resource-items-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  column-gap: 2.5rem;
}

.documents-and-legal-container .resource-item a {
  color: var(--primary-text);
  font-family: var(--secondary-font);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.375rem;
}

/* #summary-plan-description-spd ~ .accordion-content .resource-items-container {
  display: grid;
} */
#forms-and-legal-notices ~ .accordion-content .resource-items-container,
#paid-family-leave-notices ~ .accordion-content .resource-items-container,
#summary-of-benefits-and-coverage-sbcs
  ~ .accordion-content
  .resource-items-container,
#dental-dmo-plans ~ .accordion-content .resource-items-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
}

#forms-and-legal-notices ~ .accordion-content .resource-items-container {
  grid-template-rows: repeat(6, auto);
}
#paid-family-leave-notices ~ .accordion-content .resource-items-container {
  grid-template-rows: repeat(6, auto);
}
#summary-of-benefits-and-coverage-sbcs
  ~ .accordion-content
  .resource-items-container {
  grid-template-rows: repeat(6, auto);
}
#dental-dmo-plans ~ .accordion-content .resource-items-container {
  grid-template-rows: repeat(18, auto);
}

/* Medical and Prescription Drugs Page Styles */

#medical-and-prescription-drug .resource-card .card-content h3 {
  margin-top: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.875rem;
}
#medical-and-prescription-drug .resource-tiles-block-container {
  padding-top: 1rem;
  padding-bottom: 2.5rem;
}

/***** Search Results Page *****/
.search-grid {
  display: grid;
  grid-template-columns: 65% 1fr;
  grid-gap: 2rem;
}
#search .search-results-container {
  max-width: 50rem;
  margin: 0 auto;
}
#search .search-results-container .heading {
  border-bottom: 2px solid var(--alert-blue);
}
#search .search-item {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--strength-gray);
}

#search .search-item .page-title.pdf {
  display: flex;
  align-items: center;
  width: max-content;
}
mark.searchwp-highlight {
  background: transparent;
}
p mark.searchwp-highlight {
  font-weight: 600;
}
h5 mark.searchwp-highlight {
  color: var(--adt-blue);
}

#search .search-item .page-title.pdf::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  background-color: var(--adt-blue); /* Inherit text color */
  mask-image: url("/wp-content/uploads/Pdf.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align: middle;
}

header #searchform {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.nav-search-form-container {
  display: flex;
}

#searchform > div {
  width: 1rem;
  display: flex;
  align-items: center;
}

#searchform > div::before {
  content: "";
  position: absolute;
  background: url(/wp-content/uploads/Magnifying-Glass.svg) no-repeat center;
  width: 1.3rem;
  height: 1.3rem;
  /* padding-left: 3rem; */
  cursor: pointer;
}

#searchform > div .search-field {
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  margin: 0;
  border-radius: 18.75rem 0rem 0rem 18.75rem;
  /* border: 1px solid var(--adt-blue); */
  border: none;
  font-family: var(--primary-font);
  color: var(--primary-text);
}

#searchform .search-submit {
  display: none;
  border: none;
  border-radius: 0rem 18.75rem 18.75rem 0rem;
  padding: 0.5rem 1rem;
}
#searchform.search-expanded > div {
  width: 100%;
}
#searchform.search-expanded > div .search-field {
  border: 1px solid var(--adt-blue);
}
#searchform.search-expanded .search-submit {
  display: block;
}
#searchform.search-expanded > div::before {
  padding-left: 3rem;
}
.search-close-container {
  display: none;
}
.search-close {
  padding-left: 0.75rem;
}
.header-right.search-expanded .search-close-container {
  display: flex;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}
.pagination-prev,
.pagination-current,
.pagination-next {
  display: flex;
}
.pagination-current {
  margin: 0 1.5rem;
}

/* Login Page */
#login {
  background-color: var(--bg-gray);
}
#login .login-card-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 12vh;
}
#login .login-card * {
  margin: 0;
}
#login .login-card {
  background-color: white;
  border-radius: 1rem;
  box-shadow: var(--buck-kit-shadow);
  max-width: 26.5rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
#login .login-card img {
  width: 12.5rem;
  align-self: center;
}
#login .login-card h3 {
  text-align: center;
  margin-bottom: 0;
}
#login .login-card form {
  display: flex;
  flex-direction: column;
}
#login .login-card label {
  margin-bottom: 0.25rem;
}
#login .login-card input {
  margin-bottom: 1.25rem;
}
#login .login-card button {
  margin-bottom: 1.25rem;
}
#login .login-card h6 {
  margin-bottom: 0.5rem;
}
#login .login-card p.error {
  display: none;
  font-size: 0.75rem;
  line-height: 1.125rem; /* 150% */
  color: var(--error-red);
  margin-bottom: 0.5rem;
}

/***** Component Specific Styles *****/

/* Resource Cards */
.resource-tiles-block-container {
  padding: 3.75rem 0;
}
.resource-grid-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}
.resource-grid-heading h2 {
  margin: 0;
}
.resource-grid-heading a {
  margin-top: auto;
}

.resource-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
}

.resource-card {
  display: flex;
  background-color: var(--bg-gray);
  border-radius: 1.5rem;
  text-decoration: none;
  min-height: 13.5rem;
  border: 2px solid transparent;
}
a.resource-card,
a:hover.resource-card {
  text-decoration: none;
  font-weight: unset;
  color: unset;
}

a:hover.resource-card.solid {
  border: 2px solid var(--adt-blue);
}

.resource-card .card-content {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
}

.resource-card .card-content span {
  margin-top: auto;
  display: flex;
  align-items: center;
}
.resource-card:not(.wire) .card-content span {
  color: var(--primary-text);
}

.resource-card.wire {
  background-color: white;
  border-radius: 1.5rem;
  border: 2px solid var(--secondary-color);
  border-right-width: 2rem;
}

.resource-card.wire:hover {
  border-color: var(--primary-color);
}

.resource-card.wire .card-content a {
  color: var(--primary-color);
}

/* Care Cards */
.care-cards-block-container {
  margin-top: 4rem;
}
.care-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.25rem;
}

.care-card {
  display: flex;
  flex-direction: column;
  padding: 2.25rem;
  background-color: var(--bg-gray);
  border-radius: 1.5rem;
  text-decoration: none;
}
.care-card .card-icon-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.care-card h5 {
  text-align: center;
  margin-bottom: 1rem;
}
.care-card li {
  margin-bottom: 0.25rem;
}
.care-card .value-icons-container {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: auto;
}

/* Accordion Styles */
.accordion {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--gray-one);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.accordion:first-child {
  border-top: 1px solid var(--gray-one);
}

.accordion-label {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
}

.accordion-label.active {
  color: var(--primary-color);
}

.accordion-label:after {
  content: "";
  display: flex;
  align-items: center;
  width: 1rem;
  height: 1rem;
  background-color: var(--primary-text); /* Inherit text color */
  mask-image: url("/wp-content/uploads/Large-angle-down.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: 0.3s;
  min-width: 1rem;
  margin-left: 0.5rem;
}

.accordion-label.active:after {
  transform: rotate(180deg);
}

.accordion-content {
  display: none;
}

/* Tables */

.table-wrapper {
  overflow-x: auto;
  width: 100%;
  margin: 1rem 0;
}

table {
  /* margin: 1rem 0; */
  min-width: 100%;
  border-collapse: collapse;
}
table,
table p {
  font-family: var(--primary-font);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

table p {
  margin: 0;
}

th,
th p {
  color: var(--primary-color);
  font-family: var(--primary-font);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

thead tr {
  border-bottom: 2px solid var(--copy-text-gray);
}

tbody tr {
  border: 1px solid var(--bg-gray);
}

td,
th {
  min-width: 7.75rem;
}

td {
  padding: 0.75rem;
}
th {
  padding: 0.38rem 0.75rem;
  vertical-align: bottom;
}
td:first-child,
th:first-child {
  padding-left: 1.5rem;
  text-align: left;
}
td:not(:first-child),
th:not(:first-child) {
  text-align: center;
}

table ul {
  text-align: left;
}

td ul:last-child {
  margin-bottom: 0;
}

table li {
  margin-bottom: 0.38rem;
}
table tr.vertical-align-top td {
  vertical-align: top;
}

tbody tr:nth-of-type(odd) {
  background-color: var(--bg-gray);
}
tbody tr.highlight-row {
  background-color: var(--gray-two);
}

tr.highlight-row td,
tr.highlight-row p {
  color: var(--promo-text-black);
}

/* Tooltips */
.tooltip {
  position: relative;
  cursor: pointer;
}
.tooltiptext {
  display: none;
  position: absolute;
  bottom: 100%;
  /* left: -0.5rem; */
  background-color: var(--copy-text-gray);
  border-radius: 0.375rem;
  padding: 0.5rem;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.125rem; /* 150% */
  width: 250px;
  text-align: center;
}

/***** Break Points *****/
.mobile {
  display: none;
}
@media only screen and (max-width: 1024px) {
  .mobile {
    display: revert;
  }
  .desktop {
    display: none;
  }
  .mybenefits-grid,
  .resource-card-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.5rem;
  }
  .page-inner,
  .page-template-template-page-no-sidebar .page-inner {
    width: 90%;
  }
  .breadcrumbs {
    width: 90%;
  }
  .hero-caption-container {
    width: 90%;
    margin-bottom: 0.38rem;
  }
  .home-hero-container,
  .hero-container .hero-right-container img {
    height: 20rem;
  }
  .hero-container {
    flex-direction: column;
  }
  .hero-container .hero-right-container {
    order: -1;
  }
  .hero-container .hero-content-wrapper {
    padding: 3rem;
  }

  .page-grid {
    grid-template-columns: 100%;
  }
  .footer-callout-container {
    width: 90%;
    padding: 3rem 0;
  }
  footer .footer-container {
    display: block;
  }
  footer .footer-left p {
    text-align: center;
  }

  #footer-menu {
    justify-content: center;
  }

  #forms-and-legal-notices ~ .accordion-content .resource-items-container,
  #paid-family-leave-notices ~ .accordion-content .resource-items-container,
  #summary-of-benefits-and-coverage-sbcs
    ~ .accordion-content
    .resource-items-container,
  #dental-dmo-plans ~ .accordion-content .resource-items-container {
    display: flex;
  }

  #contacts .benefits-accordions-wrapper {
    display: block;
  }
  #contacts .benefits-accordions-col {
    width: 100%;
  }
  #contacts
    .benefits-accordions-col:not(:first-of-type)
    .accordion:first-child {
    border-top: none;
  }
}

@media only screen and (max-width: 768px) {
  h1 {
    font-size: 2.375rem;
  }
  .mybenefits-grid,
  .resource-card-grid,
  .care-card-grid {
    grid-template-columns: 100%;
  }
  .callout-box {
    min-width: 100%;
  }

  .hero-container .hero-content-wrapper {
    padding: 2rem 1.5rem;
  }

  /* Tabs */
  .tab-titles-container {
    flex-direction: column;
    gap: 0.5rem;
  }
  .tab-title {
    border: 1px solid var(--adt-blue);
    border-radius: 0.25rem;
  }
  .tab-title p {
    text-align: center;
  }
}

@media only screen and (max-width: 479px) {
  .resource-tiles-block-container .resource-grid-heading {
    display: block;
  }
  .cta-callout-block-container {
    display: block;
  }
  .cta-callout-block-container > * {
    text-align: center;
  }
  .cta-callout-block-container .callout-cta {
    justify-content: center;
    margin-top: 1rem;
  }
  .home-hero-container,
  .hero-container .hero-right-container img {
    height: 15rem;
  }
  .mybenefits-block-footer {
    display: block;
  }
  .footer-callout-container {
    flex-direction: column;
    align-items: center;
  }
  .footer-callout-container > * {
    text-align: center;
  }
}