body {background:#0d0d0d; margin: 0px; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; color: #ffffff; }
/* PAGE TOP */
#pageTop {
    background-color: #666666;
    height: 50px;
    top: 0px;
    position: sticky;
    z-index: 1;
}
#pageTop > #pageTopWrap {
    width: 1000px;
    margin: 0px auto;
    height: 50px;
}
#pageTop > #pageTopWrap > #pageTopLogo {
    float: left;
    height: 50px;
    width: 108px;
}
#pageTop > #pageTopWrap > #pageTopRest {
    float: left;
    height: 50px;
    width: 892px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 {
    height: 40px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div {
    margin-top: 8px;
    padding: 4px;
    text-align:right;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div > a {
    color: #CCC;
    text-decoration: none;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div > a:hover {
    color: #0000ff;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 {
    height: 40px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div {
    margin-top: -40px;
    margin-left: 30px;
    padding: 4px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div > a {
    display: block;
    float: left;
    color:#CCC;
    text-decoration: none;
    margin: 0px 16px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div > a:hover {
    color: #C0E73D;
}
/* SIGNUP PAGE */
#signupform{
    margin-top:24px;    
}
#signupform > div {
    margin-top: 12px;   
}
#signupform > input,select {
    width: 125px;
    padding: 3px;
    background: white;
}
#signupbtn {
    height:50px;
    width:200px;
    border:none;
    border-radius:10px;
    font-size:15px;
    padding: 10px;
    cursor:pointer;
}
/* LOGIN PAGE */
#loginform{
    height:auto;
    width:210px;
    margin-top:25px;
    padding-top:50px;
    padding-left:50px;
    padding-right:50px;
    padding-bottom:50px;
    background:#666666;
    border-radius:25px;
}
#loginform > div {
    margin-top: 12px;
}
#loginform > input {
    width: 200px;
    padding: 3px;
    background: white;
}
#loginbtn {
    height:50px;
    width:200px;
    border:none;
    border-radius:10px;
    font-size:15px;
    padding: 10px;
    cursor:pointer;
}
#signupbtn {
    height:50px;
    width:200px;
    border:none;
    border-radius:10px;
    font-size:15px;
    padding: 10px;
    cursor:pointer;
}
/* FORGOT PASSWORD PAGE */
#forgotpassform{
    height:auto;
    width:300px;
    margin-top:24px;
    padding-top:20px;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:20px;
    background:#666666;
    border-radius:25px; 
}
#forgotpassform > div {
    margin-top: 12px;   
}
#forgotpassform > input {
    width: 250px;
    padding: 3px;
    background: white;
}
#forgotpassbtn {
    border:none;
    border-radius:10px;
    font-size:15px;
    padding: 10px;
    cursor:pointer;
}
/* UPDATE PROFILE PAGE */
#updateform{
    margin-top:24px;
}
#updateform > div {
    margin-top: 12px;
}
#updateform > input {
    width: 200px;
    padding: 3px;
    background: white;
}
#updatebtn {
    height:50px;
    width:200px;
    border:none;
    border-radius:10px;
    font-size:15px;
    padding: 10px;
    cursor:pointer;
}
/* PAGE MIDDLE */
#pageMiddle{
    width: 1000px;
    height: 100%;
    margin: 0px auto;
    min-height: 1400px;
}
/* SEARCH PAGE */
.searchlist{
    height:150px;
    width:430px;
    border-radius:25px;
    background:#666666;
    border:gray 1px none;
    margin-top:15px;
    margin-bottom:10px;
    padding:10px;
}
.searchpics{
    border-radius:100px;
    width:125px;
    height:125px;
    margin-top:15px;
}
.search_info{
    float:right;
    padding-left:60px;
    margin-top:-90px;
    margin-right:210px;
    margin-left:80px;
    font-size:15px;
    font-weight:bold;
}
/* USER PAGE */
#pageMiddle > #profile_pic_box{
    float:right;
    border:#999 2px none;
    width:150px;
    height:150px; 
    border-radius:100px;
    margin:20px 30px 0px 0px;
    overflow-y:hidden;
}
#pageMiddle > #profile_pic_box > img{
    width:150px;
    height:150px;
}
#pageMiddle > #profile_pic_box > a{
    display: none;
    position:absolute; 
    margin:75px 0px 0px 100px;
    z-index:4000;
    background:#D8F08E;
    border:#81A332 1px solid;
    border-radius:100px;
    padding:5px;
    font-size:12px;
    text-decoration:none;
    color:#60750B;
}
#pageMiddle > #profile_pic_box > form{
    display:none;
    position:absolute; 
    z-index:3000;
    padding:0px;
    margin-top:120px;
    margin-left:-30px;
    opacity:8;
    background:#666666;
    color:black;
    border-radius:25px;
    width:210px;
    height:150px;
}
#pageMiddle > #profile_pic_box:hover a {
    display: block;
}
#pageMiddle > #online{
    float:right;
    display:block;
    position:relative;
    left:155px;
    bottom:-125px;
    border:#999 4px none;
    border-radius:100px;
    width:20px;
    height:20px;
    margin:20px 30px 0px 0px;
}
#pageMiddle > #online > img{
    width:20px;
    height:20px;
}
#friendBtn {
    float:right;
    border-radius:10px;
    border:none;
    margin-top:-23px;
    margin-bottom:-20px;
    margin-left:-20px;
    margin-right:48px;
    //margin-right:86px;
    padding:7px;
    cursor:pointer;
}
#messageBtn{
    float:right;
    border-radius:10px;
    border:none;
    margin-top:-23px;
    margin-bottom:-20px;
    margin-left:-20px;
    margin-right:48px;
    padding:7px;
    cursor:pointer;
}
#blockBtn {
    float:right;
    border-radius:10px;
    border:none;
    margin-top:-23px;
    margin-bottom:-20px;
    margin-left:-20px;
    margin-right:5px;
    padding:7px;
    cursor:pointer;
}
#editprofileBtn {
    float:right;
    border-radius:10px;
    border:none;
    margin-top:-40px;
    margin-bottom:-20px;
    margin-left:-20px;
    margin-right:15px;
    padding:7px;
    cursor:pointer;
}
#accountsettingsBtn {
    float:right;
    border-radius:10px;
    border:none;
    margin-top:-40px;
    margin-bottom:-20px;
    margin-left:-20px;
    margin-right:100px;
    padding:7px;
    cursor:pointer;
}
#ownersdashboardBtn {
    float:right;
    border-radius:10px;
    border:none;
    margin-top:-40px;
    margin-bottom:-20px;
    margin-left:-20px;
    margin-right:220px;
    padding:7px;
    cursor:pointer;
}
#pageMiddle > div{
    display:inline-block;
}
/* --- 1. GENERAL CONTAINER & TYPOGRAPHY --- */
#statusarea {
    min-width: 600px;
    max-width: 700px; 
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* BACKGROUND AND CONTAINER STYLING */
    background-color: #383838; 
    border-radius: 6px; 
    overflow: hidden; 
    
    /* PADDING (Top: 0, Right: 10px, Bottom: 10px, Left: 10px) */
    padding: 0 10px 10px 10px; 
    
    /* Default text color for the main div content */
    color: #f0f0f0; 
    font-size: 13px; 
}

