#content_form {
  margin-bottom: 5px;
}

/*---- New */

/*Create Request Button*/
.buttonRequest {
  color: #428bc5 !important;
  padding: 12px 22px !important;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 40px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  transition: background-color .2s, color .2s, border .2s;
}

/*Search button*/
#paramsearchid, #search-filter {
  color: #ffffff !important;
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  border: 1px solid #ccc !important;
  background-color: #ffffff !important;
  height: 56px !important;
  border-radius: 10px 0px 0px 10px !important;
}

#search_control {
  height: 56px !important;
  background-color: #ffffff !important;
  border-radius: 10px 0px 0px 10px !important;
  border: 1px solid #ccc !important;
}

.custom-search-control{
  color: #428bc5 !important;
  border-radius: 0px 10px 10px 0px !important;
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 6px 20px !important;
  width: fit-content !important;
  border-style: solid !important;
  background-color: #ffffff !important;
  height: 56px !important;
  border: 1px solid #ccc !important;
}
  
/* Header Search*/
#navbar .dropdown-search #q {
  height: 56px !important;
  background-color: #ffffff !important;
  border-radius: 10px 0px 0px 10px !important;
  border: 1px solid #ccc !important;
}

/* Page Heading banner ----------------------------------------------------------- */
.page-heading-banner-container {
  background-image: url('/page-heading-banner.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-heading-solution-container {
  background-image: url('/solution-heading-banner.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-banner-title {
  color: #ffffff !important;
}

.header-banner-description {
  color: #ffffff !important;
  margin-top: 2.5vw;
}

/* Page Header (Only Page Name) ----------------------------------------------------------- */
.page-heading-service-request {
  background-image: url('/Theme_Background.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-heading-service-request h1{
  color: #ffffff !important;
}

#page-heading-service-reques-container{
  margin-left: auto;
  margin-right: auto;
}

#contact-container{
  background-color: #f4f4f4;
  padding: 0px !important;
}

/* Body -------------------------------------------------------------------*/
/* Categories (Topic) Styles */

#category-container-header {
  margin-top: 88px;
  /*margin-left: 20%; TIA*/
  margin-bottom: 0;
  font-weight: 400;
  font-size: 32px;
  line-height: 45px;
}

.categoriesContainer {
  display: flex;
  /*flex-direction: row;*/
  justify-content: center;
  /* align-items: center;
  height: 100%;
  background-color: #ffffff; */
  flex-wrap: wrap;
  /* margin-inline: auto; */
  margin: 40px; /* fix margin on top of matrix container*/
  /*margin: 0px 10%;*/
  /*flex-basis: 30%;*/
  /*-webkit-box-pack: center;/1*TIA*/
  list-style: none;/*TIA*/
  /*padding: 0;
  margin-top: 20px;
  TEST*/
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  width: 100%;
  position: relative;
}

.category {
  display: flex;
  flex-direction: column;
  /*justify-content: space-evenly;*/
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 100%;
  background-color: #ffffff;
  /*border: 2px solid;*/
  border-radius: 15px;
  /*flex-basis: 20%; Changed to 200px tp fit 5 cards*/
  flex-basis: 200px;
  /*flex-basis: calc(20% - 20px);*/
  height: auto;
  min-height: 253px;
  /*margin: 0.5em;*/
  cursor: pointer;
  transition-duration: 0.3s;/*TIA*/
  transition-timing-function: ease;/*TIA*/
  transition-delay: 0s;/*TIA*/
  transition-property: all;/*TIA*/
  box-shadow: 0 2px 40px -8px rgba(182, 182, 182, 0.5);/*TIA*/
  margin: 0 10px 20px;
  color: #428BC5;/*TIA*/
  box-sizing: border-box;/*TIA*/
}

.category:focus,
.category:hover {
  color: #ffffff;
  background-color: #428bc5;
  /*text-decoration: none;/*TIA*/
  box-shadow: 0 4px 20px 8px #b6b6b6;/*TIA*/
}

.categoryTitle {
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
}

/*Hides image on hover*/
.category:focus .categoryIcon,
.category:hover .categoryIcon
{
display: none;
}

.categoriesContainer a:not(.btn):hover {
  text-decoration: none !important;
}

.categoriesContainer a:hover {
  text-decoration: none !important;
}

/*Makes font #fffffffff on hover*/
.category:hover > .categoryTitle,
.category:focus > .categoryTitle {
  color: #ffffff;
}

@media only screen and (max-width: 1500px) {
  /*.categoriesContainer {
    margin: 3% 10%;
  }*/
  #category-container-header {
    margin-left: 10%;
  }
  .home-topArticles-container {
    margin: 10% !important;
  }
}

@media only screen and (max-width: 1000px) {
  /*.categoriesContainer {
    margin: 3% 7%;
  }*/
  #category-container-header {
    margin-left: 7%;
  }
  .home-topArticles-container {
    margin: 7% !important;
  }
  .category {
    flex-basis: 45%;
  }
}

@media only screen and (max-width: 600px) {
  .category, .kbCategory, .subCategory {
    flex-basis: 100% !important;
  }
}

/*Header: Support for Our Products*/
#category-container-header {
  margin-bottom: 40px;
  text-align: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 30px;
}

/*All heading fonts besides h1 - used in Article*/
h1, h2, h3, h4, h5, h6 {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
}

/*h1 heading fonts*/
h1 {
  color: #ffffff !important;
}

h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
}

p {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* Home Cards Image*/
.categoryIcon {
  width: 100px;
  height: auto;
}

/*Update designer sections*/
.columnBlockLayout {
  margin-top: 1px !important;
  margin-bottom: 1px !important;
  padding: 1px !important; 
  border-radius: 16px !important;
}

/* Navigation Pane items */
.nav-link {
  color:#2a4175;
}

/* Highlight current item*/
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #2a4175 !important;
  background-color: #9e9e9e36 !important;
}

/* Highlight current item*/
.nav-pills > li.active > a {
  background-color: #428bc5 !important; /* Highlight color */
  color: white !important; /* Text color */
}

.nav-pills > li.active > a:hover {
  background-color: #357ebd !important; /* Hover color for active item */
}

/* Main Content - Card Style */
.contentWrapper {
  background-color: #ffffff;
  border: 1px solid hsla(0, 0%, 9%, .04);
  border-radius: 16px;
  color: #556575;
  box-shadow: 0 2px 8px -2px hsla(0, 0%, 9%, .08), 0 8px 12px -2px hsla(0, 0%, 9%, .16);
  word-break: break-word;
  padding-top: 70px;
  padding-right: 90px;
  padding-bottom: 70px;
  padding-left: 90px
}

.categories-container {
  display: flex;
  background-color: #ffffff;
  margin: 0 0 40px 0 !important;
  padding: 0 !important;
  color: #556575;
  word-break: break-word;
  width: 100%;
  box-sizing: border-box;
}

.contentWrapperTest {
  background-color: #ffffff;
  border: 1px solid #DDDBDA;
  border-radius: 16px;
  color: #556575;
  word-break: break-word;
  padding-top: 70px;
  padding-right: 90px;
  padding-bottom: 70px;
  padding-left: 90px
}

