/**
 * Kelare
 * ---------------------------------------------------------------------------
 * Copyright, Akretio SPRL.  All Rights Reserved.
 *
 * This file is part of the Kelare project and can not be distributed or
 * used in any application without prior consent of Akretio SPRL.
 * Contact us for any information or authorisation.
 */


.commentheader
{
  margin-bottom: 5px;
}

.commentheaderimages
{
  width: 70px;
  float: right;
  text-align: right;
  white-space: nowrap;
  margin-top: -5px;
}

.newsdatecurrent
{
  color: #F0585F;
}

.newstext
{
  overflow: auto;
  text-align: justify;
}

.newssource
{
  float: right;
}

.commentmessageedited
{
  font-size: 10px;
}

.newslink img
{
  vertical-align: middle;
  margin-right: 5px;
}

.newslinks
{
  margin-left: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.newssimilar
{
  margin-left: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.newsdatetitle
{
  font-weight: bold;
  margin-top: 5px;
}

.newstitle
{
  margin-left: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.newscommentnonew
{
  color: #aaa5a4;
}

.newscommentnew
{
  color: #eb5239;
}

.searchtopform
{
  text-align: center;
}

.searchtable
{
  width: 100%;
  text-align: center;
}

.newssearchtitle
{
  text-align: left;
}

.newsnextlink
{
  float: right;
}

.newscommentspages
{
  float: right;
}

.newscommentfooter
{
  margin-top: 5px;
  border-top: 1px solid #C0C0C0;
  font-size: 10px;
  font-weight: bold;
  clear: both;
}

.newsrsstable
{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}

.newsrsstable th
{
  width: 60%;
  text-align: left;
}

.newscommentpages
{
  display: inline;
  font-size: 10px;
  font-weight: bold;
}

.news img
{
  margin: 5px 5px 5px 5px;
}

.newscategory
{
  float: left;
  width: 100px;
  height: 100px;
  overflow: hidden;
  text-align: center;
}

.newscategory img
{
  max-width: 80px;
  max-height: 80px;
  _width: 80px;
}

.newstitlecategory
{
  float: left;
  width: 65px;
  height: 14px;
  text-align: center;
  text-transform: uppercase;
  margin-right: 10px;
}

.newsshareutils img
{
  margin-top: -5px;
}

.newsshareutils
{
  margin-bottom: 15px ! important;
  font-weight: bold;
}

.newssenderror
{
  margin-top: 0px;
  margin-bottom: 10px;
  text-align: center;
}

.newssenderror img
{
  vertical-align: top;
}/**
 * Kelare
 * ---------------------------------------------------------------------------
 * Copyright, Akretio SPRL.  All Rights Reserved.
 *
 * This file is part of the Kelare project and can not be distributed or
 * used in any application without prior consent of Akretio SPRL.
 * Contact us for any information or authorisation.
 */

/**************************************************************
 * Data Combo
 **************************************************************/

.XDataCombo img
{
  cursor: pointer;
  margin-left: 5px;
}

.datacomboframe
{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: white;
  font-size: 10px;
  text-align: center;
}

.datacombo
{
  border: 1px solid #555555;
  background-color: white;
  visibility: hidden;
  position: absolute;
  width: 350px;
  height: 200px;
  font-size: 12px;
  top: 0;
  left: 0;
}

.datacombolarge
{
  width: 450px;
  height: 400px;
}

/**************************************************************
 * Users
 **************************************************************/

.XUsersCombo img
{
  cursor: pointer;
}

.userscomboframe
{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #F0F0F0;
  font-size: 10px;
  text-align: center;
}

.userscombo
{
  border: 1px solid black;
  background-color: #F0F0F0;
  visibility: hidden;
  position: absolute;
  width: 300px;
  height: 200px;
  font-size: 12px;
  top: 0;
  left: 0;
}

.useractions
{
  margin-top: 10px;
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
}

.usersfriend
{
  line-height: 125%;
  border: 1px solid #CCCCCC;
  margin-bottom: 10px;
  padding: 5px 5px 5px 5px;
  overflow: auto;
}

.userfriendname
{
  display: block;
  width: 65%;
  float: left;
}

.userfriendlink1
{
  display: block;
  width: 15%;
  float: left;
}

.userfriendlink2
{
  display: block;
  width: 15%;
  float: left;
}

.userssubtitle
{
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 16px;
}


/**************************************************************
 * SlideShow
 **************************************************************/

.BBSlideShow
{
  border: 1px solid #C0C0C0;
  text-align: center;
}

.BBSlideShowTitle
{
  border-bottom: 1px solid #C0C0C0;
  text-align: left;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 2px;
  margin-left: 2px;
}

.BBSlideShow img
{
  cursor: pointer;
}

.BBSlideControl
{
}

.BBSlideShow table
{
  width: 100%;
}

.BBSlideShow td
{
  width: 33%;
}

/**************************************************************
 * Images
 **************************************************************/

.bbimgreduced
{
  max-width: 95%;
  cursor: pointer;
}

.bbimgfull
{
  max-width: 20000px;
  cursor: pointer;
}

.bbimgdiv
{
  display: block;
  overflow: auto;
  width: 100%;
  overflow-y: hidden;
}

/**************************************************************
 * Spoiler related codes
 **************************************************************/

div.bbspoiler
{
  border: 1px solid #C0C0C0;
  border-left: 5px solid black;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px 5px 5px 5px;
  background-color: #E0E0E0;
  display: normal;
}

div.bbspoiler *
{
  filter:alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 1.0;
  display: normal;
}

div.bbspoiler span
{
  filter:alpha(opacity=100);
  -moz-opacity:1.0;
  opacity: 1.0;
  display: normal;
}

div.bbspoiler img
{
  filter:alpha(opacity=100);
  -moz-opacity:1.0;
  opacity: 1.0;
  display: normal;
}

div.bbspoiler img
{
  filter:alpha(opacity=100);
  -moz-opacity:1.0;
  opacity: 1.0;
  display: normal;
}

div.bbspoiler div
{
  filter:alpha(opacity=100) ! important;
  -moz-opacity:1.0 ! important;
  opacity: 1.0 ! important;
  display: normal ! important;
}


div.bbspoilerhidden
{
  height: 25px;
  overflow: hidden;
  border-left: 5px solid red;
  opacity: 1.0;
}

.bbspoilerhidden object
{
  display: none;
}

.bbspoilerhidden embed
{
  display: none;
}

div.bbspoilertitle
{
  font-size: 9px;
  font-weight: bold;
  border-bottom: 1px solid #C0C0C0;
  margin-bottom: 20px;
}

/**************************************************************
 * Whisped related codes
 **************************************************************/

.bbwhisper
{
  border: 1px solid #C0C0C0;
  border-left: 5px solid black;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px 5px 5px 5px;
  background-color: #E0E0E0;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  opacity: 0.8;
}

.bbwhispertitle
{
  font-size: 9px;
  font-weight: bold;
  border-bottom: 1px solid #C0C0C0;
}

.bbwhispertext
{
  padding: 5px 5px 5px 5px;
}

/**************************************************************
 * Code related codes
 **************************************************************/

.bbcode
{
  font-family: Terminal, Courier New, Courier;
  font-size: 12px;
  padding: 5px 5px 5px 5px;
  white-space: pre;
  border: 1px solid #C0C0C0;
  background-color: #F0F0F0;
  overflow: auto;
}

/**************************************************************
 * Quote related codes
 **************************************************************/

div.bbquote
{
  border: 1px solid #C0C0C0;
  border-left: 5px solid black;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px 5px 5px 5px;
  background-color: #E0E0E0;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  opacity: 0.8;
}

div.bbquotehidden
{
  height: 30px;
  overflow: hidden;
  border-left: 5px solid red;
}

div.bbquotetitle
{
  font-size: 9px;
  font-weight: bold;
  border-bottom: 1px solid #C0C0C0;
}


/**************************************************************
 * Highlight related codes
 **************************************************************/

.bbcodecode
{
  font-family: courier;
  border: 1px solid #C0C0C0;
  background-color: #E0E0E0;
  margin-top: 10px;
  margin-left: 10px;
  padding: 5px 5px 5px 5px;
  border-left: 5px solid black;
  margin-right: 10px;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  opacity: 0.8;
  overflow: auto;
  width: 95%;
  white-space: pre;
}

.bbcodecodehidden
{
  height: 30px;
  overflow: hidden;
  border-left: 5px solid red;
}

div.bbcodetitle
{
  font-size: 9px;
  font-weight: bold;
  border-bottom: 1px solid #C0C0C0;
}

.bbcodestring, .bbpascalstring, .bbphpstring, .bbcssstring, .bbcppstring,
 .bbjavastring, .bbjavascriptstring, .bbperlstring, .bbvbstring, .bbpythonstring,
 .bbsqlstring, .bbcobolstring, .bbadastring, .bbfortranstring
{
  color: #00C000;
}


.bbcodreserved, .bbpascalreserved, .bbphpreserved, .bbcssreserved, .bbxmltag,
 .bbcppreserved, .bbhtmltag, .bbasmreserved, .bbasminstruction, .bbjavareserved,
 .bbjavascriptreserved, .bbperlreserved, .bbvbreserved, .bbpythonreserved,
 .bbsqlreserved, .bbcobolreserved, .bbadareserved, .bbfortranreserved
{
  color: black;
  font-weight: bold;
}

.bbcodenumber, .bbpascalnumber, .bbphpnumber, .bbcppnumber, .bbasmnumber,
  .bbjavanumber, .bbjavascriptnumber, .bbperlnumber, .bbvbnumber,
  .bbpythonnumber, .bbsqlnumber, .bbcobolnumber, .bbadanumber, .bbfortrannumber
{
  color: #263FBA;
}

.bbcodecomment, .bbpascalcomment, .bbphpcomment, .bbcsscomment, .bbxmlcomment,
 .bbcppcomment, .bbhtmlcomment, .bbasmcomment, .bbjavacomment, .bbjavascriptcomment,
 .bbperlcomment, .bbvbcomment, .bbpythoncomment, .bbsqlcomment, .bbcobolcomment,
 .bbadacomment, .bbfortrancomment
{
  color: #929088;
}

.bbcodeidentifier, .bbphpidentifier
{
  color: #4040FF;
}

/**************************************************************
 * Pascal
 **************************************************************/


/**************************************************************
 * PHP
 **************************************************************/

.bbphpvariable
{
  color: red;
}

/**************************************************************
 * XML
 **************************************************************/

.bbxmlproperty
{
  color: #F35B8A;
}

.bbxmlpropname
{
  color: navy;
}

.bbxmldata
{
  color: #929088;
}

.bbxmltext
{
  color: black;
}

/**************************************************************
 * CPP
 **************************************************************/

.bbcpppragma
{
  color: green;
}

/**************************************************************
 * HTML
 **************************************************************/

.bbhtmlproperty
{
  color: #F35B8A;
}

.bbhtmlpropname
{
  color: navy;
}

.bbhtmldata
{
  color: #929088;
}

.bbhtmltext
{
  color: black;
}

/**************************************************************
 * ASM
 **************************************************************/

.bbasmregister
{
  color: red;
}

.bbasmdirective
{
  color: navy;
}

.bbasmlabel
{
  color: blue;
}

/**************************************************************
 * JavaScript
 **************************************************************/

.bbjavascriptspecial
{
  color: magenta;
}


/**************************************************************
 * PHP
 **************************************************************/

.bbperlvariable
{
  color: red;
}

/**************************************************************
 * VB
 **************************************************************/

/**************************************************************
 * Python
 **************************************************************/

/**************************************************************
 * Cobol
 **************************************************************/

/**************************************************************
 * Fortran
 **************************************************************/


/**************************************************************
 * Editor
 **************************************************************/


.bbeditor
{
}

.bbeditor img
{
  border: 0px;
  cursor: pointer;
  margin-right: 2px;
  width: 16px;
  height: 16px;
}

.bbeditorhighlight
{
  position: absolute;
  visibility: hidden;
  width: 170px;
  top: 0;
  left: 0;
  z-index: 999 ! important;
}

.bbeditortextbutton
{
  color: #505050;
  margin-right: 2px;
  width: 80px;
  float: left;
  text-align: center;
  border: 1px solid #D0D0D0;
  cursor: pointer;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: bold;
  background-color: #F0F0F0;
}

.bbeditortextbutton:hover
{
  background-color: #D0D0D0;
  border: 1px solid #F0F0F0;
}

.bbeditorsmiley
{
  width: 70px;
  height: 70px;
  float: left;
  text-align: center;
}

.bbeditorsmiley img
{
  margin: 2px 2px 2px 2px;
}

.bbeditorsmileys
{
  border: 1px solid #D0D0D0;
  background-color: #F5F5F5;
  visibility: hidden;
  position: absolute;
  width: 320px;
  height: 220px;
  font-size: 12px;
  top: -320px;
  left: -220px;
}

.bbeditorcolorbutton
{
  width: 14px;
  height: 14px;
  font-size: 1px;
  float: left;
  cursor: pointer;
  font-size: 2px;
}

.bbeditorcolors
{
  border: 1px solid #D0D0D0;
  background-color: #F0F0F0;
  visibility: hidden;
  position: absolute;
  font-size: 12px;
  text-align: center;
  width: 145px;
  top: 0;
  left: 0;
  font-size: 2px;
  z-index: 999 ! important;
}

.bbcodesmiley
{
  float: left;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 10px;
}

.bbcodesmiley img
{
  cursor: pointer;
}


.bbcodesmileypages
{
  float: left;
  position: absolute;
  text-align: right;
  width: 280px;
  top: 500px;
  left: 280px;
}

.bbcodesmileyframe
{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #F5F5F5;
  font-size: 10px;
  text-align: center;
}

.bbeditorpreview
{
  border: 2px solid #D0D0D0;
  background-color: #F0F0F0;
  visibility: hidden;
  position: absolute;
  font-size: 12px;
  top: 0;
  left: 0;
}

.bbcodepreviewframe
{
  width: 100%;
  height: 100%;
}

.SpellerError
{
  color: red;
  font-weight: bold;
}

.bbeditorbuttonscontainer
{
  width: 550px;
  background-color: #ede9e3;
  overflow: hidden;
  padding-bottom: 2px;
  padding-top: 2px;  
}

.bbeditorbuttons
{
  margin-right: 10px;
  padding: 5px 2px 2px 2px;
  white-space: nowrap;
  border: 1px solid #cac3ac;
  border-left: 3px solid #b7ae91;
  background-color: #e9e4db;
  float: left;
  margin-top: 2px;
  margin-bottom: 2px;
}

.bbeditorbuttonssimple
{
  white-space: nowrap;
  display: inline;
  padding: 2px 2px 2px 2px;
}

.bbeditorfontsize
{
  position: absolute;
  visibility: hidden;
  width: 90px;
  top: 0;
  left: 0;
  z-index: 999 ! important;
}


.bbeditorrepository
{
  border: 1px solid black;
  background-color: #F0F0F0;
  visibility: hidden;
  position: absolute;
  width: 350px;
  height: 200px;
  font-size: 12px;
  top: -320px;
  left: -220px;
}

.bbcoderepositoryframe
{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #F0F0F0;
  font-size: 10px;
  text-align: center;
}


.bbeditorwiki
{
  border: 1px solid black;
  background-color: #F0F0F0;
  visibility: hidden;
  position: absolute;
  width: 350px;
  height: 200px;
  font-size: 12px;
  top: -320px;
  left: -220px;
}

.bbcodewikiframe
{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #F0F0F0;
  font-size: 10px;
  text-align: center;
}

/**************************************************************
 * Fixed
 **************************************************************/

.bbcodefixed
{
  font-family: Courier;
}

/**************************************************************
 * Anon
 **************************************************************/

.bbcodeanonurl
{
  border-bottom: 1px dotted black ! important;
  cursor: help;
}

/**************************************************************
 * Google Map
 **************************************************************/

.bbgooglemap
{
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -400px;
  width: 800px;
  height: 500px;
  border: 1px solid #C0C0C0;
  opacity: 1;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  z-index: 1000;
}

.bbpreview
{
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -400px;
  width: 800px;
  height: 500px;
  border: 1px solid #C0C0C0;
  opacity: 1;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  z-index: 1000;
}

.bbiframefull
{
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -400px;
  width: 800px;
  height: 560px;
  border-left: 5px solid white;
  border-top: 5px solid white;
  border-right: 5px solid #C0C0C0;
  border-bottom: 5px solid #C0C0C0;
  opacity: 1;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  z-index: 2000;
}


.bbdocumentoverlay
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #C0C0C0;
  opacity: .5;
  filter: alpha(opacity=50);
  -moz-opacity: .5;
  z-index: 999;
}

/**************************************************************
 * Users
 **************************************************************/

.usersprofile
{
  border: 1px solid #E0E0E0;
  background-color: #F0F0F0;
  text-align: center;
  overflow: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  padding-left: 50px;
  min-height: 100px;
}

.usersprofile a
{
  display: block;
  width: 50px;
  height: 60px;
  float: left;
  text-align: center;
  margin-left: 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.usersprofile img
{
  display: block;
}

/**************************************************************
 * IFrame
 **************************************************************/

.bbiframe
{
  height: 100%;
  width: 100%;
}

.bbiframecontainer
{
  position: absolute;
  margin-left: -400px;
  left: 50%;
  width: 800px;
  height: 600px;
  border: 1px solid #C0C0C0;
  opacity: 1;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  z-index: 99999;

}

/**************************************************************
 * Captcha
 **************************************************************/

.XCaptcha
{
  margin-top: 5px;
  margin-bottom: 5px;
}

.XCaptcha img
{
  vertical-align: top;
  margin-right: 10px;
}

/**************************************************************
 * Wizard
 **************************************************************/

.XWizardControl
{
  margin-top: 20px;
}

.XWizardControl .XWizardNext
{
  float: right;
}

.XWizardError
{
  background-color: #FF9090;
}
/**
 * Kelare
 * ---------------------------------------------------------------------------
 * Copyright, Akretio SPRL.  All Rights Reserved.
 *
 * This file is part of the Kelare project and can not be distributed or
 * used in any application without prior consent of Akretio SPRL.
 * Contact us for any information or authorisation.
 */


/**************************************************************
 * Menu
 **************************************************************/


.xmenuboxlev0
{
}

.xmenuboxlev0 a
{
  display: block;
  color: #000000;
  font-weight: bold;
  font-size: 12px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  padding: 0px 2px 0px 2px;
  border: 1px none black;
  background: url("/images/arrow01.png") no-repeat;
  padding-left: 11px;
}

.xmenuboxlev0 a:hover
{
  background-color: #8080FF;
  border: 0px solid black;
  color: white;
}

.xmenuboxlev1
{
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 10px;
  text-transform: none;
}

.xmenuboxlev1 a
{
  display: block;
  background: url("/images/arrow02.png") no-repeat;
}

.xmenuboxlev1 a:hover
{
  background-color: #FF8080;
  color: white;
}

.xmenuboxlev2
{
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 10px;
  text-transform: none;
}

.xmenuboxlev2 a
{
  display: block;
  background: url("/images/arrow03.png") no-repeat;
}

.xmenuboxlev2 a:hover
{
  background-color: #84FF84;
  color: black;
}

.xmenuboxlev3
{
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 10px;
  text-transform: none;
}

.xmenuboxlev3 a
{
  display: block;
  background: url("/images/arrow04.png") no-repeat;
}

.xmenuboxlev3 a:hover
{
  background-color: #FBF94B;
  color: black;
}

a.xmenucurrent
{
  color: #FF5555;
}

a.xmenucurrent:hover
{
  background-color: #808080;
  color: white;
}


/**************************************************************
 * ScrollPanel
 **************************************************************/


div.xscrollpaneltitle
{
  border: 1px solid black;
  background-color: black;
  color: white;
  font-weight: bold;
}

div.xscrollpaneltitlehidden
{
  border: 1px solid black;
  background-color: #FF0000;
  color: white;
  font-weight: bold;
}

img.xscrollbutton
{
  float: right;
  cursor: pointer;
}

div.xscrollpaneldata
{
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #C0C0C0;
}

div.xscrollpaneldatahidden
{
  display: none;
}






/**************************************************************
 * Month
 **************************************************************/


.xmonth td
{
  width: 100px;
  height: 50px;
  border: 1px solid #C0C0C0;
  vertical-align: top;
  text-align: left;
  font-size: 10px;
}

.xmonth th
{
  font-size: 16px;
  text-align: center;
  background-color: #FFDEBB;
  border: 1px solid black;
}

td.xmonthday6
{
  background-color: #E0E0E0;
}

td.xmonthday7
{
  background-color: #E0E0E0;
}

td.xmonthtoday
{
  border: 1px solid red;
}

td.xmonthtitle
{
  border: 0px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  height: 20px;
  width: 700px;
  background-color: #E5E5E5;
}

td.xmonthdayempty
{
  background-color: #F0F0F0;
}

td.xmonthprev
{
  border: 0px;
  height: 30px;
  width: 400px;
}

td.xmonthnext
{
  border: 0px;
  text-align: right;
  height: 30px;
  width: 300px;
}



/**************************************************************
 * Pages
 **************************************************************/


div.XPages
{
  text-align: right;
}



/**************************************************************
 * Tables
 **************************************************************/

.xtableover
{
  background-color: #E0E0E0 ! important;
}

.xtableout
{

}

.xtabledown
{
  background-color: #C0C0C0 ! important;
}


/**************************************************************
 * SpinEdit
 **************************************************************/


.xspinedit input
{
  border: 0px;
}

.xspinedit
{
  border: 1px solid ButtonShadow;
  border-collapse: collapse ! important;
  margin-left: 1px;
}

.xspinedit td
{
  padding: 0px ! important;
  margin: 0px ! important;
  border: 0px ! important;
  border-collapse: collapse ! important;
  border-spacing: 0px;
  font-size: 1px;
}

.xspinedit tr
{
  padding: 0px ! important;
  margin: 0px ! important;
  border: 0px ! important;
  border-collapse: collapse ! important;
  border-spacing: 0px;
}

.xspinedit table
{
  padding: 0px ! important;
  margin: 0px ! important;
  border: 0px ! important;
  border-collapse: collapse ! important;
  border-spacing: 0px;
}

.xspinedit img
{
  border: 0px;
  cursor: pointer;
}


/**************************************************************
 * DateTime
 **************************************************************/

.xdatetime {
	background-color: #fff;
	vertical-align: middle;
	padding: 0px;
	margin: 0px;
	cursor: pointer;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px #ccc solid!important;
	}
	
	img.xdatetime { background: transparent; border: none!important; }

.xdatetime table {
	padding: 0px;
	border-spacing: 0px;
	margin: 0px;
	width: 320px!important;
	height: 240px!important;
	overflow: hidden!important;
	-webkit-box-shadow: 0 0 30px #ccc;
	-moz-box-shadow: 0 0 30px #ccc;
	box-shadow: 0 0 30px #ccc;
	}

.xdatetime th
{
  padding: 1px;
  margin: 0px;
  border-collapse: collapse ! important;
  border-spacing: 0px;
  font-size: 12px;
  background-color: #72abfc;
  color: white;
  font-weight: bold;
}

	.xdatetime tr th:first-child,
	.xdatetime tr th:last-child { font-size: 22px; padding: 8px 4px; }
	
		.xdatetime tr th a { color: #fff; }
		
	.xdatetime tr:nth-child td { padding-top: 14px; }
	
	.xdatetime tr:nth-child(2) td {
		padding-top: 14px;
		font-weight: bold;
		font-size: 14px;
		color: #888;
		}

	.xdatetime tr:last-child td {
		background: #f8f8f8;
		padding-top: 14px;
		padding-bottom: 10px;
		border-top: 1px #ddd solid;
		font-weight: normal;
		color: #888;
		font-size: 13px;
		}
		
		.xdatetime tr:last-child td a {
			font-weight: bold;
			color: #000;
			text-decoration: none;
			}

.xdatetime td
{
  padding: 8px;
  margin: 0px;
  border-collapse: collapse ! important;
  border-spacing: 0px;
  text-align: center ! important;
  font-size: 13px;
}

.xdatetime a
{
  text-decoration: none;
  color: black;
  padding: 2px;
}

.xdatetime th a
{
  color: black;
  padding: 0px;
}

.xdatetime select {
	font-size: 14px;
	background-color: transparent;
	color: white;
	border: none;
	}
	
	.xdatetime select option { color: #888; }

.xdatetimenow
{
  background-color: #C0C0C0;
  text-align: center;
  color: white;
  font-weight: bold;
}

.xdatetimeday7 a
{
  color: #0161FF;
  font-weight: bold;
}

.xdatetimeday6 a
{
  color: #0161FF;
  font-weight: bold;
}

.xdatetimecurrent {
	color: black ! important;
	border: 1px solid #fb4743;
	background-color: #fc7370;
	padding: 6px!important;
	font-weight: bold!important;
	color: #fff!important;
	background: #0080cc;
	border: none;
	border-radius: 3px;
	}

.xdatetimetoday {
	color: #0080cc!important;
	border: #0080cc 1px solid;
	font-weight: bold;
	padding: 6px 8px!important;
	background: #f8f8f8;
	border-radius: 3px;
	}

/**************************************************************
 * Formular
 **************************************************************/

.XFormularTable
{
  width: 100%;
}

/**************************************************************
 * TabSheets
 **************************************************************/

.XTabSheets
{
}

.XTabSheet
{
}

.XTabSheetsTitles a
{
  font-weight: bold;
  font-size: 18px;
  line-height: 35px;
  padding: 5px 10px 10px 5px;
  border-top: 1px solid #00a4ec;
  border-left: 1px solid #00a4ec;
  border-right: 1px solid #00a4ec;
  margin-right: 5px;
  background-color: #f4f8f8;
  -moz-border-radius: 5px;
}

.XTabSheetsTitles a:hover
{
  background-color: #00a4ec;
  color: white;
}

.XTabSheetsTitles
{
  margin-bottom: 10px;
  margin-top: 10px;
  border-bottom: 1px solid #00a4ec;
  overflow: hidden;
  padding-left: 10px;
}

.XTabSheetTitleActive
{
  background-color: #d7e5e5 ! important;
}

/**************************************************************
 * CheckLists
 **************************************************************/

.XCheckListbox
{
  border: 1px solid #C0C0C0;
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 1.2em;
  background-color: white;
}

.XCheckListbox input
{
  vertical-align: middle;
}

.XCheckListbox label
{
  display: block;
  width: 100%;
}

.XCheckListboxselected
{
  background-color: #F0F0F0;
}
.user_avatar
{
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

.user_avatar img {
  background-color:#FFFFFF;
  border:3px solid #DDDDDD;
  margin-bottom:5px;
  padding:5px;
}

.user_label
{
  display: block;
  font: bold 13px arial;
  padding: 0 6px 0 0;
}

.user_data
{
  display: block;
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 10px;
}

.useractions a
{
  background-color: #006fa0;
  border: 1px solid #e3f7ff;
  padding: 5px 5px 5px 5px;
  color: white;
}

.useractions 
{
  padding-bottom: 10px;
}

.users_friend
{
  float: left;
  width: 140px;
  height: 170px;
  text-align: center;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
}

/**************************************************************
 * Blogs infos
 **************************************************************/


 .blogstitlecategory
{
  float: left;
  width: 65px;
  height: 14px;
  text-align: center;
  text-transform: uppercase;
  margin-right: 10px;
}

#user_blogs .leftpaneltitle
{
  margin-bottom: 10px;
}

/**************************************************************
 * Message
 **************************************************************/

.user_message
{
  margin-bottom: 5px;
  margin-top: 5px;
  clear: both;
}

.user_message_avatar
{
  float: left;
  text-align: center;
  font-size: 10px;
}

.user_message_avatar img {
  background-color:#FFFFFF;
  border:3px solid #DDDDDD;
  padding:5px;
  clear: both;
  max-width: 48px;
  max-height: 48px;
}

.user_message_content
{
  background:none repeat scroll 0 0 #E7F4FF;
  margin-bottom:15px;
  margin-left: 80px;
  padding-bottom:0;
  padding-left:5px;
  padding-top:0;
  padding-right: 5px;
  width: 520px;
}

.user_message_title
{
  background:url("/images/css_usermsgtop.gif") no-repeat scroll left top #E7F4FF;
  color:#555555;
  width: 510px;
  font-weight:bold;
  letter-spacing:-0.04em;
  margin:0 0 5px -5px;
  overflow:hidden;
  padding:5px 10px 3px;
  position:relative;
}

.user_message_footer
{
background:url("./images/css_usermsgbottom.gif") no-repeat scroll left top #FFFFFF;
border:0 none;
color:#555555;
font-size:10px;
font-style:italic;
margin-left:-5px;
padding-left:10px;
padding-top:18px;
  width: 530px;
}

#user_blogs
{
  background: none;

}
/**
 * Kelare
 * ---------------------------------------------------------------------------
 * Copyright, Akretio SPRL.  All Rights Reserved.
 *
 * This file is part of the Kelare project and can not be distributed or
 * used in any application without prior consent of Akretio SPRL.
 * Contact us for any information or authorisation.
 */

.babesrandom
{
  text-align: center;
}

.babepages
{
  text-align: right;
}

.babesserie
{
  width: 150px;
  height: 150px;
  vertical-align: middle ! important;
  text-align: center;
}

.babesserie a
{
  display: block;
  width: 150px;
  height: 150px;
  float: left;
  padding: 5px 5px 5px 5px;
  margin: 5px 5px 5px 5px;
  text-align: center;
}

.babesserie img
{
  border: 0px;
}

.babesseries
{
  overflow: hidden;
}

.babeslatests
{
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/**
 * Kelare
 * ---------------------------------------------------------------------------
 * Copyright, Akretio SPRL.  All Rights Reserved.
 *
 * This file is part of the Kelare project and can not be distributed or
 * used in any application without prior consent of Akretio SPRL.
 * Contact us for any information or authorisation.
 */

/* ============================================================
   CSS Custom Properties
   ============================================================ */

:root {
  /* Brand Colors */
  --color-primary: #174caa;
  --color-primary-dark: #0e3578;
  --color-primary-light: #1e5cc8;
  --color-accent: #e9922b;
  --color-accent-dark: #d17a1a;
  --color-accent-light: #f5a94d;
  --color-sky: #6fb6ee;
  --color-sky-light: #9ACCF6;
  --color-link: #146AAC;
  --color-navy: #06142d;

  /* Neutrals */
  --color-white: #ffffff;
  --color-gray-50: #f8f9fb;
  --color-gray-100: #f0f2f5;
  --color-gray-200: #e2e6eb;
  --color-gray-300: #c8cfd8;
  --color-gray-400: #9ca5b0;
  --color-gray-500: #6b7685;
  --color-gray-600: #4a5568;
  --color-gray-700: #333d4d;
  --color-gray-800: #1e2736;
  --color-gray-900: #0f1722;

  /* Semantic */
  --color-success: #22c55e;
  --color-danger: #e30130;
  --color-warning: #fdb73d;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);
  --shadow-glow: 0 0 20px rgba(23,76,170,0.15);
  --shadow-accent: 0 4px 16px rgba(233,146,43,0.25);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-width: 1200px;
  --header-height: 56px;
}

/* ============================================================
   Base Reset & Defaults
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-gray-100);
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-gray-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input {
  font-family: var(--font-sans);
  font-size: 14px;
}

textarea {
  display: block;
  width: 95%;
  text-align: left !important;
  font-family: var(--font-sans);
}

table {
  font-size: 14px;
}

img {
  border: 0;
  max-width: 100%;
}

abbr {
  border-bottom: 0;
}

.abbr {
  color: var(--color-gray-400);
}

a {
  text-decoration: none;
  color: var(--color-link);
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

.inputreadonly {
  background-color: var(--color-gray-200);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-600);
}

.main {
  margin: 15px 2px 10px 10px;
  font-size: 14px;
  right: 260px;
  left: 10px;
  position: absolute;
}

.mainex {
  margin: 15px 2px 10px 10px;
  font-size: 14px;
  right: 30px;
  left: 10px;
  position: absolute;
}

.leftpanel {
  padding: 5px;
  border: 0;
  background-color: var(--color-white);
  margin-bottom: 10px;
  width: 100%;
  margin-right: 5px;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.leftpanelcontent {
  padding: 5px;
}

#topbanner {
  background-color: var(--color-white);
  height: 100px;
  padding-left: 350px;
}

#topbannerimg {
  position: absolute;
  top: -23px;
  left: 118px;
  width: 995px;
}

.toplink {
  width: 330px;
  height: 78px;
  position: absolute;
  top: 0;
  left: 0;
}

#menu div {
}

#menu {
  background-color: transparent;
  border-bottom: 0;
  height: 22px;
  padding-top: 2px;
  padding-left: 20px;
}

#menu a {
  text-decoration: none;
  padding-left: 15px;
  padding-right: 15px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

#menu a:hover {
  color: var(--color-sky-light);
}

#menu img {
  margin-left: -25px;
}

.xmenuboxlev1 a {
  margin-left: 0 !important;
}

.rightpanels {
  width: 250px;
  float: right;
}

.rightpanel {
  margin: 15px 0 0 10px;
  padding: 5px;
  border: 0;
  background-color: var(--color-white);
  width: 220px;
  font-size: 12px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.rightpaneltitle {
  border-bottom: 1px solid var(--color-gray-200);
  font-size: 12px;
  font-weight: 700;
}

.rightpanel form {
  border-top: 1px solid var(--color-gray-200);
}

.rightpanel input {
  font-size: 12px;
}

.shoutbox {
  font-size: 12px;
}

form {
  margin-bottom: 0;
  margin-top: 0;
}

#outro {
  font-size: 9px;
  text-align: center;
  margin: -10px 0 5px 0;
  font-weight: bold;
}

#outro a {
  color: white;
}

#outro a:hover {
  color: var(--color-accent);
}

.leftpaneltitle {
  font-weight: 700;
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: 5px;
}

.leftpaneltitleimg {
  float: right;
  margin-left: 5px;
}

.leftpanelfooter {
  font-weight: bold;
  border-top: 1px solid var(--color-gray-200);
  margin-top: 5px;
  clear: both;
}

.userstable {
  width: 100%;
}

.userstable td {
  width: 33%;
  text-align: center;
}

.xtableover {
  background-color: #d7ecfd;
}

.xtableover a:hover {
  color: var(--color-gray-900);
}

.xtabledown {
  background-color: #bfe1fb;
}

.xtabledown a:hover {
  color: var(--color-gray-900);
}

.XRowPages {
  text-align: right;
}

#shoutbox img {
  vertical-align: middle;
}

#shoutbox td {
  white-space: nowrap;
  text-align: left;
}

#shoutbox div {
  display: inline;
}

iframe {
  margin: 0;
  padding: 0;
}

.skyscraper {
  margin-top: 15px;
  margin-left: 100px;
}

.mainsky {
  margin: 15px 2px 10px 10px;
  font-size: 14px;
  right: 190px;
  left: 10px;
  position: absolute;
}

/* CSS Menu */

.xmenuboxlev1 {
  margin-top: 10px;
  position: absolute;
  border: 2px solid white !important;
  visibility: hidden;
  background-color: white;
}

.xmenuboxlev1 a {
  position: relative;
  background-color: white !important;
  display: block !important;
  padding: 5px 10px 5px 15px !important;
}

.rightpanelsky {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.leftpanel50left {
  width: 300px !important;
  float: left;
}

.leftpanel50right {
  width: 300px;
  float: left;
}

.rightpanelsky iframe {
  margin: 0;
  padding: 0;
  border: 0;
}

#shoutbox_text {
  width: 200px !important;
}

#shoutbox_text_ex {
  width: 500px !important;
}

/**************************************************************
 * Menu
 **************************************************************/

.xmenuboxlev0 a {
  display: inline;
}

#quickreplyform {
  text-align: center;
}

/**
 * Kelare - Informaticien.be Theme 2026
 * ---------------------------------------------------------------------------
 * Copyright, Akretio SPRL.  All Rights Reserved.
 *
 * This file is part of the Kelare project and can not be distributed or
 * used in any application without prior consent of Akretio SPRL.
 * Contact us for any information or authorisation.
 *
 * Redesign 2026 - Modern, dynamic news portal
 */

/* ============================================================
   Animations
   ============================================================ */

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/**************************************************************
 * Main
 **************************************************************/

body {
  font-family: var(--font-sans);
  text-align: center;
  background: none;
  background-color: #eef1f6;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(23,76,170,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 0%, rgba(233,146,43,0.03) 0%, transparent 60%);
  padding-top: 75px;
}

td,th,tr,div {
  text-align: left;
}

.ie html, body {
  border: none;
}

/*
  Top/Main items
*/

#toplive {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-primary-dark) 30%, var(--color-primary) 70%, var(--color-primary-light) 100%) !important;
  color: white;
  height: var(--header-height);
  z-index: 3000;
  box-shadow: 0 4px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow var(--transition-base);
  border-bottom: 2px solid rgba(255,255,255,0.1);
}

#toplive:hover {
  box-shadow: 0 6px 40px rgba(0,0,0,0.3);
}

/* Header bar inner layout: ticker left, controls right */
#toplivecontent {
  width: var(--container-width);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

/* Hamburger button - hidden on desktop */
#hamburger {
  display: none;
}

/* Mobile menu extras - hidden on desktop */
#mobilemenuextra {
  display: none;
}

/* Logo + Menu bar */
#topstuffs {
  width: var(--container-width);
  margin: auto;
  overflow: visible;
  margin-bottom: var(--space-sm);
  position: relative;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-gray-200);
  padding-bottom: var(--space-sm);
}