/* Space between the input form (#statusui) and the feed (#statusarea) */
#statusui {
    max-width: 700px;
    margin: 0 auto 10px auto; 
    padding: 0 10px; 
}

a {
    text-decoration: none;
    color: #6398fe; 
}

a:hover {
    text-decoration: underline;
}

/* --- 2. MAIN STATUS ITEM STYLING --- */

.status_boxes {
    background-color: #4a4a4a; 
    border-radius: 4px; 
    
    padding: 0px; 
    margin-bottom: 12px; 
    
    position: relative; /* CRITICAL: Sets context for absolutely positioned children */
    
    border: none;
    line-height: 1.4; 
    color: #f0f0f0; /* Ensure text inside is visible */
}
.status_boxes > div {
    padding: 10px; 
}

/* Header Container: Avatar, Name/Date */
.status_boxes > div:first-child {
    display: block; 
    position: relative;
    padding-bottom: 6px; 
}

/* Avatar Image Styling */
.author_pic {
    width: 36px; 
    height: 36px; 
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px; 
    border: 1px solid #777777; 
    
    /* FIX: Float the avatar to the left to wrap text/content around it */
    float: left; 
    flex-shrink: 0;
}

/* Author Name & Date Layout */
.status_boxes > div:first-child b {
    display: inline-flex; 
    flex-direction: column;
    justify-content: center; 
    
    font-size: 12px; 
    line-height: 1.2;
    color: #cccccc !important; 
    
    flex-grow: 1; 
}

/* FIX: Targets the actual link (A tag) inside the bold tag to ensure name is white */
.status_boxes > div:first-child b a {
    color: #ffffff !important; 
    font-weight: 600;
}

