/* DB.PHP - 2019 */
/* rhq.be - haqqazi.com - github @rhq */



/* Global */
html, body {
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	font-family: arial, sans-serif;
	font-size: 7px;
	line-height: 1.6;
	background-color: #f1f1f1;
	-webkit-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
}
a:visited { color: blue; }
.none { display: none !important; }
.link {
	display: inline-block;
	margin: 0; padding: 0;
	color: blue;
	text-decoration: underline;
	outline: none;
	border: none;
	background: none;
}
.button {
	display: inline-block;
	margin: 5px; padding: 10px 15px;
	color: #fff;
	font-size: 2.5rem;
	line-height: 1.6;
	text-decoration: none;
	/* text-transform: capitalize; */
	opacity: .8;
	outline: none;
	border: none;
	border-radius: 2px;
	-webkit-transition: opacity 100ms ease-in-out 0s;
	   -moz-transition: opacity 100ms ease-in-out 0s;
		-ms-transition: opacity 100ms ease-in-out 0s;
		 -o-transition: opacity 100ms ease-in-out 0s;
		 	transition: opacity 100ms ease-in-out 0s;
}
.button:hover {
	color: #fff;
	text-decoration: none;
	opacity: .6;
	cursor: pointer;
}
.button:visited { color: #fff; }
.button.disabled {
	opacity: .3;
	pointer-events: none;
    cursor: default;
}



/* Color(s) */
.button { background-color: blue; }



/* Layout */
body {
	width: 100%; height: 100%;
	display: table;
	margin: 0; padding: 0;
}
body #content {
	display: table-cell;
	vertical-align: middle;
}
body #content #block {
	max-width: 700px;
	margin: auto;
}
body #content #block.center > div {
	position: absolute !important;
	top: 50%; left: 50%;
	-webkit-transition: all 250ms ease;
	   -moz-transition: all 250ms ease;
		-ms-transition: all 250ms ease;
		 -o-transition: all 250ms ease;
			transition: all 250ms ease;
	-webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		 -o-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
}



/* Db.php */
#db {
	color: rgba(1,1,1,.8);
	text-align: center;
	padding: 40px 2.5%;
}

#db #header, #db #main, #db #footer {
	display: block;
	margin: 20px 0; padding: 0 5px;
	overflow: hidden;
}

#db * { font-size: 2rem; }
#db h1, #db h2, #db h3, #db h4, #db h5 {
	margin: 5px 0; padding: 0;
}
#db h1 { font-size: 5rem; }
#db h2 { font-size: 3.7rem; }
#db h3 { font-size: 3.5rem; }
#db h4 { font-size: 3rem; }
#db h5 { font-size: 2.5rem; }
#db p, #db a, #db ul li { font-size: 2rem; }
#db p { margin: 5px 0; }
#db .button { font-size: 2.5rem; }

#db h1 a {
	color: inherit;
	font-size: inherit;
	text-decoration: inherit;
}
#db h2, #db h4 {
	font-weight: lighter;
}

#db ul { list-style: none; margin: 0; padding: 0; }
#db ul li { display: inline-block; margin: 0 5px; }
#db #main ul { margin-top: 5px; }

#db .form {
	padding: 0;
	/* margin: 10px 0; */
	border-radius: 5px;
}
#db .form div {
	margin: 0; padding: 2.5px 0;
	overflow: hidden;
}
#db .form div.captcha { padding: 0; }
#db .form div:last-child { margin: 10px 0; }
#db .form div label {
	display: block;
	padding: 5px 0 2.5px;
	font-size: 2rem;
	font-weight: lighter;
}
#db .form div .field {
	width: 50%; min-width: 300px;
	margin: auto; padding: 10px;
	color: #555;
	font-size: 2rem;
	line-height: 1.6;
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid lightgrey;
	border-radius: 4px;
	outline: none;
	-webkit-appearance: none;
       -moz-appearance: none;
    		appearance: none;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	  		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	  	 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	  		transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
#db .form div input::placeholder,
#db .form div textarea::placeholder,
#db .form div select:required:invalid { color: #999 !important; }
#db .form div select option { color: #555; }
#db .form div .field:focus {
	border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
    		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}
#db .form div .error {
	display: block;
	margin: 2.5px 0;
	color: #FF6347;
	font-size: 2rem;
}

#db .status {
    display: inline-block;
    padding: 15px 20px;
    border-radius: 50px;
}
#db .status.red { background-color: #FF6347; }
#db .status.green { background-color: #90EE90; }
#db .status.blue { background-color: #00BFFF; }
#db .status_a { margin: 5px 0 20px; }
#db .status_b {
	position: fixed;
	top: 15px; right: 15px;
	margin: 0;
}

#db .table {
    width: 100%;
    margin: 15px 0;
	border-collapse: collapse;
	/* border-spacing: 0; */
	/* border-radius: 4px; */
	box-sizing: border-box;
	border: thin solid #DCDCDC;
}
#db .table:first-child { margin-top: 10px;}
#db .table:last-child { margin-bottom: 0px;}
#db .table thead.category {
	background-color: #DCDCDC;
}
#db .table thead.legend { }
#db .table thead th, #db .table tbody td {
	padding: 5px;
    text-align: center;
	line-height: 1.3;
}
#db .table tbody td { color: grey; }
#db .table thead.legend th, #db .table tbody td {
	border: .05px solid #DCDCDC;
}







/* Media queries */
@media screen and (max-width: 570px) {
	#db { padding: 20px 2.5%; }
	#db .status_b { display: none; }
}