/* Small only */
/* Medium and up */
/* Medium only */
/* Large and up */
.squde-appliance {
  --primary-color: #e4a519;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 25px;
  margin: 0 auto; }
  @media screen and (min-width: 40em) {
    .squde-appliance {
      grid-template-columns: 200px auto; } }
  .squde-appliance .form-wrapper .autocomplete-wrapper {
    position: absolute;
    list-style: none;
    z-index: 100;
    display: grid;
    border: 1px solid rgba(84, 84, 84, 0.1) !important;
    background: white;
    margin: -1px 0 0; }
    .squde-appliance .form-wrapper .autocomplete-wrapper li {
      padding: 8px;
      cursor: pointer;
      transition: background-color 250ms ease; }
      .squde-appliance .form-wrapper .autocomplete-wrapper li:hover {
        background-color: rgba(0, 0, 0, 0.05); }
  .squde-appliance .results-wrapper {
    display: flex; }
    .squde-appliance .results-wrapper.open .left-side {
      width: 50%; }
    .squde-appliance .results-wrapper.open .right-side {
      width: 50%;
      padding-left: 25px; }
    .squde-appliance .results-wrapper .left-side {
      transition: all 250ms ease;
      width: 100%; }
    .squde-appliance .results-wrapper .right-side {
      transition: all 250ms ease;
      overflow: hidden;
      width: 0; }
    .squde-appliance .results-wrapper .results-box {
      border: solid 1px rgba(84, 84, 84, 0.1);
      padding: 25px;
      position: relative; }
      .squde-appliance .results-wrapper .results-box .select-appliance-first-overlay {
        position: absolute;
        background: rgba(255, 255, 255, 0.8);
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        transition: all 250ms ease; }
        .squde-appliance .results-wrapper .results-box .select-appliance-first-overlay p {
          margin: 50px auto;
          width: 500px;
          max-width: calc(100% - 20px);
          text-align: center; }
        .squde-appliance .results-wrapper .results-box .select-appliance-first-overlay.hidden {
          pointer-events: none;
          opacity: 0; }
      .squde-appliance .results-wrapper .results-box .legend-wrapper {
        display: flex;
        font-size: 10px;
        gap: 10px;
        margin-top: 10px;
        justify-content: center; }
        .squde-appliance .results-wrapper .results-box .legend-wrapper .legend-item {
          display: flex;
          gap: 5px; }
      .squde-appliance .results-wrapper .results-box .material-list-wrapper {
        margin-top: 25px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 25px; }
        .squde-appliance .results-wrapper .results-box .material-list-wrapper label {
          display: inline-grid;
          text-align: center;
          align-content: start;
          width: 200px; }
          .squde-appliance .results-wrapper .results-box .material-list-wrapper label .material-name {
            margin-top: 10px;
            color: var(--primary-color); }
          .squde-appliance .results-wrapper .results-box .material-list-wrapper label .material-image-wrapper {
            display: block;
            border-radius: 50%;
            overflow: hidden;
            width: 150px;
            height: 150px;
            margin: 0 auto;
            border: solid 5px white;
            transition: all 250ms ease-out; }
            .squde-appliance .results-wrapper .results-box .material-list-wrapper label .material-image-wrapper img {
              width: 100%;
              height: 100%;
              object-fit: cover; }
        .squde-appliance .results-wrapper .results-box .material-list-wrapper input {
          display: none; }
          .squde-appliance .results-wrapper .results-box .material-list-wrapper input:checked + label .material-image-wrapper {
            border-color: var(--primary-color); }
      .squde-appliance .results-wrapper .results-box ul.results-list-wrapper {
        list-style: none;
        margin: 25px 0 0;
        display: grid;
        grid-gap: 25px;
        transition: opacity 250ms ease;
        max-height: 400px;
        overflow: scroll; }
        .squde-appliance .results-wrapper .results-box ul.results-list-wrapper.loading {
          opacity: 0.3; }
        .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li {
          display: flex;
          justify-content: space-between; }
          .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li a {
            display: grid;
            grid-template-columns: 100px 1fr;
            grid-gap: 10px;
            align-items: center; }
          .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li .icons-wrapper {
            display: flex;
            align-items: center;
            gap: 5px;
            position: relative; }
            .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li .icons-wrapper .result-icon:not(.compatibility-unknown-icon) {
              display: none; }
            .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li .icons-wrapper .result-icon.compatibility-unknown-icon, .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li .icons-wrapper .result-icon.notes-icon {
              cursor: pointer; }
            .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li .icons-wrapper .notes-wrapper {
              display: block;
              position: absolute;
              transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              padding: 5px;
              height: 100%;
              width: 300px;
              overflow: scroll;
              transform: translateX(-100%);
              top: 0;
              font-size: 12px; }
              .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li .icons-wrapper .notes-wrapper:not(.visible) {
                pointer-events: none;
                transform: translateX(50%);
                opacity: 0; }
              .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li .icons-wrapper .notes-wrapper .notes-container {
                background: white;
                border-radius: 3px;
                box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
                padding: 10px; }
          .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li.has-notes .icons-wrapper .notes-icon {
            display: unset; }
          .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li.is-compatible .icons-wrapper .compatible-icon {
            display: unset; }
          .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li.is-not-compatible .icons-wrapper .not-compatible-icon {
            display: unset; }
          .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li.is-compatible .icons-wrapper .compatibility-unknown-icon, .squde-appliance .results-wrapper .results-box ul.results-list-wrapper li.is-not-compatible .icons-wrapper .compatibility-unknown-icon {
            display: none; }