@import 'fonts/fonts.css';

body {margin: 0; padding: 0; }

body, td { font-family: 'helveticaneuecyrlight'; font-size: 16px; letter-spacing: 0.5px; }

a { color: #000; }
a:hover { color: #a0a0a0; }

.getcard {letter-spacing: 2px; text-decoration: none; border-bottom: 1px solid #a0a0a0;}

.header {margin: 50px 0 10px 0; border: 0px solid red;}
.logo {font-family: 'HelveticaNeueCyrUltralight'; font-size: 96px; letter-spacing: 2px; text-decoration: none; transition: 0.5s;}

.button {border: 1px solid #444; padding: 10px 15px 10px 15px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: #444; transition: 0.5s; background-color: #FFF; cursor: hand; cursor: pointer; -webkit-appearance: none; white-space:nowrap; line-height: 50px;}
input.button {
	line-height: normal;
}

input::placeholder {
	color: #DADADA;
}

.centerlogin { border: 0px solid red; width: 500px; height: 500px; position: absolute; left: 50%; top: 50%; margin: -250px 0 0 -250px; }
.fieldname {font-size: 14px; color: #a0a0a0; text-transform: uppercase; letter-spacing: 1px;}
.login {font-size: 18px; border: none; border-bottom: 1px solid #dadada; width: 240px; margin: 5px 0 10px 0;}
.code {font-size: 18px; border: 1px solid #dadada; width: 100px; margin: 5px 0 10px 0; text-align: center;}
.text {font-size: 18px; border: none; border: 1px solid #dadada; width: 240px; height: 100px; margin: 5px 0 10px 0;}
.select {padding: 5px; border: 1px solid #dadada; font-size: 16px; font-color: #a0a0a0;}
.error {color: red; font-size: 14px;}

.menu {padding: 10px 0 10px 0; vertical-align: top; border: 0px solid red;}
.menuitem {display: inline-block; width: 100px;  margin: 2px 2px 2px 2px; background-color: #fff; vertical-align: top; text-align: left; border: 0px solid red;}
.menulink {color: #000; text-decoration: none; font-size: 15px; line-height: 23px; letter-spacing: 1px; border-bottom: 1px solid #dadada;}

.menuitemseparator {display: inline-block; vertical-align: top;border: 0px solid red;}

.menuitemcard {display: inline-block; border: 1px solid #444; padding: 20px 4px 5px 4px; margin: 6px 5px 6px 5px; border-radius: 10px; background-color: #1e3559; width: 110px; height: 45px; vertical-align: top; transition: 0.5s;}

.menuitemcard.blocked {
	background-color: #dadada;
	border: 1px solid #AAA;
	color: #a0a0a0;
}
.menuitemcard:hover { background-color: #173b60; transform: scale(1.10) rotate(-10deg); transition: 0.5s; }
.menuitemcard:hover.blocked {
	background-color: #E0E0E0;
}

.cardname {text-decoration: none; color: #fff; font-size: 14px}
.cardnumber {font-size: 12px; color: #fff;}
.cardpercent {font-size: 12px; color: #fff; line-height: 20px; letter-spacing: 2px;}
.cardpercent.blocked {color: #a0a0a0 !important; }

.submenu {margin: 30px 0 0 0;}
.submenulink {font-size: 18px; text-decoration: none; border-bottom: 1px solid #dadada; color: #444;}
.submenulink.on {font-size: 18px; text-decoration: none; border-bottom: 0px solid #dadada; color: #a0a0a0;}

.mobilemenu { display: none; margin: 20px 0 5px 0; border: 0px solid red;}

/*Вывод контента*/

h1 { font-family: 'helveticaneuecyrlight'; font-size: 48px; letter-spacing: 2px; text-decoration: none;  font-weight: normal; font-style: normal; margin: 20px 0 10px 0; }

.cardtable { width: 100%; max-width: 520px; border: 0px solid red;}
.cardtable tr {}
.cardtable tr:hover {background-color: #fafafa;}
.cardtable td { padding: 5px 5px 5px 2px; font-size: 15px; border-bottom: 1px solid #eaeaea;}
.cardtable th {font-size: 13px; font-style: italic; font-weight: 0; vertical-align: top; padding: 5px 5px 5px 2px; letter-spacing: 0.5px;}

.titletd {display: inline-block; vertical-align: top; width: 160px; text-align: left; padding: 5px 0 5px 5px;}
.contenttd {display: inline-block; vertical-align: top; width: 300px; text-align: left; padding: 5px 0 5px 5px;}

.gray {font-size: 14px; color: #a0a0a0;}

/* add */
.error {
	opacity: 0;
	visibility: hidden;
}

.error.is-active {
	opacity: 1;
	visibility: visible;
}

.code-form,
.response {
	display: none;
}

.code-form.is-active,
.response.is-active {
	display: block;
}

.response {
	color: #808080;
	text-align: left;
	padding: 20px;
}

.response__main {
	color: #5d5d5d;
	text-align: center;
}

.response__balance {
	font-size: 30px;
}

.response__date {
	font-size: 18px;
}

.response__rules p,
.response__rules a,
.response__rules ul li {
	font-size: 15px;
}

.response__rules p {
	margin-bottom: .6rem;
}

.response__rules a {
	text-decoration: none;
	color: #5d5d5d;
	display: block;
}

.response__rules ul {
	padding-left: 14px;
	list-style-type: none;
}

.response__rules ul li {
	position: relative;
}

.response__rules ul li:before {
	position: absolute;
	content: '';
	left: -15px;
	top: .5em;
	width: 10px;
	height: 1px;
	background-color: currentColor;
}
/* /add */

@media screen and (max-width:560px) {
body, td  { font-size: 18px; }

.header {margin-top: 50px;}

.logo { font-size: 52px; transition: 0.5s; margin: 0; line-height: 21px; }
.login { font-size: 18px; width: 240px; transition: 0.5s;}

.centerlogin { width: 300px; height: 250px; position: absolute; left: 50%; top: 50%; margin: -175px 0 0 -150px; transition: 0.5s;}

.menu {display: none;}
.menuitemcard {margin-top: 0; margin-bottom: 10px;}
.menuitem {width: 90% !important;  height: 40px !important;  padding: 5px !important; border: 0px solid red;  transition: 0.5s; text-align: center;}
.menuitemseparator {display: none; }
.menulink {border: none;}

.mobilemenu {display: block;}

.cardtable th  {letter-spacing: 0;}

h1 {font-size: 32px;}

.button {margin: 10px 0 10px 0 !important;}
.gray {font-size: 13px; }
}

.no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance:textfield !important;
}

.raise_up {
	top: 45%;
}

input[type='number'] {
    -moz-appearance: textfield;
}