.membercard{
  text-decoration: none;
  margin: 8px;
  border: 1px solid #ccc;
  float:none;
  width: 45%;
  text-align: center;
  border: 2px solid rgb(194, 194, 194);
  border-radius: 15px;
  background-color: rgb(243, 243, 243);
  color: #444;
  max-width: 200px;
  padding: 10px;
  }
  .membercard:hover{box-shadow: 1px 1px 5px grey;}
  .membercard >img {
    width: 100%;
    height: auto;
  }
  .footerbox{
    position: absolute;
    bottom:70px;
    right:20px;
  }
  .memberlogout{
    color:orangered;
    background-color: papayawhip;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin: 5px; 
    border: 1px solid #ccc;
    float: left;
    width:fit-content;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;

  }

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 10px;
    width: 95%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.5em;
    transition: 0.4s;
    display: flex;
    align-items: center;
    margin: 10px;
    border-radius: 10px;
    max-width: 600px;
    
  }
  .accordion >img{margin-right: 20px;}
  .accordianindicator{flex-grow: 1;text-align: right;align-self: center;align-items: flex-end;}
  .active, .accordion:hover {
    background-color: rgb(125, 140, 150);color: white;
  }
  
  .panel {
    padding: 0 8px;
    width: 90%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin: 10px;
  }

  .itemCard{max-width: 500px; display:flex;  flex-wrap: wrap;align-items: stretch ;align-content: center;justify-content: center;border: 1px solid grey; border-radius: 15px; box-shadow: 1px 2px 5px rgb(209, 209, 209);margin-bottom:5px}
  .CardLeft{padding:8px;width:60%; align-items: stretch ;align-content: center;justify-content: center;font-size: 1.1em;}
  .CardRight{width: 40%;background-color: rgb(109, 255, 109);align-items: stretch ;align-content: center;justify-content: center;font-size: 1.3em; border-bottom-right-radius: 15px; border-top-right-radius: 15px;}
  .CardLeft >p{padding:5px}
  .CardRight >p{padding: 1.8rem 1em 1em 1em;text-align: right;}

  .modal {
    position: fixed;
    top:60%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    border: 2px solid orangered;
    border-radius: 15px;
    background-color: rgb(253, 231, 211);
    z-index:10;
    width: 500px;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
    box-shadow:1px 1px 10px rgb(125, 140, 150);
    transition: 0.5s ease-in-out;
    color: rgb(31, 31, 31);
  }
  .modal.ShowModal{
    transform: translate(-50%, -50%) scale(1);
    transition: 0.5s;
  }

  .modal-header{
    padding: 10px 15px; 
    display:flex; 
    justify-content:space-between;
    align-items: center;
    border-bottom:1px solid orangered;
  }
  .modal-title{
    font-size: 1.25rem;
    font-weight: bold;
  }
  .modal-close-button{
    cursor: pointer;
    font-size: 2rem;
    font-weight: bold;
  }
  .modal-content{
    padding: 10px 15px;
  }
  #modaloverlay{
    position: fixed;
    opacity: 0; 
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0, .5);
    pointer-events: none;
    transition: 0.5s ease-in-out;
  }
  #modaloverlay.ShowModal{
    opacity:1;
    pointer-events: all;
  }
  #modaldata >p{padding-top: 5px;padding-bottom: 5px; border-bottom: 1px dashed rgba(223, 108, 0, 0.61);}



.desktop{display:block}
.mobile{display:none}

@media screen and (max-width: 720px) {
  .desktop{display:none}
  .mobile{display:block}

 
}