/* infrap v2 kopia z infrap*/

/* nowe zagadnienia i stere cssy */

@font-face{
    font-family:'digital-7';
    src: url('digital-7.ttf');
   }
   /* zapinamy czcionkę której może nie miec przegladarka */



html, body {
height: 100%;
/* min-height:100%;  */
margin: 0;
overflow-y: hidden;
overflow-x: hidden;
background-color: lightgrey;
}

body.info2 {
  overflow-y: auto;   
  overflow-x: hidden; 
  height: 100vh;
  /* do przewijania */

}
/* na sztywno nadpisujemy overflow pod komórkę */




.lesnyPATROL
{
background-color: green;
/* height: 5vh; */
font-family: Garamond, serif;
color: gold;
font-size: 21px;
height: 23px;
width: 100%; 
text-align: center;
}
.lesnyPATROL2
{
background-color: black;
/* height: 5vh; */
font-family: Garamond, serif;
color: white;
font-size: 12px;
height: 45px;
width: 100%; 
}

/* .leaflet-compass .compass-icon {
  transform: rotate(+90deg);
} */


body
{
/* margin: 0 !important; */
/* height: 100%; */
/* box-sizing: border-box; */

/* font-family: Garamond, serif; */
/* font-family: impact; */
/* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */


}





/* FONTY */


.small {
    font: italic 80px sans-serif;
}
.heavy {
    font: bold 50px sans-serif;
}

.Rrrrr {
    font: italic 15px serif;
    /* fill: blue; */
    color: blue;
}

.RrrrrLARGE {
    font: bold 20px serif;
}



.LICZNIKKASY{
    
    font-family: 'digital-7', sans-serif;
    color: gold;

    float: left;
    font-size: 7vh;
    /* text-align: center; */
}





/* szalony strony RYSOL*/



.error,
.oferta,
.onas,
.rysol
{
background-color: lightgrey;
/* height: 800px; */
height: 600px;
width: 100%;
text-align: center;
/* margin-left: auto;
margin-right: auto; */
}





.guzik1
{
/* border: 1px solid gold; */
padding: 1px;
margin: 0.5vw;
/* margin: 1px; */
text-align: center;
/* width: 10vw; */
font-size: 1.5vw;
margin-left: auto;
margin-right: auto;
/* float: left; */
min-width: 17vw;
}

.guzik2
{
border: 1px solid gold;
padding: 1px;
margin: 0.5vw;
/* margin: 1px; */
text-align: center;
/* width: 10vw; */
font-size: 2.1vw;
min-width: 14vw;
}














#menuMAP{

    text-align: left;
}





#swiatBIEDY
{

overflow-y: scroll;

}


.ADMIN
{
/* background-color: PINK; */
fill: PINK;
/* fill: rgb(103, 74, 104); */
border: 5px solid rgb(238, 19, 154); 
visibility: hidden;    
}



.ADMINISTRACJA
{
position: absolute;
bottom: -300px;
background-color: lightpink;
fill: PINK;
border: 5px solid rgb(238, 19, 154); 

}



/* koniec admina, do rozdysponowania */
/* koniec admina, do rozdysponowania */
/* koniec admina, do rozdysponowania */
/* koniec admina, do rozdysponowania */


.fullheight {
/* height: 100%; */
/* background-color: lightgrey; */
/* position: relative; */
padding-bottom: 9vh;
}




.menu
{
background-color:black;
color: gold;
text-align: left;
height: 7vh;
width: 100%;
display: flex;
position: relative;
z-index: 3000;
}





.particles_container {
  position: relative;
  width: 100%;
}

 .particles-js-canvas-el {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -10; 
  pointer-events: none; 
} 





.infrapTAG
{
/* background-color:pink; */
/* margin-left: auto; */
/* margin-right: auto; */
/* font-family: impact; */
/* font-family: Garamond, serif; */
/* font-family: Garamond; */
/* font-family: arial; */
color: gold;
/* font-size: 25px; */
/* float: right; */
/* height: 4vh; */
text-align: right;
float: right;
/* width: 100%; */
font-size: 3.1vh;
margin-left: auto;
white-space: nowrap;
text-align: right;
}



.image
{
    height: 4vh;
    margin: 1px;
    /* position:absolute; 
    right:5px; 
    top:5px; 
    width:60px;  */
    position: relative;
    top:0px;
    float: right;
}



.flagMINI
{
    /* height:15px; */
    width:25px;
    height:3vh;
}


.lang-button[data-lang="id"] {
font-family: 'Playwrite ID', sans-serif;
font-size: 1.0vw;
}
/* o 0.5 mniej niz inne czcionki bo ta bardzo wielka */



.lang-button[data-lang="ke"] {
    font-family: 'Playwrite ZA Guides', sans-serif;
    font-size: 1.0vw;
}




ol
{
display: inline-block;
padding: 0px;
margin: 0px;
height: 25px;
}


ol a
{
text-decoration: none;
/* color: lime; */
color: white;
/* color: black; */
/* display: block; */

}

ol > li
{
float: left;
/* width: 99px; */
list-style-type: none;
}

ol > li:hover
{
background-color: seagreen;
}

ol > li:hover > a
{
/* color: black; */
color: gold;
}



ol > li > ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
display: none;
}

ol >li:hover > ul
{
display: block;
}


ol > li > ul > li
{
background-color: lightseagreen;
position: relative;
}

ol > li > ul > li:hover
{
background-color: seagreen;
}

ol > li > ul > li:hover >a
{
color: white;
}


/* koniec menu */
/* koniec menu */
/* koniec menu */


#home{
    display: flex;
    /* justify-content: space-between; */
    /* overflow-y: scroll; */
    margin: 15px;
}


#info1pre {
    max-height: 100%; /* Maksymalna wysokość równa wysokości rodzica */
    overflow: auto; /* Dodaje przewijanie, jeśli zawartość jest większa */
    display: block; /* Zapewnia poprawne wyświetlanie */
    white-space: pre-wrap; /* Pozwala na zawijanie wierszy */
}


#svgMESS
{
height: 65vh;
margin: 11px;
position: absolute;
left: -5000px;
bottom: -5000px;




}







#rightMESS
{
    height: 65vh;
    width: 420px;
    float: right;
    position: absolute;
    left: -5000px;
    bottom: -5000px;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: silver;
}



