/* 
** HubertArt Webdesign - Common Formatting Stylesheet - version: 1.0 
*/

/* Element Formatting */
*{
	margin: 0;
	padding: 0;
}

.clear{
	clear: both;
}

.hidden{
	display: none;
}

html, body{
	height: 100%;
	width: 100%;
	border: none;
	font-family: "Lato", "Droid Sans", sans-serif;
}

body{
	background: #fff;
	overflow-x: hidden;
}

table{
	table-layout: auto;
	border-collapse: collapse;
}

.black { color: #000; }
.red { color: #f00; }
.blue { color: #00f; }
.green { color: #0c0; }
.grey { color: #777; }

/* Positional Formatting */
.vertical-center-pct{
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
}
.vertical-center-px{
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
}
.horizontal-center-pct{
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}
.horizontal-center-px{
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}


#banner{
	width: 100%;
	height:25em;
	max-height: 50%;
	position: relative;
}

#banner img{
	height: 100%;
	width: 100%;
	object-fit: cover;
}

#banner p{
    bottom: 10%;
    right: 10%;
    text-align: center;
    font-size: 3em;
    background-color: #00000085;
    padding: 0.25em;
    border-radius: 0.5em;
    position: absolute;
    color: #fff;
}

#side-menu{
	height: 100%;
	width: 20em;
	float: left;
}

.content{
	min-height: 70%;
}

.container{
	width: 90%;
	margin: auto;
	position: relative;
}

h2{
	font-size: 2em;
	font-weight: bold;
	margin-top: 0.5em;
	text-align: center;
}

.information{
	font-size: 1.25em;
	padding: 1em 0;
}

.center-text{
	text-align: center;
}

#login{
	display: block;
}

.home-item{
	padding: 0.5em;
	text-align: center;
}

.home-item2{
}

.home-item p{
	font-size: 1.5em;
}

.home-item a{
	color: #4784ff;
	text-decoration: none;
	font-size: 1.5em;
	font-style: italic;
}

.login-box{
	padding: 2em;
	font-size: 1.25em;
	width: 16em;
	position:relative;
}

.login-box a{
	color: #4784ff;
	font-style: italic;
	text-decoration: none;
}

.login-box form{
	color: #000000;
	text-align: center;
}

.login-label{
	margin-top: 0.5em;
}

.edit-textbox{
	font-size: 1em;
	width: 12em;
	border-radius: 0.5em;
	padding: 0.15em;
	margin: 0.25em 0;
}

.edit-textbox-layout{
	font-size: 1em;
	width: 5em;
	border-radius: 0.5em;
	padding: 0.15em;
	margin: 0.25em 0;
}

.layout td:nth-child(2){
	margin-left: 0.15em;
	margin-right: 0.15em;
}

.layout td:last-child{
	margin-left: 0.15em;
}

.textbox{
	font-size: 1.25em;
	width: 12em;
	border-radius: 0.5em;
	padding: 0.25em;
}

.textbox:focus{
	outline: none;
	box-shadow: 0px 0px 1px 2px #4784ff;
}

.a-button{
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	text-decoration: none;
	text-align: center;
	color: initial;
}
.button{
	font-size: 1em;
	width: 8.5em;
	border-radius: 0.5em;
	color: #000;
	background: #eee;
	cursor: pointer;
	padding: 0.15em;
	margin: 0.25em 0.5em 0.25em 0.5em;
}

.login-button{
	font-size: 1.25em;
	width: 12em;
	padding: 0.5em;
	border-radius: 0.5em;
	color: #000;
	margin-bottom: 1em;
	background-color: #eee;
	cursor:pointer;
}
.login-button:disabled{
	color: grey;
	background-color: #eeeeee;
}

/* W3Schools Custom Check Box */
/* Customize the label (the container) */
.check-container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 12em;
	margin: 0 auto 1em;
}

