html,
body {
   margin:0;
   padding:0;
   height:100%;
   overflow-y: scroll;

   overflow-x: hidden;
}

html::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */

html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */

body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for pages */
.div-pages-app::-webkit-scrollbar {
  display: none;
}
.div-pages-app {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.inline{
    display: inline-block;
}

/*.leaflet-control-zoom-fullscreen{
  background:#fff url(fullscreen1.png) no-repeat 0 0;
  }

@media all and (display-mode: fullscreen) {
  .leaflet-control-zoom-fullscreen{
  background:#fff url(fullscreen2.png) no-repeat 0 0;
  }
}*/
.pagination, ,pagination-sm{
    padding: 0;
    margin: 0;
}

.brcrump-ch2 > ol > li > a{
  text-decoration:none;
  font-size: 18px
}

.brcrump-ch2 > ol > li:last-child > a{
  color: #40737a;
  font-weight: bold;
}

.active.nav-link{
  color: red;
  font-weight: bold;
  background-color: red;
}

#page-content {

   min-height:100vh;
   position:relative;
}
#header-razd {
   padding:0px;
   padding-right:20px;
}
#body-razd {

   padding-bottom:80px;   /* Height of the footer */
}
#footer-razd {
   position:absolute;
   bottom:0;
   width:100%;
   height:80px;   /* Height of the footer */
}

/*@media (max-width:800px) {
  img#razdelimg {
    display: none;
  }
}*/
#razdelimg {
  max-width: 100%;
  height: auto;
}
@media (max-width: 800px) {
  /* Hide the image with class "my-image" when the screen width is <= 768px */
  #razdelimg, #temaimg, #temalogoimg, #geo10-buttons, #footertxt, #front-page-header1{
    display: none;
  }
}

#geo10-buttons2 {
    /* Styles specific to the phone-div */
    display: none; /* Hide the phone-div by default */
}

/* Media query to show the phone-div only on phone screens */
@media (max-width: 800px) {
    #geo10-buttons2 {
        display: block; /* Show the phone-div on screens with a maximum width of 768px (typical phone width) */
    }
}
#front-page-header2 {
    /* Styles specific to the phone-div */
    display: none; /* Hide the phone-div by default */
}

/* Media query to show the phone-div only on phone screens */
@media (max-width: 800px) {
    #front-page-header2 {
        display: block; /* Show the phone-div on screens with a maximum width of 768px (typical phone width) */
    }
}
.app-header--title {
    font-size: 50px;
    padding-bottom: 30px;
}

.carousel-content {
  position: absolute;
  bottom: 10%;
  left: 5%;
  z-index: 30;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.tooltip-inner { background-color: #00818d;
    opacity: 1 !important;
    filter:alpha(opacity=100)}
.tooltip.show {
    opacity: 1;
}

#loading {
    display: none !important;
}

/*.dash-spinner {
  background-image: url("https://i.stack.imgur.com/SBv4T.gif");
  background-size: contain;
  background-repeat: no-repeat;
}

.dash-spinner * {
  display: none !important;
}*/

body:has(#_pages_content[data-dash-is-loading="true"]) #loading {
    display: flex !important;
}

.dl-vulkan-content .leaflet-popup-content-wrapper{
    padding: 0px;
    background-color: transparent;
    border: none
}
.dl-vulkan-content .leaflet-popup{
    padding: 0px;
    background-color: transparent;
    border: none
}
.dl-vulkan-content .leaflet-popup-content {
    background-color: transparent;
    border: none
    margin: 50px auto 0 auto
}



/* Style the active class, and buttons on mouse-over */
.active1, .btn1:hover{
background-color: #e58580;
/*opacity: 0.5 !important;
filter:alpha(opacity=100)}*/
color: white;
}

.active1:hover {
background-color: #e58580;
}

.active1, .btn1:focus {
    box-shadow: 2px 2px 2px 2px #d23027;
}

.active2, .btn2:hover{
background-color: #bce5d8;
/*opacity: 0.5 !important;
filter:alpha(opacity=100)}*/
color: white;
}

.active2:hover {
background-color: #bce5d8;
}

.active2, .btn2:focus {
    box-shadow: 2px 2px 2px 2px #5bc2a2;
}

.active3, .btn3:hover{
background-color: #c7c591;
color: white;
}

.active3:hover {
background-color: #c7c591;
}

.active3, .btn3:focus {
    box-shadow: 2px 2px 2px 2px #a4a04b;
}

.active4, .btn4:hover{
background-color: #ffdb96;
color: white;
}

.active4:hover {
background-color: #ffdb96;
}

.active4, .btn4:focus {
    box-shadow: 2px 2px 2px 2px #ffa900;
}

.active5, .btn5:hover{
background-color: #cdc3da;
color: white;
}

.active5:hover {
background-color: #cdc3da;
}

.active5, .btn5:focus {
    box-shadow: 2px 2px 2px 2px #876ea6;
}

.btn6-4{
    border-color: #664b86;
}

.active6, .btn6-4:hover{
background-color: #c0afd3;
/*opacity: 0.5 !important;
filter:alpha(opacity=100)}*/
color: white;
}

