@charset "utf-8";
/* CSS Document */




body{
			width: 100%;
		height: 100%;
			background-color: #FCFCFC;
			
			margin: 0;
			overflow-x: hidden;
			font-family: "Helvetica";
			
			flex-direction: column;
}


.top{display: flex;
	width: 100%;
		height: 75px;
		background-color: #000;
		color: #fff;
		justify-content: space-between;
		align-content: center;
		align-items: center;
	
	}
	
	.top-bar{display: flex;
	width: 100%;
		height: 75px;
		justify-content: space-between;
	
		
		
	}
	.site-name{display: flex;
	
	color: #fff;
		font-size: 30px;
		align-items: center;
	}
	.top-mid{display: flex;
		width: 33%;
		height: 75px;
	border: 1px solid #000;
		justify-content: center;
		align-content: center;
		align-items: center;
		
	}



/* registration index start*/
		
		.nac-nav{
			display: flex;
			width: 10%;
			height: auto;
			
           
		}
		.divider{
			width: 1px;
			height: 500px;
			background-color: #000;
			border: 1px solid #000;
		}
.page-title{
	font-size: 2em;
	font-weight: 500;

}


.nac-container{display: flex;
		width: 65%;
			height: auto;
			justify-content: space-around;
			align-content: center;
			align-items: center;
			margin: 0 auto;
	padding: 20px;
			gap: 20px;
	
	
		}

		.account-creation-container{
			display: flex;
			width: 65%;
			background-color: #FCFCFC;
           /* border: 1px solid #ddd;*/
            border-radius: 8px;
            padding: 10px;
            gap: 20px;
            flex-direction: column;
          justify-content: center;
			align-content: center;
			align-items: center;
			margin-top: 100px;
			
		}
		.pass-display{
			font-size: 16px;
			background-color: inherit;
			border: 0;
		}
		.input{
			min-width: 100%;
			border: 1px solid #ddd;
			padding: 10px;
			border-radius: 4px;
			
		}

			.password-input{
			max-width: 100%;
				height: auto;
			border: none;
				outline: none;
			padding: 20px;
			border-radius: 4px;
			
		}
.password-input:hover{
			max-width: 100%;
	height: auto;
			border: none;
	outline: none;
			padding: 20px;
			border-radius: 4px;
			
		}
#password,#passwordConfirm{
	
			max-width: 100%;
			border: none;
	outline: none;
			padding: 10px;
			border-radius: 4px;
			
		}
#password:hover,#passwordConfirm{
	min-width: 75%;
			outline: none;
	border: none;
			padding: 10px;
			border-radius: 4px;
}

#emailAddress{
	
	min-width: 75%;
			outline: none;
	border: 1px solid #ddd;
			padding: 10px;
			border-radius: 4px;
}
	



		.input-name{
			display: flex;
		max-width: 100%;
			border: 1px solid #ddd;
			border-radius: 4px;
			padding: 10px;
			
		}

#firstName:hover,#lastName:hover,#emailAddress:hover{
	max-width: 100%;
   height: auto;
	outline: 1px solid #000;
	
}
		.input-container{
			display: flex;
			max-width: 100%;
			height: auto;
			border: 1px solid #ddd;
			border-radius: 4px;
			padding: 20px;
			gap: 20px;
		}
		.pipb{display: flex;
			width: 100%;
			height: auto;
			border: 1px solid #ddd;
		}
		.name-el{display: flex;
		min-width: 100%;
			height: auto;
			padding: 10px;
			gap: 10px;
			align-items: center;
		}
		
		.email-el{
			
			display: flex;
			fwidth: 100%;
			flex-direction: column;
			gap: 10px;
			border: 1px solid #ddd;
			border-radius: 4px;
			padding: 20px;
			
		}
		.leftmain{display: flex;
		width: 100%;
			height: auto;
			flex-direction: column;
			gap: 20px;
		}
		.left{
			width: 50%;
			height: auto;
			flex-direction: column;
			padding: 10px;
			gap: 10px;
		}
		.right{
			
			display: flex;
		
			width: 50%;
			height: auto;
			flex-direction: column;
			padding: 10px;
			gap: 10px;
			
		}
		.password-cont{
			display: flex;
			max-width: 100%;
			flex-direction: column;
			align-items: center;
			border: 1px solid #ddd;
			border-radius: 4px;
			padding: 10px;
			gap: 20px;
			
		}
		.section-label{font-weight: bold;
		}
		.pass-reqs{border: 1px solid #ddd;
		padding: 20px;
			
		}
.pass-block{display: flex;
width: 100%;
height: auto;
justify-content: space-around;
	border: 1px solid #ddd;
}

.pipbone,.pipbtwo{
	
	display: flex;
	min-width: 100%;
	height: auto;
	border: 1px solid #ddd;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	padding: 10px;
	/*border: none;*/
}
.pipbone:hover,.pipbtwo:hover{
	
	display: flex;
	max-width: 50%;
	height: auto;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	outline: 1px solid #000;
	padding: 10px;
	/*border: none;*/
}



	.submit{
			background-color: #007bff;
		color: #fff;
		font-size: 1.2em;
		
		
		padding: 12px 25px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    
		
		}
		.submit:hover{
					background-color: #007bff;
		color: #fff;
		font-size: 1.2em;
		
		padding: 12px 25px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
		}
		
		.x{opacity: 50%;}
	.input-label{font-size: 11.5px;
		font-weight: bold;
		
		}
		

	/* registration page end	*/
		
		
		/* password requirement styling */
		
   #message {
      font-size: 0.9rem;
      margin-top: 8px;
      min-height: 1em;
    }

    .valid {
      color: green;
    }

    .invalid {
      color: red;
    }

    input.valid-border {
      border: 2px solid green;
    }

    input.invalid-border {
      border: 2px solid red;
    }

    .requirements {
      margin-top: 10px;
      font-size: 0.9rem;
      list-style: none;
      padding-left: 0;
    }

    .requirements li {
      margin: 2px 0;
    }

    .req-icon {
      display: inline-block;
      width: 16px;
      font-weight: bold;
    }

    .met {
      color: green;
    }

    .not-met {
      color: red;
    }