/* Body Styling */
:root {
    --background: #f9f9f9;
    --primaryText: #180126;
    --secondaryText: #7e7a8f;
    --tertiaryText: #c3c7d2;
    --primaryColor: #3a5df8;
    --secondaryColor: #f3ea12;
}
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
body {
      margin: 0;
      padding:0;
      color: var(--primaryText);
      font-family: "Open Sans", sans-serif;
}
h1 {
    font-size: 26px;
    font-weight: 700;
    padding: 0;
    margin: 0;
}
h2 {
    font-size: 20px;
    font-weight: 700;
}
h3 {
    font-size: 16px;
    font-weight: 700;
}
p {
    font-size: 16px;
    font-weight: 400;
}
/* ˅ This is so all the content sections have the same border, color and are vertically centered */
.bubble-style{
    border-radius: 20px;
      background-color: var(--background);
      border: 1px solid var(--tertiaryText);
      align-items: center;
}
/* This controls the layout of the page and stacks everything for mobile view (mobile first)  */
.wrapper {
    display: grid;
    grid-template-areas: 
        "header"
        "sidebar"
        "content";
}
.content-wrapper {
    grid-area: content;
}
/************************************ Section Styling ************************************/
  
/********** Nav Mobile View**********/
header {
    grid-area: header;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
}
nav {
    grid-area: sidebar;
}
.logo {
    width: 60%;
    margin: 0;
}
.hamburger {
    display: block;
    float: right;
}
button.hamburger {
   padding: 0;
   margin: 0;
   background-color: transparent;
   border: none;
}  
.nav-ul {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
    height: 70vh;
    background-color: var(--primaryColor);
    justify-content: center;
    z-index: 10;
} 
.nav-ul a {
    color: white;
    text-decoration: none;
    line-height: 1.5;
}
.nav-ul li {
    padding: 20px;
    list-style-type: none;
}
.nav-ul img {
    vertical-align: middle;
    margin-right: 5px;
}
.nav-ul.show {
     display: flex;
}
.active-link {
      color: var(--secondaryColor) !important;
}
/***** Title of Page and Back Button *****/
.page-title {
    margin-left: 1rem;
    margin-bottom: 0;
}
.page-title h1 {
    text-align: center;
}
.page-title a, .appointments a {
    color: var(--primaryColor);
    text-decoration: none;
}
.page-title a:hover, .appointments a:hover{
    color: var(--secondaryColor);
}
.page-title img {
    vertical-align: middle;
}
/* Styling for Headings */
.heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -20px;
}
.heading h2 {
    width: 60%;
}
/***** Search Bar Div *****/
.search {
    display: grid;
    margin: 2rem;
}
.search h2 {
    justify-content: left;
}
input, select {
    width: 200px;
    height: 40px;
    border: 1px solid var(--tertiaryText);
    border-radius: 4px;
    margin-right: 10px;
    margin-bottom: 10px;
}
input {
    background-color: var(--background);
}

select {
    background-color: #fff;
}

input:focus,
select:focus,
input:hover,
select:hover {
    border: 1px solid var(--secondaryColor) !important;
    box-shadow: 0 0 5px var(--secondaryColor);
    outline-offset: 0;
    outline: none;
}
.search-btn {
    background: var(--secondaryColor);
    color: var(--primaryText);
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 5px;
    width: 100px;
    height: 41px;
    text-align: center;
    margin-left: -20px;
    /*margin-top: 15px;*/
}
.search-btn:hover {
    background-color: var(--background);
    border: 1px solid var(--primaryColor);
    color: var(--primaryColor);
}
button {
    cursor: pointer;
}
.search-box {
    display: inline-block;
}
/****** Results Section ******/
.search-results {
    margin: 1rem 1rem;
}
.row-heading {
    display: none;
}
.row-results {
    display: grid;
    justify-content: center;
    text-align: center;
    padding: 10px;
    margin: 10px;
}
.row-results img {
    padding: 0;
    margin: 0;
}
.row-results:hover {
    background-color: #DAE4FF;
}
.col5, .col6 {
    display: none;
}
a.row-results {
    text-decoration: none;
    color: var(--primaryText);
}
 /************************Styling for Laptops and Small Screens 769px and up*****************************/
 @media only screen and (min-width: 769px) {
   
    /* This creates a two column view and makes the sidebar navigation visible  */
    .wrapper {
      grid-template-columns: 275px  1fr;
      grid-template-areas: 
          "header  header"
          "sidebar content";
      margin-right: 2rem;
    }
  
    /***** Need this to make nav visible *****/
    /***** Nav *****/
    .logo {
      width: 250px;
    }
   .nav-ul {
     display: flex;
     background-color: var(--primaryColor);
     border-radius: 0 20px 0 0;
     color: var(--background);
     height: 100vh;
     padding-top: 0;
     position: sticky;
     top: 0px;
   }
   
    nav a:hover,
    .activeLink {
      color: var(--secondaryColor);
    }
  
    .nav-ul li {
      line-height: 50px;
    }
    .nav-ul img {
      vertical-align: middle;
      padding-right: 5px;
    }
    
    /* hides hamburger button */
    .hamburger {
      display: none;
    }
    /***** styling for content headings *****/
    h2 {
      font-size: 20px;
      margin-bottom: 10px;
    }
      .med-info-detail{
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
      }
      .page-title h1 {
        margin-top: -30px;
      }
      /* Styilng for Search Box */
      .search {
          justify-content: center;
          margin-top: 0;
      }
      input, select {
          width: 300px;
          margin-right: 0;
      }
      .search-btn {
          margin-left: 5px;
      }
}
@media  (min-width: 960px)
{
     /****** Results Section ******/
     .row-heading {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        margin-bottom: 10px;
        font-weight: 700;
    }
    .row-results {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        text-align: left;
        padding: 0px 10px;
    }
    .col2 {
        margin-left: -30px;
    }
    .col1 {
        margin-left: 30px;
    }
    .col1 img {
        padding: 0;
        margin: 0;
    }
    .col5, .col6 {
        display: flex;
    }
}
/************************Styling for Desktops and Large Screens 1200px Up*****************************/
@media (min-width: 1200px) {
    /* This creates a 3 column view  */
      .wrapper {
          grid-template-columns: 275px 1.5fr 1fr;
          grid-template-areas: 
              "header  header header"
              "sidebar content content";
      }
      h1 {
        font-size: 30px;
      }
      
      .heading h2 {
        width: auto;
      }
      /* Styling for Search */
      input, select {
        width: 400px;
      }
      /* Styling for Results */
      .search-results {
          padding: 2rem;
          border: 1px solid var(--secondaryText);
          border-radius: 20px;
      }
}