@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400&display=swap');

body {
--czcionka: 'Ubuntu', sans-serif;
--sajz: 15px;
--lajn: 18px;
--tenkolor: #a73282;
--menukolor: #770c55;
--tenkola: rgb(167,50,30);
--menukola: rgb(119,12,85);
}

P  			{font-size: var(--sajz); font-family: var(--czcionka); color: #505050;line-height: var(--lajn)}
table		{}
TD  			{font-size: var(--sajz); font-family: var(--czcionka); color: #505050;line-height: var(--lajn) background-repeat: no-repeat;}
pre  			{font-size: var(--sajz); font-family: var(--czcionka); color: #505050;line-height: var(--lajn)}
input,textarea,select {margin: auto;height:35px; border: solid 1px silver;border-radius: 0;padding: 5px;margin-bottom: 5px;}
.must			{text-decoration: none; color: white; font-family: var(--czcionka); font-size: var(--sajz); background-repeat: no-repeat;background-color: #A5A4A4; border-radius: 4px;}

BODY 			{font-size: var(--sajz); font-family: var(--czcionka); color: #404040; font-weight: normal; text-decoration: none;line-height: var(--lajn) background-repeat: no-repeat;background-position: top;}
H1,img 			{font-size: var(--sajz); font-family: var(--czcionka); color: #404040; font-weight: normal; text-decoration: none;line-height: var(--lajn)}
.tit			{font-size: 21px; font-family: var(--czcionka); color: #63214F; font-weight: bold; text-decoration: none;line-height: 21px;}
.midtit			{font-size: 18px; font-family: var(--czcionka); color: #8F3172; font-weight: bold; text-decoration: none;line-height: 19px;}
.subtit			{font-size: 14px; font-family: var(--czcionka); color: #8F3172; font-weight: bold; text-decoration: none;line-height: 17px;}
.subblack		{font-size: 14px; font-family: var(--czcionka); color: #333333; font-weight: bold; text-decoration: none;line-height: 15px;}

.homeinfo 	 {display: block; width: 100%; height: auto; font-size: 20px; text-align: left; margin-top: 20px; padding: 15px;}
.homeinfo ul {display: block; position: relative; width: 100%; height: auto; margin-bottom: 50px !important;  list-style-type: disc !important; list-style: disc !important;}
.homeinfo li {display: inline-block; position: relative; width: 100%; margin-top: 20px;}
.homeinfo span {margin-top: 220px;position: relative; top: 20px;}

.koszykwkomu {height: 22px; position: relative; top: -5px;filter: invert(15%) sepia(96%) saturate(7482%) hue-rotate(360deg) brightness(100%) contrast(106%);}

.button {display: block; border: solid 1px silver; border-radius: 2px; padding: 8px; max-width: 230px; background: white;}
.button:hover {background: whitesmoke;}
.malybut {display: inline-block; border: solid 1px silver; border-radius: 2px; padding: 6px; width: 120px; background: white;margin: 5px;}
.malybut:hover {background: whitesmoke;}
.midbut {display: inline-block; border: solid 1px silver; border-radius: 2px; padding: 8px; width: 170px; background: white;margin: 5px;}
.midbut:hover {background: whitesmoke;}
.centered {text-align: center;}
.adres {padding: 15px; border: solid 1px silver; border-radius: 7px; margin: 15px; min-width: 300px;}
.adresy {width: 100%; display: flex;flex-wrap: wrap; justify-content: center;}

H3 {font-size: 30px; color: var(--menukolor);}
.adresylink {max-width: 250px; background: white; padding: 5px; border: solid silver 1px; border-radius: 2px;}
.poleadres {width: 250px; padding: 7px; border: solid 1px silver; border-radius: 3px;}
.uwagiadres {width: 250px; height: 50px;}

.koszykadres {max-width: 100%; text-align: left; padding: 10px; border: solid 1px silver; border-radius: 7px; margin-bottom: 20px; background: whitesmoke;}
.koszyktresc {max-width: 100%; text-align: left; padding: 10px; border: solid 1px silver; border-radius: 7px; margin-bottom: 20px; background: whitesmoke;}

.koszykbutton {display: inline-block; border: solid 1px silver; border-radius: 2px; padding: 8px; max-width: 230px; background: gray; color: white;}
.koszykbutton:hover {background: silver; color: white;}

.submenu {margin-right: 10px;}
.szerokosc {max-width: 100vw; padding: 15px;}
.numerinput {width: 30px;}
.szybkilink {width: 230px; background: white; padding: 5px; border: solid silver 1px; border-radius: 2px;}

.bebechystrony {max-width: 1200px; margin: auto;padding: 0;text-align: center;}

.topson {
 height: 70px;
 width: 100%;
 max-width: 1200px;
 margin: auto;
 background: white;
}

.pozalogowaniunagl {width: 100%;text-align: left;}
.inicjal {
 font-weight: bold;
 font-size: 61px;
 color: whitesmoke;
 padding-left: 15px;
 text-align: left;
 width: 100%;
}
.logowando {position: relative; left: 0; top: 50px; margin-bottom: 30px; padding: 40px; width: 100vw; background-color: whitesmoke;}
.stronalogowania {position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-color: white; margin: auto;}
.pole	{height:35px; width: 250px; border: solid 1px silver;border-radius: 0;padding: 5px; margin-bottom: 5px;}

.container {max-width: 1200px; margin: auto;padding-top: 5px;}
.row {margin: auto; margin-bottom: 20px; background: white; padding: 0;}

.napis {width: 100%; border-bottom: solid 1px silver;font-size: 25px;text-align: right; padding-bottom: 6px; padding-right: 15px;}

 .item {
  padding: 5px;
  width: 100%;
  margin-bottom: 10px;
 }

 .pikczer {height: 100%; width: 50%; text-align: center; background: whitesmoke;border-top: solid 1px silver;border-left: solid 1px silver;border-bottom: solid 1px silver;}
 .pikczer img {max-width: 80%; margin: 15px;}
 .details {height:100%; width: 50%;border-top: solid 1px silver;border-right: solid 1px silver;border-bottom: solid 1px silver;}
 
@media only screen and (min-width: 770px) {
 .details {padding: 10px; text-align: right;}
}
@media only screen and (max-width: 769px) {
 .details {padding: 10px; text-align: right;}
}

 
.zdjatko 		{margin: auto;}
.itemname		{margin: auto;font-size: 18px; font-family: var(--czcionka); color: #a73282; font-weight: bold;margin-bottom: 20px; line-height: 21px;}
.opis			{margin: auto;font-size: 13px;}
.kod			{margin: auto;font-size: 13px;}

.dokosza 		{margin: auto;margin-top: 20px;vertical-align: bottom;}
.niema			{margin: auto;font-size: 13px; font-style: italic;}
.nastanie		{margin: auto;font-size: 13px;}
.cena			{margin: auto;font-size: 13px;}
.sztuk			{margin: auto;height:35px; width: 50px; border: solid 1px silver;border-radius: 0;padding: 5px;position: relative; top:1px;}

.buto			{margin: auto;height:35px; position: relative; top: -1px; border: solid 1px silver;}

a  			{font-size: var(--sajz); font-family: var(--czcionka); color: #444444; text-decoration: none;line-height: var(--lajn)}
a:hover 	{font-size: var(--sajz); font-family: var(--czcionka); color: #606060; text-decoration: none;line-height: var(--lajn)}

.koszyktop {padding: 20px;text-align: left;}
.koszyknaglowek {background-color: var(--menukolor); color: white; margin-bottom: 5px; min-height:40px;}
.koszyknaglpole {background-color: var(--menukolor); color: white; padding:8px 5px 5px 5px;border-left: solid 1px white;}

.koszykrow {background-color: white; margin-bottom: 5px;}
.koszykpoletx {background-color: whitesmoke; padding:10px 0 10px 0;border-left: solid 1px white; font-family: var(--czcionka); border-radius: 3px;}
.koszykpole {background-color: whitesmoke; padding:5px;border-left: solid 1px white; border-radius: 3px;}
.badkoszykpole {background-color: red; padding:5px;}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 0px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: gray; 
  border-radius: 0;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}


/*DD menu*/
@media only screen and (min-width: 600px) {
 .sercz {margin-top: 10px; margin-left: 20px; padding: 5px; border-radius: 5px; height: 30px; width: 200px; align: right}
}
@media only screen and (max-width: 599px) {
 .sercz {margin-top: 10px; margin-left: 20px; padding: 5px; border-radius: 5px; height: 30px; width: 100px; align: right}
}

.btsercz {border:0; background-color: rgba(0, 0, 0, 0.0); padding: 5px; border-radius: 5px;}
.btsercz:hover {background-color: rgba(255, 255, 255, 0.6);}

.hidamn {font-size: 20px;padding: 10px 0 0 5px;color: var(--menukolor);font-family: var(--czcionka);text-transform: lowercase;}
.hidamn:hover {font-size: 20px;}

.basket {margin-left: 15px;margin-top: 5px;font-size: 10px;}
.basket img {height: 27px;padding-top: 2px;}
.basket:hover {font-size: 10px;}

.myacc {margin-left: 15px;margin-top: 5px;}
.myacc img {height: 27px;padding-top: 2px;}

::-webkit-input-placeholder {color: silver;}
::-moz-placeholder {color: silver;}
:-ms-input-placeholder {color: silver;}
:-moz-placeholder {color: silver;}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-box-shadow: 0px 7px 5px -6px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 7px 5px -6px rgba(0,0,0,0.25);
  box-shadow: 0px 7px 5px -6px rgba(0,0,0,0.25);  
}

ul {
  overflow: visible;
  text-align: left;
  align: left;
  list-style-type: none;
  list-style: none; /* Remove list bullets */
  padding: 0;
  margin: 0;
}

li {
 float: left;
 margin:0;
 list-style-position: inherit;
}

li a, .dropbtn {
  display: inline-block;
  text-align: left;
  padding: 6px;
  text-decoration: none;
  align: left;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: whitesmoke;
  border-radius: 2px;
}

li.dropdown {
  display: block;
  padding: 5px;
}

 .fleks {
  display: flex;
  flex-wrap:wrap;
 }
 
@media (min-width: 600px) {
.fleks {
  justify-content: space-between;
  width: 900px;
  max-width: 95vw;
}
 .dropdown:hover .dropdown-content {
  display: flex;
  flex-wrap:wrap;
 }
 .blokmenu {
  width: 200px;
  align-self: left;
 }
}
 
@media (max-width: 599px) {

.fleks {
  justify-content: space-between;
  max-width: 95vw;
}	
 .dropdown-content {
  display: none;
  width: 250px;  
 }
 .dropdown:hover .dropdown-content {
  display: block;
 }
 .blokmenu {
  width: 100%;
  align-self: left;
 } 
}

 .dropdown-content {
  display: none;
  color: gray;
  position: absolute;
  top: 55px;
  /*background-color: rgba(119,12,85,0.93);*/
  background-color: rgba(230,230,230,0.97);
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 12;
  padding: 5px 10px 10px 10px;
  border-radius: 2px;
  border: solid 1px silver;
 }


.dropdown-content a {
  background-color: rgba(255,255,255,0.95);
  color: gray;
  padding: 7px 0 7px 15px;
  margin: 3px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-radius: 2px;
}

.dropdown-content a:hover {
  background-color: rgba(255,255,255,0.75);
  color: black;
}

.menuszer {
 display: block;
 width: 100%;
 margin-top: 15px;
 text-align: center;
 justify-content: center;
}
.menuszer a {
 display: inline-block;
 width: 100%;
 background: var(--tenkolor);
 color: white;
 text-align: center;
}
/* Koniec DD Menu*/

/*MESSO z góry*/

.tresc {
 position: relative;
 top: -20px;
 font-family: var(--czcionka);
 text-align: left;
 font-size: 15px;
 line-height: 25px;
 color: grey;
}

.page .messages {
 position: fixed;
 width: 1200px;
 max-width: 100vw;
 margin: auto;
 height: 150px;
 z-index: 12;
 border-radius: 3px;
 background-color: white;
 border: 1px solid silver;
 color: black;
 padding: 0;
 font-family: var(--czcionka);
 text-align: center;
 font-size: 25px;
 -webkit-animation: cssAnimation 5s forwards; 
 animation: cssAnimation 5s forwards;
 -webkit-box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.75);
 -moz-box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.75);
 box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.75); 
}

@keyframes cssAnimation {
    0%   {opacity: 1;position: fixed; top: -450px;}
    50%  {opacity: 1;position: fixed; top: 30px;}
	90%  {opacity: 1;position: fixed; top: 30px;}
    100% {opacity: 1;position: fixed; top: -530px;}
}

@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;position: fixed; top: -450px;}
	50%  {opacity: 1;position: fixed; top: 30px;}
    90%  {opacity: 1;position: fixed; top: 30px;}
    100% {opacity: 1;position: fixed; top: -530px;}
}
/* koniec MESSO z góry*/

/* FILTRY SVG */
 .icongreen {filter: invert(62%) sepia(21%) saturate(1963%) hue-rotate(47deg) brightness(99%) contrast(106%);}
 .iconyello {filter: invert(94%) sepia(95%) saturate(2670%) hue-rotate(359deg) brightness(108%) contrast(101%);}
 .iconbeige {filter: invert(84%) sepia(77%) saturate(3751%) hue-rotate(328deg) brightness(98%) contrast(97%);}
 .iconbluey {filter: invert(33%) sepia(80%) saturate(2556%) hue-rotate(196deg) brightness(100%) contrast(110%);}
 .iconredis {filter: invert(15%) sepia(96%) saturate(7482%) hue-rotate(360deg) brightness(100%) contrast(106%);}
 .iconsalmo {filter: invert(51%) sepia(66%) saturate(2208%) hue-rotate(0deg) brightness(102%) contrast(106%);}
 .iconorang {filter: invert(47%) sepia(71%) saturate(1410%) hue-rotate(0deg) brightness(103%) contrast(104%);}
 .iconmagen {filter: invert(18%) sepia(86%) saturate(7489%) hue-rotate(325deg) brightness(105%) contrast(105%);}
 .icokermit {filter: invert(76%) sepia(40%) saturate(1158%) hue-rotate(38deg) brightness(104%) contrast(109%);}
 .iconnavy {filter: invert(19%) sepia(77%) saturate(2190%) hue-rotate(196deg) brightness(92%) contrast(101%);}
 .iconbleki {filter: invert(76%) sepia(4%) saturate(5589%) hue-rotate(183deg) brightness(103%) contrast(101%);}
 .iconlilak {filter: invert(49%) sepia(57%) saturate(3116%) hue-rotate(235deg) brightness(99%) contrast(106%);}
 .icongrayl {filter: invert(100%) sepia(0%) saturate(7476%) hue-rotate(230deg) brightness(72%) contrast(120%);}
 .icongraym {filter: invert(53%) sepia(0%) saturate(0%) hue-rotate(166deg) brightness(94%) contrast(80%);}
 .icongrayd {filter: invert(18%) sepia(11%) saturate(22%) hue-rotate(348deg) brightness(103%) contrast(80%);}
 .iconblack {filter: invert(0%) sepia(100%) saturate(1%) hue-rotate(313deg) brightness(100%) contrast(101%);}
 .iconwhite {filter: invert(100%) sepia(0%) saturate(7498%) hue-rotate(196deg) brightness(101%) contrast(88%);}
 .iconviole {filter: invert(15%) sepia(79%) saturate(5968%) hue-rotate(271deg) brightness(59%) contrast(118%);}
 /* FILTRY SVG KONIEC */
 
 /* TIPY */
 a.tip {}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: whitesmoke 1px solid;
	border-radius: 5px;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: white;
    right: 30px;
    margin: 10px;
    width: 220px;
    position: absolute;
    top: -60px;
    text-decoration: none;
	-webkit-box-shadow: 10px 10px 41px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 41px -4px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 41px -4px rgba(0,0,0,0.75);	
}