.radio-toolbar {
	float:left;
	clear: none;
	display:inline;
	position: relative;
	background-color: white;
	width: 100%;
	height: 40px;
}

.radio-toolbar label {
    display: inline-block;
    padding-left: 30px;
	padding-top: 10px;
    font-family: sans-serif, Arial;
    font-size: 16px;
}

.radio-toolbar label:hover {cursor: pointer; }

.radio-toolbar img { position:absolute; pointer-events: none; left: 5px; top: 5px; filter: invert(.5) sepia(1);}

.mainpage {	width: 900px;
			height: auto;
			padding: 10px;
			position: absolute;
			top: 500px;
			left: 50%;
			transform: translate(-50%,-50%);
			background-color: rgba(5,0,122,0.95);
			text-align: center;
			box-shadow: 5px 35px 50px rgba( 0, 0, 0, 0.5 );
			border-radius: 10px;}

.cologo {	position:relative; display: block;	color:#212121 ; border: none; 
			align-items: center; justify-content: center;}
	
.picture {	position: absolute; left:5px; top:15px; border-radius:10%;}
	
.picbg	{ position: absolute; margin-top: 0px; margin-left: 0px; background-color:#D3D3D3; width: 220px; height: 750px;
			border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
	
.header {	position: relative; align-items:center; background-color:#00005F; display:block;
			border-radius: 10px; width: 950px; height:auto; color: #D4D4D4; border: none; justify-content: center;
			}
	
.content {	position: relative; font-size: 20px; color: #FFFFFF; display:inline-grid; 
			background-color:darkslateblue; width: 900px; height: 40px; border: none;
			border-radius: 5px; font-family: Arial; align-items: center; justify-content: center;}

.StaffList {position: relative; left: 10px; top: 0px;  width: 400px; height: auto;font-family:Arial;}
	.StaffList th { background-color: #4A4949; color: #D4D4D4; border: 0px solid #dedede; height: 40px; 
					border-top-left-radius: 5px; border-top-right-radius: 5px;}
	.StaffList tr {	height: 33px; }
	.StaffList tr:hover{ background-color:#B0B0B0; }
	
.inputarea { position: relative; width: 420px; left: 450px; top: -284px; border-collapse: collapse;}

	.inputheader {font-weight: bold; font-size:18pt; height: 50px; width: 100%; background: #5B5B5B;
				display:flex; align-items: center; justify-content: center; font-family:Arial; color: white;
				border-top-left-radius: 5px; border-top-right-radius: 5px;}
	
	.inputlabel {float:left; font-size: 15px; width: 40%; height: 30px;
				left:0px; margin-left: 0px; background: #222222; top: auto;
				display:flex; align-items: center; justify-content: center;
				font-family: arial; color: brown;} 
	
	.inputtext {position: relative; float:left; font-size: 15px; border-width: 1px; border-color:beige;
				background:#ffffff ; align-items: center; justify-content: center; width: 100%;
				font-family: arial; color:black; border-radius: 5px; border: thin;
				display: flex;
  				flex-flow: column wrap;
  				align-items: center;}

	.inputtextbg {float:left; width: 100%; height: 50px; left:0px; margin-left: 0px; background:white ;
				top: auto; align-items: center; justify-content: center; display: inline-block;
				font-family: arial; color:black; }
	label.inputtextbg {	background:#aaa; color:#fff; border-radius:8px; padding:1em; margin:1em; cursor:pointer; }
	label.inputtextbg:hover { background:#ccc; }
	input.inputtextbg {	margin-right:1em; }

.inputbutton {position: relative; font-size: 20px; background:#565656; color:aqua; width: 70px; height: 40px;
				top: auto; border-radius: 10px; }
	.inputbutton:hover{ background:#949494; cursor: pointer }
	
.transbar {		display:flex; align-items: center; justify-content: center; color:#2E2E2E;
				position: absolute; margin-left: 0px; margin-top: 0px; width: 100%; height: 45px; background-color:rgba(178,178,255,0.70); }
	
.datetime 	{	position:relative; width: 300px; height: 45px; left: 50%; margin-left: -150px; margin-top: 45px;
				background-color:#160267; display:flex; align-items: center; justify-content: center;
				box-shadow: 5px 5px 10px rgba( 0, 0, 0, 0.5 ); }
	
.lastline {		position: absolute;	align-content: center; bottom: 15px; width: 100%; left: 0px; }
	
.overlay { 		position:fixed; top:0; bottom:0; left:0; right:0; background-color:#000; opacity:0.8; z-index:1001;}
.overlay-message{ position: fixed; top:50%; left:50%; width:400px; height:500px; margin: -250px -200px -250px -200px;
				background-color:#FFFFFF; z-index:1002; border: 1#170F4D; border-width::5px ; border-radius: 5px;
				border-color: cadetblue; padding: 10px 10px 10px 10px; opacity: 1; }
	
	.box{
		width: 500px;
		height: 500px;
		padding: 10px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: rgba(5,0,122,0.69);
		text-align: center;
		box-shadow: 5px 35px 50px rgba( 0, 0, 0, 0.5 );
		border-radius: 10px
	}
	.box h1{
	  color: white;
	  text-transform: uppercase;
	  font-weight: 500;
	}
	
	.box input[type = "text"],.box input[type = "password"]{
	  border:0;
	  background: none;
	  display: block;
	  margin: 20px auto;
	  text-align: center;
	  border: 2px solid #3498db;
	  padding: 14px 10px;
	  width: 250px;
	  outline: none;
	  color: white;
	  border-radius: 24px;
	  transition: 0.25s;
	}
	.box input[type = "text"]:focus,.box input[type = "password"]:focus{
	  width: 350px;
	  border-color: #2ecc71;
	}
	.box input[type = "submit"]{
	  border:0;
	  background: none;
	  display: block;
	  margin: 20px auto;
	  text-align: center;
	  border: 2px solid #2ecc71;
	  padding: 14px 40px;
	  outline: none;
	  color: white;
	  border-radius: 24px;
	  transition: 0.25s;
	  cursor: pointer;
		width: 150px;
	}
	.box input[type = "submit"]:hover{ background: #2ecc71;	}



	
	html, body { overflow:auto; height:100%; min-height: 100%; padding: 0px; margin-left: 0px; margin-top: 0px;
	background:rgb(0,0,100) no-repeat center center fixed; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,210,1) 1%, rgba(0,0,100,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,210,1)), color-stop(100%,rgba(0,0,100,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,210,1) 1%,rgba(0,0,100,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,210,1) 1%,rgba(0,0,100,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,210,1) 1%,rgba(0,0,100,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(0,0,210,1) 1%,rgba(0,0,100,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4c5fc', endColorstr='#4f8ff9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
     }