/* TYPOGRAPHY */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li, .a,
header,
footer,
main,
section,
article,
input,
textarea,
select,
option {
	font-family: 'Lato';
	color:#383838;
}
p, ul, ol {
	margin-bottom: 1rem;
}
a, 
.a {
	font-size:1rem;
	font-family: 'Lato';
}
a:not(.btn) {
	text-decoration: underline;
	text-underline-offset: 4px;
}
h1 {
	font-size: 2.75rem !important;
	line-height:3rem;
	font-weight: 700;
	margin-top:0;
	margin-bottom:0.75rem;
	color: var(--Teal-90);
}
html {
	scroll-behavior: smooth;
}
ul {
	padding-left: 30px;
	font-size: 1rem;
}
ol {
	padding-left: 1rem;
}

/* List Styling */
.alpha-list {
	list-style-type: lower-alpha; /* a, b, c */
	font-size: 16px;
	padding-left: 20px;
}

.alpha-list li::marker {
	content: '(' counter(list-item, lower-alpha) ') ';
}

.alpha-list li span {
	margin-left: 0.5rem;
}

ul:not(.nav) {
	font-size: 16px;
	padding-left: 18px;
}

/* body background */
body {
		background-color:#fafafa;
	}
body[data-sitemap-state='/'] {
	background-position:top right; 
	background-repeat: no-repeat; 
	background-image:url('../landing-background.png');
}
/** Navigation **/
/* Dropdown Styles */
.dropdown-menu,
.user-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	background: white;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	min-width: 200px;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s ease !important;
	padding: 2rem 1.5rem;
}

.dropdown-menu.show,
.user-dropdown.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.user-dropdown {
	right: 0;
	left: auto;
}

.navbar-brand {
	text-decoration: none !important;
	padding-left:0;
	margin-left:0 !important;
}
.nav .nav-item .nav-link#user-profile {
	padding-right:0;
	margin-right:0;
}

/* Modals */
/* support no-scroll when modal open */
.body--no-scroll {
  overflow: hidden;
}
.modal h4 {
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}
.privacy-overlay {
	backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Tags & Dots */
@media screen and (min-width: 820px) {
	.tag {
		font-weight: 700;
	}
}
.tag {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
}
.tag.inactive {
  color: #560B06;
  background-color: var(--Red-50);
}
.tag.active {
  color: #044E2B;
  background-color: var(--Green-50);
}
.tag.pending {
  color: var(--Grey-130);
  background-color: var(--Grey-50);
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.dot.sent {
  background-color: var(--Orange-40);
}
.dot.not-sent {
  background-color: var(--Grey-60);
}
.dot.cancelled {
  background-color: var(--Red-70);
}
.dot.redeemed {
  background-color: var(--Green-70);
}



/* User List Table Styles */
.responsive-table {
  border-collapse: collapse;
  overflow: auto;
  table-layout: auto;
}

.responsive-table th,
.responsive-table td {
  white-space: nowrap;
}

.user-list .responsive-table td {
  height: 80px;
}

.user-list .responsive-table th {
  height: 60px;
}

.user-list .responsive-table th > div {
  display: flex;
  justify-content: space-between;
}

.user-list tr {
  transition: all 0.25s;
}

.user-list .sort-order {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  gap: 0.5rem;
}

.user-list [data-sort-order="desc"] .sort-order svg:last-child {
  display: none;
}

.user-list [data-sort-order="asc"] .sort-order svg:first-child {
  display: none;
}

.table-cell-flex {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.table-cell-flex.flex-column {
  flex-direction: column;
  gap: 0rem;
  align-items: flex-start;
}

#invite-status-wrapper.flex-column,
#invite-status-wrapper .table-cell-flex.flex-column {
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.table-container {
  width: 100%;
  overflow-x: auto;
  position: relative;
}

.table-container.user-list tr td:nth-child(5) {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.table-container button:not(.modal-close), button [type=submit] {
  margin-right: 0px;
}

.table-container.user-list table tbody tr td {
  padding: 1em 1.5em;
}

.table-container.user-list table tbody tr td:first-child {
  padding: 0;
  padding-left: 0.75rem;
  width: 24px;
}

th.sticky,
td.sticky {
  position: sticky;
  left: 0;
  z-index: 5;
}

th.sticky {
  background-color: var(--Teal-90);
}

tr:nth-child(2n + 1) td.sticky {
  background: var(--White);
}

tr:nth-child(2n + 2) td.sticky {
  background: var(--Grey-30);
}

td.user-name.sticky {
  left: 50px;
}

td.user-name.sticky::after {
  content: '';
  position: absolute;
  border-right: 1px solid var(--Grey-80);
  right: 0px;
  width: 2px;
  height: 100%;
  top: 0;
}
th#user-name-header.sticky {
  left: 50px;
}

th#edit-header {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  border: none !important;
}
th#edit-header::after {
  content: '';
  position: absolute;
  border-right: 1px solid var(--White);
  right: 0px;
  width: 2px;
  height: 80px;
  top: 0;
}
th#user-name-header::after {
  content: '';
  position: absolute;
  border-right: 1px solid var(--White);
  right: 0px;
  width: 2px;
  height: 80px;
  top: 0;
}