/* Hides HTML structural elements (BR tags) that contain the date text */
.status_boxes > div:first-child b br, 
.status_boxes > div:first-child > br:nth-of-type(2) { 
    display: none; 
}


/* --- 3. DELETE LINK STYLING --- */

/* 1. Status Delete (Main Post 'X') */
span[id^="sdb_"] { 
    /* CRITICAL FIX: Absolute positioning to place it in the top right corner */
    position: absolute; 
    top: 10px; 
    right: 10px; 
    
    z-index: 100 !important; 
    float: none !important;
    margin: 0 !important; 
    padding: 0 !important; 
    display: block;
}

span[id^="sdb_"] a { 
    color: #ff5555; 
    font-size: 11px; 
    font-weight: 600; 
    opacity: 1; 
    padding: 3px 6px; 
    border-radius: 4px;
    line-height: 1.2; 
    transition: background 0.2s;
}

span[id^="sdb_"] a:hover {
    opacity: 1;
    text-decoration: none;
    background-color: #585858; 
    color: #ffffff;
}

/* 2. Reply Delete (Reply 'X' icon) - Adjusted position for better alignment with new reply bubble */
span[id^="srdb_"] {
    position: absolute;
    right: 12px; /* Adjusted from 6px */
    top: 8px; /* Adjusted from 2px */
    z-index: 20; 
    float: none !important;
}

span[id^="srdb_"] a {
    color: #ff5555; 
    font-size: 12px; 
    opacity: 1; 
    margin-left: 0; 
    font-weight: bold;
}

span[id^="srdb_"] a:hover {
    opacity: 0.8; 
    text-decoration: none;
}

/* --- 4. ACTION BAR & LINKS --- */

/* The Like Count Area */
div[id^="likes_qty_"] {
    /* CRITICAL FIX: Ensures this section starts below the floated avatar and post text */
    clear: both; 
    color: #cccccc;
    font-weight: 500;
    margin-top: 6px; 
    font-size: 10px; 
}
div[id^="likes_qty_"] img {
    width: 11px; 
    height: 11px;
    vertical-align: sub;
}


/* The Horizontal Rule (If present in HTML) */
.status_boxes hr {
    border: 0;
    border-top: 1px solid #585858; 
    margin: 6px 0 4px 0 !important; 
}

/* Action Bar Parent Container: Uses Flexbox for clean button spacing */
.status_boxes div[style*="font-size:12px"] {
    display: flex;
    gap: 12px; 
    align-items: center; 
}

/* Like & Comment Links */
.status_boxes div[style*="font-size:12px"] a {
    color: #cccccc; 
    font-weight: 600;
    font-size: 11px; 
    padding: 3px 6px; 
    border-radius: 4px;
    transition: background 0.2s;
}

.status_boxes div[style*="font-size:12px"] a:hover {
    background-color: #585858; 
    color: #ffffff;
}

/* --- 5. INPUTS & TEXTAREAS --- */

/* NEW: Container to hide/show the reply form (Requires JS to toggle 'active' class) */
.reply-input-wrapper {
    display: none; 
}
.reply-input-wrapper.active {
    display: block;
}

.replyInputBox {
    background-color: #555555; 
    padding: 6px; 
    border-radius: 4px; 
    margin-top: 6px; 
    overflow: hidden; 
}

textarea.replytext, textarea#statustext {
    width: 100%;
    box-sizing: border-box; 
    border: 1px solid #888888;
    border-radius: 3px; 
    padding: 6px; 
    font-family: inherit;
    font-size: 12px; 
    resize: vertical;
    min-height: 30px; 
    outline: none;
    transition: border-color 0.2s;
    background-color: #444444; 
    color: #ffffff;
}

textarea.replytext:focus, textarea#statustext:focus {
    border-color: #6398fe; 
    background-color: #333333;
}

/* --- 6. BUTTONS --- */
button {
    font-family: inherit;
}

/* Main Post Button */
#statusBtn {
    background-color: #6398fe; 
    color: white;
    border: none;
    padding: 6px 16px; 
    font-size: 12px; 
    font-weight: 600;
    border-radius: 3px; 
    cursor: pointer;
    margin-top: 4px; 
    transition: background-color 0.2s;
}

#statusBtn:hover {
    background-color: #528ae5;
}

/* Reply Button */
.replyBtn {
    background-color: #6398fe; 
    color: white;
    border: none;
    padding: 4px 10px; 
    font-size: 10px; 
    font-weight: 600;
    border-radius: 3px; 
    cursor: pointer;
    float: right;
    margin-top: 4px; 
}

