Raw Source Toggle Dropdown

• Minified Source

scroptnik / CatWar Design Override

// ==UserScript==
// @name         CatWar Design Override
// @description  Intercept css for CatWar
// @namespace    http://tampermonkey.net
// @version      1.2
// @match        https://catwar.su/cw3/
// @match        https://catwar.net/cw3/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=catwar.su
// @run-at       document-start
// @author       scroptnik
// @license      MIT
// @grant        GM_xmlhttpRequest
// @grant 	     unsafeWindow
// ==/UserScript==

(function() {
    'use strict';

	let app;

	let mixObserver = null;
	let currentMix = null;

	function replace_chooseChars() {
		const charsMenu = document.getElementsByClassName("game-topbar-chars")[0]
		if (!charsMenu) {
			setTimeout(replace_chooseChars, 100);
			return;
		}

		let chars = [];
		for (let el of charsMenu.querySelectorAll('[role="menuitem"]')) {
			if (el.text && el.href) chars.push([el.text, el.href]);
		}
		charsMenu.remove();

		//console.log(chars);

		const charsDiv = document.createElement("div");
		charsDiv.className = "chars";
		for (const char of chars) {
			const a = document.createElement('a');
			a.href = char[1];
			a.textContent = char[0];
			charsDiv.appendChild(a);
		}

		document.getElementsByClassName('game-topbar')[0].prepend(charsDiv);
	}


	function createMixWatcher({ id, className, selector = 'button' }) {
		let currentEl = null;
		let elObserver = null;

		function replace() {
			const el = currentEl || document.getElementById(id);
			if (!el) return;

			el.querySelectorAll(`${selector}:not(.${className})`).forEach(node => {
				node.classList.add(className);
			});
		}

		function attach() {
			const el = document.getElementById(id);
			if (!el || el === currentEl) return;

			elObserver?.disconnect();
			currentEl = el;
			elObserver = new MutationObserver(replace);
			elObserver.observe(el, { childList: true, subtree: true });

			replace();
		}

		attach();
		return { attach, replace };
	}

	function watchElements() {
		const mix = createMixWatcher({ id: 'mix', className: 'mixbtn' });
		const multi = createMixWatcher({ id: 'item_multi', className: 'mixbtn' });

		const bodyObserver = new MutationObserver(mutations => {
			for (const m of mutations) {
				for (const node of m.addedNodes) {
					if (node.nodeType !== 1) continue;
					if (node.id === 'mix' || node.querySelector?.('#mix') ||
						node.id === 'item_multi' || node.querySelector?.('#item_multi')) {
						mix.attach();
						multi.attach();
						return;
					}
				}
				for (const node of m.removedNodes) {
					if (node.nodeType !== 1) continue;
					if (node.id === 'mix' || node.querySelector?.('#mix') ||
						node.id === 'item_multi' || node.querySelector?.('#item_multi')) {
						mix.attach();
						multi.attach();
						return;
					}
				}
			}
		});

		bodyObserver.observe(document.body, { childList: true, subtree: true });
	}





	function remove_inputPlaceholder() {
		const input = document.getElementById('text');
		if (!input) {
			setTimeout(remove_inputPlaceholder, 100);
			return;
		}
		input.placeholder = '';
	}

	function modify() {
		replace_chooseChars();
		watchElements();
		remove_inputPlaceholder();
	}

	function modify_notRead(name, spanId) {
		const desc = Object.getOwnPropertyDescriptor(app.game, name);
		Object.defineProperty(app.game, name, {
			configurable: true,
			get() { return desc.get.call(this); },
			set(v) {
				const result = desc.set.call(this, v);
				app.$nextTick(() => {
					const span = document.getElementById(spanId);
					if (span) span.textContent = '(' + v + ')';
				});
				return result;
			},
		});
	}

	function waitForApp(callback) {
		const tryFind = () => {
			const el = document.getElementById('app');
			app = el && el.__vue__;
			if (app && app.game && app.chat) {
				callback(app);
				return true;
			}
			return false;
		};

		if (tryFind()) return;

		const timer = setInterval(() => {
			if (tryFind()) clearInterval(timer);
		}, 100);
	}

	function replace_css() {
		new MutationObserver((muts, obs) => {
			for (const m of muts) {
				for (const n of m.addedNodes) {
					if (n.tagName === 'LINK' && n.rel === 'stylesheet' && n.href.includes('.css')) {
						n.remove();
					}
				}
			}
		}).observe(document.documentElement, { childList: true, subtree: true });

		const originalCall = Function.prototype.call;

		Function.prototype.call = function(...args) {
			if (args.length >= 4 && typeof args[3] === 'function') {
				const potentialRequire = args[3];

				if (potentialRequire.m || potentialRequire.c) {
					const orig49 = potentialRequire.m[49];
					potentialRequire.m[49] = function (module, exports, require) {
						orig49.call(this, module, exports, require);

						const origFn = module.exports;
						module.exports = function (...args) {
							const list = origFn.apply(this, args);
							const origPush = list.push;
							list.push = function (item) {
								if (item[0] === 761) {
									item[1] = '';
								}
								return origPush.call(this, item);
							};
							return list;
						};
					};

					Function.prototype.call = originalCall;
				}
			}

			return originalCall.apply(this, args);
		};


		if (document.readyState === 'loading') {
			document.addEventListener('DOMContentLoaded', () => {
				document.getElementById('cw3-design-theme')?.remove();
				modify();
			});
		} else {
			document.getElementById('cw3-design-theme')?.remove();
		}

		const style = document.createElement('style');
		style.id = 'cw3_old';
		//style.textContent = r.responseText;
		{
			style.textContent = String.raw`
				:root {
	--skill-fill: #5FBF55;
	--skill-back: #DDDBE0;

	--param-fill: #5FBF55;
	--param-back: #F46461;

	--bar-width: 170px;
}


:root {
     --cw3-page-bg: RGBA(163, 134, 96, 0.8);
     --cw3-page-text: #000000;
     --ds-page-text: #000000;
     --ds-page-link: #291802;
     --ds-page-link-hover: #774503;
}
:root {
     --ui-radius: 0px;
     --ui-height: 20px;
    /* Spacing scale (utils: m-*, p-*) — Bootstrap-like */
     --ui-space-0: 0;
     --ui-space-1: 0.25rem;
     --ui-space-2: 0.5rem;
     --ui-space-3: 1rem;
     --ui-space-4: 1.5rem;
     --ui-space-5: 3rem;
    /* Lines */
     --ui-line: rgba(0, 0, 0, .16);
     --ui-line-soft: rgba(var(--ds-info-rgb, 255, 255, 255), .12);
    /* Surfaces / fills */
     --ui-fill: rgba(var(--ds-info-rgb, 255, 255, 255), .58);
     --ui-fill-hover: rgba(var(--ds-info-rgb, 255, 255, 255), .78);
     --ui-secondary: rgba(var(--ds-info-rgb, 255, 255, 255), .35);
     --ui-surface-subtle: rgba(var(--ds-info-rgb, 255, 255, 255), .03);
     --ui-surface-hover: rgba(var(--ds-info-rgb, 255, 255, 255), .10);
    /* Semantic colors */
     --ui-accent: var(--ds-primary, #d0b690);
     --ui-accent-hover: color-mix(in srgb, var(--ds-primary, #d0b690) 86%, black);
     --ui-accent-faint: color-mix(in srgb, var(--ui-accent) 12%, transparent);
     --ui-accent-border-soft: color-mix(in srgb, var(--ui-accent) 28%, transparent);
     --ui-danger: var(--ds-danger, #f26863);
     --ui-danger-hover: color-mix(in srgb, var(--ds-danger, #f26863) 86%, black);
     --ui-success: var(--ds-success, #98cc99);
     --ui-success-hover: color-mix(in srgb, var(--ui-success) 86%, black);
     --ui-info: var(--ds-info-link, #555555);
     --ui-info-hover: var(--ds-info-link-hover, #333333);
     --ui-warning: var(--ds-warning, #cc6602);
     --ui-text: var(--ds-info-text, #000000);
     --ui-text-muted: color-mix(in srgb, var(--ui-text) 72%, transparent);
     --ui-text-subtle: color-mix(in srgb, var(--ui-text) 55%, transparent);
     --ui-text-status-muted: color-mix(in srgb, var(--ui-info) 40%, var(--ui-text));
     --ui-on-accent: var(--ds-on-accent, #ffffff);
    /* Inputs */
     --ui-input-bg: var(--ds-input-bg, #000000);
     --ui-input-text: var(--ds-input-text, #ffffff);
     --ui-input-bg-hover: color-mix(in srgb, var(--ds-input-bg, #000000) 88%, white);
     --ui-input-bg-muted: color-mix(in srgb, var(--ui-input-bg) 80%, transparent);
    /* Soft status backgrounds */
     --ui-danger-soft: color-mix(in srgb, var(--ui-danger) 30%, transparent);
     --ui-danger-faint: color-mix(in srgb, var(--ui-danger) 12%, transparent);
     --ui-danger-medium: color-mix(in srgb, var(--ui-danger) 50%, transparent);
     --ui-danger-strong: color-mix(in srgb, var(--ui-danger) 80%, transparent);
     --ui-danger-border-soft: color-mix(in srgb, var(--ui-danger) 36%, transparent);
     --ui-success-soft: color-mix(in srgb, var(--ui-success) 30%, transparent);
     --ui-success-faint: color-mix(in srgb, var(--ui-success) 15%, transparent);
     --ui-success-border: color-mix(in srgb, var(--ui-success) 28%, transparent);
     --ui-info-soft: color-mix(in srgb, var(--ui-info) 30%, transparent);
     --ui-warning-soft: color-mix(in srgb, var(--ui-warning) 30%, transparent);
    /* Shared one-offs */
     --ui-quote-bg: color-mix(in srgb, var(--ui-text) 20%, transparent);
     --ui-tag-add-border: color-mix(in srgb, var(--ui-success) 70%, black);
     --ui-tag-add-bg: color-mix(in srgb, var(--ui-success) 85%, black);
     --ui-not-read-bg: color-mix(in srgb, var(--ui-danger) 38%, white);
    /* Settings layout (geometry only) */
     --settings-radius: 14px;
     --settings-pad: 14px 16px;
}
/** * @deprecated Prefer css/variables.css directly. * Kept as a stable path for older references / caches. */

 :root {
     --ds-info-rgb: 214, 105, 0;
     --ds-info-text: #000000;
     --ds-info-link: #291802;
     --ds-info-link-hover: #774503;
     --ds-input-bg: #ffffff;
     --ds-input-text: #000000;
     --ds-primary: #ffffff;
     --ds-danger: #B2241F;
     --ds-success: #2C7D2D;
     --ds-warning: #774503;
     --ds-on-accent: #000000;
	 --ds-main-backgound: rgb(255, 222, 170);
}








.header-warning {
     background: rgba(var(--ds-info-rgb, 255, 255, 255), 0.9);
     font-weight: bold;
     padding: 4px 8px;
     margin-top: 2px;
     color: var(--ui-text, #222222);
}
 .header-warning a {
     color: var(--ui-info, #072896);
}
 #worklist, .worklist {
     position: relative;
     display: inline-block;
     max-width: min(420px, 100%);
     margin-top: 5px;
     padding: 0;
     color: var(--ui-text, #000000);
     background: transparent;
     border-radius: 0;
     box-sizing: border-box;
}
 #worklist a, .worklist a {
     color: inherit;
}
 .worklist__summary {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 5px 10px;
     border: 1px solid color-mix(in srgb, var(--ui-line, #000) 35%, transparent);
     border-radius: 10px;
     background-color: rgba(var(--ds-info-rgb, 255, 255, 255), 0.6);
     cursor: pointer;
     list-style: none;
     user-select: none;
     font-weight: 650;
}
 .worklist__summary::-webkit-details-marker {
     display: none;
}
 .worklist__summary::after {
     content: '▼';
     font-size: .7em;
     opacity: .65;
     transition: transform .15s ease;
}
 .worklist[open] > .worklist__summary::after {
     transform: rotate(-180deg);
}
 .worklist__summary:hover, .worklist[open] > .worklist__summary {
     background-color: rgba(var(--ds-info-rgb, 255, 255, 255), 0.78);
}
 .worklist__total {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 1.4em;
     padding: 0 6px;
     border-radius: 999px;
     background: rgba(var(--ds-info-rgb, 255, 255, 255), .55);
     font-size: .9em;
}
 .worklist__total[data-busy="1"] {
     background: var(--ui-danger-faint, color-mix(in srgb, var(--ui-danger, #b42318) 18%, transparent));
     color: var(--ui-danger, #b42318);
}
 .worklist__menu {
     position: absolute;
     top: calc(100% + 4px);
     left: 0;
     z-index: 1200;
     display: flex;
     flex-direction: column;
     gap: 2px;
     min-width: 240px;
     max-width: min(360px, 90vw);
     max-height: min(300px, 50vh);
     overflow-x: hidden;
     overflow-y: auto;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
     padding: 6px;
     border: 1px solid color-mix(in srgb, var(--ui-line, #000) 35%, transparent);
     border-radius: 10px;
     background: rgba(var(--ds-info-rgb, 255, 255, 255), .96);
     box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
     font-weight: 400;
}
 .worklist__item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding: 7px 10px;
     border-radius: 7px;
     text-decoration: none;
     line-height: 1.3;
}
 .worklist__item:hover, .worklist__item:focus {
     background: rgba(var(--ds-info-rgb, 255, 255, 255), .55);
     outline: none;
}
 .worklist__item--busy {
     font-weight: 650;
}
 .worklist__item--warn {
     background: var(--ui-danger-faint, color-mix(in srgb, var(--ui-danger, #b42318) 10%, transparent));
}
 .worklist__item--warn:hover, .worklist__item--warn:focus {
     background: var(--ui-danger-soft, color-mix(in srgb, var(--ui-danger, #b42318) 18%, transparent));
}
 .worklist__item-count {
     flex: 0 0 auto;
     white-space: nowrap;
}
 .worklist__footer {
     margin-top: 4px;
     padding: 8px 10px 4px;
     border-top: 1px solid color-mix(in srgb, var(--ui-line, #000) 28%, transparent);
     font-size: .88em;
     opacity: .85;
}
 #tasks {
     background-color: var(--ui-input-bg-muted, rgba(0, 0, 0, 0.05));
     color: var(--ui-danger, #FF4D57);
     display: inline-block;
     padding: 5px;
     margin-top: 5px;
     border-radius: 5px;
     font-weight: bold;
}
 input, select, textarea {
     box-sizing: border-box;
}
 .copy-btn {
     border: none;
     outline: none;
     padding: 0;
     width: 24px;
     height: 24px;
     background: url(/cw3/symbole/copy.png) no-repeat;
     cursor: pointer;
}
 .code-text {
     font-family: Courier, Verdana;
}
 .spoiler {
     cursor: pointer;
     background-color: var(--ui-quote-bg, #cccccc);
     color: transparent;
     transition: color .5s ease, background-color .5s ease;
}
 .spoiler.revealed-spoiler {
     background-color: transparent;
     color: inherit;
}
 .other_cats_list > a {
     color: var(--ui-info, #555555);
}
 .site-quicknav {
     position: relative;
     z-index: 1200;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: 4px;
     width: fit-content;
     max-width: 100%;
     margin: 0 auto 8px;
     padding: 4px 6px;
     border: none;
     border-radius: 0;
     font-size: .85em;
     line-height: 1.25;
     border-radius: 8px;
     box-sizing: border-box;
     overflow: visible;
}
 .site-quicknav__rabbits {
     display: inline-flex;
     align-items: center;
     gap: 2px;
}
 .site-quicknav__privacy {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
     width: 22px;
     height: 22px;
     margin: 0;
     padding: 0;
     border: none;
     border-radius: 6px;
     background: transparent;
     color: inherit;
     cursor: pointer;
     opacity: .85;
     line-height: 0;
     vertical-align: middle;
     transition: background-color .15s ease, opacity .15s ease;
}
 .site-quicknav__privacy:hover, .site-quicknav__privacy:focus {
     opacity: 1;
     outline: none;
     background: rgba(var(--ds-info-rgb, 255, 255, 255), .45);
}
 .site-quicknav__privacy-icon {
     display: block;
     width: 14px;
     height: 14px;
     fill: currentColor;
     flex: 0 0 auto;
}
 .site-quicknav--private .site-quicknav__privacy-icon--eye {
     display: none;
}
 .site-quicknav:not(.site-quicknav--private) .site-quicknav__privacy-icon--slash {
     display: none;
}
 .site-quicknav--private .site-quicknav__rabbit-amount {
     letter-spacing: .04em;
}
 .site-quicknav--private .site-quicknav__moder {
     display: none !important;
}
 a.site-quicknav__btn, a.site-quicknav__btn:link, a.site-quicknav__btn:visited, .site-quicknav__btn {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     margin: 0;
     padding: 3px 8px;
     border: none;
     border-radius: 6px;
     background: transparent;
     box-shadow: none;
     color: var(--ds-info-text, inherit) !important;
     font: inherit;
     font-weight: inherit;
     line-height: 1.25;
     text-decoration: none !important;
     cursor: pointer;
     list-style: none;
     user-select: none;
     transition: background-color .15s ease, color .15s ease;
}
 a.site-quicknav__btn:hover, a.site-quicknav__btn:focus, .site-quicknav__btn:hover, .site-quicknav__chars[open] > .site-quicknav__btn {
     background: rgba(var(--ds-info-rgb, 255, 255, 255), .45);
     color: var(--ds-primary, #D0B690) !important;
     text-decoration: none !important;
     outline: none;
     opacity: 1;
}
 .site-quicknav__rabbit {
     display: block;
     width: 14px;
     height: 14px;
     object-fit: contain;
}
 .site-quicknav__chars, .site-quicknav__moder {
     position: relative;
     display: inline-flex;
     align-items: center;
     margin: 0;
     padding: 0;
     border: none;
     background: transparent !important;
     box-shadow: none !important;
     vertical-align: middle;
     color: inherit;
     overflow: visible;
}
 .site-quicknav__chars-summary::-webkit-details-marker {
     display: none;
}
 .site-quicknav__moder-total {
     font-weight: 650;
     color: inherit;
}
 .site-quicknav__badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 14px;
     height: 14px;
     padding: 0 3px;
     border-radius: 999px;
     background: var(--ui-danger, #b42318);
     color: var(--ui-on-accent, #fff);
     font-size: 10px;
     font-weight: 700;
     line-height: 1;
}
 .site-quicknav__caret {
     width: 12px;
     height: 12px;
     fill: none;
     stroke: currentColor;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
     opacity: .7;
     transition: transform .15s ease;
}
 .site-quicknav__chars[open] > .site-quicknav__chars-summary .site-quicknav__caret {
     transform: rotate(180deg);
}
 .site-quicknav__moder .site-quicknav__chars-menu {
     min-width: 220px;
     max-width: min(360px, 90vw);
}
 .site-quicknav__chars-menu {
     position: absolute;
     top: calc(100% + 4px);
     left: 0;
     z-index: 1200;
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
     align-items: stretch;
     gap: 0;
     min-width: 180px;
     max-width: min(280px, 80vw);
    /* ~10–12 строк, дальше скролл (персонажи / модерация / события) */
     max-height: min(300px, 50vh);
     overflow-x: hidden;
     overflow-y: auto;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
     padding: 4px;
     border: 1px solid var(--ui-line, rgba(0, 0, 0, .14));
     border-radius: 10px;
     background: rgba(var(--ds-info-rgb, 255, 255, 255), .96);
     box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}
 .site-quicknav__chars-item {
     display: block;
     flex-shrink: 0;
     padding: 2px 6px;
     border-radius: 4px;
     color: var(--ds-info-text, #000);
     text-decoration: none;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
 a.site-quicknav__chars-item, a.site-quicknav__chars-item:link, a.site-quicknav__chars-item:visited {
     color: var(--ds-info-text, #000);
     text-decoration: none;
}
 a.site-quicknav__chars-item:hover, a.site-quicknav__chars-item:focus {
     background: rgba(var(--ds-info-rgb, 255, 255, 255), .55);
     color: var(--ds-info-link-hover, #333333);
     outline: none;
     text-decoration: none;
}
 .site-quicknav__chars-item--current {
     opacity: .65;
     font-weight: 650;
     cursor: default;
}
 .site-quicknav__chars-item--busy {
     font-weight: 650;
}
 .site-quicknav__chars-item--warn {
     background: var(--ui-danger-faint, color-mix(in srgb, var(--ui-danger, #b42318) 10%, transparent));
}
 a.site-quicknav__chars-item--warn:hover, a.site-quicknav__chars-item--warn:focus {
     background: var(--ui-danger-soft, color-mix(in srgb, var(--ui-danger, #b42318) 18%, transparent));
}
 .site-quicknav__unread {
     font-weight: 650;
}
 .site-quicknav__deleting {
     opacity: .75;
     font-size: .9em;
}
 body {
     color: var(--ui-text, #111);
     background-color: #FFDEAD;
     font-size: 14px;
     font-family: Verdana;
}
 :root {
     --cw3-page-bg: #FFDEAD;
     --cw3-page-text: #111111;
}
/* Статусные сообщения игровой (две вкладки, памятка, наказание и т.п.) */
 .game-status-message {
     display: inline-block;
     margin: 16px;
     padding: 12px 16px;
     max-width: calc(100% - 32px);
     box-sizing: border-box;
     background-color: var(--cw3-page-bg, #FFDEAD);
     color: var(--cw3-page-text, #111111);
     border-radius: 6px;
     line-height: 1.4;
}
 .game-status-message a:link, .game-status-message a:visited {
     color: inherit;
     text-decoration: underline;
}
 .game-status-message a:hover {
     text-decoration: none;
}
 a {
     outline: none;
     color: var(--ds-page-link, #0000cd);
     text-decoration: underline;
}
 a:hover {
     text-decoration: none;
     color: var(--ds-page-link-hover, var(--ds-page-link, #4682b4));
}
/* Do not style range/checkbox/radio/file here — blank is used by /cw3;
 painting range with --ui-input-bg makes the thumb fall back to browser blue. /lol overrides links in css/lol/base.css */
 input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="image"]), button, select {
     background: var(--ui-input-bg, #FFE);
     color: var(--ui-input-text, #000);
     font-weight: normal;
     border-width: 2px;
     border-style: outset;
     border-color: var(--ui-line, #000);
}
 button {
     touch-action: manipulation;
}
 table {
     border-collapse: collapse;
}
 td {
     vertical-align: top;
}
 .d, .e, .f, .d div, .e div, .f div {
     background-color: transparent;
     background-repeat: no-repeat;
     border: none;
     padding: 0;
     margin: 0;
     position: relative;
}
 .e, .e div {
     width: 32px;
     height: 32px;
}
 .f, .f div {
     width: 70px;
     height: 70px;
}
 #error {
     cursor: pointer;
     display: none;
     width: 170px;
     min-height: 50px;
     border-radius: 10px;
     padding: 5px;
     font-weight: bold;
     background-color: var(--ui-danger-strong, rgba(241, 90, 90, 0.9));
     color: var(--ui-on-accent, #000);
     position: fixed;
     top: 50%;
     left: 0.5%;
     z-index: 9999;
}
 .ui-helper-hidden-accessible {
     position: absolute !important;
     clip: rect(1px, 1px, 1px, 1px)
}
 .ui-helper-reset {
     border: 0;
     outline: 0;
     line-height: 1.3;
     text-decoration: none;
     font-size: 100%;
     list-style: none;
     margin: 0;
     padding: 0
}
 .ui-helper-clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden
}
 .ui-helper-clearfix {
     display: block
}
 * html .ui-helper-clearfix {
     height: 1%
}
 .ui-helper-zfix {
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     position: absolute;
     opacity: 0;
     filter: Alpha(Opacity=0)
}
 .ui-state-disabled {
     cursor: default !important
}
 .ui-icon {
     display: block;
     text-indent: -99999px;
     overflow: hidden;
     background-repeat: no-repeat;
     width: 16px;
     height: 16px;
     background-image: url(/cw3/images/ui-icons_d19405_256x240.png)
}
 .ui-widget-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #5C5C5C url(/cw3/images/ui-bg_flat_50_5c5c5c_40x100.png) 50% 50% repeat-x;
     opacity: .80;
     filter: Alpha(Opacity=80)
}
 .ui-widget {
     font-family: Segoe UI, Arial, sans-serif;
     font-size: 1.1em
}
 .ui-widget .ui-widget {
     font-size: 1em
}
 .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
     font-family: Segoe UI, Arial, sans-serif;
     font-size: 1em
}
 .ui-widget-content {
     border: 1px solid #8E846B;
     background: #FEEEBD url(/cw3/images/ui-bg_highlight-soft_100_feeebd_1x100.png) 50% top repeat-x;
     color: #383838
}
 .ui-widget-content a {
     color: #383838
}
 .ui-widget-header {
     border: 1px solid #494437;
     background: #817865 url(/cw3/images/ui-bg_gloss-wave_45_817865_500x100.png) 50% 50% repeat-x;
     color: #FFF;
     font-weight: 700
}
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
     border: 1px solid #D19405;
     background: #FECE2F url(/cw3/images/ui-bg_gloss-wave_60_fece2f_500x100.png) 50% 50% repeat-x;
     font-weight: 700;
     color: #4C3000
}
 .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
     color: #4C3000;
     text-decoration: none
}
 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
     border: 1px solid #A45B13;
     background: #FFDD57 url(/cw3/images/ui-bg_gloss-wave_70_ffdd57_500x100.png) 50% 50% repeat-x;
     font-weight: 700;
     color: #381F00
}
 .ui-state-hover a, .ui-state-hover a:hover {
     color: #381F00;
     text-decoration: none
}
 .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
     border: 1px solid #655E4E;
     background: #FFF url(/cw3/images/ui-bg_inset-soft_30_ffffff_1x100.png) 50% 50% repeat-x;
     font-weight: 700;
     color: #0074C7
}
 .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
     color: #0074C7;
     text-decoration: none
}
 .ui-widget:active {
     outline: none
}
 .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
     border: 1px solid #EEB420;
     background: #FFF9E5 url(/cw3/images/ui-bg_gloss-wave_90_fff9e5_500x100.png) 50% top repeat-x;
     color: #1F1F1F
}
 .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a {
     color: #1F1F1F
}
 .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
     border: 1px solid #FFB73D;
     background: #D34D17 url(/cw3/images/ui-bg_diagonals-medium_20_d34d17_40x40.png) 50% 50% repeat;
     color: #FFF
}
 .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {
     font-weight: 700
}
 .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
     opacity: .7;
     filter: Alpha(Opacity=70);
     font-weight: 400
}
 .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
     opacity: .35;
     filter: Alpha(Opacity=35);
     background-image: none
}
 .ui-widget-content .ui-icon {
     background-image: url(/cw3/images/ui-icons_d19405_256x240.png)
}
 .ui-widget-header .ui-icon {
     background-image: url(/cw3/images/ui-icons_fadc7a_256x240.png)
}
 .ui-state-default .ui-icon {
     background-image: url(/cw3/images/ui-icons_3d3d3d_256x240.png)
}
 .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
     background-image: url(/cw3/images/ui-icons_bd7b00_256x240.png)
}
 .ui-state-active .ui-icon {
     background-image: url(/cw3/images/ui-icons_eb990f_256x240.png)
}
 .ui-state-highlight .ui-icon {
     background-image: url(/cw3/images/ui-icons_ed9f26_256x240.png)
}
 .ui-state-error .ui-icon, .ui-state-error-text .ui-icon {
     background-image: url(/cw3/images/ui-icons_ffe180_256x240.png)
}
 .ui-icon-carat-1-n {
     background-position: 0 0
}
 .ui-icon-carat-1-ne {
     background-position: -16px 0
}
 .ui-icon-carat-1-e {
     background-position: -32px 0
}
 .ui-icon-carat-1-se {
     background-position: -48px 0
}
 .ui-icon-carat-1-s {
     background-position: -64px 0
}
 .ui-icon-carat-1-sw {
     background-position: -80px 0
}
 .ui-icon-carat-1-w {
     background-position: -96px 0
}
 .ui-icon-carat-1-nw {
     background-position: -112px 0
}
 .ui-icon-carat-2-n-s {
     background-position: -128px 0
}
 .ui-icon-carat-2-e-w {
     background-position: -144px 0
}
 .ui-icon-triangle-1-n {
     background-position: 0 -16px
}
 .ui-icon-triangle-1-ne {
     background-position: -16px -16px
}
 .ui-icon-triangle-1-e {
     background-position: -32px -16px
}
 .ui-icon-triangle-1-se {
     background-position: -48px -16px
}
 .ui-icon-triangle-1-s {
     background-position: -64px -16px
}
 .ui-icon-triangle-1-sw {
     background-position: -80px -16px
}
 .ui-icon-triangle-1-w {
     background-position: -96px -16px
}
 .ui-icon-triangle-1-nw {
     background-position: -112px -16px
}
 .ui-icon-triangle-2-n-s {
     background-position: -128px -16px
}
 .ui-icon-triangle-2-e-w {
     background-position: -144px -16px
}
 .ui-icon-arrow-1-n {
     background-position: 0 -32px
}
 .ui-icon-arrow-1-ne {
     background-position: -16px -32px
}
 .ui-icon-arrow-1-e {
     background-position: -32px -32px
}
 .ui-icon-arrow-1-se {
     background-position: -48px -32px
}
 .ui-icon-arrow-1-s {
     background-position: -64px -32px
}
 .ui-icon-arrow-1-sw {
     background-position: -80px -32px
}
 .ui-icon-arrow-1-w {
     background-position: -96px -32px
}
 .ui-icon-arrow-1-nw {
     background-position: -112px -32px
}
 .ui-icon-arrow-2-n-s {
     background-position: -128px -32px
}
 .ui-icon-arrow-2-ne-sw {
     background-position: -144px -32px
}
 .ui-icon-arrow-2-e-w {
     background-position: -160px -32px
}
 .ui-icon-arrow-2-se-nw {
     background-position: -176px -32px
}
 .ui-icon-arrowstop-1-n {
     background-position: -192px -32px
}
 .ui-icon-arrowstop-1-e {
     background-position: -208px -32px
}
 .ui-icon-arrowstop-1-s {
     background-position: -224px -32px
}
 .ui-icon-arrowstop-1-w {
     background-position: -240px -32px
}
 .ui-icon-arrowthick-1-n {
     background-position: 0 -48px
}
 .ui-icon-arrowthick-1-ne {
     background-position: -16px -48px
}
 .ui-icon-arrowthick-1-e {
     background-position: -32px -48px
}
 .ui-icon-arrowthick-1-se {
     background-position: -48px -48px
}
 .ui-icon-arrowthick-1-s {
     background-position: -64px -48px
}
 .ui-icon-arrowthick-1-sw {
     background-position: -80px -48px
}
 .ui-icon-arrowthick-1-w {
     background-position: -96px -48px
}
 .ui-icon-arrowthick-1-nw {
     background-position: -112px -48px
}
 .ui-icon-arrowthick-2-n-s {
     background-position: -128px -48px
}
 .ui-icon-arrowthick-2-ne-sw {
     background-position: -144px -48px
}
 .ui-icon-arrowthick-2-e-w {
     background-position: -160px -48px
}
 .ui-icon-arrowthick-2-se-nw {
     background-position: -176px -48px
}
 .ui-icon-arrowthickstop-1-n {
     background-position: -192px -48px
}
 .ui-icon-arrowthickstop-1-e {
     background-position: -208px -48px
}
 .ui-icon-arrowthickstop-1-s {
     background-position: -224px -48px
}
 .ui-icon-arrowthickstop-1-w {
     background-position: -240px -48px
}
 .ui-icon-arrowreturnthick-1-w {
     background-position: 0 -64px
}
 .ui-icon-arrowreturnthick-1-n {
     background-position: -16px -64px
}
 .ui-icon-arrowreturnthick-1-e {
     background-position: -32px -64px
}
 .ui-icon-arrowreturnthick-1-s {
     background-position: -48px -64px
}
 .ui-icon-arrowreturn-1-w {
     background-position: -64px -64px
}
 .ui-icon-arrowreturn-1-n {
     background-position: -80px -64px
}
 .ui-icon-arrowreturn-1-e {
     background-position: -96px -64px
}
 .ui-icon-arrowreturn-1-s {
     background-position: -112px -64px
}
 .ui-icon-arrowrefresh-1-w {
     background-position: -128px -64px
}
 .ui-icon-arrowrefresh-1-n {
     background-position: -144px -64px
}
 .ui-icon-arrowrefresh-1-e {
     background-position: -160px -64px
}
 .ui-icon-arrowrefresh-1-s {
     background-position: -176px -64px
}
 .ui-icon-arrow-4 {
     background-position: 0 -80px
}
 .ui-icon-arrow-4-diag {
     background-position: -16px -80px
}
 .ui-icon-extlink {
     background-position: -32px -80px
}
 .ui-icon-newwin {
     background-position: -48px -80px
}
 .ui-icon-refresh {
     background-position: -64px -80px
}
 .ui-icon-shuffle {
     background-position: -80px -80px
}
 .ui-icon-transfer-e-w {
     background-position: -96px -80px
}
 .ui-icon-transferthick-e-w {
     background-position: -112px -80px
}
 .ui-icon-folder-collapsed {
     background-position: 0 -96px
}
 .ui-icon-folder-open {
     background-position: -16px -96px
}
 .ui-icon-document {
     background-position: -32px -96px
}
 .ui-icon-document-b {
     background-position: -48px -96px
}
 .ui-icon-note {
     background-position: -64px -96px
}
 .ui-icon-mail-closed {
     background-position: -80px -96px
}
 .ui-icon-mail-open {
     background-position: -96px -96px
}
 .ui-icon-suitcase {
     background-position: -112px -96px
}
 .ui-icon-comment {
     background-position: -128px -96px
}
 .ui-icon-person {
     background-position: -144px -96px
}
 .ui-icon-print {
     background-position: -160px -96px
}
 .ui-icon-trash {
     background-position: -176px -96px
}
 .ui-icon-locked {
     background-position: -192px -96px
}
 .ui-icon-unlocked {
     background-position: -208px -96px
}
 .ui-icon-bookmark {
     background-position: -224px -96px
}
 .ui-icon-tag {
     background-position: -240px -96px
}
 .ui-icon-home {
     background-position: 0 -112px
}
 .ui-icon-flag {
     background-position: -16px -112px
}
 .ui-icon-calendar {
     background-position: -32px -112px
}
 .ui-icon-cart {
     background-position: -48px -112px
}
 .ui-icon-pencil {
     background-position: -64px -112px
}
 .ui-icon-clock {
     background-position: -80px -112px
}
 .ui-icon-disk {
     background-position: -96px -112px
}
 .ui-icon-calculator {
     background-position: -112px -112px
}
 .ui-icon-zoomin {
     background-position: -128px -112px
}
 .ui-icon-zoomout {
     background-position: -144px -112px
}
 .ui-icon-search {
     background-position: -160px -112px
}
 .ui-icon-wrench {
     background-position: -176px -112px
}
 .ui-icon-gear {
     background-position: -192px -112px
}
 .ui-icon-heart {
     background-position: -208px -112px
}
 .ui-icon-star {
     background-position: -224px -112px
}
 .ui-icon-link {
     background-position: -240px -112px
}
 .ui-icon-cancel {
     background-position: 0 -128px
}
 .ui-icon-plus {
     background-position: -16px -128px
}
 .ui-icon-plusthick {
     background-position: -32px -128px
}
 .ui-icon-minus {
     background-position: -48px -128px
}
 .ui-icon-minusthick {
     background-position: -64px -128px
}
 .ui-icon-close {
     background-position: -80px -128px
}
 .ui-icon-closethick {
     background-position: -96px -128px
}
 .ui-icon-key {
     background-position: -112px -128px
}
 .ui-icon-lightbulb {
     background-position: -128px -128px
}
 .ui-icon-scissors {
     background-position: -144px -128px
}
 .ui-icon-clipboard {
     background-position: -160px -128px
}
 .ui-icon-copy {
     background-position: -176px -128px
}
 .ui-icon-contact {
     background-position: -192px -128px
}
 .ui-icon-image {
     background-position: -208px -128px
}
 .ui-icon-video {
     background-position: -224px -128px
}
 .ui-icon-script {
     background-position: -240px -128px
}
 .ui-icon-alert {
     background-position: 0 -144px
}
 .ui-icon-info {
     background-position: -16px -144px
}
 .ui-icon-notice {
     background-position: -32px -144px
}
 .ui-icon-help {
     background-position: -48px -144px
}
 .ui-icon-check {
     background-position: -64px -144px
}
 .ui-icon-bullet {
     background-position: -80px -144px
}
 .ui-icon-radio-off {
     background-position: -96px -144px
}
 .ui-icon-radio-on {
     background-position: -112px -144px
}
 .ui-icon-pin-w {
     background-position: -128px -144px
}
 .ui-icon-pin-s {
     background-position: -144px -144px
}
 .ui-icon-play {
     background-position: 0 -160px
}
 .ui-icon-pause {
     background-position: -16px -160px
}
 .ui-icon-seek-next {
     background-position: -32px -160px
}
 .ui-icon-seek-prev {
     background-position: -48px -160px
}
 .ui-icon-seek-end {
     background-position: -64px -160px
}
 .ui-icon-stop {
     background-position: -96px -160px
}
 .ui-icon-eject {
     background-position: -112px -160px
}
 .ui-icon-volume-off {
     background-position: -128px -160px
}
 .ui-icon-volume-on {
     background-position: -144px -160px
}
 .ui-icon-power {
     background-position: 0 -176px
}
 .ui-icon-signal-diag {
     background-position: -16px -176px
}
 .ui-icon-signal {
     background-position: -32px -176px
}
 .ui-icon-battery-0 {
     background-position: -48px -176px
}
 .ui-icon-battery-1 {
     background-position: -64px -176px
}
 .ui-icon-battery-2 {
     background-position: -80px -176px
}
 .ui-icon-battery-3 {
     background-position: -96px -176px
}
 .ui-icon-circle-plus {
     background-position: 0 -192px
}
 .ui-icon-circle-minus {
     background-position: -16px -192px
}
 .ui-icon-circle-close {
     background-position: -32px -192px
}
 .ui-icon-circle-triangle-e {
     background-position: -48px -192px
}
 .ui-icon-circle-triangle-s {
     background-position: -64px -192px
}
 .ui-icon-circle-triangle-w {
     background-position: -80px -192px
}
 .ui-icon-circle-triangle-n {
     background-position: -96px -192px
}
 .ui-icon-circle-arrow-e {
     background-position: -112px -192px
}
 .ui-icon-circle-arrow-s {
     background-position: -128px -192px
}
 .ui-icon-circle-arrow-w {
     background-position: -144px -192px
}
 .ui-icon-circle-arrow-n {
     background-position: -160px -192px
}
 .ui-icon-circle-zoomin {
     background-position: -176px -192px
}
 .ui-icon-circle-zoomout {
     background-position: -192px -192px
}
 .ui-icon-circle-check {
     background-position: -208px -192px
}
 .ui-icon-circlesmall-plus {
     background-position: 0 -208px
}
 .ui-icon-circlesmall-minus {
     background-position: -16px -208px
}
 .ui-icon-circlesmall-close {
     background-position: -32px -208px
}
 .ui-icon-squaresmall-plus {
     background-position: -48px -208px
}
 .ui-icon-squaresmall-minus {
     background-position: -64px -208px
}
 .ui-icon-squaresmall-close {
     background-position: -80px -208px
}
 .ui-icon-grip-dotted-vertical {
     background-position: 0 -224px
}
 .ui-icon-grip-dotted-horizontal {
     background-position: -16px -224px
}
 .ui-icon-grip-solid-vertical {
     background-position: -32px -224px
}
 .ui-icon-grip-solid-horizontal {
     background-position: -48px -224px
}
 .ui-icon-gripsmall-diagonal-se {
     background-position: -64px -224px
}
 .ui-icon-grip-diagonal-se {
     background-position: -80px -224px
}
 .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
     -moz-border-radius-topleft: 8px;
     -webkit-border-top-left-radius: 8px;
     -khtml-border-top-left-radius: 8px;
     border-top-left-radius: 8px
}
 .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
     -moz-border-radius-topright: 8px;
     -webkit-border-top-right-radius: 8px;
     -khtml-border-top-right-radius: 8px;
     border-top-right-radius: 8px
}
 .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
     -moz-border-radius-bottomleft: 8px;
     -webkit-border-bottom-left-radius: 8px;
     -khtml-border-bottom-left-radius: 8px;
     border-bottom-left-radius: 8px
}
 .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
     -moz-border-radius-bottomright: 8px;
     -webkit-border-bottom-right-radius: 8px;
     -khtml-border-bottom-right-radius: 8px;
     border-bottom-right-radius: 8px
}
 .ui-widget-shadow {
     background: #CCC url(/cw3/images/ui-bg_flat_30_cccccc_40x100.png) 50% 50% repeat-x;
     opacity: .60;
     filter: Alpha(Opacity=60);
     -moz-border-radius: 8px;
     -khtml-border-radius: 8px;
     -webkit-border-radius: 8px;
     border-radius: 8px;
     margin: -7px 0 0 -7px;
     padding: 7px
}
 .ui-slider {
     position: relative;
     text-align: left
}
 .ui-slider .ui-slider-handle {
     position: absolute;
     z-index: 2;
     width: 1.2em;
     height: 1.2em;
     cursor: default
}
 .ui-slider .ui-slider-range {
     position: absolute;
     z-index: 1;
     font-size: .7em;
     display: block;
     border: 0;
     background-position: 0 0
}
 .ui-slider-horizontal {
     height: .8em
}
 .ui-slider-horizontal .ui-slider-handle {
     top: -.3em;
     margin-left: -.6em
}
 .ui-slider-horizontal .ui-slider-range {
     top: 0;
     height: 100%
}
 .ui-slider-horizontal .ui-slider-range-min {
     left: 0
}
 .ui-slider-horizontal .ui-slider-range-max {
     right: 0
}
 .ui-slider-vertical {
     width: .8em;
     height: 100px
}
 .ui-slider-vertical .ui-slider-handle {
     left: -.3em;
     margin-left: 0;
     margin-bottom: -.6em
}
 .ui-slider-vertical .ui-slider-range {
     left: 0;
     width: 100%
}
 .ui-slider-vertical .ui-slider-range-min {
     bottom: 0
}
 .ui-slider-vertical .ui-slider-range-max {
     top: 0
}
 span.tt span, .ui-helper-hidden {
     display: none
}
 .ui-widget-header a, .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a, .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text {
     color: #FFF
}
 .ui-icon-seek-start, .ui-icon-seek-first {
     background-position: -80px -160px
}
 .reveal-modal-bg {
     position: fixed;
     height: 100%;
     width: 100%;
     background: rgba(0, 0, 0, .8);
     z-index: 100;
     display: none;
     top: 0;
     left: 0
}
 .reveal-modal {
     width: 400px;
     max-width: 100%;
     padding: 30px 40px 34px;
     box-sizing: border-box;
     visibility: hidden;
     top: 100px;
     left: 0;
     right: 0;
     margin: auto;
     background: #EEE url(/cw3/images/modal-gloss.png) no-repeat -200px -80px;
     position: absolute;
     z-index: 101;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
     -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
     box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
 .reveal-modal.small {
     width: 200px;
     margin-left: -140px
}
 .reveal-modal.medium {
     width: 400px;
     margin-left: -240px
}
 .reveal-modal.large {
     width: 600px;
     margin-left: -340px
}
 .reveal-modal.xlarge {
     width: 800px;
     margin-left: -440px
}
 .reveal-modal .close-reveal-modal {
     font-size: 22px;
     line-height: .5;
     position: absolute;
     top: 8px;
     right: 11px;
     color: #AAA;
     text-shadow: 0 -1px 1px rbga(0, 0, 0, .6);
     font-weight: 700;
     cursor: pointer
}
 #tiptip_holder {
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 99999
}
 #tiptip_holder.tip_top {
     padding-bottom: 5px
}
 #tiptip_holder.tip_bottom {
     padding-top: 5px
}
 #tiptip_holder.tip_right {
     padding-left: 5px
}
 #tiptip_holder.tip_left {
     padding-right: 5px
}
 #tiptip_content {
     font-size: 11px;
     color: #FFF;
     text-shadow: 0 0 2px #000;
     border: 1px solid rgba(255, 255, 255, 0.25);
     background-color: rgba(25, 25, 25, 0.92);
     background-image: 0;
     border-radius: 3px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     box-shadow: 0 0 3px #555;
     -webkit-box-shadow: 0 0 3px #555;
     -moz-box-shadow: 0 0 3px #555;
     padding: 4px 8px
}
 #tiptip_arrow, #tiptip_arrow_inner {
     position: absolute;
     height: 0;
     width: 0;
     border-color: transparent;
     border-style: solid;
     border-width: 6px
}
 #tiptip_holder.tip_top #tiptip_arrow {
     border-top-color: rgba(255, 255, 255, 0.35)
}
 #tiptip_holder.tip_bottom #tiptip_arrow {
     border-bottom-color: rgba(255, 255, 255, 0.35)
}
 #tiptip_holder.tip_right #tiptip_arrow {
     border-right-color: rgba(255, 255, 255, 0.35)
}
 #tiptip_holder.tip_left #tiptip_arrow {
     border-left-color: rgba(255, 255, 255, 0.35)
}
 #tiptip_holder.tip_top #tiptip_arrow_inner {
     margin-top: -7px;
     margin-left: -6px;
     border-top-color: rgba(25, 25, 25, 0.92)
}
 #tiptip_holder.tip_bottom #tiptip_arrow_inner {
     margin-top: -5px;
     margin-left: -6px;
     border-bottom-color: rgba(25, 25, 25, 0.92)
}
 #tiptip_holder.tip_right #tiptip_arrow_inner {
     margin-top: -6px;
     margin-left: -5px;
     border-right-color: rgba(25, 25, 25, 0.92)
}
 #tiptip_holder.tip_left #tiptip_arrow_inner {
     margin-top: -6px;
     margin-left: -7px;
     border-left-color: rgba(25, 25, 25, 0.92)
}
/*! * Bootstrap Grid v4.1.3 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */
 @-ms-viewport {
     width: device-width;
}
 html {
     box-sizing: border-box;
     -ms-overflow-style: scrollbar;
}
 *, *::before, *::after {
     box-sizing: inherit;
}
 .container {
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto;
}
 @media (min-width: 576px) {
     .container {
         max-width: 540px;
    }
}
 @media (min-width: 768px) {
     .container {
         max-width: 720px;
    }
}
 @media (min-width: 992px) {
     .container {
         max-width: 960px;
    }
}
 @media (min-width: 1200px) {
     .container {
         max-width: 1140px;
    }
}
 .container-fluid {
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto;
}
 .row {
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     margin-right: -15px;
     margin-left: -15px;
}
 .no-gutters {
     margin-right: 0;
     margin-left: 0;
}
 .no-gutters > .col, .no-gutters > [class*="col-"] {
     padding-right: 0;
     padding-left: 0;
}
 .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
     position: relative;
     width: 100%;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
}
 .col {
     -ms-flex-preferred-size: 0;
     flex-basis: 0;
     -ms-flex-positive: 1;
     flex-grow: 1;
     max-width: 100%;
}
 .col-auto {
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
     width: auto;
     max-width: none;
}
 .col-1 {
     -ms-flex: 0 0 8.333333%;
     flex: 0 0 8.333333%;
     max-width: 8.333333%;
}
 .col-2 {
     -ms-flex: 0 0 16.666667%;
     flex: 0 0 16.666667%;
     max-width: 16.666667%;
}
 .col-3 {
     -ms-flex: 0 0 25%;
     flex: 0 0 25%;
     max-width: 25%;
}
 .col-4 {
     -ms-flex: 0 0 33.333333%;
     flex: 0 0 33.333333%;
     max-width: 33.333333%;
}
 .col-5 {
     -ms-flex: 0 0 41.666667%;
     flex: 0 0 41.666667%;
     max-width: 41.666667%;
}
 .col-6 {
     -ms-flex: 0 0 50%;
     flex: 0 0 50%;
     max-width: 50%;
}
 .col-7 {
     -ms-flex: 0 0 58.333333%;
     flex: 0 0 58.333333%;
     max-width: 58.333333%;
}
 .col-8 {
     -ms-flex: 0 0 66.666667%;
     flex: 0 0 66.666667%;
     max-width: 66.666667%;
}
 .col-9 {
     -ms-flex: 0 0 75%;
     flex: 0 0 75%;
     max-width: 75%;
}
 .col-10 {
     -ms-flex: 0 0 83.333333%;
     flex: 0 0 83.333333%;
     max-width: 83.333333%;
}
 .col-11 {
     -ms-flex: 0 0 91.666667%;
     flex: 0 0 91.666667%;
     max-width: 91.666667%;
}
 .col-12 {
     -ms-flex: 0 0 100%;
     flex: 0 0 100%;
     max-width: 100%;
}
 .order-first {
     -ms-flex-order: -1;
     order: -1;
}
 .order-last {
     -ms-flex-order: 13;
     order: 13;
}
 .order-0 {
     -ms-flex-order: 0;
     order: 0;
}
 .order-1 {
     -ms-flex-order: 1;
     order: 1;
}
 .order-2 {
     -ms-flex-order: 2;
     order: 2;
}
 .order-3 {
     -ms-flex-order: 3;
     order: 3;
}
 .order-4 {
     -ms-flex-order: 4;
     order: 4;
}
 .order-5 {
     -ms-flex-order: 5;
     order: 5;
}
 .order-6 {
     -ms-flex-order: 6;
     order: 6;
}
 .order-7 {
     -ms-flex-order: 7;
     order: 7;
}
 .order-8 {
     -ms-flex-order: 8;
     order: 8;
}
 .order-9 {
     -ms-flex-order: 9;
     order: 9;
}
 .order-10 {
     -ms-flex-order: 10;
     order: 10;
}
 .order-11 {
     -ms-flex-order: 11;
     order: 11;
}
 .order-12 {
     -ms-flex-order: 12;
     order: 12;
}
 .offset-1 {
     margin-left: 8.333333%;
}
 .offset-2 {
     margin-left: 16.666667%;
}
 .offset-3 {
     margin-left: 25%;
}
 .offset-4 {
     margin-left: 33.333333%;
}
 .offset-5 {
     margin-left: 41.666667%;
}
 .offset-6 {
     margin-left: 50%;
}
 .offset-7 {
     margin-left: 58.333333%;
}
 .offset-8 {
     margin-left: 66.666667%;
}
 .offset-9 {
     margin-left: 75%;
}
 .offset-10 {
     margin-left: 83.333333%;
}
 .offset-11 {
     margin-left: 91.666667%;
}
 @media (min-width: 576px) {
     .col-sm {
         -ms-flex-preferred-size: 0;
         flex-basis: 0;
         -ms-flex-positive: 1;
         flex-grow: 1;
         max-width: 100%;
    }
     .col-sm-auto {
         -ms-flex: 0 0 auto;
         flex: 0 0 auto;
         width: auto;
         max-width: none;
    }
     .col-sm-1 {
         -ms-flex: 0 0 8.333333%;
         flex: 0 0 8.333333%;
         max-width: 8.333333%;
    }
     .col-sm-2 {
         -ms-flex: 0 0 16.666667%;
         flex: 0 0 16.666667%;
         max-width: 16.666667%;
    }
     .col-sm-3 {
         -ms-flex: 0 0 25%;
         flex: 0 0 25%;
         max-width: 25%;
    }
     .col-sm-4 {
         -ms-flex: 0 0 33.333333%;
         flex: 0 0 33.333333%;
         max-width: 33.333333%;
    }
     .col-sm-5 {
         -ms-flex: 0 0 41.666667%;
         flex: 0 0 41.666667%;
         max-width: 41.666667%;
    }
     .col-sm-6 {
         -ms-flex: 0 0 50%;
         flex: 0 0 50%;
         max-width: 50%;
    }
     .col-sm-7 {
         -ms-flex: 0 0 58.333333%;
         flex: 0 0 58.333333%;
         max-width: 58.333333%;
    }
     .col-sm-8 {
         -ms-flex: 0 0 66.666667%;
         flex: 0 0 66.666667%;
         max-width: 66.666667%;
    }
     .col-sm-9 {
         -ms-flex: 0 0 75%;
         flex: 0 0 75%;
         max-width: 75%;
    }
     .col-sm-10 {
         -ms-flex: 0 0 83.333333%;
         flex: 0 0 83.333333%;
         max-width: 83.333333%;
    }
     .col-sm-11 {
         -ms-flex: 0 0 91.666667%;
         flex: 0 0 91.666667%;
         max-width: 91.666667%;
    }
     .col-sm-12 {
         -ms-flex: 0 0 100%;
         flex: 0 0 100%;
         max-width: 100%;
    }
     .order-sm-first {
         -ms-flex-order: -1;
         order: -1;
    }
     .order-sm-last {
         -ms-flex-order: 13;
         order: 13;
    }
     .order-sm-0 {
         -ms-flex-order: 0;
         order: 0;
    }
     .order-sm-1 {
         -ms-flex-order: 1;
         order: 1;
    }
     .order-sm-2 {
         -ms-flex-order: 2;
         order: 2;
    }
     .order-sm-3 {
         -ms-flex-order: 3;
         order: 3;
    }
     .order-sm-4 {
         -ms-flex-order: 4;
         order: 4;
    }
     .order-sm-5 {
         -ms-flex-order: 5;
         order: 5;
    }
     .order-sm-6 {
         -ms-flex-order: 6;
         order: 6;
    }
     .order-sm-7 {
         -ms-flex-order: 7;
         order: 7;
    }
     .order-sm-8 {
         -ms-flex-order: 8;
         order: 8;
    }
     .order-sm-9 {
         -ms-flex-order: 9;
         order: 9;
    }
     .order-sm-10 {
         -ms-flex-order: 10;
         order: 10;
    }
     .order-sm-11 {
         -ms-flex-order: 11;
         order: 11;
    }
     .order-sm-12 {
         -ms-flex-order: 12;
         order: 12;
    }
     .offset-sm-0 {
         margin-left: 0;
    }
     .offset-sm-1 {
         margin-left: 8.333333%;
    }
     .offset-sm-2 {
         margin-left: 16.666667%;
    }
     .offset-sm-3 {
         margin-left: 25%;
    }
     .offset-sm-4 {
         margin-left: 33.333333%;
    }
     .offset-sm-5 {
         margin-left: 41.666667%;
    }
     .offset-sm-6 {
         margin-left: 50%;
    }
     .offset-sm-7 {
         margin-left: 58.333333%;
    }
     .offset-sm-8 {
         margin-left: 66.666667%;
    }
     .offset-sm-9 {
         margin-left: 75%;
    }
     .offset-sm-10 {
         margin-left: 83.333333%;
    }
     .offset-sm-11 {
         margin-left: 91.666667%;
    }
}
 @media (min-width: 768px) {
     .col-md {
         -ms-flex-preferred-size: 0;
         flex-basis: 0;
         -ms-flex-positive: 1;
         flex-grow: 1;
         max-width: 100%;
    }
     .col-md-auto {
         -ms-flex: 0 0 auto;
         flex: 0 0 auto;
         width: auto;
         max-width: none;
    }
     .col-md-1 {
         -ms-flex: 0 0 8.333333%;
         flex: 0 0 8.333333%;
         max-width: 8.333333%;
    }
     .col-md-2 {
         -ms-flex: 0 0 16.666667%;
         flex: 0 0 16.666667%;
         max-width: 16.666667%;
    }
     .col-md-3 {
         -ms-flex: 0 0 25%;
         flex: 0 0 25%;
         max-width: 25%;
    }
     .col-md-4 {
         -ms-flex: 0 0 33.333333%;
         flex: 0 0 33.333333%;
         max-width: 33.333333%;
    }
     .col-md-5 {
         -ms-flex: 0 0 41.666667%;
         flex: 0 0 41.666667%;
         max-width: 41.666667%;
    }
     .col-md-6 {
         -ms-flex: 0 0 50%;
         flex: 0 0 50%;
         max-width: 50%;
    }
     .col-md-7 {
         -ms-flex: 0 0 58.333333%;
         flex: 0 0 58.333333%;
         max-width: 58.333333%;
    }
     .col-md-8 {
         -ms-flex: 0 0 66.666667%;
         flex: 0 0 66.666667%;
         max-width: 66.666667%;
    }
     .col-md-9 {
         -ms-flex: 0 0 75%;
         flex: 0 0 75%;
         max-width: 75%;
    }
     .col-md-10 {
         -ms-flex: 0 0 83.333333%;
         flex: 0 0 83.333333%;
         max-width: 83.333333%;
    }
     .col-md-11 {
         -ms-flex: 0 0 91.666667%;
         flex: 0 0 91.666667%;
         max-width: 91.666667%;
    }
     .col-md-12 {
         -ms-flex: 0 0 100%;
         flex: 0 0 100%;
         max-width: 100%;
    }
     .order-md-first {
         -ms-flex-order: -1;
         order: -1;
    }
     .order-md-last {
         -ms-flex-order: 13;
         order: 13;
    }
     .order-md-0 {
         -ms-flex-order: 0;
         order: 0;
    }
     .order-md-1 {
         -ms-flex-order: 1;
         order: 1;
    }
     .order-md-2 {
         -ms-flex-order: 2;
         order: 2;
    }
     .order-md-3 {
         -ms-flex-order: 3;
         order: 3;
    }
     .order-md-4 {
         -ms-flex-order: 4;
         order: 4;
    }
     .order-md-5 {
         -ms-flex-order: 5;
         order: 5;
    }
     .order-md-6 {
         -ms-flex-order: 6;
         order: 6;
    }
     .order-md-7 {
         -ms-flex-order: 7;
         order: 7;
    }
     .order-md-8 {
         -ms-flex-order: 8;
         order: 8;
    }
     .order-md-9 {
         -ms-flex-order: 9;
         order: 9;
    }
     .order-md-10 {
         -ms-flex-order: 10;
         order: 10;
    }
     .order-md-11 {
         -ms-flex-order: 11;
         order: 11;
    }
     .order-md-12 {
         -ms-flex-order: 12;
         order: 12;
    }
     .offset-md-0 {
         margin-left: 0;
    }
     .offset-md-1 {
         margin-left: 8.333333%;
    }
     .offset-md-2 {
         margin-left: 16.666667%;
    }
     .offset-md-3 {
         margin-left: 25%;
    }
     .offset-md-4 {
         margin-left: 33.333333%;
    }
     .offset-md-5 {
         margin-left: 41.666667%;
    }
     .offset-md-6 {
         margin-left: 50%;
    }
     .offset-md-7 {
         margin-left: 58.333333%;
    }
     .offset-md-8 {
         margin-left: 66.666667%;
    }
     .offset-md-9 {
         margin-left: 75%;
    }
     .offset-md-10 {
         margin-left: 83.333333%;
    }
     .offset-md-11 {
         margin-left: 91.666667%;
    }
}
 @media (min-width: 992px) {
     .col-lg {
         -ms-flex-preferred-size: 0;
         flex-basis: 0;
         -ms-flex-positive: 1;
         flex-grow: 1;
         max-width: 100%;
    }
     .col-lg-auto {
         -ms-flex: 0 0 auto;
         flex: 0 0 auto;
         width: auto;
         max-width: none;
    }
     .col-lg-1 {
         -ms-flex: 0 0 8.333333%;
         flex: 0 0 8.333333%;
         max-width: 8.333333%;
    }
     .col-lg-2 {
         -ms-flex: 0 0 16.666667%;
         flex: 0 0 16.666667%;
         max-width: 16.666667%;
    }
     .col-lg-3 {
         -ms-flex: 0 0 25%;
         flex: 0 0 25%;
         max-width: 25%;
    }
     .col-lg-4 {
         -ms-flex: 0 0 33.333333%;
         flex: 0 0 33.333333%;
         max-width: 33.333333%;
    }
     .col-lg-5 {
         -ms-flex: 0 0 41.666667%;
         flex: 0 0 41.666667%;
         max-width: 41.666667%;
    }
     .col-lg-6 {
         -ms-flex: 0 0 50%;
         flex: 0 0 50%;
         max-width: 50%;
    }
     .col-lg-7 {
         -ms-flex: 0 0 58.333333%;
         flex: 0 0 58.333333%;
         max-width: 58.333333%;
    }
     .col-lg-8 {
         -ms-flex: 0 0 66.666667%;
         flex: 0 0 66.666667%;
         max-width: 66.666667%;
    }
     .col-lg-9 {
         -ms-flex: 0 0 75%;
         flex: 0 0 75%;
         max-width: 75%;
    }
     .col-lg-10 {
         -ms-flex: 0 0 83.333333%;
         flex: 0 0 83.333333%;
         max-width: 83.333333%;
    }
     .col-lg-11 {
         -ms-flex: 0 0 91.666667%;
         flex: 0 0 91.666667%;
         max-width: 91.666667%;
    }
     .col-lg-12 {
         -ms-flex: 0 0 100%;
         flex: 0 0 100%;
         max-width: 100%;
    }
     .order-lg-first {
         -ms-flex-order: -1;
         order: -1;
    }
     .order-lg-last {
         -ms-flex-order: 13;
         order: 13;
    }
     .order-lg-0 {
         -ms-flex-order: 0;
         order: 0;
    }
     .order-lg-1 {
         -ms-flex-order: 1;
         order: 1;
    }
     .order-lg-2 {
         -ms-flex-order: 2;
         order: 2;
    }
     .order-lg-3 {
         -ms-flex-order: 3;
         order: 3;
    }
     .order-lg-4 {
         -ms-flex-order: 4;
         order: 4;
    }
     .order-lg-5 {
         -ms-flex-order: 5;
         order: 5;
    }
     .order-lg-6 {
         -ms-flex-order: 6;
         order: 6;
    }
     .order-lg-7 {
         -ms-flex-order: 7;
         order: 7;
    }
     .order-lg-8 {
         -ms-flex-order: 8;
         order: 8;
    }
     .order-lg-9 {
         -ms-flex-order: 9;
         order: 9;
    }
     .order-lg-10 {
         -ms-flex-order: 10;
         order: 10;
    }
     .order-lg-11 {
         -ms-flex-order: 11;
         order: 11;
    }
     .order-lg-12 {
         -ms-flex-order: 12;
         order: 12;
    }
     .offset-lg-0 {
         margin-left: 0;
    }
     .offset-lg-1 {
         margin-left: 8.333333%;
    }
     .offset-lg-2 {
         margin-left: 16.666667%;
    }
     .offset-lg-3 {
         margin-left: 25%;
    }
     .offset-lg-4 {
         margin-left: 33.333333%;
    }
     .offset-lg-5 {
         margin-left: 41.666667%;
    }
     .offset-lg-6 {
         margin-left: 50%;
    }
     .offset-lg-7 {
         margin-left: 58.333333%;
    }
     .offset-lg-8 {
         margin-left: 66.666667%;
    }
     .offset-lg-9 {
         margin-left: 75%;
    }
     .offset-lg-10 {
         margin-left: 83.333333%;
    }
     .offset-lg-11 {
         margin-left: 91.666667%;
    }
}
 @media (min-width: 1200px) {
     .col-xl {
         -ms-flex-preferred-size: 0;
         flex-basis: 0;
         -ms-flex-positive: 1;
         flex-grow: 1;
         max-width: 100%;
    }
     .col-xl-auto {
         -ms-flex: 0 0 auto;
         flex: 0 0 auto;
         width: auto;
         max-width: none;
    }
     .col-xl-1 {
         -ms-flex: 0 0 8.333333%;
         flex: 0 0 8.333333%;
         max-width: 8.333333%;
    }
     .col-xl-2 {
         -ms-flex: 0 0 16.666667%;
         flex: 0 0 16.666667%;
         max-width: 16.666667%;
    }
     .col-xl-3 {
         -ms-flex: 0 0 25%;
         flex: 0 0 25%;
         max-width: 25%;
    }
     .col-xl-4 {
         -ms-flex: 0 0 33.333333%;
         flex: 0 0 33.333333%;
         max-width: 33.333333%;
    }
     .col-xl-5 {
         -ms-flex: 0 0 41.666667%;
         flex: 0 0 41.666667%;
         max-width: 41.666667%;
    }
     .col-xl-6 {
         -ms-flex: 0 0 50%;
         flex: 0 0 50%;
         max-width: 50%;
    }
     .col-xl-7 {
         -ms-flex: 0 0 58.333333%;
         flex: 0 0 58.333333%;
         max-width: 58.333333%;
    }
     .col-xl-8 {
         -ms-flex: 0 0 66.666667%;
         flex: 0 0 66.666667%;
         max-width: 66.666667%;
    }
     .col-xl-9 {
         -ms-flex: 0 0 75%;
         flex: 0 0 75%;
         max-width: 75%;
    }
     .col-xl-10 {
         -ms-flex: 0 0 83.333333%;
         flex: 0 0 83.333333%;
         max-width: 83.333333%;
    }
     .col-xl-11 {
         -ms-flex: 0 0 91.666667%;
         flex: 0 0 91.666667%;
         max-width: 91.666667%;
    }
     .col-xl-12 {
         -ms-flex: 0 0 100%;
         flex: 0 0 100%;
         max-width: 100%;
    }
     .order-xl-first {
         -ms-flex-order: -1;
         order: -1;
    }
     .order-xl-last {
         -ms-flex-order: 13;
         order: 13;
    }
     .order-xl-0 {
         -ms-flex-order: 0;
         order: 0;
    }
     .order-xl-1 {
         -ms-flex-order: 1;
         order: 1;
    }
     .order-xl-2 {
         -ms-flex-order: 2;
         order: 2;
    }
     .order-xl-3 {
         -ms-flex-order: 3;
         order: 3;
    }
     .order-xl-4 {
         -ms-flex-order: 4;
         order: 4;
    }
     .order-xl-5 {
         -ms-flex-order: 5;
         order: 5;
    }
     .order-xl-6 {
         -ms-flex-order: 6;
         order: 6;
    }
     .order-xl-7 {
         -ms-flex-order: 7;
         order: 7;
    }
     .order-xl-8 {
         -ms-flex-order: 8;
         order: 8;
    }
     .order-xl-9 {
         -ms-flex-order: 9;
         order: 9;
    }
     .order-xl-10 {
         -ms-flex-order: 10;
         order: 10;
    }
     .order-xl-11 {
         -ms-flex-order: 11;
         order: 11;
    }
     .order-xl-12 {
         -ms-flex-order: 12;
         order: 12;
    }
     .offset-xl-0 {
         margin-left: 0;
    }
     .offset-xl-1 {
         margin-left: 8.333333%;
    }
     .offset-xl-2 {
         margin-left: 16.666667%;
    }
     .offset-xl-3 {
         margin-left: 25%;
    }
     .offset-xl-4 {
         margin-left: 33.333333%;
    }
     .offset-xl-5 {
         margin-left: 41.666667%;
    }
     .offset-xl-6 {
         margin-left: 50%;
    }
     .offset-xl-7 {
         margin-left: 58.333333%;
    }
     .offset-xl-8 {
         margin-left: 66.666667%;
    }
     .offset-xl-9 {
         margin-left: 75%;
    }
     .offset-xl-10 {
         margin-left: 83.333333%;
    }
     .offset-xl-11 {
         margin-left: 91.666667%;
    }
}
 .d-none {
     display: none !important;
}
 .d-inline {
     display: inline !important;
}
 .d-inline-block {
     display: inline-block !important;
}
 .d-block {
     display: block !important;
}
 .d-table {
     display: table !important;
}
 .d-table-row {
     display: table-row !important;
}
 .d-table-cell {
     display: table-cell !important;
}
 .d-flex {
     display: -ms-flexbox !important;
     display: flex !important;
}
 .d-inline-flex {
     display: -ms-inline-flexbox !important;
     display: inline-flex !important;
}
 @media (min-width: 576px) {
     .d-sm-none {
         display: none !important;
    }
     .d-sm-inline {
         display: inline !important;
    }
     .d-sm-inline-block {
         display: inline-block !important;
    }
     .d-sm-block {
         display: block !important;
    }
     .d-sm-table {
         display: table !important;
    }
     .d-sm-table-row {
         display: table-row !important;
    }
     .d-sm-table-cell {
         display: table-cell !important;
    }
     .d-sm-flex {
         display: -ms-flexbox !important;
         display: flex !important;
    }
     .d-sm-inline-flex {
         display: -ms-inline-flexbox !important;
         display: inline-flex !important;
    }
}
 @media (min-width: 768px) {
     .d-md-none {
         display: none !important;
    }
     .d-md-inline {
         display: inline !important;
    }
     .d-md-inline-block {
         display: inline-block !important;
    }
     .d-md-block {
         display: block !important;
    }
     .d-md-table {
         display: table !important;
    }
     .d-md-table-row {
         display: table-row !important;
    }
     .d-md-table-cell {
         display: table-cell !important;
    }
     .d-md-flex {
         display: -ms-flexbox !important;
         display: flex !important;
    }
     .d-md-inline-flex {
         display: -ms-inline-flexbox !important;
         display: inline-flex !important;
    }
}
 @media (min-width: 992px) {
     .d-lg-none {
         display: none !important;
    }
     .d-lg-inline {
         display: inline !important;
    }
     .d-lg-inline-block {
         display: inline-block !important;
    }
     .d-lg-block {
         display: block !important;
    }
     .d-lg-table {
         display: table !important;
    }
     .d-lg-table-row {
         display: table-row !important;
    }
     .d-lg-table-cell {
         display: table-cell !important;
    }
     .d-lg-flex {
         display: -ms-flexbox !important;
         display: flex !important;
    }
     .d-lg-inline-flex {
         display: -ms-inline-flexbox !important;
         display: inline-flex !important;
    }
}
 @media (min-width: 1200px) {
     .d-xl-none {
         display: none !important;
    }
     .d-xl-inline {
         display: inline !important;
    }
     .d-xl-inline-block {
         display: inline-block !important;
    }
     .d-xl-block {
         display: block !important;
    }
     .d-xl-table {
         display: table !important;
    }
     .d-xl-table-row {
         display: table-row !important;
    }
     .d-xl-table-cell {
         display: table-cell !important;
    }
     .d-xl-flex {
         display: -ms-flexbox !important;
         display: flex !important;
    }
     .d-xl-inline-flex {
         display: -ms-inline-flexbox !important;
         display: inline-flex !important;
    }
}
 @media print {
     .d-print-none {
         display: none !important;
    }
     .d-print-inline {
         display: inline !important;
    }
     .d-print-inline-block {
         display: inline-block !important;
    }
     .d-print-block {
         display: block !important;
    }
     .d-print-table {
         display: table !important;
    }
     .d-print-table-row {
         display: table-row !important;
    }
     .d-print-table-cell {
         display: table-cell !important;
    }
     .d-print-flex {
         display: -ms-flexbox !important;
         display: flex !important;
    }
     .d-print-inline-flex {
         display: -ms-inline-flexbox !important;
         display: inline-flex !important;
    }
}
 .flex-row {
     -ms-flex-direction: row !important;
     flex-direction: row !important;
}
 .flex-column {
     -ms-flex-direction: column !important;
     flex-direction: column !important;
}
 .flex-row-reverse {
     -ms-flex-direction: row-reverse !important;
     flex-direction: row-reverse !important;
}
 .flex-column-reverse {
     -ms-flex-direction: column-reverse !important;
     flex-direction: column-reverse !important;
}
 .flex-wrap {
     -ms-flex-wrap: wrap !important;
     flex-wrap: wrap !important;
}
 .flex-nowrap {
     -ms-flex-wrap: nowrap !important;
     flex-wrap: nowrap !important;
}
 .flex-wrap-reverse {
     -ms-flex-wrap: wrap-reverse !important;
     flex-wrap: wrap-reverse !important;
}
 .flex-fill {
     -ms-flex: 1 1 auto !important;
     flex: 1 1 auto !important;
}
 .flex-grow-0 {
     -ms-flex-positive: 0 !important;
     flex-grow: 0 !important;
}
 .flex-grow-1 {
     -ms-flex-positive: 1 !important;
     flex-grow: 1 !important;
}
 .flex-shrink-0 {
     -ms-flex-negative: 0 !important;
     flex-shrink: 0 !important;
}
 .flex-shrink-1 {
     -ms-flex-negative: 1 !important;
     flex-shrink: 1 !important;
}
 .justify-content-start {
     -ms-flex-pack: start !important;
     justify-content: flex-start !important;
}
 .justify-content-end {
     -ms-flex-pack: end !important;
     justify-content: flex-end !important;
}
 .justify-content-center {
     -ms-flex-pack: center !important;
     justify-content: center !important;
}
 .justify-content-between {
     -ms-flex-pack: justify !important;
     justify-content: space-between !important;
}
 .justify-content-around {
     -ms-flex-pack: distribute !important;
     justify-content: space-around !important;
}
 .align-items-start {
     -ms-flex-align: start !important;
     align-items: flex-start !important;
}
 .align-items-end {
     -ms-flex-align: end !important;
     align-items: flex-end !important;
}
 .align-items-center {
     -ms-flex-align: center !important;
     align-items: center !important;
}
 .align-items-baseline {
     -ms-flex-align: baseline !important;
     align-items: baseline !important;
}
 .align-items-stretch {
     -ms-flex-align: stretch !important;
     align-items: stretch !important;
}
 .align-content-start {
     -ms-flex-line-pack: start !important;
     align-content: flex-start !important;
}
 .align-content-end {
     -ms-flex-line-pack: end !important;
     align-content: flex-end !important;
}
 .align-content-center {
     -ms-flex-line-pack: center !important;
     align-content: center !important;
}
 .align-content-between {
     -ms-flex-line-pack: justify !important;
     align-content: space-between !important;
}
 .align-content-around {
     -ms-flex-line-pack: distribute !important;
     align-content: space-around !important;
}
 .align-content-stretch {
     -ms-flex-line-pack: stretch !important;
     align-content: stretch !important;
}
 .align-self-auto {
     -ms-flex-item-align: auto !important;
     align-self: auto !important;
}
 .align-self-start {
     -ms-flex-item-align: start !important;
     align-self: flex-start !important;
}
 .align-self-end {
     -ms-flex-item-align: end !important;
     align-self: flex-end !important;
}
 .align-self-center {
     -ms-flex-item-align: center !important;
     align-self: center !important;
}
 .align-self-baseline {
     -ms-flex-item-align: baseline !important;
     align-self: baseline !important;
}
 .align-self-stretch {
     -ms-flex-item-align: stretch !important;
     align-self: stretch !important;
}
 @media (min-width: 576px) {
     .flex-sm-row {
         -ms-flex-direction: row !important;
         flex-direction: row !important;
    }
     .flex-sm-column {
         -ms-flex-direction: column !important;
         flex-direction: column !important;
    }
     .flex-sm-row-reverse {
         -ms-flex-direction: row-reverse !important;
         flex-direction: row-reverse !important;
    }
     .flex-sm-column-reverse {
         -ms-flex-direction: column-reverse !important;
         flex-direction: column-reverse !important;
    }
     .flex-sm-wrap {
         -ms-flex-wrap: wrap !important;
         flex-wrap: wrap !important;
    }
     .flex-sm-nowrap {
         -ms-flex-wrap: nowrap !important;
         flex-wrap: nowrap !important;
    }
     .flex-sm-wrap-reverse {
         -ms-flex-wrap: wrap-reverse !important;
         flex-wrap: wrap-reverse !important;
    }
     .flex-sm-fill {
         -ms-flex: 1 1 auto !important;
         flex: 1 1 auto !important;
    }
     .flex-sm-grow-0 {
         -ms-flex-positive: 0 !important;
         flex-grow: 0 !important;
    }
     .flex-sm-grow-1 {
         -ms-flex-positive: 1 !important;
         flex-grow: 1 !important;
    }
     .flex-sm-shrink-0 {
         -ms-flex-negative: 0 !important;
         flex-shrink: 0 !important;
    }
     .flex-sm-shrink-1 {
         -ms-flex-negative: 1 !important;
         flex-shrink: 1 !important;
    }
     .justify-content-sm-start {
         -ms-flex-pack: start !important;
         justify-content: flex-start !important;
    }
     .justify-content-sm-end {
         -ms-flex-pack: end !important;
         justify-content: flex-end !important;
    }
     .justify-content-sm-center {
         -ms-flex-pack: center !important;
         justify-content: center !important;
    }
     .justify-content-sm-between {
         -ms-flex-pack: justify !important;
         justify-content: space-between !important;
    }
     .justify-content-sm-around {
         -ms-flex-pack: distribute !important;
         justify-content: space-around !important;
    }
     .align-items-sm-start {
         -ms-flex-align: start !important;
         align-items: flex-start !important;
    }
     .align-items-sm-end {
         -ms-flex-align: end !important;
         align-items: flex-end !important;
    }
     .align-items-sm-center {
         -ms-flex-align: center !important;
         align-items: center !important;
    }
     .align-items-sm-baseline {
         -ms-flex-align: baseline !important;
         align-items: baseline !important;
    }
     .align-items-sm-stretch {
         -ms-flex-align: stretch !important;
         align-items: stretch !important;
    }
     .align-content-sm-start {
         -ms-flex-line-pack: start !important;
         align-content: flex-start !important;
    }
     .align-content-sm-end {
         -ms-flex-line-pack: end !important;
         align-content: flex-end !important;
    }
     .align-content-sm-center {
         -ms-flex-line-pack: center !important;
         align-content: center !important;
    }
     .align-content-sm-between {
         -ms-flex-line-pack: justify !important;
         align-content: space-between !important;
    }
     .align-content-sm-around {
         -ms-flex-line-pack: distribute !important;
         align-content: space-around !important;
    }
     .align-content-sm-stretch {
         -ms-flex-line-pack: stretch !important;
         align-content: stretch !important;
    }
     .align-self-sm-auto {
         -ms-flex-item-align: auto !important;
         align-self: auto !important;
    }
     .align-self-sm-start {
         -ms-flex-item-align: start !important;
         align-self: flex-start !important;
    }
     .align-self-sm-end {
         -ms-flex-item-align: end !important;
         align-self: flex-end !important;
    }
     .align-self-sm-center {
         -ms-flex-item-align: center !important;
         align-self: center !important;
    }
     .align-self-sm-baseline {
         -ms-flex-item-align: baseline !important;
         align-self: baseline !important;
    }
     .align-self-sm-stretch {
         -ms-flex-item-align: stretch !important;
         align-self: stretch !important;
    }
}
 @media (min-width: 768px) {
     .flex-md-row {
         -ms-flex-direction: row !important;
         flex-direction: row !important;
    }
     .flex-md-column {
         -ms-flex-direction: column !important;
         flex-direction: column !important;
    }
     .flex-md-row-reverse {
         -ms-flex-direction: row-reverse !important;
         flex-direction: row-reverse !important;
    }
     .flex-md-column-reverse {
         -ms-flex-direction: column-reverse !important;
         flex-direction: column-reverse !important;
    }
     .flex-md-wrap {
         -ms-flex-wrap: wrap !important;
         flex-wrap: wrap !important;
    }
     .flex-md-nowrap {
         -ms-flex-wrap: nowrap !important;
         flex-wrap: nowrap !important;
    }
     .flex-md-wrap-reverse {
         -ms-flex-wrap: wrap-reverse !important;
         flex-wrap: wrap-reverse !important;
    }
     .flex-md-fill {
         -ms-flex: 1 1 auto !important;
         flex: 1 1 auto !important;
    }
     .flex-md-grow-0 {
         -ms-flex-positive: 0 !important;
         flex-grow: 0 !important;
    }
     .flex-md-grow-1 {
         -ms-flex-positive: 1 !important;
         flex-grow: 1 !important;
    }
     .flex-md-shrink-0 {
         -ms-flex-negative: 0 !important;
         flex-shrink: 0 !important;
    }
     .flex-md-shrink-1 {
         -ms-flex-negative: 1 !important;
         flex-shrink: 1 !important;
    }
     .justify-content-md-start {
         -ms-flex-pack: start !important;
         justify-content: flex-start !important;
    }
     .justify-content-md-end {
         -ms-flex-pack: end !important;
         justify-content: flex-end !important;
    }
     .justify-content-md-center {
         -ms-flex-pack: center !important;
         justify-content: center !important;
    }
     .justify-content-md-between {
         -ms-flex-pack: justify !important;
         justify-content: space-between !important;
    }
     .justify-content-md-around {
         -ms-flex-pack: distribute !important;
         justify-content: space-around !important;
    }
     .align-items-md-start {
         -ms-flex-align: start !important;
         align-items: flex-start !important;
    }
     .align-items-md-end {
         -ms-flex-align: end !important;
         align-items: flex-end !important;
    }
     .align-items-md-center {
         -ms-flex-align: center !important;
         align-items: center !important;
    }
     .align-items-md-baseline {
         -ms-flex-align: baseline !important;
         align-items: baseline !important;
    }
     .align-items-md-stretch {
         -ms-flex-align: stretch !important;
         align-items: stretch !important;
    }
     .align-content-md-start {
         -ms-flex-line-pack: start !important;
         align-content: flex-start !important;
    }
     .align-content-md-end {
         -ms-flex-line-pack: end !important;
         align-content: flex-end !important;
    }
     .align-content-md-center {
         -ms-flex-line-pack: center !important;
         align-content: center !important;
    }
     .align-content-md-between {
         -ms-flex-line-pack: justify !important;
         align-content: space-between !important;
    }
     .align-content-md-around {
         -ms-flex-line-pack: distribute !important;
         align-content: space-around !important;
    }
     .align-content-md-stretch {
         -ms-flex-line-pack: stretch !important;
         align-content: stretch !important;
    }
     .align-self-md-auto {
         -ms-flex-item-align: auto !important;
         align-self: auto !important;
    }
     .align-self-md-start {
         -ms-flex-item-align: start !important;
         align-self: flex-start !important;
    }
     .align-self-md-end {
         -ms-flex-item-align: end !important;
         align-self: flex-end !important;
    }
     .align-self-md-center {
         -ms-flex-item-align: center !important;
         align-self: center !important;
    }
     .align-self-md-baseline {
         -ms-flex-item-align: baseline !important;
         align-self: baseline !important;
    }
     .align-self-md-stretch {
         -ms-flex-item-align: stretch !important;
         align-self: stretch !important;
    }
}
 @media (min-width: 992px) {
     .flex-lg-row {
         -ms-flex-direction: row !important;
         flex-direction: row !important;
    }
     .flex-lg-column {
         -ms-flex-direction: column !important;
         flex-direction: column !important;
    }
     .flex-lg-row-reverse {
         -ms-flex-direction: row-reverse !important;
         flex-direction: row-reverse !important;
    }
     .flex-lg-column-reverse {
         -ms-flex-direction: column-reverse !important;
         flex-direction: column-reverse !important;
    }
     .flex-lg-wrap {
         -ms-flex-wrap: wrap !important;
         flex-wrap: wrap !important;
    }
     .flex-lg-nowrap {
         -ms-flex-wrap: nowrap !important;
         flex-wrap: nowrap !important;
    }
     .flex-lg-wrap-reverse {
         -ms-flex-wrap: wrap-reverse !important;
         flex-wrap: wrap-reverse !important;
    }
     .flex-lg-fill {
         -ms-flex: 1 1 auto !important;
         flex: 1 1 auto !important;
    }
     .flex-lg-grow-0 {
         -ms-flex-positive: 0 !important;
         flex-grow: 0 !important;
    }
     .flex-lg-grow-1 {
         -ms-flex-positive: 1 !important;
         flex-grow: 1 !important;
    }
     .flex-lg-shrink-0 {
         -ms-flex-negative: 0 !important;
         flex-shrink: 0 !important;
    }
     .flex-lg-shrink-1 {
         -ms-flex-negative: 1 !important;
         flex-shrink: 1 !important;
    }
     .justify-content-lg-start {
         -ms-flex-pack: start !important;
         justify-content: flex-start !important;
    }
     .justify-content-lg-end {
         -ms-flex-pack: end !important;
         justify-content: flex-end !important;
    }
     .justify-content-lg-center {
         -ms-flex-pack: center !important;
         justify-content: center !important;
    }
     .justify-content-lg-between {
         -ms-flex-pack: justify !important;
         justify-content: space-between !important;
    }
     .justify-content-lg-around {
         -ms-flex-pack: distribute !important;
         justify-content: space-around !important;
    }
     .align-items-lg-start {
         -ms-flex-align: start !important;
         align-items: flex-start !important;
    }
     .align-items-lg-end {
         -ms-flex-align: end !important;
         align-items: flex-end !important;
    }
     .align-items-lg-center {
         -ms-flex-align: center !important;
         align-items: center !important;
    }
     .align-items-lg-baseline {
         -ms-flex-align: baseline !important;
         align-items: baseline !important;
    }
     .align-items-lg-stretch {
         -ms-flex-align: stretch !important;
         align-items: stretch !important;
    }
     .align-content-lg-start {
         -ms-flex-line-pack: start !important;
         align-content: flex-start !important;
    }
     .align-content-lg-end {
         -ms-flex-line-pack: end !important;
         align-content: flex-end !important;
    }
     .align-content-lg-center {
         -ms-flex-line-pack: center !important;
         align-content: center !important;
    }
     .align-content-lg-between {
         -ms-flex-line-pack: justify !important;
         align-content: space-between !important;
    }
     .align-content-lg-around {
         -ms-flex-line-pack: distribute !important;
         align-content: space-around !important;
    }
     .align-content-lg-stretch {
         -ms-flex-line-pack: stretch !important;
         align-content: stretch !important;
    }
     .align-self-lg-auto {
         -ms-flex-item-align: auto !important;
         align-self: auto !important;
    }
     .align-self-lg-start {
         -ms-flex-item-align: start !important;
         align-self: flex-start !important;
    }
     .align-self-lg-end {
         -ms-flex-item-align: end !important;
         align-self: flex-end !important;
    }
     .align-self-lg-center {
         -ms-flex-item-align: center !important;
         align-self: center !important;
    }
     .align-self-lg-baseline {
         -ms-flex-item-align: baseline !important;
         align-self: baseline !important;
    }
     .align-self-lg-stretch {
         -ms-flex-item-align: stretch !important;
         align-self: stretch !important;
    }
}
 @media (min-width: 1200px) {
     .flex-xl-row {
         -ms-flex-direction: row !important;
         flex-direction: row !important;
    }
     .flex-xl-column {
         -ms-flex-direction: column !important;
         flex-direction: column !important;
    }
     .flex-xl-row-reverse {
         -ms-flex-direction: row-reverse !important;
         flex-direction: row-reverse !important;
    }
     .flex-xl-column-reverse {
         -ms-flex-direction: column-reverse !important;
         flex-direction: column-reverse !important;
    }
     .flex-xl-wrap {
         -ms-flex-wrap: wrap !important;
         flex-wrap: wrap !important;
    }
     .flex-xl-nowrap {
         -ms-flex-wrap: nowrap !important;
         flex-wrap: nowrap !important;
    }
     .flex-xl-wrap-reverse {
         -ms-flex-wrap: wrap-reverse !important;
         flex-wrap: wrap-reverse !important;
    }
     .flex-xl-fill {
         -ms-flex: 1 1 auto !important;
         flex: 1 1 auto !important;
    }
     .flex-xl-grow-0 {
         -ms-flex-positive: 0 !important;
         flex-grow: 0 !important;
    }
     .flex-xl-grow-1 {
         -ms-flex-positive: 1 !important;
         flex-grow: 1 !important;
    }
     .flex-xl-shrink-0 {
         -ms-flex-negative: 0 !important;
         flex-shrink: 0 !important;
    }
     .flex-xl-shrink-1 {
         -ms-flex-negative: 1 !important;
         flex-shrink: 1 !important;
    }
     .justify-content-xl-start {
         -ms-flex-pack: start !important;
         justify-content: flex-start !important;
    }
     .justify-content-xl-end {
         -ms-flex-pack: end !important;
         justify-content: flex-end !important;
    }
     .justify-content-xl-center {
         -ms-flex-pack: center !important;
         justify-content: center !important;
    }
     .justify-content-xl-between {
         -ms-flex-pack: justify !important;
         justify-content: space-between !important;
    }
     .justify-content-xl-around {
         -ms-flex-pack: distribute !important;
         justify-content: space-around !important;
    }
     .align-items-xl-start {
         -ms-flex-align: start !important;
         align-items: flex-start !important;
    }
     .align-items-xl-end {
         -ms-flex-align: end !important;
         align-items: flex-end !important;
    }
     .align-items-xl-center {
         -ms-flex-align: center !important;
         align-items: center !important;
    }
     .align-items-xl-baseline {
         -ms-flex-align: baseline !important;
         align-items: baseline !important;
    }
     .align-items-xl-stretch {
         -ms-flex-align: stretch !important;
         align-items: stretch !important;
    }
     .align-content-xl-start {
         -ms-flex-line-pack: start !important;
         align-content: flex-start !important;
    }
     .align-content-xl-end {
         -ms-flex-line-pack: end !important;
         align-content: flex-end !important;
    }
     .align-content-xl-center {
         -ms-flex-line-pack: center !important;
         align-content: center !important;
    }
     .align-content-xl-between {
         -ms-flex-line-pack: justify !important;
         align-content: space-between !important;
    }
     .align-content-xl-around {
         -ms-flex-line-pack: distribute !important;
         align-content: space-around !important;
    }
     .align-content-xl-stretch {
         -ms-flex-line-pack: stretch !important;
         align-content: stretch !important;
    }
     .align-self-xl-auto {
         -ms-flex-item-align: auto !important;
         align-self: auto !important;
    }
     .align-self-xl-start {
         -ms-flex-item-align: start !important;
         align-self: flex-start !important;
    }
     .align-self-xl-end {
         -ms-flex-item-align: end !important;
         align-self: flex-end !important;
    }
     .align-self-xl-center {
         -ms-flex-item-align: center !important;
         align-self: center !important;
    }
     .align-self-xl-baseline {
         -ms-flex-item-align: baseline !important;
         align-self: baseline !important;
    }
     .align-self-xl-stretch {
         -ms-flex-item-align: stretch !important;
         align-self: stretch !important;
    }
}
/*# sourceMappingURL=bootstrap-grid.css.map */
/* Подчёркнутые вкладки: как у конструктора дизайнов. Основной блок: текст страницы / цвет ссылок (--ds-page-*). На подложке: --ds-info-text / --ds-info-link. */
 .tabs {
     display: flex;
     flex-wrap: wrap;
     gap: 0;
     margin-top: 1rem;
     border-bottom: 1px solid var(--ui-line, rgba(0, 0, 0, .14));
}
 .tab {
     padding: 9px 22px;
     background: none;
     border: none;
     border-bottom: 2px solid transparent;
     cursor: pointer;
     font: inherit;
     font-size: .93em;
     font-weight: normal;
     color: var(--ds-page-text, inherit);
     margin-bottom: -1px;
     transition: color .15s, border-color .15s;
     border-radius: 4px 4px 0 0;
}
 .tab:hover {
     color: var(--ds-page-link-hover, var(--ds-page-link, #0000cd));
     background: transparent;
}
 .tab.active {
     color: var(--ds-page-link, #0000cd);
     border-bottom-color: var(--ds-page-link, #0000cd);
     font-weight: 600;
}
 .tab span {
     opacity: 1;
}
 .secondary-block .tab, .tabs--on-secondary .tab {
     color: var(--ds-info-text, var(--ui-text, inherit));
}
 .secondary-block .tab:hover, .tabs--on-secondary .tab:hover {
     color: var(--ds-info-link, var(--ui-info, #555555));
     background: transparent;
}
 .secondary-block .tab.active, .tabs--on-secondary .tab.active {
     color: var(--ds-info-link, var(--ui-info, #555555));
     border-bottom-color: var(--ds-info-link, var(--ui-info, #555555));
     font-weight: 600;
}
 .tab-contents {
     overflow-x: auto;
     padding: 8px 0 4px;
     border-bottom: 1px solid var(--ui-line, rgba(0, 0, 0, .14));
}
 .hidden {
     display: none;
}

.mixbtn {
	background: 	 transparent !important;
	border: 		 none 		 !important;
	padding:    	 0 			 !important;
    height:     	 auto 		 !important;
    width: 			 auto 		 !important;
    gap: 			 0 			 !important;
    border-radius:   0 		 	 !important;
    color: 			 inherit  	 !important;
    font: 			 inherit 	 !important;
    line-height: 	 inherit 	 !important;
    text-align: 	 left		 !important;
    cursor: 		 pointer	 !important;
	text-decoration: underline 	 !important;

}
.mixbtn:hover {
	color: rgb(var(--ds-info-rgb)) !important;
}

 .ui-btn {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 0 6px;
     border: 2px solid #F1F1F1;
     border-radius: 0;
     background: var(--ui-fill);
     color: var(--ui-text);
     font: Verdana;
	 font-size: 14px;
     height: var(--ui-height);
     text-decoration: none;
     cursor: pointer;
     transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
 a.ui-btn, a.ui-btn:link, a.ui-btn:hover, a.ui-btn:focus, a.ui-btn:active, a.ui-btn:visited {
     color: var(--ui-text);
     text-decoration: none;
}
 .ui-btn:disabled {
     opacity: .55;
     cursor: not-allowed;
}
 .ui-btn:hover:not(:disabled):not(.ui-btn--primary):not(.ui-btn--danger):not(.ui-btn--ghost) {
     background: var(--ui-fill-hover);
}
 .ui-btn--primary {

     background: var(--ui-accent);
     color: var(--ui-on-accent);
}
 a.ui-btn--primary, a.ui-btn--primary:link, a.ui-btn--primary:hover, a.ui-btn--primary:focus, a.ui-btn--primary:active, a.ui-btn--primary:visited {
     color: var(--ui-on-accent);
}
 .ui-btn--primary:hover:not(:disabled) {
     background: var(--ui-accent-hover);
     border-color: color-mix(in srgb, var(--ui-accent-hover) 35%, transparent);
}
 .ui-btn--danger {
     border-color: color-mix(in srgb, var(--ui-danger) 35%, transparent);
     background: var(--ui-danger);
     color: var(--ui-on-accent);
}
 a.ui-btn--danger, a.ui-btn--danger:link, a.ui-btn--danger:hover, a.ui-btn--danger:focus, a.ui-btn--danger:active, a.ui-btn--danger:visited {
     color: var(--ui-on-accent);
}
 .ui-btn--danger:hover:not(:disabled) {
     background: var(--ui-danger-hover);
     border-color: color-mix(in srgb, var(--ui-danger-hover) 35%, transparent);
}
 .ui-btn--success {
     border-color: color-mix(in srgb, var(--ui-success) 35%, transparent);
     background: var(--ui-success);
     color: var(--ui-on-accent);
}
 a.ui-btn--success, a.ui-btn--success:link, a.ui-btn--success:hover, a.ui-btn--success:focus, a.ui-btn--success:active, a.ui-btn--success:visited {
     color: var(--ui-on-accent);
}
 .ui-btn--success:hover:not(:disabled) {
     background: var(--ui-success-hover, var(--ui-success));
     border-color: color-mix(in srgb, var(--ui-success-hover, var(--ui-success)) 35%, transparent);
}
 .ui-btn--ghost {
     background: transparent;
}
 .ui-btn--tiny {
     min-height: 28px;
     padding: 2px 10px;
     font-size: .85em;
}
 .ui-field {
     display: block;
     width: min(100%, 280px);
     max-width: 100%;
}
 .ui-field--wide {
     width: min(100%, 320px);
}
 .ui-field--full {
     width: 100%;
     max-width: 100%;
}
 .ui-input {
     box-sizing: border-box;
     width: 100%;
     height: var(--ui-height);
     padding: 2px 8px;
     border: 1px solid var(--ui-line);
     border-radius: var(--ui-radius);
     background: var(--ui-input-bg);
     color: var(--ui-input-text);
     font: inherit;
}
 textarea.ui-input {
     max-width: 100%;
     resize: vertical;
     min-height: 1em;
}
 .ui-input::placeholder {
     color: color-mix(in srgb, var(--ui-input-text) 45%, transparent);
}
 .ui-input:focus {
     outline: none;
     background: var(--ui-input-bg-hover);
     border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 12%, transparent);
}
 .ui-input:disabled {
     color: color-mix(in srgb, var(--ui-input-text) 55%, transparent);
     background: color-mix(in srgb, var(--ui-input-bg) 65%, transparent);
     border-color: rgba(0, 0, 0, .12);
     opacity: 1;
     cursor: not-allowed;
     -webkit-text-fill-color: color-mix(in srgb, var(--ui-input-text) 55%, transparent);
}
 .ui-select {
     position: relative;
     width: min(100%, 220px);
     max-width: 100%;
}
 .ui-select--wide {
     width: min(100%, 320px);
}
/* Native <select class="ui-select"> (classic PHP pages) */
 select.ui-select {
     box-sizing: border-box;
     display: inline-flex;
     width: auto;
     min-width: 10em;
     max-width: 100%;
     min-height: var(--ui-height);
     padding: 6px 28px 6px 10px;
     border: 1px solid var(--ui-line);
     border-radius: var(--ui-radius);
     background-color: var(--ui-input-bg);
     background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
     background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
     background-size: 5px 5px, 5px 5px;
     background-repeat: no-repeat;
     color: var(--ui-input-text);
     font: inherit;
     line-height: 1.2;
     cursor: pointer;
     appearance: none;
     -webkit-appearance: none;
}
 select.ui-select:hover {
     border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
}
 select.ui-select:focus {
     outline: none;
     border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 12%, transparent);
}
 select.ui-select:disabled {
     opacity: .55;
     cursor: not-allowed;
}
 select.ui-select--wide {
     width: min(100%, 320px);
}
 .ui-select__control {
     box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     width: 100%;
     min-height: var(--ui-height);
     padding: 6px 10px;
     border: 1px solid var(--ui-line);
     border-radius: var(--ui-radius);
     background: var(--ui-fill);
     color: var(--ui-text);
     font: inherit;
     text-align: left;
     cursor: pointer;
}
 .ui-select__control:hover, .ui-select.is-open .ui-select__control {
     border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
}
 .ui-select__value {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 .ui-select__chevron {
     flex: 0 0 auto;
     opacity: .55;
     font-size: .75em;
}
 .ui-select__panel {
     position: absolute;
     top: calc(100% + 4px);
     left: 0;
     right: 0;
     z-index: 20;
     display: flex;
     flex-direction: column;
     max-height: 240px;
     border: 1px solid var(--ui-line);
     border-radius: var(--ui-radius);
     background: rgba(var(--ds-info-rgb, 255, 255, 255), .96);
     color: var(--ui-text);
     box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
     overflow: hidden;
}
 .ui-select__search {
     margin: 8px;
     width: calc(100% - 16px);
}
 .ui-select__list {
     margin: 0;
     padding: 0 0 6px;
     list-style: none;
     overflow: auto;
     max-height: 190px;
}
 .ui-select__option {
     padding: 8px 12px;
     cursor: pointer;
     line-height: 1.3;
}
 .ui-select__option:hover, .ui-select__option.is-active {
     background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
}
 .ui-select__empty {
     padding: 10px 12px;
     opacity: .65;
     font-size: .9em;
}
 .ui-form-row {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 8px 10px;
     margin: 8px 0;
     padding: 10px 12px;
     border: 1px solid var(--ui-line);
     border-radius: var(--ui-radius);
     color: var(--ui-text);
}
 .ui-form-row .ui-input {
     width: auto;
     min-width: 12em;
     flex: 1 1 12em;
}
 .ui-form-row select.ui-select {
     flex: 0 1 auto;
}
 .ui-check {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     margin: 0 0 8px;
     cursor: pointer;
     line-height: 1.35;
}
 .ui-check--inline {
     display: inline-flex;
     align-items: center;
     margin: 0;
     white-space: nowrap;
}
 .ui-check--inline input[type="checkbox"] {
     margin-top: 0;
}
 .ui-check input[type="checkbox"] {
     width: 1.05em;
     height: 1.05em;
     margin-top: 3px;
     flex-shrink: 0;
     padding: 0;
     background-color: rgba(var(--ds-info-rgb, 255, 255, 255), .85);
     border: 1px solid var(--ui-line);
     border-radius: 3px;
     accent-color: var(--ui-accent);
     cursor: pointer;
     -webkit-appearance: auto;
     appearance: auto;
}
 .ui-switch {
     align-items: center;
}
 .ui-switch input[type="checkbox"] {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
     appearance: none;
     -webkit-appearance: none;
}
 .ui-switch__track {
     position: relative;
     flex-shrink: 0;
     width: 2.1em;
     height: 1em;
     margin-top: 0;
     background-color: rgba(var(--ds-info-rgb, 255, 255, 255), .85);
     border: 1px solid var(--ui-line);
     border-radius: 999px;
     transition: background-color .15s ease, border-color .15s ease;
}
 .ui-switch__track::after {
     content: "";
     position: absolute;
     top: 1px;
     left: 1px;
     width: calc(1.15em - 4px);
     height: calc(1.15em - 4px);
     border-radius: 50%;
     background: var(--ui-accent, #D0B690);
     transition: transform .15s ease;
}
 .ui-switch input:checked + .ui-switch__track {
     background-color: var(--ui-accent, #D0B690);
     border-color: var(--ui-accent, #D0B690);
}
 .ui-switch input:checked + .ui-switch__track::after {
     background: rgba(var(--ds-info-rgb, 255, 255, 255), .95);
     transform: translateX(0.95em);
}
 .ui-switch--disabled {
     opacity: .55;
     cursor: not-allowed;
}
 .ui-range {

     display: flex;
     align-items: center;
     gap: 12px;
     max-width: 28em;
     margin: 4px 0 10px;
}
 .ui-range input[type="range"] {
     flex: 1 1 auto;
}
 .ui-range__value {
     min-width: 3.2em;
     text-align: right;
     font-variant-numeric: tabular-nums;
     font-weight: 600;
}

/* Same range chrome as settings (озвучка) — also used in /cw3 which does not load common_ui.css */
input[type="range"] {
    --range-color: #e8a53a;                 /* жёлто-оранжевый thumb */
    --range-track: #fff8e7;                 /* светлый трек */
    --range-track-h: 15px;                  /* толстый трек */
    --range-thumb-w: 23px;                  /* thumb по высоте трека */
    --range-thumb-h: var(--range-thumb-w);
	--range-thumb-radius: 10px;

    --range-progress: 50%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--range-thumb-h);
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: var(--range-track-h);
    border-radius: calc(var(--range-track-h) / 2);
    border: none;
    background: var(--range-track);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}


input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--range-thumb-w);
    height: var(--range-thumb-h);
    margin-top: calc((var(--range-track-h) - var(--range-thumb-h)) / 2);
    border-radius: 6px;
    background: var(--range-color);
    border: none;
	border-radius: var(--range-thumb-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: grab;
}

input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
}


input[type="range"]::-moz-range-track {
    height: var(--range-track-h);
    border-radius: calc(var(--range-track-h) / 2);
    background: var(--range-track);
    border: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

input[type="range"]::-moz-range-progress {
    height: var(--range-track-h);
    border-radius: calc(var(--range-track-h) / 2);
    background: var(--range-track);
}

input[type="range"]::-moz-range-thumb {
    width: var(--range-thumb-w);
    height: var(--range-thumb-h);
    border-radius: var(--range-thumb-radius);
    background: var(--range-color);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: grab;
    box-sizing: border-box;
}
 .ui-file {
     display: block;
     width: min(100%, 320px);
     max-width: 100%;
}
 .ui-file--wide {
     width: 100%;
}
 .ui-file__label {
     display: flex;
     align-items: center;
     gap: 10px;
     max-width: 100%;
     cursor: pointer;
}
 .ui-file__input {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
}
 .ui-file__button {
     flex-shrink: 0;
     pointer-events: none;
}
 .ui-file__label:focus-within .ui-file__button {
     outline: none;
     border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 12%, transparent);
}
 .ui-file__name {
     flex: 1 1 auto;
     min-width: 0;
     font-size: .9em;
     line-height: 1.35;
     opacity: .78;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 .ui-file__names {
     margin: 6px 0 0;
     font-size: .88em;
     line-height: 1.4;
     word-break: break-word;
}
 .ui-file--wide .ui-file__label {
     flex-wrap: wrap;
}
/* Semantic color utilities */
 .bg-primary {
     background: var(--ui-accent-faint);
     color: var(--ui-text);
}
 .bg-secondary {
     background: var(--ui-secondary);
     color: var(--ui-text);
}
 .bg-danger {
     background: var(--ui-danger-soft);
     color: var(--ui-text);
}
 .bg-success {
     background: var(--ui-success-soft);
     color: var(--ui-text);
}
 .bg-warning {
     background: var(--ui-warning-soft);
     color: var(--ui-text);
}
 .bg-info {
     background: var(--ui-info-soft);
     color: var(--ui-text);
}
 .text-primary {
     color: var(--ui-accent);
}
 .text-secondary {
     color: var(--ui-text-muted);
}
 .text-danger {
     color: var(--ui-danger);
}
 .text-success {
     color: var(--ui-success);
}
 .text-warning {
     color: var(--ui-warning);
}
 .text-info {
     color: var(--ui-info);
}
 .text-muted {
     color: var(--ui-text-muted);
}
 .text-body {
     color: var(--ui-text);
}
 .text-on-accent {
     color: var(--ui-on-accent);
}
/** * Layer 1 — variables * Theme tokens only. No selectors. * Consumed by common_ui.css and utils.css. */

 body {
    /* background-image: url('/design/2026/autumn/1614350/background.png?653673811'); */
     background-attachment: fixed;
     background-repeat: repeat;
     background-color: var(--ds-main-backgound);
     color: #000000;
}
 #app {
     color: inherit;
}

 #tr_actions, #tr_mouth, #tr_info, #compact_actions {

     color: inherit;
}
 #app.compact .compact-info-tab {
     color: var(--ds-page-text, #000000);
}
 #app.compact .compact-info-tab:hover {
     color: var(--ds-page-link-hover, #774503);
}
 #app.compact .compact-info-tab.active {
     color: var(--ds-page-link, #291802);
     border-bottom-color: var(--ds-page-link, #291802);
     font-weight: 600;
}
 #info_main h2 a.toggle, #info_main h2 a.toggle:link, #info_main h2 a.toggle:visited {
     color: var(--ds-page-link, #291802);
}
 #info_main h2 a.toggle:hover, #info_main h2 a.toggle:focus {
     color: var(--ds-page-link-hover, #774503);
}



 #thdey, #ctdey, #compact_info, #relatives_block, #history_block, #parameters_skills_block, #buffdey {

     color: var(--ds-info-text, inherit);
}
 html,body{
    margin:0;
    padding:0
}
#app{

    width:1000px;
    margin:auto
}
#newchat, #newls {
    font-family: Roboto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2em;
    margin-left: 3px;
    /* padding: 0 5px; */
    background-color: var(--ds-primary, #D0B690);
    color: var(--ds-on-accent, #000000);
    font-size: 14px;
    font-weight: 600;
    /* line-height: 1.5; */
}

#black_points{
   /* background:rgba(var(--ds-info-rgb, 255, 255, 255), 0.6); */
    color:var(--ds-info-text, inherit)
}
.small{
    color:var(--ds-info-text, inherit)
}
.small a:link,.small a:visited{
    color:var(--ds-info-link, #555555)
}
.small a:hover{
    color:var(--ds-info-link-hover, #333333)
}
.game-topbar{
	padding-left: 0 !important;
    position:relative;
    z-index:1200;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:2px;
    width:100%;
    max-width:1000px;
    box-sizing:border-box;
    margin:0 0 2px 0;
    padding:0;
    background:rgba(var(--ds-info-rgb, 255, 255, 255), 0);
    color:var(--ds-info-text, inherit);
    font-size:14px !important;
	flex-wrap: wrap;
}
.chars {
    flex-basis: 100%;
    display: flex;      /* ← теперь .chars — flex-контейнер */
    flex-wrap: wrap;
    gap: 10px;          /* ← работает: отступ между .chars-детьми */
}
.game-topbar-nav{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    min-width:0
}
.game-topbar-nav>a{
    display:inline-flex;
    padding:2px 0;
    color:var(--ds-info-text, inherit);
}
.game-topbar-nav>a:link,.game-topbar-nav>a:visited{
    color:var(--ds-info-text, inherit);
    text-decoration:none
}
.game-topbar-nav>a:hover,.game-topbar-nav>a:focus{
    color: rgb(var(--ds-info-rgb));
    text-decoration:none
}
.game-topbar-settings{
    flex-shrink:0;
    overflow:visible;
    padding:4px 8px
}
.game-topbar-settings .game-topbar-settings__icon{
    display:block;
    width:16px;
    height:16px;
    flex-shrink:0;
    background-color:currentColor;
    -webkit-mask:url("/img/profile/gear-fill.svg") center/contain no-repeat;
    mask:url("/img/profile/gear-fill.svg") center/contain no-repeat;
    opacity:.85
}
.game-topbar-settings:hover .game-topbar-settings__icon,.game-topbar-settings:focus .game-topbar-settings__icon{
    opacity:1
}
.game-topbar-chars{
    position:relative;
    display:inline-flex;
    align-items:center
}
.game-topbar-chars__summary{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin:0;
    padding:4px 10px;
    border:none;
    border-radius:8px;
    background:rgba(0,0,0,0);
    color:var(--ds-info-text, inherit);
    font:inherit;
    line-height:1.25;
    cursor:pointer;
    list-style:none;
    user-select:none;
    transition:background-color .15s ease,color .15s ease
}
.game-topbar-chars__summary::-webkit-details-marker{
    display:none
}
.game-topbar-chars__summary:hover,.game-topbar-chars[open]>.game-topbar-chars__summary{
    background:rgba(var(--ds-info-rgb, 255, 255, 255), 0.45);
    color:var(--ds-primary, #D0B690)
}
.game-topbar-chars__badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:14px;
    height:14px;
    padding:0 3px;
    border-radius:999px;
    background:var(--ui-danger, #b42318);
    color:var(--ui-on-accent, #fff);
    font-size:10px;
    font-weight:700;
    line-height:1
}
.game-topbar-chars__caret{
    width:12px;
    height:12px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.7;
    transition:transform .15s ease
}
.game-topbar-chars[open]>.game-topbar-chars__summary .game-topbar-chars__caret{
    transform:rotate(180deg)
}
.game-topbar-chars__menu{
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    z-index:1200;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:0;
    min-width:160px;
    max-width:min(260px,80vw);
    max-height:min(300px,50vh);
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:4px;
    border:1px solid var(--ui-line, rgba(0, 0, 0, 0.14));
    border-radius:8px;
    background:rgba(var(--ds-info-rgb, 255, 255, 255), 0.96);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    color:var(--ds-info-text, #000)
}
.game-topbar-chars__item{
    display:block;
    flex-shrink:0;
    padding:3px 8px;
    border-radius:6px;
    color:var(--ds-info-text, #000);
    text-decoration:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.25
}
.game-topbar-chars__item:link,.game-topbar-chars__item:visited{
    color:var(--ds-info-text, #000);
    text-decoration:none
}
.game-topbar-chars__item:hover,.game-topbar-chars__item:focus{
    background:rgba(var(--ds-info-rgb, 255, 255, 255), 0.55);
    color:var(--ds-primary, #D0B690);
    outline:none;
    text-decoration:none
}
.game-topbar-chars__item--current{
    opacity:.65;
    font-weight:650;
    cursor:default
}
.game-topbar-chars__unread{
    font-weight:650
}
.game-topbar-chars__deleting{
    opacity:.75;
    font-size:.9em
}
.game-location{
    flex:0 1 auto;
    margin-left:auto;
    text-align:right;
    padding:0 4px;
    max-width:55%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.game-location.game-location--trunc,.game-location.game-location--expanded{
    cursor:pointer
}
.game-location.game-location--expanded{
    max-width:100%;
    overflow:visible;
    text-overflow:unset;
    white-space:normal
}
.title{
    display:block;
    font-size:18px;
    font-weight:bold;
    padding:0 5px 8px 5px
}
#main_table{
    border-collapse:separate;
    border:none;
    width:100%;
    max-width:1000px;
    border-spacing:0;
    margin:0;
    padding:0;
    margin-top:7px;
    background: #000000;
}
#main_table>tr,#main_table>tr>td,#main_table>tbody>tr,#main_table>tbody>tr>td{
    margin:0;
    padding:0
}
#tr_sky>td,#tr_field>td,#act,#cages_overflow{
    background-color:#000
}
#app:not(.compact) #tr_tos>td{
    background-color:#000
}
#app.compact #tr_tos>td{
    background-color:rgba(0,0,0,0)
}
#app:not(.compact) #tr_actions>td{
    box-shadow:0 2px 0 #000
}
#app:not(.compact) #tr_tos>td{
    box-shadow:0 2px 0 #000
}
#app:not(.compact) #tr_sky>td{
    box-shadow:0 -2px 0 #000,0 2px 0 #000
}
#app:not(.compact) #tr_field>td{
    box-shadow:0 -2px 0 #000,0 2px 0 #000
}
#app:not(.compact) #act{
    box-shadow:0 -2px 0 #000
}

/* чат */

#tr_chat>td{
    background:rgba(var(--ds-info-rgb, 255, 255, 255), 1);
    color:var(--ds-info-text, var(--ui-text, #000000))
}
#tr_chat>td a:not(.ui-btn):link,#tr_chat>td a:not(.ui-btn):visited{
    color:var(--ds-info-link, #555555)
}
#tr_chat>td a:not(.ui-btn):hover,#tr_chat>td a:not(.ui-btn):focus{
    color:var(--ds-info-link-hover, #333333)
}


#relatives_block,#history_block,#parameters_skills_block,#buffdey{

    color:var(--ds-info-text, inherit);
    border-radius:var(--ui-radius, 8px);
    padding:6px 8px;
    box-sizing:border-box
}
#relatives_block a:not(.ui-btn):link,#relatives_block a:not(.ui-btn):visited,#history_block a:not(.ui-btn):link,#history_block a:not(.ui-btn):visited,#parameters_skills_block a:not(.ui-btn):link,#parameters_skills_block a:not(.ui-btn):visited,#buffdey a:not(.ui-btn):link,#buffdey a:not(.ui-btn):visited{
    color:var(--ds-info-link, #555555)
}
#relatives_block a:not(.ui-btn):hover,#relatives_block a:not(.ui-btn):focus,#history_block a:not(.ui-btn):hover,#history_block a:not(.ui-btn):focus,#parameters_skills_block a:not(.ui-btn):hover,#parameters_skills_block a:not(.ui-btn):focus,#buffdey a:not(.ui-btn):hover,#buffdey a:not(.ui-btn):focus{
    color:var(--ds-info-link-hover, #333333)
}
#thdey,#ctdey{
    display:inline-block;
    width:auto;
    max-width:100%;
    box-sizing:border-box;
    /* background:rgba(var(--ds-info-rgb, 255, 255, 255), 0.55); */
    color:var(--ds-info-text, inherit);
    border-radius:var(--ui-radius, 8px);
    padding:8px 12px;
    margin:6px
}
#thdey ul,#ctdey ul{
    margin:0;
    padding:0;
    padding-left:1.4em
}
#thdey a:link,#thdey a:visited,#ctdey a:link,#ctdey a:visited{
    color:var(--ds-info-link, #555555)
}
#thdey a:hover,#ctdey a:hover{
    color:var(--ds-info-link-hover, #333333)
}
#app button.ui-btn{
    margin:0 6px 6px 0
}
.infos{
    vertical-align:top;
    width:33%;
    padding:0 5px 8px 5px
}
#info_main{
    border:none;
    width:100%
}
#info_main h2 a.toggle,#info_main h2 a.toggle:link,#info_main h2 a.toggle:visited{
    color:var(--ds-page-link, #0000cd)
}
#info_main h2 a.toggle:hover,#info_main h2 a.toggle:focus{
    color:var(--ds-page-link-hover, var(--ds-page-link, #4682b4))
}
.other_cats_list{
    background:rgba(var(--ds-info-rgb, 255, 255, 255), 0.6);
    border:1px solid rgba(0,0,0,.4);
    color:var(--ds-info-text, inherit)
}
.other_cats_list>a{
    color:var(--ds-info-link, #555555)
}
.other_cats_list>a:hover{
    color:var(--ds-info-link-hover, #333333)
}
#achievement{
    top:-1000px;
    transition:top .5s ease;
    display:flex;
    flex-direction:row;
    position:fixed;
    left:0;
    right:0;
    max-width:720px;
    min-width:320px;
    margin:auto;
    background-color:#ffe;
    border-radius:5px;
    padding:10px 15px 10px;
    z-index:101;
    box-shadow:0 0 10px rgba(0,0,0,.7);
    background-size:contain
}
#achievement #achievement_img>img{
    display:block;
    height:120px;
    width:120px;
    border-radius:.5em
}
#achievement #achievement_img{
    display:flex;
    padding:4px 15px 4px 4px;
    align-items:center
}
#achievement #achievement_container{
    padding:4px;
    width:100%
}
#achievement #close_achievement{
    position:absolute;
    right:0;
    top:0;
    padding:2px 7px;
    color:#000;
    font-size:1.7em;
    cursor:pointer
}
#achievement #achievement_name{
    font-weight:bold;
    font-size:1.4em;
    padding-bottom:2px
}
#achievement #achievement_top{
    font-weight:bold;
    font-size:1.2em;
    text-align:center;
    padding:0 25px 5px 25px
}
#achievement #achievement_text{
    font-style:italic
}
#achievement.mobile{
    width:100%;
    padding:10px 0 10px;
    border-radius:0 0 5px 5px
}
#achievement.mobile #close_achievement{
    font-size:2em
}
#achievement.mobile #achievement_img{
    padding:4px
}
#achievement.mobile.show{
    top:0
}
#achievement.show{
    top:15px
}
.no-select{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.tooltip{
    display:block !important;
    z-index:10000
}
.tooltip .tooltip-inner{
    background:rgba(25,25,25,.9215686275);
    color:#fff;
    font-size:11px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    padding:4px 8px;
    box-shadow:0 0 2px #555;
    -moz-box-shadow:0 0 2px #555;
    -webkit-box-shadow:0 0 2px #555
}
.tooltip .tooltip-arrow{
    width:0;
    height:0;
    border-style:solid;
    border-color:rgba(25,25,25,.9215686275);
    border-width:6px;
    position:absolute;
    margin:5px;
    z-index:1
}
.tooltip[x-placement^=top]{
    margin-bottom:10px
}
.tooltip[x-placement^=top] .tooltip-arrow{
    border-width:5px 5px 0 5px;
    border-left-color:rgba(0,0,0,0) !important;
    border-right-color:rgba(0,0,0,0) !important;
    border-bottom-color:rgba(0,0,0,0) !important;
    bottom:-5px;
    left:calc(50% - 5px);
    margin-top:0;
    margin-bottom:0
}
.tooltip[x-placement^=bottom]{
    margin-top:10px
}
.tooltip[x-placement^=bottom] .tooltip-arrow{
    border-width:0 5px 5px 5px;
    border-left-color:rgba(0,0,0,0) !important;
    border-right-color:rgba(0,0,0,0) !important;
    border-top-color:rgba(0,0,0,0) !important;
    top:-5px;
    left:calc(50% - 5px);
    margin-top:0;
    margin-bottom:0
}
.tooltip[x-placement^=right]{
    margin-left:10px
}
.tooltip[x-placement^=right] .tooltip-arrow{
    border-width:5px 5px 5px 0;
    border-left-color:rgba(0,0,0,0) !important;
    border-top-color:rgba(0,0,0,0) !important;
    border-bottom-color:rgba(0,0,0,0) !important;
    left:-5px;
    top:calc(50% - 5px);
    margin-left:0;
    margin-right:0
}
.tooltip[x-placement^=left]{
    margin-right:10px
}
.tooltip[x-placement^=left] .tooltip-arrow{
    border-width:5px 0 5px 5px;
    border-top-color:rgba(0,0,0,0) !important;
    border-right-color:rgba(0,0,0,0) !important;
    border-bottom-color:rgba(0,0,0,0) !important;
    right:-5px;
    top:calc(50% - 5px);
    margin-left:0;
    margin-right:0
}
.tooltip[aria-hidden=true]{
    visibility:hidden;
    opacity:0;
    transition:opacity .2s,visibility .2s
}
.tooltip[aria-hidden=false]{
    visibility:visible;
    opacity:1;
    transition:opacity .2s
}
.vc-btn,.vc-text,.vc-title{
    color:var(--ds-page-text, var(--cw3-page-text, var(--ui-text, inherit)))
}
.vc-title{
    font-weight:650
}
.vc-btn{
    background:var(--ui-fill, rgba(var(--ds-info-rgb, 255, 255, 255), 0.58));
    border:1px solid var(--ui-line, rgba(0, 0, 0, 0.16));
    border-radius:10px;
    color:var(--ui-text, var(--ds-info-text, #000));
    cursor:pointer;
    font:inherit;
    line-height:1.2;
    padding:6px 10px;
    box-shadow:none;
    transition:background-color .15s ease,border-color .15s ease
}
.vc-btn:hover{
    background:var(--ui-fill-hover, rgba(var(--ds-info-rgb, 255, 255, 255), 0.78))
}
.vc-btn:not(.left){
    border-color:color-mix(in srgb, var(--ds-primary, #d0b690) 35%, transparent);
    background:var(--ds-primary, var(--ui-accent, #d0b690));
    color:var(--ds-on-accent, var(--ui-on-accent, #fff))
}
.vc-btn:not(.left):hover{
    background:color-mix(in srgb, var(--ds-primary, #d0b690) 86%, black);
    border-color:color-mix(in srgb, var(--ds-primary, #d0b690) 50%, transparent)
}
.vc-container{
    background:var(--cw3-page-bg, rgba(var(--ds-info-rgb, 255, 255, 255), 0.95));
    color:var(--ds-page-text, var(--cw3-page-text, var(--ui-text, #000)));
    border:1px solid var(--ui-line, rgba(0, 0, 0, 0.14));
    border-radius:var(--settings-radius, 14px);
    box-shadow:0 8px 28px rgba(0,0,0,.28)
}
.float-resize-handle{
    position:absolute;
    right:0;
    bottom:0;
    width:22px;
    height:22px;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    padding:2px;
    box-sizing:border-box;
    cursor:nwse-resize;
    touch-action:none;
    z-index:3;
    color:var(--ds-info-text, rgba(0, 0, 0, 0.6));
    opacity:.75;
    user-select:none
}
.float-resize-handle:hover,.float-resize-handle:focus{
    opacity:1
}
.float-resize-handle .float-resize-icon{
    display:block;
    flex-shrink:0;
    pointer-events:none
}
#timer{
    position:fixed;
    z-index:9999;
    background-color:RGBA(204, 204, 204, 0.5);
    min-width:50px;
    max-width:100px;
    height:20px;
    top:60px;
    right:10px;
    border-radius:10px;
    text-align:center;
    padding:1px
}
#tr_actions{
    background-color:#ffdead
}
#block_deys{
    display:flex;
    padding:0 5px
}
#block_deys #mit{
    margin-top:5px;
    padding:5px;
    border-radius:5px;
    border-width:1px;
	border: 1px solid #000000;
    width:250px
}
#block_deys.mobile{
    flex-direction:column-reverse
}
#block_deys.mobile #deys_mit{
    padding-bottom:15px
}
#block_deys.mobile #mit{
    width:100%
}
#block_deys:not(.mobile) #deys{
    width:73%
}
#block_deys:not(.mobile) #deys_mit{
    width:27%;
    margin-left:5px
}
#block_mess{
    padding:0 5px;
    margin:8px 0
}
#tr_chat{
    background-color:rgba(0,0,0,0)
}
#chat_form{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 10px;
    margin:15px
}
.chat-input-field{
    display:block;
    width:100%;
    max-width:520px;
    margin:0;
    flex:1 1 280px
}
#chat_form #msg_send{
    flex:0 0 auto;
    margin:0
}
#chat_form.mobile #msg_send{
    font-size:16px
}
#chat_form.mobile .chat-input-field .ui-input{
    font-size:16px
}
#chat_form.mobile .chat-volume{
    flex:1 1 100%;
    width:100%;
    max-width:220px
}
.chat-volume{
    flex:1 1 320px;
    width:100%;
    max-width:250px;
    margin:0
}
.chat-volume input[type=range]{
    height:1.5rem;
    min-height:24px
}
.chat-volume .ui-range__value{
    min-width:2.2em;
    font-size:1.05em
}
#chat_msg{
    width:1000px;
    overflow:auto;
    height:275px;
    color:var(--ds-info-text, inherit)
}
#chat_msg a:not(.ui-btn):link,#chat_msg a:not(.ui-btn):visited{
    color:var(--ds-info-link, #555555)
}
#chat_msg a:not(.ui-btn):hover,#chat_msg a:not(.ui-btn):focus{
    color:var(--ds-info-link-hover, #333333)
}
.ui-btn.mobile{
    height:1.5rem !important;
    min-height:24px !important
}
.chat_text{
    padding:0 10px;
    display:inline-block;
    word-wrap:break-word
}
.profile_actions_cell{
    /* padding:0 10px; */
    width:1%;
    white-space:nowrap;
    vertical-align:top;
    text-align:right
}
.profile_actions_cell a{
    display:inline-block;
    white-space:nowrap
}
.profile_actions_sep{
    display:inline-block;
    margin:0 .35em;
    white-space:nowrap
}
.myname{
    background:#fc3
}
.nick{
    border-bottom:1px dotted #000
}
.vlm0{
    font-size:10px
}
.vlm1{
    font-size:11px
}
.vlm2{
    font-size:11.5px
}
.vlm3{
    font-size:12px
}
.vlm4{
    font-size:12.5px
}
.vlm5{
    font-size:13px
}
.vlm6{
    font-size:15px
}
.vlm7{
    font-size:17px
}
.vlm8{
    font-size:19px
}
.vlm9{
    font-size:21px
}
.vlm10{
    font-size:23px
}
.pair-delete,.adopt,.love{
    width:16px;
    height:16px
}
#tr_field,#act,#cages{
    padding:0;
    margin:0;
    border-spacing:0
}
#cages_overflow,#cages_div{
    width:1000px;
    min-height:1000px
}
#cages_div{
    background-repeat:no-repeat;
    position:relative;
    z-index:1
}
#locElementsDiv{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    pointer-events:none;
    user-select:none
}
.locElement{
    position:absolute
}
#cages{
    width:1000px;
    min-height:1000px;
    background-repeat:no-repeat
}
.cage,.cage_items{
    width:100px;
    height:150px;
    border:none;
    margin:0;
    padding:0
}
.cage{
    padding-bottom:16px
}
.cage.tree-safe{
    background-color:rgba(174,197,101,.2588235294)
}
.cage.tree-unsafe{
    background-color:rgba(95,38,23,.2588235294)
}
#cages table td{
    width:160px;
    height:32px;
    text-align:left
}
#cages table td div,#cages div[id^=thd]{
    background-color:rgba(0,0,0,0)
}
#cages table td img{
    width:32px;
    height:32px;
    text-align:left
}
.move_parent{
    display:block;
    position:relative;
    padding:0;
    margin:0
}
.move_img{
    display:block;
    width:100px;
    height:150px;
    border:0;
    margin:0;
    padding:0;
    user-select:none
}
.move_parent .move_name{
    display:block;
    position:absolute;
    font-size:11px;
    bottom:43px;
    left:4px;
    width:92px;
    text-align:center;
    background-color:RGBA(255, 255, 255, 0.5);
    border-radius:10px;
    padding:0 3px 1px 3px;
    margin:0;
    word-break:break-word;
    box-sizing:border-box;
    color:#000
}
.move_parent .owned{
    border-color:#c60
}
.move_parent .not_owned{
    border-color:#7e97ec
}
.move_parent .owned,.move_parent .not_owned{
    background-color:rgba(255,255,255,.7882352941);
    margin:-2px;
    border-width:2px;
    border-style:solid
}
.cat{
    position:relative
}
.dynamic-cell{
    position:relative;
    cursor:pointer
}
.dynamic-cell>.move_parent{
    position:absolute;
    top:0;
    left:0
}
.dynamic-cell>.catWithArrow{
    position:relative;
    z-index:1
}
.dynamic-cell .move_name{
    bottom:0;
    z-index:2
}
.huntEl{
    position:absolute
}
.cat_tooltip{
    display:none
}
.cat:hover .cat_tooltip{
    display:block;
    position:absolute;
    z-index:999;
    padding:10px;
    width:min-content;
    min-width:160px;
    box-sizing:content-box;
    background:RGBA(255, 255, 255, 0.9);
    border:2px solid gray;
    border-radius:12px;
    font-weight:bold;
    text-align:center
}
.cat:hover,.cat_tooltip a{
    color:#930
}
.mouth{
    width:100%;
    padding:0;
    margin:0
}
.mouth ol{
    list-style-type:none
}
.mouth li{
    display:inline-block
}
.mouth img{
    width:32px
}
.online{
    color:#000
}
.smell_move{
    border:2px solid #fff;
    width:96px;
    height:96px
}
.role-highlight{
    position:relative
}
.role-label{
    position:absolute;
    top:-14px;
    left:6px;
    background:rgba(20,20,20,.8);
    color:#fff;
    padding:2px 7px;
    font-size:11px;
    font-weight:700;
    border-radius:10px;
    letter-spacing:.5px;
    z-index:3;
    background:var(--role-color);
    color:#fff;
    box-shadow:none
}
.role-worker{
    --role-color: #2f9e51;
    --role-rgb: 47, 158, 81
}
.role-weasel{
    --role-color: #c28e24;
    --role-rgb: 194, 142, 36
}
.role-killer{
    --role-color: #cc4545;
    --role-rgb: 204, 69, 69
}
.arrow-paws{
    background:url("/cw3/symbole/arrow_paws.png") 0 0 no-repeat
}
.arrow-claws{
    background:url("/cw3/symbole/arrow_claws.png") 0 0 no-repeat
}
.arrow-teeth{
    background:url("/cw3/symbole/arrow_teeth.png") 0 0 no-repeat
}
.arrow{
    height:8px;
    position:absolute;
    margin:0;
    padding:3px 0 0 11px;
    z-index:2;
    box-sizing:content-box
}
.arrow table,.arrow td{
    height:5px !important;
    padding:0;
    margin:0
}
.arrow_red{
    background:var(--ui-danger, #cd4141)
}
.arrow_green{
    background:var(--ui-success, #41cd70)
}
#fightPanel{
    position:fixed;
    z-index:9999;
    background-color:rgba(204,204,204,.9);
    display:none;
    flex-direction:column;
    min-width:200px;
    min-height:100px;
    max-width:600px;
    max-height:600px;
    top:20px;
    right:10px;
    border-radius:6px;
    text-align:left;
    padding:3px;
    box-sizing:border-box;
    touch-action:none;
    transition:opacity .2s,background-color .2s;
    overflow:hidden
}
#fightPanel button.ui-btn{
    margin:0
}
#fightPanel.translucent{
    opacity:.35;
    background-color:rgba(204,204,204,.4)
}
#app.compact #fightPanel{
    background-color:rgba(255, 255, 255, var(--compact-float-opacity, 0.55));
    color:var(--ds-info-text, inherit);
    border:1px solid rgba(255,255,255,.35)
}
#app.compact #fightPanel.translucent{
    opacity:.35;
    background-color:rgba(255,255,255,.35)
}
#app.compact #fightPanel #fight_panel_handle{
    border-radius:6px 6px 0 0
}
#fight_panel_handle{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    padding:4px 6px;
    cursor:move;
    user-select:none;
    font-size:12px;
    touch-action:none;
    flex-shrink:0
}
#fight_panel_handle .fight_panel_actions{
    display:inline-flex;
    align-items:center;
    gap:4px;
    flex-shrink:0
}
#fight_panel_handle .opacity-btn{
    min-width:28px;
    padding:2px 6px;
    line-height:1;
    touch-action:manipulation;
    cursor:pointer
}
.fight-panel-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:2px;
    padding:2px 4px 4px;
    box-sizing:border-box;
    flex-shrink:0
}
.fight-panel-controls .ui-btn{
    min-height:24px;
    min-width:26px;
    padding:1px 4px;
    border-radius:6px
}
.fight-block-icon{
    display:block;
    width:16px;
    height:16px;
    margin:0 2px 0 0;
    flex-shrink:0;
    pointer-events:none
}
.hotkey{
    outline:none
}
#fightLog{
    overflow-y:auto;
    margin-top:4px;
    margin-left:4px;
    margin-right:4px;
    margin-bottom:4px;
    flex:1 1 auto;
    min-height:70px
}
#fightLog.mobile{
    min-height:50px
}
.log_claws{
    background:rgba(212,141,118,.7)
}
.log_teeth{
    background:rgba(255,255,255,.7)
}
#itemList{
    display:grid;
    grid-template-columns:repeat(auto-fill, 76px);
    margin-left:2px
}
#itemList,#itemEmpty{
    padding:0 5px
}
#mix{
    padding:0 5px 8px 5px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center
}
#mix .ui-btn{
    margin:0
}
.itemInMouth,.catrot{
    cursor:pointer;
    margin:0 3px 1px 0
}
.itemInMouth img,.catrot img{
    padding:1px;
    display:block
}
.active_thing{
    box-shadow:0 0 0 1px var(--ds-primary, #D0B690) inset;
    border-radius:4px
}
.itemInMouth{
    position:relative
}
.item-select{
    position:absolute;
    top:3px;
    right:3px;
    width:28px;
    height:28px;
    box-sizing:border-box;
    padding:0;
    border:1px solid var(--ui-line, rgba(0, 0, 0, 0.16));
    border-radius:3px;
    background:var(--ui-input-bg, var(--ds-input-bg, #000));
    color:var(--ui-input-text, var(--ds-input-text, #fff));
    cursor:pointer;
    touch-action:manipulation;
    font:bold 20px/26px sans-serif;
    text-align:center
}
.item-select[aria-checked=true]{
    background:var(--ui-accent, var(--ds-primary, #d0b690));
    border-color:color-mix(in srgb, var(--ui-accent, var(--ds-primary, #d0b690)) 35%, transparent);
    color:var(--ui-on-accent, #fff)
}
.item-select[aria-checked=true]:before{
    content:"\2713"
}
#app[data-mobile="0"] .item-select{
    width:20px;
    height:20px;
    font-size:16px;
    line-height:18px
}
#item_multi{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    padding:0 5px 8px
}
#item_multi .ui-btn{
    margin:0
}
.active_thing.is_locked:before{
    content:"";
    background-image:url("/cw3/symbole/item_lock.svg");
    background-size:15px 16px;
    background-repeat:no-repeat;
    top:3px;
    left:3px;
    width:15px;
    height:16px;
    position:absolute
}
#thdey .dig-layer,#ctdey .dig-layer{
    width:100%;
    max-width:320px;
    margin:8px 0
}
#thdey .dig-layer input[type=range],#ctdey .dig-layer input[type=range]{
    height:1.5rem;
    min-height:24px
}
#thdey .dig-layer .ui-range__value,#ctdey .dig-layer .ui-range__value{
    min-width:2.2em;
    font-size:1.05em
}
#tr_mouth{
    background-color:#ffdead
}
#smell .symbole{
    background-position-y:0
}
#thirst .symbole{
    background-position-y:-17px
}
#dream .symbole{
    background-position-y:-34px
}
#need .symbole{
    background-position-y:-51px
}
#hunger .symbole{
    background-position-y:-68px
}
#heal .symbole{
    background-position-y:-85px
}
#health .symbole{
    background-position-y:-102px
}
#dig .symbole{
    background-position-y:-119px
}
#clean .symbole{
    background-position-y:-136px
}
#swim .symbole{
    background-position-y:-153px
}
#might .symbole{
    background-position-y:-170px
}
#power .symbole{
    background-position-y:-187px
}
#pet_faith .symbole{
    background-position-y:-204px
}
#tree .symbole{
    background-position-y:-221px
}
#observ .symbole{
    background-position-y:-238px
}
#weight .symbole{
    background-position-y:-255px
}
#lifes{
    margin-top:5px;
    max-width:170px;
    width:fit-content
}


.parameter,.skill{
    display:flex;
    align-items:center;
    text-align:center;
    margin-bottom:2px;
    justify-content:left;
    flex-direction:row;
    height:17px;
}

.skill {
    display: flex;
    align-items: center;
    height: 17px;
    margin-bottom: 2px;
    gap: 0;
}

.skill > .level:first-child {
    flex: 0 0 auto;
}

.skill .bar {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.skill > .level:last-child {
    flex: 0 0 auto;
    margin-left: 0;
    white-space: nowrap;
}



.parameter-header {
    margin-top: .5em;
    margin-bottom: .3em;
}

.level {
    font-weight: bold;
    min-width: 15px;       /* ★ не width, а min-width */
    white-space: nowrap;   /* ★ цифра не переносится */
}

.bar {
    max-width: var(--bar-width, 170px);
    width: 100%;
    min-width: 0;          /* ★ важно для flex */
    box-shadow: 0 0 0 1px #000;
    height: 15px;
    font-size: 11px;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    margin: 0;             /* ★ убираем margin, если родитель flex+gap */
    transform: translateZ(0);
}

.bar-fill {
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s ease-in-out;
}

.bar-data {
    position: absolute;
    inset: 0;
    color: var(--ui-on-accent, #ffffff);
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;   /* ★ центрируем текст в полоске */
}

.symbole {
    width: 19px;
    height: 17px;
    background-image: url("/cw3/symbole/icons.png?v=461234272");
    background-repeat: no-repeat;
    background-position-x: 0;
    padding: 0;
    margin: 0;
    flex-shrink: 0;        /* ★ иконка не сжимается */
}

/* строки — flex с gap */
.parameter,
.skill {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 17px;
    margin-bottom: 2px;
}

/* правая цифра у навыка — 1px от полоски, справа */
.skill > .level:last-child {
    margin-left: 1px;
    text-align: right;
}
#weight .encumbered{
    color:var(--ui-danger, brown)
}
#weight{
    font-weight:bold;
    height:15px
}
#weightExtra{
    font-size:smaller;
    opacity:.72;
    font-weight:initial
}


.parameter .bar-fill{
    background:var(--param-fill, green);
}
.parameter .bar{
    background:var(--param-back, red);
}
.skill .bar-fill{
    background: var(--skill-fill, #5FBF55);
}
.skill .bar{
    background: var(--skill-back, #DDDBE0);
}



#sky{
    height:150px;
    width:100%;
    max-width:1000px;
    background-repeat:no-repeat
}
#tos{
    width:150px;
    height:20px
}
#hour{
    margin:0 5px
}
#buffList{
    display:flex;
    flex-wrap:wrap;
    text-align:center;
    font-size:small
}
#buffList .buff{
    padding:0 2px 1px
}
#buffList .buff.selected .buff_img{
    box-shadow:0 0 0 1.5px var(--ds-primary, #D0B690)
}
#buffList .buff.muted{
    opacity:.5
}
#buffList .buff .buff_img{
    border-color:#b7b7b7;
    border-width:2px;
    border-style:solid;
    border-radius:3px;
    overflow:hidden;
    box-sizing:content-box
}
#buffList .buff .buff_img,#buffList .buff .buff_img div{
    height:50px;
    width:50px
}
#buffList .buff .buff_img div{
    position:absolute
}
#buffList .buff .buff_img .buff_icon{
    background-position:top 2px right 2px;
    background-repeat:no-repeat
}
#buffList .buff .buff_timer{
    height:1rem;
    font-size:.9em
}
#buffList .buff .buff_positive.buff_img{
    border-color:var(--ds-success, #1f7a4c)
}
#buffList .buff .buff_positive .buff_value{
    color:var(--ds-success, #1f7a4c)
}
#buffList .buff .buff_negative.buff_img{
    border-color:var(--ui-danger, #b42318)
}
#buffList .buff .buff_negative .buff_value{
    color:var(--ui-danger, #b42318)
}
#buffdey{
    margin-top:10px
}
#app.compact{
    width:fit-content;
    max-width:calc(100vw - 16px);
    margin:0 auto;
    box-sizing:border-box
}
#app.compact.compact-hide-sky #tr_sky{
    display:none !important
}
#app.compact .game-topbar{
    width:100%;
    max-width:100%;
    box-sizing:border-box
}
#app.compact .game-location{
    display:block;
    margin:6px 0 0;
    padding:2px 4px;
    max-width:100%;
    text-align:left;
    white-space:normal;
    overflow:visible;
    text-overflow:unset
}
#app.compact #compact_layout{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:8px;
    width:max-content;
    max-width:100%;
    margin:7px auto 0;
    box-sizing:border-box
}
#app.compact .compact-col{
    border-collapse:separate;
    border-spacing:0;
    border:none;
    margin:0;
    padding:0;
    background:rgba(0,0,0,0)
}
#app.compact .compact-field-scale-wrap{
    flex:0 0 auto;
    position:relative;
    z-index:2;
    box-sizing:border-box;
    width:calc(1010px*var(--compact-field-scale, 1));
    max-width:100%;
    overflow:visible
}
#app.compact .compact-field-scale-wrap.is-scaled{
    overflow:hidden
}
#app.compact .compact-field-scale-wrap.is-scaled:has(.cat:hover){
    overflow:visible;
    z-index:5
}
#app.compact #compact_left{
    flex:none;
    width:1000px;
    min-width:1000px;
    max-width:1000px;
    background:#000;
    border:2px solid var(--ds-primary, #D0B690);
    position:relative;
    z-index:2;
    transform-origin:top left
}
#app.compact #parameters_skills_block{
    border-radius:0 !important
}
#app.compact #compact_actions,#app.compact #tr_actions>td,#app.compact #tr_tos>td{
    background-color:var(--cw3-page-bg, #FFDEAD)
}
#app.compact .compact-side-wrap{
    flex:1 1 240px;
    min-width:0;
    width:auto;
    position:sticky;
    top:8px;
    align-self:flex-start;
    z-index:1;
    max-width:100%;
    box-sizing:border-box
}
#app.compact.compact-cols-2 .compact-side-wrap{
    flex:1 1 280px;
    min-width:0;
    max-width:min(560px,100vw - 1000px*var(--compact-field-scale, 1) - 32px)
}
#app.compact.compact-cols-3 .compact-side-wrap{
    min-width:0;
    max-width:min(360px,(100vw - 1000px*var(--compact-field-scale, 1) - 40px)/2)
}
#app.compact .compact-side{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    background-color:var(--cw3-page-bg, #FFDEAD);
    color:inherit;
    border:2px solid var(--ds-primary, #D0B690);
    overflow-x:hidden
}
#app.compact #compact_info.compact-side{
    background-color:rgba(var(--ds-info-rgb, 255, 255, 255), 0.55)
}
#app.compact .cat:hover .cat_tooltip{
    z-index:1001
}
#app.compact #tr_sky,#app.compact #tr_tos,#app.compact #tr_field,#app.compact #tr_actions,#app.compact #tr_mouth,#app.compact #tr_info{
    display:table-row
}
#app.compact #tr_sky>td,#app.compact #tr_tos>td,#app.compact #tr_field>td,#app.compact #tr_actions>td,#app.compact #tr_mouth>td,#app.compact #tr_info>td{
    display:table-cell;
    padding:0;
    margin:0
}
#app.compact #itemList{
    max-height:146px;
    overflow-y:auto
}
#app.compact #tr_field,#app.compact #tr_field>td,#app.compact #act{
    width:1000px
}
#app.compact #cages_overflow{
    background-color:#000
}
#app.compact #tr_tos,#app.compact #tr_actions,#app.compact #tr_mouth,#app.compact #tr_info{
    width:100%
}
#app.compact #tr_tos>td,#app.compact #tr_actions>td,#app.compact #tr_mouth>td,#app.compact #tr_info>td{
    width:100%;
    max-width:100%;
    box-sizing:border-box
}
#app.compact #block_deys{
    flex-direction:column
}
#app.compact #block_deys #deys,#app.compact #block_deys #deys_mit{
    width:100%;
    margin-left:0
}
#app.compact #block_deys #deys_mit{
    margin-top:8px
}
#app.compact #block_deys #deys_mit>div{
    margin-bottom:4px
}
#app.compact #block_deys #mit{
    width:100%;
    max-width:100%;
    box-sizing:border-box
}
#app.compact #tr_info{
    min-width:0;
    max-width:100%
}
#app.compact #tr_info #info_main{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    table-layout:fixed
}
#app.compact #tr_info #info_main>tbody,#app.compact #tr_info #info_main>tbody>tr,#app.compact #tr_info #info_main>tr{
    display:block;
    width:100%
}
#app.compact #tr_info .compact-info-panel{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    max-height:500px;
    overflow-x:hidden;
    overflow-y:auto;
    padding:0;
    box-sizing:border-box
}
#app.compact #tr_info .compact-info-panel>h2{
    display:none
}
#app.compact #tr_info .infos{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box
}
#app.compact #tr_info #history.compact-info-panel,#app.compact #tr_info #history_block,#app.compact #tr_info #history_block #ist{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    overflow-wrap:anywhere;
    word-break:break-word
}
#app.compact #tr_info #history_block{
    overflow-x:hidden
}
#app.compact #tr_info #history_block img,#app.compact #tr_info #history_block table{
    max-width:100%
}
#app.compact #tr_info .parameter,#app.compact #tr_info .skill{
    max-width:100%
}

#tr_info {
	background: var(--ds-main-backgound);
}
#app.compact #tr_info .parameter .bar,#app.compact #tr_info .skill .bar{
    width:auto;
    min-width:120px;
    max-width:280px;
    flex:1 1 auto
}
#app.compact .compact-info-tabs{
    display:flex;
    flex-wrap:nowrap;
    gap:0;
    margin:0 0 4px;
    padding:0;
    border-bottom:1px solid var(--ui-line, rgba(0, 0, 0, 0.14));
    background:rgba(0,0,0,0)
}
#app.compact .compact-info-tab{
    flex:1 1 0;
    min-width:0;
    padding:9px 12px;
    margin-bottom:-1px;
    cursor:pointer;
    border:none;
    border-bottom:2px solid rgba(0,0,0,0);
    border-radius:4px 4px 0 0;
    background:none;
    font:inherit;
    font-size:.93em;
    line-height:1.2;
    text-align:center;
    color:var(--ds-page-text, inherit);
    user-select:none;
    box-sizing:border-box;
    transition:color .15s,border-color .15s
}
#app.compact .compact-info-tab span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
#app.compact .compact-info-tab:hover{
    color:var(--ds-page-link-hover, var(--ds-page-link, #0000cd));
    background:rgba(0,0,0,0)
}
#app.compact .compact-info-tab.active{
    color:var(--ds-page-link, #0000cd);
    border-bottom-color:var(--ds-page-link, #0000cd);
    font-weight:600
}
#app.compact #tr_chat{
    display:none !important
}
#app.compact #black_points{
    display:block;
    margin-top:8px;
    font-size:12px;
    line-height:1.3;
    word-wrap:break-word;
    padding:4px
}
#app.compact .buff_img div{
    position:relative
}
#chat_float{
    position:fixed;
    bottom:10px;
    left:10px;
    width:450px;
    min-width:260px;
    min-height:160px;
    max-width:1000px;
    max-height:min(60vh,1000px);
    display:flex;
    flex-direction:column;
    background-color:rgba(var(--ds-info-rgb, 255, 255, 255), var(--compact-float-opacity, 0.55));
    color:var(--ds-info-text, var(--ui-text, #000000));
    border:1px solid rgba(var(--ds-info-rgb, 255, 255, 255), 0.35);
    border-radius:6px;
    z-index:10000;
    transition:opacity .2s,background-color .2s;
    box-sizing:border-box;
    overflow:hidden
}
#chat_float a:not(.ui-btn):link,#chat_float a:not(.ui-btn):visited{
    color:var(--ds-info-link, #555555)
}
#chat_float a:not(.ui-btn):hover,#chat_float a:not(.ui-btn):focus{
    color:var(--ds-info-link-hover, #333333)
}
#chat_float.translucent{
    opacity:.35;
    background-color:rgba(var(--ds-info-rgb, 255, 255, 255), 0.35);
    pointer-events:none
}
#chat_float.translucent #chat_float_handle,#chat_float.translucent #chat_float_resize{
    pointer-events:auto
}
#chat_float.collapsed{
    max-height:none;
    height:auto !important;
    width:auto !important;
    min-width:0
}
#chat_float.collapsed #chat_msg,#chat_float.collapsed #chat_form{
    display:none !important
}
#chat_float.collapsed #chat_float_handle{
    border-radius:6px
}
#chat_float.collapsed #chat_float_resize{
    display:none
}
#chat_float #chat_float_handle{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    padding:4px 8px;
    cursor:move;
    background:rgba(var(--ds-info-rgb, 255, 255, 255), 0.2);
    border-radius:6px 6px 0 0;
    user-select:none;
    font-size:12px;
    flex-shrink:0;
    touch-action:none
}
#chat_float #chat_float_handle .chat_float_actions{
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex-shrink:0
}
#chat_float #chat_float_handle .opacity-btn,#chat_float #chat_float_handle .collapse-btn{
    cursor:pointer;
    opacity:.65;
    font-size:14px;
    line-height:1;
    touch-action:manipulation
}
#chat_float #chat_float_handle .opacity-btn:hover,#chat_float #chat_float_handle .collapse-btn:hover{
    opacity:1
}
#chat_float #chat_float_handle .collapse-btn{
    font-weight:bold;
    min-width:1em;
    text-align:center
}
#chat_float #chat_msg{
    flex:1;
    overflow-y:auto;
    padding:4px 8px;
    width:auto !important;
    min-height:80px;
    color:var(--ds-info-text, inherit)
}
#chat_float #chat_msg .chat_text{
    width:auto !important;
    max-width:100%;
    box-sizing:border-box
}
#chat_float #chat_msg hr{
    border-color:rgba(var(--ds-info-rgb, 0, 0, 0), 0.2)
}
#chat_float #chat_msg .profile_actions_cell{
    text-align:end;
    min-width:4.5em;
    width:1%;
    white-space:nowrap
}
#chat_float #chat_form{
    padding:4px 8px 6px;
    flex-shrink:0;
    margin:0
}
#chat_float #chat_form .chat-input-field{
    max-width:calc(100% - 50px)
}
#chat_float #chat_form b{
    font-size:11px;
    font-weight:normal;
    opacity:.75
}

				`;
}
		document.head.appendChild(style);
	}

	function remove_msgTimeout() {
		app.chat.send = function() {
			const text = document.getElementById('text').value;
			if (text === '') return;

			if (app.chat.dialogWith) {
				socketSend('dialog say', { id: app.chat.dialogWith, phrase: text });
			} else {
				socketSend('msg', { volume: app.chat.volume, text });
				document.getElementById('text').value = '';
			}
		};
	}

	function interceptWS() {
		if (!unsafeWindow.wpRequire) {
			setTimeout(interceptWS, 100);
			return;
		}

		unsafeWindow.ws = unsafeWindow.wpRequire(351)?.default?.json;

		unsafeWindow.ws.io.on('packet', (p) => {
			if (p.type === 2) {
				onSocketOn(p.data[0], p.data[1]);
			}
		});

		const transport = unsafeWindow.ws.io.engine;
		const origWrite = transport.write.bind(transport);

		transport.write = function (data, options, callback) {
			//console.log(data);
			if (typeof data === 'string' && data[0] === '2') {
				try {
					const arr = JSON.parse(data.slice(1));
					onSocketEmit(arr[0], arr[1]);
				} catch {}
			} else {
			}
			return origWrite(data, options, callback);
		};
	}

	function onSocketOn (eventName, data) {
		//console.log(`%c[${eventName}]`, "color: cyan;", data ?? '');
	}

	function onSocketEmit (eventName, data) {
		//console.log(`%c[${eventName}]`, "color: pink;", data ?? '');
	}

	function socketSend (eventName, data) {
		if (data !== undefined) {
			unsafeWindow.ws.emit(eventName, data);
		} else {
			unsafeWindow.ws.emit(eventName);
		}
	}

	interceptWS();
	replace_css();

	waitForApp(() => {modify_notRead("notReadChat", "newchat");
					  modify_notRead("notReadMess", "newls");
					  remove_msgTimeout();});


})();