#toplogo {
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

#toplogo img {
  height: auto;
  width: auto;
}

#toplogo:hover {
  transform: scale(1.05);
}

/* Search bar (now in header bar) */
.topsearch {
  margin-left: var(--space-sm);
}

.topsearch form {
  display: flex;
  align-items: center;
}

.topsearchinput {
  width: 130px;
  height: 28px;
  border: 1px solid rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.12);
  color: white;
  border-radius: var(--radius-full) 0 0 var(--radius-full) !important;
  padding: 0 var(--space-sm) !important;
  font-size: 11px;
  transition: all var(--transition-fast);
  line-height: 28px !important;
}

.topsearchinput::placeholder {
  color: rgba(255,255,255,0.5);
}

.topsearchinput:focus {
  background: rgba(255,255,255,0.25);
  border-color: var(--color-accent) !important;
  width: 170px;
  color: white;
}

.topsearchbtn {
  height: 28px;
  border-radius: 0 var(--radius-full) var(--radius-full) 0 !important;
  background: var(--color-accent) !important;
  color: white;
  border: none !important;
  padding: 0 10px !important;
  cursor: pointer;
  font-size: 11px;
  line-height: 28px !important;
}

.topsearchbtn:hover {
  background: var(--color-accent-dark) !important;
}

#newsbannercontainer {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  line-height: var(--header-height);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  position: relative;
  letter-spacing: 0.01em;
  padding-left: 60px;
  mask-image: linear-gradient(to right, black 75%, transparent 98%);
  -webkit-mask-image: linear-gradient(to right, black 75%, transparent 98%);
  margin-left: var(--space-sm);
}

/* "ACTU" badge */
#newsbannercontainer::before {
  content: 'ACTU';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  line-height: 1;
  animation: pulse 2s ease-in-out infinite;
  z-index: 1;
}

/* fade-out removed per request */

#newsbannercontainer a {
  color: rgba(255,255,255,0.9) !important;
  transition: color var(--transition-fast);
}

#newsbannercontainer a:hover {
  color: var(--color-accent) !important;
}

/* Right side of header: social + search + connection */
.stayconnected {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.stayconnected img {
  vertical-align: middle;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.stayconnected img:hover {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transform: scale(1.15);
}

#newsbannertitle {
  margin-right: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

#newsbanner {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  display: none;
}

#topbanner { height: auto !important; }
#topbannerimg {
  background: white;
  margin: 0;
  position: relative;
  top: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: auto;
}

#topbannerad {
  width: var(--container-width);
  margin: auto;
  margin-top: 80px;
  border: 1px solid var(--color-gray-200);
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/*****************
Main blocks
******************/

.leftpaneltitle {
  position: relative;
  border: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-sky) 100%);
  background-size: 200% 100%;
  color: white;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  overflow: hidden;
  line-height: 54px;
  padding: 0 var(--space-md) 0 var(--space-lg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.leftpaneltitle a {
  color: white;
  transition: color var(--transition-fast);
}

.rightpanels {
  width: 400px;
}

.rightpaneltitle {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
  padding: 0 0 0 var(--space-md);
  position: relative;
  margin-bottom: 0;
  line-height: 50px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: white;
  width: 100%;
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.rightpanelred .rightpaneltitle {
  background: linear-gradient(135deg, rgb(244, 164, 192), rgb(255, 130, 170));
}

.rightpaneltitle a {
  color: white;
  transition: color var(--transition-fast);
}

.rightpanel {
  line-height: 1.5em;
  width: 398px;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: var(--color-white);
  padding-bottom: 10px;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  overflow: hidden;
  border-top: 3px solid var(--color-accent);
}

.rightpanel:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.rightpanelcontent {
  padding: 12px var(--space-md);
  line-height: 1.7em;
  font-size: 13px;
}

.rightpanelcontent a {
  color: var(--color-gray-600);
  transition: color var(--transition-fast);
}

.rightpanelcontent a:hover {
  color: var(--color-accent);
}


.main {
  margin-top: 0 !important;
  left: 0;
}


.bodymain {
  max-width: var(--container-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 5px;
  border: 0;
  overflow: hidden;
  background: none;
  padding-left: 0;
  box-sizing: border-box;
}


#main {
  width: 775px;
  position: relative;
  margin-left: 0;
  float: left;
  overflow: hidden;
}

td {
  font-size: 13px;
}

div {
  font-size: 14px;
}

.XPages {
  font-size: 13px !important;
}

div.XPages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  max-width: 600px;
  margin: var(--space-lg) auto;
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-gray-50);
  box-shadow: none;
}

.mainex {
  max-width: var(--container-width) !important;
  width: 100% !important;
  left: 0;
  right: 0;
  margin: 0;
  box-sizing: border-box;
}

.mainex .leftpanel {
  width: 100%;
  box-sizing: border-box;
}

.leftpanelsmall {
  display: none;
}

.mainex .leftpanel {
  background: none;
}

.mainex .leftpanelnoborder {
  border: 0;
}

.mainex .leftpanelsubtitle {
  margin-top: 0;
  margin-bottom: 0;
  height: 15px;
}

#topbanner {
  position: relative;
  background: none;
  height: 184px;
  margin-bottom: 55px;
  z-index: 999;
}

#topbannerdata {
  position: absolute;
  z-index: 10;
}

.bbeditorbuttons img:hover {
}

.bbeditorbuttons {
  background-color: var(--color-gray-100);
  border: 0;
}

.messageheaderimages {
  width: 240px;
  margin-top: 10px;
  text-align: right;
  font-size: 18px;
}

a {
  text-decoration: none;
  color: var(--color-link);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

textarea {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  padding: var(--space-sm);
}

textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(23,76,170,0.1);
  outline: none;
}

select {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast);
  background: var(--color-white);
}

select:focus {
  border-color: var(--color-primary);
  outline: none;
}

input, button {
  font-family: var(--font-sans);
  font-size: 13px;
  border: 0;
  line-height: 32px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23,76,170,0.1);
}

button, input[type=submit] {
  background: linear-gradient(135deg, var(--color-sky) 0%, var(--color-primary) 100%);
  color: white;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

button:hover, input[type=submit]:hover {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

button:active, input[type=submit]:active {
  transform: translateY(0);
}


#topbanner {
  border-bottom: 0;
}

#topbanner a {
  width: 200px;
  height: 180px;
}

/* Navigation menu - right side of topstuffs */
#menu {
  padding: 0;
  background: none;
  margin-bottom: 0;
  border: 0 !important;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 2000;
  flex: 1;
  min-width: 0;
}

#menu div {
}

#menu a {
  background: none;
  padding: 10px 14px;
  margin: 0;
  font: 700 12px var(--font-sans);
  color: var(--color-gray-800);
  display: block;
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
}

/* Top-level menu link hover: subtle bg + accent underline slide-in */
#menu > .xmenuboxlev0 > a:hover {
  color: var(--color-primary);
  background: var(--color-gray-50);
}

#menu > .xmenuboxlev0 > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition-fast), left var(--transition-fast);
}

#menu > .xmenuboxlev0 > a:hover::after {
  width: 100%;
  left: 0;
}

#menu img {
  margin-left: 0;
  padding-right: 5px;
}

.xmenuboxlev0 {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* ============================================================
   Submenu Dropdown
   ============================================================ */

/* Dropdown card - single .xmenuboxlev0 contains all items as siblings */
.xmenuboxlev1 {
  position: absolute;
  top: 100%;
  right: 0;
  width: 680px;
  max-width: calc(100vw - 32px);
  background: var(--color-white);
  border: 1px solid var(--color-gray-100) !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
  padding: var(--space-sm);
  z-index: 5000;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: var(--space-xs);
  visibility: hidden !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, visibility 0s linear 150ms;
}

/* Bridge: hover zone above dropdown for smooth mouse transition */
.xmenuboxlev1::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 16px;
  grid-column: 1 / -1;
}

/* Show: adjacent-sibling hover (trigger a → next sibling dropdown)
   + keep visible when hovering dropdown itself */
.xmenuboxlev0 > a:hover + .xmenuboxlev1,
.xmenuboxlev0 > .xmenuboxlev1:hover {
  visibility: visible !important;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 120ms ease, visibility 0s;
}

/* Force child visibility (override CMS inline styles) */
.xmenuboxlev1 > a {
  visibility: visible !important;
}

/* Hide broken GIF/PNG images */
.xmenuboxlev1 img {
  display: none !important;
}

/* --- Submenu link items --- */
.xmenuboxlev1 a {
  margin: 0 !important;
  background: var(--color-gray-50) !important;
  border: 1px solid transparent !important;
  float: none !important;
  color: var(--color-gray-700) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 12px !important;
  white-space: normal;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: none !important;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xmenuboxlev1 a:hover {
  background: var(--color-white) !important;
  border-color: var(--color-gray-200) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

/* ============================================================
   FontAwesome Icons for Submenu Items
   ============================================================ */

/* Icon circle background */
.xmenuboxlev1 a::before {
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 12px;
  color: var(--color-primary);
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  flex-shrink: 0;
  background: rgba(23,76,170,0.08);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.xmenuboxlev1 a:hover::before {
  background: var(--color-primary);
  color: white;
}

/* --- Icon mapping --- */
.xmenuboxlev1 a[href*="newsletter"]::before { content: '\f0e0'; }
.xmenuboxlev1 a[href*="news_send"]::before { content: '\f1d8'; }
.xmenuboxlev1 a[href*="news_archive"]::before { content: '\f187'; }
.xmenuboxlev1 a[href*="news_items"]::before { content: '\f1ea'; }
.xmenuboxlev1 a[href*="Programmation"]::before { content: '\f121'; }
.xmenuboxlev1 a[href*="Press_Release"]::before { content: '\f0a1'; }
.xmenuboxlev1 a[href*="Materiel"]::before { content: '\f2db'; }
.xmenuboxlev1 a[href*="Logiciels"]::before { content: '\f1b2'; }
.xmenuboxlev1 a[href*="Livres"]::before { content: '\f02d'; }
.xmenuboxlev1 a[href*="Interviews"]::before { content: '\f130'; }
.xmenuboxlev1 a[href*="lastcomments"]::before { content: '\f086'; }
.xmenuboxlev1 a[href*="Xbox"]::before,
.xmenuboxlev1 a[href*="XBox"]::before { content: '\f11b'; }
.xmenuboxlev1 a[href*="Wii"]::before { content: '\f11b'; }
.xmenuboxlev1 a[href*="PS"]::before,
.xmenuboxlev1 a[href*="PlayStation"]::before { content: '\f11b'; }
.xmenuboxlev1 a[href*="-PC"]::before { content: '\f108'; }
.xmenuboxlev1 a[href*="DS"]::before { content: '\f11b'; }
.xmenuboxlev1 a[href*="GameCube"]::before { content: '\f11b'; }
.xmenuboxlev1 a[href*="lateststopics"]::before { content: '\f017'; }
.xmenuboxlev1 a[href*="categories-1"]::before { content: '\f109'; }
.xmenuboxlev1 a[href*="categories-4"]::before { content: '\f599'; }
.xmenuboxlev1 a[href*="categories-2"]::before { content: '\f5fd'; }
.xmenuboxlev1 a[href*="core_about"]::before { content: '\f05a'; }
.xmenuboxlev1 a[href*="core_publishers"]::before { content: '\f641'; }
.xmenuboxlev1 a[href*="core_contact"]::before { content: '\f1fa'; }
.xmenuboxlev1 a[href*="search_main"]::before { content: '\f002'; }
.xmenuboxlev1 a[href*="news_rss"]::before { content: '\f09e'; }

/* Color accents for specific categories */
.xmenuboxlev1 a[href*="Xbox"]::before,
.xmenuboxlev1 a[href*="XBox"]::before,
.xmenuboxlev1 a[href*="Wii"]::before,
.xmenuboxlev1 a[href*="PS"]::before,
.xmenuboxlev1 a[href*="PlayStation"]::before,
.xmenuboxlev1 a[href*="-PC"]::before,
.xmenuboxlev1 a[href*="DS"]::before,
.xmenuboxlev1 a[href*="GameCube"]::before {
  color: var(--color-success);
  background: rgba(34,197,94,0.08);
}

.xmenuboxlev1 a:hover[href*="Xbox"]::before,
.xmenuboxlev1 a:hover[href*="XBox"]::before,
.xmenuboxlev1 a:hover[href*="Wii"]::before,
.xmenuboxlev1 a:hover[href*="PS"]::before,
.xmenuboxlev1 a:hover[href*="PlayStation"]::before,
.xmenuboxlev1 a:hover[href*="-PC"]::before,
.xmenuboxlev1 a:hover[href*="DS"]::before,
.xmenuboxlev1 a:hover[href*="GameCube"]::before {
  background: var(--color-success);
  color: white;
}

.xmenuboxlev1 a[href*="core_"]::before,
.xmenuboxlev1 a[href*="search_"]::before,
.xmenuboxlev1 a[href*="news_rss"]::before {
  color: var(--color-accent);
  background: rgba(233,146,43,0.08);
}

.xmenuboxlev1 a:hover[href*="core_"]::before,
.xmenuboxlev1 a:hover[href*="search_"]::before,
.xmenuboxlev1 a:hover[href*="news_rss"]::before {
  background: var(--color-accent);
  color: white;
}

.xmenuboxlev2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px !important;
  background-color: var(--color-white) !important;
  margin-top: 30px;
  margin-left: -70px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.xmenuboxlev2 a {
  visibility: hidden;
  float: left;
  width: 200px !important;
  border-bottom: 1px solid var(--color-gray-100) !important;
  background-color: var(--color-white) !important;
}

.xmenuboxlev2 a:hover {
  background-color: var(--color-gray-50) !important;
}

.xmenucurrent {
  color: var(--color-primary) !important;
  background: none !important;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.xmenucurrent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
}

.xmenudropdown {
  margin-left: 4px !important;
  margin-top: 0 !important;
  float: none !important;
}

.webkit .xmenudropdown {
  margin-top: 0 !important;
}

/* ============================================================
   Footer
   ============================================================ */

#outro {
  width: 100%;
  margin: 0;
  color: white;
  font-size: 13px;
  padding: var(--space-3xl) 0 var(--space-xl);
  background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-navy) 60%, #020024 100%);
  line-height: 1.8;
  font-weight: 400;
  margin-top: var(--space-3xl);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
  border-top: 4px solid var(--color-accent);
}

#outro a {
  color: white;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

#outro a:hover {
  color: var(--color-accent) !important;
}

.outroblock1 {
  text-align: left;
  width: var(--container-width);
  margin: auto;
}

.outroblock2 {
  text-align: left;
  width: var(--container-width);
  margin: auto;
  font-size: 12px;
  opacity: 0.8;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.outroblock2 a {
  color: white !important;
}

.outroblock1 img {
  vertical-align: bottom;
}

#outrolink {
  float: right;
  margin-top: -30px;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

#outrolink:hover {
  filter: grayscale(1);
  text-decoration: none;
  transform: scale(1.05);
}


.footerpartners a:hover {
  text-decoration: none;
}

.footerpartners a:hover img {
  filter: grayscale(1);
}

.rightpanelsubtitle {
  padding: 6px 0 4px var(--space-sm);
  border: 0;
  font-size: 11px;
  margin-top: -5px;
  margin-bottom: 5px;
  color: white;
  background: linear-gradient(135deg, var(--color-sky) 0%, var(--color-primary-light) 100%);
  font-weight: 600;
  height: 18px;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}


.leftpanel {
  padding: 0;
  border: 0;
  margin-bottom: 0;
  margin-right: 5px;
  overflow: hidden;
  background: none;
  line-height: 1.6em;
  margin-bottom: var(--space-xl);
  width: 100%;
  box-sizing: border-box;
  animation: slideInUp var(--transition-slow) ease-out;
}

.leftpanelsubtitle {
  padding: 5px 0 3px var(--space-lg);
  border: 0;
  font-size: 11px;
  margin-top: 0;
  margin-bottom: 0;
  color: var(--color-gray-500);
  background: linear-gradient(90deg, var(--color-gray-50) 0%, var(--color-white) 100%);
  border-bottom: 1px solid var(--color-gray-200);
  font-weight: 600;
  height: 15px;
  line-height: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.articletext .leftpanelsubtitle, .articletext .leftpanelsubtitlewarning {
  width: 100%;
  box-sizing: border-box;
}

.leftpanelsubtitle a {
  color: var(--color-gray-400);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.leftpanelsubtitle a:hover {
  color: var(--color-gray-900);
}


.leftpaneltitle a:hover {
  color: var(--color-accent);
}

.leftpaneltitleimg {
  margin-top: 3px;
}

.leftpanels {
  padding: 0;
  margin: 0;
  width: 100%;
}

.leftpanelfooter {
  border-top: 1px solid var(--color-gray-200) !important;
}

.leftpanel50left {
  width: 315px !important;
}

.leftpanel50right {
  width: 295px !important;
}

.rightpanel form {
  border: 0;
  margin-top: 5px;
}


.XPages {
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.XPages .XPagesInner {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.XPages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border: 0;
  background: var(--color-white);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-600) !important;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.XPages a:hover {
  border: 0;
  background: var(--color-primary);
  color: white !important;
  box-shadow: var(--shadow-sm);
}

.XPages a.XPagesNext,
.XPages a.XPagesPrev {
  background: var(--color-white) !important;
  border: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.XPages a.XPagesNext::after {
  content: '\f054';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 12px;
  color: var(--color-gray-600);
}

.XPages a.XPagesPrev::before {
  content: '\f053';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 12px;
  color: var(--color-gray-600);
}

.XPages a.XPagesNext:hover,
.XPages a.XPagesPrev:hover {
  background: var(--color-primary) !important;
}

.XPages a.XPagesNext:hover::after,
.XPages a.XPagesPrev:hover::before {
  color: white;
}

.XPagesCurrent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border: 0;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 800;
  background: var(--color-primary);
  color: white !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.rightpanelskyad {
  margin-left: 5px !important;
  text-align: center;
}

.leftpanelarticles {
  border: 0;
  padding: 0;
}

/* Articles categories grid */
#articlescategories .leftpaneltitle {
  width: 100%;
  flex-basis: 100%;
}

#articlescategories {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-md);
  gap: 0;
}

/***********************************
*  News
*************************************/


.newstext table {
  width: 100%;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.newstext table tr:nth-child(even) {
  background: var(--color-gray-50);
}

.newstext {
  width: 97%;
  margin-bottom: 10px;
  line-height: 1.9em;
  font-size: 15px;
  padding: var(--space-md) var(--space-lg);
  color: var(--color-gray-700);
}

.newstext a {
  color: var(--color-gray-800);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.newstext a:hover {
  color: var(--color-accent);
}

.news {
  line-height: 1.5em !important;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  border-left: 5px solid var(--color-primary);
  overflow: hidden;
}

.news:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-left-color: var(--color-accent);
}

.news .leftpaneltitle {
  font-size: 16px;
}

/* Hero first news item */
.leftpanels > .news:first-child {
  border-left: 6px solid var(--color-accent);
  box-shadow: var(--shadow-md);
}

.leftpanels > .news:first-child .leftpaneltitle {
  font-size: 24px;
  line-height: 60px;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 40%, var(--color-sky) 100%);
  background-size: 200% 100%;
}

.leftpanels > .news:first-child .newstext {
  font-size: 16px;
  line-height: 1.9em;
}

.leftpanels > .news:first-child .newsmore {
  font-size: 16px;
  height: 52px;
  line-height: 52px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
}

/* Alternating accent colors for variety */
.news:nth-child(2) { border-left-color: var(--color-sky); }
.news:nth-child(3) { border-left-color: var(--color-accent); }
.news:nth-child(4) { border-left-color: var(--color-success); }
.news:nth-child(5) { border-left-color: var(--color-primary-light); }
.news:nth-child(6) { border-left-color: var(--color-warning); }
.news:nth-child(7) { border-left-color: var(--color-sky-light); }
.news:nth-child(8) { border-left-color: var(--color-danger); }

.newscomment, .articlescomment, .softwarescomment {
  background: var(--color-white);
  padding: 0;
  margin-bottom: var(--space-md);
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-100);
  transition: all var(--transition-fast);
}

.newscomment:hover, .articlescomment:hover, .softwarescomment:hover {
  border-color: var(--color-gray-200);
  box-shadow: var(--shadow-sm);
}

.newscommentfooter, .articlescommentfooter, .softwarescommentfooter {
  width: auto;
  border: 0;
  border-top: 1px solid var(--color-gray-100);
  padding: var(--space-sm) var(--space-lg);
  margin: 0;
  color: var(--color-gray-400);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  background: var(--color-gray-50);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.newscommentfooter a, .articlescommentfooter a, .softwarescommentfooter a {
  color: var(--color-primary);
  font-weight: 600;
}

.newscomment .leftpaneltitle, .articlescomment .leftpaneltitle, .softwarescomment .leftpaneltitle {
  background: none;
  color: var(--color-gray-700);
  width: auto;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  text-shadow: none;
}

.newscommentheader, .articlecommentheader, .softwarescommentheader {
  font-size: 10px !important;
  font-weight: bold;
  display: none;
}

.newscommentheader a, .articlecommentheader a, .softwarescommentheader a {
  color: var(--color-gray-500);
}

.newscommentstitle, .articlescommentstitle, .softwarescommentstitle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-gray-800);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0 var(--space-md);
  background: var(--color-gray-50);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.newscommentstitle img, .articlescommentstitle img, .softwarescommentstitle img {
  display: none;
}

.newscommentstitle::before, .articlescommentstitle::before, .softwarescommentstitle::before {
  content: '\f086';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 14px;
  color: var(--color-primary);
}

.newscommenttext, .articlescommenttext, .softwarescommenttext {
  padding: var(--space-md) var(--space-lg);
  line-height: 1.7;
  font-size: 14px;
  color: var(--color-gray-700);
}

.newsutils {
  background: white;
  height: 18px;
  padding-top: 12px;
  width: 590px;
  padding-right: 10px;
}

.newsutils a {
  color: var(--color-gray-500);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.newsutils a:hover {
  color: var(--color-accent);
}

.newsutils img {
  vertical-align: top;
}

.commentheaderimages {
  margin-top: 0;
  margin-right: 0;
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  font-size: 16px;
}

.commentheaderimages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.15);
  color: white !important;
  transition: all var(--transition-fast);
  font-size: 14px;
}

.commentheaderimages a:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.1);
}

.newscomment .commentheaderimages a {
  background: var(--color-gray-100);
  color: var(--color-gray-500) !important;
}

.newscomment .commentheaderimages a:hover {
  background: var(--color-gray-200);
  color: var(--color-primary) !important;
}

.leftpanel .newsdatetitle {
  text-transform: uppercase;
  background: url('../images/css_newsdate.gif') no-repeat;
  padding-left: 25px;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 10px;
  color: var(--color-gray-700);
}

.newsdatecurrent {
  background: url('../images/css_newstagred.gif') no-repeat !important;
  display: block;
  float: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 0 0 1px;
  height: 14px;
  width: 45px;
  color: var(--color-gray-600);
}

.newsdateother, .articlesdateother {
  display: block;
  float: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  padding: 0 7px 0 9px;
  height: 14px;
  width: 45px;
  color: var(--color-gray-500);
}

.newstitlecategory, .articlestitlecategory {
  color: var(--color-gray-700);
  font-size: 9px;
  padding-top: 2px;
  overflow: hidden;
  text-align: left;
  padding-right: 7px;
  padding-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.newstitlecategory a, .newstitle a, .articlestitlecategory a, .articlestitle a {
  color: var(--color-gray-600) !important;
  transition: color var(--transition-fast);
}

.newstitlecategory a:hover, .newstitle a:hover {
  color: var(--color-accent) !important;
}

.newstitle {
  margin-bottom: 3px;
  clear: both;
  overflow: hidden;
}

.newstitle .XPages {
  padding: 0;
  margin: 0;
  border: 0;
  margin-left: 5px;
  border-radius: 0;
}

.newstitle .XPages a {
  padding: 2px;
}

.newstitletitle {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 500px;
  float: left;
}

.newscommentnew {
  padding-left: 22px;
  background: url('../images/css_newscommentnew.gif') no-repeat !important;
  font-weight: 700;
  color: var(--color-danger);
  font-size: 11px;
  animation: pulse 2s ease-in-out infinite;
}

.newscommentnonew {
  padding-left: 22px;
  background: url('../images/css_newscommentnonew.gif') no-repeat !important;
  font-weight: 700;
  font-size: 11px;
}

.newssource {
  display: inline;
  margin-right: 10px;
  font-size: 11px;
  color: var(--color-gray-400);
}

.newslinkstitle, .articleslinkstitle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-gray-800);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0 0;
  background: var(--color-gray-50);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.newslinkstitle img, .articleslinkstitle img {
  display: none;
}

.newslinkstitle::before, .articleslinkstitle::before {
  content: '\f0c1';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 14px;
  color: var(--color-accent);
}

.newslinkscontent, .articleslinkscontent {
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  color: var(--color-gray-600);
}

