/* Общие стили для модального окна */
/* Скрыть кнопку закрытия в модальном окне */
.close {
    display: none; /* Спрятать элемент с классом "close" */
}

.text-info {
    color: blue; /* Синий цвет текста */
    font-weight: bold; /* Жирное начертание текста */
}

.mapmodal, .modal-power {
    display: none; /* Скрывать экран по умолчанию */
    position: fixed; /* Оставить модальное окно фиксированным */
    z-index: 1050; /* Установить z-index, чтобы окно было на переднем плане */
    left: 0;
    top: 0;
    width: 100%; /* Занимать всю ширину экрана */
    height: 100%; /* Занимать всю высоту экрана */
    overflow: auto; /* Добавить прокрутку при необходимости */
    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
}

/* Стили для контента модального окна */
.modal-cont, .modal-dog {
    background-color: #ffffff; /* Белый фон для содержимого */
    padding: 5px; /* Отступы внутри модального окна */
    border: 1px solid #dee2e6; /* Граница вокруг окна */
    border-radius: 5px; /* Скругленные углы */
    width: 95%; /* Ширина модального окна */
    max-width: 800px; /* Максимальная ширина */
    position: fixed; /* Зафиксированное положение */
    top: 52%; /* Положение сверху */
    left: 50%; /* Положение слева */
    transform: translate(-50%, -50%); /* Центрирование */
}


.modal-map {
    background-color: #ffffff; /* Белый фон для содержимого */
    padding: 5px; /* Отступы внутри модального окна */
    border: 1px solid #dee2e6; /* Граница вокруг окна */
    border-radius: 5px; /* Скругленные углы */
    width: 92%; /* Ширина модального окна */
    max-width: 800px; /* Максимальная ширина */
    position: fixed; /* Зафиксированное положение */
    top: 30%; /* Положение сверху */
    left: 50%; /* Положение слева */
    transform: translate(-50%, -50%); /* Центрирование */
}


.power-modal-content {
    background-color: #ffffff; /* Белый фон для содержимого */
    padding: 5px; /* Отступы внутри модального окна */
    border: 1px solid #dee2e6; /* Граница вокруг окна */
    border-radius: 5px; /* Скругленные углы */
    width: 100%; /* Ширина модального окна */
    max-width: 1000px; /* Максимальная ширина */
    position: fixed; /* Зафиксированное положение */
    top: 30%; /* Положение сверху */
    left: 50%; /* Положение слева */
    transform: translate(-50%, -50%); /* Центрирование */
}



  #coordinatesDisplay {
        font-weight: bold;
        text-align: center;
    }

/* Стили для заголовка модального окна */
.modal-header {
    padding: 0; /* Отступы внутри модального окна */
    margin: 0;
}
.modal-title  {
 font-size:20px;
 font-weight: normal;
 font-family: 'Times New Roman', Times, serif;
 color:#408080;
 text-align: center;
}


/* Стили для кнопок */
.btn-secondary {
    width: 50px auto;
    position: relative;
    border-radius: 4px;
    background: linear-gradient(#E1EDEC, #daedec);
    color: #386161;
    padding: 10px 10px 10px 10px;
    transition: box-shadow 0.3s ease-in-out; 
    border: 1px solid; /* контуру кнопки */
    margin-right: 2px; /* Add a right margin of 2 pixels */
    margin: 2px; /* Добавляем отступ снизу между кнопками */
    padding: 10px; /* Добавляем внутренний отступ для кнопок */
}

.btn-secondary:hover {
  color: rgb(255,255,255);
  background: linear-gradient( #4a8787, #386161);
  box-shadow: none;
  box-shadow: 1px 5px 10px -5px black;
  border-radius: 4px;
}

/* Стили для текста внутри модального окна */
   .modal-body p {
    font-size: 1rem; /* Размер текста */
    color: #333; /* Цвет текста */
}


@media only screen and (max-width: 800px) {


.modal-map {
    top: 35%; /* Положение сверху */
}

.modal-dog {
    top: 90%; /* Положение сверху */
}

.modal-cont {
    width: 20% auto; /* Ширина модального окна */
    margin-top: 110rem;
}

.modal-title  {
 font-size:12px;

}



   .modal-body p {
    font-size: 0.5rem; /* Размер текста */
}
.modal-header {
    font-size: 0.7rem; /* Размер текста */
    border-bottom: none; /* Убрать нижнюю границу */
}

.btn-secondary {
   font-size: 0.5rem; /* Размер текста */
}

}