body {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    background: #ebe5d5;
    color: #363636;
    height: 150vh;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}
header h1 {
  text-decoration: underline #f7941d;
}
#logo {
    position: relative;
    height: 110px;
    transition: transform 0.75s ease-out, top 0.5s ease-out, height 0.7s ease-out; 
}
#navbar {
    height: 178px;
    background: #ebe5d5;
    border-bottom: solid 1px #ffffff00;
    overflow: hidden;
    transition: height 1s cubic-bezier(.79,.14,.15,.86), border-bottom 1s ease-in;
}
#navbar #logo rect, #navbar #logo circle {
    transition: opacity 1s ease-out;
}
#navbar.scroll #logo rect {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
#navbar.scroll #logo circle {
    opacity: 0;
    transition: opacity 0.75s ease-out 1s;
}
#navbar.scroll #logo .cls-1 {
    transition: fill 1s linear;
}
#navbar.scroll {
    height: 60px;
    border-bottom: solid 1px #363636;
    transition: height 1s cubic-bezier(.79,.14,.15,.86), border-bottom 2s ease-in;
}
#navbar.scroll #logo {
    top: -1px;
    height: 164px;
    transform: rotate(12deg); 
}
#navbar.scroll #logo .cls-1 {
    fill: #363636;
}
#navbar.scroll #logo:hover .cls-1  {
  fill: white;
  transition: fill 0.3s linear;
}
.navbar-brand {
  display: flex;
  flex-basis: 33%;
  text-align: center;
  justify-content: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.navbar-nav {
    display: flex;
    align-items: center;
}

#content {
  padding-top: 200px;
}
/* Example styles for demonstration */
.rfm-marquee-container {
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  position: relative;
  width: var(--width);
  transform: var(--transform);
}
.rfm-marquee-container:hover div {
  animation-play-state: paused;
}
.rfm-marquee-container:active div {
  animation-play-state: paused;
}

.rfm-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
}
.rfm-overlay::before, .rfm-overlay::after {
  background: linear-gradient(to right, var(--gradient-color), transparent);
  content: "";
  height: 100%;
  position: absolute;
  width: var(--gradient-width);
  z-index: 2;
  pointer-events: none;
  touch-action: none;
}
.rfm-overlay::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.rfm-overlay::before {
  left: 0;
  top: 0;
}

.rfm-marquee {
  flex: 0 0 auto;
  min-width: var(--min-width);
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
  animation-play-state: var(--play);
  animation-delay: var(--delay);
  animation-direction: var(--direction);
}
@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.rfm-initial-child-container {
  flex: 0 0 auto;
  display: flex;
  min-width: auto;
  flex-direction: row;
  align-items: center;
}

.rfm-child {
  transform: var(--transform);
}
.group:hover .group-hover\:-top-20 {
  top:-5rem
}
.group:hover .group-hover\:block {
  display:block
}
.group:hover .group-hover\:hidden {
  display:none
}
.group:hover .group-hover\:translate-y-0 {
  --tw-translate-y:0px
}
.group:hover .group-hover\:rotate-\[8deg\],
.group:hover .group-hover\:translate-y-0 {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.group:hover .group-hover\:rotate-\[8deg\] {
  --tw-rotate:8deg
}
.group:hover .group-hover\:border-transparent {
  border-color:transparent
}
.group:hover .group-hover\:bg-\[\#2C94E0\] {
  --tw-bg-opacity:1;
  background-color:rgb(44 148 224/var(--tw-bg-opacity))
}
.group:hover .group-hover\:bg-\[\#40EBB7\] {
  --tw-bg-opacity:1;
  background-color:rgb(64 235 183/var(--tw-bg-opacity))
}
.group:hover .group-hover\:bg-\[\#75F96F\] {
  --tw-bg-opacity:1;
  background-color:rgb(117 249 111/var(--tw-bg-opacity))
}
.group:hover .group-hover\:bg-\[\#A2D6CD\] {
  --tw-bg-opacity:1;
  background-color:rgb(162 214 205/var(--tw-bg-opacity))
}
.group:hover .group-hover\:bg-\[\#A4B85D\] {
  --tw-bg-opacity:1;
  background-color:rgb(164 184 93/var(--tw-bg-opacity))
}
.group:hover .group-hover\:bg-\[\#D2EED4\] {
  --tw-bg-opacity:1;
  background-color:rgb(210 238 212/var(--tw-bg-opacity))
}
.group:hover .group-hover\:bg-\[\#F1D980\] {
  --tw-bg-opacity:1;
  background-color:rgb(241 217 128/var(--tw-bg-opacity))
}
.group:hover .group-hover\:bg-\[\#FCC3C0\] {
  --tw-bg-opacity:1;
  background-color:rgb(252 195 192/var(--tw-bg-opacity))
}
.group:hover .group-hover\:bg-\[\#FF8EAB\] {
  --tw-bg-opacity:1;
  background-color:rgb(255 142 171/var(--tw-bg-opacity))
}
.group:hover .group-hover\:bg-\[\#FFA36B\] {
  --tw-bg-opacity:1;
  background-color:rgb(255 163 107/var(--tw-bg-opacity))
}
.group:hover .group-hover\:bg-secondary-blue {
  --tw-bg-opacity:1;
  background-color:rgb(162 214 205/var(--tw-bg-opacity))
}
.group:hover .group-hover\:bg-secondary-green {
  --tw-bg-opacity:1;
  background-color:rgb(64 235 183/var(--tw-bg-opacity))
}
.group:hover .group-hover\:bg-secondary-yellow {
  --tw-bg-opacity:1;
  background-color:rgb(241 217 128/var(--tw-bg-opacity))
}
.group:hover .group-hover\:bg-white {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255/var(--tw-bg-opacity))
}
.group:hover .group-hover\:text-primary-black {
  --tw-text-opacity:1;
  color:rgb(17 17 17/var(--tw-text-opacity))
}
.group:hover .group-hover\:text-primary-orange {
  --tw-text-opacity:1;
  color:rgb(255 97 29/var(--tw-text-opacity))
}
.group:hover .group-hover\:opacity-100 {
  opacity:1
}
.content {
    padding: 20px;
    text-align: justify;
}
h3 {
    font-weight: bold;
}
form .row:nth-child(2n+1) {
    background: rgba(65, 80, 214, 0.20);
}
form .row:nth-child(2n+2) {
    background: rgba(65, 80, 214, 0.10);
}
form label {
    margin-top: 5px;
}
form input[type="text"] {
    width: 100%;
    margin-bottom: 15px;
}
button[type="submit"] {
    border: solid 1px #4150d6;
    margin: 10px 0;
    padding: 5px 10px;
    background: #ececec;
    color: #4150d6;
}
.img-cont img {
    width: 100%;
}
.intro {
    display: flex;
    flex-direction: column;
    text-align: justify;
}
.intro h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
}
#intro-chart {
    width: 700px;
    align-self: center;
}
.intro img {
    max-width: 700px;
    margin-bottom: 30px;
    align-self: center;
}
.double-img {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.double-img img {
    width: 47%;
    height: fit-content;
}
#val-chart {
    width: 50%;
}
.content-width-800 {
    width: 800px;
    text-align: justify;
}
span.link {
    background: #ddd;
    padding: 5px 7px;
    border-radius: 5px;
}
#map, #map2 {
    height: 80vh;
}
.map-selector {
    border: none;
    background: none;
    font-size: large;
    text-align: center;
    text-decoration: underline dashed 1px black;
  }
