:root[data-theme="green_black"] {
  --bg-color-700: #28292b90;
  --accent-color-800: #bdd0e4;
}

body {
  font-family: 'Jost', sans-serif;
  opacity: 0.97;
}

body:after {
  content: " ";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 500;
  pointer-events: none;
  opacity: 0.9;
  background-image: url('https://files.facepunch.com/garry/1b1011b1/test.png?1=');
}

.container.bannerContainer {
  position: relative;
  top: 2rem;

  .Banner-module__img {
    border-radius: 12px 12px 0 0;
  }
}

.container.headerContainer {
  .Header-module__wrapper {
    position: relative;
    top: 2rem;
    border-radius: 0 0 12px 12px;
    margin: auto;
  }
}

.container.Index-module__wrapper {
  .Widgets-module__wrapper {
    margin-top: 3rem;

    .Widgets-module__widgetWrapper {
      .boxHeader.MonitoringWidget-module__header {
        border-radius: 12px 12px 0 0;
      }
    }

    .MonitoringWidget-module__body.boxBody {
      border-radius: 0 0 12px 12px;

      .MonitoringServer-module__progressWrapper .MonitoringServer-module__progressBarWrapper {
        height: 6px;
      }
    }

    .boxFooter {
      display: none;
    }
  }
}

.Shop-module__wrapper {
  .boxHeader.Shop-module__header {
    display: none;
  }

  .boxBody {
    position: relative;
    top: 1rem;
    background-color: transparent;

    .Categories-module__categories {
      display: none;
    }

    .Search-module__wrapper {
      display: none;
    }

    .Product-module__wrapper {
      width: 23.55%;
      border-radius: 12px;
      transition: 0.3s;

      &:hover {
        transform: scale(1.09);
      }
    }

    .Products-module__wrapper.Products-module__grid4 {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      gap: 15px;
      justify-content: center;

      div[data-productid="8699764"],
      div[data-productid="8699763"],
      div[data-productid="8699762"] {
        width: 32%;
      }

      .Product-module__price {
        padding-top: 0.5rem;
        padding-left: 1rem;
        background-color: transparent;

        &:after {
          content: '';
          width: 26px;
          height: 26px;
          background-image: url('https://imgur.com/SclbUh0.png');
          background-repeat: no-repeat;
          background-size: 100%;
          background-position: center;
        }
      }
    }
  }

  .boxFooter {
    background-color: transparent;
  }
}

