/* lite-monitoring.ru */
:root {
	--v-bg:        #eef1f7;
	--v-card:      #ffffff;
	--v-ink:       #16202e;
	--v-muted:     #6f7c8d;
	--v-line:      #e6eaf1;
	--v-line-soft: #f0f3f8;

	--v-accent:      #17a2c9;
	--v-accent-dark: #128aad;
	--v-accent-soft: #e8f6fb;

	--v-dark:    #10203a;
	--v-dark-2:  #16294a;

	--v-green: #21b26b;
	--v-red:   #e2574c;

	--v-radius:   16px;
	--v-radius-s: 10px;
	--v-shadow:   0 1px 2px rgba(16, 32, 58, .04), 0 6px 24px rgba(16, 32, 58, .06);
}

body {
	background: var(--v-bg) !important;
	color: var(--v-ink);
	font-size: 14px;
	line-height: 1.55;
}

body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 420px;
	background:
		radial-gradient(1100px 320px at 18% -40px, rgba(23, 162, 201, .13), transparent 70%),
		radial-gradient(900px 300px at 88% -60px, rgba(52, 96, 190, .10), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.tm-page-bg { position: relative; z-index: 1; background: none; }

.uk-container { max-width: 1220px; }

a { color: var(--v-accent-dark); }
a:hover { color: var(--v-accent); text-decoration: none; }

.tm-headerbar {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 14px 0 0 !important;
	padding: 0 20px;
	height: 68px;
	background: linear-gradient(135deg, var(--v-dark) 0%, var(--v-dark-2) 100%);
	border-radius: var(--v-radius) var(--v-radius) 0 0;
}

.tm-headerbar .tm-logo {
	float: none !important;
	order: 1;
	display: flex;
	align-items: center;
	line-height: 0;
}

.tm-headerbar .tm-logo img { display: none; }

.lm-logo {
	display: block;
	height: 42px;
	width: auto;
	font-family: 'Rubik', -apple-system, 'Segoe UI', Arial, sans-serif;
}

.tm-headerbar {
	flex-wrap: nowrap;
	overflow: hidden;
}

.tm-headerbar .tm-logo { flex: 0 0 auto; }

.tm-headerbar .tm-search {
	float: none !important;
	order: 2;
	flex: 0 1 270px;
	min-width: 44px;
	margin-left: auto;
}

.tm-headerbar .tm-toolbar {
	order: 3;
	flex: 0 0 auto;
	min-width: 0;
	margin: 0 0 0 14px !important;
}

.tm-headerbar .uk-search { display: block; width: 100%; margin: 0; }

.tm-headerbar .uk-search-field {
	width: 100%;
	height: 38px;
	padding: 0 14px 0 34px;
	box-sizing: border-box;
	color: #eaf2fb;
	font-size: 13.5px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 10px;
	transition: background-color .15s ease, border-color .15s ease;
}

.tm-headerbar .uk-search:before {
	width: 34px;
	line-height: 38px;
	font-size: 13px;
	color: #8fa5c0;
}

.tm-headerbar .uk-search-field::placeholder { color: #8ba1bd; }

.tm-headerbar .uk-search-field:focus {
	background-color: rgba(255, 255, 255, .14);
	border-color: rgba(64, 196, 232, .55);
	outline: none;
}

.tm-top-block {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 20px !important;
	padding: 0 12px 0 8px;
	background-color: #142845;
	border-radius: 0 0 var(--v-radius) var(--v-radius);
	border-top: 1px solid rgba(255, 255, 255, .07);
}

.tm-top-block .tm-navbar,
.tm-top-block .uk-navbar {
	flex: 1 1 auto;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	min-height: 0;
}

.tm-navbar .uk-navbar-nav > li > a {
	height: 50px;
	line-height: 50px;
	padding: 0 15px;
	color: #b8c8dd !important;
	font-size: 13.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .3px;
	background: none !important;
	border: 0;
	position: relative;
}

.tm-navbar .uk-navbar-nav > li > a:hover { color: #ffffff !important; }

.tm-navbar .uk-navbar-nav > li.uk-active > a { color: #ffffff !important; font-weight: 600; }

.tm-toolbar {
	flex: 0 0 auto;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
}

.tm-toolbar .uk-float-left { display: none; }
.tm-toolbar .uk-float-right { float: none !important; }

.tm-headerbar .uk-panel,
.tm-toolbar .uk-panel {
	max-width: none;
	margin: 0;
	float: none;
}

.tm-toolbar .uk-subnav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.tm-toolbar .uk-subnav > li {
	display: flex;
	align-items: center;
	padding: 0 !important;
	margin: 0;
	color: #9db2cc;
	font-size: 13px;
	white-space: nowrap;
}

.tm-toolbar .uk-subnav > li > strong {
	margin-left: 5px;
	color: #fff;
	font-weight: 600;
}

@media (max-width: 1150px) {
	.tm-toolbar .uk-subnav > li:not(:has(a)) { display: none; }
}
.tm-toolbar .uk-subnav > li::before { display: none !important; }

.tm-toolbar .uk-subnav > li > a {
	display: block;
	height: 34px;
	line-height: 34px;
	padding: 0 16px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.tm-toolbar .uk-subnav > li > a[href="/account/auth/"],
.tm-toolbar .uk-subnav > li > a[href="/account/logout/"] {
	color: #cddaea !important;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .18);
}

.tm-toolbar .uk-subnav > li > a[href="/account/auth/"]:hover,
.tm-toolbar .uk-subnav > li > a[href="/account/logout/"]:hover {
	background: rgba(255, 255, 255, .10);
	color: #fff !important;
}

.tm-toolbar .uk-subnav > li > a[href="/account/reg/"],
.tm-toolbar .uk-subnav > li > a[href="/cabinet/"] {
	color: #fff !important;
	background: var(--v-accent);
	border: 1px solid var(--v-accent);
}

.tm-toolbar .uk-subnav > li > a[href="/account/reg/"]:hover,
.tm-toolbar .uk-subnav > li > a[href="/cabinet/"]:hover {
	background: var(--v-accent-dark);
	border-color: var(--v-accent-dark);
}

.tm-top-block .uk-breadcrumb {
	flex: 1 1 100%;
	margin: 0;
	padding: 8px 8px 10px;
	font-size: 12.5px;
	color: #8ea6c4;
	border-top: 1px solid rgba(255, 255, 255, .07);
}

.tm-top-block .uk-breadcrumb a { color: #b8c8dd; }

.tm-content > .uk-article,
.tm-sidebar-a .uk-panel-box {
	background: var(--v-card);
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius);
	box-shadow: var(--v-shadow);
}

.tm-content > .uk-article {
	padding: 22px 24px 24px;

	overflow: visible;
}

.uk-article-title,
.page-header h1 {
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--v-ink);
}

.page-header { border: 0; margin: 0 0 16px; padding: 0; }

h2, .uk-h2 { font-size: 20px; font-weight: 600; }
h3, .uk-h3 { font-size: 17px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }

.svc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 4px 0 26px;
}

.svc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 24px 22px 22px;
	background: #fff;
	border: 1px solid var(--v-line);
	border-radius: 16px;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease;

	opacity: 0;
	animation: svc-in .5s ease forwards;
}

.svc-card:nth-child(1) { animation-delay: .05s; }
.svc-card:nth-child(2) { animation-delay: .15s; }
.svc-card:nth-child(3) { animation-delay: .25s; }

@keyframes svc-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.svc-card[href*="services"] {
	background: #f4fbfe;
	
	border: 2px solid var(--v-accent);
	padding: 23px 21px 21px;
}

.svc-card[href*="services"]::after {
	content: 'Популярное';
	position: absolute;
	top: 18px;
	right: 18px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--v-accent);
	color: #fff;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .2px;
}

.svc-card:hover {
	border-color: #c9dcea;
	box-shadow: 0 8px 24px rgba(16, 32, 58, .12);
	text-decoration: none;
}

.svc-card[href*="services"]:hover {
	border-color: var(--v-accent-dark);
	box-shadow: 0 10px 30px rgba(23, 162, 201, .22);
}

.svc-name {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -.2px;
	line-height: 1.2;
	color: var(--v-ink);
	text-transform: none;
}

.svc-desc {
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--v-muted);
	flex: 1 1 auto;
}