#rightMESSbaza { 
  left: -5000px;
  bottom: -5000px;
  overflow-y: scroll;
  }
  
  
  #rightMESSbaza,
  #rightMESSadres,
  #rightMESSmapa,
  #rightMESSorient,
  #rightMESSobiekt,
  #rightMESSwczytaj,
  #rightMESSopis,
  #rightMESS1strona,
  /* #rightMESSzakres, */
  #rightMESSswiatiludzie

  { 
  /* height: 594px; */
  height: 65vh;
  width: 420px;
  /* overflow-y: scroll; */
  background-color: silver;
  overflow-x: hidden;
  }
  
  
  #rightMESSadres
  { 
  position: absolute;
  left: -5000px;
  bottom: -5000px;
  float: right;
  overflow-y: scroll;
  
  }
  






.mainn_l
{
float: left;
/* max-width: 75%; */
/* min-width: 30%; */
/* width: -webkit-fill-available; */
/* ok w chrome, wyjebało w firefox */
width: 100%;
overflow-x: scroll;
overflow-y: scroll;
/* border: 1px solid black; */
height:100%;
}

.mainn_c{
float: left;
/* border: 1px solid black; */
/* float: right; */
/* height: 100%; */
max-height: 65vh;
margin: 1px;
/* width: 125px; */
/* width: 125px; */
width: min-content;
}

.mainn_p
{
/* width: min-content; */
/* float: left; */
/* float: right; */
/* margin-left: auto; */
}



#svgCLASSsvgDETALE
{
/* height: 65vh; */
height: 100%;
background-color: lightyellow;
/* max-width: 58%; */
width: max-content;
}
#svgCLASSsvgMESS
{
/* height: 65vh; */
/* height: 100%; */
background-color: lightyellow;
/* background-color:lightpink;  */
}

#svgCLASSrightMESS
{
/* height: 65vh; */
height: 100%;
background-color:lightpink; 
}




/* GUZIKI Z MAINN_C */
/* GUZIKI Z MAINN_C */
/* GUZIKI Z MAINN_C */


#svgMESSopis{
height: 65vh;
/* height: 100%; */
/* width: 100%; */
background-color: lightyellow;
max-height: 59vh;
}










/* wyrzut kosztorys */
/* wyrzut kosztorys */


#svgMESSwycena,
#svgMESSspecyfikacje
{
  width: 840px;
  /* height: 100%; */
  /* height: 65vh; */
  /* width:400px; */
  /* width: 100%; */
  /* width: min-content; */
  background-color: lightyellow;
  /* overflow-y: scroll; */
  border: 2px solid black;
}



#TABpodsumowanieWYCEN,
#TABpodsumowanieSCAL,
#svgMESSspecyfikacjeTAB
{
  width: 100%;

}



#svgMESSpodsumowanie,
#svgMESSsumySCAL
{
  
  background-color: lightyellow;
  width: 840px;
  border: 2px solid black;
}


.svgMESSwycenaNOWRAP
{
  white-space: nowrap;
  text-align: right;
}


/* wyrzut kosztorys */
/* wyrzut kosztorys */
/* wyrzut kosztorys */



#svgMESSedytor
{
    height: 65vh;
    /* background-color: lightcoral; */
    background-color: gray;
    text-align: left;
    /* text-align: right; */
    width:375px; 
}

#svgMESSpapier
{
    height: 65vh;
    /* background-color: lightcoral; */
    background-color: gray;
    /* text-align: right; */
    text-align: left;
    width:375px; 

}


/* MAINN_C */
/* MAINN_C */
/* MAINN_C */

.svgMESSklawka{

    /* max-height: 30vh;     */
}
.svgMESSzoom{
    /* max-height: 30vh;     */

}
.svgMESSrysunki{
/* max-height: 30vh;     */
}

.ZOOMklawa{
margin-left: auto;
margin-right: auto;
}

.moveSVG
{

    height: 4vh;
}

#svgMESSturbofilter
{
/* background-color: lightgreen; */
padding: 10px;
height: 45vh;
overflow-y: scroll;
text-align: left;
background-color: gray;
width:425px; 
}


/* GUZIKI Z POLYLINI */
/* GUZIKI Z POLYLINI */
/* GUZIKI Z POLYLINI */



#svgMESSedycja{
height: 60vh;
/* background-color: lightcoral; */
background-color: gray;
/* width:375px;  */
width: min-content;
overflow-y: scroll;
}



#piwSELECTORwiersz
{
float: left;
/* display: flex; */
white-space: nowrap;
width: 100%;
}


#piwSELECTORright
{
float: left;
text-align: left;
}

#piwSELECTORcentr
{
    
    float: left;
    text-align: center;

}

#piwSELECTORleft
{
    float: left;
text-align: right;
}


/* GUZIKI [+] */
/* GUZIKI [+] */
/* GUZIKI [+] */

.selectADDlev1{
height: 55vh;
background-color: gray;
width:375px; 
overflow-x: hidden;
overflow-y: scroll;
}
.selectADDlev2{
    height: 55vh;
    background-color: gray;
width:375px; 
overflow-x: hidden;
overflow-y: scroll;
}


.btn_selectADDlev2
{
/* height: 110px; */
/* width: 110px; */
border: 3px solid grey;
/* box-sizing: border-box; */
text-align:center;
padding: 0px;
zoom: 75%;
}



.btn_selectADDlev2:hover
{

border: 3px solid gold;
}







.leaflet-top {

    z-index: 2000;
}
.leaflet-top {
    
    z-index: 2000;
}


.leaflet-left {
    left: -7px;
}
.leaflet-control-container {
    z-index: 2000;
}


/* panel do rysowania leaflet */
/* panel do rysowania leaflet */
/* docelowo przeniesiony do button */










/* LOGIN CSS */
/* LOGIN CSS */
/* LOGIN CSS */




.labelAB{

/* font-family: impact; */
font-size:9px;

}



/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
/* top: 125px; */
/* right: 5px; */
/* left: 50%; */
left: 0;
right: 0;
top: 0;
bottom: 0;
/* negative half of width */
/* border: 3px solid black; */
/* background-color: burlywood; */
background-color: darkseagreen;
z-index: 3000;
}