.ModalLayout-module__wrapper {
  backdrop-filter: blur(12px);

  .ModalLayout-module__positionWrapper {
    align-items: center;

    div[data-modalproductid="8699763"] {
      .items_layer {
        grid-template-rows: repeat(12, 85px);
      }
    }

    div[data-modalproductid="8699762"],
    div[data-modalproductid="8699763"],
    div[data-modalproductid="8699764"] {
      .ProductModal-module__header.boxHeader {
        display: block;
        background-color: var(--bg-color-900);
        border-radius: 12px 12px 0 0;
        text-align: center;
      }

      .productModalDescription {
        border-radius: 8px;
        margin: 0;
        padding-bottom: 0.12rem;

        .kit_title {
          background-color: #3d3d3d;
          padding: 0.8rem;
          padding-right: 0.4rem;
          margin-bottom: 0.6rem;
          border-radius: 8px;
          transition: 0.3s;

          h3 {
            display: inline;
          }

          p {
            float: right;
            background-color: var(--accent-color-800);
            padding: 0.4rem 1.2rem;
            margin-top: -0.4rem;
            border-radius: 8px;
            color: #324a5e;
            transition: 0.6s;

            &.open:hover {
              background-color: #a4bfdb;
            }
          }

          &:hover {
            transform: scale(1.25);
          }
        }

        .items_layer {
          position: relative;
          display: grid;
          grid-template-columns: repeat(4, 23.4%);
          grid-gap: 8px;

          p {
            display: none;
          }

          .items {
            position: relative;
            display: flex;
            background-color: #3d3d3d;
            justify-content: center;
            align-items: center;
            text-align: center;
            border-radius: 8px;
            transition: 0.3s;

            img {
              width: 100%;
            }

            .amount {
              position: absolute;
              bottom: 0.3rem;
              right: 0.4rem;
            }

            &:hover {
              transform: scale(1.25);
            }
          }
        }
      }

      .productModalGiveText {
        margin-top: 0.8rem;
        font-size: 0;
      }

      .productModalGiveText:after {
        content: 'Данная услуга будет автоматически активирована на проекте после приобретения.';
        font-size: 14px;
        color: var(--accent-color-800);
      }

      .ItemContent-module__footer.boxFooter {
        border-radius: 0 0 12px 12px;
        padding: 0;
      }

      .Button-module__btn.Button-module__gray {
        display: none;
      }

      .Button-module__btn.Button-module__accent {
        width: 100%;
        height: 50px;
        padding: 0 20px;
        border-radius: 0 0 12px 12px;
        font-size: 0;
        color: #324a5e;
        transition: 0.6s;
      }

      .Button-module__btn.Button-module__accent:before {
        content: var(--text);
        font-size: 16px;
        margin-left: -1rem;
      }

      .Button-module__btn.Button-module__accent:after {
        position: absolute;
        display: inline-block;
        content: '';
        width: 20px;
        height: 20px;
        background-image: url('https://imgur.com/SclbUh0.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        margin-left: 0.3rem;
        margin-top: -0.05rem;
      }

      .Button-module__btn.Button-module__accent:hover {
        background-color: #a4bfdb;
        border: none;
      }

      .Button-module__btn.Button-module__accent:focus {
        background-color: #a4bfdb;
        border: none;
      }
    }

    div[data-modalproductid="8699765"] {
      .kit_items_layer {
        grid-template-rows: 85px 85px 85px;
      }
    }

    div[data-modalproductid="8733128"],
    div[data-modalproductid="8700661"] {
      .kit_items_layer {
        grid-template-rows: 85px 85px;
      }
    }

    div[data-modalproductid="8733128"],
    div[data-modalproductid="8700661"],
    div[data-modalproductid="8699765"] {
      .ProductModal-module__header.boxHeader {
        background-color: var(--bg-color-900);
        border-radius: 12px 12px 0 0;
      }

      .productModalImg {
        display: none;
      }

      .productModalDescription {
        border-radius: 8px;

        p {
          display: none;
        }

        .kit_items_layer {
          position: relative;
          display: grid;
          grid-template-columns: repeat(4, 23.4%);
          grid-gap: 8px;

          p {
            display: none;
          }

          .kit_items {
            position: relative;
            display: flex;
            background-color: #3d3d3d;
            justify-content: center;
            align-items: center;
            text-align: center;
            border-radius: 8px;

            img {
              width: 100%;
            }

            .kit_amount {
              position: absolute;
              bottom: 0.3rem;
              right: 0.4rem;
            }
          }
        }
      }

      .ProductModal-module__form {
        .productModalFormRow {
          .ItemContent-module__label {
            display: none;
          }

          .Selector-module__dropDownCurrentItem {
            display: none;
          }
        }
      }

      .productModalGiveText {
        margin-top: 0.8rem;
        font-size: 0;
      }

      .productModalGiveText:after {
        content: 'Данная услуга будет автоматически активирована на проекте после приобретения.';
        font-size: 14px;
        color: var(--accent-color-800);
      }

      .ItemContent-module__footer.boxFooter {
        background-color: var(--bg-color-900);
        border-radius: 0 0 12px 12px;
        padding: 0;

        .Button-module__btn.Button-module__gray {
          display: none;
        }

        .Button-module__btn.Button-module__accent {
          width: 100%;
          height: 50px;
          padding: 0 20px;
          border-radius: 0 0 12px 12px;
          font-size: 0;
          color: #324a5e;
          transition: 0.6s;
        }

        .Button-module__btn.Button-module__accent:before {
          content: var(--text);
          font-size: 16px;
          margin-left: -1rem;
        }

        .Button-module__btn.Button-module__accent:after {
          position: absolute;
          display: inline-block;
          content: '';
          width: 20px;
          height: 20px;
          background-image: url('https://imgur.com/SclbUh0.png');
          background-repeat: no-repeat;
          background-size: 100%;
          background-position: center;
          margin-left: 0.3rem;
          margin-top: -0.05rem;
        }

        .Button-module__btn.Button-module__accent:hover {
          background-color: #a4bfdb;
          border: none;
        }

        .Button-module__btn.Button-module__accent:focus {
          background-color: #a4bfdb;
          border: none;
        }
      }
    }

    .ProductModal-module__form {
      display: none;
    }

    div[data-modalproductid="8733129"],
    div[data-modalproductid="8799396"],
    div[data-modalproductid="8699766"],
    div[data-modalproductid="8699767"],
    div[data-modalproductid="8699768"] {
      .ProductModal-module__header.boxHeader {
        display: block;
        background-color: var(--bg-color-900);
        border-radius: 12px 12px 0 0;
        text-align: center;
      }

      .productModalGiveText {
        font-size: 0;
      }

      .productModalGiveText:after {
        content: 'Данная услуга будет автоматически активирована на проекте после приобретения.';
        font-size: 14px;
        color: var(--accent-color-800);
      }

      .ItemContent-module__footer.boxFooter {
        border-radius: 0 0 12px 12px;
        padding: 0;
      }

      .Button-module__btn.Button-module__gray {
        display: none;
      }

      .Button-module__btn.Button-module__accent {
        width: 100%;
        height: 50px;
        padding: 0 20px;
        border-radius: 0 0 12px 12px;
        font-size: 0;
        color: #324a5e;
        transition: 0.6s;
      }

      .Button-module__btn.Button-module__accent:before {
        content: var(--text);
        font-size: 16px;
        margin-left: -1rem;
      }

      .Button-module__btn.Button-module__accent:after {
        position: absolute;
        display: inline-block;
        content: '';
        width: 20px;
        height: 20px;
        background-image: url('https://imgur.com/SclbUh0.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        margin-left: 0.3rem;
        margin-top: -0.05rem;
      }

      .Button-module__btn.Button-module__accent:hover {
        background-color: #a4bfdb;
        border: none;
      }

      .Button-module__btn.Button-module__accent:focus {
        background-color: #a4bfdb;
        border: none;
      }
    }
  }
}

#kitModal {
  backdrop-filter: blur(12px);

  .customModalPosition {
    align-items: center;
  }

  .customModalContent {
    width: 600px;
  }

  .kit_layer {
    h3 {
      background-color: #3d3d3d;
      text-align: left;
      padding: 18px 0;
      padding-left: 15px;
      border-radius: 8px;
    }

    .kit_itemlist {
      position: relative;
      display: grid;
      grid-template-columns: repeat(6, 15.5%);
      grid-gap: 8px;
      margin-top: 2%;

      .item {
        padding: 10px;
        position: relative;
        display: flex;
        background-color: #3d3d3d;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: 8px;
        transition: 0.3s;

        img {
          width: 100%;
        }

        span {
          position: absolute;
          bottom: 0.3rem;
          right: 0.4rem;
        }

        &:hover {
          transform: scale(1.25);
        }
      }
    }
  }
}