div.author-image svg, div.author-image img{background-color:#e1e1e1} div.author-image img{object-fit:cover} div.box-header h1>a{text-decoration:none; color:#000} div.user-details{display:flex; flex-direction:column; align-items:flex-start; gap:5px} div.user-details h1{margin:0; font-size:26px; text-transform:none} div.user-image{width:120px; height:120px; flex:0 0 120px; border-radius:50%; overflow:hidden; display:flex; justify-content:center; align-items:center} div.user-image>a, div.user-image>span{font-size:28px} div.user-header{margin:15px; display:flex; justify-content:flex-start; align-items:flex-start; gap:15px} div.user-registered{display:flex; align-items:center; flex-direction:row; gap:3px} div.user-registered, div.user-registered a{font-size:12px; color:#898989; text-decoration:none} div.user-details-buttons{gap:7px; display:flex; justify-content:flex-start; align-items:center} .followers-count, .followed-count{font-weight:bold} .follow-overlay .message-content{height:390px; max-height:390px} .follow-list, .follow-status{min-height:30px} .follow-container{display:flex; justify-content:flex-start; align-items:center; gap:8px; padding:0 10px; border-radius:10px; margin:20px 0} .follow-count{font-size:15px} .user-follow-lists{display:flex; gap:8px; font-size:13px; margin:10px 0; color:#484848} .follow-lists-toggle{cursor:pointer; white-space:nowrap} .follow-lists-toggle:hover{text-decoration:underline} .username-link{font-size:13px; font-weight:bold; text-decoration:none; color:#363636; height:30px; display:flex; align-items:center; justify-content:flex-start} .follow-status{font-size:14px; font-style:italic; margin:20px auto} .user-about-text{color:#424242; font-size:14px; margin:10px; text-align:center; white-space:pre-wrap} .menu-posts{display:flex; justify-content:space-around; align-items:center; margin:10px} .menu-posts-toggle{user-select:none; cursor:pointer; font-weight:bold; font-size:13px; border-bottom:1px solid transparent; padding-bottom:3px; transition:border-color 0.2s ease; color:#595959} .menu-posts-toggle:hover, .menu-posts-toggle.active{border-color:#bbbbbb} .not-find-posts{padding:50px 0; text-align:center; height:100%; margin:0} .user-posts-content.hidden{display:none} #setting-avatar-img, .random-avatar-img, .header-user-profile-menu.logged{background-color:#bdbcbc; object-fit:cover} .settings{max-width:700px; margin:0 auto; font-family:system-ui, sans-serif; padding:10px} .setting{padding:16px 0; border-bottom:1px solid #e5e7eb} .setting.no-border{border-bottom:none} .setting:last-child{border-bottom:none} .setting-row{display:flex; align-items:center; justify-content:space-between; gap:16px} .setting-title{font-size:15px; font-weight:500; color:#111827} .setting-desc{margin-top:6px; font-size:13px; color:#6b7280; line-height:1.4} div.setting-row.content-flex-start{justify-content:flex-start} div.setting-row.items-flex-end{align-items:flex-end} button.setting-up{margin:10px 0; border-radius:5px; padding:5px 10px; font-size:16px; color:white; background-color:#4A90E2; border:none; transition:background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out} button.setting-up:hover{background-color:#357ABD} button.setting-up:active{background-color:#2E6DA4} button.setting-up svg{width:18px; height:18px; color:white; transition:transform 0.2s ease-in-out} .switch{position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0} .switch input{opacity:0; width:0; height:0} .slider{position:absolute; cursor:pointer; inset:0; background-color:#d1d5db; border-radius:999px; transition:background-color 0.2s} .slider::before{content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background-color:#fff; border-radius:50%; transition:transform 0.2s} .switch input:checked+.slider{background-color:#2563eb} .switch input:checked+.slider::before{transform:translateX(20px)} .switch input:focus+.slider{box-shadow:0 0 0 2px rgba(37, 99, 235, 0.3)} .setting-select{min-width:160px; padding:6px 28px 6px 10px; font-size:14px; color:#111827; background-color:#fff; border:1px solid #d1d5db; border-radius:6px; appearance:none; cursor:pointer; background-image:url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280'><path d='M4 6l4 4 4-4'/></svg>"); background-repeat:no-repeat; background-position:right 8px center} .setting-select:focus{outline:none; border-color:#2563eb; box-shadow:0 0 0 2px rgba(37, 99, 235, .2)} .setting-left{display:flex; align-items:center; gap:10px} .setting-icon{font-size:18px; width:22px; text-align:center; opacity:0.8} .setting-input{width:100%; max-width:300px; padding:8px 10px; margin:10px 0; font-size:14px; color:#111827; background-color:#fff; border:1px solid #d1d5db; border-radius:6px; transition:border-color 0.2s, box-shadow 0.2s} .setting-input::placeholder{color:#9ca3af} .setting-input:focus{outline:none; border-color:#2563eb; box-shadow:0 0 0 2px rgba(37, 99, 235, .2)} .setting-input[readonly]{background-color:#f9fafb; color:#6b7280} .birthday-fields{display:flex; gap:10px; margin-top:2px} .birthday-fields .setting-input{} .birthday-fields select.setting-input{width:33%} .about-setting{width:100%; max-width:100%} .setting-avatar-container .options-menu.set-bottom-postion{left:0; transform:translateX(0)} .setting-avatar-container{display:inline-flex; align-items:center; margin-top:6px; position:relative} #setting-user-avatar-container{} #setting-user-avatar-image-box-toggle{display:inline-block; position:relative; border-radius:50%; cursor:pointer} svg.change-avatar-icon{position:absolute; bottom:0; right:0; border-radius:50%; padding:4px; width:28px; height:28px; color:#5a5a5a} #avatar-msg-status{font-size:13px} .setting-desc.avatar{color:#808080; font-size:12px; margin:5px auto} #setting-user-avatar-image-box-toggle.dragover{outline:5px solid #fbb300} .random-avatar-img-container{position:relative; border-radius:50%; width:150px; height:150px; margin:20px auto; cursor:pointer; -webkit-tap-highlight-color:transparent; -webkit-appearance:none; appearance:none} .random-avatar-img{border-radius:50%; width:100%; height:100%} svg.change-random-avatar-icon{position:absolute; bottom:0; left:50%; transform:translateX(-50%); margin-bottom:-14px; border-radius:50%; padding:6px; width:36px; height:36px} .random-avatar-buttons-container{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:20px; margin:30px auto 20px auto} .user-option.remove-avatar span{color:red} .blocked-user-container{display:flex; justify-content:space-between; margin:20px 10px; align-items:center; gap:10px} .blocked-user{flex:1; text-align:left; overflow:hidden; white-space:nowrap} .unblock-user{} .not-blocked-user-results{text-align:center; margin:20px auto} .left-menu-option span.exit-account, .exit-account{color:red} input.not-ready-input, textarea.not-ready-input, select.not-ready-input, div.not-ready-input{background-color:#ffdbd4; border-color:red; box-shadow:0 0 0 3px rgba(128, 0, 0, 0.3); transition:background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease} input.ready-input, textarea.ready-input, select.ready-input{background-color:#e6ffe7; border-color:green; box-shadow:0 0 0 3px rgba(0, 128, 0, 0.3); transition:background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease} .auth-form{max-width:320px; margin:0 auto} .login-message-container, .auth-inputs-container{margin:20px auto 20px auto; text-align:center} .auth-inputs-container p{text-align:center; font-size:13px; line-height:22px; margin:1em 20px} .login-button{width:100%; max-width:250px; margin:20px auto; display:flex; align-items:center; justify-content:flex-start; font-size:14px; overflow:hidden; border-radius:20px; cursor:pointer; padding:0; text-decoration:none; height:45px; background-color:#fff; border:1px solid #aeaeae; gap:0} .login-button:hover{text-decoration:none; background-color:#f0f0f0} .login-button>span{display:inline-flex; align-items:center; justify-content:center; height:100%} .login-button-icon{padding:0; width:60px} .login-link-btn{font-weight:bold; color:#6e6e6e; font-size:13px; display:block; margin:10px auto} .login-link-btn, .login-link-btn:hover{background-color:#fff} .login-link-btn:hover{color:#000; text-decoration:none} .verification-email-status, .reset-password-status{font-size:19px; padding:30px 0; text-align:center} .validate-code-success{margin:20px auto; font-size:24px; color:#008b00} .validate-email-overlay{margin:10px} .validate-email-overlay>p{margin:0px auto; color:#333; padding:0; font-size:13px; line-height:20px} .validate-email-overlay>p.header-msg{margin:25px 15px; font-size:15px; color:#161616} .otp-container, #verifyBtn{display:block; margin:20px auto} .otp-container{display:flex; gap:10px; justify-content:center} .otp{width:44px; height:50px; text-align:center; font-size:22px; border:2px solid #ccc; border-radius:8px; outline:none} .otp:focus{border-color:#4CAF50} .otp-container.error input{border-color:#e53935; animation:otp-shake 0.35s} @keyframes otp-shake{0%{transform:translateX(0)} 25%{transform:translateX(-6px)} 50%{transform:translateX(6px)} 75%{transform:translateX(-6px)} 100%{transform:translateX(0)} }