/* Existing styles */
.content{font-size:110%}
.new{color:red;font-weight:700}
.iconuser{width:16px!important;height:16px!important;margin:0 1px 0 0 !important;padding:0!important;border:0!important;vertical-align:text-bottom!important;image-rendering:-webkit-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated}
body{margin:0 auto;padding:0;font-family:Arial,Verdana,Sans-Serif;font-size:.8em;background:#E7E7E7}
.motto{color:#000;font-size:10pt}
a{text-decoration:none;color:#B60400}
.date{float:right;background-color:#fff;padding:2px;border-radius:5px;border:1px solid #ccc}
a:hover{color:gray}
.devcredit{font-weight:700;font-size:9pt}
.recent2{overflow-wrap:break-word}
a.recent:link,a.recent:visited{text-decoration:none;color:#286EA0}
a.recent:active,a.recent:hover{text-decoration:underline;color:#286EA0}
h3{font-size:1.3em;margin:0 0 5px;padding:2px 0 0;border-bottom:2px solid #eee}
blue{color:#286ea0}
#bg{width:760px;margin:0 auto;height:580px;padding:6px 10px 0;background:url(/static/bg.gif) no-repeat}
#sadrzaj{padding:9px 4px 0 2px;color:#303030;width:736px}
#zaglavlje{clear:both;text-align:right;padding:20px 15px 0 0;margin:0 0 3px;height:40px;border-bottom:2px solid #eee;background:#FFF url(/static/fade.gif) repeat-x;color:gray}
#title{float:left;font-size:14pt;font-weight:700;padding:0 0 0 10px}
#navigacija{clear:left;float:left;width:150px;margin:0 0 10px;padding:0;font-size:.9em}
#navigacija ul{list-style:none;width:150px;margin:0 0 3px;padding:0;font-size:1.1em;border-right:2px solid #ccc}
#navigacija li{margin-bottom:4px;padding:0 5px 0 10px}
#navigacija li a{font-size:9pt;font-weight:700;text-align:right;height:20px;text-decoration:none;color:gray;display:block;padding:6px 10px 0;background:#fff;border-bottom:1px dotted #ccc}
#navigacija li a:hover{color:#286ea0}
.lijevo{margin:9px 0 10px;padding:3px 10px 5px;width:130px;color:#6B6B6B;line-height:1.6em}
.lijevo p{margin:0}
#infobox{border:1px solid #ccc;background:#f4f4f4;padding:3px;margin-top:5px}
.avatar{border:1px solid #303030}
.desna_rubrika{float:right;width:273px;margin:0 0 10px;padding:5px 13px 20px 10px;border-left:1px solid #DDD;color:#5D5D5D;line-height:1.5em}
.desna_rubrika p{margin:0;font-size:90%}
.desna_rubrika a{display:block;padding-bottom:4px;margin-bottom:2px;border-bottom:1px dotted #ccc}
#pic{margin:0 0 5px 155px;padding:0 10px 5px 6px;line-height:1.4em;background:#FFF;background:linear-gradient(90deg,#ffff 0%,#ffff 28%,#eeef 93%,#eeef 99%,#eeef 100%,#eeef 100%);height:146px}
#pic2{background:url(/static/bg.gif) repeat-x}
#pic h2{margin:0;padding:15px 0 2px 5px;font-size:12pt;color:#3A6794}
#pic p{margin:0;padding:0 0 0 5px;color:#5488BC;width:260px}
.lijeva_rubrika{margin:0 20px 20px 150px;padding:5px 10px;line-height:1.6em;text-align:left;color:#5D5D5D;border-left:2px solid #eee}
.lijeva_rubrika a,#lijeva_rubrika a:visited{text-decoration:underline}
.lijeva_rubrika p{padding:0;margin:0}
#downbox{margin:15px 10px;border:1px solid #819CD7;background:#CDE1F9}
#downbox p{padding:10px;margin:0}
.commentheader{color:gray}
#footer{clear:both;background:#F6F6F6;padding:9px 10px;margin:15px 10px;border:1px solid #ccc}
.mainbody{overflow-wrap:break-word}
.postwrapper{border-bottom:1px solid #ccc;padding:5px;inline-size:100%;overflow-wrap:break-word}
#footer p{padding:10px;margin:0}
#footer a{text-decoration:underline;color:#3A6794}
#footer a:hover{color:#000}
.title43{font-size:13pt;padding-bottom:10px}
.toptop{background-color:#ca423c;width:100%;height:8px}

/* Dark mode styles */
body.dark-mode {
    background: #1a1a1a;
    color: #e0e0e0;
}
body.dark-mode .motto {
    color: #d0d0d0;
}
body.dark-mode a {
    color: #ff6666;
}
body.dark-mode a:hover {
    color: #a0a0a0;
}
body.dark-mode .date {
    background-color: #2a2a2a;
    border-color: #555;
}
body.dark-mode .recent2 a {
    color: #66b3ff;
}
body.dark-mode .recent2 a:hover {
    color: #99ccff;
}
body.dark-mode h3 {
    border-bottom-color: #444;
}
body.dark-mode #bg {
    background: none;
    background-color: #222;
}
body.dark-mode #sadrzaj {
    color: #d0d0d0;
}
body.dark-mode #zaglavlje {
    background: #2a2a2a url(/static/fade-dark.gif) repeat-x;
    color: #a0a0a0;
    border-bottom-color: #444;
}
body.dark-mode #navigacija li a {
    background: #2a2a2a;
    color: #a0a0a0;
    border-bottom-color: #555;
}
body.dark-mode #navigacija li a:hover {
    color: #66b3ff;
}
body.dark-mode #navigacija ul {
    border-right-color: #555;
}
body.dark-mode .lijevo {
    color: #b0b0b0;
}
body.dark-mode #infobox {
    background: #333;
    border-color: #555;
}
body.dark-mode .avatar {
    border-color: #666;
}
body.dark-mode .desna_rubrika {
    color: #b0b0b0;
    border-left-color: #444;
}
body.dark-mode .desna_rubrika a {
    border-bottom-color: #555;
}
body.dark-mode #pic {
    background: #2a2a2a;
    background: linear-gradient(90deg, #2a2a2a 0%, #2a2a2a 28%, #333 93%, #333 100%);
}
body.dark-mode #pic h2 {
    color: #99ccff;
}
body.dark-mode #pic p {
    color: #a0c8ff;
}
body.dark-mode .lijeva_rubrika {
    color: #b0b0b0;
    border-left-color: #444;
}
body.dark-mode #downbox {
    background: #2a4a6a;
    border-color: #4a7199;
}
body.dark-mode .commentheader {
    color: #a0a0a0;
}
body.dark-mode #footer {
    background: #2a2a2a;
    border-color: #555;
}
body.dark-mode #footer a {
    color: #99ccff;
}
body.dark-mode #footer a:hover {
    color: #fff;
}
body.dark-mode .postwrapper {
    border-bottom-color: #555;
}
body.dark-mode .toptop {
    background-color: #8b2f2a;
}

/* Toggle button styles */
#theme-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    color: #303030;
    font-family: Arial, Verdana, Sans-Serif;
}
#theme-toggle:hover {
    background: #eee;
    color: #000;
}
body.dark-mode #theme-toggle {
    background: #2a2a2a;
    border-color: #555;
    color: #e0e0e0;
}
body.dark-mode #theme-toggle:hover {
    background: #333;
    color: #fff;
}

