.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: relative;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.check_con {
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 689/654;
  //background: url($bg);
  //border-radius: var(--border-radius);
  //background: var(--widget);
  // background-image: linear-gradient(to bottom, #034039, #148943);
  // background-size: 100% 100%;
  pointer-events: auto;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;

  border-radius: 1rem;
  background: rgba(37, 38, 43, 1);

  .bg {
    position: absolute;
    top: 0;
  }

  & .title_con {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    aspect-ratio: 689/89;
    // background: url($top_bg) no-repeat;
    // background-size: 89% 100%;
    // color: #FFFF5B;
    // font-size: 1.5rem;
    // font-weight: 600;

    background: linear-gradient(180.00deg, rgba(255, 251, 153, 1), rgba(251, 203, 59, 1) 100%);
    color: linear-gradient(180.00deg, rgba(255, 251, 153, 1), rgba(251, 203, 59, 1) 100%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.75rem;
    text-align: center;
    filter: drop-shadow(1px 3px 1px rgba(0, 0, 0, 0.3));

    & .close {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      z-index: 1;
      height: 100%;
      aspect-ratio: 1;
      top: 0;
      right: 0;

      img {
        width: auto;
        height: 50%;
      }
    }
  }

  & .content_con {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}

.list_con {
  display: flex;
  // flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  gap: 0.8rem;

  & .item_con {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    aspect-ratio: 732/216;

    & .item {
      position: relative;
      height: 100%;

      & .item_bg {
        display: flex;
        flex-direction: column;
        border-radius: .5rem;
        background: linear-gradient(rgba(57, 63, 77, 1) 0 1.6rem, rgba(50, 55, 68, 1) 1rem 100%);
        opacity: 0.9;
        width: 100%;
        height: 100%;

        position: relative;

        &_today {
          background: linear-gradient(rgba(106, 115, 137, 1) 0 1.6rem, rgba(83, 91, 113, 1) 1rem 100%);
          ;
        }

        &_recived {
          filter: brightness(50%);
        }

        & .title {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 2.4rem;
          font-size: 0.88rem;
          font-weight: 400;
          color: #fff;
        }

        & .img_con {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;

          >img {
            width: 70%;
            padding-bottom: 1rem;
          }
        }



        .img_monty {
          width: 100%;
          position: absolute;
          bottom: 0;
          color: rgba(255, 255, 255, 1);
          font-size: .88rem;
          font-weight: 400;
          line-height: 1.2rem;
        }
      }

      & .item_checked {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        inset: 0px;
        z-index: 1;

        img {
          width: 2.57rem;
          height: auto;
        }
      }
    }

    & .item_1 {
      aspect-ratio: 130/178;
    }

    & .item_2 {
      aspect-ratio: 130/178;
    }

    & .item_3 {
      aspect-ratio: 150/178;
    }

    & .item_4 {
      aspect-ratio: 165/178;
    }

    & .item_5 {
      aspect-ratio: 182/178;
    }

    & .item_6 {
      aspect-ratio: 200/178;
    }

    & .item_7 {
      aspect-ratio: 205/178;
    }
  }
}

.buttons_con {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin-top: 1rem;

  & .btn_base {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48%;
    height: 2.5rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.19rem;
    letter-spacing: 0rem;
    color: #fff;
    gap: 0.3rem;

    & .text_con {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
  }

  & .btn_blue {
    background: linear-gradient(180.00deg, rgba(7, 199, 115, 1), rgba(1, 153, 86, 1) 100%);
  }

  & .btn_yellow {
    background: linear-gradient(180.00deg, rgba(246, 195, 27, 1), rgba(232, 151, 6, 1) 100%);
  }

  & .coin_box {
    width: 35%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;


    >img {
      width: 2rem;
      height: auto;
    }
  }

  & .take_box {
    width: 65%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  & .img_coin {
    width: 1.6rem;
    height: auto;
  }

  & .img_coin_loading {
    width: 1.6rem;
    height: auto;
    margin-left: 2rem;
  }

  & .text_take {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-right: 2rem;
    gap: 0.5rem;
  }

  & .text_left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    & .left_title {
      font-size: 0.75rem;
    }

    & .left_timer {
      font-size: 1rem;
      font-weight: 600;
      line-height: 1rem;
    }
  }
}