#brands .brand-item {
  padding: 7px; }

.alphabet {
  margin-bottom: 20px; }

.alphabet a {
  margin: 0 5px;
  cursor: pointer;
  text-decoration: none; }

.alphabet a.highlight {
  font-weight: bold;
  color: var(--color-cta); }

.brand-list {
  box-sizing: border-box; }

.brand-section {
  width: 100%;
  padding: 0px 0 28px 0;
  position: relative;
  text-decoration: none;
  transition: all 100ms linear;
  margin-bottom: 21px; }

.bg-fix {
  position: sticky;
  width: 100%;
  height: 8px;
  background: var(--background-color);
  top: 56px;
  z-index: 1; }

.brand-section .brand:last-child .brand-flex {
  border-radius: 0 0 7px 7px; }

.brand-flex {
  box-shadow: inset 0px 0 0px 0.5px var(--border-color);
  width: 100%;
  padding: 14px;
  box-sizing: border-box;
  background: var(--context-nav-bg-color);
  cursor: pointer; }

.brand-flex.active {
  color: var(--text-color-accent);
  font-weight: 500;
  position: relative; }

.brand-flex.active:before {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--color-cta);
  top: calc(50% - 2.5px);
  left: 5px;
  border-radius: 4px; }

.brand-flex:hover {
  color: var(--text-color-accent); }

.brand-flex.no-result {
  border-bottom: 0; }

.brand-section h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 350; }

.brand-section h2 {
  margin: 0;
  background: var(--context-nav-bg-color);
  border: 0.5px solid var(--border-color);
  border-top: 0.5px solid var(--border-color);
  padding: 14px;
  border-radius: 7px 7px 0 0;
  top: 57px; }

#searchInput-b {
  background: none;
  border: 0;
  outline: none;
  color: var(--text-color-accent);
  border-bottom: 1px #ccc solid; }

#brand-brief {
  position: fixed;
  bottom: 0px !important;
  left: 2%;
  width: 96% !important;
  z-index: 4;
  top: inherit !important;
  animation-name: slideInUp;
  animation-delay: 300ms;
  animation-duration: 220ms;
  border-radius: 7px 7px 0 0  !important;
  padding: 21px;
  animation-duration: 1s;
  animation-duration: var(--animate-duration);
  animation-fill-mode: both; }
  #brand-brief .brand-logo {
    position: absolute;
    width: 42px;
    height: 40px;
    right: 14px;
    top: 14px;
    background-size: 85% !important;
    background-repeat: no-repeat !important;
    border-radius: 3.5px;
    background-color: #fff !important;
    background-position: center !important; }
  #brand-brief .label {
    font-size: 11px;
    border: 0.5px solid var(--border-color);
    padding: 1px 5px;
    display: inline-block;
    margin-right: 7px;
    color: var(--border-color);
    line-height: 14px;
    border-radius: 3.5px; }
    #brand-brief .label .label-premium {
      color: var(--color-digital_func_green);
      border: 0.5px solid var(--color-digital_func_green); }
  #brand-brief .p-items-wrapper {
    max-height: 45vh;
    overflow: hidden;
    overflow-y: scroll; }
    #brand-brief .p-items-wrapper .p-item {
      padding: 7px 0px 7px 0px;
      margin-bottom: 3px;
      text-decoration: none;
      border-bottom: 0.5px var(--border-color) solid; }
      #brand-brief .p-items-wrapper .p-item:hover {
        text-decoration: none; }
      #brand-brief .p-items-wrapper .p-item .p-title {
        font-weight: 600;
        line-height: 16px;
        display: block;
        overflow: hidden;
        font-size: 13px;
        color: var(--text-color-accent); }
      #brand-brief .p-items-wrapper .p-item .p-img {
        background-color: #fff !important;
        width: 60px;
        height: 55px;
        display: block;
        border-radius: 7px;
        background-position-x: center !important;
        background-size: 70% !important;
        background-position-y: center !important; }

.band-list-inner {
  z-index: 3;
  background: var(--background-color);
  padding: 21px 0 0px 0;
  align-items: baseline;
  overflow: hidden;
  overflow-x: scroll; }

#brand-grill {
  flex-wrap: nowrap;
  flex-direction: column; }
  #brand-grill > div:nth-child(1) {
    width: 100%; }
  #brand-grill > div:nth-child(2) {
    width: 100%; }
  #brand-grill .brand-flex h3 {
    width: 50% !important;
    font-size: 14px;
    line-height: 16px; }
  #brand-grill .brand-flex > small {
    width: 38% !important; }

.brand-card-placeholder {
  height: 40vh;
  width: 100%;
  display: block; }

#toggle-card-control {
  height: 32px; }

#toggle-card {
  height: 1px;
  width: 40%;
  background: #ccc;
  padding: 2px;
  border-radius: 7px;
  margin: 0px auto 21px auto; }

@media only screen and (min-width: 720px) {
  #brand-brief {
    position: sticky;
    bottom: 0px !important;
    left: 2%;
    width: 96% !important;
    z-index: 3;
    top: 56px !important;
    animation-name: inherit;
    animation-delay: inherit;
    animation-duration: inherit;
    animation-duration: inherit;
    animation-duration: inherit;
    animation-fill-mode: inherit; }
  #brand-grill {
    flex-wrap: nowrap;
    flex-direction: row; }
    #brand-grill > div:nth-child(1) {
      width: 55%; }
    #brand-grill > div:nth-child(2) {
      width: 45%; }
    #brand-grill .brand-flex h3 {
      width: 50% !important;
      font-size: 14px;
      line-height: 16px; }
    #brand-grill .brand-flex > small {
      width: 40% !important; } }

@media only screen and (min-width: 1100px) {
  #brand-grill > div:nth-child(1) {
    width: 65%; }
  #brand-grill > div:nth-child(2) {
    width: 35%; }
  #brand-grill .brand-flex h3 {
    width: 50% !important;
    font-size: 14px;
    line-height: 16px; }
  #brand-grill .brand-flex > small {
    width: 40% !important; } }