th#user-name-header {
  width: 335px;
  min-width: 335px;
  max-width: 335px;
  border: none !important;
}

th#user-role-header {
  width: 300px;
}

th#account-status-header {
  min-width: 190px;
}

th#invitation-status-header {
  width: 285px;
}

th#last-login-header {
  width: 170px;
}

td.user-name span:first-child {
  font-weight: 700;
  text-wrap: wrap;
}

td.user-name span:last-child {
  margin-top: -3px;
  text-wrap: wrap;
}

#table-no-results {
    width: 100%;
    background-color: var(--White);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    display: none;
}
/* Buttons for EDIT */
button:not(.modal-close).secondary.edit-button, button [type=submit].secondary.edit-button {
  padding: 0.5rem;
  background-color: rgba(0,0,0,0);
  border: 1px solid rgba(0,0,0,0);
}
button:not(.modal-close).secondary.edit-button:hover, button [type=submit].secondary.edit-button:hover {
  background-color: var(--White);
  border: 1px solid var(--Teal-90);
}

/* User List Filters */
.user-filters {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 1rem;
  position: relative;
}
.user-filters svg {
  margin-right: 0.5rem;
}
.user-filters button:not(.modal-close).primary svg path, button [type=submit].primary svg path {
  fill: none;
}
.user-filters button:not(.modal-close).secondary svg path, button [type=submit].secondary svg path {
  fill: none;
}
.filter-close {
  background-color: rgba(0,0,0,0);
  position: absolute !important;
  top: 20px;
  right: 1rem;
  margin-right: 0px !important;
}
.search-input-container {
  position: relative;
}
.search-input-container > svg {
  position: absolute;
  right: 18px;
  top: 20px;
}
#contact-search {
  width: 280px;
}
#filters {
  position: absolute;
  top: 55px;
  right: 156px;
  background-color: white;
  display: none;
  flex-direction: column;
  width: 360px;
  z-index: 10;
  padding: 2rem 3rem;
  box-shadow: 0 2px 2px -1px rgba(19, 19, 19, 0.04), 0 4px 6px -2px rgba(19, 19, 19, 0.03), 0 12px 16px -4px rgba(19, 19, 19, 0.08);
}
#filters h4 {
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 0px;
}
#filters .scrollable {
  max-height: 350px;
  overflow-y: scroll;
  margin-bottom: 1.5rem;
}
#filters input[type=checkbox], #filters input[type=radio] {
  margin: 0 0.5rem 0 0;
}
#filters label {
  margin-bottom: 0px;
}
#filter-buttons > button {
  width: 50%;
}

/* Custom Select - Not an input */
.custom-select {
  position: relative;
  display: inline-block;
  width: 95%;
  font-family: inherit;
}

.select-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid var(--Grey-90);
  border-radius: 5px;
  padding: 8px 12px;
  margin-top: 0.5rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.select-display:hover {
  border-color: var(--Grey-130);
}

.custom-select .chevron {
  width: 24px;
  height: 24px;
  margin-right: -5px;
  transition: transform 0.2s ease;
}

.custom-select.open .chevron {
  transform: rotate(180deg);
}

.select-options {
  list-style-type: none !important;
  padding: 0 !important;
  border: 1px solid #ccc;
  background: #fff;
  overflow: hidden;
  display: block;
  height: 0px;
  opacity: 0;
  margin: -5px 0px 0px 0px !important;
}

.custom-select.open .select-options {
  display: block;
  list-style-type: none;
  padding-left: 0px;
  padding-left: 0px;
  margin-top: -5px;
  border-radius: 0px 0px 5px 5px;
  border: 1px solid #757575;
  height: auto;
  opacity: 1;
}
.custom-select.open .select-options li:last-child {
  padding-bottom: 0.5rem !important;
}

.select-options li {
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.select-options li:hover {
  background: #f0f8fa;
}

.select-options li.selected {
  background: #008193;
  color: #fff;
}

/* Mobile Styles */
.mobile-nav-toggle {
	display: none !important;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
}
.nav-item .radio-input label {
	font-size: 1rem !important;
	margin-bottom: 0px !important;
}
.nav-item .radio-input input[type='radio'] {
	width: 24px;
	height: 24px;
	margin-right: 0.75rem;
	margin-left: 0;
	margin-top: 0;
	accent-color: var(--Grey-130);
}
.nav-item .radio-input-group > div > label {
	font-size: 14px;
	color: var(--Grey-100);
}

.nav-item .radio-input-group .radio-input:first-of-type {
	margin-top: 1.5rem;
}
.nav-item .radio-input-group .radio-input {
	margin-bottom: 1.5rem;
}
.chevron svg path {
	fill: none !important;
}

/* Breadcrumbs */
#breadcrumbs-container {
	padding-bottom:24px;
}
#breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--Grey-130);
  font-size: 1rem;
}

