.header_content{
    height: 100px;
    background-color: #282e30;
      display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    }
    header{
        -webkit-box-shadow: 0px 19px 8px 0px rgba(34, 72, 80, 0.2);
    -moz-box-shadow: 0px 19px 8px 0px rgba(34, 72, 80, 0.2);
    box-shadow: 0px 19px 8px 0px rgba(34, 72, 80, 0.2);
    }
    .hd{
        display: flex;
        flex-direction: row;
        padding: 10px;
        
    }
    .Name_site{
        background-color: #282e30;
        color: rgb(255, 255, 255);
        width: 400px;
        height: 150px;
       text-align: end;
      font-size: 24px;
    justify-content: start;
      top: 0;
      left: 0;
      box-shadow:  4px 4px 8px 0px rgba(34, 60, 80, 0.2);
      transition: transform .3s;
    }
    .Name{
       padding-top: 70px;
       padding-right: 10px;
       
    }
    .Name_site:hover {
        background-color: #70c6d1;
        transform: scale(1.4)
    }
    
    
    .Name1{
        padding-top: 70px;
        padding-right: 10px;
        text-decoration: underline;
     }
    
    .info{
        display: flex;
        flex-direction: row;
      
    }
    .admin_acc{
        margin-left: 50px;
    }
    .admin_status{
        font-size: 30px;
    }
    .admin_svg{
        padding-left: 30px;
    }
    body {


        background: linear-gradient(#ffffff,#ffffff,#bfeff5 ,#bfeff5 , #7dabb1);
        max-width: auto;
        background-repeat: no-repeat;
        margin: 0;
        padding: 0;
        font-family: verdana, sans-serif;
        background-size: cover;
     }
 
    
    .up_background{
    
    
        background-color: white;
    
        left: 50%;
        transform: translate(-50%, -50%);
       width: 500px;
       height: 500px;
       
    }
    
    .login1{
        display: flex;
        justify-content: end;
       padding-left: 10px;
      top: 0;
      right: 0;
    
    }
    .login:hover{
        background-color: #70c6d1;
        color: #fff;
    }
    #b{
        border-radius: 30px;
        margin-top: 50px;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background:linear-gradient(#cfdcdd, #ffffff) ;
    }
    #bb{
        border-radius: 30px;
        margin-top: 50px;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background:linear-gradient(#cfdcdd, #ffffff) ;
    }


    .text_in_com{
        margin: 10px;
    }
    .com{
        background: #fff;
        border-radius: 10px;
      display: flex;
      flex-direction: row;
        word-wrap: normal;
        margin-top: 10px;
        width: 700px;
        left: 10px;
        height: 50px;
        -webkit-box-shadow: 0px 12px 17px 0px rgba(138,  173,  183, 0.32);
-moz-box-shadow: 0px 12px 17px 0px rgba(138,  173,  183, 0.32);
box-shadow: 0px 12px 17px 0px rgba(138,  173,  183, 0.32);
transition: transform .3s;
    }
    .com:hover{
        
        transform: scale(1.4)
    }
.users-container{
    overflow: auto;
   
}
    .com1{
        background: #fff;
        border-radius: 10px;
      display: flex;
      
      flex-direction: row;
        word-wrap: normal;
        margin-top: 10px;
        padding-top: 40px;
        padding-left: 20px;
        width: 700px;
        left: 10px;
        height: 200px;
        -webkit-box-shadow: 0px 12px 17px 0px rgba(138,  173,  183, 0.32);
-moz-box-shadow: 0px 12px 17px 0px rgba(138,  173,  183, 0.32);
box-shadow: 0px 12px 17px 0px rgba(138,  173,  183, 0.32);
transition: transform .3s;
    }
    .com1:hover{
        
        transform: scale(1.4)
    }
    
    .poz_knopka{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
       
    }

    .knopka{ 
        margin-left: 25px;
        color: #ffffff;
        border:0px;
        border-radius: 25px;
        background: #282e30;
        width: 300px;
        height: 50px;
        -webkit-box-shadow: 0px 12px 17px 0px rgba(0,  0,  0, 0.32);
-moz-box-shadow: 0px 12px 17px 0px rgba(0,  0,  0, 0.32);
box-shadow: 0px 12px 17px 0px rgba(0,  0,  0, 0.32);
    }
    .knopka:hover{
        background: #6f848b;
    }
    .login{
        background-color: #8EDAE4;
        width: 100px;
        height: 50px;
        text-align: center;
       
        border-radius: 15px;
    }
    .data{
    display: flex;
    flex-direction: column;
    }
    .pred{
       padding-top: 50px;
      
    }
    .ocenka{
        padding-top: 30px;
        border-radius: 20px;
        height: 250px;
        background-color: #ffffff;
        transition: transform .15s;
        max-width: 500px;
        display: flex;
        flex-direction: row;
        -webkit-box-shadow: 0px 12px 17px 0px rgba(45,  54,  57, 0.32);
-moz-box-shadow: 0px 12px 17px 0px rgba(45,  54,  57, 0.32);
box-shadow: 0px 12px 17px 0px rgba(45,  54,  57, 0.32);

    }
    .ocenka:hover{
        transform: scale(1.5);
        transition: transform .5s;
        position: absolute;
    }
    .staar{
        fill: #eee1b4;
    }
    .staar:hover{
       
       fill: #70c6d1;
    }
   
    .pred_up{  
        
        width: 1000px;
        margin: 0 auto; /* Center the block horizontally */
        border-radius: 10px; /* Add rounded corners */
        -webkit-box-shadow: 0px 19px 8px 0px rgba(34, 72, 80, 0.2);
    -moz-box-shadow: 0px 19px 8px 0px rgba(34, 72, 80, 0.2);
    box-shadow: 0px 19px 8px 0px rgba(34, 72, 80, 0.2);/* Add a shadow */
        padding: 20px; /* Add padding to the block */
         /* Center the text within the block */ 
       height: 100%;
        background-color: #fff;
        overflow: auto;
    }
    
    footer {
        background-color: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
       
        box-shadow: -1px -22px 24px 0px rgba(21, 46, 66, 0.2);
        }
        
        .footer-content {
        display: flex;
        justify-content: center;
        }
        
        .footer-info,
        .footer-social {
        width: 50%;
        }
        .krug{
            border-radius: 50%;
            background: #eee1b4;
            height: 20px;
            margin: 10px;
            width: 20px;
        }
       
        
        .copyright {
        margin-top: 20px;
        }
        footer {
            background: #282e30;
            color: #fff;
            padding: 20px;
            text-align: center;
          
            bottom: 0;
            left: 0;
            width: 100%;
     
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
            }
            
            .footer-content {
            display: flex;
            justify-content: center;
            }
            
            .footer-info,
            .footer-social {
            width: 50%;
            }
            
           
            
            .copyright {
            margin-top: 20px;
            }
           a{
            text-decoration: none;
            color: black;
           }
           .s p
           {
            text-align: center;
            margin-top: 0px;
            font-size: 14px;
           }