*{
	box-sizing: border-box;
}


.hideonpc { display: none; }
.hideonmobile { display: block; }


.clearfix {
	min-height: 60px;
	}


.topsearch {
	width: 100%;
	padding: 12px;
	position: relative;
	border-radius: 14px;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(34, 60, 80, 0.2);
	-moz-box-shadow: 0px 0px 10px 5px rgba(34, 60, 80, 0.2);
	box-shadow: 0px 0px 10px 5px rgba(34, 60, 80, 0.2);
	margin-bottom: 10px;
	position: sticky; 
	top: 40px; 
	z-index: 99; 
}

.topsearch form {
	padding: 0px;
	margin: 0;
}


body {
	height: 100vh;
	background: #fff;
	color: #000;
	padding: 0;
	margin: 0;
	line-height: inherit;
	font-family: "Inter Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.grayblock {
	background-color: rgba(0, 0, 0, 0.6);
	min-height: 100vh;
	padding-bottom: 4rem;
	border-radius: 0rem 0rem 1rem 1rem;
}

.mainblock {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	text-align: center;
	padding-top: 6rem;
	padding-bottom: 6rem;
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
}

.maintext {
	font-size: 4.2rem;
	line-height: 1;
	color: #fff;
	font-weight: 700;
}

.atext {
	font-size: 3rem;
	line-height: 1;
	color: #000;
	font-weight: 700;
}


.labelfont {
	font-size: 1.875rem;
	line-height: 2.25rem;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
	margin-bottom: 1rem;
}

.subtext {
	font-size: 1.25rem;
	line-height: 1.75rem;
	color: rgba(255, 255, 255, 0.8);
	max-width: 42rem;
	margin-bottom: 3rem;
	margin-left: auto;
	margin-right: auto;
}

.mainlogin {
	max-width: 28rem;
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 1rem;
	margin-left: auto;
	margin-right: auto;
	padding: 2rem;
	-webkit-box-shadow: 2px 18px 26px -9px rgba(34, 60, 80, 0.28);
	-moz-box-shadow: 2px 18px 26px -9px rgba(34, 60, 80, 0.28);
	box-shadow: 2px 18px 26px -9px rgba(34, 60, 80, 0.28);
}

.sublogin {
	max-width: 100vw;
	overflow: hidden;
	min-height: auto;
	padding: 1rem 2rem;
	justify-content: center;
	align-items: center;
	display: flex;
	position: relative;
}

.welcome {
	color: rgb(17, 24, 39);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 2rem;
	text-align: center;
	margin-bottom: 0.5rem;
}

.subwelcome {
	color: rgb(107, 114, 128);
	font-size: 0.875rem;
	line-height: 1.25rem;	
	text-align: center;
	margin-bottom: 1.5rem;
}

