.comment-item {
  border-bottom: var(--border);
  padding: 10px 0;
  position: relative;
  background: var(--dark);
}

.comment-item:hover {.comment-item {
  border-bottom: var(--border);
  padding: 10px 0;
  position: relative;
  background: var(--dark);
}

.comment-item:hover {
  background: var(--normal);
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-box {
  overflow-y: auto;
}

.comment-scrollbox textarea {
  border: 1px solid grey;
}

.overlay-box {
  background: var(--dark);
  padding: 20px;
  border-radius: 15px;
  width: 100%;
  max-width: 450px;
  position: relative;
  border: var(--border);
}

.overlay-box .close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  font-size: 18px;
}

.overlay-box span {
  color: grey;
}

.overlay-box h2 {
  margin-bottom: 10px;
}

.overlay-box button:last-child {
  width: 100%;
  padding: 13px;
  margin-top: 25px;
  margin-bottom: 10px;
}

#my-banner button {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  background: rgba(0, 0, 0, 0.8);
}

#commentPreview {
  margin-top: 15px;
}

#comment-status {
  color: grey;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
}

#tweetViewer .tweet {
  border: var(--border);
  border-radius: 15px;
}

@media (max-width: 700px) {
  #tweetViewer .tweet {
    border-radius: 0;
  }
}

.load-more-replies {
  margin-top: 15px !important;
}

.comment-header {
  margin-bottom: 13px;
}

.comment-scrollbox {
  overflow-y: auto;
}

#commentList {
  margin-top: 10px;
}

.comment-box .attachment::-webkit-scrollbar-thumb {
  width: 8px !important; 
  height: 8px !important;
}

.comment-box .attachment::-webkit-scrollbar-thumb {
  background-color: #2b2f32 !important;
  border-radius: 10px !important;
}

.tweet-date,
.comment-date {
  font-size: 0.8em;
  color: #888;
  margin-top: 4px;
}

.comment-header {
  align-items: center;
}

#retweetText,
#retweetOriginal {
  box-sizing: border-box;
}

#commentInput,
#sendComment {
  margin: 0;
}

#commentInput {
  margin-bottom: 5px;
}

.tweet {
  background: var(--dark);
  padding: 20px 15px 10px 15px;
}

.tweet:not(.tweet:first-child) {
  border-top: var(--border);
}

.tweet:not(.container .tweet) {
  border-left: var(--border);
  border-right: var(--border);
}

.tweet:last-child {
  border-bottom: var(--border);
}

.tweet:hover {
  background: var(--normal);
}

#commentTweet.tweet {
  border-bottom: none !important;
}

.like-btn {
  font-size:16px;
  margin-right: 6px;
  vertical-align: middle;
}

.disabled {
  background: dimgrey !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.disabled::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("/image/loader.svg") no-repeat center center;
  background-size: contain;
}

@media (max-width: 700px) {
  .svg {
    height: 25px;
    width: 25px;
  }

  .user-box .tweet:nth-child(2) {
    margin-top: 7px;
  }

  .user-box .tweet:not(:nth-child(2)) {
    margin-top: 20px;
  }
}

.user-box .tweet:first-child {
  margin-top: 15px;
}

.read-more {
  text-align: center;
}

#postBtn,
#sendRetweet {
  transition: background 0.15s ease;
}

.user-box .tweet {
  border-radius: 0 !important;
  border: none !important;
  border-bottom: var(--border) !important;
}

#tweetsView .tweet {
  border-radius: 15px !important;
  border: var(--border) !important;
  margin-bottom: 15px;
}

#commentTweet {
  border: none;
  padding: 0;
  margin: 20px 0;
}

#commentTweet.tweet p {
  margin-bottom: 5px !important;
}

#retweetOriginal {
  margin-top: 0 !important;
  font-size:16px;
}

#retweetText,
#commentInput,
#tweetInput {
  border: none;
  font-size: 17px;
  margin-bottom: 10px;
  min-height: 40px;
}

@media (max-width: 700px) {
  #tweetsView .tweet {
    padding: 10px !important;
  }
}

#appendTweet .tweet {
  padding: 20px 0 10px 0;
}

.comment-body video {
  margin-top: 7px;
}

#commentTweet p {
  margin-top: 7px;
}

#bookmarkOverlay .tweet {
  padding: 10px 0;
}

#retweetOverlay,
#tweetOverlay {
  z-index: 7;
}

#commentTweet:hover {
  background: none;
}

@media (min-width:700px) {

  #profileOverlay .tweet,
  #userSubOverlay .tweet {
    padding: 10px 0;
  }

  #profileOverlay #likedList .tweet:nth-child(2) {
    margin-top: 10px;
  }

  #tagstweet {
    margin: -20px;
  }
}

