/*
    Document   : ichthuskerk
    Created on : <date>
    Author     : <author>
    Description:
        This is where any of your application specific styles should be included
*/

<!-- calc(100vh - 40px - 50px);   screenheight - headerheight - footerheight   (footer always 50 px ??!!) -->

a {
text-decoration: underline;
color: #40807d;
}
  .pine {
    background-color: #1E3224;
  }
  .overzicht-panel {
    width: 14.38rem;
    height: 7.81rem;
    display: inline-block;
  }

  .demo-full-height {
    height: 100%;
  }

  .nav-drawer {
    min-width: 280px;
    max-width: 280px;
    width: 280px;
    position: relative;
    
  }

  .footer-drawer {
    min-width: 280px;
    max-width: 280px;
    width: 280px;
    position: relative;
  }

  .header-height {
    height: 40px;
  }

  .footer-height {
    height: 30px;
  }

  .footer-push {
    height: calc(100vh - 40px - 50px);
    max-width: 0px;
    background-color: red;
  }

  .main-content-width {
    background-color: white;
  }

  .system-message {
    background-color: #1E3224;
    color: white;
  }

  .bread-crumb {
    padding-left: 10px;
  }

  .flat-card {
    color: #333333;
    border: 1px solid #d1d1d1;
    background-color: #ffffff;
    --oj-masonry-layout-tile-width: 180px;
    --oj-masonry-layout-tile-height: 175px;
    --oj-panel-gutter: 10px;
  }

  .contact-card {
    color: #333333;
    border: 1px solid #d1d1d1;
    background-color: #ffffff;
    --oj-masonry-layout-tile-width: 225px;
    --oj-masonry-layout-tile-height: 175px;
    --oj-panel-gutter: 10px;
  }
  
  .flat-card:hover {
    border: 1px solid #3e835e;
    background-color: hsla (148, 36%, 92%, 0.7);
  }

  .flat-card-top {
    height: 48px;
    max-height: 48px;
  }
  .flat-card-icon {
    width: 48px;
    max-width: 48px;
    max-height: 48px;
    background-color: #40807d;
    color: white;
    padding: 8px;
    border-radius: 50%;
    box-sizing: border-box;
  }

  .flat-card-title {
    color: #333;
    font-size: 16px;
    padding-left: 10px;
    padding-top: 5px;
    box-sizing: border-box;
  }

  .flat-card-bottom {
    min-height: 48px;
  }

  .flat-card-description {
    margin-top: 10px;
    min-height: 48px;
    vertical-align: top;
  }


  @media print, screen and (max-width: 454px) {
    .nav-drawer {
      min-width: 454px;
      max-width: 454px;
      width: 454px;
      min-height: 489px;
      height: 489px;
    }

    .flat-card {
      max-width: calc(100vw-10px);
      width: calc(100vw-10px);
      --oj-masonry-layout-tile-width: 175px;
      --oj-panel-gutter: 5px;
      }
      .flat-card-title {
      max-width: 100px;
      }
      .contact-card {
        max-width: calc(100vw-10px);
        width: calc(100vw-10px);
        --oj-masonry-layout-tile-width: 185px;
        --oj-panel-gutter: 5px;
        }
      }

  .fa {
    vertical-align: middle;
    font-size: 20px;
  }


  .slider {
    background-color:#4B825B;
    max-height: 200px;
  }