.active6, .btn6-4:focus {
    box-shadow: 2px 2px 2px 2px #664b86;
}

.active6, .btn6:hover{
background-color: #c0afd3;
/*opacity: 0.5 !important;
filter:alpha(opacity=100)}*/
color: white;
}

.active6:hover {
background-color: #c0afd3;
}

.active6, .btn6:focus {
    box-shadow: 2px 2px 2px 2px #664b86;
}

.focus:focus{
background-color: #D7D7D7;
}

.tooltip {
  pointer-events: none;
}

.separator-div {
  content: '...';
  display: block;
  height: 1px;
  width: 400px;
  margin: 20px auto;
  text-indent: -9999px;
  border-top: 1px solid #585858;
}

/* Front Page Label География на България
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#front_page-label {
    font-size: 70px;
    position: absolute;
    top: 50%;
    left: 50%;
    color:white;
    font-family: Segoe UI;
    transform: translate(-50%, 100px)

}


@media (max-width: 2000px) {
    #front_page-label {
        font-size: 55px;
    }
}

@media (max-width: 1500px) {
    #front_page-label {
        font-size: 40px;
    }
}
@media (max-width: 1000px) {
    #front_page-label {
        top: 30%;
        transform: translate(-30%, 100px);
        -webkit-transform: translate(-30%, 100px);
        font-size: 35px;
    }
}
@media (max-width: 768px) {
    #front_page-label {
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        margin-top: 50px;
        font-size: 30px;
    }
}

@media (max-width: 576px) {
    #front_page-label {
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        margin-top: 50px;
        font-size: 20px;
    }
}
/* Front Page Label География на България
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Buttons Front Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.img1 {
  position:absolute;
  top:50%;
  left:14.3%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.img1.main {
  z-index:2;
}
.img1.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);

  /*filter: blur(15px);
  -webkit-filter: blur(15px);*/
  opacity:0;
}
.img1.main:hover ~ .img1.glow {
  transform: scale(1.15) translate(-50%, -50%);
  -webkit-transform: scale(1.15) translate(-50%, -50%);
  opacity:1;
}

.img1.main:hover{
  filter: saturate(200%);
  -webkit-filter: saturate(200%);
}

.img2 {
  position:absolute;
  top:50%;
  left:28.6%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.img2.main {
  z-index:2;
}
.img2.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);

  /*filter: blur(15px);
  -webkit-filter: blur(15px);*/
  opacity:0;
}
.img2.main:hover ~ .img2.glow {
  transform: scale(1.15) translate(-50%, -50%);
  -webkit-transform: scale(1.15) translate(-50%, -50%);
  opacity:1;
}

.img2.main:hover{
  filter: saturate(200%) brightness(1.1);
  -webkit-filter: saturate(200%) brightness(1.1);
}

.img3 {
  position:absolute;
  top:50%;
  left:42.9%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.img3.main {
  z-index:2;
}
.img3.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);
  opacity:0;
}
.img3.main:hover ~ .img3.glow {
  transform: scale(1.15) translate(-50%, -50%);
  -webkit-transform: scale(1.15) translate(-50%, -50%);
  opacity:1;
}

.img3.main:hover{
  filter: saturate(200%) brightness(1.1);
  -webkit-filter: saturate(200%) brightness(1.1);
}

.img4 {
  position:absolute;
  top:50%;
  left:56.2%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.img4.main {
  z-index:2;
}
.img4.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);
  opacity:0;
}
.img4.main:hover ~ .img4.glow {
  transform: scale(1.15) translate(-50%, -50%);
  -webkit-transform: scale(1.15) translate(-50%, -50%);
  opacity:1;
}

.img4.main:hover{
  filter: saturate(200%) brightness(1.1);
  -webkit-filter: saturate(200%) brightness(1.1);
}

.img5 {
  position:absolute;
  top:50%;
  left:70.5%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.img5.main {
  z-index:2;
}
.img5.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);
  opacity:0;
}
.img5.main:hover ~ .img5.glow {
  transform: scale(1.15) translate(-50%, -50%);
  -webkit-transform: scale(1.15) translate(-50%, -50%);
  opacity:1;
}

.img5.main:hover{
  filter: saturate(200%) brightness(1.1);
  -webkit-filter: saturate(200%) brightness(1.1);
}

.img6 {
  position:absolute;
  top:50%;
  left:84.8%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.img6.main {
  z-index:2;
}
.img6.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);
  opacity:0;
}
.img6.main:hover ~ .img6.glow {
  transform: scale(1.15) translate(-50%, -50%);
  -webkit-transform: scale(1.15) translate(-50%, -50%);
  opacity:1;
}

.img6.main:hover{
  filter: saturate(200%) brightness(1.1);
  -webkit-filter: saturate(200%) brightness(1.1);
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Buttons Front Mobile
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.img1-1 {
  position:absolute;
  top:50%;
  left:14.3%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.img1-1.main {
  z-index:2;
}
.img1-1.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);

  /*filter: blur(15px);
  -webkit-filter: blur(15px);*/
  opacity:0;
}
.img1-1.main:hover ~ .img1-1.glow {
  transform: scale(1.15) translate(-50%, -50%);
  -webkit-transform: scale(1.15) translate(-50%, -50%);
  opacity:1;
}

