/* Hide timestamp initially */
.info.hidden {
    display: none;
}

/* Show timestamp when active */
.text.active .info {
    display: block;
    color: #ff014f; /* Highlight color */
    font-size: 12px;
    margin-top: 5px;
}


/* Message & Timestamp */
.stbxdfsss {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-radius: 10px;
    max-width: 100%;
    word-break: break-word;
	margin-left: 8px;
}

/* Avatar & Username */
.stbxdfs {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* ? Dark & Slim Scrollbar for DVZ Shoutbox */
#shoutbox .window::-webkit-scrollbar {
    width: 6px; /* Makes scrollbar thinner */
}

#shoutbox .window::-webkit-scrollbar-track {
    background: #2f3238; /* Dark background for the track */
    border-radius: 5px;
}

#shoutbox .window::-webkit-scrollbar-thumb {
    background: #ff014f; /* Highlight color for the scrollbar */
    border-radius: 5px;
}

#shoutbox .window::-webkit-scrollbar-thumb:hover {
    background: #d40042; /* Slightly darker red on hover */
}


/* ? Modern Futuristic Shoutbox */
#shoutbox {
    margin-bottom: 15px;
    border: solid 2px rgba(255, 255, 255, 0.1);
    background: linear-gradient(to right, #2a2d34, #373a41);
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

/* ? Header */
#shoutbox .head {
    padding: 0px 10px;
    background: rgba(47, 50, 56, 0.8);
    color: #ffffff;
    font-weight: bold;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ? Chat Window */
#shoutbox .window {
    overflow-y: auto;
    max-height: 280px;
    background: rgba(25, 27, 30, 0.6);
    border-radius: 8px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}

/* ? Chat Bubbles */
#shoutbox .entry {
    display: flex;
    align-items: flex-start;
	border-bottom: solid 1px rgba(255, 255, 255, 0.1);
    padding: 12px;
    transition: background-color 0.3s ease-in-out;
}

/* ? Avatar */
#shoutbox .avatar {
    min-width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 6px;
}

#shoutbox .avatar img {
width: 38px; height: 38px;
    border-radius: 50%;
}

/* ? Glowing Chat Bubbles */
#shoutbox .text {
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    position: relative;
    font-size: 14px;
}

/* ? Chat Bubble Triangle */
#shoutbox .text::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
border-right: 8px solid rgba(255, 255, 255, 0.1);
}

/* ? New Messages Highlight */
#shoutbox .entry.new .text {
    background: rgba(255, 1, 79, 0.2);
    box-shadow: 0 0 10px rgba(255, 1, 79, 0.4);
}

/* ? Timestamps */
#shoutbox .info {
    font-size: 12px;
    color: #ff014f;
    white-space: nowrap;
    text-align: right;
    margin-left: 12px;
}

/* ? Input Field */
#shoutbox .panel {
    padding: 12px;
    background: rgba(47, 50, 56, 0.9);
    border-radius: 0 0 12px 12px;
}

#shoutbox input.text {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 6px;
    background: rgba(55, 58, 65, 0.8);
    font-size: 14px;
    color: #ffffff;
}

#shoutbox input.text:focus {
    outline: none;
    border: solid 2px #ff014f;
    box-shadow: 0 0 8px rgba(255, 1, 79, 0.5);
}