.newslinkscontent a, .articleslinkscontent a {
  color: var(--color-primary);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.newslinkscontent a:hover, .articleslinkscontent a:hover {
  color: var(--color-accent);
}

.newslink {
  font-size: 13px;
  font-style: normal;
  padding: var(--space-xs) 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.newslink img {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.newslink a {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.newslink a:hover {
  color: var(--color-accent);
}

.newslinks {
  margin-left: 0;
}

.newssimilar, .articlessimilar {
  margin-left: 0;
}

.newssimilartitle, .articlessimilartitle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-gray-800);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0 0;
  background: var(--color-gray-50);
  border-left: 4px solid var(--color-success);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.newssimilartitle img, .articlessimilartitle img, .leftpanelreplytitle img {
  display: none;
}

.newssimilartitle::before, .articlessimilartitle::before {
  content: '\f1ea';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 14px;
  color: var(--color-success);
}

.newssimilarcontent, .articlessimilarcontent {
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  color: var(--color-gray-600);
}

.newsbydateheader {
  padding-bottom: 10px;
  clear: both;
  overflow: hidden;
}

.newsbydate {
  border: 0;
  margin-bottom: 10px !important;
  padding-bottom: 10px;
  animation: slideInUp var(--transition-slow) ease-out both;
}

.newsbydatetoday .newsbydateleftdate {
  background-color: var(--color-danger);
}

.newsbydatetoday .newsbydateleftmonth {
  background-color: #ff9db2;
}

.newsbydatetoday .newsbydaterightsubtitle {
  border: 1px solid var(--color-danger);
}

.newsbydateright {
  float: right;
  line-height: 57px;
  margin-right: 20px;
  width: 683px;
  text-align: left;
}

.newsbydaterighttext {
  font-size: 24px;
  font-weight: 900;
  border-bottom: 2px solid var(--color-gray-200);
  letter-spacing: -0.03em;
  padding-bottom: 4px;
}

.newsbydaterightsubtitle {
  float: left;
  border: 1px solid var(--color-primary);
  width: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.newsbydateleft {
  float: left;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.newsbydateleftdate {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 48px;
  width: 52px;
  font-weight: 800;
}

.newsbydateleftmonth {
  background: linear-gradient(135deg, var(--color-sky) 0%, var(--color-sky-light) 100%);
  color: white;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 20px;
  font-size: 11px;
  text-transform: uppercase;
}

.commentmessageedited {
  color: var(--color-gray-400);
  text-align: right;
  padding-right: 38px;
  font-style: italic;
  font-size: 11px;
}

.newsprevnext {
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.newsprevnext a {
  color: var(--color-primary);
  font-weight: 600;
  transition: all var(--transition-fast);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.newsprevnext a:hover {
  color: var(--color-accent);
  background: var(--color-white);
}

.newsnextlink {
  margin-left: auto;
}

.newscommentspages {
  float: none;
}

/***********************************
*  Prices
*************************************/

.pricescategory {
  border: 0;
}

.pricearticle {
  background-color: var(--color-gray-50) !important;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.pricearticle:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pricescategory:hover {
  border: 0;
  opacity: 0.8;
}

.pricesarticledetails {
  background-color: #fef6ec;
  padding-left: 5px;
  padding-right: 0;
  border-radius: var(--radius-sm);
}

.pricesarticledetails .leftpaneltitle {
  font-size: 14px;
  overflow: hidden;
  height: 22px;
  padding-top: 8px !important;
}

.pricearticleprices {
  background: none;
  border: 1px solid var(--color-gray-200);
  padding-left: 2px;
  padding-right: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--color-gray-600);
  border-radius: var(--radius-sm);
}

.pricearticleimage {
  border: 0;
}

.pricearticle {
  font-size: 13px;
  color: var(--color-gray-600);
}

.pricearticles {
  background: none !important;
}

.pricescommentstitle {
  font-weight: bold;
  font-size: 14px;
  padding-left: 25px;
  background: white url("../images/css_comments.png") no-repeat left top;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.pricescomment {
  background: none;
  background-color: var(--color-gray-50);
  width: 595px;
  padding-bottom: 0;
  padding-left: 5px;
  margin-left: 5px;
  margin-bottom: 15px;
  padding-top: 0;
  border-radius: var(--radius-md);
}

.pricescommentfooter {
  width: 590px;
  border: 0;
  background: var(--color-white);
  padding-top: 18px;
  margin-left: -5px;
  padding-left: 10px;
  color: var(--color-gray-500);
  font-size: 11px;
  font-style: italic;
}

.pricescomment .leftpaneltitle {
  background: none;
  color: var(--color-gray-500);
  width: 580px !important;
}

.pricescommentheader {
  font-size: 10px !important;
}


/***********************************
*  Forum
*************************************/

.forumsmiley {
  width: 120px;
  height: 120px;
  border: 1px solid var(--color-gray-200);
  margin: 5px;
  border-radius: var(--radius-sm);
}

.forumhometopic {
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform var(--transition-fast);
}

.forummessagefooter {
  font-weight: 700;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.forumfirstmessage .forummessage {
  border: 1px solid var(--color-gray-200);
}

.bbquote {
  border: 0 !important;
  padding: var(--space-lg) !important;
  background-color: var(--color-gray-50) !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary) !important;
}

.bbquotetitle {
  border: 0 !important;
  clear: left;
  background: url("../images/forum_quote.png") left center no-repeat;
  padding-left: 25px;
  margin-top: -10px;
  padding-top: 10px;
  padding-bottom: 15px;
  font-weight: 600;
  color: var(--color-gray-500);
}

.bbspoiler {
  background-color: #d7e4ed !important;
  border: 0 !important;
  border-radius: var(--radius-sm);
}

.bbwhisper {
  background-color: #d7e4ed !important;
  border-left: 5px solid var(--color-accent) !important;
  border: 1px solid #f1b46b;
  border-radius: var(--radius-sm);
}

.bbcodecode {
  background-color: var(--color-gray-800) !important;
  color: #a5d6ff;
  border-left: 5px solid var(--color-sky) !important;
  border: 0 !important;
  border-radius: var(--radius-sm);
  padding: var(--space-md) !important;
  font-family: var(--font-mono);
  font-size: 13px;
}


.forummessagetext {
  border-left: 1px solid var(--color-gray-200);
}

.forummessageutils {
  border: 0;
  background: none;
  width: 140px;
  margin-left: 20px;
  text-align: center;
  height: 50px;
  font-size: 16px;
}

.forummessageutils img {
  margin-right: 3px;
  margin-bottom: 5px;
}

.forummessagesubject {
  border-bottom: 1px solid var(--color-gray-200);
  background-color: var(--color-gray-50);
  font-weight: 700;
  font-size: 11px;
}

.XForumPoll {
  border: 1px solid var(--color-gray-200);
  background-color: white;
  width: 100%;
  max-width: 800px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.XForumPoll th {
  border-bottom: 1px solid var(--color-gray-200);
}

.XForumPoll td {
  font-size: 11px;
}

.XForumPollBar {
  background: linear-gradient(135deg, var(--color-sky-light) 0%, var(--color-sky) 100%);
  border: 0;
  border-radius: var(--radius-full);
  height: 8px;
}

.forumtopic {
  margin: 0;
  padding: 0;
  height: auto;
  overflow: hidden;
  border: 0;
  width: 100%;
  box-sizing: border-box;
  padding-left: 40px;
  font-weight: 600;
  padding-top: 2px;
  margin-top: 5px;
  background: url('../images/theme/v3/forum_catread.png') no-repeat !important;
  background-position: 10px 10px !important;
  transition: background-color var(--transition-fast);
}

.forumtopic:hover {
  border: 0 !important;
  background-color: var(--color-gray-50) !important;
}

.forumtopic div.XPages {
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  text-align: right !important;
  width: 400px;
}

.forumtopic a {
  font-weight: normal;
}

.forumtopicimgread img {
  display: none;
}

.forumtopicimgunread img {
  display: none;
}

.forumtopicunread {
  color: #d24130;
  background: url('../images/theme/v3/forum_catunread.png') no-repeat !important;
  background-position: 10px 10px !important;
}

.forumtopicunread a {
  color: #d24130;
}

.forumtopicblocked {
}

.forumtopichover a {
  font-weight: normal;
  color: var(--color-link);
}

.forumtopichover a:hover {
  color: var(--color-accent);
}

.forumquickreply {
  background-color: #fef6ec !important;
  border: 1px solid #f1b46b;
  padding: 5px;
  padding-right: 0 !important;
  text-align: center !important;
  border-radius: var(--radius-md);
}

.forumquickreply div {
  text-align: center !important;
}

.forumhomedate {
}

.forumhomedateread {
  display: block;
  float: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  height: 14px;
  width: 35px;
  color: var(--color-gray-500);
  margin-right: 15px;
}

.forumhomedateunread {
  display: block;
  float: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  width: 35px;
  background: linear-gradient(135deg, #ff6251 0%, var(--color-danger) 100%);
  margin-right: 15px;
  text-align: center;
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 2px 0;
  animation: pulse 2s ease-in-out infinite;
}

.forumhomedateunreadlink {
  font-weight: 700;
  color: #000;
}

.forumhomedateunreadlink .forumavatar {
  color: red !important;
}

.forumsection {
  height: auto;
  padding: var(--space-md) var(--space-lg);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
  background: linear-gradient(135deg, var(--color-sky) 0%, var(--color-primary-light) 100%);
  margin-top: var(--space-md);
  color: white;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.forumsection a {
  color: white !important;
}

.forumtopicheader {
  background-color: var(--color-gray-200);
  height: 22px;
  width: 100%;
  overflow: hidden;
  padding-top: 4px;
  font-size: 14px;
  font-weight: 700;
  padding-left: 40px;
  border: 0;
  margin-left: -5px;
  margin-bottom: 0;
}

.forumcategoryheader {
  height: auto;
  padding-top: 4px;
  font-size: 14px;
  font-weight: 700;
  padding-left: 10px;
  border: 0;
  margin-left: 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-gray-200);
  padding-top: 10px;
  padding-bottom: 0;
  width: 100%;
  box-sizing: border-box;
  color: var(--color-gray-700);
  overflow: hidden;
}

.forumcategory {
  height: auto;
  overflow: hidden;
  padding-left: 36px;
  padding-top: 4px;
  border: 0;
  margin-left: 0;
  width: 100%;
  box-sizing: border-box;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  color: var(--color-gray-700);
  background: url('../images/theme/v3/forum_catread.png') no-repeat !important;
  background-position: 10px 10px !important;
  transition: background-color var(--transition-fast);
}

.forumcategory:hover {
  background-color: var(--color-gray-50) !important;
}

.forumcatunread {
  background: url('../images/theme/v3/forum_catunread.png') no-repeat !important;
  background-position: 10px 10px !important;
}

.forumcatunread .forumcategoryname a {
  color: #d24130 !important;
}

.forumcategorydesc {
  padding-left: 5px;
  margin-top: -20px;
  margin-left: 0;
  font-style: italic;
  color: var(--color-gray-500);
  font-size: 11px;
  width: 640px;
}

.forumcategoryname {
  width: 450px;
}

.forumcategoryname a {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
}

.forumcategorynameheader {
  width: 470px;
  padding-left: 10px;
}

.forumcategorylastmsg {
  color: var(--color-gray-500);
  padding-left: 679px;
}

.forumstats {
  background: none;
  background-color: var(--color-gray-100);
  border: 0;
  margin-bottom: 0;
  padding: var(--space-md);
  color: var(--color-gray-600);
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-md);
}

.forumstats a {
  color: var(--color-gray-600);
}

.forumstats a:hover {
  color: var(--color-accent);
}


.forumloginpanel {
  background: none;
  background-color: var(--color-gray-50) !important;
  border: 0;
  border-top: 1px solid var(--color-gray-200);
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
  color: var(--color-gray-700);
  margin-top: 10px;
  border-radius: var(--radius-md);
}

.forumcatunreadimg {
  display: none;
}

.forumcatreadimg {
  display: none;
}

.forumtopictools {
  float: right;
  z-index: 99999 !important;
}

.mainex .leftpaneltitle {
  width: 100%;
  padding-left: 10px;
}


.forumtopictools a {
  color: white;
}

.forumtopictools a:hover {
  color: var(--color-accent);
}

.forumtopictoolsdata a:hover {
  color: var(--color-gray-300);
  z-index: 9999 !important;
}

.forumtopictoolstitle {
  position: absolute;
  width: 200px;
  left: 50%;
  top: 0;
  height: 40px;
  padding-top: 14px;
  margin-left: 398px;
  color: white;
  text-align: center;
  z-index: 300 !important;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
  border-radius: var(--radius-md);
}

.forumtopictoolstitleex {
  position: absolute;
  width: 200px;
  left: 50%;
  top: 0;
  height: 40px;
  padding-top: 14px;
  margin-left: 197px;
  color: white;
  text-align: center;
  z-index: 300 !important;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
  border-right: 1px solid white;
  border-radius: var(--radius-md);
}

.forumtopictoolsdata {
  position: absolute;
  left: 50%;
  width: 200px;
  top: 54px;
  margin-left: 398px;
  border-top: 1px dotted white;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  padding: 0;
  z-index: 9999 !important;
  visibility: hidden;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.forumtopictoolsdata img {
  vertical-align: top;
  margin-right: 5px;
}

.forumtopictoolsfooter {
  background: none;
  padding: 0;
  height: 10px;
  width: 100%;
  line-height: 1px;
}

.forumtopictoolsdatabody {
  padding: 0 var(--space-md) var(--space-md) var(--space-md);
  font-size: 12px;
  font-weight: 600;
  line-height: 2em;
  border: 0;
}

.forumtopictoolsdatabody a {
  color: white !important;
}

.forumtopictoolsdatabody a:hover {
  color: var(--color-accent) !important;
}

.forumleftpanelex {
  border: 0;
}

.forumtopictoolsdatabody input {
  font-size: 10px;
}

.forumtopictoolsdatabody td {
  font-size: 8px;
}

.forumtopictoolsdatabody div {
  font-size: 10px;
}

.forumleftpaneltitle {
  margin-bottom: 0;
}

.forumleftpaneltitleex {
  font-size: 18px;
  line-height: 50px;
  height: 50px;
}

.forumtopicpages {
  float: right;
  margin-top: 5px;
}

.forumtopiclastmsgdate {
  text-align: left;
}

.forumtopiclastmsgdate img {
  vertical-align: top;
}

.forumtopicsecondline {
  color: var(--color-gray-500) !important;
  font-size: 11px;
}

.forumtopicname {
  width: auto;
}

.forumcategorypages {
  margin-right: 20px;
}

.forumloginpanelcategory .forummessagecategories {
  float: right;
}

.forumloginpanelcategory .forumcategorylinks {
  margin-top: 5px;
}

.forumsubtitle {
  border-right: 1px solid var(--color-gray-200);
  border-left: 1px solid var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: 10px !important;
}

.forumcategorylinks img {
  vertical-align: top;
  margin-right: 7px;
}

.forummessage {
  margin-bottom: var(--space-md);
  padding: var(--space-md) 0;
  background-color: var(--color-gray-50) !important;
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base);
}

.forummessage:hover {
  box-shadow: var(--shadow-sm);
}

.forummessageinfo {
  float: left;
  text-align: center;
  width: 180px;
  padding-top: 20px;
}

.forummessagetext {
  border: 0;
  min-height: 200px;
  border-left: 1px solid var(--color-gray-200);
  padding-left: 20px;
  width: auto;
}

.forummessagetextbody {
  border: 0;
  margin-top: 40px;
  line-height: 1.6em;
  text-align: justify;
}

.forummessagesubject {
  font-size: 14px;
  border: 0;
  background: none;
  color: var(--color-primary);
}

.forummessagesubjectsecondline {
  padding-left: 0;
  color: var(--color-gray-500);
  font-size: 11px;
  font-weight: normal;
}

.forummessagesubjectsecondlinehideable {
  display: inline;
  font-size: 11px;
}

.forummessagesubjectsecondline a {
  color: var(--color-gray-500);
  font-weight: 600 !important;
}

.forummessageutilsright {
  display: none;
}

.forummessagetextfooter {
}

.forummessageinfoip {
  display: inline;
}

span.forummessagesignature {
  border-top: 1px solid var(--color-gray-200);
  color: var(--color-gray-500);
}

.mainex .leftpanelreply {
  width: 100% !important;
  box-sizing: border-box;
  border: 0;
}

.mainex .leftpanelreply #quickreplyform, .mainex .leftpanelreply .bbeditorbuttonscontainer {
  width: 100% !important;
  box-sizing: border-box;
}

.mainex .leftpanelreply #quickreplyform {
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
  border-radius: var(--radius-md);
}

.mainex .leftpanelreply textarea {
  width: 100% !important;
  box-sizing: border-box;
  border: 0;
  padding: 5px;
}

.main .leftpanelreply {
  width: 100%;
  box-sizing: border-box;
  border: 0;
}

.mainex .leftpanelreply form div {
  text-align: center !important;
}

.leftpanelreplytitle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--color-gray-800) !important;
  padding: var(--space-md) var(--space-lg) !important;
  background: var(--color-gray-50) !important;
  border-left: 4px solid var(--color-sky) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  line-height: normal !important;
  text-shadow: none !important;
}

.leftpanelreplytitle img {
  display: none;
}

.leftpanelreplytitle::before {
  content: '\f303';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 14px;
  color: var(--color-sky);
}

.forumavatar img {
  text-align: center;
}

.forummessageinfo .forumavatar img {
  border-radius: var(--radius-full);
  transition: transform var(--transition-base);
}

.forummessageinfo .forumavatar img:hover {
  transform: scale(1.1);
}


.forumavatar img {
  background-color: var(--color-white);
  border: 2px solid var(--color-gray-200);
  margin-bottom: 5px;
  padding: 4px;
}

.onlymoderator {
  border: 1px solid #fad4e2;
  border-radius: var(--radius-md);
}

.forummessageshort {
  padding-top: 0;
}

.forummessageshort .forummessageinfo {
  float: left;
  margin-left: 0;
  padding-left: 10px;
  text-align: center;
  width: 100%;
  margin-bottom: 0;
  margin-top: 0;
}

.forummessageshort .forummessagetext {
  min-height: 0;
  padding-bottom: 10px;
}

.leftpaneltitlegreyex {
  background-color: white;
  border: 0 !important;
  padding-bottom: 5px;
  width: 100%;
  color: var(--color-gray-800);
}

.leftpaneltitlegreyex a {
  color: var(--color-gray-800);
}

.leftpaneltitlegreyex .XPages a {
  color: var(--color-gray-600) !important;
}

.leftpaneltitlegreyex .XPages {
  margin-top: 5px;
}

.forummessagepages {
  margin-right: 20px;
}

.forummessagepages .XPages {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 5px;
  padding-bottom: 0;
  border: 0;
  border-radius: 0;
  width: auto;
}

.forummessagepagestop {
  float: right;
}

.forumunreadprivates {
  background: url("../images/forum_unreadprivate.gif") bottom no-repeat;
  color: black !important;
  margin-left: 5px;
  margin-top: 5px;
  padding-left: 15px;
}

.forumattach {
  background-color: var(--color-gray-50) !important;
  border: 0 !important;
  border-left: 4px solid var(--color-gray-200) !important;
  font-size: 12px;
  width: 93%;
  margin-top: var(--space-lg);
  text-align: right;
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.forumattachpreview {
  border-top: 1px solid var(--color-gray-200);
}

.forummessagecategories select {
  padding-top: 5px;
  padding-bottom: 5px;
}

.forummessagecategories input[type=submit] {
  margin-left: -9px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  padding: 2px 10px 1px 10px;
}

.forummessageedited {
  text-align: right;
}

.forumtopsmileys {
  float: right;
  padding-top: 50px;
}

.leftpanelreplyforum {
}

.leftpanelreplyforum .bbeditor {
  float: left;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
}

.leftpanelreplyforum #postsubject {
  border: 1px solid var(--color-gray-200);
  margin-top: 10px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.leftpanelreplyforum #subject {
  clear: both;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.leftpanelreplymore {
  clear: both;
  text-align: left !important;
  width: 200px;
  float: left;
}

.leftpanelreplyforum input[type=submit] {
  float: right;
  padding: 10px 40px 7px;
}

.leftpanelreplyforum .inputreadonly {
  border: 0;
  width: 100%;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.leftpanelreplyforum select {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

.leftpanelreplyforum #username {
  border: 1px solid var(--color-gray-200);
  padding-top: 8px;
  padding-bottom: 8px;
  width: 189px;
}

.leftpanelreplyforum #subject {
  border: 1px solid var(--color-gray-200);
  padding-top: 8px;
  padding-bottom: 8px;
}

.forumnewpoll {
  margin-top: var(--space-lg);
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 30px;
  clear: both;
}

.forumnewpoll table {
  border-top: 1px solid var(--color-gray-200);
  padding-top: 20px;
  border-bottom: 1px solid var(--color-gray-200);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.forumnewpoll input {
  border: 1px solid var(--color-gray-200) !important;
}

/**************************************************************
 * Articles
 **************************************************************/

.articlesimilar a {
  color: var(--color-gray-600) !important;
}

.articlehomedate {
  float: left;
  margin-right: 20px;
}

.articlesummary {
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  width: auto;
  height: auto;
  min-height: 0;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  background: var(--color-white);
  box-shadow: var(--shadow-xs);
  border-left: 4px solid var(--color-primary);
}

.articlesummary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-left-color: var(--color-accent);
}

.articlesummary .articleimage {
  grid-column: 1;
  grid-row: 1 / -1;
}

/* When article has no image, collapse to single column */
.articlesummary:not(:has(.articleimage img)) {
  grid-template-columns: 1fr;
}

.articlesummary:not(:has(.articleimage img)) .articleimage {
  display: none;
}

.articlesummary:not(:has(.articleimage img)) .articlesummarytitle,
.articlesummary:not(:has(.articleimage img)) .articlesummaryfooter,
.articlesummary:not(:has(.articleimage img)) .articlesummarytext {
  grid-column: 1;
}

.articlesummarytitle {
  grid-column: 2;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-gray-900);
  line-height: 1.3;
  margin-bottom: 2px;
}

.articlesummaryfooter {
  grid-column: 2;
  font-size: 11px;
  color: var(--color-gray-400);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.articlesummarytext {
  grid-column: 2;
  padding: 0;
  line-height: 1.65;
  font-size: 13px;
  color: var(--color-gray-600);
}

.articlesummarya, .articlesummarya:hover {
  display: contents;
  color: var(--color-gray-700);
  text-decoration: none;
}

.articlesummarytitle a {
  color: var(--color-gray-900);
  font-weight: 800;
  transition: color var(--transition-fast);
}

.articlesummarytitle a:hover {
  color: var(--color-primary);
}


.leftpanelreply {
  margin-bottom: 10px;
  padding-top: 0;
  padding-right: 0 !important;
  margin-top: var(--space-lg);
}

.leftpanelreply .leftpaneltitle {
  font-size: 16px;
}

.articlespages {
  border: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.articlespages a {
  color: white;
}

.articlespages a:hover {
  color: var(--color-accent);
}

.articleimage {
  border: 0;
  background: none;
  overflow: hidden;
  height: auto;
  padding: 0;
  flex-shrink: 0;
  width: 72px;
  float: none;
}

.articleimage img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 0;
  padding: 0;
  margin: 0;
  transition: transform var(--transition-fast);
}

.articleimage a {
  background: none;
  display: block;
}

.articleimage a:hover {
  background: none;
}

.articlesummary:hover .articleimage img {
  transform: scale(1.08);
}

.articlehomedate {
  display: block;
  float: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  height: 14px;
  width: 35px;
  color: var(--color-sky);
}

.articleshomeitem {
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.articlesimagestitle {
  background: url('../images/base_repository.png') no-repeat !important;
}

.articlelink {
  font-size: 13px;
  font-style: italic;
  margin-bottom: 12px;
}

.articlelink a {
  font-size: 16px;
  font-style: normal;
}

.articleslinks {
  margin-left: 0;
}

.articletext {
  line-height: 2em;
  padding-right: 10px;
  width: 100%;
  box-sizing: border-box;
}

.articletext img {
  border: 1px solid var(--color-gray-200);
  padding: 4px;
  max-width: 95%;
  border-radius: var(--radius-sm);
  transition: filter var(--transition-base);
}

.articletext img:hover {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

.articletext .leftpaneltitle img {
  border: 0;
  margin-top: 8px;
}

.articletext .leftpaneltitle {
  width: 100%;
  box-sizing: border-box;
}

.articlesutils {
  border: 0;
  height: 18px;
  padding-top: 12px;
  width: 100%;
  box-sizing: border-box;
  padding-right: 10px;
}

.articlesutils a {
  color: var(--color-gray-500);
  font-weight: 600;
}

.articlesutils img {
  vertical-align: middle;
}

.leftpanelsubtitlewarning {
  color: #7d111b;
  font-weight: 700;
  font-size: 12px;
  background: none;
  background-color: #f9d5d8 !important;
  border-bottom: 1px solid var(--color-gray-200);
  padding: 2px !important;
  margin-top: -5px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px !important;
  border-radius: var(--radius-sm);
}

.articlescategory img {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast);
  object-fit: cover;
}

.articlescategory {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: auto;
  width: 100px;
  padding: var(--space-sm) var(--space-xs);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  margin: 4px;
  background: var(--color-white);
  transition: all var(--transition-fast);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
}

.articlescategory:hover {
  filter: none;
  -webkit-filter: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.articlescategory:hover img {
  transform: scale(1.1);
}

.articlescategory a {
  color: var(--color-gray-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  font-size: 11px;
}

.articlescategory a:hover {
  color: var(--color-primary);
}

#submitrelease {
  float: right;
  margin-right: -20px;
}

.articleheaderimages {
  margin: 0;
  padding: 0;
  margin-right: 20px;
  padding-top: 3px;
}

.articlesimagescontent {
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 0;
  width: 90%;
  margin-left: 5%;
  border-top: 3px solid var(--color-gray-200);
  padding-top: 30px;
  margin-top: 30px;
}

/**************************************************************
 * Blogs
 **************************************************************/

.blogshomeitem {
  margin-bottom: 3px;
  margin-left: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.blogshomedate {
  background: none !important;
  display: block;
  float: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 0 0 1px;
  height: 14px;
  width: 55px;
  color: var(--color-gray-500);
}

.blogstitlecategory {
  color: var(--color-gray-700);
  font-size: 9px;
  padding-top: 2px;
  overflow: hidden;
  text-align: left;
  padding-right: 7px;
  padding-left: 6px;
  width: 100px;
}

.blogstitlecategory a {
  color: var(--color-gray-700);
}

.blogpanel {
  border: 0;
  background: none;
  margin-left: 20px;
}

.blogshomedate {
  display: block;
  float: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 0 0 1px;
  height: 14px;
  width: 155px;
  color: var(--color-gray-500);
  background: none;
  text-transform: none;
}

.blogshomeitem {
  margin-bottom: 4px;
}

/**************************************************************
 * Galleries
 **************************************************************/

.galleriesgallery {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.galleriesgallery:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.galleriesotherimagescontent .galleriesgallery {
  border: 2px solid #E5DD96;
  padding: 3px;
  height: 95px;
}

.galleriesthumbs {
  padding-left: 42px;
}

.galleriesthumbs:hover {
  opacity: 0.8;
}

.galleriesotherimages {
  margin-left: 0;
}

.galleriesotherimagestitle {
  padding-left: 25px;
  background: url('../images/base_images.png') no-repeat !important;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  margin-top: 5px;
  margin-bottom: 5px;
}

.galleriesotherimagescontent {
  background-color: #FFFCE7;
  border-bottom: 1px solid #E5DD96;
  border-top: 1px solid #F4EDB2;
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  color: var(--color-gray-400);
  margin-top: 10px;
  overflow: auto;
  border-radius: var(--radius-md);
}

.galleriessimilar {
  margin-left: 0;
}

.galleriessimilartitle {
  padding-left: 25px;
  background: url('../images/css_newslinks.png') no-repeat !important;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  margin-top: 5px;
  margin-bottom: 5px;
}

.galleriessimilarcontent {
  background-color: #F2FFF0;
  border-bottom: 1px solid #A5D79B;
  border-top: 1px solid #AEF5A0;
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  color: var(--color-gray-400);
  margin-top: 10px;
  border-radius: var(--radius-md);
}

/**************************************************************
 * Connection
 **************************************************************/

/* Connection panel in header bar */
.connectionpanel {
  line-height: var(--header-height);
  background-color: rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  position: relative;
  z-index: 1000;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.connectionpanel:hover {
  background-color: rgba(255,255,255,0.12);
}

.connectionpanel a {
  color: white;
  transition: color var(--transition-fast);
}

.connectiontitle a {
  color: white;
  line-height: var(--header-height);
}

.connectiontitle {
  color: white;
  text-align: center;
  padding: 0 var(--space-md);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
}

.connectiontitle .fa-chevron-down {
  opacity: 0.5;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.connectionpanel:hover .connectiontitle .fa-chevron-down {
  opacity: 1;
  transform: rotate(180deg);
}

.connectiontitle img { position: relative; top: -4px; }

/* --- Dropdown container --- */
.connectiondata {
  position: absolute;
  top: 100%;
  right: 0;
  width: 280px;
  color: white;
  padding: 0;
  z-index: 9000;
  display: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
  margin-top: 2px;
}

/* CSS hover + focus show (focus-within enables touch/tap on mobile) */
.connectionpanel:hover .connectiondata,
.connectionpanel:focus-within .connectiondata {
  display: block;
}

/* --- Dropdown body --- */
.connectiondatabody {
  padding: var(--space-sm);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  background: linear-gradient(165deg, #0a1628 0%, #0e2a5c 50%, #143a7a 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
}

.connectiondatabody a {
  color: rgba(255,255,255,0.9) !important;
}

/* --- Greeting header (logged-in) --- */
.connectiongreeting {
  padding: var(--space-sm) var(--space-md);
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.connectiongreeting b {
  color: white;
  font-weight: 700;
}

/* --- Link sections --- */
.connectionlinks {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.connectionlinks a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-md) !important;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.9) !important;
  transition: background-color var(--transition-fast), color var(--transition-fast) !important;
}

.connectionlinks a:hover {
  background-color: rgba(255,255,255,0.1) !important;
  color: white !important;
}

.connectionlinks a i {
  width: 18px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  transition: color var(--transition-fast);
}

.connectionlinks a:hover i {
  color: var(--color-accent);
}

/* --- Logout link --- */
.connectionlogout {
  color: rgba(255,100,100,0.8) !important;
}

.connectionlogout:hover {
  color: #ff6b6b !important;
  background-color: rgba(255,100,100,0.08) !important;
}

.connectionlogout i {
  color: rgba(255,100,100,0.5) !important;
}

.connectionlogout:hover i {
  color: #ff6b6b !important;
}

/* --- Separator --- */
.connectionseparator {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.12), transparent);
  margin: var(--space-xs) var(--space-md);
}

/* --- Login form section --- */
.connectionform {
  padding: var(--space-xs) var(--space-sm);
}

.connectionformlabel {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-xs);
}

.connectionform table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--space-xs);
}

.connectionform td {
  padding: 0;
}

.connectionform .XFormularDiv {
  padding: 0;
}

.connectionform input[type="text"],
.connectionform input[type="password"] {
  width: 100%;
  padding: 9px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  color: white;
  font-size: 13px;
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.connectionform input[type="text"]:focus,
.connectionform input[type="password"]:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 3px rgba(233,146,43,0.15);
}

.connectionform input[type="text"]::placeholder,
.connectionform input[type="password"]::placeholder {
  color: rgba(255,255,255,0.3);
}

.connectionform input[type="submit"] {
  width: 100%;
  padding: 9px 12px;
  margin-top: var(--space-xs);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  border: none;
  color: white;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.connectionform input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(233,146,43,0.3);
}

/* Legacy overrides (CMS table/td) */
.connectiondata td {
  color: white;
  padding: 0;
  border: 0;
}

.connectiondata img {
  vertical-align: middle;
  margin-right: var(--space-sm);
}

.connectionfooter {
  display: none;
}

/**************************************************************
 * Shoutbox
 **************************************************************/

.shoutboxline {
}

.shoutboxlinecontent {
  padding-left: 50px;
}

.shoutboxdate {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  height: 14px;
  margin-right: 15px;
  width: 35px;
  color: var(--color-gray-500);
}

#shoutbox_text {
  width: 270px !important;
  background-color: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
}

#shoutbox .bbeditor {
  display: block;
  width: 315px;
  margin-left: 10%;
}

#page_shoutbox_main #shoutbox .bbeditor {
  width: 640px;
  margin-top: 20px;
  margin-bottom: 5px;
}

#page_shoutbox_main #shoutbox input[type="submit"] {
  width: 600px;
  padding-top: 6px;
  padding-bottom: 6px;
}

#shoutbox_text_ex {
  border: 1px solid var(--color-gray-200);
  width: 579px !important;
  border-radius: var(--radius-sm);
}

#shoutbox input[type=submit] {
  width: 292px;
  margin-left: 10%;
  margin-top: 7px;
  margin-bottom: 7px;
}

.shoutboxme {
  background: none;
  font-style: italic;
  color: var(--color-gray-500);
}

.shoutboxme .shoutboxdate {
  font-style: normal;
}

.shoutbox img {
  vertical-align: middle !important;
}


/**************************************************************
 * Know
 **************************************************************/

.knowcategory {
  font-style: italic;
  font-size: 11px;
}

.knowcategory a {
  font-style: normal;
  font-size: 13px;
}

.knowhomeitem {
  margin-bottom: 3px;
}

.knowhomedate {
  background: url('../images/css_newstagblue.gif') no-repeat !important;
  display: block;
  float: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 0 0 1px;
  height: 14px;
  width: 35px;
  color: var(--color-gray-500);
}

.knowtitlecategory {
  background: url('../images/css_newscategory.gif') no-repeat !important;
  color: var(--color-gray-700);
  font-size: 8px;
  padding-top: 2px;
}

.knowtext .leftpaneltitle {
  width: 585px;
}

.knowcommentstitle {
  font-weight: 700;
  font-size: 14px;
  padding-left: 25px;
  background: white url("../images/css_comments.png") no-repeat left top;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.knowcomment {
  background: none;
  background-color: var(--color-gray-50);
  width: 595px;
  padding-bottom: 0;
  padding-left: 5px;
  margin-left: 5px;
  margin-bottom: 15px;
  padding-top: 0;
  border-radius: var(--radius-md);
}

.knowcommentfooter {
  width: 590px;
  border: 0;
  background: var(--color-white);
  padding-top: 18px;
  margin-left: -5px;
  padding-left: 10px;
  color: var(--color-gray-500);
  font-size: 11px;
  font-style: italic;
}

.knowcomment .leftpaneltitle {
  background: none;
  color: var(--color-gray-500);
  width: 580px !important;
}

.knowcommentheader {
  font-size: 10px !important;
}

/**************************************************************
 * Search
 **************************************************************/

.searchresult {
  color: var(--color-gray-500);
}

.searchresultsummary {
  margin-bottom: 5px;
  font-size: 11px;
  padding-left: 30px;
}

.searchid {
  float: left;
  width: 30px;
}

/**************************************************************
 * Videos
 **************************************************************/

.videosleftpanel .leftpanelsubtitle {
  margin-top: -5px !important;
}

/* YouTube / embedded video styling */
iframe[src*="youtube.com"],
iframe[src*="youtu.be"] {
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  border: 3px solid rgba(255,255,255,0.1);
  width: 100% !important;
  max-width: 100%;
  display: block;
  margin: var(--space-md) 0;
}


/**************************************************************
 * Softwares
 **************************************************************/

#softwares_panel_list {
  border: 0;
}

#softwares_panel_list ul.software-list a:hover {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 10px;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

#softwares_panel_list ul.software-list a {
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  margin-top: 10px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

#softwares_panel_list ul.software-list img {
  border: 1px solid var(--color-gray-200);
  padding: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  max-width: 32px;
  max-height: 32px;
  min-height: 32px;
  height: auto !important;
  margin-top: 0;
  border-radius: var(--radius-sm);
}

#softwares_panel_list ul.software-list .software-list-title {
  padding-left: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#softwares_panel_list ul.software-list div.software-list-info b {
  text-align: left;
  color: var(--color-sky);
}

#softwares_panel_list ul.software-list div.software-list-info {
  margin-left: 7px;
}

div.category-header {
  text-align: left;
  font-weight: normal;
  padding-bottom: 0;
  padding-left: 25px;
  color: var(--color-gray-800);
}

div.category-items {
  background: none;
  border: 0;
}

div.category-items a, div.category-items a:active, div.category-items a:visited, div.category-items a:hover {
  width: 335px;
  background: none;
  color: var(--color-gray-800);
}

div.category-items a:hover {
  color: var(--color-accent);
}

div.softwares_category-container {
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--color-gray-200);
  margin-left: 10px;
  margin-right: 10px;
}

#softwares_organic-tabs {
  margin-bottom: 5px;
}

