:root {
    --main_color: #7B6220;
    --secondary_color: #004d98;

    --global-color-0: #009bdb;
    --global-color-1: #000000;
    --global-color-2: #0088c3;
    --global-color-6: #ffffff;
    --global-color-7: #f9f9f9;
    --global-color-8: #818386;   
    
    --rpp-color-1: #5e893c;
    --rpp-color-2: #bab85c;
    --rpp-color-3: #a78426;
    --rpp-color-4: #7b6220;
    --rpp-color-5: #97906f;
}  

body { 
    height:100%;
    padding: 0; margin:0;     
    background:#eceadd;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    scrollbar-width: thin;          /* "auto" or "thin" */
    scrollbar-color: #5E893C #BAB85D;   /* scroll thumb and track */     
}

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

.bg-rpp-1 { background-color:var(--rpp-color-1); } 
.bg-rpp-2 { background-color:var(--rpp-color-2); } 
.bg-rpp-3 { background-color:var(--rpp-color-3); } 
.bg-rpp-4 { background-color:var(--rpp-color-4); } 
.bg-rpp-5 { background-color:var(--rpp-color-5); } 

.nav-link:focus, .nav-link:hover { color:#fff; }

.dropdown-menu { background-color:var(--rpp-color-2); border-top:1px solid transparent; }

.dropdown-item:focus, .dropdown-item:hover { background-color:transparent; color:#fff;}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show { color:var(--bs-nav-link-color); }
#header {
    margin-bottom: 30px;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(34, 34, 34, 0.2);
    -moz-box-shadow: 0px 0px 10px 0px rgba(34, 34, 34, 0.2);
    box-shadow: 0px 0px 10px 0px rgba(34, 34, 34, 0.2);
}
/* Meta */
#header .header_meta {
    background-color: #222;
	background-color:#779ACB;
}
/* Weather forecast */
#header .header_meta .weather_forecast {
    float: left;
    line-height: 45px
}
#header .header_meta .weather_forecast i {
    margin-right: 5px;
    font-size: 14px
}
#header .header_meta .weather_forecast .city {
    color: #fff
}
#header .header_meta .weather_forecast .temp {}
/* Main */
#header .header_main {
    z-index: 9;
    display: block;
    position: relative;
    width: 100%
}
#header_main .container {
    padding-top: 20px;
    padding-bottom: 20px
}
#header_main.fixed {
    background-color: #fff;
    position: fixed;
    width: 100%;
    left: 0px;
    top: 0px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(34, 34, 34, 0.2);
    -moz-box-shadow: 0px 0px 10px 0px rgba(34, 34, 34, 0.2);
    box-shadow: 0px 0px 10px 0px rgba(34, 34, 34, 0.2);
}
.header_main-parent {
    clear: both;
    display: block;
    background-color: #fff
}
.header_main-parent #header_main.fixed .container {
    padding-top: 5px;
    padding-bottom: 5px
}

nav.site_navigation {
  float: right;
}

nav.site_navigation ul.menu > li.has_dt_mega_menu > ul.dt_mega_menu {  border-top-width: 5px !important; border-top-color:var(--secondary_color) !important }

/* Works on Chrome, Edge, and Safari 
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}
*/

/* MAP CSS */

.head-section { padding: 15px 0; }

#map-container { position:relative; width:100%; }
#map { height: 70vh; border:0; /*width:100vw; */ }
#rpp1 { position:absolute; z-index: 1000; bottom:0; right:0; background:#fff; color: #000; padding:1em; display: none;} 
.rpp_logo { height:100px; }

.xleaflet-attribution-flag { display: none !important; }