/* Media queries for responsive design */
@media (max-width:800px) {
    #submitcommentbutton{font-size:1em;padding:8px 16px;border-radius:5px}
    .t4525,.infobox2,.infobox3{display:none}
    .recent2 a{text-decoration:none}
    body,html{overflow-x:hidden!important}
    #bg,#sadrzaj{width:100vw!important;min-width:0!important;max-width:100vw!important;padding:0!important;margin:0!important;box-sizing:border-box;height:auto!important;background:#E7E7E7!important}
    body{font-size:1em;background:#E7E7E7;margin:0;padding:0}
    body.dark-mode {background:#1a1a1a!important}
    #zaglavlje{text-align:left;padding:10px;height:auto;font-size:1em}
    #title{float:none;font-size:1.1em;padding:0;display:block}
    #navigacija{float:none;width:100%;margin:0;padding:0;font-size:1em;border-right:none}
    #navigacija ul{width:100%;font-size:1em;border-right:none}
    #navigacija li{padding:0 5px;margin-bottom:2px}
    #navigacija li a{font-size:1em;padding:8px 0;height:auto;border-bottom:1px solid #eee;background:#fff}
    body.dark-mode #navigacija li a {background:#2a2a2a;border-bottom-color:#555}
    .lijevo{width:100%;margin:0;padding:5px 0;font-size:1em}
    #infobox{margin-top:8px;padding:6px;font-size:1em}
    #pic{margin:0;padding:10px 0;width:100%;height:auto;background:#FFF;box-sizing:border-box}
    body.dark-mode #pic {background:#2a2a2a}
    #pic h2,#pic p{width:100%;padding:0 5px;font-size:1em}
    .desna_rubrika,.lijeva_rubrika{float:none;width:100%;margin:0;padding:10px 0;border-left:none;font-size:1em;box-sizing:border-box}
    .mainbody{width:100%;padding:0;margin:0;font-size:1em}
    #footer{width:100%;margin:10px 0;padding:10px 0;font-size:1em;box-sizing:border-box}
    #downbox{width:100%;margin:10px 0;padding:10px 0;font-size:1em;box-sizing:border-box}
    img,iframe{max-width:100%;height:auto}
    textarea{width:100%!important;box-sizing:border-box}
    .postwrapper{padding:8px 0;font-size:1em}
    body.dark-mode .postwrapper {background:#2a2a2a;border-color:#555}
    h3{font-size:1.1em;padding:2px 0}
    .title43{font-size:1.1em;padding-bottom:6px}
    .toptop{height:6px}
    .avatar{display:none}
    .date{float:none;background-color:#E7E7E7;padding:0;border-radius:0;border:none}
    body.dark-mode .date {background-color:#1a1a1a}
    .requrl{display:none}
    .content{padding:9px}
    .postwrapper{border:1px solid #ccc;inline-size:100%;padding:9px;background-color:#fff;border-radius:8px}
    ol{padding-left:0}
    #poweredby,#downbox,.usernamepic,.motto{display:none}
    #theme-toggle {position:static;margin:10px auto;display:block;width:fit-content}
}


/* Dark mode support for embedded images */
body.dark-mode .embedded-image img {
    border: 1px solid #444;
}

/* Responsive images in mobile view */
@media (max-width: 768px) {
    .embedded-image img {
        margin: 10px 0;
        border-radius: 3px;
    }
}
progress {
    background-color: #cc7a76;
  accent-color: #3bc96a
}
progress::-moz-progress-bar { background: #3bc96a; }
progress::-webkit-progress-value { background: #3bc96a; }