body {
	margin: 0;
	
	font: 12px/1.7em 'Open Sans', arial, sans-serif;
	
	background: #DDD url(../img/bg.png) repeat 0 0;
}

p {	
	margin-bottom: 2em;
	
	font: 12px/1.7em 'Open Sans', arial, sans-serif;
}

h1 {
	margin-bottom: .25em;
}

h2 {
	margin-bottom: .5em;
	
	font-size: 22px;
	font-weight: 600;	
}

h3 {
	margin-bottom: .75em;
	
	font-size: 18px;
	font-weight: 600;
}

h4, h5, h6 {
	margin-bottom: 1.25em;

	font-weight: 600;
}

input {
	font: 13px/1.7em 'Open Sans', arial, sans-serif;
}

#wrapper {
	width: 880px;
	padding: 0 50px;
	margin: 0 auto;
	
	background: #FFF;
	
	border: 1px solid #DDD\9;
	border-top: 4px solid #00eaff;
	box-shadow: 0 0 12px rgba(0,229,255,.5);
	border-bottom: none;
	
}

#header {
	padding: 35px 0;
}

#header h1 {
	width: 100%;
	height: 42px;
	margin: 0;
}

#header h1 a {
	display: block;
}

#nav {
	margin-bottom: .5em;
}

#nav .container > .main-nav {
	padding: 0;
	margin: 0;
	
	border-top: none;
}

#nav .container > .main-nav > li {
	position: relative;
	top: -1px;
	
	float: left;
	
	padding: 0 40px 0 0;
	margin: 0;
	
	list-style: none;
	
	border-top: none;
}

#nav .container > .main-nav > li:last-child {
	padding-right: 0;
}

#nav .container > .main-nav > li > a {
	position: relative;
	top: -1px;
	
	display: block;
	
	padding: 15px 5px 5px;
	
	color: #999;
	
	text-transform: uppercase;
	
	border-top: 1px solid transparent;
}

#nav .container > .main-nav > li > a:hover,
#nav .container > .main-nav > li.dropdown.open > a {
	color: #333;
	
	text-decoration: none;
	
	border-top-color: #333;
	border-top-width: 1px;
}

#nav .container > .main-nav > li.active a {
	padding-top: 12px;
	
	color: #222;
	
	border-top-color: #F90;
	border-top-width: 4px;
}

#nav .container > .main-nav > li > a > .caret {
	position: relative;
	top: -2px;
	
	margin-left: .5em;
}

#nav .dropdown-menu a:hover {
	background-color: #F90;
}

#nav .dropdown-menu > li > a {
	padding: 6px 12px;
}

#nav .dropdown-menu i {
	margin-right: .5em;
	
	font-size: 14px;
}

#nav .dropdown-menu::before {
	content: '';
	display: inline-block;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #CCC;
	border-bottom-color: rgba(0, 0, 0, 0.2);
	position: absolute;
	top: -7px;
	left: 9px;
}

#nav .dropdown-menu::after {
	content: '';
	display: inline-block;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid white;
	position: absolute;
	top: -6px;
	left: 10px;
}

input.error, .form-vertical textarea.error {
	border-color: #b94a48;
	color: #b94a48;
}

.form-inline .help-block.error, .form-inline .help-inline.error, .form-horizontal .help-block.error, .form-horizontal .help-inline.error, .form-vertical .help-block.error, .form-vertical .help-inline.error {
	color: #b94a48;
}

.form-inline label.error, .form-horizontal label.error, .form-vertical label.error {
	color: #b94a48;
}

#responsive-nav-trigger {
	width: auto;
	padding: 5px 10px;
	
	background-color: #F8F8F8;
	background-image: url(../img/responsive-nav-bg.png);
	background-position: center right;
	background-repeat: no-repeat;
	
	color: #8F8F8F;
	
	font-size: 12px;
	line-height: 1.5;
			
	border: 1px solid #E8E8E8;
	
	cursor: pointer;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#responsive-nav-trigger.open {
	-webkit-border-bottom-right-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius-bottomright: 0;
	-moz-border-radius-bottomleft: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
		
#responsive-nav {
	position: relative;
	z-index: 1001;
	
	display: none;
	
	margin: 0 0 2em;
}

#responsive-nav-items {
	display: none;
	
	padding: 12px 10px;
	margin: 0 0 1.5em;
	
	background: #F8F8F8;
	
	border: 1px solid #e3e3e3;
	border-top: none;
	
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

#responsive-nav-items ul {
	padding: 0;
	margin: 0;
}

#responsive-nav-items li {	
	list-style: none;
}

#responsive-nav-items > li > ul > li > a {
	padding-left: 30px;
}

#responsive-nav-items a {
	padding: 8px 10px;
	
	display: block;
	
	color: #222;
	
	font-size: 13px;
	font-weight: 600;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#responsive-nav-items a:hover {
	text-decoration: none;
	
	background: #DDD;
}

#responsive-nav-items li.active a {
	color: #FFF;
	
	text-decoration: none;
	
	background: #F90;
}

#masthead {
	position: relative;
	
	height: 375px;
	margin-bottom: 2.5em;
	
	-moz-box-shadow: 1px 1px 6px rgba(0,0,0,.5);	
	-webkit-box-shadow: 1px 1px 6px rgba(0,0,0,.5);
	box-shadow: 1px 1px 6px rgba(0,0,0,.5);
}

.masthead-details {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 225px;
	height: 335px;
	padding: 20px;
	
	color: #FFF;
	
	background: #333;	
	background: rgba(0,0,0,.70);
	
	text-shadow: 1px 1px 1px rgba(0,0,0,.4);
}

.masthead-details h2 {
	margin-bottom: .75em;
	
	font-size: 28px;
}

.masthead-details p {	
	font-size: 14px;	
}

#masthead .carousel-control {
	top: 50%;
	left: -72px;
	
	line-height: 26px;
	
	opacity: .35;
	
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

