.ggskin { 
  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: normal; 
  -webkit-text-size-adjust: 100%;
}

.ggdefaulthotspot {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  -webkit-filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 0.75)); 
  filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 0.75));
}

.ggmarkdown p {
  margin-top: 0px;
}

.ggmarkdown a {
  color: #555;
}

.ggmarkdown h1:first-child, .ggmarkdown h2:first-child, .ggmarkdown h3:first-child, .ggmarkdown h4:first-child {
  margin-top: 0px;
}

.ggmarkdown h1,.ggmarkdown  h2,.ggmarkdown h3,.ggmarkdown h4 {
  margin-top: 1em;
  margin-bottom: 0.2em;
}
.ggmarkdown {
  white-space: normal;
}

.svg_shadow {
  -webkit-filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 0.75)); 
  filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 0.75));
}

.shadow_title {
  -webkit-filter: drop-shadow( 0px 0px 5px rgba(0, 0, 0, 0.6)); 
  filter: drop-shadow( 0px 0px 5px rgba(0, 0, 0, 0.6));
}

.plex_sans_medium {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
}

.plex_sans_regular {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
}

.info_headline {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 18px
}

.info_text {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 14px
}

.krona {
  font-family: 'Krona One', sans-serif;
}

.arial {
  font-family: Arial, sans-serif; font-size: 24px
}

@keyframes pulse {
0% { transform: scale(1.0); }
8% { transform: scale(1.4); }
16% { transform: scale(1.0); }
24% { transform: scale(1.2); }
32% { transform: scale(1.0); }   
100% { transform: scale(1.0); }   
}

.ggskin_text>div::-webkit-scrollbar {
  width: 4px;
}

.ggskin_text>div {
scrollbar-width: thin;
}

.minwidth label {
min-width:50px;
min-height:16px;
text-align:center;
}

.filtrEl {
position:fixed;
font-family: 'involve';
font-size: 12pt;
color: #2a66a8 !important;
}

.custom-checkbox input[type="checkbox"] {
  display: none;
}

.custom-checkbox label {
  display: inline-block;
  padding: 3px 9px;
  margin: 0 5px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  font-size: 12px;
  border: 1px solid #2c5067;
  background-color: #2c5067;
  color: #ffffff;
  font-family: 'involve';
}

.custom-checkbox input[type="checkbox"]:checked + label {
  background-color: #2a66a8;
  color: #ffffff;
  border: 1px solid #2a66a8;
}


.handle-label {
    line-height: 26px;
    text-align: center;
    position: relative;
    top: -5px !important;
/*    left: 7px !important;*/
    height: 25px !important;
    width: 25px !important;
    color: #ffffff;
    background-color: #2c5067 !important;
    border-radius: 50%;
    font-size: 12px !important;
   /* font-family: 'involve';*/
    border: 1px solid #2a66a8;
}

.ui-state-active,
.ui-state-focus {
border: none !important;
background: none !important;
outline: none !important;
}

.ui-slider-handle-round {
    top: -8px;
    margin-left: -10px;
    transition: background 0.3s;
    font-size: 10px !important;
 -webkit-tap-highlight-color: transparent; /* Убирает подсветку при тапе (Android/Chrome) */
border:none !important;
}

.ui-slider-handle-round-m {
    top: -8px;
    margin-left: -10px;
    transition: background 0.3s;
    font-size: 10px !important;
 -webkit-tap-highlight-color: transparent; /* Убирает подсветку при тапе (Android/Chrome) */
border:none !important;
}

.button {
  border-radius:20px;
  background-color: #2c5067;
  color: #ffffff !important;
  border: 1px solid #2c5067 !important;
  font-family: 'involve';
}
.logo_mobile {
    width: 100%;
    display: block;
    position: absolute;
    z-index: 5;
}
#size-container {
    z-index: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    background-image: linear-gradient(to bottom, rgba(31, 150, 171, 0.6) 0%, rgba(231, 180, 159, 0.6) 100%), url(../Background/background.jpg);
    background-blend-mode: soft-light;
    background-size: cover;
    background-position: center center;
    /* padding: 2rem; */
}