@media (max-width: 700px) {
  #profileOverlay .tweet:nth-child(1),
  #userSubOverlay .tweet:nth-child(1) {
    margin-top: 35px;
  }
    #tagstweet {
    margin: -5px;
  }
}

#userOverlay .tweet {
  border: none !important;
  border-bottom: var(--border) !important;
  margin: 10px -20px;
  border-radius: 0 !important;
}

#bookmarkTweetOverlay .tweet {
  padding: 10px 0;
}

.comment .attachment,
.comment-item .attachment {
  margin-bottom: 10px;
}

.quoted-body {
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  margin-left: 14px;
  min-height: 35px;
  margin-top: -9px;
  margin-bottom: 6px;
  padding-left: 25px;
  padding-bottom: 10px;
}

.quoted-comment {
  padding: 7px;
  margin: -7px;
  border-radius: 15px;
}

#tweetViewer .quoted-comment:first-child {
  margin-bottom: -23px !important;
}
                     
#appendCommunityTweet .tweet {
  margin: 0 -20px;
}

#appendCommunityTweet .tweet:first-child {
  margin-top: 20px;
}

@media (max-width: 700px) {
  #appendCommunityTweet .tweet {
    margin: 15px -5px;
  }
  #appendCommunityTweet .tweet:first-child {
    margin-top: 40px;
  }
}

.useroverlay .bread {
  margin: 12px 0;
}
  background: var(--normal);
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-box {
  overflow-y: auto;
}

.comment-box {
  padding: 20px;
  width: 100%;
  max-width: 535px;
  border-radius: 15px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--dark);
  color: var(--color);
  border: var(--border);
}

.comment-scrollbox textarea {
  border: 1px solid grey;
}

.overlay-box {
  background: var(--dark);
  padding: 20px;
  border-radius: 15px;
  width: 100%;
  max-width: 450px;
  position: relative;
  border: var(--border);
  margin: 13px;
}

.overlay-box .close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  font-size: 18px;
}

.overlay-box span {
  color: grey;
}

.overlay-box h2 {
  margin-bottom: 10px;
}

.overlay-box button:last-child {
  width: 100%;
  padding: 13px;
  margin-top: 25px;
  margin-bottom: 10px;
}

#my-banner button {
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  background: rgba(0, 0, 0, 0.8);
}

#commentPreview {
  margin-top: 15px;
}

.spoiler-text {
  background: #21262d;
  color: transparent;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s ease, opacity 0.3s ease;
  padding: 2px 4px;
  opacity: 1;
}

.spoiler-text:hover {
  background: #21262d;
}

.spoiler-text.revealed {
  color: inherit;
  opacity: 0;
}

.spoiler-media {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.spoiler-media .spoiler-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background :#16181c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  font-size:16px;
  z-index: 1;
  visibility: visible;
  opacity: 1;
  transition: visibility 0.2s ease, opacity 0.2s ease;
}

.spoiler-media.revealed .spoiler-overlay {
  visibility: hidden;
  opacity: 0;
}

.spoilertxt {
  padding: 5px 7px;
  background: var(--dark);
  border-radius: 8px;
}

#comment-status {
  color: grey;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
}

#replyPermission,
#replyPermission1,
#replyPermission2,
#replyPermission3,
#blockDuration,
#suspendDuration {
  margin-bottom: 13px;
  background: black;
  border-radius: 15px;
  padding: 10px;
  border: var(--border);
  color: white;
}

#tweetViewer .tweet {
  border: var(--border);
  border-radius: 15px;
}

@media (max-width: 700px) {
  #tweetViewer .tweet {
    border-radius: 0;
  }
}

.load-more-replies {
  margin-top: 15px !important;
}

.comment-header {
  margin-bottom: 13px;
}

.comment-scrollbox {
  overflow-y: auto;
}

#commentList {
  margin-top: 10px;
}

::-webkit-scrollbar {
  width: 0;
}

.tweet-date,
.comment-date {
  font-size: 0.8em;
  color: #888;
  margin-top: 4px;
}

.comment-header {
  align-items: center;
}

#retweetText,
#retweetOriginal {
  box-sizing: border-box;
}

#commentInput,
#sendComment {
  margin: 0;
}

#commentInput {
  margin-bottom: 5px;
}

.tweet {
  background: var(--dark);
  padding: 20px 15px 10px 15px;
}

.tweet:not(.tweet:first-child) {
  border-top: var(--border);
}

.tweet:not(.container .tweet) {
  border-left: var(--border);
  border-right: var(--border);
}

.tweet:last-child {
  border-bottom: var(--border);
}

.tweet:hover {
  background: var(--normal);
}

#TweetList {
  margin-top: 25px;
}

@media (max-width: 700px) {
  #TweetList {
    margin-top: 30px;
  }
}