#masthead .carousel-control:hover {
	opacity: .80;
}

#masthead .carousel-control.right {
	left: auto;
	right: -72px;
}

#page-title {    	
	padding: 30px 50px;
	margin: 0 -50px 2.5em;
	
	border-top: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
	
	background: #EEE;
}

#page-title h1 {
	margin-bottom: .40em;
	
	font-weight: 600;
}

#page-title p {
	margin-bottom: 0;
	
	font-size: 15px;
}

#welcome h1 {
	padding: 0 80px;
	
	color: #777;
	
	font-size: 22px;
	font-style: italic;
	font-weight: 600;
	line-height: 1.75em;
}

#welcome {
	
	text-align: center;
}

#content {
	
}

#footer {
	clear: both;
	
	padding: 20px 50px;
	margin: 2.5em -50px 0;
	
	color: #BBB;
	
	background: #222;
	
	border-top: 1px solid #111;
	
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

#footer .row {
	margin-bottom: 0;
}

#footer #footer-logo {		
	overflow: hidden;
	
	width: 212px;
	height: 33px;
	margin-bottom: .75em;
	
	line-height: 600px;
	
	background: url(../img/footer-logo.png) no-repeat 0 0;
}

#footer a {
	color: #FFF;
}

#copyright {
	clear: both;
	
	padding: 20px 50px 15px 50px;
	margin: 0 -50px;
	
	color: #777;
	
	font-size: 11px;
	text-transform: uppercase;
	
	background: linear-gradient(180deg, #1a2436 0%, #0e1420 100%);
	
	border-top: 3px solid #00eaff;
	box-shadow: 0 -2px 16px rgba(0,229,255,.25), inset 0 1px 0 rgba(255,255,255,0.15);
}

#copyright #rights {
	
}

#copyright #totop {
	text-align: right;
}

#copyright a {
	color: #FFF;
}

.row {
	margin-left: 0;
}

.container {
	width: 880px;
}

.grid-1 { width: 55px; }
.grid-2 { width: 130px; }
.grid-3 { width: 205px; }
.grid-4 { width: 280px; }
.grid-5 { width: 355px; }
.grid-6 { width: 430px; }
.grid-7 { width: 505px; }
.grid-8 { width: 580px; }
.grid-9 { width: 655px; }
.grid-10 { width: 730px; }
.grid-11 { width: 805px; }
.grid-12 { width: 880px; }


.append-12 { padding-right: 900px; }
.append-11 { padding-right: 825px; }
.append-10 { padding-right: 750px; }
.append-9 { padding-right: 675px; }
.append-8 { padding-right: 600px; }
.append-7 { padding-right: 525px; }
.append-6 { padding-right: 450px; }
.append-5 { padding-right: 375px; }
.append-4 { padding-right: 300px; }
.append-3 { padding-right: 225px; }
.append-2 { padding-right: 150px; }
.append-1 { padding-right: 75px; }


.prepend-12 { padding-left: 900px; }
.prepend-11 { padding-left: 825px; }
.prepend-10 { padding-left: 750px; }
.prepend-9 { padding-left: 675px; }
.prepend-8 { padding-left: 600px; }
.prepend-7 { padding-left: 525px; }
.prepend-6 { padding-left: 450px; }
.prepend-5 { padding-left: 375px; }
.prepend-4 { padding-left: 300px; }
.prepend-3 { padding-left: 225px; }
.prepend-2 { padding-left: 150px; }
.prepend-1 { padding-left: 75px; }



.row [class^="grid-"]:first-child {
	margin-left: 0;
}

.row.nopad [class^="grid-"] {
	margin-bottom: 0;
}

.row.divider:last-child {
	margin-bottom: 0;
	
	border: none;
}

.row-divider {
	
	margin: 1.5em 0 3em;
	
	border: none;
	border-bottom: 1px dotted #CCC;
}

.slash {
	padding-right: .25em;
	
	color: #F90;
}


.social-icons-container {
	width: 100%;
	display: table;
	padding: 0;
	margin: 2.5em 0 0;
	
	list-style: none;
}

.social-icons-container li {
	width: 33%;
	display: table-cell;	
	
	text-align: center;			
}

.social-icon {
	width: 50px;
	height: 50px;
	display: inline-block;
	overflow: hidden;	
	
	line-height: 600px;
	
	background: url(../img/social/social-sprite.png) no-repeat 0 0;					
}

.social-icon-twitter {
	background-position: 0 0;					
}

.social-icon-twitter:hover {
	background-position: 0 -50px;					
}

.social-icon-googleplus {
	background-position: -50px 0;
}

.social-icon-googleplus:hover {
	background-position: -50px -50px;
}

.social-icon-facebook {
	background-position: -100px 0;	
}

.social-icon-facebook:hover {
	background-position: -100px -50px;	
}


.clearfix,
.row { zoom: 1; }
.clearfix:before,
.row:before,
.clearfix:after,
.row:after { content: ""; display: table; }
.clearfix:after,
.row:after { clear: both; }

.about-container .about-item {
	padding-right: 2em;
}

.about-container .choose-item h3 i {
	margin-right: .4em;
	
	color: #F90;
}

.about-container .choose-item h3 {
	margin-bottom: 0;
	
	font-size: 14px;
}

.work-container .work-item .thumbnail {
	margin-bottom: 1.5em;
}

.service-container .service-item h3 {
	font-size: 14px;	
}

.service-container .service-item h3 i {
	position: relative;
	top: 3px;
	
	margin-right: .25em;
	
	color: #F90;
	
	font-size: 24px;
}

.filter-container input {
	max-width: 110px;
}

.row [class^="grid-"] {
    float: left;
}

.dropdown-menu {
	padding: 15px;
}

#loading{
	display: none;
	position: fixed;
	top: 40%;
	left: 50%;
	z-index: 1150;
}

