*{
    margin: 0%;
    padding: 0%;

}
.container {
    width: 100%;
    background-color: #d3d2d2;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.content{
    width: 20em;
    position: absolute;
    background-color: #d3d2d2;
    top: 20%;
    left: 35%;
    padding: 4%;
    border-radius: 16px;
    box-shadow: 2px 2px 2px;
}
.titre{
    text-align: center;
    color: aliceblue;
    font-size: x-large;
    font-style: italic;
    font-weight: bold;
    
}
.img_login{
    width: auto;
    margin-left: 43%;
    padding-top: 1%;
}
.lbl_login{
    width: 100%;
    font-size: xx-large;
    font-weight: bold;
    margin-top: 2px;

}
.txt_login{
    width: 100%;
    font-size: xx-large;
    padding: 2px;
    margin-top: 1px;
    border-radius: 8px;

}
.txt{
    color: aliceblue;
}
.btn-login{
    padding: 2%;
    border-radius: 10px;
    font-size: xx-large;
    font-weight: bold;
    font-style: italic;
    float: right;
    transform: translateY(60%);
    background-color: aliceblue;
}
.card-header{
    width: 98%;
    padding: 1%;
}
.card-footer{
    width: 98%;
    padding: 1%; 
}

.modalDialog {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    top: 4%;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
  }
  .modalDialog:target {
    opacity: 1;
    pointer-events: auto;
  }

.modalDialog > .content {
    width: 20em;
    position: absolute;
    background-color: #d3d2d2;
    top: 5rem;
    left: 35%;
    padding: 4%;
    padding-top: 1%;
    padding-bottom: 2.5%;
    border-radius: 16px;
    box-shadow: 2px 2px 2px;
   
   /**
     transform: translate(-50%,-50%);
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: -moz-linear-gradient(#0f0f0f, #0f0f0f);
    background: -webkit-linear-gradient(#0f0f0f, #0f0f0f);
    background: -o-linear-gradient(#0f0f0f, #0f0f0f);*/
  }
  .modalDialog > .card-header{
    width: 100%;
    padding: 1%;
  
}
.modalDialog > .card-footer{
    width: 100%;
    padding: 1%;    
}
 
.close {
    background: #606061;
    color: #ffffff;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
  }
  .close:hover {
    background: #380101;
  }
  .modalDialog {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
  }
  .modalDialog:target {
    opacity: 1;
    pointer-events: auto;
  }

.modalDialog > .content {
    width: 20em;
    position: absolute;
    background-color: #d3d2d2;
    top: 0%;
    left: 35%;
    padding: 4%;
    padding-top: 1%;
    padding-bottom: 2.5%;
    border-radius: 16px;
    box-shadow: 2px 2px 2px;
   
   /**
     transform: translate(-50%,-50%);
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: -moz-linear-gradient(#0f0f0f, #0f0f0f);
    background: -webkit-linear-gradient(#0f0f0f, #0f0f0f);
    background: -o-linear-gradient(#0f0f0f, #0f0f0f);*/
  }
  .modalDialog > .card-header{
    width: 100%;
    padding: 1%;
  
}
.modalDialog > .card-footer{
    width: 100%;
    padding: 1%;    
}