﻿@font-face {
        font-family: 'ploni';
        font-weight: normal;
        font-style: normal;
        src: url('Fonts/ploni.woff') format('woff'), 
        url('Fonts/ploni.woff2') format('woff2'), 
        url('Fonts/ploni.ttf') format('truetype'), 
        url('Fonts/ploni.eot') format('embedded-opentype'), 
        url('Fonts/ploni.svg') format('svg');
}
body,
.general-container {
	margin: 0;
	font-family: ploni;
	direction: rtl;
}

body *,
.general-container * {
	margin: 0;
	letter-spacing: 0;
}

.general-container.body-95vh,
.general-container.body-100vh {
	border: 1px red solid;
	overflow: hidden;
}
.general-container.body-95vh {
	height: calc(95vh - 2px);
}
.general-container.body-100vh {
	height: calc(100vh - 2px);
}

header {
	height:85px;
	box-shadow: 0 3px 20px -10px rgba(0,0,0,.1);
}


.d-flex {
	display: flex;
}
.height-30 {
	height: 30%;
}
.height-40 {
	height: 40%;
}
.height-50 {
	height: 50%;
}
.height-60 {
	height: 60%;
}
.height-100 {
	height: 100%;
}
.align-center {
	align-items: center;
}
.justify-left {
	justify-content: left;
}
.justify-right {
	justify-content: right;
}
.justify-center {
	justify-content: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}

.row {
	padding: 0 20px;
}
.col-3,
.col-4,
.col-6,
.col-8,
.col-12 {
	display: flex;
	flex: 0 0 auto;
}
.col-3 {
	width: 25%;
}
.col-4 {
	width: 33.3333333333%;
}
.col-6 {
	width: 50%;
}
.col-8 {
	width: 66.6666666667%;
}
.col-12 {
	width: 100%;
}
.gapped-5 {
	gap: 5%;
}
.gapped-10 {
	gap: 10%;
}


#main_content {
	height: calc(95vh - 191px);
	min-height: 430px;
}

#login_form {
	width: 100%;
}

#login_form span {
	position: relative;
/*	display: inline;*/
	display: block;
	min-height: 73px;
}
#login_form span::before {
	position: absolute;
/*	top: -2px;*/
	top: 20px;
	right: 0;
	min-width: 120px;
	line-height: 24px;
	font-weight: 300;
	font-size: 16px;
	color: #88807E;
	transition: 0.3s ease-in-out;
	pointer-events: none;
}

#login_form span.span-focused::before,
#login_form span.error::before,
#login_form span.success::before {
	top: 0;
	font-size: 12px;
}
#login_form span .error {
	display:none;
}
#login_form span.error .error {
	display:block;
	position: absolute;
	top: 58px;
	right: 0;
	min-width: 120px;
	font-size: 12px;
	color:#E01A33;
}
#login_form input {
	margin-bottom: 20px;
/*	padding: 0 0 10px 0;*/
	padding: 0;
	width: 100%;
	height: 50px;
	line-height: 24px;
	font-size: 16px;
	font-weight: 300;
	border: 2px solid transparent;
	border-bottom: 2px solid rgba(136,128,126,.5);
	border-radius: 0;
}
#login_form input:focus {
	border-bottom: 2px solid #5C64FF;
	outline: none;
}
#login_form span.error input {
	border-bottom: 2px solid #E01A33;
}

#login_form input.term-input-field {
	background: url('images/hypay/UI/ico-clcul.svg') no-repeat center left;
}
#login_form span[data-name="terminal-name"]::before {
	content: 'הזינו מספר מסוף';
}
#login_form input.user-input-field {
	background: url('images/hypay/UI/ico-user.svg') no-repeat center left;
}
#login_form span[data-name="user-name"]::before {
	content: 'הזינו שם משתמש';
}
#login_form span[data-name="password"]::before {
	content: 'הזינו סיסמא';
}
#login_form #pass_eye {
	position: absolute;
	left: 0;
/*	top: 0;*/
	top: 20px;
	width: 20px;
	height: 20px;
	border: 0;
}
#login_form #pass_eye,
#login_form #pass_eye.password-hidden {
	background: url('images/hypay/UI/ico-eye-hidden.svg') no-repeat center;
}
#login_form #pass_eye.password-visible {
	background: url('images/hypay/UI/ico-eye-visible.svg') no-repeat center;
}


@-moz-document url-prefix() {
	#login_form span::before,
	#login_form span.error .error {
		right: 3px;
	}

}

#main_content .pass-recovery-wrapper {
	display: flex;
	margin-top: 26px;
	padding: 0 10px;
	width: 100%;
	height: 50px;
	background:#F0F7FE;
	border-radius: 6px;
}
#main_content .pass-recovery-wrapper span {
	line-height: 19px;
	font-size: 13px;
	display: flex;
	align-self: center;
}
#main_content .pass-recovery-wrapper a {
	color:#5C64FF;
	font-weight: 700;

}


footer {
	height:106px;
	background: url('images/hypay/UI/group-14.svg') no-repeat bottom right;
}

footer button {
	width:300px;
	height:42px;
	font-size: 14px;
	color:#fff;
	background:#FF6B5C;
	border:0;
	border-radius:10px;
	transition: 0.5s ease-in-out;
}
footer button:hover,
footer button:active,
footer button:focus {
	background:#BE423A;
}

footer .footer-help-wrapper {
	position: relative;
	height:64px;
	color:#88807E;
	font-size: 13px;
	font-weight: 300;
}

footer #footer_help_trigger {
	padding-right: 20px;
	background: url('images/hypay/UI/ico-help.svg') no-repeat right;
}

footer #footer_help_content {
	position: absolute;
	z-index: 9;
	top: -30px;
	padding: 10px 0;
	width: 270px;
	text-align: center;
	color: #000;
	background-color: #fff;
	border-radius: 6px;
	transition: opacity .5s;
	box-shadow: 0 11px 20px -4px rgba(0,0,0,.1);
}


footer #footer_help_content::after {
  content: "";
  position: absolute;
  left: 168px;
  bottom: -15px;
  border-width: 8px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}



footer #footer_help_content.tooltip-hidden {
	display:none;
	opacity: 0;
}