/* Add styles to the form container */
.form-container {
/* max-width: 300px; */
padding: 10px;
width: 500px;
margin-left: auto;
margin-right: auto;
}

.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px 0 15px 0;
margin: 5px 0 22px 0;
border: none;
background: lightgrey;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: white;
outline: none;
}

/* submit/login button */
.form-container .btn {
background-color: green;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}

.form-container .cancel {
background-color: lightpink;
/* background-color: saddlebrown; */
}

.form-container .btn:hover {
opacity: 1;
}







/* 2024 08 nowy footer */
/* 2024 08 nowy footer */
/* 2024 08 nowy footer */


.footer
{
/* background-color: saddlebrown; */
/* background-color: grey; */
background-color: black;
/* border: 2px solid black; */
/* text-align: center; */
/* text-align: left; */
/* height: 49px; */
height: 9vh;
/* font-family: impact; */
/* color: white; */
font-family: Garamond, serif;
color: black;
/* color: gold; */
font-size: 15px;
width: 100%; 
position: absolute;
bottom: 0px;
top: auto;


}





.FOOTERPANEL
{
    position: absolute;
    bottom: 9vh;
    width: 100%;
    /* background-color: brown; */
/* top: auto; */
/* margin-left: auto; */
/* margin-right: auto;  */
/* float: left; */
/* display: inline-block; */
/* text-align: left; */
/* height: 29vh; */


/* height: 0vh; */
/* bo zasłaniało przycisk back */
}




.FILTERPANEL
{
/* width: 20vw; */
/* display: inline-flex;  */
/* display: inline-block;  */
/* height: 95%; */
/* margin: 5px; */
/* height: 95%; */
float: left;
}

.celFILTERPANEL
{
    
    /* scale: 90%; */
    /* zoom: 80%; */
    
}






.FILTERPANELklawa
{
    

}


.TILESPANEL
{
/* height: 95%; */
/* margin: 11px; */
/* background-color: yellow; */
/* word-wrap: break-word; */
/* display: inline-block; */
/* text-align: left; */
/* text-align: right; */
/* float: right; */
/* margin-left: auto; */
/* margin-left: 0px; */
/* margin-right: auto; */
/* margin-right: 0px; */
/* overflow-x: scroll; */
/* overflow-y:hidden; */
/* overflow-y:scroll; */
/* display: inline-flex;  */
/* position: absolute; */
/* bottom: 0vh; */
/* width: max-content; */
/* max-width: 60vw; */
}

.celTILESPANEL
{
    
    /* overflow-y: scroll */
}


#THEfieldsOFtiles
{
    
    overflow-y: scroll;
    text-align: right;
    height: 23vh;

}

/* 
.butonyZmonitor
{

    float: right;
}

.MONITOR
{
background-color: white;
margin:0.9vh;
width: 444px;
height:80%;
float: right;
color: black;
font-size: 12px;
overflow-y: scroll;
} */
/* stara stabilna */
/* stara stabilna */
/* stara stabilna */






/* 


.MONITORpanel {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.MONITOR {
  background-color: white;
  margin: 0.9vh 0;
  width: 444px;
  height: 90%;
  color: black;
  font-size: 12px;
  overflow-y: scroll;
  border: none;
  resize: none;
}

.butonyZmonitor {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
  height: 90%;
  align-content: center;
  justify-content: end;
}

.butonyZmonitor button {
  width: 200px;
  height: 100%;
  max-height: 2.5vh;
  font-size: 14px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
}

.butonyZmonitor button:disabled {
  background-color: #666;
  cursor: not-allowed;
} */

/* //fajna kosteczka ale nie widac monitor */


/* 




.MONITORpanel {
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-right: 10px;
}

.monitorWrapper {
  float: right;
  height: 90%;
  display: flex;
  align-items: center;
}

.MONITOR {
  background-color: white;
  width: 444px;
  height: 100%;
  color: black;
  font-size: 12px;
  overflow-y: scroll;
  border: none;
  resize: none;
}

.butonyZmonitor {
  float: right;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
  height: 90%;
  align-content: center;
  justify-content: end;
}

.butonyZmonitor button {
  width: 200px;
  height: 100%;
  max-height: 2.5vh;
  font-size: 14px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
}

.butonyZmonitor button:disabled {
  background-color: #666;
  cursor: not-allowed;
} */

/* niezla klawa 3x3 plus kostka */


.MONITORpanel {
  height: 90%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-right: 10px;
}

.monitorWrapper {
  float: right;
  height: 90%;
  display: flex;
  /* align-items: center; */
}

.MONITOR {
  background-color: white;
  width: 444px;
  /* height: 100%; */
  color: black;
  font-size: 14px;
  overflow-y: scroll;
  border: none;
  resize: none;
  /* padding: 5px; */
  margin: 2px;
  font-family: monospace;
  line-height: 1.4;
}


.butonyZmonitor {
  float: right;
  display: grid;
  grid-template-columns: repeat(1, 200px);
  /* grid-template-columns: repeat(3, 200px); */
  /* trzeba by odblokwoac buttony */
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column; /* <-- kluczowa linia */
  gap: 5px;
  height: 90%;
  align-content: center;
  justify-content: end;
}
/* wypelnianie kolumnami */

.butonyZmonitor button {
  /* width: 200px; */
  height: 100%;
  max-height: 2.0vh;
  font-size: 12px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
}




.butonyZmonitor button:disabled {
  /* background-color: #666; */
  cursor: not-allowed;
}




















/* przesiedlency 2024 08 */
/* przesiedlency 2024 08 */
/* przesiedlency 2024 08 */


/* OKO SAURONA */
/* OKO SAURONA */
/* OKO SAURONA wazne*/


@keyframes move1{
    0%{transform: rotate(-180deg);opacity:0;}
    100%{transform: rotate(0deg);opacity:1;}
}

@keyframes move2{
    0%{transform: translateX(200px);opacity:0;}
    100%{transform: translateX(0px);opacity:1;}
}



.liniaobrysowa
/* do minimini3 */
{
stroke: black;
/* stroke-width:15px; */
}

polygon{
/* fill: lime;  */
fill: lightgrey;
}
polygon:hover{
fill: pink; 

cursor: pointer;
}








/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */
/* start kopia */