.svc-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 18px;
	font-size: 34px;
	font-weight: 600;
	letter-spacing: -1px;
	color: var(--v-ink);
}

.svc-cur {
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--v-muted);
}

.svc-btn {
	margin-top: 18px;
	padding: 13px 0;
	border-radius: 12px;
	background: linear-gradient(180deg, #22384f 0%, var(--v-dark) 100%);
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 6px 16px rgba(16, 32, 58, .22);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	transition: filter .15s ease, box-shadow .15s ease;
}

.svc-card[href*="services"] .svc-btn {
	background: linear-gradient(180deg, #2ab7dd 0%, var(--v-accent) 100%);
	border-color: rgba(255, 255, 255, .18);
	box-shadow: 0 6px 18px rgba(23, 162, 201, .38);
}

.svc-card:hover .svc-btn { filter: brightness(1.08); }

.uk-table {
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 0;
}

.uk-table thead th {
	padding: 0 12px 10px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--v-line) !important;
	color: var(--v-muted);
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	white-space: nowrap;
}

.uk-table tbody td {
	padding: 11px 12px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--v-line-soft) !important;
	vertical-align: middle;
	font-size: 13.5px;
}

.uk-table tbody tr:last-child td { border-bottom: 0 !important; }

.uk-table-hover tbody tr:hover td,
.uk-table-striped tbody tr:nth-of-type(odd) td { background: transparent; }

.uk-table-hover tbody tr:hover td { background: #f7fafd; }

#all_servers tbody td:nth-child(2),
#my_servers tbody td:nth-child(2) {
	font-weight: 500;
}

