/* Start:/local/media/slate_tiles/css/systems.scss?17594725185510*/
.system-page {
  margin-top: 60px;
  background: #fff;
  padding: 32px 0;
  font-family: "Proxima Nova", sans-serif;
  @media (max-width: 1200px) {
    padding: 32px 10px;
  }

  .container {
    max-width: 1200px;
  }

  h1 {
    color: #1f1f1f;
    font-weight: 800;
    line-height: 120%;
    font-size: 2.125rem;
    padding: 32px 0;
    margin: 0;
  }

  .description {
    font-weight: normal;
    line-height: 1.5;
    color: #0a0a0a;
    font-size: 18px;
    margin-bottom: 35px;
    max-width: 800px;
  }

  .img-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 20px;
    margin-bottom: 40px;
    @media (max-width: 1200px) {
      grid-template-columns: 1fr 1fr;
    }
    @media (max-width: 676px) {
      grid-template-columns: 1fr;
    }

    .img_wrapper {
      position: sticky;
      top: 0;
      border-radius: 10px;
      border: 1px solid #e1e5ee;
      padding: 10px;
      height: fit-content;
      @media (max-width: 676px) {
        position: relative;
        top: auto;
      }
    }

    img {
      display: block;
      width: 100%;
      height: auto;
      margin: 0 auto;
      border-radius: 10px;
    }

  }

  .product_list {
    display: grid;
    height: fit-content;
    gap: 10px;

    .product_list-title {
      font-weight: 600;
      font-size: 18px;
      line-height: 130%;
      padding-bottom: 15px;
      display: flex;


    }

    ul {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;

      li {
        position: relative;
        padding-left: 25px;
        display: grid;
        list-style: none;
        font: normal 400 14px / 18px Proxima Nova;
        color: #0a0a0a;
        font-weight: normal;

        span, p, a {
          font: normal 400 14px / 18px Proxima Nova;
          -webkit-font-smoothing: antialiased;
        }

        span {
          position: absolute;
          left: 0;
          top: 0;
          width: 25px;
          display: inline-block;
          flex: 0 0 auto;
          color: #1f1f1f;
          margin-right: 15px;
          font-weight: 600;
        }

        a {
          color: #156ce1;

          &:hover {
            color: #156ce1;
          }
        }
      }

      .inner-droped {
        display: grid;
        grid-template-columns: auto auto auto;
        width: fit-content;
        padding-right: 25px;

        .droped-arrow {
          display: block;
          content: '';
          width: 18px;
          height: 18px;
          background: url('/local/media/slate_tiles/css/imgs/arrow-down.svg') no-repeat center center;
          cursor: pointer;
          margin-left: 5px;
        }
      }

      .inner-droped.active {

        .droped-arrow {
          display: block;
          content: '';
          background: url('/local/media/slate_tiles/css/imgs/arrow-top-alternate.svg') no-repeat center center;
        }
      }

      .droped-list {
        grid-area: 2/1/3/4;
        display: none;
        margin-top: 5px;
        width: 100%;

        li {
          padding-left: 15px;

          &:before {
            display: block;
            content: '•';
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      }
    }
  }
}

.tabs_container {
  display: grid;
  gap: 20px;

  .tabs_buttons {
    display: flex;
    padding: 3px;
    border-radius: 10px;
    border: 1px solid #e1e5ee;
    width: fit-content;

    .tabs_button {
      cursor: pointer;
      padding: 18px 25px;
      text-align: center;
      font-size: 14px;
      white-space: nowrap;
      color: #676b77;
      border-radius: 10px;

      &:hover {
        color: #e72430;
      }
    }

    .tabs_button.active {
      color: #fff;
      background: #e72430;
    }
  }

  .tabs_item.active {
    display: block;
  }

  .tabs_item {
    display: none;

    p, a {
      font-size: 18px;
      font-family: "Proxima Nova", sans-serif;
      font-weight: normal;
      line-height: 1.4;
      color: #0a0a0a;
      @media (max-width: 1000px) {
        font-size: 16px;
      }
    }

    p {
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      unicode-bidi: isolate;
    }

    a {
      color: #e72430;
      text-decoration: none;
    }

    h2 {
      color: #1f1f1f;
      font-weight: bold;
      font-size: 18px;
      font-family: "ProximaNova", sans-serif;
      display: block;
      margin-block-start: 0.83em;
      margin-block-end: 0.83em;
    }

    table {
      border: 1px solid #e1e5ee;
      border-radius: 10px;
      display: table;
      overflow: hidden;
      border-collapse: separate;
      border-spacing: 0;

      tr {
        font-size: 14px;
      }

      p {
        margin: 0;
        font-size: 14px;
      }

      tr:first-child td p {
        color: #676b77;
        font-size: 14px;
      }

      td {
        padding: 20px 30px;
        border: none;
        border-bottom: 1px solid #e1e5ee;
        font-size: 14px;
        @media (max-width: 767px) {
          padding: 20px 5px 20px 15px;
        }
      }

      tr:not(:first-child) td:not(:first-child) {
        background-color: #f5f6fa;
      }

      tr td:first-child {
        width: 50%;
      }
    }
  }

}
/* End */
/* /local/media/slate_tiles/css/systems.scss?17594725185510 */