@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
      
      /*Boiler plate*/
      * {
         box-sizing: border-box;
         font-family: 'Roboto',sans-serif;
      }
      
      .modal_dialog {
         //flex-direction: column;
         //align-items: center;
         //justify-content: center;

         display: none;
         margin: 0;
         height: 100vh;
         overflow: hidden;
         background-color: rgba(2, 2, 2, .7);
         position: fixed;
         z-index: 1;
         left: 0;
         top: 0;
         width: 100vw;
         height: 100vh;
         overflow: auto;


      }
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      /*Boiler plate*/
      .body {
         display:flex;
         flex-direction:column;
         align-items:center;
         justify-content:center;
         margin:0;
         height:100vh;
         overflow:hidden;
         background:rgb(95, 67, 67);
      }

      .modal {
         display:none;
         flex-direction:column;
         align-items:center;
         justify-content:center;
         background-color: rgba(1, 1, 1,.1);
         background-color:black;
         position: fixed;
         z-index: 1;
         left: 0;
         top: 0;
         width: 100vw;
         height: 100vh;
         overflow: auto;
      }
      
      
     
      .border {
         border: solid 1px black;
      }

      .centercontents {
         display:flex; 
         align-items: center;
         justify-content: center;
      }