/* Sub categories ------------------------------------------------------------- */

.subCategoriesContainer {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  margin: 20px 40px 40px 40px;
  list-style: none;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  width: 100%;
  position: relative;
}

.subCategory {
  flex-basis: 45%;
  margin-right: 2%;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  align-items: center;
  height: 260px;
  background-color: #ffffff;
  border: 1px solid #DDDBDA;
  border-radius: 16px;
  padding: 24px;
  overflow-x: visible;
  position: relative;
  margin: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Initial shadow */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth transition for shadow and transform */
}

.subCategory:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
  transform: translateY(-5px); /* Lift up effect on hover */
  text-decoration: none;
  color: inherit;
}

.subCategory:focus,
.subCategory:active {
  text-decoration: none !important;
  color: inherit !important;
}

.subCategory:hover .subCategoryTitle,
.subCategory:focus .subCategoryTitle,
.subCategory:active .subCategoryTitle {
  color: #428BC5 !important;
}

.subCategoryDescription,
.subCategory-pills,
.subCategory-pills-value {
  text-decoration: none !important;
}

.subCategoryTitle {
  width: 85%;
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.17;
  color: #2a4175;
  max-height: calc(1.17 * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}

.subCategoryDescription {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #6c757d;
  max-height: calc(1.5 * 3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  text-decoration: none !important;
}

.subCategory-pills {
  display: flex;
  flex-wrap: wrap;
  padding-top: 1rem;
  bottom: 24px;
  left: 18px;
  position: absolute;
  white-space: nowrap;
}

.subCategory-pills-value {
  background: #ecebea;
  border-radius: 20px;
  color: #364959;
  font-size: 14px;
  padding: 6px 12px;
  margin-right: 0.5rem; /* Add spacing between pills */
}

.subCategory-icon-container {
  width: 18px; /* Adjust the width as needed */
  height: auto; /* Adjust the height as needed */
  /*background-color: rgb(5, 98, 138);*/
  margin-right: 5px; /* Adjust the margin as needed */
}

.subCategory-icon {
  width: 100%;
  height: 100%;
}

.tile-type {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  color: #838586;
  font-size: 14px;
  font-weight: 700;
}

/* On hover Products | Solutions
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  color: #dc4a50 !important;
}

.nav-tabs > li > a:hover {
  color: #428BC5 !important;
}*/

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  color: #428BC5 !important;
  border-top: transparent !important;
  border-left: transparent !important;
  border-right: transparent !important;
  border-bottom: 1px solid #2a4175 !important;
}

.popular-articles-title,
.recent-articles-title {
  font-family: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0px;
  text-align: left;
  color: #032D60;
  margin: 15px 0 12px 40px;
}

.recent-articles-list,
.popular-articles-list {
  padding-left: 55px;
  margin-top: 7px;
  margin-bottom: 5px;
}

.recent-articles-list a,
.popular-articles-list a {
  font-family: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 32px;
  color: #000;
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recent-articles-list a:hover,
.recent-articles-list a:focus,
.popular-articles-list a:hover,
.popular-articles-list a:focus {
  color: #428bc5;
  text-decoration: none;
}
.recent-articles-list a img,
.popular-articles-list a img {
  width: 12px;
  height: 14px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: text-top;
}

.recent-articles-list .panel-description,
.popular-articles-list .panel-description {
  font-family: Avenir;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #7D7D7D;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer -------------------------------------------------------------------*/
.footer-custom {
  border-top: solid 1px #ededed;
  color: #838586;
  margin-top: 0px;
}

.footer-custom a {
  color: #838586;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  /*display: -webkit-box;*/
  display: flex;
  flex-wrap: wrap;
  /*-webkit-box-pack: justify;*/
  justify-content: space-between;
  /*-webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;*/
}
.footer-language-selector {
  display: block;
}

@media (min-width: 768px) {
  .footer-inner {
    /*-webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;*/
            flex-direction: row-reverse;
  }
  .footer-language-selector {
    /*display: -webkit-box;*/
    display: flex;
  }
}

@media (min-width: 1200px) {
  .footer-inner {
    padding: 0 15px;
    width: 90%;
  }
}

.footer-inner > section {
  display: block;
  width: 100%;
}

.footer-language-selector p {
  margin: 0;
  color: #838586;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.footer-address-block p {
  font-weight: 400;
  line-height: 24px;
  color: #dadada;
  font-size: 16px;
  margin-top: 58px;
}

.footer-bottom-custom a {
  color: #838586;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 8px 0 8px 8px;
  text-align: center;
}

[dir="rtl"] .footer-bottom-custom a {
  padding: 8px 8px 8px 0;
}

.footer-bottom-custom .footer-content a:before {
  display: inline-block;
  content: ".";
  padding-right: 8px;
}

[dir="rtl"] .footer-bottom-custom .footer-content a:before {
  padding-right: 0;
  padding-left: 8px;
}

@media (min-width: 768px) {
  .footer-bottom-custom .footer-content a:before {
    display: none;
  }
  .footer-bottom-custom a {
    padding: 6px 8px 6px 24px;
  }
  [dir="rtl"] .footer-bottom-custom a {
    padding: 8px 24px 8px 6px;
  }
  .footer-bottom-custom a:before,
  [dir="rtl"] .footer-bottom-custom a:before {
    display: none;
  }
}

.footer-bottom-custom a:first-child:before {
  display: none;
}
.footer-address-block img {
  height: 27px;
}

.share-wrapper {
  margin: 55px 0 30px;
}
.share-wrapper p {
  margin-bottom: 17px;
  font-weight: 500;
  font-size: 15px;
  color: #dc4a50;
}
.footer-address-block {
  width: 300px;
  padding: 0 0;
}
@media (min-width: 768px) {
  .footer-inner > section {
    /*display: -webkit-box;*/
    display: flex;
    /*-webkit-box-flex: 1;*/
            flex: 1 0 58%;
    width: 58%;
  }
  .footer-address-block {
    padding: 0 15px 0 30px;
  }
  [dir="rtl"] .footer-address-block {
    padding: 0 30px 0 15px;
  }
}

/*Footer Phone Number*/
.footer-num a {
color: #428bc5
}

.footer-links {
  /*display: -webkit-box;*/
  display: flex;
  /*-webkit-box-orient: vertical;
  -webkit-box-direction: normal;*/
  flex-direction: column;
  /*-webkit-box-flex: 1;*/
  flex: 1 0 45%;
  /*margin-right: 8px; TIATMP*/
  float: left;
  width: 45%;
  margin-top: 10px;
}

[dir="rtl"] .footer-links {
  float: right;
  /*margin-left: 10px; TIATMP*/
  margin-right: 0;
}

.footer-links > a {
  font-weight: 900;
  font-size: 17px;
  color: #ffffff;
}

.footer-links > a:hover,
.footer-links li a:hover,
.footer-bottom-custom .footer-content a:hover {
  color: #428BC5;
  text-decoration: none;
}

.footer-links li {
  margin-top: 15px;
}

.footer-links li a {
  font-size: 15px;
  font-weight: normal;
}

[dir="rtl"].footer-links {
  margin-right: 0;
  margin-left: 10px;
}

.footer-solution-block,
.footer-about-block,
.footer-learn-clock {
  height: 159px;
}
@media (min-width: 380px) {
  .footer-solution-block,
  .footer-about-block,
  .footer-learn-clock {
    height: auto;
  }
}

@media (min-width: 768px) {
  .footer-links li {
    margin-top: 30px;
  }
  .footer-links:last-child {
    margin-right: 30px;
  }
  [dir="rtl"] .footer-links {
    margin-left: 15px;
  }
  [dir="rtl"] .footer-links:last-child {
    margin-right: 0;
    margin-left: 30px;
  }
  .footer-links {
    /*-webkit-box-flex: 1;*/
    flex: 1 0 15%;
    float: none;
    margin-bottom: 30px;
  }
}

@media (min-width: 1024px) {
  .footer-links {
    margin-right: 15px;
  }
}

.footer-mobile-link {
  display: block;
}
.footer-desktop-link {
  display: none;
}
@media (min-width: 768px) {
  .footer-mobile-link {
    display: none;
  }
  .footer-desktop-link {
    display: block;
  }
}

.footer-language-selector .dropdown-toggle {
  padding: 0 0 0 20px;
}

[dir="rtl"] .footer-language-selector .dropdown-toggle {
  padding: 0 20px 0 0;
}

.footer-language-selector .dropdown-menu-end {
  bottom: 25px;
}

.footer-top-custom {
  background-color: #00153A;
  padding: 50px 0;
}
@media (min-width: 768px) {
  .footer-top-custom {
    padding: 78px 0 93px;
  }
}
.footer-bottom-custom {
  background-color: #001130;
  padding: 10px 0;
}

.footer-bottom-custom > .footer-inner {
  /*-webkit-box-align: center;*/
  align-items: center;
  /*-webkit-box-orient: vertical;
  -webkit-box-direction: normal;*/
  flex-direction: column;
  text-align: center;
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .footer-bottom-custom > .footer-inner {
    /*-webkit-box-orient: horizontal;
    -webkit-box-direction: normal;*/
    flex-direction: row;
    text-align: justify;
    margin-bottom: 0;
    padding: 10px 15px;
  }
}

.footer-content {
  /*-webkit-box-align: center;*/
  align-items: center;
  /*display: -webkit-box;*/
  display: flex;
}

.footer-inner ul.share {
  margin-right: 15px;
}

[dir="rtl"] .footer-inner ul.share {
  margin-right: 0;
  margin-left: 15px;
}
.footer-inner ul.share > li > a {
  color: #ffffff;
  border: 1px solid #dc4a50;
  display: inline-block;
  text-align: center;
  margin-right: 6px;
  line-height: 34px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /*-webkit-transition: background-color 0.2s;*/
  transition: background-color 0.2s;
}
.footer-inner ul.share > li:hover a {
  background-color: #dc4a50;
}
.copyright {
  margin-top: 0;
}

@media (min-width: 920px) {
  .copyright {
    margin-top: 15px;
  }
}

.footer-links-list{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.share{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

/* Bottom banner*/
.banner-container {
  background-image: url('/Theme_Background.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.banner-title {
  font-size: 36px;
  font-weight: 500;
  color: #ffffff !important;
  padding: 15px !important;
  min-width: auto;
}

.flex-center {
  display: flex;
  align-items: center;
  height: 100%;
  flex-wrap: wrap;
}

@media (max-width: 993px) {
  .flex-center {
    flex-direction: column; /* Stack columns vertically on small screens */
  }
}

@media (min-width: 993px) {
  .flex-center {
    width: 100%; /* Apply full width for larger screens */
  }
}

a, .a {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-weight: 400;
  font-size: 16px;
}

/* Font Topic Cards Heading*/

#myTab {
  font-weight: 700 !important;
  font-size: 24px !important;
}

/* Navigation Pane Font Weight*/
#menu {
  font-weight: 700 !important;
}

/* Navigation Pane - Hover

.nav-pills .nav-link {
  border-radius: 0;
}
.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
  background-color: #0d6efd;
  color: #fffffffff;
}*/

.container {
  height: fit-content !important;
}

/* Navigation Pane*/
.nav-link {
  padding-left: 15px;
  padding-right: 15px;
}

.nav-link i {
  font-size: 16px;
}

.nav-link span {
  margin-left: 10px;
  display: inline-block;
}

.navbar-toggle .icon-bar {
  background-color: #000;
}

.sidepanel {
  margin-top: 20px;
  margin-bottom: 60px;
}

.navbar-collapse {
  border-top: none !important;
}

/* ---------- Section Wrapper ---------- */
.section-wrapper {
  padding: 0px 30px 30px 30px;
  background-color: #ffffff;
}

/* ---------- Section Header ---------- */
.section-header {
  margin-bottom: 20px;
}

.section-title {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 34px;
  font-weight: 600;
  color: #2a4175;
  margin-bottom: 8px;
}

.section-description {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: #838586;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ---------- View Toggle ---------- */
.view-toggle {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.toggle-btn {
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toggle-btn:hover {
  background: #eee;
}

.toggle-btn.active {
  background: #428bc5;
  color: #fff;
  border-color: #428bc5;
}

/* ---------- Shared Article Styles ---------- */
.section-articles {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article-item {
  border-radius: 10px;
  overflow: hidden; /* ensures rounded corners apply */
  cursor: pointer; /* whole card clickable */
}

.article-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #428bc5;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.article-link strong {
  display: block;
  margin-bottom: 6px;
}

.section-article-description {
  margin: 6px 0 0;
  font-size: 14px;
  color: #838586;
  line-height: 1.5;
}

/* Hover effect applied ONLY through parent */
.article-item:hover .article-link {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  background-color: #eef5fb;
  text-decoration: none;
}

/* ---------- List View (default) ---------- */
.section-articles.list-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Tile View ---------- */
.section-articles.tile-view {
  display: grid;
  gap: 24px; /* spacing between tiles */
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .section-articles.tile-view {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .section-articles.tile-view {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Make all tiles same height */
.section-articles.tile-view .article-item {
  display: flex;
}

.section-articles.tile-view .article-link {
  flex: 1; /* fill equal height */
  padding: 24px 28px; /* larger padding for tiles */
}

.article-link:hover,
.article-link:focus,
.article-link:active {
  text-decoration: none;
}

/* ---------- Pagination ---------- */
.pagination {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.page-link {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background-color: #f0f0f0;
  color: #428bc5;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.page-link:hover {
  background-color: #e0e0e0;
}

.current-page {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background-color: #428bc5;
  color: #ffffff;
  font-weight: 700;
}

/* ---------- No Articles ---------- */
.no-articles {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: #838586;
  margin-top: 10px;
}

/* ---------- Responsive ---------- */
/*@media (min-width: 768px) {
  .section-articles {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
  /*}
}

@media (min-width: 1200px) {
  .section-articles {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
  /*}
}*/

/* Article styling*/

.article-container {
  /*display: flex;*/
  background-color: #ffffff;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 4px;
  color: #838586;
  /*box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(241, 243, 245) 0px 5px 20px 0px, rgba(0, 0, 0, 0.05) 0px 3px 3px 0px;*/
  word-break: break-word;
  width: 100%;
}

.article-main, .answers-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box; /* Ensures padding and border are included in the width */
}

.articleTitle {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #000000 !important;
  margin-bottom: 12px;
}

.articleDescription {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  color: #838586 !important;
  margin-bottom: 12px;
}

.answers-container{
  box-sizing: border-box;
}

.article-wrapper {
  width: 100%;
  margin-bottom: 12px;
  padding: 16px;
  box-sizing: border-box; 
}

.article-pills {
  display: flex; /* Set display to flex */
  flex-wrap: wrap; /* Allow flex items to wrap */
  padding-top: 1rem;
  bottom: 24px; /* Adjust position as needed */
  left: 18px; /* Adjust position as needed */
  white-space: nowrap;
}

.article-pills-value {
  display: inline-block;
  background: #ecebea;
  border-radius: 20px;
  color: #364959;
  font-size: 14px;
  padding: 6px 12px;
  margin-right: 0.5rem; /* Add spacing between pills */
}

.relatedarticle-pills {
  display: flex; /* Set display to flex */
  flex-wrap: wrap; /* Allow flex items to wrap */
  /*padding-top: 1rem;*/
  /*bottom: 24px; /* Adjust position as needed */
  left: 18px; /* Adjust position as needed */
  white-space: nowrap;
}

.relatedarticle-pills-value {
  display: inline-block;
  background: #ecebea;
  border-radius: 20px;
  color: #364959;
  font-size: 12px;
  font-weight: 200;
  padding: 6px 12px;
  margin-right: 0.5rem; /* Add spacing between pills */
}

/* Remove all bootstrap P styling*/

.knowledge-article-content p,
.knowledge-article-content ul,
.knowledge-article-content ol,
.knowledge-article-content li,
.knowledge-article-content blockquote,
.knowledge-article-content table,
.knowledge-article-content th,
.knowledge-article-content td {
  all: revert; /* restore browser defaults (ignores Bootstrap overrides) */
  color: #1C1C1CA6 !important;
}

.panel-default > .panel-body, .list-group-item {
    color: #1C1C1CA6 !important;
}

/* Article OOTB*/

.page-heading {
  background-image: url('/page-heading-banner-dark-blue.jpg') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.page-header {
  border-bottom: transparent !important;
}

.btn-sm {
  color: #ffffff !important;
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  border-color: #ffffff !important;
  background-color: transparent !important;
  border-radius: 10px !important;
}

.btn-sm:active:hover, .btn-sm:active:focus, .btn-sm:active.focus, .btn-sm.active:hover, .btn-sm.active:focus, .btn-sm.active.focus {
  color: #ffffff;
  background-color: #f2f2f2;
  border-color: #ffffff;
}

#found-my-answer-bottom-comments {
  visibility: hidden !important;
}

.page-header h2 {
  color: #ffffff !important;
}

/* Force breadcrumb links and separators to white */
.page-heading .breadcrumb > li a,
.page-heading .breadcrumb > .active,
.page-heading .breadcrumb-item+.breadcrumb-item::before,
.page-heading .breadcrumb > li+li:before {
  color: #ffffff !important;
}

/* Breadcrumbs */
.breadcrumb > li a,
.breadcrumb > .active,
.breadcrumb-item+.breadcrumb-item::before,
.breadcrumb>li+li:before {
  color: #838586 !important;
}

.page-breadcrumbs .breadcrumb {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  color: #838586 !important;
}

.page-breadcrumbs .breadcrumb a:hover,
.page-breadcrumbs .breadcrumb a:focus {
    color: #428bc5 !important; /* Link color on hover or focus */
}

/* Service Request --------------------------------------------- */

.container {
  margin-left: auto;
  margin-right: auto;
}

.service-request-form-field {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  color: #838586;
  padding-top: 10px !important;
}

.service-request-form-field input,
.service-request-form-field select {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  padding: 6px 13px;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  position: relative;
  flex: 1 0 auto;
  height: 40px;
  border-radius: 10px !important;
  background: rgb(255, 255, 255);
  color: #838586;
  border-color: transparent;
}

.service-request-form-field textarea {
  margin: 0px;
  padding: 10px 10px 40px;
  background: rgb(255, 255, 255);
  outline: 0px;
  color: #838586 !important;
  border-radius: 10px !important;
  box-shadow: transparent 0px 0px 0px 0px inset;
  transition: color 0.1s ease 0s, border-color 0.1s ease 0s;
  font-size: 14px;
  line-height: 1.2857;
  resize: vertical;
  height: 100%;
  border-color: transparent;
}

#contact-form {
  /*justify-content: space-evenly;
  justify-items: center;
  align-content: space-evenly;*/
  margin-top: 20px;
  margin-bottom: 20px;
}

.form-footer-note{
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #838586;
}

.btn-request{
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  color: #428bc5;
  padding: 12px 22px;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 40px;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s ease 0s, color 0.2s ease 0s, border 0.2s ease 0s;
  user-select: none;
  box-shadow: rgba(122, 122, 122, 0.25) 0px 2px 4px 0px;
  cursor: pointer;
  display: inline-block;
  margin: 0; /* Reset margin to ensure no extra space */
}

.btn:hover, .btn:focus, .btn.focus {
  /*color: rgb(66, 139, 197) !important;*/
  border: 1px solid transparent !important;
  color: #ffffff !important;
  background-color: #428bc5 !important;
}

*:focus {
  outline: 0 !important;
}

.control-label {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #838586;
  padding-bottom: 5px;
  margin-top: 10px;
}

.has-error .control-label {
  color: #838586 !important;
}

.control-label .text-danger {
  color: #9f3a38 !important;
}

.submit-btn{
  padding: 0% !important;
}

.form-footer-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 15px !important;
  margin-bottom: 30px;
}

@media (max-width: 576px) {
    .form-footer-btn {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 30px;
    }

    .form-footer-btn .btn {
        width: 100%;
        text-align: center;
    }
}

.form-control::placeholder {
  color: #838586 !important;
}

.form-control,
.form-select {
  border: transparent !important;
  border-radius: 10px !important;
}

/* Submit Request Spinner*/
.spinner {
  width: 20px; /* adjust size as needed */
  height: 20px; /* adjust size as needed */
  border: 2px solid #f3f3f3; /* Light grey */
  border-top: 2px solid #428bc5; /* Blue */
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

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

#success-message {
  margin-bottom: 20px; 
  line-height: 2;
}

/* Address cards */
.contact-cards .card {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 2px 40px -8px rgba(255, 255, 255, 0.5);
  border: 0;
  margin-top: 25px;
  color: #364959;
}

.card {
  margin: 1em 0;
}

.card, .contact-cards > .card {
  max-width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  /*width: 290px;*/
  min-height: 0;
  background: #ffffff;
  padding: 0;
  border: none;
  /*box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;*/
  transition: box-shadow .1s ease, transform .1s ease;
  z-index: '';
}

.contact-cards {
  /*max-width: 375px;*/
  width: 100%;
  /*margin-left: auto;*/
}

.col {
  padding-right: 15px;
  padding-left: 15px;
}

.contact-cards .card .card-title:not(.ui) {
  font-size: 18px;
  color: #364959;
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-bottom: 8px;
}

.card > .card-body > .card-title:not(.ui), .contact-cards > .card > .content > .card-title:not(.ui) {
  font-weight: 700 !important;
  /*font-size: 1.28571429em;*/
  margin-top: -.21425em;
  line-height: 1.28571429em;
}

.card > .card-body > .header, .contact-cards > .card > .content > .card-title {
  display: block;
  margin: '';
  color: rgba(0, 0, 0, .85);
}

.card .card-text a {
  text-decoration: none;
  color: #428bc5 !important;
  font-size: 15px !important;
}

.contact-cards .card .card-text p {
  font-size: 15px !important;
  line-height: 1.6;
}

.card > .card-body > .card-title + .card-text, .card > .card-body > .meta + .card-text, .contact-cards > .card > .card-body > .card-title + .card-text, .contact-cards > .card > .card-body > .meta + .card-text {
  margin-top: .5em;
}

.card > .card-body > .card-text, .contact-cards > .card > .card-body > .card-text p {
  clear: both;
  color: rgba(0, 0, 0, 0.68) !important;
}

.card > .card-body > p, .contact-cards > .card > .card-body > p {
  margin: 0 0 .5em;
}

.contact-cards .card .card-body {
  padding: 25px;
}

.card > .card-body, .contact-cards > .card > .card-body {
  flex-grow: 1;
  background: 0 0;
  margin: 0;
  padding: 1em 1em;
  font-size: 1em;
}

#form-message {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.4285em;
  color: #000000;
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin: 0;
  padding-right: 15px;
  padding-left: 15px;
}

.topContent {
  margin: 10px 0;
}

/* Submit Request button*/
.btn-request .spinner {
  display: none;
  margin-left: 5px;
}

.spinner {
  display: none;
}

.has-error .form-select:invalid, 
.has-error .form-control:invalid {
  border: 1px solid #e0b4b4 !important;
  background: #fff6f6 !important
}

.has-error .form-select:valid, 
.has-error .form-control:valid{
  background: #ffffff !important;
}

.formSubmitted {
  display: none;
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}

/*Menu Testing*/

.dropdown-submenu {
position: relative;
}

.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
/*margin-top: -6px;*/
margin-top: 0px !important;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}

.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}

.dropdown-submenu.pull-left {
float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}

/* Expand dropdown menu to the full width*/
#submenusublink {
right: auto !important;
}

.dropdown-menu {
border-radius: 8px !important;
}  

.dropdown-menu > li > a {
color: #595959 !important;
}

.navbar-inverse .navbar-nav > li > a {
color: #595959 !important;
}

/*NAV Menu Focus*/
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
/*border-bottom: 1px solid #2a4175 !important;*/
background-color: transparent !important;
color: #428bc5 !important;
border: transparent !important;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
/*padding: 1px 18px;
border: 2px solid rgba(0, 0, 0, .15); */
/*padding: 0px !important;*/
border: transparent !important;
}

/* Collapsed hover */
.navbar-inverse .navbar-toggle {
/*border: 1px solid #595959 !important;*/
}

.navbar-inverse .navbar-toggle {
/*border-color: #595959 !important;*/
}

.navbar-toggle {
  cursor: pointer;
  border: 0 !important;
  background-color: transparent !important;
}

#navbar-toggle-header {
  background: url('/collapsedmenu.png') no-repeat center;
  width: 40px;
  height: 40px;
  outline: 0;
  justify-self: flex-end; /* Aligns the button to the right */
}

.glyphicon-custom {
  display: none;
  color: #2a4175;
  font-size: 38px;
}

/* Ensure the navbar header takes full height */
.navbar-header {
  display: flex;
  align-items: center; /* Centers the button vertically */
  justify-content: space-between;
  /*width: 100%; /* Ensures the navbar-header spans the full width */
}

/* Optionally adjust the button style 
#navbar-toggle-line {
  display: flex;
  align-items: center; /* Centers the glyphicon within the button 
  width: 20px;
  height: 20px;
  outline: 0;
  margin-right: 35px;
}*/

.navbar-header:before,
.navbar-header:after {
    content: none !important;
}

/* Animation*/
.navbar-nav > li > a:after {
transition: width .5s ease, background-color .5s ease;
}

.caret {
color: #dc4a50 !important;
}

/* Highlight on hover*/
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
background-color: transparent !important;
border-color: transparent !important;
color: #428bc5 !important;
}

/* Sub menu*/
.nav .open a:hover, .nav .open a:focus {
background-color: transparent !important;
border-color: transparent !important;
color: #428bc5 !important;
}
/*.open>.dropdown-menu{
background-color: var(--portalThemeColor4, #ffffff);
}
.open>.dropdown-menu>li>a{
color: var(--portalThemeOnColor9, #428bc5);
}


.open .dropdown-menu > li > a:hover,.dropdown-menu > .active > a:hover{
color: var(--portalThemeColor4, #ffffff);
background-color: var(--portalThemeOnColor9, #428bc5);
text-decoration: Underline;

}
.dropdown-menu>.active>a{
color: var(--portalThemeColor4, #ffffff);
background-color: var(--portalThemeOnColor9, #428bc5);
text-decoration: Underline;

}
.open .dropdown-menu>.active>a:focus{
color: var(--portalThemeColor4, #ffffff);
background-color: var(--portalThemeOnColor9, #428bc5);
text-decoration: Underline;

}*/

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
color: #ffffff;
background-color: transparent !important;
}

