body 
{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: white;
}
.dark body 
{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #101010;
} 
.loader 
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #101010;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loader:after {
content: '';
border: 4px solid #101010;
border-top: 4px solid #5a00ff;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-container 
{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
font-weight: bold;
transform: translate(-50%, -50%);
opacity: 0; 
transition: opacity 1s ease;
font-family: "Borel", cursive;
}
*:focus 
{
outline-color: transparent !important;
outline: none !important;
}
h1 
{
font-size: 40px;
color: #333; 
margin-bottom: 15px;
font-family: "Borel", cursive;
}
.load-bar 
{
width: 200px;
height: 3px;
border-radius: 25px;
background-color: #333; 
margin: 0 auto;
animation: loading 5s infinite; 
}
@keyframes loading 
{
0% 
{
width: 0;
}
100% 
{
width: 100%;
}
}
.icons 
{
display: flex;
justify-content: center;
margin-top: 23px;
color: #C1E7E3;
}
.icons i 
{
font-size: 20px;
margin: 0 10px;
opacity: 0; 
transition: opacity 3s ease;
}
.icons i:not(.icon-hidden) 
{
opacity: 1;
}
.top-bar 
{
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
color: white; 
outline: none;
font-family: "Borel", cursive;
border-bottom: 1px solid #e8e8e8;
padding-bottom: initial;
}
.top-bar a
{
font-size: 20px;
font-family: "Borel", cursive;
color: #5a00ff;
text-decoration: none;
}
.dark .top-bar 
{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
border-bottom: 1px solid #212121; 
color: #5a00ff;
outline: none;
font-family: "Borel", cursive;
padding-bottom: initial;
}
.logo
{
font-size: 24px;
margin: 0;
color: #333; 
font-family: "Borel", cursive;
}
.icons-homepage 
{
display: flex;
justify-content: right;
align-items: center;
flex-grow: 1;
outline: none;
}
.icons-homepage i 
{
font-size: 17px;
line-height: 1;
color: gray;
cursor: pointer;
outline: none;
}
.menu-homepage i 
{
font-size: 16px;
cursor: pointer;
color: #5a00ff;
}
.burger-menu 
{
display: none;
background-color: #f5f5f5;
position: absolute;
top: 55px;
right: 20px;
z-index: 999;
border-radius: 10px;
outline: none;
}
.burger-menu.active 
{
display: block;
outline: none;
}
.burger-menu ul 
{
list-style: none;
padding: 0;
margin: 0;
}
.burger-menu li 
{
padding: 10px;
text-align: left;
}
.burger-menu li:last-child
{
padding: 10px;
text-align: left;
border-bottom: none;
}
.dark .burger-menu li:last-child
{
border-bottom: none;
}
.burger-menu a 
{
text-decoration: none;
color: gray;
font-size: 13px;
display: block;
font-family: 'Poppins', sans-serif;
cursor: pointer;
outline: none;
}
.dark .burger-menu a 
{
color: white;
}
@media (max-width: 768px) 
{
.icons-homepage a 
{
margin: 0 0px; 
font-size: 17px; 
}
}
::-webkit-scrollbar 
{
width: 0px;
}
::-webkit-scrollbar-track 
{
background: transparent; 
}
::-webkit-scrollbar-thumb 
{
background: transparent; 
}
::-webkit-scrollbar-thumb:hover 
{
background: transparent;
}
body.dark 
{
background-color: #101010;
}
body.light 
{
background-color: white;
}
.light .icons-homepage
{
background-color: white;
}
.light .top-bar
{
background-color: white;
}
.light .close
{
color: black;
}
.light .closereport
{
color: black;
}
.light .closescreen
{
color: black;
}
.dark .top-bar
{
background-color: #101010;
}
.dark .logo
{
color: white;
}
.dark .icons-homepage 
{
background-color: #101010;
}
.dark .icons-homepage i
{
color: gray;
}
.dark .menu-homepage i
{
color: #5a00ff;
}
.dark .burger-menu
{
border: 1px solid #1b1b1b;
background-color: rgb(27, 27, 27);
}
.dark .burger-menu ul li a
{
color: #ebebeb;
}
.dark .modal 
{
background-color: #101010;
}
.dark .logo-name
{
color: #5a00ff;
}
.dark .close 
{
color: white;
}
.dark .closereport
{
color: white;
}
.dark .closescreen 
{
color: white;
}
.modal 
{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
text-align: center;
z-index: 1000;
}
.close 
{
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: black;
width: 25px;
height: 25px;
border-radius: 5px;
}
.closereport
{
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: black;
width: 25px;
height: 25px;
border-radius: 5px;
}
.closememo
{
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: black;
width: 25px;
height: 25px;
border-radius: 5px;
}
.dark .closememo
{
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: white;
width: 25px;
height: 25px;
border-radius: 5px;
}
.closescreen
{
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: black;
width: 25px;
height: 25px;
border-radius: 5px;
}
@media (max-width: 400px) 
{
.searchInput
{
max-width: none; 
}
}
.logo-name 
{
margin-top: 50px;
font-family: "Borel", cursive;
font-size: 25px;
color: #5a00ff; 
text-shadow: 
0 0 0.5vw #5a00ff, 
0 0 1.5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 0.2vw #5a00ff, 
0.5vw 0.5vw 0.1vw #3700b3; 
animation: neon 2s ease infinite;
}
@keyframes neon 
{
0%, 100% {
text-shadow: 
0 0 1vw #9b47ff,
0 0 3vw #9b47ff, 
0 0 10vw #9b47ff, 
0 0 10vw #9b47ff, 
0 0 0.4vw #d3b8ff; 
color: #c985ff; 
opacity: 1;
}
50% {
text-shadow: 
0 0 0.5vw #5a00ff, 
0 0 1.5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 0.2vw #3700b3; 
color: #5a00ff;
opacity: 0.4;
}
}  
.dot1 {
animation: flicker1 3s 4s linear infinite;
}
@keyframes flicker1 {
from {
opacity: 1;
}
0% {
opacity: 0;
}
1% {
opacity: 0;
}
2% {
opacity: 1;
}
to {
opacity: 1;
}
}
.dot2 {
animation: flicker2 7s 4s linear infinite;
}
@keyframes flicker2 {
from {
opacity: 1;
}
0% {
opacity: 0;
}
1% {
opacity: 0;
}
22% {
opacity: 0;
}
23% {
opacity: 1;
}
25% {
opacity: 0;
}
26% {
opacity: 1;
}
to {
opacity: 1;
}
}
.dot3 {
animation: flicker3 9s 10s linear infinite;
}
@keyframes flicker3 {
from {
opacity: 1;
}
0% {
opacity: 0;
}
1% {
opacity: 0;
}
2% {
opacity: 1;
}
60% {
opacity: 0;
}
61% {
opacity: 0;
}
62% {
opacity: 1;
}
to {
opacity: 0;
}
}
.logo-name-img
{
font-family: "Borel", cursive;
font-size: 25px;
color: #5a00ff; 
text-shadow: 
0 0 0.5vw #5a00ff, 
0 0 1.5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 0.2vw #5a00ff, 
0.5vw 0.5vw 0.1vw #3700b3; 
animation: neon 2s ease infinite;
}
@keyframes neon 
{
0%, 100% {
text-shadow: 
0 0 1vw #9b47ff,
0 0 3vw #9b47ff, 
0 0 10vw #9b47ff, 
0 0 10vw #9b47ff, 
0 0 0.4vw #d3b8ff; 
color: #c985ff; 
opacity: 1;
}
50% {
text-shadow: 
0 0 0.5vw #5a00ff, 
0 0 1.5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 0.2vw #3700b3; 
color: #5a00ff;
opacity: 0.4;
}
}  
.dot1 {
animation: flicker1 3s 4s linear infinite;
}
@keyframes flicker1 {
from {
opacity: 1;
}
0% {
opacity: 0;
}
1% {
opacity: 0;
}
2% {
opacity: 1;
}
to {
opacity: 1;
}
}
.dot2 {
animation: flicker2 7s 4s linear infinite;
}
@keyframes flicker2 {
from {
opacity: 1;
}
0% {
opacity: 0;
}
1% {
opacity: 0;
}
22% {
opacity: 0;
}
23% {
opacity: 1;
}
25% {
opacity: 0;
}
26% {
opacity: 1;
}
to {
opacity: 1;
}
}
.dot3 {
animation: flicker3 9s 10s linear infinite;
}
@keyframes flicker3 {
from {
opacity: 1;
}
0% {
opacity: 0;
}
1% {
opacity: 0;
}
2% {
opacity: 1;
}
60% {
opacity: 0;
}
61% {
opacity: 0;
}
62% {
opacity: 1;
}
to {
opacity: 0;
}
}
.help
{
max-width: 400px; 
width: 80%; 
margin: 0 auto;
margin-top: 25px;
font-family: 'Poppins', sans-serif;
background-color: #e8e8e8;
border-radius: 10px;
padding: 20px;
}
.help-end
{
max-width: 400px; 
width: 80%; 
margin: 0 auto;
margin-top: 25px;
margin-bottom: 67.5px;
font-family: 'Poppins', sans-serif;
background-color: #e8e8e8;
border-radius: 10px;
padding: 20px;
}
.helptitle
{
font-size: 16px;
}
.helptextation
{
margin-top: 20px;
font-weight: normal;
font-size: 13px;
}
.textation
{
color: gray;
font-size: 13px;
font-family: 'Poppins', sans-serif;
padding-bottom: 20px;
}
.dark .textation
{
color: white;
font-size: 13px;
font-family: 'Poppins', sans-serif;
}
.dark .help
{
background-color: #0A0A0A;
color: white;
}
.dark .help-end
{
background-color: #0A0A0A;
color: white;
}
.dark .report-textarea 
{
border-radius: 15px;
background-color: #0A0A0A;
box-shadow: 0 2px 25px rgba(0, 0, 0, 0.1);
color: white;
}
.dark .submit-button 
{
background-color: #5a00ff;
color: white;
}
.dark .modal-text-report
{
font-family: 'Poppins', sans-serif;
color: white;
font-size: 14px;
}
.report-textarea 
{
width: 410px;
max-width: 80%;
height: 200px;
margin: 20px auto; 
display: block;
padding: 15px;
font-size: 12px;
border-radius: 15px;
border: none;
box-shadow: 0 2px 25px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
resize: none;
font-family: 'Poppins', sans-serif;
}
.report-textarea:focus
{
outline: none;
}
.submit-button 
{
max-width: 410px;
width: 80%;
display: block; 
margin: 0 auto; 
padding: 16px 20px;
background-color: #5a00ff;
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 100;
}
.modal-center
{
margin-top: -20px;
}
.modal-content-report 
{
display: flex;
justify-content: center; 
}
.modal-text-report
{
font-family: 'Poppins', sans-serif;
font-size: 14px;
}
.container-profile
{
background-color: transparent;
position: relative;
padding-bottom: 40px;
padding: 20px;
width: 440px;
max-width: 90%;
border-radius: 15px;
font-family: 'Poppins', sans-serif;
min-height: calc(100vh - 100px); 
margin: 50px auto; 
box-sizing: border-box;
}
.form-style 
{
margin-bottom: 20px;
}
.input-container 
{
position: relative;
margin-bottom: 20px; 
margin-top: 15px;
}
.form-style input 
{
display: block;
background-color: transparent;
color: white;
margin: 10px auto;
padding: 6px 0px;
border: none;
max-width: 284px;
outline: none;
width: 95%;
font-family: 'Poppins', sans-serif;
}
.input-container::after 
{
content: '';
display: block;
width: 95%;
height: 1px;
background-color: #202020;
position: absolute;
left: 0;
right: 0;
margin: auto; 
max-width: 284px;
text-align: center;
}
.logo-name-profile 
{
font-size: 30px;
margin-bottom: -10px;
margin-top: 20px;
text-align: center;
font-family: "Borel", cursive;
color: #5a00ff;
text-shadow: 0 0 0.5vw #5a00ff, 
0 0 1.5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 0.2vw #5a00ff, 
0.5vw 0.5vw 0.1vw #3700b3;
animation: neon 2s ease infinite;
}
.login-text
{
text-align: center;
font-family: 'Poppins', sans-serif;
color: #000000;
font-size: 16px;
}
.register-text
{
text-align: center;
font-family: 'Poppins', sans-serif;
color: #333;
font-size: 16px;
}
.form-container 
{
text-align: left;
max-width: 300px; 
margin: auto; 
width: 95%;
}
.loginbtn
{
display: block;
margin: 10px auto;
padding: 14px 15px;
border-radius: 50px;
cursor: pointer;
border: none;
max-width: 284px;
width: 95%;
background: linear-gradient(to right,#5a00ff,#5a00ff); 
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
}
.registerbtn
{
display: block;
margin: 10px auto;
padding: 14px 15px;
border-radius: 50px;
cursor: pointer;
border: none;
max-width: 284px;
width: 95%;
background: linear-gradient(to right,#5a00ff,#5a00ff); 
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
}
.registerbtn:hover
{
background-color: #ffa200;
}
.loginbtn:hover
{
background-color: #ffa200;
}
.line-with-text 
{
display: flex;
align-items: center;
text-align: center;
max-width: 300px;
width: 95%;
margin: auto; 
margin-bottom: 20px;
color: white;
}
.line 
{
flex-grow: 1;
height: 0.5px;
background-color: white;
margin: 0 10px;
}
.text 
{
white-space: nowrap;
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: white;
}
.lostpass 
{
text-align: center;
margin-top: 10px;
}
.lostpass a 
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: #5a00ff;
text-decoration: none;
}
.backlink 
{
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
}
.backlink a
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: #5a00ff;
text-decoration: none;
}
.footer 
{
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 12px;
margin-top: 10px;
color: #000000;
padding-bottom: 25px;
}
.footer-sec
{
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 12px;
margin-top: 10px;
color: #000000;
padding-bottom: 25px;
}
.documents
{
text-align: center;
margin-top: 10px;
}
.documents a
{
text-decoration: none;
color: white;
margin: 0 10px;
font-size: 12px;
}
.dark .overlay 
{
background-color: #101010;
}
.overlay 
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 1000; 
display: none; 
justify-content: center;
align-items: center;
}
.feedback-text 
{
margin-top: 20px;
font-size: 16px;
color: #333; 
font-family: 'Poppins', sans-serif;
}
.feedback-message 
{
text-align: center;
font-family: 'Poppins', sans-serif;
}
.feedback-icon 
{
font-size: 48px;
color: #1DA1F2;
}
.dark .feedback-text 
{
color: #fff; 
}
.formbtn
{
display: block;
margin: 10px auto;
padding: 14px 15px;
border-radius: 50px;
cursor: pointer;
border: none;
max-width: 284px;
width: 95%;
background: linear-gradient(to right, #5a00ff, #d2343f); 
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 35px;
font-weight: 100;
}
.formbtn:hover
{
background-color: #5a00ff;
}
.outer-container 
{
display: flex;
justify-content: center;
align-items: center;
height: 100vh; 
margin: 0;
padding: 0;
}
.center-container 
{
font-size: 16px;
color: #333; 
font-family: 'Poppins', sans-serif;
text-align: center;
}
.icon-container 
{
color: #1DA1F2; 
font-size: 16px;
font-family: 'Poppins', sans-serif;
}
.icon-container.error 
{
color: #1DA1F2;
font-size: 16px;
font-family: 'Poppins', sans-serif;
}
.message-box 
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 13px;
font-family: 'Poppins', sans-serif;
}
.message-box i 
{
font-size: 38px;
margin-bottom: 20px;
color: #5a00ff;
display: block; 
}
.msgacc
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-align: center;
margin-bottom: -20px;
margin-top: 25px;
color: black;
}
.user-profile
{
width: 695px;
max-width: 90%;
margin: 30px auto;
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
text-align: center;
font-family: 'Poppins', sans-serif;
position: relative;
font-size: 12px;
margin-bottom: 35px;
}
.change-user-profile
{
width: 740px;
max-width: 90%;
margin: 30px auto;
padding-top: 10px;
text-align: center;
font-family: 'Poppins', sans-serif;
position: relative;
font-size: 12px;
margin-bottom: 35px;
}
.user-profile img
{
border-radius: 60px;
width: 50px;
height: 50px;
margin-top: 10px;
cursor: pointer;
}
.biotextarea
{
resize: none;
border: none;
overflow: hidden;
font-family: 'Poppins', sans-serif;
font-size: 13px;
text-align: center;
outline: none;
margin-bottom: -20px;
height: auto;
max-height: 200px;
background: white;
width: 250px;
font-weight: 100;
}
.biotextareaacc
{
resize: none;
border: none;
overflow: hidden;
font-family: 'Poppins', sans-serif;
font-size: 13px;
text-align: center;
outline: none;
height: auto;
max-height: 200px;
background: white;
width: 250px;
font-weight: 100;
}
.biotextarea textarea
{
background: white;
background-color: white;
}
.form-container-user 
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: -5px;
}
.bio 
{
background: none;
border: none;
text-align: center;
margin-top: 5px;
margin-bottom: 10px;
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: black;
cursor: pointer;
outline: none;
font-weight: 100;
}
.biobtn
{
margin: 0 auto;
padding: 14px 15px;
border-radius: 50px;
cursor: pointer;
border: none;
max-width: 150px;
width: 95%;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 5px;
padding-bottom: 15px;
font-weight: 100;
margin-bottom: 20px;
}
.lineposts
{
margin-top: 100px;
width: 80%;
max-width: 700px;
margin: 0 auto;
height: 1px;
margin-top: 25px;
margin-bottom: 15px;
background-color: #dfdfdf;
}   
.dark .usernick p
{
color: white;
}
.dark .biotextarea
{
background-color: #0A0A0A;
color: #ebebeb;
}
.dark .biotextareaacc
{
background-color: #0A0A0A;
color: #ebebeb;
}
.dark .bio
{
color: gray;
font-weight: 100;
}
#latestUser
{
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 13px
}
#latestUser p
{
margin-top: 25px;
}
.dark #latestUser p
{
color: white;
}
.dark .search-input-container i
{
color: white;
}
#searchResults 
{
display: none; 
position: absolute;
background-color: white;
border: 1px solid #e8e8e8;
max-height: 200px;
overflow-y: auto;
max-width: 400px;
width: 93%;
left: 50%;
transform: translateX(-50%);
text-align: left;
border-radius: 5px;
border-top-left-radius: 0; 
border-top-right-radius: 0; 
font-family: 'Poppins', sans-serif;
font-size: 14px;
}
#searchResults div 
{
padding: 10px;
border-bottom: 1px solid #e8e8e8;
cursor: pointer;
border-radius: 0; 
}
#searchResults div:last-child 
{
border-bottom: none; 
border-radius: 0 0 5px 5px; 
}
#searchResults div:hover 
{
background-color: transparent;
}
.searchInput 
{
width: 98%;
padding: 18px;
border: 1px solid #e8e8e8;
border-radius: 5px;
box-sizing: border-box;
background-color: white;
outline: none;
color: #333;
font-family: 'Poppins', sans-serif;
font-size: 14px;
}
.searchInput:focus 
{
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
}
.searchInput.active 
{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.search-input-container 
{
position: relative;
display: inline-block;
max-width: 410px;
width: 95%;
}
.search-icon 
{
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
cursor: pointer;
color: #5a00ff;
}
.dark .searchInput
{
border: 1px solid #1b1b1b; 
background-color: #0A0A0A;
color: white;
}
.dark .searchInput:focus
{
border-color: #333; 
border: 1px solid #1b1b1b;
color: white;
}
.dark #searchResults 
{
display: none; 
position: absolute;
background-color: #0A0A0A;
border: 1px solid #1b1b1b; 
max-height: 200px;
overflow-y: auto;
max-width: 400px;
width: 93%;
left: 50%;
transform: translateX(-50%);
text-align: left;
border-radius: 5px;
border-top-left-radius: 0; 
border-top-right-radius: 0; 
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: white;
}
.dark #searchResults div 
{
padding: 10px;
border-bottom: 1px solid #101010;
cursor: pointer;
border-radius: 0; 
}
.dark .searchInput::placeholder
{
color: white;
}
.dark #searchResults a
{
text-decoration: none;
color: white;
}
#searchResults a
{
text-decoration: none;
color: black;
}
.star-row
{
cursor: pointer;
}
.star-rating .star-row 
{
width: 50px;
background-color: rgba(0, 0, 0, 0.1);
display: inline-block;
padding: 5px;
border-radius: 5px;
margin-bottom: 15px;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 12px;
}
.star-rating .star-row:not(:last-child) 
{
margin-right: 10px; 
}
.count 
{
margin: 0;
color: black;
}
.star-rating .star-row i
{
font-size: 10px;
}
.dark .user-profile p
{
color:#ebebeb;
}
.dark .subscription-container p
{
color: black;
}
.dark .star-rating .star-row
{
background-color: #0A0A0A;
}
.dark .lineposts
{
background-color: #212121;
} 
.dark .count
{
color: white;
}
.starclass i
{
color: rgb(252, 220, 105);
}
.dark .starclass i
{
color: rgb(252, 220, 105);
}
#inzeratModal .modal-text, #inzeratModal label 
{
font-size: 18px;
}
#inzeratModal label 
{
display: block;
margin-top: 10px;
}
#inzeratModal input, #inzeratModal select 
{
width: 100%;
padding: 5px;
margin: 8px 0;
display: inline-block;
box-sizing: border-box;
border: none;
outline: none;
font-family: 'Poppins', sans-serif;
resize: none;
font-size: 12px;
}
#inzeratModal .kategorie-container 
{
margin-top: 20px;
}
#inzeratModal .kategorie-options 
{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-right: -10px;
}
#inzeratModal .kategorie-option 
{
flex-basis: calc(25% - 10px);
width: 21px;
cursor: pointer;
border: 1px solid #BBBBBB;
border-radius: 50px;
font-size: 12px;
font-family: 'Poppins', sans-serif;
padding-top: 3px;
padding-bottom: 3px;
box-sizing: border-box;
}
#inzeratModal .kategorie-option.selected 
{
background-color: gray;
color: white;
}
#inzeratModal input[type="file"] 
{
display: none; 
}
#inzeratModal .custom-file-input 
{
max-width: 310px;
width: 85%;
display: block;
margin: 0 auto;
padding: 13px 20px;
background-color: #000;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 12px;
margin-top: 25px;
}
#inzeratModal .loading-bar-container 
{
display: none;
margin-top: 10px; 
}
#inzeratModal .loading-bar 
{
height: 4px;
border-radius: 4px;
background-color: gray;
width: 0; 
transition: width 0.5s ease; 
margin-bottom: 10px;
margin-left: 10px;
}
.input-containersecond 
{
position: relative; 
margin-top: 15px;
}
.input-containersecond::after 
{
content: '';
display: block;
width: 97%;
height: 0.5px;
background-color: #BBBBBB;
position: absolute;
left: 0;
right: 0;
margin: auto; 
max-width: 365px;
text-align: center;
}
.inzerat-text
{
text-align: center;
font-family: 'Poppins', sans-serif;
color: #000000;
font-size: 16px;
margin-top: 6px;
}
.next-button
{
max-width: 390px;
width: 97.5%;
display: block;
margin: 0 auto;
padding: 12.5px 20px;
background-color: rgb(252, 220, 105);
color: black;   
border: none;
border-radius: 5px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 12px;
margin-top: 10px;
}
.back-button
{
max-width: 350px;
width: 97%;
display: block;
margin: 0 auto;
padding: 13px 20px;
background-color: rgb(252, 220, 105);
color: black;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 12px;
margin-top: 10px;
}
.submit-button-2
{
max-width: 390px;
width: 97%;
display: block; 
margin: 0 auto; 
padding: 13.5px 20px;
background-color: #000;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 12px;
margin-top: 25px;
font-weight: 100;
}
#inzeratModal textarea
{
width: 100%;
padding: 5px;
margin: 8px 0;
display: inline-block;
box-sizing: border-box;
border: none;
outline: none;
font-family: 'Poppins', sans-serif;
resize: none;
font-size: 12px;
height: 120px;
}
.page-container 
{
display: flex;
align-items: flex-start; 
justify-content: center;
height: 100vh;
position: relative;
overflow: hidden;
touch-action: pan-y; 
margin-top: 10px;
}
.inzerat 
{
background-color: rgb(255, 255, 255);
border-radius: 5px;
padding: 20px;
position: relative;
max-width: 85%;
border: 1px solid #BBBBBB;
}
.dark .inzerat
{
background-color: #0A0A0A;
border: 1px solid #1b1b1b;
}
.inzerat img 
{
width: 400px;
height: 400px;
object-fit: cover;
margin-top: 10px;
border-radius: 5px;
max-width: 100%;
}
.prev-button,
.next-buttons 
{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
background-color: #333;
color: #fff;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
border: none;
padding: 10px;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.3s ease;
}
.prev-button:hover,
.next-buttons:hover 
{
opacity: 1;
}
.prev-button 
{
left: 10px;
}
.next-buttons 
{
right: 10px;
}
.image-dots 
{
display: flex;
justify-content: left;
margin-left: -5px;
}
.dot 
{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: gray;
margin: 0 5px;
cursor: pointer;
}
.dot.active 
{
background-color: #333;
}
.inzerat 
{
position: relative;
}

.inzerat-image
{
position: relative;
}
.inzerat-popisek 
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: white;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
text-align: left;
}
.inzerat-header 
{
display: flex;
justify-content: space-between;
}
.inzerat-nadpis 
{
font-family: 'Poppins', sans-serif;
font-size: 14px;
margin-bottom: 10px;
}
.dark .inzerat-nadpis
{
color: white;
}
.inzerat-kategorie 
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: black;
background-color: rgb(252, 220, 105);
border-radius: 5px;
text-align: center;
padding: 5px;
}
.bookmark-icon
{
margin-right: 10px;
color: #333;
font-size: 14px;
padding-top: 3px;
cursor: pointer;
}
.dark .bookmark-icon
{
color: white;
}
.dark .dot.active
{
background-color: white;
}
.dark .image-dots
{
color: white;
}
.dark .dot
{
color: white;
}
.dark .prev-arrow
{
color: white;
}
.dark .next-arrow
{
color: white;
}
.inzerat-cena 
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: black;
text-align: left;
}
.cena-label 
{
margin-right: 5px;
}
.dark .inzerat-cena
{
color: white;
}
.inzerat-info 
{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 5px;
}
.mam-zajem-btn 
{
background-color: #1DA1F2;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-decoration: none;
}
.inzeraty-container 
{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
max-width: 664px; 
width: 100%; 
margin: 0 auto; 
position: relative;
margin-bottom: 70px;
}
.inzeraty 
{
text-align: center;
justify-content: center;
width: 160px;
height: 160px;
background-color: none;
margin: 3px;
margin-top: 25px;
border-radius: 5px;
position: relative; 
}
.inzeraty img 
{
width: 160px; 
height: 160px;
text-align: center;
border-radius: 5px;
}
.inzeraty a 
{
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 300;
position: absolute;
color: white;
bottom: 0;
left: 0;
width: 140px;
margin: 0;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5); 
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
text-decoration: none;
}
.removeinz a i
{
text-align: right;
}
@media (max-width: 663px) 
{
.inzeraty-container 
{
justify-content: center;
}
}
.koupit-btn
{
background-color: #1DA1F2;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 100%;
}
.edit-btn
{
background-color: gray;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 100%;
}
.inzerat-popisek-detail
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: black;
text-align: left;
width: 400px;
display: block;
margin-top: 15px;
margin-bottom: 15px;
max-width: 100%;
}
.prev-buttondetail,
.next-buttonsdetail  
{
position: absolute;
top: 250px;
font-size: 16px;
background-color: #333;
color: #fff;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
border: none;
padding: 10px;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.3s ease;
}
.prev-buttondetail:hover,
.next-buttonsdetail:hover 
{
opacity: 1;
}
.prev-buttondetail 
{
left: 10px;
}
.next-buttonsdetail 
{
right: 10px;
}
.inzerat-detail 
{
background-color: rgb(255, 255, 255);
border-radius: 5px;
padding: 20px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
position: relative;
max-width: 90%;
margin-bottom: 60px;
}
.inzerat-detail img 
{
width: 400px;
height: 400px;
object-fit: cover;
margin-top: 10px;
margin-bottom: 5px;
border-radius: 5px;
max-width: 100%;
}
.inzerat-cena-detail
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: black;
float: right;
}
.inzerat-info-detail 
{
margin-top: 5px;
}
.image-dots-detail
{
display: flex;
margin-left: -5px;
float: left;
}
.remove-ad {
float: right;
padding: 5px;
text-align: center;
}
.remove-ad a 
{
width: 10px;
border-top-right-radius: 0; 
border-bottom-right-radius: 0; 
}
#latestAd
{
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: -10px;
}
.buttons-container 
{
color: gray;
}
#bookmarksModal 
{
z-index: 9999;
overflow: auto;
}
#bookmarksModal::-webkit-scrollbar 
{
display: none;
}
.kategorie-container-home 
{
width: 440px;
margin: 0 auto;
}
#kategorieFilterhome 
{
width: 100%;
padding: 15px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
border: 1px solid #BBBBBB;
border-radius: 5px;
outline: none;
margin-top: 10px;
outline: none;
-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 
}
#kategorieFilterhome option 
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #333;
border-bottom: 1px solid black;
}
.dark #kategorieFilterhome 
{
background-color: #0A0A0A;
color: white;
border: 1px solid #1b1b1b;;
}
.modalcategory
{
display: none; 
position: fixed; 
z-index: 1; 
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #0A0A0A;
}
.modalcategory-content 
{
background-color: #0A0A0A;
margin: 10% auto;
width: 80%;
max-width: 400px;
text-align: left;
}
.dark #openModalBtn 
{
padding: 15px;
background-color: #0A0A0A;
color: white;
border: none;
cursor: pointer;
display: block; 
margin: 0 auto; 
font-family: 'Poppins', sans-serif;
font-size: 13px;
border: 1px solid #1b1b1b;
border-radius: 5px;
margin-top: 10px;
width: 440px;
max-width: 90%;
text-align: left;
outline: none;
}
.modalcategory-content a 
{
opacity: 0;
transition: opacity 0.5s ease; 
display: block; 
padding: 5px 0;
text-decoration: none; 
color: white;
font-family: 'Poppins', sans-serif;
font-size: 19px;
}
.modalcategory-content a.show 
{
opacity: 1;
}
.modalcategory-content a:hover 
{
color: gray;
transition: color 0.5s; 
}
.light .modalcategory
{
background-color: white;
color: black;
}
.light .modalcategory-content
{
background-color: white;
color: black;
}
.light .modalcategory-content a.show
{
color: black;
}
.light .modalcategory-content a:hover
{
color: gray;
transition: color 0.5s;
}
.nothinginz
{
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 20px;
}
#openModalBtn 
{
padding: 15px;
background-color: white;
color: black;
border: 1px solid #BBBBBB;
cursor: pointer;
display: block; 
margin: 0 auto; 
font-family: 'Poppins', sans-serif;
font-size: 13px;
border-radius: 5px;
margin-top: 10px;
width: 440px;
max-width: 90%;
text-align: left;
outline: none;
}
.tel-cislo
{
margin-top: 5px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-align: right;
}
.emaildetail
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-align: right;
}
.nicknamedetail a
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-decoration: none;
color: black;
text-align: right;
outline: none;
text-decoration: underline;
}
.nicknamedetail
{
text-align: right;
}
.textareadetail 
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 100%;
border: none;
resize: none;
outline: none;
padding-left: 5px;
max-width: 97.5%;
padding-top: 5px;
}
.saveedit-btn
{
background-color: rgb(252, 220, 105);
color: black;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 100%;
outline: none;
font-weight: 100;
}
.textareadetailmessage 
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 100%;
border: 1px solid #ccc;
resize: none;
outline: none;
margin-top: 10px;
border-radius: 5px;
padding-left: 5px;
padding-top: 5px;
max-width: 97.5%;
}