#breadcrumb-link:hover {
  text-decoration: underline;
}

.breadcrumb-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* SITE GENERIC SHARED PARTS */
#privateModeText {
	display: none;
}
.navbar {margin-bottom:10px;}
.wrapper-body {
	padding: 4rem 0; 
	max-width: 1560px;
	margin: 0 auto;
	min-height: calc(100vh - 192px);
	position: relative;
}
body[data-sitemap-state='/'] .wrapper-body {
	padding: 4.5rem 0; 
}
.site-footer {
	margin-top:0;
}
.site-footer .container {
	max-width: 1560px;
	width:auto;
}
.site-footer .container div ul {
	display: flex;
	font-size: 14px;
	list-style-type: none;
	margin: 0;
}
.site-footer .container div ul li:first-child {
 padding-right:16px; border-right: 1px solid #adadad;
}
.site-footer .container div ul li a {
	margin-left:0;

}
.site-footer .container div ul li:last-child a {
	font-weight:700; 
	margin-left:0;
}
.site-footer .container div ul a {
	font-size: 14px;
	text-decoration:none;
}
.site-footer .container div ul a:hover {
	text-decoration:underline;
}
.site-footer .container div span {
	font-size: 14px;
	color: var(--Grey-50);
}

/* Accordion extensions */
.accordion-hint {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.accordion-hint p {
	margin-bottom: 0px;
}
.accordion-hint img {
	margin-bottom: 0px;
	background-color: var(--Teal-30);
	border-radius: 50%;
}
.colored-circle-teal {
	background-color: var(--Teal-30);
	border-radius: 50%;
}
.colored-circle-teal.small {
	width: 2rem;
	height: 2rem;
}



/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 2.5rem;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid var(--Teal-80);
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.5s ease, background-color 0.3s ease;
    z-index: 95;
  }
  .back-to-top:hover {
	background-color: var(--Teal-80);
  }
  .back-to-top:hover svg path {
	stroke: white;
  }

  .back-to-top.visible {
    opacity: 1;
    visibility: visible;
  }
  .back-to-top.at-bottom {
	bottom: calc(87px + 25px)
  }

.loader-spinner {
    position: relative;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border: 4px solid rgba(0,0,0,0);
    border-top: 4px solid var(--Teal-90);
    border-right: 4px solid var(--Teal-90);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

/* Animation classes */
.fade-enter {
	opacity: 0;
}

.fade-enter-active {
	opacity: 1;
	transition: opacity 0.3s ease;
}

.fade-exit {
	opacity: 1;
}

.fade-exit-active {
	opacity: 0;
	transition: opacity 0.3s ease;
}

@keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

/* SITE CONTENGT TYPES */
/* home page greeting */
#home-welcome {
	width: 100%;
	margin-bottom: 40px;
}