.navbar-inverse .navbar-nav > .open > a {
color: #ffffff;
background-color: transparent !important;
}

.dropdown-menu>li>a {
padding: 5px 30px !important;
}

/*
.marginBottom-0 {
margin-bottom: 0;
}

.dropdown-submenu:hover > a:after {
  border-left-color: #555;
}


/*.dropdown:hover .dropdown-menu {
display: block;
}*/

/* Assuming this class for submenu visibility */
/*
.dropdown-submenu {
display: none; /* Hidden by default 
}

.dropdown-menu > .open > .dropdown-submenu {
display: block; /* Show submenu when parent is open 
}

.dropdown-submenu:hover {
display: block; /* Show submenu on hover 
}

/* Knowledge Base - Home - Extension ------------------------------------------------------------- */
.kbcategoriesContainer {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  margin: 40px; 
  list-style: none;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  width: 100%;
  position: relative;
}

.kbCategory {
  flex-basis: 30%;
  margin-right: 2%;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  align-items: center;
  height: 240px;
  background-color: #ffffff;
  border: 1px solid #DDDBDA;
  border-radius: 16px;
  padding: 24px;
  overflow-x: visible;
  position: relative;
  margin: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.kbCategory:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
  transform: translateY(-5px); /* Lift up effect on hover */
  text-decoration: none !important;
}

