 /*Modal (background) */ 
 .modal {
 display: none; 
 position: fixed; 
 z-index: 1;
  padding-top: 100px; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  /*background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.8); transparan bisa hilang*/
  } 
  
/* Modal Content */ 
  /*.modal-content { position: relative;
   background-color: #fefefe; 
   margin: auto; padding: 0;
    border-radius:5px; width: 80%; 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
    -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s; 
     animation-name: animatetop; 
     animation-duration: 0.4s 
 } */



 .bg-modal{
 width: 100%;
 height:100%;
 background-color: rgba(0,0,0,0.5); /* make it half transparent */
 position: absolute;
 top:0px;
 z-index: 1;
 display: none;  /* It will remain invisible until you open */
 justify-content: center; /*center horizontally*/ 
 align-items: center ; /* center vertically */}
/*https://ichi.pro/id/cara-membuat-modal-popup-dengan-css-javascript-8683675823727*/

     .btn { background:none; 
      border:solid 2px #afafaf; 
      color:#afafaf; 
      font-size:18px;
       font-weight:bold; 
       margin-left:115px; text-align:center; 
      } 
      .btn:hover { 
        background:#333; 
      } /* Animasi */ 
      @-webkit-keyframes animatetop { from {
        top:-300px; opacity:0
     } to {top:0; opacity:1} } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } /* Close Button */ .close { color: #000; float: right; font-size: 40px; font-weight: bold; } .close:hover, .close:focus { color: #333; text-decoration: none; cursor: pointer; } .modal-header { padding: 2px 16px; background:#48d1cc; background:linear-gradient(#48d1cc, #49ACE1); color: white; height:auto; } .modal-header img {border-radius:100%;padding:10px;width:120px;height:120px;} .modal-body {padding: 2px 16px;height:auto;} .modal-body p {color:#afafaf;} .modal-footer { padding: 2px 16px; background:#48d1cc; background:linear-gradient(#48d1cc, #49ACE1); color: white; height:auto; }
/*https://www.seotechman.com/2019/01/membuat-popup-modal-menggunakan.html


/*membuat modal transparan https://stackoverflow.com/questions/30161453/bootstrap-modal-is-transparent*/
.modal-backdrop, 
.modal-backdrop.fade.in{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: transparent;
}