/* tool tiles */
.card-list {
	width: 100%;
	gap: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.card-list .card {
	border-radius: 0.5rem;
	background: var(--White, #fff);
	box-shadow: 0px 2px 4px -2px rgba(19, 19, 19, 0.04),
		0px 4px 8px -1px rgba(19, 19, 19, 0.08);
	padding: 1.5rem 1.5rem 4.75rem 1.5rem;
	width: 100%;
	height:100%;
	position:relative;
	margin:0;
}

.card-list .card .card-icon {
	display: block;
	margin-bottom: 32px;
}
.card-list .card .card-icon svg {
	width:56px;
	height:56px;
}
.card-list .card h4 {
	color: var(--Grey-Grey-130, #383838);
	font-family: Lato;
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 700;
	line-height: 22.4px;
	margin: 0 0 6px 0;
}
.card-list .card p {
	color: var(--Grey-Grey-110, #555);
	font-family: Lato;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 18.2px;
	margin-bottom: 40px;
}
.card-list .card p em {
	font-size:0.8125rem;
}
.card-list .card button.secondary {
	margin-right: 0; 
	position:absolute; 
	bottom:1.5rem;
	display: inline-block;
}
.card-list .card.disabled h4 {
	color: #999;
}
.card-list .card.disabled p {
	color: #999;
}
.card-list .card.disabled .tile-icon {
	opacity: 0.5;
}
.card-list .card button.secondary.launch:before {
	margin: 0 0.4rem -3px 0.4rem;
	display: inline-block;
	content: ' ';
	width: 1rem;
	height: 1rem;
	background-image: url("data:image/svg+xml,%0A%3Csvg width='20' height='21' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4682_5499)'%3E%3Cpath d='M13 8.15039V13.1504C13 13.7004 12.55 14.1504 12 14.1504H3C2.45 14.1504 2 13.7004 2 13.1504V4.15039C2 3.60039 2.45 3.15039 3 3.15039H8V2.15039H3C1.9 2.15039 1 3.05039 1 4.15039V13.1504C1 14.2504 1.9 15.1504 3 15.1504H12C13.1 15.1504 14 14.2504 14 13.1504V8.15039H13ZM15.5 0.650391V6.15039H14.5V2.36039L7.71 9.15039L7 8.44039L13.79 1.65039H10V0.650391H15.5Z' fill='%23383838'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4682_5499'%3E%3Crect width='16' height='16' fill='white' transform='translate(0 0.150391)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	background-repeat: no-repeat no-repeat;
	background-position: center center;
	background-size: contain;
}

/* Cards - User List */
.user-list.card-list .card {
  padding-top: 4.5rem;
  padding-bottom: 1.5rem;
  box-shadow: 0 2px 4px -2px rgba(19, 19, 19, 0.04), 0 4px 8px -1px rgba(19, 19, 19, 0.08);
  border-radius: 0.5rem;
}
.card-header-box {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0px;
  padding: 0.75rem;
  background: var(--Teal-20);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header-box button {
  background: rgba(0, 0, 0, 0);
  margin-right: 0px;
}
.card-user-details span:first-child strong {
  color: var(--Grey-130);
  font-weight: 700;
}
.card-user-details span:last-child {
  font-weight: 400;
  font-size: 14px;
  color: var(--Grey-130);
}
.card .contact-attributes {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-attribute {
  font-size: 14px;
  font-weight: 400;
}
label.contact-attribute {
  color: var(--Grey-100);
}
span.contact-attribute {
  color: var(--Grey-130);
}
.card-menu-wrapper {
  position: relative;
  display: inline-block;
}

.card-menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
}

.card-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  min-width: 210px;
  width: fit-content;
  display: none;
  opacity: 0;
  z-index: 10;
  transition: all 0.3s ease;
}

.card-menu.open {
  display: block;
  opacity: 1;
}

.card-menu-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  justify-content: flex-start !important;
  width: 100% !important;
  padding: 1.125rem 0.75rem !important;
}

.card-menu-item:hover, .card-menu-item:active {
  background: #f5f5f5;
  color: var(--Teal-90);
}

.user-list.card-list {
  display: none;
}
.user-list .card {
  display: none;
}

.user-list .card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
}

.user-list .card p {
  margin: 4px 0;
  font-size: 0.9rem;
}

/* Create/Update user */
    .StatusInactive {
        display: none;
    }
    .hide-on-update {
	    display: inline-block;
    }
    .show-on-update {
        display: none;
    }
    #sent-status {
        display: none;
    }
	#mympi-signin {
		flex-direction: row;
		gap: 1.5rem;
	}
	#mympi-signin > div {
		width: 50%;
	}
	#mympi-signin .text-input {
		margin-bottom: 0px !important;
	}
	#manage-user h4 {
		text-align:left;
	}
	#manage-user .text-input {
		max-width: 100%;
	}
	#user-details {
		gap: 0 1.5rem;
	}
	.button-container.centered {
		justify-content: center;
		margin-top: 2rem;
	}
    .checkbox-input-group .helper-text {
        margin-top: -0.5rem;
        margin-bottom: 1rem;
    }
    .columns-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }
    .columns-4 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 1rem;
    }
    #manage-user .columns-3 > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
	#manage-user .columns-4 > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
	#manage-user .show-on-update .columns-4 div:nth-child(3) {
		grid-column: span 2;
	}



    .success-check {
        position: absolute;
        display: none;
    }
    .success-check svg path {
        fill: none !important;
    }
    #changeEmailForm .text-input {
        max-width: 100%;
    }
    #changeEmail {
        max-width: 100%;
    }
    #changeSignInEmailModal .checkbox-input {
        max-width: 100%;
    }
	.change-link-container svg {
		min-width: 16px;
	}
    #change-link {
        padding: 0 !important;
        text-decoration: underline;
        text-underline-offset: 4px;
		text-align: left;
		line-height: 1.4rem;
		margin-right: 0px;
    }
	#change-linksection {
		gap:0.5rem;
	}

