/* ---------------------------------------------------------------- */
/* *** *** */
/* ---------------------------------------------------------------- */

.lockerChoice_search
{
	background-color:	rgba(0, 0, 0, .15);
	backdrop-filter:	blur(5px);
	padding:			20px;
	box-sizing:			border-box;
	font-size:			32px;
}

.lockerChoice_search_input
{
	margin-top:			10px;
}

.lockerChoice_search_input INPUT 
{
	font-size:			18px;
	padding:			10px;
}

.lockerChoice_lists
{
	overflow:			auto;
	margin-top:			20px;
}

.lockerChoice_list
{
	background-color:	rgba(0, 0, 0, .15);
	backdrop-filter:	blur(5px);
	padding:			20px;
	box-sizing:			border-box;
	font-size:			32px;
	width:				50%;
	float:				left;
}

.lockerChoice_list A
{
	color:				white;
	text-decoration:	none;
}

#searchResult
{
	margin-top:			20px;
	font-size:			18px;
}

.resultItem
{
	font-size:			18px;
	padding:			10px;
}

.resultItem A
{
	text-decoration:	none;
	color:				white;
}

.resultItem A:hover
{
	text-decoration:	underline;
}

/* If the screen size is 1000px wide or less, ... */

@media only screen and (max-width: 1000px)
{
	.lockerChoice_list
	{
	 width:				100%;
	 margin-bottom:		20px;
	}
}

/* ---------------------------------------------------------------- */
/* *** *** */
/* ---------------------------------------------------------------- */

.lockerInfoPane
{
    position:				fixed;
    top:					0px;
    left:					50%;
    width:					800px;
    transform:				translateX(-50%);
}

.lockerInfoPane_client
{
	position:			absolute;
	right:				0px;
	top:				10px;
	margin-top:			10px;
	background:			white;
	color:				black;
	padding:			10px;
	border-radius:		10px;
	font-size:			15px;
	border:				5px solid #e7b142;
}

/* ---------------------------------------------------------------- */
/* */
/* ---------------------------------------------------------------- */

.stepTitle
{
	width:				800px;
	margin-top:			20px;
	margin-bottom:		20px;
	text-align:			center;
	color:				white;
	font-size:			32px;
	font-weight:		bold;
}

.choicheFrame
{
	border:				1px solid #a0a0a0;
	width:				200px;
	padding:			20px;
	border-radius:		10px;
	margin-bottom:		20px;
}

.choicheFrame:hover
{
	background-color:	rgb(236,6,119);
	color:				white;
}

.choicheFrame A
{
	text-decoration:	none;
	color:				black;
}

.choicheFrame A:hover
{
	color:				white;
}

.welcomeText
{
	margin-top:			50px;
	margin-bottom:		50px;
	line-height:		120%;
	font-size:			28px;
	font-weight:		bold;
	text-transform:		uppercase;
}

/* If the screen size is 1000px wide or less, ... */

@media only screen and (max-width: 1000px)
{
	.stepTitle
	{
	 width:				100%;
	}
}

/* ---------------------------------------------------------------- */
/* *** Buttons and controls *** */
/* ---------------------------------------------------------------- */

.buttonLink
{
	width:				300px;
	padding:			10px;
	border-radius:		10px;
	background-color:	#e7b142;
	color:				white;
	font-size:			22px;
	font-weight:		bold;
	cursor:				pointer;
}

.buttonLink:hover
{
	background-color:	#ededed;
	color:				#e7b142;
}

.submitButton
{
	width:				300px;
	padding:			10px;
	border-radius:		10px;
	background-color:	#e7b142;
	color:				white;
	font-size:			22px;
	font-weight:		bold;
	cursor:				pointer;
	border:				0px solid transparent;
	margin-top:			20px;
}

.inputText
{
	/*border:				1px solid rgb(236,6,119);*/
	width:				300px;
	padding:			10px;
	font-size:			22px;
    outline:			none;
}

/* ---------------------------------------------------------------- */
/* *** SizeInfo choice *** */
/* ---------------------------------------------------------------- */

.sizeinfoGrid
{
	box-sizing:			border-box;
	overflow-y:			auto;
}

.sizeinfoGrid.col4		{ width: 880px; }	/* 4 columns */
.sizeinfoGrid.col3		{ width: 660px; }	/* 3 columns */
.sizeinfoGrid.col2		{ width: 440px; }	/* 2 columns */
.sizeinfoGrid.col1		{ width: 220px; }	/* 1 column */

.sizeinfoCell
{
	position:			relative;
	float:				left;
	width:				220px;
	height:				300px;
}

.sizeinfoCell_client
{
	width:				200px;
	padding-top:		20px;
}

.sizeinfoCell_icon
{
	height:				200px;
	border:				5px solid transparent;
	border-radius:		10px;
	background-color:	white;
	/* center image */
	display:			flex;
	justify-content:	center;
	align-items:		center;
}