#commentTweet.tweet {
  border-bottom: none !important;
}

.like-btn {
  font-size:16px;
  margin-right: 6px;
  vertical-align: middle;
}

.disabled {
  background: dimgrey !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.disabled::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("/image/loader.svg") no-repeat center center;
  background-size: contain;
}

@media (max-width: 700px) {
  .svg {
    height: 25px;
    width: 25px;
  }

  .user-box .tweet:nth-child(2) {
    margin-top: 7px;
  }

  .user-box .tweet:not(:nth-child(2)) {
    margin-top: 20px;
  }
}

.user-box .tweet:first-child {
  margin-top: 15px;
}

.read-more {
  text-align: center;
}

#postBtn,
#sendRetweet {
  transition: background 0.15s ease;
}

.user-box .tweet {
  border-radius: 0 !important;
  border: none !important;
  border-bottom: var(--border) !important;
}

#tweetsView .tweet {
  border-radius: 15px !important;
  border: var(--border) !important;
  margin-bottom: 15px;
}

@media (max-width: 700px) {
  #profileOverlay .bread p,
  #userSubOverlay .bread p {
    padding-bottom: 17px !important;
  }
}

#commentTweet {
  border: none;
  padding: 0;
  margin: 20px 0;
}

#commentTweet.tweet p {
  margin-bottom: 5px !important;
}

#retweetOriginal {
  margin-top: 0 !important;
  font-size:16px;
}

#retweetText,
#commentInput,
#tweetInput {
  border: none;
  font-size: 17px;
  margin-bottom: 10px;
  min-height: 40px;
}

@media (max-width: 700px) {
  #tweetsView .tweet {
    padding: 10px !important;
  }
}

#appendTweet .tweet {
  padding: 20px 0 10px 0;
}

.comment-body video {
  margin-top: 7px;
}

#commentTweet p {
  margin-top: 7px;
}

#bookmarkOverlay .tweet {
  padding: 10px 0;
}

#retweetOverlay,
#tweetOverlay {
  z-index: 7;
}

#commentTweet:hover {
  background: none;
}

@media (min-width:700px) {

  #profileOverlay .tweet,
  #userSubOverlay .tweet {
    padding: 10px 0;
  }

  #profileOverlay #likedList .tweet:nth-child(2) {
    margin-top: 10px;
  }

  #tagstweet {
    margin: -20px;
  }
}

@media (max-width: 700px) {
  #profileOverlay .tweet:nth-child(1),
  #userSubOverlay .tweet:nth-child(1) {
    margin-top: 35px;
  }
    #tagstweet {
    margin: -5px;
  }
}

#userOverlay .tweet {
  border: none !important;
  border-bottom: var(--border) !important;
  margin: 10px -20px;
  border-radius: 0 !important;
}

@media (max-width: 700px) {
  #tagSubOverlay .tweet {
    margin: 10px -20px; 
    padding: 10px 20px !important;
  }
}

#bookmarkTweetOverlay .tweet {
  padding: 10px 0;
}

.comment .attachment,
.comment-item .attachment {
  margin-bottom: 10px;
}

.quoted-body {
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  margin-left: 17px;
  min-height: 35px;
  margin-top: -9px;
  margin-bottom: 6px;
  padding-left: 25px;
  padding-bottom: 10px;
}

.quoted-comment {
  padding: 7px;
  margin: -7px;
  border-radius: 15px;
}

#tweetViewer .quoted-comment:first-child {
  margin-bottom: -23px !important;
}

#appendEdit .tweet {
  border: none !important;
  padding: 5px;
}

#editTextArea {
  border: var(--border) !important;
  padding: 13px !important;
  border-radius: 15px !important;
  margin: 15px 0 !important;
}

#editTitle {
  border: var(--border) !important;
  padding: 13px !important;
  border-radius: 15px !important;
  margin-bottom: -1px !important;
  margin-top: 10px !important;
  font-size: 16px !important;
}

#appendCommunityTweet .tweet {
  margin: 0 -20px;
}

#appendCommunityTweet .tweet:first-child {
  margin-top: 20px;
}

@media (max-width: 700px) {
  #appendCommunityTweet .tweet {
    margin: 15px -5px;
  }
  #appendCommunityTweet .tweet:first-child {
    margin-top: 40px;
  }
}

.bread {
  margin: 17px 0 !important;
}

.useroverlay:not(#bookmarkTweetOverlay):not(.communityo) .user-box .bread {
  margin-bottom: 0 !important;
}

img[src="/image/three-dots.svg"]:hover {
  background: var(--light);
  border-radius: 7px; 
}

.bread .read-more {
  margin-top: 10px;
  margin-bottom: 0 !important;
}