/* home feedback call to action */
body[data-sitemap-state='/'] #mainContent {padding-bottom:137px;}
#home-feedback {
	width:100%;
	padding: 2rem 0;
	border-top: 1px solid #dcdcdc; 
	position:absolute; 
	bottom:0;
	max-width:100%;
}
#home-feedback article {
	display: flex;
	align-items: center;
}
#home-feedback p {
	display: flex;
	margin: 0;
	align-items: center;
	color: var(--Grey-Grey-130, #383838);
	font-family: Lato;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 18.2px;
    flex-basis: calc(100% - 3rem);
}
#home-feedback span.icon-message {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	margin-right: 0.75rem;
	background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4680_5470)'%3E%3Cpath d='M9 10.6504H15' stroke='%23383838' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 13.6504H15' stroke='%23383838' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.49258 19.9399C9.38308 21.034 11.607 21.4033 13.7496 20.9789C15.8923 20.5544 17.8075 19.3652 19.1381 17.633C20.4687 15.9008 21.124 13.7438 20.9817 11.5641C20.8394 9.38449 19.9093 7.33097 18.3648 5.78644C16.8202 4.24191 14.7667 3.3118 12.5871 3.16952C10.4074 3.02723 8.2504 3.68249 6.51819 5.01311C4.78597 6.34374 3.59679 8.25892 3.17235 10.4016C2.74792 12.5442 3.11719 14.7681 4.21133 16.6586L3.03852 20.1602C2.99445 20.2923 2.98806 20.4341 3.02005 20.5697C3.05205 20.7053 3.12117 20.8293 3.21967 20.9278C3.31817 21.0263 3.44216 21.0954 3.57774 21.1274C3.71331 21.1594 3.85512 21.153 3.98727 21.1089L7.49258 19.9399Z' stroke='%23383838' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4680_5470'%3E%3Crect width='24' height='24' fill='white' transform='translate(0 0.150391)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	background-repeat: no-repeat no-repeat;
	background-position: center center;
	background-size: 24px 24px;
	background-color: #ddf8fc;
}
#home-feedback p a {
	color: var(--Green-Green-90, #107a48);
	font-family: Lato;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 18.2px;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}
#home-feedback p a:hover {
	color: var(--Grey-Grey-130, #383838);
}
#home-feedback p a:after {
	margin: 0 0.4rem -4px 0.4rem;
	display: inline-block;
	content: ' ';
	width: 1rem;
	height: 1rem;
	background-image: url("data:image/svg+xml,%0A%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4682_5499)'%3E%3Cpath d='M13 8.15039V13.1504C13 13.7004 12.55 14.1504 12 14.1504H3C2.45 14.1504 2 13.7004 2 13.1504V4.15039C2 3.60039 2.45 3.15039 3 3.15039H8V2.15039H3C1.9 2.15039 1 3.05039 1 4.15039V13.1504C1 14.2504 1.9 15.1504 3 15.1504H12C13.1 15.1504 14 14.2504 14 13.1504V8.15039H13ZM15.5 0.650391V6.15039H14.5V2.36039L7.71 9.15039L7 8.44039L13.79 1.65039H10V0.650391H15.5Z' fill='%23107A48'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4682_5499'%3E%3Crect width='16' height='16' fill='white' transform='translate(0 0.150391)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	background-repeat: no-repeat no-repeat;
	background-position: center center;
	background-size: contain;
}

/* Error Page */
#error img {
	margin-bottom:32px;
}
#error h1 {
	margin-bottom:27px;
}
#error p {
	margin-bottom:32px;
}
#error p.code {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 6px;
	background: #F0F0F0;
	width:auto;
	font-size:13px;
	font-weight:700;
}
#error p.secondary a {text-decoration: underline !important;}

#profileDropdown {
	display: none;
}
/* Invalid Token Page */
#invalid-token {
	display: none;
}

#invalid-token h1 {
	margin-bottom:27px;
}
#invalid-token p {
	margin-bottom:32px;
}
#invalid-token p.secondary a {text-decoration: underline !important;}

/* Loader Template */
 #pageLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(53, 64, 69, 0.30);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
  }

  #pageLoader .modal {
    height: auto !important;
    width: 84% !important;
    max-width: 380px !important;
    min-width: 267px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(--Grey-White, #FFF);
    box-shadow: 0 4px 4px -2px rgba(19, 19, 19, 0.04), 0 24px 48px -12px rgba(19, 19, 19, 0.18);
  }

  #pageLoader .modal h4 {
    margin-top: 1rem;
    margin-bottom: 0rem;
  } 

#emailVerificationCodeModal h4+p strong {
	text-transform:lowercase;
}

