/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

  .table-bordered > thead > tr > th {
    border: 1px solid #dadada;
  }
  .table-bordered > thead > tr > td {
    border: 1px solid #dadada;
  }
 

body {
    font-family: 'e-Ukraine-Light', Arial, sans-serif; /* Основний шрифт */
    font-size: 16px; /* Розмір тексту */
    line-height: 24px; /* Міжрядковий інтервал */
    color: #000000; /* Колір тексту */
    text-align: left; /* Вирівнювання по лівому краю */
    max-width: 1680px; /* Максимальна ширина сторінки */
    margin: 0 auto; /* Центрування */
    padding: 16px; /* Поля */
    background-color: #FFFFFF; /* Фон сторінки */
}

/* Додатковий текст (пояснення) */
.explanatory-text {
    font-family: 'e-Ukraine-Regular', Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #808080;
}

/* Стиль посилань */
a {
    font-family: 'e-Ukraine-Regular', Arial, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: #0078D7;
    text-decoration: none;
}

a:hover {
    color: #005BB5; /* Колір посилань при наведенні */
}

/* Заборона підкреслення, курсиву та заголовних літер */
/* {
    text-transform: none;
    text-decoration: none;
    font-style: normal;
}

/* Заголовки */
h1, h2, h3 {
    font-family: 'e-Ukraine-Light', Arial, sans-serif;
    color: #000000;
}

/* Сітка (12 колонок) */
.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px; /* Відступи між колонками */
}

.item {
    grid-column: span 4; /* Елемент займає 4 колонки */
}

/* Елементи опитування */
.question-container {
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid #E7EEF3;
    background-color: #FFFFFF;
}

.question-title-container {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: bold;
}

/* Поля вводу */
input, textarea, select {
    font-family: 'e-Ukraine-Regular';
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}


/* Кнопки */
button, .btn-primary {
    font-family: 'e-Ukraine-Regular', Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    background-color: #0078D7;
    color: #FFFFFF;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
}

button:hover, .btn-primary:hover {
    background-color: #005BB5;
}

/* Контрастні кольори */
.bg-primary {
    background-color: #E7EEF3;
}

.bg-secondary {
    background-color: #F1F1F1;
}

.text-error {
    color: #FF3A44; /* Помилки */
}

.text-warning {
    color: #FFD600; /* Попередження */
}

.text-success {
    color: #1BC47D; /* Успішно */
}

/* Адаптивність */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Одна колонка для мобільних пристроїв */
    }

    .item {
        grid-column: span 12;
    }

    .question-container {
        padding: 12px;
    }
}

/* Керування відступами (кратними 8 пікселям) */
.margin-8 {
    margin: 8px;
}

.padding-16 {
    padding: 16px;
}

.spacing-24 {
    margin-bottom: 24px;
}

.text-info-custum {
    font-family: 'e-Ukraine-Regular';
    font-size: 13px;
    line-height: 18px;
    color: #808080;
}