.map-legend {
    z-index: 1000;
    position: absolute;
    bottom: 20px;
    right: 10px;
    padding: 10px 10px 5px;
    background: #ffffff;
    box-shadow: 0px 0px 10px #bdbdbd;
}

.map-legend img {
    display: block;
}
.legend-entry {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.patch-container {
    display: flex;
    height: 18px;
    width: 18px;
    margin-right: 10px;
    align-items: center;
    justify-content: center;
}
#tt_branches .patch {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background: #00ccd2;
    border: solid 2px white;
}
#db_current .patch {
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #c5f303;
    border: solid 1px #2550f3;
}
#db_new .patch {
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #e33e3e;
    border: solid 1px #2550f3;
}
#tt_buffer .patch {
    width: 18px;
    height: 18px;
    background: rgba(0, 124, 191, 0.188);
    border: solid 1px #2550f3;
}
.map-controls {
    z-index: 1000;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 10px 10px 5px;
    background: #363636;
    box-shadow: 0px 0px 10px #bdbdbd;
}
.map-controls label {
    color: #ebe5d5;
    font-weight: bold;
}
.map-control {
    margin-bottom: 7px;
}
.feature-attr {
    z-index: 9999;
    position: absolute;
    bottom: 20px;
    right: 10px;
    max-width: 80%;
    padding: 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #bdbdbd;
}
.attr-tabs {
    list-style: none;
    padding: 0;
    border-bottom: solid 1px #4150d6;
    color: #4150d6;
}

.attr-tabs button {
    border-radius: 0 !important;
    padding: 0px 10px;
    color: #4150d6;
}
.attr-tabs .active {
    border: solid 1px #4150d6 !important;
    border-bottom: none !important;
    background: #4150d6 !important;
    color: white !important;
}
.attr-tabs .active:hover {
    color: white !important;
}
.attr-tabs button:hover {
    color: #4150d6 !important;
    border-color: #4150d6 !important;
}
.attr-dstr {
    color: #4150d6;
    font-size: larger;
    font-weight: bold;
}
.attr-label {
    color: #4150d6;
    font-weight: bold;
}
.feature-attr .tab-content {
    padding: 0;
}
.feature-attr .tab-content ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: space-between;
}
.feature-attr .tab-content ul li {
    padding: 0 10px;
    flex-grow: 1;
}
.feature-attr .tab-content ul li:nth-child(2n+1) {
    background: rgba(65, 80, 214, 0.1);
}
.section-heading {
    margin: 15px 0;
}
.subsection-heading {
    margin: 10px;
    margin-left: 0;
    font-size: medium;
    font-weight: bold;
}
.graph-cont {
    display: flex;
}
.graph {
    flex-basis: 50%;
}
svg > g > g.google-visualization-tooltip { pointer-events: none }
footer {
    border-top: solid 15px #4150d6;
    background: #111;
    height: 200px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
footer img {
    height: 55px;
}
.finance {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}




.layer-toggle > div {
  display: flex;
  align-items: center;
}

.layer-toggle div:last-child {
  margin-bottom: 0;
}

.layer-toggle input[type="checkbox"] {
  margin-right: 8px;
  cursor: pointer;
}

.layer-toggle label {
  cursor: pointer;
  user-select: none; /* Запрещает выделение текста при клике */
}

.mapboxgl-popup-content {
  padding-top: 20px !important;
}
iframe{
  width: 100%;
  height: 800px;
}
.popup-gallery img {
  max-width: 100%;
  max-height: 200px;
}