/**========================================================================
* TopCzat - Nowy_motyw Vivid Gradient
* Pełny motyw CSS z żywymi kolorami, gradientami i widocznym tłem czatu
* Obrazek tła: ./images/background.jpg
*========================================================================**/

/* custom font */
@import url('./font/Roboto.css');

/* =========================================================
   GLOBAL
========================================================= */

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

body {
	font-family: 'Roboto', sans-serif;
	color: #ffffff;
	background:
		linear-gradient(135deg, rgba(10, 14, 40, 0.94), rgba(44, 10, 80, 0.92), rgba(0, 55, 95, 0.90)),
		url('./images/background.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}

a {
	color: #00e5ff;
	text-decoration: none;
	transition: 0.2s ease;
}

a:hover {
	color: #ffdd57;
	text-shadow: 0 0 8px rgba(255, 221, 87, 0.55);
}

button {
	background: transparent;
	color: #ffffff;
	border: 0;
	cursor: pointer;
}

input,
textarea,
.post_input_container {
	background: rgba(5, 12, 35, 0.88);
	color: #ffffff;
	border: 1px solid rgba(0, 229, 255, 0.35) !important;
	font-family: 'Roboto', sans-serif, 'FontAwesome';
	box-shadow: inset 0 0 14px rgba(0, 229, 255, 0.08);
}

input:focus,
textarea:focus {
	outline: none;
	border-color: rgba(255, 0, 200, 0.65) !important;
	box-shadow:
		0 0 0 2px rgba(255, 0, 200, 0.15),
		0 0 18px rgba(0, 229, 255, 0.20);
}

.setdef {
	color: #ffffff;
}

/* =========================================================
   MAIN BACKGROUNDS
========================================================= */

#intro_top,
.backglob,
.back_chat {
	background:
		linear-gradient(135deg, rgba(4, 7, 20, 0.50), rgba(65, 12, 100, 0.34), rgba(0, 190, 255, 0.20)),
		url('./images/background.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}

.back_chat {
	background-color: rgba(5, 8, 25, 0.28);
}

.back_priv {
	background:
		linear-gradient(135deg, rgba(15, 20, 55, 0.86), rgba(55, 15, 85, 0.78));
}

.back_panel {
	background:
		linear-gradient(180deg, rgba(11, 18, 50, 0.96), rgba(45, 14, 78, 0.93));
	border-left: 1px solid rgba(0, 229, 255, 0.20);
	box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35);
}

.back_pmenu,
.back_menu {
	background:
		linear-gradient(180deg, rgba(13, 18, 55, 0.97), rgba(31, 12, 65, 0.95));
	border-right: 1px solid rgba(0, 229, 255, 0.18);
}

.page_full {
	background:
		linear-gradient(135deg, rgba(9, 12, 35, 0.94), rgba(31, 12, 65, 0.90));
}

.back_box,
.reply_item {
	background:
		linear-gradient(135deg, rgba(11, 18, 50, 0.92), rgba(30, 16, 65, 0.88));
	border: 1px solid rgba(255, 255, 255, 0.07);
}

.back_input {
	background:
		linear-gradient(90deg, rgba(8, 13, 40, 0.97), rgba(31, 12, 65, 0.95), rgba(8, 42, 62, 0.95));
	border-top: 1px solid rgba(0, 229, 255, 0.24);
	box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.32);
}

.back_modal,
.page_element,
.float_menu,
.pboxed {
	background:
		linear-gradient(135deg, rgba(12, 18, 52, 0.98), rgba(47, 16, 78, 0.97));
	border: 1px solid rgba(0, 229, 255, 0.18);
}

.back_quote,
.cquote {
	background: rgba(0, 229, 255, 0.13);
	color: #ffffff;
	border-left: 3px solid #00e5ff;
}

.cookie_wrap {
	background: rgba(8, 13, 40, 0.96);
	color: #ffffff;
	border: 1px solid rgba(0, 229, 255, 0.22);
}

/* =========================================================
   HEADER / FOOTER / SIDEBAR
========================================================= */

.bhead,
.modal_top,
.pro_top {
	background:
		linear-gradient(90deg, #120c3d, #4c13a8, #0088ff);
	color: #ffffff;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.bfoot,
.foot {
	background:
		linear-gradient(90deg, #06091f, #28124f, #063b68);
	color: #ffffff;
	border-top: 1px solid rgba(0, 229, 255, 0.22);
}

.bsidebar {
	background:
		linear-gradient(180deg, rgba(8, 13, 38, 0.98), rgba(43, 14, 77, 0.96));
	color: #ffffff;
	border-right: 1px solid rgba(0, 229, 255, 0.16);
}

.back_ptop {
	background:
		linear-gradient(90deg, rgba(25, 13, 72, 0.96), rgba(0, 100, 165, 0.88));
	color: #ffffff;
}

/* =========================================================
   BUTTONS
========================================================= */

.theme_btn,
.back_theme {
	background:
		linear-gradient(135deg, #00e5ff, #0077ff, #8f00ff);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.20);
	box-shadow: 0 0 18px rgba(0, 229, 255, 0.25);
	transition: 0.2s ease;
}

.theme_btn:hover,
.back_theme:hover {
	filter: brightness(1.12);
	box-shadow: 0 0 24px rgba(0, 229, 255, 0.42);
}

.default_btn,
.back_default {
	background:
		linear-gradient(135deg, #ff2db2, #7b2cff);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 0 14px rgba(255, 45, 178, 0.22);
}

.defaultd_btn {
	background:
		linear-gradient(135deg, #3b3f58, #24283d);
	color: #ffffff;
}

.ok_btn {
	background:
		linear-gradient(135deg, #00d084, #00b894);
	color: #ffffff;
}

.warn_btn {
	background:
		linear-gradient(135deg, #ffb703, #ff7b00);
	color: #ffffff;
}

.delete_btn {
	background:
		linear-gradient(135deg, #ff1744, #b00020);
	color: #ffffff;
}

.send_btn {
	color: #00e5ff;
	text-shadow: 0 0 10px rgba(0, 229, 255, 0.45);
}

/* =========================================================
   LINKS / THEME COLORS
========================================================= */

.theme_color,
.menui,
.subi,
.pselected {
	color: #00e5ff;
	text-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

.default_color,
.input_item {
	color: #ff4fd8;
}

.error {
	color: #ff315f;
}

.success {
	color: #00e676;
}

.warn {
	color: #ffcc33;
}

/* =========================================================
   LISTS / HOVERS / SELECTIONS
========================================================= */

.bback,
.bbackhover,
.pag_btn,
.cselected,
.liked {
	background: rgba(255, 255, 255, 0.06);
}

.bbackb,
.fborder {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(0, 229, 255, 0.16);
}

.bhover:hover,
.bbackhover:hover,
.bpmenu:hover,
.bsub:hover,
.bmenu:hover,
.submenu:hover {
	background:
		linear-gradient(90deg, rgba(0, 229, 255, 0.14), rgba(255, 45, 178, 0.12));
}

.bbackhoverb {
	background: rgba(255, 255, 255, 0.06);
}

.bbackhoverb:hover {
	background: rgba(0, 229, 255, 0.14);
	border: 1px solid rgba(0, 229, 255, 0.22);
}

.blisting {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.blisting:hover {
	background: rgba(0, 229, 255, 0.08);
}

.blist {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bselected,
.rselected,
.tab_selected,
.modal_selected,
.pagselected,
.pag_btn:hover {
	background:
		linear-gradient(90deg, rgba(0, 229, 255, 0.18), rgba(143, 0, 255, 0.18));
	border-color: rgba(0, 229, 255, 0.20);
}

.gtag {
	background:
		linear-gradient(135deg, #ff2db2, #00e5ff);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.22);
}

/* =========================================================
   BORDERS / SHADOWS
========================================================= */

.bborder,
.float_top,
.float_ctop,
.bmenu,
.submenu {
	border-bottom: 1px solid rgba(0, 229, 255, 0.12);
}

.tborder {
	border-top: 1px solid rgba(0, 229, 255, 0.12);
}

.lborder,
.ppanel {
	border-left: 1px solid rgba(0, 229, 255, 0.12);
}

.rborder {
	border-right: 1px solid rgba(0, 229, 255, 0.12);
}

.bshadow,
.page_element,
.float_menu,
.btnshadow,
.pboxed,
.tab_menu {
	box-shadow:
		0 8px 28px rgba(0, 0, 0, 0.38),
		0 0 18px rgba(0, 229, 255, 0.07);
}

/* =========================================================
   CHAT LOGS / BUBBLES
========================================================= */

.mbubble,
.preview_bubble {
	background:
		linear-gradient(135deg, rgba(0, 140, 255, 0.48), rgba(126, 31, 255, 0.42), rgba(255, 45, 178, 0.28));
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.24),
		0 0 16px rgba(0, 229, 255, 0.10);
}

.mbubble:hover,
.preview_bubble:hover {
	box-shadow:
		0 6px 22px rgba(0, 0, 0, 0.30),
		0 0 22px rgba(0, 229, 255, 0.18);
}

.topic_log {
	background:
		linear-gradient(90deg, rgba(255, 183, 3, 0.22), rgba(255, 45, 178, 0.20));
	color: #fff2b8;
	border: 1px solid rgba(255, 221, 87, 0.16);
}

.sys_log {
	color: #b8f7ff;
}

.chat_system {
	color: #b8f7ff;
}

.system_text {
	background: rgba(255, 255, 255, 0.08);
	color: #c5f7ff;
	border: 1px solid rgba(0, 229, 255, 0.12);
}

/* private log bubble colors */
.target_private,
.hunt_quote {
	color: #ffffff;
	background:
		linear-gradient(135deg, rgba(255, 45, 178, 0.55), rgba(126, 31, 255, 0.48));
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.hunter_private,
.targ_quote {
	color: #ffffff;
	background:
		linear-gradient(135deg, rgba(0, 229, 255, 0.50), rgba(0, 119, 255, 0.44));
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* =========================================================
   TEXT COLORS
========================================================= */

.user {
	color: #ffffff;
	font-weight: 700;
	text-shadow: 0 0 8px rgba(0, 229, 255, 0.18);
}

.sub_text,
.list_mood,
.sub_chat,
.sub_priv {
	color: #b8c7ff;
	font-weight: 400;
}

.sub_date {
	color: #ffdd57;
}

.main_post_item {
	color: #a9b7ff;
}

.offline {
	opacity: 0.55;
	filter: grayscale(0.45);
}

/* =========================================================
   TABS / MODALS
========================================================= */

.tab_menu {
	background:
		linear-gradient(90deg, rgba(11, 18, 50, 0.96), rgba(35, 14, 70, 0.96));
	border: 1px solid rgba(0, 229, 255, 0.12);
}

.modal_mback {
	background: rgba(255, 255, 255, 0.06);
}

.modal_mborder {
	border-bottom: 1px solid rgba(0, 229, 255, 0.12);
}

.modal_back {
	background-color: rgba(0, 0, 0, 0.66);
	backdrop-filter: blur(3px);
}

.modal_in {
	border: 1px solid rgba(0, 229, 255, 0.18);
}

/* =========================================================
   WALL / NEWS / MEDIA
========================================================= */

.plikes {
	background:
		linear-gradient(135deg, rgba(255, 45, 178, 0.18), rgba(0, 229, 255, 0.16));
	color: #ffffff;
}

.my_notice {
	color: #ffffff;
	background:
		linear-gradient(135deg, #ff2db2, #8f00ff);
}

.post_video {
	background: rgba(0, 0, 0, 1);
}

/* =========================================================
   PROGRESS / NOTIFICATIONS / SPINNER
========================================================= */

.bprogress {
	background:
		linear-gradient(90deg, #00e676, #00e5ff);
	color: #ffffff;
}

.bnotify {
	background:
		linear-gradient(135deg, #ff1744, #ff2db2);
	color: #ffffff;
	box-shadow: 0 0 12px rgba(255, 23, 68, 0.45);
}

.foot_notify,
.head_notify {
	border: 1px solid #ffffff;
}

.bspin {
	color: rgba(0, 229, 255, 0.60);
}

/* =========================================================
   OUTSIDE PAGES
========================================================= */

.back_page {
	background:
		linear-gradient(135deg, #070b22, #24104d, #003a62);
	color: #ffffff;
}

/* =========================================================
   SLIDER
========================================================= */

.boom_slider .ui-widget-content {
	background: rgba(255, 255, 255, 0.18);
}

.boom_slider .ui-state-default {
	background: #00e5ff !important;
	box-shadow: 0 0 14px rgba(0, 229, 255, 0.55);
}

.boom_slider .ui-state-active {
	background: #ff2db2 !important;
}

.boom_slider .ui-slider-range {
	background:
		linear-gradient(90deg, #00e5ff, #ff2db2);
}

/* =========================================================
   SELECTBOX
========================================================= */

.selectboxit-list,
.selectboxit-btn {
	background-color: rgba(8, 13, 40, 0.96);
	border: 1px solid rgba(0, 229, 255, 0.22);
	color: #ffffff;
}

.selectboxit-list .selectboxit-focus .selectboxit-option-anchor {
	background:
		linear-gradient(90deg, rgba(0, 229, 255, 0.18), rgba(255, 45, 178, 0.16));
	color: #ffffff;
}

.selectboxit-default-arrow {
	border-top: 4px solid #00e5ff;
}

.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus,
.selectboxit-btn.selectboxit-enabled:active {
	background: rgba(12, 18, 52, 0.98);
	box-shadow: inset 0 0 30px rgba(0, 229, 255, 0.12);
	color: #ffffff;
}

.selectboxit-options {
	background: rgba(12, 18, 52, 0.98);
	color: #ffffff;
}

.selectboxit-list .selectboxit-option-anchor {
	color: #c7d4ff;
}

/* =========================================================
   RADIUS
========================================================= */

.brad5,
.reg_button,
.page_element,
.float_menu,
.modal_content,
.mbubble,
.pboxed,
input,
textarea {
	border-radius: 12px;
}

/* =========================================================
   MOBILE / RESPONSIVE
========================================================= */

@media screen and (max-width: 1200px) {
	.back_panel,
	.back_pmenu {
		background:
			linear-gradient(180deg, rgba(8, 13, 40, 0.98), rgba(43, 14, 77, 0.97));
	}

	.back_chat {
		background:
			linear-gradient(135deg, rgba(4, 7, 20, 0.42), rgba(65, 12, 100, 0.30)),
			url('./images/background.jpg');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		background-attachment: fixed;
	}
}

@media screen and (max-width: 768px) {
	body {
		background-attachment: scroll;
	}

	#intro_top,
	.backglob,
	.back_chat {
		background-attachment: scroll;
	}

	.mbubble,
	.preview_bubble {
		background:
			linear-gradient(135deg, rgba(0, 140, 255, 0.58), rgba(126, 31, 255, 0.50), rgba(255, 45, 178, 0.34));
	}

	.back_panel,
	.back_pmenu,
	.back_input {
		backdrop-filter: none;
	}
}

/* =========================================================
   EXTRA VISIBILITY FIXES
   Pomaga, gdy inne elementy przykrywają tło
========================================================= */

.backglob {
	position: relative;
}

.backglob::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at top left, rgba(0, 229, 255, 0.18), transparent 34%),
		radial-gradient(circle at bottom right, rgba(255, 45, 178, 0.18), transparent 36%);
	z-index: 0;
}

.backglob > * {
	position: relative;
	z-index: 1;
}