/* ONBOARDING GENERAL ##################################################################################################################### */
html, body {background-image: linear-gradient(to bottom,#132338,#253f59,#046f99, #026287 70%, #132338);
background-repeat:no-repeat;background-color:#132338;font-size:14px;}
.page-login{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.login-container{width:55%;margin:50px 20px;}.form-container{padding:0 15px;}
input[type=text], input[type=password], input[type=email]{box-sizing:border-box;border:1px solid #dbdbdb;border-radius:5px;
background-color:#fff;padding:12px 0 12px 10px;margin:8px 0;width:40%;}
.form-row {display:flex;flex-direction:row;justify-content:space-between;gap:3%;}
.form-row-column{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;padding:25px 0;}
.group-row{margin:5px 0;width:50%;} .group-row input, .group-row select{width:100%;}
.form-group{margin:30px 0;}
@media screen and (max-width:500px) {.login-container{width:85%;}.form-row {flex-direction:column;}.group-row{width:100%;}}

/* 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:var(--green);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 5px;width:30%;margin:5px;}
#submit-button{float:right;margin-right:15px;}
@media screen and (max-width:500px) {.gender-button{width:45%;}#dob_day, #dob_month, #dob_year {width:25%;}}

/* SUCCESS ################################################################################################# */
.success-container{text-align:center;}
.success-emoji{font-size:65px;}
#success-button{width:100%;margin:20px 0;}

/* WELCOME ############################################################################################## */
.welcome {font-size:15px;padding:10px 5px;}
.welcome-list li {font-size: 1.1em;margin:20px 15px 50px 0;display:flex;flex-direction:column;gap:10px;}
.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;}
@media screen and (max-width:500px) {.bullet-container{width:100%;}.welcome-list li{margin:20px 15px 35px 0;}}

/* 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;font-size:14px;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:var(--yellow);border-color:#fff;}
.subtopic-item input[type="checkbox"] {display: none;}
.subtopic-item.selected {background-color:var(--yellow);border-color:var(--navy-blue);color:var(--navy-blue);}
.subtopic-item span {margin-left: 10px;}
.select-all-container{margin:0 0 10px 5px;padding:0;}
.select-all-label{cursor:pointer;}
.interest-box:hover {background-color: #d1e7dd;border-color: #0f5132;color: #0f5132;}
.interest-box.active {background-color: #d1e7dd;border-color: #0f5132;color: #0f5132;}