#all_servers tbody td:nth-child(2) a,
#my_servers tbody td:nth-child(2) a {
	color: var(--v-ink);
}

#all_servers tbody td:nth-child(2) a:hover,
#my_servers tbody td:nth-child(2) a:hover {
	color: var(--v-accent-dark);
}

#all_servers tbody td:nth-child(3),
#my_servers tbody td:nth-child(3) {
	font-family: inherit;
	font-size: 13.5px;
	color: inherit;
}

.servers.online,
.servers.offline {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	vertical-align: middle;
}

.servers.online {
	background: var(--v-green);
	box-shadow: 0 0 0 3px rgba(33, 178, 107, .16);
}

.servers.offline {
	background: var(--v-red);
	box-shadow: 0 0 0 3px rgba(226, 87, 76, .16);
}

#all_servers tbody td:nth-child(5),
#my_servers tbody td:nth-child(4) {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: #33404f;
}

#all_servers tbody td:nth-child(4) a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--v-accent-soft);
	color: var(--v-accent-dark);
	transition: background .15s ease, color .15s ease;
}

#all_servers tbody td:nth-child(4) a:hover {
	background: var(--v-accent);
	color: #fff;
}

#all_servers tbody td:nth-child(7) {
	white-space: nowrap;
}

#all_servers tbody td:nth-child(7) i {
	padding: 5px;
	border-radius: 7px;
	color: #94a0b0;
	font-size: 13px;
	transition: background .15s ease, color .15s ease;
}

#all_servers tbody td:nth-child(7) i.uk-icon-plus:hover { background: #e8f7ee; color: var(--v-green); }
#all_servers tbody td:nth-child(7) i.uk-icon-minus:hover { background: #fdeceb; color: var(--v-red); }

#all_servers tbody tr[style*="ccfcd4"] td { background-color: #eefaf2 !important; }
#all_servers tbody tr[style*="ff99ca"] td { background-color: #fdf0f5 !important; }
#all_servers tbody tr[style*="251,255,0"] td { background-color: #fdf8e3 !important; }

#all_servers tbody tr[style*="ccfcd4"] td:first-child { box-shadow: inset 3px 0 0 #4cc287; }
#all_servers tbody tr[style*="ff99ca"] td:first-child { box-shadow: inset 3px 0 0 #ec8ab5; }
#all_servers tbody tr[style*="251,255,0"] td:first-child { box-shadow: inset 3px 0 0 #e3c94f; }

