﻿/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}



.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}

/*.container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}*/

/*#region GroupBox */

/*GroupBox*/
fieldset {
    border: 2px solid #ccc; /* Определяет цвет и толщину рамки */
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px; /* Закругление углов рамки, можно убрать если не нужно */
}

/*заголовок GroupBox*/
legend {
    padding: 0 10px;
    font-weight: bold;
    font-size: 15px; /* Уменьшение размера шрифта */
}

/*#endregion */

/*#region Фотография */

.photo-container {
    position: relative;
    width: 300px; /* Ширина прямоугольника */
    height: 200px; /* Высота прямоугольника */
    border: 2px dashed #ccc; /* Стиль рамки */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8; /* Цвет фона */
    margin-bottom: 20px;
}

    .photo-container img {
        max-width: 100%;
        max-height: 100%;
    }

.upload-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #007bff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

    .upload-button input[type="file"] {
        display: none; /* Скрываем реальный input[type="file"] */
    }

    .upload-button i {
        pointer-events: none; /* Отключаем взаимодействие с иконкой */
    }
/*#endregion */


/*#region Модальное окно калькулятора */
/*.form-group {
    position: relative;
}*/


.modal {
    display: none; /*Устанавливает элемент невидимым*/
    position: fixed; /*Фиксирует элемент относительно окна браузера. 
        Элемент останется на одном месте на экране, даже если страница прокручивается.*/
    z-index: 1; /*будут отображаться поверх элементов с меньшим значением*/
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0); /*Устанавливает фоновый цвет в чисто черный.*/
    background-color: rgba(0,0,0,0.4); /*Устанавливает фоновый цвет в черный с прозрачностью 
        0.4 в Alpha обозначает прозрачность, где 0 означает полную прозрачность, 
        а 1 - полную непрозрачность. 
        Таким образом, 0.4 создает черный цвет с 40% непрозрачностью (60% прозрачности).*/
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888; /*Определяет толщину границы solid означает сплошную линию #888 средний серый цвет.*/
    width: 80%;
    max-width: 300px;
    text-align: center;
}

.close {
    color: #aaa;
    float: right;
    font-size: 50px; /* Увеличение размера шрифта */
    font-weight: bold;
    cursor: pointer;
    padding: 10px; /* Добавление отступов */
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }



/*#endregion */


/*#region Модальное окно фото */

.modal-image {
    display: none; /* По умолчанию невидимое */
    position: fixed; /* Фиксированное положение */
    z-index: 10000; /* Высокий z-index, чтобы быть наверху */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9); /* Полупрозрачный черный фон */
}

    .modal-image .modal-content {
        margin: auto;
        display: block;
        max-width: 90%; /* Максимальная ширина 90% от ширины экрана */
        max-height: 90%; /* Максимальная высота 90% от высоты экрана */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Центрирование модального окна */
        object-fit: contain; /* Сохранение пропорций изображения */
        border: 2px solid white; /* Добавление белой рамки */
        box-sizing: border-box; /* Учитывание рамки в размере элемента */
    }

/*#endregion */


.tooltip-inner {
    max-width: 500px !important; /* Устанавливаем максимальную ширину для tooltip */
    background-color: white !important; /* Белый фон для подсказки */
    color: black !important; /* Черный текст */
    border: 1px solid black !important; /* Черная рамка */
}

.tooltip-arrow {
    border-top-color: white !important; /* Белый цвет стрелки */
}

.large-checkbox {
    width: 18px; /* Увеличьте ширину по вашему желанию */
    height: 18px; /* Увеличьте высоту по вашему желанию */
    
}

    .large-checkbox:checked {
        width: 18px; /* Повторите увеличение ширины для состояния checked */
        height: 18px; /* Повторите увеличение высоты для состояния checked */
        
    }