.senddetail-btn
{
background-color: black;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 100%;
outline: none;
font-weight: 100;
}
.inzerat-popisek-detail a
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: #1DA1F2;
text-decoration: none;
}
.dark #latestAd
{
color: white;
}
.dark .logo-name-profile
{
color: white;
}
.dark .inzerat-text
{
color: white;
}
.dark .kategorie-option
{
color: white;
}
.dark #inzeratModal .kategorie-option
{
border: 1px solid #1b1b1b;
}
.dark #inzeratModal input
{
background-color: #101010;
color: white;
}
.dark #inzeratModal input::placeholder
{
color: white;
}
.dark .input-containersecond::after
{
background-color: #1b1b1b;
}
.dark #inzeratModal .custom-file-input
{
background-color: white;
color: black;
}
.dark .submit-button-2
{
background-color: white;
color: black;
font-weight: 100;
}
.dark #inzeratModal textarea
{
background-color: #101010;
color: white;
}
.dark #inzeratModal textarea::placeholder
{
color: white;
}
.dark .nothinginz
{
color: white;
}
.dark .modal-content p
{
color: white;
}
.dark .inzerat-detail
{
background-color: #0A0A0A;
}
.dark .emaildetail
{
color: white;
}
.dark .nicknamedetail a
{
color: white;
}
.dark .inzerat-popisek-detail
{
color: white;
}
.dark .inzerat-cena-detail
{
color: white;
}
.dark .textareadetailmessage
{
background-color: #101010;
border-color: rgb(27, 27, 27);
color: white;
}
.dark .textareadetailmessage::placeholder
{
color: white;
}
.dark .senddetail-btn
{
background-color: white;
color: black;
}
.dark .tel-cislo
{
color: white;
}
.dark .textareadetail
{
background-color: #101010;
border-color: rgb(27, 27, 27);
color: white;
border-radius: 5px;
border: 1px solid rgb(27, 27, 27);
}
.bottomhelp
{
margin-bottom: 80px;
}
.page-container-detail
{
display: flex;
align-items: flex-start; 
justify-content: center;
position: relative;
overflow: hidden;
touch-action: pan-y; 
margin-top: 10px;
}
.profile-container-detail
{
align-items: flex-start; 
justify-content: center;
position: relative;
/*overflow: hidden;*/
touch-action: pan-y; 
margin-bottom: -10px;
}
/*@media screen and (max-width: 1067px) and (orientation: landscape) {
body {
transform: rotate(90deg); 
transform-origin: left top; 
width: 100vh; 
height: 100vw;
overflow-x: hidden;
overflow-y: auto; 
position: fixed; 
top: 0;
left: 0;
}
}*/
.loader-wrapper 
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; 
font-family: 'Pacifico', cursive;
}
.loader
{
animation: 1s linear infinite; 
font-family: 'Pacifico', cursive;
}
.loader h1
{
color: white;
font-family: 'Pacifico', cursive;
}
.fade-out 
{
animation: fadeOut 1s ease forwards;
}
@keyframes fadeOut 
{
0% 
{
opacity: 1;
}
100% 
{
opacity: 0;
visibility: hidden;
}
}
.reginfouser
{
text-align: center;
margin-top: 10px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: white;
}
.backhome
{
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
}
.backhome a 
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: #5a00ff;
text-decoration: none;
}
.textremember
{
margin-left: 10px; 
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: white;
}
.containerremember
{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
margin-bottom: -10px;
}
.containerremember #remember
{
float: right;
width: auto;
margin: revert;
margin-right: 10px;
}
.web 
{
display: flex;
align-items: center;
}
.web a 
{
text-decoration: none;
}
.webversion 
{
max-width: 200px;
width: 200px;
display: flex;
align-items: center;
background-color: rgb(252, 220, 105);
color: black;
border: none;
padding: 11px 20px;
border-radius: 5px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 12px;
margin-top: 25px;
display: flex;
justify-content: space-between; 
align-items: center;
}
.webversion i 
{
margin-right: 10px; 
}
.androidversion
{
max-width: 200px;
width: 200px;
display: flex;
background-color: #333;
color: white;
border: none;
padding: 11px 20px;
border-radius: 5px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 12px;
margin-top: 10px;
display: flex;
justify-content: space-between; 
align-items: center;
}
.androidversion i
{
margin-right: 10px; 
}
.android a
{
text-decoration: none;
}
.iosversion
{
max-width: 200px;
width: 200px;
display: flex;
background-color: gray;
color: white;
border: none;
padding: 11px 20px;
border-radius: 5px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 12px;
margin-top: 10px;
display: flex;
justify-content: space-between; 
align-items: center;
}
.iosversion i
{
margin-right: 10px; 
}
.apple a
{
text-decoration: none;
}
@media (max-width: 768px) 
{
.webversion
{
width: 290px;
max-width: 290px;
}
.user-profile
{
width: 590px;
max-width: 86%;
}
.androidversion
{
width: 290px;
max-width: 290px;
}
.iosversion
{
width: 290px;
max-width: 290px;
}
}
.social-share 
{
display: flex;
float: right;
margin-top: 5px;
}
.social-icon a 
{
font-size: 15px;
color: black;
text-decoration: none;
}
.social-icon a:hover 
{
color: gray;
}
.dark .social-share 
{
display: flex;
float: right;
margin-top: 5px;
}
.dark .social-icon a 
{
font-size: 15px;
color: white;
text-decoration: none;
}
.dark .social-icon a:hover 
{
color: rgb(252, 220, 105);
}
.postform input
{
text-align: left;
border: none; 
outline: none; 
background: transparent;
width: 440px;
max-width: 90%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 15px;
margin-bottom: 10px;
}
.dark .postform input
{
background-color: #0A0A0A;
color: white;
}