.uk-button {
	height: 38px;
	line-height: 36px;
	padding: 0 18px;
	border-radius: var(--v-radius-s);
	border: 1px solid var(--v-line);
	background: #fff;
	color: #3d4a5a;
	font-size: 13.5px;
	font-weight: 500;
	text-shadow: none;
	box-shadow: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.uk-button:hover { background: #f5f8fb; border-color: #d5dde8; color: var(--v-ink); }

.uk-button-primary {
	background: var(--v-accent);
	border-color: var(--v-accent);
	color: #fff;
}

.uk-button-primary:hover {
	background: var(--v-accent-dark);
	border-color: var(--v-accent-dark);
	color: #fff;
}

.uk-button-large { height: 44px; line-height: 42px; padding: 0 24px; font-size: 15px; }
.uk-button-mini { height: 30px; line-height: 28px; padding: 0 12px; font-size: 12.5px; }

.uk-badge {
	padding: 3px 9px;
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 500;
	text-shadow: none;
	box-shadow: none;
}

.uk-badge-success { background: #e6f7ee; color: #148750; }
.uk-badge-danger { background: #fdecea; color: #c0392b; }

.uk-progress {
	height: 18px;
	margin: 0;
	border-radius: 9px;
	background: #eef1f6;
	box-shadow: none;
}

.uk-progress-bar {
	background: linear-gradient(90deg, #2ab7dd, #17a2c9);
	font-size: 11px;
	line-height: 18px;
	box-shadow: none;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea {
	height: 40px;
	padding: 0 12px;
	box-sizing: border-box !important;
	border: 1px solid #dde3ec;
	border-radius: var(--v-radius-s);
	background: #fff;
	color: var(--v-ink);
	font-size: 14px;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

textarea { height: auto; padding: 10px 12px; }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
	border-color: var(--v-accent);
	box-shadow: 0 0 0 3px rgba(23, 162, 201, .13);
	outline: none;
}

.uk-panel-space {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.tm-grid-block:has(.uk-pagination) {
	margin-top: 6px !important;
	background: none;
	border: 0;
	
	box-shadow: none;
}

.uk-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 18px 0 4px;
}

.uk-pagination > li { margin: 0 !important; padding: 0 !important; float: none; }

.uk-pagination > li > a,
.uk-pagination > li > span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius-s);
	background: #fff;
	color: #4a5768;
	font-size: 13.5px;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.uk-pagination > li > a:hover {
	background: var(--v-accent-soft);
	border-color: #b9e0ee;
	color: var(--v-accent-dark);
}

.uk-pagination > li.uk-active > span {
	background: var(--v-accent);
	border-color: var(--v-accent);
	color: #fff;
}

.tm-block-bottom {
	margin-top: 20px;
}

.tm-block-bottom,
.tm-main,
.tm-block-bottom .tm-main {
	background: none !important;
}

.tm-footer {
	padding: 18px 22px 22px;
	background: var(--v-card);
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius);
	box-shadow: var(--v-shadow);
	text-align: center;
	color: var(--v-muted);
	font-size: 13px;
}

.tm-footer img { margin: 4px 6px; vertical-align: middle; opacity: .9; }

.tm-totop-scroller {
	position: fixed;
	right: 22px;
	bottom: 22px;
	top: auto !important;
	left: auto !important;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--v-line);
	box-shadow: 0 6px 20px rgba(16, 32, 58, .14);
	transition: background .15s ease, transform .15s ease;
}

.tm-totop-scroller:hover { background: var(--v-accent-soft); transform: translateY(-2px); }

.tm-totop-scroller::before {
	content: '';
	position: absolute;
	top: 17px;
	left: 15px;
	width: 11px;
	height: 11px;
	border-left: 2px solid #58657a;
	border-top: 2px solid #58657a;
	transform: rotate(45deg);
}

.login,
.registration,
.remind,
.reset {
	margin: 10px auto 6px;
}

.login .page-header h1,
.registration .page-header h1,
.remind .page-header h1 {
	margin-bottom: 4px;
	font-size: 22px;
	text-align: center;
}

.login .well,
.registration .well,
.remind .well,
.reset .well {
	
	max-width: 400px;
	margin: 16px auto 0;
	padding: 22px 22px 20px;
	background: #fbfcfe;
	border: 1px solid var(--v-line);
	border-radius: 14px;
	box-shadow: none;
}

.form-horizontal .control-group,
.control-group {
	margin-bottom: 14px;
	border: 0;
}

.form-horizontal .control-label,
.control-label {
	width: auto !important;
	float: none !important;
	padding: 0 0 6px !important;
	text-align: left !important;
	font-size: 13px;
	font-weight: 500;
	color: var(--v-muted);
}

.control-label .star { color: var(--v-red); }

.form-horizontal .controls,
.controls { margin-left: 0 !important; }

.controls input[type="text"],
.controls input[type="password"],
.controls input[type="email"] {
	width: 100%;
}

.control-group:has(input[type="checkbox"]) {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.control-group:has(input[type="checkbox"]) .control-label { padding: 0 !important; color: var(--v-ink); }

.control-group:has(input[type="checkbox"]) input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--v-accent);
}

.login .btn,
.registration .btn,
.remind .btn,
.reset .btn,
.btn-primary {
	display: block;
	width: 100%;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: var(--v-radius-s);
	background: var(--v-accent);
	color: #fff;
	font-size: 14.5px;
	font-weight: 500;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background .15s ease;
}

.login .btn:hover,
.registration .btn:hover,
.remind .btn:hover,
.btn-primary:hover { background: var(--v-accent-dark); }

.nav-tabs.nav-stacked {
	margin: 14px 0 0;
	padding: 0;
	border: 0;
	list-style: none;
	text-align: center;
}

.nav-tabs.nav-stacked > li { border: 0; margin: 0; }

.nav-tabs.nav-stacked > li > a {
	display: inline-block;
	padding: 6px 4px;
	border: 0 !important;
	background: none !important;
	font-size: 13.5px;
	color: var(--v-accent-dark);
}

.nav-tabs.nav-stacked > li > a:hover { color: var(--v-accent); text-decoration: underline; }

.tm-sidebar-a .uk-panel-box { padding: 16px 14px; }

.tm-sidebar-a .uk-panel-title {
	margin: 0 0 10px;
	padding: 0 6px;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--v-muted);
}

.uk-nav-side > li > a {
	padding: 9px 12px;
	margin-bottom: 2px;
	border-radius: var(--v-radius-s);
	color: #3f4c5d;
	font-size: 13.5px;
	background: none;
	text-shadow: none;
	transition: background .15s ease, color .15s ease;
}

.uk-nav-side > li > a:hover {
	background: #f2f6fa;
	color: var(--v-ink);
}

.uk-nav-side > li.uk-active > a {
	background: var(--v-accent);
	color: #fff;
	font-weight: 500;
}

.uk-nav-side > li.uk-active > a:hover { background: var(--v-accent-dark); color: #fff; }

.uk-nav-side > li > a i { margin-right: 4px; opacity: .85; }

#my_servers tbody td:last-child i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	color: #6b7889;
	transition: background .15s ease, color .15s ease;
}

#my_servers tbody td:last-child i.uk-icon-cog:hover { background: var(--v-accent-soft); color: var(--v-accent-dark); }
#my_servers tbody td:last-child i.uk-icon-trash-o:hover { background: #fdeceb; color: var(--v-red); }

#add.uk-panel-box {
	margin-top: 14px;
	padding: 16px;
	background: #f8fafc;
	border: 1px solid var(--v-line);
	border-radius: 14px;
}

