body {
    --hi-bg: #eeeeee;
    --ui-bg: #eeeeee;
    --gpt-bg: #f3f3f3;
  
    --navbar-bg-color: #eaeaea;
    --navbar-bg-input-area: #ffffff;
  
    --HL-border-background: #c0c0c0;
    --HL-border-background-hover: #686868;
  
    --servers-background-color: #e3e5e8;
    --server-tab-background-color: white;
    --server-tab-text-color: #444444;
    --server-tab-text-color-hover: #ffffff;
    --theme-background-color: #f9f9f9;
    --navigator-bg: #f1f1f1;
    --blank-avatar-bg: #d6d6d6;
    --hl-slightly-brighter: #f7f7f7;
    --hl-slightly-brighter-text: #555555;
    --sharp-bg-inverse: #333333;
    --subtle-cancel-button-background: #dddddd;
    --subtle-cancel-button-color: #333333;
    --haunt-button-background: #ffffff;
    --light-gray-on-white: rgba(217,217,217,1.00);
    --pure-black: #000000;
    --always-dark-gray: #222222;            /* unchanging between dark/light themes */
    --seen-color:     #d0d0d0;
    --text-color:     #333333;
    --anchor-name-color:     #111111;
    --user-link:      #222222;                    /* username link color */
    --bg:             #fefefe;                 /* background color */
    --bg-2:           #ffffff;
    --title-bar:      #ffffff;
    --bg-hl:          #fcfcfc;
    --bg-hl-subtle:   #fcfcfc;
    --disabled:       #222222;                 /* disabled background color */
    --hl:             #f1f1f1;
    --hl-faint:       #bbbbbb;                   /* tweet hover highlight bg color */
    --hl-faint-lines: #aaaaaa;
    --hl-fainter-lines: #cccccc;
    --hl-really-faint: #f0f0f0;
    --webkit-scrollbar-bg-color: #eeeeee;
    --hl-faintest-lines: #e7e7e7;
    --hl-brighter:    #f1f1f1;                 /* brighter highlight bg color */
    --hl-bright:      #222222;                 /* brighter highlight bg color */
    --hl-placeholder: #CCCCCC;                 /* textarea placeholder */
    --hl-brightest:   #000000;                 /* brighter highlight bg color -- reverse (darkest in white mode)*/
    --post-button-shadow: 0 0 10px 10px #00000022;
    --post-hashtag-bg: #f2f2f2;
    --post-hashtag-fg: #7f7f7f;
    --tag-x-color: #b7b7b7;
    --highest-contrast-text-color: #222222;
    --bg-donate: unset;
  
    --invite-link-text-color: #999;
  
    --stackoverflow-hl-color: #5eba7d;
    --primary-vote-button-background: #5eba7d;
    --secondary-vote-button-background: orangered;
  
    /* clock */
    --clock-face: #dadada;
    --clock-frame-color: #dcdcdc;
    --clock-12-marks: linear-gradient(90deg, transparent 81%, #d9d9d9 89%, transparent 100%);
  
    /* draft editor colors */
    --draft-editor-title-color: #f5f5f5
  
    --bio-last-seen-bg: linear-gradient(to right, #eeeeee 8%, #ffffff 28%, #eeeeee 45%);
  
    --something-button-bg-color: #ffffff;
    --something-button-text-color: #000000;
    
    --hl-brightest-button: #000000; /* the brightest button*/
    --hl-brightest-text:   #eeeeee;
  
    --hl-brightest-dim: #111111;
  
    --fg:             rgba(217,217,217,1.00);  /* foreground text color */
    --secondary-text: rgb(110, 118, 125);      /* usernames, time stamps */
    
    --notification-bg: #37b2ff;
    --notification-color: #ffffff;
  
    --line-border-0:  1px solid #f1f1f1;
    --line-border-1:  1px solid #dddddd;
    --line-border-2:  1px solid #eeeeee;
    
    --hashtag-hash-color: blue;
  
    --post-message-option-button-bg: #adadad;
  
    --input-border-color: #eeeeee;
  
    --chat-recipient-bg-color: #ebeef0;
    --chat-text-color: #0f1419;
    --chat-my-text-color: #ffffff;
  
    --story-title-color: #6e767d;
  
    --subtle-text-color: #ababab;
  
    --glow-color:     #ddd;
    --placeholder:    #999;
  
    --overlay-bg:     #1f1f1f;
  
    --theme-bg:       #1ea9e3;
  
    --scrollbar-bg:   #eaeaea;
    --scrollbar-hover-bg:   #cccccc;
    --scrollbar-active-bg:   #777777;
    
    --stats-hl-bg:    #f0fff8;
  
    --newly-posted: #e6fff7;
  
    --error-color: #ff4500;
    --complete-color: teal;
  
    /* disabled states */
    --disabled-background: #f1f1f1 !important;  
    --disabled-color: #777 !important;
    --login-button-border: 2px solid #e6e6e6 !important;
  
    --disabled-button-border: 2px silver !important;
    --disabled-button-color: #777 !important;
    --disabled-button-background: silver;
  
    /* images, icons, buttons */
    
    --clipboard-icon: url(https://ghosttogether.net/static/clipboard.svg) no-repeat;
    --inline-hashtag: url(https://ghosttogether.net/static/hashtag-light.svg) no-repeat;
    --connector-1: url(https://ghosttogether.net/static/comment-connector-1-light.png) center center no-repeat;
    --connector-2: url(https://ghosttogether.net/static/comment-connector-2-light.png) center center no-repeat;
    --reaction-smile: url(https://ghosttogether.net/static/reaction-light.svg) center center no-repeat;
    --normalheart: url(https://ghosttogether.net/static/normalheart.png) center center no-repeat;
    --normalagree: url(https://ghosttogether.net/static/normalagree.png) center center no-repeat;
    --mask: url(https://ghosttogether.net/static/mask-light.png) center center no-repeat;
    --ghost-bg: url(https://ghosttogether.net/static/sittingghostlight.png) center center no-repeat;
    --views-icon: url(https://ghosttogether.net/static/eye.svg) center center no-repeat;
    --semicolon-logo: url(https://ghosttogether.net/static/semicolon-logo.png) no-repeat;
    --notifications-on: url(https://ghosttogether.net/static/notifications-bell.png) no-repeat center center;
    --notifications-off: url(https://ghosttogether.net/static/notifications-bell-off.png) no-repeat center center;
    --messages-hole: url(https://ghosttogether.net/static/messages-hole.png) no-repeat center center;
    --messages-hole-on: url(https://ghosttogether.net/static/messages-hole-on.png) no-repeat center center;
    --freegift-off: url(https://ghosttogether.net/static/notifications-freegift.png) no-repeat center center;
    --goback: url(https://ghosttogether.net/static/backlight.svg) center center no-repeat;
    --retweet-button: url(https://ghosttogether.net/static/retweet.svg) center center no-repeat !important;
    --retweet-shaded: url(https://ghosttogether.net/static/retweetshaded.svg) center center no-repeat !important;
    --love-shaded: url('https://ghosttogether.net/static/loveshaded.png') center center no-repeat !important;
    --love: url('https://ghosttogether.net/static/heartempty.svg') center center no-repeat !important;
    --trending-tiny: url('https://ghosttogether.net/static/trending-tiny.png') no-repeat;
    --speaker-on: url(https://ghosttogether.net/static/speaker-ic-0.png) no-repeat;
    --speaker-off: url(https://ghosttogether.net/static/speaker-ic-x.png) no-repeat;
    --analytics-ic: url(https://ghosttogether.net/static/analytics-ic.png) no-repeat;
    --paintbrush-ic: url(https://ghosttogether.net/static/colors-light.svg) no-repeat;
    --loom-ic: url(https://ghosttogether.net/static/loom-white.svg) no-repeat;
    --castle-ic: url(https://ghosttogether.net/static/castle-light.svg) no-repeat;
    --stix-ic: url(https://ghosttogether.net/static/stix-block-light.svg) no-repeat;
    --ghosttoken-ic: url(https://ghosttogether.net/static/ghosttoken.svg) no-repeat;
    --settings-ic: transparent url(https://ghosttogether.net/static/settings-light.svg) center center no-repeat;
    --question-sm: url('https://ghosttogether.net/static/question-sm.png') no-repeat;
    --retweeted-ic: url('https://ghosttogether.net/static/reghosted-light.svg') no-repeat;
    --post-image-icon: url('https://ghosttogether.net/static/post-image-icon.png') no-repeat;
    --ask-gpt-icon: url('https://ghosttogether.net/static/robot-light.png') no-repeat;
    --hamburger-ic: url('https://ghosttogether.net/static/3dots-light.svg');
    --tiny-icon-views: url(https://ghosttogether.net/static/stats-views-ic.png) no-repeat;
    --tiny-icon-users: url(https://ghosttogether.net/static/stats-users-ic.png) no-repeat;
    --tiny-icon-likes: url(https://ghosttogether.net/static/stats-likes-ic.png) no-repeat;
    --yes-ic: url(https://ghosttogether.net/static/yes.png) no-repeat !important;
    --tiny-user-search: url('tiny-user-search.png') no-repeat;
    --backspace-chat-ic: url('backspace-chat-ic.png') no-repeat;
    --icon-premium: url('https://ghosttogether.net/static/premium-diamond.png') no-repeat;
    --icon-open-link: url('https://ghosttogether.net/static/open-link.png') no-repeat;
    --user-info-icon: url('https://ghosttogether.net/static/user-info-ic.png') no-repeat;
    --dm-trash-icon: url('https://ghosttogether.net/static/trashcanlight.svg') no-repeat;
    --nav-icon-set: url('https://ghosttogether.net/static/nav-icons.png') no-repeat;
    --chat-ghost-button: url('https://ghosttogether.net/static/ghost-icon-light.png') no-repeat;
    --icon-follow: url('https://ghosttogether.net/static/batlight.svg') no-repeat;
    --select-image-button: url('https://ghosttogether.net/static/imagelight.svg') no-repeat;
    --image-uploading: url('https://ghosttogether.net/static/uploadinglight.svg');
    --send-chat-message: url('https://ghosttogether.net/static/sendarrow.svg') no-repeat;
    --up-ok: url('https://ghosttogether.net/static/imageuploadedoklight.svg');
    --navimg-home: url('https://ghosttogether.net/static/houselight.svg');
    --navimg-bell: url('https://ghosttogether.net/static/notlight.svg');
    --navimg-search: url('https://ghosttogether.net/static/searchlight.svg');
    --navimg-messages: url('https://ghosttogether.net/static/messageslight.svg');
    --navimg-msg: url('https://ghosttogether.net/static/msglight.svg');
    --navimg-question: url('https://ghosttogether.net/static/question-light.svg');
    --navimg-vote: url('https://ghosttogether.net/static/vote-light.svg');
    --navimg-write: url('https://ghosttogether.net/static/write-light.svg');
    --everyone: url('https://ghosttogether.net/static/eyelight.svg') no-repeat;
    --forgot-pw-icon: url('https://ghosttogether.net/static/memorylight.svg') no-repeat;
    --cancel-icon: url('https://ghosttogether.net/static/cancel-icon-light.svg') no-repeat;
    --checkmark: url('https://ghosttogether.net/static/checkmark.svg');
    --x: url('https://ghosttogether.net/static/x-light.svg') no-repeat;
    --xx: url('https://ghosttogether.net/static/x.svg') no-repeat;
    --eye: url('https://ghosttogether.net/static/eye-light.svg') no-repeat;
    --stairs: url('https://ghosttogether.net/static/stairs-light.svg');
    --refresh-icon: url('https://ghosttogether.net/static/refresh-icon.svg');
    --post-image: url('https://ghosttogether.net/static/mountain.svg');
    --post-image-hollow: url('https://ghosttogether.net/static/hollowmountain.svg');
    --post-poll: url('https://ghosttogether.net/static/poll.svg');
    --post-poll-hollow: url('https://ghosttogether.net/static/hollowpoll.svg');
    --post-link: url('https://ghosttogether.net/static/chain-light.svg');
    --post-poll: url('https://ghosttogether.net/static/postpoll-light.svg');
    --post-ask: url('https://ghosttogether.net/static/ask-light.svg');
    --post-vote: url('https://ghosttogether.net/static/postvote-light.svg');
    --post-give: url('https://ghosttogether.net/static/postgive-light.svg');
    --post-ask-gpt: url('https://ghosttogether.net/static/gpt-light.svg') no-repeat;
    --replied-to-notification-arrow: url('https://ghosttogether.net/static/replied-to-white.png') no-repeat;
    --fuz-heart: url('https://ghosttogether.net/static/fuzheart-light.png') no-repeat;
  
    --gpt-logo-background-color: #74aa9c;
    --gpt-dm-logo-color: white;
  
    --system-message-bg: #ffffff;
  
    --selected-tweet-text-container: #eeeeee;
      
    /* ghost emojis */
    --ghost-emoji-1: url('https://ghosttogether.net/static/ghost-emoji-1.png') center center no-repeat;
    --ghost-emoji-2: url('https://ghosttogether.net/static/ghost-emoji-2.png') center center no-repeat;
    --ghost-emoji-3: url('https://ghosttogether.net/static/ghost-emoji-3.png') center center no-repeat;
    --ghost-emoji-4: url('https://ghosttogether.net/static/ghost-emoji-4.png') center center no-repeat;
    --ghost-emoji-5: url('https://ghosttogether.net/static/ghost-emoji-5.png') center center no-repeat;
    --ghost-emoji-6: url('https://ghosttogether.net/static/ghost-emoji-6.png') center center no-repeat;
    --ghost-emoji-7: url('https://ghosttogether.net/static/ghost-emoji-7.png') center center no-repeat;
    --ghost-emoji-8: url('https://ghosttogether.net/static/ghost-emoji-8.png') center center no-repeat;
    --ghost-emoji-9: url('https://ghosttogether.net/static/ghost-emoji-9.png') center center no-repeat;
  
    --flash-start: #555;
    --flash-mid: #555;
  
    --theme-dim: #263b50;
    --theme-default: #007fff;
    --theme-grass: #31914e;
    --theme-teal: #58b1a2;
    --theme-brown: #a77058;
    --theme-yellow: #FFBF00;
    --theme-red: #b74869;  
    --always-white: #fff;
    --bg-alert: #2391ff;
  
    --bg-chat-just-received: #00000011;
    --bg-new-tweet: #f0ffee;
  }
  
  body.darkmode {
    --hi-bg: #212121;
    --ui-bg: #2f2f2f;
    --gpt-bg: #0a0a0a;
  
    --navbar-bg-color: #141414;
    --navbar-bg-input-area: #111111;
  
    --HL-border-background: #686868;
    --HL-border-background-hover: #c0c0c0;
  
    --servers-background-color: #1e1f22;
    --server-tab-background-color: #313338;
    --server-tab-text-color: #ffffff;
    --server-tab-text-color-hover: #ffffff;
    --theme-background-color: #111111;
    --navigator-bg: #2a2a2a;
    --blank-avatar-bg: #333333;
    --hl-slightly-brighter: #2a2a2a;
    --hl-slightly-brighter-text: #888888;
    --sharp-bg-inverse: #ffffff;
    --subtle-cancel-button-background: #333333;
    --subtle-cancel-button-color: #aaaaaa;
    --haunt-button-background: #222222;
    --light-gray-on-white: rgba(217,217,217,1.00);
    --pure-black: #000000;
    --always-dark-gray: #222222;
    --seen-color:     #535353;
    --text-color:     #aaa;
    --anchor-name-color:     #111111;
    --user-link:      #d6d6d6;                    /* username link color */
    --bg:             #111111;                 /* background color */
    --bg-2:           #000000;                 /* background color */
    --title-bar:      #111111;
    --bg-222:         #222222;
    --bg-333:         #333333;
    --bg-444:         #444444;
    --bg-555:         #555555;
    --bg-666:         #666666;
    --bg-777:         #777777;
    --bg-888:         #888888;
    --bg-hl:          #222222;
    --bg-hl-subtle:   #141414;
    --disabled:       #222222;                 /* disabled background color */
    --hl:             #111111;                 /* tweet hover highlight bg color */
    --hl-faint:       #161616;                 /* between 111111 and 1A1A1A */
    --hl-faint-lines:   #3a3a3a;
    --hl-fainter-lines: #2a2a2a;
    --webkit-scrollbar-bg-color: #2a2a2a;
    --hl-faintest-lines: #303030;
    --hl-really-faint: #222222;
    --hl-brighter:    #222222;                 /* brighter highlight bg color */
    --hl-brighterer:  #777777;                 /* brighter highlight bg color */
    --hl-bright:      #AAAAAA;                 /* brighter highlight bg color */
    --hl-brightest:   #FFFFFF;                 /* brighter highlight bg color */
    --you-bg:         #4a4a4a;                 /* chat message You: bg */
    --you-fg:         #959595;                 /* chat message You: fg */
    --hl-placeholder: #777777;                 /* textarea placeholder */
    --ss-bg:          #333333;
    --ss-fg:          #666666;
    --post-button-shadow: 0 0 10px 10px #00000044;
    --post-hashtag-bg: #313131c4;
    --post-hashtag-fg: #757575;
    --tag-x-color: #b7b7b7;
    --highest-contrast-text-color: #eeeeee;
    --bg-donate: #333;
  
    --invite-link-text-color: #7d7d7d;
  
    --stackoverflow-hl-color: #5f5eba;
    --primary-vote-button-background: #5f5eba;
    --secondary-vote-button-background: #ff6500;
  
    /* clock */
    --clock-face: #353535;
    --clock-frame-color: #333;
    --clock-12-marks: linear-gradient(90deg, transparent 81%, #333 89%, transparent 100%);
  
    /* draft editor colors */
    --draft-editor-title-color: #CCCCCC;
  
    --bio-last-seen-bg: linear-gradient(to right, #222222 8%, #333333 28%, #222222 45%);
  
    --something-button-bg-color: #ffffff;
    --something-button-text-color: #000000;
    
    --hl-brightest-button: #ffffff; /* the brightest button*/
    --hl-brightest-text:   #111111;
  
    --hl-brightest-dim: #cbd9d9;
    --fg:             rgba(217,217,217,1.00);  /* foreground text color */
    --secondary-text: rgb(110, 118, 125);      /* usernames, time stamps */
  
    --notification-bg: #ffff00;
    --notification-color: #333333;
  
    --line-border-0:  1px solid #555555;
    --line-border-1:  1px solid #333333;
    --line-border-2:  1px solid #111111;
    --hashtag-hash-color: #00ffad;
  
    --post-message-option-button-bg: #464646;
  
    --input-border-color: #333333;
  
    --chat-recipient-bg-color: #333333;
    --chat-text-color: #eeeeee;
    --chat-my-text-color: #ffffff;
  
    --story-title-color: #6e767d;
  
    --subtle-text-color: #71767b;
  
    --glow-color:     #333;
    --placeholder:    #666;
  
    --overlay-bg:     #1f1f1f;
  
    --stats-hl-bg:    #141c23;
  
    --newly-posted: #1c373a;
  
    --error-color: #ff4500;
    --complete-color: #00f3f0;
  
    --scrollbar-bg:   #4a4a4a;
    --scrollbar-hover-bg:   #666666;
    --scrollbar-active-bg:   #999999;
  
    --navbar-active-circle-color: #292929;
    
    /* disabled states */
    --disabled-background: #666666 !important;  
    --disabled-color: #aaa !important;
    --login-button-border: 2px solid #e6e6e6 !important;
    --disabled-button-border: 2px silver !important;
    --disabled-button-color: #777 !important;
    --disabled-button-background: #333333 !important;
  
    /* images, icons, buttons */
    --clipboard-icon: url(https://ghosttogether.net/static/clipboard-dark.svg) no-repeat;
    --inline-hashtag: url(https://ghosttogether.net/static/hashtag.svg) no-repeat;
    --connector-1: url(https://ghosttogether.net/static/comment-connector-1.png) center center no-repeat;
    --connector-2: url(https://ghosttogether.net/static/comment-connector-2.png) center center no-repeat;
    --reaction-smile: url(https://ghosttogether.net/static/reaction-dark.svg) center center no-repeat;
    --normalheart: url(https://ghosttogether.net/static/normalheart.png) center center no-repeat;
    --normalagree: url(https://ghosttogether.net/static/normalagree.png) center center no-repeat;
    --mask: url(https://ghosttogether.net/static/mask-dark.png) center center no-repeat;
    --ghost-bg: url(https://ghosttogether.net/static/sittingghostlight.png) center center no-repeat;
    --views-icon: url(https://ghosttogether.net/static/eye.svg) center center no-repeat;
    --semicolon-logo: url(https://ghosttogether.net/static/semicolon-logo-dark.png) no-repeat;
    --notifications-on: url(https://ghosttogether.net/static/notifications-bell-dark.png) no-repeat center center;
    --notifications-off: url(https://ghosttogether.net/static/notifications-bell-off-dark.png) no-repeat center center;
    --messages-hole: url(https://ghosttogether.net/static/messages-hole-dark.png) no-repeat center center;
    --messages-hole-on: url(https://ghosttogether.net/static/messages-hole-on-dark.png) no-repeat center center;
    --freegift-off: url(https://ghosttogether.net/static/notifications-freegift-dark.png) no-repeat center center;
    --goback: url(https://ghosttogether.net/static/backdark.svg) center center no-repeat;
    --retweet-button: url(https://ghosttogether.net/static/retweet-dark.svg) center center no-repeat !important;
    --retweet-shaded: url(https://ghosttogether.net/static/retweetshaded-dark.svg) center center no-repeat !important;
    --love-shaded: url('https://ghosttogether.net/static/loveshaded-dark.png') center center no-repeat !important;
    --love: url('https://ghosttogether.net/static/heartempty.svg') center center no-repeat !important;
    --trending-tiny: url('https://ghosttogether.net/static/trending-tiny-dark.png') no-repeat;
    --speaker-on: url(https://ghosttogether.net/static/speaker-ic-0-dark.png) no-repeat;
    --speaker-off: url(https://ghosttogether.net/static/speaker-ic-x-dark.png) no-repeat;
    --analytics-ic: url(https://ghosttogether.net/static/analytics-ic-dark.png) no-repeat;
    --paintbrush-ic: url(https://ghosttogether.net/static/colors-dark.svg) no-repeat;
    --loom-ic: url(https://ghosttogether.net/static/loom-dark.svg) no-repeat;
    --stix-ic: url(https://ghosttogether.net/static/stix-block-dark.svg) no-repeat;
    --castle-ic: url(https://ghosttogether.net/static/castle-dark.svg) no-repeat;
    --ghosttoken-ic: url(https://ghosttogether.net/static/ghosttokendark.svg) no-repeat;
    --settings-ic: transparent url(https://ghosttogether.net/static/settings-dark.svg) center center no-repeat;
    --question-sm: url('https://ghosttogether.net/static/question-sm-dark.png') no-repeat;
    --retweeted-ic: url('https://ghosttogether.net/static/reghosted-dark.svg') no-repeat;
    --hamburger-ic: url('https://ghosttogether.net/static/3dots-dark.svg');
    --tiny-icon-views: url(https://ghosttogether.net/static/stats-views-ic-dark.png) no-repeat;
    --tiny-icon-users: url(https://ghosttogether.net/static/stats-users-ic-dark.png) no-repeat;
    --tiny-icon-likes: url(https://ghosttogether.net/static/stats-likes-ic.png) no-repeat;
    --yes-ic: url(https://ghosttogether.net/static/yes-dark.png) no-repeat !important;
    --tiny-user-search: url('tiny-user-search-dark.png') no-repeat;
    --backspace-chat-ic: url('backspace-chat-ic-dark.png') no-repeat;
    --icon-premium: url('https://ghosttogether.net/static/premium-diamond-dark.png') no-repeat;
    --icon-open-link: url('https://ghosttogether.net/static/open-link-dark.png') no-repeat;
    --user-info-icon: url('https://ghosttogether.net/static/user-info-ic-dark.png') no-repeat;
    --dm-trash-icon: url('https://ghosttogether.net/static/trashcandark.svg') no-repeat;
    --nav-icon-set: url('https://ghosttogether.net/static/nav-icons-dark.png') no-repeat;
    --chat-ghost-button: url('https://ghosttogether.net/static/ghost-icon-dark.png') no-repeat;
    --icon-follow: url('https://ghosttogether.net/static/batdark.svg') no-repeat;
    --select-image-button: url('https://ghosttogether.net/static/imagedark.svg') no-repeat;
    --image-uploading: url('https://ghosttogether.net/static/uploadingdark.svg');
    --send-chat-message: url('https://ghosttogether.net/static/sendarrow.svg') no-repeat;
    --up-ok: url('https://ghosttogether.net/static/imageuploadedokdark.svg');
    --navimg-home: url('https://ghosttogether.net/static/house.svg');
    --navimg-bell: url('https://ghosttogether.net/static/not.svg');
    --navimg-search: url('https://ghosttogether.net/static/searchdark.svg');
    --navimg-messages: url('https://ghosttogether.net/static/messages.svg');
    --navimg-msg: url('https://ghosttogether.net/static/msg.svg');
    --navimg-question: url('https://ghosttogether.net/static/question-dark.svg');
    --navimg-vote: url('https://ghosttogether.net/static/vote-dark.svg');
    --navimg-write: url('https://ghosttogether.net/static/write-dark.svg');
    --everyone: url('https://ghosttogether.net/static/eye.svg') no-repeat;
    --forgot-pw-icon: url('https://ghosttogether.net/static/memorydark.svg') no-repeat;
    --cancel-icon: url('https://ghosttogether.net/static/cancel-icon-dark.svg') no-repeat;
    --checkmark: url('https://ghosttogether.net/static/checkmark.svg');
    --x: url('https://ghosttogether.net/static/x-dark.svg') no-repeat;
    --xx: url('https://ghosttogether.net/static/x.svg') no-repeat;
    --eye: url('https://ghosttogether.net/static/eye.svg') no-repeat;
    --stairs: url('https://ghosttogether.net/static/stairs-dark.svg');
    --refresh-icon: url('https://ghosttogether.net/static/refresh-icon.svg');
    --post-image: url('https://ghosttogether.net/static/mountain.svg');
    --post-image-hollow: url('https://ghosttogether.net/static/hollowmountain.svg');
    --post-poll: url('https://ghosttogether.net/static/poll.svg');
    --post-poll-hollow: url('https://ghosttogether.net/static/hollowpoll.svg');
    --post-link: url('https://ghosttogether.net/static/chain.svg');
    --post-poll: url('https://ghosttogether.net/static/postpoll.svg');
    --post-ask: url('https://ghosttogether.net/static/ask.svg');
    --post-vote: url('https://ghosttogether.net/static/postvote.svg');
    --post-give: url('https://ghosttogether.net/static/postgive.svg');
    --post-ask-gpt: url('https://ghosttogether.net/static/gpt.svg') no-repeat;
    --replied-to-notification-arrow: url('https://ghosttogether.net/static/replied-to.png') no-repeat;
    --fuz-heart: url('https://ghosttogether.net/static/fuzheart-dark.png') no-repeat;
  
    --gpt-logo-background-color: #74aa9c;
    --gpt-dm-logo-color: silver;
    
    --system-message-bg: #222222;
  
    --selected-tweet-text-container: #1c1c1c;
  
    /* ghost emojis */
    --ghost-emoji-1: url('https://ghosttogether.net/static/ghost-emoji-1.png') center center no-repeat;
    --ghost-emoji-2: url('https://ghosttogether.net/static/ghost-emoji-2.png') center center no-repeat;
    --ghost-emoji-3: url('https://ghosttogether.net/static/ghost-emoji-3.png') center center no-repeat;
    --ghost-emoji-4: url('https://ghosttogether.net/static/ghost-emoji-4.png') center center no-repeat;
    --ghost-emoji-5: url('https://ghosttogether.net/static/ghost-emoji-5.png') center center no-repeat;
    --ghost-emoji-6: url('https://ghosttogether.net/static/ghost-emoji-6.png') center center no-repeat;
    --ghost-emoji-7: url('https://ghosttogether.net/static/ghost-emoji-7.png') center center no-repeat;
    --ghost-emoji-8: ufrl('https://ghosttogether.net/static/ghost-emoji-8.png') center center no-repeat;
    --ghost-emoji-9: url('https://ghosttogether.net/static/ghost-emoji-9.png') center center no-repeat;
  
    --flash-start: #555;
    --flash-mid: #fff;
  
    --always-white: #fff;
    --bg-alert: #2391ff;
  
    --bg-chat-just-received: #ffffff11;
  }
  
  /* darkmode scrollbars */
  /* main DM view only */
  
  body.darkmode #view.homepage #right-right::-webkit-scrollbar,
  body.darkmode #right-right::-webkit-scrollbar { width: 8px }
  
  body.darkmode #view.homepage #right-right::-webkit-scrollbar-button,
  #right-right::-webkit-scrollbar-button {
      width: 8px;
      height: 5px;
  }
  body.darkmode #right-right::-webkit-scrollbar-track,
  body.darkmode #view.homepage #right-right::-webkit-scrollbar-track {
      /*background:#eee;*/
      /*border: thin solid lightgray;*/
      /*box-shadow: 0px 0px 3px #dfdfdf inset;*/
      /*border-radius:10px;*/
  }
  body.darkmode #right-right::-webkit-scrollbar-thumb,
  body.darkmode #view.homepage #right-right::-webkit-scrollbar-thumb {
      background: #333;
      /*border: thin solid gray;*/
      border-radius: 2px;
  }
  body.darkmode #right-right::-webkit-scrollbar-thumb:hover,
  body.darkmode #view.homepage #right-right::-webkit-scrollbar-thumb:hover {
      background:#555;
  }
  
  /* text brightness */
  body.text-1 { --text-color: #333333 }
  body.text-2 { --text-color: #555555 }
  body.text-3 { --text-color: #777777 }
  body.text-4 { --text-color: #999999 }
  body.text-5 { --text-color: #BBBBBB }
  body.text-6 { --text-color: #DDDDDD }
  body.text-7 { --text-color: #FFFFFF }
  
  /* used to be: #37b2ff */
  /* used to be #92b2f2 */
  body.default { 
    --theme-bg: #1ea9e3 !important;
    --user-link: #1ea9e3 !important;
    --bg-chat-just-received: #1ea9e3FF;
  }
  
  body.orange {
    --theme-bg: #e0622e;
    --user-link: #e0622e;
    --bg-chat-just-received: #e0622eFF;
  }
  
  body.violet {
    --theme-bg: #6b31ff;
    --user-link: #6b31ff;
    --bg-chat-just-received: #6b31ffFF;
  }
  
  body.dim {
    --theme-bg: #757575;
    --bg-chat-just-received: #00000055;
    /*--user-link: #4c4c4c !important;*/
    /*--user-link: #c5c5c5 !important;*/
  }
  
  body.dim #stripe {
    background-color: #555555;
    border: 2px solid #636363;
  }
  body.dim #post-button,
  body.dim #post-button-main {
    background: #555555 !important;
    border: 2px solid #636363 !important;
  }
  
  body.grass {
    --theme-bg:  #31914e;
    --user-link: #31914e !important;
    --bg-chat-just-received: #31914eFF;
  }
  body.teal  {
    --theme-bg: #58b1a2;
    --user-link: #58b1a2 !important;
    --bg-chat-just-received: #58b1a2FF;
  }
  body.yellow  {
    --theme-bg: #FFBF00;
    --user-link: #FFBF00 !important;
    --bg-chat-just-received: #FFBF00FF;
  }
  body.brown {
    --theme-bg: #a77058;
    --user-link: #a77058 !important;
    --bg-chat-just-received: #a77058FF;
  }
  body.red {
    --theme-bg: #ca00af;
    --user-link: #ca00af !important;
    --bg-chat-just-received: #ca00afFF;
  }
  
  body.bluesky {
    --theme-bg:  #1ea9e3;
    --user-link: #1ea9e3 !important;
    --bg-chat-just-received: #1ea9e3FF;
  }
  
  body.brown {
    --theme-bg:  #5a432f;
    --user-link: #5a432f !important;
    --bg-chat-just-received: #5a432fFF;
  }
  
  body.rose {
    --theme-bg:  #ff6ecc;
    --user-link: #ff6ecc !important;
    --bg-chat-just-received: #ff6eccFF;
  }
  
  body.bloodred {
    --theme-bg:  #a30d14;
    --user-link: #a30d14 !important;
    --bg-chat-just-received: #a30d14FF;
  }
  
  body.dim .is-follow-button.following {
  
  }
  
  /* - - - - - - - - - - - - - - - - - - - - */
  
  body.default-dim {
    --theme-bg:  #263b50;
    --user-link: #263b50 !important;
  }
  
  body.grass-dim {
    --theme-bg:  #34402e;
    --user-link: #34402e !important;
  }
  body.teal-dim  {
    --theme-bg: #354441;
    --user-link: #354441 !important;
  }
  body.brown-dim {
    --theme-bg: #423834;
    --user-link: #423834 !important;
  }
  body.red-dim {
    --theme-bg: #443237;
    --user-link: #443237 !important;
  }
  
  .theme-background {
    background-color:var(--theme-bg)
  }

  body.is-article #right-sidebar-container {
    display:none
  }
  
  .theme-foreground {
    color:var(--theme-bg) !important;
  }
  
       body {
        margin: 0;
        padding: 0;
        height: 100%;
       }
  
       #root {
  
       }
  
       main {
         height: 100%
       }
  
       * { font-family: Arial; }
  
       /* padding shouldn't impact element width this is also CSS grid's default setting */
       *, *:before, *:after { box-sizing: border-box }
  
       .noselect, .no-select {
     -webkit-touch-callout: none; /* iOS Safari */
       -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
          -moz-user-select: none; /* Old versions of Firefox */
           -ms-user-select: none; /* Internet Explorer/Edge */
               user-select: none; /* Non-prefixed version, currently
                                     supported by Chrome, Edge, Opera and Firefox */
      }
  
       /* vertical and horizontal align */
      .f { display: flex; }
      .fs { align-items: flex-start }
      .v { align-items: center }
      .vs { align-items: flex-start }
      .ve { align-items: flex-end }
      .h { justify-content: center }
      .hs { justify-content: flex-start }
      .he { justify-content: flex-end }
      .r { flex-direction: row }
      .rr { flex-direction: row-reverse }
      .c { flex-direction: column }
      .cr { flex-direction: column-reverse }
      .s { justify-content: space-around }
  
      .fontSize15 { font-size: 15px; }
      .fontSize16 { font-size: 16px; }
      .fontSize17 { font-size: 17px; }
      .fs15 { font-size: 15px; }
      .fs16 { font-size: 16px; }
      .fs17 { font-size: 17px; }
      .fs18 { font-size: 18px; }
      .fs19 { font-size: 19px; }
      .fs20 { font-size: 20px; }
      .fs25 { font-size: 25px; }
  
       .zero-padding { padding: 0 !important; }
       .o { padding: 5px }
       .p { padding: 10px }
       .pp { padding: 20px }
       .ppp { padding: 30px }
       .pppp { padding: 50px }
       .ppppp { padding: 100px }
       .p2 { padding: 2px }
       .p4 { padding: 4px }
       .p8 { padding: 8px }
       .p10 { padding: 10px }
  
       .lm { margin-left: 8px }
       .lmm { margin-left: 16px }
  
       .m { margin: 5px }
       .mm { margin: 10px }
       .mmm { margin: 20px }
       .mmmm { margin: 30px }
       .m2 { margin: 2px }
       .m4 { margin: 4px }
       .m8 { margin: 8px }
       .m10 { margin: 10px }
  
       .b { font-size: 28px }
  
       .sep { width: 100%; height: 0; border-bottom: 1px solid #eee; }
       .one { height: 1px; }
       .two { height: 2px; }
       .three { height: 3px; }
       .four { height: 4px; }
       .five { height: 5px; }
  
       .abs { position: absolute; }
       .rel { position: relative !important; }
  
       /* Chrome applies blue "usability" background  to autofilled input boxes, but it's a nightmare for custom design */
       input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important }
  
       /* Remove Chrome outline (same reason as above) */
       *:focus { outline: none }
  
       /* Disable Safari crap */
       input, textarea {
           -webkit-appearance: none;
           -moz-appearance: none;
           appearance: none;
       }
  
  
  
  
  
  
       .col { padding: 10px; }
       .row { padding: 10px; }
       .point { display: inline-block; vertical-align: middle; margin-top: -2px; width: 10px; height: 10px; background: yellowgreen !important; border-radius: 50%; }
       .red-bg { background: red !important }
       .orangered-bg { background: orangered !important }
       .orange-bg { background: orange !important }
       .yellowgreen-bg { background: yellowgreen !important }
       .green-bg { background: green !important }
       .lime-bg { background: limegreen !important }
       .yellow-bg { background: yellow !important }
       .gray-bg { background: gray !important }
       .lt-gray-bg { background: #fefefe !important }
       
       /* same as theme bg */
       .white-bg {
           background: var(--bg) !important
        }
  
       .red-bg { background: red !important }
       .black-bg { background: black !important }
       .trans-bg { background: transparent !important }
  
       .icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        border: 1px solid gray
       }
  
       .cat {
        display: inline-block;
        height: 24px;
        border: 1px solid gray
       }
  
       .news {
        border: 1px solid gray;
       }
  
       * {
         font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
       }
  
       /* -- registration input style -- */
       #first-last {
           display: grid;
           grid-template-columns: 1fr 1fr;
           /*width: 400px !important;*/
           width: 100%;
       }
  
       #first-last .input-container {
        width: 50%;
       }
  
       #first-last input {
         width: 100% !important;
         margin-right: 20px;
       }
  
       textarea.regular {
         border: 2px solid var(--input-border-color) !important;
         border-radius: 3px;
         font-size: 16px;
         padding: 7px;
       }
  
       textarea:focus {
         border: 2px solid var(--theme-bg) !important;
       }
  
       input {
         border: 2px solid var(--input-border-color) !important;
         border-radius: 3px;
         transition: unset !important;
       }
  
       input { padding: 7px; }
       input { font-size: 16px; }
  
       input:focus {
         border: 2px solid var(--theme-bg) !important;
         /*transform: scale(1.005)*/
       }
  
       .input-container .input-placeholder {
             position: absolute;
             top: 11px;
             left: 8px;
             font-size: 15px;
             font-family: Arial;
             background: var(--bg);
             padding-left: 4px;
             padding-right: 8px;
             transition: 0.2s;
             pointer-events: none;
             color: #888;
       }
  
       .input-placeholder.active {
             top: -8px;
             left: 5px;
             color: #888;
             transform: scale(0.8);
       }
  
       .input-container {
         margin: 15px 0;
         position: relative;
       }
  
       .input-container input {
         width: 420px;
         max-width: 420px;
       }
  
       body.settings textarea {
         width: 420px;
         max-width: 420px;
       }
  
       .grey-bg {
         background: #eee;
       }
  
       .grey {
         color: #555;
       }
  
       body { background: var(--theme-background-color) }
       
       #view {
         /*background: #fff;*/
       }
  
       .box-header {
         border-bottom: 1px solid #dadada;
       }
  
       .pad-left {
         padding-left: 32px;
       }
  
       .pad-right {
         padding-right: 32px;
       }
  
       .bold {
         font-weight: bold;
       }
  
       .max1000 {
         /*max-width: 1065px;*/
         max-width: 990px;
       }
  
       .max1000homepage {
         width: 1251px;
         max-width: 1251px;
       }
  
       .mini-button {
         /*background: ;*/
         color: #777;
         border: 1px solid #dadada;
         padding: 4px 15px;
         font-size: 15px;
         border-radius: 3px;
         cursor: pointer;
         height: 32px
       }
  
       .mini-button:hover {
         border: 1px solid #aaa;
       }
  
       .pointer { cursor: pointer; }
  
       .button {
        background: var(--theme-bg);
        color: white;
        padding: 8px 25px;
        font-size: 18px;
        border-radius: 3px;
        cursor: pointer;
        border: 2px solid transparent;
        width: auto;
       }
  
       .button:hover {
         border: 2px solid #777;
       }
  
       .white-button {
         /*background: var(--always-white) !important;
         color: var(--always-dark-gray) !important; */
       }
  
       .arrow-down {
        cursor: pointer;
        position: absolute;
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        /*opacity: 0.65;*/
        opacity: 0.80;
        background: var(--hamburger-ic) center center no-repeat;
        background-position: center center;
        background-size: 20px;
        border-radius: 0;
        z-index: 5;
        /*transition: 300ms;*/
       }
  
       .iphone .arrow-down {
         right: 8px;
         top: 17px;
       }
       
       .arrow-down:hover {
          opacity: 1;
       }
  
       .mar { margin: 13px; }
  
       .no-border { border: 0 !important }
  
       #changeUsernameButton,
       #registerButton {
         background: var(--theme-bg);
         color: white;
         padding: 8px 25px;
         font-size: 18px;
         border-radius: 3px;
         cursor: pointer;
       }
       
       .button {
        background: var(--theme-bg);
        color: white;
        padding: 8px 25px;
        font-size: 18px;
        border-radius: 3px;
        cursor: pointer;
       }
  
       nav { height: 24px }
       nav div:nth-child(1) {
         /*padding: 3px 8px;*/
         padding: 0 0;
         font-weight: bold;
         cursor: pointer;
       }
  
       .logo-image {
         cursor: pointer;
       }
  
       label {
         cursor: pointer;
       }
  
       footer div {
         padding: 16px;
       }
  
       .sme-tab {
         background: #efefef;
         border-bottom: 1px solid #dedede;
         text-transform: uppercase;
         font-weight: bold;
         font-size: 14px;
       }
  
       .sme-mid {
         background: #efefef;
         border-bottom: 1px solid #dedede;
         border-top: 1px solid #dedede;
         text-transform: uppercase;
         font-weight: bold;
         font-size: 14px;
       }
  
       #subnav {
         background: white;
         position: absolute;
         min-width: 250px;
         height: auto;
         display: none;
         top: 58px;
         right: 16px;
         background: white;
         border: 1px solid #ccc;
         border-radius: 2px;
         box-shadow: 0 0 2px #ddd;
         padding: 0;
         padding-bottom: 8px;
         box-shadow: 0 2px 5px #ddd;
         z-index: 10000;
       }
  
       #sub-arrow-up {
         position: absolute;
         top: -9px;
         right: 52px;
         width: 16px;
         height: 9px;
         background: url('https://ghosttogether.net/static/arrow-up.png') no-repeat;
         z-index: 10001;
       }
  
       .spacer { padding: 0 !important; height: 0px !important }
       .spacer8 { padding: 0 !important; height: 8px !important }
       .spacer16 { padding: 0 !important; height: 16px !important }
       .spacer28 { padding: 0 !important; height: 28px !important }
       .nspacer { padding: 0 !important; height: 8px !important }
  
       #subnav * {
         padding: 8px 15px;
         font-weight: normal !important;
       }
  
       #themebox {
         position: absolute;
         top: 5px;
         right: 5px;
         width: 26px;
         height: 26px;
         border: 1px solid gray;
         padding: 0;
       }
  
       #icon-darkmode {
         position: relative;
         display: block;
         overflow: hidden;
         width: 26px;
         height: 26px;
         background: transparent;
         margin-top: -4px;
         cursor: pointer;
         display:none;
       }
       #icon-sun {
          transition: 0.4s;
          position: absolute;
          top: 0px;
          left: 0px;
          width: 28px;
          height: 28px;
          background: url('https://ghosttogether.net/static/sunicon2.png') no-repeat;
          background-size: 25px 25px !important;
          background-position: center center !important;
       }
  
       #icon-moon {
         transition: 0.4s;
         position: absolute;
         top: 2px;
         left: 2px;
         width: 48px;
         height: 48px;
         background-size: 28px 28px !important;
         background: url('https://ghosttogether.net/static/moonicon2.png') no-repeat;
        }
  
       #icon-sun.hidden { top: 72px; transform: rotate(180deg) }
       #icon-moon.hidden { top: -72px; transform: rotate(180deg) }
  
       .current i {
         content: "" !important;
         position: absolute !important;
         background: transparent !important;
         height: 10px !important;
         width: inheritv;
         padding-bottom: 28px !important;
         border-bottom: 2px solid blue !important;
       }
  
       .pl0 { padding-left: 0 !important }
       .pb0 { padding-bottom: 0 !important }
       .pr0 { padding-right: 0 !important }
       .pr1 { padding-right: 2px !important }
  
       .microaction {
          width: 32px;
          height: 32px;
          opacity: 0.50;
          margin-top: -2px;
          margin-left: 5px;      
       }
  
       .on .microaction.retweet {
         opacity: 0.8;
       }
  
       .microaction:hover {
        opacity: 1;
       }
       
       .lock    { border-radius: 32px !important; background: url('https://ghosttogether.net/static/private-lock.png') center center no-repeat }
       .love    {
         border-radius: 32px !important;
         opacity: 0.5 !important;
         background: var(--love);
         width: 17px;
         margin-left: 14px;
       }
       
       .views   { border-radius: 32px !important;
                  background: var(--views-icon);
                  margin-top: 1px;
                  width: 22px;
                  margin-left: 15px;
                  
                  /* transform: scale(1.1); */
                  /*opacity: 1 !important;*/ }
       
       .retweet {
          /*background: var(--retweet-button);*/
          background: url(https://ghosttogether.net/static/thinretweet.svg) no-repeat;
          background-size: 95% !important;
          background-position: 0 2px;
          opacity: 1;
        }
  
       .comment { border-radius: 32px !important; background: url('https://ghosttogether.net/static/comment.png') center center no-repeat }
       .code-comment { color: #00bcba !important }
  
       .love.on {
           opacity: 1 !important;
           background: url('https://ghosttogether.net/static/loveshaded.png') center center no-repeat
       }
  
       .lock.on {
           opacity: 1;
           background: url('https://ghosttogether.net/static/private-lock-on.png') center center no-repeat
       }
  
       .number {
        margin-left: 10px;
        margin-right: 30px;
        opacity: 0.50;
       }
  
  
  
       .tweet {
         width: 100%;
         /*padding-bottom: 4px;*/
         /* background: var(--bg-2); */
       }
  
       .tweet:hover {
          background-color: var(--bg-hl-subtle);
        }
        .job-listing {
          cursor: pointer;
        }
        .job-listing:hover {
          background-color: var(--bg-hl-subtle);
        }
  
  
  
       .build_num {
         position: absolute;
         top: 20px;
         left: 40px;
         color: #777;
         font-size: 11px;
         font-family: verdana;
       }
  
       .fw { /* full width */
         width: 100%;
       }
  
       .fh { /* full height */
         height: 100%;
       }
  
       #depleter-container {
         display: none;
         position: absolute;
         top: -20px;
         right: 148px;
         width: 50px;
         height: 2px;
  
       }
  
       #depleter {
         display: block;
         position: absolute;
         top: 0;
         left: 0;
         width: 0px;
         height: 2px;
  
       }
  
       #depleter-value {
         display: block;
         position: relative;
         font-size: 25px;
         font-family: verdana;
  
       }
  
       #tweet-info {
         font-size: 13px;
       }
  
       #tweet-info a {
         color: gray;
         font-weight: bold;
         text-decoration: none;
       }
  
       #airplane {
         position: absolute;
         top: -76px;
         left: -76px;
         width: 190px;
         height: 190px;
         background: url('https://ghosttogether.net/static/feather.png') 8px 8px no-repeat;
         animation-duration: 0.5s;
         animation-direction: normal;
       }
  
       #stripe {
         position: fixed;
         bottom: 32px;
         right: 32px;
         width: 64px;
         height: 64px;
         border-radius: 14%;
         background: var(--theme-bg);
         overflow: hidden;
         transform: scale(1.2);
         /*box-shadow: 0 0 14px #eee;*/
         z-index: 10000000000;
       }
  
       @keyframes flown {
         from { top: -70px; left: -70px }
         to { top: -102px; left: -6px }
       }
  
       #loading {
        margin-bottom:-1px;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: #0084ff;
        z-index: 10000;
        animation-fill-mode: forwards;
        animation: normal 60s cubic-bezier(0, 0.91, 1, 1);
      }
  
       .loading60sec {
         animation-name: loading60sec !important;
       }
  
       @keyframes loading60sec {
          from { width: 0 }
          to { width: 100% }
       }
  
       .text {
         font-size: 20px;
       }
  
       .text h2 {
        margin: 0
       }
  
       .inline-button {
         border: 1px solid silver;
         border-radius: 3px;
         padding: 5px;
         cursor: pointer;
       }
  
       .inline-button:hover {
         border: 1px solid gray;
       }
  
       a { color: var(--theme-bg) }
  
       #bundle_selector {
        width: 100%;
        height: 300px;
        border: 1px solid silver;
       }
  
       .book1_container {
        width: 33.33%;
        border: 1px solid silver;
       }
  
       article {
        position: relative;
       }
  
       article h1 {
        font-size: 40px;
        line-height: 86px;
        margin: 0;
        /*margin: 0;*/
       }
  
       article p,
       article ul,
       article li {
        font-size: 20px;
       }
  
       article pre {
        overflow-x: scroll;
        font-family: monospace;
        font-size: 14px;
       }
  
       article p {
        line-height: 25px;
       }
  
       article img {
        display: block;
        margin: auto;
        margin-top: 32px;
        margin-bottom: 32px;
       }
  
       pre {
  
       }
  
       pre {
        border: 1px solid #e2e2e2;
        padding: 8px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  
        margin-left: -13px;
        border-left: 2px solid blue;
  
  
       }
  
       pre.console {
         background: #efefef;
         color: #777;
         margin-left: -13px;
         border-left: 2px solid #ccc !important
       }
  
       pre.output,
       pre.result {
         background: #111111;
         color: #ccc;
         margin-left: -13px;
         border-left: 2px solid #ccc !important;
         font-size: 16px;
       }
  
       pre.dark * {
        color: #ccc !important;
       }
       pre.dark {
        background: #111111;
        color: #ccc !important;
        margin-left: -13px;
        border-left: 2px solid #9b00ff !important;
        font-size: 15px !important;
       }
  
       #sidebar * {
          border:0 !important
       }
  
       .subimg {
        font-family: verdana !Important;
        position: absolute;
        background: white;
       }
  
  
       .subimg p {
        font-size: 17px !Important;
        line-height: 20px !Important;
       }
  
       .brown {
         /* font-style: italic;
          color: brown; */
       }
  
       .subimg img {
        display: inline-block !Important;
        vertical-align: middle !Important;
        margin: 0 !Important;
        width: unset !important;
       }
  
       .secondary {
        color: gray;
        text-decoration: none;
       }
  
       .qmark {
        vertical-align: middle;
        margin-top: -4px;
        width: unset !important;
       }
  
       .responsive-breaker1 {
           display: unset;
       }
  
       #special-image-1 {
          position: relative;
          display: block;
          width: 700px;
          height: 346px;
          margin: auto;
       }
  
       #charts {
        display: flex;
        flex-direction: row;
        justify-content:stretch;
        align-items: flex-end;
        width: 100%;
        height: 110px;
        border: 1px solid #cccccc;
        background: url(https://ghosttogether.net/static/statsgrid.png)
       }
  
       .bar {
        width: 100%;
        margin: 1px;
        margin-left: 5px;
        margin-right: 5px;
        height: 40px;
        background: #007fff;
        position: relative;
       }
  
       .spot-container {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        border: 1px solid red;
       }
  
       .spot {
        display: block;
        position: relative;
        width: 20px;
        height: 20px;
        background: #007fff;
        border: 3px solid white;
        border-radius: 50%;
        margin: auto;
        margin-top: -10px;
        cursor: pointer;
       }
  
       .num {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        font-size: 20px;
        color: gray;
        margin-top: -30px;
        margin-left: -10px;
        font-weight: bold;
       }
  
       #special-image-1 {
  
       }
  
       .sidebar_devlink a {
        color: gray;
        text-decoration: none;
       }
  
       #edit-article-pencil {
        margin: 5px;
        width: 14px !important;
        height: 14px !important;
        display: inline-block !important;
        vertical-align: middle;
       }
  
       .inline {
        display: inline;
        padding-left: 5px;
        padding-right: 5px;
       }
  
       .grayed-out {
        color: silver;
       }
  
        /* -- notifications --*/
  
        .call-to-action {
         padding-left: 16px;
         border-left: 2px solid gray;
        }
  
        .pinned {
         position: absolute;
         top: -36px;
         left: -40px;
         width: 64px;
         height: 64px;
         background: url('https://ghosttogether.net/static/pin.png') no-repeat;
        }
        .pinned-msg {
         position: relative;
         font-size: 17px;
        }
        .tweet-sep-bottom {
          /* border-bottom: 1px solid var(--bg-444); */
        }
  
        .user-avatar {
         width: 64px !important;
         height: 64px !important;
         border-radius: 50%;
         display: inline-block;
         position: relative;
         margin-right: 10px;
        }
        .xoffset {
         margin-left: -16px;
        }
        .overflowx {
         display: flex;
         overflow-x: scroll;
        } 
  
        .bb { border-bottom: 1px solid #dfdfdf }
        .bp-0 { padding-bottom: 0 }
  
            .call-to-action {
       padding-left: 16px;
       border-left: 2px solid gray;
      }
  
  
      .pinned {
        position: absolute;
        top: -36px;
        left: -40px;
        width: 64px;
        height: 64px;
        background: url('https://ghosttogether.net/static/pin.png') no-repeat;
      }
      .pinned-msg {
        position: relative;
        font-size: 17px;
      }
      .tweet-sep-bottom {
        /* border-bottom: 1px solid var(--bg-444); */
      }
  
      .back-button {
        width: 64px;
        height: 64px;
        cursor: pointer;
      }
      .nav-title {
        font-size: 18px;
        height: 70px;
        font-weight: 600 !important;
        /*font-weight: bold;*/
      }
      .iphone .nav-title {
        height: 60px;
      }
  
  
     .not-more {
       display: flex;
       font-size: 18px;
       font-weight: bold;
       width: 64px; height: 64px;
       background: #efefef;
       cursor: pointer;
     }
  
     #home { background: transparent url('https://ghosttogether.net/static/icon-home.png') center center no-repeat; }
     
     #dash { background: transparent url('https://ghosttogether.net/static/icon-dash.png') center center no-repeat; }
     #bell { background: transparent url('https://ghosttogether.net/static/icon-bell.png') center center no-repeat; }
     #speaker { background: transparent url('https://ghosttogether.net/static/icon-speaker.png') center center no-repeat; }
     
     #chat { background: transparent url('https://ghosttogether.net/static/icon-chat.png') center center no-repeat; }
     #skrepka { background: transparent url('https://ghosttogether.net/static/icon-skrepka.png') center center no-repeat; }
     #binoculars { background: transparent url('https://ghosttogether.net/static/icon-binoculars.png') center center no-repeat; }
     #brush { background: transparent url('https://ghosttogether.net/static/icon-brush.png') center center no-repeat; }
     #user { background: transparent url('https://ghosttogether.net/static/icon-user.png') center center no-repeat; }
     
     body.darkmode #setting {
      background: var(--settings-ic);
      transform: rotate(0deg) scale(1.20);
      transition: 0.3s;
     }
     body.darkmode #setting:hover {
      transform: rotate(-30deg) scale(1.20) }
  
     body #setting {
      background: var(--settings-ic);
      transform: rotate(0deg) scale(1.20);
      transition: 0.3s;
     }
     body #setting:hover {
      transform: rotate(-90deg) scale(1.20) }
     
  
     #dash { background: transparent url('https://ghosttogether.net/static/icon-dash.png') center center no-repeat; }
  
     .alert {
      position: absolute;
      top: 0;
      right: 0;
      width: 25px;
      height: 25px;
      background: #37b2ff;
      border-radius: 50%;
      border: 2px solid transparent;
      font-size: 14px;
      color: white;
     }
  
     .icon-button {
      position: relative;
      display: block;
      width: 46px;
      height: 46px;
      margin-left: 2px;
      margin-top: 10px;
      background-color: transparent;
      cursor: pointer;
     }
     .icon-button:hover {
      content: '';
      background-color: #ddd;
      border-radius: 50%;
     }
  
     #view { min-width: 800px;
      /* margin-top: 32px; -- older version -- early */
      /* margin-top: 16px; -- older version 2-28-2021 */
      margin-top: 8px;
    }
  
      /* overlay UI */
      i#o, i#x, i#m, i#n { font-style: normal !important; }
      i#w, i#z, i#j, i#e { font-style: normal !important; }
      
      i#o, i#x, #w, #j { z-index: 100000000;
          display: none;
          position: fixed; top: 0; left: 0;
          width: 100%; height: 100%;
          justify-content: center;
          /* align-items: center; */
          background: rgba(0, 0, 0, 0.4);
      }
      
      i#o { z-index: 100000001 }
      i#x { z-index: 100000002 }
      i#w { z-index: 100000003 }
      i#z { z-index: 100000004 }
  
      i#o {
        transition: 0.7s !important;
        opacity: 1 !important;
      }
  
      i#x * { transition: unset !important }
      i#w * { transition: unset !important }
      i#z * { transition: unset !important }
  
      i#z {
        background: white;
        border-radius: 18px;
      }
  
      /* message */
      i#m,
      i#n,
      i#j,
      i#e { border-radius: 16px;  }
      
      i#m,
      i#n,
      i#j,
      i#e {
        width: auto;
        min-height: 250px;
      }
      i#m,
      i#n {
        background: var(--bg);
      }
  
      
      /*
        background: var(--bg);
      */
      
      i#m.tall { height: unset !important; max-height: 700px !important; }
      i#j.tall { height: unset !important; max-height: 700px !important; }
      .ui-header { border-bottom: 1px solid #ddd; }
      
      #o #header, #x #header { height: 48px; border-bottom: 1px solid silver; }
      #o #footer, #o #header { height: 48px; border-top: 1px solid silver; }
      
      #w #header, #z #header { height: 48px; border-bottom: 1px solid silver; }
      #w #footer, #w #header { height: 48px; border-top: 1px solid silver; }
  
      #close { cursor: pointer;
        /*width: 64px;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        */
      }
      #close span {font-family: Arial;}
  
      #letter,
      #letter-main,
      #letter-comment
      { border: none;
        /*font-size: 17px;*/
        /*font-size: 19px;*/
        font-size: 16px; /* 6-30-2023 */
        font-size: 19px; /* 22-11-2023 */
        font-size: 17px; /* 20-07-2024 */
        font-weight: 500;
        padding: 10px;
        width: 480px;
        height: auto; }
  
      #letter-subcomment {
        /*font-size: 17px;*/
        font-size: 19px;
        border-width: 1px !important;
        height: 45px;
        margin-top: -2px;
        /* border-radius: 25px; */
        border: 1px solid var(--bg-444);
        border-color: var(--bg-444) !important;
        transition: unset;
        padding-left: 19px;
        padding-top: 5px;
        resize: none;
      }
      #letter-subcomment:focus {
        border: 1px solid var(--bg-555);
        border-color: var(--bg-555) !important;
      }
      #letter-subcomment:active {
        
      }
  
      #close span {
        font-size: 40px;
        /*width: 50px;*/
        /*height: 50px;*/
        /*background: var(--goback);*/
        /*background-size: 61%;*/
        transform: rotate(45deg);
      }
  
      #postbutton {
        font-style: normal !important;
        background: black;
        color: white;
        text-align: center;
        font-size: 20px;
        border: 1px solid #eee;
        width: 90px;
        display: inline-block;
        padding: 5px 15px;
      }
  
      #post-button,
      #post-button-jobpost,
      #post-button-note,
      #post-button-main  {
        margin-top: 5px; margin-right: 5px;
        position: relative;
        padding: 0;
        width: 70px;
        height: 70px;
        overflow: hidden;
        background: var(--theme-bg);
        border-radius: 14%;
        transition: 400ms;
      }
  
      .header-box { 
        width: 48px;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3px !important;
      }

  
      .header-box span {
        /*margin-left: 5px;
        margin-top: 27px;*/
      }
  
      #ui-header {
       display: flex;
       /*width: 500px;*/
       height: 50px;
      }
      .ui-button {
       display: flex;
       padding: 8px;
       /*font-size: 22px;*/
       font-size: 19px;
       font-weight: bold;
       border-radius: 50px;
       /* background: #007fff; */
       background: var(--theme-bg);     
       font-style: normal;
       color: var(--highest-contrast-text-color);
       cursor: pointer;
      }
      .ui-text {
        font-size: 17px;
        font-style: normal;
      }
  
      #navigation-bar {
        background-color: var(--bg);
        border-bottom: 1px solid var(--line-border-0);
        display: block;
        z-index: 10000000000;
        height: 64px !important;
        min-height: 64px;
        padding-top: 4px;
      }
  
      #navigation { padding-left: 28px; }
  
      
      .tweet:hover .tweet-opts {
        background: #fff !important;
      }
  
      .board-opts,
      .tweet-opts {
        display: none;
        position: absolute;
        top: 6px;
        right: 6px;
        height: auto;
        background: #fff !important;
        z-index: 100000000000;
        cursor: pointer;
        border: 2px solid #ddd;
        border-radius: 8px;
      }
  
      .board-opts div,
      .tweet-opts div {
        padding: 3px;
        font-size: 18px;
        font-weight: 500;
        line-height: 30px;
        padding-right: 11px;
      }
  
      /* special style for post a tweet UI */
      #o.tweet {
       align-items: flex-start;
      }
      #o.tweet #m {
       margin-top: 50px
      }
  
      #airplane {
       position: absolute;
       top: -70px;
       left: -70px;
       width: 190px;
       height: 190px;
       background: url('https://www.semicolon.dev/static/feather.png') 8px 8px no-repeat;
       animation-duration: 0.5s;
       animation-direction: normal;
     }
  
     .depleter-container {
      display:none
     }
  .progress-circle{
    transform:scale(0.5);
    font-size:20px;
    margin:20px;
    position:relative;
    padding:0;
    width:5em;
    height:5em;
    background-color:transparent !important;
    border-radius:50%;line-height:5em}
  .progress-circle:after{
    border:none;
    position:absolute;
    top:.35em;
    left:.35em;
    text-align:center;
    display:block;
    border-radius:50%;
    width:4.3em;
    height:4.3em;
    /*background-color:#fff;*/
    content:" "}
  .progress-circle span{position:absolute;line-height:5em;width:5em;text-align:center;display:block;color:#53777a;z-index:2}
  .left-half-clipper{border-radius:50%;width:5em;height:5em;position:absolute;clip:rect(0,5em,5em,2.5em)}
  .progress-circle.over50 .left-half-clipper{clip:rect(auto,auto,auto,auto)}
  .value-bar{position:absolute;clip:rect(0,2.5em,5em,0);width:5em;height:5em;border-radius:50%;border:.45em solid #b1b1b1;box-sizing:border-box}
  .progress-circle.over50 .first50-bar{position:absolute;clip:rect(0,5em,5em,2.5em);background-color:#b1b1b1;border-radius:50%;width:5em;height:5em}
  .progress-circle:not(.over50) .first50-bar{display:none}.progress-circle.p0 .value-bar{display:none}.progress-circle.p1 .value-bar{transform:rotate(4deg)}.progress-circle.p2 .value-bar{transform:rotate(7deg)}.progress-circle.p3 .value-bar{transform:rotate(11deg)}.progress-circle.p4 .value-bar{transform:rotate(14deg)}.progress-circle.p5 .value-bar{transform:rotate(18deg)}.progress-circle.p6 .value-bar{transform:rotate(22deg)}.progress-circle.p7 .value-bar{transform:rotate(25deg)}.progress-circle.p8 .value-bar{transform:rotate(29deg)}.progress-circle.p9 .value-bar{transform:rotate(32deg)}.progress-circle.p10 .value-bar{transform:rotate(36deg)}.progress-circle.p11 .value-bar{transform:rotate(40deg)}.progress-circle.p12 .value-bar{transform:rotate(43deg)}.progress-circle.p13 .value-bar{transform:rotate(47deg)}.progress-circle.p14 .value-bar{transform:rotate(50deg)}.progress-circle.p15 .value-bar{transform:rotate(54deg)}.progress-circle.p16 .value-bar{transform:rotate(58deg)}.progress-circle.p17 .value-bar{transform:rotate(61deg)}.progress-circle.p18 .value-bar{transform:rotate(65deg)}.progress-circle.p19 .value-bar{transform:rotate(68deg)}.progress-circle.p20 .value-bar{transform:rotate(72deg)}.progress-circle.p21 .value-bar{transform:rotate(76deg)}.progress-circle.p22 .value-bar{transform:rotate(79deg)}.progress-circle.p23 .value-bar{transform:rotate(83deg)}.progress-circle.p24 .value-bar{transform:rotate(86deg)}.progress-circle.p25 .value-bar{transform:rotate(90deg)}.progress-circle.p26 .value-bar{transform:rotate(94deg)}.progress-circle.p27 .value-bar{transform:rotate(97deg)}.progress-circle.p28 .value-bar{transform:rotate(101deg)}.progress-circle.p29 .value-bar{transform:rotate(104deg)}.progress-circle.p30 .value-bar{transform:rotate(108deg)}.progress-circle.p31 .value-bar{transform:rotate(112deg)}.progress-circle.p32 .value-bar{transform:rotate(115deg)}.progress-circle.p33 .value-bar{transform:rotate(119deg)}.progress-circle.p34 .value-bar{transform:rotate(122deg)}.progress-circle.p35 .value-bar{transform:rotate(126deg)}.progress-circle.p36 .value-bar{transform:rotate(130deg)}.progress-circle.p37 .value-bar{transform:rotate(133deg)}.progress-circle.p38 .value-bar{transform:rotate(137deg)}.progress-circle.p39 .value-bar{transform:rotate(140deg)}.progress-circle.p40 .value-bar{transform:rotate(144deg)}.progress-circle.p41 .value-bar{transform:rotate(148deg)}.progress-circle.p42 .value-bar{transform:rotate(151deg)}.progress-circle.p43 .value-bar{transform:rotate(155deg)}.progress-circle.p44 .value-bar{transform:rotate(158deg)}.progress-circle.p45 .value-bar{transform:rotate(162deg)}.progress-circle.p46 .value-bar{transform:rotate(166deg)}.progress-circle.p47 .value-bar{transform:rotate(169deg)}.progress-circle.p48 .value-bar{transform:rotate(173deg)}.progress-circle.p49 .value-bar{transform:rotate(176deg)}.progress-circle.p50 .value-bar{transform:rotate(180deg)}.progress-circle.p51 .value-bar{transform:rotate(184deg)}.progress-circle.p52 .value-bar{transform:rotate(187deg)}.progress-circle.p53 .value-bar{transform:rotate(191deg)}.progress-circle.p54 .value-bar{transform:rotate(194deg)}.progress-circle.p55 .value-bar{transform:rotate(198deg)}.progress-circle.p56 .value-bar{transform:rotate(202deg)}.progress-circle.p57 .value-bar{transform:rotate(205deg)}.progress-circle.p58 .value-bar{transform:rotate(209deg)}.progress-circle.p59 .value-bar{transform:rotate(212deg)}.progress-circle.p60 .value-bar{transform:rotate(216deg)}.progress-circle.p61 .value-bar{transform:rotate(220deg)}.progress-circle.p62 .value-bar{transform:rotate(223deg)}.progress-circle.p63 .value-bar{transform:rotate(227deg)}.progress-circle.p64 .value-bar{transform:rotate(230deg)}.progress-circle.p65 .value-bar{transform:rotate(234deg)}.progress-circle.p66 .value-bar{transform:rotate(238deg)}.progress-circle.p67 .value-bar{transform:rotate(241deg)}.progress-circle.p68 .value-bar{transform:rotate(245deg)}.progress-circle.p69 .value-bar{transform:rotate(248deg)}.progress-circle.p70 .value-bar{transform:rotate(252deg)}.progress-circle.p71 .value-bar{transform:rotate(256deg)}.progress-circle.p72 .value-bar{transform:rotate(259deg)}.progress-circle.p73 .value-bar{transform:rotate(263deg)}.progress-circle.p74 .value-bar{transform:rotate(266deg)}.progress-circle.p75 .value-bar{transform:rotate(270deg)}.progress-circle.p76 .value-bar{transform:rotate(274deg)}.progress-circle.p77 .value-bar{transform:rotate(277deg)}.progress-circle.p78 .value-bar{transform:rotate(281deg)}.progress-circle.p79 .value-bar{transform:rotate(284deg)}.progress-circle.p80 .value-bar{transform:rotate(288deg)}.progress-circle.p81 .value-bar{transform:rotate(292deg)}.progress-circle.p82 .value-bar{transform:rotate(295deg)}.progress-circle.p83 .value-bar{transform:rotate(299deg)}.progress-circle.p84 .value-bar{transform:rotate(302deg)}.progress-circle.p85 .value-bar{transform:rotate(306deg)}.progress-circle.p86 .value-bar{transform:rotate(310deg)}.progress-circle.p87 .value-bar{transform:rotate(313deg)}.progress-circle.p88 .value-bar{transform:rotate(317deg)}.progress-circle.p89 .value-bar{transform:rotate(320deg)}.progress-circle.p90 .value-bar{transform:rotate(324deg)}.progress-circle.p91 .value-bar{transform:rotate(328deg)}.progress-circle.p92 .value-bar{transform:rotate(331deg)}.progress-circle.p93 .value-bar{transform:rotate(335deg)}.progress-circle.p94 .value-bar{transform:rotate(338deg)}.progress-circle.p95 .value-bar{transform:rotate(342deg)}.progress-circle.p96 .value-bar{transform:rotate(346deg)}.progress-circle.p97 .value-bar{transform:rotate(349deg)}.progress-circle.p98 .value-bar{transform:rotate(353deg)}.progress-circle.p99 .value-bar{transform:rotate(356deg)}.progress-circle.p100 .value-bar{transform:rotate(360deg)}
  
  .tweet-submenu {
    position: absolute;
    top: 10px;
    right: 11px;
    width: 96px;
    height: auto;
    border: 1px solid silver;
    background: white;
    z-index: 10000 !important;
    box-shadow: 0 0 5px #ddd;
    display: none;
    animation-duration: 0.7s;
    animation-direction: normal;
    animation-name: bounceIn;
   }
  
   .tweet-submenu div {
    padding: 7px;
    font-size: 14px;
    cursor: pointer;
    color: #777;
   }
   .tweet-submenu a {
    text-decoration: none;
   }
   .tweet-submenu div:hover {
    background: #635bff !important;
    color: white;
   }
  
   textarea#article {
      border: 1px solid #dadada;
      width: 100%;
      min-height: 730px;
      font-size: 20px;
      padding: 16px;
      /* updates jan 17 2024*/
      padding-left: 20px;
      border: 1px solid var(--hl-faint-lines) !important;
      background: white;
      color: gray;
      border-radius: 10px;
      border: 0;
      padding: 40px;
      overflow-y: overlay;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      margin: 18px;
      width: calc(100% - 38px);
   }
  
   #view {
     /*padding: 20px; padding-left: 40px; padding-right: 40px;*/
     /*background: white;*/
   }
  
  #view.article ul,
  #view.article li,
  #view.article b,
  #view.article i,
  #subroot.article p,
  #view.article p {
    font-size: 21.5px;
    /* font-family: kievit; */
    line-height: 30px;
    /* font-family: KievitBook;*/
    font-size: 22px;
    letter-spacing: 0.05px;
  }
  
  #view.article code,
  #view.article pre {
    font-size: 18px !important;
    line-height: 25px;
  }
  
  #view.article code span,
  #view.article pre span {
      font-size: 18px;
  }
  
  #view.article h1 {
    /* font-family: 'Libre Franklin', sans-serif; */
    margin-bottom: 16px;
    font-size: 33px;
    margin-left: -3px;
    margin-top: 16px;
    margin-bottom: -10px !important;
  }
  #view.article h1,
  #view.article h2,
  #view.article h3,
  #view.article h4 {
      margin-bottom: 24px
  }
  
   #view pre, #view pre * { font-family: "Lucida Console", Monaco, monospace; font-size: 18px; color: #777 }
   #view pre .com { color: #a0bdc5; font-family: cursive; }
   #view img { display: block; margin: auto; }
  
   #header-intro { margin-left: -16px; border-left: 2px solid #ddd; padding-left: 16px; display: block; }
   #header-intro * { color: #777; font-size: 25px !important; line-height: 32px; }
  
  input:disabled {
  
  }
  
  #ver-sent {
    display: none;
  }
  
  
  nav { height: 24px }
  nav div {
    /*padding: 2px 8px;*/
    font-weight: bold;
    cursor: pointer;
  }
  
  .logo-image {
    cursor: pointer;
  }
  
  label {
    cursor: pointer;
  }
  
  footer div {
    padding: 16px;
  }
  
  .msg-login {
    min-height: 355px !important;
    max-width: 500px !important;
  }
  
  .tweet-opts {
    display:none;
  }
  
  
  
  #loginButton.disabled {
    background: var(--disabled-button-background) !important;
    border: var(--disabled-button-border) !important;
    color: var(--disabled-button-color) !important;
  }
  
  #registerButton.disabled {
    background: var(--disabled-button-background) !important;
    border: var(--disabled-button-border) !important;
    color: var(--disabled-button-color) !important;
  }
  
  #rocket.disabled {
    background: #000000 !important;
  }
  
  .trash-dot {
    position: absolute;
    display: block;
    top: -10px;
    left: 15px;
    width: 10px;
    height: 10px;
    background: gray;
    border-radius: 50%;
    transition: 0.6s;
  }
  
  .trash-dot.fall {
    top: 100px !important;
  }
  
  .filled {
    background: #37b2ff;
    color: white;
  }
  
  .trans-button {
    padding: 5px 10px;
    border: 2px solid #aaa;
    border-radius: 10px;
  }
  
  .pressed {
    background: #aaa;
    border-color: #aaa !important;
    color: white;
    font-weight: bold;
  }
  
  .dash-text {
    font-size: 16px;
  }
  
  .norm {
    font-size: 15px;
    font-weight: normal !important;
  }
  
  @keyframes HeartBeat {
    0% { transform: scale(1) }
    25% { transform: scale(1.25) }
    50% { transform: scale(0.75) }
    75% { transform: scale(1.25) }
    100% { transform: scale(1) }
  }
  
  @keyframes ReverseHeartBeat {
    0% { transform: scale(1) }
    25% { transform: scale(0.75) }
    50% { transform: scale(1.25) }
    75% { transform: scale(0.75) }
    100% { transform: scale(1) }
  }
  
  .heartbeat {
    animation-name: HeartBeat;
    animation-fill-mode: forwards;
    animation: normal 400ms ease-in;
  }
  
  .reverse-heartbeat {
    animation-name: ReverseHeartBeat;
    animation-fill-mode: forwards;
    animation: normal 400ms ease-in;
  }
  
  .highlighted .love {
    background: var(--love);
    opacity: 1 !important;
    border-radius: 32px !important;
  }
  .highlighted .lock { background: url('https://ghosttogether.net/static/private-lock.png') center center no-repeat !important; border-radius: 32px !important; }
  
  .on .love {
      transform: scale(1);
      opacity: 1 !important;
      /*background: var(--love-shaded)*/
  }
  
  .on .lock {
      transform: scale(1);
      background: url('https://ghosttogether.net/static/private-lock-on.png') center center no-repeat !important;
  }
  
  .retweet { transition: 0.25s }
  
  .highlighted .retweet {
      /*background: var(--retweet-button);*/
      border-radius: 32px !important;
  }
  
  .on .retweet { transform: rotate(90deg);
    /*background: var(--retweet-shaded); */
  }
  
  .on .retweet *, .highlighted .retweet * {
      color: green !important;
  }
  
  
  /* tweet */
  
  .likeable { /* digit container */
      overflow: hidden;
      height: 24px;
      display: inline-block;
      position: relative;
      /*min-width: 52px;*/
      min-width: 39px;
      text-align: right;
      margin-right: -7px;
  }
  
  body.iPhone .likeable {
    margin-right: -30px;
    margin-top: -25px;
  }
  
  .roll {
      transition: 400ms
  }
  
  .disable-transition {
      transition: 0ms !important;
  }
  
  .roll-start {
      top: -24px;
  }
  
  .roll-up {
      top: -48px;
  }
  
  .roll-down {
      top: 0px;
  }
  
  .roll {
      min-width: auto;/*52px;*/
      height: 72px;
  }
  
  .roll-section {
      display: flex;
      flex-direction: row-reverse;
      min-width: auto;/*52px;*/
      height: 24px;
  }
  
  .animate { max-width: 10px; transition: 0.4s }
  
  .digit { font-family: arial !important; font-weight: normal; border: 0 !important }
  
  /* animation offsets */
  .offset-0 { margin-top: 4px }
  .offset-1 { margin-top: -14px }
  .offset-2 { margin-top: -32px }
  .offset-3 { margin-top: -50px }
  .offset-4 { margin-top: -68px }
  .offset-5 { margin-top: -86px }
  .offset-6 { margin-top: -104px }
  .offset-7 { margin-top: -122px }
  .offset-8 { margin-top: -140px }
  .offset-9 { margin-top: -158px }
  .offset-10 { margin-top: -176px }
  .offset-11 { margin-top: -170px }
  .offset-12 { margin-top: -288px }
  .offset-13 { margin-top: -212px } /* dot */
  .offset-14 { margin-top: -270px } /* space */
  
  .likeable-icon img { margin-right: 3px; transform: scale(0.80) }
  
  .mini-text {
    height: 20px;
  }
  
  .mini-icon {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    background-position: center center;
  }
  
  .mini-icon.ty {
    background: url('https://ghosttogether.net/static/TY.svg') no-repeat;
    background-position: 0px -3px;
    transform: scale(0.85);
  }
  
  .mini-icon.edit {
    background: url('https://ghosttogether.net/static/mini-icon-edit.png') no-repeat;
    background-position: 0px -3px;
    transform: scale(0.85);
  }
  
  .mini-icon.demote {
    background: url(https://ghosttogether.net/static/demote.png) no-repeat;
    background-size: 128%;
    background-position: -5px -6px;
  }
  
  .mini-icon.validate {
    background: url(https://ghosttogether.net/static/validate.png) no-repeat;
    transform: scale(0.78);
    margin-top: -2px;
    margin-left: -1px;
    margin-right: 0px;
    opacity: 1;
  }
  
  .mini-icon.agree {
    background: url(https://ghosttogether.net/static/agreeup.png) no-repeat;
    background-position: 6px 6px;
    transform: scale(1);
    margin-top: -2px;
    margin-left: -1px;
    margin-right: 0px;
    opacity: 0.8;  
  }
  
  .mini-icon.comment {
    background: url(https://ghosttogether.net/static/is_reply.png) no-repeat;
    transform: scale(0.78);
    margin-top: -2px;
    margin-left: -1px;
    margin-right: 0px;
    opacity: 0.8;
    background-size: 127%;
    background-position: -4px -4px;
  }
  
  .mini-icon.whisper {
    background: url(https://ghosttogether.net/static/whisperreply.png) no-repeat;
    transform: scale(0.78);
    margin-top: -2px;
    margin-left: -1px;
    margin-right: 0px;
    opacity: 0.8;
    background-size: 127%;
    background-position: -4px -4px;
  }
  
  .mini-icon.reghost {
    background: url(https://ghosttogether.net/static/reghostit.png) no-repeat;
    transform: scale(0.78);
    margin-top: -2px;
    margin-left: -1px;
    margin-right: 0px;
    opacity: 0.8;
    background-size: 127%;
    background-position: -4px -4px;
  }
  
  .mini-icon.audience {
    background: url(https://ghosttogether.net/static/audience.png) no-repeat;
    transform: scale(0.7);
    margin-top: -2px;
    margin-left: -1px;
    margin-right: 0px;
    opacity: 0.8;
    background-size: 127%;
    background-position: -4px -4px;
  }
  
  .mini-icon.clip {
    background: url('https://ghosttogether.net/static/mini-icon-clip.png') no-repeat;
  }
  
  .mini-icon.bookmark {
    background: url('https://ghosttogether.net/static/mini-icon-bookmark.png') no-repeat;
    transform: scale(0.9);
  }
  
  .mini-icon.delete {
    background: url('https://ghosttogether.net/static/mini-icon-delete.png') no-repeat;
    transform: scale(0.85);
  }
  
  .paper-clip {
    position: absolute;
    top: -6px;
    left: 68px;
    width: 40px;
    height: 40px;
    background: url(https://ghosttogether.net/static/pin.png) no-repeat;
    z-index: 10000000000000000 !important;
  }
  
  .paper-clip div {
    font-size: 13px;
    /*font-family: verdana;*/
    /*font-weight: bold;*/
    color: gray;
    position: absolute;
    top: 8px;
    left: 42px;
    width: 150px;
  }
  
  .clipped {
    border-bottom: 10px solid var(--bg-hl);
  }
  
  #upper-header.expand {
    height: 300px;
    border-bottom: var(--line-border-1);
  }
  
  .extras-title {
    padding: 13px 16px;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #eeeeee;
  }
  
  .who_to_follow {
    border-top: 10px solid #f9f9f9;
    border-bottom: 10px solid #f9f9f9;
  }
  
  .avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
  }
  
  .icon-button {
    transform: scale(0.85);
  }
  
  #icon-darkmode {
    /*display: none*/
  }
  
  .nav-title {
    /*font-size: 20px;
    height: 60px;
    font-weight: bold;*/
   }
  
  .nav-button {
    background: #37b2ff;
    color: white;
    border-radius: 50px;
    padding: 6px;
    padding-left: 13px;
    padding-right: 13px;
    font-size: 18px;
    cursor: pointer;
  }
  
  .nav-sep {
    height: 60px;
    width:1px;
    background: var(--bg-hl-subtle);
  }
  
  .nav-sel {
    height: 60px;
    border-bottom: 2px solid #37b2ff
  }
  
  .ww {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .www {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .de-href {
    text-decoration: none;
    color: unset;
  }
  
  #submenu-button {
    display:none;
  }
  
  #nav-right-side {
    top: 1px !important;
    right: 12px !important;;
  }
  
  .iphone #nav-right-side {
    width: 100%;
    position: absolute;
    top: 4px;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .settings-sidebar {
    min-width: 200px;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .settings-sidebar section {
    background: white;
    font-size: 18px;
    /*padding: 17px 34px;*/
    padding: 8px 11px;
    padding-right: 100px;
    border-bottom: 1px solid #efefef !important;
    transition: none;
  }
  
  .settings-sidebar section:hover {
  
  }
  
  .settings-sidebar .selected {
    border-right: 2px solid blue;
  }
  
  .primary {
    /*margin: 24px;*/
    margin-top: 0;
    background: white;
    height: 60px;
    z-index: 100000000 !important;
    position: sticky; top: 0px;
    border-bottom: 1px solid #eee;
    border-left: 0;
    border-right: 0;
  }
  
  #view.settings {
    padding: 32px;
    padding-right: 45px;
    margin-top: 0;
    margin-left: 0;
  }
  
  .primary.settings {
    margin:0 !important
  }
  
  #settings-profile {
  
  }
  
  #view.settings p {
    font-size: 15px;
  }
  
  .settings-sidebar {
    display: flex !important
  }
  
  .max800 {
    max-width: 800px !important
  }
  
  a.draft-link {
    color: #635bff !important;
  }
  
  a.deleted-link {
    color: gray !important;
  }
  
  .icon-button {
    transition: 0.3s;
  }
  
  .icon-button:hover {
    transform: scale(0.90);
  }
  
  #airplane {
    transition: 0.3s
  }
  
  #airplane:hover {
    /*top: -66px;
    left: -75px;*/
  }
  
  a.covert {
    text-decoration: none;
    color: black;
  }
  
  #icon-darkmode.hidden {
    /*display:none;*/
  }
  
  .loginButton {
      position: absolute;
      top: 32px;
      right: 48px;
      background: transparent;
      color: #999;
      padding: 8px 25px;
      font-size: 18px;
      font-weight: bold;
      border-radius: 8px;
      cursor: pointer;
      border: var(--login-button-border);
  }
  
  
  
  #close span {
    transition: 0.2ms;
  }
  
  #close span.spin {
    transform: rotate(360deg);
  }
  
  .frown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    position: relative;
    transform: rotate(90deg);
  }
  
  .un:hover {
  
  }
  
  
  
  .follow-button {
    padding: 1px 9px !important;
    border-radius: 30px;
    border: 2px solid #37b2ff;
    color: #37b2ff;
    cursor: pointer;
    line-height: 25px;
    width: 119px;
    text-align: center;
    font-size: 19px;
  }
  
  .follow-button:hover,
  .follow-button.filled {
    border: 2px solid #37b2ff;
    background: #37b2ff;
    color: white;
  }
  
  .sm-follow-button {
    width: 88px;
    height: 28px;
    line-height: 24px;
    font-size: 16px;
    border-radius: 32px;
    border: 2px solid var(--theme-bg);
    color: var(--theme-bg);
    cursor: pointer;
    text-align: center;
  }
  
  .follow-button-larger {
    width: 96px !important;
    height: 34px !important;
    line-height: 29px !important;
    font-size: 18px !important;
  }
  
  .timeline-separator {
    height: 10px;
    background: var(--bg-hl);
  }
  
  .sm-follow-button:hover {
    background: var(--theme-bg);
    color: white;
  }
  
  .PLL {
    position: absolute;
    bottom: 0;
    right:0
  }
  
  .max-849 { /* user profile template */
    /*max-width: 849px !important;*/
    max-width: 679px !important;
    min-width: 661px !important;
  }
  
  .max-870 {
    max-width: 870px !important;
  }
  
  .bio-ic {
    opacity: 0.5; vertical-align: middle; margin-left:-4px; margin-top: -3px; width: 17px; height: 17px
  }
  
  #copyright, #copyright * {
    font-size: 14px;
    color: gray;
    text-decoration: none;
  }
  
  .font-14 {
    font-size: 17px;
  }
  
  /* force full height */
  .ffh {
    height: 100% !important;
  }
  
  /* force full width */
  .ffw {
    width: 100% !important;
  }
  
  .fullwidth,
  .full-width {
      width: 100%
  }
  
  .fh,
  .fullheight,
  .full-height {
    height: 100%
  }
  
  .scrollY,
  .scroll-Y,
  .overflowYScroll {
    overflow-y: scroll;
  }
  
  .full-height-dm-32 {
    /*min-height: 100%;*/
      height: calc(100% - 32px);
      /*height: 100%;*/
  }
  
  .full-height-dm-42 {
      height: calc(100% - 42px);
  }
  
  .full-height-dm-64 {
    height: 100%;
    /* height: calc(100% - 64px); */
  }
  
  .clipboard-text {
    border: 1px solid #ccc !important;
    display: inline !important;
    padding: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    background: transparent !important;
  }
  
  .clipboard-text:focus {
    border: 1px solid #bbb !important;
  }
  
  
  
  .tutorial-bar {
    min-width: 319px;
    padding-top: 24px;
    padding-left: 0;
    position: sticky;
    display: block;
    top: 0;
    border-top: 32px solid #eee;
    /* border-left: 24px solid #eee; */
  }
  
  .tutorial-bar figcaption {
    padding: 2px 0px;
    padding-left: 16px;
    font-weight: bold;
    /* background: #333;
    color: white; */
    margin-bottom: 10px;
    margin-top: 4px;
    font-size: 21px;
  }
  
  .tutorial-bar ul {
    padding: 0 !important;
    margin: 0 !important;
    margin-block-start: 0;
    margin-block-end: 0;
  }
  
  .tutorial-bar li {
    padding: 8px;
    padding-left:0;
    margin: 0;
    list-style-type: none;
    font-size: 21px;
    padding-left: 16px;
    /*width: 220px;*/
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden
  }
  
  .tutorial-bar li:hover {
    background: #efefef;
  }
  
  .tutorial-bar li.current {
    background: #66F;
    color: white;
  }
  
  .tutorial-navbar {
    background: #ededed;
    position: sticky;
    z-index: 100000;
    top: 0;
  }
  
  .tutorial-navbar div {
    padding: 7px 30px;
    color: #333;
    cursor: pointer;
  }
  
  .tutorial-navbar div:hover {
    background: #DDD;
  }
  
  .tutorial-bar a {
    text-decoration: none;
    color: #777 !important;
  }
  
  .tutorial-navbar div.selected {
    background: #66F;
    color: white;
  }
  
  /* keywords color */
  
  pre .keyword {
    color: blue !important;
  }
  
  .ic {
    margin-top:-2px !important;
    display: inline !important;
    width: 14px !important;
    height: 14px !important;
    vertical-align: middle;
  }
  
  .ic * {
    font-size: inherit !important
  }
  
  #sidebar section {
    color: #777;
    border-bottom: 1px solid #eee !important;
    border-right: 2px solid #eee !important;
  }
  
  #sidebar section:hover {
      color: #333
  }
  
  #sidebar section {
    /*height: 38px;*/
    border-bottom: 1px solid #aaa;
  }
  
  #sidebar section:hover {
    border-right: 2px solid #ddd !important;
  }
  
  #sidebar section.selected {
    border-right: 2px solid blue !important;
    font-weight: bold;
  }
  
  .book-something-button {
    background: linear-gradient(0deg, #169000, #52b77ae0);
    color: white;
    padding: 5px;
    border-radius: 4px;
    text-decoration: none;
    position: relative;
    display: inline-block;
    margin: auto;
    margin-top: 16px;
    text-align: center;
    width: 100%;
  }
  
  .stealth {
    color: #444;
    text-decoration: none;
  }
  
  .tweet-width {
    /*width: 679px;*/
    /*width: 600px;*/
  }
  
  #loading { display:none }
  
  textarea#letter {
    height: 79px;
    margin: 25px 0px 0px;
    border: 0 !important;
    resize: none;
  }
   
  textarea#letter-comment {
    height: 79px;
    margin: 25px 0px 0px;
    border: 0 !important;
    resize: none;
  }
  
  textarea#letter-main {
    height: 79px;
    margin: 11px 0px 0px;
    border: 0 !important;
    resize: none;
    width: calc(100% - 162px);
    width: -moz-calc(100% - 162px);
    width: -webkit-calc(100% - 162px);
    width: -webkit-calc(100% - 162px);
  }
  
  /* coding */
  .comm { color: #ccc !important }
  .keyw { color: blue !important }
  
  .loading {
    border: 2px solid #f3f3f3;
    border-radius: 50%;
    border-top: 2px solid #777;
    border-bottom: 2px solid #777;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 0.9s linear infinite;
    animation: spin 0.9s linear infinite;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  * {
    -webkit-font-smoothing: antialiased;
  }
  
  /* ui */
  
  i#o.zoom-in, i#m.zoom-in {
    -webkit-animation: ui-zoom-in 0.9s bounce;
    animation: ui-zoom-in 0.9s bounce;
  }
  
  @-webkit-keyframes ui-zoom-in {
    0% { transform: scale(1) }
    100% { transform: scale(1.1) }
  }
  
  @keyframes ui-zoom-in {
    0% { transform: scale(1) }
    100% { transform: scale(1.1) }
  }
  
  .trans200 {
    transition: 200ms;
  }
  
  .trans300 {
    transition: 300ms;
  }
  
  .trans400 {
    transition: 400ms;
  }
  
  .trans1 {
    transition: 1s;
  }
  
  .checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid silver;
    border-radius: 3px;
    display: inline-flex;
    vertical-align: middle;
    margin-top: -4px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }
  
  .checkbox:hover {
    border-color: gray;
  }
  
  .checkbox.on:after {
    content: '';
    width: 8px;
    height: 8px;
    background: #777;
    border-radius: 50%;
  }
  
  .checkbox-label {
    margin-left: 16px;
    cursor: pointer;
  }
  
  .cb-container:hover .checkbox {
    border-color: gray;
  }
  
  .identity-box {
    border: 1px solid #dadada;
    border-radius: 10px;
    margin-left: -16px;
  }
  
  textarea {
    transition: 400ms
  }
  
  #view-on-desktop {
    display:none
  }
  
  
  .large-rocket {
      position: relative;
      display: block;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      border: 0;
      overflow: hidden;
  }
  
  .large-rocket-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 150px;
      height: 150px;
      background: black url(https://ghosttogether.net/static/stars.png);
      background-size: 150% 150%;
      animation-duration: 1.0s;
      animation-direction: normal;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-name: star-fly;
  }
  
  .large-rocket-rocket {
      position: absolute;
      top: -44px;
      left: -44px;
      width: 190px;
      height: 190px;
      background: url(https://ghosttogether.net/static/rocket2.png);
      background-size: 125% 125%;
  }
  
  @keyframes star-fly {
      from { background-position: 0 0 }
      to { background-position: 0 225px }
  }
  
  #new-members {
  
      background: #efefef;
  }
  
  #new-members .template-user {
      display: inline-flex;
      width: 299px !important;
      height: 83px !important;
      background: #fff;
      overflow: hidden;
  }
  
  #new-members .template-user:hover {
      background: #f9f9f9;
      box-shadow: -1px -1px 2px #eee inset, 1px 1px 2px #fff;
  }
  
  #new-members .template-user:nth-child(even) {
      border-left: 1px solid #dedede;
  }
  
  
  .tutorial-bar {display: none}
  /* remove upper nav bar */
  .tutorial-navbar {display: none}
  #root {
    justify-content: center !important;
  }
  
  @media screen and (max-width: 1080px) {
      #right {
          display: none;
      }
  }
  
  @media screen and (max-width: 655px) {
      #premium-button {
          display: none;
      }
  }
  
  @media screen and (max-width: 790px) {
      .msg-login {
        max-width: 100% !important;
      }
  }
  
  
  
  /* on tutorial pages
  remove left sidebar for narrow view */
  @media screen and (max-width: 1230px) {
    .tutorial-bar {display: none}
    /* remove upper nav bar */
    .tutorial-navbar {display: none}
    /* add scrollbars */
    #view pre {
      overflow-x: scroll;
    }
    #root {
      justify-content: center !important;
    }
  }
  
  #m,
  #n,
  #post-message-container-main,
  #post-message-container-main *,
  #post-message-container *,
  #post-message-container {
    /*transition: unset !important;*/
  }
  
  
  
  
  @media screen and (max-width: 800px) {
    #notif-text {
      display:none;
    }
    #article_user_box {
      color: #555 !important;
    }
    #article_user_box a {
      color: white !important;
    }
  }
  
  
    @media screen and (max-width: 900px) {
  
      #speaker-controller {
        display: none;
      }
  
        #nav-login {
         display: none;
        }
        #nav-register {
         display: none;
        }
        footer {
         flex-direction: column !important;
        }
       }
  
       /* Next wider view (iphone pro, etc) */
       @media screen and (max-width: 800px) {
  
  
        #special-image-1 {
         overflow-x: scroll;
        }
  
        /* post message in narrow view*/
        #post-message-container {
          width: 100% !important;
        }
  
        #post-message-container-main {
          width: 100% !important;
        }
  
        #letter,
        #letter-main,
        #letter-comment {
          width: 100%;
        }
  
       }
  
       @media screen and (max-width: 980px) {
  
       }
  
       @media screen and (max-width: 980px) {
        .fifth-friend {
          display:none;
         }
       }
  
      .user-box-container {
        display: block !important;
        height: 640px !important;
      }
  
      .user-box-item {
  
      }
  
      i#m * {
          /*transition: unset !important;*/
      }
  
       @media screen and (max-width: 800px) {
        .prim-button {
           display: none;
         }
         #nav-right-side {
           top: 1px !important;
         }
         #nav-right-side {
          /*display: none;*/
         }
         #icon-darkmode {
          /*display:block !important;*/
          /*position: absolute !important;*/
         }
         .ui-width-height {
  
         }
         i#m .input-container {
            /* width: 100% !important;*/
             max-height: 64px !important;
         }
       }
  
       @media screen and (max-width: 640px) {
          #upper-icons {
            /*
            min-width: 400px !important
            */
          }
        }
       /* Mobile first, means this media query first -- use min-width in ascending order
        Smallest phone screen (iphone, android, etc.) */
        @media screen and (max-width: 600px) {
  
        #special-image-1 {
            /*transform: scale(0.50);*/
            width: unset !important;
        }
       }
  
       #tos {
          width: 275px !important;
          height: 295px;
       }
  
  
       @media screen and (max-width: 882px) {
          #subroot {
            width: 100%;
            padding: 0;
            margin: 0;
          }
        }
  
  
       @media screen and (max-width: 1100px) {
  
         i#m .input-container {
              width: 100% !important;
              height: 100% !important;
              height: 60px !important;
          }
          i#m .input-container input {
              /* width: 96% !important; */
              max-width: unset !important;
          }
  
       .input-container {
          /*width: 282px !important;
          min-height: 76px; */
          width: 100%;
       }
  
       #settings-profile-form section * {
        font-size: 22px !important;
       }
  
       textarea#bio { /* on settings page */
          /*width: 282px !important;*/
          font-size: 22px !important;
       }
  
  
  
      .password-eye {
          cursor: pointer;
          opacity: 0.50;
          display: block;
          position: absolute;
          top: 8px;
          right: 10px;
          width: 32px;
          height: 32px;
          background: url('https://ghosttogether.net/static/password-eye-closed.png') no-repeat;
          background-size: 28px 28px !important;
          background-position: center center !important;
      }
  
      #password-1-eye.on,
      #password-2-eye.on {
          width: 32px;
          height: 32px;
          background: url('https://ghosttogether.net/static/password-eye-open.png') no-repeat !important;
          background-size: 28px 28px !important;
          background-position: center center !important;
      }
  
       #twitter {
  
       }
  
        #registerButton {
            /*width: 550px !important;*/
            height: 80px !important;
            /*width: 600px !important;*/          
            margin: auto;  
            margin-top: 16px;
        }
   
        #registerButton {
            padding: 53px !important;
            padding-top: 16px !important;
            padding-bottom: 16px !important;
            font-size: 26px !important;
            /*width: 494px !important;*/
            border-radius: 8px !important;
            /*margin-left: 90px !important;*/
        }
  
        #registerButton.rocket-reg-button {
            margin-left: unset !important;
            margin: unset !important;
            max-width: 340px !important;
            line-height: 44px !important;
            font-weight: bold;
            border-radius: 55px !important;
        }    
  
        body.settings #registerButton {
          height: unset !important;
        }
        
  
        #login {
            align-items: center !important;
        }
  
        #loginButton {
            top: 11px !important;
            right: 10px !important;
        }
  
        #cr-ticket {
          display: block !important;
        }
  
        #sec-head {
          padding-bottom: 15px;
          line-height: 28px;
        }
  
        #reg-header {
          margin: 0 !important
        }
  
        .input-placeholder {
  
          font-size: 22px !important
        }
  
        #your-disp-name {
          display:none !important
        } 
  
        footer {
          /*display:none !important*/
        }
        #copyright {
          /*display:none !important*/
        }
  
        #first-last {
          display:none !Important;
        }
  
  
        .input-container .input-placeholder {
            top: 16px !important
         }
  
         .input-placeholder.active {
            top: -8px !important;
         }
  
        .input-container input {
          /*max-width: 280px !important;*/
          max-width: 315px !important;
          font-size:22px !important;
          border-bottom: 2px solid black;
          box-shadow:0 !important;
        }
  
        textarea:focus,
        .input-container input:focus {
          border: 2px solid #777 !important;
        }
  
        #view-on-desktop {
          display: block;
          padding: 0;
          margin-left: -14px;
          margin-bottom: 27px;
        }
  
        #logo-insert {
          display: none;
        }
  
        #login {
          flex-direction: column !important
        }
        #register {
          border: 0 !important;
          margin: 0 !important;
          padding: 0 !important;
          width:100% !important;
          max-width: 100% !important;
        }
  
        #twitter-at {
          display: none !important
        }
  
        #login-form {
          border-right: 0 !important;
          padding-right: 12px !important;
          width: 327px !important;
        }
  
          .settings-sidebar {
            min-width: 100px !important;
          }
       }
  
       @media screen and (max-width: 1100px) {
  
       }
  
       @media screen and (max-width: 1300px) {
        #leftbar {
          display: none;
        }
       }
  
       @media screen and (min-width: 1500px) {
       .feed-width {
         min-width: 900px !important;
        }
       }
  
       #view {
        min-width: unset !important;
      }
  
       @media screen and (max-width: 1400px) {
        #new-members .template-user {
            width: 600px !important;
            border-left: 0 !important;
        }
        .max1000homepage {
           width: 100% !important;
           max-width: 1037px !important;
         }
       }
  
       /* Next wider view (tablets) */
       @media screen and (max-width: 1500px) {
  
        footer { flex-direction: column; }
  
        .mini-button {
         margin-left: 2px !important;
         margin-right: 2px!important;
         /*border: 0 !important;*/
        }
  
        #nav-username {
            /*display: none;*/
        }
  
        .responsive-breaker1 {
            display: block !important;
        }
  
       /* -- article only --- */
        #view-book img {
         width: 100%;
        }
  
        #view img {
         /*width: 100%;*/
        }
  
         .login {
           flex-direction: column;
           max-width: 520px;
         }
         .login-form {
           padding-right: 0 !important;
           margin-right: 0 !important;
           border-right: unset !important
         }
         .registernotes {
           padding: 18px !important;
           border-top: 1px solid #dadada;
         }
         .tweet-ctrl {
           padding: 18px !important;
           border-top: 1px solid #dadada;
         }
         #about-you { margin-right: 16px; }
       }
  
       @media screen and (max-width: 1000px) {
        #sidebar {
          display: none
          }
       }
  
  
  /* small screen overlay UI */
   @media screen and (max-width: 800px) {
  
  
    .mobile-message {
      font-size: 20px;
    }
  
      #loginButton {
          top: 9px !important;
      }
      /* home page - feed */
      #nav-cont {
          display:none;
      }
      #view {
          width: 100% !important;
          margin-top: 0 !important;
      }
      .tweet-width {
          width: 100% !important;
      }
      .max-849 {
          min-width: unset !important;
      }
      .esc-to-cancel {
          display: none !important;
      }
   /* overlay message box ui */
      .ui-button {
        /*border-radius: 6px !important;*/
      }
      i#m .input-container {
          width: 100% !important;
          height: 60px !important;
      }
      i#m .input-container input {
          /*width: 100% !important;*/
          max-width: unset !important;
      }
      #ui-header {
          width: unset !important;
      }
      i#m, i#n, i#w, i#z {
          width: 100% !important;
          height: 100% !important;
          margin-top: 0 !important;
          border-radius: 0 !important;
      }
   }
  
  
  /* remove header */
  #sec-head {
      /*display: none;*/
  }
  
  .insert-something {
    margin-left: -44px;
    width: 111.5%;
    background: #f9f9f9;
    padding: 48px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  
  .tiny-book {
    width: 48px;
    height: 48px;
    border: 2px solid gray;
    border-radius: 5px;
    background: url('https://ghosttogether.net/static/css-book-icon.png') 100% 100%
  }
  
  .tiny-book-js {
    width: 48px;
    height: 48px;
    border: 2px solid gray;
    border-radius: 5px;
    background: url('https://ghosttogether.net/static/javascript-book-icon.png') 100% 100%
  }
  
  .book-desk {
    font-size: 18px;
    padding-left: 16px;
  }
  
  .book-link {
    font-weight: bold;
  }
  
  /* coding article related */  /* #dff7f5; */
  .monospace {
      /* color: #7a7a7a; */
      font-family: sans-serif;
      /* padding-left: 10px; */
      /* padding-right: 10px; */
      font-size: inherit;
      /* border: 1px solid #e1e1e1; */
      /* border-radius: 5px; */
      font-size: 18px;
      font-weight: bold;
      /*line-height: 7px;*/
      line-height: 34px;
      /* margin-top: 0px; */
      position: relative;
      display: inline-block;
  }
  
  h2 .monospace {
    font-size: 19px;
  }
  
  .string {
    color: orangered !important;
  }
  
  .settings-avatar {
    width: 128px;
    height: 128px;
    border: 1px solid #efefef33;
    border-radius: 50%;
    background-size: 100% 100%;
  }
  
  .ava-72 {
    width: 72px !important;
    height: 72px !important;
  }
  
  .ava-48 {
    width: 48px !important;
    height: 48px !important;
  
  }
  
  .user-score-box {
    padding: 5px;
    margin-left:-3px;
    font-family: verdana;
    font-size: 13px;
  }
  
  #rightside-note {
    position: absolute;
    top: 0;
    right: 0;
    height: 60px;
    width: auto;
    /*font-size: 20px;*/
    font-weight: bold;
    padding-right: 16px;
    color: #777;
  }
  
  #view {
    position: relative;
  }
  
  #ea {
    display: block;
    position: absolute;
    min-width: 128px;
    bottom: 0;
    right: 0;
    z-index: 1000000000;
    height: 45px;
    border-radius: 0;
    line-height: 44px;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 700;
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-radius: 11px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    color: black;
    background: white !important;
    border-width: 0;
  }
  
  #modal-progress-bar {
    height: 3px;
    width: 0px;
    background: #48a7ff;
    animation-duration: 2.0s;
    animation-direction: ease-in;
    animation-fill-mode: forwards;
  }
  
  @keyframes stage1 {
    from { width: 0 }
    to { width: 75% }
  }
  
  @keyframes stage2 {
    from { width: 75% }
    to { width: 100% }
  }
  
  .stage1 {
    animation-name: stage1;
  }
  
  .stage2 {
    animation-name: stage2 !important;
  }
  
  #navbar-avatar-container {
    width: 48px;
    height: 48px;
    /*border: 1px solid gray;*/
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-items: center;
    align-items: center;
    display: none
  }
  
  #navbar-avatar {
    margin-left: 7px;
    width: 48px;
    height: 48px;
    background-size: cover !important;
    border-radius: 50%;
    position: absolute;
    display: block;
  }
  
  #logged-in-letter::after {
    content:'';
    position: absolute;
    top:2px;
    left:2px;
    
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #stars,
  #stars-comment,
  #stars-jobpost,
  #stars-main {
    display: block;
    position: absolute;
    /*top: -500px;*/
    top: -984px;
    left: 0;
    width: 190px;
    height: 1000px;
    background: url('https://www.semicolon.dev/static/stars.png');
    transition: 6077ms;
    z-index: 50;
  }
  
  #stars.fade-away,
  #stars-jobpost.fade-away,
  #stars-comment.fade-away,
  #stars-main.fade-away {
    transition: 400ms !important;
    opacity: 0 !important;
  }
  
  /* refresh */
  #refresh-container {
    display: flex;
    position: absolute;
    top:-200px;
    left: 0;
    width: 100%;
    height: 200px;
    align-items: center;
    justify-content: center;
    z-index: 100000000;border:5px solid red
  }
  
  #refresh-animation-container {
    z-index: 1000000000;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid gray;
    background: url('https://ghosttogether.net/static/retweetshaded.png') no-repeat;
  }
  
  /* iphone 11 mobile view*/
  @media screen and (max-width: 490px) {
  
    #avatar-status {
      line-height: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
  
  #browse-device-images  {
    /*transform: scale(0.70)*/
  }
  
  
  #settings-title-bar {
    min-height: 60px;
  }
  
  
  #sidebar {
    margin-right: 28px;
    position: -webkit-sticky;
    position: sticky;
    top: -3px;
    padding-top: 28px;
    min-width: 150px !important;
  }
  
  #bio-main-avatar {
    z-index: 1000000;
    box-shadow: 0 0 17px var(--glow-color);
  }
  
  #admin-user-panel {
    width: 100%;
    display: flex;
  }
  
  #admin-user-panel section {
    padding: 5px;
    border-bottom: 1px solid #ddd;
  
    width: 150px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .desaturated {
    background: silver !important;
  }
  
  .avatar-verify-text {
    font-size: 15px;
    font-weight: normal;
  }
  
  #verify_avatar_button {
    background: #ff4d4d;
    color: white;
    border-radius: 3px;
    font-size: 15px;
    font-weight: bold;
    padding-left: 6px;
    padding-right: 6px;
    margin-left: 0;
    cursor: pointer;
  }
  
  .avatar_pending_verification {
    background: #e4e4e4 !important;
    color: #828282 !important;
  }
  
  .pref {
    display: flex;
    cursor: pointer;
  }
  
  .pref-des {
      margin-left: 10px;
      display: flex;
      align-items: center;
  }
  
  .pref-switch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
  }
  
  #sidebar-news {
    display: block;
    /*background: white;*/
    width: 444px;
    position: sticky;
    position: -webkit-sticky;
    top: -270px;
  }
  
  #sidebar-follow {
    display: block;
    /*background: white;*/
    width: 350px;
    position: sticky;
    position: -webkit-sticky;
    top: 800px;
  }
  
  #sidebar-trends {
    display: block;
    /*background: white;*/
    width: 350px;
    position: sticky;
    position: -webkit-sticky;
    top: 400px;
  }
  
  #sidebar-user {
    display: block;
    background: white;
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
  }
  
  #user-header-bar {
    height: 60px;
    border-bottom: #eee;
    font-weight: bold;
  }
  
  #trending-header-bar,
  #follow-header-bar,
  #stats-header-bar,
  #news-header-bar {
    height: 60px;
    border-bottom: var(--line-border-1);
    font-weight: bold;
    font-size: 22px;
    color: #777;
  }
  
  .something-button {
    margin: 8px;
    font-size: 16px;
    background-color: var(--something-button-bg-color);
    color: var(--something-button-text-color);
    border-radius: 16px;
    padding: 3px 10px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
  }
  
  .something-button-inverse {
    margin: 8px;
    font-size: 16px;
    background-color: var(--something-button-text-color);
    color: var(--something-button-bg-color);
    border-radius: 16px;
    padding: 3px 10px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
  }
  
  .semicolon-search-box {
    width: 100%;
    border: 1px solid gray;
    border-radius: 100px;
    padding-left: 16px;
    background: var(--ss-bg);
  }
  
  .semicolon-search-box::-webkit-input-placeholder {
    color: var(--ss-fg) !important
  }
  
  #tweets div.tweet:nth-child(1) {
    padding-top: 26px !important;
  }
  
  /*.something-button-inverse:hover {
    margin: 8px;
    font-size: 16px;
    background-color: var(--something-button-bg-color) ;
    color: var(--something-button-text-color);
    border-radius: 16px;
    padding: 3px 10px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
  }*/
  
  .tweet-profile-button {
    font-size: 16px;
    background-color: var(--theme-bg);
    color: var(--hl-brightest-text);
    border-radius: 16px;
    padding: 3px 10px;
  }
  
  .tweet-message-button {
    font-size: 20px;
    background-color: var(--theme-bg);
    color: var(--hl-brightest);
    border-radius: 3px;
    padding: 5px 23px;
    font-weight: normal;
  }
  
  /*
  User.follow('${user._id?user._id:user.id?user.id:null}', this)
  */
  
  .tweet-haunt-button {
    font-size: 20px;
    background-color: var(--theme-bg);
    color: var(--hl-brightest);
    border-radius: 3px;
    padding: 5px 23px;
    font-weight: normal;
  }
  
  .tweet-haunt-button.haunting {
    font-size: 20px;
    background-color: var(--theme-bg);
    color: var(--hl-brightest);
    border-radius: 3px;
    padding: 5px 23px;
    font-weight: normal;
  }
  
  .who-to-follow {
    font-size: 22px;
  }
  
  .news-story-only-text {
    font-weight: normal;
    color: gray;
  }
  
  .news-story-main-text {
    /* font-weight: bold; */
  }
  
  .news-story-tiny-header {
    font-size: 16px;
    color: var(--hl-bright);
    font-weight: bold;
  }
  
  @media screen and (max-width: 1120px) {
    #sidebar-news {
      width: 350px
    }
  }
  
  @media screen and (max-width: 1000px) {
    #sidebar-news {
      display: none;
    }
  }
  
  .lv { width: 100%; height: 50px }
  
  #post-note-main {
      /* width: 299px; */
      top: -5px;
      height: 34px;
      display: none;
      margin-left: 4px;
      position: relative;
      background: var(--everyone);
      background-position: 9px 9px;
      background-size: 19px;
      line-height: 36px;
      font-size: 14px;
      color: var(--text-color);
  }
  
  #post-note-main::-webkit-input-placeholder {
    color: #71767b;
  }
  
  #post-note-main:-moz-placeholder { /* Firefox 18- */
    color: #71767b;
  }
  
  #post-note-main::-moz-placeholder {  /* Firefox 19+ */
    color: #71767b;
  }
  
  #post-note-main:-ms-input-placeholder {
    color: #71767b;
  }
  
  #post-note-main::placeholder {
    color: #71767b;
  }
  
  .linkified-username {
    /*color: var(--theme-bg);*/
    text-decoration: none;
    color: var(--highest-contrast-text-color) !important;
  }
  
  .linkified-username:hover {
    text-decoration: underline;
  }
  
  input[name="username"] {
    text-transform: lowercase;
  }
  
  .tweet-header {
    left: 5px;
    top: 1px;
    /*font-size: 16px;*/
    font-size: 17px;
    padding-top: 19px;
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* word-wrap: normal; */
    white-space: nowrap;
    display: inline-block;
  
   }
  
   .tweet-header * {
     
   }
  
   .tweet-text {
       font-size: 15.3px !important;
       /*line-height: 19.1px !important;*/
       line-height: 1.45 !important;
       color: var(--text-color);
       width: 95%;
       /*padding-right: 27px; -- removed 7-1-2023 */
       margin-left: 5px;
       margin-top: 5px;
       /*z-index: 100000000000;*/
       z-index: 1000;
       position: relative;
       display: block;
       white-space-collapse: preserve-breaks;
   }
  
   .target_comment {
    white-space-collapse: preserve-breaks;
    margin-left: 27px;
    display: inline-block;
   }
  
   .target_comment_with_image {
    white-space-collapse: preserve-breaks;
   }
  
   .promoted-text {
    position: absolute;
    bottom: -3px;
    right: 0;
    width: auto;
    background: url(https://ghosttogether.net/static/tiny-ad.png) no-repeat;
    background-position: 4px 4px;
    padding-left: 32px;
    font-size: 14px;
    color: gray;
    opacity: 0.95;
   }
  
   .notification section {
  
   }
  
   .notification {
     border-bottom: 1px solid var(--bg-333);
     padding-bottom: 30px;
   }
  
   .notification * {
       font-size: 15.3px;
   }
  
   .notification-text,
   .notification-action {
     margin-left: 44px;
   }
  
   .notification-action,
   .notification-action * {
    font-size: 15.3px !important
   }
  
   .notification .icon-follow {
     width: 48px;
     height: 48px;
     background: var(--icon-follow);
     background-position: 4px 2px;
     margin-left: -14px;
     margin-right: 12px;
     background-size: 84%;
   }
  
   .notification .icon-like {
     width: 48px;
     height: 48px;
     background: url(https://ghosttogether.net/static/normalheart.png) no-repeat;
     background-size: 123%;
     background-position: -5px 5px;
     margin-left: -17px;
     margin-right: 12px;
   }
  
   .notification .icon-agree {
    width: 48px;
    height: 48px;
    background: url(https://ghosttogether.net/static/normalagree.png) no-repeat;
    background-size: 123%;
    background-position: -5px 5px;
    margin-left: -17px;
    margin-right: 12px;
  }
  
  .notification .icon-whisper {
    width: 48px;
    height: 48px;
    background: url(https://ghosttogether.net/static/whisperreply2.png) no-repeat;
    background-size: 77%;
    background-position: 3px 5px;
    margin-left: -17px;
    margin-right: 12px;
  }
  
   .notification .icon-retweet {
     width: 48px;
     height: 48px;
     background: url(https://ghosttogether.net/static/retweet.svg) no-repeat;
     background-position: 8px 10px;
     background-size: 60%;
     margin-left: -17px;
     margin-right: 12px;
  }
  
  .notification .icon-mention {
    width: 48px;
    height: 48px;
    background: url('https://ghosttogether.net/static/mention-ic.png') no-repeat;
    background-position: 7px 12px;
    opacity: 0.5;
    margin-left: -17px;
    margin-right: 12px;
  }
  
  .notification .icon-comment {
    width: 48px;
    height: 48px;
    background: url(https://ghosttogether.net/static/comment-ic.png) no-repeat;
    background-position: 12px 0px;
    background-size: 61%;
    margin-left: -17px;
    margin-right: 12px;
  }
  
   .notification-user {
    width: 38px;
    height: 38px;
    background: gray;
    border-radius: 50%;
   }
  
   .notification-user:hover {}
  
   .notification-user-link:hover {
    text-decoration: underline;
   }
  
   .notification-text {
    margin-top: 4px;
    font-size: 15.3px;
   }
  
  .notification-text,
  .notification-text a {
      text-decoration: none;
      color: #777;
  }
  
  .navbar-notifications {
    font-size: 20px;
    height: 57px;
    font-weight: bold;
  }
  
  #navbar-notifications-icon {
    width: 50px;
    height: 50px;
    background: var(--notifications-off);
    background-position: center center;
    background-size: cover;
    transform: scale(0.7);
  }
  
  #navbar-messages-icon {
    position: relative;
    width: 33px;
    height: 33px;
    padding: 0;
  }
  
  #navbar-messages-color {
    position: absolute;
    display: block;
    width: 33px;
    height: 33px;
    background: #666666;
  }
  
  #navbar-messages-hole {
    position: absolute;
    display: block;
    width: 33px;
    height: 33px;
    background: var(--messages-hole);
    background-position: center center;
  }
  
  #navbar-freegift-icon {
    width: 31px;
    height: 27px;
    background: var(--freegift-off) !important;
    background-size: contain !important;
    transform: scale(1);
    margin-top: 2px;
    margin-left: 5px;
    opacity: 1;
  }
  
  #view {
    /* content-visibility: auto; */
  }
  
  #notif-num {
    display: none;
    width: unset !important;
  }
  
  .topmost-tweet {
    /*
    position: -webkit-sticky;
    position: sticky;
    top: 60px;
    z-index: 1000000
    */
  }
  
  .pronoun-tag-standard {
    background: var(--bg-hl) !important;
    border-radius: 4px;
    padding-left: 6px;
    padding-right: 6px;
    display: inline-block;
    font-size: 15px !important;
    color: gray;
  }
  
  .pronoun-tag-large {
    background: var(--bg-hl);
    border-radius: 4px;
    padding-left: 6px;
    padding-right: 6px;
    display: inline-block;
    font-size: 22px !important;
  }
  
  .trending-ic {
    position: absolute;
    display: block;
    right: 12px;
    bottom: 10px;
    width: 16px;
    height: 16px;
    background:url('https://ghosttogether.net/static/trending-tiny.png') no-repeat;
  }
  
  .inline-trending-ic {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: var(--trending-tiny);
  }
  
  #t-note {
    font-size: 14px;
    color: gray;
    position: absolute;
    top: 0px;
    right: -28px;
    width: 72px;
  }
  
  #post-main-avatar-bg {
    box-sizing: unset;
    /* border: 10px solid var(--bg-hl-subtle); */
    border-radius: 8% !important;
  }
  
  #post-main-avatar-bg:hover {
    /* border: 10px solid var(--bg-hl); */
  }
  
  @keyframes transmit {
    from { background-position: 0 0 }
    to { background-position: 0 100px }
  }
  
  .reply-transmit-vertical {
    position: absolute;
    top: 85px;
    left: 48px;
    width: 9px;
    height: 84px;
    background: url(https://ghosttogether.net/static/transmit.png) repeat-y;
    animation-duration: 2s;
    animation-name: transmit;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: forwards;
  }
  
  .margin-top-5 {
    margin-top: 5px;
  }
  
  .tweet-user-image {
    padding-top: 14px;
  }
  
  .tweet-user-image img {
    position:relative;
    z-index: 100;
  }
  
  
  
  #tweet_comment_container {
    background: transparent;
  }
  
  .tweet-youtube-container {
      margin-top: 8px
  }
  
  .tweet-youtube-container iframe {
      border-radius: 10px;
  }
  
  .question-sm {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    background: var(--sm-question);
    background-position: center center;
  }
  
  .tweet-is-reply {
   
  }
  
  img.avatar-is-reply {
    /*
    position: relative;
    transform: scale(0.8);
    margin-top: -25px !important;
    */
  }
  
  .okay-button:hover {
    border-width: 1px
  }
  
  .action-container {
    /*min-width: 83px;*/
  /*  min-width: 46px;*/
    margin-top: 1px;
  }
  
  #rocket,
  #rocket-main,
  #rocket-jobpost,
  #rocket-note-is,
  #rocket-note-is-ext,
  #rocket-post-is,
  #rocket-comment {
    position: absolute;
    top: -61px;
    left: -67px;
    width: 190px;
    height: 190px;
    background: url('https://www.semicolon.dev/static/rocket.png') 8px 8px no-repeat;
    /*animation-duration: 5s;*/
    /*animation-direction: normal;*/
    transition: 600ms !important;
    z-index: 100;
  }
  
  #rocket-comment.unloaded,
  #rocket-main.unloaded,
  #rocket-jobpost.unloaded,
  #rocket-post-is.unloaded,
  #rocket-note-is.unloaded,
  #rocket-note-is-ext.unloaded,
  #rocket.unloaded {
   background-position: 70px 8px !important;
  }
  
  #rocket-main.comment,
  #rocket-main.launched,
  #rocket-jobpost.launched,
  #rocket-post-is.launched,
  #rocket-note-is.launched,
  #rocket-note-is-ext.launched,
  #rocket.launched {
    top: -118px !important
  }
  
  #stars-comment.launched,
  #stars-main.launched,
  #stars-jobpost.launched,
  #stars-post-is.launched,
  #stars-note-is.launched,
  #stars.launched {
    top: 500px !important;
  }
  
  
  
  #rocket-comment.away,
  #rocket-main.away,
  #rocket-jobpost.away,
  #rocket-post-is.away,
  #rocket-note-is.away,
  #rocket-note-is-ext.away
  #rocket.away {
    top: -225px !important;
  }
  
  /* disable "everyone can see your post" */
  #post-note-main {
    display: none
  }
  
  .disabled {
      background: var(--disabled-background);
      color: var(--disabled-color);
  }
  
  #stars.fast-transition,
  #stars-jobpost.fast-transition,
  #stars-comment.fast-transition,
  #stars-main.fast-transition {
    transition: 0ms !important;
  }
  
  /* disabled text areas */
  textarea:disabled::-webkit-input-placeholder {
    color: #ccc;
  }
  
  textarea:disabled:-moz-placeholder { /* Firefox 18- */
    color: #ccc;  
  }
  
  textarea:disabled::-moz-placeholder {  /* Firefox 19+ */
    color: #ccc;  
  }
  
  textarea:disabled:-ms-input-placeholder {
    color: #ccc;  
  }
  
  textarea:disabled::placeholder {
    color: #ccc;  
  }
  
  .T200ms {
    transition: 200ms;
  }
  
  .T300ms {
    transition: 300ms;
  }
  
  .T400ms {
    transition: 400ms;
  }
  
  #m {
    /*animation-duration: 0.7s;
    animation-direction: normal;
    animation-name: bounceIn; */
  }
  
  #z {
    /*animation-duration: 0.7s;
    animation-direction: normal;
    animation-name: bounceIn; */
  }
  
  .tweet-opts {
    animation-duration: 0.7s;
    animation-direction: normal;
    animation-name: bounceIn;
  }
  
  .bounceButton {
    /*animation-duration: 0.7s;
    animation-direction: normal;
    animation-name: bounceButton;*/
  }
  
  div.currentButton div.wedge-container {
    position: relative;
    width: 100%;
    height: 18px;
    display: flex;
    align-self: flex-start;
    margin-top: -9px;
    overflow: hidden;
  }
  
  div.currentButton div.wedge-container .wedge {
    /*display: block;
    position: relative;
    width: 16px;
    height: 16px;
    top: -10px;
    background: var(--theme-bg);
    transform: rotate(0) scaleX(1.5);
    border-radius: 43%;
    content: '';*/
  }
  
  .tweet-opts-item:hover {
    /*background-color: #f0ffff !important;
    border-radius: unset;
    */
    transform: scale(1.01);
    transition: 300ms;
  }
  
  @keyframes bounceIn{
    0%{
      opacity: 0;
      transform: scale(0.98) translate3d(0,0,0);
    }
    25%{
      opacity: 0.98;
      transform: scale(1.025);
    }
    50%{
      opacity: 1;
      transform: scale(0.98);
    }
    75%{
      opacity: 1;
      transform: scale(1) translate3d(0,0,0);
    }
  }
  
  @keyframes bounceButton{
    0%{
      transform: scale(1) translate3d(0,0,0);
    }  
    10%{
      transform: scale(0.90) translate3d(0,0,0);
    }
    25%{
      transform: scale(1.125);
    }
    50%{
      transform: scale(0.90);
    }
    75%{
      transform: scale(1) translate3d(0,0,0);
    }
  }
  
  #post-message-container,
  #post-message-container-main,
  #post-message-container-comment {
    /* min-height: 113px; */
    /* min-height: 216px; */
  }
  
  .newly-posted {
    /* overrides on hover */
    background: var(--newly-posted) !important;
  }
  
  textarea:disabled {
    background: transparent !important;
    color: #ccc;
  }
  
  .arrow-down {
    opacity: 0.25
  }
  
  .opacity0 {
    /*opacity: 0 !important;*/
  }
  
  .lg-follow-ctr {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 17px
  }
  
  #article-header-image-container {
    /* min-height: 175px !important; */
    
  }
  
  .padding-top-4 { padding-top: 4px }
  .padding-top-11 { padding-top: 11px }
  
  .height-10 { height: 10px }
  .height-20 { height: 20px }
  .height-50 { height: 50px }
  .height-100 { height: 100px }
  .height-200 { height: 200px }
  .height-300 { height: 300px }
  .height-400 { height: 400px }
  .height-500 { height: 500px }
  
  .top-zero { padding-top: 0 }
  .bot-zero { padding-bottom: 0 }
  
  .max-height-500 { max-height: 500px }
  
  
  
  #view { z-index: 100; }
  
  
  
  @media screen and (max-width: 620px) {
  
    .tweet-text {
  
      }
  
    /* bio header */
    .bio-articles-link,
    .bio-articles-link * {
      display:none !important;
    }
    #bio-dets-1,
    #bio-dets-2 {
      flex-direction: column;
    }
    #sub-bio-container {
      min-width: 483px !important;
      max-width: 483px !important;
    }
    #sub-bio {
      position: relative;
      top: -11px !important;
      left: 213px !important;
      max-width: 250px !important;
      min-height: 161px !important;
    }
    #sub-bio  { font-size: 15px !important }
    #browse-device-images  {
      /*transform: scale(1.0) */
    }
    #edit-real-name {
      display:none;
    }
  }
  
  .live-ic {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 12px;
    margin-top: 1px;
    background: url('https://ghosttogether.net/static/live-ic.png') no-repeat;
    background-position: center center;
  }
  
  
  /* logo */
  .logo-image {
    display: inline-block;
    position: relative;
    margin-left: -10px;
    margin-top: 10px;
    width: 170;
    height: 28px;
    /* opacity: 0.75; */
    background: var(--semicolon-logo);
    background-size: 100%;
  }
  
  .go-back {
      position: relative;
      display: inline-block;
      width: 64px;
      height: 64px;
      background: var(--goback);
      background-size: 48%;
      cursor: pointer;
  }
  
  #nav-bar {
      margin-top: 0; width: 100%;
      z-index: 100000000 !important;
      position: sticky;
      position: -webkit-sticky;
      border-left: 0;
      border-right: 0;
      top: 0px;
  
      /* main tweeting ui */
      height: 74px;
  
      min-height: 61px;  
      background-color: var(--bg-1);
  } 
  
  .is-article #nav-bar {
    height: 64px !important;
  }
  
  .is-article #navigation-bar {
    z-index: unset !important;
  }
  
  .target-action,
  .target-action * {
      font-size: 13px;
      /* font-weight: bold; */
      font-family: arial;
      padding-left: 10px;
  }
  
  .target-action {
    position: absolute;
    top: 13px;
    left: 84px;
    color: var(--subtle-text-color);
  }
  
  .target-action,
  .target-action * {
    font-size: 14px;
    font-weight: bold;
  }
  
  .target-action-comment {
    width: 25px;
    height: 22px;
    opacity: 0.5;
    background: url(https://ghosttogether.net/static/reply-to.png) no-repeat;
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    top: 4px;
    left: -15px;
  }
  
  .target-user-link {
    color: gray;
    text-decoration:none;
    position: relative;
    /*z-index: 100000000000000;*/
  }
  
  .target-user-link:hover {
    text-decoration:underline;
  }
  
  .reply-transmit-vertical-feed {
    z-index: 1;
    top: 81px;
    left: 40px;
    width: 9px;
    height: 45px;
    opacity: 0.35;
  }
  
  .tiny-msg-icon {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    margin-top: -2px;
    border-radius: 3px;
    border: 1px solid var(--hl-faint-lines);
    background-size: 100% 100%;
    background-position: contain;
    background-repeat: no-repeat;
  }
  
  .tiny-follow-button {
    display: inline-block;
    width: auto;
    line-height: 10px;
    height: 19px;
    padding: 3px 10px !important;
    border-radius: 8px;
    border: 1px solid #37b2ff;
    color: #37b2ff;
    cursor: pointer;
  }
  
  .tiny-follow-button:hover,
  .tiny-follow-button.filled {
    border: 1px solid #37b2ff;
    background: #37b2ff;
    color: white;
  }
  
  .tiny-question-button {
    display: inline-block;
    width: auto;
    line-height: 10px;
    height: 19px;
    padding: 3px 3px !important;
    border-radius: 8px;
    border: 1px solid #37b2ff;
    background: #37b2ff;
    color: #ffffff;
    cursor: pointer;
  }
   
  .tiny-question-button:hover,
  .tiny-question-button.filled {
    border: 1px solid #37b2ff;
    background: transparent;
    color: #37b2ff; 
  }
  
  .post-button {
    display: inline-block;
    width: auto;
    line-height: 15px;
    height: 30px;
    padding: 3px 11px !important;
    border-radius: 16px !important;
    border: 1px solid var(--theme-bg);
    background: transparent;
    color: #37b2ff;
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    line-height: 19px;
  }
  
  .post-button:hover {
    border: 1px solid var(--theme-bg);
    background: var(--theme-bg);
    color: #ffffff;   
  }
  
  .post-button.inverted {
    border: 1px solid var(--theme-bg);
    background: var(--theme-bg);
    color: #ffffff;   
  }
  
  .post-button.inverted:hover {
    border: 1px solid var(--theme-bg);
    background: transparent;
    color: var(--theme-bg)
  }
  
  .got-paid,
  .got-paid * {
      font-size: 16px !important
  }
  
  .user-search-entry { margin-left: 10px; /*border-left: 2px solid #eeeeee;*/ }
  .user-search-entry:hover { /*border-left: 2px solid #37b2ff;*/ }
  .user-search-entry,
  .user-search-entry * {
      font-size: 16px !important
  }
  
  .un-tiny {
      color: gray;
      text-decoration: none;
  }
  
  .un {
    color: var(--theme-bg)
  }
  
  .un:hover { color: #999; text-decoration: underline }
  
  .user-link {
    text-decoration: none;
    color: var(--user-link);
    cursor: pointer
  }
  .user-link:hover { text-decoration: underline}
  .user-link-sec { text-decoration: none }
  .user-link-sec {
    color:var(--theme-bg)
  }
  
  /* set to this for non-mobile view later */
  .user-link {
    /*font-weight: 400 !important; or 500? 600?
    font-size: 16px;*/
  }
  
  .url-inset {
      border: 1px solid silver;
      border-radius: 8px;
  }
  
  .url-inset  {
  
  }
  
  .url-inset:nth-child(1) {
      background-image: url('https://ghosttogether.net/static/url-inset-resource.png')
  }
  
  .url-inset:nth-child(2) {
      border-left: 1px solid silver;
  }
  
  .url-inset-title {
  
  }
  
  .url-inset-description {
  
  }
  
  #article-header-image-container {
      display:none;
      border:0 !important;
  }
  
  * {
      -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  
  .absolute {
      position: absolute;
  }
  
  .is-follow-button.following {
      background-color: var(--theme-bg);
      color: #ffffff !important;
  }
  
  .bio-follow-button {
      display: none;
  }
  
  .not-mine {
      display: block !important;
  }
  
  .system-button {
    padding: 1px 9px !important;
    border-radius: 30px;
    border: 2px solid #37b2ff;
    background: #37b2ff;
    color: #ffffff;
    cursor: pointer;
    line-height: 25px;
    width: auto;
    min-width: 94px;
    text-align: center;
    font-size: 19px;
  }
  
  .system-button-mod-1 {
    padding: 2px 16px !important;
    font-weight: bold;
    font-size: 16px;
  }
  
  .system-button:hover, .system-button.filled {
    border: 2px solid #37b2ff;
    background: #37b2ff;
    color: #ffffff;
  }
  
  .system-input-container {
    padding: 8px;
  }
  
  .wide-margin { margin-left: 10px; margin-right: 10px }
  
  .system-input-container input {
      width: 100%;
      height: 48px;
      font-size: 22px;
      border: 1px solid #dddddd !important;
      transition: 0s;
      
  }
  
  .system-input-container input:focus  {
      border: 1px solid #37b2ff !important
  }
  
  .none {
      display: none !important;
  }
  
  .invisible {
      visibility: hidden !important;
  }
  
  .premium-star {
    display:none;
    position: absolute;
    top: 17px;
    left: 50px;
    width: 18px;
    height: 18px;
    /*background: url(https://ghosttogether.net/static/yellow-star.svg) no-repeat;*/
    opacity: 1.0;
    z-index: 100;
  }
  
  .width-150 {
    width: 150px !important;
  }
  
  #writer-prefooter,
  #writer-prefooter * {
    font-size: 22px !important
  }
  
  .get-ghost,
  .write-for-us {
      padding: 14px;
      margin: 14px;
      background: var(--theme-bg);
      border: 2px solid transparent;
      font-weight: bold;
      color: #ffffff;
  }
  
  .get-ghost:hover,
  .write-for-us:hover {
      color: var(--theme-bg) !important;
      background-color: transparent !important;
      border-color: var(--theme-bg) !important;
  }
  
  #my-followers {
    position: relative;
    margin: auto;
  
  }
  
  #avatar-container {
    margin-top: 145px;
  }
  
  .av-ic {
    position: relative;
    display: inline-block;
    margin: 6px;
    width: 48px;
    height: 48px;
  }
  
  #my-followers-container {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    
    height: 400px;
  
  }
  
  .equal {
    
  }
  
  .equal div {
    flex-basis: 100%;
    text-align: center;
  }
  
  .equal-l div {
    flex-basis: 100%;
    text-align: left;
  }
  
  .analytics-header-row div {
      font-weight: bold;
  }
  
  #DM {
    padding-top: 21px;
  }
  
  #DM h3 {
    font-size: 20px;
  }
  
  #DM p {
    font-size: 16px;
  }
  
  .typing-box-container {
    /*background: var(--bg);
    padding-top: 17px;
    padding-bottom: 17px;*/
    padding-top: 14px;
    padding-bottom: 0px;
  }
  
  .typing-box-container input {
    width: 100%;
    height: 39px;
    /*border-radius: 24px;*/
    border-radius: 4px;
    background-color: var(--hl-brighter);
    border: var(--line-border-1) !important;
    border-width: 1px !important;
    padding-left: 18px;
    margin-left: 42px !important;
  }
  
  .typing-box-container input:hover {
    border: var(--line-border-0) !important
  }
  
  .typing-box-container input:focus {
      border: 1px solid var(--theme-bg) !important;
  }
  
  .input-tiny-user {
    /* background: var(--tiny-user-search); */
    /*background-position: 9px 8px;*/
    /*padding-left: 15px !important;*/
  }
  
  /*
  :hover
    background: url('tiny-user-smiley.png') no-repeat;
    background-position: right 8px;
    padding-left: 40px !important
  } */
  
  .ava {
    display: inline-block;
    position: relative;
    width: 48px;
    height: 48px;
  }
  
  .txt {
    width: 85%;
  }
  
  .auth {
    
  }
  
  .rem {
    color: #999999;
  }
  
  .chatter {
    padding-top: 20px;
    padding-bottom: 15px;
    padding-right: 0px;
    padding-left: 12px;
    background: var(--bg);
    transition: 0.3s !important;
    width: 100%;
  }
  
  .chatter .auth {
      display: inline-block;
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 242px;
      margin-top: -2px;
  }
  
  /* DM */
  
  #contacts {
      /* width: 415px; */
      transition: unset;
      background-color: var(--bg);
      /*overflow-y: scroll;*/
  }
  
  #contacts {
      /* height: 100%; */
  }
  
  #contacts * {
      transition: unset;
  }
  
  .max-600 {
      max-width: 600px !important;
  }
  
  .job-listing:hover {
      background-color: var(--hl-brighter)
  }
  
  .tweet:hover {
      background-color: var(--bg-hl-subtle) 
  }
  
  .chatter {
      cursor: pointer;
  }
  
  .chatter:hover {
      background-color: var(--hl-really-faint) !important;
  }
  
  .chatter .auth {
      width: 100%;
  }
  
  .chatter .rem {
      padding-right: 8px;
  }
  
  #msg {
      /*height: calc(100% - 90px);*/
      /*overflow-y: scroll;*/
      /*min-height: calc(100% - 60px);*/
      /*max-height: calc(100% - 60px);*/
  }
  
  @media screen and (max-width: 1060px) {
    #contacts.selected {
        width: 320px;
    }
    #subroot.selected {
  
    }
  }
  
  @media screen and (max-width: 1000px) {
      #subroot.selected {
          width: 600px !important;
          display: block !important;
          height: calc(100% - 74px);
      }
      #contacts.selected {
          /*width: 600px !important;*/
          display: block !important
      }
      #subroot.unselected {
          display: none !important
      }
      #contacts.unselected {
          display: none !important
      }
  }
  
  .borderbottom {
    border-bottom: var(--line-border-1) !important;
    /* #efefef */
  }
  .borderbottom-darker { border-bottom: var(--line-border-1) !important; /*  */ }
  .border-left { border-left: var(--line-border-1) !important }
  .border-right { border-right: var(--line-border-1) !important }
  .border-top { border-top: var(--line-border-1) !important }
  .bordertop { border-top: var(--line-border-1) !important }
  .border-bottom { border-bottom: var(--line-border-1) !important }
  
  #dm-tab {
    position: fixed;
    left: 15px;
    bottom: 0;
    width: 141px;
    height: 27px;
    background-color: var(--theme-bg);
    color: #ffffff;
    z-index: 10000000000;
    line-height: 27px;
    text-align: center;
    /* font-weight: bold; */
    font-size: 14px;
    cursor: pointer;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
  }
  
  .dm-bubble {
      overflow-wrap: break-word;
      background-color: var(--theme-bg); /* rgb(235 238 240); */
      color: var(--chat-my-text-color);
      margin: 2px;
      padding: 10px 19px;
      padding-bottom: 10px;
      padding-left: 14px;
      padding-right: 13px;
      font-size: 14.8px;
      /*     font-size: 16px; */
      /*border-radius: 6px;
      border-bottom-left-radius: 0;*/
      max-width: 400px;
      margin-right: 8px;
      margin-left: 16px;
      border-radius: 14px !important;
  }
  
  .dm-mine .dm-bubble {
    padding-right: 9px !important;
    margin-right: 16px;
    margin-left: 16px !important;
    border-radius: 25px;
    border-top-right-radius: 7px !important;
    border-bottom-right-radius: 7px !important;
  }
  
  .dm-theirs .dm-bubble {
    background: var(--chat-recipient-bg-color);
    color: var(--chat-text-color);
    align-self: end;
    /*white-space-collapse: preserve;*/
  }
  
  .dm-theirs .dm-user-circle {
    align-self: end;
    margin-bottom: 3px;
  }
  
  .dm-mine .dm-user-circle {
    /* display: none; */
  }
  
  .dm-mine .delete-dm {
    display: block !important;
  }
  
  .orangered { color: red }
  .green { color: green }
  .blue { color: #01cece }
  
  #icon-speaker {
      width: 40px;
      height: 40px;
  }
  #icon-speaker.on {
      background: var(--speaker-on);
      background-position: center center;
  }
  #icon-speaker.off {
      background: var(--speaker-off);
      background-position: center center;
  }
  #speaker-controller {
      width: 100px;
      height: 40px;
  }
  #speaker-bar {
      position: relative;
      width:  100px;
      height: 7px;
      background: #cccccc;
      border-radius: 3px;
      overflow: hidden;  
      box-shadow: 2px 2px 3px #f5f5f5 inset;
      pointer-events: none;
  }
  #speaker-bar-shaded {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 !important; 
      width: 0;
      height: 7px;
      background: #999999;
      box-shadow: 2px 2px 3px #bbbbbb inset;
      pointer-events: none;
  }
  
  .platform-icon {
      position: relative;
      display: inline-block;
      width: 21px;
      height: 21px;
      cursor: pointer;
  }
  
  .platform-hashnode { background: url("https://ghosttogether.net/static/platform-hashnode.png") no-repeat }
  .platform-linkedin { background: url("https://ghosttogether.net/static/platform-linkedin.png") no-repeat }
  .platform-twitter { background: url("https://ghosttogether.net/static/platform-twitter.png") no-repeat }
  .platform-facebook { background: url("https://ghosttogether.net/static/platform-facebook.png") no-repeat }
  .platform-instagram { background: url("https://ghosttogether.net/static/platform-instagram.png") no-repeat }
  .platform-medium { background: url("https://ghosttogether.net/static/platform-medium.png") no-repeat }
  .platform-github { width: 22px; background: url("https://ghosttogether.net/static/platform-git.png") no-repeat }
  .platform-youtube { width: 30px; height: 21px; background: url("https://ghosttogether.net/static/platform-youtube.png") no-repeat }
  
  .LM {
      margin-left: 4px
  }
  
  #letter-main-options {
      position: relative;
      left: 98px;
      top: -3px;
  }
  
  .feature-image {
      width: 28px !important;
      height: 28px !important;
      margin-top: -6px;
      vertical-align: middle;
      display: inline-block;
  }
  
  #letter-media-preview-main {
    margin-left: 78px;
    margin-top: -10px;
    margin-bottom: 17px;
  }
  
  .close-image {
    color: white;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial;
    position: absolute;
    top:0;
    left:0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    translate: rotate(45deg);
  }
  
  .close-image:hover {
    background-color: rgb(88, 88, 88, 0.3);
  }
  
  .media-container { 
    margin-top: 10px;
    /*max-width: 517px;  */
    max-width: 500px;
    border: var(--line-border-1);
    border-radius: 13px;
    overflow: hidden;
    /*max-height: 280px;
    max-height: 380px;*/
    max-height: 537px;
    height: 380px;
    /*margin-right: 57px;*/
    margin-right: 0 /* replaced 7-1-2023 */
  }

  .media-container img {
    height: 100%;
  }
  
  @media screen and (max-width: 700px) {
      .media-container {
        width: 100%;
        max-width: unset;
        min-width: 100%;
      }
      .media-container img {
        width: 100%;
      }
      .iphone .media-container {
         width: unset !important;
         min-width: unset !important;
         margin-top: 10px;
         max-width: 370px !important;
         margin-right: 11px;
         border-radius: 13px;
         border: unset !important;
         overflow: hidden;
         align-self: end !important;
       }
  }
  
  .sub-tweet {
      position: relative;
      margin-top: 8px;
      padding-top: 8px;
  }
  
  .sub-tweet-mark {}
  
  #world {
      z-index: 10;
      position: absolute;
      top: 0;
      left: 0;
      width: 500px;
      height: 500px;
      pointer-events: none !important
  }
  
  #o.msg-celebration {
      align-items: flex-start !important;
      padding-top: 50px;
  }
  
  #o.msg-celebration, #m {
      /*min-height: 355px !important;*/
  }
  
  .glassmorphism {
    /*
      background: rgba( 255, 255, 255, 0.7 ) !important;
      box-shadow: 0 0px 10px 7px rgb(197 197 197 / 34%) !important;
      backdrop-filter: blur( 5.5px ) !important;
      -webkit-backdrop-filter: blur( 5.5px ) !important;
      border-radius: 10px !important;
      border: 1px solid rgba( 255, 255, 255, 0.18 ) !important
      */
  }
  
  .bio-stats {
      position: relative;
      display: block;
      width: 679px;
      height: 108px;
      border: var(--line-border-1);
      top:0 !important; 
  } 
  
  .site-stats {
    position: relative;
    display: block;
    width: 679px;
    height: 200px;
    border: var(--line-border-0);
    top:0 !important; 
  }
  
  /* -- canvas -- */
  #sidebar-site-stats {
    width: 320px;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
  }
  
  .sidebar-site-stats {
    position: relative;
    display: block;
    width: 320px;
    height: 150px;
    border: var(--line-border-1);
    top:0 !important; 
    border-radius: 10px;
    margin-left: 16px;
    margin-top: 16px;
    transition: 200ms;
    cursor: pointer;
  }
  
  .sidebar-site-stats:hover {
    border: var(--line-border-0);
  }
  
  #article_user_box {
    display:none;
  }
  
  
  .padding-bot-8 {
      padding-bottom: 8px;
  }
  
  .padding-left-16 {
    padding-left: 16px;
  }
  
  .news-story {
    width: 100%;
  }
  
  .news-story h1 {
    margin: 7px 0px;
    margin-bottom: 0;
    color: var(--story-title-color)
  }
  
  .news-story h1 a {
    font-family: 'Poppins';
    font-size: 27px !important;
    color: #585858 !important;
  }
  
  .news-desc-p-size {
      font-size: 16px;
      margin:0
  }
  
  #subroot {
     
  }
  #view {
      
  }
  
  #select-ghost {
  }
  
  .ghost-icon {
    display: block;
    position: relative;
    width: 120px;
    height: 120px;
    background-position: center center;
  }
  
  .ghost-icon {
    cursor: pointer;
    transition: 0.3s;
  }
  .ghost-icon:hover {
    transform: scale(1.05)
  }
  
  .ghost-emoji-1 { background: var(--ghost-emoji-1) }
  .ghost-emoji-2 { background: var(--ghost-emoji-2) }
  .ghost-emoji-3 { background: var(--ghost-emoji-3) }
  .ghost-emoji-4 { background: var(--ghost-emoji-4) }
  .ghost-emoji-5 { background: var(--ghost-emoji-5) }
  .ghost-emoji-6 { background: var(--ghost-emoji-6) }
  .ghost-emoji-7 { background: var(--ghost-emoji-7) }
  .ghost-emoji-8 { background: var(--ghost-emoji-8) }
  
  .msg-input {
    margin-left: 2px !important;
    /* width: calc(100% - 57px) !important; */
    background-color: var(--hl-brighter) !important;
    border: 1px solid var(--theme-bg) !important;
    transition: 0ms;
  }
  
  .msg-input:focus {
      background: var(--bg-brighter) !important;
      border: 1px solid var(--theme-bg) !important;
  }
  .msg-input:focus::placeholder {
      color: var(--bg-555) !important
  }
  
  
  
  
  .dm-msg.dm-mine {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
  }
  
  .yes-ic {
      width: 14px;
      height: 14px;
      position: relative;
      display: inline-block;
      margin-top: 0;
      margin-left: 3px;
      background: var(--yes-ic);
  }
  
  .dm-space {
      height: 24px;
  }
  
  .dm-user-circle {
      position: relative;
      display: inline-block;
      width: 42px;
      height: 42px;
      /*background-color: #f1f1f1;*/
      background-size: cover;
      border-radius: 11%;
      margin-right: 10px;
  }
  
  #message {
      position: relative;
  }
  
  #message-image {
      position: absolute;
      top: 8px;
      left: 0px;
      width: 42px;
      height: 42px;
      border-radius: 34%;
      display: block;
      background: var(--post-image-icon);
      background-position: center center;
      background-color: var(--post-message-option-button-bg);
      padding: 20px;
      opacity: 0.5;
      transition: 0.3s;
  }
  
  #message-image:hover {
      opacity: 1;
  }
  
  .draft-image {
      width: 170px;
      height: 89px;
      background: #f1f1f1;
      border-radius: 5px;
  }
  
  .draft-date {
      line-height: 30px;
      font-size: 15px;
      color: #777;
  }
  
  kbd {
    display: inline-block;
    margin: 0 0.1em;
    padding: 0.1em 0.6em;
    font-size: 11px;
    line-height: 17px;
    color: #777;
    text-shadow: 0 1px 0 #ffffff;
    background-color: rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.25);
    border-radius: 3px;
    box-shadow: 0 1px 1px rgb(12 13 14 / 15%), inset 0 1px 0 0 #ffffff;
    white-space: nowrap;
    font-size: 17px;
    background: #ececec;
    cursor: pointer;
    height: 22px;
    vertical-align: middle;
    font-weight: bold;
    margin-top: -4px;
  }
  
  .stats-header {
      background: var(--bg);
      padding-left: 18px;
      font-size: 20px;
      height: 60px;
      line-height: 60px;
      font-weight: bold;
  }
  
  #analytics {
      background: var(--analytics-ic);
      background-position: center center;
  }
  
  #paintbrush {
    background: var(--paintbrush-ic);
    background-position: center center;
    transform: scale(0.54);
  }
  
  #loom {
    background: var(--loom-ic);
    background-position: center center;
    transform: scale(0.39);
    margin-top: 3px;
  }
  
  #stix {
    background: var(--stix-ic);
    background-position: center center;
    transform: scale(0.41);
    margin-top: 3px;
  }
  
  #castle {
    background: var(--castle-ic);
    background-position: center center;
    transform: scale(0.56);
    margin-top: 3px;
  }
  
  #ghost-token {
    background: var(--ghosttoken-ic);
    background-position: center center;
    transform: scale(0.72);
    margin-top: -1px;
  }
  
  #dot-start { position: absolute; top: 0; left: -2px; width: 8px; height: 8px; background: #049e9e; border-radius: 50% }
  #dot-end { position: absolute; top: 0; right: -2px; width: 8px; height: 8px; background: #049e9e; border-radius: 50% }
  #dot-end-inner {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%
  }
  
  #sub-bio p { font-size: 15px; }
  
  /* shortens tweet links visually */
  #right-right span.linkified-url,
  .tweet span.linkified-url {
    position: relative;
    display: inline-block;
    overflow: hidden;
    max-width: 330px;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1000000; /*  clickable*/
    cursor: pointer;
    color: var(--subtle-text-color);
    vertical-align: top;
    font-weight: 700;
    font-size: 15.3px !important;
    line-height: 19.1px !important;
  }
  
  .tweet .linkified-url {
    color: var(--theme-bg) !important;
  }
  
  /*.tweet:hover .linkified-url {
    color: var(--theme-bg);
  }*/
  
  #bio-subsection {
    background: var(--bg);
  }
  
  .subsection-button {
    width: 64px;
    height: 64px;
    background: #37b2ff;
    border-radius: 50%;
    position: relative;
  }
  
  .subsection-dm {
    background: #37b2ff url('https://ghosttogether.net/static/dm-ic.png') no-repeat;
    background-position: center center;
    background-size: cover;
  }
  
  .subsection-coin {
    background: #37b2ff url('https://ghosttogether.net/static/coin-ic.png') no-repeat;
    background-position: center center;
    background-size: cover;
  }
  
  #challenge-console,
  #challenge-textarea {
      width:97.5%;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      padding: 8px 16px;
      font-size: 18px;
      transition: unset;
      resize: none;
      box-sizing: border-box;
      border-width: 2px;
  }
  
  #challenge-textarea:focus {
    border-color: #cccccc !important
  }
  
  #challenge-textarea {
      height: 47px;
      padding-left: 63px;
      background: url('https://ghosttogether.net/static/code-challenge-background.png');
      background-position: 0px 9px;
      overflow-y: hidden;
  }
  
  #challenge-console {
    background: black;
    color: #ccc;
    font-family: monospace, 'courier new';
    font-size: 17px;
    height: auto !important;
  }
  
  #challenge-view , #challenge-view * {
    transition: unset;
  }
  
  .run-code {
    font-size: 22px;
    font-weight: bold;
    padding-left: 11px;
  }
  
  .bigger-button {
    font-weight: bold;
    font-size: 21px;
  }
  
  .challenge-button {
    font-weight: bold;
    font-size: 21px;
  }
  
  .text-bar {
    background: white;
    padding-left: 18px;
    padding-top: 1px;
    font-size: 16px;
    line-height: 28px;
  }
  
  .text-bar * { font-size: 16px !important; }
  
  .challenge-ic {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-top: 7px;
    background: url("https://ghosttogether.net/static/challenge-flag-ic.png") center center no-repeat;
    cursor: pointer;
    opacity: 0.5;
    transform: scale(0.65);
  }
  
  .monospace-title {
      padding-left: 6px;
      padding-right: 6px;
      margin-left: 8px;
      margin-right: 8px;
      margin-top: 5px;
  }
  
  .run-code-cog {
      transition: 400ms !important;
      transform: rotate(0)
  }
  
  .run-code:hover .run-code-cog {
      transition: 400ms !important;
      transform: rotate(-30deg);
  }
  
  .spin600 {
      transition: unset !important;
      animation-duration: 2.0s !important;
      animation-direction: normal !important;
      animation-name: spin360 !important;
      animation-fill-mode: forwards !important;
      animation-iteration-count: infinite !important;
      animation-timing-function: linear !important;
  }
  
  @keyframes spin360 {
      from { transform: rotate(0) }
      to { transform: rotate(359deg) }
  }
  
  .yellow-bg {
     background-color: #FFBF00 !important;
  }
  
  .tweet-header-retweet {
     padding-top: 25px;
  }
  
  /* A retweeted tweet has more padding on top on mobile */
  body.iphone .copy-voted {
    padding-top: 10px;
  }
  
  body.iphone .retweeted-ic {
    left: -13px !important;
    top: 5px !important;
    transform: scale(1.45) !important;
    background-size: cover !important;
    display:none;
  }
  
  .mini-retweet-circle {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 13px;
    vertical-align: middle;
    margin-top: -2px;
    cursor: pointer;
    margin-right: 3px;
    z-index: 1000000000 !important;
    border: 2px solid var(--theme-bg);
    opacity: 0.7;
  }
  
  body.iphone .mini-retweet-circle {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--hl-brighterer) !important;
  }
  
  .mini-retweet-circle:hover {
      border: 2px solid var(--hl-brighterer);
  }
  
  .noborder, .no-border {
    border: 0;
  }
  
  .reddit-post-container {
    margin-top: 7px;
    overflow: hidden;
    width: calc(100% - 30px);
  }
  
  .reddit-post-title {
    font-weight: 500;
    margin-top: 7px;
    overflow: hidden;
    width: calc(100%);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
  }
  
  .reddit-post {
      font-size: 17px !important;
      color: #5f5f5f !important;
      margin-left: 10px !important;
  }
  
  .reddit-post {
      
  }
  
  .reddit-vote {
      width: 50px;
      height: 50px;
  }
  
  .reddit-up {
  
  }
  
  .reddit-down {
    
  }
  
  #settings-privacy-icon {
    position: absolute;
    top: 1px;
    right: 64px;
    width: 59px;
    height: 59px;
    display: block;
    background: url(https://ghosttogether.net/static/lock.png) center right no-repeat;
    /* transition: 0.3s; */
    /* transform: scale(0.75); */
    /* opacity: 0.5;*/
  }
  
  section.selected #settings-privacy-icon {
      transform: scale(0.80);
      opacity: 0.75;
  }
  
  .microaction.comment {
      margin-left: 10px
  }
  
  .microaction.love {
    opacity: 1
  }
  
  .hover-msg {
      background: #333;
      color: #ccc;
      position: absolute;
      top: -10px;
      left: 63px;
      transition: 0.4s;
      font-size: 13px;
      padding-left: 8px;
      padding-right: 8px;
      border-radius: 5px;
      line-height: 18px;
      transition: 0.3s;
      display: none;
      opacity: 1 !important;
  }
  
  .hover .hover-msg {
      display: block;
      padding-left: 26px;
      background: #000000 url(https://ghosttogether.net/static/tiny-stats.png) 5px 2px no-repeat;
      font-size: 12px;
  }
  
  #signup-rocket {
      position: absolute;
      display: block;
      top: 21px;
      left: 55px;
      width: 185px;
      height: 185px;
      background: url(https://ghosttogether.net/static/sign-up-rocket.png) no-repeat;
  }
  
  #rocket-platform {
      position: absolute;
      display: block;
      top: 206px;
      left: 11px;
      width: 284px;
      height: 185px;
      background: url(https://ghosttogether.net/static/rocket-platform.png) no-repeat;
  }
  
  
  #rocket-steam-box {
      top: 206px;
      left: 55px;
      width: 184px;
      height: 200px;
      position: absolute;
      display: block;
      overflow: hidden;
  }
  
  #steam-particles-1 {
      position: absolute;
      top: -205px;
      left: 0;
      width: 185px;
      height: 400px;
      background:url(https://ghosttogether.net/static/steam-particle-1.png) repeat-y;
      animation-name: steamparticles;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-play-state: running;
      animation-direction: normal;
      animation-timing-function: linear;
  }
  
  #spaceman {
      position: absolute;
      top: 58px;
      left: 55px;
      width: 300px;
      height: 300px;
      background:url(https://ghosttogether.net/static/spaceman.png) no-repeat;
      transition: 0.2s;
  }
  
  #steam-particles-2 {
      position: absolute;
      top: -205px;
      left: 0;
      width: 185px;
      height: 400px;
      background:url(https://ghosttogether.net/static/steam-particle-2.png) repeat-y;
      animation-name: steamparticles;
      animation-duration: 1.5s;
      animation-iteration-count: infinite;
      animation-play-state: running;
      animation-direction: normal;
      animation-timing-function: linear;
  }
  
  @keyframes steamparticles {
      from { top: -205px }
      to { top: -5px }
  }
  
  .width-600 {
      width: 600px !important;
  }
  
  #ui-header.width-600 * {
      max-width: 600px;
  }
  
  .dark-mode-button {
      width: 32px;
      height: 32px;
      position: relative;
      display: block;
      border-radius: 50%;
      background: #007fff;
      cursor: pointer;
  }
  
  .col-theme-0 { background: #555555 !important }
  .col-theme-1 { background: #235ccf !important } /* default */
  .col-theme-2 { background: #31914e !important } /* grass green */
  .col-theme-3 { background: #58b1a2 !important }
  .col-theme-4 { background: #FFBF00 !important } /* american cheese, yellow, amber */
  .col-theme-5 { background: #ca00af !important }
  .col-theme-6 { background: #6b31ff !important } /* violet */
  .col-theme-7 { background: #e0622e !important }
  .col-theme-8 { background: #1ea9e3 !important } /* blue sky */
  .col-theme-9 { background: #5a432f !important } /* brown */
  .col-theme-10{ background: #ff6ecc !important } /* rose */
  .col-theme-11{ background: #a30d14 !important } /* blood red */
  
  .col-theme-1d { background: #263b50 }
  .col-theme-2d { background: #34402e }
  .col-theme-3d { background: #354441 }
  .col-theme-4d { background: #423834 }
  .col-theme-5d { background: #443237 }
  
  .txt-theme-1 { background: #333333 }
  .txt-theme-2 { background: #555555 }
  .txt-theme-3 { background: #777777 }
  .txt-theme-4 { background: #999999 }
  .txt-theme-5 { background: #BBBBBB }
  .txt-theme-6 { background: #DDDDDD }
  .txt-theme-7 { background: #FFFFFF }
  
  body.default {
      
  }
  
  body.darkmode {
    background: var(--theme-background-color);
    color: #555;
  }
  
  
  /*  --bg:             #ffffff;                
      --disabled:       #222222;                
      --hl:             #111111;                
      --hl-brighter:    #222222;                
      --fg:             rgba(217,217,217,1.00); 
      --secondary-text: rgb(110, 118, 125);
      --line-border-0:  1px solid #555555;
      --line-border-1:  1px solid #333333;
      --line-border-2:  1px solid #111111;
      --overlay-bg:     #1f1f1f;
  */
  
  @keyframes flash {
      0% { color: var(--flash-start) }
      50% { color: var(--flash-mid) }
      100% { color: var(--flash-start) }
  }
  
  .flash-num {
      animation-name: flash;
      animation-direction: normal;
      animation-duration: 0.4s;
  }
  
  .semicolon-logo {
      display: none; /*inline-block;*/
      position: relative;
      width: 137px;
      height: 25px;
      background: var(--semicolon-logo)
  }
  
  .i-agree-button {
      display: inline-block;
      width: 24px;
      height: 24px;
      border-radius: 4px;
      border: 2px solid #adadad;
      vertical-align: middle;
      margin-right: 12px;
      margin-top:-4px
  }
  
  .i-agree-button:after {
      content: '';
      position: relative;
      display: block;
      width: 10px;
      height: 10px;
      background: var(--theme-bg);
      border-radius: 50%;
      margin: auto;
      margin-top: 5px;
  }
  
  #notif-text {
      display: none;
  }
  
  textarea, input {
      background: var(--bg-2);
      color: var(--text-color)
  }
  
  .elapsed {
    color: var(--subtle-text-color) !important;
  }
  
  .retweeted-ic {
    top: 2px;
    left: -16px;
    width: 16px;
    height: 16px;
    position: absolute;
    display: block;
    vertical-align: middle;
    background: var(--retweeted-ic);
    background-size: cover !important;
  }
  
  .comment-view {
    background: var(--bg)
  }
  
  .tweet .elapsed {
    /*transition: 0.4s;*/
  }
  .tweet:hover .elapsed {
     /* color:var(--hl-bright)*/
  }
  
  .on .love {
    /* opacity: 0.35 !important;*/
  }
  
  .less,
  .same,
  .more {
    font-size: 15px !important;
    /*line-height: 22px;*/
    /*line-height: 24px;*/
  }
  
  .sidebar-site-stats {
    position: relative;
  }
  
  .stats-num {
    position: absolute;
    width: auto;
    font-size: 14px;
    color: white;
  }
  
  .tiny-stats-ic {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-top: -2px;
  }
  .tiny-users {
    background: var(--tiny-icon-users);
  }
  
  .tiny-views {
    background: var(--tiny-icon-views);
  }
  
  .tiny-likes {
    background: var(--tiny-icon-likes);
    transform: scale(0.7);
  }
  
  
  
  #registernotes {
    display:none !important;
  }
  
  .community-link {
  
    padding: 10px;
    font-size: 18px;
    max-width: 400px;
    width: 100%;
    border: 2px solid teal;
    border-radius: 4px;
    border-color: var(--hl-brighter) !important;
  }
  
  .community-link:focus {
    border-color: var(--theme-bg) !important;
  }
  
  #is_typing {
    border-radius: 30px;  
    width: 50px;
    height: 20px;
    margin-left: 9px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
  }
  
  .opacity-0 {
    opacity: 0 !important;
  }
  
  .is_typing div {
    width: 5px;
    height: 5px;
    background: #aaa;
    border-radius: 50%;
    margin: 3px; 
    animation-name: typing; 
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  .ta1 { animation-duration: 0.4s }
  .ta2 { animation-duration: 0.5s }
  .ta3 { animation-duration: 0.6s }
  
  @keyframes typing {
    0% { margin-top: 0; transform: scale(1.0) }
    25% { margin-top: 8px; transform: scale(1.0) }
    50% { margin-top: -4px; transform: scale(1.0) }
    100% { margin-top: 0; transform: scale(1.0) }
  }
  
  #msg {
   
  }
  
  #dm-info {
      max-height: 166px;
      overflow-y: scroll;
  }
  
  .jobs #view {
    /*overflow-y: scroll*/
  }
  
  /*#view.overflowYScroll::-webkit-scrollbar-thumb:hover,*/
  .jobs #view::-webkit-scrollbar-thumb:hover,
  #dm-info::-webkit-scrollbar-thumb:hover,
  #contacts::-webkit-scrollbar-thumb:hover,
  #msg::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover-bg);
  }
  
  /*#view.overflowYScroll::-webkit-scrollbar,*/
  .jobs #view::-webkit-scrollbar,
  #dm-info::-webkit-scrollbar,
  #contacts::-webkit-scrollbar,
  #msg::-webkit-scrollbar {
    width: 10px;  
  }
  
  /* all default scrollbars */
  /*#view.overflowYScroll::-webkit-scrollbar-track,*/
  .jobs #view::-webkit-scrollbar-track,
  #dm-info::-webkit-scrollbar-track,
  #contacts::-webkit-scrollbar-track,
  #msg::-webkit-scrollbar-track {
    /*-webkit-border-radius: 10px;*/
    /*border-radius: 10px;*/
    background: var(--bg);
  }
  
  /*#view.overflowYScroll::-webkit-scrollbar-thumb,*/
  .jobs #view::-webkit-scrollbar-thumb,
  #dm-info::-webkit-scrollbar-thumb,
  #contacts::-webkit-scrollbar-thumb,
  #msg::-webkit-scrollbar-thumb {
    /*-webkit-border-radius: 10px;*/
    /*border-radius: 10px;*/
    background: var(--scrollbar-bg);
    margin: 5px;
  }
  
  /* contacts sidebar should be brighter*/
  #contacts::-webkit-scrollbar-track {
    background: var(--bg-hl);
  }
  
  #msg {
  
  }
  
  #is_backspacing {
    width: 24px;
    height: 24px;
    position: relative;
    display: block;
    background: var(--backspace-chat-ic);
    background-size: cover;
    transform: scale(0.75) !important;
    margin-top: -10px;
    transition: 0.1s;
  }
  
  #is_backspacing.larger {
    transform: scale(0.8);
  }
  
  #navbar-messages-count {
    position: absolute;
    top: -4px;
    left: 24px;
    width: auto;
    height: 21px;
    color: var(--hl-brightest);
    text-align: center;
    line-height: 20px;
    border-radius: 16px;
    font-weight: bold;
    font-size: 15px;
    /*font-family: Arial;*/
    /*background: var(--theme-bg);*/
    /*border: 2px solid #111111;*/
  }
  
  .news_story_desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
  
  a[name] {
    color: var(--anchor-name-color);
  }
  
  #writer-apply-container input {
    color: var(--theme-bg) !important;
  }
  
  .avatar-style {
      border-radius: 40% !important
  }
  
  .tweet-avatar {
      position: relative;
      display: inline-block;
      /*width: 57px;
      height: 57px;*/
      width: 40px;
      height: 40px;
      border-radius: 5px;
      /*border-radius: 3px;*/
      z-index: 1;
      top: 11px;
      background-position: center !important;
  }
  
  .tweet-icon-YT {
      position: relative;
      display: inline-block;
      float: left; 
      width: 74px;
      height: 49px;
      margin-right: 10px;
      background: url(https://ghosttogether.net/static/youtube-logo.png) no-repeat;
  }
  
  body.darkmode .tweet-icon-YT:hover {
    position: relative;
    display: inline-block;
    float: left; 
    width: 74px;
    height: 49px;
    margin-right: 10px;
    background: url(https://ghosttogether.net/static/youtube-logo.png) no-repeat;
  }
  
  .tweet-icon-IMG {
    position: relative;
    display: inline-block;
    float: left; 
    width: 74px;
    height: 49px;
    margin-right: 10px;
    background: url(tweet-icon-image.png) no-repeat;
  }
  
  body.darkmode .tweet-icon-IMG:hover {
    position: relative;
    display: inline-block;
    float: left; 
    width: 74px;
    height: 49px;
    margin-right: 10px;
    background: url(tweet-icon-image-on.png) no-repeat;
  }
  
  
  
  .tweet-edited {
    position: relative;
    display: inline-block;
    vertical-align: center;
    transform: scale(0.75);
    top: 3px;
    width: 16px;
    height: 16px;
    background: url('https://ghosttogether.net/static/edited-tiny.png') center center no-repeat;
  }
  
  body.darkmode .tweet-edited {
    width: 16px;
    height: 16px;
    background: url('https://ghosttogether.net/static/edited-tiny-dark.png') center center no-repeat;
  }
  
  body .tweet-monospace {
    background: unset;
    font-family: monospace, courier, arial;
    padding-left: 1px;
    padding-right: 1px;
    font-size: inherit;
    color: #333333;
    /*font-weight: bold;*/
  }
  
  body.darkmode .tweet-monospace {
    background: unset;
    font-family: monospace, courier, arial;
    padding-left: 1px;
    padding-right: 1px;
    font-size: inherit;
    color: var(--hl-brightest-dim);
    /* font-weight: bold;*/
  }
  
  body .tweet kbd {
      display: inline-block;
      margin: 0 .1em;
      padding: 1px 4px;
      font-size: 11px;
      line-height: 13px;
      color: #969696;
      text-shadow: 0 1px 0 #ffffff;
      background-color: rgba(0,0,0,0.15);
      border: 1px solid rgba(0,0,0,0.25);
      border-radius: 3px;
      box-shadow: 0 1px 1px rgb(12 13 14 / 15%), inset 0 1px 0 0 #ffffff;
      white-space: nowrap;
      font-size: 15px;
      background: #ececec;
      cursor: pointer;
      height: 18px;
      vertical-align: middle;
      font-weight: bold;
      margin-top: -3px;
  }
  
  /* in-tweet only */
  body.darkmode .tweet kbd {
      display: inline-block;
      margin: 0 .1em;
      padding: 1px 4px;
      font-size: 11px;
      line-height: 13px;
      color: #969696;
      text-shadow: 0 1px 0 #000000;
      background-color: rgba(0,0,0,0.15);
      border: 1px solid rgba(0,0,0,0.25);
      border-radius: 3px;
      box-shadow: 0 1px 1px rgb(74 74 74 / 85%), inset 0 2px 9px #8e8e8ead;
      white-space: nowrap;
      font-size: 16px;
      background: linear-gradient(180deg, #636363, 10%, transparent);
      cursor: pointer;
      height: 18px;
      vertical-align: middle;
      font-weight: bold;
      margin-top: -4px;
  }
  
  body.darkmode i#o,
  body.darkmode i#x,
  body.darkmode #w,
  body.darkmode #j {
    z-index: 100000000;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    /* align-items: center; */
    /*background: rgb(255 255 255 / 8%);*/
    /*background: rgb(0 0 0 / 65%);*/
    /*background: #242d34;*/
    background: #242d34aa;
  }
  
  .iphone i#o {
    background: unset !important;
  }
  
  body.iphone.darkmode i#o.show {
    background: rgb(0 0 0 / 76%) !important;
  }
  
  .hashtag-hash {
    /* color: var(--hashtag-hash-color); */
    font-family: inherit;
  }
  
  #sidebar-user {
    max-width: 800px;
  }
  
  body.darkmode {
    background: var(--hl)
  }
  
  body.darkmode .wide-user-header {
    background: #045161 url(https://ghosttogether.net/static/1500x500.jpg) center center no-repeat;
    background-size: cover;
    box-shadow: 0 0 10px #000 inset;
  }
  
  #navigation-bar {
    position: sticky;
    top: 0;
  }
  
  #nav-bar {
    position: sticky;
    top: 0px;
  }
  
  .microaction.retweet {
    transform: scale(0.8);
        margin-left: 14px;
  }
  
  .microaction.love {
    transform: scale(1.06)
  }
  
  .premium-icon {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 48px;
    background: var(--icon-premium)
  }
  
  .premium-features-list li {
    font-size: 16px !important
  }
  
  body .draft-editor input,
  body .draft-editor textarea {
    transition:unset !important;
  }
  
  body.darkmode .draft-editor input {
    background: black;
    background-color: black;
  }
  
  body.darkmode .draft-editor textarea,
  body.darkmode .draft-editor textarea:hover {
    border: 2px solid #555;
  }
  
  
  #main-button {
    z-index: 100000000;
  }
  
  .open-link {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 48px;
    background: var(--icon-open-link)
  }
  
  .share-link {
    border: 2px solid #555555;
    border-radius: 6px;
    margin-top: 24px;
    margin-left: -16px;
    overflow: hidden;
  }
  
  .share-link input {
    width: 60%;
    background: transparent;
    border: 0 !important;
    padding-left: 16px;
  }
  
  .copy-link-msg {
    line-height: 36px;
  }
  
  .share-it {
    background: #555555;
    color: #cccccc;
    line-height: 36px;
    font-weight: bold;
    text-align: center;
    width: 170px;
  }
  
  .unread-chat {
    background: var(--bg-hl)
  }
  
  .chatter-last-message {
    text-overflow: ellipsis;
    /*max-width: 207px;*/
    max-width: calc(100% - 82px);
    overflow-x: clip;
    color: #888;
    font-size: 14px;
    margin-top: -1px;
  }
  
  /* on mobile contact tab is wider */
  .iphone .chatter-last-message {
    max-width: 250px;
  }
  
  .chatter.active {
    border-right: 1px solid var(--theme-bg);
  }
  
  .chatter.highlighted {
    background-color: var(--bg-chat-just-received) !important;
    color: white !important;
  }
  .chatter.highlighted * {
    color: white !important;
  }
  
  .iphone .tweet * {
    transition: 0.3s
  }
  
  .tweet.highlighted {
    background-color: var(--theme-bg) !important;
    color: white !important;
  }
  
  .tweet.highlighted * {
    color: white !important;
  }
  
  
  
  .word {
    position: relative;
    display: inline-block;
    background: var(--bg-555);
    color: var(--hl-bright);
    font-size: 14px;
    border-radius: 16px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 2px;
  }
  
  .word .count {
    color: var(--hl-brightest)
  }
  
  #dm-info {
    padding: 4px;
    padding-top: 3px;
  }
  #dm-info-header {
    padding: 7px;  
  }
  .dm-info-container {
    /*padding: 7px;*/
    max-width: 320px;
  }
  
  #premium-button {
    background: #37b2ff;
  }
  
  /* disable chat image upload button for now*/
  #message-image {display:none}
  
  .message-timestamp {
    font-size: 15px;
    min-width: 20px;
    position: absolute;
    top: -1px;
    right: 12px;
    /*font-weight: 700;*/
  }
  
  #job-post { padding-right: 50px }
  #job-post textarea,
  #job-post input {
    transition:0s;
    border-width: 1px !important;
    background: transparent;
    border: 1px solid var(--input-border-color)
  }
  #l4w-post select,
  #job-post select {
    padding: 6px;
    border-radius: 2px;
    color: var(--text-color);
    font-size: 16px;
    background: transparent;
    border: 1px solid var(--input-border-color)
  }
  #job-char-level {
    margin-top: 2px;
    font-size: 13px;
  }
  
  .px16 {
    font-size: 16px !important;
  }
  
  .error {
    color: var(--error-color)
  }
  
  .complete {
    color: var(--complete-color)
  }
  
  #icon-darkmode {
    position: fixed;
    top: 24px;
    right: 16px;
    z-index: 1;
  }
  
  #header#navigation-bar {
    margin-left: 2px; margin-top: 16px; width: 112px; height: 21px
  }
  
  .go-back,
  /*.nav-tab,*/
  #page-title {
    color: var(--hl-brightest);
    /*background-color: var(--title-bar) !important;*/
  }
  
  #nav-bar {
    /* background-color: var(--title-bar) !important; */
    /*overflow: hidden;*/
  }
  
  #left {
    display: block;
  }
  
  .nav-icon {
    width: 40px;
    height: 40px;
    margin: 6px;
    position: relative;
    display: inline-block;
    background: var(--nav-icon-set);
    background-position: 0 0
  }
  .nav-tab:hover .nav-icon { background-position: -40px 0 }
  .nav-tab.active .nav-icon {
      background-position-x: -80px !important;
      background-color: var(--navbar-active-circle-color);
      border-radius: 50%;
  }
  .nav-tab.active .nav-text { color: var(--theme-bg) }
  
  #left div:nth-child(2) .nav-icon { background-position-y: calc(-40px * 1) }
  #left div:nth-child(3) .nav-icon { background-position-y: calc(-40px * 2) }
  #left div:nth-child(4) .nav-icon { background-position-y: calc(-40px * 5) }
  
  #left div:nth-child(5) .nav-icon { background-position-y: calc(-40px * 6) }
  #left div:nth-child(6) .nav-icon { background-position-y: calc(-40px * 7) }
  
  #left div:nth-child(7) .nav-icon { background-position-y: calc(-40px * 6) }
  #left div:nth-child(8) .nav-icon { background-position-y: calc(-40px * 7) }
  #left div:nth-child(9) .nav-icon { background-position-y: calc(-40px * 8) }
  
  /*
  #left .nav-tab:nth-child(9).active .nav-icon { background-position-y: calc(-40px * 7); border:1px solid red; transform: rotate(60deg) }
  */
  
  
  .nav-text {
    padding-left: 20px;
    font-size: 19px;
    font-weight: bold;
    color: var(--hl-brightest);
  }
  
  #left {
    /*min-width: 300px;*/
    /*min-width: 248px;*/
    min-width: 143px;
  }
  
  #left div {
    cursor: pointer;
  }
  
  #left div:hover {
    /* color: var(--theme-bg) jan-3-2024 used to highlight menu words */
  }
  
  #subroot.messages { min-width: 352px }
  @media screen and (max-width: 950px) {
    #subroot.messages { display: none; }
  }
  @media screen and (max-width: 1100px) {
    #subroot.messages { min-width: 300px }
  }
  
  @media screen and (max-width: 1300px) {
    .nav-text { display: none }
    #left {
      /* min-width: 80px;
      margin-left: 32px */
    }
  }
  
  #premium-button {
  display:none
  }
  
  .h-400 { height: 400px }
  
  #left.w-248 { width: 248px }
  #left.w-550 { width: 550px }
  #left.w-525 { width: 525px !important }
  #left.w-700 { width: 700px }
  #left.w-600 { width: 600px }
  #left.w-650 { width: 650px }
  #left.w-500 { width: 500px }
  #left.w-450 { width: 450px }
  #left.w-400 { width: 400px }
  #left.w-350 { width: 350px }
  #left.w-370 { width: 370px }
  #left.w-390 { width: 390px }
  #left.w-300 { width: 300px }
  #left.w-420 { width: 420px }
  
  #subroot.w-248 { width: 248px }
  #subroot.w-550 { width: 550px }
  #subroot.w-525 { width: 525px !important }
  #subroot.w-700 { width: 700px }
  #subroot.w-600 { width: 643px } /* was 611px july 27, 650px, was 600px, was 679px 2-24-2023, now 650 */
  #subroot.w-650 { width: 650px }
  #subroot.w-679 { width: 679px }
  #subroot.w-500 { width: 500px }
  #subroot.w-450 { width: 450px }
  #subroot.w-400 { width: 400px }
  #subroot.w-350 { width: 350px }
  #subroot.w-370 { width: 370px }
  #subroot.w-300 { width: 300px }
  #subroot.w-420 { width: 420px }
  #subroot.w-800 { width: 800px } /* stack overflow, reddit, quora, etc */
  
  #right.w-248 { width: 248px }
  #right.w-370 { width: 370px }
  #right.w-700 { width: 700px }
  #right.w-600 { width: 600px }
  #right.w-650 { width: 650px }
  #right.w-500 { width: 500px }
  #right.w-550 { width: 550px }
  #right.w-525 { width: 525px !important }
  #right.w-500 { width: 500px }
  #right.w-450 { width: 450px }
  #right.w-400 { width: 400px }
  #right.w-350 { width: 350px }
  #right.w-300 { width: 300px }
  #right.w-420 { width: 420px }
    
  #jobs-multi-popup {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      border: var(--line-border-0);
      background: var(--bg)
  }
  
  .sub-item {
    font-size: 19px;
    font-weight: bold;
    color: var(--hl-brightest);
  }
  
  .sub-item:hover {
      background: var(--bg-hl)
  }
  
  .job2x {
      overflow: hidden;
      transition: 0.4s;
  }
  .tab-closed {
      height: 0;
  }
  
  .job-listing.active {
    border-right: 1px solid var(--theme-bg);
  }
  
  .job-listing.highlighted {
    background: var(--bg-hl) !important;
    background-color: var(--bg-hl) !important;
  }
  
  #main-button {
    /* margin-right: 16px; */
  }
  .job-button,
  .post-job-button {
      padding: 1px 17px;
  }
  
  .sticky {
    /*top: -11px;*/
    top: 0;
    position: sticky;
  }
  
  #right {
      position: relative;
  }
  
  #job-post-description {
      min-height: 71px !important
  }
  
  .nav-bookmark {
    background-position-y: calc(-40px * 3)  
  }
  
  /*
  div:hover .nav-bookmark {
    background-position: -40px 0 !important
  }*/ 
  div.active .nav-bookmark {
      background-position-x: -80px !important;
      background-color: var(--navbar-active-circle-color);
      border-radius: 50%;
  }
  div.active .nav-text { color: var(--theme-bg) }
  
  .sidebar-alert {
    background: var(--bg-2);
    border: 1px solid var(--bg-2);
    border-radius: 50%;
    font-size: 15px;
    width: 22px;
    height: 22px;
    font-weight: bold;
    position: absolute;
    top: 6px;
    right: 5px;
  }
  
  #contacts,
  #contacts-list {
    /*width: 403px;*/
    /*370px;*/
  }
  
  #contacts {
    /* max-height: calc(100% - 0px) */
  }
  
  #page-title-ext {
    padding-left: 20px;
    justify-content: space-between;
  }
  
  .master-dm-height {
      height: 100%;
  }
  
  #view {
    height: 100%;
    overflow-x: hidden;
  }
  
  body.iphone #view {
    /* should be this on mobile */
    overflow-x: hidden;
  }
  
  .overflow-hidden {
    overflow: hidden;
  }
  
  .overflowXScroll {
    overflow-x: scroll;
  }
  
  .overflowXScroll::-webkit-scrollbar {
    height: 4px;
  }
  
  .overflowYScroll {
      overflow-y: scroll;
  }
  
  .overflowYScroll::-webkit-scrollbar {
    width: 0px;  
  }
  
  #msg {
    height: 100%;
  }
  
  #right-right {
    /* padding-left: 4px; */
  }
  
  #right-right.DirectMessageLane {
    /*height: calc(100% - 131px) !important;*/
    /*min-height: calc(100% - 131px) !important;*/
    /*height: calc(100% - 211px) !important;*/  
    /* height: 100%; */
    /*overflow-y: scroll;*/
  }
  
  .DirectMessageLane {
    /*overflow-y: scroll;*/
    /*height: calc(100% - 90px);*/
    /*border: 1px solid var(--theme-bg);*/
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    height: 100%;
  }
  
  .ga-chk.off {
    width: 47px;
    height: 47px;
    max-width: 47px;
    max-height: 47px;
    background: #333;
    border-radius: 50%;
    color: white;
    transition: 0s;
  }
  
  .ga-tab {
    width: 100%;
    transition: 0s;
  }
  
  .ga-text {
    padding-left: 24px;
    color:white !important;
    transition: 0s;
  }
  
  .ga-note {
    font-size: 15px;
    color: white;
    padding-top: 8px;
    transition: 0s;
  }
  
  .ga-btn {
    background: cornflowerblue;
    padding: 10px 20px;
    border-radius: 51px;
    cursor: pointer;
    width: 230px;
    transition: 0s;
  }
  
  .ga-input {
    min-width: 227px;
    transition: 0s;
  }
  
  .spa {
      /* always show vertical scrollbar in spa -- changed on 1/12/2023 */
      /*overflow-y: scroll;*/
      overflow-y: clip;
  }
  
  .spa #view::-webkit-scrollbar {
    background: var(--bg);
    width: 0;/*1px;*/
  }
  .spa #view::-webkit-scrollbar-thumb {
    background: var(--theme-bg);
  }
  
  #notes-bar::-webkit-scrollbar-track {
    background: unset !important;
  }
  
  .highlight-on-hover:hover {
      background-color: var(--bg-hl-subtle);
  }
  
  .premium-icon {
      position: relative;
      display: inline-block;
      min-width: 48px;
      min-height: 48px;
      opacity: 0.25;
      background: url(https://ghosttogether.net/static/empty-job-avatar.png) no-repeat;
      background-size: 100%;
  }
  
  .premium-option.active {
    border-right: 1px solid var(--theme-bg);
  }
  
  .premium-option.highlighted {
    background: var(--bg-hl) !important;
    background-color: var(--bg-hl) !important;
  }
  
  .playlist-tag {
    padding-left: 7px;
    padding-right: 7px;
    background-color: var(--bg-333) !important;
    border-radius: 3px;
  }
  
  #left.folded {
      min-width: 80px;
      margin-left: 32px;
  }
  
  #left.folded .nav-text {
    display:none !important;
  }
  
  .prem-anim {
    width: 48px;
    height: 19px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    margin-top:1px
  }
  
  .prem-arrows {
    position: absolute;
    display: block;
    top: 1px;
    left: 0;
    width: 96px;
    height: 32px;
    animation-name: slideleft;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 0.8s;
  }
  
  @keyframes slideleft {
    from { left: 0 }
    to { left: -60px }
  }
  
  #premium-credit-card,
  #premium-choices {
    height: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 0;
  }
  
  .premium-opt {
    width: 100px;
    height: 48px;
    border: 1px solid var(--bg-444);
    border-radius: 5px;
    font-size: 15px;
  }
  
  .premium-opt:hover {
    border: 1px solid var(--bg-666);
  }
  
  .clickable-question {
    min-width: 20px;
    min-height: 20px;
    text-align: center;
    display: inline-block;
    border: 1px solid var(--bg-666);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }
  
  .clickable-question:hover {
    border: 1px solid var(--bg-888);
  }
  
  #premium-buy-button {
    border-radius: 50px;
  }
  
  .tweet.active {
    border-right: 1px solid var(--theme-bg);
  }
  
  .ib {
    display: inline-block;
  } 
  
  .r1-fly { top: -32px !important; }
  .r2-fly { top: 0px !important; }
  
  textarea#letter-subcomment.err {
    border: 1px solid var(--error-color) !important
  }
  
  .notif-msg {
    background: var(--notification-bg);
    color: var(--notification-color);
    border-radius: 4px;
    margin: 5px;
    transition: 0.4s;
    opacity: 1;
  }
  
  .notif-msg.fade-out {
    opacity: 0 !important;
  }
  
  input { transition: unset !important; }
  
  .you {
    /*background: var(--you-bg);*/
    color: var(--you-fg);
    font-size: 13px;
    /*font-weight: bold;*/
    /*padding-left: 5px;*/
    padding-right: 4px;
    border-radius: 4px;
    margin-right: 2px;
  }
  
  #typing {
    display: block;
    position: relative;
    width: 25px;
    height: 25px;
    overflow: hidden;
    transform: scale(0.6);
    margin-top: -15px;
  }
  
  .in {
    position: absolute;
    top: 0;
    left: 0;
    animation: type 0.4s infinite;
  }
  
  .ll {
    position: relative;
    animation: ll 1s infinite;
    animation-timing-function: step-end;
  }
  
  .line {
    width: 25px;
    height: 4px;
    margin: 4px;
    background: white;
    border-radius: 5px;
  }
  
  .last {
    width: 8px  
  }
  
  @keyframes type {
    0% { top: 0 }
    100% { top: -8px }
  }
  
  @keyframes ll {
    0% { width: 0 }
    25% { width: 6px }
    50% { width: 13px }
    75% { width: 25px }
    99% { width: 25px }
  }
  
  .msg-status {
    width: 22px;
    height: 19px;
    position: absolute;
    right: 6px;
    bottom: 2px;
    opacity: 0.75;
  }
  
  .delivered { display: none }
  .seen { display: none }
  .msg-sent .delivered {
    display: block;
    fill: var(--theme-bg);
    margin-left: 5px;
  }
  .msg-seen .seen {
    display: block;
    fill: var(--theme-bg);
    margin-left: 5px;
  }
  
  .msg-read {
    background: url('https://ghosttogether.net/static/msg-read.png') no-repeat;
  }
  
  .msg-unread {
      
  }
  
  .msg-unread:after {
    width: 7px;
    height: 7px;
    right: -7px;
    bottom: -5px;
    border-radius: 10px;
    display: block;
    position: relative;
    background: var(--theme-bg);
    content: '';
  }
  
  #sub-navigation-bar {
    height: 61px;
    overflow: hidden;
    position: relative;
  }
  
  /* mobile */
  #below { display:none }
  
  @media screen and (max-width: 780px) {
      body { border:2px sol id red !important}
      #view,
      #subroot {
        width: 100% !important;
        max-width: unset !important;
        min-width: unset !important;
      }
      #left {
        display: none;
      }
      #below {
        height: 100px;
        width: 100%;
        bottom: 0;
        left: 0;
        display: flex;
        position: fixed;
        background: var(--bg-hl);
        z-index: 100000000000000;
        box-sizing: border-box;
      }
      #below .below-button {
        color: var(--fg)
      }
      #subroot.mobile-none {
        display: none !important;
      }
      /* this will override non-mobile fold that hides this view */
      #right.mobile-force {
        display: block !important;
      }
      #right.mobile-none {
        display: none !important;
      }
  }
  
  .likes-number,
  .like-button {
    display: none;
  }
  
  .tweet-buttons {
  
  }
  
  #stripe { display: none; }
  
  #premium-support-icon { display: none }
  
  h1.large-text {
    font-family: 'neutrabold', sans-serif;
    /*font-size: 30px !important;
    font-size: 39px !important;*/
    font-size: 28px !important;
  }
  
  .medium-text {
    font-size: 20px;
  }
  
  .iphone-only {
    display: none !important
  }
  
  .minifiedGhost {
    width: 32px !important;
    height: 32px !important;
    display: inline-block !important;
    margin-top: -1px !important;
    vertical-align: top !important;
  }
  
  .tweet-buttons {
    margin-left: -3px;
    min-height: 30px;
    margin-top: 9px;
    z-index: 100000;
    padding-bottom: 1px; 
  }
  
  .twhbv-font-size,
  .twhbv-font-size * {
    font-size: 15px !important;
  }
  
  /* for iPhone only */
  @media screen and (max-width: 780px) {
      body.iphone {}
  
      body.iphone .tweet-buttons {
        margin-top:-9px !important;
        
      }
  
      body.iphone #log-in-to-access {
        position: absolute;
        top: 0;
        z-index: 1000000000000;
      }
  
      body.iphone .login-message {
        font-size: 24px !important;
      }
  
      body.iphone #nav-bar {
        display: none !important;
      }
  
      body.iphone #article-header-image-container {
        display: none !important;
      }
  
      body.ison-home.iphone #post-note-main {
        font-size: 19px;
        margin-top:-1px;
        line-height: 22px;
        margin-left: 14px !important;
      }
  
      
      body.ison-home.iphone #topmost-tweet-separator {
        margin-top: 5px;
      }
  
      body.ison-home.iphone #letter-main {
        /*font-size: 30px !important*/
      }
  
      body.iphone .ui-width-height {
        height: 185px !important
      }
  
      body.iphone .ui-text{
        font-size: 22px;
      }
  
      body.iphone .CurrentView {
        display: block !important;
      }
  
      body.iphone #subroot.iphone-none {
        display: none !important;
      }
  
      body.iphone .contacts-ava {
        width: 64px !important;
        height: 64px !important;
      }
  
      body.iphone #sub-navigation-bar {
        display: none
      }
  
      /* make sure this only applies to chat view */
      body.iphone #right-right.DirectMessageLane {
        /*height: calc(100% - 260px) !important;
        min-height: calc(100% - 260px) !important;*/
        /*border: 2px solid blue*/ 
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        height: 100%;      
      }
      
      body.iphone .message-timestamp {
        font-size: 21px;
        margin-right: 10px;
        margin-top: 0 !important;
        top: -2px !important;
        right: -2px !important;
      }
  
      body.iphone .txt {
        margin-left: 36px !important;
      }
  
      body.iphone .txt .auth {
        max-width: 319px !important;
      }
  
      body.iphone .txt .auth * {
        font-size: 21px;
      }
  
      body.iphone .contacts-text-block {
        display: block !important;;
        margin-top: 10px;
      }
  
      body.iphone .msg-status {
        right: 6px;
        bottom: 8px;
        opacity: 0.75;
        transform: scale(1.3);
      }
  
      body.iphone .chatter {
        padding-top: 15px !important;
        padding-bottom: 16px !important;
      }
  
      body.iphone #contacts-list {
        padding-bottom: 200px;
      }    
  
      body.iphone #contacts-list,
      body.iphone .chatter,
      body.iphone #contacts {
        width: 100% !important;
      }
      body.iphone .input-tiny-user {
        font-size: 24px;
        height: 44px;
        border: 0 !important;
        background-image: unset;
        width: calc(100% - 10px);
        margin-left: 5px !important;
      }
  
      body.iphone .input-tiny-user::placeholder {
        color: var(--placeholder)
      }
  
      body.iphone .notification-header {
        margin-bottom: 9px;
      }
  
      body.iphone .notification-user {
        width: 45px;
        height: 45px;
        background: gray;
        border-radius: 50%;
      }
  
      body.iphone .notification-text,
      body.iphone .notification-text * {
        font-size: 19px !important;
      }
      
      body.iphone .notification-action *,
      body.iphone .notification-action {
        font-size: 19px !important;
        color: var(--hl-brightest) !important;
      }
  
      body.iphone #page-title {
        font-size: 25px;
      }
  
      body.iphone #next {
        overflow-y: scroll;
      }
  
      body.iphone .iphone-only {
        display: flex !important
      }
  
      body.iphone #back-button-L {
        z-index: 10000000000000;
        position: fixed;
        top: 2px;
        left: 6px;
      }
  
      body.iphone #view {
        transition: 0.3s !important
      }
  
      body.iphone #stripe { 
      }
  
      body.iphone .medium-text {
        /*font-size: 27px;*/
      }
  
      body.iphone #notif-cont {
        display: none
      }
  
      body.iphone #letter-main {
        font-size: 22px;
      }
  
      body.iphone #letter-subcomment {
      
      }
  
      body.iphone .tweet-buttons {
        margin-left: -3px;
        min-height: 36px;
        margin-top: -9px;
        z-index: 100000;
        padding-bottom: 1px;
      }
  
      body.iphone .likes-number {
        position: absolute;
        bottom: 3px;
        right: 65px;
        text-align: right;
        min-width: 16px;
        display: block;
        font-size: 20px;
        /*font-weight: bold;*/
      }
  
      body.iphone .likes-number .less,
      body.iphone .likes-number .same,
      body.iphone .likes-number .more {
        /* color: #ffffff !important; */
      }
  
      /* remove all tweet UI buttons*/
      body.iphone .action-container{
        display: none;
      }
  
      body.iphone .tweet-buttons {
        /*min-height: 53px;*/
      }
  
      /* add large mobile Like button */
      body.iphone .like-button {
        display: block;
        position: absolute;
        bottom: 2px;
        right: 22px;
   
        width: 25px;
        height: 25px;
        background: var(--eye);
        background-size: cover;
        background-position: center;
        transform: scale(0.88);
        opacity: 0.5;
      }
  
      .twhbv {
        margin-right: 6px;
        margin-left: 7px;
        font-size: 15px;
      }
  
  
  
      body.iPhone .twhbv {
        display: none;
      }
      
      body.iphone .like-button.on {
        background-image: url(https://ghosttogether.net/static/heartempty.svg); /* heartfill */
      }
  
      body.iphone #view,
      body.iphone #subroot {
        width: 100% !important;
        max-width: unset !important;
        min-width: unset !important;
      }
      body.iphone #left {
        display: none;
      }
      body.iphone #below {
        height: 58px;
        width: 100%;
        bottom: 0;
        left: 0;
        display: flex;
        position: fixed;
        background: var(--bg-hl);
        z-index: 100000000000000;
      }
      body.iphone #below .below-button {
        color: var(--fg);
        top: 10px;
        height: 45px
      }
      body.iphone .tweet-text {
        color: 5px solid red !important;
        /*font-size: 18.4px !important;*/
        /*font-size: 19.1px !important;
        line-height: 25px !important;*/
        font-size: 21px !important;
        line-height: 28px !important;
      }
      body.iphone .tweet-text {
        padding-left: 55px;
        padding-right: 10px;
        z-index: 100;
      }
      body.iphone .tweet-avatar {
        width: 64px;
        height: 64px;
        margin-top: 5px;
        position: absolute;
        top: 20px !important;
        left: 12px;
      }
      body.iphone .tweet-header {
        font-size: 21px !important;
        left: 59px;
        top: 1px;
        font-size: 17px;
        padding-top: 19px;
        width: 100%;
        max-width: 297px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: normal;
        white-space: nowrap;
        display: inline-block;
  
      }
      body.iphone #selected-tweet-text-container {
        font-size: 25px !important;
      }
  
      /*
        #tweet-text-1,
        #tweet-text-2 */
  
      .tweet-text {
        z-index: 100000000000000;
      }
  
      .tweet-text * {
        z-index: 100000000000000;
      }
  
      body.iphone .target-action {
        left: 82px;
        top: 4px;
        font-size: 18px !important;
      }
  
      body.iphone #HistoryOverlay {
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        /*margin-top: 125px;*/
        pointer-events: none;
        transition: 0.3s;
        overflow: hidden;
        z-index: 99999999; /* right before i#o*/
      }
  
      /* --- mobile opener templates --- */
      body.iphone .Next_template {
        position: absolute;
        top: 1px;
        left: 100%;
        width: 100%;
        height: 100%;
        background: var(--bg);
        transition: 0.3s;
        /*margin-top: 125px;*/
      }
  
  
  
      body.iphone .Next_template.open {
        left: 0;
      }
  
      body.iphone #view.displace {
        margin-left: -200px
      }
  
      body.iphone #subroot.none {
          display: none !important;
      }
  
      /* DM view */
      body.iphone .dm-user-circle {
        width: 64px;
        height: 64px;
        min-width: 64px;
      }
  
      body.iphone .dm-bubble {
        font-size: 21px;
      }
  
      body.iphone #right {
        /* border: 1px solid red; */
      }
  
      body.iphone #msg {
        /* border: 3px solid red; */
      }
  
      body.iPhone #right {
        /*min-height: calc(100% - 100px) !important;
        height: calc(100% - 100px) !important;*/
        /*height: calc(100% - 99px) !important;*/
        /*height: calc(100% - 101px) !important;*/
        height: calc(100% - 101px) !important;
      }
  
      body.iphone #right-right {
        height: calc(100% - 89px) !important;
      }
  
      body.iphone .sticky {
        height: calc(100% - 38px);
      }
  
      body.iphone #message {
        z-index: 1000000000000;
      }
  
      body.iphone.ison-msg #write-button {
        display:none;
      }
  
      body.iphone.ison-msg #page-title-ext {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
      }
  
      body.iphone .msg-input {
        font-size: 22px !important;
      }
  
      body.iphone #emoji-selector {
        top: 20px !important;
        right: 16px !important;
        width: 35px !important;
        height: 35px !important;
      }
  
      body.iphone .dm-theirs .dm-bubble {
        max-width: 350px;
      }
  
      body.iphone .dm-mine .dm-bubble {
        /*margin-right: 15px !important;*/
      }
  
      body.iphone .dm-theirs .dm-timestamp {
        margin-left: 97px !important;
        margin-top: 3px !important;
      }
      
      body.iphone #dm-recipient-avatar {
        width: 64px !important;
        height: 64px !important;
        margin-right: 5px !important;
      }
  
      body.iphone.ison-msg #dm-recipient-displayname {
        font-size: 21px !important;
        font-family: arial;
        font-weight: 600 !important;
      }
  
      body.iphone.ison-msg #dm-recipient-username {
        color: var(--elapsed) !important;
        font-size: 20px !important;
        font-weight: normal !important;
        margin-left: 2px;
      }    
  }
  
  #msg {
    /*border-color: green !important;*/
    height: 100% !important;
    min-height: 100% !important;
  }
  
  .tweet-icon-YT {
    /*display:none*/
  }
  
  #secondary-back-button {
    position: absolute;
    top: 10px;
    left: -140px;
    opacity: 0;
    width: 120px;
    transition: 0.2s;
    transition-timing-function: ease-out;
  }
  
  #secondary-back-button.on {
    left: 5px;
    opacity: 1;
  }
  
  #below .below-button {
    position: relative;
    background-size: 60% 60%;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 45px;
    top: 10px;
  }
  
  #below .below-button.a {
    background-image: var(--navimg-home);
  }
  
  #below .below-button.b {
    background-image: var(--navimg-bell);
    background-size: 28%;
  }
    
  #below .below-button.c {
    /*background-size: 75% 75%;*/
    background-size: 34%;
    background-image: var(--stairs);
  }
  
  #below .below-button.d {
    background-image: var(--navimg-messages);
    background-size: 28%;
  }
  
  #below .below-button.e {
    position: relative;
  } 
  
  #write-button {
    position: absolute;
    display: block;
    top: -96px;
    right: 25px;
    width: 65px;
    height: 65px;
    background-color: var(--theme-bg);
    background-image: url(https://ghosttogether.net/static/ghostpost.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
    border-radius: 9%;
    box-shadow: var(--post-button-shadow);
  }
  
  #below .below-button::after {
    position: absolute;
    display: block;
    content: '';
  }
  #below .below-button.on::after {
    position: absolute;
    display: block;
    top: 12px;
    left: 71px;
    width: 10px;
    height: 10px;
    background: var(--theme-bg);
    border-radius: 10px;
    box-shadow: 0px 0px 0px 4px var(--bg-222);
  }
  #below .message-alert {
    position: absolute;
    display: block;
    top: 4px;
    left: 68px;
    width: auto;
    height: auto;
    background: var(--theme-bg);
    color: var(--always-white);
    padding-left: 7px;
    padding-right: 8px;
    font-weight: bold;
    line-height: 20px;
    border: 4px solid var(--bg-222);
    border-radius: 10px;
  }
  
  .lto {
    
  }
  
  #selected-tweet-text-container {
    background: var(--selected-tweet-text-background)
  }
  
  .remove-bottom-border {
    border-bottom: 0 !important;
  }
  
  .remove-bottom-padding {
    padding-bottom: 0 !important;
  }
  
  #main-msg-post-button {
    background: var(--theme-bg)
  }
  
  .color-inner-circle {
    width: 90px;
    height: 90px;
    margin: 30px;
    position: relative;
    display: block;
    border-radius: 50%;
    background: var(--theme-bg);
  }
  
  .user-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--hl-faint);
    position: relative;
    display: block;
  }
  
  /* --- ui theme selector --- */
      
      .pushFromTop {
        margin-top: 125px !important;
      }
  
      #view.pushFromTop {
        margin-top: 125px !important;
      }
  
      .color-circle {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: white;
        position: relative;
        display: block;
      }
  
      .color-circle-sm {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: white;
        position: relative;
        display: block;
      }
  
      #user-container,
      #color-container {
        position: fixed;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        pointer-events: none;
        z-index: 1000000000;
      }
  
      #color {
        max-width: 450px;
      }
  
      #user,
      #color {
        position: relative;  
        top: -634px;
        width: 91%;
        height: 634px;
        margin: auto;
        background: #333;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        transition: 0.2s;
        z-index: 1000000000;
        transition-timing-function: ease-out;
      }
  
      #user.on, #color.on {
        top: 0px;
        top:64px;
        /* transform: translateY(64px); */
      }
  
      
  .ForcePointerEvents {
    pointer-events: unset !important;
  }
  
  /* --- end ui theme selector --- */
  
  .main-button {
    width: 100%;
    max-width: 253px;
    height: 36px;
    background: var(--theme-bg);
    color: var(--always-white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-radius: 100px;
    cursor: pointer;
    z-index: 10000000000000;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: bold;
    margin-top: -1px;
  }
  
  .identity-button {
    width: 100%;
    max-width: 253px;
    height: 50px;
    background: var(--bg-hl-subtle);
    color: var(--theme-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-radius: 100px;
    margin-top: 19px;
    cursor: pointer;
    z-index: 10000000000000;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: bold;
  }
  
  .identity-button.on {
    background: var(--theme-bg);
    color: var(--always-white);
  }
  
  .IdentityHeader {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 27px;
    font-weight: bold;
    color: var(--hl-brightest);
  }
  
  .ghostsitting {
    width: 211px;
    height: 200px; 
    background: var(--ghost-bg);
    background-size: cover;
    background-position: center;
  }
  
  #ghostsitting {
    width: 211px;
    height: 200px; 
    background: var(--ghost-bg);
    background-size: cover;
    background-position: center;
  }
  
  #usertabs {
    height: 43px;
  }
  #usertabs .usertab {
    width: 33%;
    background: var(--bg-hl);
    height: 43px !important;
    z-index: 10000000000 !important;
    cursor: pointer;
  }
  
  #usertabs .usertab.current {
    
  }
  #usertabs .usertab .utt {
    color: var(--hl-bright) !important;
    font-weight: bold;
    font-size: 16px;
  }
  
  #usertabs .usertab.active .utt {
    color: var(--hl-brightest) !important;
  }
  
  /*#usertabs .usertab:hover .utt {
    color: var(--hl-bright) !important;
  }*/
  
  #usertabs .usertab.active {
    border: 0 !important;
    /* border-top-width: 1px !important; */
    border-top-style: solid !important;
    border-top-color: var(--theme-bg) !important;
    background: transparent;
    margin-top: 1px;
  }
  
  
  #usertabs .usertab .uttval {
    font-size: 21px;
    font-weight: bold;
    display:none;
  }
  
  #image-gallery {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
  }
  
  #image-gallery .imb {
    width: 30%;
    height: 52px;
    padding-top: 25%;
    margin: 6px;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .notification-timestamp {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    margin-right: 14px;
    margin-top: 8px;
  }
  
  #send-message-container {
    bottom: 0;
    position: fixed;
    width: inherit;
  }
  
  .iphone #send-message-container {
    position: unset !important;
    width: unset !important;
  }
  
  .iphone .is-open #message {
    margin-top: 88px;
  }
  
  .iphone #right-right.is-open {
    /*height: calc(100% - 89px) !important;*/
    height: calc(100%) !important;
  }
  
  .iphone #send-message-container #send-message-button {
    bottom: -21px !important;
    transform: scale(0.8);
  }
  
  .iphone #send-message-container.is-open #send-message-button {
    bottom: -108px !important;
    transform: scale(0.9);
  }
  
  .iphone #send-message-container.is-open {
  
  }
  
  .iphone #send-message-container.is-open #send-message-button {
    top: unset !important;
  }
  
  #send-message-button {
    position: absolute;
    background: var(--send-chat-message);
    background-size: cover;
    background-color: var(--theme-bg);
    border-radius: 9%;
    background-size: 66%;
    background-position: 8px 7px;
    z-index: 10000000000000;
    bottom: 18px !important;
    right: 12px !important;
    width: 35px;
    height: 35px;
  }
  
  body.iphone #send-message-button {
    bottom: 15px !important;
    right: 10px !important;
    width: 40px;
    height: 40px;
  }
  
  #msg:last-child {
    /* border:10px solid blue; */
  }
  
  #safari-add-message {
    display: none
  }
  
  body.ison-notifications #safari-add-message {
      display: flex;
      background: white;
      width: 90%;
      position: absolute;
      top: -179px;
      height: 178px;
      padding: 0;
      padding-top: 0 !important;
      margin: 0;
  }
  
  .in-text-plus-icon {
    width: 30px;
    height: 30px;
    background: url(https://ghosttogether.net/static/plus.svg) no-repeat;
    background-size: cover;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
  }
  
  .upok {
    background-image: var(--up-ok) !important;
  }
  
  .is-image .dm-prev-time {
    padding-top: 3px !important;
    font-size: 16px;
  }
  
  #select-chat-image-button {
    position: absolute;
    top: 20px !important;
    left: 11px !important;
    width: 30px !important;
    height: 30px !important;
    background: var(--select-image-button);
    background-size: cover;
  }
  
  #select-TL-image-button {
    position: absolute;
    top: 7px !important;
    left: 8px !important;
    width: 30px !important;
    height: 30px !important;
    background: var(--select-image-button);
    background-size: cover;
  }
  
  .upanim { background: unset !important }
  .upanim span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: upanim;
    animation-timing-function: linear;
    background-image: var(--image-uploading);
    background-size: 100%;
  }
  
  @keyframes upanim {
    from { background-position: 0 0 }
    to { background-position: 0 -60px }
  }
  
  .cont {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .lds-heart {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    transform: rotate(45deg) scale(0.5);
    transform-origin: 40px 40px;
  }
  .lds-heart div {
    top: 32px;
    left: 32px;
    position: absolute;
    width: 32px;
    height: 32px;
    background: #fff;
    animation: lds-heart 0.7s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .lds-heart div:after,
  .lds-heart div:before {
    content: " ";
    position: absolute;
    display: block;
    width: 32px;
    height: 32px;
    background: #fff;
  }
  .lds-heart div:before {
    left: -24px;
    border-radius: 50% 0 0 50%;
  }
  .lds-heart div:after {
    top: -24px;
    border-radius: 50% 50% 0 0;
  }
  @keyframes lds-heart {
    0% {
      transform: scale(0.95);
    }
    5% {
      transform: scale(1.1);
    }
    39% {
      transform: scale(0.85);
    }
    45% {
      transform: scale(1);
    }
    60% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(0.9);
    }
  }
  
  svg#lds {
      max-width: 25em;
      border-radius: 3px;
      box-shadow: 2px 2px 5px #000;
      background: #111;
      fill: none;
      stroke: #222;
      stroke-linecap: round;
      stroke-width: 8%
  }
  
  use {
      stroke: #fff;
      animation: a 0.5s linear infinite
  }
  
  @keyframes a { to { stroke-dashoffset: 0px } }
  
  .lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  
  }
  
  .lds-roller div {
    animation: lds-roller 0.4s linear infinite;
    transform-origin: 40px 40px;
    background: url('https://ghosttogether.net/static/ghostloading.svg') no-repeat;
    animation-delay: 0;
    width: 80px;
    height: 80px;
  }
  
  @keyframes lds-roller {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
  
  
  
  Resources
  
  #m {
    transition: 0.4s !important;
    opacity: 1
  }
  
  #login-register-container {
    /*margin-top: 82px;*/
  }
  
  #userpanel.animate {
    transition: 0.4s !important
  }
  
  .news-cont {
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    width: 100%;
    height: auto;
  }
  
  .news-header {
    width: 100%;
    height: 253px;
    background: var(--bg-333);
    background: url('https://ghosttogether.net/static/fool.png');
    background-size: cover;
  }
  
  .news-substory h1 {
    font-size: 35px;
    line-height: 42px;
    font-family: 'neutrabold';
    margin: 10px 0 7px 0px;
  }
  
  .news-substory h2 {
    font-size: 30px;
    line-height: 38px;
    font-family: 'neutrabold';
    margin: 10px 0 7px 0px;
  }
  
  .news-substory p,
  .news-substory li,
  .news-substory {
    font-size: 22.1px !important;
    line-height: 28px !important;
    color: var(--text-color);
  }
  
  .image-credits,
  .image-credits a {
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 17px;
    color: var(--elapsed)
  }
  
  #below {
    padding-bottom: 44px;
    height: 100px !important;
  }
  
  #fast-note {
    position: absolute;
    display: none;
    bottom: 119px;
    right: 11px;
    width: 290px;
    height: 75px;
    background: white;
    color: rgb(51, 51, 51);
    padding: 8px 20px;
    padding-top: 11px;
    font-weight: 500;
    font-size: 21px;
    border-radius: 8px;
  }
  
  #fast-note-div {
    position: absolute;
    bottom: -12px;
    right: 26px;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: white;
    transform: scaley(0.75) rotate(45deg);
  }
  
  .no-upper-corner-right {
    border-top-right-radius: 0 !important;
  }
  
  .dm-image-message-theirs {
    margin-left: 84px;
    align-self: baseline !important;
  }
  
  .dm-timestamp {
    font-size: unset !important;
  }
  
  .dm-mine.is-image .dm-bubble-image {
    margin-right: 16px !important;
  }
  
  .dm-bubble-image {
    background: url('https://ghosttogether.net/static/photocamera.svg') no-repeat;
    background-color: #222;
    background-position: center;
    background-size: 25%;
  }
  
  .dm-image-message-mine {
    margin-top: 0;
    border-top-left-radius: 0 !important
  }
  
  .no-upper-corner-left {
    border-top-left-radius: 0 !important;
  }
  
  .dm-mine .image-note-image {
    margin-right: 16px;
    margin-top: 6px;
  }
  
  .notification:nth-child(1) {
    padding-top: 20px;
  }
  
  .iphone .specialLoginEmail {
    background: var(--hl-brighter);
    color: var(--hl-brightest);
    border-radius: 100px;
    border: 0;
    padding-left: 20px;
    width: 100%;
  }
  
  .iphone .specialLoginPassword {
    background: var(--hl-brighter);
    color: var(--hl-brightest);
    border-radius: 100px;
    border: 0;
    padding-left: 20px;
    width: 100%;
  }
  
  .iphone #login-cont {
    width: 100%;
  }
  
  #login-button-ui {
    width: 100%;
    max-width: 420px;
  }
  
  #register-button-ui {
    width: 100%;
    max-width: 420px;
  }
  
  .iphone #login-button-ui {
    font-size: 25px;
  }
  
  .iphone #register-button-ui {
    color: var(--hl-bright);
    background-color: var(--hl-brighter);
  }
  
  .iphone #main-logo {
    display: none
  }
  
  .iphone #navigation-bar {
    padding: unset !important;
  }
  
  .iphone #logged-in-letter {
    top: 4px !important;
    left: 13px !important;
  }
  
  .iphone #navbar-avatar {
    top: 2px;
    left: 6px;
  }
  
  .iphone #navbar-avatar-container {
    top: 6px;
    /*left: 18px;*/
    display: flex !important;
  }
  
  body.iphone #phone-post-container {
    transition: 0.25s;
  }
  
  .offscreen {
    /*top: -300px !important;*/
    top: -340px !important;
  }
  
  #phonepost {
    width: 100%;
    font-size: 24px;
    transition: unset !important;
    border: 0px transparent solid !important;
    height: 100%;
    padding-left: 18px;
    resize: none;
  }
  
  .iphone #postava {
    position: absolute;
    top: 144px;
    left: 20px;
    width: 50px;
    height: 50px;
    background-color: #333 !important;
    background-size: 100% !important;
    background-position: center !important;
    border-radius: 50px !important;
  }
  
  .cancelPost {
    background: var(--cancel-icon);
    width: 24px;
    height: 24px;
    margin-right: 10px;
    position: relative;
    display: block;
  }
  
  body.darkmode ::-webkit-input-placeholder { /* Chrome */
    color: var(--hl-placeholder);
  }
  body.darkmode :-ms-input-placeholder { /* IE 10+ */
    color: var(--hl-placeholder);
  }
  body.darkmode ::-moz-placeholder { /* Firefox 19+ */
    color: var(--hl-placeholder);
  }
  body.darkmode :-moz-placeholder { /* Firefox 4 - 18 */
    color: var(--hl-placeholder);
  }
  
  /* but not textareas... */
  body.disableScrollbars div,
  body.disableScrollbars section {
    overflow: hidden !important;
  }
  
  body.disableScrollbars #view {
    display: none !important;
  }
  
  body.darkmode.disableScrollbars #subroot {
    background: #000;
  }
  
  #msgs {
      position: absolute;
      bottom: 74px;
      left: 0;
      z-index: 100000000000;
      display: block;
      background: white;
      border: 1px solid red;
      width: 400px;
      height: 50px;
  }
  
  .closeColors {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: var(--x) no-repeat;
    background-size: 75%;
    background-position: center;
    cursor: pointer;
  }
  
  .checkmark {
    background-image: var(--checkmark) !important;
    background-size: 50% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  
  .article-eye-icon {
    position: relative;
    display: inline-block;
    margin-top: -2px;
    margin-left: 0px;
    margin-right: 6px;
    vertical-align: middle;
    background: url(https://ghosttogether.net/static/eyelight.svg) center center no-repeat;
    width: 20px;
    height: 20px;
  }
  
  .draft-input {
  }
  
  textarea#article {
    padding: 10px;
  }
  
  textarea#description {
    padding: 10px;
  }
  
  .iframe {
    max-width: 600px;
    width: 100%;
    position: relative;
    display: block;
    margin: auto;
  }
  
  .csml .color-circle-sm {
    width: 20px;
    height: 20px;
    margin: 10px;
  }
  
  .microaction.views {
    opacity: 0.25
  }
  
  .ccc {
    margin: 30px 0px;
  }
  
  .iphone .color-theme-name {
    font-size: 29px;
    line-height: 38px;
    font-family: 'neutrabold';
    color: var(--theme-bg);
    background: #0a0a0a;
    min-width: 408px;
    text-align: center;
    border-radius: 50px;
  }
  
  .color-theme-name {
    color: var(--theme-bg);
  }
  
  
  /* -- sign up screen darkmode -- */
  .darkmode1 .login-header {
    background: #222;
    color: white;
  }
  
  .darkmode1 #main-navi {
    background: #222;
    color: white;
  }
  
  h3.anchor::before,
  h2.anchor::before {
    padding-top: 70px;
  }
  /*a[name]::before {
    content: " ";
    visibility: hidden;
    display: block;
    pointer-events: none;
    padding-top: 50px;
    margin-top: -50px;
  }*/
  
  .anchor a.transparent {
    visibility: hidden;
  }
  .anchor:hover a.transparent {
    visibility: visible;
    padding-left: 24px;
  }
  
  .b { font-weight: bold }
  
  #uh-subroot {
    display: block;
    position: relative;
  }
  
  #uh-userinfo {
    margin-left: 1px;
    background-color: var(--bg-hl);
    padding: 10px;
  }
  
  /* desktop */
  #uh-info {
    font-size: 15px;
    color: var(--hl-brightest);
  }
  
   /* mobile  */
  body.iphone #uh-info {
    font-size: 19px;
    color: var(--hl-brightest);
  }
  
  #uh-timeonline {
    margin-left: 0px;
    padding-left: 0;
    margin-top: 12px;
    margin-bottom: 8px;
  }
  
  #uh-username-intopbar,
  #uh-username {
    padding-top: 0;
    margin-top: 0;
  }
  
  @keyframes placeHolderShimmer {
    0% {
      background-position: -800px 0
    }
    100% {
      background-position: 800px 0
    }
  }
  
  .uh-loading {
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background-color: #f6f7f8;
    background: var(--bio-last-seen-bg);
    background-size: 800px 104px;
    position: relative;
  }
  
  .uh-bar {
    padding: 4px;
    padding-left: 10px;
    margin: 2px;
    border-radius: 20px;
  }
  
  #uh-following {
    color: var(--hl-brightest);
    font-weight: bold;
  }
  
  #uh-followers {
    color: var(--hl-brightest);
    font-weight: bold;
  }
  
  #uh-displayname-intopbar,
  #uh-displayname {
    font-weight: bold;
    color: var(--hl-brightest);
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: 21px;
    /*font-family: 'neutrabold';*/
    margin-top: 8px;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
    max-width: 280px;
  }
  
  body.iphone #uh-displayname {
    font-size: 24px;
  }
  
  .myimage {
    height:245px;
  }
  
  .gallery {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    /*overflow-x: scroll;*/
  }
  
  .mim {
    width: 220px;
    height: 220px;
    background: #555;
    border-radius: 200px;
    /*border: 0;*/
    background-position: center center;
    border: 7px solid var(--bg) !important;
  }
  
  #uh-avatar {
    width: 220px;
    height: 220px;
    border: 0;
    /*37px;*/
    /*border-radius: 200px;*/
    border-radius: 14px;
    /*border-width: 5px !important;*/
    top: 20px;
    left: 28px;
    z-index: 100;
    /*z-index: 1000000000;*/
    /*background: var(--ghost-emoji-1);*/
    background-color: var(--bg);
    background-size: cover;
    background-position: center !important;
    box-shadow: 0 0 25px #00000077;
    cursor: pointer;
  }
  
  #tl-image-preview {
    width: 60px;
    height: 60px;
    border: 1px solid gray;
    border-radius: 9px;
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  
  .roll-section {
    font-size: 14px !important;
  }
  
  .iPhone .roll-start section {
    font-size: 18.4px !important;
  }
  
  #system-message {
    min-height: 100px;
    align-self: center;
    background: var(--system-message-bg);
    border-radius: 19px;
    max-width: 90%;
    margin: auto;
  }
  
  #system-message * {
    font-size: 24px;
  }
  
  .system-title {
    color: var(--hl-brightest)
  }
  
  .system-desc {
    color: var(--hl-brighterer)
  }
  
  .system-system-buttons {
    
  }
  
  #system-left,
  #system-right {
    color: var(--theme-bg) !important
  }
  
  body:not(.iPhone) .side-tweet {
    /*padding-left: 25px !important;;
    padding-bottom: 15px !important;;
    padding-top: 13px !important;;
    height: 96px !important;;*/
  }
  
  body:not(.iPhone) .newly-posted-on-desktop-app .tweet-text {
    padding: 0;
    margin-left: 0;
    font-size: unset !important;
    padding-right: 27px !important;
    padding-bottom: 15px !important;
  }
  
  .iphone .tweet-text {
    font-size: 19.1px !important
  }
  
  .iphone .tweet-header {
    font-size: 18.4px !important
  }
  
  .tweet.has-image .media-container img {
    width: 100%;
  }
  
  body:not(.iPhone) .media-root {
    /* padding-right: 45px; */
    /* removed on july 6 2023 */
  }
  
  body:not(.iPhone) .tweet-buttons {
    padding-bottom: 7px;
  }
  
  #candle-holder {
    height: 130px;
  }
  
  .candle {
    position: relative;
    display: block;
    width: 80px;
    height: 80px;
    background: url(https://ghosttogether.net/static/candle1.svg) no-repeat;
    background-size: 67%;
    background-color: #333;
    border-radius: 100px;
    background-position: center;
  }
  
  .candle.lit {
    background: url('https://ghosttogether.net/static/candle2.svg') no-repeat;
    background-size: 67%;
    background-color: #333;
    border-radius: 100px;
    background-position: center;
  }
  
  #notifications-container {
    height: 158px
  }
  
  #notifications-chart {
    height: 126px
  }
  
  #notifications-navigation {
    height: 30px;
    background: var(--theme-)
  }
  
  .notbutton {
    font-weight: bold;
    cursor: pointer;
    width: 100%;
  }
  
  .notbutton.sel {
    color: var(--theme-bg);  
  }
  
  .mini-chart-nots {
    fill:var(--theme-bg);
    width: 100%;
    height: 100px;
  }
  
  .notif-like-num {
    position: absolute;
    font-size: 15px;
    font-weight: bold;
    color: var(--hl-brightest);
    top: 6px;
    right: 36px;
  }
  
  #notif-heart-icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -6px;  
  }
  
  body.iphone #notif-heart-icon {
    margin-top: -8px !important;
  }
  
  .ViewTopMargin {
    margin-top: 64px;
  }
  .ViewTitle {
    height: 64px;
    font-size: 20px;
    font-weight: bold;
    font-size: 27px;
    color: var(--hl-brightest);
  }
  .SettingsTab {
    height: 64px;
    font-size: 20px;
    padding-left: 24px;
  }
  .SettingsSwitcher {
    position: absolute;
    top: 22px;
    right: 15px;
    width: 80px;
    height: 21px;
    border-radius: 50px;
    border: 2px solid var(--bg-hl);
  }
  .Switch {
    left: 0;
    top: 0;
    width: 17px;
    height: 17px;
    border-radius: 50px;
    background: var(--hl-brightest);
    transform: 0.4s;
  }
  .settings-title {
    color: var(--hl-brightest); 
  }
  
  .article-image {
    width: 100%;
    margin: auto;
    position: relative;
    max-width: 650px;
  }
  
  .SettingsNextArrow {
    position: absolute;
    top: 22px;
    right: 15px;
    width: 80px;
    height: 21px;
    border-radius: 50px;
    border: 2px solid var(--bg-hl);
  }
  .SettingsNextArrow .Next {
    line-height: 11px;
    text-align: center;
    color: var(--hl-brightest);
  }
  
  .clicked {
    background: var(--theme-bg);
  }
  
  /* --- mobile opener templates --- */
  body.iphone #SettingsView {
    position: absolute;
    top:0;
    left:0;
  }
  
  body.iphone .SettingsContainer {
    position: relative;
    display: inline-block;
    border:2px solid yellow;
    width: 100%;
    height: 100%;
    margin-top: 64px;
    background: var(--bg);
  }
  
  #SettingsView {
    transition: 0.3s;
  }
  
  .next1 { left: -100% !important; }
  .next2 { left: -200% !important; }
  .next3 { left: -300% !important; }
  
  .login-button-2023 {
    border-radius: 100px;
    padding: 20px;
  }
  
  .statsbox {
    width: 77.9%;
    background-color: var(--bg-hl);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 12px;
  }
  
  .refreshButton {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 100px;
    background: var(--theme-bg);
    cursor: pointer;
  }
  
  .refreshIcon {
    width: 100%;
    height: 100%;
    background: var(--refresh-icon);
    transform: rotate(0) scale(0.62);
    transition: 0.4s;
  }
  
  .refreshIcon.rotate {
    transform: rotate(-359.9deg) scale(0.62);
  }
  
  .refreshIcon.stopped {
    background: var(--xx) !important;
  }
  
  .statsbox.thinner {
    width: 20%;
  }
  
  #stats-followers-container,
  #stats-chats-container {
    width: 72%;
    padding-left: 10px;
  }
  
  .chats-num {
    width: inherit;
    margin-top: 42px;
    font-size: 17px;
    color: var(--hl-brightest);
    text-align: center;
  }
  
  .SmallGotIt {
    background: var(--theme-bg);
    padding: 5px;
  }
  
  .youtube,
  .Youtube,
  .shareYoutube,
  .shareYouTube,
  .embedYoutube,
  .youtubeEmbed,
  .youtubeShare,
  .youTubeShare,
  .youtubeFrame,
  .youtubeVideo,
  .youTubeVideo,
  .YouTubeVideo,
  .articleImg {
    width: 100%;
    max-width: 700px;
    position: relative;
    display: block;
    margin: auto;
  }
  
  
  .enterTags {
    background: transparent !important;
  }
  
  #addcoverimagebutton {
    width: 231px;
    font-size: 18px;
    /* FONT-WEIGHT: BOLD; */
    /* padding: 17px 20px; */
    /* margin-left: 7px; */
    background: var(--theme-bg);
    border: 2px solid var(--theme-bg);
    border-radius: 71px;
    margin-left: 4px !important;
    white-space: nowrap;
    height: 31px;
    line-height: 12px;
  }
  
  #addcoverimagebutton:hover {
    
  }
  
  .tagger {
    border:0;
  }
  
  .tagger input {
    border: 1px solid transparent !important;
    background: transparent !important;
  }
  
  .tags-input {
    padding-left: 11px !important;
    background: transparent !important;
    background-color: transparent !important;
  }
  
  .tagger li {
    background-color: var(--theme-bg) !important;
    color: white;
  }
  
  .tagger .tagger a {
    background: unset !important;
    border: 1px solid transparent !important;
  }
  
  .tagger li.tagger-new {
    background: unset !important;
    margin-left: 0 !important;
  }
  
  .keep {
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: #333;
    display: inline-block;
    position: relative;
    vertical-align: middle;
  }
  
  #story-options {
    margin-left: 11px;
    margin-top: 15px;
  }
  
  .keep-container {
    color: var(--text-color);
  }
  
  .keep-container:hover {
    background:var(--hl-faint);
    cursor: pointer;
  }
  
  .keep div {
    margin: 11px;
    width: 11px;
    height: 11px;
    border-radius: 8px;
    background: var(--theme-bg);
  }
  
  .dontkeep {
    margin: 11px;
    width: 11px;
    height: 11px;
    border-radius: 8px;
    background: var(--disabled-color);
  }
  
  textarea#description {
    padding: 11px;
    padding-left: 13px;
    vertical-align: middle;
    display: inline;
    width: 100%;
    min-width: 408px !important;
    /* height: 239px; */
    /* min-height: 239px; */
    min-height: 111px;
    font-size: 15px;
    /* padding-top: 0; */
    border: 2px solid silver;
    border: unset !important;
    border-radius: 8px;
    margin-top: 14px;
    margin-left: 15px;
    margin-right: !important;
    /* color: var(--highest-contrast-text-color); */
  }
  
  textarea#description {
    background: white;
  }
  
  body.darkmode textarea#description {
    background: var(--hl-faint-lines) !important;
  }
  
  #headerimagealt {
    width: 100%;
    /* border: 2px solid #444; */
    border-radius: 71px;
    margin-left: 16px;
    padding-left: 15px;
    padding-bottom: 2px;
    padding-top: 2px;
    height: 33px;
  }
  
  .h1 {
    margin-bottom:0 !important;
  }
  
  #url {
    padding-left: 16px;
    /* background-color: var(--hl-faint) !important; */
  }
  
  #section option:checked {
    color: var(--text-color)
  }
  
  .url-drop {
    border: 0;
    font-size: 16px;
    display: inline;
    background: transparent;
    color: var(--text-color);
  }
  
  .toggleBrowserTitle {
    width: 52px !important;
    height: 35px;
    background-color: var(--hl-faint);
    background-image: var(--refresh-icon);
    background-repeat: no-repeat;
    background-size: 39%;
    background-position: center center;
    position: absolute;
    top: 12px;
    right: 0;
    top: 10px !important;
    border-color: var(--hl-brighter);
  }
  
  #title-type-info {
    top: -19px;
    left: 20px;
    font-size: 16px;
    display: block;
    position: absolute;
    background: transparent;
    color: var(--text-color);
    border: 0 !important;
  }
  
  
  .draft-editor input#title,
  .draft-editor input#subtitle,
  .draft-editor-title-input,
  .draft-editor-title-input:hover {
    border: 1px solid transparent !important;
    font-size: 24px;
    font-weight: bold;
    background: transparent !important;
    color: var(--draft-editor-title-color) !important;
  }
  
  #browsertitle {
    border: 1px solid transparent !important;
  }
  
  #jsonld {
    width: 100%;
    height: 100px;
    padding: 8px;
    display: inline;
    font-size: 16px;
    border-radius: 2px;
    vertical-align: middle;
    border: 2px solid silver;
  }
  
  h2.subtitle {
    margin: 0;
    margin-bottom: 6px;
    /*font-weight: normal;*/
    line-height: 45px;
    font-weight: 600 !important;
    font-size: 20px !important;
  }
  
  #view h2.subtitle {
    margin-bottom: 20px !important;
    margin-top: 6px;
    /* border-radius: 20px; */
    /* background: #000000; */
    white-space: normal !important;
    padding: 21px;
    font-size: 20px;
    line-height: 29px;
    /* width: calc(100% + 102px); */
    color: #363636;
    /* padding-right: 64px; */
    /* margin-left: -44px;
  }
  
  #view p.subtitle {
    margin-top: 6px;
    margin-left: 0px !important;
    /* border-radius: 20px; */
    /* background: #000000; */
    white-space:normal !important;
    /*padding: 10px;*/
    font-size: 20px;
    line-height: 29px;
    width: calc(100% + 102px);
    color: #363636;
    font-weight: 500 !important;
    padding-right: 64px;
  }
  
  #breadcrumb {
    width: 450px;
  }
  
  .erroneous-border {
    border-color: orangered !important;
  }
  
  .youtubeEmbed {
    display: block;
    position: relative;
    max-width: 600px;
    width: 100%;
    height: 380px;
    margin: auto;
  }
  
  
  .tweet-hashtags {
    margin-left: 0;
    margin-top: 6px;
    margin-bottom: 7px;
    /* width: calc(100% - 58px); */
    /* border: 1px solid red; */
    /* flex-wrap: wrap; */
    /* text-overflow: ellipsis; */
    white-space: nowrap;
    overflow: hidden;
    /* max-width: 80px; */
  }
  
  .wisp-hashtag {
    /* background: var(--post-hashtag-bg); */
    color: var(--post-hashtag-fg);
    margin-right: 5px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    margin-left: -3px;
    margin-bottom: 6px;
    height: 20px;
  }
  
  .wisp-hashtag-sidebar {
    background: var(--post-hashtag-bg);
    color: var(--post-hashtag-fg);
    margin-right: 5px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 11px;
    font-size: 15px;
    line-height: 26px;
    margin-left: -3px;
    margin-bottom: 6px;
    height: 27px;
  }
  
  body.iPhone .wisp-hashtag:nth-child(1) { 
    margin-left: 50px;
  }
  
  .wisptimes {
    position: absolute;
    top:0;
    right:0
  }
  
  .ThemeBackgroundColor {
    background: var(--bg-2) !important;
  }
  
  .color-circle-sm {
  }
  .color-circle-sm:hover {
  }  
  #clock {
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 165px;
    height: 165px;
    border-radius: 100%;
    background: var(--clock-frame-color);
  }
  #clock:hover {
    transform: scale(1.05)
  }
  #clock-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    border-radius: 100%;
    background: var(--clock-face);
  }
  .clock-mark-arrow {
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
    border: 0;
  }
  .clock-mark {
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
    border: 0;
    background: var(--clock-12-marks);
  }
  .clock-mark-1 {transform: rotate(0deg);}
  .clock-mark-2 {transform: rotate(30deg);}
  .clock-mark-3 {transform: rotate(60deg);}
  .clock-mark-4 {transform: rotate(90deg);}
  .clock-mark-5 {transform: rotate(120deg);}
  .clock-mark-6 {transform: rotate(150deg);}
  .clock-mark-7 {transform: rotate(180deg);}
  .clock-mark-8 {transform: rotate(210deg);}
  .clock-mark-9 {transform: rotate(240deg);}
  .clock-mark-10 {transform: rotate(270deg);}
  .clock-mark-11 {transform: rotate(300deg);}
  .clock-mark-12 {transform: rotate(330deg);}
  
  .clock-small-arrow {
    height: 11px;
  }
  .clock-big-arrow {
    height: 11px;
  }
  
  #calculator {
    width: 160px;
    /* border: 1px solid red; */
    height: 190px;
    border-radius: 13px;
    background: #333;
  }
  
  #calculator-screen {
    background: black;
    margin: 16px;
    height: 26px;
    border-radius: 4px;
    margin-bottom: 6px;
    text-align: right;
    padding-right: 7px; 
  }
  
  #calculator-buttons {  
    display: flex;
    flex-wrap: wrap;
    width: 133px;
    margin: auto;
  }
  
  .calc-button {
    background: #212121;
    border-radius: 2px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 4px;
    font-family: 'courier';
    color: white;
  }
  
  .calc-blue-button {
    background: var(--theme-bg);
  }
  
  .calc-red-button {
    background: #eb5e60;
  }
  
  #small-arrow { opacity:0 }
  #center-arrow { opacity:0 }
  #big-arrow { opacity:0 }
  
  .wisp-official-logo {
    width: 32px;
    height: 32px;
    background: var(--community-hashtag)
  }
  
  .official-count {
    color: var(--hl-brightest);
    font-weight: bold;
    font-size: 17px;
    vertical-align: middle;
    display: inline-block;
    margin-top: -4px;
  }
  
  .unloaded {
    background-color: #333 !important
  }
  
  .seenlist-container {
    margin: 3px;
    margin-top: 1px;
    display: flex;
    /*flex-wrap: wrap;*/
    /*overflow:hidden;*/
    width: 98%;
  }
  
  .aud {
    margin: 5px;
    width: 4px;
    height: 4px;
    position: relative;
    border-radius: 10px;
    background: var(--seen-color);
  }
  
  #donate {
    width: 160px;
    height: 190px;
    border-radius: 13px;
    background: var(--bg-donate);
  }
  
  #donate-amount {
    font-family: monospace;
    font-size: 26px;
    color: var(--hl-brightest);
    padding: 4px;
  }
  
  #donate-button-container {
    
  }
  
  #donate-button {
    padding-top: 0;
    padding-bottom: 0;
  }
  
  #next-recipient-avatar {
    position: relative;
    display: block;
    width: 64px !important;
    height: 64px !important;
    border-radius: 100px;
    background: var(--hl-brighter)
  }
  
  #next-recipient-description {
    width: 85%;
  }
  
  .runner-up-container {
    display: flex;
    width: 100%;
  }
  
  .runner-up {
    width: 100%;
    margin-top: 16px
  }
  
  .runner-up:first-child {
    margin-top: 0
  }
  
  .runner-up-avatar {
    width: 20px;
    height: 20px;
    background: var(--hl-brighter);
    border-radius: 100px;
  }
  
  .runner-up-details {
    background: var(--hl-brighter);
    width: 90%;
    border-radius: 100px;
    margin-left: 16px;
  }
  
  #analytics-chart {
    /*height: 150px;*/
  }
  
  .analytics-bar {
    /*
    width: 14%;
    display: flex;
    align-items: flex-end;
    justify-content: center;*/
  }
  
  .abar {
    /*width: 10px;
    height: 100px;
    background: var(--theme-bg);
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;*/
  }
  
  #seenbycount {
    padding: 10px;
    padding-bottom:0;
    font-size: 40px;
    font-family: courier;
  }
  #seenbynote {
    padding: 10px;
    padding-top:0;
    color: var(--hl-bright);
  }
  
  .mim {
    /* border: 15px solid #333 !important; */
  }
  
  .depleter-over {
    background: black !important;
  }
  
  .left-half-clipper {
    background: transparent !important;
  }
  
  .DraftEditor .tagger * {
    color: var(--always-white) !important;
  }
  
  #postoptions {
    display: flex;
    flex-direction: row;
    margin-left: 12px;
  }
  
  #postoptions div {
    width: 22px;
    height: 22px;
    position: relative;
    display: block;
    cursor: pointer;
  }
  
  .postaskgpt { background: var(--post-ask-gpt); opacity: 0.5; margin-left: 9px; margin-top: 1px; }
  
  .postpoll-hollow { background: var(--post-poll-hollow); opacity: 0.75 }
  .postpoll { background: var(--post-poll); opacity: 0.75 }
  
  .postimage-hollow { background: var(--post-image-hollow); opacity: 0.75 }
  .postimage { background: var(--post-image); opacity: 0.75 }
  
  body.dark .postimage { opacity: 0.5 }
  body.dark .postimage-hollow { opacity: 0.5 }
  
  .postlink { background: var(--post-link); opacity: 0.5 }
  .postpoll { background: var(--post-poll); opacity: 0.5; }
  .postvote { background: var(--post-vote); opacity: 0.5; margin-left: 2px; margin-top: 1px; transform:scale(1.2) }
  .postgive { background: var(--post-give); opacity: 0.5; margin-left: 5px; margin-top: -3px; }
  
  .postask { background: var(--post-ask); opacity: 0.5; margin-left: 4px }
  .postimage:hover { opacity: 1 }
  .postimage-hollow:hover { opacity: 1 }
  .postlink:hover { opacity: 1 }
  .postask:hover { opacity: 1 }
  .postvote:hover { opacity: 1 }
  .postpoll:hover { opacity: 1 }
  .postgive:hover { opacity: 1 }
  .postaskgpt:hover { opacity: 1 }
  
  .posttypeicon.selected {
    opacity: 1 !important;
  }
  
  #sidebar-navi-1 {
    height: 61px;
  }
  
  #sidebar-navi-1,
  #sidebar-navi-2 {
    /*color: var(--text-color);*/
  }
  
  .sn-but {
    width: 33%;
    cursor: pointer;
    /*color: var(--text-color) !important;*/
  }
  
  .sn-but.current {
    color: var(--highest-contrast-text-color) !important;
    background-color: var(--hl-faint);
    border-bottom: 1px solid var(--theme-bg);
  }
  
  .sn-but:hover {
    color: var(--highest-contrast-text-color) !important;
    background-color: var(--hl-faint);
  }
  
  .half {
    width: 50% !important;
  }
  
  #vote-box {
    margin: 17px;
    border-radius: 10px;
    background: var(--hl-brighter);
    border-bottom: unset !important;
  }
  
  #vote-box-note {
    color: var(--text-color)
  }
  
  .vote-card {
    border-bottoM:var(--line-border-1) !important;
  }
  
  .vote-number {
    border-right:var(--line-border-1) !important;
  }
  
  .vote-avatar {
    width: 50px;
    height: 50px;
    margin-left: 10px;
    margin-top: 5px;
    background: var(--hl-fainter-lines);
    border-radius: 100px;
    position: relative;
    display: block;
  }
  
  textarea#describe-feature {
    width: 100%;
    transition: none;
    font-size: 16px;
    border: 0;
    margin-top: 0;
    min-height: 80px;
    border: 0 !important;
    padding: 11px;
    padding-top: 7px;
  }
  
  .vote-opts {
    font-size: 14px;
  }
  
  .plus-one-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 20px;
    font-size: 20px;
    color: var(--highest-contrast-text-color);
    background: var(--bg-hl);
    border-radius: 2px;
    font-size: 15px;
    font-weight: bold;
  }
  
  .plus-one-button:hover {
    background: var(--theme-bg);
  }
  
  .plus-one-button.on {
    background: var(--theme-bg);
  }
  
  body.iphone #phonepost-hashtags-container ul {
    margin-left: 21px;
  }
  
  body.iphone #phonepost-hashtags-container .tags-input {
    font-size: 23px;
    margin-bottom: 30px;
  }
  
  body.iphone #phonepost-hashtags-container span.label {
    font-size: 23px;
  }
  
  body.iphone #phonepost-hashtags-container li a.close {
    vertical-align: unset;
  }
   
  .ImageTray {
    margin-left: 35px;
    margin-bottom: 18px;
  }
  
  .PollTray {
    margin-left: 80px;
    margin-bottom: 18px;
  }
  
  .AskGPTTray {
    margin-left: 8px;
    margin-bottom: 18px;
    margin-top: 7px;
    margin-right: 10px;
  }
  
  .ImagePlaceholder {
    /*width: 70px;*/
    min-height: 151px;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 16px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background: var(--bg-hl);
    cursor: pointer;
    border-radius: 16px;
    border:2px solid var(--hl-faint);
  }
  
  .ImagePlaceholder:hover {
    border:2px solid var(--theme-bg);
  }
  
  #image-sanct {
    flex-wrap: wrap;
  }
  
  .UploadUpTo4Images {
    font-size: 15px;
    margin-left: 12px;
    margin-top: 8px;
    color: var(--hl-brighterer);
  }
  
  .PI-One {
    width: 100%;
    min-height: 200px;  
  }
  
  .PI-Half {
    width: 42%;
    min-height: 152px;
  }
  
  .PI-New-Half {
    width: 42%;
    min-height: 152px;
  }
  
  .PI-WidePrimary {
    width: 100%;
    max-width: 410px;
    min-height: 220px;
  }
  
  .UniversalFileUploadHiddenForm {
    position: relative;
    display: inline-block;
  }
  
  .UploadableImage {
  
  }
  
  .minHeight150 {
    min-height: 150px;
  }
  
  .minHeight300 {
    min-height: 300px;
    margin-right: 44px;
  }
  
  .forceHeight300 {
    height: 300px !important;
  }
  
  .FirstWideImage {
    width: 100%;
    margin-right: 84px;
  }
  
  #post-button-jobpost {
    width: 72px;
    height: 72px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--theme-bg);
  }
  
  .system-button.grayed {
    background: var(--hl-bright);
  }
  
  .userHistoryGrid {
    width: 500px;
    height: calc(7 * 10px);
  }
  
  .g {
    width: 10px;
    height: 10px;
    border-bottom: 1px solid gray;
    border-left: 1px solid gray;
  }
  
  .replying_to {
    margin-left: 3px;
    margin-top: 1px;
    font-size: 14px;
  }
  
  .replying_to span {
    color: var(--theme-bg) !important;
    font-weight: 700;
  }
  
  .lane {
    background: #ebecf0;
    border-radius: 3px;
    margin: 8px;
  }
  
  .lane-header {
  
  }
  
  .lane-cardnum {
    margin-left: 14px;
    padding-bottom: 10px;
  }
  
  .lane-addcard {
    margin-left: 14px;
    padding-bottom: 10px;
    font-weight: 600;
    color: var(--always-dark-gray);
    cursor: pointer;
  }
  
  .lane-addcard {
    color: var(--pure-black)
  }
  
  input.card-name-input {
    background: none;
    border: 0 !important;
    font-weight: 600;
    color: var(--always-dark-gray);
    margin: 7px;
  }
  
  
  .trellane {
    width: 100%;
    padding: 0 6px;
    visibility: visible;
  }
  
  .lane-more {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 0;
  }
  
  .lane-more:hover {
    border: 1px solid silver;
  }
  
  .lane-card {
    margin: 7px;
    cursor: pointer;
  }
  
  .board-card {
    margin: 7px;
    cursor: pointer;
  }
  
  .lane-desc {
    background: var(--always-white);
    color: var(--always-dark-gray);
    border: 1px solid var(--light-gray-on-white);
    padding: 8px 11px;
    border-radius: 3px;
  }
  
  .board-desc {
    background: var(--hl-faint);
    border: 1px solid var(--hl-faint);
    padding: 8px 11px;
    border-radius: 3px;
    font-size: 23px;
    font-weight: 700;
  }
  
  #name-new-card {
    background: none;
    font-size: 16px;
    margin: 7px;
    width: 366px;
    border: 0px !important;
    height: 307px;
    color: var(--always-dark-gray);
    max-height: 72px
  }
  
  .haunt-button {
    padding: 5px 12px;
    margin-right: 12px;
    background: white;
    font-weight: 500;
    background: var(--haunt-button-background);
  }
  
  .haunt-button:hover {
    background: var(--theme-bg);
    color: var(--always-white);
  }
  
  .new-lane-button {
    background: var(--bg-hl-subtle);
    border-radius: 3px;
  }
  
  .biggerPlus {
    font-size: 25px;
  }
  
  .haunt-me-loading {
    background: var(--hl-brighter);
    font-size: 17px;
  }
  
  #profile-message-button {
    color: var(--always-white) !important;
    font-size: 20px;
    font-weight: 600;
  }
  
  .haunted-button-off {
    background: var(--hl-brightest-button);
    color: var(--hl-brightest-text);
  }
  
  #profile-haunt-button {
    padding: 5px 12px !important;
    background: silver;
  }
  
  body.darkmode #profile-haunt-button {
    margin-right: 12px;
    background: url(https://ghosttogether.net/static/hauntbat.png) no-repeat, linear-gradient(#5b5b5b, #55555557);
    /*border: 1px solid #535353;*/
    color: #a9a9a9;
    font-weight: 500;
    font-size: 18px;
    padding-left: 47px !important;
    height: 36px;
  }
  
  body.darkmode #profile-message-button {
    background: url(https://ghosttogether.net/static/msgme.png) no-repeat, linear-gradient(#5b5b5b, #55555557);
    /* border: 1px solid #5a2edf; */
    color: #a9a9a9;
    padding-left: 18px !important;
    height: 36px;
  }
  
  .haunted-button-on {
    background: var(--theme-bg);
    color: var(--always-white);
  }
  
  #new-cardboard-description {
    transition: unset;
    min-height: 60px;
    padding: 7px;
    font-size: 16px;
    border: 1px solid var(--input-border-color);
    border-width: 1px !important;
    border-radius: 3px;
  }
  
  .circleDeleteButton {
    width: 32px;
    height: 32px;
    line-height: 0;
    border-radius: 50px;
  }
  
  .board-desc-under {
    font-size: 16px !important;
    font-weight: 600;
    margin-left: 20px;
    background: var(--hl-faint);
  }
  
  .small-cancel-button {
    padding: 0 10px !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }
  
  .small-launch-button {
    height: 
  }
  
  .subtle-cancel-button-background {
    background: var(--subtle-cancel-button-background);
    color: var(--subtle-cancel-button-color);
  }
  
  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .poll-line-any {
    background: var(--theme-bg);
  /*  background-image: repeating-linear-gradient(
    45deg,
    #553c9a,
    #553c9a 25px,
    #b393d3 25px,
    #b393d3 50px);
    border-radius: 2px; */
  }
  
  body.darkmode .poll-line-any {
    background: #474747
  }
  
  .poll-percent {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
  }
  
  .pol-line-full {
    width: 100%;
    height: 41px;
  }
  
  .abs00 {
    position:absolute;
    top:0;
    left:0;
  }
  
  .abs00pollbar {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
    /* height: 5px !important; */
    /* padding: 0px !important; */
    bottom: 9px !important;
    left: 0 !important;
    /* padding-left: 16px; */
  }
  
  /* this is inverse color of current theme's background */
  .inverse-text {
    color: var(--sharp-bg-inverse) !important;
  }
  .inverse-background {
    background-color: var(--sharp-bg-inverse) !important;
  }
  
  .poll-answer {
    cursor: pointer;
    /*border: 1px solid var(--hl-faint-lines);*/
    border: 1px solid #32393d;/* var(--theme-bg); */
    /* padding: 10px; */
    border-radius: 30px;
    margin-bottom: 11px;
    padding-left: 16px;
    line-height: 20px;
  }
  body.darkmode .poll-answer {
    
  }
  
  .poll-answer:hover {
    /*background: var(--theme-bg);*/
    background: var(--hl-faint-lines);  
    color: var(--always-white);
  }
  
  .poll-bar-container {
    height: 45px;
  }
  
  .plusButton {
    width: 24px;
    height: 24px;
    background: url('https://ghosttogether.net/static/plus.svg');
    background-color: var(--theme-bg);
    border-radius: 50%;
  }
  
  .miniNote {
    background: var(--theme-bg);
    border-radius: 6px;
    margin-top: 6px;
    color: var(--always-white);
    font-size: 14px;
    padding-left: 7px;
    padding-right: 7px;
    margin-left: 7px;
    margin-right: 2px;
    width: auto !important;
    /* display: inline-block; */
    font-weight: 500;
    margin-bottom: 0px;
    padding-bottom: 5px;
    padding-top: 5px;
    /* display: -webkit-box; -- this will limit note to 3 lines */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  #my-note {
    margin-right: 14px;
  }
  
  #notes-container {
    padding-left: 0px;
    margin-left: -4px;
  }
  
  #notes-container ::-webkit-scrollbar:horizontal{
    height: 4px;
  }
  
  .mini-note-box {
    max-width: 94px;
  }
  
  /* post note button is smaller */
  #post-button-note {
    transform: scale(0.70);
  }
  
  #notes-container,
  #notes-bar {
    padding-right: 0;
  }
  
  #notes-bar {
    overflow-x: scroll;
    overflow-y: clip;
  }
  
  #notes-bar.collapsed {
    overflow-x: unset;
  }
  
  #notes-bar {
    min-height: 220px;
  }
  
  #notes-bar.collapsed {
    min-height: 57px;
  }
  
  #ghost-token {
    display: none;
  }
  
  #notes-container.collapsed {
    padding-top: 0;
    padding-bottom: 0;
  }
  
  #notes-container.collapsed .mini-note-box {
    width: 20px !important;
    margin-left: 5px;
    /*margin-right: 5px;*/
    margin-left: 14px
  }
  #notes-container.collapsed .contacts-ava {
    width: 20px !important;
    height: 20px !important;
  }
  #notes-container.collapsed .miniNote {
    display: none;
  }
  .plusButton {
    top: 0;
    position: absolute;
  }
  #notes-container.collapsed .plusButton {
    top: 7px;
    left: -8px;
    width: 22px !important;
    height: 22px !important;
    display: block;
    position: absolute;
  }
  
  .note-round-plus-button {
    position: absolute; top: 0; right: -9px; width: 24px; height: 24px;
  }
  
  #Layer_1 {
    border-radius: 9% !important;
  }
  
  #notes-container.collapsed .not-mine-note-round-plus-button {
    display: none 
  }
  
  .mdc-avatar {
    width: 88px;
    height: 88px;
  }
  
  #mdc-msg {
    color: var(--sharp-bg-inverse);
    align-items: flex-end;
    display: flex;
  }
  
  #create-note-avatar {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 11px;
  }
  
  .trending-top {
    background: var(--hl-brighter);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    font-size: 20px;
    font-weight: 700;
    color: var(--sharp-bg-inverse);
    letter-spacing: 1px;
    padding-bottom: 10px;
  }
  
  body:not(.darkmode) .trending-top {
    background: unset !important;
  }
  
  .trending-item {
    padding-left: 20px;
    background: var(--hl-brighter);
    cursor: pointer;
  }
  
  body:not(.darkmode) .trending-item {
    background: unset !important;
  }
  
  .trending-item:hover {
    background: var(--hl-slightly-brighter);
    /*color: var(--hl-slightly-brighter-text);*/
  }
  
  .trend-keyword {
    color: var(--sharp-bg-inverse);
    font-weight: 500;
    font-family: monospace;
    font-size: 17px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  
  }
  
  .trending-bottom {
    height: 16px;
    background: var(--hl-brighter);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
  }
  
  .trending-context {
    font-size: 14px;
    color: var(--hl-slightly-brighter-text);
  }
  
  
  /* Works on Firefox */
  #notes-bar {
    scrollbar-width: thin;
    scrollbar-color: blue var(--hl-fainter-lines);
  }
  
  /* Works on Chrome, Edge, and Safari */
  #notes-bar::-webkit-scrollbar {
    height: 12px;
  }
  
  #notes-bar.collapsed::-webkit-scrollbar {
    height: 5px;
  }
  
  #notes-bar::-webkit-scrollbar-track {
    background: var(--webkit-scrollbar-bg-color);
  }
  
  #notes-bar::-webkit-scrollbar-thumb {
    background-color: var(--hl-faint-lines);
    border: 3px solid var(--hl-faint-lines);
  }
  
  /* Disable, at least for now */
  #sidebar-navi-1 {
    display:none;
  }
  
  .scroll-note {
    background: var(--theme-bg);
    padding: 11px;
    border-radius: 6px;
    color: var(--always-white);
    font-weight: 500;
    font-size: 18px;
    min-width: 377px;
    border: 4px solid var(--always-white);
    text-align: center;
    cursor: pointer;
  }
  
  #annual-container {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;  
    bottom: 0;
    left: 0;
    width: 100%;
    height: 400px;
    background: var(--bg);
    z-index: 1000000000;
  }
  
  #annual {  
    margin: auto;
    max-width: 1000px;
  }
  
  .year-container {
    display: flex;
    flex-direction: column;
  }
  
  .month-line {
    display: flex;
    flex-direction: row;
  }
  
  .day-box {
    padding: 0;
    min-width: 30px;
    min-height: 30px;
    border: 1px solid var(--hl-faintest-lines);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  
  .day-box:hover {
    border: 1px solid var(--flash-start);
  }
  
  .daybox {
    padding: 0;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border: 1px solid var(--hl-faintest-lines);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  
  .month-box {
    min-width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--hl-brightest-dim);
  }
  
  .day-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
  }
  
  .day-dot-inside {
    width: 0px;
    height: 0px;
    position: relative;
    display: block;
    background: white;
    border-radius: 50px;
  }
  
  #presencebox-timeline,
  #presencebox {
    display: flex;
    width: 90%;
    /*height: 250px;*/
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;
  }
  
  #presencebox-timeline {
    margin: 10px !important;
    display:none;
  }
  
  .daydot {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
  }
  
  .daybox-inside {
    width: 0px;
    height: 0px;
    /*position: relative;*/
    position: absolute;
    display: block;
    
    /*background: var(--theme-bg);*/
    background: var(--hl-brighterer);
  
    border-radius: 3px;
    /* outline: 3px solid #373737; */
    box-shadow: 0 0px 3px 5px var(--hl-fainter-lines);
  }
  
  .annual-button {
    position: fixed;
    top: 0;
    right: 0;
  }
  
  firstparagraph {
    display: block;
    position: relative;
    font-size: 28px;
    border-left: 3px solid #777;
    padding-left: 21px;
    margin-left: -10px;
  }
  
  firstparagraph,
  firstparagraph p,
  firstparagraph p * {
    font-size: 25px !important;
  }
  
  .hiddenBlockButton {
    margin: 17px;
    background: var(--hl-slightly-brighter);
    padding: 10px;
    margin-bottom: 0;
    color: var(--subtle-text-color);
    cursor: pointer;
  }
  
  #presence {
    margin-bottom: 0;
  }
  
  #day-note {
    position: absolute;
    top: -44px;
    right: 47px;
    background: var(--always-white);
    color: var(--always-dark-gray);
    z-index: 2147483647;
    padding: 5px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 25px;
    pointer-events: none;
  }
  
  #day-note::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 55px;
    width: 24px;
    height: 24px;
    background: var(--always-white);
    transform: scaleX(0.5) rotate(45deg);
    z-index: -1;
  }
  
  .navbu {
    width: 34px;
    height: 34px;
    background-size: 100%;
    margin: 30px;
    /*margin-right: 4px;*/
    background-repeat: no-repeat;
    background-position: center;  
  }
  
  .navbu.home {
    background-size: 61%;
    background-image: var(--navimg-home); 
  }
  .navbu.notifs {
    background-image: var(--navimg-bell);
  }
  .navbu.msg {
    background-size: 78%;
    background-image: var(--navimg-msg);
  }
  .navbu.write {
    background-size: 68%;
    background-image: var(--navimg-write);
  }
  .navbu.question {
    background-size: 61%;
    background-image: var(--navimg-question);
  }
  .navbu.vote {
    background-size: 61%;
    background-image: var(--navimg-vote);
  }
  
  .navdot {
    width: 6px;
    height: 6px;
    display: block;
    position: relative;
    border-radius: 10px;
    margin-top: -21px;
    margin-left: -36px;
  }
  
  .navdot.on {
    background: var(--theme-bg);
  }
  
  #notif-cont {
    visibility:none;
    display:none !important;
  }
  
  .br {
    /* height: 4px; */
    height: 4px !important;
    /*height: 0px;*/
    display: block;
    position: relative;
  }
  
  .daybox-inside-number {
    font-size: 15px;
    font-weight: 700;
    color: var(--theme-bg);
  }
  
  #dynamic-image-grid {
    display: flex;
    /*height: 200px;*/
    background: var(--hl-brighter);
    margin: 17px;
    overflow:hidden;
    border-radius: 19px;
  }
  
  .dig-0 {}
  .dig-1 {height: 222px;}
  .dig-1 div { width: 100%; }
  
  .dig-2 {height: 222px;}
  .dig-2 div { width: 50%; }
  
  .dig-3 { height: 275px; flex-wrap: wrap; }
  .dig-3 div { }
  
  .dig-4 {height: 260px; flex-wrap: wrap; }
  .dig-4 div { flex-basis: 50%; min-height: 50%;}
  
  .dig-5 {height: 260px; flex-wrap: wrap; }
  .dig-5 div { flex-basis: 50%; min-height: 50%;}
  
  .dig-6 {}
  .dig-6 {height: 240px; flex-wrap: wrap; }
  .dig-6 div { flex-basis: 33%; min-height: 50%;}
  
  .dig-7 {}
  .dig-8 {}
  
  .dynamicImage {
    position: relative;
    border: 1px solid var(--bg);
    background-repeat: no-repeat;
  }
  
  /* correction on 01-12-2023 */
  #page-title {
    /*padding-left: 13px !important;  */
    /* padding-left: 26px !important; */
    padding-left: 21px !important;
    justify-content: flex-start !important;
  }
  
  /* do not display on desktop app */
  #navigation-bar { /*display: none;*/ }
  /* always display on phone view */
  .iPhone #navigation-bar { display: block !important; }
  
  .communityLogo {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 100px;
  }
  
  .communityTitle {
    font-size: 20px;
    font-weight: 600;
    color: var(--hl-brightest);
  }
  
  .communityKeyword {
    font-size: 15px;
  }
  
  .communityDescription {
    margin-top: 10px;
    color: var(--hl-slightly-brighter-text);
  }
  
  .community-signup-button {
    max-width: 266px;
    margin: auto;
    border-radius: 9px;
    padding-top: 0px;
    padding-bottom: 0px;
    background: var(--something-button-bg-color);
    color: var(--something-button-text-color);
  }
  
  #sidebar-communities {
    height: 632px;
    max-height: 632px;
    overflow-y: scroll;
    max-width: 425px;
  }
  
  .square-cancel-button {
    cursor: pointer;
    position: relative;
    background: var(--square-cancel-mark);
    background-size: cover;
    background-color: var(--hl-fainter-lines);
    border-radius: 9%;
    background-size: 66%;
    background-position: 8px 7px;
    z-index: 10000000000000;
    width: 35px;
    height: 35px;
  }
  
  #navdot-msg {
    /*width: 18px;
    height: 18px;
    display: block;
    position: relative;
    border-radius: 10px;
    margin-top: -21px;
    margin-left: -7px;
    text-align: center;
    line-height: 18px;
    font-weight: bold;
    color: #575757;*/
  }
  
  .navbu {
    /* background-color: var(--ui-bg); */
    border-radius: 50px;
    width: 36px;
    height: 36px;
    background-position-x: 1px;
    background-position-y: 1px;
    background-size: 73%;
    background-position: center;
  }
  
  .midjourney-prompt {
    background: #36393f;
    padding: 10px;
  }
  
  .midjourney-prompt span {
    display: block;
    position: relative;
    padding: 10px;
    /* padding-top: 0; */
    padding-left: 40px;
    border-radius: 10px;
    color: #dcddde;
    font-size: 18px;
    background: url(https://ghosttogether.net/static/discord-plus-button.svg) no-repeat;
    background-size: 32px 32px;
    background-color: #40444b;
    background-position: 4px 7px;
  }
  
  
  .articleHeaderImage {
    width: 100%;
    max-width: 925px;
    margin: auto;
    position: relative;
    border-radius:4px;
  }
  
  #page-title #dm-recipient-username {
    font-size: 14.4px !important;
    color: var(--subtle-text-color) !important;
  }
  
  .candle {
    cursor: pointer;
  }
  
  .fsi,
  .font-size-inherit {
    font-size: inherit !important;
  }
  
  #sidebar-comm-signup-button {
    position: absolute;
    right: 20px;
    top: 13px;
    max-width: 112px;
    z-index: 100000000;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
  }
  
  
  
  ::-webkit-scrollbar {
    
  }
  
  #notes-bar:not(.collapsed) #my-note div.plusButton {
    top: 4px;
    left: 68px;
  }
  
  .mini-note-box {
    
  }
  
  .padding-left-25 {
    padding-left: 25px;
  }
  
  #status {
    position: absolute;
    width: 200px;
    height: 66px;
    border-radius: 12px;
    background: var(--bg-hl);
    bottom: 32px;
    right: 32px;
    padding-left: 7px;
    transition: 0.2s;
  }
  
  #status:hover {
    transform: scale(1.025)
  }
  
  #status *:hover {
    color: gray !important
  }
  
  .status-dn {
    font-size: 15px;
    font-weight: bold;
    padding-top: 10px;
    color: var(--sharp-bg-inverse) !important;  
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  
  }
  
  .status-un {
    font-size: 14px;
    color: gray !important;
  }
  
  .ib,
  .inlineblock,
  .inline-block {
    display: inline-block !important;
  }
  
  @media screen and (max-width: 1435px) {
    #status { width: 68px; right: 18px; }
    #status .status-dn { display: none; }
    #status .status-un { display: none; }
  }
  
  body.iPhone #status {
    display: none;
  }
  
  .online {
    position: absolute;
    display: flex;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    border-radius: 50px;
    background: var(--bg-hl);
  }
  
  .online.on div {
    display: block;
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50px;
    background: greenyellow;
  }
  
  #postoptions {
    position: relative;
  }
  #postoptions-msg {
    left: 0;
    /* top: -24px; */
    top: -36px;
    width: 100% !important;
    font-size: 15px;
    position: absolute !important;
    color: var(--hl-slightly-brighter-text);
  }
  
  .square-cancel-button {
    cursor: pointer;
    position: relative;
    background: var(--square-cancel-mark);
    background-size: cover;
    background-color: var(--hl-fainter-lines);
    border-radius: 9%;
    background-size: 66%;
    background-position: 8px 7px;
    z-index: 2147483647;
    width: 35px;
    height: 35px;
  }
  
  .rounded1 { border-radius: 1px }
  .rounded2 { border-radius: 2px }
  .rounded4 { border-radius: 4px }
  .rounded8 { border-radius: 8px }
  .rounded16 { border-radius: 16px }
  .rounded32 { border-radius: 32px }
  .rounded64 { border-radius: 64px }
  
  #storytype {
    min-height: 100px;
  }
  
  .background-hl-brighter {
    background: var(--hl-brighter)
  }
  
  .bright {
    color: var(--hl-bright)
  }
  
  .brighter {
    color: var(--hl-brighter)
  }
  
  .brightest {
    color: var(--hl-brightest)
  }
  
  .brighterer {
    color: var(--hl-brighterer)
  }
  
  .communityPosts {
    z-index:1;
    max-width: 400px;
    overflow: hidden;
  }
  
  .communityPosts .tweet {
    max-width: 330px;
  }
  
  #community-undername-container {  
    position: sticky;
    display: block;
    z-index: 100000000;
    top: -118px;
  }
  
  #switch-community {
    display:none;
  }
  
  #sidebar-comm-signup-button {
    display: none;
  }
  
  #plan-article input {  
    height: 34px;
    margin-top: 10px;
  }
  
  #plans {
    width: 100%;
  }
  
  #notes-bar.collapsed .logged-in-letter {
    display:none;
  }
  
  .plan-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    color: var(--secondary-text) !important;
  }
  
  .plan-delete-button {
    transition:0.3s;
    position: absolute;
    overflow:hidden;
    top: 10px !important;
    right: 15px !important;
    width: 0 !important;
    height: 17px;
    line-height: 17px;
    background: var(--error-color);
    color: white;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .plan-delete-button.on {
    width: 50px !important;
    right: 32px !important;
  }
  
  .contacts-ava {
    background: url("https://ghosttogether.net/static/default-empty-ava.png");
    background-size: 100%;
    background-position: center;
    margin-top: 4px !important;
  }
  
  #mini-notes .contacts-ava {
    position: relative;
    display: block;
    margin-top: 8px;
    width: 72px !important;
    height: 72px !important;
    /*margin-left: 15px !important;*/
    margin-left: 12px !important;
    margin-right: 15px !important;
    border-radius: 5px !important;
    cursor: pointer;
  }
  
  #mini-notes .collapsed .contacts-ava {
    margin-left: -8px !important;
  }
  
  .add-question,
  .add-paragraph {
    width: 32px;
    height: 32px;
    /* margin: 2px; */
    margin-left: 17px;
    margin-top: 3px;
    display: block;
    position: relative;
    background: url(https://ghosttogether.net/static/paragraph.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70%;
    background-color: var(--theme-bg);
    border-radius: 2px;
    cursor: pointer;
  }
  
  .add-question {
    background: url(https://ghosttogether.net/static/q.svg);
    background-color: #31914e;
    background-size: 63%;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  #add-draft {
    padding-top: 0;
  }
  
  #header-images {
    margin-bottom: 20px;
  }
  
  .plan-square-image {
    width: 180px;
    height: 180px;
    margin-right: 27px;
    border: 1px solid var(--hl-faint-lines);
    background: var(--hl-faint-lines);
    border-radius: 6px;  
    cursor: pointer;
  }
  
  .plan-wide-image {
    width: 320px;
    height: 180px;
    border: 1px solid var(--hl-faint-lines);
    background: var(--hl-faint-lines);
    border-radius: 6px;
    cursor: pointer;
  }
  
  .square-image:hover {
    border: 1px solid var(--hl-brighter);
  }
  
  .wide-image:hover {
    border: 1px solid var(--hl-brighter);
  }
  
  #text-editor {
  
  }
  
  .plan-image-text {
    font-weight: 600; text-align: center;
    color: var(--highest-contrast-text-color) !important;
  }
  
  .custom-file-upload {
    display: inline;
    width: auto;
  }
  
  .plan-square-image {
    margin-bottom: 20px;
  }
  
  /* If tweet feed on article page, adjust tweet layout aesthetic */
  body.is-article .tweet-user-image {
    padding-left: 0;
    margin-left: -5px;
  }
  body.is-article .tweet-avatar {
    background-color: #1ea9e3 !important;
    transform: scale(0.7);
    margin-top: -4px;
  }
  body.is-article .media-root {
    padding-right: 0;
  }
  body.is-article .tweet {
    max-width: unset;
  }
  body.is-article .media-container {
    max-width: 333px;
  }
  .tweet-avatar {
    background-color: var(--blank-avatar-bg) !important;
  }
  
  #last-30-days {
  
  }
  .dms-bar,
  .posts-bar,
  .signups-bar,
  .signup-bar {
    background: var(--theme-bg);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: pointer;
    width: 5px;
  }
  
  #community-last-30-days {
    width: 100%;
  }
  
  #sitewide_signups,
  #sitewide_dms,
  #sitewide_posts,
  #sitewide_signups2,
  #sitewide_dms2,
  #sitewide_posts2 {
    margin: 17px;
    max-width: 400px;
    border-radius: 10px;
    background: var(--hl-brighter);
    border-bottom: unset !important;
    flex-direction: row;
    align-items: end;
    flex-direction: row-reverse;
    padding-top: 73px !important;
  }
  
  #sitewide_signups,
  #sitewide_dms,
  #sitewide_posts,
  #last-30-days,
  #sitewide_signups2,
  #sitewide_dms2,
  #sitewide_posts2,
  #last-30-days2 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    width: 100%;
    height: 50px;
    /* background: var(--hl-faint-lines); */
    border-radius: 10px;  
  }
  .dms-bar,
  .posts-bar,
  .signup-bar,
  .signups-bar,
  .dms-bar2,
  .posts-bar2,
  .signup-bar2,
  .signups-bar2 {
    align-self: flex-end;
  }
  
  .communityHeader {
    padding-bottom: 0;
  }
  
  .contacts-ava {
    background-color: var(--blank-avatar-bg) !important;
  }
  
  #sitewide.collapsed {
    height: 40px;
    margin-bottom: 34px !important;
    margin-top: 34px !important;
  }
  
  #clockworth.collapsed {
    height: 40px;
    margin-bottom: 34px !important;
    margin-top: 34px !important;
  }
  
  #clockworth.collapsed #clock {
    transform: scale(0.50)
  }
  
  @keyframes flashingBar { /* flame pulses */
    0%   { opacity:1; }
    50%  { opacity:0.25; }
    100% { opacity:1; }
  }
  .flashing-bar {
      opacity:1;  
      animation: flashingBar 1s ease-in-out infinite;
  }
  
  .catcher {
    font-weight: bold;
    font-style: italic;
    color: blue;
  }
  
  .intext32x32 {
    display: inline-block !important;
    position: relative !important;
    width: 32px;
    height: 32px;  
    vertical-align: middle;
    margin-top:-5px;
  }
  
  .published-note {
    color: gray;
    font-size: 18px;
    margin-top: 10px;
    font-variant-caps: all-small-caps;
    font-family: arial;
  }
  
  .is-article #view {
    /*margin-left: 20px;*/
    border-top-left-radius: 20px;
  }
  
  #notes-container.collapsed .contacts-ava {
    background-size: 100% !important;
    opacity: 0.33;
  }
  
  .communityName {
    margin-bottom: 12px;
  }
  
  .pointarea {
    font-size: 16px;
    transition: unset;
    border-width: 2px;
    border: 2px solid var(--input-border-color) !important;
  }
  
  ul#key-points {
    /* list-style-type: square; */
    /* max-width: 760px; */
    /* margin: auto; */
    margin-top: 17pxpx;
    margin-bottom: 30px;
  }
  
  #key-points li {
    font-size: 20px !important;
    margin-bottom: 28px;
    color: #333;
  }
  
  .key-point {
    font-weight: 600;
    font-size: 20px !important;
  }
  
  .image-credit {
    font-variant-caps: all-small-caps;
    font-family: arial;
    font-weight: 500;
    font-size: 17px;
    line-height: 0 !important;
  }
  
  .is-article #nav-bar {
    border-bottom: unset !important;
  }
  
  .monospace {
    font-size: inherit;
  }
  
  .is-article li .monospace {
    font-size: 20px;
  }
  
  .is-article p .monospace {
    font-size: 20px;
  }
  
  /* disabled on 3 29 2023 */
  #mini-notes {
    /* display: none; */
  }
  
  #nav-bar {
    opacity: 1; width: 100%;
    backdrop-filter: blur(9px);
    border-bottom: 0 !important;
    background-color: var(--navbar-bg-color);
    /*z-index: 10000000000000 !important;*/
  }
  
  body.spa #view {
    margin-top: -69px !important;
    padding-top: 64px !important;
  }
  
  .images-2-container {
    width: 50%;
    height: 180px;
    height: 240px;
    max-height: 180px;
  }
  
  .images-2-image {
    width: 100%;
    height: 180px;
    height: 240px;
    max-height: 180px;
    max-height: 240px;
    border-radius: 13px;
    overflow: hidden;  
    border: var(--line-border-1);
  }
  
  .image-4-container {
    width: 100% !important;
  }
  
  .images-3-container {
    /*width: 50%;*/
    width: calc(33% - 7px);
    /*width: 240px;*/
    height: 180px;
    max-height: 180px;
  }
  
  .images-3-image {
    width: 100%;/*248px;*/
    height: 180px;
    max-height: 180px;
    border-radius: 13px;
    overflow: hidden;  
    border: var(--line-border-1);
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
  }
  
  .images-4-container {
    /*width: 50%;*/
    width: calc(50% - 5px);
    /*width: 240px;*/
    height: 180px;
    max-height: 180px;
  }
  
  .images-4-image {
    width: 100%;/*248px;*/
    height: 180px;
    max-height: 180px;
    border-radius: 13px;
    overflow: hidden;  
    border: var(--line-border-1);
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
  }
  
  #gallery {
    margin-top: 88px !important;
    height: 253px !important;
  }
  
  .gallery { }
  
  .iPhone .gallery { overflow-x: scroll !important; }
  
  #gallery-gallery {
    padding: 19px;
    height: 262px;
    margin-top: 16px;
  }
  
  .storySquareImage {
    width: 32px;
    height: 32px;
    background-color: var(--bg-hl-subtle);
    border-radius: 5px;
  }
  
  .trending-item {
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  
  /* temporarily removed click 4-1-2023*/
  #clockworth {
    /*display:none;*/
  }
  
  #notificaitons-container {
    display: none !important;
  }
  
  .brightest-nope {
    color: var(--hl-brighterer) !important;
  }
  
  #body.spa #community-signups-header {
    display: none !important;
  }
  
  #body.spa #presence {
    /* display: none !important; */
  }
  
  #body.spa #mini-notes {
    display: none !important;
  }
  
  #body.spa {
    overflow-y: auto;
  }
  
  #body.spa #master {
    height: unset !important;
  }
  
  #status {
    display:none !important;
  }
  
  .tweet:hover .comments-number {
    /* color: var(--theme-bg); */
  }
  
  .notif-source-code {
    white-space: pre;
    font-family: monospace;
    background: var(--hl-slightly-brighter);
    display: block;
    padding: 17px;
    border-radius: 5px;
    margin-left: -10px;
    color: var(--highest-contrast-text-color);
    margin-right: 13px;
    overflow: overlay;
    margin-bottom: 8px;
    margin-top: 10px;
  }
  
  .notif-source-code::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  
  .notif-source-code::-webkit-scrollbar-track {
    background: var(--hl-fainter-lines);
  }
  
  .notif-source-code::-webkit-scrollbar-thumb {
    background: var(--hl-brighterer);
  }
  
  .tweet-text {
    /* white-space: break-spaces; */
    /* white-space: pre-line; */
  }
  
  #selected-tweet-text-container {
    /* white-space: break-spaces; */
    white-space: pre-line;
  }
  
  #wisp-url-message {
    white-space: break-spaces;
  }
  
  .tweet-text .br {
     height: 0px !important;
  }
  
  #HistoryOverlay {
    /*display: none !important;*/
  }
  
  .DraftEditor .tweet-text {
    all: unset;
  }
  
  .add-paragraph {
    background-color: var(--theme-bg);
  }
  
  #text {
    padding: 8px;
    font-size: 17px;
    min-height: 456px;
    border: 2px solid var(--input-border-color);
  }
  
  #text:focus {
    border: 2px solid var(--theme-bg);
  }
  
  #text-editor {
    width: 100%;
    z-index: 100;
    min-height: 200px;  
    position: sticky;
    top: 0;
  }
  
  #askgpt-spin {
    width: 24px;
    height: 2px;
  }
  
  @keyframes gptSpin {
    0% {
      transform:rotate(0deg)
    }
    100% {
      transform:rotate(360deg)
    }
  }
  
  .gpt-spin {
    width: 24px;
    height: 24px;
    animation-duration: 2s;
    animation-name: gptSpin;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;  
    background: url('https://ghosttogether.net/static/gpt.svg');
    background-size: 24px 24px;
    background-position: center;
    position: relative;
  }
  
  body .tweet.new {
    /*background: var(--theme-bg)*/
    /*background: #eafff273*/
  }
  
  /* new wisps on timeline */
  body.darkmode .tweet.new {
    background: #16201f
  }
  
  /* new wisp on timeline */
  body.default .tweet.new {
    /* background: #f0ffee */
  }
  
  .wispno {
    color: var(--subtle-text-color);
  }
  
  .reg-half {
    height: unset !important;
  }
  
  .trending-usergroup {
    width: 33.3%;
    position: relative;
    overflow: hidden;
  }
  
  .trending-usergroup {
    padding-left: 20px;
    background: var(--hl-brighter);
    cursor: pointer;
  }
  
  .trending-usergroup:hover {
    background: var(--hl-slightly-brighter);
  }
  
  .ninexnine {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 240px
  }
  
  .bvhl {
    color: #007fff;
  }
  
  .versename {
    font-weight: bold;
  }
  
  #writeopts {
    position: absolute;
    top: -2px;
    left: 62px;
    background: white;
    border-radius: 5px;
    color: gray;
    padding: 15px;
    transform: scale(0.5);
    transition: 0.4s;
    opacity: 0;
    pointer-events: none;
    /* z-index: 10000000000000 !important; */
  }
  
  #writeopts.on {
    transform: scale(1.1);
    opacity: 1;
    pointer-events: all
  }
  
  #writeopts div {
    cursor: pointer;
    margin-bottom: 6px;
  }
  
  #timelinefilter {
    position: absolute;
    top: 23px;
    left: 145px;
    background: white;
    border-radius: 5px;
    color: gray;
    padding: 15px;
    transform: scale(0.5);
    transition: 0.4s;
    opacity: 0;
    pointer-events:none;
    box-shadow: 0 0 4px -3px #000000;
  }
  
  #timelinefilter.on {
    transform: scale(1.1);
    opacity: 1;
    pointer-events:all
  }
  
  #timelinefilter div {
    cursor: pointer;
    margin-bottom: 6px;
  }
  
  #filter {
    padding: 3px 10px;
    margin-left: -11px;
  }
  
  .timelinedetails {
    /*font-weight: 100;*/
    font-size: 15px;
    padding-left: 10px;
    color: var(--text-color);
  }
  
  .user-bio-info-bar {
    
  }
  
  .sidebar-user-container {
    
  }
  
  .input-placeholder {
    visibility: hidden;
  }
  
  .haunts {
    font-weight: 500;
  }
  
  #letter-subcomment {
    width: 100%;
    border: 0 !important;
    background-color: white;
    border-radius: 20px;
    font-size: 18px;
    line-height: 33px;
      /* font-size: 17px; */
    /* font-size: 19px; */
    /* border-width: 1px !important; */
    height: 34px;
    /* margin-top: -2px; */
    /* border-radius: 25px; */
    transition: unset;
    padding-left: 13px;
    padding-top: 0px;
    resize: none;
  }
  
  .article-square-image {
    width: 100px;
    height: 100px;
  }
  
  .openlink {
    width: 20px;
    height: 20px;
    position: relative;
    margin-top: -1px;
    vertical-align: middle;
    display: inline-block;
    background: url(https://ghosttogether.net/static/openlink.png);
    background-position: 100%;
    background-size: cover;
    opacity: 0.4;
  }
  
  .article-square-image {
    background-position: center center;
    background-size: cover;
    transform: scale(0.75);
    border-radius: 12px;
  }
  
  .written-box {
    width: 490px;
    padding-left: 5px;
    padding-top: 11px;
  }
  
  .story-title-ellipsis {
    display: inline-block;
    text-overflow: ellipsis;
    width: calc(100% - -13px);
    overflow: hidden;
    white-space: nowrap;
    font-family: 'Space Grotesk';
    font-size: 19px;
    color: var(--hl-brighterer);
  }
  
  #search {
    width: 93%;
    border-radius: 4px;
    border: 1px solid gray;
    padding-left: 16px;
    /* background: var(--ss-bg); */
  }
  
  .search-mid {
    background: var(--hl-brighter);
  }
  
  #quickemail-subject {
    margin: 10px;
    width: 90%;
    border: 0 !important;
    padding: 14px;
    border-radius: 5px;
  }
  
  #num_o_images,
  #num_o_wisps {
    font-weight: 700 !important;
    font-size: 18px !important;
  }
  
  #quickemail-body {
    margin: 10px;
    width: 90%;
    border-radius: 5px;
    border: 0 !important;  
    padding: 14px;
    padding-top: 8px;
    font-size: 16px;
  }
  
  #snav-image-gal {
    padding-left: 0;
    background: var(--bg);
    /*padding-bottom: 19px;*/
  }
  
  #dynamic-image-grid {
    
  }
  
  #user-image-tab {
    margin-top: 11px;
    font-weight: 700;
    font-size: 22px;
    color: var(--highest-contrast-text-color);
  }
  
  #search::-webkit-input-placeholder {
    color: var(--ss-fg) !important;
    z-index: 2147483647;
  }
  
  
  #title,
  #browsertitle {
    border-bottom: 5px solid var(--theme-bg) !important;
    border-bottom-width: 5px !important;
  }
  
  .draft-button {
    width: 70px;
    padding: 4px;
    white-space: nowrap;
    padding-top: 0;
    padding-bottom: 0;
    height: 28px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--hl-faint-lines);
    line-height: 16px;
    text-align: center;
  }
  
  .draft-button {
    opacity: 0.5
  }
  
  input.error,
  select.error,
  textarea.error {
    border: 1px solid var(--error-color) !important
  }
  
  input.erroroutline,
  select.erroroutline,
  textarea.erroroutline {
    border: 1px solid var(--error-color) !important
  }
  
  .is-article h1 {
    font-family: 'Space Grotesk';
    /*font-size: 40px !important;*/
    font-size: 35px !important;
  }
  
  .structure {
    background: #0d7766;
    color: white;
    padding: 6px 15px;
    display: inline-block;
    border-radius: 2px;
  }
  
  .tc, .text-center {
    text-align: center;
  }
  
  .caption {
    font-weight: 400 !important;
    font-size: 20px !important;
  }
  
  .subtitle {
    background: #eee;/*repeating-linear-gradient(360deg, #00000011, transparent 32px);*/
    margin-left: -10px !important;
  }
  
  q {
    font-weight: 700;
    font-size: 24px;
    color: #333;
    quotes: none;
  }
  
  .caption .monospace {
    font-size: 18px !important;
  }
  
  h1.h1 {
    font-size: 34px
  }
  
  .is-article #page-title {
    display: block;
    /* flex-wrap: nowrap; */
    width: calc(100% - 200px);
    text-overflow: ellipsis;
    position: relative;
    font-family: 'Space Grotesk';
    overflow: hidden;
    white-space: nowrap;
    font-size: 23px;
    margin-top: 16px;
    padding-left: 27px !important;
  }
  
  
  .is-article #view {
    padding-left: 29px !important
  }
  
  .is-article .go-back {
    background: url(https://ghosttogether.net/static/ghost-together.png);
    background-position: center center;
    background-size: 97%;
    background-repeat: no-repeat;
    top: 0px;
    left: 12px;
  }
  
  .is-article #nav-bar {
    background-color: #000000CC;
  }
  
  .ghosttogether {
    font-style: normal;
    text-decoration: none;
    font-size: 19px;
    font-variant: all-small-caps;
    font-weight: 600;
  }
  .copy-link-msg {
    width: 200px;
    display: block;
    margin: auto;
    background: var(--theme-bg);
    text-align: center;
    color: white;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 7px;
    font-size: 18px;
    cursor: pointer;
  }
  
  pre.dark span.cmd {
    color: var(--theme-bg) !important;
  }
  
  .TranslateLink {
    margin-top: 5px;
    font-size: 14px !important;
    color: var(--theme-bg) !important;
    text-decoration: none;
  }
  
  .userlist-item:hover {
    background-color: var(--bg-hl) !important;
    cursor: pointer;
  }
  
  .read-more {
    color: var(--theme-bg);
    z-index: 2147483647 !important;
    font-weight: 700;
    font-size: 14px;
  }
  
  #postoptions {
    transform: scale(1);
    margin-left: 11px;
  }
  
  #community-changer {
    
  }
  
  #send-message-container {
    background: var(--hl-brighter);
  }
  
  body .target-action-comment {
    opacity: 0.4 !important;
  }
  
  body.darkmode .target-action-comment {
    opacity: 0.8 !important;
  }
  
  #letter-main-options {
    display:none;
  }
  
  #letter-media-preview-main {
    display:none;
  }
  
  .notification-text-inner {
    border: 1px solid var(--hl-fainter-lines);
    padding: 10px;
    border-radius: 4px;
    margin-right: 43px;
    cursor: pointer;
    width: fit-content;
    max-width: 480px;
  }
  
  .notification-text-inner:hover {
    border: 1px solid var(--hl-faint-lines);
  }
  
  body.darkmode .notification-text-inner {
    background: #ffffff14;
    color: #c8c8c8 !important;
  }
  
  .notification-text-inner {
    margin-left: -14px;
    margin-top: 10px;
  }
  
  body.iPhone .notification-text-inner {
    font-size: 21px !important;
    line-height: 28px !important;
    padding-left: 20px;
    margin-right: 5px;
    /*font-weight: 500 !important;*/
    margin-top: 10px !important;
    margin-left: -26px !important;
  }
  
  .subwisp-arrow {
    top: 1px;
    left: -2px;
    opacity: 0.75;
    width: 12px;
    height: 21px;
    position: absolute;
    display: block;
    background: url("https://ghosttogether.net/static/notif-reply.png") no-repeat;
  }
  
  .subwisp-arrow-notification {
    top: 9px;
    left: -2px;
    opacity: 0.75;
    width: 12px;
    height: 21px;
    position: absolute;
    display: block;
    background: var(--replied-to-notification-arrow);
    background-repeat: no-repeat;
  }
  
  .notif-action-type {
    color: gray;
  }
  
  .news-story-views {
    margin-left: 0px;
    font-size: 15px;
    margin-top: 2px;
    font-weight: 670;
  }
  
  .audience-link {
    font-weight: 700;
    /*color: var(--theme-bg);*/
    color: var(--secondary-text);
    font-size: 14px;
    margin-left: 5px;
    margin-top: -5px;
  }
  
  .audience-link-notmine {
    font-weight: 700;
    color: var(--secondary-text) !important;
    font-size: 14px;
    margin-left: 5px;
    margin-top: -5px;
  }
  
  .audience-total-views {
    font-weight: 700;
    color: var(--secondary-text);
    font-size: 14px;
    margin-left: 5px;
    margin-top: -5px;
  }
  
  .dm-recipient-avatar {
    background: url('https://ghosttogether.net/static/avatar400.png')
  }
  
  .total-aud-views {
    position: absolute;
    top: 0px;
    right: 10px;
    font-weight: 500;
    color: var(--secondary-text);
  }
  
  /* 7-1-2023 mobile updates */
  
  body.iPhone .tweet-opts {
    transform: scale(1.24);
    top: 93px !important;
    right: 30px !important;
    transition: unset !important;
  }
  body.iPhone .seenlist-container {
    margin-left: 59px !important;
    margin-top: 14px;
    margin-bottom: 14px;
  }
  body.iPhone .audience-total-views {
    font-size: 21px !important;
    line-height: 28px !important;
    color: var(--hl-faint-lines) !important;
  }
  body.iPhone .audience-total-views {
    font-size: 21px !important;
    line-height: 28px !important;
    color: var(--hl-faint-lines) !important;
  }
  body.iPhone .audience-link {
    font-size: 21px !important;
    line-height: 28px !important;
    color: var(--hl-faint-lines) !important;
  }
  body.iPhone .audience-link-notmine {
    font-size: 21px !important;
    line-height: 28px !important;
    color: var(--hl-faint-lines) !important;
  }
  
  body.iPhone .tweet-opts {
    animation-name: unset !important;
  }
  
  body.iPhone .views-ctr {
    display: none;
  }
  
  body.iPhone .arrow-down {
    opacity: 0.7;
    background-size: 28px;
    right: 16px;
    top: 19px;
    transform: rotate(90deg);
  }
  
  .arrow-down {
    transform: rotate(90deg);
  }
  
  body.iPhone .tweet-text {
    /* background: #ffffff14; */
    /*color: #ffffff9e !important;*/
    color: var(--text-color);
    /* border: 1px solid var(--hl-fainter-lines); */
    /* padding: 10px; */
    /* border-radius: 4px; */
    /* margin-right: 43px; */
    cursor: pointer;
    width: fit-content;
    /* margin-left: 57px; */
    /* margin-top: 12px; */
    /* margin-right: 5px; */
  }
  
  body.iPhone.darkmode .tweet-text {
    /* background: #ffffff14; */
    color: #ffffff9e !important;
    /* border: 1px solid var(--hl-fainter-lines); */
    /* padding: 10px; */
    /* border-radius: 4px; */
    /* margin-right: 43px; */
    cursor: pointer;
    width: fit-content;
    /* margin-left: 57px; */
    /* margin-top: 12px; */
    /* margin-right: 5px; */
  }
  
  .tiny-target {
    background: var(--hl-brighter);
    border-radius: 5px;
    padding-left: 76px;
    margin-right: 133px;
    padding-top: 18px;
    /* padding-left: 19px; */
    border: 1px solid var(--hl-brighter);
    padding-bottom: 13px;
    font-size: 14.4px;
    color: var(--text-color);
    padding-right: 10px;
    margin-top: -10px;
  }
  
  body.iPhone .tiny-target {
    font-size: 18.4px !important;
  }
  
  .tiny-target-subwisp-arrow {
    top: 2px;
    left: 40px;
    opacity: 0.75;
    width: 57px;
    height: 6px;
    position: absolute;
    display: none;
    /* transform: rotate(-27deg); */
    background: url(https://ghosttogether.net/static/notif-reply.png);
    background-repeat: no-repeat;
  }
  
  .tweet-hashtags,
  #commf .tweet-hashtags {
    display: none !important
  }
  
  body:not(.iPhone) div.tiny-target {
    /*margin-top: -5px;*/
  }
  
  body:not(.iPhone) #e.whatsnew {
    max-height: 600px
  }
  
  .wispInviteLink {
    margin: 18px;
    padding: 10px;
    background: var(--bg-hl);
    border-radius: 6px;
  }
  
  body:not(.DarkMode) .wispInviteLink {
    background: #efefef;
  }
  
  .smalllink {
    font-size: 17px;
    font-weight: 500;
  }
  
  .is-article i {
    font-weight: 500;
  }
  
  .is-article a {
    font-weight: 500;
    /* font-family: cursive; */
  }
  
  .kwkw {
    display: inline-block;
    background: white;
    font-weight: 500;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    color: #444;
    font-family: inherit;
  }
  
  .table-of-contents {
    background: white;
    color: #444;
    margin-left: -21px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: none;
  }
  
  .is-article .table-of-contents {
    display: block !important;
  }
  
  #portal-link {
    display: none;
  }
  
  .is-article #portal-link {
    display: block !important;
  }
  
  #ask {
    background: white;
    padding: 40px;
    margin-top: 20px;
    border-radius: 5px;
    margin: 30px;
  }
  
  .stackoverflow-recent-link {
    overflow: hidden;
    text-decoration: none;
    display: inline-block;
    text-overflow: ellipsis;
    /*white-space: nowrap;
    font-size: 15px;*/
    font-size: 14px;
    width: calc(100%);
    color: #0074cc !important;
  }
  
  .stackoverflow-recent-link:hover {
    color: #0a95ff !important;
  }
  
  #so-post {
    padding-left: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hl-fainter-lines);  
  }
  
  #so-post-timings div {
    margin-right: 20px;
    padding-bottom: 16px;
    font-size: 15px !important;
  }
  
  .voter-stackoverflow {
    min-width: 68px !important;
  }
  
  .voter-reddit {
    min-width: 68px !important;
  }
  
  .vote-up {
    width: 45px;
    height: 45px;
    border: 1px solid var(--hl-fainter-lines);
    border-radius: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .vote-up:hover {
    background-color: var(--hl-faintest-lines);
  }
  
  .vote-num {
    width: 45px;
    /* border-radius: 50%; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .voter-reddit {
    margin-top: 17px;
    margin-left: 17px;
  }
  
  .RedditPostStripe .vote-up {
    width: 32px;
    height: 32px;
  }
  
  .RedditPostStripe .vote-num {
    height: 32px;
  }
  
  .RedditPostStripe .vote-down {
    width: 32px;
    height: 32px;
  }
  
  .vote-bookmark {
    width: 48px;
    display: flex;
    justify-content: center;
    margin-top: 12px;
    height: 27px;
    background: url(https://ghosttogether.net/static/mini-icon-bookmark.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .RedditPostStripe .vote-bookmark {
    margin-top: 4px;
  }
  
  .RedditPostStripe .reddit-bright {
    /*color: #d7dadc !important;*/
    
  }
  
  body.Reddit.DarkMode .RedditPostStripe .reddit-bright {
    color: #cccccc !important;
  }
  
  .community-full {
    width: calc(100% - 296px) !important;
  }
  
  .community-less {
    width: calc(100% - 296px) !important;
    max-width: 737px;
  }
  
  .reddit-full {
    width: calc(100% - 296px) !important;
  }
  
  .vote-down {
    width: 45px;
    height: 45px;
    border: 1px solid var(--hl-fainter-lines);
    border-radius: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .vote-down:hover {
    background-color: var(--hl-faintest-lines);
  }
  
  #so-post-timings {
    border-bottom: 1px solid var(--hl-fainter-lines);
    margin-bottom: 17px;
  }
  
  body.StackOverflow pre {
    max-height: 500px;
    overflow: scroll;
    background: #f3f3f3;/*var(--hl-faintest-lines) !important;*/
    margin-left: 0px;
    overflow-x: unset !important;
  }
  
  body.StackOverflow pre code {
    font-size: 16px !important;
    color: var(--text-color) !important;
  }
  
  body.StackOverflow .tag {
    background: #eaeaea;
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 1px;
      padding-bottom: 1px;
      margin-right: 7px;
      font-size: 15px;
  }
  
  body.StackOverflow .so-user {
    padding: 10px;
    background: #eee;
    border-radius: 5px;
  }
  
  body.StackOverflow .so-post-comments {
    margin-top: 28px;
    border-top: 1px solid var(--hl-faintest-lines);
    padding-bottom: 17px;
    padding-top: 0px;
    margin-left: 67px;
  }
  
  body.StackOverflow .so-com-timestamp {
    color: silver;
  }
  
  body.StackOverflow .so-com-username {
    color: var(--theme-bg)
  }
  
  .activity-calendar-day {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 57px;
    color: #aaa;
    border-right:1px solid silver;
    border-bottom:1px solid silver;
  }
  
  .activity-calendar-day.isheader {
    background: #eeeeee;
  }
  
  .so-total-upvotes {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stackoverflow-hl-color);
    color: white;
    min-width: 40px;
    max-height: 21px;
    text-align: center;
    margin-right: 10px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    vertical-align: middle;
  }
  
  #so-info-box {
    background: #ececec;
    color: #727272;
    font-size: 16px;
    margin: 4px;
    margin-right: 7px;
    border-radius: 5px;
    margin-top: 7px;
    border: 1px solid #d8d8d8;
  }
  
  #twitter-info-box {
    font-size: 15px;
    padding-top: 4px;
    padding-left: 24px;
  }
  
  .StackOverflow p {
    margin: 0 0 8px;
  }
  
  #so-answer-tips {
    background: #fdf7e2;
    border: 1px solid #e6cf79;
    padding: 20px;
    border-radius: 6px;
  }
  
  #so-ta {
    width: 100%;
    min-height: 100px;
    border: 2px solid #e7e7e7;
    transition: unset !important;
    border-radius: 5px;
    padding: 12px;
    font-size: 17px;
    padding-top: 10px;
  }
  
  #so-ta:focus {
    min-height: 500px;
  }
  
  .StackOverflow.DarkMode #so-ta {
    border: 2px solid #79e6c833;
  }
  
  .so-subheader {
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  
  #signupbar {
  
  }
  
  .so-low-button {
    background: silver;
    height: 40px;
    line-height: 21px;
    font-weight: 500;
    text-align: center;
    width: auto;
    display: inline-block;
    /* background: var(--theme-bg); */
    text-wrap: nowrap;
  }
  
  .StackOverflow pre.dark {
    max-height: 500px;
    overflow: scroll;
    max-width: 694px;
  }
  
  #so-add-comment-link {
    color: var(--theme-bg);
    cursor: pointer;
  }
  
  .so-textarea {
    min-height: 72px;
  }
  
  .so-edit-comment-link {
    font-weight: 500;
    color: var(--theme-bg);
    cursor: pointer;
  }
  
  .so-add-comment-button {
    font-size: 15px;
    /*width: 145px;*/
    padding: 7px;
    text-align: center;
    height: 40px;
    margin: 11px;
    margin-top: 0;
    margin-right: 0;
  }
  
  .vote-down.highlighted, .vote-up.highlighted {
    background: var(--primary-vote-button-background) !important;
    border: 1px solid var(--primary-vote-button-background) !important;
  }
  .vote-down.highlighted path, .vote-up.highlighted path {
    fill: white;
  }
  
  #so-post-opts {
    color: gray;
  }
  
  #editpostbox {
    border-radius: 4px;
    min-height: 200px;
    width: 100%;
    padding: 12px;
    font-size: 15px;
    transition: unset;
  }
  
  #savepostbutton {
    min-width: fit-content;
    margin-left: 7px;
    padding: 4px;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  #postkeywordsvalues {
    height: 28px !important;
  }
  
  #m {
    max-width: 1000px;
  }
  
  .comment-upvote.highlighted path {
    fill: orangered;
  }
  
  .add-a-comment {
    margin-left: 15px;
    font-size: 14px;
    margin-bottom: 30px;
  }
  
  .so-comment-text {
    padding-left: 20px;
    font-size: 14px;
    padding-bottom: 16px;
    padding-top: 16px;
    padding-right: 16px;
  }
  
  #originalmessage .monospace,
  #so-answer-list .monospace,
  .so-comment-text .monospace {
    font-weight: 600;
    font-family: 'Space Grotesk', monospace;
    text-decoration: none;
    /* background: #f5f5f5; */
    /*height: 20px;*/
    font-size: 14px;
    /* padding: 0; */
    /* margin: 0; */
    line-height: 22px;
    padding-left: 2x;
    padding-right: 2px;
    color: #141414;
    border-radius: 5px;
  }
  
  #originalmessage .monospace {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  
  #so-answer-list .monospace {
    font-weight: 600 !important;
  }
  
  body.StackOverflow .so-comment-text,
  body.StackOverflow .so-comment-text pre,
  body.StackOverflow .so-comment-text code {
    font-size: 14px !important;
  }
  
  .StackOverflow.DarkMode .so-comment-text,
  .StackOverflow.DarkMode .originalmessage,
  .StackOverflow.DarkMode #originalmessage {
    color: var(--subtle-text-color);
  }
  
  .StackOverflow.DarkMode pre.dark,
  .StackOverflow.DarkMode .originalmessage pre.dark {
    background: #333;
    border: 1px solid #444;
    border-left: 2px solid #197c9d !important;
  }
  
  
  .so-textarea:focus {
    min-height: 244px;
  }
  
  .StackOverflow.DarkMode .so-user {
    background: #333;
    color: var(--subtle-text-color);
  }
  
  .StackOverflow.DarkMode .so-comment-text .monospace,
  .StackOverflow.DarkMode .originalmessage .monospace {
    color: #aaa !important;
  }
  
  .StackOverflow.DarkMode #so-answer-tips {
    background: #04181f57 !important;
    border: 1px solid #79e6c8 !important;
  }
  
  .StackOverflow.DarkMode #so-info-box {
    background: #04181f57 !important;
    border: 1px solid #2e385799 !important;
  }
  
  .StackOverflow.DarkMode .so-low-button {
    background:#444
  }
  
  .editpostbox {
    border-radius: 4px;
    min-height: 364px;
    width: 100%;
    padding: 12px;
    font-size: 15px;
    transition: unset;
  }
  
  .save-post-button {
    text-wrap: nowrap;
    margin-left: 10px;
  }
  
  .StackOverflow pre {
    white-space: pre-wrap;
  }
  
  .published-by {
    color: var(--secondary-text) !important;
  }
  
  #graveyard {
    background: white;
    /* margin-left: 20px; */
    padding-left: 20px;
    width: 100%;
    padding-bottom: 20px;
  }
  
  #want-to-improve-this-question {
    margin-bottom: 12px;
    margin-left: -9px;
    border: 1px solid #c1c1c1;
    padding: 9px;
    padding-top: 4px;
    padding-bottom: 5px;
    border-radius: 6px;
    font-size: 15px;
  }
  
  #so-links div {
    font-size: 14px;
    font-weight: 500;
  }
  
  .RedditPostStripe {
    
  }
  
  ul#toc {
    line-height: 23px !important;
  }
  
  ul#toc li,
  ul#toc li a {
    font-size: 15px;
    font-weight: 500;
    line-height: 23px !important;
  }
  
  #ChangeBorderColorButton {
    padding: 6px;
    height: 39px;
    width: 64px;
    margin: 4px;
    border: 0 !important;
    background: #bbbbbb;
    border-radius: 4px;
    display: inline-block;
    margin-right: 13px;
  }
  
  .settings-avatar {
    cursor: pointer;
    border-radius: 5px;
  }
  
  body.settings.darkmode #view {
    background: #111111;
    color: gray;
  }
  
  body.settings.darkmode #view h3 {
    color: #939393;
  }
  
  body.settings.darkmode .trans200 {
    white-space: nowrap;
    background: #111111;
    color: #aaa;
  }
  
  body.settings .nav-title {
    height: 63px;
    font-size: 24px !important;
    font-weight: 500 !important;
  }
  
  body.settings.darkmode #sidebar section {
    border-bottom: 1px solid #333 !important;
    border-right: 1px solid #333 !important;
  }
  
  body.settings.darkmode #sidebar section:hover {
    color: white;
  }
  
  body.settings.darkmode #verify_avatar_button {
    background: #333 !important;
  }
  
  body.settings.darkmode #settings-title-bar {
    background: #222 !important;
    border-bottom: 1px solid #333 !important;
  }
  
  #settingsBackButton {
    width: 40px;
    height: 40px;
    background: url(https://ghosttogether.net/static/BackButton.svg);
    background-repeat: no-repeat;
    background-size: 76%;
    cursor: pointer;
    background-position: center center;
    /* border: 1px solid red; */
    margin-left: 9px;
  }
  
  
  #browse-device-images {
    width: 28px;
    height: 36px;
    display: inline-block;
    margin-top: 3px;
    vertical-align: middle;
    background: url(https://ghosttogether.net/static/Camera.svg);
    background-repeat: no-repeat;
    margin-left: 2px;
  }
  
  .settings-reset-button {
    background: var(--theme-bg);
    color: white;
    padding: 6px 14px;
    font-size: 16px;
    border-radius: 3px;
    cursor: pointer;
    height: 39px;
    margin-top: 4px;
    margin-right: 13px;
  }
  
  body.settings #sidebar {
    display: block !important;
    border: 1px solid var(--hl-fainter-lines);
    height: 662px;
    max-width: 257px;
    position: absolute;
    top: 60px;
    right: 1px;
    z-index: 1000000;
  }
  
  body.settings #sidebar.none {
    display: none !important;
  }
  
  #settings-profile-form {
    padding-left: 39px;
  }
  
  body.settings input,
  body.settings textarea {
    background: var(--input-border-color);
    padding-left: 18px;
    border-radius: 25px;
  }
  
  body.settings textarea {
    min-height: 200px;
    transition: unset;
  }
  
  body.settings .input-container input,
  body.settings textarea {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  body.is-article #ask {
    background: transparent;
    color: white;
  }
  
  body.is-article #ask input,
  body.is-article #ask textarea {
    background: transparent !important;
    color: white !important;
  }
  
  .article-comment {
    border: 1px solid gray;
    padding: 20px;
    margin: 20px;
    margin-left: 0;
    margin-right: 0;
    border-radius: 5px;
    background: white;
    color: #333;
  }
  
  .tiny-target-avatar {
    width: 19px;
    height: 19px;
    margin-top: -2px;
    margin-left: 0px;
    border-radius: 2px;
    background-size: cover !important;
    z-index: 1;
  }
  
  .tiny-target-username {
    margin-left: 8px;
    margin-top: -3px;
    font-weight: 700;
  }
  
  .tiny-target-timestamp {
    margin-top: -2px;
  }
  
  .tiny-target-image {
    width: 52px;
    height: 52px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border: 1px solid #777777bf;
    /* display: inline-block !important; */
    vertical-align: middle;
    margin-top: 4px;
    float: right;
    margin-right: 6px;
    /* border: 4px solid var(--hl-faint-lines); */
    border-radius: 4px;
    margin-left: -1px;
  }
  
  .tiny-target-image-bottom-margin {
    height: 20px;
  }
  
  .welcome-page {
    padding-top: 0
  }
  
  .grayedout {
    background-color: gray !important;
    color: white !important;
  }
  
  .contacts-ava {
    border-radius: 5px !important
  }
  
  #navigator {
    min-width: 211px !important;
    background: var(--navigator-bg)
  }
  
  #servers {
    min-width: 80px !important;
    background: var(--servers-background-color);
    color: var(--highest-contrast-text-color);
    align-items: center;
    z-index: 10000000000;
  }
  
  #members {
    min-width: 250px !important;
    background: var(--members-bg);
    border-left: var(--line-border-1) !important;
  }
  
  .tinydropdown {
    position: absolute;
    top: 17px;
    right: 14px;
    width: 38px;
    height: 38px;
  }
  
  #post-options {
    border-top: 0 !important
  }
  
  #post-message-container-main {
    /* border-bottom: 0 !important; */
    margin-left: 17px;
    padding-bottom: 6px !important;
  }
  
  #article-header-image-container {
    border-bottom: 0 !important;
    background-color: var(--navbar-bg-color);
  }
  
  .communityHeader {
    /*display: none;*/
  }
  
  .graytext {
    color: gray;
  }
  
  .nav-top {
    color: var(--hl-slightly-brighter-text);
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  .nav-top svg {
    fill: var(--hl-faint-lines);
  }
  
  .nav-top.highlighted svg,
  .nav-top:hover svg {
    /*background: var(--hl-fainter-lines) !important;*/
    fill: var(--highest-contrast-text-color) !important;
  }
  
  .nav-top.highlighted,
  .nav-top:hover {
    /*background: var(--hl-fainter-lines) !important;*/
    color: var(--highest-contrast-text-color) !important;
  }
  
  .channel-name {
    padding-left: 37px;
    line-height: 24px;
    font-size: 16px;
  }
  
  .channel-group-name {
    display: inline-block;
    margin-left: 0;
    padding: 10px;
    padding-left: 14px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
  }
  
  #filter {
    background: transparent
  }
  
  .reaction-container {
    cursor: pointer;
    position: absolute;
    top: 14px;
    right: 36px;
    width: 32px;
    height: 32px;
    z-index: 100000;
  }
  
  .reaction {
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    background: var(--reaction-smile);
    opacity: 0;
  }
  
  .tweet:hover .reaction {
    opacity: 0.25;
  }
  
  .reaction-container:hover .reaction {
    opacity: 0.45;
  }
  
  #filter {
    color: var(--highest-contrast-text-color);
  }
  
  body.is-article #subtitle {
    margin-left: -33px !important;
    color: #333333 !important;
    margin-top: 0px !important;
    padding-left: 32px !important;
    font-size: 21px !important;
    padding-bottom: 0 !important;
    background: unset !important;
    line-height: 27px;
  }
  
  .date-separator {
    color: var(--highest-contrast-text-color);
    color: var(--text-color);
    display: inline-block;
    font-size: 14px;
    text-align: center;
    background: var(--theme-background-color);
    margin: auto;
    display: block;
    width: fit-content;
    block-size: fit-content;
    text-wrap: nowrap;
    /* border: 6px solid var(--bg) !important; */
    /* background-color: var(--hl-faintest-lines); */
    font-weight: 700;
    border-radius: 20px;
    font-size: 15px;
    padding: 5px;
    padding-top: 9px;
  }
  
  .server-tab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
    background: var(--server-tab-background-color);
    color: var(--server-tab-text-color);
    background-size: 100%;
    background-position: center;
    font-family: Arial;
    font-size: 20px;
  }
  
  .server-tab.is-current {
    background: var(--theme-bg);
    color: white;
  }
  
  .server-tab.is-help {
    background: url(https://ghosttogether.net/static/transparentmask.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    background-color: var(--server-tab-background-color);
  }
  
  .server-tab.is-home {
    background-size: 37%;
    background-image: var(--navimg-home);
    background-repeat: no-repeat;
  }
  
  .server-tab.is-notifications {
    background-size: 44%;
    background-image: var(--navimg-bell);
    background-repeat: no-repeat;
  }
  
  .server-tab.is-messages {
    background-size: 44%;
    background-image: var(--navimg-msg);
    background-repeat: no-repeat;
  }
  
  .server-tab.is-write {
    background-size: 37%;
    background-image: var(--navimg-write);
    background-repeat: no-repeat;
  }
  
  .server-tab:hover {
    border-radius: 33%;
    background-color: var(--theme-bg);
    color: white;
  }
  
  .server-separator {
    width: 40px;
    height: 4px;
    display: block;
    position: relative;
    background: #77777777;
    align-self: center;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .server-droparea {
    width: 100%;
    height: 16px;
    display: block;
    position: relative;
    align-self: center;
  }
  
  .add-server-button {
    font-size: 34px;
    color: var(--theme-bg)
  }
  
  #navigator {
    
  }
  
  .server-tab .HL {
    position: absolute;
    left: -13px;
    width: 0px;
    height: 20px;
    background: transparent;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: 0.3s;
  }
  
  .server-tab:hover .HL {
    width: 5px;
    height: 25px;
    background: white;
  }
  
  .server-tab .HL.has-new {
    width: 5px;
    height: 9px;
    background: white;
  }
  
  .user-box-ava {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    background: #444444 url(https://ghosttogether.net/avatars/01e650dd793c4c4b-1694576007458.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }
  
  .user-box-name { margin-left: 10px; margin-top: 4px; }
  .user-box-displayname {
    font-weight: 700;
    font-size: 16px;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
  }
  
  .user-box-ava-status {
    width: 12px;
    height: 12px;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 3px solid gray;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--bg);
  }
  
  body.is-article .monospace {
    /*font-family: monospace;*/
    padding-left: 5px;
    padding-right: 5px;
    line-height: 27px;
  }
  
  #right-right {
  }
  
  .server-tab .is-note {
    display: none
  }
  
  .server-tab:hover .is-note {
    display: block !important;
  }
  
  .server-tab .is-note {
    top: 10px;
    left: 70px;
    background: var(--server-tab-background-color);
    border:1px solid var(--hl-faintest-lines);
    color: var(--highest-contrast-text-color);
    border-radius: 4px;
    z-index: 1000000000000 !important;
    position: absolute;
    text-wrap: nowrap; 
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 0 0 5px #000000;
    font-size: 16px;
    font-weight: bold;
  }
  
  .clear-all-images-button {
    font-size: 16px;
    display: inline-block;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 2px;
    padding-top: 2px;
    margin-left: 37px;
  }
  
  .nowrap {
    white-space: nowrap !important
  }
  
  .from-somewhere {
    font-size: 14px;display: inline-block;white-space: nowrap;margin-top: -5px;margin-left: 7px;color: gray;
  }
  
  body.iPhone .from-somewhere {
    display: none;
  }
  
  
  
  /* GALLERY STYLING */
  .image-container{
    width: 100%;
    height: auto;
    background-color: #bcbcbc;
  }
  
  .gallery-image{
    display: flex;
    float: left;
    margin: 5px;
    height: 25vh;
    width: auto;
    background-color: red;
  }
  
  /* LIGHTBOX STYLING */
  .lightbox-overlay 
  {
    position: fixed;
    z-index: 100;
    padding: 2% 0; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000000e7; /* Black w/ opacity */
  }
  
  .lightbox-content{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  
  .lightbox-content img{
    position: relative;
    z-index: 101;
    transition: 5s;
    max-height: 85vh;
    max-width: 100vh;
    padding: 1px;
    margin: auto;
    min-width: 1px;
    min-height: 1px;
  }
  
  /*Tablet*/
  @media screen and (max-width: 768px){
    .lightbox-content img{
        max-width: 70vh;
    }
  }
  
  /*Mobile*/
  @media screen and (max-width: 425px){
    .lightbox-content img{
        max-width: 50vh;
    }
  }
  
  /* The Close Button */
  .close 
  {
    background-color: transparent;
  border: none;
    color: white;
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 40px;
    font-weight: bold;
    transition: 0.5s;
    text-decoration: none;
    cursor: pointer;
  }
  
  .close:hover, .close:focus 
  {
    color: #adb5bd;
  }
  
  .index-counter{
    position: absolute;
    color: white;
    top: 10px;
    z-index: 103;
    left: 50%;
    transform: translate(-50%);
    padding: 5px;
    margin: auto;
    font-size: 16px;
    transition: 0.5s;
  }
  
  .desc{
    position: absolute;
    color: white;
    bottom: 20px;
    padding: 5px;
    margin: auto;
    font-size: 16px;
    text-align: center;
    transition: 0.5s;
  }
  
  .lightbox-content .image-loader {
    position: absolute;
    z-index: 102;
    width: 80px;
    height: 80px;
    margin: auto;
    border-radius: 50%;
    border: 10px solid #616336;
    border-top-color: white;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    100% { transform: rotate(360deg); }
  }
  
  /*Tablet*/
  @media screen and (max-width: 768px){
    .index-counter{
        font-size: 18px;
    }
  
    .lightbox-content img{
        max-height: 80vh;
    }
  }
  
  /*Mobile*/
  @media screen and (max-width: 425px){
    .lightbox-content img{
        max-height: 75vh;
    }
  }
  
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    z-index: 102;
    color: #212529;
    font-weight: bold;
    font-size: 35px;
    transition: 0.6s ease;
    user-select: none;
    -webkit-user-select: none;
    background-color: #adb5bd;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  .prev{
    left: 0;
    border-radius: 0 3px 3px 0;
  }
  
  /*Tablet*/
  @media screen and (max-width: 768px){
    .prev, .next {
        font-size: 25px;
    }
  }
  
  /*Mobile*/
  @media screen and (max-width: 425px){
    .prev, .next {
        font-size: 20px;
    }
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: #212529;
    color: #adb5bd;
  }
  
  /* Hide communityName everywhere except on article page */
  body:not(.is-article) .communityName {
    display: none;
  }
  
  /* Hide communityHeader everywhere except on article page */
  body:not(.is-article) .communityHeader {
    display: none;
  }
  
  .index-counter {
    z-index: 1000000001 !important;
  }
  
  .user-box-status {
    font-size: 14px;
    font-weight: 400;
    margin-top: 0px;
    color: var(--hl-slightly-brighter-text);
  }
  
  .auto-margin {
    margin: auto;
    position: relative;
    display: block;
    width: 100%;
  }
  
  .image-width-max-800 {
    max-width: 800px;
  }
  
  #pastedimages {
    overflow-x: scroll;
  }
  
  figcaption {
    font-weight: 500;
    text-align: center;
    margin-top: 10px;
    font-size: 20px;
  }
  
  #inviteLinkBox {
    border-radius: 24px;
    padding-left: 12px !important;
    font-size: 14px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: var(--invite-link-text-color);
  }
  
  body:not(.is-article) #subtitle {
    min-height: 100px;
    background: white !important;
  }
  
  #tinyinvitebutton {
    padding: 0px 8px;
    position: absolute;
    height: 21px; 
    right: 4px; /* on mac chrome aligns correct */
    top: 4px;   /* on mac chrome aligns correct */
    /*right: 6px; correct only on chrome on win?
    height: 21px;
    top: 5px;
    */
    background: #e3631e;
    font-weight: 500;
    font-size: 15px;
    border-radius: 12px;
    line-height: 16px;
  }
  
  #tinycommunitybutton {
    padding: 0px 8px;
    position: absolute;
    right: 7px;
    height: 31px;
    top: 7px;
    /*background: #1e87e3;*/
    background: var(--theme-bg);
    font-weight: 500;
    font-size: 15px;
    border-radius: 25px;
    line-height: 27px;
    padding-right: 10px;
    padding-left: 10px;
  }
  
  /* On DM view body must not Y-scroll */
  body.is-dm {
    overflow-y: unset !important;
  }
  
  /* On DM view master must be block, not flex */
  body.is-dm #master {
    display: block !important;
  }
  
  #change-layout-button {
    position: absolute;
    top: -1px;
    right: 4px;
    width: 44px;
    height: 44px;
    background: url(https://ghosttogether.net/static/changebiolayout.png) no-repeat;
    background-size: 100%;
    background-position: center;
  }
  
  .biolayoutbox {
    width: 100px;
    height: 100px;
    background-size: 100%;
    background-position: center;  
    background-repeat: no-repeat;
  }
  
  .biolayoutbox.layout-1 {
    background-image: url('https://ghosttogether.net/static/biolayout1.png');
  }
  
  .biolayoutbox.layout-2 {
    background-image: url('https://ghosttogether.net/static/biolayout2.png');
  }
  
  .biolayoutbox.layout-3 {
    background-image: url('https://ghosttogether.net/static/biolayout3.png');
  }
  
  body.is-bio {
  
  }
  
  body.is-bio #bio-sidebar {
    width: 333px;
    max-width: 333px;
  }
  
  body.is-bio.bio-top {
  
  }
  
  body.is-bio.bio-compact #uh-userinfo {
    /*padding-top: 54px !important;*/
    padding-top: 5px !important;
  }
  
  body.is-bio.bio-compact #non-view {
    min-width: unset !important;
  }
  
  body.is-bio.bio-top #compact-bio-header {
    /* display: none; */
  }
  
  body.is-bio.bio-compact #user-image-container {
    background: transparent !important;
    padding-bottom: 0 !important;
  }
  
  body.is-bio.bio-compact #user-image-tab {
    font-size: 18px;
    visibility: hidden;
  }
  
  body.is-bio.bio-top #bio-sidebar {
    display: none;
  }
  
  body.is-bio.bio-compact .tweet {
    border-bottom: 1px solid var(--hl-faintest-lines)
  }
  
  body.is-bio.bio-compact #num_o_images {
    font-size: 16px !important;
  }
  
  body.is-bio.bio-compact #nav-bar,
  body.is-bio.bio-compact #page-title {
    display: none;
  }
  
  /* maximum width of user timeline in compact layout */
  body.is-bio.bio-compact #subroot {
    max-width: 579px;
    /*max-width: 620px*/
  }
  
  body.is-bio.bio-compact #haunter {
    position: absolute;
    top: 18px;
    right: 11px;
  }
  
  body.is-bio.bio-compact #gallery { margin-top: 8px !important; }
  body.is-bio.bio-compact #gallery-gallery { padding: unset !important; margin-top: unset !important; }
  
  body.is-bio.bio-twitter {
    
  }
  
  #compact-bio-header {
    height: 76px;
  }
  
  .dynamicImage {
    cursor: pointer;
  }
  
  /* System menu covers everything */
  #w {
    z-index: 10000000000 !important;
  }
  
  #z {
    background-color: var(--bg) !important;
    color: var(--text-color) !important;
  }
  
  #e {
    background: var(--bg);
  }
  
  #j {
    z-index: 10000000000 !important;
    background: var(--bg-2) !important;
    border-radius: 0 !important;
  }
  
  body.iPhone .whatsnew {
    max-width: 400px !important;
  }
  
  body.iPhone #updatestext {
    font-size: 21px !important;
  }
  
  #updatestext {
    color: var(--text-color) !important;
  }
  
  body:not(.darkmode) #j {
    width: 100% !important;
    background-color: #cccccc !important;
  }
  
  #updatesul {
    line-height: 26px;
    font-size: 18px;
  }
  
  #dynamic-image-grid {
    border: 10px solid var(--hl-brighter);
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .daybox-inside-image {
    background: url('https://ghosttogether.net/static/imagemarker.svg');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 65%;
    height: 65%;
    z-index: 10;
  }
  
  .cammarker {
    /*fill: var(--highest-contrast-text-color) !important;*/
    fill: var(--theme-bg) !important;
  }
  
  .cammarkerhole {
    fill: var(--bg) !important;
  }
  
  .chat-container {
    margin-left: 21px !important;
  }
  
  .dm-timestamp {
    font-size: 14px !important;
    color: gray;
  }
  
  .dm-mine .dm-timestamp {
    padding-right: 13px;
  }
  
  #left {
    border-right: 1px solid var(--hl-really-faint);
  }
  
  #navnum-msg {
    color: var(--theme-bg);
    font-weight: 700;
    margin-top: 0px;
    background: var(--theme-bg);
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 2px;
    line-height: 1.1;
  }
  
  #post-message-container-main {
    width: 94.4% !important;
    display: block;
    /* margin: 23px; */
    /*background: var(--hl-brighter);*/
    padding-right: ;
    /* padding-top: 8px; */
    border-radius: 8px;
    /* margin-top: -6px; */
    margin-top: 5px;
    /* border: 2px solid var(--hl-slightly-brighter); */
    padding-bottom: 15px;
    background-color: var(--navbar-bg-input-area) !important;
    box-shadow: 0 -1px 25px -23px #000000;
  }
  
  body #post-message-container-main.highlighted {
    border: 2px solid #ffffff;
    /*border: 2px solid #70e6eb55;*/
  }
  
  body.darkmode #post-message-container-main.highlighted {
    border: 2px solid #1c979d55;
    /* border: 2px solid #111111; */
  }
  
  #post-note-main {
    display: none !important
  }
  
  #hashtags-container {
    position: absolute;
    top: -1000px;
  }
  
  #new-wisps-alert {
    max-width: 400px;
    border-radius: 5px;
    margin: 20px auto;
    max-width: 400px;
  }
  
  #senderbox {
    padding-bottom: 15px;
  }
  
  #mobile-DM-send-button {
    display:none;
    width: 48px;
    height: 40px;
    cursor: pointer;
    margin-left: 7px;
    background: url(https://ghosttogether.net/static/msgme.png);
    background-size: 123%;
    background-position: -7px -4px;
  }
  
  .add-reaction {
    width: 32px;
    height: 32px;
    background: url(https://ghosttogether.net/static/heart-plus-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    align-self: flex-end;
    margin-bottom: 5px;
    cursor: pointer;
    opacity: 0.75;
  }
  
  .add-reaction:hover {
    opacity: 1;
  }
  
  .dm-reaction {
    width: 50px;
    height: 39px;
    position: relative;
    background: url(https://ghosttogether.net/static/flame.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 47%;
    background-size: 64%;
    cursor: pointer;
  }
  
  .dm-reaction.heartheart {
    background-image: url(https://ghosttogether.net/static/heartheart.svg);
  }
  
  .dm-reaction.smilesmile {
    background-image: url(https://ghosttogether.net/static/smilesmile.svg);
  }
  
  #reactions {
    top: 512px;
    left: 82px;
    width: 100%;
    min-width: 430px; /* for article image uploader view */
    border-radius: 34px;
    padding-right: 6px;
    padding-left: 6px;
    box-shadow: 0 0 18px #000000;
    max-width: 132px;
    margin: auto auto;
    display: flex;
    background: var(--hl-faint-lines);
  }
  
  body.iPhone.ison-home #dmbox {
    display: none !important
  }
  
  body.iPhone.ison-home #right {
    display: none !important
  }
  
  body.iPhone.open-tweet #whole-gallery {
    display: none !important
  }
  
  /* never show gallery in DM view */
  body.is-dm #whole-gallery {
    display: none !important
  }
  
  body.iPhone.open-tweet #view {
    display: none !important
  }
  
  #msg-num-mobile {
    color: var(--theme-bg);
    font-size: 20px;
    font-weight: 700;
    position: absolute;
    top: 9px;
    left: 89px;
  }
  
  .chatsHeaderText {
    display: none;
    color: var(--hl-brightest);
    font-weight: 600;
    font-size: 43px;
    padding: 13px;
    padding-bottom: 0;
    padding-top: 22px;
    padding-left: 12px;
  }
  
  body.iPhone.is-dm .chatsHeaderText {
    display: block;
  }
  
  body *::-webkit-scrollbar,
  body #outer::-webkit-scrollbar,
  body.iPhone.is-dm #outer::-webkit-scrollbar,
  body.iPhone.is-dm #contacts::-webkit-scrollbar,
  body.iPhone.is-dm #master::-webkit-scrollbar,
  body.iPhone.is-dm #root::-webkit-scrollbar,
  body.iPhone.is-dm #subroot::-webkit-scrollbar,
  body.iPhone.is-dm #view::-webkit-scrollbar {
    /*display: none !important;*/
    
  }
  
  body.is-dm #write-button {
    /* display: none; */
  }
  
  ::-webkit-scrollbar {
    /* display: none;
    width: 0; */
  }
  
  body.is-dm #view::-webkit-scrollbar {
    /*display: none;*/
  }
  
  .dm-react-icon {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    margin: 2px !important;
    cursor: pointer; 
  }
  
  .dm-react-icon.flame {
    background-image: url(https://ghosttogether.net/static/flame.svg)
  }
  
  .dm-react-icon.heart {
    background-image: url(https://ghosttogether.net/static/heartheart.svg)
  }
  
  .dm-react-icon.smile {
    background-image: url(https://ghosttogether.net/static/smilesmile.svg)
  }
  
  #dmbox {
    background: var(--bg);
  }
  
  .newchatbutton {
    border: var(--line-border-0);
    padding: 8px 19px;
    font-weight: 300;
    border-radius: 3px;
    font-size: 16px;
  }
  
  .largerplus {
    font-size:20px;
    line-height:0;
  }
  
  .gpt-button-on {
    /*background: var(--hl-faint-lines);*/
    color: white;
    padding: 10px;
    margin: 11px;
    border-radius: 5px;
    white-space: nowrap;
    cursor: pointer;
    /*background-color: var(--theme-bg);*/
    background: var(--gpt-logo-background-color);
  }
  
  .gpt-button-off {
    background: var(--bg-hl-subtle);  
    color: var(--highest-contrast-text-color);
    border: 1px solid var(--hl-faint);
    padding: 10px;
    margin: 11px;
    border-radius: 5px;
    white-space: nowrap;
    cursor: pointer;
  }
  
  .dm-bubble {
     white-space-collapse: preserve-breaks;
  }
  
  .invited-user-avatar {
    max-width: 25px !important;
    height: 24px !important;
    cursor: pointer;
    border-radius: 5px;
    flex: 0 0 10%;
    /* max-width: 9%; */
    /* display: flex; */
    border: 1px solid var(--hl-placeholder);
  }
  
  #invited-users-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-left: 14px;
    margin-top: 14px;
    margin-bottom: 7px;
    max-height: 62px;
    overflow-y: scroll;
  }
  
  #create-new-post-button {
    color: var(--text-color) !important;
    border-radius: 4px;
    padding: 10px;
  }
  
  .post-button-icon {
    width: 43px;
    height: 43px;
    border: 1px solid silver;
    border-radius: 5px;
    margin-left: 20px;
    background-size: 65%;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .posttypeicon {
    min-width: 43px;
    min-height: 43px;
  }
  
  #post-dim {
    min-width: 43px !important;
    min-height: 43px !important;
  }
  
  .postlink {
    background-size: 87%;
  }
  
  .highlightable-border {
    border: 1px solid var(--HL-border-background) !important;
  }
  
  .highlightable-border:hover {
    border: 1px solid var(--HL-border-background-hover) !important;
  }
  
  body.darkmode #post-message-container-main {
    /* background-image: url("https://ghosttogether.net/static/gradient1.png") !important; */
    transition: unset !important;
    background-repeat: repeat-x !important;
    /*background-position: 0 110px !important;*/
    background-position: 0 calc(100% - 32px) !important;
  }
  
  /* reddit UX */
  .reddit-post-tab {
    width: 180px;
    height: 50px;
    color: var(--text-color);
    cursor: pointer;
    border-bottom: 2px solid var(--hl-faintest-lines);
    border-right: 1px solid var(--hl-faintest-lines);  
  }
  
  .tab-icon {
    width: 24px;
    height: 24px;
    background: #555;
    border-radius: 3px;
    display: inline-block;
    margin-right: 12px;
  }
  
  #postarea {
    transition: unset !important;
    border-width: 1px !important;
  }
  
  #post-title:focus {
    border: 2px solid #1c979d !important;
  }
  
  .tiny-arrow-down {
  
  }
  
  .slice {
    width: 30px;
    height: 30px;
    background: url(https://ghosttogether.net/static/slice.svg) no-repeat;
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 12px;
  }
  
  .birth {
    color: var(--hl-brighterer);
    font-size: 16px;
    font-weight: 600;
  }
  
  .commdesc {
    color: var(--chat-my-text-color);
    font-size: 15px;
    margin-bottom: 10px;
  }
  
  .rule-container {
    border-bottom: 1px solid var(--hl-placeholder);
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  
  .rule {
    color: var(--text-color);
    cursor: pointer;
    font-size: 15px;
  }
   
  .tiny-arrow-down {
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
    background: url("https://ghosttogether.net/static/ArrowDown.svg") center center no-repeat;
    background-position: center center;
    background-size: 20px; 
  }
  
  .rule-container:hover .rule {
    color: var(--hl-brightest);
  }
  
  .stats-text {
    position: absolute; top: 10px; left: 10px; color: var(--highest-contrast-text-color); font-size: 15px; font-weight: 600;
  }
  
  body.is-article #last-30-days {
    align-items: baseline;
  }
  
  .chosen-poll {
    background: var(--theme-bg) !important;
    border: 1px solid var(--theme-bg) !important;
    color: white !important;
  }
  
  .dontkeepbox {
    /*border:1px solid gray;*/
  }
  
  .poll-container {
    padding-top: 17px;
  }
  
  .poll-answer-text {
    margin-top: 10px;
    color: var(--hl-brightest);
    font-size: 16px;
    font-weight: 500;
  }
  
  #clock-face {
    background-image: url('https://ghosttogether.net/static/twitterghost.png') !important;
  }
  
  /*
  .gpt-plan {
  max-width: 150px;
  width: 40%;
  border: 1px solid var(--hl-faint-lines);
  margin-top: 20px;
  border-radius: 10px;
  margin: 9px;
  padding: 10px; } */
  
  .gpt-plan {
    width: 50%;
    border: 1px solid var(--hl-faint-lines);
    border-radius: 10px;
    margin: 9px;
    padding: 10px;
  }
  
  .plan-button {
    border: 0;
    /* padding: 5px; */
    color: white;
    font-size: 17px;
    text-align: center;
    border-radius: 3px;
    margin: auto;
    display: flex;
    cursor: pointer;
    padding-left: 12px;
    padding-right: 12px;
    /* font-variant-caps: all-small-caps; */
    line-height: 46px;
    margin-top: -5px;
    background: var(--hl-faint-lines);
  }
  
  .plan-button.active {
    background: var(--theme-bg);  
  }
  
  .plan-header {
    text-align: center;
    color: var(--hl-brightest);
    font-size: 15px;
    font-weight: 700;
  }
  
  .plan-subheader {
    text-align: center;
    color: var(--hl-brightest);
    font-size: 15px;
    font-weight: 700;
  }
  
  .price {
    color: var(--hl-brightest);
    text-align: center;
  }
  
  .billing-cycle {
    color: var(--subtle-text-color);
  }
  
  .plan-description {
    margin-top: 20px;
  }
  
  .plan-description,
  .annual-saving {
    color: var(--hl-slightly-brighter-text);
    font-size: 15px;
  }
  
  body.darkmode .activated-payment-plan-button {
    color: var(--hl-brightest);
    border: 2px double transparent;
    background-image: linear-gradient(rgb(13, 14, 33), rgb(13, 14, 33)), radial-gradient(circle at left top, rgb(1, 110, 218), rgb(217, 0, 192));
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }
  
  #card-element {
    height: 69px;
    padding: 22px;
  }
  
  #card-errors {
    color: orangered;
    padding-left: 30px;
    font-size: 18px;
  }
  
  #buy-gpt.faint-background {
    background: var(--hl-faint-lines) !important;
    background-color: var(--hl-faint-lines) !important;
  }
  
  .paymentMethod {
    background: white;
    color: gray;
  }
  
  .gpt-plan-button {
    padding: 11px;
    border: 1px solid #535353;
    border-radius: 50px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  
  .gpt-plan-button.off {
    background: var(--hl-faint-lines);
    color: white;
  }
  
  .gpt-plan-button.on {
    background-color: var(--theme-bg);
    color: white;
  }
  
  .cursorNotAllowed {
    cursor: not-allowed !important;
  }
  
  .mmc {
    margin-bottom: 15px;
    margin-top: 15px;
    color: var(--hl-slightly-brighter-text);
  }
  
  .main-menu-dot {
    width: 24px; height: 24px;
  }
  
  .main-menu-dot span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;  
    background: var(--hl-faint);
  }
  
  .main-menu-dot span.on {
    background: var(--theme-bg);
  }
  
  body.settings #navigation-bar,
  body.ison-msg #navigation-bar,
  body.is-dm #navigation-bar {
    display: none;
  }
  
  .main-menu-icon-button {
    opacity: 0.75;
    position: relative;
    display: inline-block;
    width: 38px;
    height: 38px;
    margin-left: 0px;
    margin-top: 1px;
    margin-right: 5px;
  }
  
  #write { background: var(--navimg-write) no-repeat; transform: scale(0.55); }
  
  .main-menu-icon-button.msg {
    background: var(--navimg-msg) no-repeat;
    transform: scale(0.64);
  }
  
  .main-menu-icon-button.notifs {
    background: var(--navimg-bell) no-repeat;
    transform: scale(0.64);
  }
  
  .main-menu-icon-button.home {
    background: var(--navimg-home) no-repeat;
    background-size: 100%;
    transform: scale(0.49);
  }
  
  #main-menu {
    padding-right: 22px;
    margin-right: 13px;
  }
  
  .main-menu.sticky {
    top: 65px;
  }
  
  .audience-likes-container {
  
  }
  
  .fuz-heart {
    width: 16px;
    height: 17px;
    display: inline-block;
    margin-top: 0;
    background: var(--fuz-heart) no-repeat;
    background-position: center;
    background-size: 100%;
    margin-top: -3px;
  }
  
  .fuz-heart-likes {
    margin-top: -5px;
    color: var(--highest-contrast-text-color);
    font-weight: 500;
    /* margin-right: 18px; */
    margin-left: 6px;
    font-size: 14px;
    z-index: 10000;
    margin-right: 4px;
  }
  
  #subtle-note {
    pointer-events: none;
    max-width: 100px;
    font-size: 14px;
    color: var(--highest-contrast-text-color);
    margin-left: 11px;
  }
  
  #info {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: url(https://ghosttogether.net/static/info.svg) no-repeat;
    background-size: 100%;
    margin-bottom: -3px;
    margin-right: 4px;
    background-position: center;
  }
  
  .comment-connector-1 {
    background: var(--connector-1);
    background-position: 36px 50px;
    background-repeat: no-repeat;
  }
  
  .comment-connector-2 {
    background: var(--connector-2);
    background-position: 35px -12px;
    background-repeat: no-repeat;
    width: 100%;
    margin-right: unset !important;
  }
  
  .tweet-is-reply {
    margin-top: 13px !important;
  }
  
  .new-notifs-dot {
    display: inline-block;
    position: relative;
    margin-top: -1px;
    width: 5px;
    height: 5px;
    margin-right: 3px;
    margin-left: 3px;
    border-radius: 50%;
    background: var(--theme-bg);
    vertical-align: middle;
  }
  
  .ghost-animation-container {
    display: block;
    position: relative;
    width: 120px;
    height: 120px;
    margin-top:-75px;
    margin-left:-75px;
  }
  
  .ghost {
    position: absolute;
    width: 90px;
    height: 90px;
    background-size: cover;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
  }
  
  #topLeftGhost {
    background-image: url('https://ghosttogether.net/static/ghostup.png'); /* Replace with your image path */
    transform: rotate(180deg);
    animation-name: moveTopLeftGhost;
  }
  
  #topRightGhost {
    background-image: url('https://ghosttogether.net/static/ghostright.png'); /* Replace with your image path */
    transform: rotate(180deg);
    animation-name: moveTopRightGhost;
  }
  
  #bottomLeftGhost {
    background-image: url('https://ghosttogether.net/static/ghostright.png'); /* Replace with your image path */
    animation-name: moveBottomLeftGhost;
  }
  
  #bottomRightGhost {
    background-image: url('https://ghosttogether.net/static/ghostup.png'); /* Replace with your image path */
    animation-name: moveBottomRightGhost;
  }
  
  @keyframes moveTopLeftGhost {
    0%, 100% { top: 120px; left: 0; }
    25% { top: 0; left: 0; }
  }
  
  @keyframes moveTopRightGhost {
    0%, 100% { top: 0; left: 0; }
    25% { top: 0; left: 120px; }
  }
  
  @keyframes moveBottomLeftGhost {
    0%, 100% { top: 120px; left:
  120px; }
  25% { top: 120px; left: 0; }
  }
  
  @keyframes moveBottomRightGhost {
  0%, 100% { top: 0; left: 120px; }
  25% { top: 120px; left: 120px; }
  }
  
  #structure {
    padding: 15px !important;
  }
  
  .button.thin,
  .button.slim {
    padding: 6px 8px;
    /*position: absolute;
    right: 38px;*/
    background: unset !important;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid #999999 !important;
    border-radius: 50px;
    padding-left: 15px;
    padding-right: 15px;
    color: var(--highest-contrast-text-color);
    font-weight: 600;
  }
  
  body.darkmode .button.slim {
    border: 1px solid #5d5d5d !important;
  }
  
  .button.slim.re {
  
  }
  
  .button.thin:hover,
  .button.slim:hover,
  .button.thin.on,
  .button.slim.on {
    background: var(--highest-contrast-text-color) !important;
    color: var(--hl-brightest-text) !important;
  }
  
  textarea#subtitle {
    color: #777 !important;
    font-size: 18px !important;
  }
  
  select#section {
    font-size: 18px;
  }
  
  input#url {
    display: inline;
    width: 100%;
    font-size: 18px;
    margin-left: 13px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: white;
    border-radius: 5px;
    color: black;
    height: 32px;
    margin-top: 1px;
    margin-left: 4px;
    padding-top: 2px;
    padding-left: 8px;  
    padding-bottom: 2px
  }
  
  .search-bio {
    position: relative;
    display: inline-block;  
    width: 100%;
    max-width: calc(100% - 166px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .mini-ghost-user {
    background: url(https://ghosttogether.net/avatars/avatar400.png) no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: 100%;
    vertical-align: middle;
    margin-top: -2px;
  }
  
  .search-profile-button {
    background: var(--bg-2) !important;
    right: 7px;
    top: 5px;
    width: 78px;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    position: absolute !important;
  }
  
  .cursive {
    font-family: cursive;
  }
  
  .inline-hashtag {
    font-size: 14px;
    vertical-align: middle;
    margin-top: -1px;
    position: relative;
    width: 16px;
    display: inline-block;
    width: 11px;
    height: 11px;
  }
  
  body .inline-hashtag {
    background: var(--inline-hashtag);
  }
  
  body.darkmode .inline-hashtag {
    background: var(--inline-hashtag);
  }
  
  .sans-serif {
    font-family: sans-serif;
  }
  
  #dmhdr {
    height: 82px;
    background: var(--hl-really-faint);
  }
  
  #dm_current_displayname {
    color: var(--highest-contrast-text-color)
  }
  
  #chat-close-settings-button,
  #chat-settings-button {
    position: absolute;
    top: 23px;
    right: 10px;
  }
  
  .ping-them {
    background: var(--theme-bg);
    color: white;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 20px;
  }
  
  #send-email-note {
    width: 100%;
    min-height: 111px;
    transition: unset;
  }
  
  .inline-accolade {
    display: inline-block;
    background: url('https://ghosttogether.net/static/accolade.svg') no-repeat;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-top: 2px;
    margin-left: 5px;
  }
  
  #invitee-last-30-days {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  
  #invitee-last-30-days div {
    height: 20px;
    flex-grow: 1;
    margin: 2px; /* Adjust as needed for spacing */
  }
  
  .blue-dot {
  
  }
  
  .date-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  
  .date-div {
    flex-grow: 1;
    /* other styling as needed */
    cursor: pointer;
  }
  
  .blue-dot {
    display: block;
    position: relative;
    width: 5px !important;
    height: 5px !important;
    max-width: 5px !important;
    max-height: 5px !important;
    border-radius: 50%;
    background-color: var(--theme-bg);
    margin: auto;
  }
  
  .date-div:hover {
    background: var(--theme-bg);
  }
  
  .date-div:hover .blue-dot {
    background: var(--bg);
  }
  
  .date-div {
    max-width: 23px;
  }
  
  .date-div .inline-accolade {
    margin-left: 0;
  }
  
  
  .video-container {
    border-radius: 7px;
    border: 1px solid var(--hl-faint-lines);
    margin-top: 8px;
    max-width: 500px;
  }
  
  #biourl {
    margin-top: 28px;
  }
  
  #add-payment-method {
    border: 1px solid var(--hl-faint-lines);
    border-radius: 10px;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    margin-left: 8px;
    margin-right: 8px;
  }
  
  #card-element {
    height: 45px;
    padding: 12px;
  }
  
  #buy-gpt {
    border-radius: 32px;
  }
  
  #paypal-button-container {
    width: 120px;
    margin: auto;
  }
  
  .gpt4usernum {
    color: var();
  }
  
  #invited-users-list {
    display:none;
  }
  
  .ping-them {
    display:none;
  }
  
  body #get-gpt-4 {
    position: fixed;
    bottom: 24px;
    left: 11px;
    display: block;
    width: 489px;
    color: #5f5f5f;
    background: white;
    padding: 28px;
    z-index: 10000000;
    display: none;
  }
  
  body #get-gpt-4-sidebar {
    display: block;
    color: #5f5f5f;
    background: white;
    padding: 28px;
    z-index: 10000000;
  }
  
  body.iPhone #get-gpt-4 {
    bottom: 111px !important;
    display: block !important;
  }
  
  /* for buttons */
  .hollow {
    background: unset !important;
    background-color: unset !important;
    color: gray !important; 
    border: 2px solid #aaa !important;
  }
  
  #one-month-close {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 16px;
    right: 16px;
    background: url('https://ghosttogether.net/static/close-button.png') no-repeat;
  }
  
  #gpt-subscription {
    
  }
  
  #gpt-subscription-icon {
    width: 64px !important;
    height: 64px !important;
    border: 1px solid var(--HL-border-background);
    border-radius: 8px;
    background: var(--post-ask-gpt);
    background-size: 63%;
    background-position: center;
    cursor: pointer;
    margin-left: 5px;
  }
  
  .gpt-small-text {
    padding-left: 14px;
    font-size: 15px;
    color: var(--bg-777);
  }
  
  #verify_avatar_button {
    display: none;
  }
  
  .gpt-code-block {
    border: 1px solid var(--hl-brighterer);
    display: inline-block;
    width: 100%;
    border-radius: 5px;
    padding: 10px;
    background: var(--bg-hl);
    font-family: monospace;
    font-size: 14px;
    color: var(--hl-bright);
  }
  
  .gpt-target-language {
    width: 100%;
    display: inline-block;
    text-align: left;
    padding-bottom: 5px;
    padding-left: 2px;
    font-size: 14px;
  }
  
  #gpt-dm-logo {
    color: var(--gpt-dm-logo-color) !important;
  }
  
  .clipboard-icon {
    background: var(--clipboard-icon) no-repeat;
  }
  
  body:not(.darkmode,.settings) #root {
    background: white;
  }
  
  #post-button-main {
    position: absolute !important;
    border-radius: 7px !important;
    top: 1px !important;
    right: -18px !important;
    transform: scale(0.6) !important;
  }
  
  /* desktop homepage only */
  body.spa.desktop-home #topmost-tweet-separator {
    min-height: 20px !important;
    background-color: var(--navbar-bg-color);
  }
  
  div#our-reddit-box {
    display: inline !important;
  }

  .button {
    padding: 4px;
    background: var(--theme-bg);
    /* background-image: url(./../static/spirit.svg);
    background-repeat: no-repeat;
    background-position: 9px 4px;
    background-size: 18px; */
    font-size: 14px;
    /*font-weight: bold;*/
    color: white;
    border-radius: 2px;
    border: 2px solid var(--theme-bg) !important;
    cursor: pointer;
  }
  
  .hollow {
    font-weight: normal !important;
    color: var(--highest-contrast-text-color) !important; /* var(--theme-bg) */
    background: transparent !important;
    border: 1px solid var(--hollow-border-color) !important;
  }
  
  .hollow:hover {
    background: var(--theme-bg) !important;
    border-color: var(--theme-bg) !important; 
    color: white !important;
  }

.leave-comm {
  padding: 1px 15px !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  background: var(--theme-bg) !important;
  color: white !important;
}

#settings-privacy-icon {
  top: -10px;
  right: 12px;
}


.settings-sidebar section {
  text-wrap-mode: nowrap;
}