.table
{
background-color: white;


}
.table5piw
{
background-color: white;
width:100%;
margin-left: auto;
margin-right: auto;
text-align: left;
}





.namaxa{

/* height: 100%; */
height: 594px;
width:420px;
margin-left: auto;
margin-right: auto;
text-align: left;
/* zoom: 120%; */
}


.SELECTONE,
.DV
{

float: left;  
}

/* te guziczki do archimum */
/* .up,
.upup
{
background-color:lightskyblue; 
}
.down,
.downdown
{    
background-color:lightsalmon; 
}
.btn_jumpUP,
.btn_jumpDOWN
{
background-color:green; 
} */

.updown
{    
/* border-radius: 15px;
height:30px; */
/* float: left; */
}


.updown:hover
{    
background-color:pink;   
}








#wynikselectsettings{
/* background-color:lightgrey;  */
}




/* okienka minimini */
/* okienka minimini */
/* okienka minimini */
/* okienka minimini */
/* wszystkie maja zablokowane hoverowanie */


.INPUTY
{
    font-size: 2.2vh;
}


.jumpvar,
.szerpasavar,
.spadpasavar,
.konstvar,
.ZNAKjumpvar,
.ZNAKszerpasavar,
.ZNAKspadpasavar,
.ZNAKkonstvar
{
width: 60px;
margin: 2px;
}










.OKIENKOZOOM
/* uzyte w selektedicie */
/* widok na klikniety element */
{

height: 165px; 
width: 100%;

/* float: left; */
/* height: 150px; */
/* width: 100px; */
/* zoom: 70%; */
/* scale: 90%; */
/* bonusik cos ala margin */
background-color:white; 
/* background-color:lightskyblue;  */
/* border: 1px solid black; */
pointer-events: none;
/* margin: 3px; */
}



.celOKIENKOZOOM
/* uzyte w selektedicie */
/* widok na klikniety element */
{

}


.OKIENKOSVG
/* uzyte w detalach */
{
/* float: left; */
height: 88px;
width: 88px;
/* border: 1px solid black; */
pointer-events: none;
background-color: lightyellow;
}



.OKIENKOSVGADDlev1
{
    height: 150px;
    width: 150px;
    pointer-events: none;
    background-color: white;
}
.OKIENKOSVGADDlev2
{
    height: 165px; 
    width: 100%;
    /* height: 100px; */
    /* width: 100px; */
    pointer-events: none;
    background-color: white;
}







.OKIENKOtiles
{
    /* float: left; */
    height: 95px;
    /* width: 300px; */
    /* width: 100%; */
    /* zoom: 40%; */
    /* border: 1px solid black; */
    transform: scaleY(9.5);
    pointer-events: none;
    
}



.celOKIENKO5piw
{
    /* float: left; */
    /* height: 95px; */
    /* width: 300px; */
    /* zoom: 40%; */
    /* border: 1px solid black; */
    /* background-color: lightyellow; */
    height: 10vh;
    width: 8vw;

}
.OKIENKO5piw
{
    /* height: 11vh; */
    /* width: 11vh; */
    /* float: left; */
    /* height: 100px; */
    /* width: 100px; */
    width: 100%;
    height: 100%;
    /* zoom: 40%; */
    /* border: 1px solid black; */
    /* pointer-events: none; */
    /* background-color: lightyellow; */
    background-color: white;

}





/* okienka minimini */
/* koniec */





.btn_create,
.btn_clone,
.btn_clone_nz
{
/* height: 80px; */
/* width: 100px; */
/* border: 1px solid black; */
/* box-sizing: border-box; */
/* text-align:center; */
padding: 0px;
margin: 1px;
border: 3px solid grey;
}





.btn_create:hover
{

border: 3px solid lime;
}


.btn_clone:hover
{

border: 3px solid red;
}

.btn_clone_nz:hover,
.btn_clone_multiPP:hover
{

border: 3px solid gold;
/* zoom: 220%; */
}










.btn_strielaADRES:hover{
fill: green;
}
.btn_strielaPAPIER:hover{
    fill: red;
}
.btn_strielaFILTERPANEL:hover{
    fill: pink;
}
.btn_strielaWCZYTAJ:hover{
    fill: blue;
}
.btn_strielaZAPISZ:hover{
    fill: cyan;
}
.btn_strielaTILES:hover{
background-color: pink;
}

/* .btn_strielaWYCENA:hover{
background-color: green;
} */


.btn_strielaMINI:hover{
fill: orange;
/* fill: yellow; */


}

/* cursor byl w innym miejscu i dzialal dobrze */


.strielaL:hover,
.strielaP:hover,
.strielaUPGRADE:hover,
.strielaDOWNGRADE:hover
{

background-color: white;
border: 3px solid black;
stroke: black;
fill: orange;
rotate: 100%;
rotate: 90;
}

.strielaL,
.strielaP,
.strielaUPGRADE,
.strielaDOWNGRADE

{
/* height:24px;
width:24px; */
/* text-align: center; */
/* margin-left: auto; */
/* margin-right: auto; */
/* nic */
/* nic */
/* nic */
zoom: 80%;
stroke: black;
fill: black;

}
.strielaL,
.strielaP

{
/* float: left; */
/* zoom: 200%; */
}
.strielaL

{
transform: rotate(180deg);
}

.strielaUPGRADE
{
transform: rotate(270deg);
}
.strielaDOWNGRADE
{
transform: rotate(90deg);
}





/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */



/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */



/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */



/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */



#svgMESSmini
{
margin:5px;

width: 75px;

/* border: 1px solid black; */


/* zoom: 20%; */

/* scale: 20%; */
/* transform: scale(0.2); */
/* oba problem z paddingiem jak w zoom */



/* transform: scale(0.5); */
/* transform-origin: top left; */
/* margin-top: 5px; */


/* text-align: center; */
margin-left: auto;
margin-right: auto;
background-color: lightyellow;
/* position:fixed;
top:130px;
left:300px; */

/* top: 150px; */
/* position: absolute; */
}





/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.moveP,
.moveL{
/* zoom:70% */
height: 3vh;
    /* height: 3vh; */
}

/* w CRUDselectEDIT */
.btn_moveLL_selectEDIT,
.btn_moveL_selectEDIT,
.btn_moveC_selectEDIT,
.btn_moveP_selectEDIT,
.btn_movePP_selectEDIT
{

background-color: white;
border: 0px;
font-size: 1.8vh;
/* height: 3vh; */
white-space: nowrap;
width: 4vw;
}