.replyBtn:hover {
    background-color: #528ae5;
}

/* Disabled State for all buttons */
button:disabled {
    background-color: #5a5a5a;
    color: #cccccc;
    cursor: not-allowed;
}

/* --- 7. REPLIES SECTION --- */
.reply_area {
    margin-top: 6px; 
    clear: both; 
    padding-top: 6px; 
}

/* Individual reply container row (Flexbox for alignment) */
.reply_boxes {
    padding: 0;
    margin-top: 3px; 
    display: flex; 
    align-items: flex-start;
}

/* Replier Avatar */
.replier_pic {
    width: 24px; 
    height: 24px; 
    border-radius: 50%;
    object-fit: cover;
    margin-right: 4px; 
    border: 1px solid #777; 
    flex-shrink: 0; 
}

/* The content container (the bubble itself) */
.reply_boxes > div {
    font-size: 11px; 
    background-color: #555555; 
    padding: 5px 8px; 
    border-radius: 14px; 
    
    /* CRITICAL FIX: Ensure the word breaks mid-word if necessary to prevent overflow */
    word-break: break-all;
    
    max-width: 80%; 
    margin-right: auto; /* Pushes bubble to the left */
    
    /* CRITICAL CHANGE: Use display: inline-block or inline-flex to shrink-wrap the container */
    display: inline-block; 
    
    position: relative; 
    color: #ffffff;
    overflow-wrap: break-word;
}

/* Name and Date Container (inside the dark bubble) */
.reply_boxes b {
    color: #cccccc; 
    font-weight: 600;
    font-size: 11px; 
    margin: 0 0 1px 0; 
    padding: 0;
    line-height: 1.2;
    display: block;
}

/* Reply Date (inside the dark bubble) */
.reply_boxes b span {
    font-size: 9px; 
    color: #cccccc;
    font-weight: normal;
    margin-left: 5px;
}

/* --- 8. YOUTUBE EMBED STYLING --- */
.youtube-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; 
    margin-top: 6px; 
    border-radius: 4px; 
    overflow: hidden; 
}
.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; 
}