/* Hide the browser's default checkbox */
.check-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
}

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark {
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.check-container input:checked ~ .checkmark {
	background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.check-container .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* W3Schools Custom Radio Button */
/* Customize the label (the container) */
.radio-container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 12em;
	margin: 0 auto;
	text-align: left;
}

/* Hide the browser's default radio button */
.radio-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom radio button */
.radio {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 50%;
	margin-right: 0.5em;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .radio {
	background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radio {
	background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radio:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .radio:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* Loader */
#loader-box{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 198;
	background: rgba(255,255,255,0.75);
}

#loader-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 199;
  width: 100px;
  height: 100px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid red;
  border-bottom: 16px solid red;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.registerbutton{ margin-bottom: 0; }

.forgot_register{
	margin-top: 1em;
	text-align: center;
}

.centered{
	position: static;
	height: 100%;
	width: 100%;
	padding: 0.5em 0 1em 0;
	top: auto;
	left: auto;
	transform: none;
}

.red{
	color: red;
	font-style: italic;
}

.green{
	color: green;
	font-style: italic;
}

.blue{
	color: blue;
	font-style: italic;
}
.orange{
	color: orange;
	font-style: italic;
}
.grey{
	color: grey;
}

.italic{
	font-style: italic;
}

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 199;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid red;
  border-bottom: 16px solid red;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  display: none;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.home-links-container{
	width: 100%;
	padding: 1em 0 1em 0;
	text-align: center;
}

.home-links-wrapper{
	height: 98%;
	width: 98%;
	margin: auto;
}

.home-link{
	text-decoration: none;
}

.home-link-div:hover{
	background: #4784ff;
	color: #fff;
	font-style: italic;
}

.home-link-div{
	display: inline-block;
	background: #fff;
	color: #000;
	width: 15em;
	border: 0.25em #000 solid;
	border-radius: 0.25em 0.25em;
	padding: 0.75em;
	margin: 0.75em;
}

.home-title{
	font-size: 1.5em;
}

.home-status{
	font-size: 1em;
	margin-top: 0.1em;
	color: blue;
}

.profile-boxes-container{
	width: 100%;
	padding: 1em 0 1em 0;
	text-align: center;
}
.profile-box{
	display: inline-block;
	background: #fff;
	color: #000;
	width: 30em;
	border: 0.25em #aaa solid;
	border-radius: 0.25em 0.25em;
	padding: 0.75em;
	margin: 0.75em;
	text-align: left;
}

.profile-box table{
	border: none;
	border-collapse: collapse;
	width: 100%;
}

.profile-box table th{
	font-weight: bold;
}

.profile-box table td:first-child,.profile-box table th:first-child{
	padding-right: 1em;
	width: 9em;
	vertical-align: top;
}

.profile-box td{
	padding: 0.15em;
}
.profile-box tr:nth-child(even){
	background: #eee;
}

.profile-heading{
	font-size: 1.25em;
	font-style: italic;
	text-decoration: underline;
}

.profile-box a{
	float: right;
	font-size: 0.75em;
	text-align: right;
}

#update-container{
	height: 100%;
	width: 100%;
	background: #ffffff9c;
	z-index: 101;
	position: fixed;
	top: 0;
}

.update-box{
	border: 1px #444 solid;
	border-radius: 2em;
	padding: 2em;
	font-size: 1.25em;
	background: #fff;
	text-align: center;
	width: 25em;
	z-index: 103;
}

.update-box2{
	border: 1px #444 solid;
	border-radius: 2em;
	padding: 2em;
	font-size: 1.25em;
	background: #fff;
	text-align: center;
	width: 25em;
	z-index: 104
}

.update-table{
	font-size: 1em;
	text-align: left;
	margin: auto;
}

.update-table .edit-textbox{
	width: 10em;
}

.update-table td:first-child{
	padding-right: 1em;
	width: 5em; 
}

h3{
	margin: 1em auto;
}

.status-table{
	margin: 0 auto;
	text-align: left;
	width: 90%;
}

th{
	border-bottom: 1px solid #000;
}

.status-table td{
	margin-right: 0.5em;
	vertical-align: top;
}

.status-table td:first-child{
	width: 50%;
}


.status-table td:last-child{
	margin-right: 0;
}

.level1{
	margin-left: 2em;
}

.level2{
	margin-left: 3em;
}

.bold{
	font-weight: bold;
}

.arsenal-table{
	width: 100%;
	text-align: left;
}

.arsenal-table th{
	cursor: pointer;
	color: blue;
	padding: .25em 0.5em 0.25em 0;
}

.arsenal-table td{
	padding: .25em 0.5em 0.25em 0;
}

.arsenal-table tr:nth-child(odd){
	background: #ccc;
}

.arsenal-table tr:first-child{
	background: #fff;
}

.btn-plus-circle{
	width: 1em;
	border-radius: 0.5em 0.5em;
}

#arsenal-table-mobile{
	display: none;
}

#arsenal-table-mobile tr:nth-child(n+1){
	cursor: pointer;
}