.uk-subnav-pill {
	display: flex;
	gap: 6px;
	margin: 0 0 18px !important;
	padding: 0;
	text-align: left !important;
}

.uk-subnav-pill > li { padding: 0 !important; margin: 0; float: none; }
.uk-subnav-pill > li::before { display: none !important; }

.uk-subnav-pill > li > a {
	display: block;
	padding: 8px 16px;
	border-radius: 999px;
	background: #f1f4f9;
	color: #4c596a;
	font-size: 13.5px;
	transition: background .15s ease, color .15s ease;
}

.uk-subnav-pill > li > a:hover { background: #e6ecf4; color: var(--v-ink); }

.uk-subnav-pill > li.uk-active > a {
	background: var(--v-accent);
	color: #fff;
}

.uk-thumbnail {
	padding: 0;
	border: 1px solid var(--v-line);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: none;
}

.uk-thumbnail img { display: block; }

.uk-thumbnail-caption {
	padding: 8px 10px;
	background: #fbfcfe;
	border-top: 1px solid var(--v-line);
	font-size: 12.5px;
	color: var(--v-muted);
	text-align: center;
}

.uk-list-line > li {
	padding: 9px 0;
	border-top: 1px solid var(--v-line-soft);
	font-size: 13.5px;
}

.uk-list-line > li:first-child { border-top: 0; }

.uk-list,
.uk-list-line { padding-left: 0; margin-left: 0; }

.ls-name { font-weight: 600; color: var(--v-ink); }
.ls-info { color: var(--v-muted); }

.ls-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 11px;
}