.kbCategory:focus,
.kbCategory:active {
  text-decoration: none !important;
  color: inherit !important;
}

.kbCategory:hover .kbcategoryTitle,
.kbCategory:focus .kbcategoryTitle,
.kbCategory:active .kbcategoryTitle {
  color: #428BC5 !important;
}

.kbcategoryDescription,
.kbcategory-pills,
.kbcategory-pills-value {
  text-decoration: none !important;
}

.kbcategoryTitle {
  width: 85%;
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.17;
  color: #2a4175;
  max-height: calc(1.17 * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  /*margin-top: 16px;*/
  margin-bottom: 8px;
}

.kbcategoryDescription {
  margin-top: 8px; /* Adjust margin-top as needed */
  font-size: 14px; /* Equivalent to 14px */
  line-height: 1.5; /* Adjust line-height as needed */
  color: #838586; /* Equivalent to #7c7c7c */
  max-height: calc(1.5 * 3);
  overflow: hidden; /* Keep the same overflow */
  display: -webkit-box; /* Keep the same display for WebKit */
  -webkit-box-orient: vertical; /* Keep the same orientation for WebKit */
  -webkit-line-clamp: 3; /* Keep the same line clamp for WebKit */
  text-overflow: ellipsis; /* Keep the same text-overflow */
  overflow: hidden;
  /*#fffffffff-space: nowrap;*/
}

.kbcategory-pills {
  display: flex; /* Set display to flex */
  flex-wrap: wrap; /* Allow flex items to wrap */
  padding-top: 1rem;
  bottom: 24px; /* Adjust position as needed */
  left: 18px; /* Adjust position as needed */
  position: absolute;
  white-space: nowrap;
}

.kbcategory-pills-value {
  background: #ecebea;
  border-radius: 20px;
  color: #364959;
  font-size: 14px;
  padding: 6px 12px;
  margin-right: 0.5rem; /* Add spacing between pills */
}

.kbcategory-icon-container {
  width: 18px; /* Adjust the width as needed */
  height: auto; /* Adjust the height as needed */
  /*background-color: rgb(5, 98, 138);*/
  margin-right: 5px; /* Adjust the margin as needed */
}

.kbcategory-icon {
  width: 100%;
  height: 100%;
}

.tile-type {
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #838586;
  font-size: 14px;
  font-weight: 700;
}

.kbcategory-icon-container {
  width: 18px; /* Adjust the width as needed */
  height: auto; /* Adjust the height as needed */
  /*background-color: rgb(5, 98, 138);*/
  margin-right: 5px; /* Adjust the margin as needed */
}

.container-fluid {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.solutions-container {
  background-color: rgba(199, 197, 197, 0.18);
}

/* Sing in page
#content{
background-color: #f4f4f4 !important;
border-radius: 16px !important;
}*/

#Username, #PasswordValue, #Email {
font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
padding: 6px 13px;
width: 100%;
box-sizing: border-box;
font-size: 12px;
font-weight: 400;
font-style: normal;
position: relative;
flex: 1 0 auto;
height: 40px;
border-radius: 10px !important;
color: #838586;
border: 1px solid #838586 !important;
}

.form-group .btn-default,
.form-group .btn-primary,
.btn-primary {
background-color: #428bc5 !important;
border-color: #428bc5 !important;
color: #ffffff !important;
border-radius: 40px;
border: 1px solid;
font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-size: 16px;
padding: 10px;
}

#local-login-heading, #external-login-heading {
color: #838586 !important;
font-size: 14px !important;
}