#display-container{
	height: 100%;
	width: 100%;
	background: #ffffff9c;
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
}

.display-box{
	border: 1px #444 solid;
	border-radius: 2em;
	padding: 2em;
	font-size: 1.25em;
	background: #fff;
	text-align: center;
	width: 25em;
}

.closeButton{
	color: white;
	background: red;
	font-size: 1.25em;
	border: 1px solid #000;
	border-radius: 0.625em 0.625em;
	height: 1.25em;
	width: 1.25em;
	position: absolute;
	right: .75em;
	top: 0.75em;
	cursor: pointer;
}

.display-table{
	font-size: 1em;
	text-align: left;
	margin: auto;
	width: 100%;
}

.display-table tr:nth-child(odd){
	background: #ccc;
}

.display-table tr:first-child, .display-table tr:last-child{
	background: #fff;
}

#layout-pinBuffer1, #layout-pinBuffer2, #layout-pinBuffer3, #layout-dualAngle1, #layout-dualAngle2, #layout-dualAngle3, #layout-pinBuffer1u, #layout-pinBuffer2u, #layout-pinBuffer3u, #layout-dualAngle1u, #layout-dualAngle2u, #layout-dualAngle3u{
	display: none;
}

.update-link:link{
	font-size: 1em;
	text-decoration: none;
	font-style: italic;
	color: #4784ff;
}

.add-ball-container{
	width: 100%;
	text-align:center;
}

.filter-ball-container{
	width: 100%;
	text-align:right;
}

.equip-add-btn{
	background: none;
	border: none;
	color: grey;
	padding: 0.25em 1em;
	font-size: 1em;
	cursor: pointer;
}

.equip-view-btn{
	background: none;
	border: none;
	color: green;
	padding: 0.25em 1em;
	font-size: 1em;
	cursor: pointer;
}

.equip-edit-btn{
	background: none;
	border: none;
	color: grey;
	padding: 0.25em 1em;
	font-size: 1em;
	cursor: pointer;
}

.equip-delete-btn{
	background: none;
	border: none;
	color: red;
	padding: 0.25em 1em;
	font-size: 1em;
	cursor: pointer;
}

#drill-select-wrapper{
	max-width: 51em;
	margin: 0 auto;
	position: relative;
	text-align: center;
}
.drill-select-container{
	width: 23em;
	display: inline-block;
	margin: 0 auto;
	border: 1px solid #aaa;
	border-radius: 10px;
	display: inline-block;
	height: 20em;
	margin: 1em;
	overflow-y: auto;
}
.drill-select-container h3{
}
#drill-select-container-sheets{
}
#drill-select-container-balls{
}

.drill-select-table{
	width: 90%;
	margin: 0.5em auto;
	text-align: left;
}
.drill-select-table td{
	cursor: pointer;
	padding: 0.25em;
}
.drill-select-table tr:nth-child(odd){
	background: #eee;
}
.drill-select-table tr:first-child{
	background: none;
}
.drill-select-table tr:hover{
	background: #cceeff;
}
.drill-select-table tr:first-child:hover{
	background: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

@media screen and (max-width:1100px){
	.content{
		margin-top: 0;
		min-height: 80%;
	}
	#banner p{
		font-size: 2em;
		padding: 0.125em;
	}
	h2{
		margin-top: 2em;
	}
	#arsenal-table-desktop{
		display: none;
	}
	#arsenal-table-mobile{
		display: table;
	}
	.centered{
		margin-top: 3.5em;
	}
}

@media screen and (max-width:600px){
	
	.login-box{
		border: none;
	}
	.profile-box{
		width: 90%;
		border: none;
		margin: 0 auto;
	}
	.update-box, .display-box, .update-box2{
		width: 100%;
		border-radius: 0;
	}
	.status-table ul{
		display: none;
	}
	.closeButton{
		right: 2em;
	}
	.update-table, .display-table{
		width: 95%;
	}
	.update-link{
		display: block;
	}
	.drill-select-container{
		width: 100%;
		margin: 1em 0;
	}
}

@media screen and (max-height:700px){

}