/*
 * @package AJAX_Chat
 * @author Sebastian Tschan
 * @author Philip Nicolcev
 *
 * Color palette inspired by phpBB style "damaio/avatar"
 * Based on original Ajax chat css file for "prosilver"
 */
@import url('global.css');
@import url('fonts.css');
@import url('print.css');
@import url('custom.css');
@import url('group_colors.css');


:root{
	--color-privmsg: #FF8C42;	
	--color-user-guest: gray;	
	--color-user-user: #000000;	
	--color-user-customUser: #0c95d9;	
	--color-user-moderator: #000066;	
	--color-user-admin: #800000;	
	--color-user-chatBot: #FF6600;
}

/* -----------------------------------------
 *	 Light & Dark theme variables declaration
 * -----------------------------------------*/
html,
[data-theme="light"] {
	/* New variables */
	--color-forums-rules: oklch(0.85 0 0);
	--color-forums-sheets: oklch(0.95 0.08 100);
	--color-forums-northerntribes: oklch(0.85 0.15 264);
	--color-forums-republiccity: oklch(0.85 0.06 82);
	--color-forums-firenation: oklch(0.95 0.15 29);
	--color-forums-earthkingdom: oklch(0.95 0.15 145);
	--color-forums-airnomads: oklch(0.95 0.15 237);
	--color-forums-southerntribes: oklch(0.85 0.15 215);
	--color-forums-travels: oklch(0.95 0.15 30);
	--color-forums-outofworld: oklch(0.95 0.15 300);
	--color-forums-gradient-start: 30%;
	--color-forums-gradient-end: calc(100% - 440px);
	--color-forums-gradient-angle: 90deg;
	--opacity-forums-figures: 0.35;
	--opacity-forums-colors: 0.45;
	--position-forums-figures-right: calc(100% - 440px);
	
	/* Damaio variables with new values */
    --color-3: oklch(0.95 0 0);
	--main-color1: oklch(0.457 0.085 246.8);
	--main-color2: oklch(0.652 0.185 252.3);
	--main-color3: oklch(0.614 0.113 248.4);
	
	/* Damaio variables */
    --color-1: #f5f5f5;
    --color-2: #e5e5e5;
    --color-3: #ffffff;
    --text-color-1: #444444;
    --text-color-2: #3d3d3d;
    --text-color-3: #000000;
    --links-color: var(--text-color-1);
    --h2-color: var(--text-color-1);
    --bg1-color: var(--color-1);
    --bg2-color: var(--color-1);
    --bg3-color: var(--color-1);
    --input-bg: #ffffff;
    --input-txt-color: #333333;
    --border-color-1: #b8b5b5;
    --border-color-2: #c7c3bf;
    --border-color-3: var(--color-1);
    --color-warning: #ffe799;
    --color-error: #e60a4c;
    --filter-1: none;
    --filter-2: none;
    --switch-light-dark: "\f186";
    --shadowcolor: rgba(0, 0, 0, 0.35);
    color-scheme: light;
}

[data-theme="dark"] {
	/* New variables */
	--color-forums-rules: oklch(0.65 0 0);
	--color-forums-sheets: oklch(0.55 0.08 100);
	--color-forums-northerntribes: oklch(0.55 0.15 264);
	--color-forums-republiccity: oklch(0.75 0.06 82);
	--color-forums-firenation: oklch(0.55 0.15 29);
	--color-forums-earthkingdom: oklch(0.55 0.15 145);
	--color-forums-airnomads: oklch(0.95 0.15 237);
	--color-forums-southerntribes: oklch(0.55 0.15 215);
	--color-forums-travels: oklch(0.55 0.15 30);
	--color-forums-outofworld: oklch(0.55 0.15 300);
	--opacity-forums-figures: 0.55;
	--opacity-forums-colors: 0.25;
	
	/* Damaio variables with new values */
    --color-3: oklch(0.23 0.02 257);
	
	/* Damaio variables */
    --color-1: #1d232e;
    --color-2: #242b36;
    --color-3: #131a24;
    --text-color-1: #d9e2e4;
    --text-color-2: #cccccc;
    --text-color-3: #ffffff;
    --links-color: var(--text-color-1);
    --h2-color: var(--text-color-1);
    --bg1-color: var(--color-1);
    --bg2-color: var(--color-1);
    --bg3-color: var(--color-1);
    --input-bg: #131a24;
    --input-txt-color: #ffffff;
    --border-color-1: #333333;
    --border-color-2: #777f85;
    --border-color-3: var(--color-1);
    --color-warning: #ffe799;
    --color-error: #c90842;
    --filter-1: saturate(150%);
    --filter-2: brightness(160%);
    --switch-light-dark: "\f0eb";
    --shadowcolor: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}

