/*
Program name: hw3-styles.css
Author: Tabitha Becker
Date created: 2025-11-05
Description: Styling file for patient form
*/


/*Setting background color and font family*/
body{
	display: flex;
	flex-direction: column;
	background-color: #77A1B8;
	min-width: fit-content;
	min-height: 100vh;
	color: white;
	font-family: "Open Sans", sans-serif;
}

main{
	flex-grow: 1;
}

/*Creating form that centers in the middle of the background color and changing the color of form.
Adding padding so that text will fit nicely in the form*/
form{
	background-color:#3B4F62;
	display: block;
	min-width: fit-content;
	margin-top: 1vw;
	margin-bottom: 3vw;
	margin-right: 15vw;
	margin-left: 15vw;
	padding-top: 1vw;
	padding-bottom: 1vw;
	padding-left: 5%;
	padding-right: 5%;
	text-wrap: none;
}

table{
	width: 100%;
	text-align: left;
	font-size: 40px;
	min-width: fit-content;
}

/*Putting the date in the header to align on the bottom right corner of header.*/
.todaydate{
	font-size: 18px;
	position: right;
	margin-left: auto;
}

/*Making section headers a different color and size to make them stand out*/
.form-headers{
	font-size: 18px;
	color: #8DBCD6;
}

/*Floating the header image to the left of the header*/
.header-image{
	float: left;
}

/*Resizing the header image to fit better in the header*/
img{
	width: 90px;
}

/*Setting up the focus when user clicks in one of the text boxes*/
input[type=email]:focus,
[type=password]:focus,
[type=address]:focus,
[type=phone]:focus,
[type=text]:focus, 
#health-form:focus, 
#state:focus, 
#dobValidate:focus {
	background-color: lightblue;
}


/*Assigning font-size to the input labels*/
.ptname, 
.ptinfo, 
.address, 
.address-2, 
.e-contact, 
.e-contactinfo, 
.username,
.instructions,
.medhistory, 
.medhistory-1, 
.medhistory-2, 
.health, 
.password, 
.ptlang, 
.ptmarital, 
.health-slider, 
.slider-start, 
.slider-end, 
.footer, 
.currentDate {
	font-size: 16px;
}

/*Resizing the input boxes and adding margin for the outside of the boxes and padding for inside the boxes*/
input{
	height: 100%;
	max-width: 90%;
	padding: 5px;
	font-size: 13px;
}

.errMsg {
	display: none;
	overflow: hidden;
	transition: height 0.3s ease-in-out;
	font-size: 15px;
	width: 200px;
	color: rgb(253, 20, 20);
	text-align: left;
}

/*Creating the Red asterisk for the required fields*/
#required:after{
	display: inline;
	position: relative;
	content: "*";
	color: red;
}

/*Creating several entries to have the boxes/labels fit correctly and align together*/

#dobValidate{
	width: 100%;
}

.gender {
	display: inline-block;
	margin-right: 8px;
	width: 10%;
	padding: 0px;
}

.primelang {
	display: inline-block;
	margin-right: 1px;
	width: 8%;
	padding: 0px;
}

.primelangtxt {
  margin-left: 6px;
  display: inline-block;
}

.maritalstatus{
	display: inline-block;
	margin-right: 5px;
	width: 8%;
	padding: 0px;
}

.address,
.address-2{
	width: 100%;
}
.state{
	width: 80%;
	color: gray;
}

.zipValidate {
	width: 100%;
}

.phonetype{
	display: inline-block;
	margin-right: 5px;
	width: 12%;
	padding: 5px;
}

.medhistory{
	font-weight: bold;
	color: #8DBCD6;
}

/*To be able to make the medhistory checkboxes align, I added a flex box with flex direction as row*/
.medhistory-1, .medhistory-2{
  display: flex;
	flex-direction: row;
	width: 90%;
  gap: 16px;              /* adding space between items */
  justify-content: space-between; /* spreading the items across the row */
  align-items: center;
  flex-wrap: nowrap;        /* wrap to next line on small screens */
  padding-top: 14px;
  padding-bottom: 12px;
	margin-top: 10px;
}

/*Styling the textarea box, set up as a flex box, added padding, have a different background color 
and adjust the font size and width*/
.health-form{
	display: flex;
	flex-direction: row;
	width: 95%;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 5px;
	font-size: 16px;
	text-align: left;
	background-color: #E9F2F7;
	resize: none;
}

.health-slider{
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 10px;
}

/*Slider is assigned inline box with different background, added a border, padding and some margin*/
#slider{
	display: inline;
	background-color: #8DBCD6;
	border: solid black;
	color: black;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-left: 20%;
}

#health-slide{
	vertical-align: center;
	height: 0px;
	width: 100%;
}

.slider-start{
	padding-right: 15px;
}

.slider-end{
	padding-left: 10px;
}

#sliderNums {
	font-size: 20px;
	font-weight: bold;
}

#pass-text{
	display: block;
	color:#8DBCD6;
	font-weight: bold;
	padding: 0px;
	margin-top:30px;
}

