html {
	height:100%;
	width:100%;

    --main-color: #200667;
}

body {
    font-family: Montserrat, sans-serif;
    margin: 0px;
    padding: 0px;
}

p {
    color: #fff;
}

.login-container {
    background-color: rgb(24, 104, 253); 
    height: 100vh;
    display: flex;
    justify-content: center; 
    align-content: center;
}

.login-box {margin-top: 250px;}
.login-box-msg {font-weight: bold; text-align: center;}
.card-body {border-radius: 15px;}
.login-logo img {width: 250px;}
/* .login-logo p {color: #fff !important;} */

.login-form {width: 100%; display: flex; justify-content: center;flex-direction: column;}
.login-form input {width: 100%; border: 2px solid var(--main-color);border-radius: 10px; font-size: 18px; padding: 9px 10px;}
.login-form input::placeholder {color: rgb(134, 134, 134);}
.login-form label {color: #fff; font-size: 14px; font-weight: 400 !important; margin-bottom: 5px;}


.button_submit {padding: 5px 25px;border-radius: 10px;background: var(--main-color);color: #fff; font-size: 18px; font-weight: 500; cursor: pointer; letter-spacing: 2px; text-transform: uppercase; border: none !important; transition: all ease-in-out 0.2s;}
.button_submit:hover {background: #089b39;}

.forget_pass a {display: block; text-align: center; margin-top: 20px;}
.forget_pass a:hover {text-decoration: underline;}

/* =================================================================== */
/* === РЕСПОНСИВ ДИЗАЙН ЗА МОБИЛНИ УСТРОЙСТВА === */
/* =================================================================== */

/* Този код се прилага само за екрани с ширина до 768px (таблети и телефони) */
@media (max-width: 768px) {

    /* Основен контейнер - позволяваме му да заеме цялата ширина */
    .login-container {
        padding: 20px 0; /* Добавяме малко отстояние отгоре и отдолу */
        align-items: flex-start; /* Подравняваме кутията в горната част */
    }

    /* Кутия за вход - правим я гъвкава и премахваме сянката */
    .login-box {
        width: 90%; /* Ширината вече е процентна, а не фиксирана */
        max-width: 400px; /* Защита, за да не стане твърде широка на таблети */
        margin: 0;
        box-shadow: none; /* Премахваме сянката за по-чист вид */
    }

    /* Намаляваме размера на логото */
    .login-logo img {
        max-width: 180px;
    }

    /* Гарантираме, че полетата за въвеждане заемат цялата ширина */
    .login-form input[name="eMail"],
    .login-form input[type="password"] {
        width: 100%;
        box-sizing: border-box; /* Важно, за да не излизат извън кутията */
    }
}