.btn_moveLL_selectEDIT:hover,
.btn_moveL_selectEDIT:hover,
.btn_moveC_selectEDIT:hover,
.btn_moveP_selectEDIT:hover,
.btn_movePP_selectEDIT:hover
{

stroke: yellow;
}

.btn_move_selectEDIT
{
/* float: left; */
/* padding: 0px; */
background-color: grey;
/* border: 1px solid black; */
/* border-collapse: collapse; */
width: 100%;
height: 4vh;
}


.btn_moveC_selectEDIT

{
    /* box-sizing: border-box; */
    width: 100%;
    /* width: 300px; */
    margin-left: 0%;
    margin-right: 0%;
    text-align: center;
    background-color: gray;
/* width: max-content; */
/* width: min-content; */
/* min jest ciekawe, zwija wiersze do słów */

/* margin-left: auto; */
/* margin-right: auto; */
}








/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */









/* TABLICE */


#tabl_elementyscalone{
    }

.tr_elementyscalone{
border:1px solid black;
margin-left: auto;
margin-right: auto;
background-color: darkkhaki;
    }



#skala{
width: 100px;
border:3px solid black;
}



.klawa{

margin-left: auto;
margin-right: auto;
}
.tradmin{

height:10px;
}
.tdklawa{

width:30px;
height:30px;
text-align: center;
}








.tdminiFIRST,
.tdminiLAST
{

/* width:5px; */
text-align: center;
white-space: nowrap;
width:5vw;
}

.tdmini{

/* width:5px; */
text-align: center;
white-space: nowrap;
}






.tdmaxi{
/* border:1px solid black; */
/* width:45px; */
text-align: center;
}


.tdopis{
width: 100%;
height: 100px;
overflow-y: scroll;
background-color: white;
font-size: 14px;
}









/* WSZYSTKO W MAINN C */
/* WSZYSTKO W MAINN C */
/* WSZYSTKO W MAINN C */
/* WSZYSTKO W MAINN C */


.button span {
    font-size: 2vw; /* Adjust the text size relative to the viewport width */
}




/* .btn_w100{
width: 250px;
height: 5vh;
margin: 0.5vh;
text-align: left;
border: none;
cursor: pointer;
display:flex;
} */



.spamGUZIEC {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.1vh; /* Początkowa wielkość */
    /* max-width: 100%; */
    /* max-height: 100%; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1; /* Dopasowanie do przycisku */
}





#inwestycjaFULL{

max-height: 200px;
overflow-y: scroll;
top:600px;

}

#zakresFULL{

max-height: 200px;
overflow-y: scroll;
top:600px;

}


.tytul-display,
.data-display,
.inwestor-display,
.projekt-display
{

    float: left;
}


#spanTYTULzadaj, #spanDATAzadaj, #spanINWESTORzadaj, #spanPROJEKTzadaj 
{
    /* float: right; */
    float: left;
}

#inputTYTUL, #inputDATA, #inputINWESTOR, #inputPROJEKT
{
    float: right;
    /* float: left; */


    width: 100%;
    height: 45px;
    resize: vertical;

}


#buttonTYTULzadaj, #buttonDATAzadaj, #buttonINWESTORzadaj, #buttonPROJEKTzadaj
{
    float: right;
}





.btn_w100 {
    width: 250px;
    height: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    max-width: 25vw;
    border: none;
    background-color: lightgray;
}

.btn_w100:hover{
    background-color: gold;
}


/* 

.btn_w80 {
    width: 200px;
    max-width: 20vw;
    height: 3vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    max-width: 25vw;
    display: inline-flex;
    border: none;
    background-color: lightgray;
}

//nylo overflow i flex


.btn_w80:hover{
    background-color: gold;
} */
/* sttabilne */




.btn_w80 {
  width: 200px;
  max-width: 25vw;
  height: 3vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: lightgray;
  /* font-size: 14px; */
  color: black;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn_w80:hover {
  background-color: gold;
}

.btn_w80:disabled {
  cursor: not-allowed;
  background-color: lightgray;
}

.btn_w80:disabled:hover {
  /* background-color: lightgray; */
}

.btn_w80:disabled {
  /* background-color: #ccc; */
  color: #999 !important;
  /* cursor: not-allowed; */
  /* opacity: 0.7; */
}
/* //ratowanie wyszaerzenia buttona disabled */


.btn_strielaSAVE
{
    /* width: 25%; */
    /* background: none; */
    border: none;
    text-align: center;
    /* scale: 70%; */
    height: 3vh;
    display: inline-flex;
    margin: 0.1vh;
}

.btn_strielaSAVE:enabled:hover
{
    background-color: blue;
    fill: white;
    /* color: white; */
}











.icon {
    /* width: auto; */
    height: 65%; 
    /* Skaluje SVG do wysokości przycisku */
    /* fill: currentColor;  */
    /* Ustawia kolor SVG na kolor tekstu */
  }
.icon2 {
    /* width: auto; */
    height: 100%; 
  }
.icon3 {
    /* width: auto; */
    height: 100%; 
  }

.btn_move_zoom
{
    height: 3vh;
    margin: 0.3vh;
    text-align: center;
    border: none;
    cursor: pointer;
    display:flex;
}






.btn_font1vw{
font-size: 0.7vw;
}



.tdopis:hover{
    /* background-color: yellow; */
    /* zoom: 100%; */
}


#checkboxAuto,
#checkboxManual
{
    width: 23px;
    height:23px;
    background-color: greenyellow;
    border:1px soli black;
    border-radius: 2px;   
    word-wrap: break-word;
margin: 1px;
}

.KOSTKAmidi
{
width: 73px;
height:23px;
background-color: greenyellow;
border:1px soli black;
border-radius: 2px;   
word-wrap: break-word;
margin: 1px;
}

.KOSTKAmini
{
width: 30px;
height:15px;
background-color: greenyellow;
border:1px soli black;
border-radius: 1px;   
word-wrap: break-word;
margin: 1px;
}

.KOSTKAmidiBUFOR
{
width: 73px;
height:17px;
background-color: pink;
border:1px soli black;
border-radius: 1px;   
word-wrap: break-word;
margin: 1px;
}



.KOSTKAmaxi
{
width: 73px;
height:51px;
background-color: greenyellow;
border:1px soli black;
border-radius: 3px;   
word-wrap: break-word;
margin: 1px;
}

.KOSTKA:hover,
.KOSTKAmini:hover,
.KOSTKAmidi:hover
{

background-color: white;

}



.plusbutton{
width: 30px;
height:30px;
background-color: greenyellow;
border:1px solid black;
border-radius: 15px;

}





.plusbutton:hover{
/* width: 40px;
height:40px;
border-radius: 20px; */
background-color:white;

}














/* plan syt */
/* plan syt */
/* plan syt */
/* plan syt */
/* plan syt */
/* plan syt */
/* plan syt */
/* plan syt */
/* plan syt */









/* do body na start?? [tag] */
/* // // float:left; */










#FOOTcontrols{
  float:left;
  border: 3px solid pink;
  max-height: 150px;
  /* width: 20vh; */
}

