body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    background:#000000;
    font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      color: #ffffff;
    background-image: linear-gradient(to right, 
                                  #111111 0%, 
                                  #000000 50%, 
                                  #111111 100%);
}

a {
    color: #ffffff;
    text-decoration: underline;
}

a:hover {
      color: #ffff00;
      text-decoration: underline;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom-left-radius: 20px; /* Adjust the radius as needed */
    border-bottom-right-radius: 20px; /* Adjust the radius as needed */
    margin-right: 0px;
    margin-left: 0px;
}

.header-content a {
      color: #00ff00;
      text-decoration: none;
   }

.header-content a:hover {
      color: #ffff00;
      text-decoration: none;
   }
   
.email-form-field {
    border: 1px solid #000000; /* Black border, you can change the color */
    border-radius: 5px;        /* Radius of the corners */
    padding: 10px;             /* Padding inside the fields */
    margin-bottom: 10px;       /* Space between the fields */
    color: #ffffff;
    float:left;
    background-color: #222222;
}

/* If you also want to style buttons similarly */
.email-form-button {
    border: 1px solid #00ff00; /* Black border, you can change the color */
    border-radius: 5px;        /* Radius of the corners */
    padding: 10px 20px;        /* Padding inside the button */
    background-color: #333333; /* Background color of the button */
    color: #00ff00;            /* Text color of the button */
    cursor: pointer;           /* Cursor change to indicate it's clickable */
    float: left;
}

/* To apply the style to the entire form (optional) */
.email-form-container {
    border: 1px solid #00ff00; /* Black border, you can change the color */
    border-radius: 5px;        /* Radius of the corners of the form itself */
    padding: 20px;             /* Padding inside the form container */
    width: auto;               /* Adjust the width as needed */
}

.email-form-container table td {
    vertical-align: top;
    text-align: right;
}

.email-msgheader {
    border: 1px solid #5E1914; /* Black border, you can change the color */
    border-radius: 10px;        /* Radius of the corners of the form itself */
    padding: 10px;             /* Padding inside the form container */
    width: auto;               /* Adjust the width as needed */
}

.general-form {
   color: #ffffff;
   border-radius: 20px;
   padding: 10px;
}

.general-form input, textarea, select {
   border: 2px solid #5E1914; /* Black border, you can change the color */
   border-radius: 5px;        /* Radius of the corners */
   padding: 10px;             /* Padding inside the fields */
   margin-bottom: 10px;       /* Space between the fields */
   color: #ffffff;
   float:left;
   background-color: #222222;
}

.footer-content {
    border-top-left-radius: 20px; /* Adjust the radius as needed */
    border-top-right-radius: 20px; /* Adjust the radius as needed */
    margin-right: 0px;
    margin-left: 100px;
}

.container {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    flex-wrap: nowrap;
    /* Other styles... */
}

.content-wrapper {
    display: flex;
    flex-direction: column; /* Vertical layout for main content */
    flex-grow: 1; /* Allow this container to take up remaining space */
    /* Other styles... */
}

.general_box {
   border-radius: 20px; /* Adjust the radius as needed */
   padding: 20px; /* Optional: for some internal spacing */
   display: flex;
   justify-content: center; /* Center children horizontally */
   align-items: center; /* Center children vertically, remove if not needed */
}
 
.notification {
    position: relative; 
    border-radius: 20px;
    background-color: #222222;
    padding: 10px;
}

.notif_delete {
    float:right;
    color: red; /* Or your preferred color */
}

.feed_avatar{
   border-radius: 20px;
   height: 50px;
   float:left;
   margin-right:10px;
}

.feed_post {
   background-color:#333333;
   margin: 10px; 
   padding: 10px;
   //border-radius: 20px; 
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
}

.code-block, .quote-block {
   background-color: #222222;   /* Dark gray background */
   border-left: 5px solid #ccc; /* Gray border on the left */
   padding: 10px;               /* Some padding around the text */
   margin: 0px 0px 0px 50px;      /* Margin to separate and indent the block */
   overflow: auto; /* Enable scrolling if the content is too wide */
   max-width: 100%; /* Limit the maximum width */
   word-wrap: break-word; /* Enable word wrapping */
   white-space: break-spaces; /* Wrap text */
}

.code-block {
   /* Specific styles for code block if needed */
   font-family: monospace; /* Monospace font for the code */
   color: #00ff00;
}

.quote-block {
    /* Specific styles for quote block if needed */
}

.clearfix::after {
   content: "";
   clear: both;
   display: table;
}

.header_logo {
    /* Your styles for the logo text */
}

.header-uuid {
    /* Styles for the UUID, e.g., font size, color */
}

.main {
   align-items: left;             /* This centers the items horizontally */
   justify-content: space-between;  /* Adjust this as needed */
   order: 1;
   flex: 1 1 100%;
   width: 100%; 
   padding: 10px;
   margin: 0px;
   margin-left: 100px;
   justify-content: space-between;
   flex-basis: calc(100% - 300px);
}

.left-sidebar {
   order: 0;
   position: fixed;
   width:100px;
   flex: 0 0 100px;
   padding: 5px;
   border-radius: 20px; /* Adjust the radius as needed */
   padding: 10px; /* Optional: for some internal spacing */
   a:hover {
      color: #ffff00;
      text-decoration: none;
   }
}

.left-sidebar a {
    display: block; /* Makes the links take up the full width of the div */
    color: #00ff00; /* Or any other color */
    text-decoration: none; /* Removes underline from links */
    margin-bottom: 10px; /* Space between links */
}

.right-sidebar {
   order: 2;
   width:350px;
   flex: 0 0 350px;
   box-sizing: border-box; 
   font-size: 10px;
   padding: 10px;
   border-radius: 20px; /* Adjust the radius as needed */
}