.infoblock {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	margin-left: auto;
	margin-right: auto;
	padding-top: 3rem;
	padding-bottom: 3rem;
	background-image: linear-gradient(to bottom right, #FFF7EC , #eff6ff);
	color: #000;
}

.actblock {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	margin-left: auto;
	margin-right: auto;
	padding-top: 3rem;
	padding-bottom: 3rem;
	text-align: center;
	background-image: linear-gradient(to bottom right, #FFF7EC , #eff6ff);
	color: #000;
}


.textgray {
	color: rgb(75, 85, 99);
	font-size: 1.25rem;
	line-height: 1.75rem;
	margin-bottom: 2rem;
}
.ebutton {
	background-color: rgb(59, 130, 246); 
	color: #fff; 
	font-weight: bold; 
	border-radius: 0.5rem; 
	border-width: 0; 
	padding: 0.8rem 1.5rem;
	text-decoration: none;
}


.uavatar {
	background-size: cover; 
	background-repeat: no-repeat; 
	background-position: center; 
	width: 60px; 
	height: 60px; 
	border-radius: 50%;
}


.ebutton:hover {
	background-color: rgb(68, 139, 255); 
	color: #fff; 
}



.around {
	border: 2px solid #fff;
	border-radius: 16px;
	padding: 8px 12px;
	font-size: 20px;
	text-decoration: none;	
	font-weight: bold;
	color: #fff;
}

.blink { animation: blink 2s infinite; }
@keyframes blink {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}

.ramka-3 {
	border: 2px solid red;
	animation: fblink 3s infinite;
}


.around:hover {
	border: 2px solid #009A46;
	border-radius: 16px;
	padding: 8px 12px;
	font-size: 20px;
	text-decoration: none;	
	font-weight: bold;
	color: #009A46;
}

.report {
	background-color: red;
	padding: 8px 16px;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
}
.tform_label {
	padding: 8px;
	text-align: right;
	max-width: 100px;
	font-size: 14px;
}
.tform_field {
	padding: 8px;
}	


.logo {
	display: inline-block; 
}

.logo img {
	height: 48px;
	padding: 0 8px;
}


.has-tooltip {
	border: none; 
	background-color: rgba(0,0,0,0); 
	height: 16px;
	font-weight: bold;
}

.avatar-mini {
	display: inline-block; 
	border-radius: 20px; 
	margin-top: 4px; 
	border: 1px solid black; 
	padding: 6px; 
	width: 40px; 
	min-height: 40px; 
	height: 40px; 
	background-size: cover; 
	background-position: center;
}

.logins {
	display: inline-block; 
	width: 110px; 
	text-align: right; 
	margin-top: 8px; 
	height: 30px; 
	vertical-align: top;
}

.menu {
	display: inline-block; 
	vertical-align: top;
}

.mobiletop {
	min-height: 0px;
}


.page-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 48px;
    z-index: 1142;
    background-color: #fff;
    box-shadow: 0 0.06rem 0.4rem rgb(0 0 0 / 25%);
}

.headerblock {
	display: inline-block;
	font-size: 1.5rem;
	font-family: Overpass-SemiBold,Overpass;
	font-weight: 600;
	height: 1.5rem;
	color: #000;
	margin-bottom: 0.2rem;
}

.editdata {
	width: 100%;
}

.editdata td {
	padding: 4px;
}

.eventblock {
	width: 100%; 
	border: 1px solid #aaa; 
	margin-top: 10px; 
	padding: 6px; 
	text-align: left;
	box-shadow: 0 0.06rem 0.4rem rgb(0 0 0 / 25%);
}

.eventblock:hover {
	box-shadow: 0 0.06rem 0.6rem rgb(0 0 0 / 55%);
}

.page-header-nav {
	position: ABSOLUTE;
	position: fixed;
	top: 0px;
	vertical-align: top;
	right: 5px;
	display: block;
	color: #000;
}

.errormessage {
	color: #fff; 
	background-color: red; 
	padding: 15px 20px; 
	width: 100%; 
	font-size: 16px; 
	font-weight: bold;
}
.okmessage {
	color: #fff; 
	background-color: green; 
	padding: 15px 20px; 
	width: 100%; 
	font-size: 16px; 
	font-weight: bold;
}

.rounds {
	text-decoration: none; 
	border: 1px solid #888; 
	border-radius: 16px; 
	margin-right: 10px;
	padding: 2px 18px;
	white-space: nowrap;
	display: inline-block;
	margin-bottom: 5px;
	background-color: rgba(0,0,0,0.85);
	color: #fff;
}


.tstat { width: 100%; font-size: 13px; }
.tstat tr { border-bottom: 1px dotted #888; }
.tstat td { padding: 1px 0px; }
.tname { text-align: left; }
.tvalue { width: 50px; text-align: right; }


.header {
  position: fixed; 
  background: #000; 
  width: 100%; 
  top: 0;
  left: 0;
  padding: 0px; 
  margin: 0;
  z-index:100;
  border-bottom: 2px solid #555;
  -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
  box-shadow: 0px 5px 10px 5px rgba(34, 60, 80, 0.2);
}


.block_stat {
	text-align: left; 
	font-size: 16px;
	padding-top: 20px;"
}

.monblock {
	flex: 1 1 16%; 
	border: 1px solid #888; 
	border-radius: 20px; 
	padding: 2px 4px;
}
.monname {
	text-align: right; 
	font-weight: bold;
	background-color: green; 
	color: #fff; 
	padding: 4px 6px; 
	width: 100px; 
	Border-radius: 20px 0 0 20px;
}
.monvalue {
	font-weight: bold; 
	padding: 4px 6px; 
	text-align: right; 
	Border-radius: 20px 0 0 20px;
}

.c_template {
	display:table; 
	width: 100%;  
	margin-top: 20px;
}

.c_block { 
	display: table-cell; 
	text-align: left;
	vertical-align:top; 
	height: 100%; 
	border: none;
}


.c_content { 
	width: 77%; 
	vertical-align: top; 
	padding: 0 10px 10px 0; 
}

.c_right {
	width: 23%;
}

.c_template { display: flex; }
.c_block { display: inline-flex; }

@media (max-width: 420px) {
	.c_template { display: block; }
	.c_block { display: block; width: 100%; }
	.modulename { font-size: 10px }
}
@media (max-width: 760px) {
	.c_template { display: block; }
	.c_block { display: block; width: 100%; }
	.modulename { font-size: 10px }
}


.header a:hover {
	background-color: #666;
	color: #fff;
}



form, h2, p{
	width: 100%;
}

.contain-2col {
	width: 49%; 
	min-width: 380px; 
	display: inline-block; 
}

.contain-imagebox {
	background-image: url(../images/racer.png); 
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center; 
	height: 500px;
}

.topblocha {
	min-height: 520px;
	background: #009A46 url(../images/greens.png) no-repeat 50% 0%;
	width: 100%;
	padding-top: 44px;
	position: relative;
	text-align: center;
	color: #fff;
}


.noobook {
	left: 87px;
	top: 47px;
	visibility: visible;
	width: 100%;
	text-align: center;
	z-index: -999999;
}

.topblochb {
	height: 178px;
	width: 100%;
	background: url(../images/keys_test_line.png) no-repeat top center;
	background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	position: absolute;
	bottom: 0;
	color: #fff;
}

.around {
	border: 2px solid #fff;
	border-radius: 16px;
	padding: 8px 12px;
	font-size: 20px;
	text-decoration: none;	
	font-weight: bold;
	color: #fff;
}

.around:hover {
	border: 2px solid #009A46;
	border-radius: 16px;
	padding: 8px 12px;
	font-size: 20px;
	text-decoration: none;	
	font-weight: bold;
	color: #009A46;
}



.topblochc {
	background: #262E38;
	min-height: 100px;
	width: 100%;
	color: #fff;
	padding-bottom: 38px;
}

.topblochd {
	background: #fff;
	min-height: 100px;
	width: 100%;
	color: #000;
	padding: 68px;
	font-size: 18px;
	text-align: justify;
}


.toptextbloch {
	color: #fff;
	padding:30px;
}


blockquote {
	font-style: italic;
	color: #888;
	margin: 20px 0 20px 45px;
	border-left: 5px solid #bbb;
	padding-left: 20px;
	line-height: 1.4em;
	position: relative;
	text-align: justify;
}

blockquote:before {
    content: '"';
    position: absolute;
    left: -45px;
    top: 10px;
    color: #bbb;
    font-size: 75px;
}



.page-title {
    width: 100%; 
    height: 400px; 
    padding: 0px;
    margin-top: 0px;
    background: url('../images/header.jpg') no-repeat; 
    background-size: cover; 
    background-position: center;
    vertical-align: middle; 
    text-align: center;
}

.page-title h1, .page-title h2, .page-title h3 {
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px black, 0 0 1em #000;
}

h1 {
   margin-top: 10px;
   font-size: 24px;
   font-family: Comic;
   font-weight: bold;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
}

.news-block {
    min-height: 500px; 
    vertical-align: middle; 
    text-align: left;
    width: 100%;
    z-index: 10;
    background-image: url("/images/mountain-bg-opt.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    top: 0;
    left: 0;
}

.news-block img {
    width: 100%;
    display: block;
    position: absolute;
    bottom: -60px;
    opacity: 0.8;
    left: 0;
    margin:0;
    padding: 0; 
    z-index:200;
}


.info-block {
	width: 100%; 
	height: 400px; 
	background: #fff;
	position: relative;
	vertical-align: middle; 
	text-align: right;
}

.info-block h1 {
   font-family: impact;
   border-bottom: 4px solid rgba(90,209,88,1);
   font-weight: bold;
}

.info-block-text {
    display: block;
    width: 50%; 
    position: absolute;
    right:20px;
    top: 30px;
    min-width: 370px;
}


.backs {
    display: block;
    position: absolute;
    bottom: 0px;
    height: 500px;
    opacity: 0.8;
    left: 0;
    margin:0;
    padding: 0; 
    z-index:100;
}


.black-block {
    width: 100%; 
    height: 500px; 
    position: relative;
    vertical-align: middle; 
    text-align: left;
    background-color: #273137;
    color: #fff;
}

.black-block h1 {
   font-family: impact;
   padding-top:0;
   border-bottom: 4px solid rgba(90,209,88,1);
   color: #fff;
}

.black-block-text {
   display: block;
   width: 95%; 
   position: absolute;
   top: 30px;
   left: 15px;
   min-width: 370px;
   color: #fff;
}

.black-block img {
    width: 100%;
    display: block;
    position: absolute;
    top: -90px;
    opacity: 0.8;
    left: 0;
    margin:0;
    padding: 0; 
    z-index:200;
}

.green-button, .blue-button, .gray-button, .red-button, .download-button, .delete-button {
	padding: 5px 15px; 
	text-decoration: none; 
	font-weight: bold;
	font-size: 14px;
	color: #fff;
	border-radius: 8px;
	text-align: center;
	margin: 0 5px;
	box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #000;
}

.green-button    {background: rgb(19,145,8);    background: linear-gradient(0deg, rgba(19,145,8,1) 35%,  rgba(90,209,88,1) 100%);}
.blue-button     {background: rgb(106,128,207); background: linear-gradient(0deg, rgba(62,68,163,1) 35%, rgba(106,128,207,1) 100%);}
.gray-button     {background: rgb(122,122,122); background: linear-gradient(0deg, rgba(60,60,60,1) 35%,  rgba(200,200,200,1) 100%);}
.red-button      {background: rgb(19,145,8);    background: linear-gradient(0deg, rgba(19,145,8,1) 35%,  rgba(90,209,88,1) 100%);}
.download-button {background: rgb(19,145,8);    background: linear-gradient(0deg, rgba(19,145,8,1) 35%,  rgba(90,209,88,1) 100%);}
.delete-button   {background: rgb(194,0,0);	background: linear-gradient(0deg, rgba(194,0,0,1) 0%,    rgba(255,0,0,1) 100%);}


.green-button:hover, .blue-button:hover, .gray-button:hover, .red-button:hover, .download-button:hover, .delete-button:hover {
	color: #bbb;
}

.rate-block div {
	width: 33%;
}

.trackblock {
	display: inline-block; 
	text-align: left; 
	width: 100%; 
	min-width: 340px;
	vertical-align: top; 
	border: 1px solid #ddd; 
	border-radius: 14px; 
	padding: 10px; 
	margin-top: 10px;
	box-shadow: 0px 0px 5px 0px rgba(34, 60, 80, 0.78);
	background: #fff;
	background-size: cover;

}

.trackblock img {
	height: 65px; 
	float: left; 
	padding-right: 10px;
}

.totalgroup {
	margin: auto;
	width: 100%; 
	text-align: right;
}

.totalblock {
	display: inline-block; 
	padding: 10px 15px; 
	border-right: 1px solid #aaa; 
}

label {
	font-size: 14px;
	text-align: left;
	font-style: normal; 
	font-weight: 400; 
	padding: 0; 
	margin: 0 0 0 6px
}

.textheader {
	vertical-align: top; 
	display: inline-block; 
	padding: 5px; 
	width: 95%;
}

.container {
	vertical-align: top; 
	width: 100%;
}

.avatar-container {
	vertical-align: center; 
	text-align: center;
	width: 29%; 
	display: inline-block;
}

.avatar-block {
	vertical-align: top; 
	padding: 5px; 
	border: 1px solid black; 
	width: 250px; 
	height: 250px; 
	border-radius: 125px; 
	text-align: center;
	margin-bottom: 20px;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
}

.avatar {
	width: 240px; 
	height: 240px;
	background-size: cover;
	background-position: center;
	border-radius: 120px; 
}

.user-block {
	vertical-align: top; 
	display: inline-block; 
	padding: 5px; 
	width: 35%;
}

blockquote {
	font-style: italic;
	color: #888;
	margin: 20px 0 20px 45px;
	border-left: 5px solid #bbb;
	padding-left: 20px;
	line-height: 1.4em;
	position: relative;
	text-align: justify;
}

blockquote:before {
    content: '"';
    position: absolute;
    left: -45px;
    top: 10px;
    color: #bbb;
    font-size: 75px;
}

.yamaps {
	width: 70%; 
	height: 500px;
	border: 1px solid black;
	display: inline-block;
	vertical-align: top;
}

.mapdata {
	width: 29%;
	padding: 0 10px;
	display: inline-block;
	vertical-align: top;
}


div block1 {
	padding: 0px 0 0px 0;
	background-size: 100% 100px;
	background-repeat: no-repeat;
	width: 100%;
	background-color: #fff;
	background-position: bottom;
}

section.publicline {
	display: table;
}


div.imageblock {
	min-width: 370px; 
	width: 49%;
	margin: auto auto;
	padding: 20px;
	display: table-cell;
	vertical-align: middle;
}

div.textblock {
	width: 49%;
	min-width: 370px; 
	padding: 20px; 
	vertical-align: top; 
	text-align: left;
	display: table-cell;
	font-size: 18px;
	vertical-align: middle;
}

h5 {
	font-family: Droid Sans;
	font-size: 45px;
	line-height: 0.9;
	color: #8B4513;
	font-weight: bold;

}

.finput {
	width: auto; 
	font-size: 16px; 
	border: 1px solid #888; 
	padding: 4px 8px; 
	display: block;
}

.finput:hover {
	box-shadow:0px 0px 5px 0px rgba(0,0,0,0.67);
}


.search {

}

.search div {
	padding: 30px 0;
}

.search form {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.search input {
	height: 42px;
	padding-left: 10px;
	border: 2px solid #7BA7AB;
	border-radius: 5px;
	outline: none;
	color: #9E9C9C;
}

.search button {
	position: absolute; 
	top: 0;
	right: 0px;
	width: 42px;
	height: 42px;
	border: none;
	background: #7BA7AB;
	border-radius: 0 5px 5px 0;
	cursor: pointer;
	padding:0;
}

.search button:before {
	content: "\f002";
	font-family: FontAwesome;
	font-size: 16px;
	color: #F9F0DA;
}



.tabs {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.tabs>input[type="radio"] {
	display: none;
}

.tabs>div {
	display: none;
	padding: 10px 0;
	font-size: 18px;
}




#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3,
#tab-btn-4:checked~#content-4 {
	display: block;

}



#tab-l-1:checked~#leader-1,
#tab-l-2:checked~#leader-2,
#tab-l-3:checked~#leader-3,
#tab-l-4:checked~#leader-4 {
	display: block;
}



#tab-2-1:checked~#track-1,
#tab-2-2:checked~#track-2,
#tab-2-3:checked~#track-3,
#tab-2-4:checked~#track-4,
#tab-2-5:checked~#track-5,
#tab-2-6:checked~#track-6,
#tab-2-7:checked~#track-7,
#tab-2-8:checked~#track-8,
#tab-2-9:checked~#track-9,
#tab-2-10:checked~#track-10,
#tab-2-11:checked~#track-11,
#tab-2-12:checked~#track-12 {
	display: block;
}


.tabs>label {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	background-color: none;
	border: 2px solid #009A46;
	padding: 4px 12px;
	font-size: 16px;
	line-height: 1.5;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
	cursor: pointer;
	position: relative;
	top: 1px;
	width: 24%;
}

.tabs>label:not(:first-of-type) {
	border-left: none;
}

.tabs>input[type="radio"]:checked+label {
	background-color: #fff;
	border-bottom: 1px solid #fff;
}

.trackimage {
	width: 160px; 
	height: 100%; 
	margin: auto auto;
}

.mobilename {
	display: none;
}

.pcname {
	display: block;
	width: 100%;
	font-size: 12px;
	padding: 0;
	margin: 0;
}



.imgblock {
	width: 150px;
}

.mobiletrackblock {
	display: none;
}
.mobilerateblock {
	display: none;
}


.pcrateblock {
	display: block;
	width: 100%;
	border: 1px solid #333;
	padding: 8px;
}

.avatar-left {
	display: inline-block; 
	border-radius: 24%; 
	margin-top: 4px; 
	border: 3px solid #009A46; 
	padding: 6px; 
	width: 48px; 
	min-height: 48px; 
	height: 48px; 
	background-size: cover; 
	background-position: center;
}

.statinfo {
	width: 100%; 
}


.hglines {
	background: linear-gradient(to right, #333, transparent 35%, transparent 65%, #eee);
	width: 100%;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
}


.widget {
	font-family: 'Roboto', sans-serif;
	text-align: left;
	color: #fff;
}

.widget h3 {
	margin-bottom: 20px;
	text-align: center;
	font-size: 20px;
	font-weight: normal;
	color:  #424949;
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	color: #fff;
}

.widget li {
	border-bottom: 1px solid #eaeaea;
	padding-bottom: 10px;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
}

.widget li:hover {

}

.widget li:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.widget a {
	text-decoration: none;
	color: #fff;
	display: inline-block;
}

.widget li:before {
	font-family: FontAwesome;
	font-size: 20px;
	vertical-align:bottom;
	color: #dd3333; 
	margin-right: 14px;
}


.dayblock {
	border: 1px solid black;
	padding: 8px;
	width: 14%;
	display: inline-block;
	min-height: 220px;
	vertical-align: top;
}

.netpageheader {
	width: 100%;
	background-image: url(../images/netheader.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 270px;
	border-radius: 28px 28px 0 0;
	margin-top: -30px;
}

.netpagetitle {
	width: 100%;
	margin-left: 0;
	position: relative;
}

.nettitle {
	font-weight: bold;
	font-size: 26px;
}

.dayofmonth {
	font-weight: bold;
	font-size: 48px;
	width: 100%;
	text-align: center;
}

.monthblock {
	margin-top: 20px;
	width: 100%;
	background-color: #333;
	color: #fff;
	font-weight: bold;
	padding: 8px;
}

.toolpanel {
	width: 200px;
	position: absolute;
	right: 12px;
	bottom: 18px;
	text-align: right;
}


.calend {
	width: 100%;
}

.tt {
	width: 100%;
	font-size: 16px;
}

.tt tr {
	border-bottom: 1px solid #333;
}
.tt td {
	text-align: right;
	font-weight: bold;
}
.tl {
	text-align: left;
}


@media screen and (max-width: 420px) {
	.hideonpc { display: block }
	.hideonmobile { display: none; }

	h5 {font-size: 25px;}
	div.imageblock {display: inline-block;}
	div.textblock {display: inline-block;}

	.avatar-left { display: none; }
	.hideonmobile {	visibility: hidden; }
	.hidemodule { visibility : hidden; }

	.avatar-container { width: 90%; }
	.user-block { width: 90%; }

	.yamaps { width: 90%; }
	.mapdata { width: 90%; }

	.imgblock {
		width: 100%;
		padding: 0;
		margin: 0;
	}

	.mobilename {
		display: block;
		width: 100%;
		font-size: 12px;
		padding: 0;
		margin: 0;
	}

	.pcname {
		display: none;
	}

	.mobiletop { min-height: 40px; }
	.page-title { height: 450px; }

	.backs {
		width: 100%;
		opacity: 0.4;
	}

	.black-block img { bottom: -160px; }
	h1 { font-size: 32px; }
	h2 { font-size: 26px; }
	h3 { font-size: 24px; }


	.pcrateblock {
		display: none;
	}

	.mobilerateblock {
		display: block;
		width: 100%;
		background-color: #fff;
	}


	.trackimage {
		min-width: 340px;
		width: 100%; 
		height: auto; 
		margin: auto auto;

	}

	.footer a {
		font-size: 18px;
	}

	.contain-2col {
		width: 100%; 
		min-width: 350px; 
	}

	.contain-imagebox {
		max-height: 310px;
		background-image: url(../images/racer.png); 
		background-repeat: no-repeat; 
		background-size: contain; 
		background-position: center; 
	}

	form, h2 {
		margin-left: 0px;
	}


	.form-control {
		max-width: 340px;
	}

	.trackblock {
		display: none; 
		width: 100%;
		border: none;
		max-width: 370px;
	}

	.mobiletrackblock {
		display: block;
		width: 100%;
		background-color: #fff;
		border-bottom:1px solid #888;
	}

	.trackblock img {
		width: 320px;
		margin: auto;
		float: bottom;
		height: auto; 
		padding-right: 2px;
	}

	.page-header {
		width: 95%;
		box-shadow: none;
	}
	
	.hideonmobile {
		visibility: hidden;
	}


}

.tbutton {
	width: 100%;
	padding: 6px 20px;
	text-decoration: none;
	border: 1px solid #333;
	border-radius: 20px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 5px;
}

.btype {
	width: 100%; 
	padding: 6px 4px; 
	border-radius: 5px; 
	background-color: #F1ddF1;
}

.tsbutton {
	width: 100%;
	padding: 6px 20px;
	text-decoration: none;
	border: 1px solid #333;
	border-radius: 20px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 5px;
}
.tbutton:hover {
	background-color: #ddd;
	color: #000;
}
.tsbutton:hover {
	color: #aaa;
}

.forpost {
	width: 100%;
	background-image: url(/images/tlogo.png); 
	background-repeat: no-repeat; 
	background-position: top 10px right 10px; 
	background-size: 46px;
	padding: 12px;
	position: relative;
	border-radius: 14px;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(34, 60, 80, 0.2);
	-moz-box-shadow: 0px 0px 10px 5px rgba(34, 60, 80, 0.2);
	box-shadow: 0px 0px 10px 5px rgba(34, 60, 80, 0.2);
	margin-bottom: 10px;
}

.abonentblockheader {
	width: 100%; 
	text-align: center; 
	vertical-align: center; 
	background-color: #333; 
	color: #fff; 
	padding: 6px; 
	height: 48px; 
	border-radius: 16px 16px 0 0;
	font-size: 12px;
}


.abonentblock { display: inline-block; padding: 6px; max-width: 350px; width: 33%; vertical-align: top; font-size: 14px; background-image: url(/images/tlogo.png); background-repeat: no-repeat; background-position: bottom 110px center; background-size: 50%; }
.dayblock { min-width: 180px; max-width: 190px; }
.nettitle { text-align: center; }
.netpagetitle {	text-align: center; }
strong {font-weight: 800; }


@media screen and (max-width : 1024px) {
	.abonentblock { width: 49.5%; }
	.nettitle { font-size: 18px; }
}

@media screen and (max-width : 600px) {
	.abonentblock { width: 49.5%; }
	.nettitle { font-size: 16px; }
	.dayblock { min-width: 33%; }
	.abonentblock { max-width: 100%; width: 300%; vertical-align: top; font-size: 14px;}
}                                 

@media screen and (max-width : 420px) {
	.abonentblock { width: 99%; }
	.nettitle { font-size: 14px; }
	.dayblock { min-width: 50%; }
	.abonentblock { max-width: 99%; width: 99%; vertical-align: top; font-size: 14px;}
}

.pleft {
	width: 100%; 
	text-align: left; 
	border-bottom: 1px solid #aaa; 
	padding: 2px 10px;
	font-weight: 400;
}

.pleft:hover {
	background: #a6d5f7;
	-webkit-transition: all 0.3s ease;;
	-moz-transition: all 0.3s ease;;
	-o-transition: all 0.3s ease;;
	transition: all 0.3s ease;
}
.navpanel {
	width:100%; 
	margin-top: 10px; 
	padding: 10px ; 
	text-align: center; 
	background-color: #dfe3e5;
}

.topnav {
	position: absolute;
	top: 12px;
	right: 65px;
}

.searchline {
	width: 50%; 
	margin-left: 20px;
}

.t_title { 
	height: 10px; 
	min-height: 10px; 
	border: none; 
}

.addrpanel {
	width: 215px; 
	min-width: 210px; 
	text-align: left; 
	vertical-align: top;  
	padding-right: 10px;
	font-size: 15px;
}

.cbox {
	width: 100%;
	text-align: left;
	vertical-align: top;
}
.ctitle {
	width:100%; 
	font-size: 20px; 
	font-weight: bold; 
	text-align: center; 
	border-bottom: 3px solid #aaa;
}

.devblock {
	width: 10%;
	display: inline-block;
	border: 1px solid #000;
	vertical-align: top;
	margin-top: 10px;
	min-width: 499px;
	margin-right: 4px
}

.devheader {
	width: 100%;
	background-color: #f7e3c3;
	padding: 5px;
	position: relative;
	font-size: 14px;
}
.devdel {
	position: absolute;
	top: 5px;
	right: 5px;
}

.devport {
	width: 100%;
}
.devport table {
	width: 100%;
}
.devport td {
	border: 1px solid #888;
	padding: 2px 1px;
	text-align: center;
	font-size: 12px;
}

.devport th {
	border: 1px solid #888;
	padding: 2px 6px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	color: #fff;
	background-color: #888;
}



.mypopup {
  padding: 20px;
  font-family: Arial, sans-serif;
  font-size: 11pt;
  background: rgba(255, 255, 255, 0.85); 
  backdrop-filter: blur(8px);
  border-radius: 16px;
  position: absolute;
  color: #000;
}


#side-checkbox {
	display: none;
}
.side-panel {
    position: absolute;
    z-index: 999999;
    top: 0;
    left: -360px;
    background: #337AB7;
    transition: all 0.5s;   
    width: 190px;
    box-shadow: 10px 0 20px rgba(0,0,0,0.4);
    color: #FFF;
    padding: 20px 20px;
}
.side-title {
    font-size: 20px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #BFE2FF;
}
/* Оформление кнопки на странице */
.side-button-1-wr {
 	text-align: center; /* Контейнер для кнопки, чтобы было удобнее ее разместить */
}
.side-button-1 {
    display: inline-block;
}
.side-button-1 .side-b {
	margin: 10px;
	text-decoration: none;
	position: fixed;
	left: -10px;
	top: 45px;
	font-size: 20px;
	padding: 2px 4px;
	color: #FFF;
	font-weight: bold;
	font-family: 'Roboto', Тahoma, sans-serif;
	background: #337AB7;
	cursor: pointer; 
	border-radius: 0 12px 12px 0;
	z-index: 333;
}
.side-button-1 .side-b:hover,
.side-button-1 .side-b:active,
.side-button-1 .side-b:focus {
    color: #FFF;
}
.side-button-1 .side-b:after,
.side-button-1 .side-b:before {
    position: absolute;
    height: 4px;
    left: 50%;
    bottom: -6px;
    content: "";
    width: 0;
}
.side-button-1 .side-open:after, .side-button-1 .side-open:before {}
.side-button-1 .side-close:after, .side-button-1 .side-close:before {}
.side-button-1 .side-b:before { top: -6px; }
.side-button-1 .side-b:hover:after, .side-button-1 .side-b:hover:before {
    width: 100%;
    left: 0;
}
/* Переключатели кнопки 1 */
.side-button-1 .side-close { display: none; }
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-open { display: none; }
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-close { display: block; }
#side-checkbox:checked + .side-panel { left: 0; }

/* Оформление кнопки на панеле */
.side-button-2 {
	font-size: 30px;
	border-radius: 20px;
	position: absolute;
	z-index: 1;
	top: 0px;
	right: 2px;
	cursor: pointer;
	transform: rotate(45deg);
	color: #BFE2FF;    
	transition: all 280ms ease-in-out;    
}
.side-button-2:hover {
	transform: rotate(45deg) scale(1.1);    
	color: #FFF;
}



.switchblock {
	width: 510px;
	border: 1px solid #888;
	border-radius: 14px; 
	display: inline-block;
	margin-bottom: 10px;
	margin-right: 8px;
	font-size: 12px;
	vertical-align: top;
}




.switchblock:hover {
	-webkit-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.3);
	-moz-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.3);
	box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.3);	
}