.ls-mark-yes { background: #e6f7ee; color: #148750; }
.ls-mark-no { background: #fdecea; color: #c0392b; }

.ls-order {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var(--v-radius-s);
	background: var(--v-accent);
	color: #fff !important;
	font-size: 13px;
	font-weight: 500;
	transition: background .15s ease;
}

.ls-order:hover { background: var(--v-accent-dark); color: #fff !important; }

.ls-date { color: var(--v-muted); font-size: 13px; }

.tm-content h4 {
	margin: 26px 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--v-line);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #3a4757;
}

.uk-alert {
	padding: 12px 14px;
	border: 1px solid #dbe6f2;
	border-radius: 12px;
	background: #f2f7fc;
	color: #3c4a5b;
	font-size: 13.5px;
	text-shadow: none;
}

.uk-alert-success { background: #eefaf3; border-color: #c9ecda; color: #17754a; }
.uk-alert-danger { background: #fdefee; border-color: #f6d3d0; color: #a63a30; }
.uk-alert-warning { background: #fdf7e8; border-color: #f2e4be; color: #8a6b1f; }

.uk-modal-dialog {
	border-radius: var(--v-radius);
	box-shadow: 0 24px 60px rgba(10, 22, 40, .28);
}

.uk-modal-header {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--v-line);
	font-size: 18px;
	font-weight: 600;
}

hr { border-top: 1px solid var(--v-line); }

.uk-table-condensed tbody td { padding: 8px 10px !important; }

.tm-article-content > .uk-grid:first-child:has(> .uk-width-1-2 + .uk-width-1-2:last-child) {
	display: flex;
	align-items: center;
	margin: 0 0 16px !important;
	padding: 14px 16px;
	background: linear-gradient(120deg, #f5f9fd, #fbfdfe);
	border: 1px solid var(--v-line);
	border-radius: 14px;
}

.tm-article-content > .uk-grid:first-child:has(> .uk-width-1-2 + .uk-width-1-2:last-child) > div { padding-left: 0 !important; }

.tm-article-content > .uk-grid:first-child:has(> .uk-width-1-2 + .uk-width-1-2:last-child) .uk-width-1-2:first-child {
	font-size: 15px;
}

.tm-article-content > .uk-grid:first-child:has(> .uk-width-1-2 + .uk-width-1-2:last-child) .uk-width-1-2:first-child b {
	font-weight: 500;
	color: var(--v-muted);
}

.tm-article-content > .uk-grid:first-child:has(> .uk-width-1-2 + .uk-width-1-2:last-child) a {
	margin-left: 6px;
	font-size: 13px;
}

b:has(+ .balance-sum) {
	font-weight: 500;
	color: var(--v-muted);
}

.balance-sum {
	margin-left: 4px;
	
	font-size: 13.5px;
	font-weight: 500;
	color: var(--v-ink);
}

.tm-content h3 + div,
.tm-content .uk-width-1-1 > .uk-grid {
	font-size: 13.5px;
}

.tm-content p { margin: 0 0 12px; }

.tm-content ul:not(.uk-nav):not(.uk-subnav):not(.uk-pagination):not(.nav-tabs):not(.uk-navbar-nav):not(.uk-list) {
	margin: 0 0 14px;
	padding-left: 20px;
}

.tm-content ul:not(.uk-nav):not(.uk-subnav):not(.uk-pagination):not(.nav-tabs):not(.uk-navbar-nav):not(.uk-list) > li {
	margin-bottom: 6px;
	line-height: 1.6;
}

.tm-content .uk-article-content h2,
.tm-content .uk-article-content h3 {
	margin: 22px 0 10px;
	color: #2b3849;
}

#text table td { padding: 4px 8px 4px 0; vertical-align: middle; }

#text table td label {
	font-size: 13.5px;
	color: var(--v-muted);
}

#text select,
#text input[type="text"] { height: 38px; }

#text .uk-button {
	height: 42px;
	padding: 0 26px;
	background: var(--v-accent);
	border-color: var(--v-accent);
	color: #fff;
}

#text .uk-button:hover { background: var(--v-accent-dark); border-color: var(--v-accent-dark); }

.uk-table-striped tbody tr:nth-of-type(odd) td { background: #fcfdfe; }

.pay-method {
	border-color: var(--v-line);
	border-radius: 14px;
}

.pay-method:hover {
	background: #f7fbfe;
	border-color: #b9dcea;
	box-shadow: 0 4px 18px rgba(16, 32, 58, .08);
}

.pay-note { color: var(--v-green); }

#go_to_pay {
	background: var(--v-accent);
	border-color: var(--v-accent);
	border-radius: var(--v-radius-s);
}

#go_to_pay:hover { background: var(--v-accent-dark); border-color: var(--v-accent-dark); }

.pay-choose-title { color: var(--v-muted); }

::selection { background: #17a2c9; color: #fff; text-shadow: none; }
::-moz-selection { background: #17a2c9; color: #fff; text-shadow: none; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d3dbe6; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #bcc7d6; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

.tm-content .uk-article-content h1 {
	margin: 22px 0 10px;
	font-size: 19px;
	font-weight: 600;
	text-transform: none;
	color: #2b3849;
}

.tm-content .uk-article-content h1:first-child { margin-top: 0; }

.tm-sidebar-a .uk-nav-side,
.tm-sidebar-b .uk-nav-side {
	margin: 0 !important;
	padding: 0 !important;
}

.tm-sidebar-a .uk-panel-title { padding: 0 12px; }

.tm-top-block .uk-navbar-nav { display: flex; flex-wrap: wrap; }

@media (max-width: 1100px) {
	.tm-navbar .uk-navbar-nav > li > a { padding: 0 11px; font-size: 13px; }
	.tm-toolbar .uk-subnav > li > a { padding: 0 13px; }
	.tm-headerbar .tm-search { width: 240px; }
}

@media (max-width: 900px) {
	.tm-navbar .uk-navbar-nav > li > a { padding: 0 8px; font-size: 12.5px; }
	.tm-toolbar .uk-subnav > li > a { padding: 0 11px; font-size: 12.5px; }
	.tm-headerbar { gap: 12px; padding: 0 14px; }
	.tm-headerbar .tm-search { width: 190px; }
}

@media (max-width: 767px) {
	.tm-top-block { justify-content: center; padding: 6px 10px; }
	.tm-toolbar { margin: 0 auto; }
	.tm-headerbar { border-radius: var(--v-radius); }
}

#input_balance {
	width: 170px;
	height: 40px;
	padding: 0 6px 0 12px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

#input_balance::-webkit-outer-spin-button,
#input_balance::-webkit-inner-spin-button {
	-webkit-appearance: inner-spin-button;
	opacity: 1;
	height: 34px;
	margin-left: 4px;
	cursor: pointer;
}

label[for="input_balance"] {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	color: var(--v-muted);
}

.pay-choose-title {
	margin: 22px 0 12px;
	font-size: 14px;
	color: var(--v-muted);
}

.tm-content > .uk-article > .uk-alert {
	margin: 0 0 12px;
	text-align: center;
}

.tm-content > .uk-article > .uk-alert p { margin: 0 0 4px; }
.tm-content > .uk-article > .uk-alert p:last-child { margin-bottom: 0; }

#sum_details { font-size: 14px; color: var(--v-muted); }

#go_to_pay { width: auto !important; min-width: 260px; }

#add.uk-hidden { display: none; }

#add table { width: 100%; }
#add table td { padding: 0 8px; vertical-align: top; }
#add table td:first-child { padding-left: 0; }
#add table td:last-child { padding-right: 0; width: 150px; vertical-align: middle; }

#add input[type="text"],
#add select {
	width: 100%;
	margin-bottom: 8px;
}

#add .uk-button { width: 100%; }
#add #cim img { margin-top: 4px; border-radius: 8px; }

label[for="input_balance"] { text-align: center; }

.tm-headerbar::before,
.tm-headerbar::after,
.tm-top-block::before,
.tm-top-block::after,
.tm-toolbar::before,
.tm-toolbar::after {
	display: none !important;
}

.tm-headerbar { padding-left: 16px; padding-right: 16px; }

.tm-top-block { padding-left: 16px; padding-right: 16px; }
.tm-navbar .uk-navbar-nav > li:first-child > a { padding-left: 0; }

.tm-footer {
	padding: 22px 24px;
	background: linear-gradient(135deg, var(--v-dark) 0%, var(--v-dark-2) 100%);
	border: 0;
	border-radius: var(--v-radius);
	color: #9db2cc;
}

.ft-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 14px;
}

.ft-links a {
	display: block;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 9px;
	background: rgba(255, 255, 255, .04);
	color: #cddaea !important;
	font-size: 13px;
	line-height: 1.3;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ft-links a:hover {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(69, 205, 240, .45);
	color: #fff !important;
	text-decoration: none;
}

.tm-footer img {
	margin: 4px 6px;
	opacity: .75;
	transition: opacity .15s ease;
}

.tm-footer img:hover { opacity: 1; }

#text p[style],
#text span[style],
#text div[style],
#text li[style],
#text td[style],
#text strong[style],
#text font {
	font-family: inherit !important;
	font-size: inherit !important;
	background: none !important;
	line-height: inherit !important;
}

#text p {
	margin: 0 0 12px !important;
	font-size: 14px;
	line-height: 1.65;
	color: #3f4c5d;
}

#text strong,
#text b { color: var(--v-ink); font-weight: 600; }

#text a { color: var(--v-accent-dark); }

#text ul,
#text ol { margin: 0 0 14px; padding-left: 22px; }

#text li { margin-bottom: 6px; line-height: 1.6; }

.tm-content #text { max-width: 900px; }

html { scroll-behavior: smooth; }

#text .doc-head {
	margin: 30px 0 12px !important;
	padding-top: 18px;
	border-top: 1px solid var(--v-line);
	scroll-margin-top: 20px;
}

