/*All Styles*/
body
{
	background-color: rgb(200,225,250);
	margin:0px ;
}

#header
{
	height: 50px;
	border: solid 1px black;
}

#settings
{
	width: 50px;
	height: 100% ;
	float: right;
	background-color: blue;
}

#nameDisplay
{
	width: 150px;
	height: 70% ;
	padding-top:15px;
	float: right;
}

#path
{
	height: 30;
	width: 90% ;
	margin: 20px;
	border: solid 1px black;
	background-color: white;
	padding-left:120px;
	padding-top:5px;
}

#logoImagePC
{
	width: 100%;
	height: 50px;
	float:left;
	background-color: blue;
}

#logoImageMobile
{
	width: 100%;
	height: 50px;
	float:left;
	background-color: red;
}

/************This is for the left nav**********************************************/
#leftNav
{
	width: 250px;
	height: 100% ;
	float: left;
	transition: width 2s;
	border: solid 1px black;
	background-color: rgb(40,40,40);
}

#adminCPH1
{
	padding-top:60px;
	text-align:center;
	font: bold 18px "segoe ui" ;
	color:white;
}

#memberName
{
	transition: display 6s;
	padding-top:60px;
	text-align:center;
	font: bold 18px "segoe ui" ;
	color:white;
}

#memberRank
{
	text-align:center;
	font: bold 14px "segoe ui" ;
	color:white;
}

#icon
{
	color:black;
}

#headerNavContainer
{
	width: 10%;
	height: 50px;
	float:left;
}

#headerNavContainer a 
{
	float: left;
	color: black;
	padding: 16px 16px;
	text-decoration: none;
	font-size: 20px;
}

#myLinks
{
	background-color: rgb(40,40,40);
	color:white;
}

#myLinks>a
{
	width:91% ;
	height: 30px;
	padding-left: 20px;
	padding-top: 9px;
	margin-top: 5px;
	text-decoration:none;
	color: white;
	display:block;
	font: bold 14px "segoe ui" ;
}

#myLinks a:hover
{
	background-color: black;
	border-left: 3px white solid;
}

#myLinks>label
{
	width:91% ;
	height: 30px;
	padding-left: 20px;
	padding-top: 9px;
	margin-top: 5px;
	text-decoration:underline ;
	color: white;
	display:block;
	font: bold 14px "segoe ui" ;
}

#adminCPNav
{
	background-color: rgb(40,40,40);
	color:white;
}

#adminCPNav>a
{
	width:91% ;
	height: 30px;
	padding-left: 20px;
	padding-top: 9px;
	margin-top: 5px;
	text-decoration:none;
	color: white;
	display:block;
	font: bold 14px "segoe ui" ;
}

#adminCPNav a:hover
{
	background-color: black;
	border-left: 3px white solid;
}

.active
{
	background-color: black;
	border-left: 3px white solid;
}

.redBG
{
	background-color: red;
	color: white;
}

//******************************************************************************************/

#main
{
	width:100%;
	overflow:auto;
}

#info-box
{
	width: 300px;
	display:block;
	float: left;
	margin: 30px;
	box-shadow: 2px 2px rgb(200,245,255);
	background-color: white;
	padding: 10px;
}

#info-box ul
{
	margin-left: 90px;
}


#wideHeader
{
	width:100%;
	background-color: blue ;
	color:white;
}

#wideHeader p
{
	width:100%;
	height:40px;
	line-height:40px ;
	font: bold 15px "segoe ui" ;
}

#memberDisplay td
{
	height:30px ;
	width: 200px ;
	border: 1px solid rgb(200,200,200);
}

/* Dropdown Button */
.dropbtn {
	background-color: rgb(40,40,40);
	border:none;
	text-align:left ;
	width:100% ;
	height: 30px;
	padding-left: 20px;
	padding-top: 9px;
	margin-top: 5px;
	text-decoration:none;
	style:none ;
	color: white;
	font: bold 14px "segoe ui" ;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
	background-color: black;
	border-left: 3px white solid;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  min-width: 160px;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.box
{
	width:90px;
	height:90px;
	float:left;
	margin:10px;
	background-color: blue;
}

.box2
{
	width:90px;
	height:90px;
	float:left;
	margin:10px;
	background-color: red;
}

.box3
{
	width:90px;
	height:90px;
	float:left;
	margin:10px;
	background-color: orange;
}

.box4
{
	width:90px;
	height:90px;
	float:left;
	margin:10px;
	background-color: green;
}

.box5
{
	width:90px;
	height:90px;
	float:left;
	margin:10px;
	background-color: yellow;
}

.squads
{
	color: rgb(255,0,0) ;

}

.alert
{
	font-size: 20px;
	color: red;
}

/* Mobile Styles */
@media only screen and (max-width: 500px) 
{
	#logoImagePC
	{
		display:none;
	}
	
	#path
	{
		display:none;
	}
}/*End mobile*/

@media only screen and (min-width: 501px) and (max-width: 1749px)
{
	#logoImageMobile
	{
		display:none;
	}
	
	#info-box-medium
	{
		width: 500px;
		display:block;
		float: left;
		margin: 30px;
		box-shadow: 2px 2px rgb(200,245,255);
		background-color: white;
		padding: 10px;
	}
	
	#info-box-wide
	{
		width: 1200px;
		display:block;
		float: left;
		margin: 30px;
		box-shadow: 2px 2px rgb(200,245,255);
		background-color: white;
		padding: 10px;
	}
}/*End tablet*/

/* Desktop Styles Wide screen*/
@media only screen and (min-width: 1750px) 
{
	#logoImageMobile
	{
		display:none;
	}
	
	#main
	{
		background-color: rgb(200,225,250);
	}
	
	#info-box-medium
	{
		width: 500px;
		display:block;
		float: left;
		margin: 30px;
		box-shadow: 2px 2px rgb(200,245,255);
		background-color: white;
		padding: 10px;
	}
	
	#info-box-wide
	{
		width: 1200px;
		display:block;
		float: left;
		margin: 30px;
		box-shadow: 2px 2px rgb(200,245,255);
		background-color: white;
		padding: 10px;
	}
}/*Desktop Wide*/


.reset-container {
    width: 90%;
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    clear: both; /* ensures proper centering */
}


.reset-form input[type="email"],
.reset-form input[type="text"],
.reset-form input[type="password"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-sizing: border-box;
}

.reset-form input[type="submit"] {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.reset-form input[type="submit"]:hover {
    background-color: #555;
}