#softwares_explore-nav li.current {
  background: none;
  border-bottom: 4px solid var(--color-sky);
}

#softwares_panel_list ul.software-list a, #softwares_panel_list ul.software-list a:visited, #softwares_panel_list ul.software-list a:active, #softwares_panel_list ul.software-list a:hover {
  height: 75px;
}

.softwares_filter {
  border: 0;
  background: none;
  text-align: center;
}

.softwares_filter .XFormularDiv {
  text-align: center;
}

.softwares_filter .XFormularDiv select {
  padding-top: 5px;
  padding-bottom: 5px;
}

.softwares_filter .XFormularDiv input[type=submit] {
  padding: 2px 30px;
}

#softwares_panel div.software-detail-specs div {
  border: 0;
}

#softwares_panel div.software-detail-specs {
  border: 0;
}

#softwares_panel div.software-detail-action {
  float: right;
  margin-right: 30px;
}

#softwares_panel .software-detail-subtitle {
  border-top: 1px solid var(--color-gray-200);
  padding-top: 22px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: -11px;
}

#softwares_panel, #softwares_panel p {
  line-height: 1.7em;
  text-align: justify;
  margin-right: 10px;
}

.softwarescomment .commentheaderimages {
  width: 40px;
  float: right;
}

#softwares_panel img.software-screenshot {
  margin: 5px;
  padding: 5px;
  border: 2px solid var(--color-gray-200);
  max-width: 450px;
  border-radius: var(--radius-md);
}

/**************************************************************
 * News images
 **************************************************************/


.newstoplinks img {
  margin-right: 0;
  background: white;
  padding: 1px;
  border: 1px solid var(--color-gray-300);
  height: 100px;
  width: 200px;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast), transform var(--transition-base);
}

.newstoplinks img:hover {
  opacity: 0.7;
  border: 1px solid var(--color-gray-500);
  transform: scale(1.03);
}

/**************************************************************
 * Buttons
 **************************************************************/

.borderlink:hover, .borderlink a:hover {
  background-color: #dff4ff;
  border: 1px solid #c2e1ef;
  color: #336699;
  cursor: pointer;
}

.borderlink {
  color: navy;
  font-size: 14px;
  font-weight: 700;
  padding: 5px 20px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

/**************************************************************
 * CSS browser hacks
 **************************************************************/

.opera .xmenuboxlev1 img {
  margin-top: 0;
}

.opera .forumtopicpages {
  margin-top: 5px;
}

.opera .newstitlecategory {
  letter-spacing: -0.1em;
}

.opera .xmenudropdown {
  margin-top: 0 !important;
}

.ie .xmenudropdown {
  display: none;
}


.bbeditorbuttonscontainer img {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: filter var(--transition-fast);
}

.bbeditorbuttonscontainer img:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}

.bbeditorbuttonscontainer {
  background-color: var(--color-gray-100);
  padding-top: 0;
  width: 100%;
  box-sizing: border-box;
}

.bbeditorbuttons {
  padding: 10px 9px 6px 2px;
  padding-left: 10px;
  border-left: 1px solid var(--color-gray-300);
  margin: 0;
}

.bbeditor br {
  display: none;
}

#postcomment {
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
  border-radius: var(--radius-md);
}

#postcomment table, #postcomment td, #postcomment tr {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}

#postcomment br {
  display: none;
}

#postcomment textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 5px;
}

#postcomment input[type=submit], .mainex #quickreplyform input[type=submit] {
  float: right;
  padding: 6px 40px;
}


/**************************************************************
 * Jobs
 **************************************************************/

#jobs_panel_list {
  border: 0;
}

#jobs_panel_list .job-list a:hover {
}

.job-list {
  overflow: hidden;
  margin-bottom: 10px;
  margin-left: 30px;
  transition: transform var(--transition-fast);
}

.job-list:hover {
  transform: translateY(-2px);
}

.job-list a img {
  width: 40px;
  height: auto;
  max-height: 60px;
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.job-list .job-home-image {
  width: 40px;
  height: 40px;
  float: left;
  clear: left;
  padding: 2px;
  border: 2px solid var(--color-gray-200);
  margin-bottom: 5px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.job-list a:hover {
  transform: translateY(-2px);
}

.job-list a:hover img {
  filter: grayscale(1);
}

#jobs_panel_list ul.job-list a:hover {
  transform: translateY(-2px);
  border: 0;
}

#jobs_panel_list .leftpaneltitle {
  margin-bottom: 20px;
}

#jobs_panel_list ul.job-list a {
  background: none;
  border-radius: var(--radius-sm);
  border: 0;
  margin-top: 10px;
  transition: transform var(--transition-fast);
}

#jobs_panel_list ul.job-list img {
  border: 1px solid var(--color-gray-200);
  padding: 10px;
  margin-bottom: 10px;
  width: 48px;
  height: auto;
  max-height: 64px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

#jobs_panel_list ul.job-list .job-list-title {
  padding-left: 15px;
}

#jobs_panel_list ul.job-list div.job-list-info b {
  text-align: left;
  color: var(--color-sky);
}

#jobs_panel_list ul.job-list div.job-list-info {
  margin-left: 7px;
}

#jobs_panel_list ul.job-list li {
  height: auto;
}

#jobs_panel_list ul.job-list a, #jobs_panel_list ul.job-list a:visited, #jobs_panel_list ul.job-list a:active, #jobs_panel_list ul.job-list a:hover {
  height: auto;
  padding: 9px;
}

#jobs_panel_list ul.job-list .job-list-title {
  font-weight: normal;
  font-size: 14px;
  margin-left: 87px;
}

#job_search_content {
  background: none;
  padding-bottom: 0 !important;
}

.job_panels_title {
  background: linear-gradient(135deg, var(--color-sky) 0%, var(--color-primary-light) 100%);
  border: 0;
  color: white;
  margin: 10px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.job_panels_title_unselected {
  background: none;
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-700);
}

#job_search_content .XCheckListBoxLevel1 {
  width: 200px;
  float: left;
  color: var(--color-gray-600);
  font-size: 12px;
  margin-top: 3px;
}

#job_search_content .XCheckListBoxLevel0 {
  clear: both;
  color: var(--color-gray-600);
  font-size: 12px;
  margin: 4px;
  margin-top: 6px;
}

#job_technologies .XCheckListBoxLevel0 {
  padding-top: 15px;
}

#job_search_content .XCheckListboxselected {
  width: 200px;
  float: left;
  background: none;
}

#job_search_content .XCheckListbox {
  width: 100% !important;
  max-width: 700px;
  border: 0;
  overflow-y: hidden;
  height: auto;
  background: none;
  margin-left: 30px;
}

#job_search_content #search {
  border: 1px solid var(--color-gray-200);
  width: 601px;
  margin-top: 20px;
  height: 40px;
  margin-left: -5px;
  border-radius: var(--radius-sm);
}

#job_search_content input[type=submit] {
  padding: 6px 40px;
}

.job_search_content label a, .XCheckListLinkNone, .job_search_content label {
  color: var(--color-gray-600) !important;
}

.job_search_content label a:hover, .XCheckListLinkNone:hover, .job_search_content label:hover {
  color: var(--color-accent);
}

.job_panel_right {
  float: right;
  font-weight: 700;
  cursor: pointer;
  margin-right: 20px;
  padding: 3px;
  margin-top: -2px;
}

#job_panels_technologies_title {
  margin-top: 25px;
}

/**************************************************************
 * Users – Account Pages
 **************************************************************/

/* --- Navigation menu (shared across all account pages) --- */
.usersprofile {
  display: flex;
  gap: 2px;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
  overflow-x: auto;
  scrollbar-width: none;
}

.usersprofile::-webkit-scrollbar {
  display: none;
}

.usersprofile-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  text-decoration: none !important;
  color: var(--color-gray-500) !important;
  transition: all var(--transition-fast);
  min-width: 72px;
  text-align: center;
  position: relative;
}

.usersprofile-item:hover {
  background: white;
  color: var(--color-primary) !important;
  box-shadow: var(--shadow-sm);
}

.usersprofile-icon {
  font-size: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: white;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: all var(--transition-fast);
}

.usersprofile-item:hover .usersprofile-icon {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 2px 8px rgba(30, 95, 208, 0.3);
}

.usersprofile-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Active state: highlight current page's nav item */
#page_users_edit .usersprofile-item[href*="users_edit"],
#page_users_adress .usersprofile-item[href*="users_adress"],
#page_users_forum .usersprofile-item[href*="users_forum"],
#page_users_avatar .usersprofile-item[href*="users_avatar"],
#page_users_blog .usersprofile-item[href*="users_blog"],
#page_users_challenges .usersprofile-item[href*="users_challenges"],
#page_users_myfriends .usersprofile-item[href*="users_myfriends"] {
  color: var(--color-primary) !important;
  background: white;
  box-shadow: var(--shadow-sm);
}

#page_users_edit .usersprofile-item[href*="users_edit"] .usersprofile-icon,
#page_users_adress .usersprofile-item[href*="users_adress"] .usersprofile-icon,
#page_users_forum .usersprofile-item[href*="users_forum"] .usersprofile-icon,
#page_users_avatar .usersprofile-item[href*="users_avatar"] .usersprofile-icon,
#page_users_blog .usersprofile-item[href*="users_blog"] .usersprofile-icon,
#page_users_challenges .usersprofile-item[href*="users_challenges"] .usersprofile-icon,
#page_users_myfriends .usersprofile-item[href*="users_myfriends"] .usersprofile-icon {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 2px 8px rgba(30, 95, 208, 0.3);
}

/* --- Shared account page styles --- */
:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .leftpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .leftpaneltitle {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)) !important;
  color: white !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  padding: 0 var(--space-lg) !important;
  line-height: 52px !important;
  letter-spacing: -0.01em;
}

/* --- Form container --- */
:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .XFormularDiv {
  padding: 0 var(--space-lg) var(--space-lg);
}

/* Section headers inside the form */
.account-section-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-gray-700);
  padding: var(--space-lg) 0 var(--space-sm);
  margin-top: var(--space-sm);
  border-bottom: 2px solid var(--color-gray-100);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.account-section-header i {
  color: var(--color-primary);
  font-size: 15px;
}

/* --- Panel-based form layout (edit page) --- */
.account-field {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
}

.account-field-label {
  flex-shrink: 0;
  width: 150px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-600);
}

.account-field input[type="text"],
.account-field input[type="email"],
.account-field input[type="password"] {
  flex: 1;
  min-width: 0;
}

.account-field-label b {
  font-weight: 700;
  color: var(--color-gray-800);
}

.account-submit {
  padding-top: var(--space-md);
}

/* --- Form table styling (pages still using autotable) --- */
:is(#page_users_myfriends, #page_users_challenges) .XFormularTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--space-xs);
}

:is(#page_users_myfriends, #page_users_challenges) .XFormularTable td {
  padding: var(--space-xs) var(--space-sm);
  font-size: 14px;
  color: var(--color-gray-700);
  vertical-align: middle;
}

:is(#page_users_myfriends, #page_users_challenges) .XFormularTable td:first-child {
  font-weight: 600;
  color: var(--color-gray-600);
  white-space: nowrap;
  width: 150px;
  padding-right: var(--space-md);
}

:is(#page_users_myfriends, #page_users_challenges) .XFormularTable td:first-child b {
  font-weight: 700;
  color: var(--color-gray-800);
}

/* --- Wide account field (for bbcode editors, authorisations) --- */
.account-field-wide {
  flex-direction: column;
  align-items: flex-start;
}

/* --- Avatar preview --- */
.account-avatar-preview {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.account-avatar-preview img {
  max-width: 120px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
}

/* --- Input styling --- */
:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .leftpanel input[type="text"],
:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .leftpanel input[type="email"],
:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .leftpanel input[type="password"] {
  width: 100%;
  max-width: 400px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-gray-800);
  background: var(--color-white);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .leftpanel input[type="text"]:focus,
:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .leftpanel input[type="email"]:focus,
:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .leftpanel input[type="password"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
  outline: none;
}

:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .leftpanel select {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-gray-700);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .leftpanel select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
  outline: none;
}

:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .leftpanel input[type="file"] {
  padding: var(--space-sm);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  font-size: 13px;
  cursor: pointer;
}

/* --- Submit button --- */
:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .leftpanel input[type="submit"] {
  background: var(--color-accent);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-2xl);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all var(--transition-fast);
  margin-top: var(--space-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

:is(#page_users_edit, #page_users_adress, #page_users_forum, #page_users_avatar,
    #page_users_blog, #page_users_myfriends, #page_users_challenges) .leftpanel input[type="submit"]:hover {
  background: var(--color-accent-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* --- Forum settings specifics --- */
#page_users_forum .bbeditorbuttonscontainer {
  width: 100%;
  max-width: 550px;
  box-sizing: border-box;
}

/* --- Friends page padding --- */
#page_users_myfriends .leftpanel > .account-section-header,
#page_users_myfriends .leftpanel > .XFormularDiv {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}

/* --- Friends --- */
.usersfriend {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

.users_friend {
  border: 1px solid var(--color-gray-200);
  margin-left: 31px;
  margin-bottom: 13px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.users_friend img {
  border: 0 !important;
}

.users_friend img:hover {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

.user_message_title {
  width: 660px;
  background: none;
  padding-left: 0;
}

.user_message_content {
  background: none;
  width: 680px;
}

.user_message {
  padding-left: 5px;
}

.user_details {
  padding: 5px;
}

.useractions a {
  padding: 10px 20px 12px;
  line-height: 30px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-sm);
  color: white;
  transition: all var(--transition-fast);
}

.useractions a:hover {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: white;
}

.user_message_avatar img, .user_avatar img {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
}

.user_message_footer {
  background: none;
  padding-left: 5px;
  padding-top: 0;
}

/**************************************************************
 * No ads
 **************************************************************/

.noads {
  width: 100%;
  max-width: 728px;
  height: 90px;
  overflow: hidden;
  position: absolute;
  z-index: 0;
  padding: 10px;
  line-height: 1.5em;
  padding-top: 5px;
}

.noads a {
  float: right;
  margin: 10px;
  width: auto !important;
  margin-right: 20px;
  margin-top: 0;
  vertical-align: middle;
}


.adhese_300x600 {
  text-align: center;
}

.pebbleMiddleLarg {
  text-align: center;
}

#pebbleTopLarge div {
  text-align: center;
}

#pebbleMiddleLarge div {
  text-align: center;
}



#page_core_contact #email {
  width: 100%;
  max-width: 700px;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
}

#page_core_contact #captcha_Edit {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
}

#page_core_contact .XFormularDiv img {
  margin-top: 4px;
}

#simplemodal-container {
  border: 3px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

#simplemodal-container .leftpaneltitle {
  background: none !important;
  border-bottom: 1px solid var(--color-gray-200) !important;
  color: var(--color-gray-800) !important;
}

#page_articles_submitpress .leftpanelreply {
  border: 1px solid var(--color-gray-200);
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-md);
}

#page_articles_submitpress #postcomment {
  border: 0;
}

#page_articles_submitpress #postcomment input[type="text"] {
  border: 1px solid var(--color-gray-200);
}

#page_articles_submitpress #postcomment button {
  padding: 6px 40px;
}

#page_articles_submitpress br {
  display: inline;
}

#page_articles_submitpress .bbeditor br {
  display: none;
}

#page_articles_submitpress td {
  padding-top: 10px;
}

#page_articles_submitpress select {
  padding-top: 5px;
  padding-bottom: 5px;
}

#searchterms {
  border: 1px solid var(--color-gray-200);
  width: 500px;
  border-radius: var(--radius-sm);
}

#searchmodule {
  padding-top: 5px;
  padding-bottom: 5px;
}

#page_search_main .leftpanel .XFormularDiv {
  margin-left: 10px;
}

.searchresult {
  border-top: 1px solid var(--color-gray-200);
  width: 90%;
  margin-left: 20px;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  transition: background-color var(--transition-fast);
}

.searchresult:hover {
  background-color: var(--color-gray-50);
}

.searchresult:first-of-type {
  border-top: 0;
}

#page_articles_editcomment #subject {
  border: 1px solid var(--color-gray-200);
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
}

#page_articles_editcomment .leftpanelreply {
  margin-top: 0;
  margin-bottom: 10px;
}

#page_articles_editcomment #postcomment {
  margin-top: 10px;
}

#page_newsletter_main #subemail {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
}

/* ========================================
   NEWS SEND PAGE MODERNIZATION
   ======================================== */

#page_news_send .leftpanel.leftpanelreply {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  width: 100% !important;
  box-sizing: border-box;
}

#page_news_send .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  text-shadow: none !important;
  width: auto !important;
}

#page_news_send .leftpanelcontent {
  padding: var(--space-lg);
  font-size: 14px;
  color: var(--color-gray-600);
  line-height: 1.6;
}

#page_news_send #postcomment {
  border: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  width: auto !important;
}

#page_news_send .XFormularDiv,
#page_news_send .XFormularDiv * {
  float: none !important;
}

#page_news_send .XFormularDiv {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 0;
}

#page_news_send .XFormularTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#page_news_send .XFormularTable td {
  padding: var(--space-xs) 0;
  font-size: 14px;
  color: var(--color-gray-700);
  vertical-align: top;
}

#page_news_send .XFormularTable td:first-child {
  font-weight: 600;
  color: var(--color-gray-600);
  white-space: nowrap;
  width: 100px;
  padding-right: var(--space-md);
  padding-top: var(--space-sm);
}

#page_news_send input[type="text"] {
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--color-white);
  outline: none;
  transition: all var(--transition-fast);
}

#page_news_send input[type="text"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
}

#page_news_send select {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  color: var(--color-gray-700);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

#page_news_send select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
  outline: none;
}

/* BBCode editor */
#page_news_send .bbeditor {
  padding: 0;
  width: 100% !important;
  box-sizing: border-box;
  overflow: visible !important;
}

#page_news_send .bbeditorbuttonscontainer {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: var(--space-sm);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  width: auto !important;
  box-sizing: border-box;
}

#page_news_send .bbeditorbuttonscontainer br {
  display: none;
}

#page_news_send .bbeditorbuttons {
  display: flex;
  gap: 1px;
  align-items: center;
  padding-right: var(--space-sm);
  margin-right: var(--space-sm);
  border-right: 1px solid var(--color-gray-200);
}

#page_news_send .bbeditorbuttons:last-child {
  border-right: 0;
  padding-right: 0;
  margin-right: 0;
}

#page_news_send .bbeditorbuttons a {
  display: none;
}

#page_news_send .bbeditorbuttons img {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  opacity: 0.55;
}

#page_news_send .bbeditorbuttons img:hover {
  background: var(--color-gray-200);
  opacity: 1;
}

#page_news_send textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--color-gray-200);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-md) !important;
  font-size: 14px;
  font-family: var(--font-sans);
  line-height: 1.7;
  resize: vertical;
  min-height: 280px;
  outline: none;
  transition: border-color var(--transition-fast);
}

#page_news_send textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.08);
}

/* Links section */
#page_news_send .XFormularTable td > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

/* Submit button */
#page_news_send input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  margin-top: var(--space-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 12px 40px !important;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all var(--transition-fast);
  width: auto !important;
  box-shadow: var(--shadow-sm);
}

#page_news_send input[type="submit"]:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

#page_softwares_category .leftpanelsubtitle {
  border-left: 1px solid var(--color-gray-200);
  border-right: 1px solid var(--color-gray-200);
}

#page_news_item .leftpanelreply {
  border: 0;
  width: 100%;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
}

#page_news_item .leftpanelreply .leftpanelcontent {
  padding: var(--space-lg);
  font-size: 14px;
  color: var(--color-gray-600);
  line-height: 1.6;
}

#page_news_item .leftpanelreply input[type="text"],
#page_news_item .leftpanelreply input[type="password"] {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  width: 280px;
}

#page_news_item .leftpanelreply input[type="text"]:focus,
#page_news_item .leftpanelreply input[type="password"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
}

#page_news_item .leftpanelreply input[type="submit"],
#page_news_item .leftpanelreply button {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

#page_news_item .leftpanelreply input[type="submit"]:hover,
#page_news_item .leftpanelreply button:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

#page_news_item .leftpanelreply textarea {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-size: 14px;
  font-family: var(--font-sans);
  width: 100% !important;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

#page_news_item .leftpanelreply textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
}

.leftpanelreplynoborder {
  border: 0;
}

#page_news_sendfriend #sendemail, #page_news_sendfriend textarea {
  border: 1px solid var(--color-gray-200);
  margin-top: 5px;
  border-radius: var(--radius-sm);
}

#page_news_sendfriend textarea {
  width: 100%;
  box-sizing: border-box;
}


.XTabSheetsTitles {
  border-bottom: 4px solid var(--color-primary);
}

.XTabSheetsTitles a {
  border-top: 1px solid var(--color-primary);
  border-left: 1px solid var(--color-primary);
  border-right: 1px solid var(--color-primary);
  background: white;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: all var(--transition-fast);
}

.XTabSheetTitleActive {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
  color: white !important;
}

.XTabSheetTitleActive a {
  color: white !important;
}

#page_users_login .leftpanel input[type=text], #page_users_login .leftpanel input[type=password],
#page_users_new .leftpanel input[type=text], #page_users_new .leftpanel input[type=password] {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
}

#page_users_new .leftpanel select, #page_users_login .leftpanel select {
  margin-top: 6px;
  margin-bottom: 6px;
}

#page_articles_item #loginform input, #page_news_item #loginform input {
  border: 1px solid var(--color-gray-200);
}

/* Article page: no card hover, better layout */
#page_news_item .news,
#page_articles_item .news {
  transform: none !important;
  border-left-width: 0;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

#page_news_item .news:hover,
#page_articles_item .news:hover {
  transform: none !important;
  box-shadow: var(--shadow-sm);
}

#page_news_item .news .leftpaneltitle,
#page_articles_item .news .leftpaneltitle {
  font-size: 20px;
  line-height: 1.4;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-md);
}

#page_news_item .news .leftpaneltitle > a,
#page_articles_item .news .leftpaneltitle > a {
  flex: 1;
  min-width: 0;
}

#page_news_item .news .commentheaderimages,
#page_articles_item .news .commentheaderimages {
  flex-shrink: 0;
}

#page_news_item .leftpanelsubtitle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
  font-size: 12px;
  height: auto;
  line-height: 1.5;
}

#page_news_item .newslinks,
#page_news_item .newssimilar {
  margin: var(--space-lg) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

#page_news_item .newsprevnext {
  box-shadow: var(--shadow-sm);
}

#page_forum_newtopic #text {
  width: 100%;
  box-sizing: border-box;
}

.newscat78 {
  font-weight: 700;
}

div.bbquote {
  clear: both;
  opacity: 0.7;
}

.footerpartners {
  float: none;
  position: static;
}

.verixilogo {
  background-color: white;
  border-radius: var(--radius-sm);
}



/* ============================================================
   Update 2026 - Dynamic elements
   ============================================================ */

.jobhome {
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 5px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.jobhome .job-home-image {
  width: 40px;
  height: 40px;
  float: left;
  clear: left;
  padding: 2px;
  border: 2px solid var(--color-gray-200);
  margin-bottom: 5px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.jobhome img {
  width: 40px;
  height: auto;
  max-height: 60px;
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.jobhome:hover {
  opacity: 0.7;
  transform: translateX(4px);
}

.jobhome:hover img {
  filter: grayscale(1);
}

.articleshomeitem {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
  transition: all var(--transition-fast);
  line-height: 1.45;
  font-size: 13px;
  color: var(--color-gray-700);
}

.articleshomeitem + .articleshomeitem {
  border-top: 1px solid var(--color-gray-100);
}

.articleshomeitem img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.articleshomeitem:hover {
  background: var(--color-gray-50);
  border-left-color: var(--color-accent);
}

.articleshomeitem:hover img {
  transform: scale(1.1);
}

.stayconnectedimages {
  display: flex;
  align-items: center;
  gap: 6px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.1);
  color: white !important;
  font-size: 13px;
  transition: all var(--transition-fast);
  text-decoration: none !important;
}

.social-icon:hover {
  transform: scale(1.2);
  color: white !important;
}

.social-facebook:hover { background: #1877f2; }
.social-twitter:hover { background: #000; }
.social-youtube:hover { background: #ff0000; }
.social-podcast:hover { background: #9933cc; }
.social-rss:hover { background: var(--color-accent); }

.stayconnectedimages img {
  border-radius: var(--radius-sm);
}


.forumhometopic {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
  font-weight: normal;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-gray-700);
  transition: all var(--transition-fast);
}

.forumhometopic + .forumhometopic,
a + a .forumhometopic {
  border-top: 1px solid var(--color-gray-100);
}

.forumhometopic .forumavatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid var(--color-gray-200);
  background: var(--color-gray-100);
}

.forumhometopic .forumavatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  display: block;
  transform: scale(1.3);
}

.forumhometopic:hover {
  background: var(--color-gray-50);
  border-left-color: var(--color-primary);
}

.forumhometopic:hover .forumavatar {
  border-color: var(--color-primary-light);
}

.forumhomedateunreadlink .forumhometopic {
  color: var(--color-accent);
  font-weight: 600;
}

.forumhomedateunreadlink .forumhometopic .forumavatar {
  border-color: var(--color-accent);
}

.leftpanelcontent {
  font-size: 14px;
}

.articletext {
  font-size: 15px;
  text-align: justify !important;
}

.articletext .leftpanelcontent {
  text-align: justify !important;
}

.articlepicture img:hover {
  transform: scale(1.05);
}

.listrss {
  margin-top: 20px;
}

.listrss li {
  margin-bottom: 10px;
  font-size: 125%;
}

.newsmore {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-sky) 100%);
  background-size: 200% 100%;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  height: 48px;
  text-align: center;
  color: white;
  line-height: 48px;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: var(--space-lg);
  transition: all var(--transition-base);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.newsmore a {
  color: white;
  display: block;
}

.newsmore:hover {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  background-size: 100% 100%;
  color: white !important;
  box-shadow: var(--shadow-accent);
  transform: translateY(-2px);
  letter-spacing: 0.1em;
}


.blogshomeitem {
  font-weight: normal;
  margin-left: 20px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.blogshomeitem .forumavatar {
  width: 40px;
  height: 40px;
  float: left;
  clear: left;
  padding: 2px;
  border: 2px solid var(--color-gray-200);
  margin-bottom: 5px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: var(--radius-sm);
}

.blogshomeitem .forumavatar img {
  width: 32px;
  height: auto;
  max-height: 32px;
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
}

.blogshomeitem:hover {
  opacity: 0.7;
  transform: translateX(4px);
}

.blogshomeitem:hover img {
  filter: grayscale(1);
}


.news img {
  padding: 5px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Hero Article
   ============================================================ */

.hero-article {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-xl);
  border-left: 6px solid var(--color-accent);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  animation: slideInUp var(--transition-slow) ease-out;
}

.hero-article:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.hero-article-content {
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
}

.hero-article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.hero-category-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: white !important;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: transform var(--transition-fast);
}

.hero-category-badge:hover {
  transform: scale(1.05);
  color: white !important;
}

.hero-date {
  font-size: 12px;
  color: var(--color-gray-500);
  font-weight: 500;
}

.hero-article-title {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--color-gray-900);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
  transition: color var(--transition-fast);
}

.hero-article a:hover .hero-article-title {
  color: var(--color-primary);
}

.hero-article-subtitle {
  font-size: 13px;
  color: var(--color-gray-500);
  margin-bottom: var(--space-lg);
  font-weight: 500;
}

.hero-article-subtitle a {
  color: var(--color-gray-500);
  font-weight: 600;
}

.hero-article-subtitle a:hover {
  color: var(--color-accent);
}

.hero-article-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-gray-700);
  margin-bottom: var(--space-lg);
}

.hero-article-text img {
  border-radius: var(--radius-md);
  margin: var(--space-sm);
}

.hero-readmore {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white !important;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--transition-base);
}

.hero-readmore:hover {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: white !important;
  transform: translateX(4px);
  box-shadow: var(--shadow-accent);
}

/* ============================================================
   Section Headers
   ============================================================ */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 3px solid var(--color-primary);
}

.section-header-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--color-gray-900);
  letter-spacing: -0.02em;
}

.section-header-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--transition-fast);
}

.section-header-link:hover {
  color: var(--color-primary) !important;
  transform: translateX(4px);
}

/* ============================================================
   News Grid (Homepage)
   ============================================================ */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.news-grid-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  border-top: 3px solid var(--color-primary);
}

.news-grid-card:nth-child(2) { border-top-color: var(--color-accent); }
.news-grid-card:nth-child(3) { border-top-color: var(--color-sky); }
.news-grid-card:nth-child(4) { border-top-color: var(--color-success); }
.news-grid-card:nth-child(5) { border-top-color: var(--color-primary-light); }
.news-grid-card:nth-child(6) { border-top-color: var(--color-warning); }

.news-grid-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.news-grid-card a {
  color: inherit;
  text-decoration: none;
}

.news-grid-card-inner {
  padding: var(--space-lg);
}

.news-grid-category {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.article-category {
  color: var(--color-accent) !important;
}

.news-grid-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-gray-900);
  margin-bottom: var(--space-sm);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}

.news-grid-card:hover .news-grid-title {
  color: var(--color-primary);
}

.news-grid-meta {
  font-size: 11px;
  color: var(--color-gray-400);
  font-weight: 500;
}

/* ============================================================
   News Meta Row (news cards)
   ============================================================ */

.news-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.news-category-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white !important;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.news-category-tag:hover {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: white !important;
}

.news-meta-info {
  font-size: 11px;
  color: var(--color-gray-500);
}

/* ============================================================
   Sidebar Enhancements
   ============================================================ */

.sidebar-item-category {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 3px;
  opacity: 0.7;
}

.sidebar-item-category i {
  font-size: 8px;
}

/* Sidebar news items (right panel "Actualités") */
.sidebar-news-item {
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid transparent;
  transition: all var(--transition-fast);
}

.sidebar-news-item:hover {
  background: var(--color-gray-50);
  border-left-color: var(--color-accent);
}

.sidebar-news-item + .sidebar-news-item {
  border-top: 1px solid var(--color-gray-100);
}

.sidebar-news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.sidebar-news-cat {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.sidebar-news-cat i {
  font-size: 8px;
}

.sidebar-news-date {
  font-size: 10px;
  color: var(--color-gray-400);
  font-weight: 500;
}

.sidebar-news-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gray-700);
  line-height: 1.4;
  transition: color var(--transition-fast);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sidebar-news-title:hover {
  color: var(--color-primary);
}

/* Forum right panel specific */
.forumrightpanel .rightpanelcontent {
  padding: 8px var(--space-md);
}

.forumrightpanel .rightpanelcontent a {
  text-decoration: none;
}

.forumrightpanel .rightpaneltitle {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}

.rightpanel-newsletter .rightpanelcontent {
  text-align: center;
}

.newsletter-description {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.newsletter-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: white !important;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  transition: all var(--transition-base);
}

.newsletter-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
  color: white !important;
}

/* ============================================================
   Compact News List
   ============================================================ */

.news-compact-section {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.news-compact-section .section-header {
  margin-bottom: var(--space-md);
}

.news-compact-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.news-compact-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-md);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  flex-wrap: wrap;
  position: relative;
  border-left: 3px solid transparent;
}

.news-compact-item:nth-child(odd) {
  background: var(--color-gray-50);
}

.news-compact-item:hover {
  background: white;
  border-left-color: var(--color-accent);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transform: translateX(2px);
}

.news-compact-date {
  font-size: 11px;
  color: var(--color-gray-400);
  font-weight: 600;
  white-space: nowrap;
  min-width: 55px;
  font-variant-numeric: tabular-nums;
}

.news-compact-date i {
  color: var(--color-gray-300);
  margin-right: 2px;
}

.news-compact-item:hover .news-compact-date {
  color: var(--color-primary);
}

.news-compact-item:hover .news-compact-date i {
  color: var(--color-primary);
}

.news-compact-category {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(23,76,170,0.06);
  color: var(--color-primary) !important;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: all var(--transition-fast);
  border: 1px solid rgba(23,76,170,0.08);
}

.news-compact-category:hover {
  background: var(--color-primary);
  color: white !important;
  border-color: var(--color-primary);
  transform: scale(1.05);
}

.news-compact-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-700) !important;
  min-width: 200px;
  transition: color var(--transition-fast);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-compact-item:hover .news-compact-title {
  color: var(--color-gray-900) !important;
}

.news-compact-title:hover {
  color: var(--color-accent) !important;
}

.news-compact-comments {
  font-size: 11px;
  color: var(--color-gray-400);
  white-space: nowrap;
}

.news-compact-comments i {
  color: var(--color-gray-300);
}

/* ============================================================
   Archive Day Headers
   ============================================================ */

.archive-day-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  margin-top: var(--space-md);
  border-bottom: 2px solid var(--color-gray-200);
}

.archive-day-header:first-child {
  margin-top: 0;
}

.archive-day-badge {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  text-align: center;
  min-width: 48px;
}

.archive-day-number {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  font-size: 20px;
  font-weight: 800;
  line-height: 36px;
  padding: 0 8px;
}

