.generation {
  /*color: var(--fff);*/
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100dvh;

  >aside.menu {
    background: var(--Grey-850);
    width: 258px;
    height: 100vh;
    padding: 84px 16px 16px;
    display: flex;
    gap: 40px;
    flex-direction: column;
    /*color: var(--fff);*/
    position: fixed;
    left: 0;
    overflow-y: auto;

    .selectBox {
      display: flex;
      cursor: pointer;
      background: var(--Grey-950);
      padding: 10px;
      border-radius: 5px;
      /*color: var(--fff);*/
      border: 1px solid var(--white-opacity-10);
      align-items: center;
      gap: 24px;
      position: relative;
      font-size: 15px;

      >button.label {
        gap: 24px;
      }

      >.optionList {
        top: 61px;
        background: var(--Grey-950);

        .optionItem {
          display: flex;
          gap: 24px;
          font-size: 15px;
          align-items: center;
          line-height: normal;
          padding: 10px;

          img {
            max-width: 32px;
          }

        }

      }

      i {
        font-size: 24px;
      }

      p {
        font-size: 15px;

        span {
          display: block;
          font-size: 12px;
          color: var(--Pink-900);
          margin-bottom: 5px;
        }
      }

      &:after {
        /* content: '\E81B'; */
        font-family: 'icon_font';
        font-size: 24px;
        position: absolute;
        right: 10px;
      }
    }

    .box {
      &.templete {
        >div.selectBox {
          /* background: var(--white-opacity-15); */
          /* border-radius: 99.07px; */
          /* height: 30.021px; */
          padding: 0;
          margin-bottom: 10px;
          border: 0;
          width: auto;
          display: inline-flex;
          background: none;

          .label {
            font-size: 16px;
            font-weight: 500;
            line-height: 140%;
            width: auto;
            display: block;
            background: var(--white-opacity-15);
            border-radius: 99.07px;
            height: 30.021px;
            padding: 2.001px 37px 2px 16px;
          }

          >.optionList {
            top: 32px;
            width: 135px;
            background: var(--Grey-800);
            border-radius: 6px;

            >p {
              font-size: 12px;
              font-weight: 600;
              color: var(--Grey-300);
              line-height: 140%;
              margin: 12px 12px 8px 12px;
            }

            >li {
              padding: 8px 0;
              border-bottom: 1px solid var(--white-opacity-10);
              color: var(--Grey-100);
              font-size: 16px;
              margin: 0px 12px;

              &:last-child {
                border: 0;
                padding-bottom: 12px;
              }

              &:hover,
              &.active {
                background: none;
                font-weight: 600;

                &:after {
                  content: '\E802';
                  font-family: 'icon_font';
                  font-size: 24px;
                  font-weight: 100;
                  position: absolute;
                  right: 12px;
                }
              }
            }
          }
        }

        >div.list {
          border: 1px solid var(--white-opacity-10);
          border-radius: 5px;

          >ul {
            >li {
              border-top: 1px solid var(--white-opacity-10);
              cursor: pointer;
              opacity: .5;

              &:first-child {
                border: 0;
              }

              &.active {
                opacity: 1;
              }

              label {
                display: flex;
                align-items: center;

                padding: 10px 14px 10px 10px;
                justify-content: space-between;

                >div {
                  display: flex;
                  gap: 14px;
                  align-items: center;
                }

                img {
                  max-width: 37px;
                  border-radius: 4px;
                }

                p {
                  font-size: 15px;
                }
              }

            }
          }
        }
      }

      h3 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
        line-height: normal;
      }

      hr {
        border: 0;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.30);
        margin: 10px 0;
      }

      >ul {
        display: flex;
        gap: 8px;
        justify-content: space-between;
        flex-wrap: wrap;

        &.resolution {
          li {
            width: calc(33.3333% - 16px);
          }
        }

        &.number {
          li {
            width: calc(25% - 16px);

          }
        }

        >li {
          text-align: center;
          background: var(--white-opacity-15);
          font-weight: 600;
          border-radius: 6px;
          padding: 12px 0;
          cursor: pointer;
          font-size: 12px;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-content: space-between;
          flex: 1 1 auto;
          box-sizing: border-box;


          &.active {
            border: 0.5px solid rgba(255, 255, 255, 0.30);
            background: rgba(255, 255, 255, 0.30);
          }

          span {
            display: block;
            width: 100%;
            text-align: center;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;

            em {
              border: 1px solid var(--fff);
              opacity: 0.7;
              display: inline-block
            }
          }

          p {
            margin-top: 12px;
            font-weight: 600;
          }

        }
      }
    }
  }

  .content {
    padding-top: 84px;
    width: 1057px;
    display: flex;
    gap: 40px;
    flex-direction: column;
    /* margin-right: -500px; */
    position: relative;
    /* right: 50%; */
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    margin-left: 258px;
    padding-left: 24px;
    padding-right: 24px;

    /* z-index: -1; */
    &.open {
      margin: 0;
      /* margin-left: -190px; */
      position: absolute;
      left: 338px;
    }

    .searchBoxWrap {
      display: flex;
      gap: 10px;
      flex-direction: column;


      .searchBox {
        width: 100%;
        height: auto;
        border-radius: 12px;
        background: var(--Grey-850);
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        padding: 6px 12px 6px 20px;
        border: 1px solid rgba(255, 255, 255, 0.30);

        span.label {
          font-size: 14px;
          color: var(--Grey-500);
          margin-right: 10px;
          vertical-align: top;
          padding: 0;
          line-height: 18px;
        }

        textarea {
          width: calc(100% - 160px);
          height: 100%;
          border: none;
          /* border-radius: 50px; */
          padding: 0;
          font-size: 18px;
          background: var(--Grey-850);
          /*color: var(--fff);*/
          height: 20px;
          color: var(--Grey-300);
          resize: none;
          min-height: 1em;
          line-height: 1em;
          overflow: hidden;

          &::placeholder {
            font-size: 16px;
            color: var(--Grey-300);
          }
        }

        .textarea-wrapper {
          max-height: 120px;
          overflow-y: auto;
          overflow-x: hidden;
        }

        input {
          width: calc(100% - 160px);
          height: 100%;
          border: none;
          /* border-radius: 50px; */
          padding: 0;
          font-size: 18px;
          background: var(--Grey-850);
          /*color: var(--fff);*/
          height: 36px;
          color: var(--Grey-300);

          &::placeholder {
            font-size: 16px;
            color: var(--Grey-300);
          }
        }

        i.icon-copy-1 {
          font-size: 20px;
          /*color: var(--fff);*/
          /* background: var(--Grey-800); */
          padding: 8px;
          border-radius: 8px;
          /* margin-right: 8px; */
          cursor: pointer;
        }


      }

      .pinkBtn {
        flex: 0 0 auto;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        width: 165px;
        /* height: 36px; */
        margin-left: 10px;
        padding: 10px 29px 10px 25px;

        i {
          font-size: 24px;
          margin: 0 7px 0 0;
        }

        p {
          font-size: 16px;
          letter-spacing: 1px;
        }
      }

    }

    .tit {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;

      h3 {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        font-weight: 600;

        i {
          font-size: 20px;
          color: var(--Grey-500);
        }
      }

      >div {
        display: flex;
        gap: 8px;

        >div {
          font-size: 12px;
          font-weight: 600;
          padding: 4px 12px;
          background: rgba(255, 255, 255, 0.05);
          border-radius: 100px;
          color: var(--Grey-100);
          line-height: 140%;
          cursor: pointer;

          i {
            color: var(--Grey-300);
            margin-right: 4px;
            font-size: 14px;
          }

          &.localFile {
            i {
              font-size: 16px;
            }
          }
        }
      }

    }

    .reference_img {
      position: relative;
      background: var(--Grey-850);
      border: 1px solid var(--white-opacity-10);
      border-radius: 12px;
      height: 440px;
      display: flex;
      justify-content: center;
      align-items: center;

      &.unavailable {
        background-color: #1a1a1a;
        border-color: #1a1a1a;

        .con {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;

          img {
            margin-bottom: 8px;
          }

          h5 {
            font-size: 14px;
            font-weight: 600;
            color: #969696;
            margin-bottom: 8px;
          }

          p {
            font-size: 12px;
            font-weight: 400;
            color: #666666;
            margin-bottom: 8px;
          }
        }
      }

      .dragzone {
        display: flex;
        width: 500px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
        border-radius: 12px;
        border: 1px dashed #7F7F7F;
        padding: 90px 0;

        p {
          font-size: 14px;
          font-weight: 600;

          a {
            text-decoration: underline;
          }

          button {
            font-weight: 400;
          }
        }

        >span {
          font-size: 12px;
          color: var(--Grey-400);
          display: block;
        }

      }

      .img_view {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
        align-items: center;
        justify-content: center;
        height: 100%;

        .img_item {
          position: relative;
          width: 300px;
          aspect-ratio: 1/1;
          border-radius: 12px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .icon-close_small {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
          }
        }
      }
    }

    .img_view {
      .icon-close_small {
        position: absolute;
        border-radius: 99px;
        background: rgba(0, 0, 0, 0.30);
        padding: 2px;
        font-size: 24px;
        right: 20px;
        cursor: pointer;
      }
    }

    .dataset {
      height: 180px;

      .dragzone {
        padding: 20px 0;
      }

      /* added by heemun(250612) */
      .grid-item {
        position: relative;
        color: var(--fff);
        width: 260px;
        height: 260px;
        background: rgba(0, 0, 0, 0.30);

        .icon-close_small {
          display: block;
          position: absolute;
          right: 10px;
          top: 10px;
          font-size: 24px;
          z-index: 5;
          cursor: pointer;
          background: rgba(0, 0, 0, 0.30);
          padding: 2px;
          font-size: 24px;
          border-radius: 100px;
        }

        img {
          /*position: relative;
          top: 50%;
          transform: translate(0%, -50%);*/
          min-width: 100%;
          min-height: 100%;
          object-fit: cover;
        }

        >div.tit {
          display: block;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          background: var(--Grey-850);
          padding: 10px;
          z-index: 1;
          margin-bottom: 0;

          h4 {
            font-size: 14px;
            font-weight: 500;
            line-height: 130%;
          }

          h5 {
            font-size: 13.606px;
            font-weight: 400;
            line-height: 130%;
          }

          >p {
            font-size: 9.719px;
            font-weight: 400;
            line-height: 130%;
            margin-top: 8px;
            color: var(--Grey-500);
          }

          >ul {
            li {
              background: var(--Grey-700);
              padding: 3px 9px;
              color: var(--Grey-300);
              border-radius: 100px;
              font-size: 12px;
            }

            display: flex;
            gap: 4px;
            margin-top: 10px;

          }
        }

        >div.favor {
          position: absolute;
          display: flex;
          justify-content: space-between;
          left: 0;
          right: 0;
          top: 0;
          padding: 10px;
          align-items: center;
          font-size: 14px;
          z-index: 2;

          .pinkBtn {
            padding: 3px 6px 1px 6px;
            border-radius: 4px;
            line-height: 140%;

            i {
              font-size: 16px;
              margin-right: 4px;
            }
          }

          >p {
            background: rgba(0, 0, 0, 0.30);
            border-radius: 100px;
            padding: 4px 10px;
            gap: 4px;
            display: flex;
            align-items: center;

            i {
              font-size: 16px;
            }

            span {
              font-size: 13px;
              font-weight: 600;
            }
          }

          .ver {
            color: var(--Grey-700);
            font-size: 12px;
          }

          .heart {
            display: flex;
            font-size: 13px;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            float: right;
            font-weight: 600;

            i {
              font-size: 20px;
              position: relative;
              text-align: left;
              overflow: hidden;
            }

            i.icon-star-default:hover:before,
            i.icon-star-default.active:before {
              content: '\e817';
              /* position: relative; */
              /* left: -5px; */
            }

            ul {
              display: flex;
              gap: 6px;

              li {
                border-radius: 4px;
                background: rgba(34, 34, 34, 0.50);
                backdrop-filter: blur(2px);
                padding: 6px;

                i {
                  font-size: 18px;
                }
              }
            }

            &.bg {
              >* {
                background: rgba(82, 82, 82, 0.50);
                padding: 5px;
                border-radius: 4px;
                backdrop-filter: blur(2px);

                i.icon-brush {
                  margin-right: 10px;
                }

                &.on {
                  color: var(--Pink-900);
                  background: rgba(147, 147, 147, 0.50);

                  &.icon-star-default:before {
                    content: '\E817';
                  }
                }
              }

              >div {
                padding: 5px 10px;

                a {
                  display: flex;
                  align-items: center;
                }
              }
            }
          }

        }

        .imgWrap {
          >ul {
            display: flex;
            gap: 2px;

            >li {
              width: 50%;
              height: 148px;
              overflow: hidden;
              background: #D9D9D9;

              img {
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }

          >ul.two {
            >li {
              aspect-ratio: 1 / 1;
            }
          }

          >ul.three {
            >li {
              background: none;
              /* aspect-ratio: 292/ 373; */
            }

            ul {
              display: flex;
              flex-direction: column;
              gap: 2px;

              li {
                overflow: hidden;
                aspect-ratio: 2 / 1;
              }

            }

          }
        }

      }
    }
  }
}

aside.library_wrap {
  background: var(--Grey-850);
  width: 438px;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  min-height: 100dvh;
  height: 100%;
  z-index: 10;
  margin-right: -500px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;

  &.open {
    margin-right: 0;
  }

  .title {
    display: flex;
    padding: 20px 20px 0;
    font-size: 15px;
    font-weight: 600;
    align-items: center;
    gap: 14px;
    /*color: var(--fff);*/

    i {
      font-size: 24px;
      cursor: pointer;
    }
  }

  .tabs {
    >li {
      font-weight: 500;


      &.active {
        background: var(--Grey-800);
      }
    }
  }

  .tabset {
    /*color: var(--fff);*/
    position: absolute;
    bottom: 0;
    top: 111px;
    /* position: relative; */
    left: 0;
    right: 0;

    .reference {
      border-radius: 0 8px 0 0;

      .overScroll {
        padding-bottom: 87px;
      }

      .toast {
        display: block;
        position: absolute;
        bottom: 90px;
        left: 0px;
        width: 100%;
        z-index: 1;
        text-align: center;

        p {
          background-color: rgba(11, 11, 11, 0.6);
          display: inline-block;
          position: relative;
          padding: 16px;
          font-size: 16px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 10px;
          gap: 10px;
          display: inline-flex;
        }
      }
    }

    >div.active {
      background: var(--Grey-800);
      /* border-radius: 8px; */
      /* padding: 20px; */
    }
  }

  .tabBox {
    display: flex;
    font-size: 12px;
    font-weight: 600;
    line-height: 140%;
    /*color: var(--fff);*/
    justify-content: space-between;
    margin-top: 16px;
    background: var(--Grey-700);
    border-radius: 100px;
    margin-bottom: 16px;

    li {
      flex: 1 0 0;
      text-align: center;
      padding: 7px;
      border-radius: 100px;
      cursor: pointer;

      &.active {
        background: var(--Grey-600);
      }
    }

  }

  .subTit {
    font-size: 14px;
    color: var(--Grey-400);
    font-weight: 600;
    margin: 16px 0;
  }

  .overScroll {
    overflow: scroll;
    border-radius: 8px;
    /* position: absolute; */
    bottom: 0;
    height: calc(100vh - 200px);
    /* padding-bottom: 70px; */
  }

  .regerList {
    display: flex;
    gap: 8px;
    /* margin-top: 16px; */
    flex-wrap: wrap;
    /* margin-bottom: 16px; */
    /* align-items: flex-start; */
    /* justify-content: center; */
    padding-bottom: 20px;

    li {
      /* background-image: url(../image/regerListBg.jpg); */
      border-radius: 8px;
      /* flex: 1 0 0; */
      overflow: hidden;
      border: 2px solid rgba(0, 0, 0, 0);
      /* height: auto; */
      /* padding: 2px; */
      position: relative;
      cursor: pointer;
      aspect-ratio: 3 / 3;

      &.one {
        width: 100%;
      }

      &.two {
        width: calc(50% - 4px);
      }

      &.three {
        width: calc(33.333% - 6px);
      }

      h6 {
        background: var(--Grey-600);
        text-align: center;
        font-size: 14px;
        position: absolute;
        left: 0;
        right: -1px;
        bottom: 0;
        padding: 6px;
        font-weight: 500;
      }

      div.unavailable {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.25);
        z-index: 10;

        >p {
          font-size: 14px;
          color: #cccccc;
          font-weight: 600;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      div.profile {
        width: 24px;
        height: 24px;
        background: url('../image/checkerBg.png');
        background-size: cover;
        z-index: 1;
        position: absolute;
        left: 6px;
        top: 6px;
        border-radius: 99px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        overflow: hidden;
        font-size: 13px;
        font-weight: 600;
        line-height: 23px;
        text-align: center;
      }

      >img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
      }

      &.available {
        /* &:hover {
          border: 2px solid var(--fff);
        } */

        /* &:hover::before {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.30);
          z-index: 2;
        }

        &:hover::after {
          content: '\E802';
          font-family: 'icon_font';
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          font-size: 60px;
          z-index: 3;
        } */

        .selected {}

        .checked {}
      }

      &.active {
        border: 2px solid var(--fff);
      }

      &.active::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.30);
        z-index: 2;
      }

      &.active::after {
        content: '\E802';
        font-family: 'icon_font';
        position: absolute;
        /*color: var(--fff);*/
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 60px;
        z-index: 3;
      }

    }
  }

  .inBox {
    padding: 16px 16px 0px 16px;
    background: var(--444);
    border-radius: 10px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;





    .createBtn {
      display: flex;
      justify-content: space-between;

      button {
        font-size: 14px;
        display: flex;
        gap: 4px;
        align-items: center;

        i {
          font-size: 16px;
        }
      }
    }
  }
}

