/*Universal HTML*/
/* Contains universal shortcuts, header & footer CSS, and universal elements
/* Styled objects will have a main class then descriptive classes (ex. page-info data > page-info=main class, data=descriptive class */
/* Classes used universally */
:root{
    --nat-indigo: #063540FF;
    --blue-em: #0F5959FF;
    --parsley: #3C7344FF;
    --plain-green: #6A8C37FF;
    --page-white: #F2F2F2FF;
}

main{
    font-size: large; 
    display: flex;
    flex-wrap: wrap; 
    flex-direction: row-reverse;
    background-color: var(--blue-em);
}

textarea{
    resize: none;
}

/*Nav Formating*/

.universal-header{
    align-items: center;
    justify-content: center;
    width: 100%;
    display: flex;
}

.header-nav {
  list-style-type: none;
  margin: 0;
  padding: 10px 0 0 0;
  overflow: hidden;
  background-color: var(--nat-indigo);
  height: 80px;
  display: flex;
}

.header-nav.right-nav{
    text-align: left;
    flex: 1;
    flex-direction: row;
}

.header-nav.left-nav{
    text-align: right;
    flex: 1;
    flex-direction: row-reverse;
}

.nav-li {
  height: 100%;
  padding: auto;
}

.nav-li a, .drop-nav {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: larger;
  font-weight: bold;
}

.nav-li a:hover, .dropdown:hover .drop-nav {
  background-color: grey;
}

.nav-li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dual-list-1 {
    width: 50%;
    margin-top: 0;
}

.dual-list-2 {
    width: 45%;
    margin-top: 0;
    margin-left: 5%;
}

/*End of Nav*/

/*Footer Nav*/
    
.footer-third{
    width: 23%; 
    margin-left: 10%;
}

.footer-last-third{
    width: 33%;
}

.footer-head{
    background-color:#063540FF; 
    background-image: url(../Images/HSA_Logo_Fadded_Footer.png); 
    background-repeat: no-repeat; 
    background-size: 600px; 
    display: flex; 
    flex-wrap: wrap; 
    color: var(--page-white); 
    padding-top: 1%;
}

.footer-header, .footer-header-centered{
    text-decoration: underline; 
    font-weight: bold; 
    margin-bottom: 10px;
}

.footer-header-centered{
    text-align: center;
}

.footer-list, .footer-list-break{
    text-align: center; 
    padding-inline-start: 0; 
    list-style: none;
}

.footer-list-break{
    width: 50%; 
    display: flex;
}

.footer-TopLink{
    width: 6%; 
    margin: 2%; 
    background-color: var(--nat-indigo); 
    text-align: center; 
    border: var(--page-white) 1px solid; 
    color: var(--page-white); 
    text-decoration: none;
}

.footer-legal{
    width: 80%; margin-left: 10%; text-align: center;
}

/*End of Footer Nav*/



.page-title{
    margin-top: 10%;
    color: black; 
    font-size: 30pt; 
    background-color: #F2F2F299; 
    width: auto;
}

.page-tag{
    width: 50%; 
    margin-bottom: 20px; 
    margin-top: 20px; 
    margin-right: 25%; 
    margin-left: 25%; 
    padding: 15px; 
    display: flex; 
    flex-wrap: wrap; 
    border: solid black 1px;
    background-color: var(--page-white);
    border-radius: 30px;
}

