/* if ANY changes are made in this file increment the version number in all html files, !important */

/* declared all variables here */
:root {
	--backGroundColor: #efdecd;
	--lightBlue: #94cffb;
	--darkBlue: #428589;
	--almostWhite: #f5f5f5;
	--almostBlack: #333;

	--fs-700: 2.5rem;
	--fs-600: 1.5rem;
	--fs-500: 1.25rem;
	--fs-400: 1rem;
	--fs-300: 0.5rem;

	--radius: 30px;
}

@media only screen and (min-width: 700px) {
	:root {
		--fs-600: 2.25rem;
		--fs-500: 2rem;
		--fs-400: 1.5rem;
		--fs-300: 1.25rem;
	}
}

/* multi page styles */

body {
	margin: 0;
	padding: 0;
	background-color: var(--backGroundColor);
	font-family: 'Heebo', sans-serif;
}

nav {
	background-color: var(--darkBlue);
	display: flex;
	justify-content: center;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	width: 100%;
	border-bottom: 2px solid #111;
	z-index: 1;
}

nav > a {
	color: #000;
	text-decoration: none;
	margin: 0 10px;
	font-size: var(--fs-400);
	z-index: 1;
}

nav > a:hover {
	background-color: var(--backGroundColor);
	border-radius: 3px;
}

@media only screen and (max-width: 460px) {
	nav {
		display: block;
		position: relative;
		padding: 10px 0;
	}

	nav > a,
	nav > div > a {
		text-align: center;
		display: block;
		width: 50%;
		margin: 4px auto;
		border-bottom: 1px solid var(--backGroundColor);
		font-size: var(--fs-500);
	}

	nav > a:last-child {
		border-bottom: none;
		margin: auto;
	}
}

iframe {
	border: none;
	width: 100%;
	height: 100%;
}

footer {
	color: #000;
	font-size: var(--fs-400);
	text-align: center;
	margin: 20px;
}

hr {
	border: 1px solid var(--darkBlue);
	width: clamp(100px, 20%, 90%);
	margin: 5vh auto 20px auto;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
	padding: 0 5px;
	width: clamp(100px, calc(100% - 10px), 1000px);
	color: #000;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	color: #000;
}

.logo {
	width: clamp(100px, 100%, 600px);
	height: clamp(100px, 100%, 600px);
}

.blackBackground {
	background-color: #000;
}

.darkBlue {
	color: var(--darkBlue);
}

.bigLink {
	font-size: var(--fs-500);
	margin: 20px;
}

/* index.html */
.indexInfo {
	padding: 0 10px;
	font-size: var(--fs-400);
	background-color: var(--darkBlue);
	color: #000;
	border-radius: var(--radius);
}

.indexInfo > h3 {
	margin-bottom: 20px;
	padding: 0 5px;
}

.indexInfo > ol {
	padding: 20px;
}

@media only screen and (min-width: 600px) {
	.indexInfo > ol {
		padding: 30px;
	}
}

.video {
	margin-top: 20px;
	border: 3px solid var(--darkBlue);
	border-radius: var(--radius);
	width: clamp(100px, calc(100% - 6px), 1000px);
	height: 30vh;
	padding: 0;
}

@media only screen and (min-width: 600px) {
	.video {
		height: 50vh;
	}
}

.guideInfoContainer {
	position: relative;
	margin-top: 20px;
	width: calc(100% - 6px);
	height: 400;
}

.pillImg {
	margin: -3px;
	border: 3px solid var(--almostBlack);
	border-radius: var(--radius);
	opacity: 0.75;
}

.guideInfoText {
	color: #000;
	position: absolute;
	top: 0;
	padding: 0 10px;
	font-size: var(--fs-400);
}

.drugImgContainer {
	background-color: #fff;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	margin-top: 18px;
	grid-gap: 20px;
	width: calc(100% - 46px);
	border: 3px solid var(--darkBlue);
	border-radius: var(--radius);
	padding: 20px;
}

.drugImgContainer > img {
	width: clamp(100px, 250px, 400px);
	margin: auto;
}

/* about.html */
.justifyText {
	color: #000;
	text-align: justify;
	font-size: var(--fs-500);
	padding: 0 10px;
}

.centerTitle {
	color: var(--darkBlue);
	text-align: center;
	font-size: var(--fs-700);
}

.aboutImage {
	width: clamp(100px, 40vw, 400px);
	height: clamp(150px, 40vh, 600px);
	float: left;
	margin-right: 40px;
	border-radius: var(--radius);
}

/* institution.html */

#logOut {
	display: none;
	font-size: var(--fs-300);
	margin-left: 10px;
	background-color: var(--backGroundColor);
}

#logOut:hover {
	background-color: var(--darkBlue);
	color: var(--backGroundColor);
}

form > h1 {
	text-align: center;
	font-size: var(--fs-500);
	margin-top: 50px;
}

input {
	text-align: center;
	font-size: var(--fs-500);
	margin-top: 10px;
}

/* register.html */
.registrationForm {
	width: 97vw;
	height: 2570px;
	border: 3px solid var(--darkBlue);
	border-radius: var(--radius);
}

@media only screen and (min-width: 600px) {
	.registrationForm {
		width: 700px;
		height: 2400px;
	}
}

/* hipaa.html */
.container > .hipaa {
	margin-top: 60px;
}

/* medicare.html */
.floridaImage {
	padding: 10px;
	width: 35%;
	height: 30%;
	border-radius: var(--radius);
}

.medicareStates {
	padding-top: 7%;
}

/* viewer.pdf */
.pdfError {
	padding: 5%;
	font-size: var(--fs-500);
	color: #000;
	text-align: center;
}

#iframeContainer {
	width: 100%;
	height: 97vh;
}

/* medicaid.html (map) */

svg {
	width: clamp(400px, 60%, 100%);
	height: auto;
}

.state {
	fill: #ccc;
}

.abbrText {
	fill: #000;
}

.hovered {
	fill: #279d21;
	stroke-width: 2;
}

.active {
	fill: #94068d;
	stroke-width: 2;
}

#stateLinks {
	color: #000;
	font-size: var(--fs-400);
}

#stateName {
	font-size: var(--fs-500);
	padding: 0;
	margin: 0;
}

#mapContainer {
	display: block;
	text-align: center;
}

/* if ANY changes are made in this file increment the version number in all html files, !important */