#text .doc-head:first-child {
	margin-top: 0 !important;
	padding-top: 0;
	border-top: 0;
}

#text .doc-head strong {
	font-size: 17px;
	font-weight: 600;
	color: var(--v-ink);
}

#text .doc-head:target {
	animation: doc-hl 1.8s ease-out 1;
}

@keyframes doc-hl {
	0%   { background: rgba(23, 162, 201, .16); box-shadow: 0 0 0 8px rgba(23, 162, 201, .16); }
	100% { background: transparent; box-shadow: 0 0 0 8px transparent; }
}

.btn {
	display: inline-block;
	height: 38px;
	line-height: 36px;
	padding: 0 18px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius-s);
	background: #fff;
	color: #3d4a5a;
	font-size: 13.5px;
	font-weight: 500;
	text-align: center;
	text-shadow: none;
	box-shadow: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover { background: #f5f8fb; border-color: #d5dde8; color: var(--v-ink); text-decoration: none; }

.btn-success,
.btn-primary {
	background: var(--v-accent);
	border-color: var(--v-accent);
	color: #fff;
}

.btn-success:hover,
.btn-primary:hover { background: var(--v-accent-dark); border-color: var(--v-accent-dark); color: #fff; }

.btn-danger { background: var(--v-red); border-color: var(--v-red); color: #fff; }
.btn-small { height: 32px; line-height: 30px; padding: 0 12px; font-size: 12.5px; }

#LastTime { margin-top: 22px !important; }

.ls-table:has(th:nth-child(8)) td:nth-child(7) {
	overflow: visible;
	white-space: normal;
	word-break: normal;
	line-height: 1.35;
}

.ls-table:has(th:nth-child(8)) th:nth-child(2),
.ls-table:has(th:nth-child(8)) td:nth-child(2) { width: 20%; }

.ls-table:has(th:nth-child(8)) th:nth-child(7),
.ls-table:has(th:nth-child(8)) td:nth-child(7) { width: 15%; }

.conn-stats {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--v-line);
}

.conn-stats-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 4px;
}

.conn-stats-head h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--v-ink);
}

.conn-stats-note {
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--v-accent-soft);
	color: var(--v-accent-dark);
	font-size: 11.5px;
}

.conn-stats-hint {
	margin-bottom: 10px;
	font-size: 12.5px;
	color: var(--v-muted);
}

.conn-chart { width: 100%; min-height: 260px; }

.our-player {
	color: #f0a533;
	font-size: 12px;
	vertical-align: 1px;
	cursor: help;
}

/* Рамка при нажатии на кнопки и ссылки.

   Браузер сам рисует вокруг нажатого элемента белую рамку — на тёмной
   шапке она бросается в глаза и выглядит как дефект. Совсем убирать её
   нельзя: по ней ориентируются те, кто ходит по сайту с клавиатуры.
   Поэтому показываем её только при переходе клавишей Tab, а при обычном
   клике мышью не показываем. И делаем её в цвет сайта. */
a:focus,
button:focus,
.uk-button:focus,
.btn:focus { outline: none; }

a:focus-visible,
button:focus-visible,
.uk-button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid #45cdf0;
	outline-offset: 2px;
	border-radius: 9px;
}

