/* -------------------------------------------------------------------------- */
/*                               Font Defenition                              */
/* -------------------------------------------------------------------------- */
@font-face {
	font-family: 'OpenSans';
	src        : url('../fonts/OpenSans-Regular.ttf');
}

@font-face {
	font-family: 'OpenSansBold';
	src        : url('../fonts/OpenSans-ExtraBold.ttf');
}

/* 
 * Webfont: פלוני
 * https://alefalefalef.co.il/ploni/
 */

@font-face {
	font-family: 'ploni';
	font-weight: 300;
	font-style : normal;
	src        : url('../fonts/ploni-light-aaa.woff2') format('woff2'),
		url('../fonts/ploni-light-aaa.woff') format('woff');
}

@font-face {
	font-family: 'ploni';
	font-weight: 400;
	font-style : normal;
	src        : url('../fonts/ploni-regular-aaa.woff2') format('woff2'),
		url('../fonts/ploni-regular-aaa.woff') format('woff');
}

@font-face {
	font-family: 'ploni';
	font-weight: 500;
	font-style : normal;
	src        : url('../fonts/ploni-medium-aaa.woff2') format('woff2'),
		url('../fonts/ploni-medium-aaa.woff') format('woff');
}

@font-face {
	font-family: 'ploni';
	font-weight: 600;
	font-style : normal;
	src        : url('../fonts/ploni-demibold-aaa.woff2') format('woff2'),
		url('../fonts/ploni-demibold-aaa.woff') format('woff');
}

@font-face {
	font-family: 'ploni';
	font-weight: 700;
	font-style : normal;
	src        : url('../fonts/ploni-bold-aaa.woff2') format('woff2'),
		url('../fonts/ploni-bold-aaa.woff') format('woff');
}

@font-face {
	font-family: 'ploni';
	font-weight: 800;
	font-style : normal;
	src        : url('../fonts/ploni-ultrabold-aaa.woff2') format('woff2'),
		url('../fonts/ploni-ultrabold-aaa.woff') format('woff');
}

@font-face {
	font-family: 'ploni';
	font-weight: 900;
	font-style : normal;
	src        : url('../fonts/ploni-black-aaa.woff2') format('woff2'),
		url('../fonts/ploni-black-aaa.woff') format('woff');
}

/* -------------------------------------------------------------------------- */
/*                                 General CSS                                */
/* -------------------------------------------------------------------------- */
:root {
	--accent-color    : #81c555;
	--main-color      : #0e2d6d;
	--darkerBlue-color: #1e417c;
	--grey            : #717b88;
	--darkGrey        : #717b8880;
	--red             : #c00000;
	--lightBlue       : #f2f4f7;
	--mintGreen       : #d6ecc7;
	--white           : #fff;
	--purple          : #9e009b;

	--primaryBlue-Ashdod  : #1E3C95;
	--grey-Ashdod         : #E5E5E5;
	--grey-tertiary-Ashdod: #92A3B8;
	--turquoise-Ashdod    : #1A94B2
}

* {
	margin     : 0;
	font-family: ploni;
	color      : var(--primaryBlue-Ashdod);
	box-sizing : border-box;
}

::placeholder {
	color  : var(--primaryBlue-Ashdod);
	opacity: 1;
}

.clicked {
	opacity: 0.5;
}

#slogan {
	font-size: 1rem;
}

/* -------------------------------------------------------------------------- */
/*                               focus behaviour                              */
/* -------------------------------------------------------------------------- */

/* a:has(span.radio):focus-visible { */
a:focus-visible {
	outline       : 2px solid var(--turquoise-Ashdod);
	outline-offset: 2px;
}

input:not([type='checkbox']):focus-visible {
	border-bottom : 1px solid var(--turquoise-Ashdod) !important;
	outline-offset: 2px;
	outline       : 2px solid white;
}

.regulations:focus-visible {
	outline       : 2px solid var(--turquoise-Ashdod);
	outline-offset: 2px;
}

button:focus-visible {
	outline-offset: 2px;
	outline       : 2px solid var(--turquoise-Ashdod);
}

/* -------------------------------------------------------------------------- */
/*                                    Form                                    */
/* -------------------------------------------------------------------------- */
.formTitle,
.otpForm .formTitle {
	font-size  : 36px;
	font-weight: 700;
	line-height: 36px;
	color      : var(--primaryBlue-Ashdod);
}

/* -------------------------------------------------------------------------- */
/*                                   ToolTip                                  */
/* -------------------------------------------------------------------------- */

