/* ONBOARDING GENERAL ##################################################################################################################### */
.page-login{position: absolute;top:30px;bottom: 0;left: 0;right: 0;display: flex;flex-wrap: wrap;align-items: center;
justify-content: center;}
.login-container{width:650px;margin:50px;}
input[type=text], input[type=password], input[type=email]{box-sizing: border-box;border: 1px solid #dbdbdb;border-radius: 5px;
background-color: #ffffff;padding: 12px 0 12px 5px;margin: 8px 0;width:40%;}
.label{width:150px;display:inline-block;}
.form-row {display: flex;justify-content: space-between;gap: 3%;}
.group-row{margin:5px 0;width:50%;} .group-row input, .group-row select{width:100%;}
.form-group{margin:15px 0;}

/* PROGRESS BAR ##################################################################################################################### */
.progress-bar {width: 95%;background-color: #f3f3f3; border-radius: 5px;padding: 7px 5px;margin-bottom: 30px;}
.progress {width: 20%;  /* 20% for Step 1 of 5 */height: 25px;background-color: #20affe;border-radius: 5px;transition: width 0.4s ease-in-out;}
.progress-bar p {text-align: center;margin-top: 5px;font-size: 14px;color: #333;}

/* SIGN UP PAGE ##################################################################################################################### */
#id_username, #id_password, #first_name, #last_name, #id_email, #id_email2, #id_password1, #id_password2 {width:100%;!important;}
#id_username{padding-left:30px;}

/* COLLECT INFO ##################################################################################################################### */
.input-container {position: relative;display: inline-block;width:100%}
.at-symbol {position: absolute;left: 10px;top: 50%;transform: translateY(-50%);color: #aaa;font-size: 1em;pointer-events: none;}
.gender-button{height:45px;padding: 10px 10px;width:20%;}.gender-button.active{background-color: #ffc83d;}
#dob_day, #dob_month, #dob_year {border-radius: 10px;padding: 10px;width: 30%;margin: 5px;}
#submit-button{float:right;margin-right:15px;}

/* WELCOME ##################################################################################################################### */
.welcome-list {
    list-style-type: none;
    padding-left: 0;
  }

  .welcome-list li {
    font-size: 1.1em;
    margin: 30px 15px 30px 0;
    display: flex;
    align-items: flex-start; /* Align items to the top */
  }

  .bullet-container {
    display: flex;
    align-items: flex-start; /* Align image and strong tag at the top */
    align-items: center;
    margin-right: 10px;
    width:45%;
  }

  .bullet-container img {
    width: 28px;
    height: 28px;
    margin-right: 10px;
  }

  .bullet-container strong {
    display: inline-block;

  }

  .welcome-list li span {
    flex: 1;
  }
  .intro {
    font-size: 1.1em;
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.6;
  }

  .guideline {
    margin-top: 20px;
  }

  .guideline-title {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 5px;

  }

  .guideline-description {
    font-size: 1em;
    margin-top: 5px;
    line-height: 1.6;
    margin-left: 15px;
  }
  .guideline-description ul {
    list-style-type: disc;
    margin-left: 20px;
    padding-left: 0;
  }

  .closing-message {
    margin-top: 30px;
    font-size: 1.2em;
    text-align: center;
    font-weight: bold;
    line-height: 1.5;
  }

/* TOPICS MAIN - ONBOARDING 2 ################################################################################################### */
/* MOVED TO FEED.CSS AS THESE STYLES ARE USED IN OTHER MAIN PAGES LIKE COURSES... */

/* TOPICS SUB - ONBOARDING 3 ################################################################################################### */
.topic-container{background-color:#f3f3f3;border-radius:8px;padding:5px 15px 25px 15px;margin-bottom:25px;}
.subtopic-container {display: flex;flex-wrap: wrap; gap: 5px;}
.subtopic-item {padding: 10px 10px;border: 2px solid #20affe;;border-radius: 10px;color: white;background-color: #20affe;transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;white-space: nowrap;display: flex;align-items: center;}
.subtopic-item:hover {background-color: #d1e7dd;border-color: #0f5132;color:#0f5132;}
.subtopic-item input[type="checkbox"] {display: none;}
.subtopic-item.selected {background-color: #d1e7dd;border-color: #0f5132;color:#0f5132;}
.subtopic-item span {margin-left: 10px;}
.select-all-container{margin:0 0 10px 5px;padding:0;}
.select-all-label{cursor:pointer;}

/* SUCCESS ##################################################################################################################### */
.sucess-container{width:650px;height:300px;background:#fff;}
.white-arch{position:relative;top:-60px;left:32%;background:#fff;border-radius:50%;
    height:200px;width:200px;padding:10px;z-index:1;}
.success-emoji{position:relative;top:-240px;left:280px;font-size:55px;z-index:1 !important;}
.success-form{position:relative;text-align:center;top:-190px;left:10px;z-index:1 !important;}#success-button{width:100%;margin-top:20px;}