/* General Link Color inside post content */
.status_boxes > div a:not([id^="likeBtn"]):not([id^="statusBtn"]):not([id^="replyBtn"]) {
    color: #6398fe;
}
#pageMiddle > #photolist{
    display:inline-block;
    float:right;
    border-radius:25px;
    height:400px;
    width:324px;
    padding:10px;
    margin-top:-2px;
    border:#99C20C 1px none;
    background:#666666;
}
#pageMiddle > #photolist > img{
    display:inline-block;
    float:center;
    border-radius:25px;
    width:100px;
    height:100px;
    margin-right:8px;
    cursor:pointer;
}
#friends_list{
    display:inline-block;
    float:right;
    border-radius:25px;
    height:400px;
    width:324px;
    padding:10px;
    margin-top:435px;
    margin-right:-344px;
    border:#99C20C 1px none;
    background:#666666;
}
.friends_list{
    float:left;
    height:125px;
    width:100px;
    border-radius:25px;
    border:gray 1px none;
    margin-top:15px;
    margin-bottom:10px;
    padding:10px;
}
.friends_pics{
    display:inline-block;
    float:center;
    border-radius:25px;
    width:100px;
    height:100px;
    margin-top:-25px;
    margin-left:0px;
    margin-right:8px;
    cursor:pointer;
}
.friends_name{
    text-align:center;
    padding-left:-1px;
    margin-top:0px;
    font-size:14px;
}
/* OWNERS DASHBOARD */
.users_list_pics{
    border-radius:50px;
    width:75px;
    height:75px;
    margin-right:10px;
}
.online_users_list_pics{
    border-radius:50px;
    width:75px;
    height:75px;
    margin-right:10px;
}
/* TABBED NAVIGATION */
#pageMiddle > .tab-nav a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    font-size: 15px;
    border-radius: 5px;
}
#pageMiddle > .tab-nav a:hover {
    background-color: #666666;
    color: white;
}
#pageMiddle > .tab-nav a.active {
    text-decoration: underline;
    text-underline-offset: 0.7em;
    color: rgba(0, 110, 255, 0.74);
}
/* FRIEND REQUESTS PAGE */
#Friends > #friendReqBox > div{
    float:left;
    text-align:center;
    height:350px;
    width:230px;
    border:#F0F 1px none;
    background:#666666;
    border-radius:25px;
    padding:10px;
    margin-right:20px;
    margin-bottom:30px;
}
.friendrequests{
    height:74px;
    border-bottom:#CCC 1px none;
    margin-bottom:8px;
}
.request_pic{
    text-align:center;
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    width:250px;
    height:220px;
    margin-top:-10px;
    margin-left:-10px;
}
.request_info{
    text-align:center;
    font-weight: bold;
    white-space:nowrap;
    margin-top:75px;
    float:center;
    font-size:18px;
    margin-top:8px;
}
#accept_button{
    width:125px;
    height:40px;
    font-size:16px;
    border-radius:10px;
    margin-bottom:10px;
    cursor:pointer;
}
#reject_button{
    width:125px;
    height:40px;
    font-size:16px;
    border-radius:10px;
    cursor:pointer;
}
/* MESSAGES PAGE */
#conversationBox{
    height: 87%;
    width: 365px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #0d0d0d;
    overflow-y: scroll;
    padding-top: 20px;
    padding-right: 10px;
    margin-top: 50px;
    margin-left: 0px;
}
.conversationlist{
    height:65px;
    width:350px;
    background:#666666;
    border-radius:25px;
}
.conversation_author_pic{
    float:left;
    border-radius:50px;
    width:60px;
    height:60px;
    margin-top:1px;
    margin-bottom:10px;
    margin-left:5px;
    margin-right:20px;
}
.conversation_author{
    margin-top:20px;
    margin-left:25px;
}
.conversation_message{
    margin-top:5px;
    margin-left:25px;
}
.conversation_postdate{
    margin-top:5px;
    margin-left:25px;
}
#messageBox{
    height: 87%;
    width: 1100px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 430px;
    background-color: #0d0d0d;
    overflow-y: scroll;
    padding-top: 20px;
    padding-right: 10px;
    margin-top: 50px;
    margin-left: 0px;
}
.title{
    margin-top: -20px;
    margin-left: 0px;
}
.messagelist{
    height:30px;
    width:300px;
    background:#666666;
    border-radius:25px;
    margin-top:10px
}
.message_author_pic{
    float:left;
    border-radius:50px;
    width:30px;
    height:30px;
}
.message{
    padding-top:5px;
    margin-top:0px;
    margin-left:35px;
}
.message_postdate{
    margin-top:-16px;
    margin-left:200px;
}
/* NOTIFICATIONS PAGE */
#notesBox{
    float:center;
    transform:translate(69%, 0%);
    height:auto;
    width:400px;
    background-color:#666666;
    border-radius:25px;
    border:#F0F 1px none;
    margin:auto;
    margin-top:30px;
    padding-bottom:30px;
    margin-bottom:30px;
    margin-right:60px;
    padding:10px;
}
/* VIEW FRIENDS PAGE */
#friendsBox{
    float:left;
    transform:translate(5%, 0%);
    height:1000px;
    width:900px;
    background:#666666;
    border-radius:25px;
    border:#F0F 1px none;
    margin-top:30px;
    margin-bottom:30px;
    margin-right:60px;
    padding:10px;
}
.friendslist{
    height:110px;
    width:430px;
    border-radius:25px;
    border:gray 1px solid;
    margin-top:15px;
    margin-bottom:10px;
    padding:10px;
}
.friendspics{
    float:left;
    border-radius:25px;
    width:75px;
    height:75px;
    margin-top:12px;
}
.friends_info{
    float:center;
    padding-left:5px;
    margin-top:40px;
    margin-left:80px;
    font-size:15px;
    font-weight:bold;
}
/* PHOTOS PAGE */
#photo_form > form{
    background:#666666;
    border:#AFD80E 1px none;
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    border-bottom-left-radius:25px;
    border-bottom-right-radius:25px;
    margin-top:15px;
    width:1000px;
    height:150px;
    padding:20px;
}
#galleries > div{
    float:left;
    margin:20px;
    text-align:center;
    cursor:pointer;
}
#galleries > div > div {
    height:100px;
    overflow:hidden;
}
#galleries > div > div > img{
    width:150px;
    cursor:pointer;
}
#photos{
    display:none;
    border:#666 1px none;
    padding:20px;
}
#photos > div{
    float:left;
    width:125px;
    height:80px;
    overflow:hidden;
    margin:20px;
}
#photos > div > img{
    width:125px;
    cursor:pointer;
}
#picbox{
    display:none;
    padding-top:36px;
}
#picbox > img{
    max-width:800px;
    display:block;
    margin:0px auto;
}
#picbox > button{
    display:block;
    float:right;
    font-size:36px;
    padding:3px 16px;
}
/* SETTINGS PAGES */
/* Unified styling for all tab contents for better positioning */
#Account, #Privacy, #Notifications, #Blockedusers, #ManageAccount {
    position: absolute; /* Maintain absolute positioning */
    border-radius:25px;
    width:600px; 
    padding:15px;
    
    /* Vertical Position: 50px (PageTop) + 20px (Gap) */
    top: 70px; 
    
    /* Horizontal Position: 340px (Adjusted to align with "Myplaces" logo area) */
    left: 340px; 
    
    margin-bottom:20px;
    border:#99C20C 1px none;
    background:#666666;
}
/* Re-specifying height for those that need it, or using auto */
#Account {
    height: 250px;
}
#Privacy, #Notifications, #Blockedusers {
    height: 200px;
}
#ManageAccount {
    height: auto;
}