.j_block {
	width: 100%;
}

.j_block td {
	font-size: 12px;
}


.switchinfo {
	width: 100%;
	display: block;
	background-color: #222;
	padding: 8px 10px;
	border-radius: 14px 16px 0 0; 
	position: relative;
}

.navright {
	position: absolute;
	right: 5px; 
	top: 5px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	opacity: 0.6;
	transition: opacity 1s ease-in-out;
}
.navright:hover {
	opacity: 1;
	transition: opacity 1s ease-in-out;
}
.voption {
	width: 100px; 
	font-weight: bold;
	border-bottom: 1px dotted #888;
}
.vvalue {
	border-bottom: 1px dotted #888;
}
.switchcontent {
	width: 100%;
}
.switchtable {
	width: 100%;
}
.switchtable th {
	background-color: #555;
	font-size: 10px;
	text-align: center;
	font-weight: bold;
}

.normal_port {
	color: #fff;
	border: 1px solid #888;
}

.low_balance {
	background-color: darkred;
	border: 1px solid #888;
	color: #fff;
}
.blocked {
	background-color: darkred;
	border: 1px solid #888;
	color: #fff;
}
.free_port {
	border: 1px solid #888;
	color: #fff;
}
.crash_port {
	color: #fff;
	background-color: #420000;
	text-align: center;
}