.circle {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-right:5px solid rgba(0,0,0,0);
	border-left:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 35px #2187e7;
	width:50px;
	height:50px;
	margin:0 auto;
	-moz-animation:spinPulse 1s infinite ease-in-out;
	-webkit-animation:spinPulse 1s infinite linear;
	-o-animation:spinPulse 1s infinite linear;
}
.circle1 {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-left:5px solid rgba(0,0,0,0);
	border-right:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 15px #2187e7;
	width:30px;
	height:30px;
	margin:0 auto;
	position:relative;
	top:-50px;
	-moz-animation:spinoffPulse 1s infinite linear;
	-webkit-animation:spinoffPulse 1s infinite linear;
	-o-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
	0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
	50% { -moz-transform:rotate(145deg); opacity:1; }
	100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
	0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
	50% { -webkit-transform:rotate(145deg); opacity:1;}
	100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}
@-o-keyframes spinPulse {
	0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
	50% { -webkit-transform:rotate(145deg); opacity:1;}
	100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-o-keyframes spinoffPulse {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}

.dropdown-menu { 
    padding: 5px 0; 
} 

.dropdown-menu li hr { 
    margin: 9px 1px; 
} 

.dropdown-menu form { 
    padding: 5px 15px; 
}
/* ============================================================ */

/* ============================================================ */
/* ============ НЕОНОВЫЕ ПЛИТКИ МЕНЮ (JuggerMi) ================  */
/* ============================================================ */
#nav .container > .main-nav > li{
	float:none;display:inline-block;padding:0;margin:0;
	border-top:none;top:0;
}
#nav .container > .main-nav > li > a{
	display:inline-block;margin:4px 6px;padding:10px 18px !important;
	border-radius:10px;background:rgba(0,0,0,.05);
	border:1px solid rgba(0,153,255,.35);
	color:#333;font-weight:700;
	box-shadow:0 0 8px rgba(0,153,255,.15);
	transition:all .25s ease;top:0;
}
#nav .container > .main-nav > li > a:hover,
#nav .container > .main-nav > li.dropdown.open > a{
	border-color:#0099ff;color:#111;
	box-shadow:0 0 16px rgba(0,153,255,.55), inset 0 0 8px rgba(0,153,255,.15);
}
#nav .container > .main-nav > li.active a{
	border-color:#ff8a00;padding-top:10px !important;
	box-shadow:0 0 16px rgba(255,138,0,.55);
}
/* ============================================================ */

/* ============================================================ */
/* ============ ДЕНЬ / НОЧЬ v2 (JuggerMi) ======================  */
/* ============================================================ */
/* ============================================================ */

/* ============================================================ */
/* ============ ЛОГОТИП JMIplay / CSbans (JuggerMi) ============  */
/* ============================================================ */
.cs-logo-lockup{display:inline-block;text-align:right;line-height:1.1;
	padding:4px 0;}
.cs-logo-link{display:block;text-decoration:none !important;}
.cs-logo-main{display:block;font-size:38px;font-weight:900;letter-spacing:1px;
	color:#00eaff;text-shadow:0 0 10px rgba(0,229,255,.7),0 0 24px rgba(0,229,255,.35);
	white-space:nowrap;}
.cs-logo-sub{display:block;font-size:13px;font-weight:700;letter-spacing:3px;
	text-transform:uppercase;color:#ff8a00;
	text-shadow:0 0 8px rgba(255,138,0,.6);margin-top:-4px;}
.cs-footer-version{margin-top:8px;font-size:12px;opacity:.85;letter-spacing:.4px;}
/* ============================================================ */

/* ============================================================ */
/* ============ КНОПКА ДЕНЬ/НОЧЬ (JuggerMi) ====================  */
/* ============================================================ */
#daynight-toggle{
	position:fixed;top:10px;right:10px;z-index:99999;
	width:42px;height:42px;border-radius:50%;border:none;
	background:#1a1a1a;color:#fff;font-size:18px;line-height:42px;
	text-align:center;cursor:pointer;
	box-shadow:0 0 12px rgba(0,0,0,.5);
	transition:transform .2s ease;
}
#daynight-toggle:hover{transform:scale(1.08);}
/* ============================================================ */

/* ============================================================ */
/* ============ ДЕНЬ / НОЧЬ v3 — реальная палитра (JuggerMi) ===  */
/* ============================================================ */
/* Старый способ через CSS-фильтр инверсии ненадёжен в мобильном
   Chrome (красит отдельные элементы, но не общий фон страницы).
   Ниже — настоящая тёмная палитра поверх реальных элементов. */
