/* CSS */
.cut-text {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}



video { 
  object-fit: fill;
}

.imgbox {
    display: grid;
    height: 80%;
}
.center-fit {
    max-width: 100%;
    max-height: 80vh;
    margin: auto;
}


.mylink1 {
    color: #582724;
    font-weight: bold;
}

.modal {
  display: none; /* По умолчанию скрыто */
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 75%; /* Оставляем запас, чтобы картинка не выходила за край */
  max-width: 700px;
}

.modal-content img {
  width: 100%;
  height: auto;
}

.zoom-effect {
  transition: transform 0.5s ease; /* Плавный переход */
}

.zoom-effect:hover {
  transform: scale(1.25); /* Увеличиваем в 1.25 раза */
}


.tooltip-container {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor: help;
}


.tooltip-text {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip-text {
visibility: visible;
opacity: 1;
}

/* Треугольник под подсказкой */
.tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}