.sizeinfoCell_icon:hover
{
	border:				5px solid #e7b142;
	border-radius:		10px;
}

.sizeinfoCell_icon_image IMG
{
	width:				150px;
}

.sizeinfoCell_text
{
	margin-top:			20px;
	font-weight:		bold;
}

.sizeinfoCell_text_row1
{
}

.sizeinfoCell_text_row2
{
	color:			#e7b142;
}

/* If the screen size is less than 880px */

@media only screen and (max-width: 879px)
{
	/* 2 columns */

	.sizeinfoGrid.col4 { width: 440px; }
	.sizeinfoGrid.col3 { width: 440px; }
	.sizeinfoGrid.col2 { width: 440px; }
	.sizeinfoGrid.col1 { width: 440px; }
}

/* If the screen size is less than 440px */

@media only screen and (max-width: 439px)
{
	/* 1 column */

	.sizeinfoGrid.col4 { width: 220px; }
	.sizeinfoGrid.col3 { width: 220px; }
	.sizeinfoGrid.col2 { width: 220px; }
	.sizeinfoGrid.col1 { width: 220px; }
}

/* ---------------------------------------------------------------- */
/* *** Tariff choice *** */
/* ---------------------------------------------------------------- */

.tariffBoxes
{
	box-sizing:			border-box;
	overflow-y:			auto;
}

.tariffBoxes.col4		/* 4 columns */
{
	width:				880px;
}

.tariffBoxes.col3		/* 3 columns */
{
	width:				660px;
}

.tariffBoxes.col2		/* 2 columns */
{
	width:				440px;
}

.tariffBoxes.col1		/* 1 column */
{
	width:				220px;
}

.tariffBox
{
	position:			relative;
	float:				left;
	width:				220px;
	height:				220px;
}

.tariffBoxClient
{
	position:			absolute;
	left:				5px;
	top:				5px;
	width:				200px;
	height:				200px;
	border:				5px solid transparent;
	border-radius:		10px;
	background-color:	white;
	/**/
	display:			flex;
	justify-content:	center;
	align-items:		center;
}

.tariffBoxClient:hover
{
	border-radius:		10px;
	border:				5px solid #e7b142;
}

.tariffBoxClient_image
{
	box-sizing:			border-box;
	position:			absolute;
	left:				0px;
	top:				0px;
	width:				200px;
	height:				200px;
}

.tariffBoxClient_text
{
	box-sizing:			border-box;
	position:			absolute;
	left:				0px;
	top:				100px;
	width:				200px;
	color:				white;
}

.tariffBoxClient_textR1
{
	font-size:			15px;
	font-weight:		bold;
	text-transform:		uppercase;
	color:				#e7b142;
}

.tariffBoxClient_textR2
{
	font-weight:		bold;
}

/* If the screen size is less than 880px */

@media only screen and (max-width: 879px)
{
	/* 2 columns */

	.tariffBoxes.col4	{ width: 440px; }
	.tariffBoxes.col3	{ width: 440px; }
	.tariffBoxes.col2	{ width: 440px; }
	.tariffBoxes.col1	{ width: 440px;	}
}

/* If the screen size is less than 440px */

@media only screen and (max-width: 439px)
{
	/* 1 column */

	.tariffBoxes.col4	{ width: 220px; }
	.tariffBoxes.col3	{ width: 220px; }
	.tariffBoxes.col2	{ width: 220px; }
	.tariffBoxes.col1	{ width: 220px;	}
}

/* ---------------------------------------------------------------- */
/* *** Pay modes *** */
/* ---------------------------------------------------------------- */

.payModes
{
	width:				500px;				/* 250 x 2 */
	box-sizing:			border-box;
	overflow-y:			auto;
}

.payMode
{
	position:			relative;
	float:				left;
	width:				250px;
	height:				250px;
	box-sizing:			border-box;
	color:				white;
	display:			flex;
	justify-content:	center;
	align-items:		center;
}

.payMode_info
{
	position:			absolute;
	width:				240px;
	height:				240px;
	box-sizing:			border-box;
	display:			flex;
	justify-content:	center;
	align-items:		center;
	border:				1px solid #c0c0c0;
	background-color:	white;
}

.payMode_info_sel
{
	position:			absolute;
	width:				240px;
	height:				240px;
	box-sizing:			border-box;
	display:			flex;
	justify-content:	center;
	align-items:		center;
	border:				5px solid #e7b142;
	background-color:	white;
}

.payMode_info IMG
{
	width:		80%;
}

/* If the screen size is 1000px wide or less, ... */

@media only screen and (max-width: 1000px)
{
	.payModes
	{
	 width:				100%;
	}

	.payMode
	{
	 float:				none;
	 width:				100%;
	}
}