html.cs-dark-mode{
	background:#0d0f14 !important;
	min-height:100%;
}
body.cs-dark-mode{
	background:
		radial-gradient(ellipse 900px 500px at 15% -10%, rgba(0,229,255,.10), transparent 60%),
		radial-gradient(ellipse 900px 500px at 85% 110%, rgba(255,138,0,.08), transparent 60%),
		#0d0f14 !important;
	background-attachment:fixed;
	animation:csBgDrift 18s ease-in-out infinite alternate;
	color:#eef4f7;
	min-height:100vh;
}
@keyframes csBgDrift{
	0%{background-position:0% 0%, 100% 100%, 0 0;}
	100%{background-position:8% 4%, 92% 96%, 0 0;}
}
body.cs-dark-mode #wrapper{
	background:#161a22;
	border-color:#0a0c10;
	box-shadow:none;
	color:#eef4f7;
}
body.cs-dark-mode #header,
body.cs-dark-mode #nav{
	background:transparent;
}
body.cs-dark-mode #nav .container>.main-nav>li{
	border-top-color:#2a2f3a;
}
body.cs-dark-mode #nav .container>.main-nav>li>a{
	color:#eaf6ff !important;
	font-weight:800;
}
body.cs-dark-mode .dropdown-menu{
	background:#161a22;border-color:#2a2f3a;
	box-shadow:0 4px 14px rgba(0,0,0,.5);
}
body.cs-dark-mode .dropdown-menu a{color:#d7e2e8;}
body.cs-dark-mode h1,body.cs-dark-mode h2,body.cs-dark-mode h3,
body.cs-dark-mode h4,body.cs-dark-mode h5,body.cs-dark-mode h6{
	color:#f2f7fa;
}
body.cs-dark-mode a{color:#5ec8ff;}
body.cs-dark-mode a:hover{color:#8adfff;}
body.cs-dark-mode table,body.cs-dark-mode .grid-view table{
	color:#eef4f7;background:transparent;
}
body.cs-dark-mode table th,body.cs-dark-mode table td,
body.cs-dark-mode .table th,body.cs-dark-mode .table td{
	border-color:#2a2f3a !important;
}
body.cs-dark-mode .table-striped tbody>tr:nth-child(2n+1)>td{
	background:rgba(255,255,255,.03) !important;
}
body.cs-dark-mode input[type=text],body.cs-dark-mode input[type=password],
body.cs-dark-mode input[type="email"],body.cs-dark-mode textarea,
body.cs-dark-mode .uneditable-input{
	background:#0d0f14;color:#d7e2e8;border-color:#2a2f3a;
}
body.cs-dark-mode #page-title,body.cs-dark-mode .page-title,
body.cs-dark-mode #welcome{
	background:#12151b;color:#eef4f7;
}
body.cs-dark-mode #content{
	background:transparent;color:#eef4f7;
}
body.cs-dark-mode #copyright{
	background:#0a0c10 !important;color:#8a97a3;
}
body.cs-dark-mode #copyright a{color:#5ec8ff;}
body.cs-dark-mode .grid-view{
	background:transparent;border-color:#2a2f3a;color:#eef4f7;
}
body.cs-dark-mode .well,
body.cs-dark-mode .panel,body.cs-dark-mode .alert-info{
	background:#161a22;border-color:#2a2f3a;color:#eef4f7;
}
body.cs-dark-mode .nav-tabs>li>a{
	background:#161a22;color:#eef4f7;border-color:#2a2f3a;font-weight:700;
}
body.cs-dark-mode .nav-tabs>.active>a{
	background:#0d0f14;color:#5ec8ff;
}
body.cs-dark-mode .modal{background:#161a22;color:#eef4f7;}
body.cs-dark-mode .modal-header,body.cs-dark-mode .modal-footer{
	border-color:#2a2f3a;
}
/* ============================================================ */

/* ============================================================ */
/* ==== ДЕНЬ/НОЧЬ: полное покрытие Bootstrap-компонентов ====== */
/* ============================================================ */
body.cs-dark-mode .btn,body.cs-dark-mode .btn-default{
	background:#1c212b !important;color:#eef4f7 !important;
	border-color:#2a2f3a !important;text-shadow:none !important;
	background-image:none !important;
}
body.cs-dark-mode .btn:hover{background:#252b38 !important;}
body.cs-dark-mode .btn[disabled],body.cs-dark-mode .btn.disabled{
	background:#12151b !important;color:#5a6472 !important;opacity:1 !important;
}
body.cs-dark-mode ul.inline li a{border-color:#2a2f3a !important;}
body.cs-dark-mode ul.inline li a:hover,
body.cs-dark-mode ul.inline li a.active{border-color:#5ec8ff !important;}
body.cs-dark-mode .well{background:#161a22 !important;border-color:#2a2f3a !important;}
body.cs-dark-mode .form-control,body.cs-dark-mode select,
body.cs-dark-mode .filter-container input{
	background:#0d0f14 !important;color:#eef4f7 !important;border-color:#2a2f3a !important;
}
body.cs-dark-mode .pagination ul li a,body.cs-dark-mode .pagination li span{
	background:#161a22 !important;color:#eef4f7 !important;border-color:#2a2f3a !important;
}
body.cs-dark-mode .pagination ul li.active a{
	background:#0d0f14 !important;color:#5ec8ff !important;
}
body.cs-dark-mode code,body.cs-dark-mode pre{
	background:#0d0f14 !important;color:#eef4f7 !important;border-color:#2a2f3a !important;
}
body.cs-dark-mode hr{border-color:#2a2f3a !important;}
body.cs-dark-mode .breadcrumb{background:transparent !important;}
body.cs-dark-mode label{color:#eef4f7 !important;}
body.cs-dark-mode .caret{border-top-color:#eef4f7 !important;}
body.cs-dark-mode .dropdown-toggle{color:#eef4f7 !important;}
/* ============================================================ */

#ololo{overflow-x:auto;-webkit-overflow-scrolling:touch;}
#ololo table{min-width:640px;}

/* ============================================================ */
/* ============ ДЕСКТОП: ВИЗУАЛЬНЫЙ ПОЛИШ (JuggerMi) ===========  */
/* ============================================================ */
@media (min-width: 769px) {
	html,body{height:100%;}
	#wrapper{
		display:flex !important;
		flex-direction:column;
		min-height:100vh !important;
	}
	#copyright{
		margin-top:auto !important;
	}
}
/* ============================================================ */
/* ============ КРАСИВОЕ МОДАЛЬНОЕ ОКНО СЕРВЕРА (JuggerMi) =====  */
/* ============================================================ */
.modal-backdrop{
	background:#03060a !important;
}
.modal-backdrop.fade.in{opacity:.75 !important;}
.modal{
	border-radius:16px !important;
	border:1px solid rgba(0,229,255,.35) !important;
	box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 30px rgba(0,229,255,.25) !important;
	background:#12151b !important;
	color:#eef4f7 !important;
	animation:csModalPop .22s ease both;
}
@keyframes csModalPop{
	from{opacity:0;transform:scale(.96);}
	to{opacity:1;transform:scale(1);}
}
.modal-header{
	border-bottom:1px solid rgba(0,229,255,.2) !important;
	background:linear-gradient(180deg,#181d27 0%,#12151b 100%);
	border-radius:16px 16px 0 0 !important;
	padding:16px 20px !important;
}
.modal-header h3,.modal-header h4{color:#7fe8dc !important;margin:0;}
.modal-header .close{
	color:#eef4f7 !important;opacity:.7;text-shadow:none !important;
	transition:opacity .15s ease,transform .15s ease;
}
.modal-header .close:hover{opacity:1;transform:scale(1.15);}
.modal-body{padding:18px 20px !important;color:#d7e2e8 !important;}
.modal-body table{color:#d7e2e8 !important;}
.modal-body img{border-radius:10px;border:1px solid rgba(0,229,255,.25);}
.modal-footer{
	border-top:1px solid rgba(0,229,255,.15) !important;
	background:transparent !important;
	border-radius:0 0 16px 16px !important;
	padding:14px 20px !important;
}
/* ============================================================ */
	@keyframes csFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

	/* --- Иконки в верхнем меню (по порядку пунктов) --- */
	#nav .container>.main-nav:not(.pull-right)>li:nth-child(1) a::before{content:"\1F3E0\0020";}
	#nav .container>.main-nav:not(.pull-right)>li:nth-child(2) a::before{content:"\1F6AB\0020";}
	#nav .container>.main-nav:not(.pull-right)>li:nth-child(3) a::before{content:"\1F6E1\FE0F\0020";}
	#nav .container>.main-nav:not(.pull-right)>li:nth-child(4) a::before{content:"\1F5A5\FE0F\0020";}
	#nav .container>.main-nav:not(.pull-right)>li:nth-child(5) a::before{content:"\1F6D2\0020";}

	/* --- Меню: плавнее и с лёгким подъёмом при наведении --- */
	#nav .container>.main-nav>li>a{
		transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
	}
	#nav .container>.main-nav>li>a:hover{
		transform:translateY(-2px);
	}

	/* --- Заголовки страниц по центру --- */
	.container#page > h2:first-of-type,
	.container#page > h1:first-of-type{
		text-align:center;
		position:relative;padding-bottom:10px;
	}
	.container#page > h2:first-of-type::after,
	.container#page > h1:first-of-type::after{
		content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
		width:64px;height:3px;border-radius:3px;
		background:linear-gradient(90deg,#00eaff,#ff8a00);
	}

	/* --- Хлебные крошки по центру --- */
	.breadcrumb{text-align:center;justify-content:center;}
	.breadcrumb > li{display:inline-block;float:none;}

	/* --- Магазин: плитки чуть крупнее и с более выразительным hover --- */
	.shop-tiles{max-width:760px;margin:0 auto;}
	.shop-tile{min-height:220px;}
	.shop-tile:hover{transform:translateY(-6px) scale(1.015);}
	.shop-status{max-width:600px;margin-left:auto;margin-right:auto;}

	/* --- Кнопки: плавный hover везде --- */
	.btn{transition:transform .15s ease,box-shadow .15s ease,background .15s ease !important;}
	.btn:hover{transform:translateY(-1px);}

	/* --- Таблицы: подсветка строки при наведении --- */
	.grid-view table tbody tr{transition:background .15s ease;}
	.grid-view table tbody tr:hover{background:rgba(0,153,255,.06) !important;}
	body.cs-dark-mode .grid-view table tbody tr:hover{background:rgba(94,200,255,.08) !important;}

	/* --- Вкладки: плавный hover --- */
	.nav-tabs>li>a{transition:all .15s ease;}
	.nav-tabs>li>a:hover{transform:translateY(-1px);}

	/* --- Логотип: лёгкая пульсация свечения --- */
	.cs-logo-main{animation:csGlowPulse 3s ease-in-out infinite;}
	@keyframes csGlowPulse{
		0%,100%{text-shadow:0 0 10px rgba(0,229,255,.7),0 0 24px rgba(0,229,255,.35);}
		50%{text-shadow:0 0 14px rgba(0,229,255,.9),0 0 32px rgba(0,229,255,.5);}
	}

	/* --- Кнопка день/ночь: плавнее --- */
	#daynight-toggle{transition:transform .25s ease,box-shadow .25s ease;}
	#daynight-toggle:hover{transform:scale(1.12) rotate(15deg);box-shadow:0 0 18px rgba(0,229,255,.5);}
/* ============================================================ */

/* ============================================================ */
/* ============ ИКОНКИ + АНИМАЦИИ ВЕЗДЕ (JuggerMi) ==============  */
/* ============================================================ */

/* --- Иконки верхнего меню — теперь и на мобильном тоже --- */
#nav .container>.main-nav:not(.pull-right)>li:nth-child(1) a::before{content:"\1F3E0\0020";}
#nav .container>.main-nav:not(.pull-right)>li:nth-child(2) a::before{content:"\1F6AB\0020";}
#nav .container>.main-nav:not(.pull-right)>li:nth-child(3) a::before{content:"\1F6E1\FE0F\0020";}
#nav .container>.main-nav:not(.pull-right)>li:nth-child(4) a::before{content:"\1F5A5\FE0F\0020";}
#nav .container>.main-nav:not(.pull-right)>li:nth-child(5) a::before{content:"\1F6D2\0020";}

/* --- Иконки кнопок в Админцентре (по адресу ссылки — надёжнее позиции) --- */
ul.inline li a[href*="/admin/index"]::before{content:"\2699\FE0F\0020";}
ul.inline li a[href*="/Bans/create"]::before{content:"\2795\0020";}
ul.inline li a[href*="/admin/addbanonline"]::before{content:"\1F310\0020";}
ul.inline li a[href*="/serverinfo/admin"]::before{content:"\1F5A5\FE0F\0020";}
ul.inline li a[href*="/admin/reasons"]::before{content:"\1F4DD\0020";}
ul.inline li a[href*="/amxadmins/adminsonservers"]::before{content:"\1F517\0020";}
ul.inline li a[href*="/amxadmins/admin"]::before{content:"\1F465\0020";}
ul.inline li a[href*="/webadmins/admin"]::before{content:"\1F464\0020";}
ul.inline li a[href*="/levels/admin"]::before{content:"\1F396\FE0F\0020";}
ul.inline li a[href*="/usermenu/admin"]::before{content:"\1F517\0020";}
ul.inline li a[href*="/admin/websettings"]::before{content:"\2699\FE0F\0020";}
ul.inline li a[href*="/logs/admin"]::before{content:"\1F4CB\0020";}
ul.inline li a[href*="/billing/tariff/admin"]::before{content:"\1F4B0\0020";}
ul.inline li a[href*="/billing/admin"]::before{content:"\1F4B3\0020";}

/* --- Кнопки Админцентра — неоновые плитки, как верхнее меню --- */
ul.inline{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0;list-style:none;margin:0;}
ul.inline li{float:none !important;padding:0 !important;margin:0 !important;}
ul.inline li a.btn{
	display:inline-block;padding:9px 16px !important;border-radius:10px;
	background:rgba(0,0,0,.04);border:1px solid rgba(0,153,255,.3);
	color:#1a1a1a;font-weight:700;font-size:12.5px;
	box-shadow:0 0 6px rgba(0,153,255,.12);
	transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
ul.inline li a.btn:hover{
	border-color:#0099ff;transform:translateY(-2px);
	box-shadow:0 0 14px rgba(0,153,255,.4);
}
body.cs-dark-mode ul.inline li a.btn{
	background:#161a22 !important;color:#bdf5f0 !important;border-color:#2a2f3a !important;
}
body.cs-dark-mode ul.inline li a.btn:hover{border-color:#5ec8ff !important;}

/* --- Тап/нажатие — везде, и на мобильном, и на ПК --- */
.btn:active,
ul.inline li a.btn:active,
#nav .container>.main-nav>li>a:active,
.shop-tile:active,
.nav-tabs>li>a:active,
#daynight-toggle:active{
	transform:scale(.94) !important;
	transition:transform .08s ease !important;
}
.btn,ul.inline li a.btn,#nav .container>.main-nav>li>a,.shop-tile,.nav-tabs>li>a{
	-webkit-tap-highlight-color:transparent;
}

/* --- Иконки в шапке магазина (тайтлы плиток) уже есть, добавим hover-пульс на иконку --- */
.shop-tile .tile-ico{transition:transform .2s ease;}
.shop-tile:hover .tile-ico{transform:scale(1.4) rotate(-4deg) translateX(30px);}

/* ============================================================ */
/* ============ ДЕНЬ/НОЧЬ: БИРЮЗОВАЯ ПАЛИТРА (JuggerMi) ========  */
/* ============================================================ */
body.cs-dark-mode{
	color:#bdf5f0 !important;
}
body.cs-dark-mode #wrapper{color:#bdf5f0 !important;}
body.cs-dark-mode h1,body.cs-dark-mode h2,body.cs-dark-mode h3,
body.cs-dark-mode h4,body.cs-dark-mode h5,body.cs-dark-mode h6{
	color:#7fe8dc !important;
}
body.cs-dark-mode table,body.cs-dark-mode .grid-view table{color:#bdf5f0 !important;}
body.cs-dark-mode label{color:#bdf5f0 !important;}
body.cs-dark-mode .btn,body.cs-dark-mode .btn-default{color:#bdf5f0 !important;}
body.cs-dark-mode a{color:#5ec8ff;}
body.cs-dark-mode a:hover{color:#ff8a00;}
/* ============================================================ */

/* ============================================================ */
/* ============ КНОПКА "ВОЙТИ ЧЕРЕЗ STEAM" (JuggerMi) ===========  */
/* ============================================================ */
.cs-steam-login{
	display:inline-flex !important;align-items:center;gap:10px;
	padding:14px 26px !important;border-radius:14px;
	background:linear-gradient(135deg,rgba(0,153,255,.10),rgba(0,229,255,.04));
	border:1px solid rgba(0,153,255,.4);
	color:#0a4a66 !important;font-weight:800;font-size:16px;text-decoration:none !important;
	box-shadow:0 4px 16px rgba(0,153,255,.15);
	transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.cs-steam-login:hover{
	border-color:#0099ff;transform:translateY(-3px);
	box-shadow:0 8px 26px rgba(0,153,255,.45);
}
.cs-steam-login:active{transform:scale(.96);}
.cs-steam-ico{display:inline-block;font-size:22px;transition:transform .25s ease;
	animation:csIconFloat 2.6s ease-in-out infinite;}
.cs-steam-login:hover .cs-steam-ico{transform:rotate(-14deg) scale(1.2);}
body.cs-dark-mode .cs-steam-login{
	background:linear-gradient(135deg,rgba(94,200,255,.12),rgba(94,200,255,.03));
	color:#eafcff !important;border-color:rgba(94,200,255,.4) !important;
}
body.cs-dark-mode .cs-steam-login:hover{border-color:#5ec8ff !important;}
/* ============================================================ */

.cs-user-avatar{
	width:34px;height:34px;border-radius:50%;
	vertical-align:middle;margin-right:10px;
	border:2px solid rgba(0,229,255,.6);
	box-shadow:0 0 10px rgba(0,229,255,.35);
}
#cs-user-row .dropdown > a{
	display:inline-flex !important;align-items:center;
	padding:12px 22px !important;border-radius:14px;
	font-size:16px;font-weight:800;letter-spacing:.3px;
	background:rgba(0,153,255,.06);
	border:1px solid rgba(0,153,255,.3);
	box-shadow:0 4px 14px rgba(0,153,255,.1);
	transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#cs-user-row .dropdown > a:hover{
	transform:translateY(-3px);
	border-color:#0099ff;
	box-shadow:0 8px 24px rgba(0,153,255,.4);
}
body.cs-dark-mode #cs-user-row .dropdown > a{
	background:rgba(94,200,255,.08) !important;
	border-color:rgba(94,200,255,.3) !important;
	color:#eafcff !important;
}
body.cs-dark-mode #cs-user-row .dropdown > a:hover{
	border-color:#5ec8ff !important;
	box-shadow:0 8px 24px rgba(94,200,255,.45) !important;
}

/* ============================================================ */
/* ============ ШАПКА ОТДЕЛЬНЫМ БЛОКОМ (JuggerMi) ===============  */
/* ============================================================ */
#header{
	padding:24px 28px 18px 28px;
	margin:22px 0 16px 0;
	background:linear-gradient(180deg,#161c28 0%,#0f141d 100%);
	border:1px solid rgba(0,229,255,.22);
	border-radius:18px;
	box-shadow:0 10px 30px rgba(0,0,0,.4);
}
#header .container{width:100% !important;box-sizing:border-box;}
#nav{
	margin:0 0 26px 0;
	padding:0 28px;
	background:#fff;
	border:1px solid rgba(0,153,255,.25);
	border-radius:18px;
	box-shadow:0 10px 26px rgba(0,0,0,.08), 0 0 30px rgba(0,153,255,.10);
}
body.cs-dark-mode #nav{
	background:linear-gradient(180deg,#12161f 0%,#0d1017 100%) !important;
	border-color:rgba(0,229,255,.22) !important;
	box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 40px rgba(0,229,255,.10) !important;
}
#nav .container{padding:12px 0;width:100% !important;box-sizing:border-box;}

/* --- Логотип: спокойное однотонное свечение вместо "детского" ---- */
.cs-logo-main{
	font-size:30px !important;
	font-weight:800 !important;
	letter-spacing:.5px;
	color:#5ff0ea !important;
	text-shadow:0 0 10px rgba(95,240,234,.55), 0 0 22px rgba(95,240,234,.25) !important;
}
.cs-logo-sub{
	font-size:10.5px !important;
	font-weight:600 !important;
	letter-spacing:4px;
	color:#5a7480 !important;
	text-shadow:none !important;
	opacity:.85;
}
.cs-logo-lockup img,.cs-logo-link .tile-ico{filter:none;}
/* приглушаем пульсацию свечения — было слишком "мигающе" */
.cs-logo-main{animation:none !important;}
/* ============================================================ */

.cs-logo-svg{
	vertical-align:-5px;margin-right:4px;
	filter:drop-shadow(0 0 6px rgba(95,240,234,.6));
}

.cs-logo-svg{
	vertical-align:-4px;margin-right:6px;
	filter:drop-shadow(0 0 6px rgba(95,240,234,.55));
}

#totop{text-align:right;}
.cs-footer-brand{display:inline-block;text-align:right;line-height:1;}
.cs-fb-ico{font-size:34px;vertical-align:-4px;margin-right:6px;
	filter:drop-shadow(0 0 6px rgba(0,153,255,.5));}
.cs-fb-jmi{
	font-size:42px;font-weight:900;letter-spacing:1px;
	color:#0099cc;
	text-shadow:0 0 6px rgba(0,153,255,.35),0 1px 1px rgba(0,0,0,.15);
	animation:csNeonPulseLight 3.2s ease-in-out infinite;
}
body.cs-dark-mode .cs-fb-jmi{
	color:#5ff0ea !important;
	animation-name:csNeonPulse !important;
}
@keyframes csNeonPulseLight{
	0%,100%{text-shadow:0 0 6px rgba(0,153,255,.35),0 1px 1px rgba(0,0,0,.15);}
	50%{text-shadow:0 0 10px rgba(0,153,255,.55),0 1px 1px rgba(0,0,0,.15);}
}
.cs-fb-play{
	font-size:26px;font-weight:700;letter-spacing:.5px;
	color:#0077aa;
	text-shadow:0 0 5px rgba(0,153,255,.3);
}
body.cs-dark-mode .cs-fb-play{
	color:#8ff2ff !important;
	text-shadow:0 0 8px rgba(95,240,234,.5) !important;
}
.cs-fb-sub{
	display:block;font-size:13px;font-weight:700;letter-spacing:4px;
	color:#ff8a00;text-shadow:0 0 8px rgba(255,138,0,.5);
	margin-top:-2px;
}
@keyframes csNeonPulse{
	0%,100%{text-shadow:0 0 10px rgba(95,240,234,.75),0 0 24px rgba(95,240,234,.4),0 0 44px rgba(95,240,234,.2);}
	50%{text-shadow:0 0 16px rgba(95,240,234,.95),0 0 34px rgba(95,240,234,.6),0 0 60px rgba(95,240,234,.3);}
}

/* ============================================================ */
/* ============ ДОПОЛНИТЕЛЬНОЕ ПОКРЫТИЕ ТЕКСТА (JuggerMi) =======  */
/* ============================================================ */
body.cs-dark-mode legend{
	color:#7fe8dc !important;border-color:#2a2f3a !important;
}
body.cs-dark-mode .alert{
	background:#161a22 !important;color:#eef4f7 !important;border-color:#2a2f3a !important;
}
body.cs-dark-mode .control-label,body.cs-dark-mode .help-block,
body.cs-dark-mode .checkbox,body.cs-dark-mode .radio,
body.cs-dark-mode p,body.cs-dark-mode span,body.cs-dark-mode div,
body.cs-dark-mode td,body.cs-dark-mode th,body.cs-dark-mode li{
	color:#eef4f7;
}
body.cs-dark-mode .muted,body.cs-dark-mode .text-muted,
body.cs-dark-mode small{color:#8a97a3 !important;}
body.cs-dark-mode .tooltip-inner{background:#161a22;color:#eef4f7;}
body.cs-dark-mode .popover{background:#161a22;color:#eef4f7;border-color:#2a2f3a;}
/* ============================================================ */

/* ============================================================ */
/* ============ ОТСТУП СВЕРХУ (лого убрано) + БЛОК ЛОГИНА =======  */
/* ============================================================ */
#nav{margin-top:22px;}
#cs-user-row{margin:0 0 26px 0;padding:0 28px;}
#cs-user-row .container{width:100% !important;box-sizing:border-box;padding:0;}

/* --- Красивые хлебные крошки --- */
/* ВНИМАНИЕ (JuggerMi): этот блок фактически глобальный (не только для
   десктопа) — см. заметку про открытую/закрытую @media выше по файлу.
   Поэтому .page-title/.breadcrumb обязаны сами уметь переноситься
   (flex-wrap:wrap), иначе на узких экранах последний пункт хлебных
   крошек ("Создать нового веб админа" и т.п.) вылезает за рамки
   круглой плашки вправо — это и был визуальный баг на мобилке. */
.page-title,.breadcrumb{
	display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;
	max-width:100%;box-sizing:border-box;
	padding:8px 16px !important;border-radius:16px;
	background:rgba(0,229,255,.06) !important;
	border:1px solid rgba(0,229,255,.25);
	font-size:12.5px;font-weight:600;
	margin-bottom:18px !important;
}
.page-title a,.breadcrumb a{color:#5ec8ff;text-decoration:none;}
.page-title a:hover,.breadcrumb a:hover{color:#ff8a00;}
.page-title .divider,.breadcrumb .divider{opacity:.4;padding:0 2px;}
.page-title .active,.breadcrumb .active{color:#7fe8dc;font-weight:800;}
/* ============================================================ */

/* ============================================================ */
/* ============ АНИМАЦИИ ЗНАЧКОВ (JuggerMi) =====================  */
/* ============================================================ */
@keyframes csIconFloat{
	0%,100%{transform:translateY(0);}
	50%{transform:translateY(-2px);}
}
#nav .container>.main-nav>li>a::before{
	display:inline-block;
	animation:csIconFloat 2.4s ease-in-out infinite;
}
#nav .container>.main-nav>li:nth-child(2) a::before{animation-delay:.15s;}
#nav .container>.main-nav>li:nth-child(3) a::before{animation-delay:.3s;}
#nav .container>.main-nav>li:nth-child(4) a::before{animation-delay:.45s;}
#nav .container>.main-nav>li:nth-child(5) a::before{animation-delay:.6s;}
#nav .container>.main-nav>li:nth-child(6) a::before{animation-delay:.75s;}
#nav .container>.main-nav>li>a:hover::before{
	animation:none;transform:scale(1.25) rotate(-6deg);
}
/* ============================================================ */

#cs-user-row ul.main-nav.pull-right,
#cs-user-row ul.main-nav.pull-right > li{
	list-style:none !important;margin:0;padding:0;
}

/* ============================================================ */
/* ============ КАРТОЧКА ОСНОВНОГО КОНТЕНТА (JuggerMi) ==========  */
/* ============================================================ */
#wrap{
	padding:0 28px 30px 28px;
	margin:0 0 26px 0;
	background:#fff;
	border:1px solid rgba(0,153,255,.2);
	border-radius:18px;
	box-shadow:0 10px 26px rgba(0,0,0,.08), 0 0 30px rgba(0,153,255,.08);
}
body.cs-dark-mode #wrap{
	background:linear-gradient(180deg,#12161f 0%,#0d1017 100%) !important;
	border-color:rgba(0,229,255,.2) !important;
	box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 40px rgba(0,229,255,.08) !important;
}
#wrap .container{width:100% !important;box-sizing:border-box;}
#wrap .container#page{padding-top:24px;}
#wrap .grid-view,#wrap table{width:100%;}
/* ============================================================ */

.cs-map-cell{display:flex;align-items:center;gap:8px;}
.cs-map-cell img{
	width:40px;height:24px;object-fit:cover;border-radius:4px;
	border:1px solid rgba(0,153,255,.3);
}

/* ============================================================ */
/* ============ УБРАЛ РАМКУ У БЛОКА "СОХРАНИТЬ" (JuggerMi) ======  */
/* ============================================================ */
.form-actions{
	background:transparent !important;
	border-top:none !important;
	padding:14px 0 !important;
	margin:18px 0 0 0 !important;
}
/* ============================================================ */

.cs-fv-line1,.cs-fv-line2{display:block;white-space:nowrap;}

/* ============================================================ */
/* ============ СТРАНИЦА "СЕРВЕРЫ": статистика под таблицей =====  */
/* ============================================================ */
#wrap .row-fluid > .span9:has(+ .span3){
	float:none;width:100% !important;
}
#wrap .row-fluid > .span9 + .span3{
	float:none;width:340px !important;margin:14px 0 0 auto !important;
}
/* ============================================================ */

/* ============================================================ */
/* ============ ТЁМНЫЙ РЕЖИМ ДЛЯ CDetailView (JuggerMi) ==========  */
/* ============================================================ */
body.cs-dark-mode table.detail-view,
body.cs-dark-mode .detail-view{background:transparent !important;}
body.cs-dark-mode table.detail-view tr.odd,
body.cs-dark-mode table.detail-view tr.even,
body.cs-dark-mode .detail-view tr.odd,
body.cs-dark-mode .detail-view tr.even{
	background:#161a22 !important;color:#eef4f7 !important;
}
body.cs-dark-mode table.detail-view td,
body.cs-dark-mode table.detail-view th,
body.cs-dark-mode .detail-view td,
body.cs-dark-mode .detail-view th{
	background:transparent !important;color:#eef4f7 !important;
	border-color:#2a2f3a !important;
}
/* ============================================================ */