.toolTip {
	position     : relative;
	height       : 22px;
	width        : 22px;
	display      : inline-grid;
	color        : var(--primaryBlue-Ashdod);
	border       : 0.09375rem solid var(--primaryBlue-Ashdod) !important;
	border-radius: 50%;
	align-content: center;
	justify-items: center;
	font-family  : serif;
}

.toolTip:hover,
.toolTip:focus {
	background-color: var(--mintGreen);
}

.toolTip:before {
	content         : attr(data-text);
	height          : fit-content;
	width           : max-content;
	background-color: var(--lightBlue);
	border          : 1px solid var(--borderGrey);
	box-shadow      : 0px 3px 6px #00000029;
	font-size       : 0.875rem;
	padding         : 1rem;
	position        : absolute;
	top             : 2.125rem;
	right           : 0.3rem;
	display         : none;
	z-index         : 1;
}

.toolTip:hover:before,
.toolTip:focus:before {
	display: block;
}

/* -------------------------------------------------------------------------- */
/*                                Error Message                               */
/* -------------------------------------------------------------------------- */
.notValid,
#leftSideEn .homeForm .notValid,
.errorMessage {
	color    : var(--red);
	font-size: 1.125rem;
}

.notValid {
	padding-top: 8px;
}

.errorMessage {
	padding-bottom: 5%;
}

/* -------------------------------------------------------------------------- */
/*                              background images                             */
/* -------------------------------------------------------------------------- */

/* --------------------------------- hebrew -------------------------------- */

#leftSideHe #backPic .image,
#leftSideHe .backPicOTP .image,
#rightSideEn #backPic .image,
#rightSideEn .backPicOTP .image {
	width           : 53.5vw;
	max-width       : 830px;
	/* height       : 84vh; */
	opacity         : 1;
	margin-bottom   : 1.375rem;
	display         : block;
}

/* --------------------------------- english -------------------------------- */
#rightSideEn #backPic,
#rightSideEn .backPicOTP {
	transform          : scaleX(-1);
	background-position: right top;
}

/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */
.footer {
	font-size: 1.125rem;
}

.footer .accessibilityState {
	text-decoration: underline;
}

#leftSideHe #logoBottom {
	padding-top : 1.3125rem;
	align-self  : flex-end;
	text-align  : left;
	padding-left: 4.25rem;
}

/* -------------------------------------------------------------------------- */
/*                                tablet design                               */
/* -------------------------------------------------------------------------- */
@media screen and (min-device-width: 541px) and (max-device-width: 1179px) {
	.loader {
		width : 50%;
		height: 50%;
	}

	.formTitle {
		font-size: 1.875rem;
	}

	#leftSideHe #backPic,
	#leftSideHe .backPicOTP,
	#rightSideEn #backPic,
	#rightSideEn .backPicOTP {
		display: none;
	}
}

/* -------------------------------------------------------------------------- */
/*                                mobile design                               */
/* -------------------------------------------------------------------------- */
@media screen and (max-device-width: 540px) and (orientation: portrait) {
	.loader {
		width : 50%;
		height: 50%;
	}

	input[type='text']:focus,
	input[type='tel']:focus,
	input[type='email']:focus {
		font-size: 16px !important;
	}

	/* ------------------------------- hebrew right side ------------------------------- */
	#slogan {
		display: none;
	}

	.formTitle {
		font-size: 1.875rem;
	}

	/* ------------------------------- hebrew left side ------------------------------- */
	#leftSideHe #backPic,
	#leftSideHe .backPicOTP,
	#rightSideEn #backPic,
	#rightSideEn .backPicOTP {
		display: none;
	}

	.footer {
		font-size: 1rem;
	}

	/* --------------------------------english left side ------------------------------- */
	.outerEn #rightSideEn {
		border-radius: 3.75rem 0;
	}

	#leftSideHe #logoBottom {
		display        : flex;
		justify-content: center;
		padding        : 0;
	}
}

/* --------------------------------- loader --------------------------------- */
.loader-backdrop {
	position: absolute;
	top     : 0;

	width : 100%;
	height: 100%;

	background-color: var(--white);
	opacity         : 0.7;

	display        : flex;
	justify-content: center;
	align-items    : center;
}

.loader {
	display        : flex;
	justify-content: center;
	align-items    : center;

	height  : 100vh;
	width   : 100%;
	position: absolute;
	top     : 0;
}