.footer {
	display: block;
	position: relative;
	bottom:0;
	left:0;
	width: 100%;
	text-align: center;
	border-top: 6px solid #008000;
	background-color: #273137;
	color: #fff;
	padding-bottom: 2px;
}

.footer p {
    padding: 4px;
}

.footer a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}


.jblock {
	min-width: 390px; 
	border: 1px solid #888; 
	display: inline-block; 
	margin-right: 1px; 
	margin-top: 10px; 
	vertical-align: top;
}

.comblock {
	margin-top: 0px;
}
.comblock table {
	width: 100%; 
	border: 1px solid #888;
}
.comblock td {
	text-align: center;
	font-size: 12px;
}

.kblock {
	width: 100%; 
	display: inline-block; 
	border: 1px solid #aaa; 
	border-radius: 16px; 
	padding: 10px;
	margin-bottom: 8px;
	text-align: left;
	font-size: 13px;
	position: relative;
	border-left: 4px solid lime;
	transition: background-color 0.5s ease;
}

.npage {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}
.npage:hover {
	color: #fff;
}

.pageblock {
	display: inline-block; 
	border: 1px solid #aaa; 
	padding: 2px 8px; 
	margin-right: 4px; 
	font-weight: bold;
	transition: background-color 0.5s ease;
	font-size: 14px;
}



