/*
NOTES
- imported WP CSS style
- nested all button styles below in "main"
- disabled all body styles below
- disabled font-family variable definitions
- disabled h1 style
- Many custom overwrites below 
From Juan: This code needs a full custom rewrite after Jan 2025 Brand refresh - Many things in wrong color and wrong fonts called
*/

@import url("/hc/theming_assets/01JJV100H5V5WSA0G3H2XY75DM");
@import url("/hc/theming_assets/01JMF2CDWCSF7NP6ED62XTHJYJ");
@import url("/hc/theming_assets/01JJ9DWSTW30989DE41KBNYN8W");
@import url("/hc/theming_assets/01JJ9DZY8YET1H17KFB9EM8CTM");

/*brand refresh fonts here
BricolageGrotesque - Headers
DMSans - Body
*/

@font-face {
	font-family: 'BricolageGrotesque';
	src: url("/hc/theming_assets/01JHFTZGDR5PVH0WY38FYXQMYQ");
	src: url("/hc/theming_assets/01JHFTZGDR5PVH0WY38FYXQMYQ?#iefix") format("eot"),
  url("/hc/theming_assets/01JHFTZE5928CG8D0V8CQHAVN8") format("woff"),
  url("/hc/theming_assets/01JHFTS59YHKPRVE0C7DZ7MA0H") format("truetype"),
  url("/hc/theming_assets/01JHFTZFFMBH20Z9N28E9GF586#BricolageGrotesque") format("svg");
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: 'DMSans';
	src: url("/hc/theming_assets/01JHFV4GJ5B1DQCFTA2ZT4JF65");
	src: url("/hc/theming_assets/01JHFV4GJ5B1DQCFTA2ZT4JF65?#iefix") format("eot"),
  url("/hc/theming_assets/01JHFV4JC2KH9QSGJAK9AEAWF8") format("woff"),
  url("/hc/theming_assets/01JHFV4K5PF0RPTWSEWA7YS1C4") format("truetype"),
  url("/hc/theming_assets/01JHFV4HJE9Y8D8AVR769N1NBF#DMSans") format("svg");
	font-weight: 400;
	font-style: normal
}

body {
  overflow-x: hidden;
}

body .c-header__info .user-info [role=button]{
  margin-top: 15px;
	font-family: 'DMSans';
}

body .c-header__info .user-info + #google_translate_element{
  right: 16px;
	top: 60px;
	font-family: 'DMSans';
}

.c-header__info #google_translate_element{
	position: absolute;
	right: 170px;
	top: 47px;
}

.c-header__info .goog-te-gadget-simple{
  border: none;
	font-family: 'DMSans';
}
.c-header__info .goog-te-gadget-simple{
  font-size: 14px;
	font-family: 'DMSans';
}
.c-header__info .goog-te-gadget-simple .goog-te-menu-value{
	color: #444444;
	font-family: 'DMSans';
	font-weight: 300;
}

.c-header__info .goog-te-gadget-simple .goog-te-menu-value img + span {
  display: none;
	font-family: 'BricolageGrotesque';
}

.c-header__info .goog-te-gadget-simple .goog-te-menu-value span + img + span + img + span{
  font-size: 7px;
  display: inline-block;
	font-family: 'BricolageGrotesque';
}

.c-home-search__content h1{
  margin-bottom: 20px;
}

.c-home-search__content h2{
  margin-bottom: 20px;
  color: #FFF;
  font-size: 24px;
}

@media screen and (max-width: 980px){
  body .c-header__info .user-info [role=button]{
    margin-top: 0;
  }

  body .c-header__info .user-info + #google_translate_element{
    top: 40px;
  }
}

/**
 * Container element
 */

.c-container {
  position: relative;
  overflow: hidden
}