.right-sidebar a {
    display: block; /* Makes the links take up the full width of the div */
    color: white; /* Or any other color */
    text-decoration: none; /* Removes underline from links */
    margin-bottom: 10px; /* Space between links */
    margin-right: 20px;
}

.table-rounded {
    background-color: #000000;
    width: 80%;
    border-collapse: collapse;
    border-radius: 20px;
    overflow: hidden;
    margin-left: 10px;
    margin-right: 10px;
}

.table-rounded th,
.table-rounded td {
    padding: 8px;
}

.table-rounded thead {
    background-color: #333333;
    text-align: left;
}

/* begin modal  */

body.modal-open {
    overflow: hidden;
}

.modal {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.6); /* Black with opacity */
}

.modal-content {
    margin: auto;
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    /* display: block; */
    width: 80%;
    max-width: 700px; /* Adjust as necessary */
    max-height: 90vh;
    object-fit: contain;
}

.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* end modal */


/* Friend relationship buttons  */ 

.friends_green_link {
   color: #ffffff;
   background-color: #009900;
   text-decoration: none; 
   padding: 5px; 
   border-radius: 5px; 
}

.friends_green_link:hover {
   color: #000000; 
   background-color: #00ff00;
   padding: 5px; 
   border-radius: 5px; 
}

.friends_red_link {
   color: #ffffff; 
   background-color: #990000; 
   text-decoration: none; 
   padding: 5px; 
   border-radius: 5px; 
}

.friends_red_link:hover {
   color: #ffffff; 
   background-color: #ff0000; 
   padding: 5px; 
   border-radius: 5px; 
}

.react_box{
   background-color:#333333;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   margin-left: 10px;
   margin-right: 10px;
   margin-top: -10px;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 2px;
   padding-bottom: 8px;

}

.emoji-container {
    line-height: 25px; /* Set line-height to the larger emoji size */
    border-radius: 5px; 
}

.emoji-container span {
   display: inline-block; /* Change display to inline-block */
   vertical-align: bottom; /* Align emojis to the bottom */
   transition: transform 0.2s ease; /* Optional: Smooth transition for scaling */
   transform-origin: bottom center;
   position: relative;
   z-index: 1;
}

.emoji-container span:hover {
    font-size: 25px;
    cursor: pointer; /* Optional: Changes the cursor to indicate it's clickable or interactive */
    transform: scale(2); /* Scale up the emoji */
    z-index: 2;
}


/* For comment indention */

.comment {
    font-size: 16px;
    position: relative;
    background-color: #222222;
    border-radius: 20px;
    padding: 10px;
    margin-top: 5px;
}

.comment-avatar{
   border-radius: 20px;
   height: 30px;
   float:left;
   margin-right:10px;
}
  
.comment-author{
   font-size: 12px;
   border-radius: 20px;
   height: 30px;
   float:left;
   margin-right:10px;
}

.comment-date{
   font-size: 12px;
   border-radius: 20px;
   height: 30px;
   float:left;
   margin-right:10px;
}

/* The reply button on comments */ 
.comment-reply{
   color: #00ff00;
   font-size: 12px;
   border-radius: 20px;
   height: 30px;
   float:left;
   margin-right:10px;
}


.comment-line {
    position: absolute;
    left: -10px; /* Adjust this value based on your layout */
    top: 0;
    bottom: 0;
    width: 1px; /* Width of the line */
    background-color: #000; /* Color of the line */
}

.comment-body {
    /* Your existing styles for comment body */
}

/* Begin Spoilers */ 

.spoiler {
    position: relative; /* Establish stacking context for the mask */
    background-color: #000000; /* Black background for the spoiler */
    border-radius: 3px;
    padding: 0 4px;
    cursor: pointer;
    overflow: hidden; /* Prevent content from escaping bounds */
    color: transparent; /* Make all text invisible by default */
    user-select: none; /* Prevent text selection */
}

.spoiler::before {
    content: ''; /* Add a blocking mask */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000; /* Same as background */
    z-index: 1; /* Ensure the mask is above all content */
    pointer-events: all; /* Prevent interaction with hidden content */
}

.spoiler > *,
.spoiler::after {
    opacity: 0; /* Fully hide all nested elements and text */
    z-index: -1; /* Push behind the mask */
    transition: opacity 0s linear; /* Instant hide */
}

.spoiler:hover::before,
.spoiler:focus::before {
    display: none; /* Completely remove the mask on reveal */
}

.spoiler:hover,
.spoiler:focus {
    color: inherit; /* Restore visible text color */
    user-select: text; /* Allow text selection on reveal */
}

.spoiler:hover > *,
.spoiler:focus > * {
    opacity: 1; /* Reveal nested content */
    z-index: auto; /* Restore normal stacking for child elements */
    transition: opacity 0s linear; /* Instant reveal */
}




/* End Spoilers */ 

/* GDPR HERE */ 
.gdpr-content {
   z-index: 1000;
   text-decoration: none;
   position: fixed;
   bottom: 0;
   width: 98%;
   height: 120px;
   border: 2px solid black; 
   color:#000000;
   background-color: #ffffff;
}

.gdpr-content a {
   color: black; 
}

.gdpr-content a:hover {
     color: #009900;
     text-decoration: none;
  }

/* For mobile layout */
@media screen and (max-width: 800px) {
   .container {
      flex-direction: column;
   }

   .main, .left-sidebar, .right-sidebar {
      width: 100%; /* Full width on smaller screens */
      order: 0; /* Reset order */
   }

   .main {
      order: 1; /* Moves the main content to the top */
      width: 70%;
   }

   .left-sidebar {
      order: 0;
      width: 10%;
   }

   .right-sidebar {
      order: 2;
      width: 20%;
   }   
}