.usersLoginForm, .usersLoginForm *{box-sizing:border-box;}
.usersLoginForm label span{
	font-weight:bold;
	margin:2%;
}
.usersLoginForm label input{
	width:96%;
	display:block;
	padding:2%;
	font-size:110%;
	border:thin solid rgba(0,0,0,.2);
	border-bottom:2px solid var(--main-color);
	margin:2%;
	border-radius:3px;
}
.usersLoginForm input[type="submit"]{
	width:50%;
	max-width:250px;
	text-align:center;
	margin:5% auto;
	display:block;
	color:var(--txtmain-color);
	background-color:var(--alt-color);
	font-size:110%;
	padding:2%;
	cursor:pointer;
	border:2px solid transparent;
	border-radius:3px;
}
.usersLoginForm input[type="submit"]:hover, .usersLoginForm input[type="submit"]:active, .usersLoginForm input[type="submit"]:focus{
	background-color:var(--txtmain-color);
	color:var(--alt-color);
	border-color:var(--alt-color);
}
.usersLoginForm div a, .usersLoginForm div a:visited{
	width:49%;
	display:inline-block;
	padding:2%;
	text-align:center;
}
.usersLoginForm label span i{
	color:rgba(0,0,0,.5);
	font-weight:normal;
	display:block;
	padding:1%;
	margin:1%;
	margin-bottom:0;
	padding-bottom:0;
}

.loginPassword {
    position: relative;
}
.loginPassword span{display:inline-block;}

.loginPassword input {
    padding: 2% 36px 2% 2%; /* jobb oldalt helyet hagyunk az ikonhoz */
}

/* A szem ikon */
.togglePassword {
    position: absolute;
    right: 14px;
    top: 28%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-size: cover;
    cursor: pointer;
    opacity: 0.6;
}

/* Nyitott szem ikon */
.togglePassword {
    background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="gray">\
<path d="M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 12a5 5 0 110-10 5 5 0 010 10z"/>\
<circle cx="12" cy="12" r="2.5"/>\
</svg>');
}

.togglePassword.show {
    background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="gray">\
<path d="M1 12s4.5-7.5 11-7.5 11 7.5 11 7.5-4.5 7.5-11 7.5S1 12 1 12zm11 4a4 4 0 100-8 4 4 0 000 8z"/>\
<line x1="4" y1="4" x2="20" y2="20" stroke="gray" stroke-width="2"/>\
</svg>');
}


/* ============================================================================ */

.usersRegForm, .usersRegForm *{box-sizing:border-box;}
.usersRegForm{text-align:center;}
.usersRegForm label span{
	font-weight:bold;
	margin:1%;
	width:38%;
	display:inline-block;
	vertical-align:top;
	text-align:left;
}
.usersRegForm label input, .usersRegForm label select{
	width:57%;
	display:inline-block;
	vertical-align:top;
	padding:1%;
	font-size:110%;
	border:thin solid rgba(0,0,0,.2);
	border-bottom:2px solid var(--main-color);
	margin:1%;
	border-radius:3px;
}
.usersRegForm label select{cursor:pointer;}
.usersRegForm label input:focus, .usersRegForm label input:hover, .usersRegForm label input:active,
.usersRegForm label select:focus, .usersRegForm label select:hover, .usersRegForm label select:active{
	box-shadow:0px 0px 10px var(--alt-color);
}
.usersRegForm input[type="submit"]{
	width:50%;
	max-width:250px;
	text-align:center;
	margin:5% auto;
	display:block;
	color:var(--txtmain-color);
	background-color:var(--alt-color);
	font-size:110%;
	padding:2%;
	cursor:pointer;
	border:2px solid transparent;
	border-radius:3px;
}
.usersRegForm input[type="submit"]:hover, .usersRegForm input[type="submit"]:active, .usersRegForm input[type="submit"]:focus{
	background-color:var(--txtmain-color);
	color:var(--alt-color);
	border-color:var(--alt-color);
}
.usersRegForm label span i{
	color:rgba(0,0,0,.5);
	font-weight:normal;
	display:block;
}
.usersRegForm .title{
	color:var(--main-color);
	text-align:left;
	margin-top:5%;
}
.usersRegForm .title:first-of-type{margin-top:0;}

/* ============================================================================ */

.usersName{
	text-align:center;
	padding-top:2%;
}
.usersMainUILinks{
	margin:10%;
	padding:0;
	list-style:none;
}
.usersMainUILinks li{
	display:block;
}
.usersMainUILinks li a, .usersMainUILinks li a:visited{
	width:auto;
	text-align:center;
	margin:1% auto;
	display:block;
	color:var(--txtmain-color);
	background-color:var(--alt-color);
	font-size:110%;
	padding:2%;
	cursor:pointer;
	border:2px solid transparent;
	border-radius:3px;
}
.usersMainUILinks li a:active, .usersMainUILinks li a:hover, .usersMainUILinks li a:focus{
	background-color:var(--txtmain-color);
	color:var(--alt-color);
	border-color:var(--alt-color);
}
.usersMainUILinks .usersLogout a, .usersMainUILinks .usersLogout a:visited{
	background-color:brown;
	color:white;
}
.usersMainUILinks .usersLogout a:active, .usersMainUILinks .usersLogout a:hover, .usersMainUILinks .usersLogout a:focus{
	background-color:white;
	color:brown;
	border-color:brown;
}
.usersTable{
	font-size:100%;
	border-radius:4px;
	overflow:hidden;
	box-shadow:0px 0px var(--shadow-size) var(--shadow-color);
}
.usersTable .termekek img{
	max-width:100% !important;
	max-height:150px !important;
}
.usersTable .termekek td{
	text-align:center;
}
.usersTable a, .usersTable a:visited{
	color:var(--main-color);
}
.usersTable tr th{
	text-align:center;
	border-bottom:thin solid rgba(55,55,55,.1);
	padding:6px 3px;
	color:#999999;
	font-weight:bold;
	background-color:var(--main-color);
	color:var(--txtmain-color);
}
.usersTable tr:last-of-type th{
	border:0;
}
.usersTable tr:nth-child(odd){
	background-color:rgba(255, 255, 255,.8);
	color:#555555;
}
.usersTable tr:nth-child(even){
	background-color:#ffffff;
	color:#555555;
}
.usersTable tr td{
	text-align:center;
	padding:2% 1%;
	border-bottom:thin solid rgba(55,55,55,.1);
}

.ugyfel_online_btns{
	flex:0 1 clamp(20ch,50%,50ch);
	/* max-width:270px; */
	justify-content:space-between;	
}