:root {
	--body-width-xx-small: 320px;
	--body-width-x-small: 375px;
	--body-width-small: 	480px;
	--body-width-medium: 768px;
	--body-width-large: 1024px;
	--body-width-x-large: 1200px;
	--body-width-xx-large: 1024px;
	--main-color-10A: #894aff;
	--main-color-16A: #894aff;
	--main-color-20A: #4aff6a;
	--main-color-30A: #ffa94a;
	--main-color-40A: #ffa94a;

	--main-color-10A: #894aff;
	--main-color-16A: #894aff;
	--main-color-20B: #7bbc87;
	--main-color-30B: #ffed4e;
	--main-color-40A: #ffa94a;

	--main-color-10: var(--main-color-10A);
	--main-color-20: var(--main-color-20A);
	--main-color-30: var(--main-color-30B);

	--column-gap: 30px;
	--column-outside-gap: 15px;
	--gap-container: 30px;

	--font-x-large: 2rem;
	--font-large: 1.5rem;
	--font-medium: 1.2rem;
	--font-small: 1rem;
	--font-x-small: 0.85rem;	
	--font-xx-small: 0.7rem;

	

}
*,
*:after,
*::before {
	box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
p,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
body * {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
}
body {
	width: 100%;
}
ol,
ul {
	list-style: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*---END------------STYLING MAIN GRID------------*/


/* #region Lock and Next button*/
	/*.btn_lock_and_next {
		width: 12rem;
		height: 5rem;
		font-weight: bolder;
		border-radius: 0.5rem;
		-webkit-font-smoothing: antialiased;
		border: none;
		background-color: #00F2A9;
		background-color: #8d45e0;	
		color: white;
		margin-top: 15px;
	}
	*/



.btn_lock_and_next {
	width: 12rem;
	height: 5rem;
	font-weight: bolder;
	font-size: 1.2rem;
	border-radius: 1rem;
	border: none;
	color: white;
	cursor: pointer;
	margin-top: 15px;
	background: linear-gradient(145deg, #8d45e0, #a366f5);
	box-shadow: 0 6px 0 #6a2cc1;
	transition: all 0.2s ease;
}

/* On Click (active) */
.btn_lock_and_next:active {
	transform: translateY(4px);
	box-shadow: 0 2px 0 #6a2cc1;
}

/* Disabled State */
.btn_lock_and_next:disabled {
	background: #ccc;
	color: #888;
	cursor: not-allowed;
	box-shadow: none;
}

/* Optional: add hover for fun effect */
.btn_lock_and_next:hover:not(:disabled) {
	background: linear-gradient(145deg, #a366f5, #8d45e0);
	box-shadow: 0 8px 0 #6a2cc1;
}
/* #endregion */

.form__login-1 {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 20rem;
}
.user_input_01 {
	font-size: 0.8rem;
	height: 2.6rem;
	padding: 0 10px;
}
.form__login-1 > * {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.form__login-1 button {
	height: 3rem;
}
.one_centered_block{
	display: flex;
	align-items: center;
	justify-content: center;
}
.form_logged_out_user{
	display: flex;
	gap: 15px;
	margin-left: auto;
	width: min-content	;
}
.action_button_01 {
	padding: 10px;
	background-color: #11b349;	
	color: white;
	border: none;
	min-width: 5rem;
	border-radius: 5px;
	font-weight: bold;
	font: normal 14px / 17px Verdana, sans-serif;
}

.btn_logout{
	margin-left: auto;
	padding: 5px;
	color: blue;
	text-decoration: underline;
	border: none;
	background-color: inherit;
	cursor: pointer;
}
.btn_login{
	margin-left: auto;
	background-color:#00F2A9;
	-webkit-font-smoothing: antialiased;
	color:var(--main-color-10);
	color:#243238;
	color:#A56AFF;
	color:#5A2398;
	cursor: pointer;
	border: none;
	border-radius: 1rem;
	font-weight: bolder;
	font-size: 12px;	
}
.logo_01{
	height: 2.6rem;
	width: auto;
	object-fit: cover;
}
.logo_01 a img{
	width: 100%;
	overflow: hidden;
}
 .btn--primary {
	padding: 1rem 2rem;
	margin: 1rem;
}

/**background for test**/
/*
.body_frame {
	background-color: #4aff6a;
}
.container {
	background-color: #894aff;
}
.main-content_frame {
	background-color: #bfbaba;
}
*/