html {
  --c-bg-cell-selected: #eeeff1;
  --c-bg-cell: #ffffff;
  --c-blue-dark: #03234b;
  --c-green: #178f40;
  --c-gray: #525a63;
  --c-gray-light: #f7f8fa;
  --c-gray-lighter: #dbdee2;
  --c-blue: #3cb4e6;
  --c-yellow: #ffd200;
}

.st-crew-devzone
  .stsel-selector-ctn:not(.stsel-compare-mode)
  .st-table--product-selector
  tr:hover
  td:not(.st-table__slide-down--content) {
  background-color: var(--c-bg-cell-selected);
}

.st-crew-devzone .st-table__cell--hover {
  background-color: var(--c-bg-cell-selected);
}

.st-crew-devzone .stsel-product-selector table tr th.sort-cell {
  background-color: var(--c-bg-cell);
}

.st-crew-devzone .st-table__cell--fixed.js-st-table-cell-fixed {
}

.st-crew-devzone.st-crew-devzone .st-quickview-rpn-title a {
  color: var(--c-blue-dark);
  text-decoration: underline;
  text-underline-offset: 0.5rem;
  font-size: 17px;
}

.st-crew-devzone .st-quickview-rpn-title a:hover {
  color: var(--c-blue-dark);
}

.st-crew-devzone div.st-badge {
  color: var(--c-bg-cell-selected);
  background-color: var(--c-green);
  border-radius: 0.1875rem;
  font-size: 13px;
}

.st-crew-devzone div.st-badge--nrnd {
  background-color: var(--c-blue);
  color: var(--c-blue-dark);
}

.st-crew-devzone div.st-badge--oop {
  background-color: var(--c-gray);
}

.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone td {
  font-size: 17px;
  color: var(--c-gray);
  /* border: solid 1px var(--c-gray-lighter); */
  background-color: var(--c-bg-cell);
}

.st-crew-devzone.st-crew-devzone th::before,
.st-crew-devzone.st-crew-devzone td::before {
  /* all: unset; */
  background-color: var(--c-gray-light);
  width: 2px;
  height: 100%;
}

.st-crew-devzone
  .stsel-product-selector
  th.st-table__head-item--fixed.js-st-table-cell-fixed::after {
  /* all: unset; */
  background-color: var(--c-gray-light);
}

.st-crew-devzone
  .st-table--product-selector
  .st-table__cell--fixed:nth-child(2) {
  left: 65px;
}

.st-crew-devzone .stsel-product-selector .st-table__cell--fixed:nth-child(1) {
}

.st-crew-devzone
  .stsel-product-selector
  .st-table__head-item--fixed:nth-child(1) {
  width: 215px;
}

.st-crew-devzone .st-table__sticky-wrapper.js-st-table-sticky-header th {
  background-color: var(--c-bg-cell);
}

.st-crew-devzone .stsel-show-hide-description {
  visibility: hidden;
}

.st-crew-devzone .stsel-product-selector .stsel-rpn-filter input[type="text"] {
  background-color: var(--c-gray-light);
  border-radius: 4px;
}

.st-crew-devzone .st-table--product-selector thead th > span {
  color: var(--c-blue-dark);
  font-size: 15px;
}

.st-crew-devzone
  .stsel-product-selector
  .st-table__sticky-wrapper
  th
  .stsel-cell-title
  > span {
  font-size: 15px;
}

.st-crew-devzone.st-crew-devzone th {
  /* border-right: solid var(--c-gray-light) 1px; */
  border-width: 1px;
}

.st-crew-devzone .st-quickview__section-headline {
  font-size: 17px;
}

.st-crew-devzone .st-badge {
}

.st-crew-devzone
  .stsel-quickview__links
  .st-button--outline.st-magento.st-button--outline.st-magento {
  color: var(--c-blue-dark);
  background-color: var(--c-yellow);
  border-color: transparent;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 6px;
  font-size: 15px;
  font-weight: bold;
}

.st-crew-devzone
  .stsel-quickview__links
  .st-button--outline.st-magento.st-button--outline.st-magento
  > svg {
  display: none;
}

.st-crew-devzone .st-quickview__section-headline {
  color: var(--c-blue-dark);
  font-size: 17px;
}