.rates_table {
	width: 100%;
}

.comblock th {
	border: 1px solid #333;
	font-weight: bold;
	text-align: center;
	font-size: 10px;
}

.taddr {
	border: 1px solid #333;
	font-weight: bold;
}
.taddr:hover {
	background-color: #333;
	color: #fff;
}

.vform {
	width: 100%;
}

.vform td {
	padding: 6px 3px;
}


.kblock_nav {
	position: absolute;
	top: 8;
	right: 8;
	font-size: 16px;
}

.kblock:hover {
	background-color: #444;
}

.kblock_title {
	font-weight: 800;
	color: #978366;
}
.kblock a {
	text-decoration: none;
	color: #fff;
}

.nav-panel {
	width: 100%;
	text-align: left;
	margin-top: 8px;
	margin-bottom: 10px;
}

.adrblock {
	vertical-align: top; 
	padding-right: 10px; 
	width: 25%; 
	display: inline-block;
}

.adrblock table {
	width: 100%; 
	text-align: center; 
	font-size: 8px; 
	margin:0; padding: 0;
}
.adrblock a {
	text-decoration: none;
	color: #000;
}
.adrblock a:hover {
	color: #fff;
}

@media screen and (max-width : 1024px) {
	.jblock { min-width: 300px; width: 49.5%; }
}