.dark form input
{
color: white;
}
.dark .formcover input
{
color: white;
}
.dark #postaname input
{
color: white;
}
.dark .formcover
{
background-color: #0A0A0A;
color: white;
border: 1px solid #1b1b1b;
}
.dark .category-item
{
color: black;
background-color: white;
}
.dark .category-item.selected 
{
color: white; 
background-color: black;
border: none;
}
.formdesc textarea 
{
text-align: left;
border: none; 
outline: none; 
background: transparent;
width: 440px;
max-width: 90%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-bottom: 10px;
height: 150px;
resize: none; 
overflow: auto; 
}
.formvalidation
{
text-align: center;
color: gray;
font-family: 'Poppins', sans-serif;
font-size: 13px;
}
.formvalidation
{
color: gray;
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 13px;
}
.formdesc textarea::-webkit-scrollbar 
{
width: 0; 
background: transparent; 
}
.formdesc textarea 
{
overflow: hidden; 
}
.formdesc textarea 
{
overflow: auto; 
scrollbar-width: none; 
}
.categoryform
{
text-align: center;
}
.formbtnpost
{
display: block;
margin: -1px auto;
padding: 14px 15px;
border-radius: 0 0 5px 5px; 
cursor: pointer;
border: none;
width: 100%;
background-color: #BBBBBB;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 10px;
font-weight: 100;
}
.dark .formbtnpost
{
display: block;
margin: -1px auto;
padding: 14px 15px;
border-radius: 0 0 5px 5px; 
cursor: pointer;
border: none;
width: 100%;
background-color: black;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 10px;
font-weight: 100;
}
.formbtnpost:hover
{
display: block;
margin: -1px auto;
padding: 14px 15px;
border-radius: 0 0 5px 5px; 
cursor: pointer;
border: none;
width: 100%;
background-color: black;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 10px;
font-weight: 100;
transition: background-color 0.3s; 
}
.formcover
{
text-align: center;
background-color: white;
margin: 0 auto;
width: 440px;
max-width: 90%;
margin-top: 10px;
border-radius: 5px;
margin-bottom: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
color: black;
display: block;
outline: none;
}
.category-items 
{
display: grid;
grid-template-columns: repeat(5, 1fr); 
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 10px;
text-align: left;
margin-left: 15px;
margin-right: 15px;
gap: 10px; 
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap; 
}
.category-item 
{
box-sizing: border-box; 
min-height: 30px; 
display: flex; 
align-items: center; 
justify-content: left; 
cursor: pointer; 
padding: 5px; 
border: 1px solid #ccc; 
transition: background-color 0.3s;
border-radius: 5px;
}
.category-item.selected 
{
color: white; 
background-color: black;
}
.post 
{
background-color: white;
margin: 0 auto;
width: 440px;
max-width: 90%;
margin-top: 15px;
border-radius: 5px;
margin-bottom: 15px;
/*border: 1px solid #BBBBBB;*/
color: black;
display: block;
outline: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}
.dark .post
{
background-color: #0A0A0A;
}
.dark .nickname a
{
color: white;
}
.dark .category
{
color: #C1BBDD;
}
.dark .group-detail-section
{
background-color: #0A0A0A;
}
.dark .group-info h1 
{
color: #C1BBDD;
}
.dark .group-description
{
color: white;
}
.dark .commentlist
{
background-color: #0A0A0A;
}
.dark .commentnick
{
color: white;
}
.dark .commenttextgroup
{
color: white;
}
.dark .comment_text_area
{
color: white;
}
.dark .reply-form-textarea
{
color: white;
}
.dark .postname
{
color: gray;
}
.dark .nav-link
{
color: gray;
}
.dark .description input
{
color: white;
}
.dark .formdesc
{
color: white;
}
.dark .formdesc textarea
{
color: white;
}
.dark .description
{
color: white;
}
.dark .bookmark-button
{
color: white;
}
.post-header 
{
display: flex; 
align-items: center; 
padding: 10px; 
padding-left: 0;
padding-right: 0;
}
.post-header-comment
{
display: flex; 
align-items: center; 
padding: 10px; 
justify-content: space-between;
}
.post-header img 
{
width: 35px;
border-radius: 50%;
margin-right: 10px; 
margin-left: 0px;
}
.user-info 
{
display: flex;
flex-direction: column; 
}
.nickname 
{
margin: 0; 
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #a0a0a0;
text-decoration: none;
}
.nickname a 
{
margin: 0; 
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #a0a0a0;
text-decoration: none;
}
.postname 
{
margin: 0; 
font-size: 14px; 
font-weight: 100;
color: black;
font-family: 'Poppins', sans-serif;
color: rgb(79, 79, 79);
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap; 
}
.description 
{
margin-left: 15px;
margin-right: 10px;
font-size: 13px; 
color: black; 
font-family: 'Poppins', sans-serif;
text-align: left;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap; 
}
small 
{
display: block; 
padding: 10px;
color: #777; 
}
.category
{
font-size: 13px;
color: #a0a0a0;
font-family: 'Poppins', sans-serif;   
}
.toggle-description
{
font-size: 14px; 
color: #8ac1e1;
font-family: 'Poppins', sans-serif;   
text-decoration: none;
}
.post-footer 
{
display: flex;
align-items: center;
}
.hidden-text 
{
display: none; 
}
.delete-button 
{
background: none;
border: none;
color: gray;
cursor: pointer;
font-size: 14px;
float: left;
font-weight: normal;
}
.delete-button i 
{
font-size: 12px;
}
.share-button 
{
background: none;
border: none;
color: gray;
cursor: pointer;
font-size: 13px;
}
.share-button i 
{
font-size: 14px;
float: left;
margin-left: 8px;
}
.bookmark-button 
{
background: none;
border: none;
cursor: pointer;
font-size: 20px;
margin-left: auto;
}
.edit-button
{
font-size: 14px;
float: left;
}
#like-count
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: gray;
}
i .fas fa-bookmark
{
background: none;
border: none;
cursor: pointer;
font-size: 20px;
margin-left: auto;
}
/* Možná lepší řešení pro ikonky? 
.navigation 
{
width: 730px;
max-width: 95%;
display: block;
margin: 0 auto;
margin-top: 20px;
}
.nav-link 
{
text-decoration: none;
color: black; 
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin: 0; 
}*/
.navigation 
{
width: 100%; 
max-width: 850px; 
display: flex; 
justify-content: space-between;
margin: 35px auto 0; 
padding: 0; 
}
.nav-link 
{
flex: 1.3; 
text-align: center; 
text-decoration: none;
color: gray; 
font-family: 'Poppins', sans-serif;
font-size: 17px;
padding-bottom: 5px;
display: flex; 
flex-direction: column; 
align-items: center;
}
.nav-link:not(:first-child) 
{

}
.nav-link-acc:not(:first-child) 
{

}
.nav-link.active 
{
color: #5a00ff;
padding-bottom: 5px;
}
.dark .nav-link.active 
{
color: #5a00ff;
padding-bottom: 5px;
}
.dark .like-button
{
border: none;
}
.pagination a
{
width: 790px;
max-width: 95%;
display: block;
margin: 10px auto;
padding: 17px 0px;
border-radius: 50px;
cursor: pointer;
border: none;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 100;
text-decoration: none;
text-align: center;
margin-bottom: -1px;
margin-top: 20px;
}
.paginationcomment a
{
width: 790px;
max-width: 100%;
display: block;
margin: 10px auto;
padding: 17px 0px;
border-radius: 50px;
cursor: pointer;
border: none;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 100;
text-decoration: none;
text-align: center;
margin-bottom: 30px;
margin-top: 20px;
}
.bookmark-content 
{
display: flex;
flex-wrap: wrap;
gap: 10px;
width: 595px;
justify-content: space-between;
max-width: 90%;
margin: 0 auto;
max-height: 80vh;
overflow-y: scroll; 
scrollbar-width: thin; 
scrollbar-color: transparent transparent; 
}
.bookmark-content::-webkit-scrollbar 
{
width: 0; 
background: transparent; 
}
.countsubs 
{
text-align: center;
width: auto;
max-width: 120px;
padding: 5px;
background-color: rgba(0, 0, 0, 0.1);
font-family: 'Poppins', sans-serif;
color: black;
border-radius: 5px;
font-size: 13px;
margin: 0; 
}
.countsubsaccount
{
text-align: center;
width: 200px;
min-width: 120px;
padding: 5px;
background-color: rgba(0, 0, 0, 0.1);
font-family: 'Poppins', sans-serif;
color: black;
border-radius: 5px;
font-size: 13px;
margin: 0; 
margin-bottom: 30px;
}
.dark .countsubsaccount
{
text-align: center;
width: 200px;
min-width: 120px;
padding: 5px;
background-color: white;
font-family: 'Poppins', sans-serif;
color: black;
border-radius: 5px;
font-size: 13px;
margin: 0; 
}
.dark .countsubs
{
background-color: white;
}
.dark .unsubscribe-button
{
background-color: white;
}
.dark .subscribe-button
{
background-color: white;
}
.dark .nickname
{
color: white;
}
.dark .edit-button
{
color: gray;
}
.unsubscribe-button, .subscribe-button 
{ 
text-align: center;
width: auto;
max-width: 120px;
background-color: rgba(0, 0, 0, 0.1);
font-family: 'Poppins', sans-serif;
color: black;
border-radius: 5px;
font-size: 13px;
margin: 0; 
border: none;
border-radius: 5px;
cursor: pointer;
padding: 5px;
}
.subscription-container 
{
display: flex; 
justify-content: center; 
align-items: center; 
gap: 10px; 
margin-top: 5px; 
padding-bottom: 30px;
}
.comment-form
{
text-align: center;
background-color: white;
margin: 0 auto;
width: 440px;
max-width: 90%;
margin-top: 10px;
border-radius: 5px;
margin-bottom: 10px;
border: 1px solid #BBBBBB;
color: black;
display: block;
outline: none;
}
.comment-form textarea
{
text-align: left;
border: none;
outline: none;
background: transparent;
width: 440px;
max-width: 95%;
padding-top: 10px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
height: 150px;
resize: none;
overflow: auto;
}
.comment-form button
{
display: block;
margin: -1px auto;
padding: 14px 15px;
border-radius: 0 0 5px 5px;
cursor: pointer;
border: none;
width: 100%;
background-color: #BBBBBB;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 10px;
font-weight: 100;
}
.comment
{
background-color: white;
margin: 0 auto;
width: 440px;
max-width: 90%;
border-radius: 5px;
margin-bottom: 15px;
/* border: 1px solid #BBBBBB; */
color: black;
display: block;
outline: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);    
}
.comment-header
{
display: flex;
align-items: center;
margin: 10px;
}
.nicknamecomment
{
margin: 0;
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #a0a0a0;
text-decoration: none;
margin-top: 10px;
}
.descriptioncomment
{
margin-left: 15px;
margin-right: 10px;
font-size: 13px;
color: black;
font-family: 'Poppins', sans-serif;
text-align: left;
padding-bottom: 10px;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap; 
}
.descriptionrep
{
margin-left: 15px;
margin-right: 10px;
font-size: 13px;
color: black;
font-family: 'Poppins', sans-serif;
text-align: left;
margin-bottom: 20px;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap; 
}
.comment-form textarea::-webkit-scrollbar
{
width: 0;
background: transparent;
}
.replay-textarea
{
text-align: left;
border-top: 1px solid #BBBBBB;
border-right: none; 
border-bottom: none; 
border-left: none;
outline: none;
background: transparent;
width: 440px;
max-width: 96.2%;
padding-top: 10px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
height: 100px;
resize: none;
overflow: auto;
padding-left: 15px;
}
#reply-form- textarea::-webkit-scrollbar
{
width: 0;
background: transparent;
}
form .replay-textarea textarea::-webkit-scrollbar
{
width: 0;
background: transparent;
}
.replay-button
{
display: block;
margin: -1px auto;
padding: 14px 15px;
border-radius: 0 0 0px 0px;
cursor: pointer;
border: none;
width: 100%;
background-color: #BBBBBB;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 10px;
font-weight: 100;
}
.end 
{
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: black;
width: 25px;
height: 25px;
border-radius: 5px;
}
#notificationList
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
text-align: left;
margin: 0 auto;
width: 440px;
max-width: 90%;
margin-top: 20px;
max-height: 80vh;
overflow-y: auto;
padding-bottom: 20px;
}
.alerts
{
font-family: 'Poppins', sans-serif;
font-size: 18px;
width: 440px;
max-width: 90%;
}
.notification
{
width: 680px;
max-width: 85%;
margin-bottom: 15px;
box-shadow: 0 2px 25px rgba(0, 0, 0, 0.1);
padding: 11px;
border-radius: 20px;
margin: 0 auto;
margin-bottom: 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
}
.notification a
{
text-decoration: none;
color: #5a00ff;
}
.dark .notification
{
color: white;
}
.dark .end
{
color: white;
}
.modal-content
{
padding-bottom: 20px;
margin-bottom: 20;
}
.unlogin a
{
text-decoration: none;
color: #4791ff;
font-family: 'Poppins', sans-serif;
font-size: 14px;
}
.unlogin 
{
text-decoration: none;
color: #333;
font-family: 'Poppins', sans-serif;
font-size: 14px;
}
.reply
{
margin-top: -10px;
margin-left: 30px;
}
.nosavedposts 
{
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #333;
width: 100%; 
}
@media (max-width: 768px) 
{
.post-feed
{
margin-bottom: 80px;
}
}
@media (max-width: 768px) 
{
.pagination
{
margin-bottom: 80px;
}
}
@media (max-width: 768px) 
{
.profile-container-detail
{
margin-bottom: -8px;
}
}
@media (max-width: 768px) 
{
.comments
{
margin-bottom: 80px;
}
}
@media (max-width: 768px) 
{
.post-cover:last-child
{
margin-bottom: 80px;
}
}
.dark .comment-form textarea
{
background-color: #0A0A0A;
color: white;
}
.dark .comment-form form
{
background-color: #0A0A0A;
border: 1px solid #0A0A0A;
}
.dark .comment-form
{
border: 1px solid #0A0A0A;
}
.dark .comment-form button 
{
display: block;
margin: -1px auto;
padding: 14px 15px;
border-radius: 0 0 5px 5px;
cursor: pointer;
border: none;
width: 100%;
background-color: white;
color: black;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 10px;
font-weight: 100;
}
.dark .comment
{
background-color: #0A0A0A;
margin: 0 auto;
width: 440px;
max-width: 90%;
border-radius: 5px;
margin-bottom: 15px;
border: 1px solid #0A0A0A; 
color: black;
display: block;
outline: none;
}
.dark .nicknamecomment
{
color: white;
}
.dark .descriptioncomment
{
color: white;
}
.dark .replay-textarea
{
border-top: 1px solid #2a2a2a;
color: white;
}
.dark .replay-button
{
background-color: white;
color: black;
}
.dark .descriptionrep
{
color: white;
}
.replies
{
border-left: 1px solid #e0e0e0;
}
.dark .replies
{
border-left: 1px solid #181818;
}
.create-group-section 
{
width: 440px;
max-width: 90%;
margin: 20px auto;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
font-family: 'Poppins', sans-serif;
}
.create-group-section p 
{
text-align: center;
margin-bottom: 30px;
padding-top: 20px;
font-size: 16px;
font-family: 'Poppins', sans-serif;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 20px;
}
.create-group-section label 
{
display: block;
margin: 10px 0 5px;
font-size: 14px;
font-family: 'Poppins', sans-serif;
margin-left: 20px;
}
.create-group-section input[type="text"]
{
width: 90%;
padding: 8px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
outline: none;
resize: none;
padding-left: 25px;
margin-right: 20px;
}
.create-group-section textarea 
{
width: 440px;
max-width: 90%;
height: 180px;
padding: 8px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
outline: none;
resize: none; 
padding-left: 25px;
}
.create-group-section input[type="file"] 
{
margin-bottom: 15px;
}
.create-group-section .submit-button-photo 
{
display: block;
margin: -1px auto;
padding: 14px 15px;
cursor: pointer;
border: none;
width: 100%;
background-color: #f8f8f8;
color: black;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 10px;
font-weight: 100;
border-top: 1px solid #e0e0e0;
}
.dark .create-group-section .submit-button-photo 
{
border: none;
}
.create-group-section .submit-button-create 
{
display: block;
margin: -1px auto;
padding: 14px 15px;
border-radius: 0 0 5px 5px;
cursor: pointer;
border: none;
width: 100%;
background-color: #C1BBDD;
color: black;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 100;
}
.create-group-section .submit-button-photo:hover 
{
background-color: #555;
transition: background-color 0.5s; 
color: white;
}
.create-group-section .submit-button-create:hover 
{
background-color: #555;
transition: background-color 0.5s; 
}
.latest-groups-section 
{
width: 440px;
max-width: 90%;
margin: 30px auto;
font-family: 'Poppins', sans-serif;
margin-bottom: 90px;
}
.latest-groups-section h3 
{
text-align: center;
font-size: 16px;
font-family: 'Poppins', sans-serif;
font-weight: 100;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 10px;
margin-bottom: 20px;
}
.groups-list 
{
display: flex;
flex-direction: column;
gap: 15px;
}
.group-item 
{
display: flex; 
flex-direction: column;
align-items: center; 
text-align: center; 
background-color: #f8f8f8;
border-radius: 5px;
padding: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.group-photo 
{
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
text-align: center; 
margin-bottom: 15px;
margin-top: 15px;
}
.group-photo img
{
text-align: center;
}
.group-item h4 
{
margin: 0;
font-size: 14px;
font-family: 'Poppins', sans-serif;
font-weight: 100;
text-align: center;
margin-bottom: 5px;
}
.group-item a
{
color:#8ac1e1;
text-decoration: none;
font-size: 14px;
font-family: 'Poppins', sans-serif;
}
.group-item p 
{
margin: 5px 0 0;
font-size: 14px;
color: #555;
font-size: 13px;
text-align: left;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
margin-bottom: 5px;
margin-left:5px;
margin-right:5px;
}
.dark .create-group-section p
{
color: white;
border-bottom: 1px solid #181818;
margin-top: -1px;
}
.dark .create-group-section input[type="text"]
{
background-color: #0A0A0A;
color: white;
}
.dark .create-group-section
{
background-color: #0A0A0A;
border: 1px solid #1b1b1b;
}
.dark .create-group-section label
{
color: white;
}
.dark .create-group-section textarea
{
background-color: #0A0A0A;
color: white;
}
.dark .latest-groups-section h3
{
color: white;
border-bottom: 1px solid #1b1b1b;
}
.dark .group-item
{
background-color: #0A0A0A;
}
.dark .group-item p
{
color: white;
}
.group-detail-section 
{
width: 80%;
max-width: 700px;
margin: 30px auto;
padding-top: 10px;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
font-family: 'Poppins', sans-serif;
position: relative;
}
.group-photo-detail 
{
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 5px;
margin-top: 15px;
}
.group-info h1 
{
font-size: 14px;
font-weight: 100;
margin: 10px 0;
font-family: 'Poppins', sans-serif;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
}
.subscriber-count 
{
text-align: center;
font-family: 'Poppins', sans-serif;
color: gray;
font-size: 13px;
}
.group-info i 
{
font-size: 16px;
color: gray;
}
.group-description 
{
font-size: 13px;
color: #555;
margin: 15px 0;
text-align: left;
font-weight: 100;
font-family: 'Poppins', sans-serif;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
padding-left: 20px;
padding-right: 20px;
}
.group-created 
{
font-size: 13px;
color: #888;
margin-top: 10px;
font-weight: 100;
font-family: 'Poppins', sans-serif;
padding-bottom: 5px;
}
.edit-icon 
{
font-size: 1.5rem;
color: #333;
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
transition: color 0.3s ease;
}
.edit-icon:hover 
{
color: #555;
}
#changePhotoButton
{
display: block;
margin: -1px auto;
padding: 14px 15px;
cursor: pointer;
border: none;
width: 100%;
background-color: #f8f8f8;
color: black;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 10px;
font-weight: 100;
border-top: 1px solid #e0e0e0;
}
#editsubmit-button-create
{
display: block;
margin: -1px auto;
padding: 14px 15px;
border-radius: 0 0 5px 5px;
cursor: pointer;
border: none;
width: 100%;
background-color: #DEF3FD;
color: black;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 100;
margin-bottom: 20px;
}
.edit-group-input, .edit-group-textarea 
{
width: 95%;
max-width: 700px;
margin-bottom: 10px; 
padding: 8px; 
font-size: 16px;
border: none;
border-radius: 5px; 
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: gray;
resize: none;
}
.edit-group-textarea
{
height: 200px;
}
.share-section 
{
padding-bottom: 20px;
}
.sharegroup-button 
{
padding: 10px 15px;
border: none;
border-radius: 5px;
background-color: #f0f0f0;
color: black;
font-family: 'Poppins', sans-serif;
cursor: pointer;
font-size: 13px;
}
.subscribeggroup-button 
{
padding: 10px 15px;
border: none;
border-radius: 5px;
background-color: #C1E7E3;
color: black;
font-family: 'Poppins', sans-serif;
cursor: pointer;
font-size: 13px;
margin-left: 10px; 
font-weight: 100;
}
.savegroup-button 
{
padding: 10px 15px;
border: none;
border-radius: 5px;
background-color: #FFDCF4;
color: black;
font-family: 'Poppins', sans-serif;
cursor: pointer;
font-size: 13px;
margin-left: 10px;
}
.delete_group_btn
{
max-width: 90%;
margin-left: 10px;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
border: none;
background-color: #C1BBDD;
color: black;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 100;
text-decoration: none;
text-align: center;
}
.member-posts
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
text-align: left;
cursor: pointer;
color: white;
background: linear-gradient(to right, #d2343f, #5a00ff);
padding: 10px;
border-radius: 50px;
}
.comment_text_area
{
text-align: left;
border: none;
outline: none;
background: transparent;
width: 92%;
max-width: 700px;
padding-top: 20px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
height: 150px;
resize: none;
overflow: auto;
color: gray;
}
.comment_text_btn
{
border: 1px solid #5a00ff;
border-radius: 50px;
cursor: pointer;
background-color: #5a00ff;
color: white;
padding: 15px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 95%;
margin-bottom: 10px;
font-weight: normal;
}
.reply_text_btn
{
border: 1px solid #5a00ff;
border-radius: 50px;
cursor: pointer;
background-color: #5a00ff;
color: white;
padding: 15px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 95%;
margin-bottom: 20px;
font-weight: normal;
}
.comments-list
{
margin-top: 10px;
}
.commentlist
{
margin: 20px auto;
padding: 20px;
border-radius: 20px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
text-align: center;
font-family: 'Poppins', sans-serif;
position: relative;
}
.commentnick
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
text-align: left;
margin-left: 20px;
color:#5a00ff;
display: flex;
align-items: center;
}
.commenttextgroup
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
margin-left: 20px;
margin-right: 20px;
text-align: left;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap; 
color: gray;
}
.dategrouptext
{
font-family: 'Poppins', sans-serif;
font-size: 11px;
color: gray;
text-align: right;
margin-right: 20px;
padding-bottom: 10px;
}
.dark .dategrouptext
{
color: white;
}
.reply-icon
{
cursor: pointer;
margin-left: 10px;
color: #5a00ff;
font-size: 13px;
float: right;
margin-right: 0px;
}
.delete-icon 
{
cursor: pointer;
margin-left: 10px;
color: #5a00ff;
font-size: 13px;
float: right;
margin-right: 10px;
}
.reply-icon:hover, .delete-icon:hover 
{
color: #5a00ff;
transition: color 1s;
}
.reply-form-textarea
{
text-align: left;
border: none;
outline: none;
background: transparent;
width: 92%;
max-width: 700px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
height: 150px;
resize: none;
overflow: auto;
font-size: 12px;
color: gray;
}
.comment-content 
{
display: none; 
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.comment-section.expanded .comment-content 
{
display: block; 
}
.memo-detail-section
{
padding: 10px;
border-radius: 15px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
text-align: center;
font-family: 'Poppins', sans-serif;
position: relative;
margin: 0 auto;
cursor: pointer;
width: 740px;
max-width: 90%;
}
.dark .memo-detail-section
{
background-color: #0A0A0A;
}
.dark .member-posts
{
color: white;
}
.comment-header-group
{
padding-top: 10px;
padding-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.comment-header-group-detail
{
padding-top: 10px;
padding-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding-left: 15px;
padding-right: 15px;
}
.document-icon 
{
font-size: 16px; 
color: #5a00ff;
}
.modal .group-content 
{
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.group 
{
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px;
text-align: left;
transition: transform 0.2s, box-shadow 0.2s;
}
.group-header img 
{
border-radius: 50%;
}
.group-name 
{
font-size: 18px;
font-weight: bold;
margin: 0;
}
.group-description 
{
font-size: 13px;
color: #555;
margin-top: 5px;
}
.group-footer 
{
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.detail-button 
{
text-decoration: none;
}
.detail-todo
{
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
background-color: #f9f9f9;
color: gray;
padding: 17px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-decoration: none;
text-align: center;
margin-bottom: 5px;
}
.dark .detail-todo
{
color: gray;
border: none;
background-color: #101010;
}
.detail-button-todo
{
text-decoration: none;
}
.detail-poll
{
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
background-color: #f9f9f9;
color: gray;
padding: 17px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-decoration: none;
text-align: center;
margin-bottom: 5px;
}
.dark .detail-poll
{
color: gray;
border: none;
background-color: #101010;
}
.detail-button-poll
{
text-decoration: none;
}
.nogroups p 
{
color: #777;
font-style: italic;
}
#latestGroup
{
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: -10px;
}
.dark #latestGroup
{
color: white;
}
.dark .user-profile
{
background-color: #0A0A0A;
}
.group-content-myacc 
{
display: flex;
flex-wrap: wrap;
gap: 10px;
width: 595px;
justify-content: space-between;
max-width: 90%;
margin: 0 auto;
max-height: 80vh;
overflow-y: auto;
}
.group-list 
{
display: flex;
flex-wrap: wrap; 
gap: 10px;  
justify-content: flex-start; 
width: 100%; 
}
.groupmyaccount 
{
background-color: white;
width: calc(50% - 10px); 
margin-bottom: 15px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
padding: 15px;
box-sizing: border-box; 
}
@media (max-width: 768px) 
{
.groupmyaccount {
width: 100%;  
}
}
.group-header-myacc
{
font-family: 'Poppins', sans-serif;
font-size: 14px;
margin-top: 5px;
}
.group-header-myacc p
{
font-family: 'Poppins', sans-serif;
font-size: 14px;
margin-top: 10px;
margin-bottom: -3px;
border-bottom: 1px solid #dfdfdf;
padding-bottom: 5px;
}
.nogroups-myacc
{
text-align: center;
margin: 0 auto;
}
.dark .edit-group-input
{
background-color: #101010;
}
.dark .edit-group-textarea
{
background-color: #101010;
}
.dark .groupmyaccount
{
background-color: #0A0A0A;
}
.dark .group-header-myacc p
{
color: white;
border-bottom: 1px solid #101010;
}
.covervisible
{
padding: 15px;
background-color: white;
color: black;
border: 1px solid #BBBBBB;
cursor: pointer;
display: block;
margin: 0 auto;
font-family: 'Poppins', sans-serif;
font-size: 13px;
border-radius: 5px;
margin-top: 10px;
width: 408px;
max-width: 83%;
text-align: left;
outline: none;
}
.dark .covervisible
{
padding: 15px;
background-color: #0A0A0A;
color: white;
border: 1px solid #1b1b1b;
cursor: pointer;
display: block;
margin: 0 auto;
font-family: 'Poppins', sans-serif;
font-size: 13px;
border-radius: 5px;
margin-top: 10px;
width: 408px;
max-width: 83%;
text-align: left;
outline: none;
}
@keyframes fadeIn 
{
from 
{
opacity: 0; 
}
to 
{
opacity: 1;  
}
}
.iconsbtns
{
width: 30px;
text-align: center;
height: 30px;
border: none;
border-radius: 50px;
margin-right: 20px;
background-color: #5a00ff;
cursor: pointer;
}
.iconsbtns:hover
{
background-color: #e0e0e0;
cursor: pointer;
transition: background-color 0.3s;
}
.menu-homepage i:hover 
{
color: #5a00ff;
transition: color 0.3s;
}
.first 
{
color: #ffa200;
}
.last 
{
color: #5a00ff;
}
.menu-homepage-item a 
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-right: 25px;
cursor: pointer;
color: gray;
}
.dark .menu-homepage-item a
{
color: gray;
}
.home-container 
{
display: grid; 
grid-template-columns: repeat(3, 1fr); 
gap: 0px; 
margin-top: 30px;
justify-items: center; 
width: 760px;
max-width: 94%;
margin: 0 auto;
padding-top: 15px;
}
.homebox 
{
padding: 0;
font-family: 'Poppins', sans-serif;
justify-content: center;
background-color: gray;
width: 195px;
max-width: 90%;
height: 200px;
max-height: 90%;
border-radius: 30px;
text-align: center;
transition: transform 1s ease-in-out; 
transform-style: preserve-3d; 
box-shadow: 0 4px 80px rgba(0, 0, 0, 0.1);
}
.homebox:hover 
{
transform: scale(1.05);
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
cursor: pointer;
transition: 1s;
}
.homebox:nth-child(1) 
{
background-color: transparent;
}
.homebox:nth-child(2) 
{
background-color: transparent;
}
.homebox:nth-child(3) 
{
background-color: transparent;
}
.homebox:nth-child(4) 
{
background-color: transparent;
}
.homebox:nth-child(5) 
{
background-color: transparent;
}
.homebox:nth-child(6) 
{
background-color: transparent;
}
.dark .homebox:nth-child(1) 
{
background-color:#101010;
}
.dark .homebox:nth-child(2) 
{
background-color: #101010;
}
.dark .homebox:nth-child(3) 
{
background-color: #101010;
}
.dark .homebox:nth-child(4) 
{
background-color: #101010;
}
.dark .homebox:nth-child(5) 
{
background-color: #101010;
}
.dark .homebox:nth-child(6) 
{
background-color: #101010;
}
@media (max-width: 768px) 
{
.home-container 
{
grid-template-columns: 1fr; 
padding-top: 15px;
}
.homebox 
{
width: 100%;
max-width: 590px; 
height: 230px;
}
}
@media (max-width: 768px) 
{
.menu-homepage-item i
{
font-size: 17px;
}
.nav-link
{
flex: 2;
}
.nav-link-acc 
{
flex: 2;   
}
}
.main-container 
{
margin: 0 auto;
padding: 0;
font-family: 'Poppins', sans-serif;
justify-content: center;
background-color: white;
width: 730px;
max-width: 90%;
border-radius: 30px;
margin-top: 15px;
margin-bottom: 5px;
}
.dark .main-container
{
background-color: #0A0A0A;
}
.intromain
{
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #afafaf;
text-align: justify;
}
.dark .intromain
{
color: #ebebeb;
}
.intromain a
{
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: white;
}
.emoticon
{
background-color: rgba(0, 0, 0, 0.25);
width: 50px;
height: 50px;
border-radius: 50%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 20px;
margin-top: 40px;
margin-bottom: 30px;
}
.dark .emoticon
{
background-color: #0A0A0A;
}
.introtext
{
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: black;
text-align: center;
align-items: center;
justify-content: center;
margin: 0 auto;
color: white;
}
.dark .introtext
{
color: #ebebeb;
}
@media (max-width: 768px) 
{
.main-container
{
margin-top: 15px;
font-size: 15px;
}
.main-container-memopost
{
margin-top: 15px;
font-size: 15px;
}
.pagination a
{
margin-bottom: -70px;
}
.replies-list
{
margin-bottom: -70px;  
}
.intromain
{
font-size: 15px;
}
.qa-section-cover
{
width: 730px;
max-width: 90%;
margin: 0 auto;
}
.profilebtn-cover
{
width: 730px;
max-width: 90%;
margin: 0 auto;
}
}
.maincover-container
{
box-shadow: 0 2px 25px rgba(0, 0, 0, 0.1);
border-radius: 10px;
width: 740px;
max-width: 90%;
margin: 0 auto;
margin-top: 30px;
padding: 0px;
}
.dark .maincover-container
{
background-color: #0A0A0A;
}
.qa-section 
{
width: 90%;
max-width: 655px;
margin: 20px auto;
border: none;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-family: 'Poppins', sans-serif;
}
.qa-title 
{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
padding: 15px 20px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 14px;
}
.dark .qa-title
{
background-color: #0A0A0A;
}
.dark .qa-title:hover
{
background-color: #0A0A0A;
}
.qa-title:hover 
{
background-color: #e8e8e8;
}
.qa-title-text 
{
color: #333;
font-family: 'Poppins', sans-serif;
font-size: 14px;
}
.dark .qa-title-text
{
color: #ebebeb;
}
.qa-toggle-icon 
{
font-size: 16px;
background: linear-gradient(to right, #5a00ff, #d2343f);
background-clip: text;
-webkit-text-fill-color: transparent;
transition: transform 0.3s ease;
}
.qa-content 
{
padding: 20px;
background-color: #fff;
border-top: 1px solid #ddd;
display: none;
}
.dark .qa-content
{
background-color: #0A0A0A;
border-top: 1px solid #212121;
}
.dark .qa-content ol
{
color: #ebebeb;
}
.qa-content p 
{
margin: 0;
font-size: 12px;
color: #666;
text-align: left;
font-family: 'Poppins', sans-serif;
}
.qa-section.active .qa-toggle-icon
{
transform: rotate(180deg);
}
.qa-section.active .qa-content 
{
display: block; 
}
.regaccprofile 
{
display: block;
margin: 10px auto;
padding: 18px 15px;
border-radius: 10px;
cursor: pointer;
border: none;
display: flex;
justify-content: space-between;
width: 90%;
max-width: 655px;
background-color: rgba(0, 0, 0, 0.25);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 14px;
margin-top: 20px;
padding-right: 20px;
font-weight: 100;
}
.hrefprofile a
{
text-decoration: none;
}
@media (max-width: 768px) 
{
.marg a
{
margin-left: -6.5px;
}
.menu-homepage i 
{
margin-right: -6.5px;
}
}
.righticonscover
{
display: flex;
}
.notification-bell
{
cursor: pointer;
color: gray;
margin-bottom: 15px;
}
.dark .notification-bell
{
cursor: pointer;
color: gray;
}
.nontf
{
color: black;
font-size: 13px;
font-family: 'Poppins', sans-serif;
}
.dark .nontf
{
color: #ebebeb;
}
.cancelreq
{
display: none;
margin: 0 auto;
padding: 14px 15px;
border-radius: 50px;
cursor: pointer;
border: none;
max-width: 284px;
width: 95%;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 15px;
padding-bottom: 15px;
font-weight: 100;   
}
.sendreq
{
margin: 0 auto;
padding: 14px 15px;
border-radius: 50px;
cursor: pointer;
border: none;
max-width: 150px;
width: 95%;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 5px;
padding-bottom: 15px;
font-weight: 100;   
margin-bottom: 15px;
}
.friendrequest
{
color: gray;
padding-bottom: 15px;
}
.acceptfrd
{
margin: 0 auto;
padding: 10px;
border-radius: 50px;
cursor: pointer;
border: none;
max-width: 140px;
width: 95%;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding-bottom: 10px;
font-weight: 100;   
margin-right: 5px;
}
.declinefrd
{
margin: 0 auto;
padding: 10px;
border-radius: 50px;
cursor: pointer;
border: none;
max-width: 140px;
width: 95%;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding-bottom: 10px;
font-weight: 100;   
}
.dark .notification
{
background-color: #0A0A0A;
}
.message-form-container 
{
margin: 0 auto;
padding: 20px;
font-family: 'Arial', sans-serif;
}
.spm
{
text-align: left;
color: #5a00ff;
margin-bottom: 30px;
font-family: 'Poppins', sans-serif;
font-size: 15px;
margin-top: 15px;
}
.spmecho
{
color: #bdbdbd;
font-family: 'Poppins', sans-serif;
font-size: 13px;
text-align: center;
margin-top: 10px;
}
.spmechocreation
{
color: #bdbdbd;
font-family: 'Poppins', sans-serif;
font-size: 13px;
text-align: center;
padding-top: 15px;
}
.spmechotimeline 
{
color: white;
background-color: #5a00ff; 
font-family: 'Poppins', sans-serif;
font-size: 13px;
text-align: center;
padding: 15px 20px;
border-radius: 50px;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
opacity: 0;
transform: translateY(20px); 
transition: opacity 0.5s ease, transform 0.5s ease;
}
.spmechotimeline.show 
{
opacity: 1;
transform: translateY(0);
}
.spmechotimeline.hide 
{
opacity: 0;
transform: translateY(20px);
}
.no-posts-todo
{
color: #bdbdbd;
font-family: 'Poppins', sans-serif;
font-size: 13px;
text-align: center;
margin-top: 38px;
margin-bottom: 38px;
}
.no-posts
{
color: #bdbdbd;
font-family: 'Poppins', sans-serif;
font-size: 13px;
text-align: center;
margin-top: 38px;
margin-bottom: 38px;
}
.select-friends 
{
position: relative;
margin-top: 15px;
width: 730px; 
max-width: 95%;
}
.select-friends input 
{
width: 100%; 
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 13px;
border: none; 
border-bottom: 2px solid transparent; 
border-radius: 5px 5px 0 0; 
box-sizing: border-box; 
transition: border-bottom 0.3s ease; 
background-color: #fff; 
}
.select-friends input:focus 
{
outline: none; 
border-bottom: 2px solid #5a00ff; 
}
.dark .select-friends input 
{
width: 100%; 
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 13px;
border: none; 
border-bottom: 2px solid transparent; 
border-radius: 5px 5px 0 0; 
box-sizing: border-box; 
transition: border-bottom 0.3s ease; 
background-color: #0A0A0A;
color: #ebebeb;
}
.dark .select-friends input:focus 
{
outline: none; 
border-bottom: 2px solid #5a00ff; 
}
.dark .friends-list li
{
background-color: #101010;
border: none;
color: #ebebeb;
}
.select-friends input:focus 
{
outline: none;
}
.friends-list 
{
width: 100%; 
font-family: 'Poppins', sans-serif;
font-size: 13px;
position: absolute;
top: 100%;
left: 0;
max-height: 150px;
overflow-y: auto;
background-color: #fff;
border: 1px solid #e8e8e8;
border-radius: 5px;
z-index: 10;
box-sizing: border-box; 
}
.friends-list li 
{
list-style-type: none;
padding: 14px;
cursor: pointer;
}
.dark .friends-list
{
border: none;
background-color: transparent;
color: #ebebeb;
}
.friends-list li:hover 
{
background-color: #f0f0f0;
}
.friends-list ul 
{
border: none;
}
.dark .friends-list li:hover 
{
background-color: #101010;
}
button.send-message 
{
display: block;
margin: 0px auto;
border-radius: 50px;
cursor: pointer;
border: none;
max-width: 730px;
height: 55px;
width: 95%;
background-color: transparent;
border: 1px solid #5a00ff;
color: #5a00ff;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 35px;
font-weight: 100;
}
.visibility-toggle 
{
display: flex;
gap: 10px; 
}
.toggle-option 
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 10px 15px;
border: 1px solid #e8e8e8;
border-radius: 5px;
cursor: pointer;
text-align: center;
transition: background-color 0.2s ease, color 0.2s ease;
}
.dark .toggle-option
{
background-color: #e8e8e8;
color: black;
}
.toggle-option:hover 
{
background-color: #f0f0f0; 
}
.toggle-option.selected 
{
background-color: #5a00ff;
color: #fff;
border-color: #5a00ff;
}
.todo-form-container
{
margin: 0 auto;
padding: 20px;
font-family: 'Arial', sans-serif;
}
.task-select 
{
display: flex;
gap: 10px;
margin-top: 15px;
font-size: 13px;
font-family: 'Poppins', sans-serif;
margin-left: 13px;
}
.task-status-form
{
gap: 10px;
align-items: center;
display: flex;
}
.task-option 
{
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
background-color: #f9f9f9;
text-align: center;
}
.dark .task-option
{
background-color: #101010;
border: 1px solid #101010;
color: white;
}
.task-option.selected 
{
background-color: #5a00ff;
color: white;
border-color: #5a00ff;
}
.todo-form-container input
{
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 13px;
border: 1px solid #e8e8e8;
border-radius: 5px;
box-sizing: border-box;
margin-top: 15px;
}
.dark .todo-form-container input
{
background-color: #101010;
border: none;
color: #ebebeb;
}
.dark .todo-form-container input:first-child 
{
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 13px;
border: none;
border-bottom: 2px solid transparent;
background-color: #0A0A0A;
color: #ebebeb;
border-radius: 5px 5px 0 0; 
box-sizing: border-box;
margin-top: 0px;
transition: border-bottom 0.3s ease; 
}
.dark .todo-form-container input:first-child:focus 
{
outline: none; 
border-bottom: 2px solid #5a00ff;
}
.light .todo-form-container input:first-child 
{
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 13px;
border: none;
border-bottom: 2px solid transparent;
border-radius: 5px 5px 0 0; 
box-sizing: border-box;
margin-top: 0px;
transition: border-bottom 0.3s ease; 
}
.light .todo-form-container input:first-child:focus 
{
outline: none; 
border-bottom: 2px solid #5a00ff;
}
.task-entry 
{
display: flex;
align-items: center;
margin-bottom: 10px;
margin-top: 15px;
}
.task-entry input[type="text"] 
{
flex: 1;
padding: 13px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.task-entry select 
{
padding: 8px;
border: 1px solid #ddd;
border-radius: 5px;
}
.memocoin-option
{
padding: 8px 10px;
border-radius: 5px;
cursor: pointer;
background-color: #5a00ff;
text-align: center;
color: white;
}
.dark .memocoin-option
{
background-color: #101010;
color: #5a00ff;
}
.memocoin-select
{
display: flex;
gap: 10px;
font-size: 13px;
font-family: 'Poppins', sans-serif;
}
.memocoin-option.selected
{
background-color: #f9f9f9;
color: black;
}
#note 
{
resize: none;
width: 730px;
max-width: 95%;
margin: 0 auto;
padding: 13px;
border: none; 
border-bottom: 2px solid transparent; 
border-radius: 5px 5px 0 0; 
background-color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 13px;
transition: border-bottom 0.3s ease; 
}
#note:focus 
{
outline: none; 
border-bottom: 2px solid #5a00ff; 
}
textarea.message-input 
{
resize: none;
width: 730px;
max-width: 95%;
margin: 0 auto;
padding: 13px;
border: none; 
border-bottom: 2px solid transparent; 
border-radius: 5px 5px 0 0; 
background-color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 13px;
transition: border-bottom 0.3s ease; 
}
textarea.message-input:focus
{
outline: none; 
border-bottom: 2px solid #5a00ff; 
}
.dark textarea.message-input 
{
resize: none;
width: 730px;
max-width: 95%;
margin: 0 auto;
padding: 13px;
border: none; 
border-bottom: 2px solid transparent; 
border-radius: 5px 5px 0 0; 
background-color: #0A0A0A;
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #ebebeb;
transition: border-bottom 0.3s ease; 
}
.dark textarea.message-input:focus
{
outline: none; 
border-bottom: 2px solid #5a00ff; 
}
.dark #note 
{
resize: none;
width: 730px;
max-width: 95%;
margin: 0 auto;
padding: 13px;
border: none; 
border-bottom: 2px solid transparent; 
border-radius: 5px 5px 0 0; 
background-color: #0A0A0A;
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #ebebeb;
transition: border-bottom 0.3s ease; 
}
.dark #note:focus 
{
outline: none; 
border-bottom: 2px solid #5a00ff; 
}
.memooo
{
font-family: "Borel", cursive;
text-align: center;
color: white;
font-size: 30px;
margin-top: 65px;
}
.poll-form-container
{
margin: 0 auto;
padding: 20px;
font-family: 'Arial', sans-serif;
}
.poll-author
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #333;
}
.poll-form-container input
{
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 13px;
border: 1px solid #e8e8e8;
border-radius: 5px;
box-sizing: border-box;
margin-top: 15px;
}
.option-select
{
display: flex;
gap: 10px;
margin-top: 15px;
font-size: 13px;
font-family: 'Poppins', sans-serif;
margin-left: 13px;
}
.option-option 
{
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
background-color: #f9f9f9;
text-align: center;
}
.dark .option-option
{
background-color: #101010;
border: 1px solid #101010;
color: white;
}
.option-option.selected 
{
background-color: #5a00ff;
color: white;
border-color: #5a00ff;
}
.dark .option-option.selected 
{
background-color: #5a00ff;
color: white;
border-color: #5a00ff;
}
.option-entry
{
display: flex;
align-items: center;
margin-bottom: 10px;
margin-top: 15px;
}
.option-entry input[type="text"]
{
flex: 1;
padding: 13px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.poll-form-container input:first-child
{
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 13px;
border: none;
border-bottom: 2px solid transparent; 
border-radius: 5px 5px 0 0; 
box-sizing: border-box;
margin-top: 0px;
transition: border-bottom 0.3s ease; 
}
.poll-form-container input:first-child:focus 
{
outline: none; 
border-bottom: 2px solid #5a00ff; 
}
.dark .poll-form-container input:first-child 
{
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 13px;
border: none;
border-bottom: 2px solid transparent; 
background-color: #0A0A0A;
color: #ebebeb;
border-radius: 5px 5px 0 0; 
box-sizing: border-box;
margin-top: 0px;
transition: border-bottom 0.3s ease; 
}
.dark .poll-form-container input:first-child:focus 
{
outline: none; 
border-bottom: 2px solid #5a00ff; 
}
.emojicover
{
margin-top: -10px;
}
.timeline-post 
{
position: relative; 
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 15px;
}
.timeline-post:first-child
{
margin-top: 0px;
}
.post-header 
{
display: flex;
justify-content: space-between;
align-items: center;
}
.post-author-container 
{
display: flex;
align-items: center;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-size: 100;
}
.profile-image 
{
width: 35px;
height: 35px;
border-radius: 50%;
margin-right: 10px;
margin-left: -10px;
}
.post-author-link 
{
text-decoration: none;
color: #5a00ff;
}
.dark .post-author-link 
{
text-decoration: none;
color: #5a00ff;
}
.post-author-link:hover 
{
text-decoration: none;
}
.post-date 
{
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-size: 100;
color: gray;
padding: 5px;
border-radius: 5px;
}
.post-body 
{
margin-top: 10px;
line-height: 1.5;
}
.post-body p
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: #333;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
margin-top: 15px;
margin-bottom: 15px;
}
.dark .post-body p
{
color: white;
}
.delete-form 
{
margin: 0;
padding: 0;
display: grid;
}
.delete-button 
{
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
background-color: #f9f9f9;
color: gray;
padding: 17px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 100%;
font-weight: normal;
}
.main-container-memopost
{
margin: 0 auto;
padding: 0;
font-family: 'Poppins', sans-serif;
justify-content: center;
width: 740px;
max-width: 90%;
border-radius: 30px;
margin-top: 25px;
}
.timeline-post 
{
padding: 20px;
border-radius: 20px;
margin-bottom: 15px;
opacity: 0;
transform: scale(0.95);
transition: all 0.4s ease;
}
.timeline-post.visible 
{
opacity: 1;
transform: scale(1);
}
.timeline-post:last-child
{
padding: 20px;
border-radius: 20px;
margin-bottom: 10px;
}
.dark .timeline-post 
{
background-color: #0A0A0A;
}
.post-body 
{
font-size: 16px;
}
.load-more-button
{
margin: 0px auto;
border-radius: 55px;
cursor: pointer;
border: none;
width: 740px;
max-width: 90%;
height: 37px;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 0px;
font-weight: 100;
text-align: center;
margin-bottom: 25px;
}
.closestories 
{
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: white;
width: 25px;
height: 25px;
border-radius: 5px;
}
.light .closestories
{
color: white;
}
.dark .closestories
{
color: white;
}
a .load-more-button 
{
text-decoration: none;
padding-top: 18px;
}
.newest-memo-button
{
margin: 0px auto;
border-radius: 50px;
cursor: pointer;
border: none;
width: 740px;
max-width: 90%;
height: 37px;
background-color: #5a00ff;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 100;
text-align: center;
margin-bottom: 25px;
}
a .newest-memo-button 
{
text-decoration: none;
padding-top: 18px;
}
.go-back-button
{
margin: 0px auto;
border-radius: 55px;
cursor: pointer;
border: none;
height: 37px;
width: 740px;
max-width: 90%;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 20px;
font-weight: 100;
text-align: center;
margin-bottom: 10px;
}
.go-back-button:first-child
{
margin: 0px auto;
border-radius: 55px;
cursor: pointer;
border: none;
height: 37px;
width: 740px;
max-width: 90%;
background: #5a00ff;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 10px;
font-weight: 100;
text-align: center;
margin-bottom: 10px;
}
a .go-back-button
{
text-decoration: none;
padding-top: 18px;
}
.main-container-polls 
{
margin: 0 auto;
padding: 0;
font-family: 'Poppins', sans-serif;
justify-content: center;
width: 740px;
max-width: 90%;
border-radius: 30px;
margin-top: 15px;
margin-bottom: 5px;
}
.poll-container 
{
position: relative;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 15px;
margin-bottom: 25px;
padding: 20px;
border-radius: 20px;
opacity: 0;
transform: scale(0.95);
transition: all 0.4s ease;
}
.poll-container.visible 
{
opacity: 1;
transform: scale(1);
}
.dark .poll-container
{
background-color: #0A0A0A;
}
.poll-container:first-child
{
margin-top: 0px;
}
.poll-header
{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.poll-title
{
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 100;
color: #333;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
margin-top: 5px;
}
.dark .poll-title
{
color: white;
}
.task-title
{
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 100;
color: #333;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
margin-top: 5px;
}
.dark .task-title
{
color: white;
}
poll-header img
{
width: 35px;
border-radius: 50%;
margin-right: 10px;
height: 35px;
}
.poll-note
{
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 100;
color: gray;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
}
.task-note
{
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 100;
color: gray;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
}
.poll-option 
{
display: flex;
justify-content: space-between; 
align-items: center;
margin: 10px 0;
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
}
.dark .poll-option
{
background-color: #101010;
border: none;
}
.option-text 
{
flex: 1; 
text-align: left;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 100;
color: #333;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
padding-right: 15px;
}
.dark .option-text
{
color: white;
}
.vote-actions 
{
display: flex;
align-items: center;
gap: 10px; 
}
.vote-button 
{
border: 1px solid #5a00ff;
border-radius: 5px;
cursor: pointer;
background-color: #5a00ff;
color: white;
padding: 10px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: normal;
}
.vote-button.voted 
{
background-color: #5a00ff;
color: white;
border-color: #5a00ff;
cursor: not-allowed;
font-weight: normal;
}
.vote-count 
{
font-size: 12px;
color: #555;
font-family: 'Poppins', sans-serif;
}
.delete-poll-button
{
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
background-color: #f9f9f9;
color: gray;
padding: 17px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 100%;
font-weight: normal;
}
.dark .delete-poll-button
{
background-color: #101010;
border: none;
}
.delete-todo-btn
{
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
background-color: #f9f9f9;
color: gray;
padding: 17px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 100%;
font-weight: normal;
}
.dark .delete-todo-btn
{
background-color: #101010;
color: gray;
border: none;
}
.main-container-todo-lists 
{
margin: 0 auto;
padding: 0;
font-family: 'Poppins', sans-serif;
justify-content: center;
width: 740px;
max-width: 90%;
border-radius: 30px;
margin-top: 15px;
margin-bottom: 5px;
}
.todo-list-container
{
position: relative;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 15px;
margin-bottom: 25px;
padding: 20px;
border-radius: 20px;
opacity: 0;
transform: scale(0.95);
transition: all 0.4s ease;
}
.todo-list-container.visible 
{
opacity: 1;
transform: scale(1);
}
.dark .todo-list-container
{
background-color: #0A0A0A;
}
.todo-list-container:first-child
{
margin-top: 0px;
}
.todo-container 
{
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 20px;
padding: 15px;
background: #f9f9f9;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
}
.todo-header 
{
display: flex;
flex-direction: column;
gap: 8px;
}
.todo-header h3 
{
margin: 0;
font-size: 20px;
color: #333;
}
.todo-header p 
{
margin: 0;
font-size: 14px;
color: #666;
}
.todo-author 
{
font-size: 12px;
color: #888;
}
.todo-task
{
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
}
.dark .todo-task
{
background-color: #101010;
border: none;
}
.task-text 
{
flex: 1;
font-size: 14px;
color: #333;
}
.task-button 
{
margin-left: 10px;
padding: 5px 10px;
border: none;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: background 0.3s ease;
}
.task-button.choose 
{
background: #5a00ff;
color: #fff;
}
.task-button.choose:hover 
{
background: #0056b3;
}
.task-button.in-progress 
{
background: #ffc107;
color: #fff;
}
.task-button.in-progress:hover 
{
background: #e0a800;
}
.task-button.done 
{
background: #28a745;
color: #fff;
}
.task-button.done:hover 
{
background: #218838;
}
.todo-footer {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
.total-tasks
{
font-size: 12px;
color: #555;
}
.delete-todo-button 
{
padding: 5px 10px;
background: #dc3545;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background 0.3s ease;
font-weight: normal;
}
.delete-todo-button:hover 
{
background: #c82333;
}
.upload-form 
{
display: flex;
gap: 10px;
align-items: center;
}
.thumbnail 
{
width: 40px;
height: 40px;
cursor: pointer;
border-radius: 5px;
}
.imgproof 
{
width: 40px;
height: 40px;
cursor: pointer;
border-radius: 5px;
}
.image-modal 
{
display: none;
position: fixed;
padding-top: 50px;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 1);
text-align: center;
}
.image-modal .closeimg 
{
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: white;
width: 25px;
height: 25px;
border-radius: 5px;
}
.modal-contentsimg
{
margin: auto;
display: block;
width: 90%;
max-width: 450px;
height: 90%;
max-height: 450px;
border-radius: 20px;
object-fit: cover;
}
.task-desc
{
flex: 1;
text-align: left;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 100;
color: #333;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
padding-right: 15px;
}
.dark .task-desc
{
color: white;
}
.status-button-choose
{
border: 1px solid #5a00ff;
border-radius: 5px;
cursor: pointer;
background-color: #5a00ff;
color: white;
padding: 10px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: normal;
}
.status-button-in-progress
{
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
background-color: #f9f9f9;
color: gray;
padding: 10px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: normal;
}
.status-button-validate
{
border: 1px solid #5a00ff;
border-radius: 5px;
cursor: pointer;
background-color: #5a00ff;
color: white;
padding: 10px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: normal;
}
.status-button-validated
{
border: 1px solid #5a00ff;
border-radius: 5px;
cursor: pointer;
background-color: #5a00ff;
color: black;
padding: 10px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: normal;
}
.status-button-done
{
border: 1px solid #5a00ff;
border-radius: 5px;
cursor: pointer;
background-color: #5a00ff;
color: white;
padding: 10px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: normal;
}
.status-button-cancel
{
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
background-color: #f9f9f9;
color: gray;
padding: 10px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: normal;
}
.status-button-upload
{
border: 1px solid #5a00ff;
border-radius: 5px;
cursor: pointer;
background-color: #5a00ff;
color: white;
padding: 10px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: normal;
}
.custom-file-upload 
{
display: inline-block;
border: 1px solid #5a00ff;
padding: 10px 15px;
cursor: pointer;
background-color: #5a00ff;
color: white;
border-radius: 4px;
font-size: 12px;
font-family: 'Poppins', sans-serif;
font-weight: normal;
}
.custom-file-upload input[type="file"] 
{
display: none;
}
.completed-by
{
font-size: 12px;
font-family: 'Poppins', sans-serif;
color: gray;
margin-left: 10px;
margin-right: 5px;
}
.detail-button 
{   
text-decoration: none;
}
.detail-btn-cover 
{
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
background-color: #f9f9f9;
color: gray;
padding: 17px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-decoration: none;
text-align: center;
margin-bottom: 5px;
margin-top: 30px;
}
.dark .detail-btn-cover
{
color: gray;
border: none;
background-color: #101010;
}
.dark .delete-button
{
color: gray;
border: none;
background-color: #101010;
}
.comments-section 
{
margin-top: 20px;
}
.add-comment-form 
{
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.add-comment-form textarea 
{
width: 100%;
min-height: 80px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: 'Poppins', sans-serif;
}
.add-comment-button 
{
align-self: flex-end;
padding: 10px 20px;
background-color: #5a00ff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.comments-list 
{
list-style: none;
padding: 0;
}
.comment-item 
{
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
}
.comment-author 
{
font-weight: bold;
}
.comment-date 
{
font-size: 12px;
color: #888;
margin-left: 10px;
}
.delete-comment-form 
{
margin-top: 5px;
}
.delete-comment-button 
{
background-color: #dc3545;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-weight: normal;
}
.commentlist 
{
position: relative;
padding-left: 20px;
}
.commentlist::before 
{
content: '';
position: absolute;
top: 0;
left: 10px;
bottom: 0;
}
.reply-tree 
{
margin-left: 20px;
position: relative;
}
.reply-tree::before 
{
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
border-left: 1px solid #5a00ff; 
}
.reply 
{
margin-left: 20px;
position: relative;
}
.reply::before 
{
content: '';
position: absolute;
top: -5px; 
left: -10px;
width: 30px;
border-bottom: 1px solid #5a00ff; 
}
.comment-count 
{
color: gray;
font-size: 12px;
font-family: 'Poppins', sans-serif;
}
.comment-count i 
{
margin-right: 15px;
color: gray;
}
.post-views i
{
margin-right: 10px;
}
.dark .comment-count
{
color: white;
}
.dark .comment-count i
{
color: white;
}
.navigationacc 
{
width: 90%;
max-width: 750px;
display: flex; 
justify-content: space-between;
margin: 39px auto 0; 
padding: 0; 
}
.navigationaccview 
{
width: 100%;
max-width: 850px;
display: flex; 
justify-content: space-between;
margin: 39px auto 0; 
padding: 0; 
}
.nav-link-acc 
{
flex: 1.3;
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: center;
text-decoration: none;
color: gray;
font-family: 'Poppins', sans-serif;
font-size: 17px;
padding-bottom: 5px;
}
.nav-link-acc i 
{
font-size: 17px;
}
.nav-link-acc.active 
{
color: #5a00ff;
}
.dark .nav-link-acc.active 
{
color: #5a00ff;
}
.nav-link-acc.active i 
{
color: #5a00ff;
}
.dark .nav-link-acc.active i
{
color: #5a00ff;
}
.usernick p
{
font-family: 'Poppins', sans-serif;
}
.post-visibility
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
margin-right: 10px;
color: gray;
border-radius: 5px;
}
.post-recipient
{
font-family: 'Poppins', sans-serif;
font-size: 11px;
color: gray;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
}
.post-recipient a
{
font-family: 'Poppins', sans-serif;
font-size: 11px;
text-decoration: none;
color: gray;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
}
.side-bar 
{
background-color: #f9f9f9;
width: 60px;
height: 100vh;
display: flex;
flex-direction: column;
padding: 20px 0;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
justify-content: space-between;
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}
.side-bar-header 
{
padding-top: 15px;
margin-left: 19px;
}
.side-bar-header .marg a 
{
font-size: 17px;
font-family: "Borel", cursive;
color: gray;
text-decoration: none;
cursor: pointer;
}
.menu-items 
{
list-style-type: none;
padding: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 100%; 
}
.menu-middle
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu-items li 
{
margin: 13px 0;
margin-left: 25px;
}
.menu-items a 
{
font-size: 17px;
font-family: "Borel", cursive;
color: gray;
text-decoration: none;
display: block;
}
.logout 
{
margin-top: auto; 
padding-bottom: 20px;
}
.main-content 
{
flex-grow: 1;
min-height: 100vh;
}
.dark .side-bar 
{
background-color: #0A0A0A;
}
.dark .side-bar-data
{
background-color: #0A0A0A;
}
.memo-header-group
{
padding-top: 18px;
padding-bottom: 18px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.me-score-container
{
box-shadow: 0 2px 25px rgba(0, 0, 0, 0.1);
margin: 0 auto;
width: 90%;
max-width: 655px;
border-radius: 20px;
}
.dark .me-score-container
{
background-color: #0A0A0A;
box-shadow: 0 2px 25px rgba(0, 0, 0, 0.1);
margin: 0 auto;
width: 90%;
max-width: 655px;
border-radius: 20px;
}
.me-score-container-icon
{
font-size: 35px;
padding-top: 15px;
}
.me-score
{
font-family: 'Poppins', sans-serif;
font-size: 20px;
padding-top: 10px;
padding-bottom: 15px;
color: #5a00ff;
}
.dark .hamburger-menu 
{
display: block; 
position: fixed;
bottom: 22px; 
right: 22px; 
z-index: 1000;
font-size: 23px;
color: black;
cursor: pointer;
background-color: #9c9c9c;
padding: 10px;
border-radius: 10px;
padding-left: 13px;
padding-right: 13px;
}
.hamburger-menu 
{
display: block; 
position: fixed;
bottom: 22px; 
right: 22px; 
z-index: 1000;
font-size: 23px;
color: white;
cursor: pointer;
background-color: #838383;
padding: 10px;
border-radius: 10px;
padding-left: 13px;
padding-right: 13px;
}
.side-bar.show 
{
transform: translateX(0);
}
@media (max-width: 860px) 
{
.side-bar 
{
transform: translateX(-100%);
}
.hamburger-menu 
{
display: block; 
}
.dark .hamburger-menu 
{
display: block; 
}
.side-bar.show 
{
transform: translateX(0);
}
}
.dark .scroll-to-top 
{
display: none; 
position: fixed;
bottom: 84px; 
right: 22px; 
z-index: 1000;
font-size: 20px;
color: black;
cursor: pointer;
background-color: #9c9c9c;
padding: 15px; 
border-radius: 10px; 
transition: opacity 0.3s ease;
}
.scroll-to-top 
{
display: none; 
position: fixed;
bottom: 84px; 
right: 22px; 
z-index: 1000;
font-size: 20px;
color: #333;
cursor: pointer;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
padding: 15px; 
border-radius: 10px; 
transition: opacity 0.3s ease;
}
.scroll-to-top.show 
{
display: block;
opacity: 1;
}
.scroll-to-top.hide 
{
opacity: 0;
}
@media (max-width: 860px) 
{
.scroll-to-top 
{
bottom: 84px; 
right: 22px; 
z-index: 1000;
font-size: 20px;
color: white;
cursor: pointer;
background-color: #838383;
padding: 13px; 
border-radius: 10px; 
width: 20px;
transition: opacity 0.3s ease;
box-shadow: none;
}
}
@media (max-width: 860px) 
{
.dark .scroll-to-top 
{
bottom: 84px; 
right: 22px; 
z-index: 1000;
font-size: 20px;
color: black;
cursor: pointer;
background-color: #9c9c9c;
padding: 13px; 
border-radius: 10px; 
width: 20px;
transition: opacity 0.3s ease;
box-shadow: none;
}
}
@media (max-width: 860px) 
{
.side-bar-header 
{
padding-top: 15px;
margin-left: 26px;
}
}
.navigation-doc
{
width: 95%;
max-width: 740px;
display: flex; 
justify-content: space-between;
margin: 45px auto 0; 
margin-bottom: 35px;
padding: 0; 
}
.nav-link-doc
{
flex: 1; 
text-align: center; 
text-decoration: none;
color: gray; 
font-family: 'Poppins', sans-serif;
font-size: 12px;
padding-bottom: 5px; 
}
.nav-link-doc.active 
{
color: #5a00ff;
padding-bottom: 5px;
}
.dark .nav-link-doc.active 
{
color: white;
padding-bottom: 5px;
}
.user-profile-vp
{
width: 695px;
max-width: 90%;
margin: 30px auto;
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
text-align: center;
font-family: 'Poppins', sans-serif;
position: relative;
font-size: 12px;
margin-bottom: 0px;
padding-bottom: 5px;
}
.user-profile-vp img
{
border-radius: 60px;
width: 50px;
height: 50px;
margin-top: 10px;
}
.dark .user-profile-vp
{
background-color: #0A0A0A;
}
.dark .user-profile-vp p
{
color:#ebebeb;
}
.unfriend
{
margin: 0 auto;
padding: 14px 15px;
border-radius: 50px;
cursor: pointer;
border: none;
max-width: 150px;
width: 95%;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 5px;
padding-bottom: 15px;
font-weight: 100;
margin-bottom: 15px;
}
.dark .frndcover p
{
color: white;
}
.frndcover p
{
color: gray;
font-size: 13px;
margin-bottom: 17px;
font-family: 'Poppins', sans-serif;
}
.dark .frndcover a
{
color: white;
}
.frndcover a
{
color: gray;
font-size: 13px;
margin-bottom: 17px;
font-family: 'Poppins', sans-serif;
text-decoration: none;
}
.home-time 
{
width: 740px;
max-width: 90%;
margin: 0 auto;
margin-top: 15px;
padding: 0px;
}
.dark .homebox-time 
{
display: flex; 
justify-content: flex-start; 
align-items: center; 
padding: 20px;
font-family: 'Poppins', sans-serif;
background-color: #0A0A0A;
height: 25px; 
max-height: 90%;
border-radius: 15px;
box-shadow: 0 4px 80px rgba(0, 0, 0, 0.1);
margin-bottom: -10px;
}
.dark .emoticon-time 
{
margin-left: 19px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 16px;
}
.dark .emoticon-time 
{
background-color: #101010;
}
.dark .homebox-time .fa-apple 
{
color: white;
}
.dark .homebox-time .fa-android 
{
color: #5a00ff;
}
.dark .homebox-time .fa-user-plus 
{
color: #5a00ff;
}
.introtext-time 
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: black;
margin-left: auto; 
margin-right: 14px;
color: white;
}
.dark .introtext-time 
{
color: #ebebeb;
}
.light .homebox-time 
{
display: flex; 
justify-content: flex-start; 
align-items: center; 
padding: 20px;
font-family: 'Poppins', sans-serif;
height: 25px; 
max-height: 90%;
border-radius: 15px;
box-shadow: 0 2px 25px rgba(0, 0, 0, 0.1);
margin-bottom: -10px;
}
.light .emoticon-time 
{
margin-left: 19px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 16px;
}
.light .homebox-time .fa-apple 
{
color: white;
}
.light .homebox-time .fa-android 
{
color: #5a00ff;
}
.light .homebox-time .fa-user-plus 
{
color: #5a00ff;
}
.light .introtext-time 
{
color: white;
}
.light .introtext-time a
{
background: linear-gradient(to right, #5a00ff, #d2343f);
border-radius: 10px;
padding: 14px 15px;
}
.dark .introtext-time a
{
background: linear-gradient(to right, #5a00ff, #d2343f);
border-radius: 10px;
padding: 14px 15px;
}
.friend-item 
{
display: flex;  
justify-content: space-between; 
align-items: center;
padding: 15px 0;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
border-radius: 15px;
margin-bottom: 10px;
}
.dark .friend-item 
{
background-color: #0A0A0A;
}
.friend-item span 
{
display: flex;
align-items: center; 
}
.friend-item a 
{
display: flex;
align-items: center;
text-decoration: none;
color: inherit; 
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: gray;
}
.dark .friend-item a 
{
color: #ebebeb;
}
.friend-item img 
{
width: 35px; 
height: 35px;
border-radius: 50%; 
margin-right: 10px; 
margin-left: 15px; 
}
.remove-friend-btn 
{
margin: 0 auto;
padding: 10px;
border-radius: 10px;
width: 40px;
cursor: pointer;
border: none;
background-color: #5a00ff;
color: white;
font-family: 'Poppins', sans-serif;
margin-right: 15px;
}
.remove-friend-btn i
{
font-size: 13px;
}
.load-friend-button 
{
margin: 0px auto;
border-radius: 50px;
cursor: pointer;
border: none;
width: 740px;
max-width: 100%;
height: 55px;
background-color: #5a00ff;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 100;
text-align: center;
margin-bottom: 25px;
margin-top: 10px;
}
.delete-container-acc
{
margin: 0 auto;
width: 740px;
max-width: 90%;
}
.delete-acc-button
{
border-radius: 50px;
width: 740px;
max-width: 90%;
cursor: pointer;
border: none;
height: 57px;
background-color: #5a00ff;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 100;
text-align: center;
margin-bottom: 30px;
}
.change-acc-button
{
border-radius: 50px;
width: 740px;
max-width: 90%;
cursor: pointer;
border: none;
height: 57px;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 100;
text-align: center;
margin-bottom: 10px;
}
.dark .change-user-profile-acc input
{
background-color: #101010;
}
.dark .change-user-profile-acc 
{
width: 740px;
max-width: 90%;
background-color: #0A0A0A;
margin: 0px auto;
text-align: center;
font-family: 'Poppins', sans-serif;
position: relative;
font-size: 12px;
margin-bottom: 15px;
border-radius: 20px;
}
.member-sett
{
font-family: 'Poppins', sans-serif;
font-size: 16px;
text-align: left;
cursor: pointer;
color: gray;
margin-left: 25px;
padding-top: 25px;
}
.dark .member-sett
{
color: white;
}
.post-views
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: gray;
}
.dark .post-views
{
font-family: 'Poppins', sans-serif;
color: white;
}
.change-user-profile-acc input
{
width: 740px;
max-width: 87.5%;
height: 57px;
text-align: left;
font-family: 'Poppins', sans-serif;
position: relative;
font-size: 13px;
margin-bottom: 20px;
background-color: #f7f7f7;
border-radius: 50px;
padding-left: 20px;
margin-top: 35px;
border: none;
}
.change-user-profile-acc 
{
width: 740px;
max-width: 90%;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
margin: 0px auto;
text-align: center;
font-family: 'Poppins', sans-serif;
position: relative;
font-size: 12px;
margin-bottom: 15px;
border-radius: 20px;
}
.bookmark-icon 
{
cursor: pointer;
font-size: 14px;
margin-right: 10px;
}
.fas.fa-bookmark 
{
color: #5a00ff;
}
.far.fa-bookmark 
{
color: #5a00ff;
}
.dark .far.fa-bookmark 
{
color: #5a00ff;
}
.saved-item
{
position: relative;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 15px;
margin-bottom: 25px;
border-radius: 20px;
}
.save-body p
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: #333;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
margin-left: 10px;
}
.dark .save-body p
{
color: white;
}
.save-container a
{
text-decoration: none;
color: white;
}
.view-detail
{
border-radius: 10px;
cursor: pointer;
padding: 15px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 100px;
text-align: center;
text-decoration: none;
margin-top: 20px;
margin-right: 15px;
}
.view-detail a
{
color: white;
text-decoration: none;
}
.cover-view-detail
{
display: flex;
justify-content: flex-end; 
align-items: center; 
}
.view-detail-1
{
background: linear-gradient(to right, #5a00ff, #d2343f);
}
.view-detail-2
{
background: linear-gradient(to right, #5a00ff, #d2343f);
}
.view-detail-3
{
background: linear-gradient(to right, #5a00ff, #d2343f);
}
.view-detail-4
{
background: linear-gradient(to right, #5a00ff, #d2343f);
}
.view-detail-5
{
background: linear-gradient(to right, #5a00ff, #d2343f);
}
.view-detail-6
{
background: linear-gradient(to right, #5a00ff, #d2343f);
}
.save-author-container 
{
display: flex;
align-items: center;
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: gray;
}
.save-container 
{
align-items: center;
font-family: 'Poppins', sans-serif;
font-size: 12px;
}
.post-date-save
{
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-size: 100;
color: gray;
padding: 5px;
border-radius: 5px;
}
.dark .post-date-save
{
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-size: 100;
color: white;
padding: 5px;
border-radius: 5px;
}
.dark .saved-item
{
position: relative;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 15px;
margin-bottom: 25px;
border-radius: 20px;
background-color: #0A0A0A;
}
.load-more
{
margin: 0px auto;
border-radius: 50px;
cursor: pointer;
border: none;
width: 740px;
max-width: 100%;
height: 37px;
background-color: #5a00ff;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 100;
text-align: center;
margin-bottom: 25px;
padding-top: 18px;
}
.report-icon 
{
margin-right: 15px;
font-size: 14px;
color: #5a00ff;
}
.report-icon.reported 
{
color: #5a00ff;
}
.dark .report-icon 
{
color: #5a00ff;
}
.dark .report-icon.reported 
{
color: #5a00ff;
}
.report-feedback 
{
font-size: 11px;
margin-left: 5px;
}
.post-images img
{
width: 50px;
height: 50px;
cursor: pointer;
border-radius: 10px;
}
.post-images img:last-child
{
margin-left: 5px;
}
.post-images img:first-child
{
margin-left: 0px;
}
.upload-images input
{
display: none;
}
.upload-btn
{
display: inline-block;
border: 1px solid #5a00ff;
padding: 10px 15px;
cursor: pointer;
background-color: transparent;
color: #5a00ff;
border-radius: 4px;
font-size: 12px;
font-family: 'Poppins', sans-serif;
margin-top: 20px;
}
.dark .upload-btn
{
color: #5a00ff;
}
.file-names
{
font-size: 12px;
font-family: 'Poppins', sans-serif;
color: gray;
}
.linkcover
{
text-decoration: none;
color: #5a00ff;
}
.androidbtn i
{
font-size: 19px;
margin-left: 5px;
}
.applebtn i
{
font-size: 19px;
margin-left: 5px;
}
.hrefprofile i
{
font-size: 19px;
margin-left: 5px;
}
.androidbtn 
{
display: flex;
align-items: center; 
}
.android
{
display: block;
margin: 10px auto;
padding: 18px 15px;
border-radius: 10px;
cursor: pointer;
border: none;
display: flex; 
justify-content: space-between; 
width: 90%;
max-width: 655px;
background-color: rgba(0, 0, 0, 0.25);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 100;
padding-right: 20px;
}
.apple
{
display: block;
margin: 10px auto;
padding: 18px 15px;
border-radius: 10px;
cursor: pointer;
border: none;
display: flex; 
justify-content: space-between; 
width: 90%;
max-width: 655px;
background-color: rgba(0, 0, 0, 0.25);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 100;
margin-bottom: 55px;
padding-right: 20px;
}
.logo-name-doc
{
margin-top: 40px;
margin-bottom: -20px;
text-align: center;
font-family: "Borel", cursive;
font-size: 25px;
color: #5a00ff; 
text-shadow: 
0 0 0.5vw #5a00ff, 
0 0 1.5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 0.2vw #5a00ff, 
0.5vw 0.5vw 0.1vw #3700b3; 
animation: neon 2s ease infinite;
}
@keyframes neon 
{
0%, 100% {
text-shadow: 
0 0 1vw #9b47ff,
0 0 3vw #9b47ff, 
0 0 10vw #9b47ff, 
0 0 10vw #9b47ff, 
0 0 0.4vw #d3b8ff; 
color: #c985ff; 
opacity: 1;
}
50% {
text-shadow: 
0 0 0.5vw #5a00ff, 
0 0 1.5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 0.2vw #3700b3; 
color: #5a00ff;
opacity: 0.4;
}
}  
.dot1 {
animation: flicker1 3s 4s linear infinite;
}
@keyframes flicker1 {
from {
opacity: 1;
}
0% {
opacity: 0;
}
1% {
opacity: 0;
}
2% {
opacity: 1;
}
to {
opacity: 1;
}
}
.dot2 {
animation: flicker2 7s 4s linear infinite;
}
@keyframes flicker2 {
from {
opacity: 1;
}
0% {
opacity: 0;
}
1% {
opacity: 0;
}
22% {
opacity: 0;
}
23% {
opacity: 1;
}
25% {
opacity: 0;
}
26% {
opacity: 1;
}
to {
opacity: 1;
}
}
.dot3 {
animation: flicker3 9s 10s linear infinite;
}
@keyframes flicker3 {
from {
opacity: 1;
}
0% {
opacity: 0;
}
1% {
opacity: 0;
}
2% {
opacity: 1;
}
60% {
opacity: 0;
}
61% {
opacity: 0;
}
62% {
opacity: 1;
}
to {
opacity: 0;
}
}
.single-view-container, .multi-view-container 
{
display: flex;
flex-direction: column;
gap: 10px;
}
.single-view-container 
{
display: none; 
}

.multi-view-container 
{
display: flex; 
}
.single-post, .multi-post {
background: #f4f4f4;
padding: 15px;
border-radius: 5px;
}
button.active 
{
background-color: #5a00ff;
color: white;
}
.timeline-post2 
{
position: relative;
}
#singleViewContainer 
{
cursor: grab; 
}
#singleViewContainer:active 
{
cursor: grabbing; 
}
.view-toggle-buttons-wrapper 
{
display: flex;               
justify-content: space-between; 
align-items: center;          
width: 730px;                
margin: 0 auto;              
max-width: 90%;
margin-bottom: -20px;
}
.view-toggle-buttons-wrapper-todo 
{
display: flex;               
justify-content: space-between; 
align-items: center;          
width: 730px;                
margin: 0 auto;              
max-width: 90%;
margin-bottom: -10px;
}
.view-toggle-buttons-wrapper-poll 
{
display: flex;               
justify-content: space-between; 
align-items: center;          
width: 730px;                
margin: 0 auto;              
max-width: 90%;
margin-bottom: -10px;
}
.view-toggle-buttons 
{
display: flex;
justify-content: flex-start; 
}
.view-toggle-buttons button 
{
padding: 10px;
margin: 5px;
cursor: pointer;
background-color: none;
background: none;
border: none;
color: gray;
font-size: 17px;
}
.view-toggle-buttons button.active 
{
color: #5a00ff; 
}
.swipe-indicator-center 
{
margin: 0;   
text-align: center; 
}
.swipe-indicator 
{
font-size: 17px;
color: #333;
opacity: 0.7;
animation: pulseAnimation 1.5s infinite ease-in-out;
}

@keyframes pulseAnimation 
{
0% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.2); 
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.7;
}
}
.swipe-indicator p 
{
color: gray;
font-family: 'Poppins', sans-serif;
font-size: 11px;
}
.dark .swipe-indicator p 
{
color: white;
font-family: 'Poppins', sans-serif;
font-size: 11px;
}
.timeline-post 
{
transition: transform 0.5s ease, opacity 0.5s ease;
opacity: 1;
}
.timeline-post.slide-left 
{
transform: translateX(-100%);
opacity: 0;
}
.timeline-post.slide-right 
{
transform: translateX(100%);
opacity: 0;
}
.timeline-post.show 
{
transform: translateX(0);
opacity: 1;
}
#swipeIndicator 
{
display: none; 
opacity: 0; 
transition: opacity 0.5s ease; 
}
#swipeIndicator.visible {
display: block; 
opacity: 1; 
}
.todo-list-container
{
transition: transform 0.5s ease, opacity 0.5s ease;
opacity: 1;
}
.todo-list-container.slide-left 
{
transform: translateX(-100%);
opacity: 0;
}
.todo-list-container.slide-right 
{
transform: translateX(100%);
opacity: 0;
}
.todo-list-container.show 
{
transform: translateX(0);
opacity: 1;
}
.poll-container
{
transition: transform 0.5s ease, opacity 0.5s ease;
opacity: 1;
}
.poll-container.slide-left 
{
transform: translateX(-100%);
opacity: 0;
}
.poll-container.slide-right 
{
transform: translateX(100%);
opacity: 0;
}
.poll-container.show 
{
transform: translateX(0);
opacity: 1;
}
.blockusr
{
margin: 0 auto;
padding: 14px 15px;
border-radius: 50px;
cursor: pointer;
border: none;
max-width: 150px;
width: 95%;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: -5px;
padding-bottom: 15px;
font-weight: 100;   
margin-bottom: 15px;
}
.search-container input
{
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 10px;
border: none;
border-bottom: 2px solid transparent;
background-color: transparent;
color: gray;
box-sizing: border-box;
margin-top: 0px;
transition: border-bottom 0.3s ease;
margin-bottom: 15px;
}
.dark .search-container input
{
color: #ebebeb;
}
.search-container input:focus 
{
outline: none; 
border-bottom: 2px solid #5a00ff;
}
.no-results
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #bdbdbd;
text-align: center;
margin-top: 10px;
margin-bottom: 15px;
}
.dark .no-results
{
color: #bdbdbd;
}
.pin-icon
{
color: #5a00ff;
background: none;
border: none;
font-size: 16px;
cursor: pointer;
}
.adminstyle
{
font-family: 'Poppins', sans-serif;
font-size: 17px;
padding-top: 30px;
color: #5a00ff;
text-align: left;
padding-bottom: 15px;
}
.memo-post-item:last-child
{
padding-bottom: 30px;
}
.memo-post-item p
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #333;
}
.memo-post-item
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #333;
}
.memo-post-list
{
margin-top: -10px;
}
.button-container 
{
display: flex;
justify-content: flex-end; 
align-items: center; 
border-top: 1px solid #ddd;
}
.delete-post-btn, .ban-user-btn, .delete-user-btn 
{
border-radius: 50px;
cursor: pointer;
padding: 15px 15px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 100px;
text-align: center;
text-decoration: none;
margin-top: 20px;
margin-right: 15px;
background: linear-gradient(to right, #5a00ff, #d2343f);
border: none;
color: white;
}
.pagination-pages 
{
margin: 0 auto;
margin-top: 25px;
display: flex; 
gap: 10px; 
justify-content: center; 
}
.pagination-pages a
{
text-align: center;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
background-color: #f9f9f9;
text-align: center;
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #5a00ff;
}
.pagination-pages a:hover
{
background-color: #5a00ff;
color: white;
border-color: #5a00ff;
}
.pagination-pages-cover
{
display: flex;
margin: 0 auto;
gap: 10px;
margin-top: 15px;
font-size: 13px;
font-family: 'Poppins', sans-serif;
margin-bottom: 40px;
}
.maincover-container-admin
{
box-shadow: 0 2px 25px rgba(0, 0, 0, 0.1);
border-radius: 10px;
width: 740px;
max-width: 90%;
margin: 0 auto;
margin-top: 30px;
padding: 0px;
}
.dark .maincover-container-admin
{
background-color: #0A0A0A;
}
.dark .memo-post-item p
{
color: white;
}
.dark .pagination-pages a
{
text-align: center;
padding: 10px 15px;
border: 1px solid #0A0A0A;
border-radius: 5px;
cursor: pointer;
background-color: #0A0A0A;
text-align: center;
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #5a00ff;
}
.dark .pagination-pages a:hover
{
background-color: #5a00ff;
color: white;
border-color: #5a00ff;
}
.dark .button-container 
{
display: flex;
justify-content: flex-end; 
align-items: center; 
border-top: 1px solid #212121;
}
#chart-container
{
width: 740px;
max-width: 90%;
margin: 0 auto;
margin-bottom: 15px;
margin-top: 15px;
}
.share-icon {
cursor: pointer;
color: gray; 
margin-right: 10px;
margin-left: 7px;
font-size: 14px;
}
.share-icon.shared {
color: #5a00ff; 
}
.post-images-gallery 
{
position: relative;
width: 700px; 
max-width: 100%;
overflow: hidden;
margin: 0 auto;
background-color: #f0f0f0; 
border-radius: 0px;
}
.dark .post-images-gallery 
{
background-color: #101010; 
}
.image-slider 
{
display: flex;
transition: transform 0.3s ease-in-out;
width: max-content; 
}
.image-slider-multi
{
display: flex;
transition: transform 0.3s ease-in-out;
width: max-content; 
}
.slider-image 
{
width: 350px;
height: 350px;
object-fit: cover; 
background-color: #fff;
border: 1px solid #ddd;
box-sizing: border-box;
border-radius: 0px;
}
.dark .slider-image 
{
background-color: #101010;
border: 1px solid #101010;
}
.gallery-controls 
{
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.gallery-arrow 
{
background: none;
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 25px;
}
.denyage
{
padding: 10px 20px;
background-color: #5a00ff; 
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
font-size: 13px;
font-family: 'Poppins', sans-serif;
}
.confirmage
{
padding: 10px 20px;
background-color: #5a00ff;
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
font-size: 13px;
font-family: 'Poppins', sans-serif;
}
.agepopup
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.agecover
{
background: black;
padding: 20px;
border-radius: 15px;
text-align: center;
max-width: 80%;
width: 330px;
}
.agecover p
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: white;
}
.agecover h2 {
font-size: 30px;
margin-bottom: -10px;
margin-top: 10px;
text-align: center;
font-family: "Borel", cursive;
color: #5a00ff; 
text-shadow: 
0 0 0.5vw #5a00ff, 
0 0 1.5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 0.2vw #5a00ff, 
0.5vw 0.5vw 0.1vw #3700b3; 
animation: neon 2s ease infinite;
}
@keyframes neon 
{
0%, 100% {
text-shadow: 
0 0 1vw #9b47ff,
0 0 3vw #9b47ff, 
0 0 10vw #9b47ff, 
0 0 10vw #9b47ff, 
0 0 0.4vw #d3b8ff; 
color: #c985ff; 
opacity: 1;
}
50% {
text-shadow: 
0 0 0.5vw #5a00ff, 
0 0 1.5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 5vw #5a00ff, 
0 0 0.2vw #3700b3; 
color: #5a00ff;
opacity: 0.4;
}
}  
.dot1 {
animation: flicker1 3s 4s linear infinite;
}
@keyframes flicker1 {
from {
opacity: 1;
}
0% {
opacity: 0;
}
1% {
opacity: 0;
}
2% {
opacity: 1;
}
to {
opacity: 1;
}
}
.dot2 {
animation: flicker2 7s 4s linear infinite;
}

@keyframes flicker2 {
from {
opacity: 1;
}
0% {
opacity: 0;
}
1% {
opacity: 0;
}
22% {
opacity: 0;
}
23% {
opacity: 1;
}
25% {
opacity: 0;
}
26% {
opacity: 1;
}
to {
opacity: 1;
}
}
.dot3 {
animation: flicker3 9s 10s linear infinite;
}
@keyframes flicker3 {
from {
opacity: 1;
}
0% {
opacity: 0;
}
1% {
opacity: 0;
}
2% {
opacity: 1;
}
60% {
opacity: 0;
}
61% {
opacity: 0;
}
62% {
opacity: 1;
}
to {
opacity: 0;
}
}
#lock-unlock-btn
{
border: none;
cursor: pointer;
background-color: transparent;
color: gray;
margin-bottom: 20px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
width: 100%;
font-weight: normal;
}
.dark #lock-unlock-btn
{
color: gray;
border: none;
background-color: transparent;
}
.blocked
{
font-family: 'Poppins', sans-serif;
}
.notificationcover {
height: 460px; 
max-height: 85%; 
overflow-y: auto; 
padding: 10px;
}
.language-switcher 
{
position: relative;
width: 80px;
height: 30px;
background: rgba(0, 0, 0, 0.25);
border-radius: 30px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px;
cursor: pointer;
transition: background 0.3s ease;
}
.switch-circle 
{
position: absolute;
width: 30px;
height: 30px;
background: white;
border-radius: 50%;
transition: transform 0.3s ease;
z-index: 1000;
}
.language-switcher span 
{
font-size: 12px;
font-weight: bold;
color: white;
z-index: 1;
user-select: none;
padding-left: 4px;
padding-right: 4px;
}
.language-switcher.active .switch-circle 
{
transform: translateX(50px);
}
.btncreationclick
{
border-radius: 5px;
cursor: pointer;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-decoration: none;
text-align: center;
padding: 10px;
visibility: hidden;
}
.btncreationclicktd
{
border-radius: 5px;
cursor: pointer;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-decoration: none;
text-align: center;
padding: 10px;
visibility: hidden;
}
.btncreationclickpl
{
border-radius: 5px;
cursor: pointer;
background: linear-gradient(to right, #5a00ff, #d2343f);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-decoration: none;
text-align: center;
padding: 10px;
visibility: hidden;
}
.eroticplatform
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-decoration: none;
text-align: center;
color: gray;
}
.select-eu-country 
{
margin-top: 20px;
font-family: 'Poppins', sans-serif;
font-size: 11px;
}
.select-eu-country label 
{
display: block;
margin-bottom: 10px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
}
.country-list 
{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.country-list-flt 
{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.country 
{
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s;
}
.dark .country:hover 
{
background-color: #101010;
}
.dark .country 
{
border: 1px solid #5a00ff;
background-color: transparent;
color: #5a00ff;
}
.dark .country.selected 
{
background-color: #5a00ff;
color: #fff;
}
.country:hover 
{
background-color: #e0e0e0;
}
.country.selected 
{
background-color: #5a00ff;
color: #fff;
}
.region-list 
{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
}
.region-list-flt
{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
}
.region 
{
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s;
}
.region:hover 
{
background-color: #e0e0e0;
}
.region.selected 
{
background-color: #5a00ff;
color: #fff;
}
.hidden 
{
display: none;
}
.dark .region 
{
border: 1px solid #5a00ff;
background-color: transparent;
color: #5a00ff;
}
.dark .region:hover 
{
background-color: #101010;;
}
.dark .region.selected 
{
background-color: #5a00ff;
color: #fff;
}
#price
{
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 13px;
border: none;
border-bottom: 2px solid transparent;
border-radius: 5px 5px 0 0;
box-sizing: border-box;
margin-top: 0px;
transition: border-bottom 0.3s ease;
margin-top: 15px;
}
.dark #price
{
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 13px;
border: none;
border-bottom: 2px solid transparent;
background-color: #0A0A0A;
color: #ebebeb;
border-radius: 5px 5px 0 0;
box-sizing: border-box;
margin-top: 0px;
transition: border-bottom 0.3s ease;
margin-top: 15px;
}
#price:focus
{
outline: none; 
border-bottom: 2px solid #5a00ff; 
}
.country-filter
{
padding-top: 18px;
padding-bottom: 18px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
margin-bottom: -20px;
}
.country-eu-part
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
text-align: left;
cursor: pointer;
color: white;
background: linear-gradient(to right, #d2343f, #5a00ff);
border-radius: 50px;
padding: 10px;
}
.dark .country-eu-part
{
color: white;
}
.filterbuttonclick
{
border: 1px solid #5a00ff;
border-radius: 5px;
cursor: pointer;
background-color: #5a00ff;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 13px;
text-decoration: none;
text-align: center;
padding: 10px;
visibility: hidden;
}
.country-form-container 
{
margin: 0 auto;
padding: 20px;
font-family: 'Arial', sans-serif;
}
.filtercountry
{
display: block;
margin: 0px auto;
border-radius: 50px;
cursor: pointer;
border: none;
max-width: 730px;
height: 55px;
width: 95%;
background-color: transparent;
border: 1px solid #5a00ff;
color: #5a00ff;
font-family: 'Poppins', sans-serif;
font-size: 13px;
margin-top: 35px;
font-weight: 100;
}
.dark .filtercountry
{
color: #5a00ff;
}
.country-flt 
{
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s;
}
.dark .country-flt:hover 
{
background-color: #101010;
}
.dark .country-flt 
{
border: 1px solid #5a00ff;
background-color: transparent;
color: #5a00ff;
}
.dark .country-flt.selected 
{
background-color: #5a00ff;
color: #fff;
}
.country-flt:hover 
{
background-color: #e0e0e0;
}
.country-flt.selected 
{
background-color: #5a00ff;
color: #fff;
}
.region-flt
{
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s;
}
.region-flt:hover 
{
background-color: #e0e0e0;
}
.region-flt.selected 
{
background-color: #5a00ff;
color: #fff;
}
.dark .region-flt
{
border: 1px solid #5a00ff;
background-color: transparent;
color: #5a00ff;
}
.dark .region-flt:hover 
{
background-color: #101010;;
}
.dark .region-flt.selected 
{
background-color: #5a00ff;
color: #fff;
}
.post-part
{
color: gray;
font-family: 'Poppins', sans-serif;
font-size: 12px;
}
.post-eu
{
color: gray;
font-family: 'Poppins', sans-serif;
font-size: 12px;
}
.post-price
{
color: gray;
font-family: 'Poppins', sans-serif;
font-size: 12px;
}
.yprofile
{
background-color: black;
width: 105px;
margin-top: 10px;
display: inline-table;
text-align: center;
float: right;
border-radius: 50px;
background-color: rgba(0, 0, 0, 0.3);
padding: 5px;
font-size: 14px;
font-family: 'Poppins', sans-serif;
margin-bottom: 5px;
margin-left: 10px;
}
.tooltip-container 
{
display: inline-block;
position: relative;
cursor: pointer;
margin-right: 5px;
}
.tooltip-icon 
{
display: flex;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
background-color: gray;
color: white;
font-size: 12px;
border-radius: 3px;
text-align: center;
font-weight: bold;
font-family: 'Poppins', sans-serif;
user-select: none;
}
.dark .tooltip-icon 
{
background-color: #0A0A0A;
}
.tooltip-text 
{
position: absolute;
bottom: 130%;
left: 50%;
background: gray;
color: white;
padding: 8px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
width: 250px;
transition: opacity 0.2s ease-in-out;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
}
.tooltip-container.active .tooltip-text 
{
visibility: visible;
opacity: 1;
}
@media (max-width: 768px) 
{
.yprofile
{
width: 96%;
max-width: 740px;
height: 36px;
padding-top: 16px;
margin: 0 auto;
float: none;
margin-top: 20px;
margin-left: 0px;
}
}
@media (max-width: 768px) 
{
.nav-link
{
flex: 2;
}
.nav-link-acc 
{
flex: 2;   
}
}
.side-bar-data 
{
background-color: #f9f9f9;
width: 100px;
height: 100vh;
display: flex;
flex-direction: column;
padding: 20px 0;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
justify-content: space-between;
z-index: 1000;
}
.side-bar-data.show 
{
transform: translateX(0);
}
.side-bar-header-data 
{
padding-top: 15px;
margin-left: 40px;
}
.side-bar-header-data .marg a 
{
font-size: 17px;
font-family: "Borel", cursive;
color: gray;
text-decoration: none;
cursor: pointer;
}
.menu-items-data 
{
list-style-type: none;
padding: 0;
margin: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100%; 
}
.menu-middle-data
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu-items-data li 
{
margin: 15px 0;
margin-left: 23.5px;
}
.menu-items-data a 
{
font-size: 17px;
font-family: "Borel", cursive;
color: gray;
text-decoration: none;
display: block;
}
.menu-homepage-item-data a 
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
margin-right: 25px;
text-align: left;
cursor: pointer;
color: gray;
}
.dark .menu-homepage-item-data a
{
color: gray;
}
@media (max-width: 768px) 
{
.menu-homepage-item-data i
{
font-size: 17px;
}
}
@media (max-width: 860px) 
{
.side-bar-data 
{
transform: translateX(-100%);
}
.side-bar-data.show 
{
transform: translateX(0);
}
}
.doc-cover
{
width: 90%;
max-width: 700px;
margin: 20px auto;
}
.h-doc
{
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #5a00ff;
margin-bottom: 20px;
}
.txt-doc
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: gray;
margin-bottom: 20px;
}
.dark .txt-doc
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: gray;
margin-bottom: 20px;
color:white;
}
#mobnumber
{
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 13px;
border: none;
border-bottom: 2px solid transparent;
border-radius: 5px 5px 0 0;
box-sizing: border-box;
margin-top: 0px;
transition: border-bottom 0.3s ease;
margin-top: 15px;
}
.dark #mobnumber
{
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 13px;
border: none;
border-bottom: 2px solid transparent;
background-color: #0A0A0A;
color: #ebebeb;
border-radius: 5px 5px 0 0;
box-sizing: border-box;
margin-top: 0px;
transition: border-bottom 0.3s ease;
margin-top: 15px;
}
#mobnumber:focus
{
outline: none; 
border-bottom: 2px solid #5a00ff; 
}
.wvisibility-toggle 
{
display: flex;
gap: 10px; 
margin-top: 15px;
}
.wtoggle-option 
{
font-family: 'Poppins', sans-serif;
font-size: 13px;
padding: 10px 15px;
border: 1px solid #e8e8e8;
border-radius: 5px;
cursor: pointer;
text-align: center;
transition: background-color 0.2s ease, color 0.2s ease;
}
.dark .wtoggle-option
{
background-color: #e8e8e8;
color: black;
}
.wtoggle-option:hover 
{
background-color: #f0f0f0; 
}
.wtoggle-option.selected 
{
background-color: #25D366;
color: black;
border-color: #25D366;
}
.post-mobnumber
{
color: #5a00ff;
font-family: 'Poppins', sans-serif;
font-size: 12px;
}
.post-whatsapp
{
color: #25D366;
font-family: 'Poppins', sans-serif;
font-size: 12px;
}
.profile-carousel-container 
{
display: flex;
align-items: center;
overflow: hidden;
width: 730px;
max-width: 90%;
position: relative;
margin: 0 auto;
padding: 10px;
}
.profile-carousel 
{
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
width: 730px;
max-width: 100%;
white-space: nowrap;
margin-top: 17.5px;
margin-bottom: -25px;
}
.profile-item 
{
flex: 0 0 auto;
width: 80px;
text-align: center;
margin: 0 5px;
font-size: 11px;
cursor: pointer;
font-family: 'Poppins', sans-serif;
margin-left: 15px;
}
.profile-item p a
{
color: gray;
text-decoration: none;
}
.dark .profile-item p a
{
color: white;
}
.profile-item img 
{
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
cursor: pointer;
border: 3px solid #5a00ff;
}
.carousel-btn 
{
background: transparent;
color: gray;
font-size: 16px;
border: none;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.dark .carousel-btn 
{
color: white;
}
.left 
{
left: 1px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px; 
}
.right 
{
right: 1px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px; 
}
.post-detail
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
margin-top: 5px;
margin-bottom: 5px;
}
#postDetailLink
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-decoration: underline;
margin-bottom: -10px;
color: white;
}
#postDescription
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: white;
}
#modalpost-cover
{
width: 210px;
box-shadow: 0 4px 80px rgba(0, 0, 0, 0.3);
background: transparent;
max-width: 90%;
margin: 0 auto;
margin-top: 80px;
padding: 50px;
border-radius: 20px;
}
#extraDetails
{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: white;
}
.modal-profile-img 
{
width: 50px;
height: 50px;
border-radius: 50%;
display: block;
margin: 0 auto 10px auto;
border: 3px solid #5a00ff;
}