.c-container:before {
  content: '';
  background-color: #f8f8f8;
  display: block;
  width: 100vw;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

/**
 * Article body typography styles
 */

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5 {
	font-family: 'DMSans';
	font-weight: 400;
  margin: 0 0 8px 0;
}

.article-body h1 {
  color: #004137;
  font-family: 'BricolageGrotesque';
  font-size: 38px;
	line-height: 1.4;
}

@media screen and (min-width: 641px) {
  .article-body h1 {
    font-size: 40px;
  font-family: 'BricolageGrotesque';
  }
}

.article-body h2 {
  color: #004137;
  font-family: 'BricolageGrotesque';
  font-size: 32px;
  line-height: 1.4;
}

@media screen and (min-width: 641px) {
  .article-body h2 {
    font-size: 34px;
    line-height: 1.33;
  font-family: 'BricolageGrotesque';
  }
}

.article-body h3 {
  color: #004137;
  font-family: 'BricolageGrotesque';
  font-size: 26px;
  line-height: 1.4;
}

@media screen and (min-width: 641px) {
  .article-body h3 {
    font-size: 28px;
  font-family: 'BricolageGrotesque';
  }
}

.article-body h4 {
  font-size: 20px;
  line-height: 1.44;
  font-family: 'BricolageGrotesque';
}

@media screen and (min-width: 641px) {
  .article-body h4 {
    font-size: 22px;
		line-height: 1.4;
  font-family: 'BricolageGrotesque';
  }
}

.article-body h5 {
  font-size: 18px;
  line-height: 1.5;
  font-family: 'DMSans';
}

@media screen and (min-width: 641px) {
  .article-body h5 {
    font-size: 20px;
		line-height: 1.44;
  font-family: 'DMSans';
  }
}

.article-body h6 {
  color: #004137;
  font-family: 'DMSans';
  font-size: 12px;
  font-weight: 200;
  line-height: 1.4;
}

@media screen and (min-width: 641px) {
  .article-body h6 {
    font-size: 16x;
		line-height: 1.45;
  font-family: 'DMSans';
  }
}

.article-body p {
	font-family: 'DMSans';
	font-size: 16px;
	line-height: 1.5;
}

@media screen and (min-width: 641px) {
  .article-body p {
    font-size: 18px;
    line-height: 1.55;
  font-family: 'DMSans';
  }
}

.article-body a {
  color: #00433D;
  text-decoration: underline;
  font-family: 'DMSans';
	font-weight: 400;
}

.article-body a:hover {
  color: #00786E;
}
.article-body .wysiwyg-font-size-x-large {
  font-family: 'DMSans';
	font-size: 20px;
	line-height: 1.4;
}

@media screen and (min-width: 641px) {
  .article-body .wysiwyg-font-size-x-large {
  font-family: 'DMSans';
    font-size: 24px;
    line-height: 1.33;
  }
}

.article-body .wysiwyg-font-size-large {
  font-family: 'DMSans';
	font-size: 18px;
	line-height: 1.5;
}

@media screen and (min-width: 641px) {
  .article-body .wysiwyg-font-size-large {
  font-family: 'DMSans';
    font-size: 20px;
    line-height: 1.4;
  }
}

.article-body .wysiwyg-font-size-medium {
  font-family: 'DMSans';
	font-size: 16px;
	line-height: 1.5;
}

.article-body .wysiwyg-font-size-small {
	font-family: 'DMSans';
	font-size: 14px;
	line-height: 1.5;
}

.article-body ol,
.article-body ul {
  counter-reset: list-counter;
  list-style: none;
  margin: 10px 0 0 0;
  font-family: 'DMSans';
}

.article-body blockquote {
  color: #aaa;
  font-family: 'DMSans';
}

.article-body ol li,
.article-body ul li {
  counter-increment: list-counter;
  font-family: 'DMSans';
	line-height: 1.5;
  margin: 10px 0;
  padding: 0 0 0 26px;
  position: relative;
}

.article-body hr{
  margin: 10px 0px;
  font-family: 'DMSans';
}

@media screen and (min-width: 641px) {
  .article-body ol li,
	.article-body ul li {
    font-size: 18px;
    line-height: 1.55;
  font-family: 'DMSans';
  }
}

.article-body ul.checklist li {
 	   padding: 0 0 0 33px;
  font-family: 'DMSans';
}

.article-body ul li:before,
.article-body ol li:before {
  content: '';
  background-color: transparent;
  display: block;
  position: absolute;
  top: 0;
	left: 0;
  font-family: 'DMSans';
}

.article-body ul:not(.checklist)>li:before {
  background-color: #3c3c3c;
  border-radius: 6px;
  height: 6px;
  width: 6px;
  top: 9px;
  font-family: 'DMSans';
}

.article-body ul.checklist>li:before {
  background-image: url($assets-check-svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 15px;
	width: 13px;
  font-family: 'DMSans';
}

.article-body ol>li:before {
  content: counter(list-counter) ". ";
  color: #3c3c3c;
  font-family: 'DMSans';
}

.article-body :not(pre) > code {
  background: #f7f7f7;
  color: #222220;
  font-size: 15px;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
	display: inline-block;
  max-width: fit-content;
  white-space: break-spaces;
  user-select: all;
  -webkit-user-select: text; /* Safari fallback only */
  -webkit-user-select: all; /* Chrome/Safari */
  -moz-user-select: all; /* Firefox */
  -ms-user-select: all; /* IE10+ */
  font-family: 'DMSans';
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Article section component
 */

.c-article-section {
  margin: 50px 0;
}

.c-article-section__title {
  margin: 0 0 30px 0;
}

@media screen and (min-width: 921px){
  .c-article-section__inner {
      align-items: center;
      display: flex;
  }
}
  
.c-article-section__inner img {
  border: none;
  max-width: 150px;
}

@media screen and (min-width: 921px){
  .c-article-section__inner img {
    margin-right: 20px;
  }
}

/**
 * Home banner component
 */

.c-home-banner {
  padding: 50px 0 0 0;
}

.c-home-banner__content {
  background-color: #d8ff4f;
  display: flex;
  padding: 35px;
}

@media screen and (min-width: 921px){
  .c-home-banner__content {
    align-items: center;
  }
}

.c-home-banner__img {
  display: none;
  margin-right: 20px;
}

@media screen and (min-width: 641px){
  .c-home-banner__img {
    display: inline-block;
  }
}

.c-home-banner__title {
  color: #004137;
  line-height: 1.4;
  margin: 0 0 15px 0;
}

.c-home-banner__text {
  color: #004137;
  margin: 0;
}

.c-home-banner__button {
  background-color: #3C3C3C;
  border-radius: 3px;
  color: #d8ff4f;
  display: inline-block;
  font-size: #d8ff4f;
  margin: 25px  0 0 0;
  padding: 5px 20px;
}

.c-home-banner__button:hover {
  color: #FFFFFF;
  text-decoration: none;
}

/**
 * Home ctas
 */

.c-home-ctas {
  display: flex;
  flex-direction: column;
	margin: 0 -10px;
  padding: 20px 0 0 0;
  width: calc(100% + 20px);
}

@media screen and (min-width: 768px) {
  .c-home-ctas {
    flex-direction: row;
    padding: 40px 0 0 0;
  }
}

.c-home-ctas__cta {
  background-color: #fff;
  border: 1px solid #c6c6c6;
  border-radius: 10px;
  display: block;
  margin: 0 10px 20px 10px;
  padding: 30px 20px 30px 20px;
  position: relative;
  text-align: center;
  font-family: 'DMSans';
}

@media screen and (min-width: 768px) {
 .c-home-ctas__cta {
   	flex: 1;
   	margin: 0 10px;
   	padding: 35px 20px 45px 20px;
    border-radius: 10px;
  }
}

.c-home-ctas__cta:hover {
  text-decoration: none !important;
}

.c-home-ctas__cta:first-child {
 	z-index: 1; 
}

.c-home-ctas__cta:last-child {
 	margin-bottom: 0;
}

.c-home-ctas__cta-label {
  color: #3c3c3c;
 	font-size: 16px;
  font-weight: 300;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .c-home-ctas__cta-label {
    font-size: 18px;
  }
}

.c-home-ctas__cta-img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 80px;
  margin: 30px auto 35px auto;
	height: 80px;
}

@media screen and (min-width: 768px) {
  .c-home-ctas__cta-img {
  	height: 130px;
     margin: 40px auto 45px auto;
    width: 130px;
  }
}

.c-home-ctas__cta-img--phone {
  background-image: url(/hc/theming_assets/01JHMREEKDJC9KYAJ79D05SN8Q);
}

.c-home-ctas__cta-img--issue {
  background-image: url(/hc/theming_assets/01JHMQQFTKEWSSWNE1JB6NKJ2Y);
}

.c-home-ctas__cta-img--order {
  background-image: url(/hc/theming_assets/01JHMR4WHNYRN33EG38VRZK183);
}

.c-home-ctas__cta-title {
  color: #004137;
 	font-size: 20px;
  font-weight: bold;
  margin: 0;	
  text-decoration: underline;
  font-family: 'DMSans';
}

.c-home-ctas__cta-title:hover {
  color: #00786E;
}
@media screen and (min-width: 768px) {
  .c-home-ctas__cta-title {
    font-size: 24px;
  }
}

a.c-home-ctas__cta:hover .c-home-ctas__cta-title {
  color: #3c3c3c;
}

.c-home-ctas__cta-list {
  background-color: #fff;
  border: 1px solid #c6c6c6;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  display: none;
  margin-top: -10px;
  padding: 0 20px 12px 20px;
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  z-index: 1;
}

@media screen and (min-width: 768px) {
 	.c-home-ctas__cta-list {
    margin-top: -25px;
  }
}

.c-home-ctas__cta-list li {
  margin: 0 0 15px 0;
}

.c-home-ctas__cta-list li:last-child {
  margin-bottom: 0;
}

.c-home-ctas__cta-list li a {
  color: #000;
  font-size: 18px;
  font-weight: 500;
}

.c-home-ctas__cta:hover .c-home-ctas__cta-list {
  display: block;
  border-radius: 10px;
}

/**
 * Home articles
 */

.c-home-articles {
  padding: 40px 0 60px 0;
}

@media only screen and (min-width: 640px){
  	.c-home-articles {
      padding: 60px 0 80px 0;
    }
}

@media screen and (min-width: 768px) {
.c-home-articles {
      padding: 85px 0 80px 0;
    }
}
.c-home-articles__title {
	font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 10px 0;
  text-align: center;
  font-family: 'BricolageGrotesque';
}

.c-home-articles__inner {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.c-home-articles__item {
  background-color: #fff;
  border: 1px solid #c6c6c6;
  border-radius: 10px;
  font-size: 16px;
  color: #004137;
  display: flex;
  flex-direction: column;
 	justify-content: space-between;
  margin: 20px 10px 0 10px;
  padding: 24px;
  width: 100%;
  min-height: 0;	
  text-decoration: underline;
	font-family: 'BricolageGrotesque';
}


.c-home-articles__item:hover {
  color: #00786E
}
@media screen and (min-width: 768px) {
 .c-home-articles__item {
   min-height: 132px;
   width: calc(50% - 20px);
  }
}

@media screen and (min-width: 1024px) {
 .c-home-articles__item {
   width: calc(33.3333% - 20px);
  }
}

/*.c-home-articles__item:hover {
  color: #e8f6e9;
  text-decoration: underline;
}
NO HOVER? for home articles */ 
.c-home-articles__item-title {
  text-align:center;
  padding: 25px 0;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.55;
  margin: 0;
}

/**
 * Simple search component
 */

.c-simple-search {
  background-color: #e8f6e9;
  padding: 40px 0 50px 0;
  position: relative;
  text-align: center;
  font-family: 'DMSans';
}

@media screen and (min-width: 641px) {
 .c-simple-search {
    padding: 60px 0 65px 0;
  }
}

@media screen and (min-width: 768px) {
 .c-simple-search {
    padding: 90px 0 80px 0;
  }
}

.c-simple-search.c-simple-search--small {
  padding: 40px 0 10px 0;
}

.c-simple-search:before {
  content: '';
  background-color: #e8f6e9;
  display: block;
  width: 100vw;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.c-simple-search__title {
  color: #004137;
  font-size: 32px;
  font-family: BricolageGrotesque;
  font-weight: bold;
  margin: 0;
}

@media screen and (min-width: 641px) {
 .c-simple-search__title {
    font-size: 36px;
  }
}

@media screen and (min-width: 768px) {
 .c-simple-search__title {
    font-size: 48px;
  }
}

.c-simple-search--small .c-simple-search__title {
  font-size: 32px;
}

@media screen and (min-width: 641px) {
  .c-simple-search--small .c-simple-search__title {
    font-size: 36px;
  }
}

/*form*/
.c-simple-search__form {
  margin: 25px 0 0 0;
}

@media screen and (min-width: 768px) {
 .c-simple-search__form {
    margin: 45px 0 0 0;
  }
}

.c-simple-search--small .c-simple-search__form {
  margin: 25px 0 0 0;
}

.c-simple-search__form form.search {
  margin: 0 auto;
  max-width: 767px;
  position: relative;
}

.c-simple-search__form form.search:before {
  display: none;
}

.c-simple-search__form form.search input[type="search"] {
  border: none;
  border-radius: 10px;
  color: #3c3c3c;
  font-size: 18px;
  padding-left: 15px;
 	width: 100% 
}

.c-simple-search__form form.search input[type="search"]::-webkit-input-placeholder {
  color: #3c3c3c;
}
.c-simple-search__form form.search input[type="search"]::-moz-placeholder {
  color: #3c3c3c;
}
.c-simple-search__form form.search input[type="search"]:-ms-input-placeholder {
  color: #3c3c3c;
}
.c-simple-search__form form.search input[type="search"]:-moz-placeholder {
  color: #3c3c3c;
}

.c-simple-search__form form.search input[type="submit"] {
  background: transparent;
  background-image: url(/hc/theming_assets/01HZM42NQEQYT76FD9Y18A9RDY);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  box-shadow: none;
  height: 45px;
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
 	width: 55px;
  position: absolute;
  right: 0;
  top: 0;
}

//* ============================================
   REFINED GLOBAL BREADCRUMBS
============================================ */

.c-breadcrumb-wrapper {
  position: relative; /* Essential for the bleed trick */
  background-color: #ffffff !important;
  z-index: 1;
}

/* Forces the white to bleed past the grid/columns to the screen edges */
.c-breadcrumb-wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: #ffffff !important;
  z-index: -1;
}

.breadcrumbs {
  margin: 0!important;
  padding-top: 15px;
  padding-bottom: 15px;
  background: white;
}


/* 2. Style the "Original/Parent" pages (e.g., Support) */
.breadcrumbs li a, 
.breadcrumbs li span {
  color: #00433D !important;
  font-size: 14px;
  font-weight: 400 !important; /* Not bold */
  text-decoration: none;
}

/* 3. Style the "Category Title" (The one before the last) */
/* This ensures "How to use your product" stands out but stays secondary */
.breadcrumbs li:nth-last-child(2) a {
  font-weight: 400 !important; 
  font-size: 14px;
}

/* 4. Style the "Current Active Section" (The very last item) */
/* We are making this BOLD and LARGER as requested */
.breadcrumbs li:last-child {
  font-weight: 700 !important; 
  font-size: 16px !important; /* Increased font size */
  color: #00433D !important;
}


/**
 * Title component
 */

.c-title {
  font-family: 'BricolageGrotesque';
  font-size: 44px;
	line-height: 1.4;
}

@media screen and (min-width: 641px) {
  .c-title {
    font-size: 48px;
  }
}

.c-title > span:before {
	font-size: 16px;
	line-height: 1.5;
}

/**
 * Footer contact component
 */

.c-footer-contact {
  padding: 45px 0 95px 0;
  z-index: 1;
}

@media screen and (min-width: 768px) {
 .c-footer-contact {
    padding: 45px 0 56px 0;
  }
}

.c-footer-contact__title {
  font-size: 32px;
  font-weight: bold;
  margin: 0 0 25px 0;
  text-align: center;
  font-family: 'BricolageGrotesque';
}

@media screen and (min-width: 641px) {
  .c-footer-contact__title {
    font-size: 36px;
    margin: 0 0 50px 0;
  font-family: 'BricolageGrotesque';
  }
}

.c-footer-contact__blocks:after {
  content: "";
  display: table;
  width: 100%;
}

.c-footer-contact__block {
  color: #3c3c3c;
  padding: 0 15px;
  text-align: center;
}

@media screen and (max-width: 640px) {
  .c-footer-contact__block {
    margin: 0 0 40px 0;
  }
  
  .c-footer-contact__block:last-child {
   	margin: 0; 
  }
}

@media screen and (min-width: 641px) {
  .c-footer-contact__block {
    float: left;
    width: 33.3333%;
  }
}

@media screen and (min-width: 1024px) {
  .c-footer-contact__block {
    padding: 0 35px;
  }
}

.c-footer-contact__block-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 80px;
  margin: 0 auto;
  width: 80px;
}

.c-footer-contact__block-icon--contact {
  background-image: url(/hc/theming_assets/01HZM42RTQBF63QAJEBTYHAC4A);
}

.c-footer-contact__block-icon--phone {
  background-image: url(/hc/theming_assets/01HZM42RZB9FF5STTYA6JBSD1B);
}

.c-footer-contact__block-icon--community {
  background-image: url(/hc/theming_assets/01HZM42S4HQ0QJRZNTZ97R9WK0);
}

.c-footer-contact__block-title {
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0 10px 0;
  font-family: 'BricolageGrotesque';
}

@media screen and (min-width: 641px) {
  .c-footer-contact__block-title {
    margin: 25px 0 10px 0;
  font-family: 'BricolageGrotesque';
  }
}

@media screen and (min-width: 768px) {
	.c-footer-contact__block-title {
  	font-size: 24px;
  font-family: 'BricolageGrotesque';
  }
}

.c-footer-contact__block-content {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 16px 0;
  font-family:'DMSans';
}

@media screen and (min-width: 641px) {
	.c-footer-contact__block-content {
		margin: 0 0 25px 0;
  font-family:'DMSans';
  }
}

@media screen and (min-width: 768px) {
	.c-footer-contact__block-content {
		font-size: 18px;
  font-family:'DMSans';
  }
}

.c-footer-contact__block-link {
  color: #00433D;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.55;
  text-decoration: underline;
  font-family:'DMSans';
}

.c-footer-contact__block-link:hover {
  color: #00786E;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.55;
  text-decoration: underline;
}

.c-footer-contact__block-link--chevron:after {
  content: url(/hc/theming_assets/01HZM42BGSRFS72DH2849W9EF7);
  margin: 0 0 0 10px;
}

/**
 * Styling for Andrdoid 7 article: https://fairphone.atlassian.net/browse/WW-836
 */

.c-android-article {
  width: 100% !important;
}

.c-android-article .c-title {
  line-height: 1.2;
	margin: 60px 0 80px 0;
  text-align: center;
}

.c-android-article .article-updated {
 display: none; 
}

.h1-like{
  font-size: 48px; 
  line-height: 67px
}

.listing{
  font-size: 18px; 
  line-height: 27px;
    
    font-family: 'DMsans';
    font-weight: 300;
}

/**
 * Styling for full width article: https://fairphone.atlassian.net/browse/WW-922
 */

.c-full-width {
  float: none !important;
  margin: 0 auto !important;
  max-width: 800px;
  width: 100% !important;
}

/**
 * Search popover component
 */

.c-search-popover {
	width: 100%;
	height: 100%;
	height: calc(100% - 85px);
	top: 85px;
	left: 0;
	position: absolute;
	z-index: -5;
	overflow: hidden;
	display: block;
	opacity: 0;
	bottom: 0;
	background: #f3f3f4;
	visibility: hidden;
	transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}

.c-search-popover__main .c-nav__toggle span,
.c-search-popover__main .c-nav__toggle span:before,
.c-search-popover__main .c-nav__toggle span:after {
}

.c-search-popover__main .c-nav__toggle.active span {
	background-color: transparent;
}

.c-search-popover__main .c-logo {
	position: relative;
	top: 0;
	left: 50%;
}

.c-search-popover__contents {
	padding-bottom: 15px;
}

.c-search-popover__line {
	background-color: #e6e7e8;
	height: 1px;
	margin: 30px 15px;
	width: auto;
}

.c-search-popover__button {
	border-radius: 3px;
	background-color: #e8f6e9;
	border: 2px solid #e8f6e9;
	color: #ffffff;
	display: block;
	font-family: 'DMSans';
	font-size: 20px;
	font-weight: normal;
	height: 48px;
	line-height: 48px;
	margin: 0 auto !important;
	outline: none;
	padding: 0 20px;
	text-align: center;
	text-decoration: none;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out;
	width: 190px;
}

.c-search-popover__button:hover {
	color: #ffffff;
	text-decoration: none;
}

.c-search-popover__button + .c-search-popover__button {
	background-color: transparent;
	border-color: transparent;
	color: #000000;
	margin-top: 15px !important;

	&:hover {
		background-color: transparent;
		border-color: transparent;
	}
}

/* Settings element */

.c-search-popover__settings {
	padding: 0 15px;
	text-align: center;
}

.c-search-popover__settings-link {
	color: #00433D;
	font-family: 'DMSans';
	font-size: rem-calc(16) !important;
	font-weight: 500;
	line-height: 1.5;
}

.c-search-popover__settings-link:hover {
	color: #00786E;
	text-decoration: none;
}

@media screen and (max-width: 640px) {
	.open .c-search-popover {
		height: 100%;
	}
}

@media screen and (max-width: 767px) {
	.c-search-popover {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		height: 0;
		opacity: 0;
		visibility: hidden;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	.open .c-search-popover {
		height: auto;
		opacity: 1;
		visibility: visible;
		bottom: 0;
	}

	.c-search-popover__header {
		height: 82px;
	}

	.c-search-popover__main .c-logo {
		margin-left: -63px;
	}

	.c-search-popover__main .c-logo .c-logo__link {
		width: 125px;
		height: 17px;
		margin-top: 22px;
	}

	.c-search-popover__main .c-logo .c-logo__link svg {
		height: 100%;
		width: 100%;
		margin-top: -9px;
	}
}

@media screen and (min-width: 768px) {
	.c-search-popover__main {
		display: none;
	}
}

/**
 * Search popover main nav component
 */

.c-search-popover-main-nav {
	list-style: none;
	margin: 0 0 30px 0;
	padding: 0 15px;
}

.c-search-popover-main-nav__item {
	border-bottom: 1px solid #c6c6c6;
	padding: 15px 0;
}

.c-search-popover-main-nav__link:hover {
	text-decoration: none;
	color: #00786E;
}

.c-search-popover-main-nav__item > .c-search-popover-main-nav__link {
	color: #222220;
	display: block;
	font-family: 'DMSans';
	font-size: 18px;
	font-weight: normal;
	line-height: 1.5;
	padding: 0 8px;
	position: relative;
}

.c-search-popover-main-nav
	> .c-search-popover-main-nav__item--parent
	> .c-search-popover-main-nav__link:after {
	content: '';
	background-image: url(/hc/theming_assets/01HZM42SQH73B0WN81ZMBP7HTY);
	background-position: center;
	background-repeat: no-repeat;
	display: block;
	height: 20px;
	margin: -10px 0 0 0;
	width: 20px;
	position: absolute;
	right: 8px;
	top: 50%;
}

.c-search-popover-main-nav__link.active:after {
	transform: rotate(180deg);
}

/* Sub menu */

.c-search-popover-main-nav__sub-menu {
	display: none;
	list-style: none;
	margin: 25px 0 0 25px;
	padding: 0;
}

.active + .c-search-popover-main-nav__sub-menu {
	display: block;
}

.c-search-popover-main-nav__sub-menu-item
	+ .c-search-popover-main-nav__sub-menu-item {
	margin: 15px 0 0 0;
}

.c-search-popover-main-nav__sub-menu .c-search-popover-main-nav__link {
	color: #222220;
	font-family: 'DMSans';
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

@media screen and (min-width: 768px) {
	.c-search-popover-main-nav__item > .c-search-popover-main-nav__link {
		font-size: 18px;
		line-height: 1.45;
	}
}

/* start extra code gitlab issue 371 */
.accordion {
  background-color: #e8f6e9;
  color: 00433D;
  cursor: pointer;
  padding: 10px;
  padding-top: 11px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.25s;
  font-weight:600;
  border-radius: 10px;
  margin: 0;
}

.accordion p {
  display: inline;
  margin: 0;
}

.accordion.active, .accordion:hover{
  background-color: #e8f6e9;
  color: #00786E;
}

.accordion.active {
  border-radius: 10px 10px 0 0;
}

.accordion:hover::after{
  color: #00786E;
}

.accordion:after {
  content: '\002B';
  color: inherit;
  font-weight: bold;
  float: right;
  margin-left: 0px;
  transition: 0.25s;
}

.accordion.active:after {
  content: "\2212";
  color: inherit;
}

.nested-accordion {
    margin-top: 10px;
}

.panel {
  padding: 0 18px;
  background-color: white;
  margin-bottom: 10px;
  border-left: 0.25em solid #CCC;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

.accordion-panel {
  padding: 0 18px;
  background-color: white;
  margin-bottom: 10px;
  border-left: 5px solid #CCC;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

.accordion-panel > p, .panel > p {
  margin: 10px 0;
}
/* end extra code gitlab issue 371 */

/* start smooth scrolling to linked headings */
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
/* end smooth scrolling to linked headings */

/* table head style, borders */
thead {
  background-color:#e8f6e9;
  font-weight: bold;
}

th {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

th, td, tr {
  border: 1px solid black;
  width: 33.3333%; 
  height: 22px;
}
/* table head style, borders */

/* Start extra code - support article tabs */
/* Style the tab */
.tab {
    overflow: hidden;
    border: none;
    background-color: #e8f6e9;
    display: flex;
    margin: 10px 0;
    border-radius: 10px;
}

/* Styling for the buttons (tablinks) */
.tablinks {
    background-color: #e8f6e9;
    color: black;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 16px;
    transition: 0.3s;
    font-size: 16px;
    flex-grow: 1;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: 45px;
}

.tablinks:last-child {
    border-right: none;
}

.tablinks:hover {
    background-color: #e8f6e9;
    color: #00786E;
    border: none;

}

.tablinks.active {
    background-color: #e8f6e9;
    color: #00786E;
    border: none;
}

/* Content area hiding logic */
.tabcontent {
    padding: 0px 12px;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #ffffff;
    border-radius: 0 0 10px 10px;
    opacity: 0;
    max-height: 0;
    overflow: auto;
    transition: opacity 0.3s ease-out, max-height 0.3s ease-in;
}

/* Active content style */
.tabcontent.active {
    opacity: 1;
    max-height: 5000px; /* High enough to accommodate long articles */
    padding: 20px 12px;
    transition: opacity 0.3s ease-in, max-height 0.3s ease-out;
}

.tab.remove-margin {
    margin-bottom: 0;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
}
/* End extra code - support article tabs */

/* Start important note styling */
.important-note{
  background-color: #e8f6e9;
  border: 0px solid black;
  border-radius: 10px;
  padding: 15px 20px;
  font-size: 18px;
  line-height: 1.5;
  margin: 15px 0;
  align-items: center;
}
/* End important note styling */

/* Start troubleshoot note styling added by Ieuan */
.troubleshoot-note{
  background-color: #f8f8f8;
  border: 0px solid black;
  border-radius: 10px;
  padding: 15px 20px;
  font-size: 18px;
  line-height: 1.5;
  margin: 15px 0;
  align-items: center;
}
/* End important note styling */

/* Start warning note styling added by Ieuan 14.06.2025 */
.warning-note{
  background-color: #F3E8E8;
  border: 0px solid black;
  border-radius: 10px;
  padding: 15px 20px;
  font-size: 18px;
  line-height: 1.5;
  margin: 15px 0;
  align-items: center;
}
/* End warning note styling */

/* Start video container styling, which ensures it is responsive */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
/* End video container styling */

/* Start iframe styling, that displays the video */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
}
/* End iframe container styling */

/* Start request form styling */
.request-page .form-block .form-field p {
  font-size: 14px;
  color: #878787;
}  

.notification-inline.notification-error {
  font-size: 16px;
}

.request-page .form-block .form-field .nesty-input, .request-page .form-block .form-field input, .request-page .form-block .form-field textarea, .upload-dropzone {
  box-shadow: none;
  border: 1px #e6e7e8 solid;
  border-radius: 4px;
  font-size: 16px;
  font-family: Radikal, sans-serif;
  font-weight: normal;
  color: #222220;
  padding: 10px 20px;
}

/* End request form styling */

/* kalam 28.4.2025 */

/* kalam 28.4.2025 */

/* Start hyperlink styling */
.article-body a[target="_blank"]:after, .notification a[target="_blank"]:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEzIiBmaWxsPSIjMWE3M2U4IiBzdHlsZT0iZmlsbDogIzJjYTdkZjsiPjxwYXRoIGQ9Ik0xOSAxOUg1VjVoN1YzSDVhMiAyIDAgMCAwLTIgMnYxNGEyIDIgMCAwIDAgMiAyaDE0YzEuMSAwIDItLjkgMi0ydi03aC0ydjd6TTE0IDN2MmgzLjU5bC05LjgzIDkuODMgMS40MSAxLjQxTDE5IDYuNDFWMTBoMlYzaC03eiIvPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMFYweiIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
  content: '';
  display: inline-block;
  height: 0.8125rem;
  margin: 0 0.1875rem 0 0.25rem;
  position: relative;
  top: 0.125rem;
  width: 0.8125rem;
}
/* End hyperlink styling */

/* Start language selector styling */
.article-language-selector {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden; /* To keep the rounded borders consistent */
  	margin-bottom: 20px;
}

.lang-btn {
  	font-size: 16px;
    border: none;
  	height: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex: 1; /* This makes each button take up an equal amount of space */
    text-align: center;
    background-color: #f7f7f7;
    display: flex; /* To use flexbox properties */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

.lang-btn img {
    margin-left: 5px;
    vertical-align: middle;
}

.lang-btn:hover {
    background-color: #00786E;
}

.lang-btn.selected {
    background-color: #5ab8b0;
  	color: black;
}
/* End language selector styling */

/* Start header warning banner styling */
/* Banner container */
.header_banner {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffd700;
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 999;
  color: black;
}

/* Close button */
.header_banner-close {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  cursor: pointer;
}

/* Close button style */
.header_banner-close::after {
  content: 'X';
  font-size: 20px;
  color: #333;
}

/* Close button hover effect */
.header_banner-close:hover::after {
  color: #fff;
}

/* End header warning banner styling */

/* Start footer changes sent over by Sara, implemented 09.04.24 */

.c-footer {
    overflow: hidden;
    background-color: #000;
    text-align: left;
}

.c-footer > div {
    max-width: 1220px;
    display: block;
}

.c-footer .c-simple-nav__item>.c-simple-nav__link {
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 32px
}

@media only screen and (min-width: 37.5em) {
    .c-footer .c-simple-nav__item>.c-simple-nav__link {
        font-size:16px
    }
}

.c-footer column {
    padding: 0;
    margin-bottom: 56px
}

.c-footer column [class*="block-grid-"]>li {
    padding: 0 16px 0 0
}

.c-footer column [class*="block-grid-"]>li:last-child {
    padding: 0 0 0 16px
}

@media only screen and (min-width: 61.25em) {
    .c-footer column {
        padding-top:2.8125rem;
        padding-bottom: 2.8125rem;
        padding-left: .9375rem;
        padding-right: .9375rem
    }
}

@media only screen and (min-width: 37.5em) {
    .c-footer column {
        padding-top:1.875rem;
        padding-bottom: 1.875rem;
        padding-left: 4.6875rem;
        padding-right: 3.75rem;
        min-height: 365px
    }
}

.c-footer__list {
    list-style: none;
    margin: 0;
    padding: 0
}

.c-footer__list-item {
    padding-bottom: .375rem
}

.c-footer .menus {
    margin: 0 0 40px 0
}

.c-footer .menus>li {
    padding: 0
}

.c-footer .column {
    font-family: "DMSans"
}

.c-footer .c-simple-nav__sub-menu-item {
    padding: 0
}

.c-footer .c-simple-nav__sub-menu {
    list-style: none
}

.c-footer li.c-simple-nav__item--parent.open .c-simple-nav__sub-menu {
    height: auto
}

.c-footer .c-simple-nav__sub-menu-item .c-simple-nav__link,.c-footer .c-simple-nav__sub-menu>li>a {
    font-family: "DMSans";
    font-size: 14px;
    font-weight: 400;
    color: #F8F9F2;
    opacity: 0.5;
    line-height: 28px
}

.c-footer .c-simple-nav__sub-menu-item .c-simple-nav__link:hover,.c-footer .c-simple-nav__sub-menu>li>a:hover {
    color: #00786E;
    opacity: 1
}

@media only screen and (max-width: 37.438em) {
    .c-footer .c-simple-nav__item>.c-simple-nav__link {
        padding:0;
        line-height: 89px;
        font-size: 16px
    }

    .c-footer .c-simple-nav__sub-menu {
        display: block;
        transition: max-height 1s ease-in-out, padding 0.5s ease-in-out;
        overflow: hidden;
        max-height: 0;
        padding: 0
    }

    .c-footer li.c-simple-nav__item--parent {
        border-bottom: 1px solid #fff
    }

    .c-footer li.c-simple-nav__item--parent>.c-simple-nav__link:after {
        content: "";
        position: absolute;
        right: 0;
        top: 19px;
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
        background-image: url(https://fairphone.com/wp-content/themes/fairphone/build/assets/img/icons/fp_accordion_arrow_down.svg)
    }

    .c-footer li.c-simple-nav__item--parent.open .c-simple-nav__sub-menu {
        max-height: 500px;
        padding: 0 0 32px 0
    }

    .c-footer li.c-simple-nav__item--parent.open>.c-simple-nav__link:after {
        content: "";
        position: absolute;
        right: 0;
        top: 19px;
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
        background-image: url(https://fairphone.com/wp-content/themes/fairphone/build/assets/img/icons/fp_accordion_arrow_up.svg)
    }

    .c-footer .c-simple-nav__item>.c-simple-nav__link {
        border-bottom: 0
    }
}

.c-footer__list-link {
    font-size: .875rem;
    font-weight: normal;
    color: #fff;
    display: table;
    line-height: 24px
}

.c-footer__list-link svg {
    display: inline-block;
    width: 16px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
    position: relative;
    top: -2px
}

.c-footer__list-link:hover {
    color: #00786E
}

.c-footer__list-link:hover svg path {
    fill: #00786E
}

.c-footer__list-link--linkedin svg {
    top: -4px
}

.c-footer__text {
    font-size: .75rem;
    color: #878787;
    margin-top: 25px
}

@media only screen and (min-width: 37.5em) {
    .c-footer__text {
        color:#3c3c3c;
        margin: .9375rem 0
    }
}

.c-footer__text a {
    font-weight: normal
}

.c-footer ul ul {
    list-style: none;
    padding: 0
}

ul.c-footer__inline-list {
    list-style: none;
    padding: 0
}

@media only screen and (min-width: 37.5em) {
    ul.c-footer__inline-list {
        padding:0;
        display: flex;
        gap: 16px;
        flex-wrap: nowrap;
        justify-content: space-between
    }
}

ul.c-footer__inline-list>li {
    margin-bottom: 16px
}

ul.c-footer__inline-list>li:first-child {
    margin-bottom: 32px
}

ul.c-footer__inline-list>li.copyright {
    margin-top: 16px;
    margin-bottom: 0;
    text-align: center;
    color: #fff;
    font-size: 14px
}

@media only screen and (min-width: 37.5em) {
    ul.c-footer__inline-list>li.copyright {
        margin-top:0;
        text-align: left;
        min-width: 16%
    }
}

.c-footer__inline-list .c-footer__list-item {
    display: inline-block;
    margin-right: 16px;
    font-weight: 400
}

[class^='c-footer__list-link--'],[class*='c-footer__list-link--'] {
    opacity: 1;
    display: block;
    width: 16px;
    height: 16px;
    background-color: #fff
}

[class^='c-footer__list-link--']:hover,[class*='c-footer__list-link--']:hover {
    background-color: #00786E
}

.c-footer__list-link--facebook {
    -webkit-mask-image: url(/hc/theming_assets/01HZM42WHPSBYHC9QJ9EG59TG6);
    mask-image: url(/hc/theming_assets/01HZM42WHPSBYHC9QJ9EG59TG6);
}

.c-footer__list-link--instagram {
    -webkit-mask-image: url(/hc/theming_assets/01HZM42WQR96PEYGR9VJEK7595);
    mask-image: url(/hc/theming_assets/01HZM42WQR96PEYGR9VJEK7595);
}

.c-footer__list-link--linkedin {
    -webkit-mask-image: url(/hc/theming_assets/01HZM42WXFWJN7YTH1GNTT8J20);
    mask-image: url(/hc/theming_assets/01HZM42WXFWJN7YTH1GNTT8J20);
}

.c-footer__list-link--twitter {
    -webkit-mask-image: url(/hc/theming_assets/01HZM42W4ZATG11XKM7TBRJKM9);
    mask-image: url(/hc/theming_assets/01HZM42W4ZATG11XKM7TBRJKM9);
}

.c-footer__list-link--youtube {
    -webkit-mask-image: url(/hc/theming_assets/01HZM42WAYTB4MT3B7WDQDNWGC);
    mask-image: url(/hc/theming_assets/01HZM42WAYTB4MT3B7WDQDNWGC);
}

.c-footer__inline-list-link {
    color: #fff;
    font-weight: 400;
    font-size: 14px
}

.c-footer__inline-list-link:hover {
    color: #00786E
}

.c-footer p a {
    color: #3c3c3c
}

.c-footer p a:hover {
    color: #00786E
}

.c-footer .u-text-stable-darker .c-footer__text a {
    color: #00786E;
    font-size: 0.75rem;
    font-weight: normal
}

.c-footer .u-text-stable-darker .c-footer__text a:hover {
    text-decoration: underline
}

.c-footer *,.c-footer  *:before,.c-footer  *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
[class*="block-grid-"] {
    display: block;
    padding: 0;
    margin: 0 -0.625rem;
}
[class*="block-grid-"]:before, [class*="block-grid-"]:after {
    content: " ";
    display: table;
}
[class*="block-grid-"]:after {
    clear: both;
}
[class*="block-grid-"]:before, [class*="block-grid-"]:after {
    content: " ";
    display: table;
}

.small-block-grid-1>li:nth-of-type(1n+1) {
    clear: both;
}
.small-block-grid-1>li:nth-of-type(1n) {
    clear: none;
}
.small-block-grid-1>li {
    list-style: none;
    width: 100%;
}
[class*="block-grid-"]>li {
    display: block;
    float: left;
    height: auto;
    padding: 0 0.625rem 1.25rem;
}
.c-simple-nav__link {
    text-decoration: none;
    display: inline-block;
    margin: 0;
}
.c-simple-nav__item {
    display: inline-block;
    vertical-align: top;
    margin: 0;
}

.c-footer .c-simple-nav__item>.c-simple-nav__link {
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 32px;
}
.c-simple-nav__item>.c-simple-nav__link {
    font-weight: bold;
    margin-bottom: 0.46875rem;
    font-size: 1.125rem;
}
.c-simple-nav__item--parent>a {
    cursor: default;
}
.c-simple-nav__link {
    text-decoration: none;
    display: inline-block;
    margin: 0;
}
@media only screen and (min-width: 37.5em) {
    .medium-block-grid-2 > li:nth-of-type(2n+1) {
        clear: both;
    }

    .medium-block-grid-2 > li:nth-of-type(1n) {
        clear: none;
    }

    .medium-block-grid-2 > li {
        list-style: none;
        width: 50%;
    }

    .c-footer .c-simple-nav__item > .c-simple-nav__link {
        font-size: 16px;
    }
}
@media only screen and (max-width: 37.438em){
    .c-simple-nav__item--parent > .c-simple-nav__link {
        position: relative;
        width: 100%;
        border-bottom: 0;
        padding: 0;
        line-height: 89px !important;
        font-size: 16px;
    }
    .c-footer li.c-simple-nav__item--parent>.c-simple-nav__link:after {
        content: "";
        position: absolute;
        right: 0;
        top: 19px;
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
        background-image: url(https://fairphone.com/wp-content/themes/fairphone/build/assets/img/icons/fp_accordion_arrow_down.svg);
    }
    .c-simple-nav__item--parent>.c-simple-nav__link:after {
        content: "";
        position: absolute;
        right: 0.9375rem;
        top: 0.9375rem;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAGCAYAAAD37n+BAAAAaUlEQVR4AWP4////JChm9sksZEDDIHkmmBoQHyTQ+R8CVgExG5piNrA4BHSCxGASBVDBPUDMDxXjB/MhoABmCLJpkUD8C4jPAbEeiIbyI5FtRXevGxB/BhkJpd3Q/YTNkyZAfA1EYwsEAE4BqxTK90heAAAAAElFTkSuQmCC) no-repeat center;
        width: 12px;
        height: 10px;
    }
}
@media only screen and (min-width: 61.25em){
    .large-block-grid-6>li:nth-of-type(6n+1) {
        clear: both;
    }
    .large-block-grid-6>li:nth-of-type(1n) {
        clear: none;
    }
    .large-block-grid-6>li {
        list-style: none;
        width: 16.66667%;
    }
}
/* End footer changes sent over by Sara, implemented 09.04.24 */

/* new stuff or changed stuff JAN 2025

*/

.c-category__content{
	padding: 60px 0;
}

.c-category__content-tree{
    max-width: 650px;
    margin: 0 auto;
}

.c-category__content-tree .section {
    display: block;
    padding: 0;
    vertical-align: top;
    width: 100%;
    border-radius: 3px;
    border: 1px #F8F8F8 solid;
    height: 44px;
    overflow: hidden
}

.c-category__content-tree .section:not(:first-of-type) {
    margin-top: 10px;
}

.c-category__content-tree .section h3 {
    font-size: 20px;
    color: #3c3c3c;
    margin: 0;
    padding: 10px 20px;
    background-color: #F8F8F8;
    font-family: 'BricolageGrotesque', 'DMSans';
    text-transform: none;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    font-weight: normal;
    padding-right: 50px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.c-category__content-tree .section h3:before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    right: 20px;
    z-index: 1;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    background: url(//p4.zdassets.com/hc/theme_assets/1050890/200074286/arrowBlue.svg) center center no-repeat;
}

.c-category__content-tree .section h3 a {
    font-weight: inherit;
    text-decoration: none;
}

.c-category__content-tree .section.open {
    padding-bottom: 10px;
}

.c-category__content-tree .section.open h3:before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.c-category__content-tree .section .article-list {
    padding: 10px 35px 0;
}

.c-category__content-tree .section .article-list li {
    padding: 10px 0;
    color: #00433D;
    margin: 0;
}

.c-category__content-tree .section .article-list li a {
    font-size: 16px;
    color: #00786E;
  font-family: 'DMSans';
}

.c-category__content-tree .section .see-all-articles {
    font-size: 16px;
    padding: 15px 35px;
    margin: 0;
    display: block;
    color: #00433D;
    text-decoration: none;
}

.c-category__content-tree .section .see-all-articles:hover {
    color: #00786E;
    text-decoration: underline;
}

.related-articles-block + .related-articles-block{
	margin-top: 20px;
}

.c-article-label{
	display: none;
}

.related-articles ul li em{
	font-style: normal;
}

.c-title{
	width: 100%;
	color: #3c3c3c;
	font-size: 32px;
	margin: 10px 0 0;
    font-family: 'BricolageGrotesque', 'DMSans';
    font-weight: normal;
}

.c-title--center{
	text-align: center;
	margin-bottom: 20px;
}

.c-desc{
	width: 100%;
	color: #3c3c3c;
	font-size: 24px;
	margin: 15px 0 0;
}

.c-desc--center{
	text-align: center;
	margin-bottom: 20px;
  font-family: 'DMSans';
}
	.c-nav__item{
    color: #00433D;
		line-height: 50px;
    font-family:'BricolageGrotesque';
	}
	ul.c-nav:hover ul{
    color: #00786E;
		display: none;
	}
	ul.c-nav:hover li:hover ul{
		display: block;
	}
	.c-home-search__content{
		padding: 0 20px;
	}
	.c-home-categories__holder:first-child{
		padding-right: 0;
	}
	.c-home-categories__holder:last-child{
		padding-left: 0;
	}
	.large-block-grid-4 li{
		width: 100%;
		float: left;
	}
	.large-block-grid-4>li:nth-of-type(n+1){
		clear: both;
	}
	.c-footer__right-column{
		width: 100%;
	}
	.c-footer__left-column{
		width: 100%;
	}
	.c-home-search__content h1{
		padding-top: 20px;
	}
	.c-footer__right-column,
	.c-footer__left-column{
		padding: 20px;
	}
	.c-footer__right-column-content{
		padding: 0;
	}
}

@media screen and (max-width: 640px){
	.c-home-categories__holder{
		width: 100%;
		margin-bottom: 15px;
	}
	.c-home-categories__holder:nth-child(odd){
		padding-right: 0;
	}
	.c-home-categories__holder:nth-child(even){
		padding-left: 0;
	}
}

.article-page .related-articles-block {
	width: auto;
	float: right;
	background-color: #f8f8f8;
	padding: 20px;
}

.article-page .related-articles-block .related-articles h3 {
	margin: 0;
	font-size: 24px;
  font-family: 'BricolageGrotesque';
}

.article-page .related-articles-block .related-articles ul {
	margin-top: 10px;
}

.article-page .related-articles-block .related-articles ul li {
	margin: 13px 0;
}

.article-page .related-articles-block .related-articles ul li a {
	font-size: 16px;
	font-family: 'DMSans';
	font-weight: lighter;
  color: #00786E;
}

.c-nav__item--active .c-nav__link {
	color: #00433D;
  font-family: 'BricolageGrotesque';
}

.c-nav__item--active .c-nav__link:hover {
	color: #00786E;
}

.c-nav__item--active > a {
	color: #00433D;
	font-family: 'BricolageGrotesque';
}

.c-nav__link {
	text-decoration: none;
	font-size: 18px;
	color: #00433D;
	text-decoration: none;
	font-weight: 300;
	letter-spacing: 0.42px;
	font-family: 'BricolageGrotesque';
}

.c-nav__link > a {
	position: relative;
	top: 2px;
}

.c-nav__link:hover {
	color: #00786E;
}

.c-nav > .c-nav__link {
	margin-bottom: 0;
}
.c-nav > .c-nav__link:not(.c-nav__item--active):hover {
	margin-bottom: 44px;
	color: #00786E;
}

.c-nav__sub-menu-item .c-nav__link:hover {
	color: #00786E;
}

.c-logo {
	margin: 0;
	display: block;
	float: left;
}
.c-logo__link {
    background-image: url(/hc/theming_assets/01JHMXTAHN6D4EN41WYENKZRGP);
    background-position: left center;
    background-repeat: no-repeat;
}

/* changes after launch
*/


.article-page .main-content .article-footer {
	padding: 0;
	border: none;
}

.article-page .main-content .article-footer .share {
	float: none;
}

.article-page .main-content .article-footer .share .share-facebook:before,
.article-page .main-content .article-footer .share .share-googleplus:before,
.article-page .main-content .article-footer .share .share-linkedin:before,
.article-page .main-content .article-footer .share .share-twitter:before  {
	background-color: #00433D;
}

.article-page .main-content .article-footer .share .share-facebook:hover:before,
.article-page
	.main-content
	.article-footer
	.share
	.share-googleplus:hover:before,
.article-page .main-content .article-footer .share .share-linkedin:hover:before,
.article-page .main-content .article-footer .share .share-twitter:hover:before {
	background-color: #00786E;
}

.button:hover {
  text-decoration: underline;
  color: #00786E;
}

//User info top left


body .user-info [role='button']:before {
	display: inline-block;
	content: 'Welcome ';
	font-size: 13px;
	font-family: 'DMSans';
	font-weight: lighter;
	vertical-align: top;
}

body .user-info [role='button'] img {
	display: none;
}

body .user-info [role='button'] span {
	font-size: 13px;
	font-family: 'DMSans';
	font-weight: lighter;
	color: #00786E;
	vertical-align: top;
}
  

#user .dropdown-menu {
	left: auto;
	font-family: 'DMSans';
}
body .dropdown-menu > li > a {
	font-size: 13px;
	font-family: 'DMSans';
	font-weight: lighter;
}

/*user page activities
*/
.activities-page .my-activities-nav {
	padding: 10px 20px;
	background-color: #f8f8f8;
	border-radius: 3px;
	text-align: center;
	border: none;
}

.activities-page .my-activities-nav li {
	font-family: 'BricolageGrotesque';
	font-size: 20px;
	font-weight: lighter;
	padding: 0;
	margin: 0 20px;
}

.activities-page .my-activities-nav li.selected,
.activities-page .my-activities-nav li:hover {
	border-bottom: 2px #00786E solid;
}

.activities-page .my-activities-nav li + li {
	border: none;
}

.activities-page .my-activities-nav li a {
	color: #00433D;
	text-decoration: none;
}

.activities-page .my-activities-sub-nav {
	padding: 0 0 18px;
	border: none;
}

.activities-page .my-activities-sub-nav ul {
	text-align: center;
}

.activities-page .my-activities-sub-nav li {
	font-family: 'BricolageGrotesque';
	color: #00433D;
	font-size: 20px;
	font-weight: lighter;
	padding: 0;
	margin: 0 10px;
}

.activities-page .my-activities-sub-nav li.selected {
	border-bottom: 2px #00786E solid;
}

.activities-page .request-table-toolbar {
	padding: 10px;
	background-color: #f8f8f8;
	border-radius: 3px;
	border: none;
}

.activities-page .request-table-toolbar .requests-search,
.activities-page .request-table-toolbar select {
	border-radius: 4px;
	border: 1px #e6e7e8 solid;
	color: #878787;
	font-family: 'DMSans';
	font-weight: lighter;
	font-size: 16px;
	height: 45px;
	background-color: #fff;
}

.activities-page .request-table-toolbar label {
	color: #333;
	font-family: 'DMSans';
	font-weight: lighter;
	font-size: 16px;
	margin-right: 5px;
}

.activities-page .request-table-toolbar .div-label {
	position: relative;
	display: inline-block;
}

.activities-page .request-table-toolbar .div-label:after {
	background-size: 50%;
	content: ' ';
	width: 20px;
	height: 24px;
	right: 10px;
	top: 1px;
	position: absolute;
	pointer-events: none;
	border-radius: 3px;
}

.activities-page .request-table-toolbar select {
	width: 240px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 10px;
	background-color: #fff;
}

.activities-page .request-table-toolbar select:focus {
	outline: 0;
}

.activities-page .my-activities-table table td,
.activities-page .my-activities-table table th {
	color: #333;
	font-family: 'DMSans';
	font-weight: 400;
	font-size: 16px;
	border-width: 0 0 1px;
	padding: 10px;
}

.activities-page .my-activities-table table td:first-child,
.activities-page .my-activities-table table th:first-child {
	padding-left: 0;
	padding-right: 20px;
}

.activities-page .my-activities-table table td {
	font-weight: lighter;
	font-family: 'DMSans';
  color: #00786E;
}

.activities-page .my-activities-table a {
	padding-top: 5px;
}

.activities-page .my-activities-table .request-status {
	text-transform: uppercase;
	font-family: 'DMSans';
	font-weight: 400;
	font-size: 13px;
	padding: 10px;
}

.activities-page .my-activities-table .request-status.request-solved {
	background-color: #c2c2c2;
}

.activities-page .my-activities-table .request-status.request-open {
	background: #e8f6e9;
}

.activities-page .my-activities-table .request-status.request-answered {
	background: #f7794d;
}

//Home search

.c-home-search{
	background-color: #e8f6e9;
	padding: 50px 0;
	background-size: cover;
	background-position: center;
    position: relative;
    z-index: 99;
    background-image: url('//p4.zdassets.com/hc/theme_assets/1050890/200074286/banner.jpg');
    background-size: cover;
    background-position: center bottom;
}

.c-home-search__content{
	max-width: 550px;
	text-align: center;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.c-home-search__content h1{
	color: #FFFFFF;
	font-weight: normal;
  font-family:'BricolageGrotesque';
	margin: 0 0 40px;
}

.c-home-search .search input[type=submit]{
	border-radius: 0 3px 3px 0;
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20%;
    text-transform: uppercase;
    font-family: 'DMSans';
    font-weight: 700;
    font-size: 16px;
    border: none;
    color: #FFF;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-transition: all .15s cubic-bezier(.35, 0, .35, 1);
    -moz-transition: all .15s cubic-bezier(.35, 0, .35, 1);
    -ms-transition: all .15s cubic-bezier(.35, 0, .35, 1);
    transition: all .15s cubic-bezier(.35, 0, .35, 1);
    background-color: #3C3C3C;
    padding: 6px 16px 3px;
    line-height: 1.5;
    display: block;
    margin-bottom: 0;
    box-shadow: none;
    height: auto;
    vertical-align: middle;
    height: 40px;
    text-transform: capitalize;
}


.c-home-search .search input[type=submit]:hover {
    background-color: #222222;
}

.c-home-search .search input[type=search]{
	border-radius: 3px 0 0 3px;
	border-right: none;
	background: #fff url(//p4.zdassets.com/hc/theme_assets/1050890/200074286/magnifier.svg) no-repeat 10px center / 15px 15px;
    color: #3C3C3C;
    font-size: 21px;
    font-family: 'DMSans';
    font-weight: lighter;
    border: 1px #3C3C3C solid;
    border-right: none;
    display: block;
    width: 80%;
    padding: 4px 20px 0px 40px;
    vertical-align: middle;
    height: 40px;
    line-height: 40px;
}
.c-home-search .search:before{
	display: none;
}

//LINKS


a {
	color: #00433D;
	text-decoration: none
}

a:focus,
a:hover {
	color: #5AB8B0;
	text-decoration: underline
}

a {
	color: #00786E;
	text-decoration: none;
	font-weight: 700;
	font-family: 'DMSans';
}

//Search results


/* FORCE FULL WIDTH: Target both class and element type with !important */
.search-results .search-results-column,
section.search-results-column {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    float: none !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    display: block !important;
}

/* Ensure the container doesn't restrict it */
.search-results {
    display: block !important;
    width: 100% !important;
}

.search-result-link {
	font-size: 16px;
	color: #00786E;
  font-family:'DMSans';
}


.search-result-link:hover {
	font-size: 16px;
  text-decoration: underline;
	color: #5AB8B0;
  font-family:'DMSans';
}


.search-results #algolia-facets .ais-hierarchical-menu--link{
	width: 100%;
	overflow: visible;
	white-space: normal;
    cursor: pointer;
    margin-bottom: 10px;
    line-height: 1.25;
    font-size: 15px;
    font-weight: normal;
  font-family:'DMSans';
	color: #00786E;
}
.search-results #algolia-facets .ais-hierarchical-menu--item__active>div>.ais-hierarchical-menu--link:hover{
	text-decoration: underline;
	color: #5AB8B0;
}


.btn-default,
.wpcf7 input[type=submit] {
	color: #fff;
	background-color: #00433D;
	border-color: #fff;
	padding: 10px 20px 5px;
}


.action-button,
.wpcf7 input[type=submit] {
	text-transform: uppercase;
	font-family: 'BricolageGrotesque';
	font-weight: 700;
	font-size: 16px;
	border: none;
	color: #fff
}

.search-result-description{
  font-family:'DMSans';
}

.search-result-description em{
	font-style: normal;
  font-weight: bold;
  background-color: #d8ff4f;
  padding: 0px 3px 2px;
  border-radius: 3px;
}

.aa-article-hit--section {
	color: #00786E;
}
.aa-article-hit--title .aa-article-hit--highlight,
.aa-article-hit--body .aa-article-hit--highlight {
	position: relative;
	color: #00786E;
  font-family:'DMSans';
}

.aa-article-hit--title .aa-article-hit--highlight::before {
	background-color: #00786E;
}

.aa-article-hit--body .aa-article-hit--highlight:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: #00786E;
	opacity: 0.1;
}
/* Centered text for Kalam 27/01/2025*/
.centered-text {
  margin: 0 15%;
  text-align: center;
	font-size: 20px;
}




/* ============================================
   Category Cards - Icon Support
   Adds visual icons above card titles
============================================ */

/* Icon container */
.c-home-articles__item-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px auto;
  background-color: #e8f6e9;
  border-radius: 50%;
}

.c-home-articles__item-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Adjust card padding when icon is present */
.c-home-articles__item--with-icon {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Center text when icon is present */
.c-home-articles__item--with-icon .c-home-articles__item-title {
  text-align: center;
}

/* Description text styling */
.c-home-articles__item-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #3c3c3c;
  margin: 12px 0 0 0;
  text-align: center;
  font-family: 'DMSans';
  text-decoration: none;
}

/* Responsive: Smaller icons on mobile */
@media screen and (max-width: 767px) {
  .c-home-articles__item-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
  }
  
  .c-home-articles__item-icon img {
    width: 28px;
    height: 28px;
  }
  
  .c-home-articles__item--with-icon {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

.c-btn-tertiary--white {
  background-color: #ffffff;
}

.c-btn-tertiary--white:hover {
  background-color: #00433D;
  color: #ffffff;
}

/* ============================================
   Updated Search Form Layout (Input + Button)
============================================ */

/* 1. Make the form a Flex container to put elements side-by-side */
.c-simple-search__form form.search {
  display: flex;
  gap: 16px; /* Space between input and button */
  width: 100%;
  max-width: 700px; /* Ensure it matches your design width */
  margin: 0 auto;
}

/* 2. Make the Input Field fill the available space */
.c-simple-search--white .c-simple-search__form form.search input[type="search"] {
  flex-grow: 1;
  width: auto; /* Override default 100% width if present */
  height: 48px; /* Fixed height for alignment */
  background-color: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding-left: 16px;
  /* Font styling matching your theme */
  font-family: 'DMSans', sans-serif; 
  font-size: 16px;
  color: #3c3c3c;
}

/* ============================================
   Updated Search Button (Left Text / Right Icon)
   Fixed: Base64 Icon to prevent syntax errors
============================================ */

.c-simple-search--white .c-simple-search__form form.search input[type="submit"] {
  /* 1. Dimensions & Box Model */
  height: 48px;
  border-radius: 4px;
  border: 1px solid #00433D;
  background-color: #00433D; /* Dark Green */
  
  /* 2. TEXT STYLING - Using !important to override any hidden text settings */
  color: #ffffff !important;
  font-family: 'DMSans', sans-serif !important;
  font-size: 16px !important;
  font-weight: bold !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-indent: 0 !important; /* Fixes text if it was hidden off-screen */
  
  /* 3. ALIGNMENT */
  text-align: left;        /* Pushes text to the left */
  padding-left: 20px;      /* Space before the word SEARCH */
  padding-right: 48px;     /* Space for the icon on the right */
  width: auto !important;  /* Ensure button is wide enough for text */
  min-width: 140px;        /* Minimum width to ensure it looks like a button */

  /* 4. ICON (Base64 Encoded to fix Red Code syntax error) */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjExIiBjeT0iMTEiIHI9IjgiLz48bGluZSB4MT0iMjEiIHkxPSIyMSIgeDI9IjE2LjY1IiB5Mj0iMTYuNjUiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: right 16px center; /* Icon sits 16px from the right edge */
  
  /* 5. Interaction */
  cursor: pointer;
  transition: background-color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

/* Hover State */
.c-simple-search--white .c-simple-search__form form.search input[type="submit"]:hover {
  background-color: #00786E;
  border-color: #00786E;
  text-decoration: none;
}
/* Mobile Responsiveness: Stack them on very small screens */
@media screen and (max-width: 480px) {
  .c-simple-search__form form.search {
    flex-direction: column;
    gap: 12px;
  }
  
  .c-simple-search--white .c-simple-search__form form.search input[type="submit"] {
    width: 100%;
  }
}


/* ============================================
   Contact Card Tags (Fastest Response / Complex Issues)
============================================ */
.c-contact-card__tag {
  display: inline-block;
  background-color: #e8f6e9; /* Pale Green Background */
  color: #00433D;            /* Dark Green Text */
  
  /* Typography */
  font-family: 'DMSans', sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  /* Spacing & Shape */
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 12px; /* Space between tag and title */
}


.pagination ul {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}