.img1-1.main:hover{
  filter: saturate(200%);
  -webkit-filter: saturate(200%);
}

.img2-1 {
  position:absolute;
  top:50%;
  left:28.6%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.img2-1.main {
  z-index:2;
}
.img2-1.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);

  /*filter: blur(15px);
  -webkit-filter: blur(15px);*/
  opacity:0;
}
.img2-1.main:hover ~ .img2-1.glow {
  transform: scale(1.15) translate(-50%, -50%);
  -webkit-transform: scale(1.15) translate(-50%, -50%);
  opacity:1;
}

.img2-1.main:hover{
  filter: saturate(200%) brightness(1.1);
  -webkit-filter: saturate(200%) brightness(1.1);
}

.img3-1 {
  position:absolute;
  top:50%;
  left:42.9%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.img3-1.main {
  z-index:2;
}
.img3-1.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);
  opacity:0;
}
.img3-1.main:hover ~ .img3-1.glow {
  transform: scale(1.15) translate(-50%, -50%);
  -webkit-transform: scale(1.15) translate(-50%, -50%);
  opacity:1;
}

.img3-1.main:hover{
  filter: saturate(200%) brightness(1.1);
  -webkit-filter: saturate(200%) brightness(1.1);
}

.img4-1 {
  position:absolute;
  top:50%;
  left:14.3%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.img4-1.main {
  z-index:2;
}
.img4-1.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);
  opacity:0;
}
.img4-1.main:hover ~ .img4-1.glow {
  transform: scale(1.15) translate(-50%, -50%);
  -webkit-transform: scale(1.15) translate(-50%, -50%);
  opacity:1;
}

.img4-1.main:hover{
  filter: saturate(200%) brightness(1.1);
  -webkit-filter: saturate(200%) brightness(1.1);
}

.img5-1 {
  position:absolute;
  top:50%;
  left:28.6%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.img5-1.main {
  z-index:2;
}
.img5-1.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);
  opacity:0;
}
.img5-1.main:hover ~ .img5-1.glow {
  transform: scale(1.15) translate(-50%, -50%);
  -webkit-transform: scale(1.15) translate(-50%, -50%);
  opacity:1;
}

.img5-1.main:hover{
  filter: saturate(200%) brightness(1.1);
  -webkit-filter: saturate(200%) brightness(1.1);
}

.img6-1 {
  position:absolute;
  top:50%;
  left:42.9%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.img6-1.main {
  z-index:2;
}
.img6-1.glow {
  z-index:1;
  transform: scale(1.01) translate(-50%, -50%);
  -webkit-transform: scale(1.01) translate(-50%, -50%);
  opacity:0;
}
.img6-1.main:hover ~ .img6-1.glow {
  transform: scale(1.15) translate(-50%, -50%);
  -webkit-transform: scale(1.15) translate(-50%, -50%);
  opacity:1;
}

.img6-1.main:hover{
  filter: saturate(200%) brightness(1.1);
  -webkit-filter: saturate(200%) brightness(1.1);
}
/* Buttons Front Mobile
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


.tooltip.map.capital {
  background-color: transparent;
  color: black;
  text-align: center;
  padding: 0px 10px;
  border-radius: 0px;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  arrowColor: transparent !important;
  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0);
  border: 0;
  text-transform: uppercase;
  text-decoration: underline;
  font-weight: bold;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;

}

.tooltip.map.city {
  background-color: transparent;
  color: black;
  text-align: center;
  padding: 0px 10px;
  border-radius: 0px;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  arrowColor: transparent !important;
  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0);
  border: 0;


  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;

}

.tooltip.map.vh {
  background-color: transparent;
  color: black;
  text-align: center;
  padding: 0px 10px;
  border-radius: 0px;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  arrowColor: transparent !important;
  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0);
  border: 0;
  text-transform: uppercase;
  text-decoration: underline;
  font-weight: bold;

  /* Position the tooltip text - see examples below! */
  position: absolute;


}

.tooltip.map.hg {
  background-color: transparent;
  color: black;
  text-align: center;
  padding: 0px 10px;
  border-radius: 0px;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  arrowColor: transparent !important;
  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0);
  border: 0;
  font-weight: bold;


  /* Position the tooltip text - see examples below! */
  position: absolute;


}
.tooltip.map.md {
  background-color: transparent;
  color: black;
  text-align: center;
  padding: 0px 10px;
  border-radius: 0px;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  arrowColor: transparent !important;
  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0);
  border: 0;
  position: absolute;

  font-size: 13px

}

.tooltip.map.sm {
  background-color: transparent;
  color: black;
  text-align: center;
  padding: 0px 10px;
  border-radius: 0px;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  arrowColor: transparent !important;
  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0);
  border: 0;
  position: absolute;

  font-size: 12px

}

.tooltip::before {
  border-right: none !important;
}



#hp  {
float: right;
 margin: 0 0 0 15px;
}