@import 'login-globals.css';

/* Navbar */

.navbar {
  background: #fff;
  display: flex;
  height: var(--navbar-sizing-item-height, 56px);
  justify-content: space-between;
  align-items: center;
}

.form {
    width: 100%;
}

.styleNone {
    display: none;
}  
#contact-us-button {
  display: inline-block;
  vertical-align: middle;
  line-height: var(--typography-lineHeight-base, 24px);
} 
					
.navbar .slot {
  display: flex;
  align-items: center;  
}

.navbar .slot .app-name {
  display: flex;
  align-items: center;
  gap: var(--navbar-spacing-appName-gap, 16px);
}

.navbar .navbar-panel {
  display: flex;
  align-items: center;
}

.navbar .navbar-panel-item {
  padding: var(--space-md);
  border: none;
  border-radius: 0;
  background-color: #fff;
}

.navbar .navbar-panel-item span {
  white-space: nowrap;
}

.navbar .navbar-panel-item:hover {
  background-color: var(--color-gray-pale);
}

.navbar .navbar-panel-item:hover span {
  color: var(--color-primary-active);
}

.navbar .navbar-panel-item:active {
  background-color: var(--color-gray-light);
}

.navbar .navbar-panel-item:active span {
  color: var(--color-active);
}

.navbar .navbar-panel-item:focus-visible {
  height: 54px;
  border: 2px solid var(--color-secondary-focus);
}

.navbar .items {
  display: flex;
  position: relative;
  height: var(--navbar-sizing-item-height, 56px);
  align-items: center;
  padding: 0px;
  margin: 0px;
}

.navbar .item {
  position: relative;
  display: flex;
  height: var(--navbar-sizing-item-height, 56px);
  justify-content: center;
  align-items: center;
}

.navbar .item .tab {
  display: flex;
  height: var(--navbar-sizing-item-height, 56px);
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
  justify-content: center;
  align-items: center;
  gap: var(--navbar-spacing-item-gap, 8px);
  border-radius: 0px 0px var(--tabs-radius-horizontal-br, 0px) var(--tabs-radius-horizontal-br, 0px);
  background: var(--navbar-color-surface-item-enabled, rgba(77, 77, 77, 0.00));
}

.navbar .item .tab:hover,
.navbar .item.user-tab-item:hover {
  cursor: pointer;
  background: #f1f1f1;
}

.navbar .item span:not(.tooltip) {
  display: inline-block;
  max-width: 192px;
  letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight:600;
}

.navbar .item .tab-leading-icon,
.navbar .item .tab-trailing-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.navbar .item .tab-trailing-icon,
.navbar .subitem img  {
  width: var(--navbar-sizing-icon-width, 20px);
  height: var(--navbar-sizing-icon-height, 20px);
}