.password{
	display: flex;
  align-items: center;
  gap: 8px;           /* small space between label and input */
  flex-wrap: nowrap;    /* allows smaller screens to wrap nicely */
}	

/*Aligning the password requirements so they are spread out evenly and the bullet points are next to the words*/

#reqmstr{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0px;
	margin-left: 40px

}
#reqmstr ul {
	margin-right: 50px;
	padding: 4px;
	white-space: nowrap;
}


.username{
	display: block;
}

#userIdValidate{
	width: 100%;
	margin-left:30px;
	margin-right: 60px;
}

.instructions{
	display: block;
}


/* Changes the color of the password requirements to green when it matches requirements*/
.valid {
	color: rgb(91, 212, 91);
}

/* Changes the color of the password requirements to red when it doesn't match requirements*/
.invalid{
	color: rgb(247, 84, 84);
}

/*Make form controls fill their table cells and include padding in width*/
input,
select,
textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  margin: 4px 2px;
}

button{
    width: auto;
    min-width: 120px;
    height: 48px;
		margin: 10px;
}

/*Created a different color for the submit and reset buttons so it would be easier to see which you a clicking on*/
button[type=button]{
	background-color: rgb(65, 155, 220);
	border: solid gray;
	font-weight: bold;
	font-size: 15px;
}

button[type=submit]{
	background-color: lightblue;
	border: solid gray;
	font-weight: bold;
	font-size: 15px;
}

button[type=reset]{
	background-color: black;
	border: solid black;
	color: rgb(247, 84, 84);
	font-size: 15px;
}

button:hover{
	background-color: #8DBCD6;
}

.submit-container{
	display: inline;
	background: #8DBCD6;
}

.buttons{
	margin-bottom: 0px;
}

/*Styling the footer so it fits in a flex box and aligns as a row with padding*/
.footer{
	display: flex;
	flex-direction: row;
	vertical-align: top ;
	color: whitesmoke;
	padding: 0px 100px 50px 100px;
	flex-wrap: nowrap;
	z-index: 9999;
}

/*Creating fixed footer that stays at the bottom of the page when scrolling*/

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 15.4vw;
  right: 15.4vw;
  width: auto;
  padding: 20px;
  background-color: #3b4f62;
  z-index: 9999;
  box-sizing: border-box;
}


/*Styling the social media links so they are aligned to the right and have spacing*/
#links{
	display:block;
	white-space: nowrap;
	position: absolute right;
	margin-left: auto;
	padding: 2vw;
}
#fb, #linkedin, #twitter {
	height: auto;
	max-width: 40px;
	min-width: auto;
}

#fb:hover, #linkedin:hover, #twitter:hover {
	opacity: 0.7;
}

.footer-text {
	display: inline-block;
	white-space: nowrap;
	min-width: auto;
}

#fnameErrorMsg, 
#midnameErrorMsg, 
#lnameErrorMsg, 
#dobErrorMsg, 
#emailErrorMsg, 
#ecFnameErrorMsg, 
#ecLnameErrorMsg, 
#phoneErrorMsg, 
#ecPhoneErrorMsg, 
#ecEmailErrorMsg, 
#dateErrorMsg, 
#ssnErrorMsg, 
#addressErrorMsg, 
#address2ErrorMsg, 
#cityErrorMsg, 
#zipErrorMsg, 
#userIdErrorMsg {
	display: none;
}

.sliderNumbers {
	text-align: bottom;
}

#userIdErrorMsg {
	margin-left: 30px;
	margin-right: 80px;
}
	
#infoReview	{
	color: whitesmoke(47, 44, 44);
	font-size: 12px;
	padding-top: 20px;
	padding-bottom: 200px;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.dataOutput {
	font-size: 20px;
	text-transform: lowercase;
	font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	line-height: 1.5;
}

.dataOutput th {
	font-size: 24px;
	text-decoration-style: solid;
	text-decoration: underline;
	font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	line-height: 2.0;
}

.welcomeModalBox {
	display: block; /* Hidden by default */
	position: fixed; 
	z-index: 10000; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	font-size: 20px;
}

.welcomeModalContent {
	background-color: black;
	margin: 15% auto;
	padding: 15px;
	border: 2px solid #888;
	width: 30%;
	text-align: center;
}

.close {
	cursor: pointer;
	font-size: 24px;
	font-weight: bold;
}

.continueBtn {
	background-color: lightblue;
	border: solid gray;
	font-weight: bold;
	font-size: 15px;
	padding: 10px 20px;
	margin-top: 15px;
}

.close:hover,
.close:focus,
.continueBtn:hover,
.continueBtn:focus {
	text-decoration: none;
	opacity: 0.7;
	cursor:pointer
}

/*Creating sticky header that stays at the top of the page when scrolling*/
.sticky-header {
	position: sticky;
	top: 0px;
	background-color: #3b4f62;
	padding: 36px 0px 0px 0px;
	z-index: 9999;
}

#patientRegIframe {
	width: 100vw;
	height: 90vh;
	border: none;
	display: block;
	padding-top: 50px;
}