.archive-day-month {
  background: linear-gradient(135deg, var(--color-sky) 0%, var(--color-sky-light) 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 18px;
}

.archive-day-name {
  font-size: 20px;
  font-weight: 900;
  color: var(--color-gray-800);
  letter-spacing: -0.02em;
}

/* ============================================================
   Events Section
   ============================================================ */

.events-section {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.events-section .section-header {
  margin-top: 0;
}

.events-columns {
  display: flex;
  gap: var(--space-md);
}

.events-columns .leftpanel50 {
  flex: 1;
  min-width: 0;
}

/* ============================================================
   Footer Columns
   ============================================================ */

.footer-columns {
  display: flex;
  gap: var(--space-2xl);
  width: var(--container-width);
  margin: 0 auto var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-col {
  flex: 1;
  min-width: 0;
}

.footer-col-about {
  flex: 1.5;
}

.footer-col-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: var(--space-md);
  color: white;
  letter-spacing: -0.01em;
}

.footer-col-content {
  font-size: 13px;
  line-height: 2;
  color: rgba(255,255,255,0.7);
}

.footer-col-content a {
  color: rgba(255,255,255,0.7) !important;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.footer-col-content a:hover {
  color: var(--color-accent) !important;
  transform: translateX(4px);
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.1);
  color: white !important;
  font-size: 15px;
  transition: all var(--transition-fast);
}

.footer-social-icon:hover {
  background: var(--color-accent);
  color: var(--color-navy) !important;
  transform: scale(1.15);
}
#outro .footer-social-icon:hover {
  color: var(--color-navy) !important;
}

.footerpartners {
  text-align: center;
  max-width: var(--container-width);
  width: 100%;
  margin: 0 auto var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footerpartners img {
  opacity: 0.6;
  transition: opacity var(--transition-fast);
  margin: 0 var(--space-md);
  max-width: 45%;
  height: auto;
}

.footerpartners img:hover {
  opacity: 1;
}

.back-to-top {
  float: right;
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background: rgba(255,255,255,0.1);
  color: white !important;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.back-to-top:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
}
#outro .back-to-top,
#outro .back-to-top:hover {
  color: white !important;
  text-decoration: none;
}

/* ============================================================
   Selection styling
   ============================================================ */

::selection {
  background: rgba(23,76,170,0.15);
  color: var(--color-gray-900);
}

/* ============================================================
   Focus visible for accessibility
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   Scrollbar styling
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

/* ============================================================
   Page-specific modernizations (2026)
   ============================================================ */

/* --- Article categories: uniform sizing --- */
.articlescategory {
  width: 95px;
  min-height: 90px;
}

.articlescategory a {
  font-size: 10px;
  line-height: 1.2;
}

/* --- Core pages: modern card layout --- */
#page_core_about .leftpanel,
#page_core_publishers .leftpanel,
#page_core_contact .leftpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

#page_core_about .leftpaneltitle,
#page_core_publishers .leftpaneltitle,
#page_core_contact .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
}

#page_core_about .leftpaneltitle i,
#page_core_publishers .leftpaneltitle i,
#page_core_contact .leftpaneltitle i {
  color: var(--color-primary);
  font-size: 15px;
  margin-right: 4px;
}

#page_core_about .leftpanelcontent,
#page_core_publishers .leftpanelcontent,
#page_core_contact .leftpanelcontent {
  padding: var(--space-lg) var(--space-xl);
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-gray-600);
}

#page_core_about .leftpanelcontent a,
#page_core_publishers .leftpanelcontent a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(30,95,208,0.3);
  transition: all var(--transition-fast);
}

#page_core_about .leftpanelcontent a:hover,
#page_core_publishers .leftpanelcontent a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* --- Contact form modernization --- */
#page_core_contact .leftpanelcontent br + br {
  display: block;
  content: '';
  margin-top: var(--space-sm);
}

#page_core_contact #email,
#page_core_contact textarea {
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--color-gray-50);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  outline: none;
}

#page_core_contact #email:focus,
#page_core_contact textarea:focus {
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
}

#page_core_contact input[type="submit"] {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-xl);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all var(--transition-fast);
  margin-top: var(--space-sm);
}

#page_core_contact input[type="submit"]:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

#page_core_contact .XFormularDiv {
  margin-top: var(--space-md);
}

/* --- Softwares categories grid --- */
div.softwares_category-container {
  border: 0;
  border-radius: var(--radius-lg);
  margin: 0;
  padding: var(--space-md);
  background: var(--color-gray-50);
}

div.category-header {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-gray-800);
  padding: var(--space-sm) 0;
  border-bottom: 2px solid var(--color-gray-200);
  margin-bottom: var(--space-sm);
}

div.category-items {
  padding: var(--space-xs) 0;
}

div.category-items a, div.category-items a:active, div.category-items a:visited {
  width: auto !important;
  display: inline-block;
  padding: 3px var(--space-sm);
  margin: 2px 0;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-gray-600) !important;
  transition: all var(--transition-fast);
}

div.category-items a:hover {
  background: var(--color-white);
  color: var(--color-primary) !important;
  box-shadow: var(--shadow-xs);
}

/* Softwares list items */
#softwares_panel_list ul.software-list a {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  margin: 0;
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
  height: auto !important;
  transition: all var(--transition-fast);
}

#softwares_panel_list ul.software-list a:hover {
  background: var(--color-gray-50);
  border-left-color: var(--color-primary);
  transform: none;
  box-shadow: none;
  padding: var(--space-sm) var(--space-md);
}

#softwares_panel_list ul.software-list img {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  min-height: 40px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: 4px;
  margin: 0;
  object-fit: contain;
  flex-shrink: 0;
}

#softwares_panel_list ul.software-list .software-list-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-gray-800);
}

#softwares_panel_list ul.software-list div.software-list-info {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-left: 0;
}

#softwares_panel_list ul.software-list div.software-list-info b {
  color: var(--color-primary);
}

/* Softwares tabs */
#softwares_explore-nav {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--color-gray-200);
  margin-bottom: var(--space-md);
}

#softwares_explore-nav li {
  list-style: none;
}

#softwares_explore-nav li a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-500);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: all var(--transition-fast);
}

#softwares_explore-nav li a:hover {
  background: var(--color-gray-50);
  color: var(--color-primary);
}

#softwares_explore-nav li.current {
  border-bottom: 3px solid var(--color-primary);
}

#softwares_explore-nav li.current a {
  color: var(--color-primary);
  font-weight: 700;
}

/* --- Blogs page --- */
#page_blogs_lastmessages .leftpanelcontent {
  padding: var(--space-sm) var(--space-md);
}

#page_blogs_lastmessages .blogshomeitem {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  font-size: 13px;
  color: var(--color-gray-700);
  line-height: 1.4;
}

#page_blogs_lastmessages .blogshomeitem + .blogshomeitem {
  border-top: 1px solid var(--color-gray-100);
}

#page_blogs_lastmessages .blogshomeitem:hover {
  background: var(--color-gray-50);
  border-left-color: var(--color-primary);
}

#page_blogs_lastmessages .blogshomeitem .forumavatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid var(--color-gray-200);
}

#page_blogs_lastmessages .blogshomeitem .forumavatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  padding: 0;
  margin: 0;
}

/* ========================================
   FORUM CATEGORIES PAGE MODERNIZATION
   ======================================== */

#page_forum_categories .leftpanel.leftpanelnoborder {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  padding: 0;
  position: relative;
}

/* Kill all floats inside the forum card */
#page_forum_categories .leftpanel.leftpanelnoborder .forumcategoryheader,
#page_forum_categories .leftpanel.leftpanelnoborder .forumsection,
#page_forum_categories .leftpanel.leftpanelnoborder .forumcategory,
#page_forum_categories .leftpanel.leftpanelnoborder .forumcategorydesc,
#page_forum_categories .leftpanel.leftpanelnoborder .forumcategoryname,
#page_forum_categories .leftpanel.leftpanelnoborder .forumcategorytopics,
#page_forum_categories .leftpanel.leftpanelnoborder .forumcategorymessages,
#page_forum_categories .leftpanel.leftpanelnoborder .forumcategorylastmsg,
#page_forum_categories .leftpanel.leftpanelnoborder .forumcategorylastmessage,
#page_forum_categories .leftpanel.leftpanelnoborder .forumcategorynameheader {
  float: none !important;
}

#page_forum_categories .forumleftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
}

#page_forum_categories .forumleftpaneltitle i {
  color: var(--color-primary);
}

/* Tools dropdown */
#page_forum_categories .forumtopictools {
  float: none !important;
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 100 !important;
  margin: 0;
}

#page_forum_categories .forumtopictoolstitle {
  position: static;
  width: auto;
  left: auto;
  top: auto;
  height: auto;
  padding: var(--space-xs) var(--space-md);
  margin-left: 0;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  color: white;
}

#page_forum_categories .forumtopictoolsdata {
  position: absolute;
  right: 0;
  top: 100%;
  left: auto;
  width: 220px;
  margin-top: var(--space-xs);
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) 0;
  z-index: 200;
}

#page_forum_categories .forumtopictoolsdatabody a {
  display: block;
  padding: var(--space-xs) var(--space-md);
  color: var(--color-gray-700) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
}

#page_forum_categories .forumtopictoolsdatabody a:hover {
  background: var(--color-gray-50);
  color: var(--color-primary) !important;
}

#page_forum_categories .forumtopictoolsdatabody img {
  display: none;
}

#page_forum_categories .forumtopictoolsfooter {
  display: none;
}

/* Column header */
#page_forum_categories .forumcategoryheader {
  display: grid;
  grid-template-columns: 1fr 90px 90px 280px;
  gap: 0;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
  width: 100% !important;
  box-sizing: border-box;
  margin: 0;
  height: auto;
  overflow: visible;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
}

#page_forum_categories .forumcategoryheader br {
  display: none;
}

#page_forum_categories .forumcategorynameheader {
  width: auto;
  padding-left: 0;
}

#page_forum_categories .forumcategoryheader .forumcategorytopics,
#page_forum_categories .forumcategoryheader .forumcategorymessages {
  text-align: center;
  width: auto;
}

#page_forum_categories .forumcategoryheader .forumcategorylastmessage {
  text-align: right;
  width: auto;
}

/* Section headers */
#page_forum_categories .forumsection {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-sm) var(--space-lg);
  margin: 0;
  border-top: 2px solid var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-100);
  border-radius: 0;
  width: 100% !important;
  box-sizing: border-box;
}

#page_forum_categories .forumsection a {
  color: var(--color-gray-700) !important;
  text-decoration: none;
}

#page_forum_categories .forumsection br {
  display: none;
}

/* Category rows */
#page_forum_categories .forumcategory {
  display: grid;
  grid-template-columns: 1fr 90px 90px 280px;
  grid-template-rows: auto auto;
  gap: 0;
  align-items: center;
  padding: var(--space-md) var(--space-lg) !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
  background: var(--color-white) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--color-gray-50);
  border-radius: 0 !important;
  transition: background-color var(--transition-fast);
}

#page_forum_categories .forumcategory:hover {
  background: var(--color-gray-50) !important;
}

#page_forum_categories .forumcategoryname {
  width: auto;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

#page_forum_categories .forumcategoryname img {
  display: none !important;
}

#page_forum_categories .forumcategoryname::before {
  content: '\f086';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 14px;
  color: var(--color-gray-300);
  flex-shrink: 0;
}

#page_forum_categories .forumcatunread .forumcategoryname::before {
  color: var(--color-accent);
}

#page_forum_categories .forumcategoryname a {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-gray-800) !important;
}

#page_forum_categories .forumcatunread .forumcategoryname a {
  color: var(--color-primary) !important;
}

#page_forum_categories .forumcategorydesc {
  grid-column: 1 / -1;
  grid-row: 2;
  width: auto;
  margin: 0;
  padding: 2px 0 0 22px;
  font-size: 12px;
  font-style: normal;
  color: var(--color-gray-500);
}

#page_forum_categories .forumcategory .forumcategorytopics,
#page_forum_categories .forumcategory .forumcategorymessages {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-500);
  grid-row: 1;
}

#page_forum_categories .forumcategory .forumcategorytopics {
  grid-column: 2;
}

#page_forum_categories .forumcategory .forumcategorymessages {
  grid-column: 3;
}

#page_forum_categories .forumcategorylastmsg {
  grid-column: 4;
  grid-row: 1 / 3;
  padding: 0 !important;
  padding-left: 0 !important;
  text-align: right;
  font-size: 12px;
  color: var(--color-gray-500);
  width: auto;
}

#page_forum_categories .forumcategorylastmsg a {
  color: var(--color-gray-700);
  font-weight: 600;
  font-size: 12px;
}

#page_forum_categories .forumcategorylastmsg a:hover {
  color: var(--color-primary);
}

/* Stats panel */
#page_forum_categories .forumstats {
  margin: var(--space-lg) var(--space-lg) var(--space-md);
  width: auto;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-gray-600);
  border: 1px solid var(--color-gray-100);
}

#page_forum_categories .forumstats bold,
#page_forum_categories .forumstats b {
  color: var(--color-gray-700);
  font-weight: 700;
}

/* Login panel */
#page_forum_categories .forumloginpanel {
  margin: 0 var(--space-lg) var(--space-lg);
  width: auto;
  background: var(--color-gray-50) !important;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: 13px;
  color: var(--color-gray-700);
}

#page_forum_categories .forumloginpanel input[type="text"],
#page_forum_categories .forumloginpanel input[type="password"] {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition-fast);
}

#page_forum_categories .forumloginpanel input[type="text"]:focus,
#page_forum_categories .forumloginpanel input[type="password"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(30, 95, 208, 0.1);
}

#page_forum_categories .forumloginpanel input[type="submit"] {
  background: var(--color-primary);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

#page_forum_categories .forumloginpanel input[type="submit"]:hover {
  background: var(--color-primary-dark);
}

/* Privates row (same as category) */
#page_forum_categories .forumcategory.forumprivaterow {
  border-top: 2px solid var(--color-gray-100);
}

/* ========================================
   ARTICLES ITEM PAGE MODERNIZATION
   ======================================== */

#page_articles_item .leftpanel.articletext {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

#page_articles_item .articletext .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  padding: var(--space-lg) var(--space-xl) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 5px solid var(--color-primary);
  border-radius: 0 !important;
  text-shadow: none !important;
  letter-spacing: -0.02em !important;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: auto !important;
}

#page_articles_item .articleheaderimages {
  display: flex;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  order: 2;
  margin-left: auto;
}

#page_articles_item .articleheaderimages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-gray-500) !important;
  font-size: 14px;
  transition: all var(--transition-fast);
  border: 1px solid var(--color-gray-200);
}

#page_articles_item .articleheaderimages a:hover {
  background: var(--color-primary);
  color: white !important;
  border-color: var(--color-primary);
}

#page_articles_item .articletext .leftpanelsubtitle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xl);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
  font-size: 12px;
  height: auto;
  line-height: 1.5;
  width: auto !important;
}

#page_articles_item .leftpanelsubtitlewarning {
  margin: var(--space-md) var(--space-xl) 0;
  padding: var(--space-sm) var(--space-md);
  background: #fef3cd !important;
  color: #856404 !important;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  border-left: 4px solid #ffc107;
  width: auto !important;
}

#page_articles_item .articletext .leftpanelcontent {
  padding: var(--space-lg) var(--space-xl);
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-gray-700);
}

#page_articles_item .articletext .leftpanelcontent b {
  color: var(--color-gray-800);
  font-weight: 700;
}

#page_articles_item .articletext img {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
  padding: 4px;
}

/* Article images gallery */
#page_articles_item .articlesimagescontent {
  margin: var(--space-lg) var(--space-xl);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-gray-100);
  width: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

#page_articles_item .articlepicture {
  border-radius: var(--radius-md);
  overflow: hidden;
}

#page_articles_item .articlepicture img {
  border-radius: var(--radius-md);
  transition: transform var(--transition-base);
}

#page_articles_item .articlepicture img:hover {
  transform: scale(1.03);
}

/* Article links section */
#page_articles_item .articlelinks {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

#page_articles_item .articleslinkscontent {
  padding: var(--space-md) var(--space-lg);
}

#page_articles_item .articlelink {
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  margin: 0;
}

#page_articles_item .articlelink:hover {
  background: var(--color-gray-50);
  border-left-color: var(--color-accent);
}

#page_articles_item .articlelink a {
  font-size: 14px;
  color: var(--color-primary);
  font-weight: 600;
}

/* Similar articles section */
#page_articles_item .articlessimilar {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

#page_articles_item .articlessimilarcontent {
  padding: var(--space-sm) var(--space-md);
}

/* Comment/login section */
#page_articles_item .leftpanelreply {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

#page_articles_item .leftpanelreply .leftpanelcontent {
  padding: var(--space-lg);
  font-size: 14px;
  color: var(--color-gray-600);
}

#page_articles_item .leftpanelreply input[type="text"],
#page_articles_item .leftpanelreply input[type="password"] {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#page_articles_item .leftpanelreply input[type="text"]:focus,
#page_articles_item .leftpanelreply input[type="password"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
}

#page_articles_item .leftpanelreply input[type="submit"] {
  background: var(--color-primary);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-xl);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

#page_articles_item .leftpanelreply input[type="submit"]:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
}

/* ========================================
   SEARCH PAGE MODERNIZATION
   ======================================== */

#page_search_main .leftpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

#page_search_main .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 !important;
  text-shadow: none !important;
}

#page_search_main .leftpaneltitle i {
  color: var(--color-primary);
}

#page_search_main .XFormularDiv {
  padding: var(--space-lg) var(--space-xl);
}

#page_search_main .XFormularTable {
  width: 100%;
}

#page_search_main .XFormularTable td {
  padding: var(--space-sm) 0;
  font-size: 14px;
  color: var(--color-gray-600);
}

#page_search_main input[type="text"] {
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--color-gray-50);
  outline: none;
  transition: all var(--transition-fast);
}

#page_search_main input[type="text"]:focus {
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
}

#page_search_main select {
  width: 100%;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--color-gray-50);
  outline: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

#page_search_main select:focus {
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
}

#page_search_main input[type="submit"] {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-xl);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

#page_search_main input[type="submit"]:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ========================================
   SOFTWARES CATEGORIES FIX
   ======================================== */

#page_softwares_categories .leftpanels > .leftpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

#page_softwares_categories .leftpanels > .leftpanel > .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 !important;
  text-shadow: none !important;
}

#page_softwares_categories .leftpanels > .leftpanel > .leftpaneltitle i {
  color: var(--color-primary);
}

/* ========================================
   BLOGS LAST MESSAGES MODERNIZATION
   ======================================== */

#page_blogs_lastmessages .leftpanels > .leftpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  margin-bottom: var(--space-lg);
}

#page_blogs_lastmessages .leftpanels > .leftpanel > .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 !important;
  text-shadow: none !important;
}

#page_blogs_lastmessages .leftpanels > .leftpanel > .leftpaneltitle i {
  color: var(--color-primary);
}

/* ========================================
   RSS PAGE MODERNIZATION
   ======================================== */

#page_news_rss .leftpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

#page_news_rss .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid #f26522;
  border-radius: 0 !important;
  text-shadow: none !important;
}

#page_news_rss .leftpaneltitle i {
  color: #f26522;
}

#page_news_rss .leftpanelcontent {
  padding: var(--space-lg) var(--space-xl);
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-gray-600);
}

#page_news_rss ul.listrss {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

#page_news_rss ul.listrss li {
  padding: 0;
  margin: 0;
}

#page_news_rss ul.listrss li a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-gray-700) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
}

#page_news_rss ul.listrss li a:hover {
  border-color: #f26522;
  background: #fff8f3;
  color: #f26522 !important;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

#page_news_rss ul.listrss li a i {
  color: #f26522;
  font-size: 16px;
  flex-shrink: 0;
}

/* ========================================
   SOFTWARES CATEGORIES - FULL ALIGNMENT
   ======================================== */

/* Fix panel widths and floats */
#page_softwares_categories .leftpanels > .leftpanel {
  width: 100% !important;
  box-sizing: border-box;
  float: none !important;
  margin-bottom: var(--space-lg);
}

/* Subtitle bar */
#page_softwares_categories .leftpanels > .leftpanel > .leftpanelsubtitle {
  padding: var(--space-sm) var(--space-lg);
  font-size: 12px;
  color: var(--color-gray-500);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
}

/* Tab navigation */
#page_softwares_categories #softwares_explore-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  margin: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-gray-100);
}

#page_softwares_categories #softwares_explore-nav li {
  margin: 0;
  padding: 0;
  float: none !important;
}

#page_softwares_categories #softwares_explore-nav li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  transition: all var(--transition-fast);
  position: relative;
}

/* Hide old GIF icons, replace with FontAwesome */
#page_softwares_categories #softwares_explore-nav li a img {
  display: none !important;
}

#page_softwares_categories #softwares_explore-nav li a::before {
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 20px;
  color: var(--color-gray-500);
  transition: color var(--transition-fast);
}

/* Icon mapping per category */
#ex-softwares-1-Audio__Multimdia a::before { content: '\f001'; }  /* music */
#ex-softwares-2-Business a::before { content: '\f0b1'; }  /* briefcase */
#ex-softwares-3-Communications a::before { content: '\f086'; }  /* comments */
#ex-softwares-4-Desktop a::before { content: '\f108'; }  /* desktop */
#ex-softwares-5-Dveloppement a::before { content: '\f121'; }  /* code */
#ex-softwares-13-Dveloppement_Web a::before { content: '\f0ac'; }  /* globe */
#ex-softwares-6-Education a::before { content: '\f19d'; }  /* graduation-cap */
#ex-softwares-8-Graphisme a::before { content: '\f53f'; }  /* palette */
#ex-softwares-7-Jeux_et_Divertissements a::before { content: '\f11b'; }  /* gamepad */
#ex-softwares-9-Maison_et_Hobbies a::before { content: '\f015'; }  /* house */
#ex-softwares-10-Rseau_et_Internet a::before { content: '\f6ff'; }  /* network-wired */
#ex-softwares-12-Serveurs a::before { content: '\f233'; }  /* server */
#ex-softwares-11-Utilitaires a::before { content: '\f0ad'; }  /* wrench */

#page_softwares_categories #softwares_explore-nav li:not(.current) a:hover {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

#page_softwares_categories #softwares_explore-nav li:not(.current) a:hover::before {
  color: var(--color-primary);
}

#page_softwares_categories #softwares_explore-nav li.current a,
#page_softwares_categories #softwares_explore-nav li.current a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

#page_softwares_categories #softwares_explore-nav li.current a::before {
  color: white;
}

/* Category content panels */
#page_softwares_categories .softwares_category-container {
  padding: var(--space-lg);
}

#page_softwares_categories .category-header {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-gray-800);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}

#page_softwares_categories .category-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-sm) 0 var(--space-lg);
}

#page_softwares_categories .category-items a {
  display: inline-block !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  padding: var(--space-sm) var(--space-md) !important;
  background: var(--color-gray-50) !important;
  border: 1px solid var(--color-gray-100) !important;
  border-radius: var(--radius-md);
  font-size: 13px !important;
  font-weight: 500;
  color: var(--color-gray-700) !important;
  text-decoration: none !important;
  transition: all var(--transition-fast);
}

#page_softwares_categories .category-items a:hover {
  display: inline-block !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  padding: var(--space-sm) var(--space-md) !important;
  background: var(--color-primary) !important;
  color: white !important;
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-sm);
}

/* Software list */
#page_softwares_categories ul.software-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#page_softwares_categories ul.software-list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--color-gray-50);
}

#page_softwares_categories ul.software-list li:last-child {
  border-bottom: 0;
}

#page_softwares_categories ul.software-list li a {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  gap: 0 var(--space-md);
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  text-decoration: none;
  color: var(--color-gray-700) !important;
  transition: background-color var(--transition-fast);
  border-left: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

#page_softwares_categories ul.software-list li a:hover {
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  grid-template-rows: auto auto !important;
  background: var(--color-gray-50);
  border-left: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  padding: var(--space-md) var(--space-lg);
}

#page_softwares_categories ul.software-list li a img {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

#page_softwares_categories .software-list-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-gray-800);
}

#page_softwares_categories .software-list-info {
  grid-column: 2;
  display: inline;
  font-size: 12px;
  color: var(--color-gray-500);
  margin-right: var(--space-md);
}

#page_softwares_categories .software-list-info b {
  font-weight: 600;
  color: var(--color-gray-600);
  margin-right: 2px;
}

/* ========================================
   SOFTWARES ITEM PAGE MODERNIZATION
   ======================================== */

#page_softwares_software .leftpanels > .leftpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  margin-bottom: var(--space-lg);
  float: none !important;
  width: 100% !important;
  box-sizing: border-box;
}

#page_softwares_software .leftpanels > .leftpanel > .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 !important;
  text-shadow: none !important;
  width: auto !important;
}

#page_softwares_software .leftpanels > .leftpanel > .leftpaneltitle i {
  color: var(--color-primary);
}

/* Kill floats in software detail */
#page_softwares_software .software-detail *,
#page_softwares_software .leftpanelreply * {
  float: none !important;
}

/* Software detail card */
#page_softwares_software .software-detail {
  padding: var(--space-lg);
}

/* Title with FA icon replacing old GIF */
#page_softwares_software .software-detail-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 22px;
  font-weight: 800;
  color: var(--color-gray-800);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-primary);
}

/* Hide old GIF icon, use FontAwesome cube instead */
#page_softwares_software .software-detail-title img {
  display: none;
}

#page_softwares_software .software-detail-title::before {
  content: '\f1b2';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 22px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-md);
}

/* Specs: clean two-column table layout
   CMS sets #softwares_panel div.software-detail-specs { width:428px; float:left }
   and child divs to display:block; height:24px; float:left; fixed widths.
   We need !important to override since CMS selector specificity is higher. */
#page_softwares_software .software-detail-specs {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  column-gap: var(--space-lg) !important;
  row-gap: 0 !important;
  float: none !important;
  width: auto !important;
  margin-bottom: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
}

/* Override CMS: #softwares_panel div.software-detail-specs div sets
   display:block; height:24px; float:left; fixed widths on ALL child divs */
#page_softwares_software .software-detail-specs div {
  float: none !important;
  height: auto !important;
  margin: 0 !important;
}

/* Hide all spec GIF icons - removed from grid flow */
#page_softwares_software .software-detail-specs div.specs-icon {
  display: none !important;
}

/* Labels: left column with FA icon in circle */
#page_softwares_software .software-detail-specs div.specs-label {
  display: flex !important;
  align-items: center;
  gap: var(--space-sm);
  width: auto !important;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 10px var(--space-sm) !important;
  border-bottom: 1px solid var(--color-gray-100);
  white-space: nowrap;
}

/* Last row: no bottom border */
#page_softwares_software .software-detail-specs div.specs-label.noborder,
#page_softwares_software .software-detail-specs div.specs-data.noborder {
  border-bottom: 0 !important;
}

/* FA icon circles on labels */
#page_softwares_software .software-detail-specs div.specs-label::before {
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 10px;
  color: white;
  background: var(--color-primary);
  width: 24px;
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-full);
}

/* Icon mapping (nth-child counts ALL siblings including display:none icons) */
/* Pattern: icon=1,label=2,data=3, icon=4,label=5,data=6, ... */
#page_softwares_software .specs-label:nth-child(3n+2)::before { content: '\f07c'; } /* default: folder */
#page_softwares_software .specs-label:nth-child(2)::before { content: '\f07c'; }  /* category */
#page_softwares_software .specs-label:nth-child(5)::before { content: '\f0a3'; }  /* licence */
#page_softwares_software .specs-label:nth-child(8)::before { content: '\f1ad'; }  /* editor */
#page_softwares_software .specs-label:nth-child(11)::before { content: '\f019'; } /* size */
#page_softwares_software .specs-label:nth-child(14)::before { content: '\f073'; } /* date */
#page_softwares_software .specs-label:nth-child(17)::before { content: '\f005'; } /* evaluation */
#page_softwares_software .specs-label:nth-child(20)::before { content: '\f109'; } /* platform */

/* Data values: right column */
#page_softwares_software .software-detail-specs div.specs-data {
  display: flex !important;
  align-items: center;
  width: auto !important;
  font-size: 14px;
  color: var(--color-gray-800) !important;
  font-weight: 600;
  padding: 10px var(--space-sm) 10px 0 !important;
  border-bottom: 1px solid var(--color-gray-100);
}

#page_softwares_software .specs-data a {
  color: var(--color-primary) !important;
  font-weight: 600;
}

/* Hide old star GIF images */
#page_softwares_software .specs-data img[src*="etoile"] {
  display: none !important;
}

/* Other spec data images (keep but constrain) */
#page_softwares_software .specs-data img:not([src*="etoile"]) {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

#page_softwares_software .noborder {
  border: 0 !important;
}

/* Style the (0 Votes) text */
#page_softwares_software .specs-data b {
  font-size: 12px;
  color: var(--color-gray-400);
  font-weight: 600;
}

/* Download action area - prominent CTA */
/* Override old CMS: #softwares_panel div.software-detail-action { width: 150px; float: left/right } */
#page_softwares_software #softwares_panel .software-detail-action {
  width: 100% !important;
  float: none !important;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-md);
  box-sizing: border-box;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

#page_softwares_software .software-detail-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

#page_softwares_software .software-detail-action a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: white !important;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background var(--transition-fast);
}

#page_softwares_software .software-detail-action a:hover {
  background: rgba(255, 255, 255, 0.25);
}

#page_softwares_software .software-detail-action a img {
  display: none;
}

/* FA download icon + "Télécharger" label */
#page_softwares_software .software-detail-action a::before {
  content: '\f019';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 18px;
}

#page_softwares_software .software-detail-action a::after {
  content: 'Télécharger';
  font-size: 15px;
  font-weight: 700;
}

#page_softwares_software .action-info {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
  margin-left: auto;
}

#page_softwares_software .action-info b {
  color: white !important;
  font-weight: 800;
  font-size: 16px;
}

/* Screenshot section with heading */
#page_softwares_software .software-detail-subtitle + .software-screenshot,
#page_softwares_software .software-screenshot {
  display: block;
  max-width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

/* Add "Capture d'écran" heading before screenshot */
#page_softwares_software .software-screenshot::before {
  content: none; /* can't use ::before on img, handled differently */
}

/* Section divider before screenshot */
#page_softwares_software .software-detail-subtitle {
  display: flex !important;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-gray-100);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* If subtitle is empty, show icon + text via two pseudo-elements */
#page_softwares_software .software-detail-subtitle:empty::before {
  content: '\f03e';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 14px;
  color: var(--color-primary);
}

#page_softwares_software .software-detail-subtitle:empty::after {
  content: "Capture d'\e9 cran";
  font-family: var(--font-sans);
  font-weight: 700;
}

/* Software description with heading */
#page_softwares_software .software-detail p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-gray-600);
  margin: 0 0 var(--space-md);
  padding: var(--space-md);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

/* Add "Description" heading before paragraph */
#page_softwares_software .software-detail p::before {
  content: 'Description';
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

/* Subtitle bar */
#page_softwares_software .leftpanelsubtitle {
  padding: var(--space-sm) var(--space-lg);
  font-size: 12px;
  color: var(--color-gray-500);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
  width: auto !important;
}

/* Comment/reply panel */
#page_softwares_software .leftpanelreply {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

#page_softwares_software .leftpanelreplytitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 !important;
  text-shadow: none !important;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: auto !important;
}

/* Replace comment PNG with FA icon */
#page_softwares_software .leftpanelreplytitle img {
  display: none;
}

#page_softwares_software .leftpanelreplytitle::before {
  content: '\f075';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 16px;
  color: var(--color-accent);
}

/* Vote area - scoped to the comment form only */
#page_softwares_software .leftpanelreply .XFormularDiv {
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* "Votre note" label before the vote dropdown */
#page_softwares_software .leftpanelreply .XFormularDiv::before {
  content: 'Votre note :';
  font-size: 12px;
  font-weight: 700;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding-top: var(--space-xs);
}

/* Vote dropdown */
#page_softwares_software .leftpanelreply .XFormularDiv #vote {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
  cursor: pointer;
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#page_softwares_software .leftpanelreply .XFormularDiv #vote:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(23, 76, 170, 0.1);
}

/* BBCode editor styling (shared for softwares + forum) */
#page_softwares_software .bbeditor,
#page_forum_newtopic .bbeditor {
  width: 100% !important;
  box-sizing: border-box;
  overflow: visible !important;
  padding: 0;
  flex-basis: 100%;
}

#page_softwares_software .bbeditorbuttonscontainer,
#page_forum_newtopic .bbeditorbuttonscontainer {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: var(--space-sm);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-bottom: 0;
  width: auto !important;
  box-sizing: border-box;
}

#page_softwares_software .bbeditorbuttons,
#page_forum_newtopic .bbeditorbuttons {
  display: flex;
  gap: 2px;
  align-items: center;
  margin-right: var(--space-sm);
}

#page_softwares_software .bbeditorbuttons img,
#page_forum_newtopic .bbeditorbuttons img {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  opacity: 0.6;
}

#page_softwares_software .bbeditorbuttons img:hover,
#page_forum_newtopic .bbeditorbuttons img:hover {
  background: var(--color-gray-200);
  opacity: 1;
}

