body {
  background: #000;
  margin: 0;
  overflow: hidden;
}

.main {
}

.main_container {
  display: flex;
  align-items: flex-start;
}

.main_container .bar {
  width: 3800px;
  height: 300px;
  transform: rotate(129.877deg);
  position: fixed;
  background: rgba(100, 77, 248, 0.144);
  filter: blur(75px);
  z-index: 1;
  opacity: 1;
  border-radius: 500px;
}

.main_container .bar1 {
  left: -858.667px;
  top: 0;
}

.main_container .bar2 {
  left: 50%;
  top: 0;
}

.main_container .bar3 {
  left: 0;
  top: 0;
}

.content {
  display: flex;
  flex: 1;
  width: 100%;
  overflow-x: visible;
  position: relative;
  z-index: 5;
  overflow-y: scroll;
  height: 100vh;
}

.content::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.content::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
.content::-webkit-scrollbar-thumb {
  background: grey;
  border-radius: 10px;
}

/* Handle on hover */
.content::-webkit-scrollbar-thumb:hover {
  background: grey;
}

h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
}

@media screen and (max-width: 680px) {
  body {
    overflow: visible;
    height: auto;
  }

  .main {
    height: auto;
    min-height: 100vh;
    overflow-y: visible;
  }

  .content {
    overflow: visible;
    height: auto;
    min-height: 100vh;
  }
}

.message_modal {
  position: fixed;
  transition: .3S;
  left: 50%;
  transform: translateX(-50%);
  top: -100%;
  background: transparent;
  border: 1px solid #ffffff61;
  padding: 12px 24px;
  border-radius: 5px;
  width: 320px;
  z-index: 9999999999;
  font-family: Poppins;
}

.message_modal .message_body {display: flex;flex-direction: column;gap: 12px;}

.message_modal .message_body .message_actions {display: flex;justify-content: space-between;}

.message_modal .message_body .message_actions .message_title {color: white;font-size: 18px;}

.message_modal .message_body .message_actions svg {width: 16px;}

.message_modal .message_body .message_content {color: white;font-weight: 400;font-size: 14px;}


.message_modal .bar{
  background: rgba(255, 255, 255, 0.233);
  height: 3px;
  width: 100%;
  margin-top: 15px;
}

.message_modal .progress{
  background: white;
  height: 3px;
  width: 0;
  transition: 3000ms;
}

.message_modal .progress.animate{
  width: 100%;
}

.message_modal.error{
  background: rgb(255 69 69);
}

.message_modal.success{
  background: rgb(12, 192, 12);
}

.message_modal.active{
  top: 25px;
}

