body{
margin:0; 
padding:0; 
font-family:Arial,Helvetica,sans-serif; 
background:#f3f5f7;
}

.login-container{ 
display:flex; 
justify-content:center; 
align-items:center; 
height:100vh;
}

.login-box{ 
width:420px; 
background:white; 
padding:40px; 
border-radius:8px; 
box-shadow:0 0 15px rgba(0,0,0,.20); 
text-align:center;
}

.logo{ 
width:140px; 
margin-bottom:20px;
}

h1{
margin:5px; 
color:#003366;
}

h3{
font-size:15px; 
font-weight:normal; 
margin-bottom:30px; 
color:#666;
}

label{
display:block; 
text-align:left; 
margin-top:15px; 
margin-bottom:5px; 
font-weight:bold;
}

input{ 
width:100%; 
padding:10px; 
font-size:15px; 
border:1px solid #bbb; 
border-radius:4px; 
box-sizing:border-box;
}

button{ 
margin-top:25px; 
width:100%; 
padding:12px; 
font-size:16px; 
background:#003366; 
color:white; 
border:none; 
border-radius:4px; 
cursor:pointer;
}

button:hover{ 
background:#004c99;
}

.version{ 
margin-top:30px; 
font-size:12px; 
color:#999;
}

.company{ 
margin-top:-10px; 
margin-bottom:25px; 
font-size:15px; 
font-weight:bold; 
color:#444;
}

.copyright{ 
margin-top:20px; 
font-size:12px; 
color:#777; 
line-height:20px;
}

.error{ background:#ffe6e6;
border:1px solid red;
padding:12px;
margin-bottom:20px;
color:#b30000;
font-weight:bold;
border-radius:5px;
}

.wrapper{

width:100%;

min-height:100vh;

background:#f4f6f9;

}

.topbar{

height:80px;

background:#003366;

color:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:10px 30px;

}

.topbar-left{

display:flex;

align-items:center;

gap:15px;

}

.top-logo{

height:55px;

}

.small{

font-size:13px;

}

.sidebar{

width:220px;

background:#1f2937;

position:fixed;

top:80px;

bottom:0;

left:0;

padding-top:20px;

}

.sidebar a{

display:block;

padding:12px 20px;

color:white;

text-decoration:none;

}

.sidebar a:hover{

background:#374151;

}

.content{

margin-left:240px;

margin-top:20px;

padding:30px;

}

.footer{

margin-left:240px;

padding:15px;

text-align:center;

font-size:13px;

color:#666;

}

.page-title{

font-size:26px;

font-weight:bold;

margin-bottom:25px;

color:#003366;

}

.card{

background:#fff;

padding:20px;

border-radius:8px;

box-shadow:0 2px 8px rgba(0,0,0,.08);

margin-bottom:20px;

}

.table{

width:100%;

border-collapse:collapse;

}

.table th{

background:#003366;

color:#fff;

padding:10px;

}

.table td{

padding:10px;

border-bottom:1px solid #ddd;

}

.btn{

display:inline-block;

padding:8px 14px;

background:#003366;

color:#fff;

text-decoration:none;

border-radius:4px;

}

.btn:hover{

background:#0055aa;

}

.status-active{

color:green;

font-weight:bold;

}

.status-disabled{

color:red;

font-weight:bold;

}

/*--------------------------------------------------
 *   Print Roster
 *   --------------------------------------------------*/

	@media print{

		.topbar,
		.sidebar,
		.footer,
		button{

			display:none;

		}

		.content{

			margin:0;
			padding:0;

		}

		body{

			background:#fff;

		}

	}

	.print-table{

		width:100%;
		border-collapse:collapse;
		font-size:12px;

	}

	.print-table th,
	.print-table td{

		border:1px solid #000;
		padding:4px;
		text-align:center;

	}

	.print-table th{

		background:#eeeeee;

	}

	.print-table td:first-child{

		text-align:left;
		font-weight:bold;
		white-space:nowrap;

	}