/* Hide empty accesskey anchor tags in bbcode editor */
#page_softwares_software .bbeditorbuttons a,
#page_forum_newtopic .bbeditorbuttons a,
#page_forum_topic .bbeditorbuttons a {
  display: none;
}

/* bbeditorbuttons br tags */
#page_softwares_software .bbeditorbuttonscontainer br,
#page_forum_newtopic .bbeditorbuttonscontainer br,
#page_forum_topic .bbeditorbuttonscontainer br {
  display: none;
}

/* Textarea - full width within flex parent */
#page_softwares_software .leftpanelreply textarea {
  flex-basis: 100%;
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-md);
  font-size: 14px;
  font-family: var(--font-sans);
  line-height: 1.6;
  resize: vertical;
  min-height: 180px;
  outline: none;
  transition: border-color var(--transition-fast);
}

#page_softwares_software .leftpanelreply textarea:focus {
  border-color: var(--color-primary);
}

#page_softwares_software .leftpanels input[type="submit"] {
  display: inline-flex !important;
  float: none !important;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 12px 40px !important;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: var(--space-md);
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.3px;
  width: auto !important;
}

#page_softwares_software .leftpanels input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ========================================
   FORUM CATEGORY (TOPIC LIST) MODERNIZATION
   ======================================== */

:is(#page_forum_category, #page_forum_privates) .leftpanel.leftpanelnoborder {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  padding: 0;
  position: relative;
}

/* Kill all floats inside the forum topic list */
:is(#page_forum_category, #page_forum_privates) .leftpanel.leftpanelnoborder .forumtopicheader,
:is(#page_forum_category, #page_forum_privates) .leftpanel.leftpanelnoborder .forumtopic,
:is(#page_forum_category, #page_forum_privates) .leftpanel.leftpanelnoborder .forumtopicname,
:is(#page_forum_category, #page_forum_privates) .leftpanel.leftpanelnoborder .forumtopicmessages,
:is(#page_forum_category, #page_forum_privates) .leftpanel.leftpanelnoborder .forumtopicviews,
:is(#page_forum_category, #page_forum_privates) .leftpanel.leftpanelnoborder .forumtopiclastmsgdate {
  float: none !important;
}

/* Title bar */
:is(#page_forum_category, #page_forum_privates) .forumleftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
}

:is(#page_forum_category, #page_forum_privates) .forumleftpaneltitle i {
  color: var(--color-primary);
}

:is(#page_forum_category, #page_forum_privates) .forumleftpaneltitle a {
  color: var(--color-gray-800) !important;
  text-decoration: none;
}

:is(#page_forum_category, #page_forum_privates) .forumleftpaneltitle a:hover {
  color: var(--color-primary) !important;
}

/* Subtitle bar (moderators) */
:is(#page_forum_category, #page_forum_privates) .forumsubtitle {
  padding: var(--space-sm) var(--space-lg);
  font-size: 12px;
  color: var(--color-gray-500);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
  width: auto !important;
}

/* Tools dropdown - positioned absolutely */
:is(#page_forum_category, #page_forum_privates) .forumtopictools {
  float: none !important;
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 100 !important;
  margin: 0;
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolstitleex {
  position: static;
  width: auto;
  left: auto;
  top: auto;
  height: auto;
  padding: 0;
  margin-left: 0;
  background: none;
  border: none;
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolstitleex a {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-accent);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  color: white !important;
  text-decoration: none;
  transition: all var(--transition-fast);
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolstitleex a:hover {
  background: var(--color-accent-dark);
  box-shadow: var(--shadow-sm);
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolstitle {
  position: static;
  width: auto;
  left: auto;
  top: auto;
  height: auto;
  padding: var(--space-xs) var(--space-md);
  margin-left: 0;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  color: white;
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolstitle a {
  color: white !important;
  text-decoration: none;
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolstitle img {
  display: none;
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolsdata {
  position: absolute;
  right: 0;
  top: 100%;
  left: auto;
  width: 220px;
  margin-top: var(--space-xs);
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) 0;
  z-index: 200;
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolsdatabody a {
  display: block;
  padding: var(--space-xs) var(--space-md);
  color: var(--color-gray-700) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolsdatabody a:hover {
  background: var(--color-gray-50);
  color: var(--color-primary) !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolsdatabody img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: var(--space-xs);
  opacity: 0.5;
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolsdatabody a:hover img {
  opacity: 0.8;
}

/* Add FA icons via ::before for menu items with data-src (broken images) */
:is(#page_forum_category, #page_forum_privates) .forumtopictoolsdatabody img[data-src] {
  display: none;
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolsfooter {
  display: none;
}

/* Topic header row */
:is(#page_forum_category, #page_forum_privates) .forumtopicheader {
  display: grid;
  grid-template-columns: 1fr 80px 80px 220px;
  gap: 0;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
  width: 100% !important;
  box-sizing: border-box;
  margin: 0;
  height: auto;
  overflow: visible;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
}

:is(#page_forum_category, #page_forum_privates) .forumtopicheader br {
  display: none;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicheader .forumtopicname {
  width: auto;
  padding-left: 0;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicheader .forumtopicmessages,
:is(#page_forum_category, #page_forum_privates) .forumtopicheader .forumtopicviews {
  text-align: center;
  width: auto;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicheader .forumtopiclastmsgdate {
  text-align: right;
  width: auto;
}

/* Topic rows */
:is(#page_forum_category, #page_forum_privates) .forumtopic {
  display: grid;
  grid-template-columns: 1fr 80px 80px 220px;
  gap: 0;
  align-items: center;
  padding: var(--space-md) var(--space-lg) !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
  background: var(--color-white) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-radius: 0 !important;
  transition: background-color var(--transition-fast);
}

:is(#page_forum_category, #page_forum_privates) .forumtopic:hover {
  background: var(--color-gray-50) !important;
}

/* Topic name column */
:is(#page_forum_category, #page_forum_privates) .forumtopicname {
  width: auto !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

/* Hide old PNG read/unread icons */
:is(#page_forum_category, #page_forum_privates) .forumtopicimgread,
:is(#page_forum_category, #page_forum_privates) .forumtopicimgunread {
  display: none !important;
}

/* FA icon before topic name */
:is(#page_forum_category, #page_forum_privates) .forumtopicname::before {
  content: '\f075';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 400;
  font-size: 14px;
  color: var(--color-gray-300);
  flex-shrink: 0;
  margin-right: 2px;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicunread .forumtopicname::before {
  font-weight: 900;
  color: var(--color-accent);
}

:is(#page_forum_category, #page_forum_privates) .forumtopicname > a:not(.forumtopicimgunread):not(.forumtopicimgread) {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-800) !important;
  text-decoration: none;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicunread .forumtopicname > a:not(.forumtopicimgunread):not(.forumtopicimgread) {
  color: var(--color-primary) !important;
  font-weight: 700;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicsecondline {
  width: 100%;
  font-size: 11px;
  color: var(--color-gray-400);
  margin-top: 2px;
  text-align: right;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicsecondline a {
  color: var(--color-gray-500) !important;
  font-weight: 600;
}

/* Inline topic pages */
:is(#page_forum_category, #page_forum_privates) .forumtopicpages {
  display: inline;
  margin: 0;
  padding: 0;
  float: none !important;
  width: auto !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicpages .XPagesInner {
  display: inline;
  font-size: 11px;
  color: var(--color-gray-400);
}

:is(#page_forum_category, #page_forum_privates) .forumtopicpages a {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--color-gray-500) !important;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicpages a:hover {
  background: var(--color-primary);
  color: white !important;
}

/* Messages/Views columns */
:is(#page_forum_category, #page_forum_privates) .forumtopic .forumtopicmessages,
:is(#page_forum_category, #page_forum_privates) .forumtopic .forumtopicviews {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-500);
  width: auto !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopic .forumtopicmessages a {
  color: var(--color-gray-600);
  text-decoration: none;
  font-weight: 700;
}

/* Last message date column */
:is(#page_forum_category, #page_forum_privates) .forumtopic .forumtopiclastmsgdate {
  text-align: right;
  font-size: 12px;
  color: var(--color-gray-500);
  width: auto !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopiclastmsgdate a {
  color: var(--color-gray-600);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
}

:is(#page_forum_category, #page_forum_privates) .forumtopiclastmsgdate a:hover {
  color: var(--color-primary);
}

/* Last message secondline (Par author) */
:is(#page_forum_category, #page_forum_privates) .forumtopiclastmsgdate .forumtopicsecondline {
  width: auto;
}

:is(#page_forum_category, #page_forum_privates) .forumtopiclastmsgdate .forumtopicsecondline a {
  color: var(--color-primary) !important;
}

/* Topic name secondline (Créé date Par author) */
:is(#page_forum_category, #page_forum_privates) .forumtopicname .forumtopicsecondline {
  flex-basis: 100%;
}

/* Bottom pagination */
:is(#page_forum_category, #page_forum_privates) .XPages {
  padding: var(--space-md) var(--space-lg);
}

:is(#page_forum_category, #page_forum_privates) .XPages .XPagesInner {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Bottom login/category panel */
:is(#page_forum_category, #page_forum_privates) .forumloginpanel.forumloginpanelcategory {
  margin: 0 var(--space-lg) var(--space-lg);
  width: auto;
  background: var(--color-white) !important;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  font-size: 13px;
  color: var(--color-gray-600);
}

:is(#page_forum_category, #page_forum_privates) .forumloginpanel .forummessagecategories {
  float: none !important;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-gray-100);
}

:is(#page_forum_category, #page_forum_privates) .forumloginpanel .forummessagecategories form {
  display: inline;
}

:is(#page_forum_category, #page_forum_privates) .forumloginpanel .forummessagecategories .XFormularDiv {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

:is(#page_forum_category, #page_forum_privates) .forumloginpanel .forummessagecategories .XFormularDiv input[type="hidden"] {
  display: none;
}

:is(#page_forum_category, #page_forum_privates) .forumloginpanel .forummessagecategories a {
  color: var(--color-gray-600);
  font-weight: 700;
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

:is(#page_forum_category, #page_forum_privates) .forumloginpanel select {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition-fast);
}

:is(#page_forum_category, #page_forum_privates) .forumloginpanel select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(30, 95, 208, 0.1);
}

:is(#page_forum_category, #page_forum_privates) .forumloginpanel input[type="submit"] {
  background: var(--color-primary);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-lg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

:is(#page_forum_category, #page_forum_privates) .forumloginpanel input[type="submit"]:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}

/* Bottom action links */
:is(#page_forum_category, #page_forum_privates) .forumloginpanel .forumcategorylinks {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin: 0;
  font-size: 13px;
}

:is(#page_forum_category, #page_forum_privates) .forumloginpanel .forumcategorylinks img {
  display: none !important;
}

:is(#page_forum_category, #page_forum_privates) .forumloginpanel .forumcategorylinks a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

:is(#page_forum_category, #page_forum_privates) .forumloginpanel .forumcategorylinks a:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

/* FA icons for bottom action links */
:is(#page_forum_category, #page_forum_privates) .forumcategorylinks a[href*="newtopic-"]::before {
  content: '\f303';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 12px;
}

:is(#page_forum_category, #page_forum_privates) .forumcategorylinks a[href*="poll"]::before {
  content: '\f681';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 12px;
}

:is(#page_forum_category, #page_forum_privates) .forumcategorylinks a[href*="categories"]::before {
  content: '\f0c9';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 12px;
}

/* ========================================
   FORUM NEW TOPIC PAGE MODERNIZATION
   All selectors scoped to .leftpanels to
   avoid breaking header search/login
   ======================================== */

#page_forum_newtopic .leftpanels > .leftpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-lg);
  float: none !important;
  width: 100% !important;
  box-sizing: border-box;
}

#page_forum_newtopic .leftpanels .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  text-shadow: none !important;
  width: auto !important;
}

/* Kill ALL floats and fixed widths from old CMS CSS */
#page_forum_newtopic .leftpanels .XFormularDiv,
#page_forum_newtopic .leftpanels .XFormularDiv * {
  float: none !important;
}

/* Form wrapper */
#page_forum_newtopic .leftpanels #postsubject {
  border: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  width: auto !important;
}

/* Form container - override old CMS collapsing */
#page_forum_newtopic .leftpanels .XFormularDiv {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: var(--space-lg);
  text-align: left !important;
}

/* Category label (readonly input) */
#page_forum_newtopic .leftpanels .inputreadonly {
  display: inline-block;
  width: auto !important;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  font-size: 13px;
  font-family: var(--font-sans);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

/* Subject input */
#page_forum_newtopic .leftpanels input[type="text"]:not(.inputreadonly) {
  display: block;
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 15px;
  font-family: var(--font-sans);
  background: var(--color-white);
  outline: none;
  transition: all var(--transition-fast);
  margin-bottom: var(--space-lg);
}

#page_forum_newtopic .leftpanels input[type="text"]:not(.inputreadonly):focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
}

/* Smiley bar - override old CMS float: right + padding-top: 50px */
#page_forum_newtopic .leftpanels .forumtopsmileys {
  display: flex !important;
  flex-wrap: wrap;
  gap: 3px;
  padding: var(--space-sm) !important;
  margin-bottom: var(--space-lg);
  align-items: center;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  max-height: 80px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
  width: auto !important;
}

#page_forum_newtopic .leftpanels .forumtopsmiley {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

#page_forum_newtopic .leftpanels .forumtopsmiley:hover {
  background: var(--color-gray-200);
  transform: scale(1.15);
}

#page_forum_newtopic .leftpanels .forumtopsmiley img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

#page_forum_newtopic .leftpanels .forumtopsmileys > a {
  font-size: 11px;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: auto;
  padding-left: var(--space-sm);
  white-space: nowrap;
}

/* BBCode editor - override old CMS fixed widths */
#page_forum_newtopic .leftpanels .bbeditor {
  padding: 0;
  width: 100% !important;
  box-sizing: border-box;
  overflow: visible !important;
}

#page_forum_newtopic .leftpanels .bbeditorbuttonscontainer {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: var(--space-sm);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  width: auto !important;
  box-sizing: border-box;
}

#page_forum_newtopic .leftpanels .bbeditorbuttonscontainer br {
  display: none;
}

#page_forum_newtopic .leftpanels .bbeditorbuttons {
  display: flex;
  gap: 1px;
  align-items: center;
  padding-right: var(--space-sm);
  margin-right: var(--space-sm);
  border-right: 1px solid var(--color-gray-200);
}

#page_forum_newtopic .leftpanels .bbeditorbuttons:last-child {
  border-right: 0;
  padding-right: 0;
  margin-right: 0;
}

#page_forum_newtopic .leftpanels .bbeditorbuttons a {
  display: none;
}

#page_forum_newtopic .leftpanels .bbeditorbuttons img {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  opacity: 0.55;
}

#page_forum_newtopic .leftpanels .bbeditorbuttons img:hover {
  background: var(--color-gray-200);
  opacity: 1;
}

/* Textarea - override old CMS width: 1045px !important */
#page_forum_newtopic .leftpanels textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--color-gray-200);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-md) !important;
  font-size: 14px;
  font-family: var(--font-sans);
  line-height: 1.7;
  resize: vertical;
  min-height: 280px;
  outline: none;
  transition: border-color var(--transition-fast);
}

#page_forum_newtopic .leftpanels textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.08);
}

/* Submit button - override old CMS float: right */
#page_forum_newtopic .leftpanels input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  margin-left: auto;
  margin-top: var(--space-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 12px 40px !important;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all var(--transition-fast);
  width: auto !important;
  box-shadow: var(--shadow-sm);
  text-transform: none;
}

#page_forum_newtopic .leftpanels input[type="submit"]:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

/* Reply spacer */
#page_forum_newtopic .leftpanels .leftpanelreplymore {
  display: none;
}

/* ========================================
   FORUM EMOTICONS PAGE
   ======================================== */

#page_forum_emoticons .leftpanel.smileypanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

#page_forum_emoticons .forumsmiley {
  width: 110px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  font-size: 11px;
  color: var(--color-gray-500);
  font-family: var(--font-mono, monospace);
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: var(--space-xs);
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}

#page_forum_emoticons .forumsmiley:hover {
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

#page_forum_emoticons .forumsmiley img {
  max-width: 64px;
  max-height: 64px;
  object-fit: contain;
}

#page_forum_emoticons .XPages {
  display: flex;
  justify-content: center;
  padding: var(--space-md) 0;
}

#page_forum_emoticons .XPages .XPagesInner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

#page_forum_emoticons .XPages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-600);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  transition: all var(--transition-fast);
  text-decoration: none;
}

#page_forum_emoticons .XPages a:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* ========================================
   FORUM PRIVATE MESSAGE - reuse newtopic styles
   The private page has no .leftpanels wrapper,
   so we scope directly to .leftpanelreplyforum.
   ======================================== */

#page_forum_private .leftpanel.leftpanelreplyforum {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-lg);
  float: none !important;
  width: 100% !important;
  box-sizing: border-box;
}

#page_forum_private .leftpanelreplyforum .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  text-shadow: none !important;
  width: auto !important;
}

#page_forum_private .leftpanelreplyforum .XFormularDiv,
#page_forum_private .leftpanelreplyforum .XFormularDiv * {
  float: none !important;
}

#page_forum_private .leftpanelreplyforum #postsubject {
  border: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  width: auto !important;
}

#page_forum_private .leftpanelreplyforum .XFormularDiv {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: var(--space-lg);
  text-align: left !important;
}

#page_forum_private .leftpanelreplyforum .inputreadonly {
  display: inline-block;
  width: auto !important;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  font-size: 13px;
  font-family: var(--font-sans);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

#page_forum_private .leftpanelreplyforum input[type="text"]:not(.inputreadonly) {
  display: block;
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 15px;
  font-family: var(--font-sans);
  background: var(--color-white);
  outline: none;
  transition: all var(--transition-fast);
  margin-bottom: var(--space-lg);
}

#page_forum_private .leftpanelreplyforum input[type="text"]:not(.inputreadonly):focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
}

#page_forum_private .leftpanelreplyforum .forumtopsmileys {
  display: flex !important;
  flex-wrap: wrap;
  gap: 3px;
  padding: var(--space-sm) !important;
  margin-bottom: var(--space-lg);
  align-items: center;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  max-height: 80px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
  width: auto !important;
}

#page_forum_private .leftpanelreplyforum .forumtopsmiley {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

#page_forum_private .leftpanelreplyforum .forumtopsmiley:hover {
  background: var(--color-gray-200);
  transform: scale(1.15);
}

#page_forum_private .leftpanelreplyforum .forumtopsmiley img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

#page_forum_private .leftpanelreplyforum .forumtopsmileys > a {
  font-size: 11px;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: auto;
  padding-left: var(--space-sm);
  white-space: nowrap;
}

#page_forum_private .leftpanelreplyforum .bbeditor {
  padding: 0;
  width: 100% !important;
  box-sizing: border-box;
  overflow: visible !important;
}

#page_forum_private .leftpanelreplyforum .bbeditorbuttonscontainer {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: var(--space-sm);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  width: auto !important;
  box-sizing: border-box;
}

#page_forum_private .leftpanelreplyforum .bbeditorbuttonscontainer br {
  display: none;
}

#page_forum_private .leftpanelreplyforum .bbeditorbuttons {
  display: flex;
  gap: 1px;
  align-items: center;
  padding-right: var(--space-sm);
  margin-right: var(--space-sm);
  border-right: 1px solid var(--color-gray-200);
}

#page_forum_private .leftpanelreplyforum .bbeditorbuttons:last-child {
  border-right: 0;
  padding-right: 0;
  margin-right: 0;
}

#page_forum_private .leftpanelreplyforum .bbeditorbuttons a {
  display: none;
}

#page_forum_private .leftpanelreplyforum .bbeditorbuttons img {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  opacity: 0.55;
}

#page_forum_private .leftpanelreplyforum .bbeditorbuttons img:hover {
  background: var(--color-gray-200);
  opacity: 1;
}

#page_forum_private .leftpanelreplyforum textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--color-gray-200);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-md) !important;
  font-size: 14px;
  font-family: var(--font-sans);
  line-height: 1.7;
  resize: vertical;
  min-height: 280px;
  outline: none;
  transition: border-color var(--transition-fast);
}

#page_forum_private .leftpanelreplyforum textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.08);
}

#page_forum_private .leftpanelreplyforum input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  margin-left: auto;
  margin-top: var(--space-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 12px 40px !important;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all var(--transition-fast);
  width: auto !important;
  box-shadow: var(--shadow-sm);
  text-transform: none;
}

#page_forum_private .leftpanelreplyforum input[type="submit"]:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

#page_forum_private .leftpanelreplyforum .leftpanelreplymore {
  display: none;
}

#page_forum_private .leftpanelreplyforum select {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  font-size: 13px;
  background: var(--color-white);
  color: var(--color-gray-700);
  margin-bottom: var(--space-md);
}

/* ========================================
   NEWSLETTER PAGE MODERNIZATION
   ======================================== */

#page_newsletter_main .leftpanels > .leftpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

#page_newsletter_main .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 !important;
  text-shadow: none !important;
}

#page_newsletter_main .leftpaneltitle i {
  color: var(--color-primary);
}

#page_newsletter_main .leftpanelcontent {
  padding: var(--space-lg) var(--space-xl);
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-gray-600);
}

#page_newsletter_main .XFormularDiv {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

#page_newsletter_main input[type="text"] {
  flex: 1;
  min-width: 200px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--color-gray-50);
  outline: none;
  transition: all var(--transition-fast);
}

#page_newsletter_main input[type="text"]:focus {
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
}

#page_newsletter_main input[type="submit"] {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

#page_newsletter_main input[type="submit"]:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

#page_newsletter_main input[type="submit"][value="Se désinscrire"] {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
}

#page_newsletter_main input[type="submit"][value="Se désinscrire"]:hover {
  background: var(--color-gray-300);
}

/* ========================================
   FORUM TOPIC (MESSAGE THREAD) MODERNIZATION
   ======================================== */

/* All panels: consistent full width */
#page_forum_topic .leftpanels > .leftpanel {
  width: 100% !important;
  box-sizing: border-box;
}

/* Topic tools dropdown */
#page_forum_topic .forumtopictools {
  float: none !important;
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 100 !important;
  margin: 0;
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

#page_forum_topic .forumtopictoolstitleex {
  position: static;
  width: auto;
  left: auto;
  top: auto;
  height: auto;
  padding: 0;
  margin-left: 0;
  background: none;
  border: none;
}

#page_forum_topic .forumtopictoolstitleex a {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-accent);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  color: white !important;
  text-decoration: none;
  transition: all var(--transition-fast);
}

#page_forum_topic .forumtopictoolstitleex a:hover {
  background: var(--color-accent-dark);
  box-shadow: var(--shadow-sm);
}

#page_forum_topic .forumtopictoolstitle {
  position: static;
  width: auto;
  left: auto;
  top: auto;
  height: auto;
  padding: var(--space-xs) var(--space-md);
  margin-left: 0;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  color: white;
}

#page_forum_topic .forumtopictoolstitle a {
  color: white !important;
  text-decoration: none;
}

#page_forum_topic .forumtopictoolstitle img {
  display: none;
}

#page_forum_topic .forumtopictoolsdata {
  position: absolute;
  right: 0;
  top: 100%;
  left: auto;
  width: 220px;
  margin-top: var(--space-xs);
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) 0;
  z-index: 200;
}

#page_forum_topic .forumtopictoolsdatabody a {
  display: block;
  padding: var(--space-xs) var(--space-md);
  color: var(--color-gray-700) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
}

#page_forum_topic .forumtopictoolsdatabody a:hover {
  background: var(--color-gray-50);
  color: var(--color-primary) !important;
}

#page_forum_topic .forumtopictoolsdatabody img {
  display: none;
}

#page_forum_topic .forumtopictoolsfooter {
  display: none;
}

/* Topic title panel */
#page_forum_topic .forumleftpanelex {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  position: relative;
  margin-bottom: var(--space-sm);
}

#page_forum_topic .forumleftpaneltitleex {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg) !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
}

#page_forum_topic .forumleftpaneltitleex i {
  color: var(--color-primary);
}

#page_forum_topic .forumleftpaneltitleex a {
  color: var(--color-primary) !important;
  text-decoration: none;
}

/* Navigation bar (prev/next topic, category selector) */
#page_forum_topic .leftpaneltitlegreyex {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-600) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: var(--space-sm) var(--space-lg) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-gray-100);
  text-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  width: auto !important;
}

#page_forum_topic .forummessagepages a {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}

#page_forum_topic .forummessagepages a:hover {
  text-decoration: underline;
}

#page_forum_topic .forummessagecategories {
  font-size: 13px;
  color: var(--color-gray-600);
}

#page_forum_topic .forummessagecategories a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

#page_forum_topic .forummessagecategories select {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-xs);
  font-size: 12px;
  outline: none;
}

#page_forum_topic .forummessagecategories input[type="submit"] {
  background: var(--color-primary);
  color: white;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 2px var(--space-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Kill ALL floats and widths inside forum topic messages */
#page_forum_topic .forummessage *,
#page_forum_topic .leftpaneltitlegreyex *,
#page_forum_topic .forumleftpanelex *,
#page_forum_topic #forumfooterex * {
  float: none !important;
}

/* Message posts */
#page_forum_topic .forummessage {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-md);
  display: grid !important;
  grid-template-columns: 140px 1fr;
  width: 100% !important;
  box-sizing: border-box;
  float: none !important;
}

/* Anchor spans inside messages must not be grid items */
#page_forum_topic .forummessage > span {
  display: none;
}

/* Explicit grid placement for message children */
#page_forum_topic .forummessage > .forummessageinfo {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

#page_forum_topic .forummessage > .forummessagetext {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* User info sidebar */
#page_forum_topic .forummessageinfo {
  background: var(--color-gray-50);
  padding: var(--space-sm);
  text-align: center;
  border-right: 1px solid var(--color-gray-100);
  width: auto !important;
  min-width: 0;
  word-break: break-word;
  box-sizing: border-box;
}

/* Constrain all images inside user info */
#page_forum_topic .forummessageinfo img {
  max-width: 100%;
  height: auto;
}

/* Rank display */
#page_forum_topic .forumrank {
  font-size: 11px;
  color: var(--color-gray-500);
  margin-bottom: var(--space-xs);
  overflow: hidden;
  text-overflow: ellipsis;
}

#page_forum_topic .forummessageinfo > a {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary) !important;
  text-decoration: none;
  margin-bottom: var(--space-sm);
}

#page_forum_topic .forumavatar {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-sm);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid var(--color-gray-200);
}

#page_forum_topic .forumavatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  padding: 0;
  margin: 0;
}

/* User action icons */
#page_forum_topic .forummessageutils {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: var(--space-xs) 0 0 0 !important;
  width: auto !important;
  height: auto !important;
  box-sizing: border-box;
  padding: 0;
}

#page_forum_topic .forummessageutils a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-400) !important;
  font-size: 11px;
  transition: all var(--transition-fast);
  text-decoration: none;
}

#page_forum_topic .forummessageutils a:hover {
  background: var(--color-primary);
  color: white !important;
  border-color: var(--color-primary);
}

/* Fix broken FA icon: fa-email (doesn't exist in FA) -> envelope */
#page_forum_topic .forummessageutils i.fa-email::before {
  content: '\f0e0';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
}

/* Fix broken FA icon: fa-comment-plus (doesn't exist in FA) -> comments */
#page_forum_topic .messageheaderimages i.fa-comment-plus::before {
  content: '\f086';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
}

/* Message content area */
#page_forum_topic .forummessagetext {
  float: none !important;
  width: auto !important;
  display: flex;
  flex-direction: column;
}

/* Message subject/header bar */
#page_forum_topic .forummessagesubject {
  background: var(--color-gray-50);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-gray-100);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-gray-800);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: auto !important;
}

/* Action icons in header */
#page_forum_topic .messageheaderimages {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
  order: 2;
}

#page_forum_topic .messageheaderimages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-400) !important;
  font-size: 12px;
  transition: all var(--transition-fast);
  text-decoration: none;
}

#page_forum_topic .messageheaderimages a:hover {
  background: var(--color-primary);
  color: white !important;
  border-color: var(--color-primary);
}

/* Delete icon: red on hover */
#page_forum_topic .messageheaderimages a:last-child:hover {
  background: #e53e3e;
  border-color: #e53e3e;
}

/* Subject second line (date + author) */
#page_forum_topic .forummessagesubjectsecondline {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-gray-500);
}

#page_forum_topic .forummessagesubjectsecondline a {
  color: var(--color-primary) !important;
  font-weight: 600;
  text-decoration: none;
}

/* Message body */
#page_forum_topic .forummessagetextbody {
  padding: var(--space-md) var(--space-lg);
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-gray-700);
  flex: 1;
  width: auto !important;
  overflow-wrap: break-word;
}

#page_forum_topic .forummessagetextbody img {
  max-width: 100%;
  height: auto;
}

/* Signature */
#page_forum_topic .forummessagesignature {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--color-gray-200);
  font-size: 12px;
  color: var(--color-gray-400);
  font-style: italic;
}

/* Message footer */
#page_forum_topic .forummessagetextfooter {
  display: none;
}

/* Bottom footer bar */
#page_forum_topic #forumfooterex {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-100);
  padding: var(--space-sm) var(--space-lg);
  margin-top: var(--space-sm);
}

#page_forum_topic .forummessagefooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 13px;
  width: auto !important;
}

#page_forum_topic .forummessagefooter a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

#page_forum_topic .forummessagefooter select {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-xs);
  font-size: 12px;
  outline: none;
}

#page_forum_topic .forummessagefooter input[type="submit"] {
  background: var(--color-primary);
  color: white;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 2px var(--space-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Reply form */
#page_forum_topic .leftpanelreply {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  margin-bottom: var(--space-lg);
  width: 100% !important;
  box-sizing: border-box;
  padding: 0 !important;
}

/* Kill all floats and fixed widths inside reply block */
#page_forum_topic .leftpanelreply * {
  float: none !important;
}

#page_forum_topic .leftpanelreply #quickreplyform {
  width: auto !important;
  border: 0 !important;
  padding: 0;
}

/* Reply block title (the outer .leftpaneltitle wrapper) */
#page_forum_topic .leftpanelreply > .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: var(--space-md) var(--space-lg) !important;
  line-height: 1.4 !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  text-shadow: none !important;
  width: auto !important;
  letter-spacing: 0 !important;
  overflow: visible !important;
}

/* Reply icon (inner .leftpanelreplytitle) */
#page_forum_topic .leftpanelreplytitle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  width: auto !important;
}

#page_forum_topic .leftpanelreply .bbeditor {
  padding: 0 var(--space-lg) var(--space-md);
  width: auto !important;
  overflow: visible !important;
}

#page_forum_topic .leftpanelreply .bbeditorbuttonscontainer {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: var(--space-sm);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  width: auto !important;
}

#page_forum_topic .leftpanelreply .bbeditorbuttons {
  display: flex;
  gap: 2px;
  align-items: center;
  margin-right: var(--space-sm);
}

#page_forum_topic .leftpanelreply .bbeditorbuttons img {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  opacity: 0.7;
}

#page_forum_topic .leftpanelreply .bbeditorbuttons img:hover {
  background: var(--color-gray-200);
  opacity: 1;
}

#page_forum_topic .leftpanelreply textarea {
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-md);
  font-size: 14px;
  font-family: var(--font-sans);
  line-height: 1.6;
  resize: vertical;
  min-height: 200px;
  outline: none;
}

#page_forum_topic .leftpanelreply textarea:focus {
  border-color: var(--color-primary);
}

#page_forum_topic .leftpanelreply input[type="submit"] {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-xl);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin: var(--space-md) var(--space-lg) var(--space-lg);
  display: inline-block !important;
}

#page_forum_topic .leftpanelreply input[type="submit"]:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Smiley grid for topic reply */
#page_forum_topic .forumtopsmileys {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-sm);
  align-items: center;
}

#page_forum_topic .forumtopsmiley {
  display: inline-block;
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

#page_forum_topic .forumtopsmiley:hover {
  background: var(--color-gray-100);
}

#page_forum_topic .forumtopsmileys > a {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: var(--space-sm);
}

#page_forum_topic .leftpanelreplymore {
  display: none;
}

/* Vote select in reply form */
#page_forum_topic #vote {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  font-size: 13px;
  margin: var(--space-md) var(--space-lg);
  outline: none;
  cursor: pointer;
}

/* ========================================
   FORUM TOPIC LIST PAGES (shared)
   lateststopics, todaytopics, yourtopics,
   notifications
   ======================================== */

#page_forum_lateststopics .leftpanel,
#page_forum_todaytopics .leftpanel,
#page_forum_yourtopics .leftpanel,
#page_forum_notifications .leftpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  padding: 0;
  position: relative;
}

/* Title bar */
#page_forum_lateststopics .forumleftpaneltitle,
#page_forum_todaytopics .forumleftpaneltitle,
#page_forum_yourtopics .forumleftpaneltitle,
#page_forum_notifications .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
}

#page_forum_lateststopics .forumleftpaneltitle i,
#page_forum_todaytopics .forumleftpaneltitle i,
#page_forum_yourtopics .forumleftpaneltitle i,
#page_forum_notifications .leftpaneltitle i {
  color: var(--color-primary);
}