.bird {
  background-image: url('../Background/ptica.gif');
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  
  /* Оптимизация: замена will-change на transform для аппаратного ускорения */
  transform: translate3d(0, 0, 0);
  animation-name: fly-cycle;
  animation-timing-function: steps(10);
  animation-iteration-count: infinite;
  
  /* Предотвращение скачков */
  backface-visibility: hidden;
  perspective: 1000px;
}



.bird-container {
  position: absolute;
  top: 20%;
  left: -10%;
  
  /* Оптимизация: используем transform3d для аппаратного ускорения */
  transform: scale3d(0, 0, 1) translate3d(-10vw, 0, 0);
  
  /* will-change можно оставить, но лучше указать конкретные свойства */
  will-change: transform;
  
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  
  /* Изоляция слоя композиции */
  contain: layout style paint;
}

.bird-container--one {
  animation-name: fly-right-one-optimized;
  animation-duration: 15s;
  animation-delay: 0;
}
.bird-container--two {
  animation-name: fly-right-two-optimized;
  animation-duration: 16s;
  animation-delay: 1s;
}
.bird-container--three {
  animation-name: fly-right-one-optimized;
  animation-duration: 14.6s;
  animation-delay: 5s;
}
.bird-container--four {
  animation-name: fly-right-two-optimized;
  animation-duration: 16s;
  animation-delay: 10.25s;
}

@-webkit-keyframes fly-cycle {
  100% {
    background-position: -900px 0;
  }
}

@keyframes fly-cycle {
  100% {
    background-position: -900px 0;
  }
}

/* Оптимизированные анимации с transform3d */
@keyframes fly-right-one-optimized {
  0% {
    transform: scale3d(0.3, 0.3, 1) translate3d(-10vw, 0, 0);
  }
  10% {
    transform: translate3d(10vw, 2vh, 0) scale3d(0.4, 0.4, 1);
  }
  20% {
    transform: translate3d(30vw, 0vh, 0) scale3d(0.5, 0.5, 1);
  }
  30% {
    transform: translate3d(50vw, 4vh, 0) scale3d(0.6, 0.6, 1);
  }
  40% {
    transform: translate3d(70vw, 2vh, 0) scale3d(0.6, 0.6, 1);
  }
  50% {
    transform: translate3d(90vw, 0vh, 0) scale3d(0.6, 0.6, 1);
  }
  60% {
    transform: translate3d(110vw, 0vh, 0) scale3d(0.6, 0.6, 1);
  }
  100% {
    transform: translate3d(110vw, 0vh, 0) scale3d(0.6, 0.6, 1);
  }
}

@keyframes fly-right-two-optimized {
  0% {
    transform: translate3d(-10vw, -2vh, 0) scale3d(0.5, 0.5, 1);
  }
  10% {
    transform: translate3d(10vw, 0vh, 0) scale3d(0.4, 0.4, 1);
  }
  20% {
    transform: translate3d(30vw, -4vh, 0) scale3d(0.6, 0.6, 1);
  }
  30% {
    transform: translate3d(50vw, 1vh, 0) scale3d(0.45, 0.45, 1);
  }
  40% {
    transform: translate3d(70vw, -2.5vh, 0) scale3d(0.5, 0.5, 1);
  }
  50% {
    transform: translate3d(90vw, 0vh, 0) scale3d(0.45, 0.45, 1);
  }
  55% {
    transform: translate3d(110vw, 0vh, 0) scale3d(0.45, 0.45, 1);
  }
  100% {
    transform: translate3d(110vw, 0vh, 0) scale3d(0.45, 0.45, 1);
  }
}

/* Медиа-запрос для устройств с ограниченными ресурсами */
@media (prefers-reduced-motion: reduce) or (update: slow) {
  .bird, .bird-container {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}