:root {
    --main-text-color: #dceaef;
    --title-text-color: #d9e4ea;
    --main-background-color: #242433;
    --active-background-color: #363646;
    --textarea-background-color: #363646;
    --select-color-color: #0d6efd;
}

body {
    background-color: var(--main-background-color);
    color: var(--main-text-color);
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.my-title {
    margin-top: 6vh;
    margin-bottom: 3vh;
    text-align: center;
}

.description {
    text-align: center;
}


.drag-area {
    border: 2px dashed var(--title-text-color);
    border-radius: 10px;
    width: 90%;
    margin: 10px auto;
    padding: 50px;
    text-align: center;
    color: var(--main-text-color);
}
.drag-area:hover {
    background-color: var(--active-background-color);
}

.drag-over {
    background-color: var(--active-background-color);
}


.upload-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.my-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.file-name-invalid {
    color: red;
}

.successful-text {
    color: rgb(0, 200, 0);
    text-align: center;
    width: 90%;
}

.my-spinner {
    margin-top: 2rem;
}


.file-name-cl {
    font-size: 20px;
    text-align: center;
    margin-top: 1rem;
}


.btn {
    padding-left: 48px;
    padding-right: 48px;
}

.my-text {
    margin: 2rem;
}

.loading-process {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.spinner-grow {
    margin: 0 auto; /* Добавляет автоматические маргины слева и справа */
    display: block; /* Убедитесь, что элемент отображается как блок, если это еще не так */
}