/* Подключение Bootstrap и пользовательские стили */
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');

  

/* Настройка внешнего вида формы */
body {
    background-color: #f8f9fa;
    padding-top: 50px;
}

h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #343a40;
}

h4 {
    text-align: center;
    margin-bottom: 30px;
    color: #343a40;
}
h5 {
    text-align: center;
    margin-bottom: 30px;
    color: #343a40;
}

form {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


    html, body {
        height: 100%;  /* Высота на 100% */
        margin: 0;     /* Убираем отступы */
        padding: 0;
    }
    .content {
        display: flex;
        flex-direction: column;
        min-height: 100vh;  /* Минимальная высота экрана */
    }
    .container {
        flex-grow: 1;  /* Контейнер будет растягиваться на всю оставшуюся высоту */
    }

/* Стили для инпутов */
form input[type="text"],
form input[type="password"],
form input[type="email"],
form select {
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid #ced4da;
}

form button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
}

form button:hover {
    background-color: #0056b3;
}

#statusMessage {
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
    color: #007bff;
}

/* Для мобильных устройств */
@media (max-width: 768px) {
    form {
        padding: 15px;
    }
}
     .form-control {
            width: 100%; /* Поля занимают 100% ширины */
            max-width: 400px; /* Максимальная ширина поля ввода */
        }
        .form-group {
            margin-bottom: 15px; /* Отступы между полями */
        }


    .navbar-custom {
        background-color: #343a40;  /* Темный фон */
    }
    .navbar-custom .nav-link {
        color: #ffffff; /* Белый цвет текста ссылок */
    }
    .navbar-custom .nav-link:hover {
        color: #cccccc; /* Светлый оттенок при наведении */
    }
    .navbar-custom .navbar-toggler {
        border-color: #ffffff; /* Белый цвет для кнопки-бургера */
    }
    .navbar-custom .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
.awesomplete {
  display: inline-block;
  position: relative;
  min-width: 85%;
}



  #loading-indicator {
            display: none;
            position: fixed;
            top: 25%;
            left: 75%;
            transform: translate(-50%, -50%);
            font-size: 50px;
            color: #333;
        }

        /* Анимация вращения */
        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .loading-indicator {
            animation: spin 2s linear infinite;
        }


.mbutton {
    max-width: 3%;  /* Размер кнопки 80% от ширины блока */
    min-width: 30%;  /* Размер кнопки 80% от ширины блока */
    background-color: transparent;  /* Прозрачный фон */
    color: white;  /* Белый шрифт */
    border: 2px solid white;  /* Белая рамка */
    padding: 10px 20px;  /* Внутренние отступы */
    font-size: 16px;  /* Размер шрифта */
    border-radius: 5px;  /* Скругленные углы */
    cursor: pointer;  /* Курсор при наведении */
    text-align: center;  /* Текст по центру */
    transition: background-color 0.3s ease;  /* Анимация изменения фона */
}

.mbutton:hover {
    background-color: rgba(255, 255, 255, 0.2);  /* Полупрозрачный фон при наведении */
}

.mbutton:active {
    background-color: rgba(255, 255, 255, 0.3);  /* Более насыщенный полупрозрачный фон при клике */
}