#RemmeberMe {
background-color: #428bc5 !important;
}

.checkbox {
font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
color: #838586 !important;
}

.help-block {
color: #838586 !important;
}

#ProfileFormView {
background-color: #f4f4f4 !important;
padding: 10px !important;
color: #595959 !important;
font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
border-radius: 10px !important;
}

.well, .panel {
font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
/*border-radius: 10px !important;*/
color: #595959 !important;
}

#mainContent, .profile-info {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.list-group-item:first-child {
border-radius: 10px !important;
}

/* Responsive design */

/* Font Size - Media*/


@media only screen and (max-width: 991.98px) {
  .home-subtitle {
    margin: 35px 0 20px 0;
  }
  
  .home-subtitle h1 {
    font-size: 32px !important;
    font-weight: 700 !important;
  }
  
  #home-searchblock {
    margin-bottom: 50px;
  }
  
  .header-banner-title,
  .page-header h1 /* OOTB article header*/ {
    font-size: 24px !important;
    /*font-weight: 700 !important;*/
  }
  
  .header-banner-description {
      font-size: 13px;
  }
  
  .hdr-object-embed {
    width: 100px;
    height: auto;
  }
  
  .page-heading-service-request h1 {
    font-size: 30px !important;
  }
  
  .page-header-title,
  .page-header {
    margin-top: 50px;
    margin-bottom: 65px;
  }

  .search-header-title{
    margin-bottom: 65px;
  }
  
  #home-main-title,
  #home-articletitle-large {
    font-size: 24px !important;
  }
  
  /*Product Solutions Title on the Home Page*/  
  #content1-tab, #content2-tab {
    font-size: 22px !important;
    font-weight: 700 !important;
  }
}

