html {
    height:100%;
    min-height: 100%;
    width:100%;
    margin:0;
 }
 body {
       background-size: cover;
       background-repeat: no-repeat;
       display:table-cell;
       vertical-align:middle;
 }
 .box_loggin {
    display: flex;
    justify-content: center;
    margin-top: 10%;
 }
 .card_login {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 20px 30px rgba(0,0,0,0.4),0 0 100px rgba(0,0,0,0.4);
    background:transparent;
    width: 430px;
    max-width: 430px;
    border-radius: 4px;
    margin: auto;
    position: absolute;
    z-index: 100;
    max-height: 95%;
    overflow-y: auto;
    left: 50%;
    margin-left: -215px;
 }
 .card-body {
    background-color: rgba(255,255,255,0.75);
 }
 .card_login input {
    border-radius: 2px;
 }
 .card_login .alert {
   margin: 0px;
   border-radius: 0 0 4px 4px;
 } 
 #login {
    width: 100%;
 }
 .card-img-top {
    padding: 16px;
    background-color: white;
    border-radius: 3px;
    
 }
 .alert{
    margin-top:15px;
    padding:3px;
    text-align: center;
    min-height: 24px;
 }
 ul {
    margin: 0;
    padding: 0;
    list-style: none;
 }
 .input-group-sm > .btn, .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text {
    border-radius: 3px;
 }
 .backdrop {
    position: fixed;
    overflow: hidden;
    z-index: 0;            
    background-image: radial-gradient( circle farthest-corner at 22.4% 21.7%, rgba(4,189,228,1) 0%, rgba(2,83,185,1) 100.2% );
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    bottom: 0px;
    left: 0px;
 }
 .footer_login {
   display: flex;
   justify-content: space-between;
   padding: 0 10px;
   background-color: rgba(0,0,0,0.15);
   border-top: 1px solid rgba(255,255,255,0.4);
   backdrop-filter: blur(4px) brightness(1);
   width: 100%;
   position: absolute;
   bottom: 0;
   color:rgba(255,255,255,0.8);
   left:0;
   text-align: center;
   font-size: 13px;
   font-family: "Helvetica Neue","Helvetica",'PingFangSC',"PingFang SC",'NotoSansHans','Hiragino Sans GB',"Lantinghei SC","Microsoft Yahei","微软雅黑","STXihei","WenQuanYi Micro Hei",Arial,sans-serif;
 }
 .footer_login a{
   text-decoration: none;
   color: rgba(255,255,255,0.6);
 }
 .page-content {
       background: rgba(0,0,0,0.00);
       padding: 0px;
       margin: 0px;
       color: #666;
       display: flex;
       height: 100vh;
       justify-content: center;
       align-items: center;
 }
 .glass {
    max-height: 200px;
    padding:10px 0;
    background-color: rgba(0,0,0,0.1);
    backdrop-filter: blur(4px) brightness(1);
    text-align: center;
 }
 .glass h4 {
    margin:0;            
 }
 .glass b {
    color:white;
 }
 .alert {
    border-radius: 3px;
    backdrop-filter: blur(2px);
    margin:5px 5px;
 }
 .alert-danger {            
    background: rgba(217, 38, 53,0.5);
    color: white;
    border-color: rgba(217, 38, 53,0.8);            
 }
 .alert-primary {            
    background: rgba(13, 110, 253,0.5);
    color: white;
    border-color: rgba(13, 110, 253,0.8);            
 }
 .alert-primary {            
    background: rgba(28, 151, 93,0.5);
    color: white;
    border-color: rgba(28, 151, 93,0.8);            
 }
 @media (max-width: 770px) {
    .card.card_login {
       padding: 0 10px;
       box-shadow: none;
    }
    .card_login {
       max-width: 100%;
       width: 100%;
       margin:0;
       left:0;

    }
 }
 @media (max-width: 310px) {
    .card_login {
       width: 95%;
    }
 }