#page_forum_lateststopics .forumleftpaneltitle a,
#page_forum_todaytopics .forumleftpaneltitle a,
#page_forum_yourtopics .forumleftpaneltitle a,
#page_forum_notifications .leftpaneltitle a {
  color: var(--color-gray-800) !important;
  text-decoration: none;
}

#page_forum_lateststopics .forumleftpaneltitle a:hover,
#page_forum_todaytopics .forumleftpaneltitle a:hover,
#page_forum_yourtopics .forumleftpaneltitle a:hover,
#page_forum_notifications .leftpaneltitle a:hover {
  color: var(--color-primary) !important;
}

/* Tools dropdown */
#page_forum_lateststopics .forumtopictools,
#page_forum_todaytopics .forumtopictools,
#page_forum_yourtopics .forumtopictools,
#page_forum_notifications .forumtopictools {
  float: none !important;
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 100 !important;
  margin: 0;
}

#page_forum_lateststopics .forumtopictoolstitle,
#page_forum_todaytopics .forumtopictoolstitle,
#page_forum_yourtopics .forumtopictoolstitle,
#page_forum_notifications .forumtopictoolstitle {
  position: static;
  width: auto;
  left: auto;
  top: auto;
  height: auto;
  padding: var(--space-xs) var(--space-md);
  margin-left: 0;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 12px;
}

#page_forum_lateststopics .forumtopictoolstitle a,
#page_forum_todaytopics .forumtopictoolstitle a,
#page_forum_yourtopics .forumtopictoolstitle a,
#page_forum_notifications .forumtopictoolstitle a {
  color: white !important;
  text-decoration: none;
}

#page_forum_lateststopics .forumtopictoolstitle img,
#page_forum_todaytopics .forumtopictoolstitle img,
#page_forum_yourtopics .forumtopictoolstitle img,
#page_forum_notifications .forumtopictoolstitle img {
  display: none;
}

#page_forum_lateststopics .forumtopictoolsdata,
#page_forum_todaytopics .forumtopictoolsdata,
#page_forum_yourtopics .forumtopictoolsdata,
#page_forum_notifications .forumtopictoolsdata {
  position: absolute;
  right: 0;
  top: 100%;
  left: auto;
  width: 220px;
  margin: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

#page_forum_lateststopics .forumtopictoolsdatabody a,
#page_forum_todaytopics .forumtopictoolsdatabody a,
#page_forum_yourtopics .forumtopictoolsdatabody a,
#page_forum_notifications .forumtopictoolsdatabody a {
  display: block;
  padding: var(--space-xs) var(--space-md);
  color: var(--color-gray-700) !important;
  font-size: 13px;
  font-weight: 500;
}

#page_forum_lateststopics .forumtopictoolsdatabody a:hover,
#page_forum_todaytopics .forumtopictoolsdatabody a:hover,
#page_forum_yourtopics .forumtopictoolsdatabody a:hover,
#page_forum_notifications .forumtopictoolsdatabody a:hover {
  background: var(--color-gray-50);
  color: var(--color-primary) !important;
}

#page_forum_lateststopics .forumtopictoolsfooter,
#page_forum_todaytopics .forumtopictoolsfooter,
#page_forum_yourtopics .forumtopictoolsfooter,
#page_forum_notifications .forumtopictoolsfooter {
  display: none;
}

/* Kill all floats inside topic list */
#page_forum_lateststopics .leftpanel .forumtopicheader,
#page_forum_lateststopics .leftpanel .forumtopic,
#page_forum_lateststopics .leftpanel .forumtopicname,
#page_forum_lateststopics .leftpanel .forumtopicmessages,
#page_forum_lateststopics .leftpanel .forumtopicviews,
#page_forum_lateststopics .leftpanel .forumtopiclastmsgdate,
#page_forum_todaytopics .leftpanel .forumtopicheader,
#page_forum_todaytopics .leftpanel .forumtopic,
#page_forum_todaytopics .leftpanel .forumtopicname,
#page_forum_todaytopics .leftpanel .forumtopicmessages,
#page_forum_todaytopics .leftpanel .forumtopicviews,
#page_forum_todaytopics .leftpanel .forumtopiclastmsgdate,
#page_forum_yourtopics .leftpanel .forumtopicheader,
#page_forum_yourtopics .leftpanel .forumtopic,
#page_forum_yourtopics .leftpanel .forumtopicname,
#page_forum_yourtopics .leftpanel .forumtopicmessages,
#page_forum_yourtopics .leftpanel .forumtopicviews,
#page_forum_yourtopics .leftpanel .forumtopiclastmsgdate,
#page_forum_notifications .leftpanel .forumtopicheader,
#page_forum_notifications .leftpanel .forumtopic,
#page_forum_notifications .leftpanel .forumtopicname,
#page_forum_notifications .leftpanel .forumtopicmessages,
#page_forum_notifications .leftpanel .forumtopicviews,
#page_forum_notifications .leftpanel .forumtopiclastmsgdate {
  float: none !important;
}

/* Topic header row */
#page_forum_lateststopics .forumtopicheader,
#page_forum_todaytopics .forumtopicheader,
#page_forum_yourtopics .forumtopicheader,
#page_forum_notifications .forumtopicheader {
  display: grid;
  grid-template-columns: 1fr 80px 80px 220px;
  gap: 0;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
  width: 100% !important;
  box-sizing: border-box;
  margin: 0;
  height: auto;
  overflow: visible;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
}

#page_forum_lateststopics .forumtopicheader br,
#page_forum_todaytopics .forumtopicheader br,
#page_forum_yourtopics .forumtopicheader br,
#page_forum_notifications .forumtopicheader br {
  display: none;
}

#page_forum_lateststopics .forumtopicheader .forumtopicname,
#page_forum_todaytopics .forumtopicheader .forumtopicname,
#page_forum_yourtopics .forumtopicheader .forumtopicname,
#page_forum_notifications .forumtopicheader .forumtopicname {
  width: auto;
  padding-left: 0;
}

#page_forum_lateststopics .forumtopicheader .forumtopicmessages,
#page_forum_lateststopics .forumtopicheader .forumtopicviews,
#page_forum_todaytopics .forumtopicheader .forumtopicmessages,
#page_forum_todaytopics .forumtopicheader .forumtopicviews,
#page_forum_yourtopics .forumtopicheader .forumtopicmessages,
#page_forum_yourtopics .forumtopicheader .forumtopicviews,
#page_forum_notifications .forumtopicheader .forumtopicmessages,
#page_forum_notifications .forumtopicheader .forumtopicviews {
  text-align: center;
  width: auto;
}

#page_forum_lateststopics .forumtopicheader .forumtopiclastmsgdate,
#page_forum_todaytopics .forumtopicheader .forumtopiclastmsgdate,
#page_forum_yourtopics .forumtopicheader .forumtopiclastmsgdate,
#page_forum_notifications .forumtopicheader .forumtopiclastmsgdate {
  text-align: right;
  width: auto;
}

/* Topic rows */
#page_forum_lateststopics .forumtopic,
#page_forum_todaytopics .forumtopic,
#page_forum_yourtopics .forumtopic,
#page_forum_notifications .forumtopic {
  display: grid;
  grid-template-columns: 1fr 80px 80px 220px;
  gap: 0;
  align-items: center;
  padding: var(--space-md) var(--space-lg) !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
  background: var(--color-white) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-radius: 0 !important;
  transition: background-color var(--transition-fast);
}

#page_forum_lateststopics .forumtopic:hover,
#page_forum_todaytopics .forumtopic:hover,
#page_forum_yourtopics .forumtopic:hover,
#page_forum_notifications .forumtopic:hover {
  background: var(--color-gray-50) !important;
}

/* Topic name column */
#page_forum_lateststopics .forumtopicname,
#page_forum_todaytopics .forumtopicname,
#page_forum_yourtopics .forumtopicname,
#page_forum_notifications .forumtopicname {
  width: auto !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

/* Hide old PNG read/unread icons */
#page_forum_lateststopics .forumtopicimgread,
#page_forum_lateststopics .forumtopicimgunread,
#page_forum_todaytopics .forumtopicimgread,
#page_forum_todaytopics .forumtopicimgunread,
#page_forum_yourtopics .forumtopicimgread,
#page_forum_yourtopics .forumtopicimgunread,
#page_forum_notifications .forumtopicimgread,
#page_forum_notifications .forumtopicimgunread {
  display: none !important;
}

/* FA icon before topic name */
#page_forum_lateststopics .forumtopicname::before,
#page_forum_todaytopics .forumtopicname::before,
#page_forum_yourtopics .forumtopicname::before,
#page_forum_notifications .forumtopicname::before {
  content: '\f075';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 400;
  font-size: 14px;
  color: var(--color-gray-300);
  flex-shrink: 0;
  margin-right: 2px;
}

#page_forum_lateststopics .forumtopicunread .forumtopicname::before,
#page_forum_todaytopics .forumtopicunread .forumtopicname::before,
#page_forum_yourtopics .forumtopicunread .forumtopicname::before,
#page_forum_notifications .forumtopicunread .forumtopicname::before {
  font-weight: 900;
  color: var(--color-accent);
}

#page_forum_lateststopics .forumtopicname > a:not(.forumtopicimgunread):not(.forumtopicimgread),
#page_forum_todaytopics .forumtopicname > a:not(.forumtopicimgunread):not(.forumtopicimgread),
#page_forum_yourtopics .forumtopicname > a:not(.forumtopicimgunread):not(.forumtopicimgread),
#page_forum_notifications .forumtopicname > a:not(.forumtopicimgunread):not(.forumtopicimgread) {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-800) !important;
  text-decoration: none;
}

#page_forum_lateststopics .forumtopicunread .forumtopicname > a:not(.forumtopicimgunread):not(.forumtopicimgread),
#page_forum_todaytopics .forumtopicunread .forumtopicname > a:not(.forumtopicimgunread):not(.forumtopicimgread),
#page_forum_yourtopics .forumtopicunread .forumtopicname > a:not(.forumtopicimgunread):not(.forumtopicimgread),
#page_forum_notifications .forumtopicunread .forumtopicname > a:not(.forumtopicimgunread):not(.forumtopicimgread) {
  color: var(--color-primary) !important;
  font-weight: 700;
}

#page_forum_lateststopics .forumtopicsecondline,
#page_forum_todaytopics .forumtopicsecondline,
#page_forum_yourtopics .forumtopicsecondline,
#page_forum_notifications .forumtopicsecondline {
  width: 100%;
  font-size: 11px;
  color: var(--color-gray-400);
  margin-top: 2px;
  text-align: right;
}

#page_forum_lateststopics .forumtopicsecondline a,
#page_forum_todaytopics .forumtopicsecondline a,
#page_forum_yourtopics .forumtopicsecondline a,
#page_forum_notifications .forumtopicsecondline a {
  color: var(--color-gray-500) !important;
  font-weight: 600;
}

/* Inline topic pages */
#page_forum_lateststopics .forumtopicpages,
#page_forum_todaytopics .forumtopicpages,
#page_forum_yourtopics .forumtopicpages,
#page_forum_notifications .forumtopicpages {
  display: inline;
  margin: 0;
  padding: 0;
  float: none !important;
  width: auto !important;
}

#page_forum_lateststopics .forumtopicpages .XPagesInner,
#page_forum_todaytopics .forumtopicpages .XPagesInner,
#page_forum_yourtopics .forumtopicpages .XPagesInner,
#page_forum_notifications .forumtopicpages .XPagesInner {
  display: inline;
  font-size: 11px;
  color: var(--color-gray-400);
}

#page_forum_lateststopics .forumtopicpages a,
#page_forum_todaytopics .forumtopicpages a,
#page_forum_yourtopics .forumtopicpages a,
#page_forum_notifications .forumtopicpages a {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--color-gray-500) !important;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

#page_forum_lateststopics .forumtopicpages a:hover,
#page_forum_todaytopics .forumtopicpages a:hover,
#page_forum_yourtopics .forumtopicpages a:hover,
#page_forum_notifications .forumtopicpages a:hover {
  background: var(--color-primary);
  color: white !important;
}

/* Messages/Views columns */
#page_forum_lateststopics .forumtopic .forumtopicmessages,
#page_forum_lateststopics .forumtopic .forumtopicviews,
#page_forum_todaytopics .forumtopic .forumtopicmessages,
#page_forum_todaytopics .forumtopic .forumtopicviews,
#page_forum_yourtopics .forumtopic .forumtopicmessages,
#page_forum_yourtopics .forumtopic .forumtopicviews,
#page_forum_notifications .forumtopic .forumtopicmessages,
#page_forum_notifications .forumtopic .forumtopicviews {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-500);
  width: auto !important;
}

#page_forum_lateststopics .forumtopic .forumtopicmessages a,
#page_forum_todaytopics .forumtopic .forumtopicmessages a,
#page_forum_yourtopics .forumtopic .forumtopicmessages a,
#page_forum_notifications .forumtopic .forumtopicmessages a {
  color: var(--color-gray-600);
  text-decoration: none;
  font-weight: 700;
}

/* Last message date column */
#page_forum_lateststopics .forumtopic .forumtopiclastmsgdate,
#page_forum_todaytopics .forumtopic .forumtopiclastmsgdate,
#page_forum_yourtopics .forumtopic .forumtopiclastmsgdate,
#page_forum_notifications .forumtopic .forumtopiclastmsgdate {
  text-align: right;
  font-size: 12px;
  color: var(--color-gray-500);
  width: auto !important;
}

#page_forum_lateststopics .forumtopiclastmsgdate a,
#page_forum_todaytopics .forumtopiclastmsgdate a,
#page_forum_yourtopics .forumtopiclastmsgdate a,
#page_forum_notifications .forumtopiclastmsgdate a {
  color: var(--color-gray-600);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
}

#page_forum_lateststopics .forumtopiclastmsgdate a:hover,
#page_forum_todaytopics .forumtopiclastmsgdate a:hover,
#page_forum_yourtopics .forumtopiclastmsgdate a:hover,
#page_forum_notifications .forumtopiclastmsgdate a:hover {
  color: var(--color-primary);
}

#page_forum_lateststopics .forumtopiclastmsgdate .forumtopicsecondline,
#page_forum_todaytopics .forumtopiclastmsgdate .forumtopicsecondline,
#page_forum_yourtopics .forumtopiclastmsgdate .forumtopicsecondline,
#page_forum_notifications .forumtopiclastmsgdate .forumtopicsecondline {
  width: auto;
}

#page_forum_lateststopics .forumtopiclastmsgdate .forumtopicsecondline a,
#page_forum_todaytopics .forumtopiclastmsgdate .forumtopicsecondline a,
#page_forum_yourtopics .forumtopiclastmsgdate .forumtopicsecondline a,
#page_forum_notifications .forumtopiclastmsgdate .forumtopicsecondline a {
  color: var(--color-primary) !important;
}

#page_forum_lateststopics .forumtopicname .forumtopicsecondline,
#page_forum_todaytopics .forumtopicname .forumtopicsecondline,
#page_forum_yourtopics .forumtopicname .forumtopicsecondline,
#page_forum_notifications .forumtopicname .forumtopicsecondline {
  flex-basis: 100%;
}

/* Footer panels */
#page_forum_lateststopics .forumstats,
#page_forum_todaytopics .forumstats,
#page_forum_yourtopics .forumstats,
#page_forum_notifications .forumstats {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

#page_forum_lateststopics .forumcategorylinks,
#page_forum_todaytopics .forumcategorylinks,
#page_forum_yourtopics .forumcategorylinks,
#page_forum_notifications .forumcategorylinks {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  font-size: 13px;
}

#page_forum_lateststopics .forumcategorylinks a,
#page_forum_todaytopics .forumcategorylinks a,
#page_forum_yourtopics .forumcategorylinks a,
#page_forum_notifications .forumcategorylinks a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

#page_forum_lateststopics .forumcategorylinks a:hover,
#page_forum_todaytopics .forumcategorylinks a:hover,
#page_forum_yourtopics .forumcategorylinks a:hover,
#page_forum_notifications .forumcategorylinks a:hover {
  color: var(--color-primary-dark);
}

#page_forum_lateststopics .forumcategorylinks img,
#page_forum_todaytopics .forumcategorylinks img,
#page_forum_yourtopics .forumcategorylinks img,
#page_forum_notifications .forumcategorylinks img {
  display: none !important;
}

/* Login/category footer panel */
#page_forum_lateststopics .forumloginpanel,
#page_forum_todaytopics .forumloginpanel,
#page_forum_yourtopics .forumloginpanel,
#page_forum_notifications .forumloginpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  font-size: 13px;
  color: var(--color-gray-600);
}

#page_forum_lateststopics .forumloginpanel .forummessagecategories,
#page_forum_todaytopics .forumloginpanel .forummessagecategories,
#page_forum_yourtopics .forumloginpanel .forummessagecategories,
#page_forum_notifications .forumloginpanel .forummessagecategories {
  float: none !important;
}

#page_forum_lateststopics .forumloginpanel .forummessagecategories .XFormularDiv,
#page_forum_todaytopics .forumloginpanel .forummessagecategories .XFormularDiv,
#page_forum_yourtopics .forumloginpanel .forummessagecategories .XFormularDiv,
#page_forum_notifications .forumloginpanel .forummessagecategories .XFormularDiv {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

#page_forum_lateststopics .forumloginpanel select,
#page_forum_todaytopics .forumloginpanel select,
#page_forum_yourtopics .forumloginpanel select,
#page_forum_notifications .forumloginpanel select {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  font-size: 13px;
  outline: none;
}

#page_forum_lateststopics .forumloginpanel input[type="submit"],
#page_forum_todaytopics .forumloginpanel input[type="submit"],
#page_forum_yourtopics .forumloginpanel input[type="submit"],
#page_forum_notifications .forumloginpanel input[type="submit"] {
  background: var(--color-primary);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-lg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* Bottom pagination */
#page_forum_lateststopics .XPages,
#page_forum_todaytopics .XPages,
#page_forum_yourtopics .XPages,
#page_forum_notifications .XPages {
  padding: var(--space-md) var(--space-lg);
}

#page_forum_lateststopics .XPages .XPagesInner,
#page_forum_todaytopics .XPages .XPagesInner,
#page_forum_yourtopics .XPages .XPagesInner,
#page_forum_notifications .XPages .XPagesInner {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* ========================================
   FORUM MODERATORS PAGE
   ======================================== */

#page_forum_moderators .leftpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding: 0;
  width: auto;
}

#page_forum_moderators .leftpaneltitle {
  background: var(--color-gray-50) !important;
  background-size: auto !important;
  color: var(--color-gray-800) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
  overflow: visible !important;
}

#page_forum_moderators .leftpaneltitle i {
  color: var(--color-primary);
  margin-right: var(--space-xs);
}

#page_forum_moderators .leftpanelcontent {
  padding: var(--space-lg);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-gray-700);
}

/* Each category line becomes a styled row */
#page_forum_moderators .leftpanelcontent br + br {
  display: none;
}

#page_forum_moderators .leftpanelcontent b,
#page_forum_moderators .leftpanelcontent strong {
  display: inline-block;
  color: var(--color-gray-800);
  font-weight: 700;
  font-size: 14px;
  padding: var(--space-sm) 0 var(--space-xs) 0;
  border-bottom: 1px solid var(--color-gray-100);
  margin-bottom: var(--space-xs);
  min-width: 180px;
}

#page_forum_moderators .leftpanelcontent b::before,
#page_forum_moderators .leftpanelcontent strong::before {
  content: '\f0c0';
  font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome';
  font-weight: 900;
  font-size: 12px;
  color: var(--color-primary);
  margin-right: var(--space-sm);
}

#page_forum_moderators .leftpanelcontent a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

#page_forum_moderators .leftpanelcontent a:hover {
  color: var(--color-white);
  background: var(--color-primary);
  text-decoration: none;
}

/* ========================================
   REGISTRATION PAGE (users_new)
   ======================================== */

#page_users_new .leftpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding: 0;
  max-width: 680px;
}

#page_users_new .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
}

#page_users_new .leftpanel > .XFormularDiv {
  padding: var(--space-lg);
}

#page_users_new .leftpanel table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--space-sm);
}

#page_users_new .leftpanel td {
  padding: var(--space-xs) var(--space-sm);
  font-size: 14px;
  color: var(--color-gray-700);
  vertical-align: middle;
}

#page_users_new .leftpanel td:first-child {
  font-weight: 600;
  color: var(--color-gray-600);
  white-space: nowrap;
  width: 140px;
}

#page_users_new .leftpanel td:first-child b {
  font-weight: 700;
  color: var(--color-gray-800);
}

#page_users_new .leftpanel input[type=text],
#page_users_new .leftpanel input[type=email],
#page_users_new .leftpanel input[type=password] {
  width: 100%;
  max-width: 380px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

#page_users_new .leftpanel input[type=text]:focus,
#page_users_new .leftpanel input[type=email]:focus,
#page_users_new .leftpanel input[type=password]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
}

#page_users_new .leftpanel select {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: 14px;
  outline: none;
  background: var(--color-white);
  cursor: pointer;
}

#page_users_new .leftpanel select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 95, 208, 0.1);
}

#page_users_new .leftpanel input[type=submit] {
  background: var(--color-accent);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-xl);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: var(--space-md);
}

#page_users_new .leftpanel input[type=submit]:hover {
  background: var(--color-accent-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

#page_users_new .leftpanel .g-recaptcha {
  margin: var(--space-md) 0;
}

#page_users_new .leftpanel input[type=checkbox] {
  margin-right: var(--space-xs);
  accent-color: var(--color-primary);
}

/* ========================================
   FORUM ANSWER PAGE
   ======================================== */

#page_forum_answer .leftpanel.leftpanelreply.leftpanelreplyforum {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: visible;
  width: auto;
}

#page_forum_answer .leftpanelreplyforum .leftpaneltitle {
  background: var(--color-gray-50) !important;
  color: var(--color-gray-800) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
}

#page_forum_answer .leftpanelreplyforum .leftpaneltitle a {
  color: var(--color-primary) !important;
  text-decoration: none;
}

#page_forum_answer .leftpanelreplyforum .leftpaneltitle a:hover {
  color: var(--color-primary-dark) !important;
  text-decoration: underline;
}

#page_forum_answer .forumwarning {
  margin: var(--space-md) var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  font-size: 13px;
}

#page_forum_answer .forumtopsmileys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--space-sm) var(--space-lg);
  align-items: center;
}

#page_forum_answer .forumtopsmileys a {
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
}

#page_forum_answer .leftpanelreplyforum .bbeditor {
  float: none !important;
  width: calc(100% - 2 * var(--space-lg)) !important;
  margin: 0 var(--space-lg);
  box-sizing: border-box;
  overflow: visible !important;
}

#page_forum_answer .leftpanelreplyforum textarea {
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid var(--color-gray-200);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-md);
  font-size: 14px;
  font-family: var(--font-sans);
  line-height: 1.6;
  outline: none;
  transition: border-color var(--transition-fast);
}

#page_forum_answer .leftpanelreplyforum textarea:focus {
  border-color: var(--color-primary);
}

#page_forum_answer .leftpanelreplymore {
  display: none;
}

#page_forum_answer .leftpanelreplyforum input[type=submit] {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-xl);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin: var(--space-md) var(--space-lg) var(--space-lg);
  float: none !important;
  clear: both;
}

#page_forum_answer .leftpanelreplyforum input[type=submit]:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Last messages preview */
#page_forum_answer .leftpanels > .leftpanel:not(.leftpanelreply):not(.leftpanelnoborder) {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

/* Footer panel */
#page_forum_answer .leftpanel.leftpanelnoborder {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  font-size: 13px;
  color: var(--color-gray-600);
}

#page_forum_answer .forummessagecategories .XFormularDiv {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

#page_forum_answer .forummessagecategories select {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  font-size: 13px;
  outline: none;
}

#page_forum_answer .forummessagecategories input[type="submit"] {
  background: var(--color-primary);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-lg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ========================================
   USER PROFILE PAGE
   ======================================== */

/* Right sidebar: profile card */
:is(#page_users_user, #page_user) .user_rightpanels {
  width: 320px !important;
}

:is(#page_users_user, #page_user) .user_rightpanels .rightpanel {
  width: 100% !important;
  border-top: 0;
  box-sizing: border-box;
  overflow: hidden;
}

:is(#page_users_user, #page_user) .user_rightpanels .rightpaneltitle {
  font-size: 15px;
  font-weight: 700;
  line-height: 44px;
  padding: 0 var(--space-lg);
  letter-spacing: 0;
}

:is(#page_users_user, #page_user) .user_rightpanels .rightpaneltitle a {
  color: white !important;
  text-decoration: none;
}

/* Avatar (scoped to right panel profile card only) */
:is(#page_users_user, #page_user) .user_rightpanels .user_avatar {
  display: flex;
  justify-content: center;
  padding: var(--space-lg) 0 var(--space-md);
  background: var(--color-gray-50);
}

:is(#page_users_user, #page_user) .user_rightpanels .user_avatar img {
  width: 120px !important;
  height: 120px !important;
  border-radius: var(--radius-full) !important;
  border: 3px solid var(--color-white) !important;
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

/* General right panel content padding */
:is(#page_users_user, #page_user) .rightpanel > div:not(.rightpaneltitle) {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* User details - label/value grid */
:is(#page_users_user, #page_user) .user_details {
  padding: var(--space-md) var(--space-lg) var(--space-sm) !important;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-sm);
  align-items: baseline;
}

:is(#page_users_user, #page_user) .user_label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

:is(#page_users_user, #page_user) .user_data {
  font-size: 13px;
  color: var(--color-gray-800);
  font-weight: 500;
  word-break: break-word;
}

:is(#page_users_user, #page_user) .user_data a {
  color: var(--color-primary) !important;
  text-decoration: none;
}

:is(#page_users_user, #page_user) .user_data a:hover {
  text-decoration: underline;
}

/* Action buttons */
:is(#page_users_user, #page_user) .useractions {
  padding: var(--space-sm) var(--space-lg) var(--space-md);
  text-align: center;
}

:is(#page_users_user, #page_user) .useractions a {
  display: block;
  padding: var(--space-sm) var(--space-md) !important;
  line-height: 1.4 !important;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-align: center;
  text-decoration: none;
  margin-bottom: var(--space-xs);
}

/* Moderation panel */
:is(#page_users_user, #page_user) .user_rightpanels .rightpanelcontent {
  padding: var(--space-md) var(--space-lg);
  font-size: 13px;
  line-height: 2;
}

:is(#page_users_user, #page_user) .user_rightpanels .rightpanelcontent a {
  color: var(--color-gray-700);
  text-decoration: none;
  transition: color var(--transition-fast);
}

:is(#page_users_user, #page_user) .user_rightpanels .rightpanelcontent a:hover {
  color: var(--color-primary);
}

/* Left content area: tab panels */
:is(#page_users_user, #page_user) .leftpanels {
  width: 100% !important;
}

:is(#page_users_user, #page_user) .leftpanels > .leftpanel {
  width: 100% !important;
  box-sizing: border-box;
}

/* Tab system */
:is(#page_users_user, #page_user) .XTabSheetsTitles {
  border-bottom: 3px solid var(--color-primary);
  margin-bottom: var(--space-md);
  display: flex;
  gap: 2px;
}

:is(#page_users_user, #page_user) .XTabSheetsTitles a {
  padding: var(--space-sm) var(--space-lg);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: all var(--transition-fast);
}

/* All left panels (tab content, etc.) */
:is(#page_users_user, #page_user) .leftpanels .leftpanel {
  background: var(--color-white) !important;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-md);
  width: 100% !important;
  box-sizing: border-box;
}

:is(#page_users_user, #page_user) .leftpanels .leftpaneltitle {
  font-size: 15px !important;
  line-height: 44px !important;
  padding: 0 var(--space-lg) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  letter-spacing: 0 !important;
}

/* General content padding inside left panels */
:is(#page_users_user, #page_user) .leftpanels .leftpanel > div:not(.leftpaneltitle):not(.forumtopic):not(.leftpanelsubtitle):not(.users_friend) {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* Forum topic rows inside user profile */
:is(#page_users_user, #page_user) .forumtopic {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-gray-100);
  transition: background-color var(--transition-fast);
  background: none !important;
  background-image: none !important;
}

:is(#page_users_user, #page_user) .forumtopicunread {
  border-left: 3px solid var(--color-accent);
}

:is(#page_users_user, #page_user) .forumtopicunread .forumtopicname > a:not(.forumtopicimgunread):not(.forumtopicimgread) {
  color: var(--color-primary) !important;
  font-weight: 700;
}

:is(#page_users_user, #page_user) .forumtopicread {
  border-left: 3px solid transparent;
}

:is(#page_users_user, #page_user) .forumtopic:hover {
  background: var(--color-gray-50);
}

:is(#page_users_user, #page_user) .forumtopic:last-child {
  border-bottom: 0;
}

:is(#page_users_user, #page_user) .forumtopicname {
  font-size: 14px;
  width: auto !important;
  float: none !important;
}

:is(#page_users_user, #page_user) .forumtopicname > a {
  color: var(--color-gray-800);
  text-decoration: none;
  font-weight: 600;
}

:is(#page_users_user, #page_user) .forumtopicname > a:hover {
  color: var(--color-primary);
}

:is(#page_users_user, #page_user) .forumtopicname img {
  display: none;
}

:is(#page_users_user, #page_user) .forumtopicsecondline {
  font-size: 12px;
  color: var(--color-gray-500);
  margin-top: 2px;
}

:is(#page_users_user, #page_user) .forumtopicsecondline a {
  color: var(--color-gray-500);
  font-weight: 600;
}

/* Friends container - make the leftpanel a flex wrapper */
:is(#page_users_user, #page_user) #user_friends {
  display: flex;
  flex-wrap: wrap;
  padding: var(--space-md) var(--space-lg) !important;
  gap: var(--space-md);
  align-items: flex-start;
}

:is(#page_users_user, #page_user) #user_friends > .leftpaneltitle {
  flex-basis: 100%;
  padding: 0 !important;
  margin: 0 calc(-1 * var(--space-lg)) var(--space-sm);
  width: calc(100% + 2 * var(--space-lg)) !important;
}

/* Friend card */
:is(#page_users_user, #page_user) .users_friend {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 !important;
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  background: var(--color-gray-50);
  transition: all var(--transition-fast);
  width: 90px;
  overflow: hidden;
}

:is(#page_users_user, #page_user) .users_friend:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
  background: var(--color-white);
}

:is(#page_users_user, #page_user) .users_friend .user_avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: none;
}

:is(#page_users_user, #page_user) .users_friend .user_avatar img {
  width: 56px !important;
  height: 56px !important;
  border-radius: var(--radius-full) !important;
  border: 2px solid var(--color-white) !important;
  box-shadow: var(--shadow-sm);
  object-fit: cover;
  margin-bottom: var(--space-xs);
}

:is(#page_users_user, #page_user) .users_friend .user_avatar a {
  color: var(--color-gray-700);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  word-break: break-word;
}

:is(#page_users_user, #page_user) .users_friend .user_avatar a:hover {
  color: var(--color-primary);
}

/* Blog posts */
:is(#page_users_user, #page_user) .user_message {
  padding: var(--space-md) var(--space-lg) !important;
  border-bottom: 1px solid var(--color-gray-100);
}

:is(#page_users_user, #page_user) .user_message_title {
  width: auto !important;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-gray-800);
  padding: 0;
  background: none;
}

:is(#page_users_user, #page_user) .user_message_title a {
  color: var(--color-primary);
  text-decoration: none;
}

:is(#page_users_user, #page_user) .user_message_content {
  width: auto !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-gray-600);
  padding: var(--space-xs) 0;
  background: none;
}

:is(#page_users_user, #page_user) .user_message_footer {
  font-size: 12px;
  color: var(--color-gray-500);
  padding: 0;
  background: none;
}

/* ========================================
   SOFTWARES CATEGORY PAGE
   ======================================== */

/* Main card */
:is(#page_softwares_category, #page_softwares) .leftpanels > .leftpanel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  width: 100% !important;
  box-sizing: border-box;
}

:is(#page_softwares_category, #page_softwares) .leftpanels > .leftpanel > .leftpaneltitle {
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 48px !important;
  padding: 0 var(--space-lg) !important;
  letter-spacing: -0.01em !important;
}

:is(#page_softwares_category, #page_softwares) .leftpanels > .leftpanel > .leftpaneltitle i {
  margin-right: var(--space-xs);
}

/* Breadcrumb subtitle */
:is(#page_softwares_category, #page_softwares) .leftpanelsubtitle {
  background: var(--color-gray-50) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-gray-100) !important;
  padding: var(--space-sm) var(--space-lg) !important;
  font-size: 13px;
  color: var(--color-gray-600);
}

:is(#page_softwares_category, #page_softwares) .leftpanelsubtitle a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

:is(#page_softwares_category, #page_softwares) .leftpanelsubtitle a:hover {
  text-decoration: underline;
}

/* Filter bar */
:is(#page_softwares_category, #page_softwares) .softwares_filter {
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-100);
  padding: var(--space-sm) var(--space-lg);
}

