/* The Modal (background) */
    .modalws {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      /*transition:*/ 
    }

    /* Modal Content */
    .modalws-content {
        position: absolute;
        background-color: #fefefe;
        padding: 0;
        border: 1px solid #888;
        width: 80%;
        animation-name: animatetop;
        animation-duration: 0.4s;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 8px;
        max-width: 640px;
    }

    .modalws-header td, th
    {
      padding: 0px;
    }
    /* Add Animation */
    @-webkit-keyframes animatetop {
      from {top: -0px; opacity:0} 
      to {top:50%; opacity:1}
    }

    @keyframes animatetop {
      from {top:0px; opacity:0}
      to {top:50%; opacity:1}
    }

    /* The Close Button */
    .close {
      color: white;
      float: right;
      font-size: 28px;
      font-weight: bold;
      vertical-align: middle;
       
    }

    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }

    .modalws-header {
        padding-left: 10px;
        padding-right: 10px;
        background-color: #5ad10c;
        color: white;
        border-radius: 5px 5px 0px 0px;
        height: 40px;
        padding-top:3px;
        
    }

    .modalws-body {padding: 2px 16px;}

    .modalws-footer {
      padding: 2px 16px;
      background-color: #5cb85c;
      color: white;
    }
    .md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  .md-show {
    visibility: visible;
    transition: all 0.3s
  }

  .md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(40,43,49,.8);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }

  .md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
  }

  /* Content styles */
  .md-content {
    color: #333;
    background: #fff;
  }

  /* Effect 1: Fade in and scale up */
  .md-effect-1 .md-content {
    -webkit-transform: scale(1) ease-in-out;
    -ms-transform: scale(1) ease-in-out;
    transform: scale(1) ease-in-out;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: 0.5s ease-in-out;
  }

  .md-show.md-effect-1 .md-content {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  .pop
  {
    color: #721c24;
    background: #f8d7da;

    
  }

  .fade{
    padding: .75rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    text-align: center;
    border-color: #f5c6cb;
    width: 100%;
    top:-20%;
    transition: 0.6s ease-in-out;
  }