/* .leaflet-overlay-pane path {
    stroke: orange !important;
    stroke-width: 3px !important;
    opacity: 3.8 !important;
  }

.leaflet-overlay-pane svg {
    z-index: 2000 !important;
} */








    /* <div 
    class="
    leaflet-marker-icon 
    leaflet-div-icon 
    leaflet-editing-icon 
    leaflet-touch-icon 
    leaflet-zoom-animated 
    leaflet-interactive 
    leaflet-marker-draggable" 
    */





.leaflet-marker-icon,
.leaflet-div-icon,
.leaflet-editing-icon 
{
  z-index: 2000 !important;
}



.buttonLAYERSedit {
    /* background: white; */
    background-color:white;
    border: 0px solid gray;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    /* 
    font-weight: bold;
    padding: 10px;
    display: block;
    line-height: 25px;
    height: auto; */
}




#messGLOBEscreen {
  width: 400px;
  height: 400px;
  background: yellow;
}
#messGLOBE {
  width: 800px;
  height: 800px;
  background: lightgreen;
}
canvas { display: block; }










#map { 
  height: 550px; 
  /* width: -webkit-fill-available; */
  /* width: 550px; */
  width: 100%;
  float: left;
  border: 1px solid black;
  box-sizing: border-box; /* Ustawia obramowanie do środka */
  left: 0px;
  bottom: 0px;

}



  #mapORIENTA4 { 
  /* height: 596px;  */
  /* width: 422px; */
  /* height: 594px; 
  width: 420px; */
  float: left;
  background-color: yellow;
  border: 1px solid black;
  box-sizing: border-box; /* Ustawia obramowanie do środka */


  position: absolute;
  left: -5000px;
  bottom: -5000px;

  }

  
  
  #mapORIENT { 
      height: 594px;
      width: 420px;
      /* bardzo wazne, od tego zalerzy rozmiar i kształt przy zapisie do JPG */
      /* bardzo wazne, od tego zalerzy rozmiar i kształt przy zapisie do JPG */
      /* bardzo wazne, od tego zalerzy rozmiar i kształt przy zapisie do JPG */
    }
    
    #svgPLANSYT,
    #proFIL { 
    height: 594px;
    width: 420px;
    position: absolute;
  left: -5000px;
  bottom: -5000px;
    }






  #PLANsuwaki 
  { 
  /* height: 594px; */
  width: 420px;
  border: 1px solid black;
  /* overflow-y: scroll; */
  background-color: silver;
  }




  #PRZYmapADMIN { 
  height: 600px; 
  width: 400px;
  /* width: 100%; */
  float: left;
  background-color: lightpink;
}



  .oknoHARTY { 
  height: 200px;
  float: left; 
  }


  .leaflet-control-scale {
  bottom: 25px; /* Adjust this value to move the control vertically */
  left: 50px;   /* Adjust this value to move the control horizontally */
}


.leaflet-control-attribution {

}



.leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-popup {
  background: none; /* Usuwa domyślne tło */
  border: none; /* Usuwa domyślną obwódkę */
  box-shadow: none; /* Usuwa cień */
  /* display: none; */
}


.leaflet-popup-content-wrapper
/* .leaflet-popup  */
{
    /* border-radius: 3;  */
    /* border: black;  */

}




.dist-marker {
	font-size: 9px;
	border: 1px solid #777;
	border-radius: 10px;
	text-align: center;
	color: #000;
	background: #fff;
}




  .dot {
    fill: black;
  }






  #mapORIENT.gray-tone {
    filter: grayscale(1); /* Ustaw mapę w tonacji szarej */
  }

  #mapORIENT.color-tone {
    filter: none; /* Przywróć kol styl mapy */
  }





/* przycisk dzialka-goportal */
/* przycisk dzialka-goportal */