.component-loader__hidden {
	opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Change Password Article */
#change-password-instruction article {
	display:flex; 
	flex-wrap:wrap;
	align-items: flex-start;
}
#change-password-instruction article h1 {
	width:100%; 
	flex-basis:100%;
}
#change-password-instruction span.wrapper {
	width:50%;
	padding-right:20px;
	padding-bottom: 40px;
}
#change-password-instruction figure {
	width:50%;
	padding-left:20px;
	padding-bottom: 40px;
	font-size: 0.875rem;
}
#change-password-instruction img {
	background-image:url(/change-password-image-hint-desktop.png); 
	background-color:#f0f0f0;
	background-size:contain;
	background-repeat:no-repeat; 
	aspect-ratio: 874 / 650; 
	width:100%;
}
html[lang="fr-FR"] #change-password-instruction img {
	background-image:url(/change-password-image-hint-desktop-fr.png); 
}
/* Account Details */ 
#account-details-header p.secondary {
	margin-bottom:24px;
}
#account-details h4 {
	text-align:left;
}
div.tab-list {
  margin:40px 0;
  border-bottom:1px solid var(--Grey-60);
  position:relative;
}
div.tab-list button.tab {
  display:inline-block; 
  width:auto;
  text-decoration:none; 
  margin-right:40px;
  background:none;
  padding:0;
  border-radius: 0;
  border:none;
}  
div.tab-list button.tab svg {
	transition: all 0.3s;
}
div.tab-list button.tab svg path {
	stroke: var(--Grey-90);
}
div.tab-list button.tab svg rect {
	stroke: var(--Grey-90);
}
div.tab-list button.tab.active svg path {
	stroke: var(--Grey-130);
}
div.tab-list button.tab.active svg rect {
	stroke: var(--Grey-130);
}
div.tab-list button.tab svg:first-child {
	display:block;
}
div.tab-list button.tab svg:last-child {
	display:none;
	margin-left:1rem;
}
div.tab-list button.tab span.h4-style {
  color:var(--Grey-90);
}
div.tab-list button.tab.active {
  border-bottom:4px solid var(--Teal-90);
}
div.tab-list button.tab.active span.h4-style {
  color:var(--Teal-90);
}
.icon-title.desktop {
	display:none; 
	margin-bottom:24px;
}
.tab-pane {
  animation: fadeOut 0.3s ease-in-out forwards;
}  
.tab-pane.active {
  opacity: 1;
  animation: fadeIn 0.3s ease-in-out forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#user-email-fieldset {
  margin:40px 0;
}
#user-email-fieldset .text-input {
	margin-bottom:0;
}
.tab-pane hr {
	margin-top:1rem;
	margin-bottom:2.5rem;
	border-color: #dcdcdc;
}
.tab-pane .text-input {
  position:relative;
  max-width:100%;
}
.tab-pane .text-input label {
  display:flex; 
  align-items:center;
}
.tab-pane .text-input label svg {
  margin-left:0.5rem;
  margin-right:0 !important;
  cursor:pointer;
}
.tab-pane .text-input label .tooltip-icon-wrapper {
  display:inline-block;
  position:relative;
  padding:0;
  overflow:visible; 
  background:none;
}
.tab-pane .text-input .Tooltip {
  display:none;
  position:absolute;
  border-radius: 6px;
  border: 1px solid var(--Grey-30);
  padding-right:12px;
  top: auto;
  bottom: 02rem;
  right: auto;
  left: auto;
  width: 300px;
  color:#131313;
  margin-left: -18px;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.05625rem;
  box-shadow: 0 2px 4px -2px rgba(19, 19, 19, 0.04), 0 4px 8px -1px rgba(19, 19, 19, 0.08);
}
.tab-pane .text-input .Tooltip.active {
  display:inline-block;
}
.tab-pane .text-input .Tooltip .Tooltip-arrow {
  transform:rotate(0deg);
  top:auto;
  bottom:-5px;
}

.tab-pane .text-input .Tooltip.swing-right {
	left:calc(-50% - 100px);
}
.tab-pane .text-input .Tooltip.swing-right .Tooltip-arrow {
	right: 5px;
    left: auto;
}

#individual-account .icon-title.change-signin {
	align-items:center; 
	margin-top:0.5rem;
	margin-bottom:0;
	gap:0.5rem;
	line-height:1.4rem;
}
#individual-account .icon-title.change-signin a:hover {
	cursor:pointer;
}
#account-details .info-flag {
	margin-bottom:40px; 
}
/* act details modals */
#changeEmailSignIn .button-container {
	flex-direction: row-reverse;
	justify-content: flex-start;
}
#changeEmailSignIn .button-container button {
	margin-left: 1.25rem;
}
#changeEmailSignIn .text-input, 
#changeEmailSignIn .checkbox-input {
	max-width:100%;
}
#changeEmailSignIn .checkbox-input label {
	width:calc(100% - (24px + 1rem));
	margin-left:1rem
}
#verificationCode {
	text-transform:lowercase;
}

.mobile-only {
  display: none;
}
.desktop-only {
	display: inline;
}