.page-tag.tight{
    width: fit-content;
    flex-direction: column;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

.page-questionare{
    width: 80%; 
    margin-left: 10%; 
    border: 1px black solid; 
    margin-bottom: 20px;
    margin-right: 12%;
    background-color: var(--page-white);
}

.page-title.image-genoa{
    background-image: url(../Images/FAqgSQhr_400x400.jpg);
    width: 413px;
    height: 168px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    margin: auto;
    margin-top: 120px;
}

.inner-nav{
    width: 14%; 
    margin: 3% 1% 1% 1%; 
    height: 100px;
    
}

.nav-element{
    height: 70px; 
    width: 100%;
    padding-top:20px; 
    border: 1px black solid; 
    text-align: center;
    background-color: var(--page-white);
}

.underline{
    border: black 2px solid;
    width: 100%;
    height: 1px;
}

.hidden{
    display:none;
}

.page-image, .index-image{
    width: 100%;
    height: 25em;
    text-align: center;
    object-fit:cover;
    border: 2px black solid;
    background-image: url(../Images/Forest_Roof_Image_Banner.jpg);
}

/*Header Image of Info Pages*/

.index-image{
    background-image: url(../Images/HSA_Building_Banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.department-list{
    width: 100%; 
    background-color: #063540FF; 
    border: 2px black solid; 
    transform: skew(-25deg); 
    color: white; 
    text-align: center;
}

.department-list p{
    transform: skew(25deg);
    margin: 0;
    margin-top: 25px;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    font-size: larger;
    
}

.index-departments{
    background-color: black; 
    margin-bottom: 10px; 
    height: 80px;
    width: 100%; 
    grid-area: DP;
}

.index-departments div{
    width: 105%; 
    padding: 0; 
    text-align: center; 
    height: 80px; 
    margin-left: -2.5%;
    display: grid;
    grid:'DP DP DP DP DP DP';
}

.index-selection{
    display: flex;
    margin: 30px 0;
}

.index-selection.centered{
    margin:0 10%;
}

.index-table{
    margin: auto;
    border: 2px black solid;
    text-align: center;
    background-color: chartreuse;
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.index-table ul{
    width: 50%;
    list-style-type: none;
}

.index-table li{
    margin: 10px;
}

.spacer{
    width: 10%;
}

.lrg-image{
    text-align: center;
    margin-top: 15px;
    font-size: large;
    padding: auto;
}

.full-width{
    width: 100%;
    font-weight: bold;
    text-decoration: underline;
}

.map-options {
    list-style-type: none;
}

.map-li {
    border: solid black 1px;
    margin: 5px;
    text-align: center;
    justify-content: center;
    line-height: 40px;
    font-size: 12pt;
    text-decoration: none;
}

.index-map{
    margin: 5%;
    border: 2px black solid;
    text-align: center;
    display: flex;
    width: 90%;
    background-color: var(--page-white);
}

.info-image{
    width: 40%;
    text-align: center;
    background-color: var(--page-white);
    border: 1px black solid;
    overflow: hidden;
}

.info-image img{
    padding: 0;
}

#embeded-map{
    height: 400px;
    width: 100%;
}

.info-index{
    width: 60%; 
    text-align: left; 
    justify-content: center;
    background-color: var(--plain-green);  
    border: 1px black solid; 
    padding: 2% 3%; 
    color: #F2F2F2;
}

.info-index h1{
    text-align: center;
}

.top-info{
    width: 68%; 
    margin: -60px 0% 0 auto;
    padding: 15px; 
    display: flex; 
    flex-wrap: wrap; 
    background-color: #F2F2F2FF; 
    border-top: solid black 1px;
}/*Paragraph of information at the top of the page*/

.top-info.navless{
    margin-right: 16%;
}/*If the paragraph doesn't have a side navigation*/

.top-info.leftnav{
    margin-right: 16%;
}

.page-info{
    width: 68%;
    margin: 20px 16% 0 auto;
    padding: 15px; 
    background-color: #F2F2F2FF; 
    display: flex; 
    flex-wrap: wrap;
}

.page-info.data{
    padding: 0;
}

.page-info.topless{
    margin-top: 0;
    margin-bottom: 0;
}

.info-ul{
    width: 85%; 
    margin-left: 5%;
}

.info-title{
    text-decoration: underline;
    text-align: center;
    font-weight: bold;
    width: max-content;
    margin: 0 auto 0;
}
/*For title of info blocks*/

.info-title.sub{
    width: 100%;
    text-decoration: none;
    margin-top: 5px;
}

.info-title.full-width{
    width: 100%;
}

/*Pharmacy Page*/
.address-stamp{
    width: 44%;
    margin: 20px 3% 20px 3%;
    border: 1px solid black; 
    text-align: center; 
    border-radius: 15px;
}

.select-buttons{
    width: 30%; 
    border: black solid 1px; 
    list-style: none; 
    padding-left: 0; 
    margin-top: 0;
    margin-bottom: 0; 
    height: 100%; 
    display: flex; 
    flex-direction: column;
}

#meeting-tabs{
    width: 70%;
}

#meeting-locations{
    display: flex-inline;
    flex-wrap: wrap; 
    text-align: center; 
    padding: 0 7%; 
    width: 80%;
}

.top-app {
    width: 90%; 
    margin: -60px 5% 0 5%;
    padding: 15px; 
    display: flex; 
    flex-wrap: wrap; 
    background-color: #F2F2F2FF; 
    border-top: solid black 1px;
}

.list-third{
    width: 30%;
}

.list-half{
    width: 45%;
}

.list-space{
    margin-left: 5%;
}






/* 576px-767px (small) */
@media (max-width: 767px) {
    .department-list{ width: 100%;}
}

/* 768px-991px (medium) */
@media (min-width: 768px) and (max-width: 991px) {
    .department-list{ width: 100%;}
}

/* 992px-1199px (large) */
@media (min-width: 992px) and (max-width: 1199px) {
    
}

/* screens greater than 1199px (x-large) */
@media (min-width: 1200px) {

}