/**********************************************************************************
 * page_template.css
 *
 * CSS stylings for the project's page layout (i.e. non-content elements, present
 * on every page).
 **********************************************************************************
 */

@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Livvic&display=swap');


/* top level styles */

  .row {
    max-width: 85rem;
  }

  body {
    background-color: #F5F3ED;
    font-family: 'Livvic', sans-serif;
  }





/* layout */

/* header */

  header {
    background-color: #1AA84C;
    box-shadow: 2px 2px 2px 1px #ddd;
    letter-spacing: 0;
  }

  @media screen and (max-width: 1024px) {
    header {
      padding: 1.1625rem;
      padding-bottom: 0rem;
    }
  }

  header .logo img {
    float: left;
    margin: 0;
    width: 100%;
    max-width: 13rem;
    margin: 1.5rem 0;    
  }

  @media screen and (max-width: 1024px) {
    header .logo img {
      margin: 0.5rem 0 1.25rem 0;
    }
  }  

  header .logo p {
    color: #FFFFFF;
    font-size: 1.25rem;
  }

  header p {
    font-size: 1.25rem;
    letter-spacing: 0;
    font-weight: bold;
  }

  @media screen and (max-width: 1200px) and (min-width: 1024px) {
    header p {
      font-size: 1.125rem;
    }
  }

  #home_link {
    float: left;
  }

  .search.site {
    margin-top: 2.125rem;
    padding-left: 2rem;
  }

  @media screen and (max-width: 1024px) {
    .search.site {
      margin-top: 0.5rem;
    }
  }

  @media screen and (max-width: 1024px) {
    .search.site {
      padding-left: 0.9375rem;
      padding-right: 0.9375rem;
    }
  }


  .search input {
    background: url(https://www.apistaging.myhealthguideapp.com/index.php?Request=image&Path=images%2Fsearch-icon-green.png) no-repeat 98% 50%;
    background-color: #fafafa;
    background-size: 1.5rem 1.5rem;
    border-radius: 0.3125rem;
    border: solid 0;
    box-shadow: none;
    font-size: 1.25rem;
  }

  .account-details {
    float: right;
    margin-top: 0.5rem;
  }

  @media screen and (max-width: 1024px) {
    .account-details {
      margin-right: 2rem;
    }
  }


  .account-details .logout-link {
    background: url(https://www.apistaging.myhealthguideapp.com/index.php?Request=image&Path=images%2Fuser-icon-dark-blue.png) no-repeat 0 3px;
    background-size: 1.25rem 1.25rem;
    padding-left: 1.5rem;
  }



  .vetting-link {
    float: right;
    clear: right;
    margin-right: 0;
    margin-top: 0;
  }


  .site-links {
    clear: right;
    text-align: right;
  }

  @media screen and (max-width: 1024px) {
    .account-details, .vetting-link, .site-links {
      float: left;
      margin-top: 0.5rem;
    }
  }

  @media screen and (max-width: 1024px) {
    .site-links {
      clear: left;
      margin-top: 0.5rem;
    }
  }

  @media screen and (max-width: 1024px) {
    .vetting-link {
      margin-bottom: 1rem;
    }
  }

/* New interim banner for My Health Guide */

  .change-to-my-health-guide {
    background-color: #6420B2;
    text-align: center;
    padding: 10px 0;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
  }

  @media screen and (max-width: 1024px) {
    .change-to-my-health-guide {
      margin-left: -1.1625rem;
      margin-right: -1.1625rem;
    }
  }

  .change-to-my-health-guide img {
    height: 35px;
    margin-right: 20px;
  }

  .change-to-my-health-guide p {
    margin: 0;
    color: #fff;
    font-size: 1.125rem;
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
  }

  .change-to-my-health-guide a {
    margin: 0 0 0 20px;
    color: #6420B2;
    background-color: #ffffff;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 1.125rem;
    white-space: nowrap;
    border: 1px solid #31007F;
  }

  .change-to-my-health-guide a:hover {
    background-color: #31007F;
    color: #FFFFFF;
    text-decoration: none;
    border: 1px solid #FFFFFF;
  }


/* Additional About me banner */ 

.change-to-my-health-guide.about-me-updated {
  background-color: #F9CF5F;
  border-top: 0;
}

.change-to-my-health-guide.about-me-updated p {
  color: #000000;
}

.change-to-my-health-guide.about-me-updated a {
  color: #000000;
  border: solid 1px #000000;
}

.change-to-my-health-guide.about-me-updated a:hover {
  color: #FFFFFF;
  background-color: #000000;
  border: solid 1px #FFFFFF;  
}





/* end MHG banner */


/* filters area */

  .filters {
    background-color: /*#F5F3ED #F5EADA; #E8E6E1;*/ #DCDCDC;
    box-shadow: inset 0 10px 20px -20px rgba(0,0,0,0.8);
    padding: 1rem 2rem 1.5rem 2rem;
    margin-bottom: 2rem;
  }




/* secondary filters */

  .secondary-filters {
    float: left;
    padding-top: 1rem;
    width: 100%;
  }

  .secondary-filters p {
    margin: 0.5rem 0 0 0;
  }

  .secondary-filters input {
    margin-top: 0.5rem;
    vertical-align: top;
  }

  .secondary-filters input.DateDay {
    width: 18%;
    float: left;
    text-align: center;
  }

  .secondary-filters input.DateMonth {
    width: 18%;
    float: left;
    text-align: center;
  }

  .secondary-filters input.DateYear {
    width: 30%;
    margin-right: 3%;
    float: left;
    text-align: center;
  }

  .DateSeparator {
    float: left;
    padding-top: 0.5rem;
    font-size: 1.5rem;
    width: 7.5%;
    text-align: center;
    color: #BBBBBB;
  }

  .filters img.ui-datepicker-trigger {
    width: 15%;
    padding-top: 0.4375rem;
    margin: 0;
    float: left;
  }

  @media screen and (max-width: 1024px) {
    .filters img.ui-datepicker-trigger {
      width: 2rem;
    }
  }

  @media screen and (max-width: 360px) {
    .filters img.ui-datepicker-trigger {
      width: 12%;
    }
  }


  .user-type {
    clear: left;
  }

  .user-type input {
    margin-bottom: 0;
  }

/* stops the last activity label wrapping under the checkbox */
  .filters label.last-activity {
    width: 80%;
  }


/* end filters */



/* main content list */

  .content-column {
    padding: 2rem 0.9375rem 2rem 2rem;
  }

  @media screen and (max-width: 1024px) {
  .content-column {
      padding: 2rem;
    }
  }


  .list {
    list-style: none;
    margin: 0;
  }

  @media screen and (max-width: 1024px) {
  .list {
      padding: 0;
    }
  }


/* main content intro */

  .intro {
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #e5e5e5;
    margin-bottom: 0.625rem;
    margin-left: 0;
    margin-right: 0;
    overflow: auto;
    padding-top: 1.2rem;
  }

  .total-shares {
    margin-bottom: 1rem;
  }

  .total-shares .icon {
    float: left;
    margin-right: 1.6rem;
    text-align: center;
  }


/* icons for user page */

  .user-icons .icon {
    float: left;
    margin-right: 1rem;
  }

  .user-detail {
    margin-bottom: 1rem;
  }


/* user specific search */

  .search.user {
    margin-top: 1.5625rem; /* 25px */
  }

  .page-sort-filter.main-activity-view {
    margin-top: 0.25rem;
  }


/* end activity intro */

/* list of activities or box content or search results */

/* list title styles */

  .title {
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #e5e5e5;
    margin-bottom: 0.625rem;
    overflow: auto;
    padding: 0.8125rem 0.5rem 0.25rem 0.5rem;
    text-align: center;
  }

  @media screen and (max-width: 1024px) {
    .title {
      padding-bottom: 1rem;
      padding-top: 1rem;
    }
  }

  .title h2 {
    color: #1AA84C;
  }

  .title .button {
    float: left;
    margin: 1rem 0 0 0;
  }

  .title.box-name h2 {
    margin-top: 0.5rem;
    text-align: left;
  }

  .title.box-name img {
  border-radius: 5px;
  float: left;
  margin-bottom: 0.5rem;
  width: 8rem;
  }

/* end 'title' specific styles */

/* non list content, medical info, about us etc */

  .content {
    background-color: #fff;
    border-radius: 0.3125rem;
    border: solid 1px #e5e5e5;
    padding-top: 1rem;
    margin: 1rem 0;
  }


/* main list styles */

  .no-activity {
    margin-left: 0.9375rem;
  }

  .list li {
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #e5e5e5;
    list-style: none;
    margin-bottom: 0.625rem;
    overflow: auto;
    padding: 1.35rem 0.5rem 0.5rem 0.5rem; /* additional padding for list items over the foundation default - previously 0.8125rem 0 0 0; */
  }

  .columns.intro { /* additional left and right padding for the 'intro' block */
    padding-left: 1.4375rem;
    padding-right: 1.4375rem;
  }

  .medical .columns.content { /* additional left and right padding for the medical form */
    padding-left: 1.4375rem;
    padding-right: 1.4375rem;
  }

  .appointments .list li {
    padding-bottom: 0.8125rem; /* alternate bottom padding */
    width: 96%;
    text-align: left;
    min-height: auto;
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .contacts .list li {
    padding-bottom: 0.8125rem; /* alternate bottom padding */
  }




/* image list display */
  .image-preview {
    float: left;
    margin: 0;
    width: 100%;
  }

  .image-preview li {
    border: 0;
    float: left;
    margin-right: 2%;
    padding: 0;
    width: 18%;
  }

  .list .image-preview img {
    width: 100%;
  }


/* formats full user name */
  .list .full-name {
    clear: left;
    color: #666;
    font-size: 0.875rem;
  }


/* bespoke contacts styling */
  .contacts li img {
    width: 6.25rem; /* 100px */
  }

  .contacts h3 {
    font-size: 1.25rem;
  }

  .contacts .button {
    margin-top: 1rem;
  }



/* list date formatting */

  .entry-date {
    color: #666666;
    text-align: right;
  }

  @media screen and (max-width: 1024px) {
    .entry-date {
      text-align: left;
    }
  }


/* pending block */

  li.pending {
    background-color: #7EB439;
    border: solid 1px #33562E;
  }


  .paginate-buttons {
    margin-top: 2rem;
    text-align: center;
  }

  .paginate-buttons .button {
    width: 6rem;
  }

/* end list content */



/* additional padding for text only pages on white background */
  .text-only-page .content {
    padding: 3rem;
  }

    @media screen and (max-width: 1024px) {
    .text-only-page .content {
      padding: 2rem;
    }
  }

/* override for 'default' styling medical and text only page margin */
  .medical .content, .text-only-page .medical {
    margin: 0 0 0 0;
  }

/* override for default padding on single column content */
  .content-column.text-only-page {
    padding-right: 2rem;
  }



/* footer */

  footer {
    background-color: #1AA84C;
 
  }

  @media screen and (max-width: 1024px) {
    footer {
      padding: 1.1625rem;
    }
  }

  footer .site-links {
    margin-top: 3rem;
    text-align: left;
    padding: 0;
  }

  @media screen and (max-width: 1024px) {
    footer .site-links {
      margin-top: 0;
    }
  }

  footer .site-links ul {
    margin-left: 0.25rem;
  }

  .social-media {
    margin-top: 2.625rem;
  }

  @media screen and (max-width: 1024px) {
    footer .social-media {
      margin-top: 0.25rem;
    }
  }

/* end footer */











/* extra stuff for demo */

  .anchor {
    display: block;
    height: 10px; /*same height as header*/
    margin-top: -10px; /*same height as header*/
    visibility: hidden;
  }

  .accept-decline {
    float: left;
   }

   .shared-with {
   background-color: #fafafa;
   border-bottom: solid 1px #e5e5e5;
   overflow: auto;
   padding: 0.65rem 1rem 0 1rem;
   }

  .hcp-email {
    float: left;
    width: 70%;
  }

  .contacts .hcp-email {
    width: 90%;
  }

  .hcp-email p {
    margin-top: 0.35rem;
  }

  .modalDialog .accept-decline img {
    margin: 0 0.25rem;
    width: 2rem;
  }

  .vetting-item {
    border-bottom: solid 1px #efefef;
    clear: left;
    float: left;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
    padding-bottom: 1.75rem;
    width: 100%;
  }

  .vetting-item .columns {
    padding-left: 0;
    padding-right: 0;
  }

  .contacts .vetting-item {
    border-bottom: 0;
  }

  .modalDialog h2 {
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 1rem;
    margin-top: 1rem;
  }

  .modalDialog p {
    font-family: 'Open Sans', sans-serif;
  }


 /* modal stuff */

  .modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
	display: none;
  }

  .modalDialog:target {
    opacity:1;
    pointer-events: auto;
  }

  .modalDialog > div {
    width: 650px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 5px;
    border: solid 1px #ccc;
    background: #fff;
  }
  .ClearBoth{
	  clear: both;
  }
  .close {
    background: #CC0000;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
	cursor: pointer;
  }

  .close:hover {
    background: #990000;
    text-decoration: none;
    color: #fff;
    }


  .cancel {
    line-height: 2.5rem;
    vertical-align: top;
    float: right;
    margin-right: 1rem;
  }

  .modalDialog img {
    width: 6rem;
    float: left;
    margin: 1rem 1rem 1rem 0;
  }

  .modalDialog form {
    clear: left;
  }