/* Firefox button padding fix */
#content #bbCodeContainer input::-moz-focus-inner, #content #logoutButton::-moz-focus-inner, #content a#returnchatButton::-moz-focus-inner, #content #submitButton::-moz-focus-inner {
	border:0;
	padding:0;
}

/* Buttons */
#content #bbCodeContainer input, #content #logoutButton, #content a#returnchatButton, #content #submitButton, #loginForm #loginButton {
	background-color:#F7F5F1;
	color:#333333;
	border: 1px solid #8a8a8a;
	background-image: linear-gradient(to bottom, #fafafa, #cdcdcd);
	background-image: -webkit-linear-gradient(top, #fafafa, #cdcdcd);
}
#content select, #loginForm select, #loginForm input, #content textarea {
	background-color:#FFF;
	color:#333333;
	border: 1px solid #ababab;
}

/* Status Icon */
#content #statusIconContainer {
	background: url('../img/loading-sprite.svg') no-repeat 0px 0px; 
}
#content #statusIconContainer.waiting {
	background-position: 0px -22px;
}
#content #statusIconContainer.retrying {
	background-position: 0px -44px;
}


/* Options Container */
#content #optionsContainer button {
    background: none;
    border: none;
    padding: 0;
    margin: 6px 0; 
    cursor: pointer;
    font-size: 18px; 
    font-weight: 900;
    color: var(--links-color);
    display: inline-block;
    font-family: FontAwesome;
}

#content #optionsContainer button:focus,
#content #optionsContainer button:hover {
    outline: none;
    color: var(--main-color2);
}

/* Headers */
#loginContent h1 {
	color:#333333;
}
#content #headline {
	left: 0px;
	right: 0px;
    background-color: var(--main-color1);
	color: white;
}
#content #onlineListContainer h3, #content #helpContainer h3, #content #settingsContainer h3 {
	background-color:var(--main-color1);
	color:#fff;
	height: 25px;
}

/* Other Theme Elements */
.ajax-chat {
	background-color: var(--color-1);
	color: var(--text-color-1);;
}
#content #mainPanelContainer {
	scrollbar-color: var(--main-color1) var(--color-2);
}
#settingsList input:checked {
    accent-color: var(--main-color1); /* la coche reste blanche */
}
#settingsList input {
    width: 70px;
}
#content #chatList, #content #onlineListContainer, #content #helpContainer, #content #settingsContainer {
	border-color: #ababab;
}
.ajax-chat .popup {
	background-color:#FFF;
	border: 1px solid #ababab;
	box-shadow: 2px 2px 2px #777;
}
#content #chatList .deleteSelected {
	border-width:1px;
	border-style:dotted;
}
#content #helpContainer #helpList table, #content #settingsContainer #settingsList table {
	border-collapse:collapse;
}
#loginContent a {
	color:#333333;
}
#loginContent input, #loginContent select {
	background-color:#FFF;
	color:#333333;
}
#loginContent #loginButton {
	background-color:#F7F5F1;
	color:#333333;
}
#loginContent #errorContainer {
	color:red;
}
#content a {
	color:#333333;
}
#content #chatList, #content #onlineListContainer, #content #helpContainer, #content #settingsContainer, #content #colorCodesContainer, #content #emoticonsContainer {
	background-color:var(--color-1);
}
#content #colorCodesContainer {
	box-shadow: 2px 2px 2px #777;
}
#content #colorCodesContainer a {
	border-color:black;
}
#content #optionsContainer input {
	background-color:transparent;
}
#content .rowEven, #helpList dl:nth-child(even), #settingsList dl:nth-child(even) {
	background-color:var(--color-1);
}
#content .rowOdd, #helpList dl:nth-child(odd), #settingsList dl:nth-child(odd) {
	background-color:var(--color-3);
}
#content #chatList .rowOdd.private {
	background-color:#F8D0D0;
}
#content #chatList .rowEven.private {
	background-color:#F8D9D0;
}
#content .rowEven.broadcast {
	background-color:#4fdef7;
}
#content .rowOdd.broadcast {
	background-color:#0aa5cc;
}
#content .rowEven > span.alert, #content .rowOdd > span.alert {
	font-weight: bolder;
}
#content .guest {
	color:var(--color-user-guest);
}
#content .user {
	color:var(--color-user-user);
}
#content .customUser {
	color:var(--color-user-customUser);
}
#content .moderator {
	color:var(--color-user-moderator);
}
#content .admin {
	color:var(--color-user-admin);
}
#content .chatBot {
	color:var(--color-user-chatBot);
}
#content #chatList .chatBotErrorMessage {
	color:red;
}
#content #chatList a {
	color:#D31141;
}
#content #chatList .deleteSelected {
	border-color:red;
}

#content .pokemons-rose-a-paillettes {
	background: linear-gradient(to right, #A1A1A1 0%, #FF66FF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}