#userSubOverlay .bread .read-more,
#profileOverlay .bread .read-more {
  margin-bottom: 15px !important;
}

@media (max-width: 700px) {
  #userOverlay .tweet {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }
  #tweetViewer .bread .read-more {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 700px) {
  .tag-badge {
    padding: 3px 6px !important;
    margin-right: 5px !important;
    margin-top: 7px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.1) !important;
    font-size: 12px !important;
    display: inline-block !important;
    margin-top: 10px !important;
  }
  .rule-item {
  background: var(--normal);
  padding: 10px;
  border-radius: 15px;
  border: var(--border);
  display: flex;
  flex-direction:column
}

.rule-title {
  font-size: 20px;
  font-weight: bold;
  padding: 7px 5px;
  background: none;
  border: none;
}

.removeRuleBtn {
  align-self:flex-end;
  background: none;
  padding: 4px;
  border-radius: 8px;
  margin: -4px;
}

.removeRuleBtn:hover {
  background: var(--light)
}
  
#addRuleBtn {
  margin: 15px 0 !important;
  width: 100%;
  background: var(--light);
  color: var(--color);
  padding: 12px;
  border-radius: 15px;
  border: 1px solid transparent;
  transition: border 0.2s ease
}

#addRuleBtn:hover {
  border: 1px solid grey
}
  .rule-desc {
    background: none;
    border: none;
    padding: 5px;
    height: 50px;
  }
  
  .ruleNum {
    font-size: 20px;
    font-weight: 900;
  }
  
  .ruleTitle {
    font-size: 20px;
  }
  
  .ruleGroup {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom: 7px;
  }
  
  .ruleDesc {
    font-size: 14px;
    color: grey;
    margin-bottom: 15px;
  }
}

.tagBox {
   border-radius: 6px !important;
   background: var(--light);
}

.tagBox.selected {
   border: 1px solid grey !important;
   background: var(--dark)
}

  .mini-follow-btn,
  .follow-btn {
    border-radius: 12px !important;
  }

.user-search-item {
  cursor: pointer;
  margin: 0 -20px;
  padding: 15px 20px !important;
}

.tag-search-item {
  cursor: pointer;
  margin: 0 -20px;
  padding: 0 20px !important;
}

.user-search-item:hover,
.tag-search-item:hover {
  background: var(--normal);
}

#communityTagOptions::-webkit-scrollbar,
.attachment::-webkit-scrollbar {
  height: 10px;
}

.attachment::-webkit-scrollbar-thumb,
#communityTagOptions::-webkit-scrollbar-thumb {
  background: #2b2f32;
  border-radius: 10px;
} 

.attachment::-webkit-scrollbar-track,
#communityTagOptions::-webkit-scrollbar-track {
  background: transparent;
}

#communityTagOptions {
  display: flex;
  flex-wrap: nowrap; 
  overflow-x: auto;  
  gap: 8px;
  padding-bottom: 13px;
}

#wyntsView .tweet {
  margin: 20px -20px;
  padding: 10px 20px !important;
}

p:not(#user-description):not(#my-description):not(#hover-bio):not(#community-hover-card p) {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.renderedparent {
  margin-bottom: -25px !important;
} 

@media (min-width:700px) {
  .useroverlay:not(#quoteViewer):not(.communityo):not(#bookmarkTweetOverlay):not(#userSubOverlay):not(#profileOverlay):not(#communitySearch):not(.communityo):not(#tweetViewer):not(#userOverlay):not(#tagSubOverlay) .tweet:hover {
    border-radius: 15px !important;
    margin: 15px -10px;
    padding: 10px 10px !important;
    margin-bottom: 0;
  }
  
  .useroverlay:not(.communityo):not(#bookmarkTweetOverlay):not(#userSubOverlay):not(#profileOverlay):not(#communitySearch):not(.communityo):not(#tweetViewer):not(#userOverlay):not(#tagSubOverlay) .tweet:not(:first-child):hover {
    margin-top:0 !important
  }
}

#profileOverlay .tweet,
#profileOverlay .tweet:hover,
#userSubOverlay .tweet, 
#userSubOverlay .tweet:hover,
#bookmarkTweetOverlay .tweet,
#bookmarkTweetOverlay .tweet:hover {
  margin-left: -20px !important;
  margin-right: -20px !important;
  padding-right: 20px !important;
  padding-left: 20px !important;
}

@media (max-width:700px) {
  #appendCommunityTweet {
    margin-left: -10px;
    margin-right: -10px;
  }
  #appendCommunityTweet .tweet {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
  #appendCommunityTweet .pinlabel {
    margin-left: 5px !important;
  }
}

@media (min-width:700px) {
.comment-box .attachment {
  max-width: 444px
}
}

#quoteList .tweet:first-child {
  padding-top: 0 !important;
}