.navbar .tab-items {
  position: absolute;
  left: 0%;
  top: 100%;
  width: 100%;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin: 0px;
  padding: var(--list-spacing-padding-default-modal-top, 0px) var(--list-spacing-padding-default-modal-right, 0px) var(--list-spacing-padding-default-modal-bottom, 0px) var(--list-spacing-padding-default-modal-left, 0px);
  gap: var(--list-spacing-padding-default-modal-gap, 0px);
  border-radius: var(--list-radius, 4px);
  border: 1px solid var(--list-color-border, #E6E6E6);
  background: var(--listItem-color-background-enabled, #FFF);
  list-style: none;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.08);
}

.navbar .item .tab-items .subitem,
.navbar .tab-items .subitem {
  display: flex;
  align-items: center;
  align-self: stretch;
  min-height: var(--listItem-spacing-standard-min-height, 40px);
  border-radius: var(--listItem-radius-standard, 0px);
  border: 0px solid var(--listItem-color-border-enabled, #E6E6E6);
  background: var(--listItem-color-background-enabled, #FFF);
}

@media (min-width: 1001px) {
  .navbar .tab-items .subitem-content {
    padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
  }
}

.navbar .subitem .subitem-content {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex: 1;
}

.navbar .item .tab-items .subitem span,
.navbar .tab-items .subitem {
  letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
  flex: 1 0 0;
  white-space: nowrap;
}

.navbar .item .tab-items .subitem .subitem-leading-icon,
.navbar .item .tab-items .subitem .subitem-trailing-icon,
.navbar .tab-items .subitem img {
  display: flex;
  justify-content: center;
  align-items: center;
}



/* Navbar username tab  */

.navbar .item.user-tab-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  border: none;
  border-radius: var(--radius-none);
  background-color: var(--neutrals-color-neutral-0);
}

@media (min-width: 1024px) {
  .navbar .slot .app-name {
      padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .navbar .item .tab,
  .navbar .item.user-tab-item,
  .navbar .navbar-panel-item.button {
    padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
  }
}

@media (max-width: 1023px) {
  .navbar .slot .app-name,
  .navbar .item .tab,
  .navbar .item.user-tab-item,
  .navbar .navbar-panel-item.button {
    padding: var(--space-md);
  }
}

.navbar .item.user-tab-item .tab-leading-icon {
  width: var(--avatar-sizing-small, 32px);
  height: var(--avatar-sizing-small, 32px);
  border-radius: var(--avatar-radius, 320px);
  background: var(--avatar-color-background, #E6E6E6);
}

.navbar .item.user-tab-item .tab-leading-icon img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.navbar .item.user-tab-item .tab-items .subitem .subitem-leading-icon {
  height: var(--icon-sizing-lineHeight-bodyDefault, 24px);
  padding: var(--listItem-spacing-standard-padding-leading-top, 0px) var(--listItem-spacing-standard-padding-leading-right, 0px) var(--listItem-spacing-standard-padding-leading-bottom, 0px) var(--listItem-spacing-standard-padding-leading-left, 0px);
  gap: var(--listItem-spacing-standard-padding-leading-gap, 0px);
}

.navbar .item.user-tab-item .tab-items .subitem .subitem-leading-icon img {
  width: var(--icon-sizing-sm-width, 20px);
  height: var(--icon-sizing-sm-height, 20px);
  flex-shrink: 0;
}

@media (min-width: 1280px) and (max-width: 1439px) {
  .navbar .item.user-tab-item span:not(.tooltip) {
    max-width: 144px;
  }
}

@media (min-width: 1048px) and (max-width: 1279px) {
  .navbar .item.user-tab-item span:not(.tooltip) {
    max-width: 96px;
  }
}

@media (min-width: 1001px) and (max-width: 1047px) {
  .navbar .item.user-tab-item span:not(.tooltip) {
    max-width: 84px;
  }
}

@media (min-width: 1001px) {
  .navbar .slot {
    gap: var(--space-lg);
  }
}

@media (max-width: 1000px) {
  .navbar .slot {
    gap: var(--space-sm);
  }

  .navbar .item.user-tab-item .tooltip-container,
  .navbar .item.user-tab-item .tab-trailing-icon,
  .navbar .subitem span {
    display: none;
  }

  .navbar .subitem-content {
    justify-content: center;
    flex-wrap: wrap;
    padding: var(--space-sm) var(--space-md);
  } 
}





/* Footer */

.footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px 40px 24px 40px;
  gap: 10px;
  background: url('../images/overlay_footer-light.svg') top right / cover no-repeat;
}

.footer .content {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--footer-spacing-itemGap, 32px);
}

.footer .content .logo {
  position: relative;
  display: flex;
  width: 135.43px;
  height: 32px;
  padding: 4px 0px;
  justify-content: center;
  align-items: center;
}

.footer .content .logo .overlay {
  display: flex;
  width: 135.525px;
  height: 24px;
  padding: 0px 0.74px 0px 0.816px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.footer .content .logo .image {
  width: 133.969px;
  height: 24px;
  flex-shrink: 0;
}

.footer .content .links-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: flex-end;
  gap: 16px;
  flex: 1 0 0;
  flex-wrap: wrap;
  align-self: stretch;
}

.footer .content .links-container .links {
  display: flex;
  align-self: stretch;
  align-items: center;
  align-content: center;
  gap: 16px;
  flex: 1 0 0;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.footer .content .links-container .links .link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: var(--button-spacing-standard-discreet-min-width, 20px);
  min-height: var(--button-spacing-standard-discreet-min-height, 20px);
  padding: var(--button-spacing-standard-discreet-padding-top, 4px) var(--button-spacing-standard-discreet-padding-right, 4px) var(--button-spacing-standard-discreet-padding-bottom, 4px) var(--button-spacing-standard-discreet-padding-left, 4px);
  gap: var(--button-spacing-standard-discreet-padding-gap, 8px);
  border-radius: var(--button-radius-standard-discreet, 4px);
  background: var(--button-color-discreet-background-enabled, rgba(5, 87, 213, 0.00));
}

.footer .content .links-container .links .link span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--button-color-discreet-content-enabled, #0557D5);
  text-align: center;
  text-overflow: ellipsis;
  letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
}

.footer .content .links-container .links .link .link-trailing-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer .content .links-container .links .link .link-trailing-icon img {
  width: var(--icon-sizing-sm-width, 20px);
  height: var(--icon-sizing-sm-height, 20px);
}

.footer .content .links-container .copyright {
  display: flex;
  height: 32px;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.footer .content .links-container .copyright span {
  text-align: right;
  color: var(--footer-color-content, #333);
  letter-spacing: var(--typography-spacing-letter-sm, 0.26px);
  font-weight:600;
}

.footer .link .link-items {
  position: absolute;
  left: -10%;
  bottom: 110%;
  width: 120%;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin: 0px;
  padding: var(--button-spacing-standard-discreet-padding-top, 4px) var(--button-spacing-standard-discreet-padding-right, 4px) var(--button-spacing-standard-discreet-padding-bottom, 4px) var(--button-spacing-standard-discreet-padding-left, 4px);
  gap: var(--button-spacing-standard-discreet-padding-gap, 8px);
  border-radius: var(--list-radius, 4px);
  border: 1px solid var(--list-color-border, #E6E6E6);
  min-height: var(--button-spacing-standard-discreet-min-height, 20px);
  background: var(--listItem-color-background-enabled, #FFF);
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.08);
}

.footer .link .link-items .subitem {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: var(--button-spacing-standard-discreet-padding-top, 4px) var(--button-spacing-standard-discreet-padding-right, 4px) var(--button-spacing-standard-discreet-padding-bottom, 4px) var(--button-spacing-standard-discreet-padding-left, 4px);
  gap: var(--button-spacing-standard-discreet-padding-gap, 8px);
  border-radius: var(--listItem-radius-standard, 0px);
  border: 0px solid var(--listItem-color-border-enabled, #E6E6E6);
  background: var(--listItem-color-background-enabled, #FFF);
}

.footer .link .link-items .subitem span {
  letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
  text-align: left !important;
  flex: 1 0 0;
}

.footer .link .link-items .subitem span:hover {
  cursor: pointer;
}

.footer .link .dropdown-toggle:checked ~ .link-items {
  display: flex;
}

@media(min-width: 766px) {
  .footer .content .links-container .links .link .contact-us-footer-button {
    display: none;
  }
}




/* Banner */

.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  padding: 80px var(--space-lg);
  gap: 16px;
  background: url('content/banner-bg.webp') #FFF 50% / cover no-repeat;
}

.banner .row {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 300px;
  gap: 10px;
}

.banner .row.main-header {
  max-width: 785px;
}

.banner .row.main-header span {
  flex: 1 0 0;
  text-align: center;
  letter-spacing: var(--typography-spacing-letter-negative-lg, -0.48px);
}

.banner .row.sub-header {
  max-width: 800px;
  padding-bottom: 32px;
}

.banner .row.sub-header span {
  text-align: center;
}





/* Card  */

.card-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 24px;
  background: #FFF;
  padding: 0px 24px 80px 24px;
}

.card-view .section-title {
  display: flex;
  align-items: flex-start;
  margin: 24px auto 0px auto;
}

.card-row {
  display: grid;
  align-items: stretch;
  align-content: flex-start;
  align-self: stretch;
  gap: 24px;
  place-items: center;
}

@media (max-width: 655px) {
  .card-row.agent-card-row {
    grid-template-columns: 1fr;
    max-width: 324px;
  }

  .use-case-card-row {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 656px) and (max-width: 979px) {
  .card-row.agent-card-row {
    grid-template-columns: repeat(2, 1fr);
    max-width: 708px;
  }

  .use-case-card-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) and (max-width: 1319px) {
  .card-row.agent-card-row {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
  }

  .use-case-card-row {
    grid-template-columns: repeat(2, 1fr);
  }
}


@media (min-width: 1320px) and (max-width: 1439px) {
  .card-row.agent-card-row {
    grid-template-columns: repeat(4, 1fr);
  }

  .use-case-card-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1440px) {
  .card-row.agent-card-row {
    grid-template-columns: repeat(4, 342px);
  }

  .use-case-card-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.card-layout-1 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.card-layout-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.card-layout-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 300px;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  justify-content: space-between;
  border-radius: 4px;
  border: 1px solid var(--card-color-border-enabled, #E6E6E6);
  background: var(--card-color-container-enabled, #FFF);
  box-shadow: 0px 4px 16px 0px var(--functional-shadow-levelOne-color, rgba(0, 0, 0, 0.04)); 
}

.card .data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.card .data .text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: stretch;
  letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
}







/* Agent Card  */

.card.agent {
  max-width: 342px;
}

.card.agent .data .title {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 16px;
}







/* Use Case Card  */

.card.use-case .data .icon img {
  width: 32px !important;
  height: 32px !important;
}

.card.use-case .data .title {
  align-self: stretch;
  color: #000;
}

.card.use-case .data .text {
  color: #000;
}






/* Section Image Orientation  */

.img-on-left {
  flex-direction: row-reverse;
}

.img-on-right {
  flex-direction: row;
}

.single-column {
  flex-direction: column;
}





/* Button Container */

.button-container {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.button-container .button .text {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  align-self: center !important;
  letter-spacing: var(--typography-spacing-letter-lg, 0.32px) !important;
}

.button-container .button .icon {
  align-self: center !important;
  width: var(--icon-sizing-sm-width, 20px);
  height: var(--icon-sizing-sm-height, 20px);
}





/* Accordion */

.accordion-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.accordion-container .accordion-header {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--accordion-spacing-standard-expanded-header-padding-gap, 8px);
  padding: var(--accordion-spacing-standard-expanded-header-padding-top, 12px) var(--accordion-spacing-standard-expanded-header-padding-right, 12px) var(--accordion-spacing-standard-expanded-header-padding-bottom, 12px) var(--accordion-spacing-standard-expanded-header-padding-left, 8px);
  background: var(--accordion-color-expanded-background-enabled, #FFF);
}

.accordion-container .accordion-header .accordion-header-button {
  height: var(--icon-sizing-lineHeight-bodyDefault, 24px);
  padding: 0px;
  background: unset;
  min-width: unset;
  min-height: unset;
  border: none;
}

.accordion-container .accordion-header .accordion-header-button img {
  width: var(--icon-sizing-sm-width, 20px);
  height: var(--icon-sizing-sm-height, 20px);
}

.accordion-container .accordion-header .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
}

.accordion-container .accordion-body {
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--accordion-spacing-standard-expanded-body-padding-gap, 24px);
  padding: var(--accordion-spacing-standard-expanded-body-padding-top, 8px) var(--accordion-spacing-standard-expanded-body-padding-right, 12px) var(--accordion-spacing-standard-expanded-body-padding-bottom, 16px) var(--accordion-spacing-standard-expanded-body-padding-left, 36px);
}

.accordion-container .accordion-body .text {
  align-self: stretch;
  flex: 1 0 0;
  letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
}

.accordion-container.accordion-expanded .accordion-body {
  display: flex;
}

.accordion-container.accordion-collapsed .accordion-header {
  border-bottom: 1px solid var(--accordion-color-divider-enabled, #E6E6E6);
  background: var(--accordion-color-header-collapsed-background-enabled, #F6F7FB);
}

.accordion-container.accordion-collapsed .accordion-body,
.accordion-container.accordion-collapsed .accordion-header .accordion-header-button .expand-image,
.accordion-container.accordion-expanded .accordion-header .accordion-header-button .collapse-image {
  display: none !important;
}

.accordion-container .accordion-header:hover {
  cursor: pointer;
}

.accordion-container.accordion-expanded:hover .accordion-header {
  background: var(--accordion-color-expanded-background-hover, #EAECF6) !important;
} 

.accordion-container.accordion-expanded .accordion-header:active {
  background: var(--accordion-color-expanded-background-pressed, #DFE3F1) !important;
} 

.accordion-container.accordion-collapsed:hover .accordion-header {
  border-bottom: 1px solid var(--accordion-color-divider-hover, #D9D9D9) !important;
  background: var(--accordion-color-header-collapsed-background-hover, #EAECF6) !important;
} 

.accordion-container.accordion-collapsed:active .accordion-header {
  border-bottom: 1px solid var(--accordion-color-divider-pressed, #CCC) !important;
  background: var(--accordion-color-header-collapsed-background-pressed, #DFE3F1) !important;
} 




/* Promoted Content  */

.promoted-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 24px;
  background: #FFF;
  padding: 80px 24px 24px 24px;
}

.promoted-content .section-title {
  display: flex;
  align-items: flex-start;
  margin: 0px auto 0px auto;
}

.promoted-content .section-content {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  align-self: stretch;
  flex-wrap: wrap;
  padding: 40px;
  gap: 80px;
  border-radius: 12px;
  margin: auto;
}

.promoted-content .section-content .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  min-width: 300px;
  max-width: 600px;
  gap: 16px;
}

.promoted-content .section-content .content span, 
.promoted-content .section-content .content strong {
  align-self: stretch;
}

.promoted-content .section-content .content span.text {
  letter-spacing: var(--typography-spacing-letter-xl, 0.4px);
}

.promoted-content .section-content .content span.timestamp {
  letter-spacing: var(--typography-spacing-letter-md, 0.28px);
}

.promoted-content .section-content .content-image {
  flex: unset;
  height: 382.5px;
  min-width: 300px;
  min-height: 168.75px;
  aspect-ratio: 680.00/382.50;
  background: url('content/upper-section-img.png') lightgray 50% / cover no-repeat;
}




/* Content Highlight  */

.content-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 80px;
  padding: 80px var(--space-lg);
}

@media (max-width: 1024px) {
  .content-highlight {
    padding: 40px var(--space-md);
  }
}

.content-highlight.home-padding {
  padding-top: 0px !important;
}

.content-highlight .section-content {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  align-self: stretch;
  flex-wrap: wrap;
  gap: 80px;
  margin: auto;
}

.content-highlight .section-content.card-row-container {
  gap: 24px;
}

.content-highlight .section-content.card-row-container .text-icon-button-container {
  justify-content: center;
}

.content-highlight .section-content .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  gap: 24px;
}

.content-highlight.double-column .section-content {
  gap: 24px;
}

.content-highlight.double-column .section-content .content {
  min-width: 300px;
  max-width: 800px;
  padding: 80px 16px 0px 0px;
}

.content-highlight .section-content .content span,
.content-highlight .section-content .content strong {
  align-self: stretch;
}

.content-highlight .section-content .content span.text {
  letter-spacing: var(--typography-spacing-letter-xl, 0.4px);
}

.content-highlight .section-content .content-image {
  max-width: 800px;
  width: 100%;
  height: auto;
  aspect-ratio: 800.00/442;
  background: url('content/lower-section-img.png') #FFFFFF00 0px 0px / 100% 100% no-repeat;
}



/* Formatted content */

.page-background {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  padding-top: 40px;
  background: url('content/product-details-bg.webp') #fff 50% / cover no-repeat;
}

.page-background.min-gap {
  gap: var(--space-lg);
}

.formatted-content-header,
.formatted-content-section,
.tabs-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  align-self: stretch;
  padding: 0 var(--space-lg);
  background: unset;
}

.tabs-section {
  margin-top: -8px;
}

.formatted-content-section.formatted-content-section-gap {
  margin-bottom: 48px;
}

@media (max-width: 1024px) {
  .formatted-content-header,
  .formatted-content-section,
  .tabs-section {
    padding: 0 var(--space-md);
  }
}

.formatted-content-header .section-content,
.formatted-content-section .section-content {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex: 1 0 0;
}

.formatted-content-header .section-content.min-gap {
  gap: var(--space-lg);
}





/* Formatted Content header */

.formatted-content-header .section-content {
  flex-direction: column;
}

.formatted-content-header .section-content .content-header {
  display: flex;
  flex-direction: row;
  flex: 1 0 0;
  align-self: stretch;
  gap: 16px;
}

.formatted-content-header .section-content .content-header > .icon {
  display: flex;
  width: var(--icon-sizing-lg-width, 32px);
  justify-content: center;
  align-items: center;
}

.formatted-content-header .section-content .content-header .button-container {
  justify-content: flex-end;
  gap: 8px;
  flex: 1 0 0;
  flex-wrap: nowrap;
}

.formatted-content-header .section-content .title {
  margin: 0px;
}

.formatted-content-header .content-header .button-container {
  flex-wrap: wrap !important;
}

.formatted-content-header .content-header .button-container .button span {
  white-space: nowrap;
}



/* Formatted Content Section */

.formatted-content-section .section-content.tab-content {
  display: none;
  animation: fadeIn 0.3s ease-in;
}

.formatted-content-section .section-content.tab-content.content-active {
    display: flex;
    flex-wrap: wrap;
}

.formatted-content-section .section-content {
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  max-width: var(--container-max-width, 1440px);
  row-gap: 80px;
  flex-direction: row;
}

.formatted-content-section .section-content .content {
  display: flex;
  min-width: 300px;
  max-width: 700px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex: 1 0 0;
}

.formatted-content-section .section-content .content > .text {
  align-self: stretch;
  letter-spacing: var(--typography-spacing-letter-xl, 0.4px);
}

.formatted-content-section .section-content .content .points {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
}

.formatted-content-section .section-content .content .points .title,
.formatted-content-section .section-content .content .points .text,
.formatted-content-section .section-content .content .points .list {
  align-self: stretch;
  margin: 0px;
}

.formatted-content-section .section-content .section-graphic {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.formatted-content-section .section-content .section-graphic img {
  width: 100%;
  height: auto;
  max-width: 584px;
  aspect-ratio: 584/429;
  background-position-x: 0px;
  background-position-y: 0px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

@media(max-width: 965px) {
  .formatted-content-section .section-content {
    gap: 16px;
  }
}

@media(max-width: var(--container-max-width, 1440px)) {
  .formatted-content-section .section-content {
    gap: 80px;
  }
}



/* Tabs */
.tabs-section .tabs-container {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  height: 40px;
  padding: var(--tabs-spacing-tabList-line-top, 0px) var(--tabs-spacing-tabList-line-right, 0px) var(--tabs-spacing-tabList-line-bottom, 0px) var(--tabs-spacing-tabList-line-left, 0px);
  gap: var(--tabs-spacing-tabList-line-gap, 0px);
  border-bottom: 3px solid var(--tabs-color-border-enabled, #E6E6E6);
}

.tabs-section .tab-item {
  display: flex;
  min-width: var(--tabs-sizing-min-width, 40px);
  min-height: var(--tabs-sizing-min-height, 40px);
  align-items: center;
  border-radius: var(--tabs-radius-horizontal-tl, 0px) var(--tabs-radius-horizontal-tr, 0px) var(--tabs-radius-horizontal-br, 0px) var(--tabs-radius-horizontal-bl, 0px);
  padding: var(--tabs-spacing-padding-top, 8px) var(--tabs-spacing-padding-right, 16px) var(--tabs-spacing-padding-bottom, 8px) var(--tabs-spacing-padding-left, 16px);
  border: none;
  border-bottom: 3px solid transparent;
  background: var(--tabs-color-background-enabled, rgba(255, 255, 255, 0.00));
}

.tabs-section .tab-item:hover {
  cursor: pointer;
}

.tabs-section .tab-item.tab-active:hover {
  cursor: unset;
}

.tabs-section .tab-item:active {
  background: var(--tabs-color-background-pressed, #DFE3F1);
  border-bottom: 3px solid var(--tabs-color-border-pressed, #CCC);
  padding-bottom: 5px;
}

.tabs-section .tab-item.tab-active:active {
  background: unset;

}

.tabs-section .tab-item.tab-active {
  padding-bottom: 5px;
  border-bottom: 3px solid var(--tabs-color-border-selected-enabled, #0557D5);  
}

.tabs-section .tab-item span {
  color: var(--tabs-color-label-enabled, #4D4D4D);  
  white-space: nowrap;
}

.tabs-section .tab-item.tab-active span {
  color: var(--tabs-color-label-selected-enabled, #333);
}



/* Trial Banner */
.notification-banner,
.error-banner {
  display: flex;
  padding: var(--banner-spacing-padding-top, 8px) var(--banner-spacing-padding-right, 16px) var(--banner-spacing-padding-bottom, 8px) var(--banner-spacing-padding-left, 16px);
  justify-content: space-between;
  gap: var(--banner-spacing-padding-gap, 8px);
  border-radius: var(--banner-radius, 0px);
  background: var(--banner-background-color, #5C6064);
  box-shadow: 0px 8px 20px 0px var(--banner-box-shadow-color, rgba(0, 0, 0, 0.08));
  box-sizing: border-box;
}

.notification-banner.hidden {
  display: none;
}

.notification-banner .banner-content,
.error-banner .banner-content {
  text-align: center;
  flex: 1 0 0;
  align-self: center;
}

.notification-banner .action-button,
.search-field .search-clear-button {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: none;
  cursor: pointer;
}

.notification-banner .action-button ,
.error-banner .action-button {
  width: var(--iconButton-sizing-small-width, 32px);
  height: var(--iconButton-sizing-small-height, 32px);
  padding: var(--iconButton-padding-small, 4px);
}

/* Error Banner */

.error-banner {
  background: var(--banner-error-background-color, rgba(189, 1, 0, 1));
  box-shadow: 0px 8px 20px 0px var(--banner-box-shadow-color, rgba(0, 0, 0, 0.08));
  align-self: stretch;
}

.error-banner .banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--banner-text-max-text, 1200px);
  padding: 0px 8px;
  gap: 8px;
}

.error-banner .banner-content .error-icon {
  padding: 3px 0px;
  width: var(--banner-sizing-icon-width, 16px);
  height: var(--banner-sizing-icon-height, 16px);
  align-self: baseline;
}

.error-banner .banner-content .banner-text {
  color: var(--banner-color-text, #FFF);
  text-align: left;
}

.error-banner .banner-content .banner-text span {
  margin: 0px;
  color: var(--banner-color-text, #FFF);
  text-align: left;
}

.error-banner .banner-content button {
  min-height: var(--button-spacing-small-secondary-min-height, 32px);
  min-width: var(--button-spacing-small-secondary-min-width, 64px);
  height: var(--button-spacing-small-secondary-height, 32px);
  padding: var(--button-spacing-small-secondary-padding-top, 4px) var(--button-spacing-small-secondary-padding-right, 8px) var(--button-spacing-small-secondary-padding-bottom, 4px) var(--button-spacing-small-secondary-padding-left, 8px);
  background: var(--button-color-secondary-background-enabled, rgba(5, 87, 213, 0.00));
  border: 1px solid var(--button-color-secondary-border-enabled-error-button, rgba(230, 230, 230, 1));
}

.error-banner .banner-content button span {
  color: var(--button-color-secondary-content-enabled-error-button, rgba(255, 255, 255, 1));
}

.error-banner .action-button {
  min-width: var(--iconButton-sizing-small-width, 32px);
  min-height: var(--iconButton-sizing-small-height, 32px);
  border-radius: var(--radius-circle, 50%);
  background: var(--button-color-secondary-background-enabled, rgba(5, 87, 213, 0.00));
  border: transparent !important;
}

.error-banner .action-button:hover {
  background: var(--button-color-secondary-background-hover-error-button, rgba(255, 255, 255, 0.08));
  border: transparent !important;
}

.error-banner .action-button:active {
  background: var(--button-color-secondary-background-pressed-error-button, rgba(255, 255, 255, 0.16));
  border: transparent !important;
}

.error-banner .action-button svg {
  width: 24px;
  height: 24px;
}

.error-banner .action-button:hover svg,
.error-banner .action-button:active svg {
  width: 21px;
  height: 21px;
}

/* Search input */

.search-container {
  position: relative;
  width: 800px;
  max-width: 800px;
  height: 40px;
  display: flex;
  margin: 0 auto;
  align-items: flex-start;
}

.search-input {
  width: 100%;
  padding: 8px 36px;
  border: 1px solid var(--textField-color-border-enabled);
  border-radius: var(--button-radius-standard-primary);
  background: var(--textField-color-background-enabled);
  transition: all 0.3s ease; 
}

.search-input:hover {
  border-color: var(--input-border-hover);
}

.search-input:active {
  border-color: var(--input-border-active);
}

.search-input:focus {
  border-color: var(--input-border-hover);
  outline: 2px solid var(--input-outline-focus);
  outline-offset: 4px;
}

.search-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  cursor: pointer;
}

.clear-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  cursor: pointer;
}

.clear-icon.hidden {
  display: none;
}

.search-icon img,
.clear-icon img {
  vertical-align: middle;
}

/* Product Cards */

.card-controls {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: var(--textField-spacing-standard-min-height);
}

.card-controls .filter-button img {
  vertical-align: middle;
}

.card-controls .filter-button.hidden {
  visibility: hidden;
}

.card-controls .grouped-controls {
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  gap: 16px;
}

.card-controls .form .input-field-container {
  border-radius: var(--button-radius-standard-primary, 4px);
  cursor: pointer; 
}

.card-controls .form .input-field-container:focus-visible {
  outline: 1px solid var(--input-outline-focus);
}

.card-controls .form .input-field-container .input-field {
  background-color: transparent;
  border: none;
  padding: var(--textField-spacing-standard-padding-top, 4px) 0px var(--textField-spacing-standard-padding-bottom) 16px;
}

.card-controls .form .input-field-container .input-field .sort-select-label {
  display: flex;
  align-items: center;
}

.card-controls .form .input-field-container .input-field .label-text,
.card-controls .form .input-field-container .input-field select {
  color: var(--button-color-secondary-content-enabled);
  letter-spacing: var(--typography-spacing-letter-lg, 0.32px);
}

.card-controls .input-field-container .input-field select.form-input.sort-select {
  padding: 0 30px 0 6px;
  background-position-x: 92%;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.card-controls .input-field-container .input-field select.form-input.sort-select option {
  color: var(--typography-color-default-neutral);
}

.card-controls .input-field-container .input-field select.form-input.sort-select option.hidden {
  display: none;
}

.view-controls {
  display: flex;
  flex-direction: row;
  height: var(--textField-spacing-standard-min-height);
  padding: 0;
}

.view-controls .view-button {
  box-sizing: border-box;
}

.section-content .product-grid {
  display: grid;
  gap: var(--space-lg);
  flex: 1 1 auto;
}

@media (max-width: 655px) {
  .section-content .product-grid {
    grid-template-columns: 1fr;
    max-width: 324px;
    margin: 0 auto;
  }
 
  .product-card {
    min-width: 300px;
    max-width: 342px;
  }

  .product-card-container.filter-visible .product-grid {
    grid-template-columns: 1fr;
  }

  .section-content .filter-button span.text {
    display: none;
  }
}

@media (min-width: 656px) and (max-width: 979px) {
  .section-content .product-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 708px;
    margin: 0 auto;
  }
 
  .product-card {
    min-width: 300px;
    max-width: 342px;
  }
 
  .product-card-container.filter-visible .product-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 980px) and (max-width: 1319px) {
  .section-content .product-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin: 0 auto;
  }
 
  .product-card {
    min-width: 300px;
    max-width: 342px;
  }
 
  .product-card-container.filter-visible .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


@media (min-width: 1320px) and (max-width: 1439px) {
  .section-content .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
 
  .product-card {
    min-width: 300px;
    max-width: 342px;
  }
 
  .product-card-container.filter-visible .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1440px) {
  .section-content .product-grid {
    grid-template-columns: repeat(4, 342px);
  }
 
  .product-card {
    max-width: 342px;
    width: 342px;
  }
 
  .product-card-container.filter-visible .product-grid {
    grid-template-columns: repeat(3, 342px);
  }
}

.section-content .product-grid.hidden {
  display: none;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  height: 240px;
  padding: var(--space-md);
  background: var(--card-color-container-enabled);
  border-radius: var(--textField-radius-standard);
  box-shadow: 0px 4px 16px 0px var(--functional-shadow-levelOne-color, rgba(0, 0, 0, 0.04)); 
  border: 1px solid var(--card-color-border-enabled);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.product-card .product-card-header {
  display: flex;
  height: 54px;
  gap: 16px;  
}

.product-card .product-card-name {
  overflow: hidden;
}

.product-card .product-card-header h3,
.product-card .product-card-header h4 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card .product-card-header h4 {
  line-height: var(--typography-lineHeight-base, 24px);
}

.product-card .product-card-header .icon {
  align-self: center;
}

.product-card .product-card-header .application-icon {
  width: 56px;
  height: 56px;
}

.product-card .product-card-header .api-icon {
  width: 20px;
  height: 20px;
}

.product-card .product-card-header .use-case-icon {
  width: var(--icon-sizing-md-width, 24px);
  height: var(--icon-sizing-md-height, 24px);
}

.product-card .product-card-content {
  display: -webkit-box;
  height: 72px;
  margin: 0;
  letter-spacing: var(--typography-spacing-letter-none, 0.32px);
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.product-card mark {
  background-color: lightblue;
  padding: 0 var(--space-xxs);
  border-radius: 4px;
}

.product-card-buttons {
  display: flex;
  justify-content: space-between;
  height: 32px;
}

.product-card-buttons .icon {
  display: flex;
}

.product-card-buttons .icon .learn-more-icon {
  align-self: center;
}

.product-card-buttons .button.button-small {
  position: relative;
}

.product-card-buttons .button.button-small .button-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--textField-color-help-enabled);
  border-radius: 4px;
  background-color: var(--typography-color-default-neutral);
  color: var(--neutrals-color-neutral-0);
  letter-spacing: 0.28px;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  opacity: 0;
  z-index: 1000;
  cursor: text;
}

.product-card-buttons .button.button-small:hover .button-tooltip {
  opacity: 1;
}

.filter-panel {
  display: none;  
  overflow: hidden;
}

.product-card-container.filter-visible {
  gap: var(--space-lg);
}

.product-card-container.filter-visible .filter-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 320px;
  padding: var(--space-md);
  background: var(--card-color-container-enabled);
  border-radius: var(--textField-radius-standard);
  box-shadow: 0px 4px 16px 0px var(--functional-shadow-levelOne-color, rgba(0, 0, 0, 0.04)); 
  border: 1px solid var(--card-color-border-enabled);
  box-sizing: border-box;
  overflow: hidden;
  transition: all 0.3s ease;
}

.product-card-container.filter-visible .toggle {
  display: flex;
  flex-direction: column;
  letter-spacing: var(--typography-spacing-letter-md, 0.28px);
}

.product-card-container.filter-visible .toggle.hidden {
  display: none;
}

.product-card-container.filter-visible .toggle-slider {
  display: inline-block;
  width: 48px;
  height: 24px;
  background: var(--checkbox-color-control-border-enabled);
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}

.product-card-container.filter-visible .toggle-slider::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.product-card-container.filter-visible .toggle input:checked + .toggle-slider {
  background: var(--color-primary-hover);
}

.product-card-container.filter-visible .toggle input:checked + .toggle-slider::before {
  transform: translateX(24px);
}

.filter-panel .filter-panel-header {
  display: flex;
  justify-content: space-between;
}

.filter-panel .filter-panel-title {
  margin: 0;
  letter-spacing: var(--typography-spacing-letter-2x);
}

.filter-panel .action-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--iconButton-sizing-small-width, 32px);
  height: var(--iconButton-sizing-small-height, 32px);
  padding: var(--iconButton-padding-small, 4px);
  border: none;
  background: none;
  cursor: pointer;
}

.filter-panel .filter-category {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: none;
  letter-spacing: var(--typography-spacing-letter-md);
}

.filter-panel .filter-category.country-container.hidden {
  display: none;
}

.filter-panel .filter-category .checkbox-field {
  position: relative;
  padding: var(--space-xs) var(--space-sm);
  gap: var(--space-sm);
}

.filter-panel .filter-category input {
  width: 20px;
  height: 20px;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
}

.filter-panel .filter-category input:checked {
  background: var(--checkbox-background-checked);
  border-color: var(--checkbox-background-checked);
}

.filter-panel .filter-category .checkbox-field:has(input:checked)::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 15px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  z-index: 3;
  pointer-events: none;
}

.filter-panel .filter-category label {
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 160px;
}

.filter-panel .filter-category .checkbox-field:has(input:checked) label {
  font-weight: var(--typography-font-weight-medium, 500);
}

.filter-panel .country-checkbox-container {
  max-height: 200px;
  overflow-y: scroll;
}

.filter-panel label {
  flex: 1;
}

.filter-panel .reset-button {
  width: fit-content;
}

.product-card-container .no-products-container {
  display: flex;
  flex: 1;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg);
}

.product-card-container .no-products-container.hidden {
  display: none;
}

/* Search Box */
.search-field {
  display: flex;
  flex-direction: row;
  gap: var(--space-sm);
  width: 100%;
  max-width: 800px;
  height: 40px;
  min-width: var(--textField-spacing-standard-min-width, 40px);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--textField-color-border-enabled, #808080);
  border-radius: var(--radius-sm);
  background: var(--textField-color-background-enabled, #FFF);  
  align-items: center;
  align-self: center;
}

.search-field:focus-within {
  border-color: var(--textField-color-border-pressed, #013D98);
}


.search-field .search-icon-container {
  width: var(--textField-sizing-icon-standard-width, 16px);
  height: var(--textField-sizing-icon-standard-height, 16px);
}

.search-field .search-clear-button {
  min-width: var(--textField-sizing-icon-standard-width, 16px);
  min-height: var(--textField-sizing-icon-standard-height, 16px);
  padding: var(--space-none);
}

.search-field .search-clear-button.hidden {
  display: none;
}

.search-field .search-clear-button .search-clear-icon {
  width: var(--textField-sizing-icon-standard-width, 16px);
  height: var(--textField-sizing-icon-standard-height, 16px);
  border-radius: var(--radius-circle);
}

.search-field .search-clear-button:hover .search-clear-icon {
  background-color: var(--clear-button-background-color-hover, rgba(5, 87, 213, 0.08));
}

.search-field .search-clear-button:hover .search-clear-icon path {
  fill: var(--clear-button-color-icon-hover, #013D98);
}

.search-field .search-text {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
  border: none;
  outline: none;
}

.use-case-text-container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  overflow: hidden;
  text-overflow: ellipsis;
}

.use-case-text-container p {
  margin-top: 0px;
  margin-bottom: 24px;
}



/* Responsiveness for home */
@media (max-width: 1024px) {
  .banner,
  .promoted-content,
  .card-view {
    padding-left: 16px;
    padding-right: 16px;
  }

  .banner,
  .card-view {
    padding-bottom: 40px;
  }

  .banner,
  .promoted-content,
  .content-highlight.home-padding .section-content .content {
    padding-top: 40px;
  }

  .footer {
    padding: 24px 16px;
  }

  .content-highlight.home-padding {
    gap: 40px;
  }
}

/* Responsiveness for Product Details */
@media (max-width: 1024px) {
  .formatted-content-section .section-content .content {
    max-width: 100%;
  }

  .formatted-content-section .section-content {
    justify-content: center;
  }

  .formatted-content-section.formatted-content-section-gap {
    margin-bottom: 8px;
  }
}





/* Login and Register Page Styles */

/* Login Container */  

.layout-container.login-layout-container main,
.layout-container.register-layout-container main {
  padding: 16px 0px;
}

/* Navbar */

.layout-container.login-layout-container .navbar,
.layout-container.register-layout-container .navbar {
  padding-left: 16px;
  background: unset;
}

.layout-container.login-layout-container .navbar .slot,
.layout-container.register-layout-container .navbar .slot {
  gap: 16px;
}

.layout-container.login-layout-container .navbar .slot .app-name,
.layout-container.register-layout-container .navbar .slot .app-name {
  height: 30px;
  padding: 0px;
  gap: var(--navbar-spacing-appName-gap, 16px);
}

.layout-container.login-layout-container .navbar .slot .app-name .company-name,
.layout-container.register-layout-container .navbar .slot .app-name .company-name {
  width: 91px;
  height: 16px;
  flex-shrink: 0;
}

.layout-container.login-layout-container .navbar .tabs,
.layout-container.register-layout-container .navbar .tabs {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0px;
  padding: 0px;
}

.layout-container.login-layout-container .navbar .tabs .item,
.layout-container.register-layout-container .navbar .tabs .item {
  padding: 0px 16px;
}

.layout-container.login-layout-container .navbar .tabs .item:hover,
.layout-container.register-layout-container .navbar .tabs .item:hover {
  cursor: pointer;
  background: var(--navbar-color-surface-item-hover, rgba(255, 255, 255, 0.08));
}

.layout-container.login-layout-container .navbar .tabs .item:active,
.layout-container.register-layout-container .navbar .tabs .item:active {
  background: var(--navbar-color-surface-item-pressed, rgba(255, 255, 255, 0.12));
}

.layout-container.login-layout-container .navbar .tabs .item .tab,
.layout-container.register-layout-container .navbar .tabs .item .tab {
  padding: unset;
  background: var(--navbar-color-surface-item-enabled, rgba(236, 244, 255, 0.00));
}

.layout-container.login-layout-container .navbar .tabs .item .tab:hover,
.layout-container.register-layout-container .navbar .tabs .item .tab:hover {
  background: unset;
}

.layout-container.login-layout-container .navbar .tabs .item .tab span,
.layout-container.register-layout-container .navbar .tabs .item .tab span {
  color: var(--navbar-color-content-item-enabled, #333);
}

/* Footer  */

.layout-container.login-layout-container .footer,
.layout-container.register-layout-container .footer {
  background: var(--footer-background);
}

.layout-container.login-layout-container .footer .content .logo,
.layout-container.register-layout-container .footer .content .logo {
  height: unset;
  align-self: stretch;
}

/* Login modal tabs */

.modal-container.login-modal .modal .tabs-section {
  margin-top: unset;
  padding: 0px;
}

.modal-container.login-modal .modal .tab-content {
  display: none;
  align-self: stretch;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.modal-container.login-modal .modal .tab-content.content-active {
  display: flex;
}



/* Register pages */

.step-welcome .register-form-container .form-content .form-inner-container .form-header.step-welcome {
  margin-bottom: -16px;
}


/* Responsiveness */

@media(max-width: 1279px) {
  .layout-container.login-layout-container .navbar-container,
  .layout-container.register-layout-container .navbar-container {
    padding: 0px 24px;
  }

  .layout-container.login-layout-container .footer,
  .layout-container.register-layout-container .footer {
    padding: 0px 24px;
    padding-bottom: 16px;
    background: unset !important;
  }

  .layout-container.login-layout-container .footer .content,
  .layout-container.register-layout-container .footer .content {
    flex-direction: column;
    gap: 16px;
  }

  .layout-container.login-layout-container .footer .content .links-container,
  .layout-container.register-layout-container .footer .content .links-container {
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    gap: 16px;
  }
  
  .layout-container.login-layout-container .footer .content .links-container .links,
  .layout-container.register-layout-container .footer .content .links-container .links {
    gap: 8px;
  }
}

@media(max-width: 767px) {
  .layout-container.login-layout-container .navbar-container,
  .layout-container.register-layout-container .navbar-container {
    padding: 0px 40px;
  }

  .layout-container.login-layout-container .navbar,
  .layout-container.register-layout-container .navbar {
    height: 56px;
    align-self: stretch;
    padding: 0px !important; 
  }

  .layout-container.login-layout-container .navbar .tabs,
  .layout-container.register-layout-container .navbar .tabs {
    display: none;
  }

  .layout-container.login-layout-container .footer,
  .layout-container.register-layout-container .footer {
    justify-content: center;
    align-self: stretch;
    padding: 16px 0px;
    gap: 16px;
  }

  .layout-container.login-layout-container .footer .content,
  .layout-container.register-layout-container .footer .content {
    flex-direction: column;
    gap: 16px;
  }

  .layout-container.login-layout-container .footer .content .links-container,
  .layout-container.register-layout-container .footer .content .links-container {
    flex-direction: column;
    gap: 16px;
  }

  .layout-container.login-layout-container .footer .content .links-container .links,
  .layout-container.register-layout-container .footer .content .links-container .links {
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px;
  }

  .layout-container.login-layout-container .footer .content .links-container .copyright,
  .layout-container.register-layout-container .footer .content .links-container .copyright {
    flex-direction: column;
    justify-content: center;
    align-self: flex-start;
  }

  .error-banner .banner-content .error-icon {
    display: none;
  }
}



/* Login page background images */

@media(min-width: 768px) {
  .layout-container.register-layout-container,
  .layout-container.login-layout-container.privacy-policy-container,
  .layout-container.login-layout-container.maintenance-layout-container,
  .layout-container.login-layout-container.step-2fa-preference {
    background: var(--background-overlay), 
      url('../images/background_self_register.webp') lightgray top right / cover no-repeat;
  }
  
  .layout-container.login-layout-container.step-login,
  .layout-container.login-layout-container.step-password {
    background: var(--background-overlay), 
      url('../images/background_general.webp') lightgray top right / cover no-repeat;
  }

  .layout-container.login-layout-container.step-forget-password {
    background: var(--background-overlay), 
      url('../images/background_forgot_password.webp') lightgray top right / cover no-repeat;
  }

  .layout-container.login-layout-container.step-verification-code,
  .layout-container.login-layout-container.step-new-password,
  .layout-container.login-layout-container.step-password-reset-success {
    background: var(--background-overlay), 
      url('../images/background_verification_code.webp') lightgray top right / cover no-repeat;
}

  .layout-container.login-layout-container.step-forget-username,
  .layout-container.login-layout-container.step-forget-username-success {
    background: var(--background-overlay), 
      url('../images/background_forgot_username.webp') lightgray top right / cover no-repeat;
  }

  .layout-container.login-layout-container.step-error {
    background: var(--background-overlay), 
      url('../images/background_error_pages.webp') lightgray top right / cover no-repeat;
  }
}

@media(max-width: 767px) {
  .layout-container.register-layout-container,
  .layout-container.login-layout-container {
    background: var(--mobile-background);
  }
}