/**
 * The base file that should be imported by every file.
 * There should be no CSS generation in this or from imported scss files at all!
 */
/**
 * Library
 */
/**
 * Variables and functions
 */
.section-search-suggestions .container-wrapper .left .suggestions .suggestion, .section-search-suggestions .container-wrapper .right .suggestions .suggestion,
.section-search-suggestions .container-wrapper .left .suggestions .suggestion:visited,
.section-search-suggestions .container-wrapper .right .suggestions .suggestion:visited {
  display: inline-block;
  text-decoration: none;
  color: var(--white);
  font-family: "JetBrains Mono", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 110%;
  font-weight: 800;
  padding: 19px 25px 19px 15px;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--dark-blue);
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; }
  @media all and (min-width: 981px) {
    .section-search-suggestions .container-wrapper .left .suggestions .suggestion, .section-search-suggestions .container-wrapper .right .suggestions .suggestion,
    .section-search-suggestions .container-wrapper .left .suggestions .suggestion:visited,
    .section-search-suggestions .container-wrapper .right .suggestions .suggestion:visited {
      font-size: 16px;
      padding: 31px 35px 31px 25px; } }
  .section-search-suggestions .container-wrapper .left .suggestions .suggestion:before, .section-search-suggestions .container-wrapper .right .suggestions .suggestion:before,
  .section-search-suggestions .container-wrapper .left .suggestions .suggestion:visited:before,
  .section-search-suggestions .container-wrapper .right .suggestions .suggestion:visited:before {
    content: '\e901';
    font-family: Icomoon;
    color: var(--green);
    margin-right: 10px;
    position: relative;
    top: 2px;
    transition: color 0.3s ease-in-out; }
  .section-search-suggestions .container-wrapper .left .suggestions .suggestion:hover, .section-search-suggestions .container-wrapper .right .suggestions .suggestion:hover, .section-search-suggestions .container-wrapper .left .suggestions .suggestion:focus, .section-search-suggestions .container-wrapper .right .suggestions .suggestion:focus,
  .section-search-suggestions .container-wrapper .left .suggestions .suggestion:visited:hover,
  .section-search-suggestions .container-wrapper .right .suggestions .suggestion:visited:hover,
  .section-search-suggestions .container-wrapper .left .suggestions .suggestion:visited:focus,
  .section-search-suggestions .container-wrapper .right .suggestions .suggestion:visited:focus {
    text-decoration: none;
    outline: none;
    background: var(--gray-blue);
    color: var(--white); }

.section-search-suggestions {
  position: relative;
  overflow: hidden; }
  .section-search-suggestions .title {
    text-align: left; }
    .section-search-suggestions .title h2 {
      color: var(--green); }
      @media (min-width: 981px) {
        .section-search-suggestions .title h2 {
          -webkit-padding-start: 3rem;
                  padding-inline-start: 3rem;
          font-size: 53px; } }
    .section-search-suggestions .title h1, .section-search-suggestions .title h2, .section-search-suggestions .title h3 {
      margin-top: 0; }
  .section-search-suggestions .container-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    z-index: 1; }
    @media (min-width: 981px) {
      .section-search-suggestions .container-wrapper {
        grid-template-columns: repeat(2, 1fr);
        -webkit-margin-before: 48px;
                margin-block-start: 48px; } }
    .section-search-suggestions .container-wrapper .left, .section-search-suggestions .container-wrapper .right {
      padding: 30px; }
      @media (min-width: 981px) {
        .section-search-suggestions .container-wrapper .left, .section-search-suggestions .container-wrapper .right {
          padding: 45px; } }
      .section-search-suggestions .container-wrapper .left .content, .section-search-suggestions .container-wrapper .right .content {
        padding-bottom: 22.5px; }
        @media (min-width: 981px) {
          .section-search-suggestions .container-wrapper .left .content, .section-search-suggestions .container-wrapper .right .content {
            padding-bottom: 30px; } }
        .section-search-suggestions .container-wrapper .left .content h4, .section-search-suggestions .container-wrapper .right .content h4 {
          margin: 0; }
        .section-search-suggestions .container-wrapper .left .content p, .section-search-suggestions .container-wrapper .right .content p {
          margin-top: 0; }
          .section-search-suggestions .container-wrapper .left .content p:last-of-type, .section-search-suggestions .container-wrapper .right .content p:last-of-type {
            margin-bottom: 0; }
      .section-search-suggestions .container-wrapper .left .suggestions, .section-search-suggestions .container-wrapper .right .suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: .625em; }
        .section-search-suggestions .container-wrapper .left .suggestions .suggestion, .section-search-suggestions .container-wrapper .right .suggestions .suggestion {
          background-color: var(--dark-blue);
          padding: 15px; }
          @media (max-width: 767px) {
            .section-search-suggestions .container-wrapper .left .suggestions .suggestion, .section-search-suggestions .container-wrapper .right .suggestions .suggestion {
              width: 100%; } }
          .section-search-suggestions .container-wrapper .left .suggestions .suggestion:before, .section-search-suggestions .container-wrapper .right .suggestions .suggestion:before {
            display: none; }
          .section-search-suggestions .container-wrapper .left .suggestions .suggestion:hover, .section-search-suggestions .container-wrapper .right .suggestions .suggestion:hover {
            background-color: var(--gray-blue);
            text-decoration: none; }
          .section-search-suggestions .container-wrapper .left .suggestions .suggestion .link, .section-search-suggestions .container-wrapper .right .suggestions .suggestion .link {
            display: flex;
            gap: 10px;
            align-items: center;
            font-size: 16px; }
            .section-search-suggestions .container-wrapper .left .suggestions .suggestion .link .icon-search, .section-search-suggestions .container-wrapper .right .suggestions .suggestion .link .icon-search {
              font-size: 18px;
              color: var(--green); }
    .section-search-suggestions .container-wrapper .left {
      background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); }
      @media (min-width: 981px) {
        .section-search-suggestions .container-wrapper .left {
          background-color: var(--white); } }
    .section-search-suggestions .container-wrapper .right {
      background: linear-gradient(180deg, #00FFA0 0%, rgba(0, 255, 160, 0) 100%); }
      @media (min-width: 981px) {
        .section-search-suggestions .container-wrapper .right {
          background-color: var(--green); } }
  .section-search-suggestions.gray:before {
    content: '';
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgba(44, 67, 94, 0.4) 0%, rgba(44, 67, 94, 0) 100%); }
  .section-search-suggestions.gray:after {
    content: '';
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(/app/themes/nfc-houseofbeta/assets/images/grid-pattern-mobile.png); }
    @media (min-width: 768px) {
      .section-search-suggestions.gray:after {
        background-image: url(/app/themes/nfc-houseofbeta/assets/images/grid-pattern-desktop.png); } }
  .section-search-suggestions.dark {
    color: var(--dark-blue); }
    .section-search-suggestions.dark .content h4 {
      color: var(--dark-blue); }
  .section-search-suggestions.green .right {
    background: linear-gradient(180deg, #2C435EFF 0%, rgba(0, 255, 160, 0) 100%);
    color: var(--white); }
    @media (min-width: 981px) {
      .section-search-suggestions.green .right {
        background-color: var(--dark-blue); } }
    .section-search-suggestions.green .right h4 {
      color: var(--white); }
    .section-search-suggestions.green .right .suggestions .suggestion {
      background-color: var(--white); }
      .section-search-suggestions.green .right .suggestions .suggestion .link {
        color: var(--dark-blue); }

/*# sourceMappingURL=search-suggestions.css.map */