.login { 
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -150px;
	width:300px;
	height:300px;
}
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }

input { 
	width: 100%; 
	margin-bottom: 10px; 
	background: rgba(0,0,0,0.3);
	border: none;
	outline: none;
	padding: 10px;
	font-size: 13px;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 4px;
	box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
	-webkit-transition: box-shadow .5s ease;
	-moz-transition: box-shadow .5s ease;
	-o-transition: box-shadow .5s ease;
	-ms-transition: box-shadow .5s ease;
	transition: box-shadow .5s ease;
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }

.user-form{
    max-width: 400px;    
    margin: 30px auto  0px	 auto;    
}

form{
    margin-top:10px;
}

/* The animation code */
@keyframes update-animation-success {
    0%   {background-color: rgba(46,204,113,1);}
    25%  {background-color: rgba(46,204,113,0.75);}
    50%  {background-color: rgba(46,204,113,0.5);}
    75%  {background-color: rgba(46,204,113,0.25);}
    100% {background-color: rgba(46,204,113,0);}
}

@keyframes update-animation-failed {
    0%   {background-color: rgba(198,29,29,1);}
    25%  {background-color: rgba(198,29,29,0.75);}
    50%  {background-color: rgba(198,29,29,0.5);}
    75%  {background-color: rgba(198,29,29,0.25);}
    100% {background-color: rgba(198,29,29,0);}
}

.admin-page-value-updated{
    animation-name: update-animation-success;
    animation-duration: 1s;
}

.admin-page-value-update-failed{
    animation-name: update-animation-failed;
    animation-duration: 1s;
}

#full-table{
	display: inline-table;
}
#small-table{
	display: none;
}
#small-table tbody{
	border-bottom: 5px solid currentColor
}

@media (max-width:800px) {  
	#full-table{
		display: none;
	}
	#small-table{
		display: inline-table;
	}
}