@media only screen and (min-width: 992px) {
  .home-subtitle {
    margin: 65px 0 20px 0;
  }
  
  .home-subtitle h1 {
    font-size: 56px !important;
    font-weight: 700 !important;
  }
  
  #home-searchblock {
    margin-bottom: 100px;
  }
  
  .header-banner-title {
      font-size: 56px !important;
  }

  .page-header h1 {
      font-size: 56px !important;
  }
  
  .header-banner-description {
    font-size: 17px;
    letter-spacing: 0.42px;
  }
  
  .hdr-object-embed {
    width: 125px;
    height: auto;
  }
  
  .page-heading-service-request h1 {
    font-size: 56px !important;
  }
  
  .page-header-title,
  .page-header {
    margin-top: 100px;
    margin-bottom: 130px;
  }

  .search-header-title{
    margin-bottom: 130px;
  }
  
  #content1-tab, #content2-tab {
    font-size: 28px !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 1050px) {
  .breadcrumb > li a, 
  .breadcrumb > .active, 
  .breadcrumb-item+.breadcrumb-item::before, 
  .breadcrumb>li+li:before {
    font-size: 12px !important;
  }
}

@media only screen and (max-width: 1199.98px) {
  #navbar-default-products,
  #navbar-default-sections {
    border: 1px solid #DDDBDA;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
    .glyphicon-custom {
      display: inline-block;
  }

  .container-fluid > .navbar-header {
    margin-right: 0px !important;
    margin-left: 0px !important;
  }

  #navbar-toggle-menu {
    display: flex;
    align-items: center; /* Centers the button vertically */
    justify-content: space-between; 
    flex-grow: 1;
  }

  .navbar-menu {
    color: #2a4175;
    margin-left: 15px;
  }
}