/* BLOCKED USERS LIST ELEMENTS */
.blockedusers{
    float:left;
    height:50px;
    width:600px;
}
.user_pic{
    float:left;
    border-radius:25px;
    width:35px;
    height:35px;
    margin-right:-55px;
}
.user_info{
    text-align:center;
    margin-top:-2px;
    margin-left:10px;
    font-size:15px;
    font-weight:bold;
}
#unblock_button{
    width:125px;
    height:40px;
    margin-left:285px;
    border-radius:10px;
    cursor:pointer;
}

/* FIX FOR DEACTIVATION/DELETION BUTTONS */
#deleteBtn {
    float: none; 
    margin: 10px 0 0 0; 
    border-radius:5px;
    border:none;
    padding:7px 15px;
    cursor:pointer;
}
#deactivateBtn {
    float: none; 
    margin: 10px 0 0 0;
    border-radius:5px;
    border:none;
    padding:7px 15px;
    cursor:pointer;
}

/* VERTICAL TABS ON SETTINGS PAGE */
#pageMiddle > #tab {
    height: 100%;
    width: 170px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #0d0d0d;
    overflow-x: hidden;
    padding-top: 20px;
    margin-top: 50px; /* Pushed down 50px to clear the header */
    margin-left: 10px;
}
#pageMiddle > #tab button {
    display: block;
    background-color: inherit;
    color: white;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}
#pageMiddle > #tab button:hover {
    border-radius: 10px;
    background-color: #666666;
    color: white;
}
#pageMiddle > #tab button.active {
    border-radius: 10px;
    background-color: #666666;
    color: white;
}
/* 🔥 FIX APPLIED HERE: Set all tab content sections to initially hidden by default. */
.tabcontent {
    float: left;
    padding: 0px 12px;
    border: 1px none #ccc;
    background-color: #666666;
    width: 70%;
    border-left: none;
    height: 300px;
    /* -------------------------- */
    /* FIX: Hide all content by default */
    display: none; 
    /* -------------------------- */
}
#main {
    margin-left: 150px; /* Same as the width of the sidenav */
    padding: 0px 10px;
}
/* SIDEBAR ON INDEX PAGE */
#pageMiddle > #sidebar {
    height: 100%;
    width: 180px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #0d0d0d;
    overflow-x: hidden;
    padding-top: 20px;
    padding-right: 10px;
    margin-top: 50px;
    margin-left: 10px;
}
#pageMiddle > #sidebar a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 20px;
    color: #ffffff;
    display: block;
}
#pageMiddle > #sidebar a:hover {
    border-radius: 10px;
    background-color: #666666;
    color: white;
}
#pageMiddle > #sidebar a:active {
    border-radius: 10px;
    background-color: #666666;
    color: white;
}
#main {
    margin-left: 150px; /* Same as the width of the sidenav */
    padding: 0px 10px;
}
/* UPDATE PROFILE PAGE */
#feedbackform{
    margin-top:24px;
}
#feedbackform > div {
    margin-top: 12px;
}
#feedbackform > input {
    width: 200px;
    padding: 3px;
    background: white;
}
#feedbackform > textarea {
    width: 325px;
    height: 50px;
    padding: 3px;
    background: white;
}
#submitbtn {
    height:50px;
    width:200px;
    border:none;
    border-radius:10px;
    font-size:15px;
    padding: 10px;
    cursor:pointer;
}
/* PAGE BOTTOM */
#pageBottom{
    height: 15px;
    background: #666666;
    padding: 15px;
    font-size: 12px;
    color: #CCC;
    text-align: center;
    bottom: 0px;
    position: sticky;
    z-index: 1;
}