/** Helion theme - Place your custom CCS under this line */

:root {
  /* Define here the logo properties */
  --logo-path: url("./images/site_logo.png");
  --logo-width: 143;
  --logo-height: 37; 

  /* Define here the two dominant colours */
  --primary-hue: 209; /* Blue */
  --secondary-hue: 0; /* Red */

  --primary-saturation: 68%;
  --primary-lightness: 44%;
  --primary-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
  --secondary-saturation: 63%;
  --secondary-lightness: 45%;
  --secondary-color: hsl(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness));
  --contrast-color: #fff;

  --block-background: #f8f8f8;
  --block-border: 1px solid #dfdfdf;
  --block-radius: 5px;
  --block-shadow: inset 0 0 1px 1px hsla(0, 0%, 100%, 0.69), 0 0 1px hsla(0, 0%, 0%, 0.1);

  --common-gradient: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.09) 0%, hsla(0, 0%, 100%, 0.18) 4%, hsla(0, 0%, 100%, 0.02) 79%, hsla(0, 0%, 100%, 0.01) 89%, hsla(0, 0%, 0%, 0.01) 93%, hsla(0, 0%, 0%, 0) 100%);

  --text-shadow: 1px 1px 0 hsla(0, 0%, 0%, 0.2);
  --box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.25);
  --transition-bg: background-color 0.25s ease;

  --text-error: #bc2a2a;
  --text-dark: #000000;

  --max-wrap: 1152px;
}

.search-header {display: none}

/** Use with forum image as forum icon
 * https://www.phpbb.com/customise/db/extension/forum_image_as_forum_icon/
---------------------------------------------------------------------------- **/
.forum-image img {
  max-width: 100%;
  border-radius: 50px;
  width: 40px;
}

.forum-image {
  float: right;
  padding-top: 0;
  margin-right: 8px;
}

.nav {background-image: url("./images/bound3.webp")}

/* RESPONSIVE HEADERBAR
*****************************/
.headerbar {
    background: url("./images/bound.webp");
    color: #fff;
    background-size: 100% 110%;
    background-position: 50% 25%;
    height: 120px
}

.footer-bar {
  background-image: linear-gradient(rgb(96, 107, 133) 0%, rgb(86, 98, 129) 13%, rgb(59, 72, 104) 78%, rgb(57, 69, 101) 91%, rgb(60, 72, 103) 100%);
  background-image: url("./images/bound3.webp");
}

.wrap {max-width: var(--max-wrap)}

/* PROFIL ONLINE/OFFLINE
*****************************/
.avatar-container img.avatar, .avatar-container .avatar-none {
    border: 2px solid #DB0320;
}

.online img.avatar, .online .avatar-none {
    border-color: #03DB27;
}

/* Sature la couleur des groupes  */
.username-coloured,
.group-coloured,
.online-list em a[style*="color"],
.section-memberlist td a[style*="color"] {
    filter: saturate(160%);
}

/** BBCode CSS
----------------------------------- **/
.tip, .sinfo, .snote, .warning {
    display: block;
    border-radius: 7px;
    border-style: solid;
    border-width: 1px;
    padding: 0.5em;
    margin: 1em;
    box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
    color: #111222;
    border-color: #ccc;
}   
.tip {border-left: 2px solid #5e8555; background-color: #e5ffdf;}
.sinfo {border-left: 2px solid #e0c304; background-color: #ffc;}
.snote {border-left: 2px solid #0b76d4; background-color: #badfff;} 
.warning {border-left: 2px solid #f52a2a; background-color: #fcc;}  

.inline {
  background: #dcdcdc;
  border: 1px solid #c9d2d8;
  color: #333;
  padding: 0 3px;
}

/** Use with forum image as forum icon
 * https://www.phpbb.com/customise/db/extension/forum_image_as_forum_icon/
---------------------------------------------------------------------------- **/
.forum-image img {
  max-width: 100%;
  border-radius: 50px;
  width: 40px;
}

.forum-image {
  float: left;
  padding-top: 0;
  margin-right: 8px;
}

/** Use with cBB Attachments extension by Canidev
 * https://www.canidev.com/store/cbb-attachments
--------------------------------------------------------- **/
.attachment-preview .file-info {
  color: #333;
  background: #dcdcdc;
}

.dark-theme .inline-attachment .attachment-preview.bordered {
  background-color: #eee!important;
}

/*  Browser Scrollbar Colors */
html {
  /* For Firefox */
  overflow-y: scroll;
  scrollbar-color: #4e5e82 #eee;
  scrollbar-width: thin;
}

/* For Chrome and other browsers except Firefox */
body::-webkit-scrollbar {
    width: 0.5em;
    background-color: #4e5e82;
}
body::-webkit-scrollbar-thumb {
    background-color: #eee;
}

/* Highlighter syntax
---------------------------------------- */
.hljs-tag {
  color: #333!important
}

/* Form select styles
---------------------------------------- */
select.select-box {
  color: #444444;
  border-color: #C7C3BF !important;
  background-color: #EFEFEF; /* Old browsers */ /* FF3.6+ */
}

select.select-box {
  border: 1px solid transparent;
  border-radius: 4px;
  height: 24px;
  padding: 3px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Inline image thumbnails
*****************************/
div.inline-attachment dl.thumbnail, div.inline-attachment dl.file {
    display: block;
    margin-bottom: 1em;
    margin-top: 1em;
}

/* Font Awesome icônes
*****************************/
.nav-main .fa-question-circle::before {
  content: "\f128";
}

/* Colored FA icônes
*****************************/
.fa-cogs:before{color:red;}
.fa-question-circle:before{color:royalblue;}

.fa-bold:before {color:#2E8B57}
.fa-italic:before {color:#2e8857}
.fa-underline:before {color:#2E8B57}
.fa-code:before {color:#ff4500}
.fa-list:before {color:#8b4513}
.fa-list-ol:before {color:#8b4513}
.fa-asterisk:before {color:#800080}
.fa-image:before {color:#800080}
.fa-link:before {color:#800080}
.fa-flash:before {color:#483d8b}
.fa-tint:before {color:#ff8c00}

.fa-contao:before {color:#2E8B57}
.fa-header:before {color:brown}
.fa-snapchat-ghost:before {color:#ff4500}
.fa-info-circle:before {color:#8b4513}
.fa-sticky-note:before {color:#8b4513}
.fa-star:before {color:#8b4513}
.fa-smile-o:before {color:#800080}

.format-buttons .button:hover {
    background-color: var(--block-background);
    border: var(--block-border);
    color: #808080;
    text-shadow: none;
}

/* online statu par défaut */
.profile-user-status span {display: none}