.showBox {
  font-size: 12px;
  display: flex;
  color: var(--Grey-300);
  justify-content: flex-end;
  gap: 8px;
  align-items: center;

  .rangeInput {
    position: relative;
    max-width: 150px;

    .dots {
      position: absolute;
      width: 87%;
      height: 100%;
      z-index: 1;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      pointer-events: none;
      margin-left: 6.5%;

      .dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #131313;
        opacity: 0.7;
      }
    }

    #range::-webkit-slider-runnable-track {
      height: 10px;
      border-radius: 10px;
    }

    #range::-webkit-slider-thumb {
      appearance: none;
      background: #ffffff;
      cursor: pointer;
      height: 10px;
      width: 10px;
      border-radius: 50%;
    }

    #range::-moz-range-track {
      height: 10px;
      border-radius: 10px;
    }

    #range::-moz-range-progress {
      height: 10px;
      border-radius: 10px;
    }

    #range::-moz-range-thumb {
      -webkit-appearance: none;
      background: #ffffff;
      cursor: pointer;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      item-aligns: center;
    }

    .step1 {
      background: linear-gradient(to right,
          #9b9b9b 0% 1%,
          #707070 1% 100%);
    }

    .step2 {
      background: linear-gradient(to right,
          #9b9b9b 0% 25%,
          #707070 25% 100%);
    }

    .step3 {
      background: linear-gradient(to right,
          #9b9b9b 0% 50%,
          #707070 50% 100%);
    }

    .step4 {
      background: linear-gradient(to right,
          #9b9b9b 0% 75%,
          #707070 75% 100%);
    }

    .step5 {
      background: linear-gradient(to right,
          #9b9b9b 0% 99%,
          #707070 99% 100%);
    }


    .dots.step2_dot .dot:nth-child(1) {
      visibility: hidden;
    }

    .dots.step3_dot .dot:nth-child(1),
    .dots.step3_dot .dot:nth-child(2) {
      visibility: hidden;
    }

    .dots.step4_dot .dot:nth-child(1),
    .dots.step4_dot .dot:nth-child(2),
    .dots.step4_dot .dot:nth-child(3) {
      visibility: hidden;
    }

    .dots.step5_dot .dot {
      visibility: hidden;
    }

    input {
      background: #707070;
      border-radius: 8px;
      outline: none;
      transition: background 450ms ease-in;
      -webkit-appearance: none;
      accent-color: #ffffff;
      height: 8px;
    }
  }
}

.generationSelect {

  .prompt {
    /*color: var(--fff);*/
    margin-top: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;

    .tit {
      display: flex;
      gap: 18px;
      align-items: center;
      width: calc(100% - 176px);

      .edit-title {
        width: 100%;
        display: block;
        position: relative;
        width: 100%;

        >input {
          background: var(--Grey-850);
          color: var(--fff);
          border: none;
          font-size: 20px;
          padding: 10px;
          border-radius: 5px;
          padding-right: 100px;
        }

        >button {
          position: absolute;
          right: 5px;
          padding: 10px 20px;
          top: 50%;
          transform: translateY(-50%);
          background-color: var(--Pink-900);
          border-radius: 5px;
        }
      }

      span {
        font-size: 20px;
        font-weight: 600;
        line-height: 140%;

        +span {
          font-size: 18px;
          font-weight: 500;
          min-width: 123px;

          i {
            color: var(--Grey-600);
            font-size: 20px;
            cursor: pointer;
            margin-left: 10px;
          }
        }
      }
    }

    .flexBB {
      gap: 23px;

      >div {
        width: 100%;
      }

      .textBox {
        border-radius: 10px;
        border: 1px solid var(--white-opacity-15);
        padding: 16px 20px;
        display: flex;
        gap: 70px;
        height: 142px;
        flex-direction: column;








        textarea {
          font-size: 18px;
          font-weight: 400;
          line-height: 140%;
          background: none;
          color: var(--Grey-100);
          line-height: 140%;
          width: 100%;
          height: 80px;
          font-family: "Pretendard";
        }


      }

      .label {
        color: var(--Grey-500);
        font-size: 14px;
        margin-bottom: 10px;
      }

      ul.flex {
        margin-top: 10px;
        gap: 10px;

        >li {
          flex: 1 0 0;
          position: relative;

          .ImagereferencePop {
            padding: 20px;
            border-radius: 12px;
            position: absolute;
            background: var(--Grey-850);
            right: 7px;
            bottom: 7px;
            transform: translate(0, 100%);
            border: 1px solid var(--white-opacity-10);
            z-index: 5;
            display: none;









            h5 {
              font-weight: 600;
              margin-bottom: 10px;
            }

            .dragZone {
              text-align: center;
              border: 1px dashed #7F7F7F;
              padding: 20px 30px;
              border-radius: 12px;

              h6 {
                font-size: 14px;
                font-weight: 600;
                line-height: 130%;
                margin-bottom: 8px;

                span {
                  text-decoration: underline;
                }
              }

              p {
                font-weight: 400;
                line-height: 130%;
                color: var(--Grey-400);
                font-size: 12px;
                margin-bottom: 16px;
              }

              .btnWrap {
                display: flex;
                justify-content: center;
                gap: 8px;

                button {
                  border-radius: 6px;
                  padding: 6px 16px;
                  background: var(--white-opacity-10);
                  cursor: pointer;
                  line-height: 140%;
                  font-size: 14px;
                }
              }
            }
          }
        }

      }

      ul.References {
        gap: 10px;
        display: flex;


        li {
          background: var(--Grey-800);
          color: var(--fff);
          width: 50px;
          border: 1px solid transparent;
          height: 50px;
          /* padding: 5px; */
          border-radius: 5px;
          position: relative;
          cursor: pointer;
          overflow: hidden;

          &:hover {
            border-color: var(--Pink-900);
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          i {
            position: absolute;
            left: 50%;
            bottom: 5px;
            transform: translate(-50%, 0%);
          }
        }
      }

      >div+div {
        display: flex;
        gap: 10px;
        width: 180px;
        flex-direction: column;
        justify-content: flex-end;

        button {
          background: var(--Grey-800);
          padding: 9px 16px;
          font-size: 14px;
          font-style: normal;
          font-weight: 600;
          text-align: left;
          display: flex;
          align-items: center;
          gap: 10px;
          border-radius: 8px;
          line-height: 1em;
          cursor: pointer;

          +button {
            background: var(--Pink-900);
          }

          i {
            font-size: 24px;

          }
        }

      }

    }


  }

  .grid {
    gap: 10px 16px;
    margin: 0;
    width: calc(100%);

    .grid-item {
      width: auto;
      margin-bottom: 16px;
      flex: 0 0 auto;
      height: auto;
      cursor: pointer;
      aspect-ratio: 1 / 1;

      .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 31%;
        height: 31%;
        min-width: auto;
        min-height: auto;
      }

      &.failed {
        background: var(--Grey-850);
        border: 1px solid var(--white-opacity-10);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 110%;
        min-height: 285px;

        >div {
          i {
            font-size: 20px;
            margin-bottom: 20px;
            display: block;
          }

          h5 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
          }

          p {
            font-size: 12px;
          }

          em {
            font-size: 10px;
            color: var(--Grey-400);
            line-height: 100%;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .generationSelect {
    .prompt {
      margin: 0 20px 10px;
      width: calc(100% - 40px);

      .tit {
        gap: 10px;
        width: 100%;

        span {
          padding: 10px 12px;
          font-size: 16px;
          font-weight: 500;
          line-height: 140%;

          +span {
            font-size: 14px;
            padding: 10px 0px;
          }
        }
      }
    }

    .grid {
      width: calc(100%);

      .grid-item {
        width: calc(33.3333% - 11px) !important;
        margin-bottom: 8px !important;
        border-radius: 6px;
      }
    }

    .foodMenu {
      bottom: 0;
      border-radius: 10px 10px 0 0;
      background: rgba(32, 32, 32, 0.80);
      z-index: 1;


      .btnWrap {
        padding: 10px 20px 20px;
        display: flex;
        gap: 4px;
        background: none;

        button {
          width: 50px;
          height: 50px;
          border-radius: 50px;
          background: var(--white-opacity-10, rgba(255, 255, 255, 0.10));

          i {
            font-size: 20px;
          }

          &.active {
            color: var(--fff);
          }
        }
      }
    }

    .dataset_list {
      .line-item {
        >li {
          padding: 10px 20px 0px 20px;
          border: 0;
          display: flex;
          flex-direction: column;



          >div.flexTB {
            font-size: 16px;
            font-weight: 500;
            line-height: 140%;

            p {
              display: none;
            }

          }

          >ul {
            gap: 10px;
            flex-wrap: wrap;
            margin: 10px 0 0px 0;









            >li {
              width: calc(50% - 5px);
              border-radius: 6px;
            }
          }
        }
      }
    }

    .PromptPop {
      .detailsCon {
        overflow: scroll;
        max-height: calc(100vh - 110px);

        >ul {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 10px 20px;

          >li {
            border: 1px solid var(--white-opacity-15);
            border-radius: 10px;
            padding: 14px 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;

            h5 {
              display: flex;
              justify-content: space-between;
              color: var(--Grey-500);
              font-size: 14px;
              font-weight: 500;
              padding: 0;
              line-height: 140%;

              i {
                font-size: 24px;
                color: var(--Grey-400);
              }
            }

            p {
              font-size: 16px;
              font-weight: 400;
              line-height: 140%;
              color: var(--Grey-100);
            }

            ul.References {
              gap: 6px;
              display: flex;
              flex-direction: row;
              padding: 0;

              li {
                background: var(--Grey-800);
                color: var(--fff);
                width: 50px;
                border: 1px solid transparent;
                height: 50px;
                border-radius: 5px;
                position: relative;
                cursor: pointer;
                overflow: hidden;

                &:hover {
                  border-color: var(--Pink-900);
                }

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }

                i {
                  position: absolute;
                  left: 50%;
                  bottom: 5px;
                  transform: translate(-50%, 0%);
                }
              }
            }
          }
        }

        .btnWrap {
          padding: 12px 16px 46px 16px;
          display: flex;
          gap: 10px;
          flex-direction: column;

          button {
            border-radius: 8px;
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-weight: 600;

            i {
              font-size: 24px;
            }

            &.greyBtn {
              background: var(--Grey-800);
            }
          }

        }
      }
    }
  }
}

.viewSelect {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  align-items: center;
  width: 100%;

  .viewBox {
    display: flex;
    align-items: center;
    gap: 17px;

    ul {
      display: flex;
      align-items: center;
      gap: 17px;

      li {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 600;

        span.line {
          background: var(--Grey-600);
          width: 1px;
          height: 11px;
        }

        em {
          color: var(--Grey-400);
          margin-right: 6px;
        }

        p {
          color: var(--Grey-200);
          font-weight: 400;

          i {
            font-size: 20px;
          }
        }

        label {
          font-weight: 400;
          color: var(--Grey-200);
        }
      }
    }
  }

  .showBox {
    p {
      font-size: 14px;
      font-weight: 500;
    }

    .rangeInput {
      & .dot {
        width: 6px;
        height: 6px;
        background: var(--Grey-700);
      }

      input {
        width: 150px;
        height: 10px;
      }

      #range::-webkit-slider-runnable-track {
        height: 12px;
        border-radius: 12px;
      }

      #range::-webkit-slider-thumb {
        height: 12px;
        width: 12px;
      }

      #range::-moz-range-track {
        height: 12px;
        border-radius: 12px;
      }

      #range::-moz-range-progress {
        height: 12px;
        border-radius: 12px;
      }

      #range::-moz-range-thumb {

        height: 12px;
        width: 12px;

      }
    }

    .greyBtn {
      font-size: 12px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 100px;
      color: var(--Grey-100);
      line-height: 140%;
    }
  }
}

.viewButton {
  display: flex;

  button {
    font-size: 24px;
    padding: 6px;
    border: 1px solid var(--Grey-600);
    border-left: 0;
    cursor: pointer;
    color: var(--Grey-500);

    &:first-child {
      border-radius: 4px 0px 0px 4px;
      border: 1px solid var(--Grey-600);
    }

    &:last-child {
      border-radius: 0px 4px 4px 0px;
    }

    &.active {
      background-color: var(--Pink-900);
      border-color: var(--Pink-900);
      color: var(--fff);
    }
  }
}

.checkBoxList {
  li {
    input {
      margin-right: 6px;
    }
  }
}


.generationMobile {
  padding: 56px 0 0;

  .searchBox {
    width: calc(100% - 40px);
    margin: 20px 20px 22px;
    padding: 10px;
    border-radius: 12px;
    background: var(--Grey-850);
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.30);

    textarea {
      font-weight: 400;
      line-height: 160%;
      padding: 5px 8px;

      &:placeholder {
        color: var(--Grey-300);
      }
    }

    button {
      border: 0;
      border-radius: 100px;
      padding: 6px 6px;

      i {
        font-size: 24px;
        width: 24px;
        height: 24px;
      }
    }
  }

  ul.setting {
    background: var(--Grey-900);
    padding: 0 20px;
    min-height: calc(100vh - 156px);

    li {
      display: flex;
      padding: 16px 0;
      gap: 12px;
      border-bottom: 1px solid var(--Grey-850);
      flex-direction: column;

      h6 {
        font-size: 13px;
        color: var(--Grey-400);
        display: flex;
        align-items: center;

        i {
          font-size: 20px;
        }
      }

      p {
        font-size: 15px;
        line-height: 140%;
      }
    }
  }
}