/* Parent container for the modal */
.discord-modal {
  /* Styles for the modal container */
  max-width: 563px;
  min-height: 517px;
  height: fit-content;
  border-radius: 20px;
  background: #FFF;
  margin: auto;
  padding: 25px;
  position: absolute;
  top: 50%;
  z-index: 99999999999999999;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* Content inside the modal */
.discord-modal .modal-content {
  /* Styles for the modal content */
  height: -webkit-fill-available;
}

/* Flex header section */
.discord-modal .modal-content .flex-header {
  /* Styles for the flex header */
  width: -webkit-fill-available;
  height: 262px;
  border-radius: 20px;
  background: linear-gradient(103deg, #654DF8 -2.66%, #5AB8FB 54.52%, #654DF8 111.71%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 50px;
}

/* Input field inside the flex header */
.discord-modal .modal-content .flex-header .input-field {
  /* Styles for the input field container */
  border-radius: 50px;
  background: #FFF;
  display: flex;
  align-items: center;
  height: 59px;
  width: -webkit-fill-available;
  padding: 0 20px;
  gap: 10px;
}

/* SVG icon inside the input field */
.discord-modal .modal-content .flex-header .input-field svg {
  /* Styles for the SVG icon */
}

/* Input element inside the input field */
.discord-modal .modal-content .flex-header .input-field input {
  /* Styles for the input element */
  width: -webkit-fill-available;
  border: 0;
  height: 30px;
  font-size: 18px;
  outline: 0;
}

/* Flex body section */
.discord-modal .modal-content .flex-body {
  /* Styles for the flex body */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}

/* Title inside the flex body */
.discord-modal .modal-content .flex-body .title {
  /* Styles for the title */
  color: #000;
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  margin-bottom: 0;
}

/* Description text inside the flex body */
.discord-modal .modal-content .flex-body .description {
  /* Styles for the description */
  color: #ADABAB;
  text-align: center;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  max-width: 480px;
  margin-top: 0;
}

/* Next button inside the flex body */
.discord-modal .modal-content .flex-body .next-btn {
  /* Styles for the next button */
  color: #FFF;
  text-align: center;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border-radius: 20px;
  background: #654DF8;
  width: 157px;
  height: 41px;
  border: 0;
  margin: 12px 0;
}

/* Flex links section */
.discord-modal .modal-content .flex-body .flex-links {
  /* Styles for the flex links container */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 16px;
  width: -webkit-fill-available;
}

/* Link button inside the flex links */
.discord-modal .modal-content .flex-body .flex-links .link-btn {
  /* Styles for the link button */
  border-radius: 50px;
  border: 1px solid #E6E6E6;
  background: #654df8;
  padding: 8px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  text-align: center;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

/* SVG icon inside the link button */
.discord-modal .modal-content .flex-body .flex-links .link-btn svg {
  /* Styles for the SVG icon inside the link button */
}

@media screen and (max-width: 470px) {
  .discord-modal .modal-content .flex-header{
      height: 200px;
      padding: 0 25px;
  }

  .discord-modal{
      padding: 12px;
      width: 80%;
  }

  .discord-modal .modal-content .flex-header .input-field input{
      width: 100%;
  }
}

body{
  background-color: black;
}

.terms-modal {
  display: none;
}

/* Parent container for the modal */
.discord-modal {
  /* Styles for the modal container */
}

/* Content inside the modal */
.discord-modal .modal-content {
  /* Styles for the modal content */
}

/* Flex header section */
.terms-modal .modal-content .flex-header {
  /* Styles for the flex header */
  width: -webkit-fill-available;
  height: 101px;
}

/* Title inside the flex header */
.discord-modal .modal-content .flex-header .title {
  /* Styles for the title */
  color: #FFF;
  font-family: Poppins;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

/* Flex body section */
.discord-modal .modal-content .flex-body {
  /* Styles for the flex body */
}

/* Flex terms section */
.discord-modal .modal-content .flex-body .flex-terms {
  /* Styles for the flex terms container */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
  margin: 40px 0;
}

/* Individual term label */
.discord-modal .modal-content .flex-body .flex-terms .term {
  /* Styles for each term label */
  width: -webkit-fill-available;
  display: flex;
  min-height: 65px;
  padding: 5px 10px;
  align-items: center;
  gap: 11px;
  align-self: stretch;
  border-radius: 10px;
  border: 1px solid rgba(152, 152, 152, 0.69);
}

/* Checkbox input inside the term label */
.discord-modal .modal-content .flex-body .flex-terms .term input[type="checkbox"] {
  /* Styles for the checkbox input */
  border-radius: 5px;
  border: 1px solid rgba(173, 171, 171, 0.60);
  width: 27px;
  height: 27px;
}

/* Description text inside the term label */
.discord-modal .modal-content .flex-body .flex-terms .term .descrpition {
  /* Styles for the description text */
  color: #000;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  width: 100%;
}

/* Next button inside the flex body */
.discord-modal .modal-content .flex-body .btn-next {
  /* Styles for the next button */
  border-radius: 20px;
  background: #654DF8;
  color: #FFF;
  text-align: center;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border: 0;
  width: 157px;
  height: 41px;
  flex-shrink: 0;
  cursor: pointer;
}

.discord-modal .modal-content .flex-body .btn-next.disabled{
  background: #644df857;
  pointer-events: none;
}

.discord-modal.closed{
  display: none !important;
}

.discord-modal .close-modal-btn{  cursor: pointer;
  border-radius: 50px;border: 1px solid #E6E6E6;background: #ffffff;padding: 8px 16px;text-decoration: none;display: flex;align-items: center;gap: 5px;color: #000000;text-align: center;font-family: Poppins;font-size: 16px;font-style: normal;font-weight: 500;line-height: normal;margin-top: 40px;width: 130px;justify-content: center;text-transform: capitalize;}


/* Parent container for the welcome modal */
.modal-welcome {
  /* Styles for the modal container */
  width: 541px;
  border-radius: 20px;
  background: #FFF;
  box-shadow: 3px 2px 8px 0px rgba(101, 77, 248, 0.50);
  height: 128px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 50px;
  right: -1000%;
  transition: .3s;
  z-index: 9999999999999999;
}

.modal-welcome.active{
  right: 50px;
  transition: .3s;
}

/* Content inside the modal */
.modal-welcome .modal-content {
  /* Styles for the modal content */
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: 12px;
}

/* Image inside the modal */
.modal-welcome .modal-content img {
  /* Styles for the image */
  max-width: 118px;
}

/* Flex container for text */
.modal-welcome .modal-content .flex-text {
  /* Styles for the flex container */
  display: flex;
  width: 294px;
  flex-direction: column;
  align-items: flex-start;
}

/* Title inside the flex container */
.modal-welcome .modal-content .flex-text .title {
  /* Styles for the title */
  color: #000;
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

/* Description text inside the flex container */
.modal-welcome .modal-content .flex-text .description {
  /* Styles for the description */
  color: #000;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

/* Close button */
.modal-welcome .modal-content .close-btn {
  /* Styles for the close button */
  border-radius: 9px;
  border: 1px solid rgba(173, 171, 171, 0.37);
  background: rgba(217, 217, 217, 0.13);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 15px;
  top: 15px;
}

@media screen and (max-width: 520px) {
  .modal-welcome.active{
    width: -webkit-fill-available;
    right: 15px;
    height: 86px;
  }

  .modal-welcome .modal-content .flex-text{
    width: -webkit-fill-available;
  }

  .modal-welcome .modal-content img{
    display: none;
  }

  .modal-welcome .modal-content .flex-text .title{
    font-size: 16px;
  }

  .modal-welcome .modal-content .flex-text .description{
    font-size: 14px;
  }
}