@keyframes vertical-move {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.vertical-animation {animation: vertical-move 3s ease-in-out infinite;}
.li-erik li{display: list-item!important;}
.li-erik a{display: list-item!important;}
.nav-item.dropdown:hover .dropdown-menu {display: block;}
.dropdown-menu{background-color: #212327fa!important;background: var(--background-color-1); box-shadow: var(--shadow-1);margin: 0!important;}    
.dropdown-item:focus,.dropdown-item:hover {background-color: #e03250 !important;}
.dropdown-item.active,.dropdown-item-blck:active {background-color: #e03250!important;}
.errorxuc{background: #28292d; border-radius: 5px; margin-bottom: 20px; padding: 10px; color: #e53952; border: 2px solid #1a1a1d;}
.errorpagexuctitlecontent{text-align: center;}
.errorpagexuctitle{margin-bottom: 5rem;}
.welcomeusernamxuc:hover{cursor: pointer;}
.dropdown-content-xuc2 {position: absolute; min-width: 160px; padding: 5px 0; z-index: 1; top: 140%; left: 0; transform: translateX(-50%); border-radius: 6px; display: none; height: 165px; border: 1px solid #ea3353;}
.dropdown-content-xuc2 a { padding: 12px 16px; text-decoration: none; display: block; text-align: center; }
.dropdown-content-xuc2:after{content: ""; position: absolute; bottom: 100%; left: 81%; margin-left: -5px; border-width: 10px; border-style: solid; border-color: #f4433600 transparent #ea3353 #fff8f800;}
.namedropdownxuc::after { display: inline-block; margin-left: .555em; vertical-align: .255em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent; }


.bigmarginman{margin-top: 14rem;}
.margintop3rm{margin-top: 3rem;}
.newfieldseet{border: 1px solid #ea3353; border-radius: 5px;}
.newtextlegend{color: white; text-align: center; border: 2px solid #ea3353; border-radius: 20px; background: #ea3353;}
.noboder{border: none;}
.textbordercolorsxuc{transition: 0.3s; height: 40px !important; padding: 0 20px !important; outline: none !important; color: #878e99; -moz-appearance: none; -webkit-appearance: none !important; appearance: none !important; border: 1px solid #878e99 !important; border-radius: 4px !important;}
.mportantborderselect{border: 1px solid #878e99 !important;}
.smallerdesctext{font-size: 12px; font-style: oblique; color: #676b72;}
.notepadxuc{background-color: #191b1e!important; border-radius: 6px!important; padding: 0!important; transition: var(--transition)!important; border: 2px solid #191b1e!important; padding: 10px 15px!important; font-size: 14px!important; line-height: 18px!important; font-family: var(--font-secondary)!important; color: var(--color-lightn)!important; box-shadow: var(--inner-shadow)!important; letter-spacing: 1px!important; resize: none!important;}

.xuc-posts2{position: absolute; top: 0; right: 0; font-size: 15px; cursor: pointer; border: none; background-color: #ffffff14; border-top-right-radius: 10px; padding: 5px 10px; color: white; width: 50px; text-align: center;}

.threadlist-wrapper{max-width: 1310px;margin: auto;}
.ggobtn input {border-top-left-radius: 0px!important; border-bottom-left-radius: 0px!important;}
.forum-header{padding: 20px 20px; border-radius: 10px;}
 

.thread-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #151618;
    background-color: #1f2125;
    transition: background-color 0.3s;
}

.thread-row:hover {
    background-color: #1a1b1e;
}

.thread-info {
    flex: 3;
    display: flex;
    align-items: flex-start;
    gap: 10px;
	    z-index: 2;
}

.thread-details {
    display: flex;
    flex-direction: column;
}

.thread-title {font-weight: bold;color: #007bff;}
.thread-title a {text-decoration: none;color: #ea3353;}
.thread-title a:hover {text-decoration: underline;}
.thread-meta {font-size: 1.4rem; color: #afafaf;}
.thread-replies,
.thread-views,
.thread-lastpost {flex: 1;text-align: center;}

.thread-lastpost {
    text-align: right;
    white-space: nowrap;
}

.lastpost {color: #dddddd;}
.lastpost a {color: #ea3353;}

.lastpost a:hover {
    text-decoration: underline;
}
.modbutcheck input[type="checkbox"], input[type="radio"] {position: relative;opacity: 1;}
.modbutcheck{padding: 0px 10px;}
.threadlist-columns input[type="checkbox"], input[type="radio"] {position: relative;opacity: 1;}





input[type="submit"] {
    width: auto;
    padding: 0 30px;
    border-radius: 500px;
    display: inline-block;
    font-weight: 500;
    transition: 0.3s;
height: auto;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--p-medium);
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b3);
  
    border: 2px solid var(--color-primary);
    transition: var(--transition);

    &:hover {
        background: transparent;
        color: var(--color-primary);
        transform: translateY(-5px);
    }

}@keyframes vertical-move {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.vertical-animation {animation: vertical-move 3s ease-in-out infinite;}
.li-erik li{display: list-item!important;}
.li-erik a{display: list-item!important;}
.nav-item.dropdown:hover .dropdown-menu {display: block;}
.dropdown-menu{background-color: #212327fa!important;background: var(--background-color-1); box-shadow: var(--shadow-1);margin: 0!important;}    
.dropdown-item:focus,.dropdown-item:hover {background-color: #e03250 !important;}
.dropdown-item.active,.dropdown-item-blck:active {background-color: #e03250!important;}
.errorxuc{background: #28292d; border-radius: 5px; margin-bottom: 20px; padding: 10px; color: #e53952; border: 2px solid #1a1a1d;}
.errorpagexuctitlecontent{text-align: center;}
.errorpagexuctitle{margin-bottom: 5rem;}
.welcomeusernamxuc:hover{cursor: pointer;}
.dropdown-content-xuc2 {position: absolute; min-width: 160px; padding: 5px 0; z-index: 1; top: 140%; left: 0; transform: translateX(-50%); border-radius: 6px; display: none; height: 165px; border: 1px solid #ea3353;}
.dropdown-content-xuc2 a { padding: 12px 16px; text-decoration: none; display: block; text-align: center; }
.dropdown-content-xuc2:after{content: ""; position: absolute; bottom: 100%; left: 81%; margin-left: -5px; border-width: 10px; border-style: solid; border-color: #f4433600 transparent #ea3353 #fff8f800;}
.namedropdownxuc::after { display: inline-block; margin-left: .555em; vertical-align: .255em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent; }


.bigmarginman{margin-top: 14rem;}
.margintop3rm{margin-top: 3rem;}
.newfieldseet{border: 1px solid #ea3353; border-radius: 5px;}
.newtextlegend{color: white; text-align: center; border: 2px solid #ea3353; border-radius: 20px; background: #ea3353;}
.noboder{border: none;}
.textbordercolorsxuc{transition: 0.3s; height: 40px !important; padding: 0 20px !important; outline: none !important; color: #878e99; -moz-appearance: none; -webkit-appearance: none !important; appearance: none !important; border: 1px solid #878e99 !important; border-radius: 4px !important;}
.mportantborderselect{border: 1px solid #878e99 !important;}
.smallerdesctext{font-size: 12px; font-style: oblique; color: #676b72;}
.notepadxuc{background-color: #191b1e!important; border-radius: 6px!important; padding: 0!important; transition: var(--transition)!important; border: 2px solid #191b1e!important; padding: 10px 15px!important; font-size: 14px!important; line-height: 18px!important; font-family: var(--font-secondary)!important; color: var(--color-lightn)!important; box-shadow: var(--inner-shadow)!important; letter-spacing: 1px!important; resize: none!important;}

.xuc-posts2{position: absolute; top: 0; right: 0; font-size: 15px; cursor: pointer; border: none; background-color: #ffffff14; border-top-right-radius: 10px; padding: 5px 10px; color: white; width: 50px; text-align: center;}

.threadlist-wrapper{max-width: 1310px;margin: auto;}
.ggobtn input {border-top-left-radius: 0px!important; border-bottom-left-radius: 0px!important;}
.forum-header{padding: 20px 20px; border-radius: 10px;}
 

.thread-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #151618;
    background-color: #1f2125;
    transition: background-color 0.3s;
}

.thread-row:hover {
    background-color: #1a1b1e;
}

.thread-info {
    flex: 3;
    display: flex;
    align-items: flex-start;
    gap: 10px;
	    z-index: 2;
}

.thread-details {
    display: flex;
    flex-direction: column;
}

.thread-title {font-weight: bold;color: #007bff;}
.thread-title a {text-decoration: none;color: #ea3353;}
.thread-title a:hover {text-decoration: underline;}
.thread-meta {font-size: 1.4rem; color: #afafaf;}
.thread-replies,
.thread-views,
.thread-lastpost {flex: 1;text-align: center;}

.thread-lastpost {
    text-align: right;
    white-space: nowrap;
}

.lastpost {color: #dddddd;}
.lastpost a {color: #ea3353;}

.lastpost a:hover {
    text-decoration: underline;
}
.modbutcheck input[type="checkbox"], input[type="radio"] {position: relative;opacity: 1;}
.modbutcheck{padding: 0px 10px;}
.threadlist-columns input[type="checkbox"], input[type="radio"] {position: relative;opacity: 1;}





input[type="submit"] {
    width: auto;
    padding: 0 30px;
    border-radius: 500px;
    display: inline-block;
    font-weight: 500;
    transition: 0.3s;
height: auto;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--p-medium);
    font-size: var(--font-size-b2);
    line-height: var(--line-height-b3);
  
    border: 2px solid var(--color-primary);
    transition: var(--transition);

    &:hover {
        background: transparent;
        color: var(--color-primary);
        transform: translateY(-5px);
    }

}