@media only screen and (min-width: 1200px) {
    /* Navigation Pane items */
    .nav-link {
      color:#2a4175;
    }

    .navbar-menu {
      display: none;
    }
}

/* ---------- Sidebar Container ---------- */
.kb-sidebar {
  border: 1px solid #DDDBDA;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

/* ---------- Toggle button (mobile only) ---------- */
.kb-sidebar-toggle {
  display: none;
  width: 100%;
  text-align: left;
  background: #f7f7f7;
  border: none;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  color: #2a4175;
  cursor: pointer;
}

.kb-sidebar-toggle:focus {
  outline: 2px solid #1276CE;
}

/* ---------- Subcategory list ---------- */
.kb-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-sidebar-list li {
  border-top: 1px solid #eee;
}

.kb-sidebar-list li:first-child {
  border-top: none;
}

.kb-sidebar-list a {
  display: block;
  padding: 12px 16px;
  color: #2a4175;
  text-decoration: none;
}

.kb-sidebar-list a:hover {
  background: #f0f6fc;
  color: #1276CE;
}

.kb-sidebar-list li:first-child a {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.kb-sidebar-list li:last-child a {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Active state */
.kb-sidebar-list li.active a {
  font-weight: 600;
  color: #1276CE;
  background: #eef5fb;
  border-left: 4px solid #1276CE;
  padding-left: 8px;
}

.kb-sidebar-list li a {
  margin-left: 0 !important;
}

/* ---------- Responsive Behavior ---------- */
@media only screen and (max-width: 1199.98px) {
  .kb-sidebar-toggle {
    display: block;
  }

  .kb-sidebar-list {
    display: none; /* collapsed by default */
  }

  .kb-sidebar-list.open {
    display: block;
  }
  
  .kb-sidebar-list li:first-child a {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* Virtual Agent*/
.pages-chatbot-header {
  background-color: #428BC5 !important;
  color: rgb(255, 255, 255);
  height: 36px;
  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-weight: 400;
  font-size: 16px;
}

.pva-embedded-web-chat-widget {
  background-color: #428BC5 !important;
  border: 1px solid #FFFFFF;
  animation: jump 0.5s ease-in-out 10 alternate; /* 20 iterations of 0.5s = 10 seconds */
}

@keyframes jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Sign In

#local-login-heading .xrm-attribute-value{font-size:0}#local-login-heading .xrm-attribute-value::before{content:"Distributor Account";font-size:14px}
#external-login-heading .xrm-attribute-value{font-size:0}#external-login-heading .xrm-attribute-value::before{content:"Employee Account";font-size:14px}

/* Hide original text */
#external-login-heading {
  display: none !important;
}

/* Inject new text 
#ContentContainer_MainContent_MainContent_RegisterExternalLabel .xrm-attribute-value::before {
  content: "Sign up with your external account";
  font-size: 14px; /* match your styling 
}

/* Container with background */
#content-container.signinpage {
  display: flex;
  /*flex-direction: column;*/
  align-items: center;         
  justify-content: flex-start;  
  position: relative;
  /*overflow: hidden;*/
  
  background: url('/sign-in-background-banner.jpg') no-repeat center center;
  background-size: cover;
}

/* Tabs: Sign in / Redeem invitation */
#content-container.signinpage .signincontainer {
  /*flex: 1 1 auto;  /* flex-grow:0, flex-shrink:0, flex-basis:600px */
  /*max-width: 90%;   /* optional, responsive on smaller screens */
  width: auto;      /* lets flex-basis control the width */
  position: relative;
  z-index: 2;
  margin: 0 0 1.5rem 0;
  /*max-width: 420px;*/
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  justify-content: space-around;
  padding: 20px;
}

/* Tabs: Sign in / Redeem invitation */
#content-container.signinpage .registercontainer {
  /*flex: 1 1 auto;  /* flex-grow:0, flex-shrink:0, flex-basis:600px */
  /*max-width: 90%;   /* optional, responsive on smaller screens */
  width: auto;      /* lets flex-basis control the width */
  position: relative;
  z-index: 2;
  margin: 0 0 1.5rem 0;
  /*max-width: 420px;*/
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  justify-content: space-around;
  padding: 20px;
}

/* --- Tabs: Sign in / Redeem invitation --- */
.nav.nav-tabs.nav-account {
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-bottom: 1.5rem;
}

.nav.nav-tabs.nav-account li {
  flex: 1;
  text-align: center;
}

.nav.nav-tabs.nav-account li a {
  display: block;
  padding: 0.6rem 0.75rem;
  font-weight: 400;
  color: #555;
}

.nav.nav-tabs.nav-account li.active a {
  background: #f5f5f5;
  color: #000;
  font-size: 1.8rem;
  font-weight: 600;
  border-radius: 10px 10px 0 0;
}

/* --- Headings --- */
.login-heading-section {
  /*font-size: 1.3rem;    /* bigger for "Sign in" */
  color: #838586 !important;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* --- Labels smaller --- */
.form-group label {
  font-size: 1rem;    /* smaller */
  margin-bottom: 0.25rem;
  font-weight: 500;
}

/* --- Inputs smaller --- */
.form-control {
  width: 100%;
  padding: 0.3rem 0.5rem;  /* tighter */
  /*font-size: 0.85rem;*/
  border-radius: 0.4rem;
  border: 1px solid #ccc;
}

#content-container.signinpage .signincontainer {
  max-width: 420px; /* keep it a neat card */
  width: 100%;      /* responsive */
}

#content-container.signinpage .registercontainer {
  max-width: 420px; /* keep it a neat card */
  width: 100%;      /* responsive */
}

/* --- Buttons (Sign in + Forgot Password) smaller --- */
/* --- Direct path styling for Sign In + Forgot Password --- 
#content.signincontainer form .form-group .col-sm-8 > button#submit-signin-local,
#content.signincontainer form .form-group .col-sm-8 > a[href='/Account/Login/ForgotPassword'],
#content.registercontainer form .form-group .col-sm-8 > input#submitButton,
#content.registercontainer #ContentContainer_MainContent_MainContent_ExternalLoginButtons > button[title="Microsoft"]*/
#content.signincontainer button[value="https://HunterLabExternal.ciamlogin.com/b8ebcd0d-5f7f-4601-8382-fe517003a0f4/"] {
  width: 100%;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 0.5rem 0 2.5rem 0;
  transition: transform 0.2s, opacity 0.3s;
  background-color: #FFD700 !important;
  color: #fff !important;
  border: none;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  display: inline-block;
  background-image: url('/signin.png'); /* your logo */
  background-repeat: no-repeat;
  background-position: 10px center; /* adjust horizontal position */
  background-size: 20px 20px;       /* size of logo */
}