.st-crew-devzone .stsel-quickview-title .st-badge {
  display: none;
}

.st-crew-devzone .st-table__info-box {
  justify-content: center;
  align-items: center;
}

.st-crew-devzone .st-quickview__item a.st-link {
  color: var(--c-blue-dark);

  text-decoration: underline;
  text-underline-offset: 8px;
  font-weight: bold;

  font-size: 17px;
}

@media only screen and (min-width: 64.063em) {
  .st-crew-devzone
    .stsel-selector-ctn
    .st-table--product-selector
    .st-quickview-rpn-title {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.st-crew-devzone .st-container {
}

.st-crew-devzone table {
  border-spacing: 0 2px;
  background-color: var(--c-gray-light);
}

/**
 * Edit @stefano gagliardi 
 */
.st-crew-devzone .st-table__cell--fixed.js-st-table-cell-fixed {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cart icon */
.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone
  td
  .st-table__info-box
  a.st-badge {
  background-color: transparent;
  background: transparent;
}

.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone
  td:nth-child(3) {
  vertical-align: middle;
}

.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone
  td:nth-child(3)
  .st-table__info-box {
  justify-content: start;
}

/* Change checkbox color */
.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone
  td
  input[type="checkbox"]:checked
  + label:after {
  border-bottom: 1px solid var(--c-blue-dark);
  border-right: 1px solid var(--c-blue-dark);
}
.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone
  td
  input[type="checkbox"]:checked
  + label:before {
  background-color: #fff;
  background: #fff;
  border-color: #fff;
}

/* Center checkbox */
.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone
  td
  .st-checkbox {
  display: flex;
}
.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone
  td
  .st-checkbox
  input[type="checkbox"]
  + label {
  margin: 0 0 18px 0;
  padding: 0 0 0 18px;
}

.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone
  table
  thead
  tr:first-child
  th {
  text-align: left;
  vertical-align: middle;
  color: #525a63;
  background-color: #eeeff1;
  border-bottom: 1px solid #a6adb5 !important;
  border-left: 5px solid #a6adb5 !important;
  border-right: 0px !important;
  font-size: 15px;
  padding-top: 0px;
  padding-bottom: 0px;
  height: 36px;
}

/* Remove white space between th cell */
.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone
  table
  thead
  tr:first-child
  th:after,
.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone
  table
  thead
  tr:first-child
  th:before {
  content: none;
}

.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone
  td:first-child {
  height: 100px;
}

/* Move icon iction: export, bookmark, share */
/* .st-action-icons {
  position: fixed;
  top: 90vh;
  z-index: 999;
  left: calc(50% - 140px);
  background: #fff;
  padding: 10px;
  border: 1px solid red;
} */

/* Align vertical text in td  */
.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone td {
  vertical-align: middle;
}

/* Export, fav and share icon */
.st-crew-devzone .st-link.st-link--export,
.st-crew-devzone .st-link.st-link--share,
.st-crew-devzone .st-link.st-link--bookmark {
  border: 1px solid var(--c-blue-dark);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.st-crew-devzone .st-link.st-link--export:hover,
.st-crew-devzone .st-link.st-link--share:hover,
.st-crew-devzone .st-link.st-link--bookmark:hover {
  background-color: var(--c-blue-dark);
}
.st-crew-devzone .st-link.st-link--export:hover svg path,
.st-crew-devzone .st-link.st-link--share:hover svg path,
.st-crew-devzone .st-link.st-link--bookmark:hover svg path {
  fill: #fff;
}

.st-crew-devzone .st-action-icons {
  margin-top: 3px;
}

/* Expand Filter */
.st-crew-devzone
  .st-table-header__toolbox
  .st-button.st-button--outline.st-magento {
  background-color: var(--c-blue-dark);
  border-color: var(--c-blue-dark);
  color: #fff;
  height: 39px;
  border-radius: 4px;
}
.st-crew-devzone
  .st-table-header__toolbox
  .st-button.st-button--outline.st-magento
  svg {
  fill: #fff;
}

.st-crew-devzone
  .st-table-header__toolbox
  .st-button.st-button--outline:not(.st-magento) {
  color: var(--c-blue-dark);
  border-color: var(--c-gray-lighter);
  height: 39px;
  border-radius: 4px;
}

/* Remove spacing between stick table head and table body (content) */
.st-crew-devzone .stsel-product-selector .st-table__sticky-wrapper {
  margin: 0 0 2px 215px;
}

/* Try to style compare button (not in zepplin) @TODO Validate TWO LEFT BUTTON STYLE */
.st-crew-devzone .st-button.stsel-compare-btn {
  background-color: var(--c-blue-dark);
  border-color: var(--c-blue-dark);
  color: #fff;
  border-radius: 4px;
}

/* Try to style button when user is in "Compare mode" exit is outline */
.st-crew-devzone .stsel-exit-compare-btn {
  color: var(--c-blue-dark);
  border-color: var(--c-gray-lighter);
  height: 39px;
  border-radius: 4px;
}
.st-crew-devzone .stsel-exit-compare-btn span {
  /* center button text */
  height: 100%;
  display: flex;
  align-items: center;
}
.st-crew-devzone .stsel-exit-compare-btn:hover {
  opacity: 0.9; /* Decrease opacity to give hover feedback to user */
}
.st-crew-devzone .stsel-exit-compare-btn:hover span {
  /* hover text color */
  color: var(--c-blue-dark);
}
/* Try to style button when user is in "Compare mode" Show difference (CTA) in blue */
.st-crew-devzone .stsel-show-differences-btn {
  background-color: var(--c-blue-dark);
  border-color: var(--c-blue-dark);
  color: #fff;
  border-radius: 4px;
  height: 39px;
}
.st-crew-devzone .stsel-show-differences-btn span {
  /* center button text */
  height: 100%;
  display: flex;
  align-items: center;
}
.st-crew-devzone .stsel-show-differences-btn:hover {
  opacity: 0.9; /* Decrease opacity to give hover feedback to user */
}
.st-crew-devzone .stsel-show-differences-btn:hover span {
  /* hover text color */
  color: #fff;
}

/* TEXT color total product loaded NOT IN ZEPPLI @TODO Validate */
.st-crew-devzone .st-notification-overlay__counter.st-text-color--light-blue {
  color: var(--c-blue-dark);
}

/* Fix overlay text LEFT Center. Not just 50% but 50% - half of overlay content */
.st-crew-devzone .st-notification-wrapper--overlay {
  left: calc(50% - 125px);
  bottom: 40px;
}

/* Ovveride spinnger icon (loader) with new svg with color dark blue just for this page, svg icon come from repo st-site-cx so ovveride file is for entire Website */
.st-crew-devzone .st-loading-spinner {
  /* loading-spinner_dark-blue.svg   */
  background: url("../../../etc/clientlibs/st-site-cx/media/app/images/loading-spinner_dark-blue.svg")
    center center no-repeat;
}
/* Center horizontal loader */
.st-crew-devzone .stm32poc-loading {
  left: calc(50% - 25px);
}

/* First section text style and width */
.st-crew-devzone .st-container-fluid.hero-text .st-row {
  max-width: 100%;
}
.st-crew-devzone .st-container-fluid.hero-text .st-row h2 {
  color: var(--c-blue-dark);
  font-size: 24px;
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 500;
  font-family: LubalinGraphStd-Medium, Arial, Helvetica, sans-serif;
}
.st-crew-devzone .st-container-fluid.hero-text .st-row p {
  color: var(--c-gray);
  font-size: 17px;
  margin-top: 0;
  margin-bottom: 17px; /* NB: Not work because under content is placed via Absolute with fixed top at 200px */
  line-height: 24px;
  font-weight: normal;
}
.st-crew-devzone .st-container-fluid.hero-text {
  width: 100%;
  max-width: 100%;
  padding-left: 35px;
  padding-right: 35px;
  padding-top: 44px; /* base 50px, zepplin 44px */
  font-family: LubalinGraphStd-Medium, Arial, Helvetica, sans-serif;
}

/**
 * NB: EXPERIMENTAL - Try to uniform table padding with page initial section
 * Teoria, tutti gli elementi dentro sono relativi al container e dovrebbero adattarsi.
 * NB: ho dato solo padding a sinistra in quanto a destra ci sta che dia l'idea che continua e scrolla
 */
.st-crew-devzone .st-page-content.js-st-page-content {
  padding-left: 35px;
}

/**
 * Table head filter offset top range selector
 */
.st-crew-devzone
  table.js-st-checkbox-table-compare
  .sort-cell
  .stsel-filter-container-range {
  margin-top: 25px;
}

/* Style table head filer checkbox */
.st-crew-devzone
  table.js-st-checkbox-table-compare
  .sort-cell
  .st-checkbox
  input[type="checkbox"]
  + label {
  line-height: 20px;
  margin-bottom: 8px;
  font-size: 13px;
  padding-left: 26px;
  color: var(--c-gray);
}

/* Table head filter scrollbar color */
.simplebar-track.vertical .simplebar-scrollbar:before {
  background-color: var(--c-blue-dark);
}

/* Just Desktop, from Tablet breakpoint end */
@media (min-width: 64.063em) {
  .stsel-product-selector .st-table-header__headline--products {
    padding: 0 35px 0 0; /* Uniform with .st-container-fluid.hero-text with zepplin value of 35px */
  }
}

/* Mobile breakpoint */
@media (max-width: 40em) {
  /* Style for mobile version of "Filter and columns */
  .st-crew-devzone
    .st-table-header__left
    .st-table-header__button--left.st-button--show-filters.js-st-filter-open:not(
      .st-magento
    ) {
    color: var(--c-blue-dark);
    border-color: var(--c-gray-lighter);
    height: 39px;
    border-radius: 4px;
  }

  /* Icon action: export, favorite and share spacing */
  .st-crew-devzone
    .stsel-product-selector
    .st-table-header__toolbox
    .st-link.st-link--export,
  .st-crew-devzone
    .stsel-product-selector
    .st-table-header__toolbox
    .st-link.st-link--bookmark {
    margin-right: 20px;
  }

  /* Center horizontal first col checkbox */
  .st-crew-devzone td .st-checkbox {
    justify-content: center;
  }

  /* Uniform table head action margin bottom like top */
  .st-crew-devzone .st-table-header__headline--products {
    margin-bottom: 20px;
  }

  /* Improve checkbox spacing */
  .st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone
    td
    .st-checkbox
    input[type="checkbox"]
    + label {
    padding: 0 0 0 16px;
  }

  /* Text size title second cell mobile 16px */
  .st-crew-devzone.st-crew-devzone .st-quickview-rpn-title a {
    font-size: 16px;
  }

  /* Second cell align content to start and add padding to cell */
  .st-crew-devzone
    .st-table--product-selector
    .st-table__cell--fixed:nth-child(2) {
    justify-content: start;
    padding-left: 10px;
  }
  /* Remove negative margin to badge and cart icon */
  .st-crew-devzone
    .st-table--product-selector
    .st-table__cell--fixed
    .st-table__info-box {
    margin-left: 0px;
  }

  /* Decease checkbox col size. And adpat second col */
  .st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone
    td:first-child {
    padding-left: 0px;
    padding-right: 0px;
    max-width: 50px !important;
    width: 50px !important;
  }
  .st-crew-devzone
    .st-table--product-selector
    .st-table__cell--fixed:nth-child(2) {
    left: 50px; /* Another left is set for desktop always in this file under crew-devzone */
  }

  /* Set width of first table head cell: 50px (checkbox col) + 140 product tilte */
  .st-crew-devzone
    .stsel-product-selector
    .st-table__head-item--fixed:nth-child(1) {
    width: 190px;
  }

  /* set scrollable table offset like first thead cell (sum of chebkbox td and product title td)  */
  .st-crew-devzone .stsel-product-selector .st-table__sticky-wrapper {
    margin: 0 0 0 190px;
  }

  /* Page title container spacing */
  .st-crew-devzone .stm32poc-content .st-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Table head total entries text vertical align */
  .st-crew-devzone
    .stsel-product-selector
    .st-table-header__headline
    .st-table-header__total {
    margin-bottom: 0px;
    line-height: 29px; /* Like total div height */
  }

  /* Move table head icon action (fav, export, share) on right, opposite to total entries text */
  .st-crew-devzone .stsel-product-selector .st-table-header__toolbox {
    float: right;
    margin-left: 0px;
  }

  /* Remove spacing between thead and table content. */
  .st-crew-devzone .stsel-product-selector .st-table__sticky-wrapper {
    margin: 0 0 -2px 190px;
  }

  /* Remove desktop page left padding */
  .st-crew-devzone .st-page-content.js-st-page-content {
    padding-left: 0px;
  }

  /* Cente product counter overlay content */
  .st-crew-devzone .st-notification-overlay {
    padding: 0;
    display: flex;
    justify-content: center;
  }
  /* Cente product counter overlay box */
  .st-crew-devzone .st-notification-wrapper--overlay {
    /* left: calc(50% - 110px); */
    left: 25%; /* width: 50% */
    margin-left: 0;
    margin-right: 0;
  }
  /* Style back to top icon*/
  .st-crew-devzone .st-footer .back-to-top-btn {
    opacity: 0.9;
    background-color: var(--c-blue-dark);
  }
  /* uniform spacing between button filters and column and under action icon */
  .st-crew-devzone .st-table-header__headline .st-table-header__button--left {
    margin-bottom: 20px;
  }
}

/* Mobile and Table */
@media (max-width: 64em) {
  /* go to new row "tag" active with cart icon. Mobile and table */
  .st-crew-devzone .st-table__cell--fixed.js-st-table-cell-fixed {
    flex-wrap: wrap;
  }

  /* Center favorite icon button */
  .st-crew-devzone
    .stsel-product-selector
    .st-table-header__headline
    .st-popover
    .st-link--bookmark {
    display: flex;
  }

  /* Background page and table head like zepplin */
  .st-crew-devzone .st-page-content.js-st-page-content,
  .st-crew-devzone .st-container-fluid.hero-text,
  .st-crew-devzone .st-breadcrumbs + .st-container .row.st-row .large-12 {
    background-color: var(--c-gray-light);
  }

  /* Show more filter table head icon color*/
  .st-crew-devzone
    .st-table-header__left
    .st-table-header__button--left.st-button--show-filters.js-st-filter-open.st-button--outline:not(
      .st-magento
    )
    svg.st-button__icon {
    fill: var(--c-blue-dark);
  }

  /* Cart icon, second cell, spacing from badge */
  .st-crew-devzone td .st-table__info-box a.st-badge {
    margin-left: 10px;
  }
}

/* Just tablet */
@media (min-width: 40.063em) and (max-width: 64em) {
  /* scrollable table margin from left and set width of first thead cell  */
  .st-crew-devzone .stsel-product-selector .st-table__sticky-wrapper {
    margin: 0 0 2px 208px;
  }
  .st-crew-devzone
    .stsel-product-selector
    .st-table__head-item--fixed:nth-child(1) {
    width: 205px;
  }
}

/**
 * ===========================================================
 * Iframe test - Copy tablet and mobile breakpoint to separate code
 * ============================================================
 */

/* Rearranged the top space since we removed the header and footer for use page in iFrame  */
/* @media screen and (min-width: 64.063em) {
  .st-main {
    margin-top: 0px;
  }
} */

/* hidden iFrame scrollbar */
html.st-crew-devzone {
  /* Hide scrollbar style for IE */
  /* -ms-overflow-style: none; */
  /* Hide scrollbar style from Firefox*/
  /* scrollbar-width: none; */

  /* overflow-y: scroll;
  overflow-x: hidden; */
}

/* hidden iFrame scrollbar for Chrome, Safari and Opera */
html.st-crew-devzone::-webkit-scrollbar {
  /* display: none; */
}
/* 
.st-crew-devzone .st-notification-wrapper--overlay {
  bottom: 100px;
} */

/* custom scrollbar */
/* html.st-crew-devzone::-webkit-scrollbar {
  width: 20px;
}

html.st-crew-devzone::-webkit-scrollbar-track {
  background-color: transparent;
}

html.st-crew-devzone::-webkit-scrollbar-thumb {
  background-color: var(--c-blue-dark);
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
} */

/* html.st-crew-devzone::-webkit-scrollbar-thumb:hover {
  background-color: var(--c-blue-dark);
} */

/* Hide horizontal scrollbar */
/* .st-crew-devzone .fixed-scrollbar {
  display: none;
} */

/* Hide mobile header from iframe */
/* .show-for-medium-down.st-header--mobile {
  display: none !important;
} */

/*
 * Smartphone: @media (max-width: 40em)
 * Tablet: @media and (min-width: 40.063em) & @media (max-width: 64em)
 * After tablet / Desktop: @media (min-width: 64.063em)
 */

/* Until tablet max size. Mobile and table effective */
@media (max-width: 64em) {
  /* Reset margin-top offset used for removed/hide header */
  .st-crew-devzone main.st-main.js-st-main {
    /* margin-top: 0; */
  }
}

/* 
 * Style for first hero section
 */

.crew-hero-no-img {
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  background: #03234b;
  color: #fff;
  min-height: 240px;
}

.cover-image-container {
  position: relative;
  overflow: hidden;
}

.crew-breadcrumbs.crew-breadcrumbs-normal-font {
  font-weight: normal;
}
.crew-breadcrumbs.crew-breadcrumbs-normal-font a{
  font-weight: normal;
}
.crew-breadcrumbs {
  display: none;
  font-size: 17px !important;
  font-weight: bold;
  left: 61px;
  line-height: 1.4;
  position: absolute;
  top: 82px;
  z-index: 3;
}

@media (min-width: 1025px) {
  .crew-breadcrumbs {
    display: block;
  }
}

.container {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 641px) {
  .container {
    padding-right: 40px;
    padding-left: 40px;
  }
}

ul.clear-defaults {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.clear-defaults li {
  display: inline;
  padding: 0px;
  color: #fff !important;
  font-size: 17px !important;
}
ul.clear-defaults li a {
  color: #fff;
}
ul.clear-defaults li::before {
  content: none;
}

.clear-defaults li {
  font-weight: normal;
}

.crew-hero-no-img .container {
  align-items: stretch;
  display: flex;
  justify-content: center;
}

.cover-image-container .container,
.cover-image-container .content {
  position: relative;
  z-index: 2;
}

.crew-hero-no-img .devzone-homepage-container h2 {
  font-size: 36px;
}

.crew-hero-no-img p:last-child {
  padding-bottom: 0;
}

.crew-hero-no-img .devzone-homepage-container p {
  font-size: 21px;
  line-height: 1.35;
}

.light-text h2,
.light-text p {
  color: #fff !important;
  font: 120px/1.4 LubalinGraphStd-Medium, Arial, Helvetica, sans-serif;
}

.crew-hero-no-img h2 {
  margin-bottom: 0px;
  padding-bottom: 8px;
}

.clear-defaults li:last-child {
  font-weight: bold;
}

@media (max-width: 640px) {
  .crew-hero-no-img .devzone-homepage-container p {
    font-size: 17px;
  }
}

@media (max-width: 640px) {
  .crew-hero-no-img .devzone-homepage-container h2 {
    font-size: 30px;
  }
}

/* 
  NB: in test enviroment will reder an arrow on first cell next to checkbox
  This arrow is rendered by package SELECTORS-CXST. Search for "showCPNsMasterSwitch"
  This javacript properties is set from JAVA before return json, probably is an AEM Settings. 
*/
.stsel-show-cpns-btn.js-show-cpns-button {
  display: none !important;
}

/* Popup icon */
.stsel-quickview__links .stsel-datasheet-icon,
.stsel-quickview__links a svg {
  display: none;
}

/* Hide compare icon */
.st-crew-devzone .st-link.st-link--share {
  display: none;
}

.st-crew-devzone .st-container-fluid.hero-text .st-row p {
  font-family: Arial, Helvetica, sans-serif;
}

.stsel-compare-btn span:first-child {
  margin-right: 5px;
}

.st-crew-devzone table thead tr:first-child th,
.st-crew-devzone.st-crew-devzone.st-crew-devzone.st-crew-devzone table thead tr:first-child th {
  font-size: 13px;
  line-height: 14px !important;
}

.st-crew-devzone div.st-badge {
  margin-left: 10px;
}

/* Fix tablet button position in selector mode */
@media (max-width: 870px) and (min-width: 640px) {
  .stsel-selector-ctn.stsel-compare-mode .st-table-header__headline--products .st-table-header__left {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: start;
  }

  .stsel-selector-ctn.stsel-compare-mode .st-crew-devzone .st-action-icons {
    margin-left: auto;
  }
}

/* Fix nav icon on mcu portfolio */
img.stm32-tab-community {
  top: -2px !important;
}