.klikDZIALKAkomplet {
    display: inline-block;
    background: #f4f4f4;
    /* border: 1px solid #ccc; */
    border-radius: 10px;
    padding: 3px 3px;
    margin: 3px;
    vertical-align: top;
  }
  
  .klikDZIALKAodczyt {
    background: transparent;
    border: none;
    cursor: pointer;
    /* font-weight: bold; */
    padding: 3px;
    margin-right: 6px;
  }
  
  .klikDZIALKAlogo img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
  


  .klikDZIALKAkomplet:hover {
    background-color: #e9e9e9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  
  
  /* .klikDZIALKAlogo {
    display: inline-block;
    } */
    
    
    /* przycisk dzialka-goportal */
    /* przycisk dzialka-goportal */
    
    
    .zoom-btn.active {
      background-color: gold;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      /* color: white; */
      /* font-weight: bold; */
    }
    /* skala na orientacji guziec zoom active   */
    
    
    .kwaliOBIEKTwiersz:hover {
      background-color: gold;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    
    
    
    /* [id^="kontener"] {
    column-count: 3;
    column-gap: 12px;
    max-width: 100%;
  }
  
  [id^="kontener"] img {
    width: 100%;
    margin-bottom: 12px;
    display: block;
    border-radius: 6px;
    transition: transform 0.3s ease;
  }
  
  [id^="kontener"] img:hover {
    transform: scale(1.05);
    z-index: 1;
  } */

  /* oznacza: „wybierz wszystkie elementy, których atrybut id zaczyna się od kontener” */
/* ok, daje efekt masonery, powieksza zdjecia po najechaniu i rozsuwa niepotrzebne */

  [id^="kontener"] {
    column-count: 3;
    column-gap: 12px;
  }
  
  [id^="kontener"] .fotoWrapper {
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    border-radius: 6px;
  }
  
  [id^="kontener"] .fotoWrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease, transform-origin 0.2s;
  }
  
  [id^="kontener"] .fotoWrapper:hover img {
    transform: scale(1.3);
  }



/* 
  .fotoWrapper {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 12px;
  }
  
  .fotoWrapper img {
    transition: transform 0.3s ease, transform-origin 0.2s;
    width: 100%;
    height: auto;
    display: block;
  } */
  /* //obsługa powiekszania zdjątek w miejscowki */













  #fullscreenGaleria {
    position: fixed;
    z-index: 9999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
  }
  
  #fullscreenGaleria img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px black;
  }
  
  #fullscreenGaleria span {
    color: white;
    font-size: 48px;
    cursor: pointer;
    user-select: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  #lewo { left: 20px; }
  #prawo { right: 20px; }
  #zamknijGalerie {
    top: 20px;
    right: 30px;
    transform: none;
    font-size: 36px;
  }
  




  @media (max-width: 768px) {
    [id^="kontener"] {
      column-count: 2;
    }
  }
  @media (max-width: 480px) {
    [id^="kontener"] {
      column-count: 1;
    }
  }

  /* Dodaj media query, żeby układ dobrze się skalował na mniejszych ekranach: */
/* coś to pamaga ale to jest do kompleksowego rozwiązania */



  






/* podswietlenie kliknietych polygonów */
/* podswietlenie kliknietych polygonów */



.leaflet-interactive.pulsujacy-polygon {
  stroke: orange;
  stroke-width: 3;
  stroke-dasharray: 10;
  stroke-dashoffset: 0;
  animation: dashanim 1s linear infinite, fillpulse 2s ease-in-out infinite;
  fill: gold;
  fill-opacity: 0.5;
}

@keyframes dashanim {
  to {
    stroke-dashoffset: 20;
  }
}

@keyframes fillpulse {
  0%, 100% {
    fill-opacity: 0.3;
  }
  50% {
    fill-opacity: 0.7;
  }
}




/* podswietlenie kliknietych polygonów */
/* podswietlenie kliknietych polygonów */






/* czekadelko laduj 3d */
/* czekadelko laduj 3d */

/* 

#loader {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  padding: 12px 20px;
  border-radius: 8px;
  font-family: sans-serif;
  font-size: 16px;
  z-index: 9999;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: none;
}
 */




/* czekadelko laduj 3d */









/* #compass {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  color: white;
  font-size: 24px;
  font-weight: bold;
  user-select: none;
}
.arrow {
  transform-origin: center center;
  transition: transform 0.2s ease;
}


prosty kompas z jedną strzałką
 */




/* 




#compass {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-family: sans-serif;
  user-select: none;
}

.arrow {
  position: absolute;
  font-size: 24px;
  color: red;
  transform-origin: center center;
  transition: transform 0.2s ease;
}

.arrow {
  pointer-events: none;
}

.arrow svg {
  transition: transform 0.2s ease;
  transform-origin: center center;
}



.labels {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.labels span {
  position: absolute;
  color: white;
  font-size: 12px;
  font-weight: bold;
  z-index: 2000;
}


.labels span {
  pointer-events: auto;
}


.north { top: 4px; left: 50%; transform: translateX(-50%); }
.south { bottom: 4px; left: 50%; transform: translateX(-50%) rotate(180deg); }
.east  { right: 4px; top: 50%; transform: translateY(-50%) rotate(90deg); }
.west  { left: 4px; top: 50%; transform: translateY(-50%) rotate(-90deg); }


.labels span {
  position: absolute;
  color: white;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  padding: 2px 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  transition: background 0.2s;
}
.labels span:hover {
  background: rgba(255,255,255,0.3);
} */


#ui-controls,
#compass,
#btn_SCREENSHOT,
#btn_EXPORT {
  display: none;
}



/* Główne okno kompasu */
#compass {
  position: absolute;
  top: 50px;
  left: 10px;
  width: 80px;
  height: 80px;
  /* background: rgba(0, 0, 0, 0.6); */
  background: lightgreen;
  border-radius: 50%;
  z-index: 2000;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  user-select: none;
  pointer-events: auto;
}

/* Strzałka kompasu SVG */
.arrow {
  position: absolute;
  /* width: 24px; */
  /* height: 24px; */
  fill: red;
  z-index: 1999; /* pod literkami */
  pointer-events: none; /* żeby nie blokowała kliknięć */
  transform-origin: center center;
}

.arrow svg {
  width: 100%;
  height: 100%;
  fill: red;
  transform-origin: center center;
  transition: transform 0.2s ease;
}




/* Literki NSWE */
.labels {
  fill: green;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2001;
  pointer-events: none; /* blokuje na kontenerze, ale span ma aktywność */
}

.labels span {
  position: absolute;
  color: white;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  padding: 2px 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  transition: background 0.2s;
  pointer-events: auto; /* span ma interakcję */
}

.labels span:hover {
  background: red;
}

/* Pozycje liter */
.north { top: 4px; left: 50%; transform: translateX(-50%); }
.south { bottom: 4px; left: 50%; transform: translateX(-50%); }
.east  { right: 4px; top: 50%; transform: translateY(-50%); }
.west  { left: 4px; top: 50%; transform: translateY(-50%); }



#mainn_c_SCALONE.disabled {
  pointer-events: none;   /* 🚫 nic nie działa wewnątrz */
  opacity: 0.3;           /* 🎨 wizualne wyszarzenie */
}
/* do blokady main_c scalone jak aktywujemy zapisz */


button {
  user-select: none;        /* 🚫 blokuje zaznaczanie tekstu */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}



.btn_multi_PP_komplet {
  /* width: 400px; */
  height: 110px;
    /* width: 400px; */
    padding: 8px;
    margin: 4px;
    border: 2px solid black;
    border-radius: 20px;
    /* background-color: skyblue; */
    background-color: silver;
    
}

#btn_clone_2S {
  width: 280px;
  height: 100px;
  /* width: 100%; */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  border: none;
}