.generationSelectDetails {
  .popupWrap {
    .retryPop {
      width: calc(100% - 40px);

      .flexD {
        gap: 4px;

        h5 {
          font-weight: 600;
          line-height: 140%;
          letter-spacing: -0.36px;
        }

        p {
          font-size: 14px;
          line-height: 140%;
          letter-spacing: -0.28px;
          color: var(--Grey-500);
          opacity: 1;
          font-weight: 400;
        }
      }

      .flexCC {
        margin-top: 20px;

        button.pinkBtn {
          width: 100%;
          font-size: 16px;
          font-weight: 600;
          line-height: 160%;
          padding: 8px 40px;
        }
      }
    }
  }

  .imgWrap {
    position: relative;

    button.pinkBtn {
      position: absolute;
      left: 12px;
      top: 10px;
      font-size: 14px;
      font-weight: 500;
      line-height: 140%;
      padding: 2px 6px;
    }

    .icon-close_big {
      position: absolute;
      z-index: 1000;
      font-size: 2em;
      right: 5px;
      top: 5px;
    }

    img {
      display: block;
    }
  }

  .editMenu {
    padding: 6px 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;

    >div {
      display: flex;
      gap: 4px;

      >i {
        font-size: 18px;
        padding: 13px 11px;
        display: inline-block;

        &.on {
          color: var(--Pink-900);
        }

        &.icon-star-default.on {
          &:before {
            content: '\E817';
          }
        }
      }

      button {
        padding: 8px 14px;
        font-size: 14px;
        font-weight: 600;
        line-height: 140%;
        background: var(--Grey-850);
        border-radius: 4px;
        display: flex;
        gap: 10px;

        i {
          font-size: 18px;
        }
      }
    }
  }

  .detailsTab {
    width: 100%;

    >ul {
      >li {
        >h4 {
          display: flex;
          justify-content: space-between;
          padding: 24px 20px;
          background: var(--Grey-850);
          align-items: center;

          i {
            font-size: 24px;
            color: var(--Grey-300);
            margin-top: -9px;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;

          }

          &.open {
            i {
              transform: rotate(180deg);
              margin-top: 0;
              margin-bottom: -9px;
            }
          }
        }

        >.con {
          padding: 10px 20px;

          >ul {
            display: flex;
            flex-direction: column;
            gap: 10px;

            >li {
              border: 1px solid var(--white-opacity-15);
              border-radius: 10px;
              padding: 14px 20px;
              display: flex;
              flex-direction: column;
              gap: 10px;

              h5 {
                display: flex;
                justify-content: space-between;
                color: var(--Grey-500);
                font-size: 14px;
                font-weight: 500;
                line-height: 140%;

                i {
                  font-size: 24px;
                  color: var(--Grey-400);
                }
              }

              p {
                font-size: 16px;
                font-weight: 400;
                line-height: 140%;
                color: var(--Grey-100);
              }

              ul.References {
                gap: 6px;
                display: flex;

                li {
                  background: var(--Grey-800);
                  color: var(--fff);
                  width: 50px;
                  border: 1px solid transparent;
                  height: 50px;
                  border-radius: 5px;
                  position: relative;
                  cursor: pointer;
                  overflow: hidden;

                  &:hover {
                    border-color: var(--Pink-900);
                  }

                  img {
                    width: 100%;
                  }

                  i {
                    position: absolute;
                    left: 50%;
                    bottom: 5px;
                    transform: translate(-50%, 0%);
                  }
                }
              }
            }
          }
        }

      }
    }
  }

  .detailsCon {
    background: var(--Grey-900);
    display: none;

    >li {
      padding: 20px;
      display: flex;
      justify-content: space-between;
      color: var(--Grey-50);
      align-items: center;
      gap: 10px;

      span {
        color: var(--Grey-300);
      }

      em {}

      &:first-child {
        font-size: 14px;

        em {
          color: var(--Grey-300);
          opacity: 0.7;
        }

        span {
          color: var(--Grey-50);
          display: flex;
          align-items: center;
          gap: 4px;

          i {
            font-size: 20px;
            opacity: 0.4;
          }

        }
      }
    }
  }

  .pcLink {
    padding: 60px 16px 80px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;

    p {
      text-shadow: 0px 2.997px 2.997px rgba(0, 0, 0, 0.25);
      font-size: 18px;
      line-height: 150%;
      opacity: 0.4;
    }

    button {
      color: var(--Grey-850);
      font-weight: 500;
      font-size: 18px;
      padding: 11px 20px 11px 16px;
      display: flex;
      gap: 4px;
      border-radius: 1000px;
      border: 1px solid #FFF;
      background: #E9E9E9;
      align-items: center;

      i {
        font-size: 28px;
        opacity: 0.5;
      }
    }
  }

}