/* ================= PANEL ================= */
.form-panel{
	width:100%;
	background:#ffffff;
	border-radius:10px;
	overflow:hidden;
	box-shadow:
		0 6px 16px rgba(0,0,0,0.30),
		6px 0 16px rgba(0,0,0,0.30);
	font-family:system-ui,sans-serif;
}

/* ================= HEADER ================= */
.header-panel-header{
	background:#336D79;
	color:#ffffff;
	padding:12px 16px;
	font-size:1.2em;
	font-weight:bold;
	display:flex;
	justify-content:space-between;
	align-items:center;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}

.header-panel-title{
	white-space:nowrap;
}

.header-panel-status{
	font-size:0.85em;
}

/* ================= BODY ================= */
.form-body{
	padding: 10px 20px 0px 20px;
}

/* ================= ERROR MESSAGE ================= */
.form-error{
	background:#fee;
	border:1px solid #fcc;
	color:#c00;
	padding:12px;
	border-radius: 6px;
	margin-bottom: 12px;
	font-weight:500;
}

/* ================= FORM SECTION ================= */
.form-section1{
	border:1px solid #cccccc;
	border-radius:6px;
	padding:16px;
	margin: 10px 0px 20px 0px;
	position:relative;
	background:#f8f8f8;
}

.section-title{
	position:absolute;
	top:-12px;
	left:12px;
	background:linear-gradient(to bottom,#ffffff 50%,#f8f8f8 50%);
	padding:0 8px;
	font-weight:600;
	color:#222222;
}

/* ================= ROWS ================= */
.form-row{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:12px;
}

.form-label{
	width:160px;
	font-weight:600;
	color:#222222;
}

/* ================= INPUTS ================= */
.form-input{
	padding:10px;
	border:1px solid #cccccc;
	border-radius:6px;
	font-size:1em;
}

.input-long{
	width:300px;
}

/* ================= PASSWORD ================= */
.password-wrapper{
	position:relative;
	display:flex;
	align-items:center;
}

.password-wrapper .form-input{
	padding-right:36px;
}

.toggle-password{
	position:absolute;
	right:10px;
	cursor:pointer;
	font-size:1.2em;
	color:#6b7280;
}

.toggle-password:hover{
	color:#374151;
}

/* ================= RESPONSIVE ================= */
@media (max-width:520px){

	.form-row{
		flex-direction:column;
		align-items:flex-start;
	}

	.form-label{
		width:auto;
	}

	.input-long{
		width:100%;
	}
}