#content.signincontainer button[value="Microsoft"] {
  width: 100%;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 0.5rem 0 2.5rem 0;
  transition: transform 0.2s, opacity 0.3s;
  background-color: #00a4ef !important; /* same as Microsoft */
  color: #fff !important;
  border: none;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  display: inline-block;
  background-image: url('/signinwithmicrosoft.png'); /* your logo */
  background-repeat: no-repeat;
  background-position: 10px center; /* adjust horizontal position */
  background-size: 20px 20px;       /* size of logo */
}

#content.registercontainer #ContentContainer_MainContent_MainContent_ExternalLoginButtons button[value="https://HunterLabExternal.ciamlogin.com/b8ebcd0d-5f7f-4601-8382-fe517003a0f4/"] {
  width: 100%;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 0.5rem 0 0 0;
  transition: transform 0.2s, opacity 0.3s;
  background-color: #FFD700 !important;
  color: #fff !important;
  border: none;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  display: inline-block;
  background-image: url('/signin.png'); /* your logo */
  background-repeat: no-repeat;
  background-position: 10px center; /* adjust horizontal position */
  background-size: 20px 20px;       /* size of logo */
}

#content.registercontainer #ContentContainer_MainContent_MainContent_ExternalLoginButtons button[value="Microsoft"] {
  width: 100%;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 0 0 2.5rem 0;
  transition: transform 0.2s, opacity 0.3s;
  background-color: #00a4ef !important; /* same as Microsoft */
  color: #fff !important;
  border: none;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  display: inline-block;
  background-image: url('/signinwithmicrosoft.png'); /* your logo */
  background-repeat: no-repeat;
  background-position: 10px center; /* adjust horizontal position */
  background-size: 20px 20px;       /* size of logo */
}

button#submit-redeem-invitation {
  width: 100%;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
  transition: transform 0.2s, opacity 0.3s;
  background-color: #329EF3 !important;
  color: #fff !important;
  border: none;
  font-size: 16px;
  font-weight: 500;
  background-image: url('/register.png'); /* your logo */
  background-repeat: no-repeat;
  background-position: 10px center; /* adjust horizontal position */
  background-size: 20px 20px;       /* size of logo */
}

button#submit-redeem-invitation:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

@media (min-width: 992px) {
  #content-container.signinpage .signincontainer .col-md-6 {
    width: 100% !important;
  }
}

#content-container.signinpage.redeem .signincontainer .col-sm-10,
#content-container.signinpage .registercontainer .col-md-6 {
    width: 100% !important;
}

#content.signincontainer button[value="https://HunterLabExternal.ciamlogin.com/b8ebcd0d-5f7f-4601-8382-fe517003a0f4/"]:hover,
#content.signincontainer button[value="Microsoft"]:hover,
#content.registercontainer #ContentContainer_MainContent_MainContent_ExternalLoginButtons button[value="https://HunterLabExternal.ciamlogin.com/b8ebcd0d-5f7f-4601-8382-fe517003a0f4/"]:hover,
#content.registercontainer #ContentContainer_MainContent_MainContent_ExternalLoginButtons button[value="Microsoft"]:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Cancel Bootstrap offset ONLY for the button container in signinpage */
#content.signincontainer .form-group .col-sm-offset-4.col-sm-8,
#content-container.signinpage.redeem .col-sm-offset-2,
#content.registercontainer .form-group .col-sm-offset-4.col-sm-8 {
    margin-left: 0 !important;   /* remove the 33.3333% offset */
}

/* Reduce label font size inside Sign In container */
#content.signincontainer .form-horizontal .control-label,
#content.registercontainer .form-horizontal .control-label {
    font-size: 14px !important;       /* smaller font */
    font-weight: 400 !important;      /* optional: adjust weight */
    margin-bottom: 4px !important;    /* optional: reduce space under label */
}

/* Make form-group labels stack vertically with inputs */
#content.signincontainer .form-horizontal .form-group,
#content.registercontainer .form-horizontal .form-group {
    display: flex;
    flex-direction: column;  /* stack label above input */
    align-items: flex-start; /* align left */
    margin-bottom: 10px;     /* space between fields */
}

/* Make label full width */
#content.signincontainer .form-horizontal .form-group .control-label,
#content.registercontainer .form-horizontal .form-group .control-label {
    width: 100%;
    margin-bottom: 4px;      /* optional spacing below label */
    text-align: left;
}

/* Make input full width */
#content.signincontainer .form-horizontal .form-group .col-sm-8,
#content.registercontainer .form-horizontal .form-group .col-sm-8 {
    width: 100%;
    /*padding-left: 0;         /* remove horizontal padding from Bootstrap grid */
}

/* hide Register using an external account text */
#content.registercontainer 
  #ContentContainer_MainContent_MainContent_RegisterExternalLabel .xrm-attribute-value {
  font-size: 0;
}

#content.registercontainer 
  #ContentContainer_MainContent_MainContent_RegisterExternalLabel .xrm-attribute-value::before {
  content: "Choose your account type to complete registration";
  font-size: 16px;   /* adjust as needed */
  font-weight: 600;
  /*color: #000;       /* or whatever color */
}

/* --- Responsive tweaks --- */
@media (max-width: 768px) {
  #content-container.signinpage {
    flex-direction: column;
    align-items: center;
    padding: 1rem;
  }
  #content-container.signinpage .signincontainer,
  #content-container.signinpage .registercontainer {
    width: 100%;
    padding: 1rem;
  }
}

/* Hide the original Redeem heading text 
#content-container.signinpage.redeem h2.login-heading-section h2{
    font-size: 0 !important; hides original text 
}

/* Inject custom text */
#content-container.signinpage.redeem h2.login-heading-section::before {
    content: "You currently do not have access if you attempted to sign in but were redirected to this page. Please use your invitation code to complete registration, or submit a support request to receive an invitation code.";
    font-size: 16px; /* visible text size */
    font-weight: 400;
    display: block;
    color: #838586;
    background-color: #f5f5f5; /* light gray block */
    padding: 15px 20px; /* space inside block */
    border: 1px solid #ddd; /* optional subtle border */
    margin-bottom: 30px; /* pushes content below further down */
    line-height: 1.5; /* improves readability *
}

#content-container.signinpage h2 {
  color: #838586 !important;
  /*  padding-bottom: 40px !important;*/
  font-size: 16px !important;
  font-weight: 600;
}

/* Override ONLY under Redeem section */
#content-container.signinpage.redeem .form-control,
#content-container.signinpage.redeem .form-select {
  border: 1px solid #838586 !important; /* or your preferred color */
  background-color: #fff;                /* optional, ensures contrast */
}

/* Increase font size for "I have an existing account" checkbox label under Redeem */
#content-container.signinpage.redeem .form-group .col-sm-10 .xrm-attribute-value-encoded {
    font-size: 14px; /* adjust to whatever size you want */
    font-weight: 500; /* optional: make it slightly bolder */
}

/* Shift signincontainer to the right on large screens only */
@media (min-width: 768px) { /* adjust breakpoint as needed */
    #content-container.signinpage .signincontainer,
    #content-container.signinpage .registercontainer {
        margin-left: 50px; /* adjust distance as needed */
    }
}

.signinpage.register .nav.nav-tabs.nav-account {
    display: none !important;
}