/* MEDIA QUERIES */
@media only screen and (max-width: calc(1560px + 10rem)) {
	.wrapper-body, 
	.site-footer .container {
		margin-left:5rem; 
		margin-right:5rem; 
	}
	.navbar {
		padding:1rem 5rem;
	}
}
@media only screen and (max-width: 1279px) {
	.card-list .card h4 {
		font-size:1rem;
		margin-bottom:4px;
	}
	.card-list .card .card-icon svg {
		width:44px;
		height:44px;
	}
	.card-list .card .card-icon {
		margin-bottom: 20px;
	}
	.wrapper-body, 
	.site-footer .container {
		margin-left:2.5rem; 
		margin-right:2.5rem; 
	}
	.navbar {
		padding:1rem 2.5rem;
	}
}
@media only screen and (max-width: 1040px) {
	.card-list {
		grid-template-columns: 1fr 1fr;
	}
}
@media only screen and (max-width: 910px) {
	.wrapper-body {
		padding: 3rem 0;
	}
	body[data-sitemap-state='/'] .wrapper-body {
		padding: 4rem 0;
	}
	h1 {
		font-size:  2rem !important;
		line-height: 2.1875rem;
		margin-top:0;
		margin-bottom: 0.75rem;
	}
	.card-list .card button.secondary {
		width: calc(100% - 3rem);
	}
}
@media (max-width: 820px) {
	.table-container,
	.responsive-table {
		display: none;
	}
	.user-list.card-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;    
	}
	.table-cell-flex {
		gap: 0.5rem;
	}
	#mympi-signin {
            flex-direction: column;
			gap: 1.5rem;
        }
        #mympi-signin > div {
            width: 100%;
        }
		#mympi-signin > div p {
			margin-bottom: 0px;
		}
        .columns-3 {
            grid-template-columns: 1fr 1fr;
        }
        .columns-4 {
            grid-template-columns: 1fr 1fr;
        }
	.mobile-only {
    	display: block;
  	}
	.desktop-only {
		display: none;
	}
	#manage-user .show-on-update .columns-4 div:nth-child(3) {
		grid-column: 1
	}
}
@media only screen and (min-width: 769px) {
	.mobile-language-switcher {
		display: none !important;
	}
	#close-nav {
		display: none !important;
	}
	.chevron-right-mobile {
		display: none !important;
	}
}
@media only screen and (max-width: 768px) {
	.nav {
		background: white;
		position: relative !important;
		padding-top: 0px !important;
	}
	.navbar .container {
		padding: 0px !important;
	}
	#main-nav > .nav-item.has-children {
		display: none;
		justify-content: flex-end;
	}
	.nav .nav-item .user-dropdown .nav-item {
		margin-right: 0px;
	}
	.nav .nav-item .user-dropdown {
		top: 0% !important;
		left: 0% !important;
	}
	.navbar-brand {
		padding: 0px !important;
	}
	.desktop-language-switcher {
		display: none !important;
	}
	.profile-menu .chevron {
		display: none !important;
	}
	#user-profile {
		padding: 0 !important;
	}

	.mobile-nav-toggle {
		display: block !important;
		z-index: 1002;
	}

	.user-dropdown {
		position: fixed !important;
		top: 0;
		right: 0;
		height: 100vh;
		width: 100vw;
		background: white;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
		z-index: 1100;
		overflow-y: auto;
		padding: 2rem 1rem;
	}

	.user-dropdown.show {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
	}
	#close-nav {
		position: absolute;
		right: -10px;
		background: none;
		top: 17px;
		z-index: 10;
	}
	.nav .nav-item .user-details {
		padding: 1.5rem 0rem !important;
	}
	.signout-button {
		position: absolute !important;
		bottom: 32px;
		right: 24px;
		left: 24px;
		margin-right: 24px;
		width: -webkit-fill-available !important;
	}
	.chevron-right-mobile {
		transform: rotate(270deg);
		margin-right: 0px !important;
		margin-bottom: 0px !important;
	}
	.chevron-right-mobile svg {
		margin-right: 0px !important;
		margin-bottom: 0px !important;
	}

	.radio-input-group {
		padding: 1rem 0;
	}
	.nav {
		flex-direction: row !important;
		justify-content: flex-end;
		align-items: center;
	}
	.nav .nav-item {
		width: auto !important;
	}
	.nav .alert-active {
		margin-right: 1rem;
	}
	#change-password-instruction span.wrapper,
	#change-password-instruction figure {width:100%; padding:0 0 40px 0;}
	.back-to-top.at-bottom {
		bottom: calc(87px + 25px);
  	}
	div.tab-list {
		border-bottom:0;
		margin: 0 0 40px 0;
	}
	div.tab-list button.tab {
		width:100%;
		display:block;
		margin:0;
		padding:0;
		border: 1px solid var(--Grey-60);
		background: var(--White);
	}
	div.tab-list button.tab:hover {
		outline: 2px solid var(--Teal-80);
		width:calc(100% - 2px);
		margin-left:1px;
	}
	div.tab-list button.tab.active:hover {
		outline:none;
	}
	div.tab-list button.tab.active {
		border: 1px solid var(--Teal-90);
		background: var(--Teal-30);
	}
	div.tab-list button.tab:first-child {
		border-radius: 4px 4px 0 0;
	}
	div.tab-list button.tab:last-child {
		border-radius: 0 0 4px 4px;
	}
	div.tab-list button.tab.active:first-child {
		margin-bottom:-1px;
	}
	div.tab-list button.tab.active:last-child {
		margin-top:-1px;
	}
	div.tab-list button.tab.active + button.tab {
		border-top:1px solid var(--Teal-90);
	}
	div.tab-list button.tab span.h4-style {
		font-size:1rem; 
		font-weight:400;
		color:var(--Grey-130);
	}
	div.tab-list button.tab.active span.h4-style {
		color:var(--Grey-130);
		font-weight:700;
	}
	div.tab-list button.tab svg:first-child {
		display:none;
	}
	div.tab-list button.tab.active svg:last-child {
		display:block; 
	}
	div.tab-list button.tab .icon-title {
		margin:0; 
		padding:0.75rem 1rem;
		justify-content: space-between;
	}
	.icon-title.desktop {
		display:flex;
	}
	.tab-pane .text-input .Tooltip {
		margin-left: 0;
	}
	.tab-pane .text-input .Tooltip.swing-right {
		margin-left: -18px;
	}
}
@media only screen and (max-width: 743px) {
	.wrapper-body {
        padding: 2.5rem 0;
    }
	body[data-sitemap-state='/'] .wrapper-body {
        padding: 2.5rem 0;
    }
	h1 {
		font-size: 1.5rem !important;
		line-height: 1.75rem;
		margin-top:0;
		margin-bottom:0.75rem
	}
	body[data-sitemap-state='/'] {
		background-image:none;
	}
	.wrapper-body,
	.site-footer .container {
		margin-left:1.5rem;
		margin-right:1.5rem;
	}
	.navbar {
		padding:1rem 1.5rem;
	}
	#home-feedback {
		border: none;
		padding: 0;
		margin: 32px 0 0 0;
		position:relative;
	}
	#home-feedback article {
		border-radius: 0.5rem;
		background-color: #f0f0f0;
		padding: 1rem 3.5rem 1rem 1rem;
	}
	#home-feedback p {
		flex-wrap: wrap;
	}
	#home-feedback p a {
		width: 100%;
		margin-bottom: 6px;
	}
	.card-list .card p {
		margin-bottom: 24px;
	}

	.card-list {
		grid-template-columns: 1fr;
	}
	.tab-pane .text-input .Tooltip {
		max-width:200px;
	}
	.tab-pane .text-input .Tooltip.swing-right {
		left: calc(-50% - 30px);
	}

}
@media only screen and (max-width: 600px) {
	#change-password-instruction img {
		background-image:url(/change-password-image-hint-mobile.png);
		aspect-ratio: 497 / 454;
	}
	html[lang="fr-FR"] #change-password-instruction img {
		background-image:url(/change-password-image-hint-mobile-fr.png);
	}
	.back-to-top.at-bottom {
		bottom: calc(130px + 25px);
  	}
	.user-list.card-list {
    	grid-template-columns: 1fr;
  	}
	#mympi-signin {
        gap: 1.5rem;
    }
	#filters {
		padding: 1.5rem;
		position: fixed;
		top: 0px;
		right: 0px;
		width: 100%;
	}
	#filters .scrollable {
		max-height: calc(100vh - 42px - 4.5rem - 3rem);
	}
	.search-input-container {
		width: 100%;
		margin-top: 1rem;
	}
	#contact-search {
		width: 100%;
	}
	.search-input-container > svg {
		right: 0px;
	}
	.user-filters {
		flex-wrap: wrap;
		margin-bottom: 2rem;
	}
	.user-filters > .primary {
		width: 100%;
		margin-top: 0.5rem;
	}
	.user-filters > .secondary {
		width: 100%;
		margin-right: 0px;
	}
	.pagination .page__container .pagination__input {
		margin-right: 1rem;
		margin-left: 0rem;
	}
	#next-page {
		margin-right: 0px;
	}
	#user-details.columns-2 {
		display: flex;
		flex-direction: column;
	}
	#manage-user .button-container{
		flex-direction: column-reverse;
		gap: 1rem;
	}
	#manage-user .button-container button {
		margin-right: 0px !important;
	}
	.columns-3 {
		grid-template-columns: 1fr;
	}
	.columns-4 {
		grid-template-columns: 1fr;
	}
}
@media only screen and (max-width: 560px) {
	.site-footer .container div {
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}
	.site-footer .container div span,
	.site-footer .container div ul {
		width: 100%;
		justify-content: center;
		text-align: center;
		padding: 0 0 0 0;
	}
	.site-footer .container div ul {
		margin: 0;
		padding-bottom: 1.5rem;
	}
	.change-link-container {
		gap: 0.5rem !important;
	}
}
@media only screen and (max-width: 375px) {
	p, li {
		font-size: 1rem;
		line-height:1.4rem;
	}
}