/* LEAFLET POPUP STYLE */
.leaflet-popup-content a { text-decoration: none; transition: all .5s ease-in-out;}
.leaflet-popup-content a:hover { color:#5E893C; }

.leaflet-popup-content { /*margin:0; */} /* margin: 13px 24px 13px 20px; */
.leaflet-popup-content-wrapper { padding:0; border-radius:0; margin-bottom:-13px; }

.leaflet-popup-content h6 { text-align:center; background: var(--main_color); color: #fff !important; padding: .5em; margin: -13px -24px 13px -20px;}

.leaflet-container a.leaflet-popup-close-button { background-color:#A78426; color:#ddd; height:35px; line-height:35px; right:-24px;
    border-left: 1px solid silver;
    transition: all .5s ease-in-out;
}
.leaflet-container a.leaflet-popup-close-button:hover { background-color:#ff0000; color:#fff;}
#poi_box_content-clear { cursor:pointer; transition: all .5s ease-in-out; }
#poi_box_content-clear:hover { background-color:#ff0000; color:#fff; }

.custom-img-icon {
  background-image: url('https://parkpohorje.org/karta/marker_sova.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 22px;
  height: 22px;
  display: block; 
}
        
.poi_menu { height:auto; border:1px solid silver; padding:1em; font-size:14px; border-radius:3px; margin-bottom: .5em;
    background:#fff; cursor:pointer;
}
.poi_menu:hover { background:#f3f3f3; }
.poi_menu:last-child { border-bottom:0; }

#poi_box { position:absolute; 
    /*top:11px; left:60px; */
    top:0px; right:0px; 
    background: #ECEADD; z-index:1000; display:block; border-radius: 3px; 
    border: 2px solid rgba(0,0,0,0.2); padding:0; margin-bottom:.5em; 
} 
#poi_box_button  {position:absolute; top:0; left:-40px; background:#fff; font-size:1.4em; width:40px; text-align:center; height:40px; line-height:40px; cursor:pointer;}
#poi_box_content { min-height:40px; padding-right:10px; padding-top:7px; padding:.5em; display:none;}

#poi_box_name { font-weight:bold; color:#283897;border-bottom:1px solid #283897;padding-bottom:.25em;font-size:1.2em}
#poi_box_content_list { overflow-y:auto; max-height:60vh; padding-top:10px;}

#poi_box_content { max-height:45vh; overflow-y: auto; padding:.5em; margin-top: .5em;}

.poi-photo-menu { width:80px; border-radius:5px; border:1px solid silver;}

.poi-photo-popup { width:150px; padding-bottom:1em; display:block; margin:0 auto; }

#poi_box-marker { background: #BAB85C; color:#fff; border: 0; /*cursor:pointer;*/}
/*#poi_box-marker:hover { background: #5E893C; color:#fff;} */

#poi_box_search { }
#poi_box_content-toggle { cursor:pointer; transition: all .5s ease-in-out; }
#poi_box_content-toggle:hover { background:#6c757d; color:#fff; }

.navbar-show-icon-on-off { display:inline-block; width:14px; height:16px; color:#fff !important; }

.aktualno-img {
  transition: all .8s ease-in-out;
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.aktualno-img:hover {
  transform: scale(1.1);
}

.page-blockquote{
    padding: 60px 80px 40px;
    position: relative;    
  font-size: 1.8em;
  /*width:60%;*/
  margin:50px auto;
  font-family:"Open Sans";
  font-style:italic;
  color: #fff;
  padding:1.2em 30px 1.2em 75px;
  border-left:.75em solid var(--rpp-color-2);
  line-height:1.6;
  position: relative;
  background:var(--rpp-color-1);
}

.page-blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:var(--rpp-color-2);
  font-size:5em;
  position: absolute;
  left: 10px;
  top:-10px;
}

.page-blockquote::after{
  content: '';
}

.page-blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}

figcaption {
    background-color: var(--rpp-color-2); text-align:center; padding: 0.5em 1em; font-size:1.2em; font-style:italic;
}

    /** The Magic **/
.btn-breadcrumb .btn:not(:last-child):after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid rgb(173, 173, 173);
  position: absolute;
  top: 50%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}

/** The Spacing **/
.btn-breadcrumb .btn {
  padding:6px 12px 6px 24px;
}
.btn-breadcrumb .btn:first-child {
  padding:6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
  padding:6px 18px 6px 24px;
}


/** Primary button **/
.btn-breadcrumb .btn.btn-1 {
  background-color: var(--rpp-color-1);
    color:#ddd !important;
}
.btn-breadcrumb .btn.btn-1:not(:last-child):after {
  border-left: 10px solid var(--rpp-color-1);
}
.btn-breadcrumb .btn.btn-1:not(:last-child):before {
  border-left: 10px solid var(--rpp-color-1);
}
.btn-breadcrumb .btn.btn-1:hover:not(:last-child):after {
  border-left: 10px solid var(--rpp-color-1);
}
.btn-breadcrumb .btn.btn-1:hover:not(:last-child):before {
  border-left: 10px solid var(--rpp-color-1);
}


/** Warning button **/
.btn-breadcrumb .btn.btn-3 {
  background-color: var(--rpp-color-2);
    font-weight:bold;cursor:auto;
}
        
.btn-breadcrumb .btn.btn-3:not(:last-child):after {
  border-left: 10px solid var(--rpp-color-2);
}
.btn-breadcrumb .btn.btn-3:not(:last-child):before {
  border-left: 10px solid var(--rpp-color-2);
}
.btn-breadcrumb .btn.btn-3:hover:not(:last-child):after {
  border-left: 10px solid var(--rpp-color-2);
}
.btn-breadcrumb .btn.btn-3:hover:not(:last-child):before {
  border-left: 10px solid var(--rpp-color-2);
}

/** Info button **/
.btn-breadcrumb .btn.btn-2 {
  background-color:var(--rpp-color-3);
    color:#ddd;
}
        
.btn-breadcrumb .btn.btn-2:not(:last-child):after {
  border-left: 10px solid var(--rpp-color-3);
}
.btn-breadcrumb .btn.btn-2:not(:last-child):before {
  border-left: 10px solid var(--rpp-color-3);
}
.btn-breadcrumb .btn.btn-2:hover:not(:last-child):after {
  border-left: 10px solid var(--rpp-color-3);
}
.btn-breadcrumb .btn.btn-2:hover:not(:last-child):before {
  border-left: 10px solid var(--rpp-color-3);
}
.btn-breadcrumb .btn { border-color: transparent !important; border-radius:0 !important;}
.btn-breadcrumb .btn:not(:last-child):hover { color: #fff !important}