body {
    font-family: Arial, sans-serif;
    /*background-color: #262626;*/
            background-image: url('../../img/bg2.webp');
            background-repeat: no-repeat;
            background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

    .back{
    text-decoration: none;
    color:#333;

}
.container {
    background: white;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;
}

#drop-area {
    border: 2px dashed #007bff;
    padding: 20px;
    margin: 20px 0;
    border-radius:20px;
}

#drop-area.hover {
    border-color: #0056b3;
    background-color: #2d2d2d;
    color:white;
}

.button {
    padding: 10px 20px;
    background-color: #007bff;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

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

.dellbutton {
    padding: 10px 20px;
    background-color: red;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.dellbutton:hover {
    background-color: darkred;
}

/*.downbut {*/
/*    margin-top: 20px;*/
/*    background-color: #f3f3f3;*/
/*    border-radius:5px;*/
/*    font-size:16px;*/
/*}*/
/*.downbut:hover {*/
/*    margin-top: 20px;*/
/*    background-color: #007bff;*/
/*    border-radius:5px;*/
/*}*/

/* Стили для прогресс-бара */
.progress {
    width: 100%; /* Заполняет всю ширину окна */
    background-color: #f3f3f3; /* Цвет фона прогресс-бара */
    border-radius: 5px; /* Скругленные углы */
    overflow: hidden; /* Обрезаем переполнение */
    position: relative; /* Позиционирование для дочерних элементов */
    margin: 20px 0; /* Отступы сверху и снизу */
}

.progress-bar {
    width: 0%; /* Начальная ширина */
    height: 30px; /* Высота прогресс-бара */
    background-color: #007bff; /* Цвет прогресс-бара */
    transition: width 0.5s; /* Анимация изменения ширины */
    border-radius: 5px; /* Скругленные углы */
}

        /* Добавьте стили для прогресс-бара и сообщения о загрузке */
        #progress-container {
            width: 100%;
            background: #f3f3f3;
            border: 1px solid #ccc;
            margin-top: 10px;
            display: none; /* Скрыть контейнер в начале */
        }

        #loading-message {
            margin-top: 10px;
            color: blue; /* Цвет текста для сообщения о загрузке */
        }

        /* Стили для уведомлений */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px;
            border-radius: 5px;
            color: white;
            font-size: 16px;
            z-index: 1000;
            transition: opacity 0.5s ease;
        }

            .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #1e2021;
            color: black;
            font-weight: bold;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            }
            .header a {
            color: white;
            text-decoration: none;
            margin: 0 40px;
            font-size: 16px;
            margin-left:0;
            transition: ease 0.3s;
            }
            .header a:hover {
            color:#4a91e2;
            transition: ease 0.3s;
            }
            .logo span:first-child {
            color: #2b4d7f;
            }

            .logo span:last-child {
            color: #4a91e2;
            }