:is(#page_softwares_category, #page_softwares) .softwares_filter .XFormularDiv {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

:is(#page_softwares_category, #page_softwares) .softwares_filter select {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  font-size: 13px;
  font-family: var(--font-sans);
  background: var(--color-white);
  cursor: pointer;
}

:is(#page_softwares_category, #page_softwares) .softwares_filter input[type="submit"] {
  background: var(--color-primary);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-lg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

:is(#page_softwares_category, #page_softwares) .softwares_filter input[type="submit"]:hover {
  background: var(--color-primary-dark);
}

/* Software list */
:is(#page_softwares_category, #page_softwares) ul.software-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

:is(#page_softwares_category, #page_softwares) ul.software-list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--color-gray-50);
}

:is(#page_softwares_category, #page_softwares) ul.software-list li:last-child {
  border-bottom: 0;
}

:is(#page_softwares_category, #page_softwares) ul.software-list li a {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  gap: 0 var(--space-md);
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  text-decoration: none;
  color: var(--color-gray-700) !important;
  transition: background-color var(--transition-fast);
  border-left: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

:is(#page_softwares_category, #page_softwares) ul.software-list li a:hover {
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  grid-template-rows: auto auto !important;
  background: var(--color-gray-50);
  border-left: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  padding: var(--space-md) var(--space-lg);
}

:is(#page_softwares_category, #page_softwares) ul.software-list li a img {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

:is(#page_softwares_category, #page_softwares) .software-list-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-gray-800);
}

:is(#page_softwares_category, #page_softwares) .software-list-info {
  grid-column: 2;
  display: inline;
  font-size: 12px;
  color: var(--color-gray-500);
  margin-right: var(--space-md);
}

:is(#page_softwares_category, #page_softwares) .software-list-info b {
  font-weight: 600;
  color: var(--color-gray-600);
  margin-right: 2px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Tablet: <= 1280px */
@media (max-width: 1280px) {
  #toplivecontent,
  #topstuffs {
    width: auto !important;
    max-width: 100%;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .bodymain {
    padding: 0 var(--space-md);
  }

  .mainex,
  .main,
  .mainsky {
    width: auto !important;
    left: var(--space-md) !important;
    right: var(--space-md) !important;
  }

  #main {
    width: calc(100% - 340px) !important;
  }

  .mainex .leftpanel {
    width: 100% !important;
    box-sizing: border-box;
  }

  .leftpanel {
    width: 100% !important;
    box-sizing: border-box;
  }

  .rightpanels {
    width: 320px !important;
  }

  .rightpanel {
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* Small tablet: <= 1024px */
@media (max-width: 1024px) {
  .rightpanels {
    float: none !important;
    width: 100% !important;
    margin: 0;
  }

  .rightpanel {
    width: 100% !important;
    margin: 0 0 var(--space-md) 0 !important;
  }

  #main {
    float: none !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .bodymain {
    overflow-x: hidden;
  }

  .mainex,
  .main,
  .mainsky {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin: var(--space-md) !important;
    width: auto !important;
  }

  #menu a {
    padding: 8px 10px;
    font-size: 11px;
  }

  .xmenuboxlev1 {
    width: 480px !important;
    max-width: calc(100vw - 32px);
  }
}

/* Mobile: <= 768px */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

  :root {
    --header-height: 48px;
  }

  /* --- Toplive bar: news ticker + hamburger --- */
  #toplivecontent {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  #hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
  }

  #hamburger:hover,
  #hamburger:active {
    background: rgba(255,255,255,0.15);
  }

  /* Hide desktop controls on mobile */
  .stayconnected {
    display: none !important;
  }

  .topsearch {
    display: none;
  }

  /* News banner visible on mobile */
  #newsbannercontainer {
    display: block !important;
    flex: 1;
    min-width: 0;
    padding-left: 45px;
  }

  #newsbannercontainer::before {
    font-size: 8px;
    padding: 2px 6px;
  }

  /* --- Logo + topstuffs: full width --- */
  #topstuffs {
    flex-wrap: nowrap;
    padding: var(--space-sm) var(--space-md) !important;
    gap: var(--space-sm);
  }

  #toplogo {
    flex-shrink: 0;
    width: auto !important;
    overflow: visible !important;
  }

  #toplogo img {
    max-width: calc(100vw - var(--space-md) * 2);
    height: auto;
    width: auto;
  }

  /* Hide inline menu on mobile (replaced by hamburger) */
  #menu {
    display: none !important;
  }

  body {
    padding-top: calc(var(--header-height) + var(--space-md));
  }

  /* Prevent body scroll when menu is open */
  body.mobile-menu-open {
    overflow: hidden !important;
  }

  /* === MOBILE MENU OVERLAY === */
  body.mobile-menu-open #topstuffs {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2999;
    background: white;
    flex-direction: column;
    flex-wrap: nowrap !important;
    overflow-y: auto;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    align-items: stretch;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-bottom: none;
  }

  body.mobile-menu-open #toplogo {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-gray-200);
    text-align: center;
  }

  body.mobile-menu-open #toplogo img {
    max-width: 200px;
  }

  /* Show menu as vertical list in overlay */
  body.mobile-menu-open #menu {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 0;
    height: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    order: 0;
    background: none;
    margin: 0;
    border-bottom: 2px solid var(--color-gray-200);
  }

  body.mobile-menu-open #menu > .xmenuboxlev0 {
    flex-direction: column;
    gap: 0;
    flex-wrap: nowrap;
  }

  body.mobile-menu-open #menu > .xmenuboxlev0 > a {
    display: flex !important;
    align-items: center;
    padding: 16px var(--space-lg) !important;
    font-size: 16px !important;
    font-weight: 500;
    border-bottom: 1px solid var(--color-gray-100);
    color: var(--color-gray-700);
    position: relative;
    background: none;
  }

  body.mobile-menu-open #menu > .xmenuboxlev0 > a:hover,
  body.mobile-menu-open #menu > .xmenuboxlev0 > a:active {
    background: var(--color-gray-50);
    color: var(--color-primary);
  }

  body.mobile-menu-open #menu > .xmenuboxlev0 > a::after {
    content: '\f054';
    font-family: 'Font Awesome 7 Pro';
    font-weight: 900;
    font-size: 11px;
    position: absolute;
    right: var(--space-lg);
    color: var(--color-gray-300);
    width: auto;
    height: auto;
    background: none;
    bottom: auto;
    left: auto;
    transition: none;
  }

  /* Hide submenus in mobile menu */
  body.mobile-menu-open .xmenuboxlev1 {
    display: none !important;
  }

  /* Show mobile menu extras: connection + social */
  body.mobile-menu-open #mobilemenuextra {
    display: block;
    padding: 0;
  }

  /* Restyle connection panel inside mobile menu */
  #mobilemenuextra .connectionpanel {
    position: static;
    background: none;
    line-height: normal;
    padding: 0;
  }

  #mobilemenuextra .connectionpanel:hover {
    background: none;
  }

  /* Hide the dropdown trigger title */
  #mobilemenuextra .connectiontitle {
    display: none;
  }

  #mobilemenuextra .connectiondata {
    display: block !important;
    position: static;
    box-shadow: none;
    background: none;
    border: none;
    min-width: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #mobilemenuextra .connectiondatabody {
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
  }

  /* Connection links styled like menu items */
  #mobilemenuextra .connectionlinks {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  #mobilemenuextra .connectionlinks a {
    color: var(--color-gray-700) !important;
    font-size: 16px;
    font-weight: 500;
    padding: 16px var(--space-lg);
    display: flex !important;
    align-items: center;
    gap: var(--space-sm);
    border-bottom: 1px solid var(--color-gray-100);
    text-decoration: none;
  }

  #mobilemenuextra .connectionlinks a:hover,
  #mobilemenuextra .connectionlinks a:active {
    background: var(--color-gray-50);
    color: var(--color-primary) !important;
  }

  #mobilemenuextra .connectionlinks a i {
    width: 22px;
    text-align: center;
    color: var(--color-primary);
    font-size: 15px;
    flex-shrink: 0;
  }

  #mobilemenuextra .connectionseparator {
    display: none;
  }

  /* Login form card */
  #mobilemenuextra .connectionform {
    margin: var(--space-lg);
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  }

  #mobilemenuextra .connectionformlabel {
    color: rgba(255,255,255,0.9);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: var(--space-md);
    letter-spacing: 0.02em;
  }

  #mobilemenuextra .connectionform form {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  #mobilemenuextra .connectionform table {
    display: contents;
  }

  #mobilemenuextra .connectionform tr {
    display: contents;
  }

  #mobilemenuextra .connectionform td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  #mobilemenuextra .connectionform input[type="text"],
  #mobilemenuextra .connectionform input[type="password"] {
    width: 100% !important;
    box-sizing: border-box;
    padding: 14px var(--space-md) !important;
    margin-bottom: var(--space-sm);
    border: 2px solid rgba(255,255,255,0.2) !important;
    border-radius: var(--radius-md) !important;
    font-size: 15px;
    background: rgba(255,255,255,0.15) !important;
    color: white !important;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
  }

  #mobilemenuextra .connectionform input[type="text"]::placeholder,
  #mobilemenuextra .connectionform input[type="password"]::placeholder {
    color: rgba(255,255,255,0.5);
  }

  #mobilemenuextra .connectionform input[type="text"]:focus,
  #mobilemenuextra .connectionform input[type="password"]:focus {
    border-color: var(--color-accent) !important;
    background: rgba(255,255,255,0.25) !important;
  }

  #mobilemenuextra .connectionform input[type="submit"] {
    width: 100%;
    padding: 14px !important;
    background: var(--color-accent) !important;
    color: white;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: var(--space-xs);
    letter-spacing: 0.02em;
    transition: background 0.2s, transform 0.1s;
  }

  #mobilemenuextra .connectionform input[type="submit"]:active {
    transform: scale(0.98);
  }

  /* Logged-in greeting */
  #mobilemenuextra .connectiongreeting {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gray-700);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
  }

  #mobilemenuextra .connectionlogout {
    color: var(--color-error) !important;
  }

  #mobilemenuextra .connectionlogout i {
    color: var(--color-error) !important;
  }

  /* Mobile social icons row */
  .mobile-social {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-lg);
    justify-content: center;
  }

  .mobile-social .social-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    color: var(--color-gray-600) !important;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
  }

  .mobile-social .social-icon:hover {
    background: var(--color-primary);
    color: white !important;
  }

  /* --- Layout --- */
  .mainex,
  .main,
  .mainsky {
    margin: var(--space-sm) !important;
  }

  .mainex .leftpanel,
  .leftpanel {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Fluid content elements */
  .newscomment,
  .articlescomment,
  .articletext,
  .articlesummary,
  .forumtopic,
  .forumcategory,
  .forumcategoryheader,
  .forumstats,
  .forumsection,
  .forummessagetext,
  .bbeditorbuttonscontainer,
  .leftpanelreply,
  .newsbydateright {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Forum messages: single column on mobile */
  #page_forum_topic .forummessage {
    grid-template-columns: 1fr !important;
  }

  #page_forum_topic .forummessage > .forummessageinfo {
    grid-column: 1;
    grid-row: 1;
    border-right: 0;
    border-bottom: 1px solid var(--color-gray-100);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
  }

  #page_forum_topic .forummessage > .forummessagetext {
    grid-column: 1;
    grid-row: 2;
  }

  #page_forum_topic .forumavatar {
    width: 48px;
    height: 48px;
    margin: 0;
  }

  /* Softwares list: simpler layout */
  :is(#page_softwares_category, #page_softwares) ul.software-list li a,
  #page_softwares_categories ul.software-list li a {
    grid-template-columns: 32px 1fr !important;
    padding: var(--space-sm) var(--space-md) !important;
  }

  /* --- Footer responsive --- */
  #outro {
    padding: var(--space-xl) 5px var(--space-md) !important;
    overflow-x: hidden;
  }

  .footer-columns {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 0 5px;
  }

  .outroblock1,
  .outroblock2 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
  }
}

/* Small mobile: <= 480px */
@media (max-width: 480px) {
  .leftpaneltitle {
    font-size: 16px !important;
    line-height: 40px !important;
    padding: 0 var(--space-md) !important;
  }

  div.XPages {
    max-width: 100%;
    padding: var(--space-xs);
  }

  .XPages a {
    min-width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

@media screen and (min-width: 0px) and (max-width: 599px) {

/* =============================================
   MOBILE: 0-599px
   Core layout handled by theme.css @media rules.
   This file only adds mobile-specific tweaks.
   ============================================= */

/* --- Top bar: handled by hamburger on mobile --- */
#toplogo {
  overflow: visible;
}

/* --- Hide on mobile --- */
.newstitlecategory,
.articlestitlecategory,
.articlehomedate,
.forumcategorydesc,
.forumtopiclastmsgdate,
.forumcategorylastmessage,
.forumcategorymessages,
.forumcategorylastmsg,
.commentheaderimages,
.articleheaderimages,
#page_news_item .newsdateother,
.articlesdateother,
.newsnextlink,
.forumtopicsecondline,
.forumtopicmessages,
.forumtopicviews,
.messageheaderimages,
.forummessagesubjectsecondlinehideable,
#forumfooterex .forummessagepages,
.forumtopsmileys,
.blogshomedate,
.blogstitlecategory,
.footerpartners,
.rightpanels {
  display: none !important;
}

/* --- News layout --- */
.news-grid {
  grid-template-columns: 1fr;
}

.hero-article-title {
  font-size: 18px !important;
}

.hero-readmore {
  font-size: 12px !important;
}

.section-header {
  flex-direction: column;
  gap: 4px;
}

.news-compact-date,
.news-compact-category,
.news-compact-comments {
  display: none !important;
}

/* --- Article categories --- */
.articlescategory {
  width: 70px;
  height: 95px;
  font-size: 10px;
  line-height: 1.3em;
}

.articlescategory img {
  width: 48px;
  height: 48px;
}

.articlesimilar {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

/* --- Titles --- */
.leftpaneltitle {
  line-height: 24px;
  font-size: 16px;
}

.newssimilartitle,
.articlessimilartitle {
  font-size: 13px;
}

.newssimilarcontent,
.articlessimilarcontent {
  margin-left: 0;
}

.rightpaneltitle {
  font-size: 15px;
}

/* --- Forum compact --- */
.forumtopicname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forumattachpreview img {
  max-width: 200px;
}

.forummessagesubjectsecondline {
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.forummessagesubject {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
  height: 38px;
}

/* --- Banners & ads --- */
#topbannerad {
  max-width: 100%;
  overflow: hidden;
}

#topbannerimg {
  left: 0;
  max-width: 100%;
}

/* --- Footer --- */
.footer-columns {
  flex-direction: column;
  gap: var(--space-md);
}

.outroblock1, .outroblock2 {
  max-width: 100%;
  width: 100%;
}

.outroblock1 *, .outroblock2 * {
  font-size: 10px !important;
}

.back-to-top {
  float: none;
  margin-top: 8px;
}

/* --- Users: wrap nav on mobile --- */
.usersprofile {
  flex-wrap: wrap;
  padding: var(--space-sm);
  gap: 2px;
}

.usersprofile-item {
  min-width: 60px;
  padding: var(--space-xs) var(--space-sm);
}

.usersprofile-icon {
  width: 32px;
  height: 32px;
  font-size: 15px;
}

.usersprofile-label {
  font-size: 9px;
}

/* --- Account form fields: stack on mobile --- */
.account-field {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.account-field-label {
  width: auto;
}

.leftpanelsmall {
  display: block;
}

/* --- Softwares nav --- */
#softwares_explore-nav li {
  width: 18px;
}

#softwares_explore-nav li img {
  width: 18px;
}

/* --- Babes --- */
.babesserie {
  width: 125px;
}

.babesserie a {
  width: 125px;
}

.babesserie img {
  max-width: 120px;
}

/* --- Misc --- */
.rightpanel img {
  max-width: 100%;
}

.shoutboxlinecontent {
  padding-left: 0;
}

/* =============================================
   RESPONSIVE OVERRIDES FOR MODERNIZED PAGES
   Mobile: 0-599px
   ============================================= */

/* --- FORUM CATEGORY (topic list) --- */
:is(#page_forum_category, #page_forum_privates) .leftpanel.leftpanelnoborder {
  width: 100% !important;
  box-sizing: border-box;
  overflow: hidden;
}

:is(#page_forum_category, #page_forum_privates) .forumtopic {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  padding: var(--space-sm) var(--space-md) !important;
  gap: 2px !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicname {
  width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  font-size: 13px !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicname a {
  font-size: 13px !important;
}

/* Hide columns that don't fit on mobile */
:is(#page_forum_category, #page_forum_privates) .forumtopicmessages,
:is(#page_forum_category, #page_forum_privates) .forumtopicviews,
:is(#page_forum_category, #page_forum_privates) .forumtopiclastmsg,
:is(#page_forum_category, #page_forum_privates) .forumtopicheadermessages,
:is(#page_forum_category, #page_forum_privates) .forumtopicheaderviews,
:is(#page_forum_category, #page_forum_privates) .forumtopicheaderlastmsg,
:is(#page_forum_category, #page_forum_privates) .forumtopicsecondline {
  display: none !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicheader {
  display: none !important;
}

/* Tools/buttons area */
:is(#page_forum_category, #page_forum_privates) .forumtopictools {
  position: static !important;
  float: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-xs) !important;
  align-items: center;
  padding: var(--space-sm) var(--space-md) !important;
  width: auto !important;
  left: auto !important;
  top: auto !important;
  border-bottom: 1px solid var(--color-gray-100);
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolstitle {
  margin: 0 !important;
  position: static !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolstitleex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-xs) !important;
  padding: 0 !important;
  position: static !important;
  width: auto !important;
  left: auto !important;
  top: auto !important;
  height: auto !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolstitleex a {
  font-size: 11px !important;
  padding: var(--space-xs) var(--space-sm) !important;
}

/* Login panel at bottom */
:is(#page_forum_category, #page_forum_privates) .forumloginpanelcategory {
  width: 100% !important;
  box-sizing: border-box;
  padding: var(--space-md) !important;
}

:is(#page_forum_category, #page_forum_privates) .forumloginpanelcategory select {
  width: 100% !important;
  max-width: 200px;
}

/* Pagination */
:is(#page_forum_category, #page_forum_privates) div.XPages {
  width: auto !important;
  flex-wrap: wrap !important;
}

/* --- FORUM TOPIC (message thread) --- */
#page_forum_topic .leftpanels {
  width: 100% !important;
}

#page_forum_topic .forummessage {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
}

#page_forum_topic .forummessageinfo {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--space-sm) !important;
  width: 100% !important;
  padding: var(--space-sm) var(--space-md) !important;
  border-bottom: 1px solid var(--color-gray-100) !important;
  border-right: 0 !important;
}

#page_forum_topic .forummessageinfo img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
}

#page_forum_topic .forummessagetext {
  width: 100% !important;
  box-sizing: border-box;
  padding: var(--space-md) !important;
}

#page_forum_topic .forummessagesubjectactions {
  flex-wrap: wrap !important;
}

#page_forum_topic .forummessagesubjectactions a {
  width: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
}

/* Topic tools */
#page_forum_topic .forumtopictools {
  position: static !important;
  float: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-xs) !important;
  align-items: center;
  padding: var(--space-sm) var(--space-md) !important;
  width: auto !important;
  left: auto !important;
  top: auto !important;
  border-bottom: 1px solid var(--color-gray-100);
}

#page_forum_topic .forumtopictoolstitle {
  margin: 0 !important;
  position: static !important;
}

#page_forum_topic .forumtopictoolstitleex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-xs) !important;
  padding: 0 !important;
  position: static !important;
  width: auto !important;
  left: auto !important;
  top: auto !important;
  height: auto !important;
}

/* Reply form */
#page_forum_topic .leftpanelreply {
  width: 100% !important;
  box-sizing: border-box;
}

#page_forum_topic .bbeditorbuttonscontainer {
  width: auto !important;
}

#page_forum_topic textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- FORUM NEWTOPIC & PRIVATE --- */
#page_forum_newtopic .leftpanels > .leftpanel,
#page_forum_private .leftpanelreplyforum {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

#page_forum_newtopic .leftpanels .bbeditor,
#page_forum_private .leftpanelreplyforum .bbeditor {
  width: 100% !important;
  box-sizing: border-box;
  padding: 0 var(--space-sm) var(--space-sm) !important;
}

#page_forum_newtopic .leftpanels .bbeditorbuttonscontainer,
#page_forum_private .leftpanelreplyforum .bbeditorbuttonscontainer {
  width: auto !important;
}

#page_forum_newtopic .leftpanels textarea,
#page_forum_private .leftpanelreplyforum textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 180px !important;
}

#page_forum_newtopic .leftpanels .XFormularDiv,
#page_forum_private .leftpanelreplyforum .XFormularDiv {
  padding: var(--space-md) !important;
}

#page_forum_newtopic .leftpanels .forumtopsmileys,
#page_forum_private .leftpanelreplyforum .forumtopsmileys {
  max-height: 60px !important;
}

#page_forum_newtopic .leftpanels .bbeditorbuttons img,
#page_forum_private .leftpanelreplyforum .bbeditorbuttons img {
  width: 20px !important;
  height: 20px !important;
  padding: 2px !important;
}

/* --- SOFTWARES CATEGORIES --- */
#page_softwares_categories .leftpanels > .leftpanel {
  width: 100% !important;
  box-sizing: border-box;
}

#page_softwares_categories #softwares_explore-nav {
  padding: var(--space-sm) !important;
  gap: 4px !important;
}

#page_softwares_categories #softwares_explore-nav li a {
  width: 36px !important;
  height: 36px !important;
}

#page_softwares_categories #softwares_explore-nav li a::before {
  font-size: 16px !important;
}

#page_softwares_categories .category-items {
  padding: var(--space-xs) 0 var(--space-md) !important;
}

#page_softwares_categories .category-items a {
  font-size: 11px !important;
  padding: 3px var(--space-sm) 5px !important;
}

#page_softwares_categories .softwares_category-container {
  padding: var(--space-md) !important;
}

#page_softwares_categories .category-header {
  font-size: 14px !important;
}

#page_softwares_categories ul.software-list li a {
  grid-template-columns: 28px 1fr !important;
  padding: var(--space-sm) var(--space-md) !important;
}

#page_softwares_categories ul.software-list li a img {
  width: 28px !important;
  height: 28px !important;
}

#page_softwares_categories .software-list-title {
  font-size: 12px !important;
}

#page_softwares_categories .software-list-info {
  font-size: 10px !important;
}

/* --- SOFTWARES ITEM --- */
#page_softwares_software .leftpanels > .leftpanel {
  width: 100% !important;
  box-sizing: border-box;
}

#page_softwares_software .software-detail {
  padding: var(--space-md) !important;
}

#page_softwares_software .software-detail-title {
  font-size: 16px !important;
  gap: var(--space-sm) !important;
}

#page_softwares_software .software-detail-title::before {
  width: 36px !important;
  height: 36px !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

#page_softwares_software .software-detail-specs {
  grid-template-columns: 18px 1fr !important;
  padding: var(--space-sm) !important;
}

#page_softwares_software .specs-label {
  font-size: 11px !important;
}

#page_softwares_software .specs-data {
  grid-column: 1 / -1 !important;
  padding-left: 26px !important;
  font-size: 13px !important;
  margin-bottom: var(--space-xs) !important;
}

#page_softwares_software .software-detail-action {
  padding: var(--space-md) !important;
  flex-direction: column !important;
  gap: var(--space-sm) !important;
  align-items: stretch !important;
}

#page_softwares_software .software-detail-action a {
  font-size: 14px !important;
  justify-content: center !important;
  padding: var(--space-sm) var(--space-md) !important;
}

#page_softwares_software .action-info {
  font-size: 12px !important;
  margin-left: 0 !important;
  text-align: center !important;
}

#page_softwares_software .action-info b {
  font-size: 14px !important;
}

#page_softwares_software .software-detail p {
  font-size: 13px !important;
  padding: var(--space-sm) !important;
}

#page_softwares_software .software-detail-subtitle {
  font-size: 11px !important;
}

#page_softwares_software .software-screenshot {
  max-width: 100% !important;
}

#page_softwares_software .leftpanelreply {
  width: 100% !important;
  box-sizing: border-box;
}

#page_softwares_software .bbeditor {
  width: auto !important;
  padding: 0 var(--space-sm) var(--space-sm) !important;
}

#page_softwares_software .bbeditorbuttonscontainer {
  width: auto !important;
}

#page_softwares_software .leftpanels textarea {
  width: calc(100% - var(--space-sm) * 2) !important;
  margin: 0 var(--space-sm) !important;
  min-height: 150px !important;
}

#page_softwares_software .leftpanels input[type="submit"] {
  margin: var(--space-md) var(--space-sm) var(--space-md) auto !important;
}

#page_softwares_software #vote {
  margin: var(--space-sm) !important;
}

/* --- NEWSLETTER --- */
#page_newsletter_main .leftpanels > .leftpanel {
  width: 100% !important;
  box-sizing: border-box;
}

}
@media screen and (min-width: 600px) and (max-width: 719px) {

/* =============================================
   SMALL TABLET: 600-719px
   Core layout handled by theme.css @media rules.
   This file only adds breakpoint-specific tweaks.
   ============================================= */

/* --- Top bar: handled by hamburger at this breakpoint --- */
#toplogo {
  overflow: visible;
}

/* --- Hide on small tablet --- */
.newstitlecategory,
.articlestitlecategory,
.articlehomedate,
.forumcategorydesc,
.forumtopiclastmsgdate,
.forumcategorymessages,
.commentheaderimages,
.articleheaderimages,
.rightpanels {
  display: none !important;
}

/* --- News layout --- */
.news-grid {
  grid-template-columns: repeat(2, 1fr);
}

.hero-article-title {
  font-size: 20px !important;
}

.news-compact-date,
.news-compact-category {
  display: none !important;
}

/* --- Article categories --- */
.articlescategory {
  width: 70px;
  height: 95px;
  font-size: 10px;
  line-height: 1.3em;
}

.articlescategory img {
  width: 48px;
  height: 48px;
}

.articlesimilar {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

/* --- Titles --- */
.leftpaneltitle {
  line-height: 24px;
  font-size: 16px;
}

.newssimilartitle,
.articlessimilartitle {
  font-size: 13px;
}

.newssimilarcontent,
.articlessimilarcontent {
  margin-left: 0;
}

.rightpaneltitle {
  font-size: 15px;
}

/* --- Banners & ads --- */
#topbannerad {
  max-width: 600px;
  overflow: hidden;
}

#topbannerimg {
  left: 0;
  max-width: 600px;
}

/* --- Forum compact --- */
.forummessagesubjectsecondline {
  font-size: 9px;
}

.forummessagesubjectsecondlinehideable {
  display: none;
}

.forummessagetextbody {
  margin-right: 16px;
}

/* --- Users --- */
.leftpanelsmall {
  display: block;
}

/* --- Footer --- */
.footer-columns {
  flex-direction: column;
  gap: var(--space-lg);
}

.footerpartners {
  display: none;
}

.outroblock1, .outroblock2 {
  max-width: 100%;
  width: 100%;
}

.outroblock1 *, .outroblock2 * {
  font-size: 10px !important;
}

/* --- Misc --- */
.rightpanel img {
  max-width: 100%;
}

.shoutboxlinecontent {
  padding-left: 0;
}

/* =============================================
   RESPONSIVE OVERRIDES FOR MODERNIZED PAGES
   Small Tablet: 600-719px
   ============================================= */

/* --- FORUM CATEGORY --- */
:is(#page_forum_category, #page_forum_privates) .leftpanel.leftpanelnoborder {
  width: 100% !important;
  box-sizing: border-box;
}

:is(#page_forum_category, #page_forum_privates) .forumtopic {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  padding: var(--space-sm) var(--space-md) !important;
  gap: 2px !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicname {
  width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicmessages,
:is(#page_forum_category, #page_forum_privates) .forumtopicviews,
:is(#page_forum_category, #page_forum_privates) .forumtopicheadermessages,
:is(#page_forum_category, #page_forum_privates) .forumtopicheaderviews {
  display: none !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopicheader {
  display: none !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolstitle {
  margin: 0 !important;
  position: static !important;
}

:is(#page_forum_category, #page_forum_privates) .forumtopictoolstitleex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-xs) !important;
}

/* --- FORUM TOPIC --- */
#page_forum_topic .forummessage {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
}

#page_forum_topic .forummessageinfo {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--space-sm) !important;
  width: 100% !important;
  padding: var(--space-sm) var(--space-md) !important;
  border-bottom: 1px solid var(--color-gray-100) !important;
  border-right: 0 !important;
}

#page_forum_topic .forummessageinfo img {
  width: 36px !important;
  height: 36px !important;
}

#page_forum_topic .forummessagetext {
  width: 100% !important;
  box-sizing: border-box;
  padding: var(--space-md) !important;
}

#page_forum_topic .bbeditorbuttonscontainer {
  width: auto !important;
}

#page_forum_topic textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- FORUM NEWTOPIC & PRIVATE --- */
#page_forum_newtopic .leftpanels > .leftpanel,
#page_forum_private .leftpanelreplyforum {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

#page_forum_newtopic .leftpanels .bbeditor,
#page_forum_private .leftpanelreplyforum .bbeditor {
  width: 100% !important;
  box-sizing: border-box;
}

#page_forum_newtopic .leftpanels .bbeditorbuttonscontainer,
#page_forum_private .leftpanelreplyforum .bbeditorbuttonscontainer {
  width: auto !important;
}

#page_forum_newtopic .leftpanels textarea,
#page_forum_private .leftpanelreplyforum textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- SOFTWARES --- */
#page_softwares_categories .leftpanels > .leftpanel,
#page_softwares_software .leftpanels > .leftpanel {
  width: 100% !important;
  box-sizing: border-box;
}

#page_softwares_software .software-detail-specs {
  grid-template-columns: 18px 1fr !important;
}

#page_softwares_software .specs-data {
  grid-column: 1 / -1 !important;
  padding-left: 26px !important;
}

#page_softwares_software .bbeditor {
  width: auto !important;
}

#page_softwares_software .bbeditorbuttonscontainer {
  width: auto !important;
}

#page_softwares_software .leftpanels textarea {
  width: calc(100% - var(--space-lg) * 2) !important;
}

/* --- NEWSLETTER --- */
#page_newsletter_main .leftpanels > .leftpanel {
  width: 100% !important;
  box-sizing: border-box;
}

}
@media screen and (min-width: 720px) and (max-width: 1023px) {

/* =============================================
   TABLET: 720-1023px
   Core layout handled by theme.css @media rules.
   This file only adds breakpoint-specific tweaks.
   ============================================= */

/* --- Top bar --- */
#toplogo {
  width: 60px;
  overflow: hidden;
}

#newsbannercontainer {
  flex: 1;
  min-width: 0;
}

/* --- Menu --- */
.xmenuboxlev1 {
  max-width: 700px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

#menu a {
  font-size: 12px;
}

.xmenuboxlev1 a {
  font-size: 12px !important;
  padding: 8px 12px !important;
}

/* --- Hide on tablet --- */
.newstitlecategory,
.articlestitlecategory,
.forumcategorydesc,
.forumtopiclastmsgdate {
  display: none;
}

.stayconnectedimages {
  display: flex;
  gap: 4px;
}

.stayconnectedimages .social-icon {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.topsearch {
  display: none;
}

/* --- News layout --- */
.news-grid {
  grid-template-columns: repeat(2, 1fr);
}

.hero-article-title {
  font-size: 22px !important;
}

.news-compact-date {
  display: none !important;
}

/* --- Article categories --- */
.articlescategory {
  width: 88px;
  height: 95px;
  font-size: 10px;
  line-height: 1.3em;
}

.articlescategory img {
  width: 48px;
  height: 48px;
}

.articlesimilar {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

/* --- Titles --- */
.rightpaneltitle {
  font-size: 15px;
}

/* --- Banners & ads --- */
#topbannerad {
  max-width: 700px;
  overflow: hidden;
}

#topbannerimg {
  left: 0;
  max-width: 100%;
}

/* --- Footer --- */
.footerpartners {
  display: none;
}

.footer-columns {
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 700px;
}

/* --- Misc --- */
.rightpanel img {
  max-width: 100%;
}

.shoutboxlinecontent {
  padding-left: 0;
}

}
/* Media Queries */

@media screen and (min-width: 1024px) and (max-width: 1279px) {

/* =============================================
   DESKTOP TABLET: 1024-1279px
   Core layout handled by theme.css @media rules.
   This file only adds breakpoint-specific tweaks.
   ============================================= */

/* --- Menu --- */
.xmenuboxlev1 {
  width: 660px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

#menu a {
  font-size: 12px;
}

.xmenuboxlev1 a {
  font-size: 9px !important;
  padding-left: 8px;
  letter-spacing: -0.10em;
}

/* --- Banners & ads --- */
#topbannerad {
  max-width: 1000px;
  overflow: hidden;
}

#topbannerimg {
  left: 0;
  max-width: 1000px;
}

/* --- Footer --- */
.footerpartners {
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}

.footer-columns {
  max-width: 1000px;
}

.outroblock1, .outroblock2 {
  max-width: 1000px;
}

/* --- News layout --- */
.news-grid {
  grid-template-columns: repeat(2, 1fr);
}

.rightpanelskyad {
  margin-left: 2px !important;
}

}