@media screen and (max-width : 600px) {
	.jblock { min-width: 300px; width: 100%; }
}


@media screen and (max-width : 420px) {
	.jblock { min-width: 300px; width: 100%; }
}



@media screen and (max-width : 1024px) {

	.addrpanel {
		min-width: 190px; 
		max-width: 190px; 
		font-size: 10px;
	}
	.devblock {
		min-width: 75px;
		font-size: 10px;
		width: 100%;
	}
	.devport th {
		font-size: 6px;
	}
	.devport td {
		border: 1px solid #888;
		padding: 2px 1px;
		text-align: center;
		font-size: 9px;
	}
	.pleft {
		border-bottom: 1px solid #fff; 
		padding: 1px 0px;
	}
	.side-b { display: none; }

}

@media screen and (max-width : 420px) {
	.addrpanel { display: none; }
	.searchline { width: 80%; margin: 15px 0px; }
	.side-b { display: block; }
	.z-th {	font-size: 8px; }
	.z-td {	font-size: 12px; padding: 1px; }	

	.uavatar { width: 45px; height: 45px; }


	.LeftPanel {
		border-right-width: 0;
	}
	.mainblock {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	.mainlogin {
		max-width: 30rem;
		padding: 0rem;
	}
	.sublogin {
		padding: 1rem;
	}

	.welcome {
		font-size: 1.4rem;
	}
	.subwelcome {
		font-size: 1rem;
	}
	.subtext {
		font-size: 1.05rem;
		line-height: 1.55rem;
	}

	.actgrid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 0rem;
	}

	.tblock {
        	grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 0rem;
	}

	.footergrid {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	        grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 1rem;
		text-align: center;
	}
	.isform {
		height: 100vh;
		padding: 2rem 2rem;
		margin-top: auto;
		margin-bottom: auto;
	}


}



.outer{
border-radius: 50%;
 height:115px;
    width:115px;
    border:13px solid #e0e0e0;

}

.btn-timer{

    border-radius: 50%;
    position:relative;
    height:115px;
    width:115px;
    border:none !important;
    font-size:25px;
        
    background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );

    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}