body{
  --orang: orange;
  --blu: deepskyblue;
  --gra: darkslategray;
  --gree: forestgreen;
  --fs: mediumblue;
  --fd: rgba(150, 250, 57, 0.548);
  --rowop: 50px;
}
/*Czcionka w mobilnej wersji*/
div.mobile{
  font-family: sans-serif;
  font-size: 16px
}
/*Czcionka w desktopowej wersji*/
div.desktop{
  font-family: sans-serif;
  font-size: 16px;
}
/*PARAGRAF mniejsza czcionka wersja mobilna*/
p{
  font-size: 12px;
}
/*PARAGRAF mniejsza czcionka wersja desktopowa*/
p.desk{
  font-size: 14px;
}
/*INFO NA TEMAT PRODUKTU*/
.accordion-content span{
  display: block;
  background-color: rgb(255, 255, 255);
  color:black;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  min-height: 30px;
  text-size-adjust: 20px;
  padding-top: 15px;
  padding-bottom: 5px;
  /*BORDER ODPOWIEDZIALNY ZA ŚRODEK*/
  border-bottom: solid 1px lightgray;
}

/*POMARAŃCZOWY*/
.orang{
  background-color: var(--orang);
  width: 100%;
  display: block;
  text-align: center;
  height: 40px;
  color: white;
  padding-top: 5px;
  padding-bottom: 5px;
}
/*NIEBIESKI*/
.blu{
  background-color:var(--blu);
  width: 100%;
  display: block;
  text-align: center;
  height: 40px;
  color: white;
  padding-top: 5px;
  padding-bottom: 5px;
}
/*SZARY*/
.gra{
  background-color:var(--gra);
  width: 100%;
  display: block;
  text-align: center;
  height: 40px;
  color: white;
  padding-top: 5px;
  padding-bottom: 5px;
}
/*Informacje na temat produktu*/
.info{
background-color: white;
color: black;
text-align: left;
min-height: 50px;
}
/*ZIELONY*/
span.gree{
background-color: var(--gree);
color: white;
text-align: center;
height: 40px;
padding-top: 5px;
padding-bottom: 5px;
}
/*FUNKCJE STANDARDOWE*/
span.FS{
background-color: #00b72a;
color: white;
text-align: center;
height: 35px;
padding-top: 5px;
padding-bottom: 5px;
}
/*FUNKCJE DODATKOWE ZA OPŁATĄ*/
span.FD{
  background-color:var(--fd);
  color: black;
  text-align: center;
  height: 35px;
  padding-top: 5px;
  padding-bottom: 5px;
}
/*OPCJE PROGRAMU*/
span.OP{
border-top: solid 1px lightgray;
text-align: center;
color:black;
padding-top: 5px;
padding-bottom: 5px;
}
/*WYSKAKUJĄCE OKIENKO PO NAJECHANIU*/
.tooltip {
    display: inline-block;
    opacity: 1;
    z-index: 0;
} 
.tooltip .tooltiptext {
    visibility: hidden;
    width: 320px;
    min-height: 20px;
    background-color: rgb(255, 255, 255);
    color: gray;
    text-align: left;
    padding: 20px 0;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
    border-radius: 0px;
    position: absolute;
    z-index: 999;
    border: solid 1px lightgray;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
.tooltip:hover div[class^='tooltip']:not(:hover) {
	visibility: hidden;
}
div.gree{
  background-color: var(--gree);
  color: white;
  text-align: center;
  height: var(--rowop);
  padding-top: 10px;
  padding-bottom: 46px !important;
}
div.orang{
  background-color: var(--orang);
  display: block;
  text-align: center;
  height: var(--rowop);
  color: white;
  padding-top: 10px;
  padding-bottom: 5px;
}
/*NIEBIESKI*/
div.blu{
  background-color: var(--blu);
  display: block;
  text-align: center;
  height: var(--rowop);
  color: white;
  padding-top: 10px;
  padding-bottom: 5px;
}
/*SZARY*/
div.gra{
  background-color:var(--gra);
  display: block;
  text-align: center;
  height: var(--rowop);
  color: white;
  padding-top: 10px;
  padding-bottom: 5px;
}
.table{
background-color: rgb(236, 236, 236);
border: none;
font-weight: bold;
box-shadow:0px 0px 19px 6px lightgrey;
}
div.col, div.col-5{
  border-right: solid 1px lightgray;
  border-bottom: solid 1px lightgray ;
  min-height: 20px;
  max-height: 100px; 
  text-align: center;
      padding-top: 23px;
    padding-bottom: 23px;
}
div.col-5{
text-align: left;
	padding-left: 22px;
}
div.container.legenda{
margin-top: 30px;
margin-bottom: 80px;
font-weight: bold;
}
div.container.header div.row.header div.col.header{
margin-top: 50px;
margin-bottom: 50px;
border: none;
text-decoration: underline;
color: black;
}

div.col:last-child, div.col-5:last-child {
	border-right:none;
}
.gree {
	border-top:0px !important;
	border-bottom:0px !important;
}
div.col {
	z-index:1;
}
.tooltip {
	z-index: 999;
}
.orang, .gra, .blu {
	padding-bottom:48px !important;
	border-bottom:0px !important;
	border-left:0px !important;
	border-right:0px !important;
}

.MOBILE .orang,.MOBILE .gra,.MOBILE .blu {
	border:none;
	padding-top:25px;
	padding-bottom:20px;
}
.MOBILE div.container.header div.row.header div.col.header {
	margin-top:inherit;
	margin-bottom: auto;
}
.card, .card-header {
	border:none;
	border-bottom:0px;
	border-top:0px;
	padding:0;
}
.card-header button[aria-expanded="false"], .card-header button[aria-expanded="true"] {
	    background-position: 95% !important;
}

.MOBILE span.gree, .MOBILE span.FS, .MOBILE span.FD {
	    height: 60px;
    padding-top: 20px;
    padding-bottom: 5px;
	border:0px;
}
.accordion-content span {
	padding-top: 20px;
    padding-bottom: 20px;
}
.tooltip img {
	left: 8px;
    position: relative;
    top: -2px;
	z-index: 2;
}
.tooltip .tooltiptext {
	z-index: 3;
}
.gree.elemnt {
	
}
.MOBILE span.gree, .MOBILE span.FS, .MOBILE span.FD {
	height: auto;
	padding-bottom: 20px;
}
.page h1 {
	max-width: 625px;
}
.tooltiptext {
	z-index: 999 !important;
}
.legenda img{
	margin-right: 2px;
}
.legenda span:last-child img{
	margin-right: 3px;
}