.OKIENKOpp {
  width: 100%;
  height: 100%;
  /* transform: scaleY(2.25) scaleX(0.5); */
  transform: scaleY(5.25);
  transform-origin: center;
}




.btn_dodajPPpierwszego_2S,
.btn_dodajPP_2S
{
  /* margin-left: auto;
  margin-right: auto; */
}


/* wyswietlanie km nad linią osi */

line.trasa,
line.segment {
    cursor: pointer;
    transition: stroke 0.2s ease;
}

line.trasa:hover,
line.segment:hover {
    stroke: orange;
}


line.trasa,
line.hitbox {
    cursor: pointer;
}

line.hitbox {
    stroke: rgba(0, 0, 0, 0.1); /* mglisty cień */
    stroke-width: 15;
}

.tooltip-km {
    position: absolute;
    background: #222;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 25px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1000;
    display: none;
}

svg {
  overflow: visible;
}

#dynamicOverlay {
  display: block;
}



/* animowana ośplanu sytuacyjnego */
/* .trasa {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
} */




.trasa {
  stroke: black;
  stroke-width: 5;
  stroke-dasharray: 20,5;       /* przerywana linia */
  stroke-dashoffset: 1000;      /* początkowe przesunięcie */
  animation: draw 10s forwards;  /* animacja rysowania */
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}




/* koniec pracy na osi */





/* suwaki i inputy do ustawień osi, km, interwały */
/* suwaki i inputy do ustawień osi, km, interwały */

#target198,
#target199,
/* .target200, */
#target198km,
#target199km,
.target200km
{
  
  width: 85px;
  
  
}


.target200

{
  
  width: 45px;
  
  
}


/* suwaki i inputy do ustawień osi, km, interwały */
/* suwaki i inputy do ustawień osi, km, interwały */





/* zoom na najechanie na svge z planem syt */
/* zoom na najechanie na svge z planem syt */
/* zoom na najechanie na svge z planem syt */







.svgcontainerPLAN {
  /* width: 800px; */
  height: 400px;
  height: 100%;
  overflow: hidden;
  position: relative;
  border: 2px solid black;
  background: lightgreen;
  display: flex;
  justify-content: center;   /* poziomo */
  align-items: center;       /* pionowo */

}

.svgzoomablePLAN {
  transition: transform 0.2s ease;
  transform-origin: center center;
  background: lightgreen;
  height: auto;
}


.svgcontainerPROFIL {
  /* width: 800px; */
  height: 400px;
  height: 100%;
  overflow: hidden;
  position: relative;
  border: 2px solid black;
  background: lightgreen;
  display: flex;
  justify-content: center;   /* poziomo */
  align-items: center;       /* pionowo */

}



/* zoom na najechanie na svge z planem syt */
/* zoom na najechanie na svge z planem syt */
/* zoom na najechanie na svge z planem syt */



/* get help */
/* get help */
/* get help */


/* border-bottom: 1px dashed #555; */

/* get help */
/* get help */
/* get help */



/* profil podlozny */
/* profil podlozny */

.svgcontainerPROFIL {
  width: 100%;
  /* height: 100vh;  */
  /* lub 2970px jeśli chcesz sztywno */
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #f9f9f9; /* opcjonalnie: tło dla kontrastu */
  border: 1px solid #ccc; /* opcjonalnie: obramowanie */
}

.svgzoomablePROFIL {
  height: 100%;
  width: auto;
  flex-shrink: 0; /* zapobiega skalowaniu SVG */
}


/* profil podlozny */
/* profil podlozny */



/* progress bar do wczytaj teren */
/* progress bar do wczytaj teren */


#terenProgressBarContainer {
  width: 100%;
  background: #eee;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
}
#terenProgressBar {
  height: 100%;
  width: 0%;
  background: #2196f3;
  transition: width 0.3s ease;
}
#terenProgressText {
  margin-top: 5px;
  font-size: 14px;
  text-align: center;
}


/* progress bar do wczytaj teren */
/* progress bar do wczytaj teren */




/* profilanel */
/* profilanel */
/* profilanel */

.edit-fieldPROFILPANEL

{
  
  width: 55px;
  
  
}

.xyedit-fieldPROFILPANEL

{
  
  width: 55px;
  
  
}

/* profilanel */
/* profilanel */
/* profilanel */


/* plan poprzeczek */
/* plan poprzeczek */
/* plan poprzeczek */

.svgcontainerPLANPOPRZECZEK {
  overflow: hidden;
  width: 100%;
  /* height: 600px; */
  border: 1px solid #ccc;
  background: #a25e5e; /* żeby było widać, że to cały obszar */
  cursor: grab;
  pointer-events: all;
}
.svgcontainerPLANPOPRZECZEKrect {
  background: #1fad2b; /* żeby było widać, że to cały obszar */
}

.svgzoomablePLANPOPRZECZEK:active {
  cursor: grabbing;
}

/* plan poprzeczek */
/* plan poprzeczek */


/* poprzeczki */
/* poprzeczki */

.btn_clone_multiPP {
  width: 280px;
  height: 100px;
  /* width: 100%; */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  border: none;
}


.OKIENKOppPOPRZECZKI {
  width: 100%;
  height: 100%;
  /* transform: scaleY(2.25) scaleX(0.5); */
  transform: scaleY(1.25);
  transform-origin: center;
}

/* poprzeczki */
/* poprzeczki */



/* poprzeczki nastawy */
/* poprzeczki nastawy */
/* poprzeczki nastawy */

.multiPPnastawy
{
  width: 100%;
  height: 100%;
  background: yellow;
  background-color: pink; /* opcjonalnie: tło dla kontrastu */
}

/* poprzeczki nastawy */
/* poprzeczki nastawy */
/* poprzeczki nastawy */




@media (max-width: 768px) {
  body.info2 {
    /* overflow-y: auto !important;   */
    /* overflow-x: hidden !important; */
  }

  .footer{

      position: fixed !important;  /* wymusza nadpisanie absolute */
      bottom: 0 !important;      /* resetuje bottom */
      top: auto !important;         /* resetuje top */

  }
}
/* Problem w tym, że Twoje reguły globalne mają większą „siłę” niż media query, bo 
CSS czyta je w kolejności i czasem position: absolute zostaje. */