/* Кнопкам входа подчёркивание не нужно — у них есть фон и рамка. */
.tm-toolbar .uk-subnav > li > a:hover,
.tm-toolbar .uk-subnav > li > a:focus,
.tm-navbar .uk-navbar-nav > li > a:hover,
.tm-navbar .uk-navbar-nav > li > a:focus { text-decoration: none; }

/* Выбор позиции при покупке услуги.

   Движок раскладывает все места в один ряд и делит ширину поровну: при
   пятнадцати местах на каждое приходится меньше 6% — около шестидесяти
   пикселей. Дата «Оплачено до: 11.09.2026 [18:30]» туда не помещается,
   вылезает за плашку и наезжает на соседние. Раскладываем места сеткой,
   которая сама переносит их на следующую строку. */
#befirst_position table,
#befirst_position tbody,
#top_position table,
#top_position tbody { display: block; width: 100%; }

#befirst_position tr,
#top_position tr {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	gap: 8px;
}

#befirst_position td,
#top_position td {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
	display: block;
}

#befirst_position label,
#top_position label { display: block; cursor: pointer; }

#befirst_position p,
#top_position p {
	margin: 0;
	padding: 9px 8px !important;
	font-size: 12.5px;
	line-height: 1.4;
	border-color: #dde3ec !important;
	transition: border-color .15s ease, background .15s ease;
}

#befirst_position label:hover p,
#top_position label:hover p { border-color: #17a2c9 !important; background: #f4fbfe; }

/* ── Кабинет → услуги сервера: карточки выбора ─────────────────────────
   Заменили табличную вёрстку с float: left — из-за неё третья карточка
   (BOOST) вываливалась за пределы блока, на телефоне налезала на подвал. */
.svc-pick {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 8px;
	margin: 0 0 6px;
	text-align: left;
}

.svc-pick label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--v-line);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.svc-pick label:hover {
	border-color: var(--v-accent);
	box-shadow: 0 6px 18px rgba(16, 32, 58, .10);
}

.svc-pick img {
	flex: 0 0 auto;
	width: 60px;
	height: 50px;
	margin: 0;
	border-radius: 10px;
}

.svc-pick p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.4;
	text-align: left;
	/* чтобы телефон сам не раздувал шрифт и текст не лез за карточку */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.svc-pick-empty {
	margin: 0;
	color: var(--v-muted);
}

/* ── Раскладки, собранные таблицей с float: left ───────────────────────
   Те же грабли, что и у карточек услуг: ячейке задан float, и строка
   таблицы перестаёт считать её высоту — всё, что не влезло в первый ряд,
   рисуется за пределами блока. Разметку не трогаем, только переводим
   строку таблицы в сетку: широкий экран — в ряд, узкий — в столбик. */
.svc-row,
.svc-row tbody { display: block; }

.svc-row tr {
	display: grid;
	gap: 8px;
}

.svc-row td {
	display: block;
	float: none !important;
	width: auto !important;
	padding: 0 !important;
}

.svc-row label { margin: 0; cursor: pointer; }

/* способы оплаты и выбор сервера — карточка с картинкой слева */
.svc-row--pay tr,
.svc-row--srv tr { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.svc-row--pay label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.svc-row--pay label img {
	flex: 0 0 auto;
	float: none !important;
	margin: 0 !important;
}

.svc-row--pay label p { margin: 0; }

.svc-row--srv label { display: block; }
.svc-row--srv label p { margin: 0; }

/* сроки покупки */
.svc-row--period tr { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.svc-row--period label p { margin: 0; height: 100%; }

/* палитра цветов */
.svc-row--color tr { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.svc-row--color label p { margin: 0; }

/* ── Листинг: витрина услуг ────────────────────────────────────────────
   Названия услуг были набраны так же, как названия серверов ниже, а
   строки разделяла бледная черта — блок читался как служебная таблица,
   и услуги, по словам владельца, «было не видно». Теперь каждая услуга —
   отдельная строка-карточка с акцентной полосой слева. */
.ls-services { border-collapse: separate; border-spacing: 0 10px; }

.ls-services tbody td {
	padding: 15px 14px !important;
	border: 0 !important;
	background: #fff;
	vertical-align: middle;
	overflow: visible !important;
	white-space: normal !important;
}

.ls-services tbody td:first-child {
	border-radius: var(--v-radius) 0 0 var(--v-radius);
	white-space: nowrap !important;
}

.ls-services tbody td:last-child { border-radius: 0 var(--v-radius) var(--v-radius) 0; }

.ls-services .ls-name { font-size: 16px; }

.ls-services .ls-always,
.ls-services .ls-available {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: #148750;
}

/* Заголовок раздела со списком серверов: был мелким капсом и не
   отличался от шапки таблицы прямо под ним. */
.tm-content h4.ls-group {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 34px 0 10px;
	padding: 0;
	border: 0;
	font-size: 18px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--v-ink);
}

.tm-content h4.ls-group::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--v-line);
}