/* login */
.login{
    display: flex;
    justify-content: center;
    /* height: 100vh; */
    padding: 35px;
    margin: 5% 0;
}
.logo{
    width: 80px;
    height: auto;
    margin: 0 auto 0 auto;
        display: block;
}
.login h1{    font-size: clamp(1rem, 7vw, 2rem);
    font-weight: 500;
   }
.login-form {
    width: 450px;
    max-width: 100%;
}
.login-sub{margin: 10px 0; }
.login-sub a{font-weight: 600;}

.login-form form {
    margin: 50px 0 15px 0;
    font-size: 14px;
    padding: 0 0 10px 0;
}
.login-form label{
        line-height: 40px;

    display: block;
}
.remember-me{
        margin: 0px 0;
    display: flex;
    align-items: center;
        gap: 10px;
}
.remember-me label{margin-bottom: 0; cursor: pointer;}

.login-form input:hover {
    /* box-shadow: 0 0 10px #dbdbdb; */
        border: 1px solid #515151;
}
.two-col{display: flex;
    align-items: center;
    justify-content: space-between;}
.login-form button{   
    border-radius: 50px;
    cursor: pointer;
    padding: 15px 0;
    width: 100%;
    border: 1px solid #fff;
    color: #fff;
    margin: 35px 0 0 0;
    transition: all .3s;
    font-size: 16px;
    font-weight: 500;
}
.login-form button:hover{box-shadow: 0 1px 20px #8f8f8f;   }
.login-form a{text-decoration: none; color: #000; font-size: 14px;    font-weight: 600;}
.login-form a:hover{color: #016d95;}
.center{text-align: center;}
.back a{
    text-decoration: none;
    color: #000;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.down-register{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
        flex-direction: column;
}
.register-button{
        border-radius: 50px;
    cursor: pointer;
    padding: 15px 0;
    width: 100%;
    border: 1px solid #a1a1a1;
    margin: 0 0 100px 0;
    transition: all .3s;
    font-size: 14px;
    text-align: center;
}
.register-button:hover{ border: 1px solid #016d95;}
.color-5{        background: linear-gradient(-45deg, #000000, #0a0a0a, #007e9f, #063a4a, #007e9f, #000000, #000000);
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    border: 0px;
 }

 .login-form select {
    padding: 15px 5px 15px 50px;
    background-position: 13px 12px;
    background-color: #f7f7f7;
    border: 1px solid #efefef;
    border-radius: 10px;
    transition: all .3s;
    width: 100%;
}
/*  */
.grid {
    display: grid;
    /* Трите колони: 1fr за линиите (да запълват оставащото място) 
       и auto за текста (да заема колкото му е нужно) */
    grid-template-columns: 1fr auto 1fr;
    align-items: center; /* Центрира вертикално елементите */
    gap: 16px;           /* Разстояние между линиите и текста */
    width: 100%;         /* Или конкретна ширина според дизайна ти */
}

.h-px {
    height: 1px;
    background-color: #ccc; /* Цвят на линията */
    border: none;
}

.or {
    color: #666;
    font-size: 14px;
    text-transform: uppercase;
    font-family: sans-serif;
}
/*  */
.input-login{
    padding: 15px 5px 15px 50px;

    border: 1px solid #efefef;
    border-radius: 10px;
    transition: all .3s;
    width: 100%;
}
.email {
    background: url(/admin/assets/icons/mail.png) no-repeat center left;
        margin: 0 0 25px 0;
        background-position: 13px 12px;
    background-color: #f7f7f7;
}
.pass {
    background: url(/admin/assets/icons/pass.png) no-repeat center left;
     margin: 0 0 10px 0;
     background-position: 13px 12px;
    background-color: #f7f7f7;
}
.pen {
    background: url(/admin/assets/icons/pen.png) no-repeat center left;
        margin: 0 0 0 0;
        background-position: 13px 12px;
    background-color: #f7f7f7;
}
.remember{padding: 3px; border: 1px solid #333; border-radius: 2px;}
    /**/
  
    @keyframes gradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }